fieldOptions

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

BIN
dist.tar

Binary file not shown.

View File

@ -16,6 +16,13 @@ export function companyAdd(data) {
data, data,
}); });
} }
// 公司企业信息删除
export function companyDelete(ids) {
return request({
url: `/business/enterprise/${ids}`,
method: "delete",
});
}
// 公司企业详细信息 // 公司企业详细信息
export function companyDetail(id) { export function companyDetail(id) {
return request({ return request({

View File

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

View File

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

View File

@ -85,16 +85,11 @@
<el-table-column label="数据编号" align="center" prop="id" /> <el-table-column label="数据编号" align="center" prop="id" />
<el-table-column label="企业名称" align="center" prop="name" /> <el-table-column label="企业名称" align="center" prop="name" />
<el-table-column label="统一社会信用代码" align="center" prop="code" /> <el-table-column label="统一社会信用代码" align="center" prop="code" />
<!-- <el-table-column <el-table-column label="所属领域" align="center" show-overflow-tooltip>
label="所属领域"
align="center"
prop="industrys"
show-overflow-tooltip
>
<template #default="{ row }"> <template #default="{ row }">
<div>{{ row.industrys[row.industrys.length - 1] }}</div> <div>{{ row.industrys[row.industrys.length - 1] }}</div>
</template> </template>
</el-table-column> --> </el-table-column>
<el-table-column label="站点" align="center"> <el-table-column label="站点" align="center">
<template #default="{ row }"> <template #default="{ row }">
{{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }} {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
@ -122,6 +117,13 @@
@click="handleDetail(row.id)" @click="handleDetail(row.id)"
>修改</el-button >修改</el-button
> >
<el-button
size="small"
type="text"
icon="delete"
@click="handleDelete(row.id)"
>删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -137,7 +139,11 @@
</template> </template>
<script setup name="Enterprise"> <script setup name="Enterprise">
import { companyList, companyExport } from "@/api/dataList/enterprise"; import {
companyList,
companyExport,
companyDelete,
} from "@/api/dataList/enterprise";
import { download } from "@/utils/request"; import { download } from "@/utils/request";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { tenantSelect } from "@/api/subPlatform/tenant"; import { tenantSelect } from "@/api/subPlatform/tenant";
@ -199,6 +205,15 @@ const handleDetail = (id) => {
query: { id }, query: { id },
}); });
}; };
const handleDelete = async (id) => {
ElMessageBox.confirm(`是否确认删除编号为${id}的数据项?`)
.then(async () => {
await companyDelete(id);
getList();
ElMessage.success("删除成功");
})
.catch(() => {});
};
const handleExport = () => { const handleExport = () => {
ElMessageBox.confirm(`是否确认企业列表?`) ElMessageBox.confirm(`是否确认企业列表?`)
.then(() => { .then(() => {
@ -207,7 +222,6 @@ const handleExport = () => {
}) })
.catch(() => {}); .catch(() => {});
}; };
getList(); getList();
getSiteList(); getSiteList();
</script> </script>