cxc/cas_cloud_admin
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fieldOptions

Browse Source
This commit is contained in:
cxc
2022-07-27 16:56:23 +08:00
parent 488071ab2b
commit 181a643b93
5 changed files with 151 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/components/ExpertForm/index.vue
View File

@ -85,20 +85,7 @@
<el-row>
<el-col :span="24">
<el-form-item label="所属站点:" prop="tenantId">
<el-select
v-model="modelValue.tenantId"
placeholder="请选择，支持搜索"
size="default"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
<!-- <SiteOptions :size="''" :limitWidth="false" v-model="value" /> -->
<SiteOptions v-model="modelValue.tenantId" />
</el-form-item>
</el-col>
</el-row>
@ -217,7 +204,11 @@
</el-col>
</el-row>
<!-- <FieldOptions v-model="value" :labelWidth="labelWidth" ref="fieldForm" /> -->
<FieldOptions
v-model="modelValue"
:labelWidth="labelWidth"
ref="fieldFormRef"
/>
<InputBoxAdd
:labelWidth="labelWidth"
@ -307,6 +298,8 @@ import { tenantSelect } from "@/api/subPlatform/tenant";
import { enterpriseOptions } from "@/utils/parameter";
import { reactive, ref, toRefs } from "vue";
import WangEditor from "../../../components/WangEditor/index.vue";
import SiteOptions from "@/views/components/SiteOptions";
import FieldOptions from "@/views/components/FieldOptions";
const props = defineProps({
modelValue: { type: Object },
@ -332,6 +325,7 @@ const cityFormRef = ref(null);
const formRef = ref(null);
const keywordsFormRef = ref(null);
const researchsFormRef = ref(null);
const fieldFormRef = ref(null);
const directionsFormRef = ref([]);
const researchOptions = ref([]);
const options = ref([]);
@ -443,17 +437,28 @@ const validateForm = async () => {
formValid = false;
}
const cityFormValid = await cityFormRef.value.validateForm();
const fieldFormValid = await fieldFormRef.value.validateForm();
console.log(fieldFormValid);
const keywordsFormValid = await keywordsFormRef.value.validateForm();
if (formType.value == 1) {
const researchsFormValid = await researchsFormRef.value.validateForm();
//个人
const researchsFormValid = await researchsFormRef.value.validateForm(); // 研究方向验证
return (
formValid && cityFormValid && keywordsFormValid && researchsFormValid
formValid &&
cityFormValid &&
fieldFormValid &&
keywordsFormValid &&
researchsFormValid
);
} else if (formType.value == 2) {
const directionsFormValid = await directionsFormRef.value.validateForm();
//企业
const directionsFormValid = await directionsFormRef.value.validateForm(); //生产方向验证
return (
formValid && cityFormValid && keywordsFormValid && directionsFormValid
formValid &&
cityFormValid &&
fieldFormValid &&
keywordsFormValid &&
directionsFormValid
);
} else {
throw "未知的formType";

166
src/views/components/FieldOptions/index.vue
View File

@ -1,14 +1,14 @@
<template>
<el-form
ref="formRef"
:model="value"
:model="modelValue"
:rules="rules"
:label-width="labelWidth + 'px'"
:disabled="disabled"
>
<el-row>
<el-col :span="24">
<el-form-item label="所属领域:" required>
<el-form-item label="所属领域:" required :show-message="false">
<el-row type="flex" justify="space-between">
<el-col :span="6">
<el-form-item prop="industrys">
@ -22,7 +22,7 @@
v-for="item in levelI"
:key="item.id"
:label="item.name"
:value="item"
:value="item.id"
>
</el-option>
</el-select>
@ -33,13 +33,14 @@
v-model="fields[1]"
value-key="id"
placeholder="请选择"
:disabled="levelII.length === 0"
@change="levelIIChange"
>
<el-option
v-for="item in levelII"
:key="item.id"
:label="item.name"
:value="item"
:value="item.id"
>
</el-option>
</el-select>
@ -48,19 +49,21 @@
<el-select
v-model="fields[2]"
value-key="id"
:disabled="levelIII.length === 0"
placeholder="请选择"
>
<el-option
v-for="item in levelIII"
:key="item.id"
:label="item.name"
:value="item"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
<el-col :span="3">
<el-button type="primary" @click="fieldAdd">添加</el-button>
<!-- <el-button type="primary" @click="check">验证</el-button> -->
</el-col>
</el-row>
<div class="e_tag">
@ -70,15 +73,16 @@
closable
@close="handleFieldClose(index)"
>
<template v-if="Array.isArray(tag)">
<span v-for="(item, i) in tag" :key="item.id">
{{ getFieldNameById(tag) }}
<!-- <template v-if="Array.isArray(tag)">
<span v-for="(item, i) in tag" :key="item">
{{ item.name }}
<span v-if="tag.length != i + 1">></span>
</span>
</template>
<template v-else>
<span>{{ tag }}</span>
</template>
</template> -->
</el-tag>
</div>
</el-form-item>
@ -87,7 +91,8 @@
</el-form>
</template>
<script setup name="FieldOptions">
import { industry } from "@/api/config";
// import { industry } from "@/api/config";
import { listSysIndustry } from "@/api/platform/industry";
import { ElMessage } from "element-plus";
import { toRefs, watch } from "vue";
@ -109,7 +114,6 @@ const levelII = ref([]); // II级数据
const levelIII = ref([]); // III级数据
const fields = ref([]); // 当前下拉框选中的集合
const industrysTags = ref([]); // 点击添加按钮后临时存储的数据集合
const data = reactive({
rules: {
industrys: [
@ -124,99 +128,121 @@ const data = reactive({
});
const { rules } = toRefs(data);
const getFieldByParent = (id) => {
return new Promise((resolve, reject) => {
industry({ parent_id: id })
.then(({ code, msg, data }) => {
if (code == 200) {
resolve(data);
} else {
ElMessage.error(msg);
reject({ msg, code });
}
})
.catch((error) => {
reject(error);
});
});
// 获取领域树形列表
const getIndustryTreeData = async () => {
const { data } = await listSysIndustry();
levelI.value = data;
};
const levelIChange = async (item) => {
delete fields.value[1];
delete fields.value[2];
levelII.value = await getFieldByParent(item.id);
levelII.value = levelI.value.find((el) => {
return el.id === item;
}).children;
};
const levelIIChange = async (item) => {
delete fields.value[2];
levelIII.value = await getFieldByParent(item.id);
levelIII.value = levelII.value.find((el) => el.id === item).children;
};
// 根据id获取领域名称
// TODO:如果领域已经被删除，则显示未知领域
const getFieldNameById = (ids) => {
if (levelI.value.length === 0) {
return;
}
let fieldNameList = [];
let subFieldList = [];
for (let i = 0; i < ids.length; i++) {
const id = ids[i];
if (fieldNameList.length === 0) {
subFieldList = levelI.value.find((el) => el.id == id)?.children;
fieldNameList.push(levelI.value.find((el) => id === el.id)?.name);
} else {
fieldNameList.push(subFieldList.find((el) => id === el.id)?.name);
subFieldList = subFieldList.find((el) => el.id == id)?.children;
}
}
return fieldNameList.join(">");
};
// 所属领域添加按钮
const fieldAdd = () => {
if (!fields.value.length) return ElMessage.error("请选择领域类型");
modelValue.value.industrys = [];
industrysTags.value.push(fields.value);
for (let i = 0; i < industrysTags.value.length; i++) {
modelValue.value.industrys.push("");
const item = industrysTags.value[i];
for (let j = 0; j < item.length; j++) {
const item2 = item[j];
if (modelValue.value.industrys[i] == "") {
modelValue.value.industrys[i] = item2.id;
} else {
modelValue.value.industrys[i] =
modelValue.value.industrys[i] + "-" + item2.id;
}
}
}
modelValue.value.industrys.push(fields.value.join("-"));
fields.value = [];
levelII.value = [];
levelIII.value = [];
// for (let i = 0; i < industrysTags.value.length; i++) {
// modelValue.value.industrys.push("");
// const item = industrysTags.value[i];
// for (let j = 0; j < item.length; j++) {
// const item2 = item[j];
// if (modelValue.value.industrys[i] == "") {
// modelValue.value.industrys[i] = item2.id;
// } else {
// modelValue.value.industrys[i] =
// modelValue.value.industrys[i] + "-" + item2.id;
// }
// }
// }
// fields.value = [];
// levelII.value = [];
// levelIII.value = [];
};
const handleFieldClose = (index) => {
industrysTags.value.splice(index, 1);
modelValue.value.industrys.splice(index, 1);
formRef.value.validate();
};
const validateForm = async () => {
try {
return await formRef.value.validateForm();
return await formRef.value.validate();
} catch (error) {
return false;
}
};
industry().then((res) => {
levelI.value = res.data;
});
getIndustryTreeData();
watch(modelValue, (newVal) => {
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);
modelValue.value.industrys = [];
modelValue.value.industrys.push(...modelValue.value.industry.split(","));
for (const field of modelValue.value.industry.split(",")) {
industrysTags.value.push(field.split("-").map((el) => parseInt(el)));
}
newVal.industrys = _key;
let keyObj = [];
for (let i = 0; i < _key.length; i++) {
keyObj.push([]);
let array = _key[i].split("-");
for (let j = 0; j < array.length; j++) {
keyObj[i].push({
id: array[j],
});
}
}
for (let i = 0; i < _value.length; i++) {
let array = _value[i].split(">");
for (let j = 0; j < array.length; j++) {
keyObj[i][j]["name"] = array[j];
}
}
industrysTags.value = keyObj;
// 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;
// let keyObj = [];
// for (let i = 0; i < _key.length; i++) {
// keyObj.push([]);
// let array = _key[i].split("-");
// for (let j = 0; j < array.length; j++) {
// keyObj[i].push({
// id: array[j],
// });
// }
// }
// for (let i = 0; i < _value.length; i++) {
// let array = _value[i].split(">");
// for (let j = 0; j < array.length; j++) {
// keyObj[i][j]["name"] = array[j];
// }
// }
// industrysTags.value = keyObj;
});
defineExpose({
validateForm,
});