共治号功能

src/views/auditPages/assetsManagement/officialAccount.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="100px"
+        class="search-form"
       >
         <el-form-item label="所属单位：" prop="dwmc">
           <el-input
@@ -131,7 +137,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
@@ -139,6 +150,7 @@
               size="mini"
               plain
               icon="el-icon-edit-outline"
+              @click="handleDialog(scope.row.id)"
               >修改</el-button
             >
             <el-button
@@ -202,6 +214,9 @@
           <el-button @click="upload.open = false">取 消</el-button>
         </div>
       </el-dialog>
+
+      <!-- 新增修改查看 -->
+      <officialAccountDialog ref="myDialog" @finish="handleQuery" />
     </template>
   </main-app>
 </template>
@@ -213,8 +228,10 @@ import {
   deleteAssetOfficialAccount,
   schema,
 } from "@/api/auditPagesApi/index";
+import officialAccountDialog from "@/views/auditPages/components/assetsManagement/officialAccountDialog.vue";
 export default {
   dicts: ["sys_ptlx_type", "gzh_state"],
+  components: { officialAccountDialog },
   data() {
     return {
       // 部门树选项
@@ -259,6 +276,10 @@ export default {
     this.getDeptTree();
   },
   methods: {
+    // 弹窗操作
+    handleDialog(id, disabled) {
+      this.$refs.myDialog.openDialog(id, disabled);
+    },
     // 删除
     handleDel(id) {
       this.$modal
@@ -382,12 +403,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-::v-deep .el-form-item__content {
-  width: 280px;
-  .el-select,
-  .el-date-editor {
-    width: 100%;
-  }
-}
-</style>

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

@@ -0,0 +1,189 @@
+const formData = [
+  {
+    key: "ssdw",
+    label: "所属单位",
+    type: "autocomplete",
+    prop: "ssdw",
+  },
+  {
+    key: "ptlx",
+    label: "平台类型",
+    type: "select",
+    prop: "ptlx",
+    dict: "sys_ptlx_type",
+  },
+  {
+    key: "wxh",
+    label: "微信号",
+    type: "input",
+    prop: "wxh",
+  },
+  {
+    key: "gzhmc",
+    label: "平台号名称",
+    type: "input",
+    prop: "gzhmc",
+  },
+  {
+    key: "tyshxydm",
+    label: "统一社会信用代码",
+    type: "input",
+    prop: "tyshxydm",
+  },
+  {
+    key: "gzhzt",
+    label: "平台号状态",
+    type: "input",
+    prop: "gzhzt",
+  },
+  {
+    key: "gzhId",
+    label: "平台号ID",
+    type: "input",
+    prop: "gzhId",
+  },
+  {
+    key: "gzhlx",
+    label: "平台号类型",
+    type: "select",
+    prop: "gzhlx",
+    dict: "gzh_lx",
+  },
+  {
+    key: "fss",
+    label: "粉丝数",
+    type: "input",
+    prop: "fss",
+  },
+  {
+    key: "rzState",
+    label: "认证状态",
+    type: "select",
+    prop: "rzState",
+    dict: "gzh_rzzt",
+  },
+  {
+    key: "rzsj",
+    label: "认证时间",
+    type: "date",
+    prop: "rzsj",
+  },
+  {
+    key: "rzlx",
+    label: "认证类型",
+    type: "select",
+    prop: "rzlx",
+    dict: "gzh_rzlx",
+  },
+  {
+    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: "rzzt",
+    label: "认证主体",
+    type: "input",
+    prop: "rzzt",
+  },
+  {
+    key: "xtjj",
+    label: "系统简介",
+    type: "textarea",
+    prop: "xtjj",
+  },
+];
+const formRules = {
+  ssdw: [{ required: true, message: "请填写", trigger: "blur" }],
+  ptlx: [{ required: true, message: "请填写", trigger: "blur" }],
+  wxh: [{ required: true, message: "请填写", trigger: "blur" }],
+  gzhmc: [{ required: true, message: "请填写", trigger: "blur" }],
+  tyshxydm: [
+    { required: true, message: "请填写", trigger: "blur" },
+    {
+      pattern: /^[a-zA-Z0-9]{18}$/,
+      message: "请输入正确格式的18位统一社会信用代码",
+      trigger: "blur",
+    },
+  ],
+  gzhzt: [{ required: true, message: "请填写", trigger: "blur" }],
+  gzhId: [{ required: true, message: "请填写", trigger: "blur" }],
+  gzhlx: [{ required: true, message: "请填写", trigger: "blur" }],
+  fss: [{ required: true, message: "请填写", trigger: "blur" }],
+  rzsj: [{ required: true, message: "请填写", trigger: "blur" }],
+  rzlx: [{ required: true, message: "请填写", trigger: "blur" }],
+  rzState: [{ 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" }],
+  rzzt: [{ required: true, message: "请填写", trigger: "blur" }],
+  xtjj: [{ required: true, message: "请填写", trigger: "blur" }],
+  cdList: [
+    { required: true, message: "请填写", trigger: "blur" },
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        console.log(rule, value);
+        if (value.length == 0) {
+          callback(new Error("请填写"));
+        } else {
+          value.map((item) => {
+            if (item.cdmc == "" && item.cdlx == "" && item.cdlj == "")
+              callback(new Error("请填写"));
+            return;
+          });
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+};
+
+export { formData, formRules };

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

@@ -0,0 +1,340 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    append-to-body
+    fullscreen
+    center
+  >
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="170px"
+      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"
+          v-show="filterShow(item.key)"
+          :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"
+            @change="changeSelct($event, item.key)"
+          >
+            <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>
+      <div v-show="ruleForm.ptlx == 1">
+        <form-title title="菜单信息"></form-title>
+        <el-form-item
+          v-for="(item, index) in ruleForm.cdList"
+          :label="'菜单信息' + (index == 0 ? '' : index + 1)"
+          :key="index + 'last'"
+          prop="cdList"
+        >
+          <div class="grid-container">
+            <el-input
+              v-model="item.cdmc"
+              placeholder="请输入菜单名称"
+            ></el-input>
+            <el-input
+              v-model="item.cdlj"
+              placeholder="请输入菜单链接"
+            ></el-input>
+            <el-select v-model="item.cdlx" placeholder="请选择菜单类型">
+              <el-option
+                v-for="dict in dict.type.gzh_cdlx"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+            <i
+              class="el-icon-remove-outline"
+              v-show="index > 0"
+              @click="handleDel(index)"
+            ></i>
+          </div>
+        </el-form-item>
+
+        <el-button style="margin-left: 170px" @click="handleAdd"
+          >添加菜单</el-button
+        >
+      </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>
+
+<script>
+import formTitle from "../formTitle.vue";
+import { checkRole } from "@/utils/permission"; // 权限判断函数
+import { formData, formRules } from "./officialAccountDialog.js";
+import {
+  assetOfficialAccount,
+  assetOfficialAccountInfo,
+  unitAllList,
+} from "@/api/auditPagesApi/index";
+export default {
+  components: { formTitle },
+  dicts: [
+    "app_xzqh",
+    "app_sshy",
+    "app_zdhy",
+    "gzh_state",
+    "gzh_lx",
+    "gzh_rzzt",
+    "gzh_rzlx",
+    "gzh_cdlx",
+    "sys_ptlx_type",
+  ],
+  data() {
+    return {
+      loading: false,
+      options: [],
+      list: formData,
+      title: "",
+      open: false,
+      ruleForm: {
+        ptlx: "1",
+        cdList: [
+          {
+            cdmc: "",
+            cdlj: "",
+            cdlx: "",
+          },
+        ],
+      },
+      rules: formRules,
+      disabled: false,
+    };
+  },
+  mounted() {
+    this.remoteMethod();
+  },
+  methods: {
+    /** 打开对话框 */
+    openDialog(id, disabled) {
+      if (!id) {
+        this.title = "新增公众号";
+        this.resetForm("ruleForm");
+        this.ruleForm = {
+          ptlx: "1",
+          cdList: [
+            {
+              cdmc: "",
+              cdlj: "",
+              cdlx: "",
+            },
+          ],
+        };
+
+        this.open = true;
+      } else {
+        this.getInfo(id);
+        this.disabled = disabled;
+      }
+    },
+    getInfo(id) {
+      assetOfficialAccountInfo(id).then((res) => {
+        this.resetForm("ruleForm");
+        this.ruleForm = res.data;
+        this.title = "修改公众号";
+        this.open = true;
+      });
+    },
+    submit() {
+      let index = 0;
+      let portion = ["ssdw", "gzhmc", "tyshxydm"];
+      let isUnit = checkRole(["unit"]);
+      if (!isUnit) {
+        // 只验证部分(管理端)
+        portion = ["ssdw", "gzhmc", "tyshxydm"];
+      } else {
+        // 要全部验证(考虑平台类型)
+        if (this.resetForm.ptlx == "1") {
+          portion = ["fss"];
+        } else {
+          portion = ["wxh", "gzhlx", "xzqh", "rzsj", "rzlx", "rzState"];
+        }
+      }
+      this.$refs["ruleForm"].validateField(portion, (errors) => {
+        if (errors) {
+          console.log("部分字段验证失败:", errors);
+        } else {
+          index++;
+          if (index == portion.length) {
+            this.subFu();
+          }
+        }
+      });
+    },
+    async subFu() {
+      if (this.ruleForm.id != null) {
+        await assetOfficialAccount("put", this.ruleForm);
+        this.$modal.msgSuccess("修改成功");
+      } else {
+        await assetOfficialAccount("post", this.ruleForm);
+        this.$modal.msgSuccess("新增成功");
+      }
+      this.open = false;
+      this.$emit("finish");
+    },
+    //添加菜单
+    handleAdd() {
+      this.ruleForm.cdList.push({
+        cdmc: "",
+        cdlj: "",
+        cdlx: "",
+      });
+    },
+    //统一选择框变化
+    changeSelct(e, keyItem) {
+      if (keyItem == "ptlx") {
+        Object.keys(this.ruleForm).forEach((key) => {
+          if (key == "cdList") {
+            this.ruleForm[key] = [
+              {
+                cdmc: "",
+                cdlj: "",
+                cdlx: "",
+              },
+            ];
+            return;
+          }
+          if (key == "ssdw" || key == "ptlx" || key == "id") {
+            return;
+          }
+          let item = this.list.find((item) => item.key == key);
+          if (item && item.key) {
+            this.ruleForm[key] = "";
+          }
+        });
+      }
+    },
+    filterShow(key) {
+      if (key == "fss") {
+        return this.ruleForm.ptlx > 1;
+      }
+      let list = [
+        "wxh",
+        // "gzhmc",
+        // "gzhId",
+        "gzhlx",
+        // "rzzt",
+        "xzqh",
+        "rzsj",
+        "rzlx",
+        "rzState",
+        // "gzhzt",
+      ];
+      let index = list.findIndex((item) => item == key);
+      if (index > -1) {
+        return this.ruleForm.ptlx == 1;
+      }
+
+      return true;
+    },
+    //删除菜单
+    handleDel(index) {
+      this.ruleForm.cdList.splice(index, 1);
+    },
+    /**单位名称模糊查询 */
+    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 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/programDialog.js

@@ -1,5 +1,3 @@
-import { unitAllList } from "@/api/auditPagesApi/index";
-
 const formData = [
   {
     key: "ssdw",