651 lines
20 KiB
Vue
651 lines
20 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="visible"
|
|
:title="type === 'edit' ? '修改' : '新增'"
|
|
:before-close="fnClose"
|
|
>
|
|
<el-form
|
|
ref="formRef"
|
|
:rules="rules"
|
|
label-width="220px"
|
|
:model="form"
|
|
label-position="right"
|
|
>
|
|
<el-divider content-position="left">企业基础信息</el-divider>
|
|
<el-row :gutter="24">
|
|
<form-items-renderer v-model="form" :options="baseInfoOptions">
|
|
<template #area>
|
|
<app-area-cascader
|
|
ref="areaRef"
|
|
v-model="form.area"
|
|
check-strictly
|
|
/>
|
|
</template>
|
|
<template #sectorId>
|
|
<app-cascader
|
|
ref="sectorIdRef"
|
|
id="f2598ba72e864eadabf0ca4b664d26b9"
|
|
value="dictionaryId"
|
|
v-model="form.sectorId"
|
|
:check-strictly="false"
|
|
></app-cascader>
|
|
</template>
|
|
<template #address>
|
|
<div style="display: flex; width: 100%">
|
|
<el-input v-model="form.address" disabled> </el-input>
|
|
<el-button class="ml-10" type="primary" @click="handleMap"
|
|
>定位</el-button
|
|
>
|
|
</div>
|
|
</template>
|
|
</form-items-renderer>
|
|
</el-row>
|
|
<el-divider content-position="left">企业属性信息</el-divider>
|
|
<el-row :gutter="24">
|
|
<form-items-renderer v-model="form" :options="companyPropsOptions">
|
|
</form-items-renderer>
|
|
</el-row>
|
|
</el-form>
|
|
<el-divider content-position="left">对接上级平台信息</el-divider>
|
|
<div class="add-btn mb-10">
|
|
<el-button type="primary" @click="fnAddThirdList()"
|
|
>添加上级平台</el-button
|
|
>
|
|
</div>
|
|
<el-form
|
|
ref="formRef1"
|
|
label-width="220px"
|
|
label-position="right"
|
|
:rules="thirdRules"
|
|
>
|
|
<el-row :gutter="24" v-for="(item, index) in thirdList" :key="index">
|
|
<el-divider></el-divider>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="上级对接平台"
|
|
:prop="thirdPlatformId"
|
|
:rules="thirdRules.thirdPlatformId"
|
|
>
|
|
<el-select
|
|
:disabled="thirdListOptions.length === 0"
|
|
v-model="item.thirdPlatformId"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item1 in thirdListOptions"
|
|
:key="item1.id"
|
|
:label="item1.platformName"
|
|
:value="item1.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item
|
|
label="企业编码"
|
|
:prop="companyCode"
|
|
:rules="thirdRules.companyCode"
|
|
>
|
|
<el-input v-model="item.companyCode"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="重大危险源编码">
|
|
<el-popover placement="bottom" :width="300" trigger="click">
|
|
<template #reference>
|
|
<div class="code_container">
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
border: 1px solid #dcdfe6;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 200px;
|
|
"
|
|
class="plr-10"
|
|
>
|
|
{{
|
|
item.majorHazardCode.length > 0
|
|
? item.majorHazardCode
|
|
.map((item) => item.code)
|
|
.join(",")
|
|
: ""
|
|
}}
|
|
</div>
|
|
<el-button type="primary" class="ml-10">添加编码</el-button>
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<el-button
|
|
class="ml-16 mb-10"
|
|
type="primary"
|
|
size="small"
|
|
@click="fnMajorHazardCodeAdd(item)"
|
|
>添加</el-button
|
|
>
|
|
<div
|
|
v-for="(itemChild, indexChild) in item.majorHazardCode"
|
|
:key="indexChild"
|
|
class="mb-10"
|
|
>
|
|
<el-input v-model="itemChild.code"
|
|
><template #append
|
|
><span @click="fnMajorHazardCodeReduce(item, indexChild)"
|
|
>删除</span
|
|
></template
|
|
></el-input
|
|
>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="密钥" prop="accessKey">
|
|
<el-input
|
|
v-model="item.accessKey.data"
|
|
:type="item.accessKey.showData ? 'text' : 'password'"
|
|
>
|
|
<template #append v-if="type === 'edit' && item.accessKey.data">
|
|
<el-button
|
|
:icon="item.accessKey.showData ? View : Hide"
|
|
@click="fnView(item.accessKey)"
|
|
></el-button> </template
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="公钥" prop="rsaPublicKey">
|
|
<el-input
|
|
v-model="item.rsaPublicKey.data"
|
|
:type="item.rsaPublicKey.showData ? 'text' : 'password'"
|
|
>
|
|
<template
|
|
#append
|
|
v-if="type === 'edit' && item.rsaPublicKey.data"
|
|
>
|
|
<el-button
|
|
:icon="item.rsaPublicKey.showData ? View : Hide"
|
|
@click="fnView(item.rsaPublicKey)"
|
|
></el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="上报数据URL" prop="url">
|
|
<el-input v-model="item.url"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="请求方法URL" prop="requestUrl">
|
|
<el-input v-model="item.requestUrl"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="对接IV" prop="iv">
|
|
<el-input
|
|
v-model="item.iv.data"
|
|
:type="item.iv.showData ? 'text' : 'password'"
|
|
>
|
|
<template #append v-if="type === 'edit' && item.iv.data">
|
|
<el-button
|
|
:icon="item.iv.showData ? View : Hide"
|
|
@click="fnView(item.iv)"
|
|
></el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="企业CODE" prop="code">
|
|
<el-input
|
|
v-model="item.code.data"
|
|
:type="item.code.showData ? 'text' : 'password'"
|
|
>
|
|
<template #append v-if="type === 'edit' && item.code.data">
|
|
<el-button
|
|
:icon="item.code.showData ? View : Hide"
|
|
@click="fnView(item.code)"
|
|
></el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="企业APPID" prop="appid">
|
|
<el-input
|
|
v-model="item.appid.data"
|
|
:type="item.appid.showData ? 'text' : 'password'"
|
|
>
|
|
<template #append v-if="type === 'edit' && item.appid.data">
|
|
<el-button
|
|
:icon="item.appid.showData ? View : Hide"
|
|
@click="fnView(item.appid)"
|
|
></el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="企业SECRET" prop="secret">
|
|
<el-input
|
|
v-model="item.secret.data"
|
|
:type="item.secret.showData ? 'text' : 'password'"
|
|
>
|
|
<template #append v-if="type === 'edit' && item.secret.data">
|
|
<el-button
|
|
:icon="item.secret.showData ? View : Hide"
|
|
@click="fnView(item.secret)"
|
|
></el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="企业TOKEN" prop="token">
|
|
<el-input
|
|
v-model="item.token.data"
|
|
:type="item.token.showData ? 'text' : 'password'"
|
|
>
|
|
<template #append v-if="type === 'edit' && item.token.data">
|
|
<el-button
|
|
:icon="item.token.showData ? View : Hide"
|
|
@click="fnView(item.token)"
|
|
></el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col class="add-btn" :span="24" v-if="thirdList.length > 1"
|
|
><el-button type="danger" @click="fnReduceThirdList(index)"
|
|
>删除</el-button
|
|
></el-col
|
|
>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<el-button type="primary" @click="fnSubmit">提交</el-button>
|
|
<el-button @click="fnClose">取消</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
<app-map
|
|
v-model:visible="visibleMap"
|
|
v-model:longitude="form.longitude"
|
|
v-model:latitude="form.latitude"
|
|
@submit="fnSubmitMap"
|
|
></app-map>
|
|
</template>
|
|
|
|
<script setup>
|
|
import useForm from "@/hooks/useForm.js";
|
|
import { ref, watch, useTemplateRef } from "vue";
|
|
import { debounce } from "throttle-debounce";
|
|
import { ElMessage } from "element-plus";
|
|
import FormItemsRenderer from "@/components/form_builder/form_items_renderer.vue";
|
|
import {
|
|
setBusCompanyInfoAdd,
|
|
setBusCompanyInfoUpdate,
|
|
getBusCompanyInfo,
|
|
getBusServicePlatformListAll,
|
|
} from "@/request/database.js";
|
|
import { STATUS_LIST, WHETHER_LIST } from "@/assets/js/constant.js";
|
|
import AppCascader from "@/components/cascader/index.vue";
|
|
import AppMap from "@/components/map/map.vue";
|
|
import { UNIFIED_SOCIAL_CREDIT_CODE } from "@/assets/js/regular.js";
|
|
import AppAreaCascader from "@/components/area_cascader/index.vue";
|
|
import { View, Hide } from "@element-plus/icons-vue";
|
|
const visible = defineModel("visible", { type: Boolean, required: true });
|
|
const props = defineProps({
|
|
corpInfoId: { type: Number, required: false },
|
|
type: { type: String, required: true },
|
|
});
|
|
const { data: servicePlatformList } = await getBusServicePlatformListAll();
|
|
const emits = defineEmits(["getData"]);
|
|
const { formRef, validate, reset } = useForm();
|
|
const form = ref({
|
|
companyName: "", // 企业名称
|
|
code: "", // 统一社会信用代码
|
|
area: [], // 属地
|
|
sectorId: [], // 所属行业
|
|
address: "",
|
|
latitude: "", // 经营地址
|
|
longitude: "", // 经营地址
|
|
companyStatus: "", // 企业状态
|
|
companyAddress: "", // 地理位置
|
|
companyContacts: "", // 主要负责人
|
|
companyMobile: "", // 负责人电话
|
|
servicePlatformId: "", // 服务平台
|
|
isMajorHazard: 0, // 是否重大危险源企业
|
|
isOpenMajorHazard: 0, // 是否开启重大危险源数据推送
|
|
isKeyProcess: 0, // 是否重点工艺企业
|
|
isOpenKeyProcess: 0, // 是否开启重点工艺企业数据推送
|
|
isSpecialInspection: 0, // 是否重点专项检查企业
|
|
isOpenSpecialInspection: 0, // 是否开启重点专项检查企业数据推送
|
|
isDustExplosion: 0, // 是否粉尘涉爆企业
|
|
});
|
|
const rules = {
|
|
companyName: [
|
|
{ required: true, message: "企业名称不能为空", trigger: "blur" },
|
|
],
|
|
code: [
|
|
{ required: true, message: "统一社会信用代码不能为空", trigger: "blur" },
|
|
|
|
{
|
|
pattern: UNIFIED_SOCIAL_CREDIT_CODE,
|
|
message: "请输入正确的统一社会信用代码",
|
|
},
|
|
],
|
|
// sectorId: [
|
|
// { required: true, message: "所属行业不能为空", trigger: "change" },
|
|
// ],
|
|
companyStatus: [
|
|
{ required: true, message: "企业状态不能为空", trigger: "change" },
|
|
],
|
|
// companyContacts: [
|
|
// { required: true, message: "主要负责人不能为空", trigger: "blur" },
|
|
// ],
|
|
// companyMobile: [
|
|
// { required: true, message: "负责人电话", trigger: "blur" },
|
|
// { min: 11, max: 13, message: "请输入手机号码或座机号", 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}$|^0\d{2,3}-?\d{7,8}$/,
|
|
// message: "请输入正确的手机号码或座机号(例:010-12345678)",
|
|
// },
|
|
// ],
|
|
servicePlatformId: [
|
|
{ required: true, message: "服务平台不能为空", trigger: "change" },
|
|
],
|
|
isMajorHazard: [
|
|
{ required: true, message: "是否重大危险源企业", trigger: "change" },
|
|
],
|
|
isOpenMajorHazard: [
|
|
{
|
|
required: true,
|
|
message: "是否开启重大危险源数据推送",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
isKeyProcess: [
|
|
{ required: true, message: "是否重点工艺企业", trigger: "change" },
|
|
],
|
|
isOpenKeyProcess: [
|
|
{
|
|
required: true,
|
|
message: "是否开启重点工艺企业数据推送",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
isSpecialInspection: [
|
|
{ required: true, message: "是否重点专项检查企业", trigger: "change" },
|
|
],
|
|
isOpenSpecialInspection: [
|
|
{
|
|
required: true,
|
|
message: "是否开启重点专项检查企业数据推送",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
isDustExplosion: [
|
|
{ required: true, message: "是否粉尘涉爆企业", trigger: "change" },
|
|
],
|
|
};
|
|
const thirdRules = {
|
|
thirdPlatformId: [{ required: true }],
|
|
companyCode: [{ required: true }],
|
|
};
|
|
const baseInfoOptions = [
|
|
{ key: "companyName", label: "企业名称" },
|
|
{ key: "code", label: "统一社会信用代码" },
|
|
{ key: "area", label: "属地" },
|
|
{ key: "sectorId", label: "所属行业" },
|
|
{
|
|
key: "companyStatus",
|
|
label: "企业状态",
|
|
type: "select",
|
|
options: STATUS_LIST,
|
|
},
|
|
{ key: "companyAddress", label: "地理位置" },
|
|
{ key: "companyContacts", label: "主要负责人" },
|
|
{ key: "companyMobile", label: "负责人电话" },
|
|
{
|
|
key: "servicePlatformId",
|
|
label: "服务平台",
|
|
type: "select",
|
|
valueKey: "id",
|
|
labelKey: "serviceName",
|
|
options: servicePlatformList,
|
|
},
|
|
{ key: "address", label: "经营地址", span: 24 },
|
|
];
|
|
|
|
const companyPropsOptions = [
|
|
{
|
|
key: "isMajorHazard",
|
|
label: "是否重大危险源企业",
|
|
type: "radio",
|
|
options: WHETHER_LIST,
|
|
},
|
|
{
|
|
key: "isOpenMajorHazard",
|
|
label: "是否开启重大危险源数据推送",
|
|
type: "radio",
|
|
options: WHETHER_LIST,
|
|
},
|
|
{
|
|
key: "isKeyProcess",
|
|
label: "是否重点工艺企业",
|
|
type: "radio",
|
|
options: WHETHER_LIST,
|
|
},
|
|
{
|
|
key: "isOpenKeyProcess",
|
|
label: "是否开启重点工艺企业数据推送",
|
|
type: "radio",
|
|
options: WHETHER_LIST,
|
|
},
|
|
{
|
|
key: "isSpecialInspection",
|
|
label: "是否重点专项检查企业",
|
|
type: "radio",
|
|
options: WHETHER_LIST,
|
|
},
|
|
{
|
|
key: "isOpenSpecialInspection",
|
|
label: "是否开启专项检查数据推送",
|
|
type: "radio",
|
|
options: WHETHER_LIST,
|
|
},
|
|
{
|
|
key: "isDustExplosion",
|
|
label: "是否粉尘涉爆企业",
|
|
type: "radio",
|
|
options: WHETHER_LIST,
|
|
},
|
|
];
|
|
const thirdListOptions = ref([]);
|
|
watch(
|
|
() => form.value.servicePlatformId,
|
|
(val) => {
|
|
thirdListOptions.value = servicePlatformList.filter(
|
|
(item) => item.id === val
|
|
)[0].thirdList;
|
|
}
|
|
);
|
|
|
|
const fnClose = () => {
|
|
reset();
|
|
visible.value = false;
|
|
};
|
|
const thirdList = ref([
|
|
{
|
|
thirdPlatformId: "",
|
|
companyCode: "",
|
|
majorHazardCode: [],
|
|
accessKey: { data: "", showData: true },
|
|
rsaPublicKey: { data: "", showData: true },
|
|
url: "",
|
|
requestUrl: "",
|
|
iv: { data: "", showData: true },
|
|
code: { data: "", showData: true },
|
|
appid: { data: "", showData: true },
|
|
secret: { data: "", showData: true },
|
|
token: { data: "", showData: true },
|
|
},
|
|
]);
|
|
const fnAddThirdList = () => {
|
|
thirdList.value.push({
|
|
thirdPlatformId: "",
|
|
companyCode: "",
|
|
majorHazardCode: [],
|
|
accessKey: { data: "", showData: true },
|
|
rsaPublicKey: { data: "", showData: true },
|
|
url: "",
|
|
requestUrl: "",
|
|
iv: { data: "", showData: true },
|
|
code: { data: "", showData: true },
|
|
appid: { data: "", showData: true },
|
|
secret: { data: "", showData: true },
|
|
token: { data: "", showData: true },
|
|
});
|
|
};
|
|
const fnReduceThirdList = (index) => {
|
|
if (thirdList.value.length <= 1) return;
|
|
thirdList.value.splice(index, 1);
|
|
};
|
|
const visibleMap = ref(false);
|
|
const handleMap = () => {
|
|
visibleMap.value = true;
|
|
};
|
|
const fnSubmitMap = () => {
|
|
form.value.address = `${form.value.longitude}-${form.value.latitude}`;
|
|
};
|
|
const checkThirdListItem = () => {
|
|
for (let i = 0; i < thirdList.value.length; i++) {
|
|
const obj = thirdList.value[i];
|
|
if (!obj.thirdPlatformId || !obj.companyCode) {
|
|
ElMessage.error("上级对接平台、企业编码不能为空");
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
const fnMajorHazardCodeAdd = (item) => {
|
|
item.majorHazardCode.push({ code: "" });
|
|
};
|
|
const fnMajorHazardCodeReduce = (item, index) => {
|
|
item.majorHazardCode.splice(index, 1);
|
|
};
|
|
const temArr = [
|
|
"accessKey",
|
|
"rsaPublicKey",
|
|
"iv",
|
|
"code",
|
|
"appid",
|
|
"secret",
|
|
"token",
|
|
];
|
|
const fnGetData = async () => {
|
|
if (!props.corpInfoId) return;
|
|
const { data } = await getBusCompanyInfo({ id: props.corpInfoId });
|
|
form.value = data;
|
|
form.value.area = [];
|
|
if (form.value.province) form.value.area.push(form.value.province);
|
|
if (form.value.city) form.value.area.push(form.value.city);
|
|
if (form.value.county) form.value.area.push(form.value.county);
|
|
if (form.value.village) form.value.area.push(form.value.village);
|
|
if (form.value.street) form.value.area.push(form.value.street);
|
|
form.value.sectorId = data.sectorId.split(",");
|
|
form.value.address = form.value.longitude
|
|
? `${form.value.longitude}-${form.value.latitude}`
|
|
: "";
|
|
thirdList.value = data.thirdList;
|
|
|
|
thirdList.value.forEach((item) => {
|
|
if (item.majorHazardCode) {
|
|
item.majorHazardCode = JSON.parse(item.majorHazardCode);
|
|
}
|
|
Object.entries(item).forEach(([key, value]) => {
|
|
if (temArr.includes(key)) {
|
|
item[key] = {
|
|
data: value,
|
|
showData: false,
|
|
};
|
|
}
|
|
});
|
|
});
|
|
};
|
|
fnGetData();
|
|
const sectorIdRef = ref("");
|
|
const appAreaRef = useTemplateRef("areaRef");
|
|
const fnSubmit = debounce(
|
|
1000,
|
|
async () => {
|
|
await validate();
|
|
const check = await checkThirdListItem();
|
|
if (check) {
|
|
const sectorName = sectorIdRef.value.getCheckedNodes();
|
|
const [province = "", city = "", county = "", village = "", street = ""] =
|
|
form.value.area;
|
|
|
|
const sectorId = form.value.sectorId.join(",");
|
|
thirdList.value.forEach((item) => {
|
|
item.majorHazardCode = item.majorHazardCode.filter(
|
|
(item) => item.code !== ""
|
|
);
|
|
item.majorHazardCode =
|
|
item.majorHazardCode.length > 0
|
|
? JSON.stringify(item.majorHazardCode)
|
|
: "";
|
|
temArr.forEach((key) => {
|
|
if (item[key]) {
|
|
item[key] = item[key].data;
|
|
}
|
|
});
|
|
});
|
|
|
|
const params = {
|
|
...form.value,
|
|
sectorId,
|
|
province,
|
|
city,
|
|
county,
|
|
village,
|
|
street,
|
|
areaName: appAreaRef.value.getCheckedNodes(),
|
|
sectorName,
|
|
thirdList: thirdList.value,
|
|
};
|
|
!props.corpInfoId
|
|
? await setBusCompanyInfoAdd(params)
|
|
: await setBusCompanyInfoUpdate(params);
|
|
ElMessage.success("操作成功");
|
|
emits("getData");
|
|
visible.value = false;
|
|
}
|
|
},
|
|
{ atBegin: true }
|
|
);
|
|
const fnView = (item) => {
|
|
item.showData = !item.showData;
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.add-btn {
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
.code_container {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
</style>
|