电子邮件新增修改查看

src/views/auditPages/assetsManagement/email.vue

@@ -32,7 +32,12 @@
         >导出</el-button
       >
 
-      <el-button type="primary" plain icon="el-icon-plus" size="mini"
+      <el-button
+        type="primary"
+        plain
+        icon="el-icon-plus"
+        size="mini"
+        @click="handleDialog()"
         >新增资产</el-button
       >
     </template>
@@ -43,6 +48,7 @@
         size="small"
         :inline="true"
         label-width="110px"
+        class="search-form"
       >
         <el-form-item label="所属单位：" prop="dwmc">
           <el-input
@@ -128,7 +134,12 @@
           align="center"
         >
           <template slot-scope="scope">
-            <el-button type="primary" size="mini" plain icon="el-icon-view"
+            <el-button
+              type="primary"
+              size="mini"
+              plain
+              icon="el-icon-view"
+              @click="handleDialog(scope.row.id, true)"
               >查看</el-button
             >
             <el-button
@@ -136,6 +147,7 @@
               size="mini"
               plain
               icon="el-icon-edit-outline"
+              @click="handleDialog(scope.row.id)"
               >修改</el-button
             >
             <el-button
@@ -160,7 +172,7 @@
         @pagination="getList"
       />
       <!-- 新增修改，详情 -->
-      <emailDialog />
+      <emailDialog @finish="handleQuery" ref="myDialog" />
       <!-- 资产导入对话框 -->
       <el-dialog
         :title="upload.title"
@@ -208,6 +220,7 @@
 <script>
 import { getToken } from "@/utils/auth";
 import emailDialog from "@/views/auditPages/components/assetsManagement/emailDialog.vue";
+
 import {
   assetEmailList,
   deleteAssetEmail,
@@ -260,6 +273,10 @@ export default {
     this.getDeptTree();
   },
   methods: {
+    // 弹窗操作
+    handleDialog(id, disabled) {
+      this.$refs.myDialog.openDialog(id, disabled);
+    },
     // 导出
     handleExport() {
       this.download(
@@ -382,12 +399,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-::v-deep .el-form-item__content {
-  width: 280px;
-  .el-select,
-  .el-date-editor {
-    width: 100%;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/views/auditPages/components/assetsManagement/emailDialog.js

@@ -1,3 +1,138 @@
-const formData = [];
-const formRules = {};
+const formData = [
+  {
+    key: "ssdw",
+    label: "所属单位",
+    type: "autocomplete",
+    prop: "ssdw",
+  },
+  {
+    key: "dzyxhz",
+    label: "电子邮箱后缀",
+    type: "input",
+    prop: "dzyxhz",
+  },
+  {
+    key: "jslx",
+    label: "建设类型",
+    type: "select",
+    prop: "jslx",
+    dict: "email_jslx",
+  },
+  {
+    key: "yjxtgys",
+    label: "邮件系统供应商",
+    type: "input",
+    prop: "yjxtgys",
+  },
+  {
+    key: "mmsf",
+    label: "密码算法",
+    type: "input",
+    prop: "mmsf",
+  },
+  {
+    key: "yjxtzc",
+    label: "邮件系统状态",
+    type: "select",
+    prop: "yjxtzc",
+    dict: "email_state",
+  },
+  {
+    key: "aqfhxt",
+    label: "安全防护系统",
+    type: "select",
+    prop: "aqfhxt",
+    dict: "email_hasorno",
+  },
+  {
+    key: "aqbfhj",
+    label: "安全备份环境",
+    type: "select",
+    prop: "aqbfhj",
+    dict: "email_hasorno",
+  },
+  {
+    key: "szzscs",
+    label: "数字证书厂商",
+    type: "input",
+    prop: "szzscs",
+  },
+  {
+    key: "sxsj",
+    label: "上线时间",
+    type: "date",
+    prop: "sxsj",
+  },
+  {
+    key: "sshy",
+    label: "所属行业",
+    type: "select",
+    prop: "sshy",
+    dict: "app_sshy",
+  },
+  {
+    key: "zdhy",
+    label: "重点行业",
+    type: "select",
+    prop: "zdhy",
+    dict: "app_zdhy",
+  },
+  {
+    key: "xzqh",
+    label: "行政区划",
+    type: "select",
+    prop: "xzqh",
+    dict: "app_xzqh",
+  },
+  {
+    key: "xtzrr",
+    label: "系统责任人",
+    type: "input",
+    prop: "xtzrr",
+  },
+  {
+    key: "xtzrrdh",
+    label: "系统责任人电话",
+    type: "input",
+    prop: "xtzrrdh",
+  },
+  {
+    key: "xtzrryx",
+    label: "系统责任人邮箱",
+    type: "input",
+    prop: "xtzrryx",
+  },
+  {
+    key: "xtzrrdz",
+    label: "系统责任人地址",
+    type: "input",
+    prop: "xtzrrdz",
+  },
+  {
+    key: "jj",
+    label: "简介",
+    type: "textarea",
+    prop: "jj",
+  },
+];
+const formRules = {
+  ssdw: [{ required: true, message: "请填写", trigger: "blur" }],
+  dzyxhz: [{ required: true, message: "请填写", trigger: "blur" }],
+  jslx: [{ required: true, message: "请填写", trigger: "blur" }],
+  yjxtgys: [{ required: true, message: "请填写", trigger: "blur" }],
+  mmsf: [{ required: true, message: "请填写", trigger: "blur" }],
+  yjxtzc: [{ required: true, message: "请填写", trigger: "blur" }],
+  aqfhxt: [{ required: true, message: "请填写", trigger: "blur" }],
+  aqbfhj: [{ required: true, message: "请填写", trigger: "blur" }],
+  szzscs: [{ required: true, message: "请填写", trigger: "blur" }],
+  sxsj: [{ required: true, message: "请填写", trigger: "blur" }],
+  sshy: [{ required: true, message: "请填写", trigger: "blur" }],
+  zdhy: [{ required: true, message: "请填写", trigger: "blur" }],
+  xzqh: [{ required: true, message: "请填写", trigger: "blur" }],
+  xtzrr: [{ required: true, message: "请填写", trigger: "blur" }],
+  xtzrrdh: [{ required: true, message: "请填写", trigger: "blur" }],
+  xtzrryx: [{ required: true, message: "请填写", trigger: "blur" }],
+  xtzrrdz: [{ required: true, message: "请填写", trigger: "blur" }],
+  jj: [{ required: true, message: "请填写", trigger: "blur" }],
+};
 export { formData, formRules };

src/views/auditPages/components/assetsManagement/emailDialog.vue

@@ -14,7 +14,83 @@
       label-position="right"
       :disabled="disabled"
     >
+      <form-title title="基本信息"></form-title>
+      <div class="grid-container">
+        <el-form-item
+          :label="item.label"
+          v-for="(item, index) in list"
+          :key="index"
+          :prop="item.prop"
+          :class="item.type == 'textarea' ? 'full-width' : ''"
+        >
+          <el-select
+            v-if="item.type == 'autocomplete'"
+            v-model="ruleForm[item.key]"
+            filterable
+            remote
+            placeholder="请输入关键词"
+            :remote-method="remoteMethod"
+            :loading="loading"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.nickName"
+              :value="item.nickName"
+            >
+            </el-option>
+          </el-select>
+          <!-- 输入框 -->
+          <el-input
+            v-if="item.type == 'input'"
+            v-model="ruleForm[item.key]"
+            :placeholder="'请输入' + item.label"
+          ></el-input>
+          <!-- 选择框 -->
+          <el-select
+            v-if="item.type == 'select'"
+            v-model="ruleForm[item.key]"
+            :placeholder="'请选择' + item.label"
+          >
+            <el-option
+              v-for="dict in dict.type[item.dict]"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+          <!-- 日期框 -->
+          <el-date-picker
+            v-if="item.type == 'date'"
+            v-model="ruleForm[item.key]"
+            type="date"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+          <!-- 多行文本框 -->
+          <el-input
+            v-if="item.type == 'textarea'"
+            type="textarea"
+            resize="none"
+            placeholder="请输入系统简介"
+            :rows="5"
+            v-model="ruleForm[item.key]"
+          ></el-input>
+        </el-form-item>
+      </div>
     </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="open = false" size="medium">返 回</el-button>
+      <el-button
+        type="primary"
+        size="medium"
+        @click="submit()"
+        v-show="!disabled"
+        >确 定</el-button
+      >
+    </span>
   </el-dialog>
 </template>
 
@@ -22,8 +98,21 @@
 import formTitle from "../formTitle.vue";
 import { checkRole } from "@/utils/permission"; // 权限判断函数
 import { formData, formRules } from "./emailDialog.js";
+import {
+  assetEmail,
+  assetEmailInfo,
+  unitAllList,
+} from "@/api/auditPagesApi/index";
 export default {
   components: { formTitle },
+  dicts: [
+    "app_xzqh",
+    "app_sshy",
+    "app_zdhy",
+    "email_jslx",
+    "email_state",
+    "email_hasorno",
+  ],
   data() {
     return {
       loading: false,
@@ -36,9 +125,99 @@ export default {
       disabled: false,
     };
   },
-  mounted() {},
-  methods: {},
+  mounted() {
+    this.remoteMethod();
+  },
+  methods: {
+    /** 打开对话框 */
+    openDialog(id, disabled) {
+      if (!id) {
+        this.title = "新增电子邮件";
+        this.resetForm("ruleForm");
+        this.ruleForm = {};
+        this.open = true;
+      } else {
+        this.getInfo(id);
+        this.disabled = disabled;
+      }
+    },
+    getInfo(id) {
+      assetEmailInfo(id).then((res) => {
+        this.resetForm("ruleForm");
+        this.ruleForm = res.data;
+        this.title = "修改电子邮件";
+        this.open = true;
+      });
+    },
+    submit() {
+      let index = 0;
+      let portion = [];
+      let isUnit = checkRole(["unit"]);
+      if (!isUnit) {
+        // 只验证部分(管理端)
+        portion = ["ssdw", "dzyxhz"];
+        this.$refs["ruleForm"].validateField(portion, (errors) => {
+          if (errors) {
+            console.log("部分字段验证失败:", errors);
+          } else {
+            index++;
+            if (index == portion.length) {
+              this.subFu();
+            }
+          }
+        });
+      } else {
+        //全部验证
+        this.$refs["ruleForm"].validate((valid) => {
+          if (valid) {
+            this.subFu();
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
+      }
+    },
+    async subFu() {
+      if (this.ruleForm.id != null) {
+        await assetEmail("put", this.ruleForm);
+        this.$modal.msgSuccess("修改成功");
+      } else {
+        await assetEmail("post", this.ruleForm);
+        this.$modal.msgSuccess("新增成功");
+      }
+      this.open = false;
+      this.$emit("finish");
+    },
+    /**单位名称模糊查询 */
+    async remoteMethod(query) {
+      let res = await unitAllList({ nickName: query });
+      this.options = res.data;
+      if (this.options.length == 0) {
+        this.ruleForm.ssdw = "";
+        this.$message.error("请输入正确的企业");
+      }
+    },
+  },
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.grid-container {
+  display: grid;
+  /* 设置网格布局为一行两列 */
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+/* 定义强制占一行的类样式 */
+.full-width {
+  /* 让元素跨越两列，从而占满一行 */
+  grid-column: span 2;
+}
+::v-deep .el-select,
+.el-cascader,
+.el-date-editor,
+.el-autocomplete {
+  width: 100%;
+}
+</style>

src/views/auditPages/components/assetsManagement/officialAccountDialog.vue

@@ -212,7 +212,7 @@ export default {
     },
     submit() {
       let index = 0;
-      let portion = ["ssdw", "gzhmc", "tyshxydm"];
+      let portion = [];
       let isUnit = checkRole(["unit"]);
       if (!isUnit) {
         // 只验证部分(管理端)