supply-front/src/views/barcodeVerification/code_list.vue

<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div class="screen-container">
      <div class="top clearfix">
        <div class="title fl">条件筛选</div>
        <div class="fr">
          <el-button size="small" type="primary" @click="isOpen = !isOpen"
            >{{ isOpen ? '收起' : '展开'
            }}<i class="el-icon--right" :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i
          ></el-button>
          <el-button size="small" @click="resetScreenForm">清空</el-button>
          <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
        </div>
      </div>
      <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="条形码" prop="code">
              <el-input v-model="screenForm.code" placeholder="请输入条形码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="订单号" prop="orderNo">
              <el-input v-model="screenForm.orderNo" placeholder="请输入订单号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="销售公司" prop="salesCompany">
              <el-input v-model="screenForm.salesCompany" placeholder="请输入销售公司"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="收货地址" prop="address">
              <el-input v-model="screenForm.address" placeholder="请输入收货地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" v-if="isOpen">
            <el-form-item label="扫描时间" prop="scanDate">
              <el-date-picker
                v-model="screenForm.scanDate"
                type="daterange"
                range-separator="至"
                style="width: 100%"
                ref="scanDate"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" v-if="isOpen">
            <el-form-item label="产品名称" prop="goodsName">
              <el-input v-model="screenForm.goodsName" placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" v-if="isOpen">
            <el-form-item label="设备仓库" prop="warehouse">
              <el-input v-model="screenForm.warehouse" placeholder="请输入设备仓库"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" v-if="isOpen">
            <el-form-item label="网点信息" prop="website">
              <el-input v-model="screenForm.website" placeholder="请输入网点信息"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" v-if="isOpen">
            <el-form-item label="服务人员" prop="worker">
              <el-input v-model="screenForm.worker" placeholder="请输入服务人员"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6" v-if="isOpen">
            <el-form-item label="核验时间" prop="checkDate">
              <el-date-picker
                v-model="screenForm.checkDate"
                type="daterange"
                range-separator="至"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fr">
          <el-button size="small" type="primary" @click="handleExport" v-if="checkBtnRole('export')"
            >导出数据</el-button
          >
        </div>
      </div>

      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column
            align="center"
            label="条形码"
            prop="barCode"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="产品名称"
            prop="productName"
            min-width="220"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" label="出库采集时间" prop="deliveryTime" min-width="160"></el-table-column>
          <el-table-column align="center" label="设备仓库" prop="warehouse" min-width="100"></el-table-column>
          <el-table-column
            align="center"
            label="收货地址"
            prop="address"
            min-width="220"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" label="发货日期" prop="consignerTime" min-width="160"></el-table-column>
          <el-table-column
            align="center"
            label="订单号"
            prop="orderNumber"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" label="最新核验状态" prop="verificationStatus" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.verificationStatus | CODE_CHECK_STATUS_FILTER }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="最新核验时间"
            prop="verificationTime"
            min-width="160"
          ></el-table-column>
          <el-table-column align="center" label="核验人员" prop="workerNumber" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope"> {{ scope.row.workerName }}（{{ scope.row.workerNumber }}） </template>
          </el-table-column>
          <el-table-column align="center" label="核验人员手机号" prop="workerPhone" min-width="130"></el-table-column>
          <el-table-column
            align="center"
            label="所属网点名称"
            prop="websitName"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="所属网点编号"
            prop="websitNumber"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" label="上传人" prop="createByNumber" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope"> {{ scope.row.createBy }}（{{ scope.row.createByNumber }}） </template>
          </el-table-column>
          <el-table-column align="center" label="上传时间" prop="createTime" min-width="160"></el-table-column>
        </el-table>
      </div>

      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeList } from '@/api/barcodeVerification'
import { downloadFiles, handleImport } from '@/utils/util'

export default {
  data() {
    return {
      isOpen: false, // 是否展开条件筛选
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      screenForm: {
        // 筛选表单数据
        code: '',
        orderNo: '',
        salesCompany: '',
        address: '',
        scanDate: [],
        goodsName: '',
        warehouse: '',
        website: '',
        worker: '',
        checkDate: []
      },
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: time => {
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },
      importLoading_wh: false, // 导入加载loading
      importFileList_wh: [], // 导入列表
      importLoading_ss: false, // 导入加载loading
      importFileList_ss: [], // 导入列表
      importLoading_ls: false, // 导入加载loading
      importFileList_ls: [], // 导入列表
      importLoading_tm: false, // 导入加载loading
      importFileList_tm: [], // 导入列表
      importLoading_lb: false, // 导入加载loading
      importFileList_lb: [] // 导入列表
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('settlement_user'))
    }
  },
  created() {
    // this.getCodeList();
  },
  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      return true
      let btnRole = this.$route.meta.roles
      if (!btnRole) {
        return true
      }
      let index = btnRole.indexOf(value)
      return index >= 0 ? true : false
    },

    // 获取列表
    getCodeList() {
      this.listLoading = true
      let params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        barCode: this.screenForm.code,
        orderNumber: this.screenForm.orderNo,
        salesCompany: this.screenForm.salesCompany,
        address: this.screenForm.address,
        startTime:
          this.screenForm.scanDate && this.screenForm.scanDate.length ? this.screenForm.scanDate[0] + ' 00:00:00' : '',
        endTime:
          this.screenForm.scanDate && this.screenForm.scanDate.length ? this.screenForm.scanDate[1] + ' 23:59:59' : '',
        productName: this.screenForm.goodsName,
        warehouse: this.screenForm.warehouse,
        websitNumber: this.screenForm.website,
        workerName: this.screenForm.worker,
        verificationStartTime:
          this.screenForm.checkDate && this.screenForm.checkDate.length
            ? this.screenForm.checkDate[0] + ' 00:00:00'
            : '',
        verificationEndTime:
          this.screenForm.checkDate && this.screenForm.checkDate.length
            ? this.screenForm.checkDate[1] + ' 23:59:59'
            : ''
      }
      getCodeList(params).then(res => {
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getCodeList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getCodeList()
    },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getCodeList()
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getCodeList()
    },

    // 导出
    handleExport() {
      if (!this.screenForm.scanDate || this.screenForm.scanDate.length < 1) {
        this.isOpen = true
        return this.$errorMsg('请选择扫描时间')
      }
      let screenData = {
        barCode: this.screenForm.code,
        orderNumber: this.screenForm.orderNo,
        salesCompany: this.screenForm.salesCompany,
        address: this.screenForm.address,
        startTime:
          this.screenForm.scanDate && this.screenForm.scanDate.length ? this.screenForm.scanDate[0] + ' 00:00:00' : '',
        endTime:
          this.screenForm.scanDate && this.screenForm.scanDate.length ? this.screenForm.scanDate[1] + ' 23:59:59' : '',
        productName: this.screenForm.goodsName,
        warehouse: this.screenForm.warehouse,
        websitNumber: this.screenForm.website,
        workerName: this.screenForm.worker,
        verificationStartTime:
          this.screenForm.checkDate && this.screenForm.checkDate.length
            ? this.screenForm.checkDate[0] + ' 00:00:00'
            : '',
        verificationEndTime:
          this.screenForm.checkDate && this.screenForm.checkDate.length
            ? this.screenForm.checkDate[1] + ' 23:59:59'
            : ''
      }
      downloadFiles('externalCode/equipment/export', screenData)
    },

    // 导入
    async handleImport_wh(param) {
      this.importLoading_wh = true
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)
      let result = await handleImport('java/code/equipmentCode/importWanHao', formData)
      this.importLoading_wh = false
      this.importFileList_wh = []
      this.$importMsg(result)
      if (result.code == 200) {
        this.getCodeList()
      }
    },

    // 导入
    async handleImport_ss(param) {
      this.importLoading_ss = true
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)
      let result = await handleImport('java/code/equipmentCode/importSanShui', formData)
      this.importLoading_ss = false
      this.importFileList_ss = []
      this.$importMsg(result)
      if (result.code == 200) {
        this.getCodeList()
      }
    },

    // 导入
    async handleImport_ls(param) {
      this.importLoading_ls = true
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)
      let result = await handleImport('java/code/equipmentCode/import', formData)
      this.importLoading_ls = false
      this.importFileList_ls = []
      this.$importMsg(result)
      if (result.code == 200) {
        this.getCodeList()
      }
    },

    // 导入
    async handleImport_tm(param) {
      this.importLoading_tm = true
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)
      let result = await handleImport('java/code/equipmentCode/importTianMao', formData)
      this.importLoading_tm = false
      this.importFileList_tm = []
      this.$importMsg(result)
      if (result.code == 200) {
        this.getCodeList()
      }
    },

    // 导入
    async handleImport_lb(param) {
      this.importLoading_lb = true
      const file = param.file
      const formData = new FormData()
      formData.append('file', file)
      let result = await handleImport('java/code/equipmentCode/importLuBao', formData)
      this.importLoading_lb = false
      this.importFileList_lb = []
      this.$importMsg(result)
      if (result.code == 200) {
        this.getCodeList()
      }
    },

    // 下载导入模版
    handleDownload_wh() {
      downloadFiles('java/code/equipmentCode/wanhaoDownload')
    },

    // 下载导入模版
    handleDownload_ss() {
      downloadFiles('java/code/equipmentCode/sanshuiDownload')
    },

    // 下载导入模版
    handleDownload_ls() {
      downloadFiles('java/code/equipmentCode/longshangDownload')
    },

    // 下载导入模版
    handleDownload_tm() {
      downloadFiles('java/code/equipmentCode/tianMaoDownload')
    },

    // 下载导入模版
    handleDownload_lb() {
      downloadFiles('java/code/equipmentCode/luBaoDownload')
    }
  }
}
</script>