equipment/src/views/flow/message.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form>
        <el-form-item>
          <el-input v-model="listQuery.searchMessage.title" placeholder="请输入消息标题" clearable style="width: 200px" />
          <el-date-picker v-model="listQuery.searchMessage.createTime" type="date" placeholder="请输入发布日期" clearable />
          <el-button type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
          <el-button type="primary" icon="el-icon-edit" @click="showCreate">
            添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="list" :data="list" border fit highlight-current-row stripe @row-click="onRowClick" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" />
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="消息标题" prop="title" />
      <el-table-column align="center" label="发布时间" prop="createTime" />
      <el-table-column align="center" label="发布人" prop="createBy" />
      <el-table-column align="center" label="最后修改时间" prop="updateTime" />
      <el-table-column align="center" label="最后修改人" prop="updateBy" min-width="80" />
      <el-table-column align="center" label="作废状态" prop="species" min-width="30">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.zfState" active="true" inactive="false" @change="editStatus(scope.$index)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" prop="" min-width="40">
        <template slot-scope="scope">
          <el-button type="primary" size="medium" title="修改" @click="showUpdate(scope.$index)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageRow" @pagination="getList" />
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="tempMessage" :model="tempMessage" class="small-space" label-position="left" label-width="120px" style="width: 300px; margin-left:50px;">
        <el-form-item label="消息标题" prop="title" required>
          <el-input v-model="tempMessage.title" type="text" style="width: 500px;" />
        </el-form-item>
        <el-form-item label="消息内容" prop="content" required>
          <el-input v-model="tempMessage.content" type="textarea" :rows="5" style="width: 500px;" />
        </el-form-item>
        <el-form-item v-show="dialogStatus === 'create'" label="接收类型" prop="receiveType">
          <el-radio v-model="receiveType" label="1">
            全员
          </el-radio>
          <el-radio v-model="receiveType" label="2">
            自定义
          </el-radio>
        </el-form-item>
        <el-form-item v-show="receiveType === '2'" label="接收成员">
          <el-transfer v-model="userList" :props="{key: 'id', label: 'nickname'}" :button-texts="['移除', '添加']" :titles="['未分配成员', '接收成员']" :data="allUser" style="width: 700px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button v-if="dialogStatus==='create'" type="success" @click="createMessage">
          创 建
        </el-button>
        <el-button v-else type="primary" @click="updateMessage">
          修 改
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'FlowMessage',
  components: { Pagination },
  data() {
    return {
      total: 0, // 分页组件--数据总条数
      list: [], // 表格的数据
      listQuery: {
        pageNum: 1, // 页码
        pageRow: 20, // 每页条数
        searchMessage: {}
      },
      dialogStatus: 'create',
      dialogFormVisible: false,
      textMap: {
        update: '编辑',
        create: '新建消息通知'
      },
      receiveType: '1',
      tempMessage: {},
      multipleSelection: [],
      allUser: [],
      userList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.api({
        url: '/message/list',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    getIndex($index) {
      // 表格序号
      return ((this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1)
    },
    handleFilter() {
      // 查询事件
      this.listQuery.pageNum = 1
      this.getList()
    },
    onRowClick(row) {
      this.$refs.list.toggleRowSelection(row)
    },
    handleSelectionChange: function(val) {
      this.multipleSelection = val
    },
    showCreate() {
      this.tempMessage = {}
      this.receiveType = '1'
      this.dialogStatus = 'create'
      this.allUser = this.$store.getters.allUser
      this.dialogFormVisible = true
    },
    showUpdate($index) {
      this.tempMessage = this.list[$index]
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    createMessage() {
      this.$refs['tempMessage'].validate(valid => {
        if (valid) {
          if (this.receiveType === '2' && this.userList.length === 0) {
            this.$message({ message: '请选择要接收的人员。', type: 'warning' })
            return false
          }
          this.api({
            url: '/message',
            method: 'post',
            data: {
              message: this.tempMessage,
              userList: this.userList
            }
          }).then(() => {
            this.$message({ message: '添加成功。', type: 'success' })
            this.getList()
            this.dialogFormVisible = false
          })
        } else {
          return false
        }
      })
    },
    updateMessage() {
      this.$refs['tempMessage'].validate(valid => {
        if (valid) {
          this.api({
            url: '/message',
            method: 'put',
            data: this.tempMessage
          }).then(() => {
            this.$message({ message: '更新成功。', type: 'success' })
            this.getList()
            this.dialogFormVisible = false
          })
        } else {
          return false
        }
      })
    },
    editStatus($index) {
      const messgae = this.list[$index]
      this.api({
        url: '/message',
        method: 'put',
        data: messgae
      }).then(() => {
        this.$message({ message: '操作成功。', type: 'success' })
        this.getList()
      })
    }
  }
}
</script>

<style scoped>

</style>