logistics-fe-iems-winlink/src/views/excel/ExcelImportTaskList.vue

<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div v-has="'excel:import:query'" class="table-page-search-wrapper">
      <w-form @keyup.enter.native="searchQuery" layout="inline">
        <w-row :gutter="10">
          <w-col :xl="5" :lg="5" :md="8" :sm="24">
            <w-date v-model="createTime" @change="
              () => {
                queryParam.createTime_begin = createTime[0]
                queryParam.createTime_end = createTime[1]
              }
            " start-placeholder="创建开始时间" end-placeholder="创建结束时间" date-type="daterange" />
          </w-col>
          <w-col :xl="5" :lg="5" :md="8" :sm="24">
            <j-dict-select-tag v-model="queryParam.status" placeholder="请选择状态" dict-code="JobStatus" />
          </w-col>
          <template v-if="toggleSearchStatus">
            <w-col :xl="5" :lg="5" :md="8" :sm="24">
              <w-input v-model="queryParam.userId" placeholder="请输入用户ID" />
            </w-col>
            <w-col :xl="5" :lg="5" :md="8" :sm="24">
              <w-input v-model="queryParam.compNo" placeholder="请输入企业编码" />
            </w-col>
            <w-col :xl="5" :lg="5" :md="8" :sm="24">
              <w-input v-model="queryParam.modelCode" placeholder="请输入模板类型" />
            </w-col>
          </template>
          <w-col :xl="5" :lg="5" :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <w-button @click="searchQuery" type="primary" icon="search">查询</w-button>
              <w-button @click="searchReset2" type="primary" style="margin-left: 8px">重置</w-button>
              <a class="unfold-fold-status" @click="handleToggleSearch">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </w-col>
        </w-row>
      </w-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table ref="table" :id="refColumnsKey" :columns="refColumns" :data-source="dataSource"
        :scroll="getTableScroll(1200)" :pagination="ipagination" :custom-header-row="customHeaderRow" :loading="loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" size="middle"
        @change="handleTableChange" bordered :components="resizableComponents" row-key="id"
        class="j-table-force-nowrap">
        <template slot="statusScoped" slot-scope="text, record">
          <span :style="colorShow(record.status)" v-html="text"></span>
        </template>

        <span slot="fileDownload" slot-scope="text, record">
          <div v-has="'excel:import:down'">
            <a @click="downloadExcelFile(record, 1)">下载</a>
          </div>
        </span>
        <span slot="errorFileDownload" slot-scope="text, record">
          <div v-has="'excel:import:down'">
            <a v-if="record.status === 3 && !(record.fileError === null || record.fileError === '')"
              @click="downloadExcelFile(record, 2)">下载</a>
          </div>
        </span>

        <span slot="action" slot-scope="text, record">
          <!-- <a @click="handleEdit(record)">编辑</a> -->
          <a @click="handleDetail(record)">详情</a>
        </span>

        <!-- 字符串超长截取省略号显示-->
        <span slot="remark" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span>

        <span slot="runtime" slot-scope="text">
          <a> {{ text }} </a>
        </span>
      </a-table>
    </div>
    <w-table-columns-win ref="choose" @columnsChange="columnsChange" @resetColumns="resetColumns" :columns="columns" />
    <excel-import-task-modal ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>

import { JeecgListMixin, WGridResizeByCssMixin } from '@/mixins/JeecgListMixin'
import { mixinDevice } from '@/utils/mixin'
import ExcelImportTaskModal from './modules/ExcelImportTaskModal'

export default {
  name: 'ExcelImportTaskList',
  mixins: [JeecgListMixin, mixinDevice, WGridResizeByCssMixin],
  components: {
    ExcelImportTaskModal,
  },
  data() {
    return {
      description: 'EXCEL导入任务管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime',
          width: 130,
          sorter: true,
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status_dictText',
          scopedSlots: { customRender: 'statusScoped' },
          width: 80,
          sorter: true,
        },
        {
          title: '模板名称',
          align: 'center',
          dataIndex: 'modelName',
          width: 130,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '模板编码',
          align: 'center',
          dataIndex: 'modelCode',
          width: 220,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '模板类型',
          align: 'center',
          dataIndex: 'modelType',
          width: 220,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'startTime',
          width: 150,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '结束时间',
          align: 'center',
          dataIndex: 'endTime',
          width: 150,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '耗时',
          align: 'center',
          dataIndex: 'runtime',
          scopedSlots: { customRender: 'runtime' },
          width: 100,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '用户ID',
          align: 'center',
          dataIndex: 'userId',
          width: 80,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '用户名',
          align: 'center',
          dataIndex: 'userName',
          width: 80,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '企业编码',
          align: 'center',
          dataIndex: 'compNo',
          width: 100,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '企业名',
          align: 'center',
          dataIndex: 'compName',
          width: 200,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '文件名',
          align: 'center',
          dataIndex: 'fileName',
          width: 200,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '数据文件',
          align: 'center',
          dataIndex: 'filePath',
          scopedSlots: { customRender: 'fileDownload' },
          width: 120,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '错误文件',
          align: 'center',
          dataIndex: 'fileError',
          scopedSlots: { customRender: 'errorFileDownload' },
          width: 120,
          ellipsis: true,
          sorter: true,
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' },
          width: 120,
          ellipsis: true,
        },
      ],
      url: {
        list: '/sys/excel/import/task/list',
        delete: '/sys/excel/import/task/delete',
        deleteBatch: '/sys/excel/import/task/deleteBatch',
        exportXlsUrl: '/sys/excel/import/task/exportXls',
        importExcelUrl: '/sys/excel/import/task/importExcel',
        downloadUrl: '/sys/excel/download',
      },
      dictOptions: {},
      superFieldList: [],
      createTime: [],
    }
  },
  created() {
    this.getSuperFieldList()
  },
  methods: {
    initDictConfig() { },
    getSuperFieldList() {
      const fieldList = []
      fieldList.push({ type: 'datetime', value: 'createTime', text: '创建日期' })
      fieldList.push({ type: 'string', value: 'status', text: '状态', dictCode: '' })
      fieldList.push({ type: 'datetime', value: 'startTime', text: '开始时间' })
      fieldList.push({ type: 'datetime', value: 'endTime', text: '结束时间' })
      fieldList.push({ type: 'string', value: 'userId', text: '用户ID', dictCode: '' })
      fieldList.push({ type: 'string', value: 'userName', text: '用户名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'compNo', text: '企业编码', dictCode: '' })
      fieldList.push({ type: 'string', value: 'compName', text: '企业名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'modelCode', text: '模板类型', dictCode: '' })
      fieldList.push({ type: 'string', value: 'filePath', text: '文件路径', dictCode: '' })
      fieldList.push({ type: 'string', value: 'fileName', text: '上传文件名', dictCode: '' })
      fieldList.push({ type: 'string', value: 'fileError', text: '错误文件路径', dictCode: '' })
      fieldList.push({ type: 'string', value: 'remark', text: '备注', dictCode: '' })
      this.superFieldList = fieldList
    },
    searchReset2() {
      this.createTime = []
      this.searchReset()
    },
  },
}
</script>