fieldOptions
This commit is contained in:
@ -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({
|
||||||
|
@ -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";
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
|
@ -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>
|
||||||
|
Reference in New Issue
Block a user