imcs_yj_fe/imcs-ui/src/views/zuihou/repairManger/repair/Index.vue

<template>
  <div class="app-container">
    <!-- 搜索模块 -->
    <div class="filter-container">
      <!--设备名称-->
      <span>
        <span>{{ $t("resource.table.repair.productionresourceName") }}：</span>
        <el-input
          v-model="queryParams.model.productionresourceName"
          :placeholder="$t(&quot;common.pleaseEnter&quot;)"
          style="width: 150px;"
          size="medium"
        />
      </span>
      <!--设备编号-->
      <span>
        <span>{{ $t("resource.table.repair.code") }}：</span>
        <el-input
          v-model="queryParams.model.code"
          :placeholder="$t(&quot;common.pleaseEnter&quot;)"
          style="width: 150px;"
          size="medium"
        />
      </span>
      <span style="margin-left: 15px;">
        <el-button
          plain
          type="primary"
          icon="el-icon-search"
          size="medium"
          @click="search"
        >
          {{ $t("table.search") }}
        </el-button>
        <el-button
          plain
          type="warning"
          icon="el-icon-refresh"
          size="medium"
          @click="reset"
        >
          {{ $t("table.reset") }}
        </el-button>
      </span>
    </div>

    <!-- 功能按钮 -->
    <el-row class="filter-container">
      <el-col>
        <!--添加按钮，调用add方法-->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="medium"
          @click="add"
        >
          {{ $t("common.add") }}
        </el-button>
        <!--修改按钮，调用edit-->
        <el-button
          type="success"
          icon="el-icon-edit"
          size="medium"
          @click="editOne"
        >
          {{ $t("common.edit") }}
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="medium"
          @click="batchDelete"
        >
          {{ $t("table.delete") }}
        </el-button>
      </el-col>
    </el-row>

    <!-- 列表数据 -->
    <el-table
      :key="tableKey"
      ref="table"
      v-loading="loading"
      :data="tableData.records"
      border
      fit
      row-key="id"
      style="width: 100%;"
      @selection-change="onSelectChange"
      @cell-click="cellClick"
    >
      <el-table-column
        :label="$t(&quot;common.serialNo&quot;)"
        width="55px"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.$index+(queryParams.current - 1) * queryParams.size + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        type="selection"
        width="50"
        :reserve-selection="true"
      />
      <!--设备编号-->
      <el-table-column
        prop="code"
        :label="$t(&quot;resource.table.repair.code&quot;)"
        :show-overflow-tooltip="true"
      />
      <!--设备名称-->
      <el-table-column
        prop="productionresourceName"
        :label="$t(&quot;resource.table.repair.productionresourceName&quot;)"
        :show-overflow-tooltip="true"
      />
      <!--所在产线-->
      <el-table-column
        prop="lineDesc"
        :label="$t(&quot;resource.table.repair.lineDesc&quot;)"
        :show-overflow-tooltip="true"
        width="120"
      />
      <!--维修倒计时进度-->
      <el-table-column
        prop="downTime"
        :label="$t(&quot;resource.table.repair.countdown&quot;)"
        :show-overflow-tooltip="true"
        width="200"
        align="center"
      >
        <template slot-scope="{ row }" id="">
          <el-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="row.process"
            show-text="true"
            :format="setItemText(row)"
            :color="setItemColor(row)"
          />
        </template>
      </el-table-column>
      <!--维保结束时间-->
      <el-table-column
        prop="repairEndTime"
        :label="$t(&quot;resource.table.repair.repairEndTime&quot;)"
        :show-overflow-tooltip="true"
        width="120"
      />
      <!--维修状态-->
      <el-table-column
        prop="repairStatus"
        :label="$t(&quot;resource.table.repair.repairStatus&quot;)"
        align="center"
        width="90px"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.repairStatus=='1' ? 'success' : 'danger'">
            {{ row.repairStatus=='1' ? '正常' : '待维修' }}
          </el-tag>
        </template>
      </el-table-column>
      <!--状态-->
      <el-table-column
        prop="status"
        :label="$t(&quot;resource.table.repair.status&quot;)"
        align="center"
        width="90px"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.status=='1' ? 'success' : 'danger'">
            {{ row.status=='1' ? '启用' : '冻结' }}
          </el-tag>
        </template>
      </el-table-column>
      <!--创建时间-->
      <el-table-column
        prop="createTime"
        :label="$t(&quot;resource.table.repair.createTime&quot;)"
        width="180px"
      />
      <!--最新修改时间-->
      <el-table-column
        prop="updateTime"
        :label="$t(&quot;resource.table.repair.updateTime&quot;)"
        width="180px"
      />
      <!--操作人-->
      <el-table-column
        prop="operationName"
        :label="$t(&quot;resource.table.repair.createUserDesc&quot;)"
        width="180px"
      />
      <!--操作-->
      <el-table-column
        :label="$t('table.operation')"
        fixed="right"
        align="center"
        column-key="operation"
        width="260px"
      >
        <template slot-scope="{ row }">
          <a
            class="rowBtn"
            @click="equipment(row)"
          >登记维保</a>
          <a
            class="rowBtn"
            @click="eventRow(row)"
          >更新计划</a>
          <a
            class="rowBtn"
            @click="edit(row)"
          >修改</a>
          <a
            class="rowBtn"
            @click="singleDelete(row)"
          >删除</a>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="queryParams.size"
      :page.sync="queryParams.current"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
    <tenant-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      @close="editClose"
      @success="editSuccess"
    />
    <tenant-event
      ref="event"
      :dialog-visible="tenantEvent.isVisible"
      :title="tenantEvent.title"
      @close="eventClose"
      @success="eventSuccess"
    />
    <tenant-view
      ref="view"
      :dialog-visible="tenantViewVisible"
      @close="viewClose"
    />
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      title="预览"
      width="80%"
      top="50px"
      :visible.sync="preview.isVisible"
    >
      <el-scrollbar>
        <div v-html="preview.context" />
      </el-scrollbar>
    </el-dialog>
    <el-dialog
      :visible.sync="equipmentVisible"
      width="80%"
      custom-class="dialogNoTop"
      @close="editEquipmentClose"
    >
      <!--【	维保】 -->
      <maintenanceLog
        :row-data="rowData"
        :maintenance-id="maintenanceId"
        @close="editEquipmentClose"
        @success="editEquipmentSuccess"
      />
    </el-dialog>
  </div>
</template>

<script>
  // 【分页】组件
  import Pagination from "@/components/Pagination"
  // 【新增/修改】组件
  import TenantEdit from "./components/Edit"
  //【更新/计划】组件
  import TenantEvent from "./components/Event"
  // 【查看】组件
  import TenantView from "./components/View"
  // 【维保计划管理】-API
  import repairApi from "@/api/resourceProductMgr/repair"
  // 【工作位置管理】组件
  import maintenanceLog from "@/views/zuihou/repairManger/maintenanceLog/Index"

  // 【弹出框】elementui组件
  import elDragDialog from '@/directive/el-drag-dialog'

  import VueProgressBar from 'vue-progressbar'
  // 共通函数
  import {downloadFile, initEnums, initDicts, initQueryParams} from '@/utils/commons'

  export default {
    name: "Repair",
    directives: {elDragDialog},
    components: {Pagination, TenantEdit, TenantView,TenantEvent,maintenanceLog},
    props: {},
    data() {
      return {
        maintenanceId:'',
        audioStatus: [],
        equipmentVisible: false, // 设备维保记录管理
        rowData: {}, // row数据
        dialog: {
          isVisible: false,
          title: ""
        },
        tenantEvent:{
          isVisible: false,
          title: ""
        },
        preview: {
          isVisible: false,
          context: ''
        },
        tenantViewVisible: false,
        tableKey: 0,
        queryParams: initQueryParams({}),
        selection: [],
        loading: false,
        tableData: {
          total: 0
        },
        dicts: {
          NATION: {}
        },
        enums: {
          TenantTypeEnum: {},
          TenantStatusEnum: {}
        }
      }
    },
    computed: {
      currentUser() {
        return this.$store.state.account.user
      },
      nationList() {
        return convertEnum(this.dicts.NATION)
      }
    },
    // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
    created() {
      // 调用常量-审核状态
      this.audioStatus = this.$constWKS.SHOWHIDE
      // 加载【字典】
      initDicts(['NATION'], this.dicts);
      // 加载列表数据
      this.fetch()
    },
    mounted() {

    },
    methods: {
      //【设备维保记录】按钮-事件
      equipment(row){
        this.maintenanceId = row.id
        this.equipmentVisible = true
      },
      editEquipmentClose(){
        this.equipmentVisible = false
        this.search()
      },
      editEquipmentSuccess(){
        this.search()
      },
      setItemText(row) {
        return () => {
          return row.downTime
        }
      },
      setItemColor(row) {
        return () => {
            if(row.expireFlag == 1){
              return '#FF0000'
            }
        }
      },
      viewClose() {
        this.tenantViewVisible = false
      },
      editClose() {
        this.dialog.isVisible = false
        this.fetch()
      },
      eventClose() {
        this.tenantEvent.isVisible = false
        this.fetch()
      },
      editSuccess() {
        this.search()
      },
      eventSuccess(){
        this.search()
      },
      onSelectChange(selection) {
        this.selection = selection
      },
      search() {
        this.fetch({
          ...this.queryParams
        })
      },
      reset() {
        this.queryParams = initQueryParams({})
        this.$refs.table.clearSort()
        this.$refs.table.clearFilter()
        this.search()
      },
      add() {
        this.$refs.edit.type = "add"
        this.$refs.edit.setTenant(false, this.dicts)
        this.dialog.title = this.$t("common.add")
        this.dialog.isVisible = true
      },
      singleDelete(row) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(row, true)
        this.batchDelete()
      },
      batchDelete() {
        if (!this.selection.length) {
          this.$message({
            message: this.$t("tips.noDataSelected"),
            type: "warning"
          })
          return
        }

        this.$confirm(this.$t("wms.tips.delete"), this.$t("common.tips"), {
          distinguishCancelAndClose: true,
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning"
        }).then(() => {
          const ids = []
          this.selection.forEach(item => {
            ids.push(item.id)
          })
          this.delete(ids)
        }).catch(() => {
        })
      },
      clearSelections() {
        this.$refs.table.clearSelection()
      },
      delete(ids) {
        repairApi.remove({ids: ids}).then(response => {
          const res = response.data
          if (res.isSuccess) {
            this.$message({
              message: this.$t("tips.deleteSuccess"),
              type: "success"
            })
            this.search()
            // 清理已经删除的数据
            this.$refs.table.clearSelection()
          }
        })
      },
      view(row) {
        this.$refs.view.setTenant(row)
        this.tenantViewVisible = true
      },
      // 【修改】表头上Btn-事件
      editOne() {
        if (!this.selection.length) {
          this.$message({
            message: this.$t("tips.noDataSelected"),
            type: "warning"
          })
          return
        }
        if (this.selection.length > 1) {
          this.$message({
            message: this.$t("tips.mustOne"),
            type: "warning"
          })
          return
        }
        this.edit(this.selection[0]);
      },
      edit(row) {
        this.$refs.edit.setTenant(row, this.dicts)
        this.$refs.edit.type = "edit"
        this.dialog.title = this.$t("common.edit")
        this.dialog.isVisible = true
      },
      eventRow(row){
        this.$refs.event.setTenant(row, this.dicts)
        this.$refs.event.type = "event"
        this.tenantEvent.title = "更新计划"
        this.tenantEvent.isVisible = true
      },
      fetch(params = {}) {
        this.tableKey = !this.tableKey
        this.selection = []
        this.loading = true
        if (this.queryParams.timeRange) {
          this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
          this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
        }

        this.queryParams.current = params.current ? params.current : this.queryParams.current
        this.queryParams.size = params.size ? params.size : this.queryParams.size
        repairApi.page(this.queryParams).then(response => {
          const res = response.data
          if (res.isSuccess) {
            this.tableData = res.data
          }
          // eslint-disable-next-line no-return-assign
        }).finally(() => this.loading = false)

      },
      cellClick(row, column) {
        if (column['columnKey'] === "operation") {
          return
        }
        let flag = false
        this.selection.forEach((item) => {
          if (item.id === row.id) {
            flag = true
            this.$refs.table.toggleRowSelection(row)
          }
        })

        if (!flag) {
          this.$refs.table.toggleRowSelection(row, true)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .rowBtn {
    margin: 0 5px;
    color: #1890ff;
  }

  .rowBtn:hover {
    opacity: 0.7;
  }
</style>