dvcp_v2_webapp/packages/work/processManagement/examinationApproval/AppExaminationApproval.vue

<template>
  <section class="examination-approval">
    <ai-list v-if="!showList">
      <template #title>
        <ai-title title="审批分类" :isShowBottomBorder="true" :instance="instance"></ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" @click="showList = true">添加分类</el-button>
          </template>
          <template #right>
            <el-input
              v-model="search.name"
              size="small"
              placeholder="分类名称/创建人"
              v-throttle="() => {search.current = 1, getList()}"
              @clear="reset"
              clearable
              suffix-icon="iconfont iconSearch"/>
          </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          :header-cell-style="{fontWeight:'bold',color:'#333'}"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">

          <el-table-column label="是否启用" slot="status" align="center" width="150">
            <template v-slot="{row}">
              <el-switch
                v-model="row.status"
                @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}">
              <el-button type="text" title="修改" @click="editInfo(row)">修改</el-button>
              <el-button type="text" title="删除" @click="deleteInfo(row)">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <addClassification v-else @back="showList=false;row={},getList()" :instance="instance"
                       :row="row"></addClassification>
  </section>
</template>

<script>

  import addClassification from "./components/addClassification";
  import day from 'dayjs'

  export default {
    name: "AppExaminationApproval",
    label: "审批分类",
    components: {addClassification},
    props: {
      instance: Function,
      dict: Object,
      permissions: Function
    },
    data() {
      return {
        search: {
          current: 1,
          size: 10,
          name: "",
        },
        total: 0,
        tableData: [],
        row: {},
        showList: false
      }
    },
    computed: {
      colConfigs() {
        return [
          {
            prop: 'name',
            align: 'left',
            label: '分类名称',
          },
          {
            prop: 'desc',
            align: 'left',
            label: '分类描述',
          },
          {
            prop: 'createUserName',
            align: 'center',
            label: '创建人',
          },
          {
            prop: 'createTime',
            align: 'center',
            label: '创建日期',
          },
          {
            prop: 'showIndex',
            align: 'center',
            label: '排序',
          },
          {
            slot: 'status',
            align: 'center',
            label: '是否启用',
          },
          {
            slot: 'options',
            align: 'center',
            label: '操作',
          },
        ]
      },
    },
    methods: {
      /**
       * 编辑
       * */
      editInfo(row) {
        this.row = row
        this.showList = true
      },

      /**
       * 启用、停用
       */
      onChange(row) {
        this.instance.post(`/app/zwspapprovalclassification/enable?id=${row.id}`).then(res => {
          if (res?.code == 0) {
            this.$message.success(+row.status ? "已启用" : '不启用')
            this.getList()
          }
        })
      },

      reset() {
        this.search.name = ""
        this.getList()
      },

      getList() {
        this.instance.post(`/app/zwspapprovalclassification/list`, null, {
          params: {
            ...this.search,
          },
        }).then(res => {
          if (res && res.data) {
            this.tableData = res.data.records.map(e => ({
              ...e,
              createTime: day(e.createTime).format("YYYY-MM-DD"),
            }));
            this.total = res.data.total;
          }
        })
      },

      /**
       * 删除
       */
      deleteInfo({id}) {
        this.$confirm("是否删除？").then(() => {
          this.instance.post(`/app/zwspapprovalclassification/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功")
              this.getList()
            }
          })
        })
      },
    },

    mounted() {
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .examination-approval {
    height: 100%;
    background: #f3f6f9;
    overflow: auto;

    .iconfont {
      user-select: none;
      cursor: pointer;
    }

    ::v-deep .ai-table {
      margin-top: 16px;
    }

  }
</style>