supply-front/src/views/sales_policy/components/cancal.vue

<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button
        size="mini"
        type="primary"
        @click="()=>{
          tableData.push({
            name: '',
            number: '',
            specification: ''
          })
        }"
      >添加</el-button>
    </div>
    <zj-table :table-attributes="tableAttributes" :is-drop="true" :columns="columns" :table-data="tableData" />
    <!-- <div style="margin: 20px 0; text-align: right">
      <el-button size="mini" @click="handleQuery">查询机型</el-button>
    </div> -->
    <!-- <div style="margin-top:20px ;">
      <zj-table
        :table-attributes="{
          // ...tableAttributes, selectColumn: true
        }"
        :table-events="tableEvents"
        :is-drop="true"
        :columns="policyColumns"
        :table-data="policyList"
      />
    </div> -->
    <div style="margin: 20px 0; text-align: right">
      <el-button type="primary" size="mini" @click="onClose">取消</el-button>
      <el-button type="primary" size="mini" @click="onSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { cancalMaterialPolicy, getList } from '@/api/policy_list'
import { getMaterialListV2 } from '@/api/basic_data/material'
export default {
  props: {
    recordSelected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      tableData: [
        {
          id: '',
          name: '',
          number: '',
          specification: ''
        }
      ],
      k3List: [],
      newK3List: [],
      policyList: [],
      selectedData: [],
      tableAttributes: {},
      tableEvents: {}
    }
  },
  computed: {
    columns() {
      return [
        {
          columnAttributes: {
            label: '物料代码',
            prop: 'number'
          },
          render: (h, { column, row, index }) => {
            return (
              <div style='margin:0 10px'>
                <el-select
                  style='width:100%'
                  value={row.number}
                  onInput={e => (row.number = e)}
                  onChange={e => this.setCheckeData(e, index)}
                  filterable
                  size='mini'
                  remote
                  reserve-keyword
                  placeholder='请输入关键词'
                  remote-method={e => this.remoteMethod(e, 'number')}
                  loading={this.loading}
                >
                  {this.k3List.map(k => {
                    return <el-option key={k.id} label={k.number} value={k.id}></el-option>
                  })}
                </el-select>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '产品名称',
            prop: 'name'
          },
          render: (h, { column, row, index }) => {
            return (
              <div style='margin:0 10px'>
                <el-select
                  style='width:100%;margin:5px 0'
                  value={row.name}
                  onInput={e => (row.name = e)}
                  onChange={e => this.setCheckeData(e, index)}
                  filterable
                  size='mini'
                  remote
                  reserve-keyword
                  placeholder='请输入关键词'
                  remote-method={e => this.remoteMethod(e, 'name')}
                  loading={this.loading}
                >
                  {this.k3List.map(k => {
                    return <el-option key={k.id} label={k.name} value={k.id}></el-option>
                  })}
                </el-select>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '规格型号',
            prop: 'specification'
          },
          render: (h, { column, row, index }) => {
            return (
              <div style='margin:0 10px'>
                <el-select
                  style='width:100%'
                  value={row.specification}
                  onInput={e => (row.specification = e)}
                  onChange={e => this.setCheckeData(e, index)}
                  filterable
                  size='mini'
                  remote
                  reserve-keyword
                  placeholder='请输入规格型号'
                  remote-method={e => this.remoteMethod(e, 'specification')}
                  loading={this.loading}
                >
                  {this.k3List.map(k => {
                    return <el-option key={k.id} label={k.specification} value={k.id}></el-option>
                  })}
                </el-select>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '操作',
            prop: ''
          },
          render: (h, { column, row, index }) => {
            return (
              <div>
                <el-button type='text' size='default' onClick={() => {
                  this.tableData.splice(index, 1)
                }}>
                  删除
                </el-button>
              </div>
            )
          }
        }
      ]
    },
    policyColumns() {
      return [

        {
          columnAttributes: {
            label: '政策编码',
            prop: 'code'
          }
        },
        {
          columnAttributes: {
            label: '政策名称',
            prop: 'title'
          }
        },
        {
          columnAttributes: {
            label: '政策类型',
            prop: 'type'
          },
          render: (h, { column, row, index }) => {
            return (
              <div>
                {row.type === 'PROVISION' ? '配提' : '限量'}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '状态',
            prop: 'status'
          },
          render: (h, { column, row, index }) => {
            return (
              <div>
                {row.status ? '有效' : '无效'}
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '生效日期',
            prop: 'startTime'
          }
        },
        {
          columnAttributes: {
            label: '失效日期',
            prop: 'endTime'
          }
        },
        {
          columnAttributes: {
            label: '制单人',
            prop: 'createBy'
          }
        },
        {
          columnAttributes: {
            label: '操作',
            prop: ''
          },
          render: (h, { column, row, index }) => {
            return (
              <div>
                <el-button type='text' size='default' onClick={() => {
                  this.policyList.splice(index, 1)
                }}>
                  删除
                </el-button>
              </div>
            )
          }
        }
      ]
    }
  },
  mounted() {
    this.policyList = this.recordSelected
  },
  methods: {
    remoteMethod(query, type, name) {
      if (query !== '') {
        this.loading = true
        getMaterialListV2({
          pageNum: 1,
          pageSize: 100,
          params: [
            {
              'param': `a.${type}`,
              'compare': 'like',
              'value': query
            }
          ]
        }).then(res => {
          this.k3List = res.data.records
          this.loading = false
        })
      } else {
        this.options = []
      }
    },
    setCheckeData(e, index) {
      if (e) {
        const k3Obj = this.findData(e)
        this.tableData[index].specification = k3Obj.specification
        this.tableData[index].number = k3Obj.number
        this.tableData[index].name = k3Obj.name
        this.tableData[index].id = k3Obj.id
      }
    },
    handleQuery(number) {
      if (!number) {
        this.$errorMsg('物料不能为空')
        return
      }
      const specification = number && this.findData(number).specification
      getList({
        pageNum: 1,
        pageSize: -1,
        specification: specification
      }).then(res => {
        const data = [...this.policyList, ...res.data.records]
        var result = []
        const obj = {}
        for (let i = 0; i < data.length; i++) {
          if (!obj[data[i].id]) {
            result.push(data[i])
            obj[data[i].id] = true
          }
        }
        this.policyList = result
      })
    },
    findData(e, type) {
      return this.k3List.find(k => k.id === e)
    },
    onSubmit() {
      if (!this.tableData.length) {
        this.$errorMsg('物料不能为空')
        return
      }
      const policyIds = this.policyList.map(k => k.id).join(',')
      const materialIds = this.tableData.map(k => k.id).join(',')
      cancalMaterialPolicy({
        policyIds,
        materialIds
      }).then(res => {
        this.$successMsg('批量修改成功')
        this.onClose()
      })
    },

    onClose() {
      this.$emit('close')
    }
  }
}
</script>

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