企业添加与修改

This commit is contained in:
cxc
2022-07-26 14:35:21 +08:00
parent a18495cc1c
commit 2f2d61385c
6 changed files with 211 additions and 127 deletions

View File

@ -3,7 +3,7 @@
ref="formRef" ref="formRef"
:model="modelValue" :model="modelValue"
:rules="rules" :rules="rules"
:label-width="labelWidth + 'px'" :label-width="`${labelWidth}px`"
> >
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
@ -14,7 +14,9 @@
<el-select <el-select
v-model="modelValue.province" v-model="modelValue.province"
clearable clearable
filterable
placeholder="请选择" placeholder="请选择"
:disabled="provinceSelectList.length === 0"
@change="provinceChanged" @change="provinceChanged"
> >
<el-option <el-option
@ -32,6 +34,8 @@
<el-select <el-select
v-model="modelValue.city" v-model="modelValue.city"
clearable clearable
filterable
:disabled="citySelectList.length === 0"
placeholder="请选择" placeholder="请选择"
@change="cityChanged" @change="cityChanged"
> >
@ -50,6 +54,8 @@
<el-select <el-select
v-model="modelValue.district" v-model="modelValue.district"
clearable clearable
filterable
:disabled="districtSelectList.length === 0"
placeholder="请选择" placeholder="请选择"
> >
<el-option <el-option
@ -99,17 +105,29 @@ const { rules } = toRefs(data);
// 获取 省列表 // 获取 省列表
const getProvinceList = async () => { const getProvinceList = async () => {
const resp = await provinceList(); const resp = await provinceList();
provinceSelectList.value = resp.data; provinceSelectList.value = resp.data.map((el) => {
return { ...el, provinceCode: el.provinceCode.toString() };
});
}; };
// 获取市列表 // 获取市列表
const getCityListByProvinceId = async (provinceId) => { const getCityListByProvinceId = async (provinceId) => {
const { data } = await cityList(provinceId); const { data } = await cityList(provinceId);
citySelectList.value = data; citySelectList.value = data.map((el) => {
return {
...el,
cityCode: el.cityCode.toString(),
};
});
}; };
// 根据市id获取县区列表 // 根据市id获取县区列表
const getAreaListByCityId = async (cityId) => { const getAreaListByCityId = async (cityId) => {
const { data } = await districtList(cityId); const { data } = await districtList(cityId);
districtSelectList.value = data; districtSelectList.value = data.map((el) => {
return {
...el,
areaCode: el.areaCode.toString(),
};
});
}; };
// 当省改变时 // 当省改变时
const provinceChanged = () => { const provinceChanged = () => {
@ -132,9 +150,25 @@ const cityChanged = () => {
}; };
const validateForm = async () => { const validateForm = async () => {
try {
return await formRef.value.validate(); return await formRef.value.validate();
} catch (error) {
return false;
}
}; };
// watch(modelValue, (val) => {
// console.log(val);
// });
getProvinceList(); getProvinceList();
watch(modelValue, (val) => {
if (val.province) {
getCityListByProvinceId(val.province);
}
if (val.city) {
getAreaListByCityId(val.city);
}
});
defineExpose({ defineExpose({
validateForm, validateForm,

View File

@ -1,5 +1,4 @@
<template> <template>
<el-button @click="check">验证</el-button>
<el-form <el-form
ref="formRef" ref="formRef"
:model="modelValue" :model="modelValue"
@ -220,40 +219,40 @@
<!-- <FieldOptions v-model="value" :labelWidth="labelWidth" ref="fieldForm" /> --> <!-- <FieldOptions v-model="value" :labelWidth="labelWidth" ref="fieldForm" /> -->
<!-- <InputBoxAdd <InputBoxAdd
:labelWidth="labelWidth" :labelWidth="labelWidth"
v-model="value" v-model="modelValue"
title="关键词" title="关键词"
placeholder="应用场景关键词+技术产品关键词" placeholder="应用场景关键词+技术产品关键词"
fieldKey="keywords" fieldKey="keywords"
ref="keywordsForm" ref="keywordsFormRef"
/> />
<InputBoxAdd <InputBoxAdd
v-if="formType != 2" v-if="formType != 2"
:labelWidth="labelWidth" :labelWidth="labelWidth"
v-model="value" v-model="modelValue"
title="研究方向" title="研究方向"
placeholder="请输入研究方向" placeholder="请输入研究方向"
fieldKey="researchs" fieldKey="researchs"
ref="researchsForm" ref="researchsFormRef"
/> />
<InputBoxAdd <InputBoxAdd
v-if="formType == 2" v-if="formType == 2"
:labelWidth="labelWidth" :labelWidth="labelWidth"
v-model="value" v-model="modelValue"
title="生产方向" title="生产方向"
placeholder="请输入生产方向" placeholder="请输入生产方向"
fieldKey="directions" fieldKey="directions"
ref="directionsForm" ref="directionsFormRef"
/> --> />
<el-row v-if="formType == 2"> <el-row v-if="formType == 2">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="邀请码:"> <el-form-item label="邀请码:">
<el-input <el-input
v-model="modelValue.inviter_code" v-model="modelValue.inviterCode"
:disabled="!isAdd" :disabled="!isAdd"
></el-input> ></el-input>
</el-form-item> </el-form-item>
@ -285,7 +284,7 @@
type="textarea" type="textarea"
:autosize="{ minRows: 2, maxRows: 6 }" :autosize="{ minRows: 2, maxRows: 6 }"
/> />
<WangEditor v-model="modelValue.introduce" minHeight="150px" /> <WangEditor v-else v-model="modelValue.introduce" minHeight="150px" />
<!-- <Editor <!-- <Editor
v-else v-else
v-model="modelValue.introduce" v-model="modelValue.introduce"
@ -301,7 +300,7 @@
<script setup name="ExpertForm"> <script setup name="ExpertForm">
import CityOptions from "@/views/components/CityOptions"; import CityOptions from "@/views/components/CityOptions";
// import FieldOptions from "@/views/components/FieldOptions"; // import FieldOptions from "@/views/components/FieldOptions";
// import InputBoxAdd from "@/views/components/InputBoxAdd"; import InputBoxAdd from "@/views/components/InputBoxAdd";
import { researchSelect } from "@/api/dataList/research"; import { researchSelect } from "@/api/dataList/research";
import { laboratorySelect } from "@/api/dataList/laboratory"; import { laboratorySelect } from "@/api/dataList/laboratory";
import { tenantSelect } from "@/api/subPlatform/tenant"; import { tenantSelect } from "@/api/subPlatform/tenant";
@ -328,8 +327,12 @@ const props = defineProps({
default: 120, default: 120,
}, },
}); });
const { formType, modelValue } = toRefs(props); const { formType, modelValue, labelWidth, showTitle, isAdd } = toRefs(props);
const cityFormRef = ref(null); const cityFormRef = ref(null);
const formRef = ref(null);
const keywordsFormRef = ref(null);
const researchsFormRef = ref(null);
const directionsFormRef = ref([]);
const researchOptions = ref([]); const researchOptions = ref([]);
const options = ref([]); const options = ref([]);
const siteList = ref([]); const siteList = ref([]);
@ -413,40 +416,77 @@ const getSiteList = async () => {
const check = async () => { const check = async () => {
// console.log(cityFormRef.value); // console.log(cityFormRef.value);
// console.log(cityFormRef.value.formRef.value.validate()); // console.log(cityFormRef.value.formRef.value.validate());
cityFormRef.value // cityFormRef.value
.validateForm() // .validateForm()
.then((re) => { // .then((re) => {
console.log(re); // console.log(re);
}) // })
.catch((error) => { // .catch((error) => {
console.log(error); // console.log(error);
}); // });
// console.log(await keywordsFormRef.value.validateForm());
const res = await validateForm();
console.log(res);
}; };
const submitForm = () => { const validate1 = async () => {
let flag = false; try {
if (this.formType == 1) { return await formRef.value.validate();
this.$refs["form"].validate((valid) => { } catch (error) {
const cityForm = this.$refs.cityForm.submitForm(); // 城市 return false;
const fieldForm = this.$refs.fieldForm.submitForm(); // 所属领域
const keywordsForm = this.$refs.keywordsForm.submitForm(); // 关键词
const researchsForm = this.$refs.researchsForm.submitForm(); // 研究方向
if (valid && cityForm && fieldForm && keywordsForm && researchsForm) {
flag = !flag;
} }
});
} else if (this.formType == 2) {
this.$refs["form"].validate((valid) => {
const cityForm = this.$refs.cityForm.submitForm();
const fieldForm = this.$refs.fieldForm.submitForm();
const keywordsForm = this.$refs.keywordsForm.submitForm();
const directionsForm = this.$refs.directionsForm.submitForm();
if (valid && cityForm && fieldForm && keywordsForm && directionsForm) {
flag = !flag;
}
});
}
return flag;
}; };
const validateForm = async () => {
let formValid;
try {
formValid = await formRef.value.validate();
} catch (error) {
formValid = false;
}
const cityFormValid = await cityFormRef.value.validateForm();
const keywordsFormValid = await keywordsFormRef.value.validateForm();
if (formType.value == 1) {
const researchsFormValid = await researchsFormRef.value.validateForm();
return (
formValid && cityFormValid && keywordsFormValid && researchsFormValid
);
} else if (formType.value == 2) {
const directionsFormValid = await directionsFormRef.value.validateForm();
return (
formValid && cityFormValid && keywordsFormValid && directionsFormValid
);
} else {
throw "未知的formType";
}
};
defineExpose({
validateForm,
});
// const submitForm = () => {
// let flag = false;
// if (this.formType == 1) {
// this.$refs["form"].validate((valid) => {
// const cityForm = this.$refs.cityForm.submitForm(); // 城市
// const fieldForm = this.$refs.fieldForm.submitForm(); // 所属领域
// const keywordsForm = this.$refs.keywordsForm.submitForm(); // 关键词
// const researchsForm = this.$refs.researchsForm.submitForm(); // 研究方向
// if (valid && cityForm && fieldForm && keywordsForm && researchsForm) {
// flag = !flag;
// }
// });
// } else if (this.formType == 2) {
// this.$refs["form"].validate((valid) => {
// const cityForm = this.$refs.cityForm.submitForm();
// const fieldForm = this.$refs.fieldForm.submitForm();
// const keywordsForm = this.$refs.keywordsForm.submitForm();
// const directionsForm = this.$refs.directionsForm.submitForm();
// if (valid && cityForm && fieldForm && keywordsForm && directionsForm) {
// flag = !flag;
// }
// });
// }
// return flag;
// };
getSiteList(); getSiteList();
</script> </script>
@ -494,7 +534,7 @@ export default {
}, },
}, },
}; };
</script> </script> -->
<style lang="scss" scoped> <style lang="scss" scoped>
.form_title { .form_title {
font-weight: 700; font-weight: 700;
@ -506,9 +546,9 @@ export default {
// height: 120px; // height: 120px;
// line-height: 120px; // line-height: 120px;
// } // }
.el-select, // .el-select,
.el-date-editor { // .el-date-editor {
display: block; // display: block;
width: 100%; // width: 100%;
} // }
</style> --> </style>

View File

@ -1,14 +1,14 @@
<template> <template>
<el-form <el-form
ref="form" ref="formRef"
:model="value" :model="modelValue"
: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 <el-form-item
:label="title + ':'" :label="`${title}:`"
:prop="fieldKey" :prop="fieldKey"
:rules="[ :rules="[
{ {
@ -27,9 +27,10 @@
<el-button type="primary" @click="keyWordAdd">添加</el-button> <el-button type="primary" @click="keyWordAdd">添加</el-button>
</el-col> </el-col>
</el-row> </el-row>
<div class="e_tag"> <div class="e_tag">
<el-tag <el-tag
v-for="(tag, index) in this.value[fieldKey]" v-for="(tag, index) in modelValue[fieldKey]"
:key="index" :key="index"
closable closable
@close="handleFieldClose(fieldKey, index)" @close="handleFieldClose(fieldKey, index)"
@ -42,11 +43,13 @@
</el-row> </el-row>
</el-form> </el-form>
</template> </template>
<script> <script setup name="InputBoxAdd">
import { industry } from "@/api/config"; import { industry } from "@/api/config";
export default { import { ElMessage } from "element-plus";
props: { import { ref, toRefs } from "vue";
value: Object,
const props = defineProps({
modelValue: Object,
labelWidth: { labelWidth: {
type: Number, type: Number,
default: 120, default: 120,
@ -67,34 +70,37 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}, });
data() {
return { const { modelValue, title, fieldKey, placeholder, disabled, labelWidth } =
dataVal: "", toRefs(props);
}; const dataVal = ref("");
}, const formRef = ref(null);
methods: { const keyWordAdd = () => {
keyWordAdd() { if (!dataVal.value.length) return ElMessage.error(`请输入${title.value}`);
if (!this.dataVal.length) modelValue.value[fieldKey.value].push(dataVal.value);
return this.$message.error("请输入" + this.title); dataVal.value = "";
this.value[this.fieldKey].push(this.dataVal);
this.dataVal = "";
},
handleFieldClose(val, index) {
this.value[val].splice(index, 1);
},
submitForm() {
let flag = false;
this.$refs["form"].validate((valid) => {
flag = valid;
});
return flag;
},
},
}; };
const handleFieldClose = (val, index) => {
modelValue.value[val].splice(index, 1);
};
const validateForm = async () => {
try {
return await formRef.value.validate();
} catch (error) {
return false;
}
};
defineExpose({
validateForm,
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.e_tag { .e_tag {
width: 100%;
.el-tag { .el-tag {
margin-right: 10px; margin-right: 10px;
} }

View File

@ -23,9 +23,10 @@ import {
companyEdit, companyEdit,
} from "@/api/dataList/enterprise"; } from "@/api/dataList/enterprise";
import { reactive, toRefs } from "vue"; import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const router = useRouter(); const router = useRouter();
const route = useRoute();
const formType = ref(2); const formType = ref(2);
const expertFormRef = ref(null); const expertFormRef = ref(null);
const data = reactive({ const data = reactive({
@ -54,27 +55,30 @@ const cancel = () => {
router.back(); router.back();
tab.closeOpenPage(); tab.closeOpenPage();
}; };
const submitForm = () => { const submitForm = async () => {
if (this.$refs.expertForm.submitForm()) { const valid = await expertFormRef.value.validateForm();
console.log(form.value); if (valid) {
// todo... 提交出错
if (form.value.id != undefined) { if (form.value.id != undefined) {
companyEdit(form.value).then((response) => { await companyEdit(form.value);
this.$store.dispatch("tagsView/delView", this.$route); cancel();
router.go(-1);
ElMessage.success("修改成功"); ElMessage.success("修改成功");
});
} else { } else {
companyAdd(form.value).then((res) => { await companyAdd(form.value);
this.$store.dispatch("tagsView/delView", this.$route); cancel();
router.go(-1);
ElMessage.success("新增成功"); ElMessage.success("新增成功");
});
} }
} else { } else {
console.log("校验未通过"); console.log("校验未通过");
} }
}; };
const getDetailById = async () => {
if (route.query.id) {
const { data } = await companyDetail(route.query.id);
form.value = data;
}
};
getDetailById();
</script> </script>
<!-- <script> <!-- <script>

View File

@ -85,7 +85,7 @@
<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="所属领域" label="所属领域"
align="center" align="center"
prop="industrys" prop="industrys"
@ -94,7 +94,7 @@
<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 || "无" }}
@ -195,7 +195,7 @@ const handleAdd = () => {
}; };
const handleDetail = (id) => { const handleDetail = (id) => {
router.push({ router.push({
path: "/dataList/enterpriseAdd", path: "/dataList/enterprise/add",
query: { id }, query: { id },
}); });
}; };

View File

@ -203,8 +203,8 @@
<ImageUpload v-model="form.images" :isShowTip="false" :limit="2" /> <ImageUpload v-model="form.images" :isShowTip="false" :limit="2" />
</el-form-item> </el-form-item>
<el-form-item label="显示多张:" prop="multipleFlag"> <el-form-item label="显示多张:" prop="multipleFlag">
<el-radio v-model="form.multipleFlag" :label="1">是</el-radio> <el-radio v-model="form.multipleFlag" label="1"></el-radio>
<el-radio v-model="form.multipleFlag" :label="0"></el-radio> <el-radio v-model="form.multipleFlag" label="0"></el-radio>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">