From 62c8502ec65cee7da6cb3e651bf351932d920733 Mon Sep 17 00:00:00 2001
From: lilu <lilu@myshipping.net>
Date: Thu, 17 Nov 2022 19:22:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E8=88=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/modules/goodsTable.vue             | 365 ++++++++++++++----
 .../detail/modules/rightContent.vue           | 238 ++++--------
 2 files changed, 362 insertions(+), 241 deletions(-)

diff --git a/src/views/main/BookingLedger/detail/modules/goodsTable.vue b/src/views/main/BookingLedger/detail/modules/goodsTable.vue
index ffddde0..9dec206 100644
--- a/src/views/main/BookingLedger/detail/modules/goodsTable.vue
+++ b/src/views/main/BookingLedger/detail/modules/goodsTable.vue
@@ -38,38 +38,30 @@
       @ok="handleModelSubmit"
       @cancel="handleModelCancel"
     >
-      <div class="content">
-        <div>
-          <div class="parent-table parent-table-title">
-            <span>箱型</span>
-            <span>箱量</span>
-            <span>箱号</span>
-            <span>封号</span>
-            <span>件数</span>
-            <span>包装</span>
-            <span>重量</span>
-            <span>尺码</span>
-            <span>箱皮重</span>
-            <span>称重方式</span>
-            <span>称重重量</span>
-          </div>
-          <a-radio-group default-value="a" size="large">
-            <a-radio-button value="a" :style="radioStyle" v-for="(pitem,pindex) in tableData" :key="pindex">
-              <div class="parent-table">
-                <span>{{ pitem.ctnall }}</span>
-                <span>{{ pitem.ctnnum }}</span>
-                <span>{{ pitem.cntrno }}</span>
-                <span>{{ pitem.sealno }}</span>
-                <span>{{ pitem.pkgs }}</span>
-                <span>{{ pitem.kindpkgs }}</span>
-                <span>{{ pitem.kgs }}</span>
-                <span>{{ pitem.cbm }}</span>
-                <span>{{ pitem.tareweight }}</span>
-                <span>{{ pitem.weightype }}</span>
-                <span>{{ pitem.weighkgs }}</span>
-              </div>
-            </a-radio-button>
-          </a-radio-group>
+      <div class="model-content">
+        <ve-table
+          style="width:100%"
+          :columns="modelColumns"
+          :table-data="tableData"
+          :radio-option="radioOption"
+          row-key-field-name="rowKey"
+        />
+        <div class="model-botton-box">
+          <a-button class="btn" type="primary" @click="addChildData">新增</a-button>
+          <a-button class="btn" @click="removeChildData">删除</a-button>
+          <a-button class="btn" type="primary" @click="saveChildData">保存</a-button>
+        </div>
+        <div class="model-child-table">
+          <ve-table
+            :columns="childColumns"
+            :table-data="childTableData"
+            borderY
+            :cell-autofill-option="cellAutofillOption"
+            :editOption="editChildOption"
+            rowKeyFieldName="rowKey"
+            :rowStyleOption="rowStyleOption"
+            :checkbox-option="checkChildboxOption"
+          />
         </div>
       </div>
     </a-modal>
@@ -259,6 +251,153 @@ export default {
           edit: true
         },
       ],
+      modelColumns: [
+        {
+          field: '',
+          key: 'radio',
+          type: 'radio',
+          title: '',
+          width: 40,
+          operationColumn: true,
+          align: 'center',
+        },
+        {
+          field: 'ctnall',
+          key: 'ctnall',
+          title: '箱型',
+          align: 'left',
+          width: 80,
+        },
+        {
+          field: 'ctnnum',
+          key: 'ctnnum ',
+          title: '箱量',
+          align: 'left',
+        },
+        {
+          field: 'cntrno',
+          key: 'cntrno',
+          title: '箱号',
+          align: 'left',
+        },
+        {
+          field: 'sealno',
+          key: 'sealno',
+          title: '封号',
+          align: 'left',
+        },
+        {
+          field: 'pkgs',
+          key: 'pkgs',
+          title: '件数',
+          align: 'left',
+        },
+        {
+          field: 'kindpkgs',
+          key: 'kindpkgs',
+          title: '包装',
+          align: 'left',
+          width: 130
+        },
+        {
+          field: 'weighkgs',
+          key: 'weighkgs',
+          title: '毛重',
+          align: 'left',
+        },
+        {
+          field: 'cbm',
+          key: 'cbm',
+          title: '尺码',
+          align: 'left',
+        },
+      ],
+      childColumns: [
+        {
+          field: '',
+          key: 'checkbox',
+          type: 'checkbox',
+          title: '',
+          width: 40,
+          operationColumn: true,
+          align: 'center',
+        },
+        {
+          field: 'pkgs',
+          key: 'pkgs',
+          title: '件数',
+          align: 'left',
+          edit: true,
+        },
+        {
+          field: 'kindpkgs',
+          key: 'kindpkgs',
+          title: '包装',
+          align: 'left',
+          edit: false,
+          width: 130,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-select
+                show-search
+                value={row['kindpkgs']}
+                placeholder="请输入包装"
+                option-filter-prop="children"
+                style="width: 120px"
+                on-change={(val) => {
+                  const data = this.packageList[val]
+                  row['kindpkgs'] = data.name
+                  this.childTableData[rowIndex].kindpkgs = data.name
+                  this.details.ctnInputs[this.childModelSelectIndex].ctnDetailInputs[rowIndex].kindpkgs = data.name
+                  console.log(this.childTableData[rowIndex])
+                  this.$forceUpdate()
+                }}
+              >
+              {
+                this.packageList.map((item, index) => {
+                 return (<a-select-option value={index}>{item.name}</a-select-option>)
+                })
+              }
+              </a-select>
+            )
+          }
+        },
+        {
+          field: 'weighkgs',
+          key: 'weighkgs',
+          title: '毛重',
+          align: 'left',
+          edit: true
+        },
+        {
+          field: 'cbm',
+          key: 'cbm',
+          title: '尺码',
+          align: 'left',
+          edit: true,
+        },
+        {
+          field: 'hscode',
+          key: 'hscode',
+          title: 'HS代码',
+          align: 'left',
+          edit: true,
+        },
+        {
+          field: 'marks',
+          key: 'marks',
+          title: '唛头',
+          align: 'left',
+          edit: true,
+        },
+        {
+          field: 'description',
+          key: 'description',
+          title: '货描',
+          align: 'left',
+          edit: true,
+        },
+      ],
       tableData: [],
       editOption: {
         beforeCellValueChange: ({ row, column, changeValue }) => {
@@ -313,6 +452,69 @@ export default {
           console.log('编辑', row, column)
         },
       },
+      editChildOption:  {
+        beforeCellValueChange: ({ row, column, changeValue }) => {
+          console.log('beforeCellValueChange')
+          console.log('row::', row)
+          console.log('column::', column)
+          console.log('changeValue::', changeValue)
+          if (['pkgs', 'kgs', 'cbm'].includes(column.field) && !/^\d+$/.test(changeValue)) {
+            const height = document.body.clientHeight - 100
+            this.$message.config({
+              top: `${height}px`,
+              duration: 2,
+              maxCount: 3
+            });
+            this.$message.error(`输入的${this.enmuErrorLabel(column.field)}不符合规则`)
+            row['cntrno'] = ''
+            setTimeout(() => {
+              this.$message.destroy()
+            }, 2000)
+            return false
+          }
+        },
+        afterCellValueChange: ({ row, column, changeValue }) => {
+          console.log('afterCellValueChange')
+          console.log('row::', row)
+          console.log('column::', column)
+          console.log('changeValue::', changeValue)
+          let num = null
+          this.childTableData.map((item, index) => {
+            if (row.rowKey === item.rowKey) {
+              // eslint-disable-next-line no-const-assign
+              num = index
+            }
+          })
+          this.childTableData[num][column.field] = changeValue
+          this.details.ctnInputs[this.childModelSelectIndex].ctnDetailInputs[num][column.field] = changeValue
+          this.$forceUpdate()
+          // if (column.field === 'pkgs') {
+          //   let num = 0
+          //   this.tableData.map((item, index) => {
+          //     num += Number(item.pkgs)
+          //   })
+          //   this.totalPkgs = num
+          // }
+          // if (column.field === 'kgs') {
+          //   let num = 0
+          //   this.tableData.map((item, index) => {
+          //     num += Number(item.kgs)
+          //   })
+          //   this.totalKgs = num
+          // }
+          // if (column.field === 'cbm') {
+          //   let num = 0
+          //   this.tableData.map((item, index) => {
+          //     num += Number(item.cbm)
+          //   })
+          //   this.totalCbm = num
+          // }
+          console.log('---')
+        },
+        cellValueChange: ({ row, column }) => {
+          console.log('编辑', row, column)
+        },
+      },
       // 可控单元格编辑
       rowStyleOption: {
         clickHighlight: false,
@@ -336,6 +538,23 @@ export default {
           console.log('全选', isSelected, selectedRowKeys)
         },
       },
+      checkChildboxOption: {
+        hideSelectAll: false,
+        // 行选择改变事件
+        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+          console.log('行选择', row, isSelected, selectedRowKeys)
+          this.selectChildArr = selectedRowKeys
+        },
+        // 全选改变事件
+        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+          if (isSelected) {
+            this.selectChildArr = selectedRowKeys
+          } else {
+            this.selectChildArr = []
+          }
+          console.log('全选', isSelected, selectedRowKeys)
+        },
+      },
       tableLoaded: false,
       ctnList: [],
       packageList: [],
@@ -346,14 +565,24 @@ export default {
       totalCbm: 0,
       moreVisible: false,
       moreModelconfirm: false,
-      radioStyle: {
-        display: 'block',
-        height: '40px',
-        lineHeight: '40px',
-        marginBottom: '10px',
-        width: '1200px',
-        padding: '0'
+      radioOption: {
+        // 行选择改变事件
+        selectedRowChange: ({ row }) => {
+          console.log(row);
+          this.childModelSelect = row
+          this.tableData.map((item, index) => {
+            if (item.rowKey === row.rowKey) {
+              this.childModelSelectIndex = index
+            }
+          })
+          this.childTableData = this.tableData[this.childModelSelectIndex].ctnDetailInputs || []
+          // 写到这里了，有个报错
+        },
       },
+      childTableData: [],
+      childModelSelect: null,
+      childModelSelectIndex: null,
+      selectChildArr: []
     }
   },
   watch: {
@@ -451,7 +680,7 @@ export default {
         tareweight: '',
         weightype: '',
         weighkgs: '',
-        rowKey: Number(this.tableData[this.tableData.length - 1].rowKey) + 1
+        rowKey: this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
       }
       this.tableData.push(data)
     },
@@ -467,10 +696,33 @@ export default {
     openDialog() {
       this.moreVisible = true
     },
+    // 多品名维护保存
     handleModelSubmit() {
 
     },
     handleModelCancel() {
+      this.moreVisible = false
+    },
+    addChildData() {
+      if (!this.childModelSelect) {
+        this.$message.error('请选择数据')
+      }
+      const data = {
+        rowKey: this.childTableData.length > 0 ? Number(this.childTableData[this.childTableData.length - 1].rowKey) + 1 : 0,
+        pkgs: '',
+        kindpkgs: '',
+        weighkgs: '',
+        cbm: '',
+        hscode: this.details.hscode,
+        marks: this.details.marks,
+        description: this.details.marks
+      }
+      this.childTableData.push(data)
+    },
+    removeChildData() {
+
+    },
+    saveChildData() {
 
     }
   },
@@ -498,34 +750,11 @@ export default {
   }
 }
 
-.parent-table{
-  display: flex;
-  span{
-    display: inline-block;
-    flex:1;
-    border-right: 1px solid #eee;
-    text-align: center;
-    &:nth-last-child(1){
-      border: none;
-    }
-  }
-}
-.parent-table-title{
-  display: block;
-  height: 40px;
-  line-height: 40px;
-  margin-bottom: 10px;
-  width: 1200px;
-  display: flex;
-  background: #f4f4f4;
-  margin-bottom: 0;
-  span{
-    display: inline-block;
-    flex:1;
-    border-right: 1px solid #eee;
-    text-align: center;
-    &:nth-last-child(1){
-      border: none;
+.model-content{
+  .model-botton-box{
+    margin: 40px 0;
+    .btn{
+      margin-right: 10px;
     }
   }
 }
diff --git a/src/views/main/BookingLedger/detail/modules/rightContent.vue b/src/views/main/BookingLedger/detail/modules/rightContent.vue
index d2605e7..168d79f 100644
--- a/src/views/main/BookingLedger/detail/modules/rightContent.vue
+++ b/src/views/main/BookingLedger/detail/modules/rightContent.vue
@@ -13,7 +13,7 @@
     <a-card :bodyStyle="tstyle" :bordered="false">
       <div class="title"><i class="iconfont icon-fuwu"></i><span>服务项目</span></div>
       <div class="content">
-        <div class="items" v-for="(serive, sindex) in serviceLabel" :key="sindex">{{ serive.fieldLabel }}</div>
+        <div class="items" v-for="(serive, sindex) in bookingServiceItem" :key="sindex">{{ serive.name }}</div>
       </div>
     </a-card>
     <a-card :bodyStyle="tstyle" :bordered="false">
@@ -121,25 +121,24 @@
       title="添加附件"
       :width="900"
       :visible="fileModelvisible"
-      :confirmLoading="fileModelconfirm"
+      :confirmLoading="uploading"
       cancelText="关闭"
       okText="保存"
-      @ok="fileModelSubmit"
+      @ok="handleUpload"
       @cancel="fileModelCancel"
     >
       <div class="clearfix">
         <a-upload :file-list="upFileList" :remove="handleRemove" :before-upload="beforeUpload">
           <a-button> <a-icon type="upload" /> 选择文件 </a-button>
         </a-upload>
-        <a-button
-          type="primary"
-          :disabled="upFileList.length === 0"
-          :loading="uploading"
-          style="margin-top: 16px"
-          @click="handleUpload"
-        >
-          {{ uploading ? '上传中' : '确定' }}
-        </a-button>
+        <div class="uplad-type">
+          <div class="upload-label">附件类型：</div>
+          <a-select style="width: 120px" @change="handleAttachChange" placeholder="请输入附件类型">
+            <a-select-option v-for="(attach, aindex) in bookingAttachType" :key="aindex" :value="aindex">
+              {{ attach.name }}
+            </a-select-option>
+          </a-select>
+        </div>
       </div>
     </a-modal>
   </div>
@@ -147,7 +146,7 @@
 <script>
 import { GetRemark, AddRemark, GetFile, GetBookingLog, GetLog } from '@/api/modular/main/BookingLedger'
 import Vue from 'vue'
-import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { ACCESS_TOKEN, DICT_TYPE_TREE_DATA } from '@/store/mutation-types'
 import axios from 'axios'
 
 export default {
@@ -164,73 +163,6 @@ export default {
     return {
       id: this.$route.query.id,
       tstyle: { padding: '0 15px 20px', 'margin-bottom': '10px', background: '#fff' },
-      serviceLabel: [
-        {
-          xtype: 'checkboxfield',
-          fieldLabel: '熏蒸',
-          flex: 1,
-          labelAlign: 'right',
-          readOnly: true,
-          frame: true,
-          name: 'ISFUMIGATION',
-        },
-        {
-          xtype: 'checkboxfield',
-          fieldLabel: '仓储',
-          flex: 1,
-          labelAlign: 'right',
-          readOnly: true,
-          name: 'ISSTORAGE',
-        },
-        {
-          xtype: 'checkboxfield',
-          fieldLabel: '陆运',
-          flex: 1,
-          labelAlign: 'right',
-          readOnly: true,
-          name: 'ISLAND',
-        },
-        {
-          xtype: 'checkboxfield',
-          fieldLabel: '报关',
-          flex: 1,
-          labelAlign: 'right',
-          readOnly: true,
-          name: 'ISCUSTOMES',
-        },
-        {
-          xtype: 'checkboxfield',
-          fieldLabel: '报检',
-          flex: 1,
-          labelAlign: 'right',
-          readOnly: true,
-          name: 'ISINSPECTION',
-        },
-        {
-          xtype: 'checkboxfield',
-          fieldLabel: '订舱',
-          flex: 1,
-          labelAlign: 'right',
-          readOnly: true,
-          name: 'ISBOOKING',
-        },
-        {
-          xtype: 'checkboxfield',
-          fieldLabel: '使用代理',
-          flex: 1,
-          labelAlign: 'right',
-          readOnly: true,
-          name: 'ISAGENT',
-        },
-        {
-          xtype: 'checkboxfield',
-          fieldLabel: '分单签单',
-          flex: 1,
-          labelAlign: 'right',
-          readOnly: true,
-          name: 'ISHBLNO',
-        },
-      ],
       remarkModelvisible: false,
       bookingModelconfirm: false,
       remarkVal: '',
@@ -245,7 +177,11 @@ export default {
       file: {},
       upFileList: [],
       uploading: false,
-      realTimePercent: null
+      realTimePercent: null,
+      bookingServiceItem: [],
+      bookingAttachType: [],
+      attachName: '',
+      attachCode: '',
     }
   },
   created() {
@@ -253,8 +189,20 @@ export default {
     this.getFile()
     this.getBookingLog()
     this.getLog()
+    this.getLocal()
   },
   methods: {
+    getLocal() {
+      const dictTypeTree = Vue.ls.get(DICT_TYPE_TREE_DATA)
+      dictTypeTree.map((item, index) => {
+        if (item.code === 'booking_service_item') {
+          this.bookingServiceItem = item.children
+        }
+        if (item.code === 'booking_attach_type') {
+          this.bookingAttachType = item.children
+        }
+      })
+    },
     // 备注 - start
     getRemark() {
       GetRemark({
@@ -322,6 +270,9 @@ export default {
       this.handleUpload()
     },
     fileModelCancel() {
+      this.upFileList = []
+      this.attachCode = ''
+      this.attachName = ''
       this.fileModelvisible = false
     },
     handleRemove(file) {
@@ -334,20 +285,21 @@ export default {
       this.upFileList = [...this.upFileList, file];
       return false;
     },
-    binary2base64(bi) {
-        let str = '';
-        for (let i = 0, len = bi.length; i < len; i++) {
-            str += String.fromCharCode(bi[i]);
-        }
-        return btoa(str);
-    },
     handleUpload() {
-      const { upFileList } = this;
+      const { upFileList, attachCode, attachName } = this;
+      if (!upFileList) {
+        this.$message.error('请上传文件')
+        return false
+      }
+      if (!attachCode || !attachName) {
+        this.$message.error('请选择附件类型')
+        return false
+      }
       const formData = new FormData();
       formData.append('file', upFileList[0])
       formData.append('BookingId', this.id)
-      formData.append('TypeCode', '')
-      formData.append('TypeName', '')
+      formData.append('TypeCode', attachCode)
+      formData.append('TypeName', attachName)
       console.log('formData', formData, formData.get('file'))
       this.uploading = true;
       const token = Vue.ls.get(ACCESS_TOKEN)
@@ -360,91 +312,17 @@ export default {
         },
         data: formData
       }).then((res) => {
-        console.log(res.data)
+        this.uploading = false;
+        if (res.data.success) {
+          this.$message.success('上传成功')
+          this.getFile()
+        } else {
+          this.$message.error(res.data.message)
+        }
+        this.fileModelCancel()
       }).catch((err) => {
         console.log(err)
       })
-      // 默认接口上传
-      // AddFile({
-      //   file: formData,
-      //   BookingId: this.id,
-      //   TypeCode: '',
-      //   TypeName: ''
-      // })
-      //   .then((res) => {
-      //     if (res.success) {
-      //       this.fileList = res.data
-      //     }
-      //   })
-      //   .catch((err) => {
-      //     console.log(err)
-      //   })
-      // 普通上传
-      // const xml = new XMLHttpRequest();
-      // const token = 'Bearer ' + Vue.ls.get(ACCESS_TOKEN)
-      // const url = process.env.VUE_APP_API_BASE_URL + '/BookingOrder/addFile'
-      // debugger
-      // xml.open('POST', url, true) // 第三个值指定接口是否异步
-      // // 设置请求头信息
-      // xml.setRequestHeader('Authorization', token);
-      // // 监控上传进度
-      // xml.upload.onprogress = this.onprogressEvent
-      // // 接口调用成功回调
-      // xml.onload = this.onloadEvent
-      // // 接口调用失败处理
-      // xml.onerror = this.onerrorEvent
-      // xml.send({
-      //   file: formData,
-      //   BookingId: this.id,
-      //   TypeCode: '',
-      //   TypeName: ''
-      // })
-
-      // 二进制上传
-      // const _this = this;
-      // const reader = new FileReader();
-      // reader.readAsArrayBuffer(upFileList[0]);
-      // reader.onload = function () {
-      //   const file = this.result;
-      //   const view = new Uint8Array(file);
-      //   const str = _this.binary2base64(view);
-      //   console.log('读取', str);
-      //   AddFile({
-      //       file: str,
-      //       BookingId: _this.id,
-      //       TypeCode: '',
-      //       TypeName: ''
-      //     })
-      //     .then((res) => {
-      //       debugger
-      //       if (res.success) {
-      //         _this.upFileList = [];
-      //         _this.uploading = false;
-      //         _this.$message.success('upload successfully.');
-      //       }
-      //     })
-      //     .catch((err) => {
-      //       console.log(err)
-      //     })
-      // }
-    },
-    onprogressEvent(e) {
-      if (e.lengthComputable) {
-        // 可以获取到实时的接口进度
-            this.realTimePercent = +parseInt((e.loaded / e.total) * 100);
-            console.log('可以获取到实时的接口进度', this.realTimePercent)
-        }
-    },
-    onloadEvent(e) {
-      // 获取到接口调用成功后的返回数据
-      const res = JSON.parse(e.currentTarget.response);
-      console.log('获取到接口调用成功后的返回数据', res)
-      this.uploading = false
-    },
-    onerrorEvent(e) {
-      // 接口调用失败后的处理
-      console.log('接口调用失败后的处理', e)
-      this.uploading = false
     },
     // 附件 - end
 
@@ -476,6 +354,10 @@ export default {
           console.log(err)
         })
     },
+    handleAttachChange(index) {
+      this.attachCode = this.bookingAttachType[index].code
+      this.attachName = this.bookingAttachType[index].name
+    }
   },
 }
 </script>
@@ -747,4 +629,14 @@ export default {
     }
   }
 }
+.uplad-type{
+  display: flex;
+  margin-top: 20px;
+  .upload-label{
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    color: #666;
+  }
+}
 </style>