research update
This commit is contained in:
@ -1,28 +1,27 @@
|
||||
<template>
|
||||
<el-form
|
||||
:disabled="!isAdd"
|
||||
ref="form"
|
||||
:model="value"
|
||||
:rules="rules"
|
||||
:label-width="labelWidth + 'px'"
|
||||
ref="form"
|
||||
:label-width="labelWidth + 'px'"
|
||||
:model="modelValue"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所属领域:" required>
|
||||
<el-row type="flex" justify="space-between">
|
||||
<el-form-item label="所属领域:">
|
||||
<el-row justify="space-between" type="flex">
|
||||
<el-col :span="7">
|
||||
<el-form-item prop="industrys">
|
||||
<el-select
|
||||
v-model="value.industrys[0]"
|
||||
value-key="id"
|
||||
placeholder="请选择"
|
||||
@change="levelIChange"
|
||||
v-model="modelValue.industrys[0]"
|
||||
placeholder="请选择"
|
||||
value-key="id"
|
||||
@change="levelIChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in levelI"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in levelI"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
@ -30,31 +29,31 @@
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-select
|
||||
v-model="value.industrys[1]"
|
||||
value-key="id"
|
||||
placeholder="请选择"
|
||||
@change="levelIIChange"
|
||||
v-model="modelValue.industrys[1]"
|
||||
placeholder="请选择"
|
||||
value-key="id"
|
||||
@change="levelIIChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in levelII"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
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="请选择"
|
||||
v-model="modelValue.industrys[2]"
|
||||
placeholder="请选择"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in levelIII"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in levelIII"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
@ -65,91 +64,77 @@
|
||||
</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,
|
||||
},
|
||||
|
||||
<script setup>
|
||||
import {listSysIndustry} from "@/api/platform/industry";
|
||||
// import { watch } from "fs";
|
||||
import {reactive, toRefs, watch} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Object,
|
||||
labelWidth: {
|
||||
type: Number,
|
||||
default: 120,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
levelI: [], // I级数据
|
||||
levelII: [], // II级数据
|
||||
levelIII: [], // III级数据
|
||||
rules: {
|
||||
industrys: [
|
||||
{
|
||||
type: "array",
|
||||
required: true,
|
||||
message: "请选择",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
});
|
||||
const {modelValue, labelWidth} = toRefs(props);
|
||||
const data = reactive({
|
||||
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;
|
||||
});
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const {rules} = toRefs(data);
|
||||
const levelI = ref([]);
|
||||
const levelII = ref([]);
|
||||
const levelIII = ref([]);
|
||||
|
||||
// 获取领域树形列表
|
||||
const getIndustryTreeData = async () => {
|
||||
const {data} = await listSysIndustry();
|
||||
levelI.value = data;
|
||||
};
|
||||
</script>
|
||||
|
||||
const levelIChange = async (item) => {
|
||||
delete modelValue.value.industrys[1];
|
||||
delete modelValue.value.industrys[2];
|
||||
// levelII.value = levelI.value.find((el) => {
|
||||
// return el.id === item;
|
||||
// }).children;
|
||||
};
|
||||
|
||||
const levelIIChange = async (item) => {
|
||||
delete modelValue.value.industrys[2];
|
||||
// levelIII.value = levelII.value.find((el) => el.id === item).children;
|
||||
};
|
||||
getIndustryTreeData().then(() => {
|
||||
watch(
|
||||
() => modelValue.value.industrys[0],
|
||||
(val) => {
|
||||
levelII.value =
|
||||
levelI.value.find((el) => {
|
||||
return el.id == val;
|
||||
})?.children ?? [];
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
watch(
|
||||
() => modelValue.value.industrys[1],
|
||||
(val) => {
|
||||
levelIII.value =
|
||||
levelII.value.find((el) => {
|
||||
return el.id == val;
|
||||
})?.children ?? [];
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user