门店系统消息页面

src/views/modules/message/bizMessageConfig-add-or-update.vue

@@ -0,0 +1,174 @@
+<template>
+  <el-dialog
+    :title="!dataForm.mainId ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    append-to-body
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm"
+             label-width="80px">
+      <el-form-item label="业务场景" prop="actId">
+<!--        <el-input v-model="dataForm.actId" placeholder="业务场景"></el-input>-->
+<!--        <span v-if="dataForm.actId === 10">积分商城</span>-->
+        <el-select style="width: 100%" v-model="dataForm.actId" placeholder="请选择">
+          <el-option
+            v-for="item in actList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+<!--      <el-form-item label="消息标题" prop="massageLabel">
+        <el-input v-model="dataForm.messageItem" placeholder="消息标题"></el-input>
+      </el-form-item>
+      <el-form-item label="消息内容" prop="messageItem">
+        <el-input v-model="dataForm.messageItem" placeholder="消息内容"></el-input>
+      </el-form-item>-->
+      <el-form-item label="消息标题" prop="massageLabel">
+      <el-input
+        label="消息标题"
+        autosize
+        placeholder="请输入内容"
+        v-model="dataForm.massageLabel">
+      </el-input>
+      </el-form-item>
+      <el-form-item label="消息有效时间" prop="validTime">
+        <el-date-picker
+          value-format="yyyy-MM-dd HH:mm:ss"
+          style="width: 360px"
+          type="datetime"
+          v-model="dataForm.validTime"
+          placeholder="消息有效时间"
+        ></el-date-picker>
+      </el-form-item>
+      <div style="margin: 20px 0;"></div>
+      <el-form-item label="消息内容" prop="messageItem">
+        <div class="diyEditor"></div>
+        <quill-editor
+          v-model="dataForm.messageItem"
+          class="editor"
+          ref="myTextEditor"
+          :options="editorOption"
+          style="height: 400px"
+        />
+      </el-form-item>
+
+<!--      <el-form-item label="备注" prop="isDel">
+        <el-input v-model="dataForm.isDel" placeholder="备注"></el-input>
+      </el-form-item>-->
+<!--      <el-form-item label="创建人" prop="createName">
+        <el-input v-model="dataForm.createName" placeholder="创建人"></el-input>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
+      </el-form-item>
+      <el-form-item label="逻辑删除（0为否/1为是" prop="remake">
+        <el-input v-model="dataForm.remake" placeholder="逻辑删除（0为否/1为是"></el-input>
+      </el-form-item>
+      <el-form-item label="修改时间" prop="updateTime">
+        <el-input v-model="dataForm.updateTime" placeholder="修改时间"></el-input>
+      </el-form-item>
+      <el-form-item label="修改人" prop="updateName">
+        <el-input v-model="dataForm.updateName" placeholder="修改人"></el-input>
+      </el-form-item>-->
+    </el-form>
+    <br/>
+    <br/>
+    <br/>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import 'quill/dist/quill.core.css'
+  import 'quill/dist/quill.snow.css'
+  import 'quill/dist/quill.bubble.css'
+  import { quillEditor } from 'vue-quill-editor'
+  import {quillRedefine} from 'vue-quill-editor-upload'
+  export default {
+    props: {
+      dataForm: {
+        type: Object,
+        require: false
+      }
+    },
+    data () {
+      return {
+        editorOption: {
+          modules: {
+            toolbar: [
+              ['bold', 'italic', 'underline', 'strike'],
+              ['blockquote', 'code-block'],
+              [{ header: 1 }, { header: 2 }],
+              [{ list: 'ordered' }, { list: 'bullet' }],
+              [{ script: 'sub' }, { script: 'super' }],
+              [{ indent: '-1' }, { indent: '+1' }],
+              [{ direction: 'rtl' }],
+              [{ size: ['small', false, 'large', 'huge'] }],
+              [{ header: [1, 2, 3, 4, 5, 6, false] }],
+              [{ font: [] }],
+              [{ color: [] }, { background: [] }],
+              [{ align: [] }],
+              ['clean'],
+              ['link', 'image', 'video']
+            ],
+            syntax: {
+              // highlight: text => hljs.highlightAuto(text).value
+              highlight: text => this.highlightAuto(text).value
+            }
+          }
+        },
+        visible: false,
+        dataRule: {},
+        actList: [{
+          id: 11,
+          name: '系统消息'
+        }]
+      }
+    },
+    components: {
+      quillEditor,
+      quillRedefine
+    },
+    methods: {
+      init () {
+        this.visible = true
+      },
+      close () {
+        this.visible = false
+        this.$emit('refreshDataList')
+        Object.assign(this.$data, this.$options.data.call(this))
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.$http({
+              url: this.$http.adornUrl(`/message/bizMessageConfig/${!this.dataForm.mainId ? 'save' : 'update'}`),
+              method: 'post',
+              data: this.$http.adornData(this.dataForm)
+            }).then(({data}) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                    Object.assign(this.$data, this.$options.data.call(this))
+                  }
+                })
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>

src/views/modules/message/bizMessageConfig.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="mod-bizMessageConfig">
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <el-form-item>
+                <el-input v-model="dataForm.actId" placeholder="业务场景" clearable></el-input>
+            </el-form-item>
+<!--
+            <el-form-item>
+                <el-input v-model="dataForm.messageItem" placeholder="消息内容" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.createName" placeholder="创建人" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.createTime" placeholder="创建时间" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.isDel" placeholder="备注" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.remake" placeholder="逻辑删除（0为否/1为是" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.updateTime" placeholder="修改时间" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-input v-model="dataForm.updateName" placeholder="修改人" clearable></el-input>
+            </el-form-item>
+-->
+
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+        <el-button v-if="isAuth('message:bizMessageConfig:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+      <el-table-column
+        prop="actId"
+        header-align="center"
+        align="center"
+        label="业务场景">
+        <template slot-scope="scope" >
+          <!--<span v-if="scope.row.actId === 10">积分商城</span>-->
+          <span v-if="scope.row.actId === 11">系统消息</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="massageLabel"
+        header-align="center"
+        align="center"
+        label="消息标题">
+      </el-table-column>
+      <el-table-column
+        prop="messageItem"
+        header-align="center"
+        align="center"
+        label="消息内容">
+        <template slot-scope="scope" >
+          <div v-html="scope.row.messageItem"></div>
+        </template>
+      </el-table-column>
+<!--      <el-table-column
+        prop="createName"
+        header-align="center"
+        align="center"
+        label="创建人">
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        header-align="center"
+        align="center"
+        label="创建时间">
+      </el-table-column>
+      <el-table-column
+        prop="remake"
+        header-align="center"
+        align="center"
+        label="备注">
+      </el-table-column>
+      <el-table-column
+        prop="updateTime"
+        header-align="center"
+        align="center"
+        label="修改时间">
+      </el-table-column>
+      <el-table-column
+        prop="updateName"
+        header-align="center"
+        align="center"
+        label="修改人">
+      </el-table-column>-->
+
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button v-if="isAuth('message:bizMessageConfig:edit')" type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
+          <el-button v-if="isAuth('message:bizMessageConfig:delete')" type="text" size="small" @click="deleteHandle(scope.row.mainId)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="dataForm.current"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="dataForm.size"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" :dataForm="editModel"></add-or-update>
+  </div>
+</template>
+
+<script>
+  import AddOrUpdate from './bizMessageConfig-add-or-update'
+  export default {
+    data () {
+      return {
+        dataForm: {
+          actId: null,
+          messageItem: null,
+          createName: null,
+          createTime: null,
+          isDel: null,
+          remake: null,
+          updateTime: null,
+          updateName: null,
+          massageLabel: null,
+          current: 1,
+          size: 10
+        },
+        editModel: {},
+        dataList: [],
+        totalPage: 0,
+        dataListLoading: false,
+        dataListSelections: [],
+        addOrUpdateVisible: false
+      }
+    },
+    components: {
+      AddOrUpdate
+    },
+    activated () {
+      this.getDataList()
+    },
+    methods: {
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        this.$http({
+          url: this.$http.adornUrl('/message/bizMessageConfig/page'),
+          method: 'get',
+          params: this.$http.adornParams(this.dataForm)
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.dataList = data.page.records
+            this.totalPage = data.page.total
+          } else {
+            this.dataList = []
+            this.totalPage = 0
+          }
+          this.dataListLoading = false
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.dataForm.current = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.dataForm.current = val
+        this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+      },
+      // 新增 / 修改
+      addOrUpdateHandle (row) {
+        this.addOrUpdateVisible = true
+        if (row) {
+          this.editModel = row
+        } else {
+          this.editModel = {
+            mainId: null,
+            actId: null,
+            messageItem: null,
+            createName: null,
+            createTime: null,
+            isDel: null,
+            remake: null,
+            updateTime: null,
+            updateName: null,
+            massageLabel: null,
+            validTime: null
+          }
+        }
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init()
+        })
+      },
+      // 删除
+      deleteHandle (id) {
+        this.$confirm(`确定要删除吗?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$http({
+            url: this.$http.adornUrl('/message/bizMessageConfig/delete'),
+            method: 'post',
+            params: {'id': id}
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getDataList()
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }).catch(() => {})
+      }
+    }
+  }
+</script>