mt-ck-wms-ui/src/views/EquipmentManager/RepairManager/index.vue

<!--
 * @Date: 2020-12-15 15:36:52
 * @LastEditors: guo
 * @LastEditTime: 2021-03-20 17:22:44
 * @FilePath: \basic-admin\src\views\EquipmentManager\RepairManager\index.vue
 * @Description:
-->
<template>
  <div class="usermanager-container">
    <div class="method-btn-area">
      <el-input v-model="listQuery.equipmentName" :placeholder="$t('module.equipmentManager.repair.searchPlaceholder')" style="width: 200px;" clearable />
      <!-- <el-select v-model="listQuery.status" placeholder="请选择状态" clearable style="width: 200px;">
        <el-option
          label="完成"
          value="1"
        />
        <el-option
          label="等待"
          value="2"
        />
        <el-option
          label="进行中"
          value="3"
        />
      </el-select> -->
      <el-date-picker
        v-model="datepicker"
        type="daterange"
        range-separator="-"
        :start-placeholder="$t('module.equipmentManager.repair.startDate')"
        :end-placeholder="$t('module.equipmentManager.repair.endDate')"
        @change="changeTime"
      />
      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
      <el-button type="primary" @click="toAddPage">{{ 'btn.add' | i18nFilter }}</el-button>
    </div>
    <!-- <el-row :gutter="20">
      <el-col :span="4">
        <div class="tree-select-container">
          <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20">
      </el-col>
    </el-row> -->
    <base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading" :page="listQuery.current" :limit="listQuery.size">
      <method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
    </base-table>
    <pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="getList" />
  </div>
</template>

<script>
import dataDict from '@/filters/DataDict'
// import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
// edit here
import { timeFormatter } from '@/filters'
const tableBtn = [{
  type: 'edit',
  btnName: 'btn.edit'
}, {
  type: 'delete',
  btnName: 'btn.delete'
}, {
  type: 'detail',
  btnName: 'btn.detail'
}]
const tableProps = [{
  prop: 'repairOrderNumber',
  label: i18n.t('module.equipmentManager.repair.repairOrderNumber'),
  align: 'center'
}, {
  prop: 'maintenanceStartTime',
  label: i18n.t('module.equipmentManager.repair.maintenanceStartTime'),
  align: 'center',
  filter: timeFormatter,
  width: '180px'
}, {
  prop: 'maintenanceFinishTime',
  label: i18n.t('module.equipmentManager.repair.maintenanceFinishTime'),
  align: 'center',
  filter: timeFormatter,
  width: '180px'
}, {
  prop: 'maintenanceStatus',
  label: i18n.t('module.equipmentManager.repair.maintenanceStatus'),
  align: 'center',
  filter: dataDict('doneStatus')
}, {
  prop: 'equipmentName',
  label: i18n.t('module.equipmentManager.repair.equipmentName'),
  align: 'center'
  // filter: dataDict('enableState')
},
// {
//   prop: 'maintenanceWorker',
//   label: i18n.t('module.equipmentManager.repair.maintenanceWorker'),
//   align: 'center',
//   subcomponent: DictFilter,
//   filter: getDictWorker

// }, {
//   prop: 'workerContactInformation',
//   label: i18n.t('module.equipmentManager.repair.workerContactInformation'),
//   align: 'center'
//   // filter: dataDict('enableState')
// },
{
  prop: 'remark',
  label: i18n.t('module.equipmentManager.repair.remark'),
  align: 'center'
}]
import BaseTable from '@/components/BaseTable'
// edit here
import { objFilter } from '@/utils'
import { getRepairList, delRepairInfo } from '@/api/equipment/repair'
// import { getDictWorker } from '@/api/dict'
import Pagination from '@/components/Pagination'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import i18n from '@/lang'
export default {
  name: 'OrgManager',
  components: { Pagination, BaseTable, MethodBtn },
  props: {},
  data() {
    return {
      tableBtn,
      tableProps,
      datepicker: [],
      list: [],
      total: 0,
      listLoading: true,
      curEditId: null,
      listQuery: {
        current: 1,
        size: 10,
        equipmentName: '',
        status: '',
        date: '',
        startTime: null,
        endTime: null
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.getList()
    // this.listLoading = false
  },
  mounted() {},
  methods: {
    handleClick(raw) {
      console.log(raw)
      switch (raw.type) {
        case 'delete':
          this.$confirm(i18n.t('deleteMsgBox.content'), i18n.t('deleteMsgBox.hint'), {
            confirmButtonText: i18n.t('btn.confirm'),
            cancelButtonText: i18n.t('btn.cancel'),
            type: 'warning'
          }).then(async() => {
            // 走接口
            const result = await delRepairInfo({
              id: raw.data.id
            })
            if (result.code === 0) {
              this.$message({
                type: 'success',
                message: i18n.t('deleteMsgBox.doneMsg')
              })
              this.getList()
            }
          })
          break
        case 'edit':
          this.$router.push({
            name: 'EditRepair',
            query: {
              id: raw.data.id
            }
          })
          break
        case 'detail':
          this.$router.push({
            name: 'EditRepair',
            query: {
              id: raw.data.id,
              type: 'readonly'
            }
          })
          break
      }
    },
    async getList() {
      this.listLoading = true
      // edit here
      const res = await getRepairList(objFilter(this.listQuery))
      if (res.code === 0) {
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      }
    },
    toAddPage() {
      this.$router.push({
        name: 'AddRepair'
      })
    },
    changeTime(val) {
      this.listQuery.startTime = val ? val[0] : null
      this.listQuery.endTime = val ? val[1] : null
    }
  }
}
</script>

<style lang="scss" scoped>
.usermanager-container {
  padding: 20px;
  .method-btn-area {
    padding: 15px 30px;
    margin: 10px 0 20px 0;
    border: 1px solid #dfe6ec;
  }
  .tree-select-container {
    border: 1px solid #dfe6ec;
    min-height: 400px;
    padding: 20px;
  }
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>