fix: Tab name style. (#1003)

* fix: Tab name style.

* fix tooltip text.

src/components/ADempiere/ContainerOptions/LockRecord/index.vue

@@ -20,24 +20,32 @@
   <span v-if="isFirstTab" key="withTooltip">
     <el-tooltip
       v-if="isFirstTab"
-      :content="isLocked ? $t('data.lockRecord') : $t('data.unlockRecord')"
+      :content="tooltipText"
       placement="top"
     >
       <el-button type="text" @click="lockRecord()">
         <i
-          :class="isLocked ? 'el-icon-lock' : 'el-icon-unlock'"
+          :class="{ 'el-icon-lock': isLocked, 'el-icon-unlock': !isLocked }"
           style="font-size: 15px; color: black;"
         />
       </el-button>
     </el-tooltip>
 
-    <span :style="isLocked ? 'color: red;' :'color: #1890ff;'">
+    <slot name="prefix" />
+
+    <span :class="{ 'locked-record': isLocked }">
       {{ tabName }}
     </span>
+
+    <slot name="sufix" />
   </span>
 
   <span v-else key="onlyName">
+    <slot name="prefix" />
+
     {{ tabName }}
+
+    <slot name="sufix" />
   </span>
 </template>
 
@@ -80,6 +88,13 @@ export default defineComponent({
       return !root.isEmptyValue(recordUuid) && recordUuid !== 'create-new'
     }
 
+    const tooltipText = computed(() => {
+      if (isLocked.value) {
+        return root.$t('data.unlockRecord')
+      }
+      return root.$t('data.lockRecord')
+    })
+
     const lockRecord = () => {
       const action = isLocked.value ? 'unlockRecord' : 'lockRecord'
       const { recordId, recordUuid } = getRecordId()
@@ -168,9 +183,16 @@ export default defineComponent({
       isLocked,
       // computed
       isFirstTab,
+      tooltipText,
       // methods
       lockRecord
     }
   }
 })
 </script>
+
+<style lang="scss">
+.locked-record {
+  color: red !important;
+}
+</style>