146 lines
3.7 KiB
Vue
146 lines
3.7 KiB
Vue
|
<template>
|
||
|
|
<el-form
|
||
|
|
ref="form"
|
||
|
|
:model="modelValue"
|
||
|
|
: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="6">
|
||
|
|
<el-form-item prop="industrys">
|
||
|
|
<el-select
|
||
|
|
v-model="modelValue.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="6">
|
||
|
|
<el-select
|
||
|
|
v-model="modelValue.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="6">
|
||
|
|
<el-select
|
||
|
|
v-model="modelValue.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: {
|
||
|
|
modelValue: Object,
|
||
|
|
labelWidth: {
|
||
|
|
type: Number,
|
||
|
|
default: 120,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
levelI: [], // I级数据
|
||
|
|
levelII: [], // II级数据
|
||
|
|
levelIII: [], // III级数据
|
||
|
|
rules: {
|
||
|
|
industrys: [
|
||
|
|
{
|
||
|
|
type: "array",
|
||
|
|
required: true,
|
||
|
|
message: "请选择",
|
||
|
|
trigger: "change",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
// modelValue(newVal, oldVal) {
|
||
|
|
// let _key = [];
|
||
|
|
// let _value = [];
|
||
|
|
// for (let i = 0; i < newVal.industrys.length; i++) {
|
||
|
|
// const item = newVal.industrys[i];
|
||
|
|
// _key.push(item.key);
|
||
|
|
// _value.push(item.value);
|
||
|
|
// }
|
||
|
|
// newVal.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) {
|
||
|
|
delete this.modelValue.industrys[1];
|
||
|
|
delete this.modelValue.industrys[2];
|
||
|
|
this.levelII = await this.getFieldByParent(id);
|
||
|
|
},
|
||
|
|
async levelIIChange(id) {
|
||
|
|
delete this.modelValue.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>
|