supply-front/src/views/sales_control/components/WarehouseForm.vue

<template>
  <div>
    <el-page-header @back="$parent.pageType = 0" content="新增" style="padding: 20px 20px 0 20px"></el-page-header>
    <warehousing-header ref="header" />
    <sales-table :dataList="dataList" :column="column" isOperation isSelection @handleSelection="handleSelection">
      <template #bts>
        <div>
          <el-button type="primary" size="mini" @click="dialogVisible = true">添加</el-button>
          <el-button type="danger" size="mini" @click="delChange">删除</el-button>
        </div>
      </template>
      <template #events>
        <div>
          <el-button type="primary" size="mini" @click="handelSubmit">提交</el-button>
          <el-button size="mini" @click="onReset">重置</el-button>
        </div>
      </template>
      <template v-slot:custom="{ item: { row, $index } }">
        <el-radio :label="1" v-model="row.flag">增加</el-radio>
        <el-radio :label="0" v-model="row.flag">减少</el-radio>
      </template>
      <template v-slot:operation="{ item: { row, $index } }">
        <el-popconfirm style="margin-left: 10px" title="删除？" @onConfirm="handleDel(row, $index)">
          <el-button slot="reference" type="text" size="mini">删除</el-button>
        </el-popconfirm>
      </template>
    </sales-table>
    <sales-dialog
      ref="dia"
      :dialogVisible="dialogVisible"
      :customerNumber="customerNumber"
      :func="getDialogList"
      @confirm="confirm"
    />
  </div>
</template>

<script>
import SalesDialog from '@/components/SalesDialog/SalesDialog'
import WarehousingHeader from '@/components/WarehousingHeader/WarehousingHeader'
import SalesTable from '@/components/SalesTable/SalesTable'
import { getcustomerFrontList, addCustomerStockOrder } from '@/api/stock'
import { addFrontOrder } from '@/api/sales'

export default {
  name: 'WarehouseForm',
  components: {
    WarehousingHeader,
    SalesTable,
    SalesDialog
  },
  data() {
    return {
      dialogVisible: false,
      customerNumber: '',
      dataList: [],
      selection: [],
      flag: 1,
      column: [
        {
          prop: 'materialName',
          label: '产品名称',
          width: '180'
        },
        {
          prop: 'materialOldNumber',
          label: '物料编码',
          width: '180'
        },
        {
          prop: 'specification',
          label: '规格型号',
          width: '300'
        },
        {
          prop: 'stockQty',
          label: '库存',
          width: '180'
        },
        {
          prop: 'directFlag',
          label: '发生方向',
          width: '180',
          isCustom: true
        },
        {
          prop: 'stockChangeQty',
          label: '数量',
          width: '180',
          isInput: true
        },
        {
          prop: 'notes',
          label: '备注',
          width: '180',
          isInput: true,
          type: 'text'
        }
      ]
    }
  },
  methods: {
    onReset() {
      Object.assign(this.$data, this.$options.data())
      Object.assign(this.$refs.header.$data, this.$refs.header.$options.data())
    },
    getDialogList(p) {
      return getcustomerFrontList(...p)
    },
    confirm(selected) {
      // console.log(selected)
      this.dataList = [...this.dataList, ...JSON.parse(JSON.stringify(selected))]
      for (let i = 0; i < this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData.length; i++) {
        for (let j = 0; j < this.dataList.length; j++) {
          if (
            this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData[i].id == this.dataList[j].id ||
            this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData[i].disabled === false
          ) {
            this.$set(this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData[i], 'disabled', false)
          } else {
            this.$set(this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData[i], 'disabled', true)
          }
        }
      }
      this.$refs.header.screenForm.customerName = this.dataList[0].customerName
      this.$refs.header.screenForm.customerNumber = this.dataList[0].customerNumber
      this.customerNumber = this.dataList[0].customerNumber
      this.dialogVisible = false
      this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.$refs.tableView.clearSelection()
    },
    handleDel(item, index) {
      this.dataList.splice(index, 1)
      this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData.find(k => {
        if (k.id == item.id) {
          this.$set(k, 'disabled', true)
          return
        }
      })
      if (!this.dataList.length) {
        this.customerNumber = ''
      }
    },
    //去掉相同数据
    resArr(arr1, arr2) {
      return arr1.filter(v => arr2.every(val => val.id != v.id))
    },
    delChange() {
      if (this.dataList.length) {
        for (let i = 0; i < this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData.length; i++) {
          for (let j = 0; j < this.selection.length; j++) {
            if (
              this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData[i].id == this.selection[j].id ||
              this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData[i].disabled === true
            ) {
              // k.disabled = true
              console.log(111)
              this.$set(this.$refs.dia.$refs.pageRef.$refs.zjpage.$refs.tableEl.tableData[i], 'disabled', true)
            }
          }
        }

        this.dataList = this.resArr(this.dataList, this.selection)
      }
      if (!this.dataList.length) {
        this.customerNumber = ''
      }
    },
    handleSelection(data) {
      this.selection = data
    },
    handelSubmit() {
      for (let i = 0; i < this.dataList.length; i++) {
        this.dataList[i].id = ''
        this.dataList[i].directFlag = this.dataList[i].flag
        if (Number(this.dataList[i].stockChangeQty) < 0) {
          this.$errorMsg(`第${i + 1}产品数量有误`)
          return
        }
        if (Number(this.dataList[i].stockChangeQty) == 0 && this.dataList[i].directFlag == 0) {
          this.$errorMsg(`第${i + 1}产品数量为0时发生方向只能做增加`)
          return
        }
      }
      const params = {
        ...this.$refs.header.screenForm,
        orders: this.dataList
      }
      addCustomerStockOrder(params).then(res => {
        this.$successMsg('新增成功')
        this.$parent.pageType = 0
        this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped></style>