155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
|
<template>
|
||
|
|
<el-form
|
||
|
|
:disabled="!isAdd"
|
||
|
|
ref="form"
|
||
|
|
:model="value"
|
||
|
|
:rules="rules"
|
||
|
|
:label-width="labelWidth + 'px'"
|
||
|
|
>
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-form-item label="所属领域:" required>
|
||
|
|
<el-row type="flex" justify="space-between">
|
||
|
|
<el-col :span="7">
|
||
|
|
<el-form-item prop="industrys">
|
||
|
|
<el-select
|
||
|
|
v-model="value.industrys[0]"
|
||
|
|
value-key="id"
|
||
|
|
placeholder="请选择"
|
||
|
|
@change="levelIChange"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in levelI"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.id"
|
||
|
|
>
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="7">
|
||
|
|
<el-select
|
||
|
|
v-model="value.industrys[1]"
|
||
|
|
value-key="id"
|
||
|
|
placeholder="请选择"
|
||
|
|
@change="levelIIChange"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in levelII"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.id"
|
||
|
|
>
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="7">
|
||
|
|
<el-select
|
||
|
|
v-model="value.industrys[2]"
|
||
|
|
value-key="id"
|
||
|
|
placeholder="请选择"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in levelIII"
|
||
|
|
:key="item.id"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.id"
|
||
|
|
>
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { industry } from "@/api/config";
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
value: Object,
|
||
|
|
isAdd: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
labelWidth: {
|
||
|
|
type: Number,
|
||
|
|
default: 120,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
levelI: [], // I级数据
|
||
|
|
levelII: [], // II级数据
|
||
|
|
levelIII: [], // III级数据
|
||
|
|
rules: {
|
||
|
|
industrys: [
|
||
|
|
{
|
||
|
|
type: "array",
|
||
|
|
required: true,
|
||
|
|
message: "请选择",
|
||
|
|
trigger: "change",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value(newOld) {
|
||
|
|
const data = Object.assign({}, newOld);
|
||
|
|
let key = [];
|
||
|
|
for (let i = 0; i < data.industrys.length; i++) {
|
||
|
|
key.push(data.industrys[i].key);
|
||
|
|
}
|
||
|
|
if (key.length > 0) {
|
||
|
|
this.levelIChange(key[0]);
|
||
|
|
}
|
||
|
|
if (key.length > 1) {
|
||
|
|
this.levelIIChange(key[1]);
|
||
|
|
}
|
||
|
|
newOld.industrys = key;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getFieldByParent(id) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
industry({ parent_id: id })
|
||
|
|
.then(({ code, msg, data }) => {
|
||
|
|
if (code == 200) {
|
||
|
|
resolve(data);
|
||
|
|
} else {
|
||
|
|
this.$modal.msgError(msg);
|
||
|
|
reject({ msg, code });
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
reject(error);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async levelIChange(id) {
|
||
|
|
this.value.industrys[1] = "";
|
||
|
|
this.value.industrys[2] = "";
|
||
|
|
this.levelII = await this.getFieldByParent(id);
|
||
|
|
},
|
||
|
|
async levelIIChange(id) {
|
||
|
|
this.value.industrys[2] = "";
|
||
|
|
this.levelIII = await this.getFieldByParent(id);
|
||
|
|
},
|
||
|
|
submitForm() {
|
||
|
|
let flag = false;
|
||
|
|
this.$refs["form"].validate((valid) => {
|
||
|
|
flag = valid;
|
||
|
|
});
|
||
|
|
return flag;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
industry().then((res) => {
|
||
|
|
this.levelI = res.data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|