kd-aiot-frontend-eom/src/views/salesServiceManagement/accessory/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search class="seep-search" @search="reload"></search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
        :pageSize="20"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            v-if="$hasPermission('eom:sparepartsapply:save')"
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit('', 'add')"
            >新建</el-button
          >
        </template>
        <template v-slot:code="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="openEdit(row, 'view')"
            >{{ row.code }}</el-link
          >
        </template>
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            v-if="
              row.source == 0 && $hasPermission('eom:sparepartsapply:update')
            "
            :underline="false"
            @click="openEdit(row, 'edit')"
            >修改</el-link
          >
          <el-link
            type="primary"
            v-if="
              row.approvalStatus == 2 &&
              $hasPermission('eom:aftersalessparepartsreturnapply:save')
            "
            :underline="false"
            @click="returnAdd(row)"
            >归还入库</el-link
          >
          <el-link
            type="primary"
            v-if="
              row.source == 0 &&
              !(row.approvalStatus === 1 || row.approvalStatus === 2)
            "
            :underline="false"
            @click="openProcess(row)"
            >发起流程</el-link
          >
          <el-popconfirm
            v-if="
              row.source == 0 &&
              $hasPermission('eom:sparepartsapply:delete') &&
              !(row.approvalStatus === 1 || row.approvalStatus === 2)
            "
            class="ele-action"
            title="确定要删除此配件记录吗？"
            @confirm="handleRemove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete"
                >删除</el-link
              >
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <process-submit-dialog
      :isNotNeedProcess="false"
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="reload"
    ></process-submit-dialog>
    <!-- 新建或编辑弹窗 -->
    <accessoryDialog ref="accessoryDialog" @refresh="reload" />
    <returnAddDiaLog
      ref="returnAddDiaLogRef"
      @refresh="reload"
    ></returnAddDiaLog>
  </div>
</template>

<script>
import search from './components/search.vue';
import accessoryDialog from './components/accessoryDialog.vue';
import returnAddDiaLog from '@/views/salesServiceManagement/return/component/recycleDialog.vue';

import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';

import {
  accessoryPage,
  accessoryDelete
  // accessoryUpdate
} from '@/api/salesServiceManagement/index';
// import dictMixins from '@/mixins/dictMixins';
export default {
  //   mixins: [dictMixins],
  components: {
    search,
    accessoryDialog,
    returnAddDiaLog,
    processSubmitDialog
  },
  data() {
    return {
      // 加载状态
      loading: false,
      processSubmitDialogFlag: false, // 加载状态 弹窗
      outboundDetailsDialogFlag: false //
    };
  },
  computed: {
    columns() {
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          slot: 'code',
          prop: 'code',
          label: '编码',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'demandCode',
          label: '售后需求编码',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'orderCode',
          label: '工单编码',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'approvalStatus',
          label: '审核状态',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (_row, _column, cellValue) => {
            return cellValue == 0
              ? '未提交'
              : cellValue == 1
              ? '审核中'
              : cellValue == 2
              ? '审核通过'
              : cellValue == 3
              ? '审核不通过'
              : '';
          }
        },
        {
          prop: 'categoryLevelName',
          label: '物品分类',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (row) => {
            if (!row.details) return '';
            let str = '';
            row.details.map((el, idx) => {
              if (idx + 1 == row.details.length) {
                str += el.categoryLevelName;
              } else {
                str = el.categoryLevelName
                  ? str + '' + el.categoryLevelName + ','
                  : str + '';
              }
            });
            return str;
          }
        },
        // + +关键字
        {
          prop: 'categoryName',
          label: '物品名称',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (row) => {
            if (!row.details) return '';
            let str = '';
            row.details.map((el, idx) => {
              if (idx + 1 == row.details.length) {
                str += el.categoryName;
              } else {
                str = str + '' + el.categoryName + ',';
              }
            });
            return str;
          }
        },
        {
          prop: 'receivingDeptName',
          label: '领用部门',
          align: 'center',
          showOverflowTooltip: true
        },
        // + + 时间选择
        {
          prop: 'recipientName',
          label: '领用人',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'contactName',
          label: '客户名称',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '设备名称',
          align: 'center',
          showOverflowTooltip: true,
          formatter: (row) => {
            if (!row.deviceDetails) return '';
            let str = '';
            row.deviceDetails.map((el, idx) => {
              if (idx + 1 == row.deviceDetails.length) {
                str += el.categoryName;
              } else {
                str = str + '' + el.categoryName + ',';
              }
            });
            return str;
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'usageTime',
          label: '使用时间',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          columnKey: 'action',
          slot: 'action',
          label: '操作',
          align: 'center',
          width: 180,
          resizable: false,
          showOverflowTooltip: true
        }
      ];
    }
  },
  created() {},
  methods: {
    /* 表格数据源 */
    datasource({ page, limit, where, order }) {
      return accessoryPage({ pageNum: page, size: limit, ...where });
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ page: 1, where });
    },

    openEdit(row, type) {
      this.$refs.accessoryDialog.init(row, type);
    },
    handleRemove(row) {
      accessoryDelete([row.id]).then((res) => {
        if (res) {
          this.$message.success('操作成功!');
          this.reload();
        }
      });
    },
    returnAdd(row) {
      this.$refs.returnAddDiaLogRef.init(row, 'add', 'accessory');
    },

    openProcess(data) {
      this.processSubmitDialogFlag = true;
      this.$nextTick(() => {
        let params = {
          businessId: data.id,
          businessKey: 'eom_sh_bpbj',
          formCreateUserId: data.createUserId,
          variables: {
            businessCode: data.code,
            businessName: data.receivingDeptName,
            businessType: '申请备品备件'
          }
        };
        this.$refs.processSubmitDialogRef.init(params);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner::placeholder {
  font-size: 13px;
}
::v-deep .seep-search {
  .el-input__inner {
    padding: 0 5px 0 10px;
  }
}
</style>