aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2024-05-26 17:35:04 +08:00
parent 95b511a00b
commit b00cd85bcd
6 changed files with 343 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AirTable/index.vue
View File

@ -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;

3
src/components/XdPageContainer/index.vue
View File

@ -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),
},

405
src/components/XdTable/index.vue
View File

@ -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">
<ul>
<div id="rightMenu" class="menuDiv">
<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)
const table = this.$refs.table
const cell = event.target.closest('td')
if (cell) {
const rowIndex = cell.parentNode.rowIndex - 1
if (event.ctrlKey) {
// 如果按下了 Ctrl 键，则不会清除之前选中的行，仅仅添加新的选择
this.isDragging = true
} else {
// 如果没有按下 Ctrl 键，则清空之前选中的行，只保留当前选择的行
table.clearSelection()
table.toggleRowSelection(this.tableData[rowIndex], true)
}
this.startRowIndex = rowIndex
this.endRowIndex = rowIndex
// 阻止默认事件
stopEvent(event) {
if (event.stopPropagation) {
// 标准浏览器
event.stopPropagation(); // 阻止事件冒泡
event.preventDefault(); // 阻止默认事件
} else {
// IE浏览器
event.cancelBubble = true;
event.returnValue = false;
}
},
onMousemove(event) {
// console.log(event)
if (this.isDragging) {
const table = this.$refs.table
const cell = event.target.closest('td')
if (cell) {
const rowIndex = cell.parentNode.rowIndex - 1
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)
}
}
}
// 定义方法 isEqual 来比较两个选中数据对象是否相同
isEqual(data1, data2) {
return (
data1.rowId === data2.rowId &&
data1.column === data2.column &&
data1.sampleTime === data2.sampleTime &&
data1.factor === data2.factor
);
},
onMouseup() {
this.isDragging = false
onCellClick(row, column, cell, event) {
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>

11
src/views/emis/emisCustomerUser/moneyUserList.vue
View File

@ -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
},

8
src/views/emis/emisCustomerUser/monthUserList.vue
View File

@ -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" />

6
src/views/emis/emisWaybill/waybillRecord.vue
View File

@ -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 => {