From ab372e3ab59b3522c46401e94dcd5ae84006525e Mon Sep 17 00:00:00 2001
From: jameszow <jameszow@163.com>
Date: Thu, 26 Oct 2023 19:48:59 +0800
Subject: [PATCH] Add EditModal

---
 .../shipments/components/AddEditModal.vue     | 175 ++++++++++++------
 1 file changed, 114 insertions(+), 61 deletions(-)

diff --git a/src/views/retail/shipments/components/AddEditModal.vue b/src/views/retail/shipments/components/AddEditModal.vue
index 027b026..b798037 100644
--- a/src/views/retail/shipments/components/AddEditModal.vue
+++ b/src/views/retail/shipments/components/AddEditModal.vue
@@ -12,27 +12,31 @@
       v-model:open="open"
       @cancel="handleCancelModal"
       @ok="handleOkModal"
-      style="top:20px;height: 95%;">
-    <template slot="footer">
-      <a-button @click="">取消</a-button>
-      <a-button v-if="checkFlag && isCanCheck" :loading="confirmLoading" @click="">保存并审核</a-button>
-      <a-button type="primary" :loading="confirmLoading" @click="">保存</a-button>
-      <!--发起多级审核-->
-      <a-button v-if="!checkFlag" @click="" type="primary">提交流程</a-button>
+      style="left: 5%; height: 95%;">
+    <template #footer>
+        <a-button @click="">取消</a-button>
+        <a-button v-if="checkFlag && isCanCheck" :loading="confirmLoading" @click="">保存并审核</a-button>
+        <a-button type="primary" :loading="confirmLoading" @click="">保存</a-button>
+        <!--发起多级审核-->
+        <a-button v-if="!checkFlag" @click="" type="primary">提交流程</a-button>
     </template>
     <a-spin :spinning="confirmLoading">
-      <a-form ref="formRef" :model="formState">
+      <a-form ref="formRef" :model="formState" style="margin-top: 35px">
         <a-row class="form-row" :gutter="24">
           <a-col :lg="6" :md="12" :sm="24">
-            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="会员卡号" data-step="1" data-title="会员卡号"
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="会员卡号" data-step="1"
+                         data-title="会员卡号"
                          data-intro="如果发现需要选择的会员卡号尚未录入，可以在下拉框中点击新增会员信息进行录入">
               <a-select placeholder="选择会员卡号" v-model:value="formState.memberId"
                         :dropdownMatchSelectWidth="false" showSearch optionFilterProp="children" @change="">
                 <div slot="dropdownRender" slot-scope="menu">
-                  <v-nodes :vnodes="menu" />
-                  <a-divider style="margin: 4px 0;" />
+                  <v-nodes :vnodes="menu"/>
+                  <a-divider style="margin: 4px 0;"/>
                   <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"
-                       @mousedown="e => e.preventDefault()" @click=""><a-icon type="plus" /> 新增会员</div>
+                       @mousedown="e => e.preventDefault()" @click="">
+                    <a-icon type="plus"/>
+                    新增会员
+                  </div>
                 </div>
                 <a-select-option v-for="(item,index) in memberList" :key="index" :value="item.id">
                   {{ item.member }}
@@ -42,19 +46,22 @@
           </a-col>
           <a-col :lg="6" :md="12" :sm="24">
             <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单据日期">
-              <a-date-picker show-time placeholder="选择时间" @change="dateChange" @ok="dateOk" />
+              <a-date-picker show-time placeholder="选择时间" @change="dateChange" @ok="dateOk"/>
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :sm="24">
-            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单据编号" data-step="2" data-title="单据编号"
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="单据编号" data-step="2"
+                         data-title="单据编号"
                          data-intro="单据编号自动生成、自动累加、开头是单据类型的首字母缩写，累加的规则是每次打开页面会自动占用一个新的编号">
               <a-input placeholder="请输入单据编号" v-model:value="formState.receiptNumber" :readOnly="true"/>
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :sm="24">
-            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="收款类型" data-step="3" data-title="收款类型"
+            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="收款类型" data-step="3"
+                         data-title="收款类型"
                          data-intro="收款类型可以有现付和预付款两种类型，当选择了会员之后，如果该会员有预付款，在此处会显示具体预付款的金额，而且系统会优先默认选中预付款">
-              <a-select placeholder="请选择付款类型" v-model:value="formState.paymentType" :dropdownMatchSelectWidth="false">
+              <a-select placeholder="请选择付款类型" v-model:value="formState.paymentType"
+                        :dropdownMatchSelectWidth="false">
                 <a-select-option v-for="(item,index) in payTypeList" :key="index" :value="item.value">
                   {{ item.text }}
                 </a-select-option>
@@ -63,34 +70,55 @@
           </a-col>
         </a-row>
         <a-row class="form-row" :gutter="24">
-          <a-col :lg="18" :md="12" :sm="24">
-            <a-table :columns="tableColumns"
-                     :dataSource="tableData">
-              <a-row :gutter="24" style="float:left;" data-step="4" data-title="扫码录入" data-intro="此功能支持扫码枪扫描商品条码进行录入">
-                <a-col v-if="scanStatus" :md="6" :sm="24">
+          <a-col :lg="18" :md="12" :sm="24" style="margin-bottom: 150px;">
+            <div class="table-operations">
+              <a-row :gutter="24" style="float:left; margin-bottom: 10px; margin-right: 1px" data-step="4" data-title="扫码录入"
+                     data-intro="此功能支持扫码枪扫描商品条码进行录入">
+                <a-col :md="6" :sm="24">
+                  <a-button type="primary">插入一行</a-button>
+                </a-col>
+              </a-row>
+              <a-row :gutter="24" style="float:left; margin-bottom: 10px" v-if="showScanButton" data-step="4" data-title="扫码录入"
+                     data-intro="此功能支持扫码枪扫描商品条码进行录入">
+                <a-col :md="6" :sm="24">
                   <a-button @click="scanEnter">扫码录入</a-button>
                 </a-col>
-                <a-col v-if="!scanStatus" :md="16" :sm="24" style="padding: 0 6px 0 12px">
-                  <a-input placeholder="请扫条码或序列号并回车" v-model:value="formState.scanBarCode" @pressEnter="scanPressEnter" ref="scanBarCode"/>
+              </a-row>
+              <a-row :gutter="24" style="float:left; margin-bottom: 10px" v-if="showScanPressEnter" data-step="4" data-title="扫码录入"
+                     data-intro="此功能支持扫码枪扫描商品条码进行录入">
+                <a-col :md="5" :sm="24" style="padding: 0 6px 0 12px">
+                  <a-input placeholder="请扫条码并回车" style="width: 150px;" v-model:value="formState.scanBarCode"
+                           @pressEnter="scanPressEnter" ref="scanBarCode"/>
                 </a-col>
-                <a-col v-if="!scanStatus" :md="6" :sm="24" style="padding: 0px 18px 0 0">
+                <a-col :md="6" :sm="24" style="padding: 0px 600px 0 0">
                   <a-button @click="stopScan">收起扫码</a-button>
                 </a-col>
               </a-row>
-              <a-icon type="down" @click="handleBatchSetWarehouse" />
-              <a-divider v-if="isTenant" style="margin: 4px 0;" />
-              <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;" @click="addWarehouse"><a-icon type="plus" /> 新增仓库</div>
+            </div>
+            <a-table bordered
+                     :columns="tableColumns"
+                     :dataSource="tableData"
+                     :row-selection="rowSelection"
+                     :scroll="{ x: '100%', y: 300 }">
+              <a-icon type="down" @click="handleBatchSetWarehouse"/>
+              <a-divider v-if="isTenant" style="margin: 4px 0;"/>
+              <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;" @click="addWarehouse">
+                <a-icon type="plus"/>
+                新增仓库
+              </div>
             </a-table>
             <a-row class="form-row" :gutter="24">
               <a-col :lg="24" :md="24" :sm="24">
                 <a-form-item :label-col="labelCol" :wrapper-col="{xs: { span: 24 },sm: { span: 24 }}" label="">
-                  <a-textarea :rows="1" placeholder="请输入备注" v-model:value="formState.remark" style="margin-top:8px;"/>
+                  <a-textarea :rows="1" placeholder="请输入备注" v-model:value="formState.remark"
+                              style="margin-top:8px;"/>
                 </a-form-item>
               </a-col>
             </a-row>
             <a-row class="form-row" :gutter="24">
               <a-col :lg="6" :md="12" :sm="24">
-                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="附件" data-step="9" data-title="附件"
+                <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="附件" data-step="9"
+                             data-title="附件"
                              data-intro="可以上传与单据相关的图片、文档，支持多个文件">
                   <a-upload v-model:file-list="fileList" action="">
                     <a-button>
@@ -102,41 +130,54 @@
               </a-col>
             </a-row>
           </a-col>
-          <div class="sign">
-            <a-col :lg="6" :md="12" :sm="24">
+          <a-col :lg="6" :md="12" :sm="24">
+            <div class="sign" style="margin-top: 40px">
               <a-row class="form-row" :gutter="24">
-                <a-col :lg="24" :md="6" :sm="6"><br/><br/></a-col>
                 <a-col :lg="24" :md="6" :sm="6">
-                  <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" data-step="5" data-title="单据金额"
+                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" data-step="5" data-title="单据金额"
                                data-intro="单据金额等于左侧商品的总金额">
-                    <span slot="label" style="font-size: 20px;line-height:20px">单据金额</span>
-                    <a-input v-model:value="formState.receiptAmount" :style="{color:'purple'}" :readOnly="true"/>
+                    <template #label>
+                      <span style="font-size: 20px;line-height:20px">单据金额</span>
+                    </template>
+                    <a-input v-model:value="formState.receiptAmount" :style="{color:'purple', height:'35px'}" :readOnly="true"/>
                   </a-form-item>
                 </a-col>
                 <a-col :lg="24" :md="6" :sm="6">
                   <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" data-step="6" data-title="收款金额"
                                data-intro="收款金额为收银员收取用户的实际金额">
-                    <span slot="label" style="font-size: 20px;line-height:20px">收款金额</span>
-                    <a-input v-model:value="formState.paymentAmount" :style="{color:'red'}" defaultValue="0" @change="onChangePaymentAmount"/>
+                    <template #label>
+                      <span style="font-size: 20px;line-height:20px">收款金额</span>
+                    </template>
+                    <a-input v-model:value="formState.paymentAmount" :style="{color:'red', height:'35px'}" defaultValue="0"
+                             @change="onChangePaymentAmount"/>
                   </a-form-item>
                 </a-col>
                 <a-col :lg="24" :md="6" :sm="6">
                   <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" data-step="7" data-title="找零"
                                data-intro="找零等于收款金额减去实收金额">
-                    <span slot="label" style="font-size: 20px;line-height:20px">找零</span>
-                    <a-input v-model:value="formState.backAmount" :style="{color:'green'}" :readOnly="true" defaultValue="0"/>
+                    <template #label>
+                      <span style="font-size: 20px;line-height:20px">找零</span>
+                    </template>
+                    <a-input v-model:value="formState.backAmount" :style="{color:'green', height:'35px'}" :readOnly="true"
+                             defaultValue="0"/>
                   </a-form-item>
                 </a-col>
                 <a-col :lg="24" :md="6" :sm="6">
                   <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" data-step="8" data-title="收款账户"
                                data-intro="收款账户的信息来自基本资料菜单下的【结算账户】">
-                    <span slot="label" style="font-size: 20px;line-height:20px">收款账户</span>
-                    <a-select placeholder="选择收款账户" style="font-size:20px;" v-model:value="formState.accountReceivable" :dropdownMatchSelectWidth="false">
+                    <template #label>
+                      <span style="font-size: 20px;line-height:20px">收款账户</span>
+                    </template>
+                    <a-select placeholder="选择收款账户" style="font-size:20px;"
+                              v-model:value="formState.accountReceivable" :dropdownMatchSelectWidth="false">
                       <div slot="dropdownRender" slot-scope="menu">
-                        <v-nodes :vnodes="menu" />
-                        <a-divider style="margin: 4px 0;" />
+                        <v-nodes :vnodes="menu"/>
+                        <a-divider style="margin: 4px 0;"/>
                         <div v-if="isTenant" style="padding: 4px 8px; cursor: pointer;"
-                             @mousedown="e => e.preventDefault()" @click="addAccount"><a-icon type="plus" /> 新增结算账户</div>
+                             @mousedown="e => e.preventDefault()" @click="addAccount">
+                          <a-icon type="plus"/>
+                          新增结算账户
+                        </div>
                       </div>
                       <a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id">
                         {{ item.name }}
@@ -145,8 +186,8 @@
                   </a-form-item>
                 </a-col>
               </a-row>
-            </a-col>
-          </div>
+            </div>
+          </a-col>
         </a-row>
       </a-form>
     </a-spin>
@@ -156,7 +197,7 @@
 <script lang="ts">
 import {defineComponent, ref} from 'vue';
 import {UploadOutlined} from '@ant-design/icons-vue';
-import { Dayjs } from 'dayjs';
+import {Dayjs} from 'dayjs';
 import {
   Textarea,
   DatePicker,
@@ -179,6 +220,7 @@ import {
   TreeSelect,
   Upload,
 } from "ant-design-vue";
+import type { TableProps } from 'ant-design-vue';
 import {formState, tableColumns} from '/@/views/retail/shipments/model/addEditModel'
 
 export default defineComponent({
@@ -215,10 +257,11 @@ export default defineComponent({
     const isTenant = ref<boolean>(true);
     const scanStatus = ref<boolean>(true);
     const title = ref<string>("操作");
-    const width = ref('1300px');
+    const width = ref('1500px');
     const moreStatus = ref<boolean>(true);
     const addDefaultRowNum = ref(1);
-    const visible = ref<boolean>(true);
+    const showScanButton = ref(true);
+    const showScanPressEnter = ref(false);
     const prefixNo = ref('LSCK');
     const fileList = ref([]);
     const payTypeList = ref([]);
@@ -235,7 +278,6 @@ export default defineComponent({
     });
     const refKey = ref(['productDataTable']);
     const activeKey = ref('productDataTable');
-
     const memberList = ref([])
     const accountList = ref([]);
 
@@ -267,17 +309,18 @@ export default defineComponent({
       console.log('onOk: ', value);
     };
 
-
     function scanPressEnter() {
 
     }
 
     function scanEnter() {
-
+      showScanButton.value = !showScanButton.value;
+      showScanPressEnter.value = !showScanPressEnter.value;
     }
 
     function stopScan() {
-
+      showScanButton.value = !showScanButton.value;
+      showScanPressEnter.value = !showScanPressEnter.value;
     }
 
     function addAccount() {
@@ -292,6 +335,10 @@ export default defineComponent({
 
     }
 
+    const rowSelection: TableProps['rowSelection'] = {
+
+    };
+
     return {
       open,
       checkFlag,
@@ -309,7 +356,6 @@ export default defineComponent({
       width,
       moreStatus,
       addDefaultRowNum,
-      visible,
       prefixNo,
       fileList,
       payTypeList,
@@ -329,7 +375,10 @@ export default defineComponent({
       memberList,
       accountList,
       addWarehouse,
-      handleBatchSetWarehouse
+      handleBatchSetWarehouse,
+      showScanButton,
+      showScanPressEnter,
+      rowSelection
     };
   },
 });
@@ -337,12 +386,16 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.sign .ant-input{
+.sign .ant-input {
   font-size: 30px;
-  font-weight:bolder;
-  text-align:center;
-  border-left-width:0 !important;
-  border-top-width:0 !important;
-  border-right-width:0 !important;
+  font-weight: bolder;
+  text-align: center;
+  border-left-width: 0 !important;
+  border-top-width: 0 !important;
+  border-right-width: 0 !important;
+}
+
+.template-footer {
+  margin-bottom: 8px;
 }
 </style>
\ No newline at end of file