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

BIN
dist.tar
View File

Binary file not shown.

7
src/api/dataList/enterprise.js
View File

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

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,
});

32
src/views/dataList/enterprise/index.vue
View File

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