dvcp_v2_webapp/packages/processManagement/mattersConfig/components/configList.vue

<template>
  <div class="config-list">
    <ai-list isTabs>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-select v-model="search.department" placeholder="请选择所属部门" @change="page.current=1,getList()"
                       size="small" clearable>
              <el-option
                v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
                :label="item.dictName"
                :value="item.dictValue">
              </el-option>
            </el-select>
            <el-select v-model="search.classificationId" placeholder="请选择所属分类" @change="page.current=1,getList()"
                       size="small" clearable>
              <el-option
                v-for="(item,i) in classList" :key="i"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
          <template #right>
            <el-input
              v-model="search.processName"
              size="small"
              placeholder="事项名称/创建人"
              @clear="search={},page.current=1,getList()"
              @keyup.enter.native="page.current=1,getList()"
              clearable
              suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" @click="goPage(tab.value==0 ? 'addConfig':'guidance')">添加{{tab.value==0?'事项':'办事指南'}}</el-button>
          </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :header-cell-style="{fontWeight:'bold',color:'#333'}"
          :total="page.total"
          :current.sync="page.current"
          :size.sync="page.size"
          @getList="getList">
          <el-table-column label="是否启用" slot="processDefStatus" align="center" width="150">
            <template v-slot="{row}">
              <el-switch
                v-model="row.processDefStatus"
                @change="onChange(row)" active-value="1" inactive-value="0"
                active-color="#5088FF"
                inactive-color="#D0D4DC">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" slot="options" align="center" width="150">
            <template v-slot="{row}">
              <div class="table-options">
                <el-button type="text" title="编辑" @click="goPage(tab.value==0 ? 'addConfig':'guidance',row)">编辑</el-button>
                <el-button type="text" title="删除" @click="delInfo(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
  </div>
</template>

<script>
  import day from 'dayjs'

  export default {
    name: "configList",
    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      tab: Object,
    },
    data() {
      return {
        search: {
          department: "",
          classificationId: "",
          processName: "",
        },
        page: {current: 1, size: 10},
        total: 0,
        row: {},
        tableData: [],
        classList: [],
      }
    },
    computed: {
      colConfigs() {
        return [
          {
            prop: 'processName',
            align: 'left',
            label: '事项名称',
          },
          {
            prop: 'department',
            align: 'left',
            label: '所属部门',
            render: (h, {row}) => [ < span > {this.dict.getLabel('hbDepartment', row.department)} < /span>]
          },
          {
            prop: 'classificationName',
            align: 'center',
            label: '所属分类',
          },
          {
            prop: 'timeLimit',
            align: 'center',
            label: '办结时限（日）',
          },
          {
            prop: 'createUserName',
            align: 'center',
            label: '创建人',
          },
          {
            prop: 'createTime',
            align: 'center',
            label: '最后修改时间',
            render: (h, {row}) => [ < span > {day(row.createTime
      ).
        format("YYYY-MM-DD HH:mm")
      }<
        /span>]
      },
        {slot: 'processDefStatus', align:'center', label:'是否启用',},
        { slot: 'options',align:'center',label:'操作',},
      ].filter(e=>this.tab.value==0 ? true : (e.prop!="timeLimit"))
      },
    },
    methods: {
      goPage(comp, row = {}) {
        this.$emit("goPage", {comp, row})
      },
      /**
       * 获取分类
       */
      getClassification() {
        this.instance.post(`/app/zwspapprovalclassification/list`, null, {
          params:{
            current: 1,
            status: 1,
            size: 9999
          }
        }).then(res => {
          if (res && res.data) {
            this.classList = res.data.records
          }
        })
      },
      /**
       * 删除
       * */
      delInfo({id}) {
        this.$confirm("是否删除").then(() => {
          this.instance.post(`/app/approval-process-def/delete?id=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功")
              this.getList()
            }
          })
        })
      },
      /**
       * 启用，停用
       */
      onChange({id, processDefStatus}) {
        this.instance.post(`/app/approval-process-def/enable-disable`, null, {
          params: {id}
        }).then(res => {
          if (res.code == 0) {
            this.$message.success(processDefStatus == 0 ? "不启用" : "已启用")
            this.getList()
          }
        })
      },

      getList() {
        this.instance.post(`/app/approval-process-def/list`, null, {
          params: {
            ...this.page,
            ...this.search,
            processType: this.tab.value
          },
        }).then(res => {
          if (res?.data) {
            this.tableData = res.data.records
            this.page.total = res.data.total;
          }
        })
      },
    },
    mounted() {
      this.getList()
      this.getClassification()
    },
  }
</script>

<style lang="scss" scoped>
  .config-list {
    height: 100%;
  }
</style>