feat: #公共组件

src/components/DataSelect.vue

@@ -34,6 +34,12 @@ export default {
   },
 
   watch: {
+    value: {
+      handler(val) {
+        this.newValue = val;
+      },
+      immediate: true
+    },
     newValue: {
       handler(val) {
         this.$emit('input', val);

src/const/dictType.js

@@ -0,0 +1 @@
+export default { BANNER_TYPE: 'BANNER_TYPE' };

src/const/tableColSize.js

@@ -0,0 +1,8 @@
+export default {
+	s: '80px',
+	m: '120px',
+	b: '180px',
+	auto: num => {
+		return `${num}px`;
+	}
+};

src/main.js

@@ -25,6 +25,9 @@ import message from '@/utils/message';
 
 import bus from './utils/bus';
 
+import DICT from '@/const/dictType';
+import TABLECOLSIZE from '@/const/tableColSize';
+
 Vue.prototype.$Bus = bus;
 Vue.prototype.$g_emit = (eventName, payload) => {
   bus.$emit(eventName, payload);
@@ -61,6 +64,12 @@ Vue.prototype.$success = message.success;
 Vue.prototype.$error = message.error;
 Vue.prototype.$warning = message.warning;
 
+// 数据字典搜索关键词
+Vue.prototype.$dict = DICT;
+
+// 表格单列宽度
+Vue.prototype.$col = TABLECOLSIZE;
+
 window.UEDITOR_CONFIG = `${process.env.VUE_APP_BASE_API}/yxl-back-end/framework/oss/ueditor/ueditor-action`;
 window.UEDITOR_SERVER_URL = `${process.env.VUE_APP_BASE_API}/yxl-back-end/framework/oss/ueditor/ueditor-action`;
 // window.UEDITOR_CONFIG = `https://ex.by-health.com/baby-institute-back-end/oss/ueditor/ueditor-action`;

src/views/baseManagement/bannerManagement/index.vue

@@ -20,6 +20,7 @@
 import toolbar from './toolbar';
 import mxFilterList from '@/mixins/filterList';
 import { getList, delItem } from '@/api/base/banner';
+import { getList as getDict } from '@/api/dict';
 
 export default {
   name: 'BannerManagement',
@@ -38,7 +39,7 @@ export default {
         {
           key: 'imgUrl',
           name: '图片',
-          width: '160',
+          width: this.$col.b,
           render: (h, { row }) =>
             h('img', {
               style: {
@@ -59,28 +60,35 @@ export default {
         {
           key: 'type',
           name: '位置',
-          width: '80'
+          minWidth: this.$col.s,
+          render: (h, { row }) => {
+            const item = this.options.find(x => x.value === row.type);
+            if (item) {
+              return h('span', item.label);
+            }
+            return h('span', '-');
+          }
         },
         {
           key: 'name',
           name: '标题',
-          minWidth: '100'
+          minWidth: this.$col.s
         },
         {
           key: 'link',
           name: '链接',
-          minWidth: '180',
+          minWidth: this.$col.m,
           showOverflowTooltip: true
         },
         {
           key: 'sort',
           name: '排序',
-          width: '80'
+          width: this.$col.s
         },
         {
           key: 'isShow',
           name: '状态',
-          width: '80',
+          width: this.$col.s,
           type: 'tag',
           fetchTagType: val => (val ? 'success' : 'info'),
           tagName: row => (row.isShow ? '显示' : '隐藏')
@@ -129,12 +137,14 @@ export default {
             return h('div', action);
           }
         }
-      ]
+      ],
+      options: []
     };
   },
 
   created() {
     this.$g_on('banner_reload', this.reload);
+    this.loadDict();
   },
 
   beforeDestroy() {
@@ -142,6 +152,15 @@ export default {
   },
 
   methods: {
+    async loadDict() {
+      const { data } = await getDict({
+        dictCode: this.$dict.BANNER_TYPE
+      });
+      this.options = data.map(x => ({
+        value: x.value,
+        label: x.name
+      }));
+    },
     handleAdd() {
       this.$BannerItemModal();
     },

src/views/baseManagement/bannerManagement/modal/ItemModal.vue

@@ -15,7 +15,10 @@
         <upload v-model="form.imgUrl" params="prefix=/banner" />
       </el-form-item>
       <el-form-item label="位置" prop="type">
-        <DataSelect v-model="form.type"></DataSelect>
+        <DataSelect
+          v-model="form.type"
+          :params="$dict.BANNER_TYPE"
+        ></DataSelect>
       </el-form-item>
       <el-form-item label="标题" prop="name">
         <el-input v-model="form.name"></el-input>

src/views/baseManagement/bannerManagement/toolbar.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import TYPE from '@/const/type';
+
 export default {
   name: 'BannerManagementToolbar',
 
@@ -13,7 +15,14 @@ export default {
           type: 'DataSelect',
           name: 'type',
           label: '位置',
-          params: 'BANNER_TYPE'
+          params: this.$dict.BANNER_TYPE
+        },
+        {
+          type: 'select',
+          name: 'status',
+          label: '状态',
+          options: TYPE,
+          format: val => (val !== null && val !== '' ? !!val : null)
         }
       ]
     };