supply-front/src/views/supply/reserve/reserve_list.vue

<template>
  <template-page
    ref="pageRef"
    :getList="getList"
    :operation="operation()"
    :optionsEvensGroup="optionsEvensGroup"
    :exportList="exportList"
    :columnParsing="columnParsing"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
  >
    <Popu v-if="isShowForm || isShowDetail">
      <ReserveDetail :listItem="queryItem" v-if="isShowDetail" @backListFormDetail="backList" />
      <ReserveForm :listItem="queryItem" v-if="isShowForm" @backListFormDetail="backList" />
    </Popu>
  </template-page>
</template>

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

import {
  getList,
  closeData,
  getWarehouseList,
  reserveListV2,
  reserveListV2Export,
  reserveImportData,
  reserveImportDataExcel
} from '@/api/supply/reserve'
import ReserveDetail from '@/views/supply/reserve/components/reserve_detail'
import ReserveForm from '@/views/supply/reserve/components/reserve_form'

let that
export default {
  mixins: [import_mixin],
  components: {
    ReserveDetail,
    ReserveForm,
    TemplatePage,
    Popu
  },
  filters: {
    statusFilter(val) {
      const obj = that.statusList.find(o => o.value === val)
      return obj ? obj.label : ''
    }
  },
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            {
              name: '新增',
              click: () => {
                this.toForm()
              },
              isRole: this.$checkBtnRole('add', this.$route.meta.roles)
            }
          ]
        ],
        [
          [
            {
              name: '下载模板',
              click: () => {
                reserveImportDataExcel({}, `${this.$route.meta.title}`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              },
              isRole: !this.isDealer
            }
          ]
        ],
        [
          [
            {
              name: '',
              render: this.importButton(reserveImportData),
              isRole: !this.isDealer
            }
          ]
        ]
      ],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],

      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        goodsName: '',
        goodsNum: '',
        orderNum: '',
        jxsName: '',
        jxsNum: '',
        date: [],
        createMan: '',
        updateMan: '',
        saleNum: '',
        model: '',
        status: '',
        warehouse: ''
      },
      statusList: [
        { label: '执行中', value: 1 },
        { label: '已关闭', value: 0 }
      ],
      warehouseList: [],
      isCollapse: true,
      queryItem: {},
      isShowDetail: false,
      isShowForm: false
    }
  },

  computed: {
    exParams() {
      return {
        materialName: this.screenForm.goodsName,
        materialCode: this.screenForm.goodsNum,
        customerNumber: this.screenForm.jxsNum,
        customerName: this.screenForm.jxsName,
        startTime: this.screenForm.date ? this.screenForm.date[0] : '',
        endTime: this.screenForm.date ? this.screenForm.date[1] : '',
        createBy: this.screenForm.createMan,
        updateBy: this.screenForm.updateMan,
        id: this.screenForm.orderNum,
        orderId: this.screenForm.saleNum,
        specification: this.screenForm.model,
        status: this.screenForm.status,
        correspondId: this.screenForm.warehouse
      }
    },
    isDealer() {
      return JSON.parse(localStorage.getItem('supply_user')).isCustomer
    }
  },

  beforeCreate() {
    that = this
  },

  created() {
    // this.getWarehouseList()
    // this.getList()
    // console.log(this.$route.meta.roles)
  },

  methods: {
    // 列表请求函数
    getList: reserveListV2,
    // 列表导出函数
    exportList: reserveListV2Export,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      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 () => {
                this.toDetail(row)
              }}
            >
              详情
            </el-button>

            {this.$checkBtnRole('edit', this.$route.meta.roles) && !row.printNum ? (
              <el-button
                size="mini"
                type="text"
                onClick={async () => {
                  this.toForm(row)
                }}
              >
                编辑
              </el-button>
            ) : (
              ''
            )}

            {this.$checkBtnRole('examine', this.$route.meta.roles) && row.status === 1 ? (
              <el-popconfirm
                onOnConfirm={async () => {
                  this.handleClose(row.itemId)
                }}
                title="是否确定需要关闭该项内容?"
              >
                <el-button slot="reference" size="mini" type="text">
                  关闭
                </el-button>
              </el-popconfirm>
            ) : (
              ''
            )}
          </div>
        )
      }
    },

    // 获取仓库列表
    getWarehouseList() {
      getWarehouseList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.warehouseList = res.data.records
      })
    },

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

    //   let params = {
    //     pageNum: this.currentPage,
    //     pageSize: this.pageSize,
    //     materialName: this.screenForm.goodsName,
    //     materialCode: this.screenForm.goodsNum,
    //     customerNumber: this.screenForm.jxsNum,
    //     customerName: this.screenForm.jxsName,
    //     startTime: this.screenForm.date ? this.screenForm.date[0] : '',
    //     endTime: this.screenForm.date ? this.screenForm.date[1] : '',
    //     createBy: this.screenForm.createMan,
    //     updateBy: this.screenForm.updateMan,
    //     id: this.screenForm.orderNum,
    //     orderId: this.screenForm.saleNum,
    //     specification: this.screenForm.model,
    //     status: this.screenForm.status,
    //     correspondId: this.screenForm.warehouse
    //   }
    //   getList(params).then(res => {
    //     res.data.records.forEach(item => {
    //       item.sums1 = ['oldNum', 'reservedNum', 'qty']
    //       item.sums2 = []
    //     })
    //     this.dataList = res.data.records
    //     this.listTotal = res.data.total
    //     this.listLoading = false
    //   })
    // },

    // 提交筛选表单
    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()
    },

    // 进入表单
    toForm(item) {
      this.queryItem = item
      this.isShowForm = true
    },

    // 进入详情
    toDetail(item) {
      this.queryItem = item
      this.isShowDetail = true
    },

    backList() {
      this.queryItem = {}
      this.isShowDetail = false
      this.isShowForm = false
      this.$refs.pageRef.refreshList()
    },

    // 关闭
    handleClose(id) {
      closeData({ itemId: id }).then(res => {
        this.$successMsg()
        // this.getList()
        this.$refs.pageRef.refreshList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.ml {
  margin-left: 10px;
}
</style>