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 = {};
      this.$emit('getToDoReminder');
    },
    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>