入库任务列表,增加一个弹窗demo按钮

陈翱
1 parent 831c03f4
Showing 2 changed files with 226 additions and 1 deletions
ant-design-vue-jeecg/src/views/system/task/ReceiptTaskHeaderList.vue
ant-design-vue-jeecg/src/views/system/task/modules/MaterialTaskModal.vue
@@ -85,6 +85,7 @@
     <div class="table-operator">
       <a-button @click="createEmptyIn()" v-has="'taskHeader:emptyIn'" type="primary">空托入库</a-button>
       <a-button @click="createManyEmptyIn()" v-has="'taskHeader:manyEmptyIn'" type="primary">空托组入库</a-button>
+      <a-button @click="openDemo()" type="primary">弹出demo</a-button>
     </div>
     <!-- table区域-begin -->
@@ -175,6 +176,7 @@
     <taskHeader-modal ref="modalForm" @ok="modalFormOk"></taskHeader-modal>
     <empty-in-task-modal ref="emptyInModal" @ok="modalFormOk"></empty-in-task-modal>
     <many-empty-in-task-modal ref="manyEmptyInModal" @ok="modalFormOk"></many-empty-in-task-modal>
+    <MaterialTaskModal ref="materialTaskModal"></MaterialTaskModal>
   </a-card>
 </template>
@@ -192,6 +194,7 @@ import {getZoneList, handleEmptyOut, handlePickupError, handleDoubleIn} from &#39;@/
 import EmptyInTaskModal from './modules/EmptyInTaskModal'
 import ManyEmptyInTaskModal from "./modules/ManyEmptyInTaskModal";
 import {filterObj} from "@/utils/util";
+import MaterialTaskModal from "./modules/MaterialTaskModal";
 export default {
   name: "TaskHeaderList",
@@ -200,7 +203,8 @@ export default {
     ManyEmptyInTaskModal,
     EmptyInTaskModal,
     TaskDetailList,
-    TaskHeaderModal
+    TaskHeaderModal,
+    MaterialTaskModal
   },
   data() {
     return {
@@ -434,6 +438,9 @@ export default {
       this.$refs.manyEmptyInModal.edit();
       this.$refs.manyEmptyInModal.title = "创建空托盘组入库";
     },
+    openDemo(){
+      this.$refs.materialTaskModal.edit();
+    },
     solutionZoneCode(value) {
       var actions = []
       Object.keys(this.zoneList).some((key) => {
+<template>
+  <a-modal
+    :title="title"
+    :width="1200"
+    :visible="visible"
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model">
+        <!-- 主表单区域 -->
+        <a-row class="form-row" :gutter="0">
+          <a-col :lg="8">
+            <a-form-model-item label="托盘号"   :rules="[{ required: true, message: '请输入托盘号!' }]">
+              <a-input placeholder="请输入托盘号" v-model="model.containerCode"/>
+            </a-form-model-item>
+          </a-col>
+
+          <a-col :lg="8">
+            <a-form-model-item label="库位号">
+              <a-input placeholder="请输入库位号" v-model="model.toLocationCode"/>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+      </a-form-model>
+
+      <!-- 子表单区域 -->
+      <a-tabs v-model="activeKey">
+        <a-tab-pane tab="物料信息" key="1" :forceRender="true">
+          <j-editable-table
+            ref="editableTable1"
+            :loading="table1.loading"
+            :columns="table1.columns"
+            :dataSource="table1.dataSource"
+            :maxHeight="300"
+            :rowNumber="true"
+            :rowSelection="true"
+            :actionButton="true"/>
+        </a-tab-pane>
+      </a-tabs>
+
+    </a-spin>
+
+
+  </a-modal>
+</template>
+
+<script>
+
+import JEditableTable from '@/components/jeecg/JEditableTable'
+import {FormTypes, VALIDATE_NO_PASSED, getRefPromise, validateFormModelAndTables} from '@/utils/JEditableTableUtil'
+import {httpAction, getAction} from '@/api/manage'
+import JDate from '@/components/jeecg/JDate'
+
+export default {
+  name: 'MaterialTaskModal',
+  components: {
+    JDate, JEditableTable
+  },
+  data() {
+    return {
+      title: '操作',
+      visible: false,
+      confirmLoading: false,
+      model: {},
+      labelCol: {
+        xs: {span: 24},
+        sm: {span: 6}
+      },
+      wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 24 - 6}
+      },
+      activeKey: '1',
+      // 客户信息
+      table1: {
+        loading: false,
+        dataSource: [],
+        columns: [
+          {
+            title: '物料编码',
+            key: 'materiaCode',
+            width: '24%',
+            type: FormTypes.input,
+            defaultValue: '',
+            placeholder: '请输入${title}',
+            validateRules: [{required: true, message: '${title}不能为空'}]
+          },
+          {
+            title: '数量',
+            key: 'qty',
+            type: FormTypes.inputNumber,
+            width: '80px',
+          }
+        ]
+      },
+      url: {
+        add: '/test/jeecgOrderMain/add',
+        edit: '/test/jeecgOrderMain/edit',
+        orderCustomerList: '/test/jeecgOrderMain/queryOrderCustomerListByMainId',
+        orderTicketList: '/test/jeecgOrderMain/queryOrderTicketListByMainId'
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+
+    // 获取所有的editableTable实例
+    getAllTable() {
+      return Promise.all([
+        getRefPromise(this, 'editableTable1')
+      ])
+    },
+
+    add() {
+      // 默认新增一条数据
+      this.getAllTable().then(editableTables => {
+        editableTables[0].add()
+      })
+
+      this.edit({})
+    },
+    edit(record) {
+      this.visible = true
+      this.activeKey = '1'
+      this.model = Object.assign({}, record)
+      // 加载子表数据
+      if (this.model.id) {
+        let params = {id: this.model.id}
+        this.requestTableData(this.url.orderCustomerList, params, this.table1)
+      }
+
+    },
+    close() {
+      this.visible = false
+      this.getAllTable().then(editableTables => {
+        editableTables[0].initialize()
+      })
+      this.$emit('close')
+      this.$refs.form.resetFields();
+    },
+    /** 查询某个tab的数据 */
+    requestTableData(url, params, tab) {
+      tab.loading = true
+      getAction(url, params).then(res => {
+        tab.dataSource = res.result || []
+      }).finally(() => {
+        tab.loading = false
+      })
+    },
+    handleOk() {
+      this.validateFields()
+    },
+    handleCancel() {
+      this.close()
+    },
+
+
+    /** 触发表单验证 */
+    validateFields() {
+      this.getAllTable().then(tables => {
+        /** 一次性验证主表和所有的次表 */
+        return validateFormModelAndTables(this.$refs.form, this.model, tables)
+      }).then(allValues => {
+        let formData = this.classifyIntoFormData(allValues)
+        console.log("输出数据:")
+        console.log(formData)
+        // 发起请求
+        return this.requestAddOrEdit(formData)
+      }).catch(e => {
+        if (e.error === VALIDATE_NO_PASSED) {
+          // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
+          this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
+        } else {
+          console.error(e)
+        }
+      })
+    },
+    /** 整理成formData */
+    classifyIntoFormData(allValues) {
+      let orderMain = Object.assign(this.model, allValues.formValue)
+      return {
+        ...orderMain, // 展开
+        jeecgOrderCustomerList: allValues.tablesValue[0].values,
+      }
+    },
+    /** 发起新增或修改的请求 */
+    requestAddOrEdit(formData) {
+      alert(JSON.stringify(formData))
+      let url = this.url.add, method = 'post'
+      if (this.model.id) {
+        url = this.url.edit
+        method = 'put'
+      }
+      this.confirmLoading = true
+      httpAction(url, formData, method).then((res) => {
+        if (res.success) {
+          this.$message.success(res.message)
+          this.$emit('ok')
+          this.close()
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+</style>
 \ No newline at end of file