Commit 0f07f0bb by Jianli Ou

厂商实名认证优化

所属分中心默认选中
国民经济行业分类代码弹框选择
parent f3b15d81
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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
......
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment