Merge branch 'master' of http://60.209.125.238:13080/whm/BookingHeChuanFront

src/views/main/BookingLedger/detail/index.vue

@@ -30,6 +30,7 @@
                       :type="type"
                       :details="bookingDetails"
                       :rules="basicRules"
+                      :inPageLoading="inPageLoading"
                       @changeDetail="changeDetailFun"
                     ></basicInfo>
                     <!-- 收发通信息 -->

src/views/main/BookingLedger/detail/modules/basicInfo.vue

@@ -3,7 +3,7 @@
     <x-card>
       <div slot="content" style="margin-top: -5px;">
         <!-- <a-button type="primary" @click="checkbasic">  验证 </a-button> -->
-        <a-form-model style="margin-bottom:10px;" ref="basicFrom" :model="details" :rules="rules">
+        <a-form-model style="margin-bottom:10px;" ref="basicFrom" :selfUpdate="true" :model="details" :rules="rules">
           <a-row class="from-box" :gutter="10">
             <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
               <a-form-model-item
@@ -43,7 +43,8 @@
                 :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2"
                 has-feedback>
-                <a-input :allowClear="true" v-model="details.mblno" :disabled="ishd" />
+                <inputView type="mblno" :parentVal="details.mblno" :ishd="ishd" @getInputChange="inputChange"/>
+                <!-- <a-input :allowClear="true" v-model="mblno" :disabled="ishd" @onValuesChange="inputChange('mblno')"/> -->
               </a-form-model-item>
             </a-col>
             <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
@@ -105,7 +106,8 @@
                 :wrapperCol="wrapperCol2"
                 has-feedback
                 prop="pono">
-                <a-input :allowClear="true" v-model="details.pono" />
+                <inputView type="pono" :parentVal="details.pono" @getInputChange="inputChange"/>
+                <!-- <a-input :allowClear="true" v-model="details.pono" /> -->
               </a-form-model-item>
             </a-col>
             <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
@@ -117,7 +119,8 @@
                 has-feedback
                 prop="hblno"
               >
-                <a-input :allowClear="true" v-model="details.hblno" />
+                <inputView type="hblno" :parentVal="details.hblno" @getInputChange="inputChange"/>
+                <!-- <a-input :allowClear="true" v-model="details.hblno" /> -->
               </a-form-model-item>
             </a-col>
             <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
@@ -129,7 +132,8 @@
                 has-feedback
                 prop="bookingno"
               >
-                <a-input :allowClear="true" v-model="details.bookingno" />
+                <inputView type="bookingno" :parentVal="details.bookingno" @getInputChange="inputChange"/>
+                <!-- <a-input :allowClear="true" v-model="details.bookingno" /> -->
               </a-form-model-item>
             </a-col>
             <template v-if="details.carrierid === 'ESL'">
@@ -141,7 +145,8 @@
                   :wrapperCol="wrapperCol2"
                   has-feedback
                   prop="contractno">
-                  <a-input :allowClear="true" v-model="details.contractno" />
+                  <inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange"/>
+                  <!-- <a-input :allowClear="true" v-model="details.contractno" /> -->
                 </a-form-model-item>
               </a-col>
             </template>
@@ -176,7 +181,8 @@
                     </auto-complete>
                   </template>
                   <template v-else>
-                    <a-input :allowClear="true" v-model="details.contractno" />
+                    <inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.contractno" /> -->
                   </template>
                 </a-form-model-item>
               </a-col>
@@ -225,7 +231,8 @@
                     has-feedback
                     prop="lanecode"
                   >
-                    <a-input :allowClear="true" v-model="details.lanecode" />
+                    <inputView type="lanecode" :parentVal="details.lanecode" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.lanecode" /> -->
                   </a-form-model-item>
                 </a-col>
               </template>
@@ -239,7 +246,9 @@
                     has-feedback
                     prop="voynoinner"
                   >
-                    <auto-complete
+                    <!-- 内部航次暂无接口， 暂时改为输入框，避免卡顿 -->
+                    <inputView type="voynoinner" :parentVal="details.voynoinner" @getInputChange="inputChange"/>
+                    <!-- <auto-complete
                       :allowClear="true"
                       class="customer-input"
                       v-model="details.voynoinner"
@@ -249,7 +258,7 @@
                       @select="voynoinnerSelect"
                       @change="voynoinnerChange"
                       @focus="voynoinnerChange"
-                    />
+                    /> -->
                   </a-form-model-item>
                 </a-col>
               </template>
@@ -262,7 +271,8 @@
                   has-feedback
                   prop="voyno"
                 >
-                  <a-input :allowClear="true" v-model="details.voyno" />
+                  <inputView type="voyno" :parentVal="details.voyno" @getInputChange="inputChange"/>
+                  <!-- <a-input :allowClear="true" v-model="details.voyno" /> -->
                 </a-form-model-item>
               </a-col>
               <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@@ -278,7 +288,7 @@
                     <a-date-picker class="date-picker" format="YYYY-MM-DD" v-model="details.etd" @change="changeEtd">
                       <a-icon slot="suffixIcon" type="time" style="display: none" />
                     </a-date-picker>
-                    <span class="week" v-if="etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
+                    <span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
                   </div>
                 </a-form-model-item>
               </a-col>
@@ -308,7 +318,9 @@
                   :wrapperCol="wrapperCol"
                   has-feedback
                   prop="lanename">
-                  <auto-complete
+                  <!-- 航线暂无接口， 暂时改为输入框，避免卡顿 -->
+                  <inputView type="lanename" :parentVal="details.lanename" @getInputChange="inputChange"/>
+                  <!-- <auto-complete
                     :allowClear="true"
                     class="customer-input"
                     v-model="details.lanename"
@@ -318,7 +330,7 @@
                     @select="lanenameSelect"
                     @change="lanenameChange"
                     @focus="lanenameChange"
-                  />
+                  /> -->
                 </a-form-model-item>
               </a-col>
               <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
@@ -352,7 +364,8 @@
                     has-feedback
                     prop="contractno"
                   >
-                    <a-input :allowClear="true" v-model="details.contractno" />
+                    <inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.contractno" /> -->
                   </a-form-model-item>
                 </a-col>
               </template>
@@ -478,67 +491,6 @@
             </template>
           </vxe-toolbar>
 
-          <!-- <vxe-table
-            border
-            show-overflow
-            keep-source
-            ref="xTable"
-            :data="tableData"
-            :edit-config="{ trigger: 'click', mode: 'cell', icon: 'vxe-icon-edit', showStatus: true }"
-            :height="500"
-          >
-            <vxe-column type="checkbox" width="60"></vxe-column>
-            <vxe-column field="name" title="联系人" :edit-render="{}">
-              <template #edit="{ row }">
-                <vxe-pulldown ref="xDown2">
-                  <template #default>
-                    <vxe-input
-                      v-model="row.name"
-                      @focus="focusEvent2(row.name)"
-                      @keyup="keyupEvent2(row.name)"
-                    ></vxe-input>
-                  </template>
-                  <template #dropdown>
-                    <vxe-list height="200" class="my-dropdown2" :data="customerContactsDataList" auto-resize>
-                      <template #default="{ items }">
-                        <div class="list-item2" v-for="item in items" :key="item.id" @click="selectEvent2(row, item)">
-                          <span>{{ item.name }}</span>
-                        </div>
-                      </template>
-                    </vxe-list>
-                  </template>
-                </vxe-pulldown>
-              </template>
-            </vxe-column>
-            <vxe-column field="email" title="邮箱" :edit-render="{}">
-              <template #edit="{ row }">
-                <vxe-input v-model="row.email" type="text"></vxe-input>
-              </template>
-            </vxe-column>
-            <vxe-column field="tel" title="电话" :edit-render="{}">
-              <template #edit="{ row }">
-                <vxe-input v-model="row.tel" type="text"></vxe-input>
-              </template>
-            </vxe-column>
-            <vxe-column field="remark" title="备注" :edit-render="{}">
-              <template #edit="{ row }">
-                <vxe-input v-model="row.remark" type="text"></vxe-input>
-              </template>
-            </vxe-column>
-            <vxe-column field="roleCode" title="角色" :edit-render="{}">
-              <template #edit="{ row }">
-                <vxe-select v-model="row.roleCode" multiple clearable>
-                  <vxe-option
-                    v-for="item in ContactType"
-                    :key="item.id"
-                    :value="item.name"
-                    :label="item.name"
-                  ></vxe-option>
-                </vxe-select>
-              </template>
-            </vxe-column>
-          </vxe-table> -->
-
           <ve-table
             borderY
             :columns="columns"
@@ -562,6 +514,7 @@
 <script>
 import { XCard } from '@/components'
 import { AutoComplete } from 'ant-design-vue'
+import inputView from './inputView'
 import {
   DjyCustomerpage,
   DjyCustomerSuggest,
@@ -580,7 +533,8 @@ export default {
   name: 'BookingDetail',
   components: {
     XCard,
-    AutoComplete
+    AutoComplete,
+    inputView,
   },
   props: {
     details: {
@@ -598,6 +552,10 @@ export default {
       default: () => {
         return {}
       }
+    },
+    inPageLoading: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -898,6 +856,12 @@ export default {
           detail: nval,
           type: 'baseInfo'
         })
+        console.log('== 数据更新 ==', nval.etd)
+        if (nval.etd) {
+          this.etdWeek = this.getWeek(nval.etd)
+        } else {
+          this.etdWeek = ''
+        }
       },
       deep: true
     },
@@ -921,6 +885,7 @@ export default {
             resolve(true);
           } else {
             console.log('验证失败!');
+            // eslint-disable-next-line prefer-promise-reject-errors
             reject(false);
           }
         });
@@ -1022,6 +987,8 @@ export default {
       this.getUserList('custservice')
       if (this.details.etd) {
         this.etdWeek = this.getWeek(this.details.etd)
+      } else {
+        this.etdWeek = ''
       }
       this.ContactType = this.$options.filters['dictData']('booking_contact_type')
     },
@@ -1046,6 +1013,7 @@ export default {
         })
     },
     customerSelect(value) {
+      console.log('客户 -  这里点击更新了数据', value)
       this.customerData.forEach(item => {
         if (item.shortName == value) {
           this.details.op = item.op
@@ -1365,7 +1333,11 @@ export default {
     },
     // 关系人弹窗 - end
     changeEtd(date, dateString) {
+      if (!dateString) {
+        this.details.etd = null
+      } else {
         this.details.etd = dateString
+      }
       this.etdWeek = this.getWeek(dateString)
     },
     getWeek(dateTime) {
@@ -1417,8 +1389,13 @@ export default {
         this.details.vessel = this.details.vessel ? this.details.vessel : ''
       }
       this.getContractno(value)
-    }
+    },
     // 约号 - end
+    inputChange ({ type, value }) {
+      this.details[type] = value
+      console.log(this.details[type])
+      this.$forceUpdate()
+    }
   }
 }
 </script>

src/views/main/BookingLedger/detail/modules/billInfo.vue

@@ -59,9 +59,9 @@
                 has-feedback
                 prop="issueplace"
               >
+                <!-- 这里需要改成可输入 -->
                 <auto-complete
                   :allowClear="true"
-                  :disabled="true"
                   :dropdown-match-select-width="false"
                   :dropdown-style="{ width: '200px'}"
                   v-model="details.issueplace"

src/views/main/BookingLedger/detail/modules/cargoInfo.vue

@@ -15,7 +15,8 @@
               </div>
               <a-form-model-item has-feedback prop="marks" class="textarea-label" label="">
                 <div class="bottom">
-                  <a-textarea class="input-box" v-model="details.marks" @change="valueChange('marks')"/>
+                  <!-- <textareaView id="notifyparty-scroll" :parentVal="details.notifyparty" type="notifyparty" @getTextareaChange="getTextareaChange"/> -->
+                  <a-textarea class="input-box" v-model="details.marks" @blur="valueChange('marks')"/>
                   <div
                     class="line-count"
                     id="shipper-scroll-right"
@@ -69,7 +70,7 @@
               </div>
               <a-form-model-item has-feedback prop="description" class="textarea-label" label="">
                 <div class="bottom">
-                  <a-textarea class="input-box" v-model="details.description" @change="valueChange('description')"/>
+                  <a-textarea class="input-box" v-model="details.description" @blur="valueChange('description')"/>
                   <div
                     class="line-count"
                     id="shipper-scroll-right"

src/views/main/BookingLedger/detail/modules/inputView.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-input
+    :type="inputType"
+    :allowClear="true"
+    v-model="value"
+    @blur="inputBlur"
+    :disabled="ishd"
+    @change="inputChange"
+  />
+</template>
+<script>
+export default {
+  name: '',
+  props: {
+    parentVal: {
+      type: [String, Number],
+      default: '',
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+    ishd: {
+      type: Boolean,
+      default: false,
+    },
+    inputType: {
+      type: String,
+      default: 'text',
+    },
+  },
+  data() {
+    return {
+      value: this.parentVal || '',
+    }
+  },
+  watch: {
+    parentVal(nval, oval) {
+      this.value = nval
+    },
+  },
+  mounted() {},
+  methods: {
+    inputBlur() {
+      this.$emit('getInputChange', {
+        type: this.type,
+        value: this.value
+      })
+    },
+    inputChange(e) {
+      if (e.type === 'click' && !this.value) {
+        this.$emit('getInputChange', {
+          type: this.type,
+          value: this.value
+        })
+      }
+    }
+  }
+}
+</script>

src/views/main/BookingLedger/detail/modules/mailingInfo.vue

@@ -35,14 +35,15 @@
                     </div>
                   </div>
                   <div class="bottom">
-                    <a-textarea
+                    <textareaView id="shipper-scroll" :parentVal="details.shipper" type="shipper" @getTextareaChange="getTextareaChange"/>
+                    <!-- <a-textarea
                       id="shipper-scroll"
                       :defaultValue="details.shipper"
                       v-model="showShipper"
                       :auto-size="{ minRows: 2, maxRows: 5 }"
                       style="height: 120px"
                       @blur="textareaChange($event, 'shipper')"
-                    />
+                    /> -->
                     <div
                       class="line-count"
                       id="shipper-scroll-right"
@@ -78,14 +79,15 @@
                     </div>
                   </div>
                   <div class="bottom">
-                    <a-textarea
+                    <textareaView id="consignee-scroll" :parentVal="details.consignee" type="consignee" @getTextareaChange="getTextareaChange"/>
+                    <!-- <a-textarea
                       id="consignee-scroll"
                       :defaultValue="details.consignee"
                       v-model="showConsignee"
                       :auto-size="{ minRows: 2, maxRows: 5 }"
                       style="height: 120px"
                       @blur="textareaChange($event, 'consignee')"
-                    />
+                    /> -->
                     <div
                       class="line-count"
                       id="consignee-scroll-right"
@@ -119,14 +121,15 @@
                     </div>
                   </div>
                   <div class="bottom">
-                    <a-textarea
+                    <textareaView id="notifyparty-scroll" :parentVal="details.notifyparty" type="notifyparty" @getTextareaChange="getTextareaChange"/>
+                    <!-- <a-textarea
                       id="notifyparty-scroll"
                       :defaultValue="details.notifyparty"
                       :auto-size="{ minRows: 2, maxRows: 5 }"
                       style="height: 120px"
                       v-model="showNotifier"
                       @blur="textareaChange($event, 'notifyparty')"
-                    />
+                    /> -->
                     <div
                       class="line-count"
                       id="notifyparty-scroll-right"
@@ -256,7 +259,7 @@
                     has-feedback
                     prop="eta"
                   >
-                    <a-date-picker format="YYYY-MM-DD" v-model="details.eta">
+                    <a-date-picker format="YYYY-MM-DD" v-model="details.eta" @change="etaChange">
                       <a-icon slot="suffixIcon" type="time" style="display: none" />
                     </a-date-picker>
                   </a-form-model-item>
@@ -352,7 +355,8 @@
                     has-feedback
                     prop="placereceipt"
                   >
-                    <a-input :allowClear="true" v-model="details.placereceipt" />
+                    <inputView type="placereceipt" :parentVal="details.placereceipt" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.placereceipt" /> -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
@@ -386,7 +390,8 @@
                     has-feedback
                     prop="portload"
                   >
-                    <a-input :allowClear="true" v-model="details.portload" />
+                    <inputView type="portload" :parentVal="details.portload" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.portload" /> -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
@@ -420,7 +425,8 @@
                     has-feedback
                     prop="transport"
                   >
-                    <a-input :allowClear="true" v-model="details.transport" />
+                    <inputView type="transport" :parentVal="details.transport" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.transport" /> -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
@@ -454,7 +460,8 @@
                     has-feedback
                     prop="portdischarge"
                   >
-                    <a-input :allowClear="true" v-model="details.portdischarge" />
+                    <inputView type="portdischarge" :parentVal="details.portdischarge" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.portdischarge" /> -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
@@ -488,7 +495,8 @@
                     has-feedback
                     prop="destination"
                   >
-                    <a-input :allowClear="true" v-model="details.destination" />
+                    <inputView type="destination" :parentVal="details.destination" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.destination" /> -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
@@ -522,7 +530,8 @@
                     has-feedback
                     prop="placedelivery"
                   >
-                    <a-input :allowClear="true" v-model="details.placedelivery" />
+                    <inputView type="placedelivery" :parentVal="details.placedelivery" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.placedelivery" /> -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
@@ -534,7 +543,8 @@
                     has-feedback
                     prop="pkgs"
                   >
-                    <a-input :allowClear="true" v-model="details.pkgs" type="number" @change="changePkgs"/>
+                    <inputView type="pkgs" :parentVal="details.pkgs" inputType="number" @getInputChange="inputChange"/>
+                    <!-- <a-input :allowClear="true" v-model="details.pkgs" type="number" @change="changePkgs"/> -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
@@ -569,7 +579,9 @@
                     prop="kgs"
                   >
                     <div class="line-box">
-                      <a-input :allowClear="true" v-model="details.kgs" /><span class="unit">KGS</span>
+                      <inputView type="kgs" :parentVal="details.kgs" @getInputChange="inputChange"/>
+                      <!-- <a-input :allowClear="true" v-model="details.kgs" /> -->
+                      <span class="unit">KGS</span>
                     </div>
                   </a-form-model-item>
                 </a-col>
@@ -583,7 +595,9 @@
                     prop="cbm"
                   >
                     <div class="line-box">
-                      <a-input :allowClear="true" v-model="details.cbm" /><span class="unit">CBM</span>
+                      <inputView type="cbm" :parentVal="details.cbm" @getInputChange="inputChange"/>
+                      <!-- <a-input :allowClear="true" v-model="details.cbm" /> -->
+                      <span class="unit">CBM</span>
                     </div>
                   </a-form-model-item>
                 </a-col>
@@ -669,7 +683,8 @@
 <script>
 import { XCard } from '@/components'
 import { AutoComplete } from 'ant-design-vue'
-
+import inputView from './inputView'
+import textareaView from './textareaView'
 import {
   BookingTemplate,
   GetYardlist,
@@ -682,7 +697,9 @@ import {
 export default {
   components: {
     XCard,
-    AutoComplete
+    AutoComplete,
+    textareaView,
+    inputView
   },
   props: {
     details: {
@@ -701,7 +718,6 @@ export default {
 
   data() {
     return {
-      senderInfo: 'Hope has always been like a young man, clean and pure.',
       labelCol: {
         xs: { span: 24 },
         sm: { span: 8 },
@@ -1645,14 +1661,45 @@ export default {
         if (a.length == 1 && a.substr(0, 1) != "0") strRet += arr3[a.substr(0, 1)];
         return strRet
     },
+    etaChange(date, dateString) {
+      // if (!dateString) {
+      //   this.details.eta = null
+      // }
+    },
     closingdateChange (date, dateString) {
-      this.details.closingdate = dateString
+      if (!dateString) {
+        this.details.closingdate = null
+      } else {
+        this.details.closingdate = dateString + ':00'
+      }
     },
     closevgmdateChange (date, dateString) {
-      this.details.closevgmdate = dateString
+      if (!dateString) {
+        this.details.closevgmdate = null
+      } else {
+      this.details.closevgmdate = dateString + ':00'
+      }
     },
     closedocdateChange (date, dateString) {
-      this.details.closedocdate = dateString
+      if (!dateString) {
+        this.details.closedocdate = null
+      } else {
+        this.details.closedocdate = dateString + ':00'
+      }
+    },
+    getTextareaChange ({ type, value }) {
+      console.log('== 输入框更新 ==', type, value)
+      this.details[type] = value
+      console.log(this.details[type])
+      this.$forceUpdate()
+    },
+    inputChange ({ type, value }) {
+      this.details[type] = value
+      console.log(this.details[type])
+      if (type === 'pkgs') {
+        this.changePkgs()
+      }
+      this.$forceUpdate()
     }
   }
 }

src/views/main/BookingLedger/detail/modules/operationArea.vue

@@ -1568,7 +1568,7 @@ export default {
             this.traceModalVisible = false
             this.traceValue = []
           } else {
-            this.$message.success(res.message)
+            this.$message.error(res.message)
             this.traceModalVisible = false
             this.traceValue = []
           }

src/views/main/BookingLedger/detail/modules/textareaView.vue

@@ -0,0 +1,51 @@
+<template>
+  <a-textarea
+    v-model="value"
+    :auto-size="{ minRows: 2, maxRows: 5 }"
+    style="height: 120px"
+    @blur="textareaBlur"
+    @change="textareaChange"
+  />
+</template>
+<script>
+export default {
+  name: '',
+  props: {
+    parentVal: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      value: this.parentVal || ''
+    }
+  },
+  watch: {
+    parentVal(nval, oval) {
+      this.value = nval
+    }
+  },
+  mounted() {},
+  methods: {
+    textareaBlur() {
+      this.$emit('getTextareaChange', {
+        type: this.type,
+        value: this.value
+      })
+    },
+    textareaChange(e) {
+      if (e.type === 'click' && !this.value) {
+        this.$emit('getTextareaChange', {
+          type: this.type,
+          value: this.value
+        })
+      }
+    }
+  }
+}
+</script>

src/views/main/DjyApiAuth/index.vue

@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <a-row :gutter="24">
+      <a-col :md="24" :sm="24" style="padding: 0 0 0 0" class="content-box">
+        <x-card>
+          <div slot="content" class="table-page-search-wrapper">
+            <a-form layout="inline" :form="form">
+              <a-row :gutter="48">
+                <a-col :md="6" :sm="24">
+                  <a-form-item label="品名分类">
+                    <a-input
+                      placeholder="请输入品名分类"
+                      v-decorator="['goodsCategory', { rules: [{ required: false, message: '请输入品名分类' }] }]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :md="6" :sm="24">
+                  <a-form-item label="品名分类名称">
+                    <a-input
+                      placeholder="请输入品名分类名称"
+                      v-decorator="[
+                        'goodsCategoryName',
+                        { rules: [{ required: false, message: '请输入品名分类名称' }] },
+                      ]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :md="12" :sm="24" :labelCol="{ span: 2, offset: 12 }">
+                  <span class="table-page-search-submitButtons" style="text-align: right">
+                    <a-button type="primary" @click="tableRefresh">查询</a-button>
+                    <a-button style="margin-left: 8px" @click="tableReset">重置</a-button>
+                  </span>
+                </a-col>
+              </a-row>
+            </a-form>
+          </div>
+        </x-card>
+        <x-card class="content-table">
+          <div slot="content" class="table-page-search-wrapper" :style="{ marginTop: '-8px' }">
+            <vxe-toolbar>
+              <template #buttons>
+                <a-button type="primary" icon="edit" @click="addProject">新增品名分类</a-button>
+              </template>
+              <template #tools>
+                <div class="right">
+                  <span class="tab-btn" @click="tableRefresh">
+                    <a-icon type="redo" :style="{ fontSize: '16px' }" /> 刷新
+                  </span>
+                </div>
+              </template>
+            </vxe-toolbar>
+            <vxe-grid
+              ref="xGrid"
+              v-bind="gridOptions"
+              row-class-name="line-box"
+              @page-change="handlePageChange"
+              style="margin-top: 6px"
+            >
+              <template #operate="{ row }">
+                <vxe-button type="text" icon="vxe-icon-edit" @click="editColumns(row)"></vxe-button>
+                <vxe-button type="text" icon="vxe-icon-delete" @click="removeColumns(row)"></vxe-button>
+              </template>
+            </vxe-grid>
+          </div>
+        </x-card>
+      </a-col>
+    </a-row>
+    <add-form ref="addForm" :fromData="addFromData" :type="addFromType" @ok="handleOk" />
+  </div>
+</template>
+  <script>
+import { XCard } from '@/components'
+import initData from './modules/initData'
+import columnSetting from '@/components/tableColumnSetting'
+import addForm from './modules/addFrom'
+import {
+  GetParaGoodsCategoryPage,
+  SaveParaGoodsCategoryInfo,
+  DeleteParaGoodsCategoryInfo,
+  GetParaGoodsCategoryInfo,
+} from '@/api/modular/main/ProductCategoryList'
+
+export default {
+  name: 'BookingLedger',
+  components: {
+    XCard,
+    columnSetting,
+    addForm,
+  },
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      setVisible: false,
+      showColumns: null,
+      gridOptions: {
+        border: false,
+        resizable: true,
+        showOverflow: true,
+        loading: true,
+        round: true,
+        autoResize: true,
+        align: 'center',
+        columnConfig: { resizable: true },
+        importConfig: {},
+        exportConfig: {},
+        pagerConfig: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 10,
+          pageSizes: [10, 20, 50, 100, 200, 500],
+        },
+        columns: JSON.parse(JSON.stringify(initData.columns)),
+        data: [],
+      },
+      addFromData: {},
+      addFromType: 'add',
+    }
+  },
+  created() {
+    this.showColumns = JSON.parse(JSON.stringify(initData.columns))
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    init(queryParam = {}) {
+      this.gridOptions.pagerConfig = {
+        total: 0,
+        currentPage: 1,
+        pageSize: 10,
+        pageSizes: [10, 20, 50, 100, 200, 500],
+      }
+      this.gridOptions.data = []
+      this.getList(queryParam)
+    },
+    handlePageChange({ currentPage, pageSize }) {
+      console.log(currentPage, pageSize)
+      const {
+        form: { validateFields },
+      } = this
+      validateFields((err, values) => {
+        if (!err) {
+          if (values.createdTime) {
+            const time = values.createdTime.map((item, index) => {
+              const str = this.dateFtt('YYYY-MM-DD', item._d)
+              return str
+            })
+            console.log(time)
+            values.createdTime = time
+          }
+          if (values.updataTime) {
+            const _time = values.updataTime.map((item, index) => {
+              const str = this.dateFtt('YYYY-MM-DD', item._d)
+              return str
+            })
+            console.log(_time)
+            values.updataTime = _time
+          }
+          this.gridOptions.pagerConfig.currentPage = currentPage
+          this.gridOptions.pagerConfig.pageSize = pageSize
+          this.getList(values)
+        }
+      })
+    },
+    getList(queryParam = {}) {
+      const { currentPage, pageSize } = this.gridOptions.pagerConfig
+      GetParaGoodsCategoryPage({
+        goodsCategory: queryParam.goodsCategory,
+        goodsCategoryName: queryParam.goodsCategoryName,
+        pageNo: currentPage,
+        pageSize: pageSize,
+      })
+        .then((res) => {
+          const _data = res.data.items.map((item, index) => {
+            item.row_id = (currentPage - 1) * pageSize + index
+            return item
+          })
+          this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalCount)
+          this.$set(this.gridOptions, 'data', JSON.parse(JSON.stringify(_data)))
+          this.$set(this.gridOptions, 'loading', false)
+          this.$forceUpdate()
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    editColumns(data) {
+      this.addFromType = 'edit'
+      this.addFromId = data.id
+      GetParaGoodsCategoryInfo({
+        id: this.addFromId,
+      }).then((res) => {
+        if (res.success) {
+          this.addFromData = res.data
+          console.log(this.addFromData)
+          this.$refs.addForm.add()
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
+    removeColumns(data) {
+      DeleteParaGoodsCategoryInfo(data.id).then((res) => {
+        if (res.success) {
+          this.$message.success('删除成功')
+          const {
+            form: { validateFields },
+          } = this
+          validateFields((err, values) => {
+            if (!err) {
+              this.init(values)
+            }
+          })
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
+    addProject() {
+      this.addFromData = {}
+      this.addFromType = 'add'
+      this.addFromId = ''
+      this.$refs.addForm.add()
+    },
+    columnChange(data) {
+      const arr = []
+      data.map((item, index) => {
+        if (item.checked) {
+          arr.push(item)
+        }
+      })
+      this.showColumns = []
+      this.showColumns = arr
+      this.gridOptions.columns = arr
+      this.$forceUpdate()
+    },
+    confirmRemove(e) {
+      console.log(e)
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const pkIdArr = select.map((item, index) => {
+        return Number(item.id)
+      })
+      console.log(pkIdArr)
+      DeleteParaGoodsCategoryInfo({
+        Ids: pkIdArr,
+      }).then((res) => {
+        if (res.success) {
+          this.$message.success('删除成功')
+          const {
+            form: { validateFields },
+          } = this
+          validateFields((err, values) => {
+            if (!err) {
+              this.init(values)
+            }
+          })
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
+    cancelRemove(e) {
+      console.log(e)
+      this.$message.error('取消操作')
+    },
+    handleOk() {
+      const form = this.$refs.addForm.form
+      form.validateFields((errors, values) => {
+        if (!errors) {
+          console.log('values', values)
+          SaveParaGoodsCategoryInfo({
+            id: this.addFromId,
+            goodsCode: values.goodsCode,
+            goodsNameCN: values.goodsNameCN,
+            goodsNameEN: values.goodsNameEN,
+            goodsDesp: values.goodsDesp,
+            goodsCategory: values.goodsCategory,
+            goodsCategoryName: values.goodsCategoryName,
+          })
+            .then((res) => {
+              this.$refs.addForm.$data.confirmLoading = false
+              if (res.success) {
+                this.$message.success('保存成功')
+                this.$refs.addForm.handleCancel()
+                this.init()
+              } else {
+                this.$message.error(res.message)
+              }
+            })
+            .catch((err) => {
+              console.log(err)
+            })
+        }
+      })
+    },
+    tableRefresh() {
+      const {
+        form: { validateFields },
+      } = this
+      validateFields((err, values) => {
+        if (!err) {
+          this.init(values)
+        }
+      })
+    },
+    tableReset() {
+      this.form.resetFields()
+      this.init()
+    },
+    tableHeaderEdit() {},
+  },
+}
+</script>
+  

src/views/main/DjyApiAuth/modules/addFrom.vue

@@ -0,0 +1,170 @@
+<template>
+  <a-modal
+    :title="`品名分类编辑（${type=='edit' ? '修改' : '新增'}）`"
+    :width="900"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    cancelText="关闭"
+    okText="保存"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="formLoading">
+      <a-form :form="form">
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item
+              label="品名分类"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input placeholder="请输入品名分类" v-decorator="['goodsCategory', {rules: [{required: true, message: '请输入品名分类！'}]}]" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item
+              label="品名分类名称"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              has-feedback
+            >
+              <a-input placeholder="请输入品名分类名称" v-decorator="['goodsCategoryName']" />
+            </a-form-item>
+          </a-col>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+<script>
+import { AutoComplete } from 'ant-design-vue'
+import {
+  QueryParaGoodsCategoryInfo
+} from '@/api/modular/main/ProductNameList'
+  export default {
+    props: {
+      type: {
+        type: String,
+        default: 'add'
+      },
+      fromData: {
+        type: Object,
+        default: null
+      }
+    },
+    components: {
+      AutoComplete
+    },
+    data () {
+      return {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 6 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 }
+        },
+        labelCol2: {
+          xs: { span: 24 },
+          sm: { span: 3 }
+        },
+        wrapperCol2: {
+          xs: { span: 24 },
+          sm: { span: 20 }
+        },
+        visible: false,
+        confirmLoading: false,
+        formLoading: true,
+        form: this.$form.createForm(this),
+        goodsCategory: []
+      }
+    },
+    computed: {
+      goodsCategoryArr () {
+        if (this.goodsCategory) {
+        const arr = []
+        this.goodsCategory.map((item, index) => {
+          if (!arr.includes(item.goodsCategory)) {
+            arr.push(item.goodsCategory)
+          }
+        })
+        return arr
+      } else {
+        return []
+      }
+      }
+    },
+    watch: {
+      fromData: {
+        handler (nval, oval) {
+          if (!this.formLoading) {
+            this.$nextTick(() => {
+              this.form.setFieldsValue(nval)
+            })
+          }
+        },
+        deep: true
+      }
+    },
+    methods: {
+      add () {
+        this.visible = true
+        this.formLoading = false
+      },
+      handleSubmit () {
+        const { form: { validateFields } } = this
+        this.confirmLoading = true
+        validateFields((errors, values) => {
+          if (!errors) {
+            this.$emit('ok', values)
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        this.form.resetFields()
+        this.visible = false
+      },
+      getGoodsCategory(name = '') {
+        // console.log('暂无接口', name, this.goodsCategory, this.goodsCategoryArr)
+        QueryParaGoodsCategoryInfo({
+          queryItem: name,
+          top: 50
+        }).then((res) => {
+          this.goodsCategory = res.data
+        })
+      },
+      goodsCategorySelect(value) {
+        const index = this.goodsCategoryArr.indexOf(value)
+        this.form.setFieldsValue({
+          goodsCategory: this.goodsCategory[index].goodsCategory || '',
+          goodsCategoryName: this.goodsCategory[index].goodsCategoryName || ''
+        })
+      },
+      goodsCategoryChange(value) {
+        this.getGoodsCategory(value)
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .line{
+    height: 30px;
+    line-height:30px;
+    text-align: right;
+    font-size: 14px;
+    span{
+      margin-left: 20px;
+    }
+    span:nth-of-type(2){
+      width: 120px;
+      display: inline-block;
+      text-align: left;
+    }
+  }
+</style>

src/views/main/DjyApiAuth/modules/initData.js

@@ -0,0 +1,11 @@
+export default {
+  columns: [
+    { type: 'seq', width: 60, noDraggable: true },
+    { field: 'goodsCategory', title: '品名分类', showHeaderOverflow: true, sortable: true },
+    { field: 'goodsCategoryName', title: '品名分类名称', showHeaderOverflow: true, sortable: true },
+    { field: 'createUserName', title: '创建者名称', showHeaderOverflow: true, sortable: true },
+    { field: 'createTime', title: '创建时间', showHeaderOverflow: true, sortable: true },
+    { field: 'updateTime', title: '更新时间', showHeaderOverflow: true, sortable: true },
+    { field: 'operate', title: '操作', width: 150, noDraggable: true, slots: { default: 'operate' }, fixed: 'right', resizable: false }
+  ]
+}