transportation-archives/src/views/system/notifyManage/index.vue

<template>
  <div class="app-container  row-container">
    <div class="head-container">
      <div class="head-search">
        <!-- 搜索 -->
        <el-input v-model="query.search" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <date-range-picker v-model="blurryTime" class="date-item" />
        <rrOperation>
          <template v-slot:right>
            <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
          </template>
        </rrOperation>
      </div>
      <crudOperation>
        <template v-slot:left>
          <el-button size="mini" @click="crud.toAdd">
            <i class="iconfont icon-fabu" />
            发布
          </el-button>
        </template>
      </crudOperation>
    </div>
    <div class="container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%;"
        @row-dblclick="handleDbClick"
      >
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column prop="noticeType" label="消息类型" align="center" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.noticeType === 1">系统消息</span>
          </template>
        </el-table-column>
        <el-table-column prop="noticeTitle" :show-overflow-tooltip="true" label="标题" min-width="150" align="center" />
        <el-table-column prop="noticeContext" :show-overflow-tooltip="true" label="内容" align="center" min-width="200" />
        <el-table-column :show-overflow-tooltip="true" label="发送对象" align="center" min-width="200">
          <!-- <template slot-scope="scope">
          <div class="tag-hidden">
              <el-tag v-for="(item,i) in scope.row.noticeUsers" :key="i" style="margin-left:3px; ">{{ item.pushUserName }}</el-tag>
            </div>
          </template> -->
          <template slot-scope="scope">
            用户【{{ scope.row.noticeUsers && scope.row.noticeUsers !== null ? (scope.row.noticeUsers.includes(',') ? scope.row.noticeUsers.split(',').length : [scope.row.noticeUsers].length) : 0 }}】
            设备【{{ scope.row.noticeDevices && scope.row.noticeDevices !== null ? scope.row.noticeDevices.split(',').length : 0 }}】
            <!-- <div class="tag-hidden">
              <el-tag v-for="(item,i) in scope.row.noticeDevices" :key="i" style="margin-left:3px; color: #fff">{{ item }}</el-tag>
            </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建人" align="center" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="180">
          <template slot-scope="scope">
            <div>{{ scope.row.createTime | parseTime }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <!-- 发布 -->
    <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" title="发布通知">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form ref="form" :rules="rules" :model="form" size="small" label-width="100px">
          <el-form-item label="消息类型" prop="noticeType" class="down-select">
            <el-input v-model="form.noticeTypeName" disabled />
            <!-- <el-select v-model="noticeType" placeholder="请选择">
              <el-option
                v-for="item in msgTypeOptions"
                :key="item.name"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select> -->
          </el-form-item>
          <el-form-item label="标题" prop="noticeTitle">
            <el-input v-model="form.noticeTitle" placeholder="请输入" style="width: 580px;" />
          </el-form-item>
          <el-form-item label="内容" prop="noticeContext">
            <el-input v-model="form.noticeContext" placeholder="请输入" type="textarea" rows="3" style="width: 580px;" />
          </el-form-item>
          <el-form-item label="发送对象" prop="userId">
            <div class="send-obj">
              <span v-if="pushObjItem.length === 0" style="color: rgb(206,209,216)">点击下方按钮选择对象</span>
              <el-tag
                v-for="tag in pushObjItem"
                v-else
                :key="tag.userId"
                v-model="form.userId"
                :disable-transitions="false"
              >
                {{ tag.username }}
              </el-tag>
            </div>
          </el-form-item>
          <span class="select-btn iconfont icon-shezhi" @click="openSelectObj" />
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
        </div>
      </div>
    </el-dialog>
    <SelectObj ref="selectObj" @selectObjItem="handleSelectObjItem" />
    <Detail ref="archiveDetailDom" />
  </div>
</template>

<script>
import crudNotify from '@/api/system/notify'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
import DateRangePicker from '@/components/DateRangePicker'
import pagination from '@crud/Pagination'
import SelectObj from './module/selectObj'
import Detail from './module/detail'

const defaultForm = { id: null, noticeTypeName: '系统消息', noticeType: null, noticeTitle: null, noticeContext: null, userId: [], deviceInfoId: [] }
export default {
  name: 'NotifyManage',
  components: { crudOperation, rrOperation, DateRangePicker, pagination, SelectObj, Detail },
  cruds() {
    return CRUD({ title: '通知', url: 'api/notice/initNotice', crudMethod: { ...crudNotify }, sort: [], optShow: {
      add: false,
      edit: false,
      del: false,
      download: false,
      group: false,
      reset: false
    }})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      blurryTime: null,
      sendVisible: false,
      tableData: [],
      pushObjItem: [],
      msgTypeOptions: [
        { value: 1, label: '系统通知' }
        // { value: 2, label: '报警消息', disabled: true },
        // { value: 3, label: '借还消息', disabled: true },
        // { value: 4, label: '下载消息', disabled: true }
      ],
      rules: {
        noticeTitle: [
          { required: true, message: '标题不可为空', trigger: 'blur' }
        ],
        noticeContext: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        userId: [
          { required: true, message: '发送对象不可为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.noticeType = 1
      if (this.blurryTime) {
        this.crud.query.startTime = this.blurryTime[0]
        this.crud.query.endTime = this.blurryTime[1]
      } else {
        this.crud.query.startTime = null
        this.crud.query.endTime = null
      }
    },
    resetQuery() {
      this.crud.query.search = ''
      this.blurryTime = null
      this.crud.query.startTime = null
      this.crud.query.endTime = null
      this.crud.toQuery()
    },
    openSelectObj() {
      this.$refs.selectObj.sendObjVisible = true
      this.$refs.selectObj.getFondsDatas()
    },
    handleSelectObjItem(objType, selectItemAll) {
      this.pushObjItem = selectItemAll
      if (objType === 0) {
        this.form.userId = selectItemAll.map(item => item.userId)
        this.form.deviceInfoId = []
      } else {
        if (this.pushObjItem.length !== 0) {
          this.form.userId = selectItemAll.map(item => item.userId)
        } else {
          this.form.userId = []
        }
      }
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU](crud) {
      console.log(crud.form)
      crud.form.noticeType = 1
      delete crud.form.noticeTypeName
      return true
    },

    [CRUD.HOOK.afterAddCancel]() {
      this.pushObjItem = []
      this.$refs.selectObj.checkAll = false
      this.$refs.selectObj.selectedItems = []
      this.$refs.selectObj.selectObjForm = {
        sendObj: 0
      }
    },
    [CRUD.HOOK.afterSubmit]() {
      this.pushObjItem = []
      this.$refs.selectObj.checkAll = false
      this.$refs.selectObj.selectedItems = []
      this.$refs.selectObj.selectObjForm = {
        sendObj: 0
      }
    },
    handleDbClick(row) {
      this.$nextTick(() => {
        this.$refs.archiveDetailDom.detailVisible = true
        this.$refs.archiveDetailDom.rowData = row
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.select-btn{
  display: inline-block;
  padding: 4px 11px 4px 14px;
  font-size: 18px;
  color: #fff;
  background: #0348F3;
  border-radius: 3px;
  margin: 10px 0 0 100px;
  text-align: center;
  cursor: pointer;
}
.send-obj{
  width: 580px;
  height: 180px;
  padding: 0 10px;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #E6E8ED;
  .el-tag{
    margin-right: 10px;
  }
}
</style>