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.source == 0"
            :underline="false"
            @click="openProcess(row)"
            >发起流程</el-link
          > -->
          <el-popconfirm
            v-if="
              row.source == 0 && $hasPermission('eom:sparepartsapply:delete')
            "
            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" />
  </div>
</template>

<script>
  import search from './components/search.vue';
  import accessoryDialog from './components/accessoryDialog.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,
      processSubmitDialog
    },
    data() {
      return {
        // 加载状态
        loading: false,
        processSubmitDialogFlag: 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: '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
          },
          {
            prop: 'categoryName',
            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();
          }
        });
      },
      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>