hitch-sb-antd/src/views/purchase/purchase-order-page/modules/MergeModal.vue

<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <row-list :col="1" v-show="false">
        <row-item>
          <a-form-item>
            <a-input v-decorator="['id']" type="hidden"/>
          </a-form-item>
        </row-item>
      </row-list>
      <row-list :col="1">
        <row-item>
          <a-form-item
            label="合并采购单名称"
            :labelCol="BaseTool.Constant.labelCol2"
            :wrapperCol="BaseTool.Constant.wrapperCol2">
            <a-input v-decorator="['title',{rules: [{required: true, message: '合并采购单名称不能为空'}]}]" />
          </a-form-item>
        </row-item>
      </row-list>
    </a-form>
    <a-table
      bordered
      :data-source="data"
      :columns="columns"
      tableLayout="auto"
      rowKey="id"
      :scroll="{ x: 1500 }"
    >
      <template #status="text">
        <badge :text="BaseTool.Object.getField(statusMap,text)" :status="DictCache.COLOR.LONG_YAN_PURCHASE_ORDER_STATUS[text]"/>
      </template>
      <span slot="action" slot-scope="record">
        <template>
          <a-popconfirm title="是否要删除该条数据？" @confirm="handleDelOne(record)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>
    </a-table>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { mergePurchase, updatamergePurchase } from '@/api/purchase/purchase-order'
export default {
  data () {
    return {
      visible: false,
      title: '',
      form: this.$form.createForm(this),
      confirmLoading: false,
      data: [],
      cptcodeMap: {},
      cbustypeMap: {},
      typeMap: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          checked: true,
          width: 70,
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '计划类型',
          dataIndex: 'type',
          checked: true,
          width: 100,
          customRender: (text, record, index) => {
            return this.BaseTool.Table.getMapText(this.typeMap, text)
          }
        },
        {
          title: '采购类型',
          dataIndex: 'cptcode',
          checked: true,
          width: 130,
          customRender: (text, record, index) => {
            return this.BaseTool.Table.getMapText(this.cptcodeMap, text)
          }
        },
        {
          title: '业务类型',
          dataIndex: 'cbustype',
          checked: true,
          width: 150,
          customRender: (text, record, index) => {
            return this.BaseTool.Table.getMapText(this.cbustypeMap, text)
          }
        },
        {
          title: '关联设备',
          dataIndex: 'positionNo',
          checked: true,
          width: 150
        },
        {
          title: '采购数量',
          dataIndex: 'totalNum',
          checked: true,
          width: 150
        },
        {
          title: '请购人员',
          dataIndex: 'createdUserName',
          checked: true,
          width: 150
        },
        {
          title: '用友单号',
          checked: true,
          width: 100,
          dataIndex: 'yongYouId'
        },
        {
          title: '需求日期',
          dataIndex: 'needDate',
          checked: true,
          width: 150
        },
        {
          title: '计划到货日期',
          dataIndex: 'planGetDate',
          checked: true,
          width: 150
        },
        {
          title: '申请时间',
          dataIndex: 'updateTime',
          checked: true,
          width: 150
        },
        {
          title: '请购原因',
          checked: true,
          width: 100,
          dataIndex: 'cmemo'
        },
        {
          title: '错误消息',
          checked: true,
          width: 100,
          dataIndex: 'errorMessage'
        },
        {
          title: '操作',
          key: 'action',
          width: '200px',
          fixed: 'right',
          checked: true,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]

    }
  },
  created () {
    // 下拉框map
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.LONG_YAN_PURCHASE_TYPE)
    this.cptcodeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.LONG_YAN_PURCHASE_ORDER_PLAN_TYPE)
    this.cbustypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.LONG_YAN_PURCHASE_BUSINESS_TYPE)
  },
  methods: {
    base (record, list = []) {
      this.visible = true
      this.data = list
      if (this.BaseTool.Object.isBlank(record)) {
        this.title = '新增合并采购单'
        return
      }
      this.title = '编辑合并采购单'
      // this.data = record.detailVOS
      const { form: { setFieldsValue } } = this
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, [
          'id'
        ])))
      })
    },
    save () {
      const { form: { validateFieldsAndScroll } } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          Object.values(errors).map(item => {
            this.$message.error(item.errors[0].message)
          })
          this.confirmLoading = false
          return
        }
        values.purchaseOrderStr = this.data.map(item => {
          return pick(item, [
            'id',
            'sbId',
            'type',
            'oldOrNew',
            'projectId',
            'positionNo',
            'cptcode',
            'remark',
            'cdepcode',
            'cbustype',
            'planGetDate',
            'needDate'
          ])
        })
        if (values.id) {
          updatamergePurchase(values).then(res => {
            this.$message.success('修改成功！')
            this.handleCancel()
          }).catch(() => {
            this.confirmLoading = false
          })
        } else {
          mergePurchase(values.title, { purchaseOrderStr: values.purchaseOrderStr }).then(res => {
            this.$message.success('创建成功！')
            this.handleCancel()
          }).catch(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleDelOne (record) {
      const data = [...this.data]
      this.data = data.filter(item => record.id !== item.id)
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.data = []
      this.form.resetFields()
      this.$emit('ok', values)
    }
  }
}
</script>

<style>

</style>