supply-front/src/views/sales/sales_management/components/customer_sales_form.vue

<template>
  <div>
    <el-page-header @back="$parent.pageType=0" content="新增" style=" padding: 20px 20px 0 20px;"></el-page-header>
    <sales-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">重置</el-button>
        </div>
      </template>
      <template v-slot:custom="{item:{row,$index}}">
        <el-radio label="1" v-model="row.flag">增加</el-radio>
        <el-radio label="-1" 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 :dialogVisible="dialogVisible" :customerNumber="customerNumber" :func="getDialogList" @confirm="confirm" />
  </div>
</template>

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

export default {
  name: 'WarehouseForm',
  components: {
    SalesHeader,
    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: 'stockLockQty',
          label: '库存',
          width: '180'
        },
        {
          prop: 'directFlag',
          label: '发生方向',
          width: '180',
          isCustom: true

        },
        {
          prop: 'stockChangeQty',
          label: '数量',
          width: '180',
          isInput: true
        },
        {
          prop: 'remark',
          label: '备注',
          width: '180',
          isInput: true

        }
      ]
    }
  },
  methods: {

    getDialogList(p) {
      return getcustomerFrontList(...p)
    },
    confirm(selected) {
      // console.log(selected)
      this.dataList = selected
      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

    },
    handleDel(item, index) {
      this.dataList.splice(index, 1)
    },
    delChange() {
      this.dataList.forEach((k, i) => {
        this.selection.forEach((l, e) => {
          if (k.id === l.id) {
            this.dataList.splice(i, 1)
            this.selection.splice(e, 1)
          }
        })
      })
    },
    handleSelection(data) {
      this.selection = data
    },
    handelSubmit() {
      this.dataList.forEach(k => {
        k.id = ''
        k.directFlag = k.flag
      })
      const params = {
        ...this.$refs.header.screenForm,
        orders: this.dataList
      }
      addFrontOrder(params).then(res => {
        this.$successMsg('新增成功')
        this.$parent.pageType = 0
        this.$forceUpdate()
      })
    },

  }
}
</script>

<style scoped>

</style>