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

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <plan-search class="seep-search" @search="reload"></plan-search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
        :pageSize="20"
        @cell-click="cellClick"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            @click="quotation"
            class="ele-btn-icon"
            >生成报价单</el-button
          >
        </template>
        <template v-slot:single="{ row }">
          <el-radio class="radio" v-model="radioId" :label="row.id">
            <i></i>
          </el-radio>
        </template>
        <template v-slot:code="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="goDetail(row, 'view')"
            >{{ row.code }}</el-link
          >
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="handleUpdate(row, 'edit')" 
            v-if="[0, 4, 5].includes(row.planStatus) && $hasPermission('eom:aftersalesplan:update')"
            >修改</el-link
          >
          <el-popconfirm
            class="ele-action"
            title="确认删除这条记录吗？"
            @confirm="cancel(row)"
            v-if="[0, 4, 5].includes(row.planStatus) && $hasPermission('eom:aftersalesplan:delete')"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete"
                >删除</el-link
              >
            </template>
          </el-popconfirm>
          <el-link
            type="primary"
            :underline="false"
            @click="handleCommand('handleRevocation', row)"
            v-if="row.planStatus == 1 && $hasPermission('eom:aftersalesplan:revocation')"
            >撤回</el-link
          >
          <el-link
            type="primary"
            :underline="false"
            @click="handleCommand('handleDispatchOrders', row)"
            v-if="[0, 4, 5].includes(row.planStatus) && $hasPermission('eom:aftersalesplan:sendOrder')"
            >派单</el-link
          >
        </template>
      </ele-pro-table>
    </el-card>
    <addOrUpdateDialog
      ref="addOrUpdateDialogRef"
      @reload="reload"
    ></addOrUpdateDialog>
    <applyForSpare ref="edit" @reload="reload" />
    <generateForm ref="generateFormRef"></generateForm>
    <jimureportBrowse
      @cancelQuo="cancelQuo"
      v-if="browseShow"
      :browseShow="browseShow"
      :businessId="currentRow.id"
      businessCode="eomquotationprint"
    ></jimureportBrowse>
  </div>
</template>

<script>
  import planSearch from './components/plan-search.vue';
  import addOrUpdateDialog from './components/addOrUpdateDialog.vue';
  import generateForm from './components/generateForm.vue';
  import jimureportBrowse from '@/components/jimureport/browseModal.vue';
  import applyForSpare from '../components/applyForSpare.vue';

  import {
    getSalesPlan,
    deleteSalesPlan,
    planRevocation,
    checkByPlanId
  } from '@/api/salesServiceManagement/index';
  // import { getToken } from '@/utils/token-util';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    mixins: [dictMixins],
    components: {
      planSearch,
      addOrUpdateDialog,
      generateForm,
      applyForSpare,
      jimureportBrowse
    },
    data() {
      return {
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            action: 'single',
            slot: 'single',
            align: 'center',
            label: '选择',
            width: 50
          },
          {
            slot: 'code',
            prop: 'code',
            label: '计划单号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '计划名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'planExecuteUserName',
            label: '计划执行人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'demandName',
            label: '需求名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'demandCode',
            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: 'contactName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'planStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (item) => {
              return {
                0: '待派单',
                1: '已派单',
                2: '执行中',
                3: '已完成',
                4: '已撤回',
                5: '已驳回'
              }[item.planStatus];
            }
          },
          {
            prop: 'urgent',
            label: '紧急程度',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (item) => {
              return {
                1: '普通',
                2: '紧急',
                3: '重要'
              }[item.urgent];
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 加载状态
        loading: false,
        radioId: '',
        currentRow: {},
        browseShow: false
      };
    },
    computed: {},
    created() {
      this.requestDict('维修计划状态');
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getSalesPlan({ pageNum: page, size: limit, ...where });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
        this.radioId = '';
        this.currentRow = {};
      },
      async cancel(row) {
        let flag = await this.permission(row);
        if (!flag) return;
        const res = await deleteSalesPlan([row.id]);
        if (res) {
          this.$message.success('删除成功');
          this.reload();
        }
      },
      async permission(row) {
        try {
          await checkByPlanId(row.id);
          return true;
        } catch {
          return false;
        }
      },
      async handleUpdate(row, type) {
        let flag = await this.permission(row);
        if (!flag) return;
        this.$nextTick(() => {
          this.$refs.addOrUpdateDialogRef.init(row, type);
        });
      },
      goDetail(row) {
        this.$nextTick(() => {
          this.$refs.addOrUpdateDialogRef.init(row, 'view');
        });
      },
      async handleDispatchOrders(row) {
        this.$nextTick(() => {
          this.$refs.addOrUpdateDialogRef.init(row, 'view', true);
        });
      },
      async handleRevocation(row) {
        await planRevocation([row.id]);
        this.$message.success('撤回成功');
        this.reload();
      },
      addSpareItems(row) {
        let data = JSON.parse(JSON.stringify(row));
        this.$refs.edit.open(data, 'plan');
      },
      async handleGenerate(row) {
        this.$refs.generateFormRef.open(row);
      },
      async handleCommand(command, row) {
        let flag = await this.permission(row);
        if (!flag) return;
        if (command === 'handleRevocation') {
          this.handleRevocation(row);
        }
        if (command === 'handleDispatchOrders') {
          this.handleDispatchOrders(row);
        }
        if (command === 'handleGenerate') {
          this.handleGenerate(row);
        }
        if (command === 'addSpareItems') {
          this.addSpareItems(row);
        }
      },
      // 单击选择
      cellClick(row) {
        this.currentRow = row;
        this.radioId = row.id;
      },
      quotation() {
        if (!this.currentRow.id) {
          this.$message.warning('请先选择计划');
          return;
        }
        this.browseShow = true;
      },
      cancelQuo() {
        this.browseShow = false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: var(--color-primary-5);
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

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