新增 模板管理模块

src/api/notifyManage/index.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request';
+
+// 模板管理分页
+export async function notifyTemplatePageAPI(data) {
+  const res = await request.get(`/sys/notifytemplate/page`, {
+    params: data
+  });
+  console.log(data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 获取详情
+export async function notifyTemplateGetByIdAPI(id) {
+  const res = await request.get(`/sys/notifytemplate/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 修改模板管理数据
+export async function notifyTemplateUpdateAPI(data) {
+  const res = await request.put(`/sys/notifytemplate/update`, data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 保存模板管理数据
+export async function notifyTemplateSaveAPI(data) {
+  const res = await request.post(`/sys/notifytemplate/save`, data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除
+ */
+export async function notifyTemplateDeleteAPI(data) {
+  const res = await request.delete('/sys/notifytemplate/delete', {data});
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+

src/api/notifyRecord/index.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request';
+
+// 消息分页
+export async function notifyMessagePageAPI(data) {
+  const res = await request.post(`/sys/notifymessage/page`, {
+    data
+  });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 获取详情
+export async function notifyMessageGetByIdAPI(id) {
+  const res = await request.get(`/sys/notifymessage/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+
+

src/views/notifyManage/notifyRecord/components/addOrEditDialog.vue

@@ -0,0 +1,176 @@
+<!-- 字典项编辑弹窗 -->
+<template>
+  <ele-modal
+    width="30%"
+    :visible.sync="addOrEditDialogFlag"
+    :close-on-click-modal="false"
+    :title="title"
+    :before-close="closeDialog"
+  >
+    <el-form :model="formData" ref="formRef" :rules="rules" label-width="96px">
+      <el-form-item label="模板编码:" prop="code">
+        <el-input
+          clearable
+          :disabled="dialogType=='view'"
+          v-model="formData.code"
+          placeholder="请输入"
+        />
+      </el-form-item>
+      <el-form-item label="模板名称:" prop="name">
+        <el-input
+          clearable
+          :disabled="dialogType=='view'"
+          v-model="formData.name"
+          placeholder="请输入"
+        />
+      </el-form-item>
+      <el-form-item label="发件人名称:" prop="nickname">
+        <el-input
+          clearable
+          :disabled="dialogType=='view'"
+          v-model.number="formData.nickname"
+          placeholder="请输入排序"
+        />
+      </el-form-item>
+      <el-form-item label="模板内容:" prop="content">
+        <el-input
+          clearable
+          type="textarea"
+          :disabled="dialogType=='view'"
+          v-model="formData.content"
+          placeholder="请输入"
+        />
+      </el-form-item>
+      <el-form-item label="状态:" prop="status">
+        <el-radio :disabled="dialogType=='view'" v-model="formData.status" :label="1">开启</el-radio>
+        <el-radio :disabled="dialogType=='view'" v-model="formData.status" :label="0">禁用</el-radio>
+      </el-form-item>
+
+      <el-form-item label="备注:" prop="remark">
+        <el-input
+          clearable
+          type="textarea"
+          :disabled="dialogType=='view'"
+          v-model="formData.remark"
+          placeholder="请输入"
+        />
+      </el-form-item>
+
+
+    </el-form>
+    <template v-slot:footer>
+      <el-button type="primary" :loading="loading" @click="save">确认</el-button>
+      <el-button @click="closeDialog">返回</el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+import {saveOrUpdate} from '@/api/classifyManage';
+import dictMixins from '@/mixins/dictMixins';
+import {notifyTemplateGetByIdAPI, notifyTemplateSaveAPI, notifyTemplateUpdateAPI} from "@/api/notifyManage";
+
+export default {
+  name: 'addOrEditDialog',
+  props: {
+    addOrEditDialogFlag: [Boolean],
+  },
+  mixins: [dictMixins],
+  data() {
+
+    return {
+      // 表单数据
+      formData: {
+        code: '',
+        name: '',
+        nickname: '',
+        content: '',
+        status: '',
+        remark: '',
+      },
+      title: null,
+
+
+      // 表单验证规则
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入模板名称',
+            trigger: 'blur'
+          }
+        ],
+        code: [
+          {
+            required: true,
+            message: '请输入模板型编码',
+            trigger: 'blur'
+          }
+        ],
+        nickname: [
+          {
+            required: true,
+            message: '请输入发件人名称',
+            trigger: 'blur'
+          }
+        ],
+        content: [
+          {
+            required: true,
+            message: '请输入模板内容',
+            trigger: 'blur'
+          }
+        ],
+        status: [
+          {
+            required: true,
+            message: '请选择状态',
+            trigger: 'change'
+          }
+        ],
+
+      },
+      dialogType: '',
+      // 提交状态
+      loading: false,
+    };
+  },
+  created() {
+  },
+  methods: {
+    init(type, row = {}) {
+      this.title = type == 'add' ? '新增' : '修改'
+      this.dialogType = type
+      if (type !== 'add') {
+        this.getNotifyTemplateInfo(row)
+      }
+    },
+    async getNotifyTemplateInfo(row) {
+      this.formData = await notifyTemplateGetByIdAPI(row.id)
+    },
+    /* 保存编辑 */
+    save() {
+      this.$refs.formRef.validate(async (valid) => {
+        if (!valid) return this.$message.warning('有必填项未填写，请检查');
+        this.loading = true;
+        const params = {...this.formData};
+
+        const API = this.dialogType == 'add' ? notifyTemplateSaveAPI : notifyTemplateUpdateAPI
+        try {
+          await API(params)
+          this.$message.success('操作成功')
+          this.$emit('done')
+          this.closeDialog()
+        } catch (e) {
+          this.loading = false;
+        }
+
+      });
+    },
+    /* 关闭弹窗 */
+    closeDialog() {
+      this.$emit('update:addOrEditDialogFlag', false)
+    }
+  },
+};
+</script>

src/views/notifyManage/notifyRecord/index-search.vue

@@ -0,0 +1,75 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="100px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="模板编码：">
+          <el-input
+            clearable
+            placeholder="请输入"
+            v-model.trim="params.templateCode"
+          ></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="接收人：">
+          <el-input
+            clearable
+            v-model="params.userName"
+            placeholder="请输入"
+          ></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+export default {
+  data () {
+    // 默认表单数据
+    const defaultParams = {
+      userName: '',
+      templateCode: ''
+    };
+    return {
+      // 表单数据
+      params: { ...defaultParams }
+    };
+  },
+  computed: {
+    // 是否开启响应式布局
+    styleResponsive () {
+      return this.$store.state.theme.styleResponsive;
+    }
+  },
+  methods: {
+    /* 搜索 */
+    search () {
+      this.$emit('search', this.params);
+    },
+    /*  重置 */
+    reset () {
+      this.params = { ...this.defaultParams };
+      this.search();
+    }
+  }
+};
+</script>

src/views/notifyManage/notifyRecord/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 条件区 -->
+      <search @search="reload"/>
+      <ele-pro-table ref="table" :columns="columns" :datasource="datasource">
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-view"
+            @click="handleAddOrEdit('view',row)"
+          >
+            详情
+          </el-link>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <!--新增、修改-->
+    <add-or-edit-dialog v-if="addOrEditDialogFlag" :addOrEditDialogFlag.sync="addOrEditDialogFlag"
+                        ref="addOrEditDialogRef" @done="reload"></add-or-edit-dialog>
+  </div>
+</template>
+<script>
+
+import search from './index-search.vue';
+import addOrEditDialog from "@/views/notifyManage/templateManage/components/addOrEditDialog.vue";
+import {notifyMessagePageAPI} from "@/api/notifyRecord";
+
+export default {
+  components: {addOrEditDialog, search},
+  data() {
+    return {
+      addOrEditDialogFlag: false,
+      columns: [
+        {
+          columnKey: 'index',
+          label: '序号',
+          type: 'index',
+          width: 55,
+          align: 'center',
+          showOverflowTooltip: true,
+          fixed: 'left'
+        },
+        {
+          prop: 'templateNickname',
+          label: '发送人',
+          minWidth: '60',
+          align: "center",
+        },
+        {
+          prop: 'templateCode',
+          label: '模板编码',
+          minWidth: '120',
+          align: "center",
+        },
+        {
+          prop: 'templateContent',
+          label: '模板内容',
+          minWidth: '150',
+          align: "center",
+        },
+        {
+          prop: 'userName',
+          label: '接收人',
+          minWidth: '60',
+          align: "center",
+        },
+        {
+          prop: 'readStatus',
+          label: '是否已读',
+          minWidth: '60',
+          align: "center",
+          formatter: (_row, _column, cellValue) => {
+            return _row.readStatus ? '已读' : '未读';
+          }
+        },
+        {
+          prop: 'readTime',
+          label: '阅读时间',
+          minWidth: '120',
+          align: "center",
+          showOverflowTooltip: true,
+        },
+        {
+          prop: 'createTime',
+          label: '创建时间',
+          minWidth: '120',
+          align: "center",
+          showOverflowTooltip: true,
+        },
+        // {
+        //   columnKey: 'action',
+        //   label: '操作',
+        //   width: 100,
+        //   align: 'center',
+        //   slot: 'action',
+        //   fixed: 'right'
+        // }
+      ],
+      searchForm: {},
+      tableData: [],
+      size: 10,
+      page: 1,
+      total: 0
+    };
+  },
+  methods: {
+    //新增或修改模板
+    handleAddOrEdit(type, row) {
+      this.addOrEditDialogFlag = true
+      this.$nextTick(() => {
+        this.$refs.addOrEditDialogRef.init(type, row)
+      })
+    },
+    reload(params) {
+      this.$refs.table.reload({pageNum: 1, where: params});
+    },
+    datasource({page, where, limit,...row}) {
+      return notifyMessagePageAPI({
+        ...where,
+        pageNum: page,
+        size: limit
+      });
+    },
+    reset() {
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  background: #f0f3f3;
+  min-height: calc(100vh - 84px);
+}
+
+.zw-page-table {
+  background: #ffffff;
+  padding-top: 20px;
+}
+
+.pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 0;
+}
+
+.table {
+  width: 100%;
+  margin-top: 10px;
+}
+</style>

src/views/notifyManage/templateManage/components/addOrEditDialog.vue

@@ -0,0 +1,175 @@
+<!-- 字典项编辑弹窗 -->
+<template>
+  <ele-modal
+    width="30%"
+    :visible.sync="addOrEditDialogFlag"
+    :close-on-click-modal="false"
+    :title="title"
+    :before-close="closeDialog"
+  >
+    <el-form :model="formData" ref="formRef" :rules="rules" label-width="96px">
+      <el-form-item label="模板编码:" prop="code">
+        <el-input
+          clearable
+          :disabled="dialogType=='view'"
+          v-model="formData.code"
+          placeholder="请输入"
+        />
+      </el-form-item>
+      <el-form-item label="模板名称:" prop="name">
+        <el-input
+          clearable
+          :disabled="dialogType=='view'"
+          v-model="formData.name"
+          placeholder="请输入"
+        />
+      </el-form-item>
+      <el-form-item label="发件人名称:" prop="nickname">
+        <el-input
+          clearable
+          :disabled="dialogType=='view'"
+          v-model.number="formData.nickname"
+          placeholder="请输入排序"
+        />
+      </el-form-item>
+      <el-form-item label="模板内容:" prop="content">
+        <el-input
+          clearable
+          type="textarea"
+          :disabled="dialogType=='view'"
+          v-model="formData.content"
+          placeholder="请输入"
+        />
+      </el-form-item>
+      <el-form-item label="状态:" prop="status">
+        <el-radio :disabled="dialogType=='view'" v-model="formData.status" :label="1">启用</el-radio>
+        <el-radio :disabled="dialogType=='view'" v-model="formData.status" :label="0">禁用</el-radio>
+      </el-form-item>
+
+      <el-form-item label="备注:" prop="remark">
+        <el-input
+          clearable
+          type="textarea"
+          :disabled="dialogType=='view'"
+          v-model="formData.remark"
+          placeholder="请输入"
+        />
+      </el-form-item>
+
+
+    </el-form>
+    <template v-slot:footer>
+      <el-button type="primary" :loading="loading" @click="save">确认</el-button>
+      <el-button @click="closeDialog">返回</el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+import dictMixins from '@/mixins/dictMixins';
+import {notifyTemplateGetByIdAPI, notifyTemplateSaveAPI, notifyTemplateUpdateAPI} from "@/api/notifyManage";
+
+export default {
+  name: 'addOrEditDialog',
+  props: {
+    addOrEditDialogFlag: [Boolean],
+  },
+  mixins: [dictMixins],
+  data() {
+
+    return {
+      // 表单数据
+      formData: {
+        code: '',
+        name: '',
+        nickname: '',
+        content: '',
+        status: 1,
+        remark: '',
+      },
+      title: null,
+
+
+      // 表单验证规则
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入模板名称',
+            trigger: 'blur'
+          }
+        ],
+        code: [
+          {
+            required: true,
+            message: '请输入模板型编码',
+            trigger: 'blur'
+          }
+        ],
+        nickname: [
+          {
+            required: true,
+            message: '请输入发件人名称',
+            trigger: 'blur'
+          }
+        ],
+        content: [
+          {
+            required: true,
+            message: '请输入模板内容',
+            trigger: 'blur'
+          }
+        ],
+        status: [
+          {
+            required: true,
+            message: '请选择状态',
+            trigger: 'change'
+          }
+        ],
+
+      },
+      dialogType: '',
+      // 提交状态
+      loading: false,
+    };
+  },
+  created() {
+  },
+  methods: {
+    init(type, row = {}) {
+      this.title = type == 'add' ? '新增' : '修改'
+      this.dialogType = type
+      if (type !== 'add') {
+        this.getNotifyTemplateInfo(row)
+      }
+    },
+    async getNotifyTemplateInfo(row) {
+      this.formData = await notifyTemplateGetByIdAPI(row.id)
+    },
+    /* 保存编辑 */
+    save() {
+      this.$refs.formRef.validate(async (valid) => {
+        if (!valid) return this.$message.warning('有必填项未填写，请检查');
+        this.loading = true;
+        const params = {...this.formData};
+
+        const API = this.dialogType == 'add' ? notifyTemplateSaveAPI : notifyTemplateUpdateAPI
+        try {
+          await API(params)
+          this.$message.success('操作成功')
+          this.$emit('done')
+          this.closeDialog()
+        } catch (e) {
+          this.loading = false;
+        }
+
+      });
+    },
+    /* 关闭弹窗 */
+    closeDialog() {
+      this.$emit('update:addOrEditDialogFlag', false)
+    }
+  },
+};
+</script>

src/views/notifyManage/templateManage/index-search.vue

@@ -0,0 +1,75 @@
+<!-- 搜索表单 -->
+<template>
+  <el-form
+    label-width="100px"
+    class="ele-form-search"
+    @keyup.enter.native="search"
+    @submit.native.prevent
+  >
+    <el-row :gutter="15">
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="模板编码：">
+          <el-input
+            clearable
+            placeholder="请输入"
+            v-model.trim="params.code"
+          ></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <el-form-item label="模板名称：">
+          <el-input
+            clearable
+            v-model="params.name"
+            placeholder="请输入"
+          ></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+        <div class="ele-form-actions">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="ele-btn-icon"
+            @click="search"
+          >
+            查询
+          </el-button>
+          <el-button @click="reset">重置</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+export default {
+  data () {
+    // 默认表单数据
+    const defaultParams = {
+      name: '',
+      code: ''
+    };
+    return {
+      // 表单数据
+      params: { ...defaultParams }
+    };
+  },
+  computed: {
+    // 是否开启响应式布局
+    styleResponsive () {
+      return this.$store.state.theme.styleResponsive;
+    }
+  },
+  methods: {
+    /* 搜索 */
+    search () {
+      this.$emit('search', this.params);
+    },
+    /*  重置 */
+    reset () {
+      this.params = { ...this.defaultParams };
+      this.search();
+    }
+  }
+};
+</script>

src/views/notifyManage/templateManage/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 条件区 -->
+      <search @search="reload"/>
+      <ele-pro-table ref="table" :columns="columns" :datasource="datasource">
+        <template v-slot:toolbar>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            class="ele-btn-icon"
+            @click="handleAddOrEdit('add','')">
+            新建
+          </el-button>
+        </template>
+        <!-- 操作列 -->
+        <template v-slot:action="{ row }">
+
+          <el-link
+            type="primary"
+            :underline="false"
+            icon="el-icon-edit"
+            @click="handleAddOrEdit('update',row)"
+          >
+            编辑
+          </el-link>
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除此数据吗？"
+            @confirm="deleteCategory(row)">
+            <template v-slot:reference>
+              <el-link type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
+            </template>
+          </el-popconfirm>
+        </template>
+      </ele-pro-table>
+    </el-card>
+    <!--新增、修改-->
+    <add-or-edit-dialog v-if="addOrEditDialogFlag" :addOrEditDialogFlag.sync="addOrEditDialogFlag"
+                        ref="addOrEditDialogRef" @done="reload"></add-or-edit-dialog>
+  </div>
+</template>
+<script>
+
+import search from './index-search.vue';
+import {notifyTemplateDeleteAPI, notifyTemplatePageAPI} from "@/api/notifyManage";
+import addOrEditDialog from "@/views/notifyManage/templateManage/components/addOrEditDialog.vue";
+
+export default {
+  components: {addOrEditDialog, search},
+  data() {
+    return {
+      addOrEditDialogFlag: false,
+      columns: [
+        {
+          columnKey: 'index',
+          label: '序号',
+          type: 'index',
+          width: 55,
+          align: 'center',
+          showOverflowTooltip: true,
+          fixed: 'left'
+        },
+        {
+          prop: 'code',
+          label: '模板编码',
+          minWidth: '120',
+          align: "center",
+        },
+        {
+          prop: 'name',
+          label: '模板名称',
+          minWidth: '120',
+          align: "center",
+        },
+        {
+          prop: 'nickname',
+          label: '发送人名称',
+          minWidth: '80',
+          align: "center",
+        },
+
+        {
+          prop: 'content',
+          label: '模板内容',
+          minWidth: '150',
+          align: "center",
+        },
+        {
+          prop: 'status',
+          label: '开启状态',
+          minWidth: '60',
+          align: "center",
+          formatter: (_row, _column, cellValue) => {
+            return _row.status ? '启用' : '禁用';
+          }
+        },
+        {
+          prop: 'remark',
+          label: '备注',
+          minWidth: '120',
+          align: "center",
+        },
+        {
+          prop: 'createTime',
+          label: '创建时间',
+          minWidth: '140',
+          align: "center",
+        },
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 250,
+          align: 'center',
+          slot: 'action',
+          fixed: 'right'
+        }
+      ],
+      searchForm: {},
+      tableData: [],
+      size: 10,
+      page: 1,
+      total: 0
+    };
+  },
+  methods: {
+    //新增或修改模板
+    handleAddOrEdit(type, row) {
+      this.addOrEditDialogFlag = true
+      this.$nextTick(() => {
+        this.$refs.addOrEditDialogRef.init(type, row)
+      })
+    },
+    reload(params) {
+      console.log(params,'=======');
+      this.$refs.table.reload({pageNum: 1, where: params});
+    },
+    async deleteCategory({id}) {
+      await notifyTemplateDeleteAPI([id]);
+      this.$refs.table.reload();
+    },
+    datasource({page, where, limit,...row}) {
+      console.log(page, where, limit,row);
+      return notifyTemplatePageAPI({
+        ...where,
+        pageNum: page,
+        size: limit
+      });
+    },
+    reset() {
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  background: #f0f3f3;
+  min-height: calc(100vh - 84px);
+}
+
+.zw-page-table {
+  background: #ffffff;
+  padding-top: 20px;
+}
+
+.pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 0;
+}
+
+.table {
+  width: 100%;
+  margin-top: 10px;
+}
+</style>