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

<template>
  <div>
    <div>
      <h4>旧机型</h4>
      <el-divider />
      <zj-table :table-attributes="tableAttributes" :is-drop="true" :columns="oldColumns" :table-data="oldData" />
      <div style="margin: 20px 0; text-align: right">
        <el-button size="mini" @click="handleQuery">查询机型</el-button>
      </div>
    </div>
    <div>
      <h4>有效政策</h4>
      <el-divider />
      <zj-table
        :table-attributes="{
          ...tableAttributes, selectColumn: true
        }"
        :table-events="tableEvents"
        :is-drop="true"
        :columns="policyColumns"
        :table-data="policyList"
      />
    </div>
    <div>
      <h4>新机型</h4>
      <el-divider />
      <zj-table :table-attributes="tableAttributes" :is-drop="true" :columns="newColumns" :table-data="newData" />
    </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 { updateMaterialPolicy, getK3List, getList } from '@/api/policy_list'

export default {
  props: {
    recordSelected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      oldData: [
        {
          name: '',
          number: '',
          specification: '',
          price: '',
          createBy: ''
        }
      ],
      k3List: [],
      newK3List: [],
      policyList: [],
      selectedData: [],
      newData: [
        {
          name: '',
          number: '',
          specification: ''
        }
      ],
      tableAttributes: {},
      tableEvents: {
        'selection-change': this.selectionChange
      }
    }
  },
  computed: {
    oldColumns() {
      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, 'old')}
                  filterable
                  size='mini'
                  remote
                  reserve-keyword
                  placeholder='请输入关键词'
                  remote-method={e => this.remoteMethod(e, 'number', 'old')}
                  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'
          }
        },
        {
          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, 'old')}
                  filterable
                  size='mini'
                  remote
                  reserve-keyword
                  placeholder='请输入规格型号'
                  remote-method={e => this.remoteMethod(e, 'specification', 'old')}
                  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: 'createBy'
          },
          render: (h, { column, row, index }) => {
            return (
              <div style='margin:0 10px'>
                <el-input value={row.createBy}
                  onInput={e => (row.createBy = e)} placeholder='请输入制单人' size='mini' clearable ></el-input>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '操作',
            prop: ''
          },
          render: (h, { column, row, index }) => {
            return (
              <div>
                <el-button
                  type='text'
                  size='default'
                  onClick={() => {
                    this.oldData = [
                      {
                        name: '',
                        number: '',
                        specification: ''
                      }
                    ]
                  }}
                >
                  清空
                </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>
            )
          }
        }
      ]
    },
    newColumns() {
      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)}
                  filterable
                  size='mini'
                  remote
                  reserve-keyword
                  placeholder='请输入关键词'
                  remote-method={e => this.remoteMethod(e, 'number')}
                  loading={this.loading}
                >
                  {this.newK3List.map(k => {
                    return <el-option key={k.id} label={k.number} value={k.id}></el-option>
                  })}
                </el-select>
              </div>
            )
          }
        },
        {
          columnAttributes: {
            label: '产品名称',
            prop: 'name'
          }
        },
        {
          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)}
                  filterable
                  size='mini'
                  remote
                  reserve-keyword
                  placeholder='请输入规格型号'
                  remote-method={e => this.remoteMethod(e, 'specification')}
                  loading={this.loading}
                >
                  {this.newK3List.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.newData = [
                      {
                        name: '',
                        number: '',
                        specification: ''
                      }
                    ]
                  }}
                >
                  清空
                </el-button>
              </div>
            )
          }
        }
      ]
    }
  },
  mounted() {
    this.tableData = this.recordSelected
  },
  methods: {
    remoteMethod(query, type, name) {
      if (query !== '') {
        this.loading = true
        getK3List({
          pageNum: 1,
          pageSize: 100,
          number: type === 'number' ? query : '',
          oldNumber: '',
          specification: type === 'specification' ? query : ''
        }).then(res => {
          if (name) {
            this.k3List = res.data.records
          } else {
            this.newK3List = res.data.records
          }
          this.loading = false
        })
      } else {
        this.options = []
      }
    },
    setCheckeData(e, type) {
      if (type) {
        this.oldData[0].specification = e
        this.oldData[0].number = e
        if (e) {
          const k3Obj = this.findData(e, type)
          this.oldData[0].name = k3Obj.name
        }
      } else {
        this.newData[0].specification = e
        this.newData[0].number = e
        if (e) {
          const k3Obj = this.findData(e)
          this.newData[0].name = k3Obj.name
        }
      }
    },
    handleQuery() {
      const number = this.oldData[0].number
      const createBy = this.oldData[0].createBy

      if (!number && !createBy) {
        this.$errorMsg('旧机型内容不能为空')
        return
      }
      this.selectedData = []
      const specification = number && this.findData(number, 'old').specification

      getList({
        pageNum: 1,
        pageSize: -1,
        specification: specification,
        createBy
      }).then(res => {
        this.policyList = res.data.records
      })
    },
    selectionChange(data) {
      this.selectedData = data
    },
    onSubmit() {
      if (!this.selectedData.length) {
        this.$errorMsg('请选择有效政策')
        return
      }
      const policyIds = this.selectedData.map(k => k.id).join(',')
      const newMaterialId = this.newData[0].number
      const oldMaterialId = this.oldData[0].number
      if (!newMaterialId) {
        this.$errorMsg('新机型内容不能为空')
        return
      }
      updateMaterialPolicy({
        policyIds,
        newMaterialId,
        oldMaterialId
      }).then(res => {
        this.$successMsg('批量修改成功')
        this.onClose()
      })
    },
    findData(e, type) {
      if (type) {
        return this.k3List.find(k => k.id === e)
      } else {
        return this.newK3List.find(k => k.id === e)
      }
    },
    onClose() {
      this.$emit('close')
    }
  }
}
</script>

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