上级企业信息脱敏显示

src/components/info_builder/index.vue

@@ -2,20 +2,41 @@
   <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.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-else>
             <template v-if="item.value">
               {{ item.value }}
             </template>
-          <template v-if="!item.value">
+            <template v-else-if="!item.value">
               {{ info[item.key] }}
             </template>
+          </template>
         </slot>
       </el-descriptions-item>
     </template>
@@ -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">

src/views/database/connect_enterprises_management/components/editDialog.vue

@@ -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-form-item label="企业TOKEN" prop="token">
-            <el-input v-model="item.token"></el-input>
+            <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: "",
+    accessKey: { data: "", showData: true },
-    rsaPublicKey: "",
+    rsaPublicKey: { data: "", showData: true },
     url: "",
     requestUrl: "",
-    iv: "",
+    iv: { data: "", showData: true },
-    code: "",
+    code: { data: "", showData: true },
-    appid: "",
+    appid: { data: "", showData: true },
-    secret: "",
+    secret: { data: "", showData: true },
-    token: "",
+    token: { data: "", showData: true },
   },
 ]);
 const fnAddThirdList = () => {
@@ -428,15 +504,15 @@ const fnAddThirdList = () => {
     thirdPlatformId: "",
     companyCode: "",
     majorHazardCode: [],
-    accessKey: "",
+    accessKey: { data: "", showData: true },
-    rsaPublicKey: "",
+    rsaPublicKey: { data: "", showData: true },
     url: "",
     requestUrl: "",
-    iv: "",
+    iv: { data: "", showData: true },
-    code: "",
+    code: { data: "", showData: true },
-    appid: "",
+    appid: { data: "", showData: true },
-    secret: "",
+    secret: { data: "", showData: true },
-    token: "",
+    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;

src/views/database/connect_enterprises_management/index.vue

@@ -56,9 +56,9 @@
       </el-table-column>
     </app-table>
     <edit-dialog
-      v-if="visible"
+      v-if="editDialogObj.visible"
-      v-model:visible="visible"
+      v-model:visible="editDialogObj.visible"
-      :title="title"
+      :type="editDialogObj.type"
       :corp-info-id="corpInfoId"
       @get-data="resetPagination"
     ></edit-dialog>
@@ -108,17 +108,18 @@ const options = [
   },
 ];
 
-const visible = ref(false);
+const editDialogObj = ref({
-const title = 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("确定要删除吗？", {

src/views/database/connect_enterprises_management/info.vue

@@ -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: "accessKey", label: "密钥", encrypted: true, showData: false },
-  { key: "rsaPublicKey", label: "公钥" },
+  { key: "rsaPublicKey", label: "公钥", encrypted: true, showData: false },
   { key: "url", label: "上报数据URL" },
   { key: "requestUrl", label: "请求方法URL" },
-  { key: "iv", label: "对接IV" },
+  { key: "iv", label: "对接IV", encrypted: true, showData: false },
-  { key: "code", label: "企业CODE" },
+  { key: "code", label: "企业CODE", encrypted: true, showData: false },
-  { key: "appid", label: "企业APPID" },
+  { key: "appid", label: "企业APPID", encrypted: true, showData: false },
-  { key: "secret", label: "企业SECRET" },
+  { key: "secret", label: "企业SECRET", encrypted: true, showData: false },
-  { key: "token", label: "企业TOKEN" },
+  { 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}`;
   }