消息

src/api/system/configure-messages.js

@@ -0,0 +1,41 @@
+import request from "@/utils/request";
+// 消息模版配置表查询
+export function selectMsgTmpl(data) {
+    return request({
+        url: "/web/msg/selectMsgTmpl",
+        method: "post",
+        data,
+    });
+}
+//消息配置编辑
+export function selectMsgDetl(data) {
+    return request({
+        url: "/web/msg/selectMsgDetl",
+        method: "post",
+        data,
+    });
+}
+//消息配置保存
+export function saveMsgConfig(data) {
+    return request({
+        url: "/web/msg/saveMsgConfig",
+        method: "post",
+        data,
+    });
+}
+//消息配置下拉
+export function selectListBase(data) {
+    return request({
+        url: "/web/msg/selectListBase",
+        method: "post",
+        data,
+    });
+}
+// 消息启用禁用
+export function disabMsgConfig(data) {
+    return request({
+        url: "/web/msg/disabMsgConfig",
+        method: "post",
+        data,
+    });
+}

src/api/user.js

@@ -78,4 +78,11 @@ export function fixdata(data) {
     method: "post",
     data
   });
+}
+export function reqComData(data) {
+  return request({
+    url: data.url,
+    method: "post",
+    data: data.body,
+  });
 }

src/utils/menu/systemMenu.js

@@ -50,6 +50,18 @@ const systemMenuObj = [
     hidden: 0
   },
   {
+    component: "/page/system/configure-messages/index",
+    icon: "",
+    id: "configure-messages",
+    menuType: "MENU",
+    name: "configure-messages",
+    parentId: "system",
+    redirect: "",
+    remark: "消息配置",
+    router: "configure-messages",
+    hidden: 0
+  },
+  {
     component: "/page/system/role/index",
     icon: "",
     id: "role",

src/views/components/early-warning.vue

@@ -19,76 +19,90 @@
 </template>
   
 <script>
-import {updateMsgStas} from "@/api/messageCenter/index"
-  export default {
-    name: "mcsInfo",
-    props: {
-      info: {
-        type: Object,
-        default: null
-      },
-      chars:[]
+import { updateMsgStas } from "@/api/messageCenter/index";
+import { reqComData } from "@/api/user";
+export default {
+  name: "mcsInfo",
+  props: {
+    info: {
+      type: Object,
+      default: null,
     },
-    data() {
-      return {
-        a:"",
-      };
-    },
-    methods:{
-      // 跳转
-    getDetail(row) {
-      updateMsgStas([{id:row.id,msgStas:"1"}]).then((res)=>{
-        if(res.success==true){
+    chars: [],
+  },
+  data() {
+    return {
+      a: "",
+    };
+  },
+  methods: {
+    // 跳转
+    getDetail(item) {
+      if (item.msgKey == null || item.msgRoutePath == "" || item.url == null) {
+        return;
+      }
+      updateMsgStas([{ id: item.id, msgStas: "1" }]).then((res) => {});
+      reqComData({
+        url: item.url,
+        body: {
+          [item.msgKey]: item.msgValue,
+        },
+      }).then((res) => {
+        if (res.success == true) {
+          this.loding = false;
+          if (res.data.records.length <= 0) {
+            return;
+          }
+          let rowData = res.data.records[0] || {};
           this.$router.push({
-          name: row.msgRoutePath,
-          query: { sdpId: row.spdId,msgRouteUni:row.msgRouteUni },
-        });
+            name: item.msgRoutePath,
+            query: {
+              ...rowData,
+            },
+          });
         }
-      })
-      
+      });
     },
-    },
-    mounted() {
-      // this.info.msgColumnList.forEach((v,i) => {
-      //   if(v.color=='red'){
-      //     this.info.msgColumnList[i].color="#1093d7"
-      //   }else if(v.color=="yellow"){
-      //     this.info.msgColumnList[i].color="#f9bd72"
-      //   }
-      // });
-      if(this.info.msgColumnList.length==1){
-        this.a=this.info.msgText.replace('msg_1',this.info.msgColumnList[0].msgColumn)
-      }else if(this.info.msgColumnList.length==2){
-        this.a=this.info.msgText.replace('msg_1',this.info.msgColumnList[0].msgColumn)
-        this.a=this.a.replace('msg_2',"<span style='color:"+this.info.msgColumnList[1].msgColumnColor +"'>"+ '【'+ this.info.msgColumnList[1].msgColumn+'】'+"</span>")
-        // this.a=this.a.replace('msg_3',"<span style='color:"+this.info.msgColumnList[2].msgColumnColor +"'>"+ '【'+ this.info.msgColumnList[2].msgColumn+'】'+"</span>")
-      }else{
-        this.a=this.info.msgText.replace('msg_1',this.info.msgColumnList[0].msgColumn)
-        this.a=this.a.replace('msg_2',"<span style='color:"+this.info.msgColumnList[1].msgColumnColor +"'>"+ '【'+ this.info.msgColumnList[1].msgColumn+'】'+"</span>")
-        this.a=this.a.replace('msg_3',"<span style='color:"+this.info.msgColumnList[2].msgColumnColor +"'>"+ '【'+ this.info.msgColumnList[2].msgColumn+'】'+"</span>")
-      }
-      
-     },
-  };
+  },
+  mounted() {
+    let messText = this.info.msgText;
+    this.info.msgColumnList.forEach((item, index) => {
+      messText = messText.replace(
+        item.msgColumnNo,
+        `<span style='color:${
+          item.msgColumnColor
+        }' onclick='getDetail(${JSON.stringify({
+          url: item.url,
+          msgKey: item.msgKey,
+          msgRoutePath: item.msgRoutePath,
+          id: this.info.msgId,
+          msgValue: item.msgValue,
+        })})'>【${item.msgColumn}】</span>`
+      );
+    });
+    this.a = messText;
+
+    window.getDetail = this.getDetail;
+  },
+};
 </script>
   
 <style  lang="scss" scoped>
-  .mcs-name ::v-deep .imgSrc{
-        position: relative;
-        top: 3px;
-    }
-    .mcs-name ::v-deep .dateSrc{
-        display: block;
-        position: absolute;
-        top:13px;
-        right: 30px;
-    }
-    .mcs-name ::v-deep .StasSrc{
-        display: block;
-        position: absolute;
-        top:33px;
-        right: 35px;
-        font-weight: 800; 
-    }
-    
+.mcs-name ::v-deep .imgSrc {
+  position: relative;
+  top: 3px;
+}
+.mcs-name ::v-deep .dateSrc {
+  display: block;
+  position: absolute;
+  top: 13px;
+  right: 30px;
+}
+.mcs-name ::v-deep .StasSrc {
+  display: block;
+  position: absolute;
+  top: 33px;
+  right: 35px;
+  font-weight: 800;
+}
 </style>

src/views/page/system/configure-messages/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="wrap-box" v-loading="viewLoding">
+    <el-card class="box-card">
+      <!-- 表格组件 -->
+      <tableView
+        :getTableData="tabledata"
+        @pageTruning="changeTrunig"
+        :getsearchData="searchData"
+        @refreshData="parentGetDataMethod"
+      ></tableView>
+    </el-card>
+  </div>
+</template>
+<script>
+import tableView from "./tableView/index.vue";
+import { selectMsgTmpl } from "@/api/system/configure-messages";
+const pagaData = { current: 1, size: 10 };
+export default {
+  name: "wrapView",
+  components: {
+    tableView
+  },
+  data() {
+    return {
+      curetPage: 1, //表格当前在第几页
+      size: 10, //表格一页有几条数据
+      tabledata: {}, //接口请求到的表格数据
+      viewLoding: false, //数据加载中loding
+      searchData: {}
+    };
+  },
+  created() {
+    //刚进入页面请求数据
+    this.getTableData(pagaData);
+  },
+  watch: {
+    tabledata(newData) {
+      console.log("BBBBBBB", newData);
+    }
+  },
+  methods: {
+    //获取表格数据接口
+    getTableData(data) {
+      this.viewLoding = true;
+      selectMsgTmpl({ ...data })
+        .then(res => {
+          this.viewLoding = false;
+          if (res.success === true) {
+            this.tabledata = res.data;
+            this.curetPage = data.current;
+            this.size = data.size;
+            this.$nextTick(() => {
+              console.log("数据和DOM已更新");
+            });
+          }
+        })
+        .catch(error => {
+          this.viewLoding = false;
+          console.error("AAAAAAA", error);
+        });
+    },
+    parentGetDataMethod() {
+      this.getTableData({
+        ...this.searchData,
+        current: this.curetPage,
+        size: this.size
+      });
+    },
+    //分页器改变触发
+    changeTrunig(pageTrunig) {
+      this.getTableData({
+        ...this.searchData,
+        current: pageTrunig.current,
+        size: pageTrunig.size
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+.wrap-box {
+  padding: 5px;
+}
+</style>

src/views/page/system/configure-messages/tableView/index.vue

@@ -0,0 +1,563 @@
+/*消息配置*/
+<template>
+  <div class="table-box">
+    <el-form>
+      <el-form-item style="float: left">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          @click="dialogAddVisible = true"
+          class="lake-Blue"
+        >
+          新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      v-loading="loding"
+      :data="tableData"
+      element-loading-text="加载中..."
+      border
+      fit
+      highlight-current-row
+      height="500"
+      @row-dblclick="rowClick"
+    >
+      <template slot="empty">
+        <img src="" alt />
+        <p>暂无数据</p>
+      </template>
+      <el-table-column
+        fixed="left"
+        align="center"
+        type="index"
+        label="序号"
+        width="50"
+      />
+      <el-table-column label="消息标题" prop="msgTitle" align="center" />
+      <el-table-column label="消息类型" prop="msgType" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.msgType === 'notice'"> 通知 </span>
+          <span v-if="scope.row.msgType === 'warning'"> 预警 </span>
+          <span v-if="scope.row.msgType === 'inform'"> 告知 </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="消息大类" prop="msgClass" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.msgClass === '1'"> 业务 </span>
+          <span v-if="scope.row.msgClass === '0'"> 资质 </span>
+          <span v-if="scope.row.msgClass === '2'"> 审核 </span>
+          <span v-if="scope.row.msgClass === '3'"> 对账 </span>
+          <span v-if="scope.row.msgClass === '4'"> 库存 </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="启用/停用" prop="invdFlag" align="center">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.invdFlag"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-value="0"
+            inactive-value="1"
+            @change="handleSwitch(scope.row)"
+          >
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="操作"
+        #default="{ row }"
+        fixed="right"
+      >
+        <span class="operate-btn" @click.stop="editData(row)">编辑</span>
+      </el-table-column>
+    </el-table>
+    <div class="block">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="crutPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <el-dialog
+      title="消息编辑"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <el-form
+        :model="formAdd"
+        ref="queryAddForm"
+        :inline="true"
+        label-width="90px"
+        label-position="left"
+      >
+        <el-form-item label="消息类型" prop="msgType">
+          <template slot-scope="scope">
+            <el-select v-model="selectedItem.msgType" placeholder="请选择">
+              <el-option
+                v-for="item in formMsgType"
+                :key="item.listId"
+                :label="item.listName"
+                :value="item.listId"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-form-item>
+        <el-form-item label="消息大类" prop="msgClass">
+          <template slot-scope="scope">
+            <el-select v-model="selectedItem.msgClass" placeholder="请选择">
+              <el-option
+                v-for="item in formMsgClass"
+                :key="item.listId"
+                :label="item.listName"
+                :value="item.listId"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-form-item>
+        <el-form-item label="消息内容">
+          <el-input
+            style="width: 600px"
+            v-model="selectedItem.msgText"
+            placeholder="请输入消息内容"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-content">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          class="lake-Blue Listbutton"
+          @click="newAdd(form)"
+          >添加行</el-button
+        >
+        <el-table
+          :data="form"
+          element-loading-text="加载中..."
+          border
+          fit
+          highlight-current-row
+          height="200"
+        >
+          <el-table-column label="权限类型" prop="msgPermType" align="center">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.msgPermType" placeholder="请选择">
+                <el-option
+                  v-for="item in formBase"
+                  :key="item.listId"
+                  :label="item.listName"
+                  :value="item.listId"
+                ></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="权限内容" prop="msgPermId" align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.msgPermId"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button
+                class="red"
+                type="text"
+                @click="handleDelete(scope.$index, form)"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          class="lake-Blue Testbutton"
+          @click="newAdd(formEcan)"
+          >添加行</el-button
+        >
+        <el-table
+          :data="formEcan"
+          element-loading-text="加载中..."
+          border
+          fit
+          highlight-current-row
+          height="200"
+        >
+          <el-table-column
+            label="占位符颜色"
+            prop="msgColumnColor"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-select
+                v-model="scope.row.msgColumnColor"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in talSelectData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="占位符路由"
+            prop="msgRoutePath"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.msgRoutePath"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="URL" prop="url" align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.url"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="占位符" prop="msgHolder" align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.msgHolder"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="参数" prop="msgKey" align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.msgKey"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button
+                class="red"
+                type="text"
+                @click="handleDelete(scope.$index, formEcan)"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveData()">保存</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="新增消息"
+      :visible.sync="dialogAddVisible"
+      width="30%"
+      :before-close="handleCloseAdd"
+    >
+      <el-form
+        :model="formAdd"
+        ref="queryAddForm"
+        :inline="true"
+        label-width="90px"
+        label-position="left"
+        :rules="rules"
+      >
+        <el-form-item label="消息标题" prop="msgTitle">
+          <el-input
+            v-model.trim="formAdd.msgTitle"
+            placeholder="请输入消息标题"
+          />
+        </el-form-item>
+        <el-form-item label="消息类型" prop="msgType">
+          <template slot-scope="scope">
+            <el-select v-model="formAdd.msgType" placeholder="请选择">
+              <el-option
+                v-for="item in formMsgType"
+                :key="item.listId"
+                :label="item.listName"
+                :value="item.listId"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-form-item>
+        <el-form-item label="消息大类" prop="msgClass">
+          <template slot-scope="scope">
+            <el-select v-model="formAdd.msgClass" placeholder="请选择">
+              <el-option
+                v-for="item in formMsgClass"
+                :key="item.listId"
+                :label="item.listName"
+                :value="item.listId"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="saveDataAdd()">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  selectMsgDetl,
+  selectListBase,
+  saveMsgConfig,
+  disabMsgConfig
+} from "@/api/system/configure-messages";
+export default {
+  name: "tableView",
+  props: {
+    getTableData: {
+      type: Object,
+      default: {}
+    },
+    getsearchData: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      loding: false, // 表格数据加载loding
+      tableData: [], // 表格数据
+      total: 0,
+      pageSize: 10,
+      crutPage: 1,
+      searchData: {},
+      dialogVisible: false,
+      dialogAddVisible: false,
+      talSelectData: [
+        { value: "red", label: "红色" },
+        { value: "yellow", label: "黄色" },
+        { value: "blue", label: "蓝色" }
+      ],
+      formAdd: {
+        msgTitle: "",
+        msgType: "",
+        msgClass: ""
+      },
+      formEcan: [],
+      formBase: [], //消息配置下拉
+      formList: [],
+      formMsgClass: [],
+      formMsgType: [],
+      form: [],
+      selectedItem: {}, //存储数据
+      rules: {
+        msgTitle: [
+          {
+            required: true,
+            message: "标题消息不能为空",
+            trigger: "blur"
+          }
+        ],
+        msgType: [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change"
+          }
+        ],
+        msgClass: [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change"
+          }
+        ]
+      }
+    };
+  },
+  created() {
+    this.listBase();
+  },
+  methods: {
+    saveDataAdd() {
+      this.$refs["queryAddForm"].validate(async valid => {
+        if (valid) {
+          try {
+            const res = await saveMsgConfig(this.formAdd);
+            if (res.success === true) {
+              this.$message({
+                message: "保存成功",
+                type: "success"
+              });
+              this.dialogAddVisible = false;
+              this.$emit("refreshData");
+              this.formAdd = {};
+              this.$nextTick(() => {
+                this.$refs["queryAddForm"].clearValidate();
+              });
+            }
+          } catch (error) {
+            console.error("保存数据时出错：", error);
+            this.$message({
+              message: "错误，请稍后再试",
+              type: "error"
+            });
+          }
+        } else {
+          this.$message({
+            message: "请检查表单填写是否正确",
+            type: "warning"
+          });
+        }
+      });
+    },
+    newAdd(rows) {
+      const lastRow = rows[rows.length - 1] || {};
+      const newRow = JSON.parse(JSON.stringify(lastRow));
+      delete newRow.id;
+      rows.push(newRow);
+    },
+    handleDelete(index, rows) {
+      rows.splice(index, 1);
+    },
+    //编辑
+    async editData(row) {
+      this.selectedItem = { ...row };
+      selectMsgDetl({ msgId: row.msgId }).then(res => {
+        if (res.success === true) {
+          this.form = res.data.permRespDTOS;
+          this.formEcan = res.data.placeRespDTOS;
+        }
+      }),
+        (this.dialogVisible = true);
+    },
+    // 下拉
+    async listBase() {
+      const [permRes, msgTypeRes, msgClassRes] = await Promise.all([
+        selectListBase({ listType: "perm" }),
+        selectListBase({ listType: "msgType " }),
+        selectListBase({ listType: "msgClass " })
+      ]);
+      if (permRes.success) {
+        this.formBase = permRes.data;
+      }
+      // if (routeRes.success) {
+      //   this.formList = routeRes.data;
+      // }
+      if (msgTypeRes.success) {
+        this.formMsgType = msgTypeRes.data;
+      }
+      if (msgClassRes.success) {
+        this.formMsgClass = msgClassRes.data;
+      }
+    },
+
+    // 保存数据
+    saveData() {
+      // const permReqDTOS = this.form.map((item) => ({
+      //   id: item.id,
+      //   msgId: item.msgId,
+      //   msgPermType: item.msgPermType,
+      //   msgPermId: item.msgPermId,
+      // }));
+      // const placeReqDTOS = this.formEcan.map((item) => ({
+      //   id: item.id,
+      //   msgId: item.msgId,
+      //   msgColumnColor: item.msgColumnColor,
+      //   msgRoutePath: item.msgRoutePath,
+      //   msgHolder: item.msgHolder,
+      // }));
+      const data = {
+        msgId: this.selectedItem.msgId,
+        msgClass: this.selectedItem.msgClass,
+        msgText: this.selectedItem.msgText,
+        msgType: this.selectedItem.msgType,
+        msgTitle: this.selectedItem.msgTitle,
+        permReqDTOS: this.form,
+        placeReqDTOS: this.formEcan
+      };
+      saveMsgConfig(data).then(res => {
+        if (res.success == true) {
+          this.$message({
+            message: "保存成功",
+            type: "success"
+          });
+          this.dialogVisible = false;
+        }
+        this.$emit("refreshData");
+      });
+      this.dialogVisible = false;
+    },
+    handleClose() {
+      this.dialogVisible = false;
+      if (this.$refs.create !== undefined) {
+        this.$refs.create.resetFields();
+      }
+    },
+    // 启用停用
+    handleSwitch(row) {
+      let data = {
+        msgId: row.msgId,
+        type: row.invdFlag == "1" ? "disab" : "enab"
+      };
+      disabMsgConfig(data)
+        .then(res => {
+          this.$message({
+            message: "操作成功",
+            type: "success"
+          });
+          this.$emit("refreshData");
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    //每页几条数据
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.crutPage = 1;
+      let tablePam = { size: val, current: 1 };
+      this.$emit("pageTruning", tablePam);
+    },
+    // 当前在第几页
+    handleCurrentChange(val) {
+      this.crutPage = val;
+      let tablePam = { size: this.pageSize, current: val };
+      this.$emit("pageTruning", tablePam);
+    }
+  },
+  watch: {
+    //表格数据发生改变时重新渲染
+    getTableData(newData) {
+      console.log("tableData", newData.current);
+      let data = newData.records ? newData.records : [];
+      this.tableData = data;
+      this.total = newData.total ? newData.total : 0;
+      this.pageSize = newData.size ? newData.size : 10;
+    },
+    getsearchData(newData) {
+      this.searchData = newData;
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.table-box {
+  padding: 1px;
+  position: relative;
+  padding-bottom: 50px;
+  .block {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+  }
+  .operate-btn {
+    color: #3789ea;
+    cursor: pointer;
+    margin-left: 10px;
+  }
+}
+.Listbutton {
+  margin-bottom: 10px;
+}
+.Testbutton {
+  margin: 10px 0 10px 0;
+}
+</style>