wms / wms4_wuhanfeipu · Files

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleCancel"
    okText="取消"
    @cancel="handleCancel"
    cancelText="关闭"
  >
     
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
<!--        <a-row>-->
<!--          <a-col :span="24">-->
<!--            <a-form-model-item label="单据号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">-->
<!--              <a-input ref="code" v-model="model.code" placeholder="请输入单据号" style="width: 100%"/>-->
<!--            </a-form-model-item>-->
<!--          </a-col> -->
<!--            -->
<!--            <a-col :span="24">-->
<!--              <a-form-model-item label="单据时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receiptDate"-->
<!--              >-->
<!--                <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择单据时间"-->
<!--                        class="query-group-cust" v-model="model.receiptDate"></j-date>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--            <a-col :span="24">-->
<!--              <a-form-model-item label="仓库" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zoneCode">-->
<!--                <j-search-select-tag v-model="model.zoneCode" dict="product_area,name,code"  />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--            <a-col :span="24">-->
<!--              <a-form-model-item label="部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departName">-->
<!--                <j-search-select-tag v-model="model.departName" dict="sys_depart,depart_name,depart_name,parent_id='2'"  />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--          -->
<!--            <a-col :span="24">-->
<!--              <a-form-model-item label="保管人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="preserver">-->
<!--                <j-search-select-tag v-model="model.preserver" dict="fp_user,username,username, type = 0"  />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--            <a-col :span="24">-->
<!--              <a-form-model-item label="收料人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receiver">-->
<!--                <j-search-select-tag v-model="model.receiver" dict="fp_user,username,username, type = 0"  />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--        </a-row>-->
      </a-form-model>
    </a-spin>

<!--    <a-table ref="table" rowKey="id" size="middle" :columns="columns" :dataSource="dataSource" :pagination="false">-->
<!--      <span slot="action" slot-scope="text, record">-->
<!--        <a-input-number placeholder="" v-model="record.qty" :value="text" />-->
<!--      </span> -->
<!--    </a-table> -->
    <j-vxe-table
        toolbar
        :toolbarConfig="toolbarConfig" 
        row-number
        row-selection
        keep-source
        async-remove 
        :height="340"
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination" 
        @save="handleTableSave"
        @remove="handleTableRemove"
        @edit-closed="handleEditClosed"
        @pageChange="handlePageChange"
        @selectRowChange="handleSelectRowChange"
    />
  </j-modal>

</template>

<script>
import {getAction, httpAction, postAction} from '@/api/manage'
import {purchaseDerailList, ajaxGetDictItems} from '@/api/api'
import {JVXETypes} from "@comp/jeecg/JVxeTable"; 

export default {
  name: 'BatchModal',
  components: {},
  props: {
    mainId: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      title: '操作',
      width: 1200,
      visible: false,
      materialList: {},
      querySource: {},
      // 工具栏的按钮配置
      toolbarConfig: {
        // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
        btn: ['save', 'remove', 'clearSelection']
      },
      // 是否正在加载
      loading: false,
      dataSource: [],
      invStatus:[],
      pagination: {
        // 当前页码
        current: 1,
        // 每页的条数
        pageSize: 200,
        // 可切换的条数
        pageSizeOptions: ['10', '20', '30', '100', '200'],
        // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
        total: 0,
      },
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      validatorRules: {
        code: [
          { required: true, message: '请输入单据号!'},
        ],
        receiptDate: [
          { required: true, message: '请输入单据日期!'},
        ],
        zoneCode: [
          { required: true, message: '请选择仓库!'},
        ],
        departName: [
          { required: true, message: '请选择部门!'},
        ],
        qty: [
          { required: true, message: '请输入数量!'},
          { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的数量!'},
        ],
        preserver: [
          { required: true, message: '请选择保管人!'},
        ],
        receiver: [
          { required: true, message: '请选择收料人!'},
        ],
      },
      columns: [
        {key: 'id', title: 'id'},
        {key: 'mapName', title: '物料名称'},
        {key: 'mapNumber', title: '物料代码'},
        {key: 'note', title: '备注'},
        {key: 'qty', title: '订货数量'},
        {key: 'commitQty', title: '到货数量',type: JVXETypes.input}, 
        {key: 'furnaceNumber', title: '炉号', type: JVXETypes.input},
        {key: 'batchNumber', title: '批号', type: JVXETypes.input},
        {
          title: '图片上传',
          key: 'image',
          type: JVXETypes.image,
          width: '180px',
          token: true,
        },
      ],
      confirmLoading: false, 
      dictOptions: {},
      superFieldList:[], 
      url: {
        getData: '/purchase_order/purchaseOrder/listPurchaseOrderDetailsByMainId',
        // 模拟保存单行数据（即时保存）
        saveRow: '/mock/vxe/immediateSaveRow',
        // 模拟保存整个表格的数据
        saveAll: '/purchase_order/purchaseOrder/yjbatchEdit',
      },
    }
  },
  created() {
    //备份model原始值
    //this.getSuperFieldList()
    // this.modelDefault = JSON.parse(JSON.stringify(this.model))
    //this.loadFrom();
  },
  methods: {
    loadFrom(){
      ajaxGetDictItems('inventory_status').then((res) => {
        if (res.success) {
          this.invStatus = res.result
        }
      })
    },

    handleTableSave({$table, target}) {
      // 校验整个表格
      $table.validate().then((errMap) => {
        // 校验通过
        if (!errMap) {
          // 获取所有数据
          let tableData = target.getTableData()
          console.log('当前保存的数据是：', tableData)
          // 获取新增的数据
          let newData = target.getNewData()
          console.log('-- 新增的数据：', newData)
          // 获取删除的数据
          let deleteData = target.getDeleteData()
          console.log('-- 删除的数据：', deleteData)

          // 【模拟保存】
          this.loading = true
          postAction(this.url.saveAll, tableData).then(res => {
            if (res.success) {
              this.$message.success(`保存成功！`)
            } else {
              this.$message.warn(`保存失败：` + res.message)
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    loadData(id) {
      // 封装查询条件
      let formData = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        headId:id
      } 
      // 调用查询数据接口
      this.loading = true
      getAction(this.url.getData, formData).then(res => {
        if (res.success) {
          // 后台查询回来的 total，数据总数量
          this.pagination.total = res.result.total
          // 将查询的数据赋值给 dataSource
          this.dataSource = res.result.records
          // 重置选择
          this.selectedRows = []
        } else {
          this.$error({title: '主表查询失败', content: res.message})
        }
      }).finally(() => {
        // 这里是无论成功或失败都会执行的方法，在这里关闭loading
        this.loading = false
      })
    },
    getStatusColor(status) {
      const colors = {
        'good ': 'green',
        'defective': 'red',
        'discussed	': 'grey',
        'scrap': 'purple',
        default: 'blue'
      };
      return colors[status] || colors.default;
    },
    getContainerCode(e){
      this.$nextTick(function (){
        let  record={containerCode: e}
        this.model = Object.assign({}, record)
      })
    },
    // 当分页参数变化时触发的事件
    handlePageChange(event) {
      // 重新赋值
      this.pagination.current = event.current
      this.pagination.pageSize = event.pageSize
      // 查询数据
      this.loadData()
    },

    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {
      this.selectedRows = event.selectedRows
    },
    solutionInvStatus(value) {
      var actions = []
      Object.keys(this.invStatus).some(key => {
        if (this.invStatus[key].value == '' + value) {
          actions.push(this.invStatus[key].text)
          return true
        }
      })
      return actions.join('')
    },
    // add() {
    //   this.edit(this.modelDefault)
    //   this.model.inventoryStatus = 'good'
    // },
    edit(ids) { 
      this.visible = true
      this.loadData(ids);
    },
    // show(record) {
    //   this.model = Object.assign({}, record)
    //   this.visible = true
    // },
    selectContainer(record){
      this.$refs.selectContainerForm.edit(record);
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
    },
    selectList(ids) {
      const that = this
      that.querySource.headId = ids;
      purchaseDerailList(that.querySource).then(res => {
        that.dataSource = res
      })
    },
   
    handleOk() {  
      const that = this 
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          httpurl += this.url.add
          method = 'post'
          this.dataSource.forEach((item, index) => {
            this.$set(this.dataSource[index], 'code', this.model.code)
            this.$set(this.dataSource[index], 'receiptDate', this.model.receiptDate)
            this.$set(this.dataSource[index], 'zoneCode', this.model.zoneCode)
            this.$set(this.dataSource[index], 'departName', this.model.departName)
            this.$set(this.dataSource[index], 'preserver', this.model.preserver)
            this.$set(this.dataSource[index], 'receiver', this.model.receiver) 
          }) 
          httpAction(httpurl, this.dataSource, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('refash')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>