docking
/
docking-vue
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

上级企业信息脱敏显示

dev
dengjia 2025-08-27 10:19:43 +08:00
parent 30d39224d5
commit 286fe0d0ba
4 changed files with 187 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/info_builder/index.vue
View File

@ -2,19 +2,40 @@
<el-descriptions :column="column" border>
<template v-for="item in options" :key="item.key">
<el-descriptions-item
v-if="!item.hidden"
label-class-name="my-label"
content-class-name="my-content"
v-if="!item.hidden"
:label="item.label"
:span="item.span || 1"
width="150px"
>
<slot :name="item.key">
<template v-if="item.value">
{{ item.value }}
<template v-if="item.encrypted">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
"
>
<div v-if="item.showData">{{ info[item.key] }}</div>
<div v-else>{{ encryptText(info[item.key]) }}</div>
<el-button
v-if="info[item.key]"
text
link
:icon="item.showData ? View : Hide"
@click="fnView(item)"
></el-button>
</div>
</template>
<template v-if="!item.value">
{{ info[item.key] }}
<template v-else>
<template v-if="item.value">
{{ item.value }}
</template>
<template v-else-if="!item.value">
{{ info[item.key] }}
</template>
</template>
</slot>
</el-descriptions-item>
@ -23,14 +44,23 @@
</template>
<script setup>
import { View, Hide } from "@element-plus/icons-vue";
defineOptions({
name: "AppInfoBuilder",
});
const options = defineModel("options", { type: Array, required: true });
defineProps({
info: { type: Object, required: true },
options: { type: Array, required: true },
// options: { type: Array, required: true },
column: { type: Number, default: 2 },
});
const encryptText = (text) => {
if (!text) return "";
return "*".repeat(text.length);
};
const fnView = (item) => {
item.showData = !item.showData;
};
</script>
<style scoped lang="scss">

165
src/views/database/connect_enterprises_management/components/editDialog.vue
View File

@ -1,5 +1,9 @@
<template>
<el-dialog v-model="visible" :title="title" :before-close="fnClose">
<el-dialog
v-model="visible"
:title="type === 'edit' ? '修改' : '新增'"
:before-close="fnClose"
>
<el-form
ref="formRef"
:rules="rules"
@ -142,12 +146,34 @@
</el-col>
<el-col :span="12">
<el-form-item label="密钥" prop="accessKey">
<el-input v-model="item.accessKey"></el-input>
<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"></el-input>
<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">
@ -162,27 +188,77 @@
</el-col>
<el-col :span="12">
<el-form-item label="对接IV" prop="iv">
<el-input v-model="item.iv"></el-input>
<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"></el-input>
<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"></el-input>
<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"></el-input>
<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="appid">
<el-input v-model="item.token"></el-input>
<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"
@ -222,12 +298,12 @@ 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 { ArrowDown } from "@element-plus/icons-vue";
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 },
title: { type: String, required: true },
type: { type: String, required: true },
});
const { data: servicePlatformList } = await getBusServicePlatformListAll();
const emits = defineEmits(["getData"]);
@ -412,15 +488,15 @@ const thirdList = ref([
thirdPlatformId: "",
companyCode: "",
majorHazardCode: [],
accessKey: "",
rsaPublicKey: "",
accessKey: { data: "", showData: true },
rsaPublicKey: { data: "", showData: true },
url: "",
requestUrl: "",
iv: "",
code: "",
appid: "",
secret: "",
token: "",
iv: { data: "", showData: true },
code: { data: "", showData: true },
appid: { data: "", showData: true },
secret: { data: "", showData: true },
token: { data: "", showData: true },
},
]);
const fnAddThirdList = () => {
@ -428,15 +504,15 @@ const fnAddThirdList = () => {
thirdPlatformId: "",
companyCode: "",
majorHazardCode: [],
accessKey: "",
rsaPublicKey: "",
accessKey: { data: "", showData: true },
rsaPublicKey: { data: "", showData: true },
url: "",
requestUrl: "",
iv: "",
code: "",
appid: "",
secret: "",
token: "",
iv: { data: "", showData: true },
code: { data: "", showData: true },
appid: { data: "", showData: true },
secret: { data: "", showData: true },
token: { data: "", showData: true },
});
};
const fnReduceThirdList = (index) => {
@ -466,6 +542,15 @@ const fnMajorHazardCodeAdd = (item) => {
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 });
@ -481,13 +566,21 @@ const fnGetData = async () => {
? `${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");
@ -506,8 +599,17 @@ const fnSubmit = debounce(
item.majorHazardCode = item.majorHazardCode.filter(
(item) => item.code !== ""
);
item.majorHazardCode = JSON.stringify(item.majorHazardCode);
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,
@ -530,6 +632,9 @@ const fnSubmit = debounce(
},
{ atBegin: true }
);
const fnView = (item) => {
item.showData = !item.showData;
};
</script>
<style scoped lang="scss">
@ -537,12 +642,6 @@ const fnSubmit = debounce(
display: flex;
justify-content: end;
}
:deep {
.el-input-group__append button.el-button {
background-color: #409eff;
color: white;
}
}
.code_container {
display: flex;
flex: 1;

17
src/views/database/connect_enterprises_management/index.vue
View File

@ -56,9 +56,9 @@
</el-table-column>
</app-table>
<edit-dialog
v-if="visible"
v-model:visible="visible"
:title="title"
v-if="editDialogObj.visible"
v-model:visible="editDialogObj.visible"
:type="editDialogObj.type"
:corp-info-id="corpInfoId"
@get-data="resetPagination"
></edit-dialog>
@ -108,17 +108,18 @@ const options = [
},
];
const visible = ref(false);
const title = ref("");
const editDialogObj = ref({
visible: false,
type: "",
});
const fnAddorEdit = (type, row) => {
if (type === "edit") {
corpInfoId.value = row.id;
title.value = "修改";
} else {
title.value = "新增";
corpInfoId.value = null;
}
visible.value = true;
editDialogObj.value.type = type;
editDialogObj.value.visible = true;
};
const fnDelete = async (id) => {
await ElMessageBox.confirm("确定要删除吗？", {

23
src/views/database/connect_enterprises_management/info.vue
View File

@ -13,7 +13,7 @@
<app-info-builder :options="propsOptions" :info> </app-info-builder>
<el-divider content-position="left">对接上级平台信息</el-divider>
<div v-for="(item, index) in thirdList" :key="index" class="mb-10">
<app-info-builder :options="thirdListOptions" :info="item">
<app-info-builder v-model:options="thirdListOptions" :info="item">
<template #thirdPlatformId>
{{ fnPlatformName(target.thirdList, item.thirdPlatformId) }}
</template>
@ -87,26 +87,23 @@ const propsOptions = computed(() => [
value: translationStatus(info.value.isDustExplosion, WHETHER_LIST),
},
]);
const thirdListOptions = [
const thirdListOptions = ref([
{ key: "thirdPlatformId", label: "上级对接平台" },
{ key: "companyCode", label: "企业编码" },
{ key: "majorHazardCode", label: "重大危险源编码" },
{ key: "accessKey", label: "密钥" },
{ key: "rsaPublicKey", label: "公钥" },
{ key: "accessKey", label: "密钥", encrypted: true, showData: false },
{ key: "rsaPublicKey", label: "公钥", encrypted: true, showData: false },
{ key: "url", label: "上报数据URL" },
{ key: "requestUrl", label: "请求方法URL" },
{ key: "iv", label: "对接IV" },
{ key: "code", label: "企业CODE" },
{ key: "appid", label: "企业APPID" },
{ key: "secret", label: "企业SECRET" },
{ key: "token", label: "企业TOKEN" },
];
{ key: "iv", label: "对接IV", encrypted: true, showData: false },
{ key: "code", label: "企业CODE", encrypted: true, showData: false },
{ key: "appid", label: "企业APPID", encrypted: true, showData: false },
{ key: "secret", label: "企业SECRET", encrypted: true, showData: false },
{ key: "token", label: "企业TOKEN", encrypted: true, showData: false },
]);
const fnGetData = async () => {
const { data } = await getBusCompanyInfo({ id: id });
info.value = data;
// if (info.value.province) {
// info.value.area = `${info.value.province} ${info.value.city} ${info.value.county} ${info.value.village} ${info.value.street}`;
// }
if (info.value.longitude) {
info.value.address = `${info.value.longitude}-${info.value.latitude}`;
}