integrated_traffic_vue/src/views/enterprise_management/information/edit.vue

658 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div>
<layout-card>
<el-form
ref="formRef"
:model="data.form"
:rules="rules"
label-width="210px"
>
<el-row>
<el-col :span="24">
<el-divider content-position="left">基本信息</el-divider>
</el-col>
<el-col :span="12">
<el-form-item label="企业名称" prop="CORP_NAME">
<el-input v-model="data.form.CORP_NAME" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮政编码">
<el-input
v-model="data.form.POSTAL_CODE"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="统一社会信用代码" prop="CODE">
<el-input v-model="data.form.CODE" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="市行业监管部门" prop="INDUSTRY_DEPARTMENTName">
<el-input
v-model="data.form.INDUSTRY_DEPARTMENTName"
disabled
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="属地" prop="POSSESSION">
<layout-territory
ref="territoryCascaderRef"
v-model="data.form.POSSESSION"
:level="4"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监管类型" prop="REGULARTYPE">
<layout-regulatory-type
v-model="data.form.REGULARTYPE"
:territory="data.form.POSSESSION"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属行业" prop="INDUSTRYALL">
<layout-industry
ref="industryCascaderRef"
v-model="data.form.INDUSTRYALL"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经济类型" prop="ECO_TYPEALL">
<layout-economic-type
ref="economicTypeCascaderRef"
v-model="data.form.ECO_TYPEALL"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="企事业单位经营地址" prop="ADDRESS_BUSINESS">
<el-input
v-model="data.form.ADDRESS_BUSINESS"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="企业状态" prop="CORP_STATE">
<el-select v-model="data.form.CORP_STATE">
<el-option
v-for="item in enterpriseStatus"
:key="item.DICTIONARIES_ID"
:label="item.NAME"
:value="item.DICTIONARIES_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="经度/纬度" prop="LONGITUDE">
<div style="flex: 1; display: flex">
<el-input
:model-value="
(data.form.LONGITUDE ?? '') +
'-' +
(data.form.LATITUDE ?? '')
"
disabled
style="flex: 1"
/>
<el-button
type="primary"
class="ml-10"
@click="data.mapDialogVisible = true"
>
地图定位
</el-button>
</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主要负责人" prop="CONTACTS">
<el-input v-model="data.form.CONTACTS" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主要负责人电话" prop="CONTACTS_PHONE">
<el-input
v-model="data.form.CONTACTS_PHONE"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="法定代表人">
<el-input v-model="data.form.LR_NAME" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="法人手机号" prop="LR_MOBILE">
<el-input v-model="data.form.LR_PHONE" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="占地面积(㎡)">
<el-input
v-model="data.form.AREA_COVERED"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职工人数(人)">
<el-input
v-model="data.form.EMPLOYEES"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="成立时间">
<el-date-picker
v-model="data.form.CREATE_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
placeholder="请选择"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="注册资金(万元)">
<el-input
v-model="data.form.REGCAPITAL"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="资产总额(万元)">
<el-input
v-model="data.form.TOTALASSETS"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="隶属关系">
<el-select v-model="data.form.SUBORDINATION">
<el-option
v-for="item in subordination"
:key="item.DICTIONARIES_ID"
:label="item.NAME"
:value="item.DICTIONARIES_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规模" prop="SCALE">
<el-select v-model="data.form.SCALE" clearable>
<el-option
v-for="item in enterpriseScale"
:key="item.DICTIONARIES_ID"
:label="item.NAME"
:value="item.DICTIONARIES_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否规模以上" prop="SCALE_TYPE">
<el-radio-group v-model="data.form.SCALE_TYPE">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="培训行业类型" prop="TRAINTYPE">
<layout-learning-train-type
v-model="data.form.TRAINTYPE"
type="industry"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="企业可新建用户数量" prop="USERS_NUM">
<el-input
v-model="data.form.USERS_NUM"
disabled
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="四色图类型">
<el-radio v-model="data.form.FOURTYPE" :label="1">
平面四色图
</el-radio>
<el-radio
v-model="data.form.FOURTYPE"
:label="2"
@change="fnProhibitSelect"
>
3D图
</el-radio>
</el-form-item>
</el-col>
<el-col v-if="data.form.FOURTYPE === 1" :span="24">
<el-form-item label="四色图" prop="four_images">
<layout-upload
v-model:file-list="data.form.four_images"
accept=".jpg,.jpeg,.png"
list-type="picture-card"
ratio="1480*640"
delete-to-server
>
<template #tip> 四色图请上传1480*640分辨率的图片 </template>
</layout-upload>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="营业执照" prop="bus_images">
<layout-upload
v-model:file-list="data.form.bus_images"
accept=".jpg,.jpeg,.png"
list-type="picture-card"
:limit="99"
delete-to-server
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-divider content-position="left">安全负责人信息</el-divider>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="SAFETY_NAME">
<el-input
v-model="data.form.SAFETY_NAME"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="职务" prop="SAFETY_POST">
<el-input
v-model="data.form.SAFETY_POST"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单位电话" prop="SAFETY_NUMBER">
<el-input
v-model="data.form.SAFETY_NUMBER"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号码" prop="SAFETY_PHONE">
<el-input
v-model="data.form.SAFETY_PHONE"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-divider content-position="left">企业相关属性</el-divider>
</el-col>
<el-col :span="12">
<el-form-item label="有无职业卫生信息" prop="WHETHER_HYGIENE">
<el-radio-group v-model="data.form.WHETHER_HYGIENE">
<el-radio :label="0">无</el-radio>
<el-radio :label="1">有</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="有无重大危险源" prop="WHETHER_HAZARDS">
<el-radio-group v-model="data.form.WHETHER_HAZARDS">
<el-radio :label="0">无</el-radio>
<el-radio :label="1">有</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="是否有稀缺大型应急物资或设施"
prop="WHETHER_SCARCE"
>
<el-radio-group v-model="data.form.WHETHER_SCARCE">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否涉及危化品" prop="WHETHER_CHEMICALS">
<el-radio-group v-model="data.form.WHETHER_CHEMICALS">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="有无特种设备" prop="WHETHER_SPECIALEQUIPMENT">
<el-radio-group v-model="data.form.WHETHER_SPECIALEQUIPMENT">
<el-radio :label="0">无</el-radio>
<el-radio :label="1">有</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="有无特种作业人员" prop="WHETHER_SPECIALPEOPLE">
<el-radio-group v-model="data.form.WHETHER_SPECIALPEOPLE">
<el-radio :label="0">无</el-radio>
<el-radio :label="1">有</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否涉及煤气" prop="WHETHER_COALGAS">
<el-radio-group v-model="data.form.WHETHER_COALGAS">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否属于消防重点单位" prop="WHETHER_FIRE">
<el-radio-group v-model="data.form.WHETHER_FIRE">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否在受限空间作业" prop="WHETHER_CONFINED">
<el-radio-group v-model="data.form.WHETHER_CONFINED">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否存在涉爆粉尘作业" prop="WHETHER_POWDER">
<el-radio-group v-model="data.form.WHETHER_POWDER">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否涉及防雷防静电" prop="WHETHER_LIGHTNING">
<el-radio-group v-model="data.form.WHETHER_LIGHTNING">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否持有放射源" prop="WHETHER_ACTINOGEN">
<el-radio-group v-model="data.form.WHETHER_ACTINOGEN">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否涉及液氨制冷" prop="WHETHER_LIQUIDAMMONIA">
<el-radio-group v-model="data.form.WHETHER_LIQUIDAMMONIA">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否涉及危化品管道" prop="WHETHER_PIPELINE">
<el-radio-group v-model="data.form.WHETHER_PIPELINE">
<el-radio :label="0">否</el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="tc mt-10">
<el-button @click="back"> </el-button>
<el-button type="primary" @click="fnSubmit"> </el-button>
</div>
</layout-card>
<map-dialog
v-model:visible="data.mapDialogVisible"
v-model:latitude="data.form.LATITUDE"
v-model:longitude="data.form.LONGITUDE"
/>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
import LayoutTerritory from "@/components/territory/index.vue";
import LayoutRegulatoryType from "@/components/regulatory_type/index.vue";
import LayoutIndustry from "@/components/industry/index.vue";
import LayoutEconomicType from "@/components/economic_type/index.vue";
import LayoutLearningTrainType from "@/components/learning_train_type/index.vue";
import LayoutUpload from "@/components/upload/index.vue";
import {
layoutFnGetEnterpriseScale,
layoutFnGetEnterpriseStatus,
layoutFnGetSubordination,
} from "@/assets/js/data_dictionary.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import {
getEnterpriseInfo,
setEnterpriseInfo,
} from "@/request/enterprise_management.js";
import { addingPrefixToFile } from "@/assets/js/utils.js";
import MapDialog from "./components/map.vue";
const router = useRouter();
const formRef = ref(null);
const territoryCascaderRef = ref(null);
const industryCascaderRef = ref(null);
const economicTypeCascaderRef = ref(null);
const rules = {
CORP_NAME: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
CODE: [
{ required: true, message: "统一社会信用代码不能为空", trigger: "blur" },
{
pattern: /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/,
message: "请输入正确的统一社会信用代码",
},
],
POSSESSION: [{ required: true, message: "属地不能为空", trigger: "blur" }],
INDUSTRYALL: [
{ required: true, message: "所属行业不能为空", trigger: "blur" },
],
ECO_TYPEALL: [
{ required: true, message: "经济类型不能为空", trigger: "blur" },
],
ADDRESS_BUSINESS: [
{
required: true,
message: "企事业单位经营地址不能为空",
trigger: "blur",
},
],
CORP_STATE: [
{ required: true, message: "企业状态不能为空", trigger: "blur" },
],
LONGITUDE: [{ required: true, message: "经度不能为空", trigger: "blur" }],
LATITUDE: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
CONTACTS: [
{ required: true, message: "主要负责人不能为空", trigger: "blur" },
],
CONTACTS_PHONE: [
{ required: true, message: "主要负责人电话不能为空", trigger: "blur" },
{ min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
{
pattern:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: "请输入正确的手机号码",
},
],
TRAINTYPE: [
{ required: true, message: "培训行业类型不能为空", trigger: "blur" },
],
bus_images: [
{ required: true, message: "营业执照不能为空", trigger: "blur" },
],
LR_MOBILE: [
{ min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
{
pattern:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: "请输入正确的手机号码",
},
],
SAFETY_PHONE: [
{ min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
{
pattern:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: "请输入正确的手机号码",
},
],
SAFETY_NUMBER: [
{ min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
{
pattern:
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
message: "请输入正确的手机号码",
},
],
WHETHER_HAZARDS: {
required: true,
message: "请选择有无重大危险源",
trigger: "change",
},
};
const data = reactive({
form: {
CORP_NAME: "",
POSTAL_CODE: "",
CODE: "",
INDUSTRY_DEPARTMENTName: "",
INDUSTRY_DEPARTMENT: "",
POSSESSION: [],
REGULARTYPE: "",
INDUSTRYALL: [],
ECO_TYPEALL: [],
ADDRESS_BUSINESS: "",
CORP_STATE: "",
LONGITUDE: "",
LATITUDE: "",
CONTACTS: "",
CONTACTS_PHONE: "",
LR_NAME: "",
LR_MOBILE: "",
AREA_COVERED: "",
EMPLOYEES: "",
CREATE_DATE: "",
REGCAPITAL: "",
TOTALASSETS: "",
SUBORDINATION: "",
SCALE: "",
SCALE_TYPE: "",
TRAINTYPE: "",
USERS_NUM: "",
FOURTYPE: "",
four_images: [],
bus_images: [],
SAFETY_NAME: "",
SAFETY_POST: "",
SAFETY_NUMBER: "",
SAFETY_PHONE: "",
WHETHER_HYGIENE: "",
WHETHER_HAZARDS: "",
WHETHER_SCARCE: "",
WHETHER_CHEMICALS: "",
WHETHER_SPECIALEQUIPMENT: "",
WHETHER_SPECIALPEOPLE: "",
WHETHER_COALGAS: "",
WHETHER_FIRE: "",
WHETHER_CONFINED: "",
WHETHER_POWDER: "",
WHETHER_LIGHTNING: "",
WHETHER_ACTINOGEN: "",
WHETHER_LIQUIDAMMONIA: "",
WHETHER_PIPELINE: "",
},
mapDialogVisible: false,
});
const fnGetData = async () => {
const resData = await getEnterpriseInfo();
data.form = resData.pd;
data.form.bus_images = addingPrefixToFile(resData.busImgs);
data.form.four_images = addingPrefixToFile(resData.fourImgs);
data.form.OLDFOURTYPE = resData.pd.FOURTYPE;
data.form.FOURTYPE = resData.pd.FOURTYPE || 1;
};
fnGetData();
const enterpriseStatus = await layoutFnGetEnterpriseStatus();
const subordination = await layoutFnGetSubordination();
const enterpriseScale = await layoutFnGetEnterpriseScale();
const fnProhibitSelect = () => {
ElMessage.error("请联系管理员制作3D图");
data.form.FOURTYPE = 1;
};
const back = () => {
router.back();
};
const fnSubmit = debounce(
1000,
async () => {
await useFormValidate(formRef);
data.form.PROVINCE = data.form.POSSESSION[0] || "";
data.form.CITY = data.form.POSSESSION[1] || "";
data.form.COUNTY = data.form.POSSESSION[2] || "";
data.form.VILLAGE = data.form.POSSESSION[3] || "";
data.form.STREET = data.form.POSSESSION[4] || "";
data.form.COMPANY_AREA = territoryCascaderRef.value.getCheckedNodes();
data.form.SMALL = "2";
data.form.ECO_TYPE = data.form.ECO_TYPEALL[0] || "";
data.form.ECO_TYPE2 = data.form.ECO_TYPEALL[1] || "";
data.form.ECO_TYPE_NAME = economicTypeCascaderRef.value.getCheckedNodes();
data.form.CORP_TYPE = data.form.INDUSTRYALL[0] || "";
data.form.CORP_TYPE2 = data.form.INDUSTRYALL[1] || "";
data.form.CORP_TYPE3 = data.form.INDUSTRYALL[2] || "";
data.form.CORP_TYPE4 = data.form.INDUSTRYALL[3] || "";
data.form.CORP_TYPE_NAME = industryCascaderRef.value.getCheckedNodes();
const formData = new FormData();
Object.keys(data.form).forEach((key) => {
formData.append(key, data.form[key]);
});
for (let i = 0; i < data.form.bus_images.length; i++) {
data.form.bus_images[i].raw &&
formData.append("imgFiles", data.form.bus_images[i].raw);
}
for (let i = 0; i < data.form.four_images.length; i++) {
data.form.four_images[i].raw &&
formData.append("fourFiles", data.form.four_images[i].raw);
}
formData.append(
"EDITFOURTYPE",
data.form.FOURTYPE === data.form.OLDFOURTYPE
);
await setEnterpriseInfo(formData);
back();
},
{ atBegin: true }
);
</script>
<style scoped lang="scss"></style>