复制功能 + 下拉列表默认值

src/layouts/BasicLayout.vue

@@ -165,7 +165,7 @@ export default {
       this.setBlfrtList()
       this.setCtnallList()
       this.setLineList()
-      // this.setBookingInitData()
+      this.setBookingInitData()
     }
   }
 }

src/store/modules/booking.js

@@ -306,24 +306,14 @@ const booking = {
                 case 'service':
                   allData['serviceInitList'] = $data
                   break
-                case 'template':
-                  const shippernameInitList = []
-                  const consigneenameInitList = []
-                  const notifypartynameInitList = []
-                  $data.map((tempalte, cindex) => {
-                    if (tempalte.type.includes('10')) {
-                      shippernameInitList.push(tempalte)
-                    }
-                    if (tempalte.type.includes('20')) {
-                      consigneenameInitList.push(tempalte)
-                    }
-                    if (tempalte.type.includes('30')) {
-                      notifypartynameInitList.push(tempalte)
-                    }
-                  })
-                  allData['shippernameInitList'] = shippernameInitList
-                  allData['consigneenameInitList'] = consigneenameInitList
-                  allData['notifypartynameInitList'] = notifypartynameInitList
+                case 'sTemplate':
+                  allData['shippernameInitList'] = $data
+                  break
+                case 'fTemplate':
+                  allData['consigneenameInitList'] = $data
+                  break
+                case 'tTemplate':
+                  allData['notifypartynameInitList'] = $data
                   break
               }
             })

src/views/main/BookingLedger/detail/components/selectView.vue

@@ -1,50 +1,61 @@
 <template>
   <div class="select-content">
-    <a-select
-      size="small"
-      ref="selectView"
-      :class="`select-input-${type}`"
-      v-model="value"
-      show-search
-      :allowClear="true"
-      :filter-option="!this.openSearch ? filterOption : false"
-      :dropdownMatchSelectWidth="false"
-      :showArrow="!this.openSearch ? true : true"
-      :open="open"
-      optionLabelProp="label"
-      :notFoundContent="inLoading ? '加载中...' : '暂无数据'"
-      @focus="getSelectFirst"
-      @blur="getSelectBlur"
-      @select="selectOption"
-      @change="(value,option)=> debounce(this.handleChange, 200, option)"
-      @search="debounce(handleSearch, 300, $event)"
-    >
-      <a-select-option v-for="(item, index) in selectList" :key="index" :value="item[showLabel[0]] + index" :label="item[showLabel[0]]">
-        <template v-if="type === 'contractno'">
-          <div class="contractno-label">
-            <div class="title"> {{ item.contractNo }} / {{ item.contractName || '--' }} </div>
-            <div class="note"><span>{{ item.contractNote || '--' }}</span></div>
-          </div>
-        </template>
-        <template v-if="type === 'vessel'">
-          <div class="vessel-label">
-            <div class="title"> {{ item.vessel }} </div>
-            <div class="voyno">航次： <span>{{ item.voyno || '--' }}</span></div>
-            <div class="etd">ETD: <span>{{ item.etd || '--' }}</span></div>
-          </div>
-        </template>
-        <template v-else>
-          <template v-for="(label, lindex) in showLabel">
-            {{ item[label] }}
-            <template v-if="lindex != showLabel.length - 1"> / </template>
+    <div class="select-input">
+      <a-select
+        size="small"
+        ref="selectView"
+        :class="`select-input-${type}`"
+        v-model="value"
+        show-search
+        :allowClear="true"
+        :filter-option="!this.openSearch ? filterOption : false"
+        :dropdownMatchSelectWidth="false"
+        :showArrow="!this.openSearch ? true : true"
+        :open="open"
+        optionLabelProp="label"
+        :notFoundContent="inLoading ? '加载中...' : '暂无数据'"
+        v-clickDown="{ clickFun: () => {} , dblclickFun: this.dblclickFun }"
+        @focus="getSelectFirst"
+        @blur="getSelectBlur"
+        @select="selectOption"
+        @change="(value,option)=> debounce(this.handleChange, 200, option)"
+        @search="debounce(handleSearch, 300, $event)"
+      >
+        <a-select-option v-for="(item, index) in selectList" :key="index" :value="item[showLabel[0]] + index" :label="item[showLabel[0]]">
+          <template v-if="type === 'contractno'">
+            <div class="contractno-label">
+              <div class="title"> {{ item.contractNo }} / {{ item.contractName || '--' }} </div>
+              <div class="note"><span>{{ item.contractNote || '--' }}</span></div>
+            </div>
+          </template>
+          <template v-if="type === 'vessel'">
+            <div class="vessel-label">
+              <div class="title"> {{ item.vessel }} </div>
+              <div class="voyno">航次： <span>{{ item.voyno || '--' }}</span></div>
+              <div class="etd">ETD: <span>{{ item.etd || '--' }}</span></div>
+            </div>
+          </template>
+          <template v-else>
+            <template v-for="(label, lindex) in showLabel">
+              {{ item[label] }}
+              <template v-if="lindex != showLabel.length - 1"> / </template>
+            </template>
           </template>
-        </template>
-      </a-select-option>
-    </a-select>
-    <div v-show="!open" class="select_overlap" @mouseup="openSelect"></div>
+        </a-select-option>
+      </a-select>
+      <div v-show="!open" class="select_overlap" @mouseup="openSelect"></div>
+    </div>
+    <div class="copy-btn iconfont icon-fuzhi11" @click="dblclickFun"></div>
+    <!-- <div
+      v-show="!open"
+      class="select_overlap"
+      v-clickDown="{ clickFun: this.openSelect, dblclickFun: this.dblclickFun }"
+    >
+    </div> -->
   </div>
 </template>
 <script>
+import Vue from 'vue'
 import {
  GetPortloadlist,
  GetPortlist,
@@ -60,6 +71,29 @@ import {
 } from '@/api/modular/main/BookingLedger'
 import { mapGetters, mapActions } from 'vuex'
 let timer
+Vue.directive('clickDown', {
+	inserted(el, binding, vnode) {
+		let clickTimer = null
+		// 单击
+		el.addEventListener('click', () => {
+			if (clickTimer) {
+				window.clearTimeout(clickTimer);
+				clickTimer = null;
+			}
+			clickTimer = setTimeout(() => {
+        binding.value.clickFun()
+			}, 300);
+		})
+		// 双击
+		el.addEventListener('dblclick', () => {
+			if (clickTimer) {
+				window.clearTimeout(clickTimer);
+				clickTimer = null;
+			}
+      binding.value.dblclickFun()
+		})
+	}
+});
 export default {
   name: '',
   props: {
@@ -457,7 +491,8 @@ export default {
       }
     },
 
-    openSelect() {
+    openSelect(open) {
+      console.log('== 测试鼠标滑过 ==')
       if (!this.open) {
         this.getSelectFirst('', false)
       } else {
@@ -469,6 +504,27 @@ export default {
     },
     getSelectBlur (e) {
       this.open = false
+    },
+    dblclickFun () {
+      if (!this.value) {
+        this.$message.error('暂无可复制内容')
+        return false
+      }
+      this.copy(this.value)
+    },
+    copy(textValue) {
+      const textarea = document.createElement('textarea')
+      textarea.readOnly = 'readonly'
+      textarea.style.position = 'absolute'
+      textarea.style.left = '-9999px'
+      textarea.value = textValue
+      document.body.appendChild(textarea)
+      textarea.select()
+      const result = document.execCommand('Copy')
+      if (result) {
+        this.$message.success('复制成功')
+      }
+      document.body.removeChild(textarea)
     }
   }
 }
@@ -509,17 +565,31 @@ export default {
 }
 
 .select-content {
-  position: relative;
-  .select_overlap {
-    cursor: pointer;
-    height: 32px;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
+  display: flex;
+  .select-input{
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    .select_overlap {
+      cursor: pointer;
+      height: 32px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      opacity: 0;
+    }
+  }
+  .copy-btn{
+    width: 30px;
+    text-align: center;
+    color: #bbb;
+    font-size: 13px;
+    &:hover{
+      color: @primary-color;
+    }
   }
 }
 </style>

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

@@ -170,7 +170,6 @@
                     <template v-else>
                       <inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange" />
                     </template>
-                    <span class="iconfont icon-fuzhi11 copy-btn" @click="copyFun('contractno')"></span>
                   </div>
                 </a-form-model-item>
               </a-col>
@@ -212,7 +211,6 @@
                       :openSearch="true"
                       @change="getSelectViewRes"
                     ></selectView>
-                    <span class="iconfont icon-fuzhi11 copy-btn" @click="copyFun('vessel')"></span>
                   </div>
                 </a-form-model-item>
               </a-col>
@@ -1123,29 +1121,6 @@ export default {
         console.log(this.etdWeek)
       }
       console.log('== 日期修改 ==', type, value, this.details[type])
-    },
-    copyFun (type) {
-      const val = this.details[type]
-      if (!val) {
-        this.$message.error('暂无复制内容')
-        return false
-      }
-      console.log('复制内容', val)
-      this.copy(val)
-    },
-    copy(textValue) {
-      const textarea = document.createElement('textarea')
-      textarea.readOnly = 'readonly'
-      textarea.style.position = 'absolute'
-      textarea.style.left = '-9999px'
-      textarea.value = textValue
-      document.body.appendChild(textarea)
-      textarea.select()
-      const result = document.execCommand('Copy')
-      if (result) {
-        this.$message.success('复制成功')
-      }
-      document.body.removeChild(textarea)
     }
   }
 }

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

@@ -2477,4 +2477,11 @@ export default {
 .pono{
   text-align: left;
 }
+/deep/ .vxe-header--row th{
+  text-align: left !important;
+}
+/deep/ .vxe-cell--title{
+  width: 100%;
+  text-align: left;
+}
 </style>