优化前端字典预览组件

smart-admin-web-javascript/src/components/dict-preview/index.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <template v-for="(item, index) in options">
+    <span>{{ dictValueName }}</span>
-      <template v-if="values.includes(item.valueCode)">
-        {{ item.valueName }}
-        <span> </span>
-      </template>
-    </template>
   </div>
 </template>
 
@@ -21,8 +16,11 @@
     // 当前的值
     value: [Number, String, Array],
   });
-  const values = computed(() => {
+  const dictValueName = computed(() => {
-    if (props.value === null || typeof props.value === 'undefined' || props.value === '') return [];
+    if (props.value === null || typeof props.value === 'undefined' || props.value === '') return '';
-    return Array.isArray(props.value) ? props.value.map((item) => item.valueCode) : props.value.split(',');
+    const valueCodeList = Array.isArray(props.value) ? props.value.map((item) => item.valueCode) : props.value.split(',');
+    const valueNameList = props.options.filter((item) => valueCodeList.includes(item.valueCode)).map((item) => item.valueName);
+
+    return valueNameList.join('，');
   });
 </script>

smart-admin-web-javascript/src/views/business/erp/goods/goods-list.vue

@@ -120,7 +120,7 @@
           {{ text }}
         </template>
         <template v-if="column.dataIndex === 'place'">
-          <DictPreview :options="descList.GOODS_PLACE" :value="text" />
+          <DictPreview :options="descList['GOODS_PLACE']" :value="text" />
         </template>
         <template v-if="column.dataIndex === 'remark'">
           <span>{{ text ? text : '' }}</span>
@@ -199,7 +199,6 @@
   import { smartSentry } from '/@/lib/smart-sentry';
   import TableOperator from '/@/components/support/table-operator/index.vue';
   import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
-  import { GOODS_STATUS_ENUM } from '/@/constants/business/erp/goods-const';
   import DictSelect from '/@/components/support/dict-select/index.vue';
   import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
   import _ from 'lodash';
@@ -236,7 +235,6 @@
       title: '商品状态',
       dataIndex: 'goodsStatus',
       resizable: true,
-      sorter: true,
       filterOptions: {
         type: 'enum-select',
         enumName: 'GOODS_STATUS_ENUM',

smart-admin-web-javascript/src/views/system/employee/components/employee-list/index.vue

@@ -56,7 +56,7 @@
       row-key="employeeId"
       bordered
     >
-      <template #bodyCell="{ text, record, index, column }">
+      <template #bodyCell="{ text, record, column }">
         <template v-if="column.dataIndex === 'administratorFlag'">
           <a-tag color="error" v-if="text">超管</a-tag>
         </template>

smart-admin-web-typescript/src/components/dict-preview/index.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <template v-for="(item, index) in options">
+    <span>{{ dictValueName }}</span>
-      <template v-if="values.includes(item.valueCode)">
-        {{ item.valueName }}
-        <span> </span>
-      </template>
-    </template>
   </div>
 </template>
 
@@ -21,8 +16,11 @@
     // 当前的值
     value: [Number, String, Array],
   });
-  const values = computed(() => {
+  const dictValueName = computed(() => {
-    if (props.value === null || typeof props.value === 'undefined' || props.value === '') return [];
+    if (props.value === null || typeof props.value === 'undefined' || props.value === '') return '';
-    return Array.isArray(props.value) ? props.value.map((item) => item.valueCode) : props.value.split(',');
+    const valueCodeList = Array.isArray(props.value) ? props.value.map((item) => item.valueCode) : props.value.split(',');
+    const valueNameList = props.options.filter((item) => valueCodeList.includes(item.valueCode)).map((item) => item.valueName);
+
+    return valueNameList.join('，');
   });
 </script>

smart-admin-web-typescript/src/views/business/erp/goods/goods-list.vue

@@ -120,7 +120,7 @@
           {{ text }}
         </template>
         <template v-if="column.dataIndex === 'place'">
-          <DictPreview :options="descList.GOODS_PLACE" :value="text" />
+          <DictPreview :options="descList['GOODS_PLACE']" :value="text" />
         </template>
         <template v-if="column.dataIndex === 'remark'">
           <span>{{ text ? text : '' }}</span>
@@ -234,7 +234,6 @@
       title: '商品状态',
       dataIndex: 'goodsStatus',
       resizable: true,
-      sorter: true,
       filterOptions: {
         type: 'enum-select',
         enumName: 'GOODS_STATUS_ENUM',

smart-admin-web-typescript/src/views/system/employee/components/employee-list/index.vue

@@ -56,7 +56,7 @@
       row-key="employeeId"
       bordered
     >
-      <template #bodyCell="{ text, record, index, column }">
+      <template #bodyCell="{ text, record, column }">
         <template v-if="column.dataIndex === 'administratorFlag'">
           <a-tag color="error" v-if="text">超管</a-tag>
         </template>