supply-front/src/views/supply/implement/implement_list.vue

<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :exportList="exportList"
    :optionsEvensGroup="optionsEvensGroup"
    :columnParsing="columnParsing"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
  >
    <div slot="moreSearch">
      <el-radio-group @change="changeType" size="mini" v-model="radioType">
        <el-radio-button label="政策零售订单"></el-radio-button>
        <el-radio-button label="零售订单"></el-radio-button>
        <el-radio-button label="家用工程订单"></el-radio-button>
        <el-radio-button label="商用工程订单"></el-radio-button>
      </el-radio-group>
      <br /><br />
    </div>
    <Popu v-if="isShowDisplaceDetail">
      <DisplaceDetail :listItem="queryItem" @backListFormDetail="backList" />
    </Popu>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import Popu from '@/components/template/popu.vue'

import {
  getList,
  retailExecRetailV2,
  retailExecRetailV2Export,
  retailExecPolicyListV2,
  retailExecPolicyListV2Export,
  retailExecEnginListV2,
  retailExecEnginListV2Export
} from '@/api/supply/implement'
import { getCategoryList } from '@/api/common'
import DisplaceDetail from '@/views/supply/implement/components/displace_detail'
import { getNoRebateWalletList } from '@/api/policy_list'

let that
export default {
  components: {
    DisplaceDetail,
    TemplatePage,
    Popu
  },
  filters: {
    statusFilter(val) {
      if (that.statusList.length) {
        let obj = that.statusList.find(o => o.value == val)
        return obj ? obj.label : ''
      }
      return ''
    }
  },
  data() {
    return {
      radioType: '政策零售订单',
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],

      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        status: '2',
        goodsCode: '',
        saleNum: '',
        dealer: '',
        goodsName: '',
        model: '',
        date: [],
        serviceName: '',
        itemServiceName: '',
        newServiceName: '',
        enginName: '',
        loginNum: '',
        k3CategoryNumber: [],
        policyCode: '',
        policyRemark: '',
        isOver: '',
        walletIds1: [],
        orderDate: []
      },
      categoryList: [],
      statusList: [
        { label: '政策零售订单', value: '2' },
        { label: '零售订单', value: '1' },
        { label: '家用工程订单', value: 'HOME' },
        { label: '商用工程订单', value: 'TRADE' }
      ],
      isCollapse: true,
      queryItem: {},
      isShowDisplaceDetail: false,
      NoRebateWalletList: []
    }
  },

  computed: {
    exParams() {
      return {
        type: this.screenForm.status,
        materialOldNumber: this.screenForm.goodsCode,
        id: this.screenForm.saleNum,
        customerName: this.screenForm.dealer,
        materialName: this.screenForm.goodsName,
        specification: this.screenForm.model,
        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
        orderStartTime: this.screenForm.orderDate ? this.screenForm.orderDate[0] : '',
        orderEndTime: this.screenForm.orderDate ? this.screenForm.orderDate[1] : '',
        serviceName: this.screenForm.serviceName,
        newServiceName: this.screenForm.newServiceName,
        itemServiceName: this.screenForm.itemServiceName,
        projectName: this.screenForm.enginName,
        enginRecordNo: this.screenForm.loginNum,
        k3CategoryNumber: this.screenForm.k3CategoryNumber.join(','),
        policyCode: this.screenForm.policyCode,
        policyRemark: this.screenForm.policyRemark,
        isOver: this.screenForm.isOver,
        walletIds1: this.screenForm.walletIds1.join(','),
        isDisplaceOrder: this.screenForm.isDisplaceOrder
      }
    }
  },

  beforeCreate() {
    that = this
  },

  created() {
    // this.getList()
    // this.getCategoryList()
  },

  methods: {
    changeType() {
      this.$refs.pageRef.refreshList()
    },
    // 列表请求函数
    getList(...p) {
      this.$refs.pageRef.showTable = false
      if (this.radioType === '政策零售订单') {
        return retailExecPolicyListV2(...p)
      }
      if (this.radioType === '零售订单') {
        return retailExecRetailV2(...p)
      }
      if (this.radioType === '家用工程订单') {
        let params = {
          ...p[0],
          enginOrderType: 'HOME'
        }
        return retailExecEnginListV2(params)
      }
      if (this.radioType === '商用工程订单') {
        let params = {
          ...p[0],
          enginOrderType: 'TRADE'
        }
        return retailExecEnginListV2(params)
      }
    },

    // 列表导出函数
    exportList(...p) {
      if (this.radioType === '政策零售订单') {
        return retailExecPolicyListV2Export()
      }
      if (this.radioType === '零售订单') {
        return retailExecRetailV2Export()
      }
      if (this.radioType === '家用工程订单') {
        let params = {
          ...p[0],
          enginOrderType: 'HOME'
        }
        return retailExecEnginListV2Export(params)
      }
      if (this.radioType === '商用工程订单') {
        let params = {
          ...p[0],
          enginOrderType: 'TRADE'
        }
        return retailExecEnginListV2Export(params)
      }
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.colName === 'is_displace_order') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div
              onClick={() => {
                console.log(11111)
                this.openDisplaceDetail(row)
              }}
              style="display: flex;justify-content: center;align-items: center;"
            >
              {row.isDisplaceOrder === '是' ? (
                <el-tag size="mini" type="warning">
                  置换
                </el-tag>
              ) : null}
            </div>
          )
        }
      }
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            <el-button size="mini" type="text" onClick={async () => {}}>
              查看
            </el-button>
          </div>
        )
      }
    },

    // 查询列表
    // getList() {
    //   this.listLoading = true

    //   let params = {
    //     pageNum: this.currentPage,
    //     pageSize: this.pageSize,
    //     type: this.screenForm.status,
    //     materialOldNumber: this.screenForm.goodsCode,
    //     id: this.screenForm.saleNum,
    //     customerName: this.screenForm.dealer,
    //     materialName: this.screenForm.goodsName,
    //     specification: this.screenForm.model,
    //     startTime: this.screenForm.date ? this.screenForm.date[0] : '',
    //     endTime: this.screenForm.date ? this.screenForm.date[1] : '',
    //     orderStartTime: this.screenForm.orderDate ? this.screenForm.orderDate[0] : '',
    //     orderEndTime: this.screenForm.orderDate ? this.screenForm.orderDate[1] : '',
    //     serviceName: this.screenForm.serviceName,
    //     newServiceName: this.screenForm.newServiceName,
    //     itemServiceName: this.screenForm.itemServiceName,
    //     projectName: this.screenForm.enginName,
    //     enginRecordNo: this.screenForm.loginNum,
    //     k3CategoryNumber: this.screenForm.k3CategoryNumber.join(','),
    //     policyCode: this.screenForm.policyCode,
    //     policyRemark: this.screenForm.policyRemark,
    //     isOver: this.screenForm.isOver,
    //     walletIds1: this.screenForm.walletIds1.join(','),
    //     isDisplaceOrder: this.screenForm.isDisplaceOrder
    //   }
    //   getList(params).then(res => {
    //     res.data.records.forEach(item => {
    //       item.sums1 = ['refundableQty', 'qty', 'retiredQty', 'hasSendQty', 'directTransferQty', 'refundProductQty']
    //       item.sums2 = ['payAmount', 'payRebateAmount', 'hasSendAmount', 'retiredAmount', 'refundProductAmount']
    //     })
    //     this.dataList = res.data.records
    //     this.listTotal = res.data.total
    //     this.listLoading = false
    //   })
    // },

    // 获取存货类别列表
    getCategoryList() {
      getCategoryList({
        pageNum: 1,
        pageSize: -1,
        keyword: ''
      }).then(res => {
        this.categoryList = res.data.records
      })
      getNoRebateWalletList({
        walletName: ''
      }).then(res => {
        console.log(res)
        this.NoRebateWalletList = res.data
      })
    },

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

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

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

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

    // 置换详情
    openDisplaceDetail(item) {
      this.queryItem = item
      this.isShowDisplaceDetail = true
    },

    backList() {
      this.queryItem = {}
      this.isShowDisplaceDetail = false
    }
  }
}
</script>

<style lang="scss" scoped></style>