feat: 优化! 组件抽取公共js数据

src/assets/js/selector.js

@@ -0,0 +1,249 @@
+// 城市选择/筛选 - 省份与字母IndexBar对照数据
+// 在[@/components/selector/AreaSelectorCard.vue]中使用
+export const provinceListMapExp = {
+  '#': ['全国'],
+  A: ['安徽', '澳门'],
+  B: ['北京'],
+  C: ['重庆'],
+  F: ['福建'],
+  G: ['广东', '广西', '贵州', '甘肃'],
+  H: ['河北', '湖北', '黑龙江', '海南', '河南', '湖南'],
+  J: ['吉林', '江苏', '江西'],
+  L: ['辽宁'],
+  N: ['内蒙古', '宁夏'],
+  Q: ['青海'],
+  S: ['山西', '陕西', '上海', '山东', '四川'],
+  T: ['天津', '台湾'],
+  X: ['西藏', '新疆', '香港'],
+  Y: ['云南'],
+  Z: ['浙江']
+}
+
+// 采购单位类型数据
+// 在[@/components/selector/BuyerclassSelectorCard.vue]中使用
+export const cateListMapExp = {
+  '#': ['全部行业'],
+  C: ['财政', '传媒', '城管', '采矿业', '出版广电'],
+  D: ['档案', '党委办', '电信行业'],
+  F: ['法院', '发改'],
+  G: ['工信', '公安', '国资委', '公共资源交易'],
+  H: ['海关'],
+  J: ['教育', '军队', '交通', '纪委', '金融业', '建筑业', '检察院', '机关事务'],
+  K: ['科技'],
+  M: ['民政', '民宗'],
+  N: ['农业', '能源化工', '农林牧渔'],
+  P: ['批发零售'],
+  Q: ['气象'],
+  R: ['人行', '人社', '人大'],
+  S: ['税务', '水利', '市政', '审计', '商务', '司法', '社会团体', '市场监管', '生态环境'],
+  T: ['统计', '统战', '体育'],
+  W: ['文旅', '卫健委'],
+  X: ['学校', '宣传', '信息技术'],
+  Y: ['医疗', '银保监', '运输物流', '应急管理'],
+  Z: ['组织', '政协', '住建', '证监', '政府办', '制造业', '政务中心', '住宿餐饮', '自然资源']
+}
+
+// 信息类型数据
+// 在[@/components/selector/InfoTypeSelectorCard.vue]中使用
+export const infoTypeListExp = [
+  {
+    name: '全部',
+    value: '',
+    level: 0,
+    children: []
+  },
+  {
+    name: '拟建项目',
+    value: '拟建',
+    showHelp: true,
+    level: 1,
+    children: []
+  },
+  {
+    name: '招标预告',
+    value: '预告',
+    level: 1,
+    children: []
+  },
+  {
+    name: '招标公告',
+    value: '',
+    level: 1,
+    children: [
+      {
+        name: '招标',
+        value: '招标',
+        level: 2
+      },
+      {
+        name: '邀标',
+        value: '邀标',
+        level: 2
+      },
+      {
+        name: '询价',
+        value: '询价',
+        level: 2
+      },
+      {
+        name: '竞谈',
+        value: '竞谈',
+        level: 2
+      },
+      {
+        name: '单一',
+        value: '单一',
+        level: 2
+      },
+      {
+        name: '竞价',
+        value: '竞价',
+        level: 2
+      },
+      {
+        name: '变更',
+        value: '变更',
+        level: 2
+      },
+      {
+        name: '其它',
+        value: '其它',
+        level: 2
+      }
+    ]
+  },
+  {
+    name: '招标结果',
+    value: '',
+    level: 1,
+    children: [
+      {
+        name: '中标',
+        value: '中标',
+        level: 2
+      },
+      {
+        name: '成交',
+        value: '成交',
+        level: 2
+      },
+      {
+        name: '废标',
+        value: '废标',
+        level: 2
+      },
+      {
+        name: '流标',
+        value: '流标',
+        level: 2
+      }
+    ]
+  },
+  {
+    name: '招标信用信息',
+    value: '',
+    level: 1,
+    children: [
+      {
+        name: '合同',
+        value: '合同',
+        level: 2
+      },
+      {
+        name: '验收',
+        value: '验收',
+        level: 2
+      },
+      {
+        name: '违规',
+        value: '违规',
+        level: 2
+      }
+    ]
+  }
+]
+
+// 行业分类数据
+// 在[@/components/selector/IndustrySelectorCard.vue]中使用
+export const industryListMapExp = {
+  '建筑工程': [
+    '勘察设计',
+    '工程施工',
+    '监理咨询',
+    '材料设备',
+    '机电安装'
+  ],
+  '水利水电': [
+    '水利工程',
+    '发电工程',
+    '航运工程',
+    '其他工程'
+  ],
+  '能源化工': [
+    '原材料',
+    '仪器仪表',
+    '新能源',
+    '设备物资',
+    '化工产品',
+    '设备'
+  ],
+  '弱电安防': [
+    '综合布线',
+    '智能系统',
+    '智能家居'
+  ],
+  '信息技术': [
+    '系统集成及安全',
+    '软件开发',
+    '运维服务',
+    '其他'
+  ],
+  '行政办公': [
+    '办公家具',
+    '通用办公设备',
+    '专业设备',
+    '办公用品',
+    '生活用品'
+  ],
+  '机械设备': [
+    '矿山机械',
+    '工程机械',
+    '机械零部件',
+    '机床相关',
+    '车辆',
+    '其他机械设备'
+  ],
+  '交通工程': [
+    '道路',
+    '轨道',
+    '桥梁',
+    '隧道',
+    '其他'
+  ],
+  '医疗卫生': [
+    '设备',
+    '耗材',
+    '药品'
+  ],
+  '市政设施': [
+    '道路',
+    '绿化',
+    '线路管网',
+    '综合项目'
+  ],
+  '服务采购': [
+    '法律咨询',
+    '会计',
+    '物业',
+    '审计',
+    '安保',
+    '仓储物流',
+    '广告宣传印刷',
+    '其他'
+  ],
+  '农林牧渔': [
+    '生产物资',
+    '生产设备',
+    '相关服务'
+  ]
+}

src/components/selector/AreaSelectorCard.vue

@@ -69,6 +69,7 @@ import 'element-ui/lib/theme-chalk/base.css'
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
 import SelectorCard from '@/components/selector/SelectorCard.vue'
 import chinaMapJSON from '@/assets/js/china_area.js'
+import { provinceListMapExp } from '@/assets/js/selector.js'
 import { debounce, getRandomString } from '@/utils/'
 export default {
   name: 'area-selector-card',
@@ -112,24 +113,7 @@ export default {
       searchContent: '',
       loading: false,
       // 省份与字母IndexBar对照表
-      provinceListMapExp: {
-        '#': ['全国'],
-        A: ['安徽', '澳门'],
-        B: ['北京'],
-        C: ['重庆'],
-        F: ['福建'],
-        G: ['广东', '广西', '贵州', '甘肃'],
-        H: ['河北', '湖北', '黑龙江', '海南', '河南', '湖南'],
-        J: ['吉林', '江苏', '江西'],
-        L: ['辽宁'],
-        N: ['内蒙古', '宁夏'],
-        Q: ['青海'],
-        S: ['山西', '陕西', '上海', '山东', '四川'],
-        T: ['天津', '台湾'],
-        X: ['西藏', '新疆', '香港'],
-        Y: ['云南'],
-        Z: ['浙江']
-      },
+      provinceListMapExp,
       provinceListMap: {
         // A: [
         //     {
@@ -157,6 +141,9 @@ export default {
     }
   },
   watch: {
+    initCityMap (newVal, oldVal) {
+      this.setCitySelected(newVal)
+    },
     searchContent: debounce(function (newVal, oldVal) {
       const search = newVal
       const { findP } = this.getProvinceWithString(search)
@@ -171,16 +158,12 @@ export default {
           // document.querySelector(`.${id}`).scrollIntoView() // 兼容性有问题
         })
       }
-    }, 300),
-    initCityMap (newVal) {
-      if (newVal && Object.keys(newVal).length !== 0) {
-        this.setCitySelected(newVal)
-      }
-    }
+    }, 300)
   },
   created () {
     this.initIndexBarAndAreaMap()
     this.provinceListMap['#'][0].selectedState = 'checked'
+    this.setCitySelected(this.initCityMap)
   },
   methods: {
     changeLoadingState (s) {
@@ -502,7 +485,7 @@ export default {
       if (selectedCount.province === 1) {
         tipText.text = '全国'
       } else {
-        var dot = ''
+        let dot = ''
         if (selectedCount.city.totalCount !== 0 && selectedCount.province !== 0) {
           dot = '、'
         }
@@ -557,6 +540,7 @@ export default {
       height: 24px;
       line-height: 24px;
       font-weight: 700;
+      color: inherit;
       border-color: rgba(0,0,0,.05);
     }
   }

src/components/selector/BuyerclassSelectorCard.vue

@@ -37,6 +37,7 @@
 <script>
 import { Input } from 'element-ui'
 import SelectorCard from '@/components/selector/SelectorCard.vue'
+import { cateListMapExp } from '@/assets/js/selector.js'
 import { debounce, getRandomString } from '@/utils/'
 export default {
   name: 'buyerclass-selector-card',
@@ -57,27 +58,7 @@ export default {
       searchContent: '',
       loading: false,
       // 原始数据
-      cateListMapExp: {
-        '#': ['全部行业'],
-        C: ['财政', '传媒', '城管', '采矿业', '出版广电'],
-        D: ['档案', '党委办', '电信行业'],
-        F: ['法院', '发改'],
-        G: ['工信', '公安', '国资委', '公共资源交易'],
-        H: ['海关'],
-        J: ['教育', '军队', '交通', '纪委', '金融业', '建筑业', '检察院', '机关事务'],
-        K: ['科技'],
-        M: ['民政', '民宗'],
-        N: ['农业', '能源化工', '农林牧渔'],
-        P: ['批发零售'],
-        Q: ['气象'],
-        R: ['人行', '人社', '人大'],
-        S: ['税务', '水利', '市政', '审计', '商务', '司法', '社会团体', '市场监管', '生态环境'],
-        T: ['统计', '统战', '体育'],
-        W: ['文旅', '卫健委'],
-        X: ['学校', '宣传', '信息技术'],
-        Y: ['医疗', '银保监', '运输物流', '应急管理'],
-        Z: ['组织', '政协', '住建', '证监', '政府办', '制造业', '政务中心', '住宿餐饮', '自然资源']
-      },
+      cateListMapExp,
       // 页面中循环的数据
       cateListMap: {},
       cateExp: {
@@ -91,6 +72,10 @@ export default {
     }
   },
   watch: {
+    initCate (newVal, oldVal) {
+      // console.log(...arguments)
+      this.setCateState(newVal)
+    },
     searchContent: debounce(function (newVal, oldVal) {
       const search = newVal
       const index = this.getIndexWithString(search)
@@ -100,15 +85,11 @@ export default {
           this.$refs.selectList.scrollTop = wrapper.querySelector(`[data-index=${index}]`).offsetTop
         })
       }
-    }, 300),
-    initCate (newVal, oldVal) {
-      if (Array.isArray(newVal)) {
-        this.setCateState(newVal)
-      }
-    }
+    }, 300)
   },
   created () {
     this.initCateMap()
+    this.setCateState(this.initCate)
   },
   methods: {
     changeLoadingState (s) {
@@ -178,12 +159,12 @@ export default {
         // 找不到false，就说明全部被选中
         allSelected: allSelectedArr.indexOf(false) === -1,
         // 找不到true，就说明没有一个被选中
-        allNotSelected: allSelectedArr.indexOf(true) === -1,
+        allNotSelected: allSelectedArr.indexOf(true) === -1
       }
     },
     /**
      * 初始化页面选中状态
-     * @param {undefinde|Array} data 要恢复的数据
+     * @param { Array | undefined } data 要恢复的数据
      */
     setCateState (data) {
       // 设置全部按钮
@@ -245,7 +226,7 @@ export default {
       this.$emit('onCancel')
     },
     onConfirm () {
-      var selected = this.getSelected()
+      const selected = this.getSelected()
       this.$emit('onConfirm', selected)
     }
   }
@@ -263,6 +244,5 @@ export default {
         margin: 0 16px;
       }
     }
-    
   }
 </style>

src/components/selector/SelectorCard.vue

@@ -37,7 +37,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep {
+  .selector-card::v-deep {
     // 输入框公共样式
     .el-input__inner {
       padding-left: 42px;
@@ -63,10 +63,11 @@ export default {
       border-radius: 4px;
       font-size: 14px;
       text-align: center;
+      color: #606266;
       background-color: #fff;
       border: 1px solid rgba(0,0,0,.05);
       cursor: pointer;
-      &:hover {
+      &.hover:hover {
         color: #2abed1;
       }
       &.active {
@@ -111,6 +112,7 @@ export default {
     justify-content: space-between;
     width: 460px;
     height: 582px;
+    color: #1d1d1d;
     background-color: #fff;
     box-shadow: 0 0 28px rgb(0 0 0 / 16%);
     border-radius: 5px;