提货查询 上传物流-

src/views/platinum/platinum_pick_query/list/tab/compoments/upload_logistics/index.vue

@@ -1,114 +1,114 @@
 <template>
-    <!-- 提货查询 上传物流-->
-    <a-modal class="add-custom upload_logistics"
-             title="上传物流"
-             centered
-             v-model:visible="visible"
-             :maskClosable="false"
-             @cancel="cancel"
-             width="600px">
-        <template #footer>
-            <a-button key="submit"
-                      type="primary"
-                      :loading="loading"
-                      @click="submit">上传物流信息
-            </a-button>
-            <a-button key="cancel"
-                      type="primary"
-                      :loading="loading"
-                      @click="cancel">完成
-            </a-button>
-        </template>
-        <a-form class="inlineForm mt10"
-                ref="formRef">
-            <a-row :gutter="24">
-                <a-col :span="24">
-                    <a-form-item label="物流公司"
-                                 name="">
-                        <a-select class="inlineFormSelect"
-                                  style="width: 200px"
-                                  placeholder="请选择物流公司">
-                            <a-select-option value="顺丰快递">
-                                顺丰快递
-                            </a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </a-col>
-            </a-row>
-            <a-row :gutter="24">
-                <a-col :span="24">
-                    <a-form-item label="物流单号"
-                                 name="">
-                        <a-input class="dialogInput"
-                                 style="width: 200px"
-                                 placeholder="请输入物流单号"/>
-                    </a-form-item>
-                </a-col>
-            </a-row>
-        </a-form>
-        <!-- <CommomDetail :selectedRow="selectedRow" /> -->
-    </a-modal>
+  <!-- 提货查询 上传物流-->
+  <a-modal class="add-custom upload_logistics"
+           title="上传物流"
+           centered
+           v-model:visible="visible"
+           :maskClosable="false"
+           @cancel="cancel"
+           width="600px">
+    <template #footer>
+      <a-button key="submit"
+                type="primary"
+                :loading="loading"
+                @click="submit">上传
+      </a-button>
+    </template>
+    <a-form class="inlineForm mt10"
+            :model="formState"
+            :rules="rules"
+            ref="formRef">
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-form-item label="物流公司"
+                       name="expresscompany">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     v-model:value="formState.expresscompany"
+                     placeholder="请输入物流单号" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-form-item label="物流单号"
+                       name="expressnum">
+            <a-input class="dialogInput"
+                     style="width: 200px"
+                     v-model:value="formState.expresscompany"
+                     placeholder="请输入物流单号" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
 </template>
 <script lang="ts">
-    import {defineComponent, PropType, ref} from 'vue';
-    import {closeModal} from '@/common/setup/modal/index';
-    import {QueryCustomInfoType} from '@/services/go/ermcp/customInfo/interface';
-    import CommomDetail from '../common-detail/index.vue';
-    import {QhjTradeGoodsPickup} from "@/services/go/ermcp/qhj/interface";
-    import {GoodsPickupOperateReq, TradeGoodsInfo} from "@/services/proto/manager/interface";
-    import {getUserId} from "@/services/bus/account";
-    import {getLongTypeLoginID} from "@/services/bus/login";
-    import {requestResultLoadingAndInfo} from "@/common/methods/request/resultInfo";
-    import {goodsPickupOperate} from "@/services/proto/manager";
-    import Long from "long";
+import { defineComponent, PropType, ref } from 'vue';
+import { closeModal } from '@/common/setup/modal/index';
+import CommomDetail from '../common-detail/index.vue';
+import { QhjTradeGoodsPickup } from '@/services/go/ermcp/qhj/interface';
+import { GoodsPickupOperateReq } from '@/services/proto/manager/interface';
+import { getUserId } from '@/services/bus/account';
+import { getLongTypeLoginID } from '@/services/bus/login';
+import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { goodsPickupOperate } from '@/services/proto/manager';
+import Long from 'long';
+import { handleForm } from './setup';
+import { validateAction } from '@/common/setup/form';
+import { FormState } from './interface';
 
-    export default defineComponent({
-        name: 'platinum_pick_query_upload_logistics',
-        components: {CommomDetail},
-        props: {
-            selectedRow: {
-                type: Object as PropType<QhjTradeGoodsPickup>,
-                default: {},
-            },
+export default defineComponent({
+    name: 'platinum_pick_query_upload_logistics',
+    components: { CommomDetail },
+    props: {
+        selectedRow: {
+            type: Object as PropType<QhjTradeGoodsPickup>,
+            default: {},
         },
-        setup(props, context) {
-            const {visible, cancel} = closeModal('platinum_pick_query_upload_logistics');
-            const loading = ref<boolean>(false);
-
-            function submit() {
-                let reqParams: GoodsPickupOperateReq = {
+    },
+    setup(props, context) {
+        const { visible, cancel } = closeModal('platinum_pick_query_upload_logistics');
+        const loading = ref<boolean>(false);
+        const { formRef, formState, rules } = handleForm();
+        function submit() {
+            validateAction<FormState>(formRef, formState).then((param) => {
+                const { expresscompany, expressnum } = param;
+                const reqParams: GoodsPickupOperateReq = {
                     operatetype: 1, // uint32 操作类型-1:提货单上传物流信息 2:取货确认(自提) 3:收货确认(邮寄)
                     takeorderid: Long.fromString(props.selectedRow.takeorderid), // uint64 提货单号
                     userid: getUserId(), // uint64 用户ID
                     loginid: Number(getLongTypeLoginID()), // uint64 登录ID
                     info: {
-                        expresscompany: "1111", // string 物流公司
-                        expressnum: "2222" // string 物流单号
-                    }
-                }
-                debugger
-
+                        expresscompany, // string 物流公司
+                        expressnum, // string 物流单号
+                    },
+                };
                 requestResultLoadingAndInfo(goodsPickupOperate, reqParams, loading, ['上传物流信息成功', '上传物流信息失败:']).then(() => {
                     cancel();
                     context.emit('refresh');
                 });
-            }
+            });
+        }
 
-            return {
-                cancel,
-                visible,
-                loading,
-                submit,
-            };
-        },
-    });
+        return {
+            formRef,
+            formState,
+            rules,
+            cancel,
+            visible,
+            loading,
+            submit,
+        };
+    },
+});
 </script>
 
 <style lang="less">
-    .upload_logistics {
-        .ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label {
-            width: 200px;
-            text-align: right;
-        }
+.upload_logistics {
+    .ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label {
+        width: 200px;
+        text-align: right;
     }
+}
 </style>

src/views/platinum/platinum_pick_query/list/tab/compoments/upload_logistics/interface.ts

@@ -0,0 +1,4 @@
+export interface FormState {
+    expresscompany: string, // string 物流公司
+    expressnum: string, // string 物流单号
+}

src/views/platinum/platinum_pick_query/list/tab/compoments/upload_logistics/setup.ts

@@ -0,0 +1,19 @@
+import { reactive, ref, UnwrapRef } from "vue";
+import { FormState } from "./interface";
+
+
+/**
+ * 表单
+ */
+export function handleForm() {
+    const formRef = ref();
+    const formState: UnwrapRef<FormState> = reactive({
+        expresscompany: '',// string 物流公司
+        expressnum: '',// string 物流单号
+    })
+    const rules = {
+        expresscompany: [{ required: true, message: '请输入物流公司', trigger: 'blur' }],
+        expressnum: [{ required: true, message: '请输入物流单号', trigger: 'blur' }],
+    }
+    return { formRef, formState, rules }
+}