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

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search class="seep-search" user="recycleName" @search="reload"></search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
        :pageSize="20"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit('', 'add')"
            v-if="$hasPermission('eom:aftersalesaccessoryapply:save')"
            >新建</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
            v-if="row.source == 0 && $hasPermission('eom:aftersalesaccessoryapply:update')"
            type="primary"
            :underline="false"
            @click="openEdit(row, 'edit')"
            >修改</el-link
          >
          <el-popconfirm
            class="ele-action"
            title="确定要删除当前故障吗？"
            @confirm="deleteRecycle(row)"
          >
            <template v-slot:reference>
              <el-link
                v-if="row.source == 0 && $hasPermission('eom:aftersalesaccessoryapply:delete')"
                type="danger"
                icon="el-icon-delete"
                :underline="false"
                >删除</el-link
              >
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <recycleDialog ref="recycleRef" @refresh="reload" />
  </div>
</template>

<script>
  import recycleDialog from './component/recycleDialog.vue';
  import search from './component/search.vue';
  import {
    recyclePage,
    recycleDelete
  } from '@/api/salesServiceManagement/index';
  export default {
    components: {
      search,
      recycleDialog
    },
    data() {
      return {
        // 加载状态
        loading: 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: 'orderWorkCode',
            label: '工单编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'demandCode',
            label: '售后需求编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            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: '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: 'recycleDeptName',
            label: '回收部门',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'recycleName',
            label: '回收人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            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: {
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        return recyclePage({ pageNum: page, size: limit, ...where });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      openEdit(row, type) {
        this.$refs.recycleRef.init(row, type);
      },
      deleteRecycle(row) {
        recycleDelete([row.id]).then((res) => {
          if (res) {
            this.$message.success('操作成功!');
            this.reload();
          }
        });
      }
    }
  };
</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>