dvcp_v2_webapp/packages/processManagement/massesMessage/components/alreadyList.vue

<template>
  <section class="already-list">
    <ai-list isTabs>
      <template #content>
        <ai-search-bar bottomBorder>
          <template #right>
            <el-input size="small" v-model="search.title" placeholder="标题/编号"
                      @keyup.enter.native="page.current=1,getAppLeaveMessage()"
                      prefix-icon="iconfont iconSearch" clearable></el-input>
            <el-button size="mini" type="primary" icon="iconfont iconSearch" style="margin-left:5px;"
                       @click="page.current=1,getAppLeaveMessage()">查询
            </el-button>
            <el-button size="mini" icon="el-icon-refresh-right" style="margin-left:5px;" @click="resetSearch">
              重置
            </el-button>
          </template>
        </ai-search-bar>
        <ai-table  :tableData="tableData"
                   :col-configs="colConfigs"
                   :total="total"
                   ref="aitableex"
                   :current.sync="search.current"
                   :size.sync="search.size"
                   @getList="getAppLeaveMessage">
          <el-table-column label="是否公示" slot="isPublic" align="center" width="150">
            <template v-slot="{row}">
              <el-switch v-model="row.isPublic" @change="onChange(row)" active-value="0" inactive-value="1"
                         active-color="#D0D4DC" inactive-color="#5088FF"/>
            </template>
          </el-table-column>

          <el-table-column label="操作" slot="options" align="center" width="150">
            <template v-slot="{row}">
              <el-button type="text" title="详情" @click="toDetail(row.id)" v-if="$permissions('app_appleavemessagereply_detail')">详情</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>

  </section>
</template>

<script>
import {mapState} from "vuex";
import day from 'dayjs'

export default {
  name: "alreadyList",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    activeName: String,
    areaId: String
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          label: '留言编号',
          prop: 'msgCode',
          type: '',
          dict: ''
        },
        {
          label: '留言类型',
          prop: 'type',
          type: 'select',
          dict: 'leaveMessageType'
        },
        {
          label: '标题',
          prop: 'title',
          type: '',
          dict: ''
        },
        {
          label: '留言人',
          prop: 'leaveName',
          type: '',
          dict: ''
        },
        {
          label: '创建时间',
          prop: 'createTime',
          type: 'time',
          dict: ''
        },
        {
          label: '最后回复时间',
          prop: 'lastReplyTime',
          type: 'time',
          dict: ''
        },
        {
          label: '处理状态0、待回复1、已回复',
          prop: 'status',
          type: '',
          dict: ''
        },
        {
          label: '操作',
          prop: 'operate',
          type: '',
          dict: ''
        },
      ],
      search: {
        style: {},
        title: ""
      },
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      detailId: '',
    }
  },
  methods: {
    onChange({id, isPublic}) {
      this.instance.post(`/app/appleavemessage/public?id=${id}`).then(res => {
        if (res.code == 0) {
          console.log(isPublic)
          this.$message.success(isPublic == 1 ? "已公示" : "不公示")
          this.getAppLeaveMessage()
        }
      })
    },
    navClick(item) {
      this.navStatus = item.status
    },
    isPermit(params) {
      return this.permissions ? this.permissions(params) : false
    },
    resetSearch() {
      this.page.current = 1
      this.page.size = 10
      this.columns.map(c => {
        if (c.type) this.search[c.prop] = null
      })
      Object.keys(this.search).forEach((e) => {
        this.search[e] = null;
      })
      this.getAppLeaveMessage()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.getAppLeaveMessage()
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.getAppLeaveMessage();
    },
    getAppLeaveMessage() {
      this.search.status = this.activeName
      this.search.areaId = this.user.info.areaId
      this.instance.post("/app/appleavemessage/list", null, {
        params: {
          ...this.search,
          ...this.page,
          areaId: this.areaId
        }
      }).then(res => {
            this.tableData = res.data.records
            this.total = res.data.total
          }
      )
    },

    addOrUpdateAppLeaveMessage() {
      this.instance.post("/app/appleavemessage/addOrUpdate", this.dialog.add).then(() => {
            this.getAppLeaveMessage()
            this.$message.success("添加或修改成功!")
          }
      )
    },
    deleteAppLeaveMessage(ids) {
      this.$confirm("是否要删除这些账号?", {
        type: 'warning'
      }).then(() => {
        this.instance.post("/app/appleavemessage/delete", null, {
          params: {
            ids: ids
          }
        }).then(() => {
              this.getAppLeaveMessage()
              this.$message.success("删除成功!")
            }
        )
      }).catch(() => {
          }
      )
    },
    toDetail(id) {
      this.$emit('toDetail', id)
    }
  },

  filters: {
    format(time) {
      return time ? day(time).format("YYYY-MM-DD HH:mm") : '-'
    }
  },

  mounted() {
    if (this.dict) this.dict.load(this.columns.map(e => e.type == 'select' ? e.dict : ''))
    this.resetSearch()
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        { prop: 'msgCode',  label: '编号', align: 'center' },
        { prop: 'title',  label: '标题', align: 'center' },
        { prop: 'type',  label: '类型', align: 'center',
          render:(h,{row})=>[<span>{this.dict.getLabel('leaveMessageType', row.type)}</span>] },
        { prop: 'leaveName',  label: '留言人', align: 'center' },
        { prop: 'createTime',  label: '留言提交时间', align: 'center' },
        { prop: 'lastReplyTime',  label: '最后回复时间', align: 'center' },
        { slot: 'isPublic'},
        { slot: 'options'},
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.already-list {
  background-color: #f3f6f9;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .el-table::before {
    background-color: #fff !important;
  }

  .header {
    padding: 0 16px;
    width: 100%;
    background-color: #ffffff;
    height: 48px;
    line-height: 48px;
    box-shadow: inset 0px -1px 0px 0px #d8dce3;

  }

  .main-content {
    box-sizing: border-box;
    margin: 16px;
    height: calc(100% - 80px);
    background-color: white;
    border: 1px solid #eee;
    padding: 12px 16px;

    .searchBar {

      .el-col {
        margin-bottom: 12px;
      }

    }
  }
}
</style>