[update] 创建系统通知

src/views/modules/message/SysMessageTemplateList.vue

@@ -1,61 +1,64 @@
 <template>
- <div>
-   <page-header-title :img-for-icon="IconImg"></page-header-title>
-   <a-card :bordered="false">
+  <div>
+    <page-header-title :img-for-icon="IconImg"></page-header-title>
+    <a-card :bordered="false">
 
-     <!-- 查询区域 -->
-     <div class="table-page-search-wrapper">
-       <a-form layout="inline" @keyup.enter.native="searchQuery">
-         <a-row :gutter="24">
-           <a-col :xl="6" :lg="8" :md="8" :sm="24">
-             <a-form-item label="模板CODE">
-               <a-input placeholder="请输入模板CODE" v-model="queryParam.templateCode" :maxLength="50"></a-input>
-             </a-form-item>
-           </a-col>
-           <a-col :xl="6" :lg="8" :md="8" :sm="24">
-             <a-form-item label="模板内容">
-               <a-input placeholder="请输入模板内容" v-model="queryParam.templateContent"></a-input>
-             </a-form-item>
-           </a-col>
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :xl="6" :lg="8" :md="8" :sm="24">
+              <a-form-item label="模板CODE">
+                <a-input placeholder="请输入模板CODE" v-model="queryParam.templateCode" :maxLength="50"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="8" :md="8" :sm="24">
+              <a-form-item label="模板内容">
+                <a-input placeholder="请输入模板内容" v-model="queryParam.templateContent"></a-input>
+              </a-form-item>
+            </a-col>
 
-           <a-col :xl="6" :lg="8" :md="8" :sm="24">
-             <a-form-item label="模板标题">
-               <!--                <a-input placeholder="请输入模板标题" v-model="queryParam.templateName"></a-input>-->
-               <j-dict-select-tag placeholder="请选择模板标题" dictCode="notice_type" v-model="queryParam.templateName"></j-dict-select-tag>
-             </a-form-item>
-           </a-col>
-           <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-col :xl="6" :lg="8" :md="8" :sm="24">
+              <a-form-item label="模板标题">
+                <!--                <a-input placeholder="请输入模板标题" v-model="queryParam.templateName"></a-input>-->
+                <j-dict-select-tag placeholder="请选择模板标题" dictCode="notice_type"
+                                   v-model="queryParam.templateName"></j-dict-select-tag>
+              </a-form-item>
+            </a-col>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <span class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search" v-has="'template:list'">查询</a-button>
               <a-button @click="searchReset" icon="reload" class="reset-button" style="margin-left: 8px">重置</a-button>
             </span>
-           </a-col>
-         </a-row>
-       </a-form>
-     </div>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
 
-     <!-- 操作按钮区域 -->
-     <div class="table-operator">
-<!--       <a-button @click="handleAdd" type="primary" icon="plus" v-has="'template:add'">新增</a-button>-->
-     </div>
+      <!-- 操作按钮区域 -->
+      <div class="table-operator">
+        <a-button @click="handleAddSystemNotifications" type="primary" icon="plus"
+                  v-has="'template:add:systemNotifications'">创建系统通知
+        </a-button>
+      </div>
 
-     <!-- table区域-begin -->
-     <div>
-       <a-table
-         ref="table"
-         size="middle"
-         bordered
-         rowKey="id"
-         :columns="columns"
-         :dataSource="dataSource"
-         :pagination="ipagination"
-         :loading="loading"
-         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-         class="j-table-force-nowrap"
-         @change="handleTableChange">
+      <!-- table区域-begin -->
+      <div>
+        <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          class="j-table-force-nowrap"
+          @change="handleTableChange">
 
-         <!-- 字符串超长截取省略号显示-->
-         <span slot="templateContent" slot-scope="text">
+          <!-- 字符串超长截取省略号显示-->
+          <span slot="templateContent" slot-scope="text">
           <a-tooltip>
             <template slot="title">
               <span v-html="text"></span>
@@ -64,37 +67,41 @@
           </a-tooltip>
         </span>
 
-         <template slot="text" slot-scope="text">
-           <j-ellipsis v-if="text" :length="20" :value="text"></j-ellipsis>
-           <span v-else></span>
-         </template>
+          <template slot="text" slot-scope="text">
+            <j-ellipsis v-if="text" :length="20" :value="text"></j-ellipsis>
+            <span v-else></span>
+          </template>
 
-         <span slot="action" class="action-span-cell" slot-scope="text, record">
+          <span slot="action" class="action-span-cell" slot-scope="text, record">
           <a @click="handleEdit(record)" v-has="'template:list'">编辑</a>
-<!--          <a @click="handleDelete(record.id)" v-has="'template:delete'">删除</a>-->
+            <!--          <a @click="handleDelete(record.id)" v-has="'template:delete'">删除</a>-->
         </span>
 
-       </a-table>
-     </div>
-     <!-- table区域-end -->
+        </a-table>
+      </div>
+      <!-- table区域-end -->
 
-     <!-- 表单区域 -->
-     <sysMessageTemplate-modal ref="modalForm" @ok="modalFormOk"></sysMessageTemplate-modal>
+      <!-- 表单区域 -->
+      <sysMessageTemplate-modal ref="modalForm" @ok="modalFormOk"></sysMessageTemplate-modal>
 
-     <sysMessageTest-modal ref="testModal"></sysMessageTest-modal>
-   </a-card>
- </div>
+      <sysMessageTest-modal ref="testModal"></sysMessageTest-modal>
+
+      <!--     创建系统通知-->
+      <system-notifications-modal ref="systemNotifications" @ok="modalFormOk"></system-notifications-modal>
+    </a-card>
+  </div>
 </template>
 
 <script>
 import SysMessageTemplateModal from './modules/SysMessageTemplateModal'
 import SysMessageTestModal from './modules/SysMessageTestModal'
-import {JeroListMixin} from '@/mixins/JeroListMixin'
+import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JEllipsis from '@/components/jero/JEllipsis'
 import JDictSelectTag from '@comp/dict/JDictSelectTag'
 import '@/assets/less/TableExpand.less'
 import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
 import IconImg from '@/assets/imgs/icon/icon_template.png'
+import SystemNotificationsModal from './modules/SystemNotificationsModal'
 
 export default {
   name: 'SysMessageTemplateList',
@@ -104,7 +111,8 @@ export default {
     SysMessageTestModal,
     JEllipsis,
     JDictSelectTag,
-    PageHeaderTitle
+    PageHeaderTitle,
+    SystemNotificationsModal
   },
   data() {
     return {
@@ -126,42 +134,42 @@ export default {
           title: '模板CODE',
           align: 'center',
           dataIndex: 'templateCode',
-          scopedSlots: {customRender: 'text'},
-          width: 300,
+          scopedSlots: { customRender: 'text' },
+          width: 300
         },
         {
           title: '模板标题',
           align: 'center',
           dataIndex: 'templateName_dictText',
-          scopedSlots: {customRender: 'text'},
-          width: 200,
+          scopedSlots: { customRender: 'text' },
+          width: 200
         },
         {
           title: '提醒用户',
           align: 'center',
           dataIndex: 'recipient_dictText',
-          scopedSlots: {customRender: 'text'},
-          width: 160,
+          scopedSlots: { customRender: 'text' },
+          width: 160
         },
         {
           title: '模板内容',
           align: 'center',
           dataIndex: 'templateContent',
-          scopedSlots: {customRender: 'templateContent'},
-          width: 500,
+          scopedSlots: { customRender: 'templateContent' },
+          width: 500
         },
         {
           title: '提醒方式',
           align: 'center',
           dataIndex: 'templateType_dictText',
-          scopedSlots: {customRender: 'text'},
+          scopedSlots: { customRender: 'text' }
         },
         {
           title: '操作',
           dataIndex: 'action',
           align: 'center',
-          scopedSlots: {customRender: 'action'},
-          width: 160,
+          scopedSlots: { customRender: 'action' },
+          width: 160
         }
       ],
       url: {
@@ -169,13 +177,13 @@ export default {
         delete: '/sys/message/sysMessageTemplate/delete',
         deleteBatch: '/sys/message/sysMessageTemplate/deleteBatch',
         exportXlsUrl: 'sys/message/sysMessageTemplate/exportXls',
-        importExcelUrl: 'sys/message/sysMessageTemplate/importExcel',
-      },
+        importExcelUrl: 'sys/message/sysMessageTemplate/importExcel'
+      }
     }
   },
   computed: {
     importExcelUrl: function () {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+      return `${ window._CONFIG['domianURL'] }/${ this.url.importExcelUrl }`
     }
   },
   methods: {
@@ -183,16 +191,21 @@ export default {
       this.$refs.testModal.open(record)
       this.$refs.testModal.title = '发送测试'
     },
-    myEllipsis (value, vlength = 25) {
-      if(!value){
+    myEllipsis(value, vlength = 25) {
+      if (!value) {
         return value
       }
       if (value.length > vlength) {
         return value.slice(0, vlength) + '...'
       }
       return value
+    },
+    /**
+     * 创建系统通知
+     */
+    handleAddSystemNotifications() {
+      this.$refs.systemNotifications.add()
     }
-
   }
 }
 </script>

src/views/modules/message/modules/SystemNotificationsModal.vue

@@ -0,0 +1,119 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="发送用户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input placeholder="请输入发送用户"
+                   v-decorator="['userList',validatorRules.userList]"
+                   :maxLength='50'
+                   disabled
+                   @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+        </a-form-item>
+        <a-form-item label="通知内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-textarea placeholder="请输入通知内容"
+                      v-decorator="['content',validatorRules.content]"
+                      :auto-size="{ minRows: 3, maxRows: 6 }"
+                      :maxLength='200'
+                      @change="e => {e.target.value = (e.target.value + '').trim()}"></a-textarea>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import { getAction } from '../../../../api/manage'
+
+export default {
+  name: 'SystemNotificationsModal',
+  data() {
+    return {
+      title: '创建系统通知',
+      width: 700,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      url: '/send/message/sendAllUserMessage',
+      validatorRules: {
+        userList: {
+          rules: [{ required: true, message: '请输入发送用户' }],
+          validateTrigger: 'blur'
+        },
+        content: {
+          rules: [{ required: true, message: '请输入通知内容' }],
+          validateTrigger: 'blur'
+        }
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.form.resetFields()
+      let timer = setTimeout(() => {
+        this.form.setFieldsValue({ userList: '全部企业人员' })
+        clearTimeout(timer)
+        timer = null
+      })
+      this.visible = true
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk: function () {
+      if (this.confirmLoading) {
+        return
+      }
+      this.confirmLoading = true
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const formData = Object.assign({}, values)
+          delete formData.userList
+          console.log('表单提交数据', formData)
+          getAction(this.url, formData).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok', res.result)
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            setTimeout(() => {
+              this.confirmLoading = false
+            }, 1000)
+          })
+        } else {
+          this.confirmLoading = false
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>