md

src/components/AirTable/index.vue

@@ -343,10 +343,10 @@ export default {
 
 <style lang="scss">
   // @import "../../../public/style/mixin.scss";
-  @import '@/styles/mixin.scss';
+  @import '@/assets/styles/mixin.scss';
 
   .air-table-wrapper {
-      @include wh(100%, 100%);
+      // @include wh(100%, 100%);
       .seled {
           background: #f5f5f5 !important;
       }
@@ -390,7 +390,7 @@ export default {
           .air-table__context--list {
               cursor: pointer;
               height: 48px;
-              @include flexCenter(flex-start,center);
+              // @include flexCenter(flex-start,center);
               .air-table__context--icon{
                   font-size: 14px;
                   margin-left:20px;

src/components/XdPageContainer/index.vue

@@ -39,9 +39,6 @@ export default {
       let h1 = window.innerHeight;
       let h2 = this.$refs.pageHeader.offsetHeight;
       let contentHeight = h1 - h2-190;
-      console.log("h1: ", h1);
-      console.log("contentHeight: ", contentHeight);
-
       this.contentHeight = contentHeight;
     }, 500),
   },

src/components/XdTable/index.vue

@@ -79,6 +79,9 @@
     </div>
     <div>
       <orig-table ref="table" :config="config"  />
+
+      <!-- <orig-table ref="table" :config="config" v-drag  /> -->
+
       <pagination
             v-show="total>0"
             :total="total"
@@ -89,11 +92,11 @@
             @pagination="queryTable"
           />
     </div>
-    <!-- <div id="rightMenu">
+    <div id="rightMenu" class="menuDiv">
-      <ul>
+      <ul  class="menuUl">
         <li @click="onCopySelectCell"><span>复制</span></li>
       </ul>
-    </div> -->
+    </div>
   </div>
 </template>
 <script>
@@ -104,7 +107,7 @@ import origTable from './table.jsx'
 const components = { origTable, draggable }
 
 export default {
-  name: 'XadvTable',
+  name: 'XdTable',
   components,
   // mixins: [setHeight],
   props: {
@@ -138,6 +141,215 @@ export default {
     },
 
 
+  },
+  directives: {
+      drag: {
+          // 指令的定义
+          inserted: function (el, binding, vnode) {
+              var oDiv = el;
+              //监听用户鼠标事件
+              oDiv.onmousedown = function (ev) {
+                  //初始化不显示
+                  vnode.context.toggleShow=false;
+                  //确保用户在移动鼠标的时候只初始化一次选中
+                  var flag = true;
+                  //用来存储列表
+                  var selList = [];
+                  //获得指令下的dom对应的表格
+                  var fileNodes = oDiv.getElementsByTagName("tr");
+                  var countI = 0;
+                  //获得鼠标
+                  var evt = window.event || arguments[0];
+                  var startX = (evt.x || evt.clientX);
+                  var startY = (evt.y || evt.clientY);
+                  var top,left;
+                  //时时获得
+                  top=getY(oDiv);
+                  left=getX(oDiv);
+                  var selDiv = document.createElement("div");
+                  selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
+                  selDiv.id = "selectDiv";
+                  document.getElementsByClassName("el-table__body")[0].appendChild(selDiv);
+                  selDiv.style.left = startX + "px";
+                  selDiv.style.top = startY + "px";
+                  var _x = null;
+                  var _y = null;
+                  vnode.context.clearEventBubble(evt);
+                  // //打开开关
+                  vnode.context.mouseflag = true;
+                  // //鼠标拖动时画框
+                  document.onmousemove = function (ev) {
+                      evt = window.event || arguments[0];
+                      _x = (evt.x || evt.clientX);
+                      _y = (evt.y || evt.clientY);
+                      //为了确定是点击事件还是移动事件
+                      if(Math.abs(_x - startX)<5 && Math.abs(_y - startY)<5){
+                          return;
+                      }
+                      //为了确保只有一次的渲染每次框选都把默认选中为空
+                      if(flag){
+                          //重置选中css
+                          for (var i = 0; i < fileNodes.length; i++) {
+                              if (fileNodes[i].className.indexOf("el-table__row") != -1) {
+                                  fileNodes[i].className = "el-table__row";
+                                  selList.push(fileNodes[i]);
+                              }
+                          }
+                          // const tableBody = document.querySelector(".el-table__body");
+                          // tableBody.children[1].childNodes.forEach(element => {
+                          //   for (let index = 0; index < element.childNodes.length; index++) {
+                          //     // 获取当前单元格
+                          //     const cell = element.childNodes[index];
+
+                          //     if (
+                          //       // 判断选中的单元格是否在鼠标拉框的范围内
+                          //       rectLeft <
+                          //         cell.offsetLeft - this.tableRectLeft + cell.offsetWidth &&
+                          //       rectLeft + this.rect.offsetWidth >
+                          //         cell.offsetLeft - this.tableRectLeft &&
+                          //       rectTop <
+                          //         cell.offsetTop - this.tableRectTop + cell.offsetHeight &&
+                          //       rectTop + this.rect.offsetHeight >
+                          //         cell.offsetTop - this.tableRectTop &&
+                          //       index >= 3 // 选中的单元格所在列的索引大于等于3
+                          //     ) {
+                          //       if (cell.className.indexOf("add") == -1) {
+                          //         // cell.style.border = "1px solid red";
+                          //         const cellText = cell.innerText;
+                          //         const rowData = this.historyDataTables[element.rowIndex]; // 获取当前单元格所在的行数据
+                          //         // 获取表格的列名的属性名property
+                          //         let columnProperty = undefined;
+                          //         // 遍历第一行数据
+                          //         // console.log(index, '--index--'); // 框选数据所在列的索引
+
+                          //         for (const item of columns) {
+                          //           if (item.index === index) {
+                          //             columnProperty = item.property;
+                          //             break;
+                          //           }
+                          //         }
+                          //         // const rowIndex = element.rowIndex; // 将当前单元格所在的行数据加入到该列数据中
+                          //         const columnIndex = index;
+                          //         const time = rowData.sampleTime;
+
+                          //         // 选择要添加到选中行数组中的属性
+                          //         const selected = {
+                          //           rowId: rowData.id,
+                          //           // row: rowIndex,
+                          //           column: columnIndex,
+                          //           sampleTime: time,
+                          //           factor: columnProperty,
+                          //           tag: rowData[columnProperty + "_tag"] || "",
+                          //           tagStatus: rowData[columnProperty + "_tag_status"] || "",
+                          //           mark: rowData[columnProperty + "_mark"] || ""
+                          //         };
+
+                          //         // 将选中数据加入到状态中已有的数据中,如果已有相同的数据，则不加入
+                          //         if (
+                          //           !this.selectedData.some(data => this.isEqual(data, selected))
+                          //         ) {
+                          //           this.selectedData.push(selected);
+                          //         }
+                          //         // 将选中数据加入到 xqArr 中
+                          //         this.selectedData.forEach(item => {
+                          //           // 如果 xqArr 中已有相同数据，则不加入
+                          //           if (!this.xqArr.some(data => this.isEqual(data, item))) {
+                          //             this.xqArr.push(item);
+                          //           }
+                          //         });
+                          //         this.selectedData = [];
+                          //       }
+                          //     }
+                          //   }
+                          // });
+
+
+                          vnode.context.multipleSelection=[]
+                          // console.log(vnode.context);
+                          // vnode.context.tableData.forEach((ele)=>{
+                          //     vnode.context.$refs.table.toggleRowSelection(ele,false)
+                          // })
+                          flag = false;
+                      }
+                      if (vnode.context.mouseflag) {
+                          if (selDiv.style.display == "none") {
+                              selDiv.style.display = "";
+                          }
+                          // var scrolling=oDiv.getElementsByClassName("is-scrolling-none");
+                          var scrolling=oDiv.getElementsByClassName("is-scrolling-left");
+
+                          // console.log("========>");
+                          // console.log(scrolling);
+
+                          selDiv.style.left = Math.min(_x, startX)-left+scrolling[0].scrollLeft + "px";
+                          //48是表头的高度
+                          selDiv.style.top = Math.min(_y, startY)-top - 48+scrolling[0].scrollTop+ "px";
+                          selDiv.style.width = Math.abs(_x - startX) + "px";
+                          selDiv.style.height = Math.abs(_y - startY) + "px";
+
+                          // ---------------- 关键算法确定列表的选中靠的是index---------------------
+                          var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
+                          var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
+                          for (var i = 0; i < selList.length; i++) {
+                              var sl = selList[i].offsetWidth + selList[i].offsetLeft;
+                              var st = selList[i].offsetHeight + selList[i].offsetTop;
+                              if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
+                                  if (selList[i].className.indexOf("seled") == -1) {
+                                      selList[i].className = selList[i].className + " seled";
+                                      // vnode.context.$refs.table.toggleRowSelection(vnode.context.tableData[i],true)
+                                      //把选中的都存入到table标签中的已选中
+                                      // if(vnode.context.tableData[i])
+                                      //     vnode.context.multipleSelection.push(vnode.context.tableData[i]);
+                                  }
+                              } else {
+                                  if (selList[i].className.indexOf("seled") != -1 ) {
+                                      selList[i].className = "el-table__row";
+                                      // vnode.context.$refs.table.toggleRowSelection(vnode.context.tableData[i],false);
+                                      // vnode.context.multipleSelection.forEach((ele,i)=>{
+                                      //     //这里没用对象是否相等用的是传入table中的唯一的myKey字段
+                                      //     if(ele[vnode.context.myKey]==vnode.context.tableData[i][vnode.context.myKey] ){
+                                      //         vnode.context.multipleSelection.splice(i,1);
+                                      //     }
+                                      // })
+                                  }
+                              }
+                          }
+
+                      }
+                      vnode.context.clearEventBubble(evt);
+                  };
+                  //方法是确定列表到屏幕的位置
+                  function getX(obj){
+                      var parObj=obj;
+                      var left=obj.offsetLeft;
+                      while(parObj=parObj.offsetParent){
+                          left+=parObj.offsetLeft;
+                      }
+                      return left;
+                  }
+                  //方法是确定列表到屏幕的位置
+                  function getY(obj){
+                      var parObj=obj;
+                      var top=obj.offsetTop;
+                      while(parObj = parObj.offsetParent){
+                          top+=parObj.offsetTop;
+                      }
+                      return top;
+                  }
+                  //在鼠标抬起后做的重置
+                  document.onmouseup = function () {
+                      //把鼠标移动事初始化
+                      document.onmousemove=null;
+                      if (selDiv) {
+                          document.getElementsByClassName("el-table__body")[0].removeChild(selDiv);
+                      }
+                      selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
+                      vnode.context.mouseflag = false;
+                      // vnode.context.$handleSelect();
+                  };
+              };
+          }
+      }
   },
   data() {
     return {
@@ -148,18 +360,40 @@ export default {
       showTable: false,
       popVisible:false,
       storageList: [],
+      isMouseDown: true, // 是否需要(允许)处理鼠标的移动事件
       tbSize:"",
       name: '',
       config: {
         children: [],
         attrs: {size:"small"},
-        listeners: {},
+        listeners: {
+        },
         key: ''
       },
-
       isDragging: false,
       startRowIndex: -1,
-      endRowIndex: -1
+      endRowIndex: -1,
+
+      //指令中确定的时候是鼠标按下事件
+      mouseflag: false,
+      //选中的数组
+      multipleSelection: [],
+      //控制右键菜单弹出显示
+      dialogVisible:false,
+      //右键鼠标的位置
+      position:{
+          left:0,
+          top:0
+      },
+      //控制右键显示隐藏
+      toggleShow :false,
+      //分页当前的页数
+      currentPage:1 ,
+      //当前右键点击的列
+      currentRow:[],
+      //当前滚动的距离，
+      targetScroll:0
+
     }
   },
   watch: {
@@ -176,82 +410,64 @@ export default {
     this.updateTable()
     this.initSort();
 
+    this.tableDom=this.getInstance().$el;
+
   },
   methods: {
+      //清除默认事件
+      clearEventBubble(evt) {
+          if (evt.stopPropagation)
+              evt.stopPropagation();
+          else
+              evt.cancelBubble = true;
+          if (evt.preventDefault)
+              evt.preventDefault();
+          else
+              evt.returnValue = false;
+      },
+
+     // 获取table距离页面左侧和上方的距离
+     getTableMarginLeft() {
+      const tableRect = this.tableDom.getBoundingClientRect(); // 获取el-table元素的位置信息
+      this.tableRectTop = Math.ceil(tableRect.top);
+      this.tableRectLeft = Math.ceil(tableRect.left);
+    },
+
+
     handleSelectionChange(rows) {
       // console.log(rows)
     },
     onCopySelectCell(){
 
     },
-    onMousedown(event) {
+    // 阻止默认事件
-      // console.log(event)
+      stopEvent(event) {
-      const table = this.$refs.table
+      if (event.stopPropagation) {
-      const cell = event.target.closest('td')
+        // 标准浏览器
-      if (cell) {
+        event.stopPropagation(); // 阻止事件冒泡
-        const rowIndex = cell.parentNode.rowIndex - 1
+        event.preventDefault(); // 阻止默认事件
-        if (event.ctrlKey) {
+      } else {
-          // 如果按下了 Ctrl 键，则不会清除之前选中的行，仅仅添加新的选择
+        // IE浏览器
-          this.isDragging = true
+        event.cancelBubble = true;
-        } else {
+        event.returnValue = false;
-          // 如果没有按下 Ctrl 键，则清空之前选中的行，只保留当前选择的行
-          table.clearSelection()
-          table.toggleRowSelection(this.tableData[rowIndex], true)
-        }
-        this.startRowIndex = rowIndex
-        this.endRowIndex = rowIndex
       }
     },
-    onMousemove(event) {
+    // 定义方法 isEqual 来比较两个选中数据对象是否相同
-      // console.log(event)
+    isEqual(data1, data2) {
-      if (this.isDragging) {
+      return (
-        const table = this.$refs.table
+        data1.rowId === data2.rowId &&
-        const cell = event.target.closest('td')
+        data1.column === data2.column &&
-        if (cell) {
+        data1.sampleTime === data2.sampleTime &&
-          const rowIndex = cell.parentNode.rowIndex - 1
+        data1.factor === data2.factor
-          this.endRowIndex = rowIndex
+      );
-          const start = Math.min(this.startRowIndex, this.endRowIndex)
-          const end = Math.max(this.startRowIndex, this.endRowIndex)
-          for (let i = start; i <= end; i++) {
-            table.toggleRowSelection(this.tableData[i], true)
-          }
-        }
-      }
     },
-    onMouseup() {
+    onCellClick(row, column, cell, event) {
-      this.isDragging = false
+      console.log(row);
+	    console.log(column);
+	    console.log(cell);
+	    console.log(event);
+      cell.classList.add("blue-cell")
     },
-     //右键点击事件
-    //  onRightClick(row, column, event) {
-    //   console.log(arguments);
-    //   var menu = document.querySelector("#rightMenu");
-    //   event.preventDefault();
-    //   //获取我们自定义的右键菜单
-
-    //   // 根据事件对象中鼠标点击的位置，进行定位
-    //   menu.style.left = event.clientX + "px";
-    //   menu.style.top = event.clientY + "px";
-    //   // 改变自定义菜单的隐藏与显示
-    //   menu.style.display = "block";
-    //   console.log(row, column);
-    //   // 获取当前右键点击table下标
-    //   // this.tableData.forEach((item, index) => {
-    //   //   if (item.bugid === row.bugid) {
-    //   //     //这里判断相等的条件可以自己改为该行数据的唯一键
-    //   //     this.currentRowIndex = index;
-    //   //     return false;
-    //   //   }
-    //   // });
-    //   // this.setCurrent(row);
-    // },
-
-    // onCellClick(row, column, cell, event) {
-    //   console.log(row);
-	  //   console.log(column);
-	  //   console.log(cell);
-	  //   console.log(event);
-    //   cell.classList.add("blue-cell")
-    // },
 
     // 动态列渲染表格时，需要在列渲染完成后重新渲染一下表格
     reload() {
@@ -398,22 +614,13 @@ export default {
         }
       })
 
-      // let localListeners = {
-      //   "cell-click":this.onCellClick,
-      // }
       this.config.children = childrenNodes
       this.config.attrs = this.$attrs
       this.config.listeners = this.$listeners;
 
-      // this.config.listeners['cell-click']=this.onCellClick;
-      // this.config.listeners['mousedown']=this.onMousedown;
-      // this.config.listeners['mousemove']=this.onMousemove;
-      // this.config.listeners['mouseup']=this.onMouseup;
       // this.config.listeners['row-contextmenu']=this.onRightClick;
-
-      // @cell-click="cellClick"
       // @row-click="clickTableRow"
-      // console.log(this.config);
+      // console.log(this.config.listeners)
 
       // 通过key值触发表格刷新，避免拖拽由于数组长度一致导致diff算法无法识别
       this.config.key = Math.random() + ''
@@ -484,6 +691,42 @@ export default {
   border: 1px solid blue !important;
 }
 
+.menuDiv {
+  display: none;
+  position: absolute;
+
+  .menuUl {
+    height: auto;
+    width: auto;
+    font-size: 14px;
+    text-align: left;
+    border-radius: 3px;
+    border: none;
+    background-color: #c4c4c4;
+    color: #fff;
+    list-style: none;
+    padding: 0 10px;
+
+    li {
+      width: 140px;
+      height: 35px;
+      line-height: 35px;
+      cursor: pointer;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.47);
+
+      &:hover {
+        // background-color: rgb(26, 117, 158);
+        color: rgb(54, 138, 175);
+      }
+    }
+  }
+}
+
+.seled{
+  background-color: #c4c4c4;
+}
+
+
 </style>
 
 

src/views/emis/emisCustomerUser/moneyUserList.vue

@@ -2,6 +2,8 @@
   <XdPageContainer class="app-container">
     <SearchForm slot="pageHeader"  :model="queryParams" ref="queryForm"   size="mini" :maxShow="10"  label-width="100px" v-show="showSearch" @search="handleQuery" @reset="resetQuery">
 
+      <!-- <AirTable></AirTable> -->
+
       <el-form-item label="寄件人" prop="customerName">
         <el-input
           v-model="queryParams.customerName"
@@ -64,6 +66,9 @@
            @sort-change="handleSortChange"
            >
 
+
+           <!-- @mousedown.native="down($event)" -->
+
       <div slot="toolbar">
         <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
@@ -209,10 +214,14 @@
     </el-dialog>
 
 
+
   </XdPageContainer>
 </template>
 
 <script>
+
+import AirTable from '@/components/AirTable/demo.vue';
+
 import { listMoneyUser, delEmisCustomerUser } from "@/api/emis/emisCustomerUser";
 import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
 import moneyUserForm from '@/views/emis/emisCustomerUser/moneyUserForm';
@@ -232,7 +241,7 @@ import SalemanPicker from '@/views/emis/EmisBaseTools/SalemanPicker.vue';
 
 export default {
   name: "moneyUserList",
-  components: { PayeePicker,SalemanPicker,elDateSimplePicker,moneyUserForm ,CountryPicker,
+  components: {AirTable, PayeePicker,SalemanPicker,elDateSimplePicker,moneyUserForm ,CountryPicker,
     EmisSiteSimplePicker,ProvincePicker,CityPicker,
     EmisUserSimplePicker0,EmisUserSimplePicker1,EmisUserSimplePicker2
   },

src/views/emis/emisCustomerUser/monthUserList.vue

@@ -46,13 +46,9 @@
       </el-form-item>
       <el-form-item label="回款联系人" prop="payee" >
         <PayeePicker :placeholder="$t('回款联系人')" v-model="queryParams.payee"  ></PayeePicker>
-
-        <!-- <EmisUserSimplePicker1 :placeholder="$t('回款联系人')" v-model="queryParams.payee"  ></EmisUserSimplePicker1> -->
       </el-form-item>
       <el-form-item label="销售联系人" prop="salesmen" >
-          <!-- <EmisUserSimplePicker2 :placeholder="$t('销售联系人')" v-model="queryParams.salesmen"  ></EmisUserSimplePicker2> -->
           <SalemanPicker :placeholder="$t('销售联系人')" v-model="queryParams.salesmen"  ></SalemanPicker>
-
         </el-form-item>
         <el-form-item :label="$t('启用状态')" prop="status">
             <el-select v-model="queryParams.status"  clearable :placeholder="$t('启用状态')" @change="handleQuery">
@@ -190,10 +186,6 @@
             </div>
          </template>
       </el-table-column>
-      <!-- <el-table-column :label="$t('省份')" align="center" prop="province" min-width="100" /> -->
-      <!-- <el-table-column :label="$t('城市')" align="center" prop="city" min-width="100" /> -->
-      <!-- <el-table-column :label="$t('区县')" align="center" prop="county" min-width="100" /> -->
-      <!-- <el-table-column :label="$t('镇')" align="center" prop="town" min-width="100" /> -->
       <el-table-column :label="$t('地址')" align="center" prop="address" min-width="100" :show-overflow-tooltip="true" />
          <el-table-column :label="$t('业务网点范围')" align="center" prop="bizSiteName" min-width="150" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('回款联系人')" align="center" prop="payee" min-width="100" />

src/views/emis/emisWaybill/waybillRecord.vue

@@ -1565,8 +1565,12 @@ methods: {
         && this.form.sendSiteCode
         && this.form.dispatchUnderlingSiteCode
         && this.form.calcFeeType
+        && this.form.customsClear
+        && this.form.customsEclaration
       ){
 
+
+
         let calcFeeType=this.form.calcFeeType;
         if(calcFeeType==3){
           calcFeeType=1;
@@ -1580,6 +1584,8 @@ methods: {
           settlementWeight: this.form.settlementWeight,
           sendSiteCode: this.form.sendSiteCode,
           dispatchUnderlingSiteCode: this.form.dispatchUnderlingSiteCode,
+          customsClear:this.form.customsClear,
+          customsEclaration:this.form.customsEclaration
         }
 
         calcWaybillFee(postData).then(response => {