厂商实名认证优化

所属分中心默认选中
国民经济行业分类代码弹框选择

src/views/MyManage/UnVerify/vendor.vue

@@ -151,7 +151,7 @@
                               required: true,
                               message: '不能为空',
                           }]">
-                <el-select v-model="form.TJDm" placeholder="请选择国民经济行业分类代码" >
+                <el-select @focus="dialogVisible = true" v-model="form.TJDm" placeholder="请选择国民经济行业分类代码" >
                   <el-option v-for="item in NationalIndustryClassificationCode" :label="item.label" :value="item.value" :key="item.value"></el-option>
                 </el-select>
               </el-form-item>
@@ -263,15 +263,29 @@
           <el-button type="primary"  style="width: 110px" @click="submit">保 存</el-button>
         </div>
     </div>
+    <el-dialog
+        title="国民经济行业分类选项"
+        :visible.sync="dialogVisible"
+        top="20vh"
+        width="65%">
+      <div>
+        <t-j-dm-select @cancel="dialogVisible = false" @confirm="confirmEvent"/>
+      </div>
+    </el-dialog>
   </div>
 
 </template>
 
 <script>
+import TJDmSelect from '../comps/TJDmSelect'
 export default {
   name: "index",
+  components: {
+    TJDmSelect
+  },
   data() {
     return {
+      dialogVisible: false,
       uploading: false,
       loginInfo: {},
       memberInfo: {},
@@ -400,10 +414,15 @@ export default {
         }
       });
     },
+    confirmEvent(e) {
+      this.form.TJDm = e
+      this.dialogVisible = false
+    },
     politicalChangeEvent() {
       console.log(this.form.political)
       this.form.branchCode = ''
       this.branchList = window.CodeTable.getBranches(this.form.political[this.form.political.length - 1])
+      this.branchList.length > 0 && (this.form.branchCode = this.branchList[0].value)
     },
     async upload(form) {
       this.uploading = true

src/views/MyManage/comps/TJDmSelect.vue

+<template>
+  <div style="position: relative;height: 450px;">
+    <div class="select-panel">
+      <div>
+        <div class="title">门类</div>
+        <div class="select-item-panel">
+          <div v-for="(item, index) in category" :key="item[1]" @click="findCategory(item[1], 1, index)" :style="comColor(1, index)">{{item[0]}}</div>
+        </div>
+      </div>
+      <div>
+        <div class="title">大类</div>
+        <div class="select-item-panel">
+          <div v-for="(item, index) in categoryList[0]" :key="item[1]" @click="findCategory(item[1], 2, index)" :style="comColor(2, index)">{{item[0]}}</div>
+        </div>
+      </div>
+      <div>
+        <div class="title">中类</div>
+        <div v-if="categoryList.length >= 2" class="select-item-panel">
+          <div v-for="(item, index) in categoryList[1]" :key="item[1]" @click="findCategory(item[1], 3, index)" :style="comColor(3, index)">{{item[0]}}</div>
+        </div>
+      </div>
+      <div>
+        <div class="title">小类</div>
+        <div v-if="categoryList.length === 3" class="select-item-panel">
+          <div v-for="(item, index) in categoryList[2]" :key="item[1]" @click="findCategory(item[1], 4, index)" :style="comColor(4, index)">{{item[0]}}</div>
+        </div>
+      </div>
+    </div>
+    <div style="position: absolute; bottom: 0; right: 0;">
+      <el-button size="mini" @click="cancelEvent">取 消</el-button>
+      <el-button size="mini" type="primary" @click="confirmEvent">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TJDmSelect",
+  computed: {
+    comColor () {
+      return function (level, index) {
+        let color = ''
+        if (index === this.levelAction[level - 1]) color = 'background-color: rgba(242,99,53,.3);'
+        if (index === this.levelAction[level - 1] && level === this.level)  color = 'background-color: rgba(242,99,53,1);color: #FFF;'
+        return color
+      }
+    }
+  },
+  data () {
+    return {
+      category: window.CodeTable.NationalIndustryClassificationCodeCategory,
+      categoryList: [],
+      level: 1,
+      levelAction: [0, 0, 0, 0]
+    }
+  },
+  methods: {
+    cancelEvent() {
+      this.$emit('cancel')
+    },
+    confirmEvent() {
+      let code = ''
+      if (this.level === 1) {
+        code = this.category[this.levelAction[0]][1]
+      } else {
+        code = this.categoryList[this.level - 2][this.levelAction[this.level - 1]][1]
+      }
+      this.$emit('confirm', code)
+    },
+    findCategory(code, level, index) {
+      let length = 0
+      this.level = level
+      switch (level) {
+        case 1:
+          length = 3
+          this.levelAction = [index, 0, 0, 0]
+          break
+        case 2:
+          length = 4
+          this.levelAction = [this.levelAction[0], index, 0, 0]
+          break
+        case 3:
+          length = 5
+          this.levelAction = [this.levelAction[0], this.levelAction[1], index, 0]
+          break
+        case 4:
+          this.levelAction = [this.levelAction[0], this.levelAction[1], this.levelAction[2], index]
+          return
+      }
+      const _categoryList = window.CodeTable.findCategory(code, length, [])
+      if (level === 1) {
+        this.categoryList = _categoryList
+      } else {
+        if (this.categoryList.length === 2) return
+        this.categoryList = this.categoryList.slice(0, level - 1).concat(_categoryList)
+      }
+    }
+  },
+  mounted() {
+    this.findCategory('A', 1, 0)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-panel {
+  width: 100%;
+  height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  div {
+    position: relative;
+    height: 100%;
+    width: 24.6%;
+    border: 1px solid rgba(242,99,53,.7);
+    .title {
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding-left: 10px;
+      width: 100%;
+      height: auto;
+      font-size: 15px;
+      color: #333;
+      background-color: rgba(242,99,53,.7);
+      border: none;
+    }
+    .select-item-panel {
+      position: absolute;
+      height: 376px;
+      top: 22px;
+      left: 0;
+      width: 100%;
+      color: #333;
+      border-radius: 3px;
+      border: none;
+      overflow: auto;
+      div {
+        padding-left: 5px;
+        height: auto;
+        width: 100%;
+        line-height: 26px;
+        border: none;
+        cursor: pointer;
+        transition: all 0.2s;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        &:hover {
+          background-color: rgba(242,99,53,.5);
+        }
+      }
+    }
+  }
+}
+</style>