Tmr-Admin-BeefCattle/src/views/systemManagement/reminderSettings/index.vue

<template>
  <div class="app-container">
    <div class="table">
      <div class="search">
        <el-button class="success" icon="el-icon-plus" @click="handleCreate">新增</el-button>
      </div>
      <el-table
        :key="table.tableKey"
        v-loading="table.listLoading"
        element-loading-text="给我一点时间"
        :data="table.list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
        :max-height="myHeight"
      >
        <el-table-column label="消息名称" min-width="130px" align="center" prop="rolename" />
        <el-table-column label="触发条件" min-width="130px" align="center" prop="rolename" />
        <el-table-column label="提醒类型" min-width="130px" align="center" prop="rolename" />
        <el-table-column label="推送方式" min-width="130px" align="center" prop="rolename" />
        <el-table-column label="详细配置" min-width="130px" align="center" prop="rolename" />
        <el-table-column label="提醒对象" min-width="130px" align="center" prop="rolename" />
        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <a class="correcting" size="mini" style="width: 80px;" @click="handleSetUp(row)">设置</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="textMap[setUp.dialogStatus]" :visible.sync="setUp.dialogFormVisible" :close-on-click-modal="false" width="70%">
      <div class="setup">
        <div style="height: 500px;">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form ref="temp" :rules="temp.rules" :model="temp" label-position="right" label-width="110px" style="width: 100%;margin:0 auto">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="消息名称:" prop="messageName">
                      <el-input v-model="temp.messageName" style="width: 100%;" class="filter-item" placeholder="消息名称" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="触发条件:" prop="triggerCondition">
                      <el-input ref="triggerCondition" v-model="temp.triggerCondition" style="width: 100%;" class="filter-item" placeholder="触发条件" type="text" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="发送方式:" prop="sendingMethod">
                      <el-select v-model="temp.sendingMethod" style="width: 100%;" placeholder="发送方式">
                        <el-option v-for="item in modeList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div v-if="temp.sendingMethod == '2'">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="延时:">
                        <el-input ref="delayed1" v-model="temp.delayed1" style="width: 33%;margin-right:1%" placeholder="天" type="text" />
                        <el-input ref="delayed2" v-model="temp.delayed2" style="width: 33%;margin-right:1%" placeholder="小时" type="text" />
                        <el-input ref="delayed3" v-model="temp.delayed3" style="width: 32%;" placeholder="分钟" type="text" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="发送时间">
                         <el-time-select placeholder="发送时间" style="width: 100%;" v-model="temp.sendTime" :picker-options="{ start: '00:00', step: '00:15', end: '23:59' }" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="18">
                      <el-form-item label="发送机制">
                        <el-select v-model="temp.sendingMechanism" style="width: 100%;" placeholder="发送机制">
                          <el-option v-for="item in mechanismList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="temp.sendingMechanism == '2'">
                        <el-input ref="numberCycles" v-model="temp.numberCycles" style="width: 100%;" placeholder="循环次数" type="text" />
                    </el-col>
                  </el-row>
                  <el-row v-if="temp.sendingMechanism !== '1' && temp.sendingMechanism !== ''">
                    <el-col :span="24">
                      <el-form-item label="间隔周期:">
                        <el-input ref="intervalPeriod1" v-model="temp.intervalPeriod1" style="width: 33%;margin-right:1%" placeholder="天" type="text" />
                        <el-input ref="intervalPeriod2" v-model="temp.intervalPeriod2" style="width: 33%;margin-right:1%" placeholder="小时" type="text" />
                        <el-input ref="intervalPeriod3" v-model="temp.intervalPeriod3" style="width: 32%;" placeholder="分钟" type="text" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div v-if="temp.sendingMethod == '3'">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="发送机制:">
                        <span>持续循环</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="18">
                      <el-form-item label="周期类型">
                        <el-select v-model="temp.cycleType" style="width: 100%;" placeholder="周期类型">
                          <el-option v-for="item in cycleTypeList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="temp.cycleType == '2'">
                      <el-select v-model="temp.week" style="width: 100%;" placeholder="每周">
                        <el-option v-for="item in weekList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-col>
                    <el-col :span="6" v-if="temp.cycleType == 3">
                      <el-select v-model="temp.month" style="width: 100%;" placeholder="每月">
                        <el-option v-for="item in monthList" :key="item.id" :label="item.name" :value="item.id" />
                      </el-select>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="发送时间">
                         <el-time-select placeholder="发送时间" style="width: 100%;" v-model="temp.sendTime" :picker-options="{ start: '00:00', step: '00:15', end: '23:59' }" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </el-col>
            <el-col :span="16">
              <b>提醒对象:</b>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="角色" name="first">
                    <el-table
                      :key="setUp.table1.tableKey"
                      v-loading="setUp.table1.listLoading"
                      element-loading-text="给我一点时间"
                      :data="setUp.table1.list"
                      border
                      fit
                      highlight-current-row
                      style="width: 100%;"
                      :row-style="rowStyle"
                      :cell-style="cellStyle"
                      class="elTable table-fixed"
                      @selection-change="handleSelectionChange"
                      :max-height="450"
                    >
                      <el-table-column type="selection" align="center" width="50" />
                      <el-table-column label="角色名称" min-width="130px" align="center" prop="rolename" />
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="用户" name="second">
                    <div class="search">
                      <el-input v-model="setUp.table2.getdataListParm.parammaps.empCode" placeholder="用户名称" style="width: 180px;" class="filter-item" clearable />
                      <el-input v-model="setUp.table2.getdataListParm.parammaps.empname" placeholder="员工姓名" style="width: 180px;" class="filter-item" clearable />
                      <el-button class="successBorder" @click="handleSearch">查询</el-button>
                    </div>
                    <el-table
                      :key="setUp.table2.tableKey"
                      v-loading="setUp.table2.listLoading"
                      element-loading-text="给我一点时间"
                      :data="setUp.table2.list"
                      border
                      fit
                      highlight-current-row
                      style="width: 100%;"
                      :row-style="rowStyle"
                      :cell-style="cellStyle"
                      class="elTable table-fixed"
                      @selection-change="handleSelectionChange"
                      :max-height="450"
                    >
                      <el-table-column type="selection" align="center" width="50" />
                      <el-table-column label="用户名称" min-width="130px" align="center" prop="username" />
                      <el-table-column label="员工姓名" min-width="130px" align="center" prop="empname" />
                      <el-table-column label="角色" min-width="130px" align="center" prop="rolename" />
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer" style="right:30px;position:absolute;bottom: 40px;">
          <el-button class="cancelClose" @click="setUp.dialogFormVisible = false;getList(); ">取消</el-button>
          <el-button class="save" :disabled="isokDisable" @click="setData()">确认</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog :title="textMap[QRcode.dialogStatus]" :visible.sync="QRcode.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="QRcode">
        <div class="content">
          <div class="title">
            <p>微信接收系统待办、预警等消息，必须先扫码关注公众号；</p>
            <p>请将下方二维码分享给需要接收信息的用户扫码</p>
          </div>
          <div style="font-weight: 600;">关注微信：</div>
          <img src="https://img2.baidu.com/it/u=1151188475,1753963046&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=300" alt="">
        </div>
        <div slot="footer" class="dialog-footer" style="right:30px;position:absolute;bottom: 40px;">
          <el-button class="save" :disabled="isokDisable" @click="QRcode.dialogFormVisible = false;">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { GetDataByName,postJson2 } from '@/api/common'
  import Cookies from 'js-cookie'
  export default {
    name: 'ReminderSettings',
    data() {
      return {
        temp:{
          rules:{},
          messageName:'',//消息名称
          triggerCondition:'',//触发条件,
          sendingMethod:'1',//发送方式
          delayed1:'',//延时
          delayed2:'',//延时
          delayed3:'',//延时,
          sendTime:'',//发送时间，
          sendingMechanism:'1',// 发送机制
          numberCycles:'',//循环次数
          intervalPeriod1:'',//间隔周期
          intervalPeriod2:'',//间隔周期
          intervalPeriod3:'',//间隔周期
          cycleType:'1',
        },
        modeList: [
          { id: '1', name: '立即' },
          { id: '2', name: '延时' },
          { id: '3', name: '指定周期' },
        ],
        mode: '0',
        mechanismList: [
          { id: '1', name: '单次' },
          { id: '2', name: '指定循环次数' },
          { id: '3', name: '循环至任务结束' },
        ],
        cycleTypeList:[
          { id: '1', name: '每天' },
          { id: '2', name: '每周' },
          { id: '3', name: '每月' },
        ],//周期类型
        weekList:[
          { id: 'w1', name: '周一' },
          { id: 'w2', name: '周二' },
          { id: 'w3', name: '周三' },
          { id: 'w4', name: '周四' },
          { id: 'w5', name: '周五' },
          { id: 'w6', name: '周六' },
          { id: 'w7', name: '周日' },
        ],//周
        monthList:[],//月
        mechanism: '0',
        activeName:'first',
        table: {
          getdataListParm: {
            name: 'getRoleList',
            page: 1,
            offset: 1,
            pagecount: parseInt(Cookies.get('pageCount')),
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid')
            }
          },
          tableKey: 0,
          list: [],
          total: 0,
          listLoading: false
        },
        setUp:{
          dialogStatus: '',
          dialogFormVisible:false,
          table1: {
            getdataListParm: {
              name: 'getRoleList',
              page: 1,
              offset: 1,
              pagecount: parseInt(Cookies.get('pageCount')),
              returntype: 'Map',
              parammaps: {
                pastureid: Cookies.get('pastureid')
              }
            },
            tableKey: 0,
            list: [],
            total: 0,
            listLoading: false
          },
          table2: {
            getdataListParm: {
              name: 'getuserallL',
              page: 1,
              offset: 1,
              pagecount: parseInt(Cookies.get('pageCount')),
              returntype: 'Map',
              parammaps: {
                pastureid: Cookies.get('pastureid')
              }
            },
            tableKey: 0,
            list: [],
            total: 0,
            listLoading: false
          },
          selectList:[]
        },
        QRcode:{
          dialogStatus: '',
          dialogFormVisible:false,
        },
        myHeight:document.documentElement.clientHeight - 85- 150 - 45,
        textMap: {
          setup: '设置',
          QRcode:'提示',
          add:'新增'
        },
        isokDisable:false,
        rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
        cellStyle: { padding: 0 + 'px' }
      }
    },
    created() {
      this.monthList = []
      for(let i=1;i<=31;i++){
        let obj = {}
        obj.id = 'd'+i
        obj.name = i+'日'
        this.monthList.push(obj)
      }
      this.getList()
    },

    methods: {
      getList() {
        this.table.listLoading = true
        // let url = 'http://tmrwatch.cn/notice/msgtype'
        // let data = {}
        GetDataByName(this.table.getdataListParm).then(response => {
          if (response.data.list !== null) {
            console.log('table数据', response.data.list)
            this.table.list = response.data.list
            this.table.pageNum = response.data.pageNum
            this.table.pageSize = response.data.pageSize
          } else {
            this.table.list = []
          }
          this.table.total = response.data.total
          setTimeout(() => {
            this.table.listLoading = false
          }, 100)
        })
      },
      handleSetUp(){
        this.setUp.dialogStatus = 'setup'
        this.setUp.dialogFormVisible = true
        this.activeName = 'first'
        this.getList1()
      },
      handleClick(item){
        if(item == 'first'){
          this.getList1()
        }else{
          this.getList2()
        }
      },
      handleSelectionChange(val) {
        console.log('勾选数据', val)
        this.selectList = val
      },
      handleGenerateQRcode(){
        this.QRcode.dialogStatus = 'QRcode'
        this.QRcode.dialogFormVisible = true
      },
      handleSearch(){
        this.getList2()
      },
      getList1() {
        this.setUp.table1.listLoading = true
        GetDataByName(this.setUp.table1.getdataListParm).then(response => {
          if (response.data.list !== null) {
            console.log('table数据', response.data.list)
            this.setUp.table1.list = response.data.list
            this.setUp.table1.pageNum = response.data.pageNum
            this.setUp.table1.pageSize = response.data.pageSize
          } else {
            this.setUp.table1.list = []
          }
          this.setUp.table1.total = response.data.total
          setTimeout(() => {
            this.setUp.table1.listLoading = false
          }, 100)
        })
      },
      getList2() {
        this.setUp.table2.listLoading = true
        GetDataByName(this.setUp.table2.getdataListParm).then(response => {
          if (response.data.list !== null) {
            console.log('table数据', response.data.list)
            this.setUp.table2.list = response.data.list
            this.setUp.table2.pageNum = response.data.pageNum
            this.setUp.table2.pageSize = response.data.pageSize
          } else {
            this.setUp.table2.list = []
          }
          this.setUp.table2.total = response.data.total
          setTimeout(() => {
            this.setUp.table2.listLoading = false
          }, 100)
        })
      },
      setData(){
        let url = 'http://tmrwatch.cn:8089/notice/msgtype'
        let data = {}
        data.sys_name = 'tmrWatch'
        data.type_name = this.temp.messageName
        data.remind_type_id = parseInt(this.temp.sendingMethod)
        if(this.temp.sendingMethod == '1'){
          data.remind_type = '立即'
        }else if(this.temp.sendingMethod == '1'){
          data.remind_type = '延时'
        }else{
          data.remind_type = '指定周期'
        }
        let dateTime = 0
        let delayed1 = 0
        let delayed2 = 0
        let delayed3 = 0

        if(this.temp.delayed1 !== ''){
          delayed1 = parseInt(this.temp.delayed1)*24*60
        }else {
          delayed1 = 0
        }
        if(this.temp.delayed2 !== ''){
          delayed2 = parseInt(this.temp.delayed2)*60
        }else {
          delayed2 = 0
        }
        if(this.temp.delayed3 !== ''){
          delayed3 = parseInt(this.temp.delayed3)
        }else{
          delayed2 = 0
        }
        dateTime = delayed1+ delayed2 + delayed3
        if(this.temp.cycleType == '1'){
          data.push_date = ''
        }else if(this.temp.cycleType == '2'){
          data.push_date = this.temp.week
        }else{
          data.push_date = this.temp.month
        }
        data.push_time = this.temp.sendTime
        data.interval_time = dateTime
        if(this.temp.sendingMechanism == '1'){
          data.push_limit = 1
        }else if(this.temp.sendingMechanism == '2'){
          data.push_limit = this.temp.numberCycles
        }else{
          data.push_limit = 0
        }
        data.template_id = 'BtkN1rWKOJtKP0C64lGxIrPzLRFsYFas-4gupX2-pFo'
        postJson2(url,data).then(response => {
          if(response.code == 200){
            console.log('成功')
            this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
          }else{
            this.$notify({ title: '成功', message: response.message, type: 'success', duration: 2000 })
            console.log('失败')
          }
        })
      },
      handleCreate(){
        this.setUp.dialogStatus = 'add'
        this.setUp.dialogFormVisible = true
        this.activeName = 'first'
      }
    }
  }
</script>

<style scoped>
  .app-container{
    padding: 20px 20px;
  }
  .content-left{padding: 5px 5px;}
  .content-left b{padding-right: 10px;}

  .QRcode{display:flex;justify-content: center; align-items:center;}
  .content{
    /* margin-top: 100px; */
    width: 500px;
  }
  .content img{
    max-width:300px;

  }
</style>