产品规则
This commit is contained in:
linfso
parent
0d1e8096fa
commit
0ed77d9a52
@ -1,420 +0,0 @@
|
||||
<template>
|
||||
<div class='xd-table-wrapper'>
|
||||
<el-table
|
||||
ref="table"
|
||||
:show-header="true"
|
||||
:data="tableData"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%;"
|
||||
:header-row-class-name="headerClassName"
|
||||
:height="'500'"
|
||||
id="table"
|
||||
@row-click="rowClick"
|
||||
@row-contextmenu="rowContextmenu"
|
||||
v-drag
|
||||
>
|
||||
|
||||
</el-table>
|
||||
<XdContexMenu
|
||||
:position="position"
|
||||
:toggleShow="toggleShow"
|
||||
:menuList="menuList"
|
||||
@menuClick="menuClick"
|
||||
></XdContexMenu>
|
||||
|
||||
<!-- <el-table-column :type="isType" width="55" align="center"></el-table-column>
|
||||
<el-table-column
|
||||
v-for="(column, index) in columData"
|
||||
:key="index"
|
||||
:label="column.name"
|
||||
:width="column.width">
|
||||
<template slot-scope="scope">
|
||||
<slot :name="column.key" :row="scope.row"> </slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template slot=append>
|
||||
<div :class="['el-table__append-page']">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size="20"
|
||||
layout="total, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import XdContexMenu from './contextMenu.js';
|
||||
export default {
|
||||
name: 'XdTableAdv',
|
||||
// 框选的指令
|
||||
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]);
|
||||
}
|
||||
}
|
||||
vnode.context.multipleSelection=[]
|
||||
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");
|
||||
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();
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
XdContexMenu,
|
||||
},
|
||||
props: {
|
||||
//对于列表中唯一的字段myKey默认为id
|
||||
myKey: {
|
||||
type: String,
|
||||
default: "id"
|
||||
},
|
||||
//列表的数据
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
//传过来的表头信息
|
||||
// columData: {
|
||||
// type: Array,
|
||||
// default: () => []
|
||||
// },
|
||||
//有没有checkbox
|
||||
isType : {
|
||||
type: String,
|
||||
default: "selection"
|
||||
},
|
||||
//右键菜单
|
||||
menuList:{
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
//分页的总页数
|
||||
total:{
|
||||
type:Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//指令中确定的时候是鼠标按下事件
|
||||
mouseflag: false,
|
||||
//选中的数组
|
||||
multipleSelection: [],
|
||||
//控制右键菜单弹出显示
|
||||
dialogVisible:false,
|
||||
//右键鼠标的位置
|
||||
position:{
|
||||
left:0,
|
||||
top:0
|
||||
},
|
||||
//控制右键显示隐藏
|
||||
toggleShow :false,
|
||||
//分页当前的页数
|
||||
currentPage:1 ,
|
||||
//当前右键点击的列
|
||||
currentRow:[],
|
||||
//当前滚动的距离，
|
||||
targetScroll:0,
|
||||
|
||||
columData:[],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//清除默认事件
|
||||
clearEventBubble(evt) {
|
||||
if (evt.stopPropagation)
|
||||
evt.stopPropagation();
|
||||
else
|
||||
evt.cancelBubble = true;
|
||||
if (evt.preventDefault)
|
||||
evt.preventDefault();
|
||||
else
|
||||
evt.returnValue = false;
|
||||
},
|
||||
//列表单击选中事件
|
||||
rowClick(row, event, column) {
|
||||
let flag=true;
|
||||
//确定当前的row的index
|
||||
var index = 0;
|
||||
this.tableData.forEach((ele,i)=>{
|
||||
if(ele[this.myKey] == row[this.myKey]){
|
||||
index = i+1;
|
||||
}
|
||||
})
|
||||
this.toggleShow = false;
|
||||
//如果有就移除
|
||||
this.multipleSelection.forEach((ele,i)=>{
|
||||
if(ele[this.myKey]==row[this.myKey]){
|
||||
this.$refs.table.toggleRowSelection(row,false);
|
||||
//后期优化吧 element的方法用不了 只能自己改变类名
|
||||
this.$refs.table.$el.getElementsByTagName("tr")[index].className = "el-table__row";
|
||||
this.multipleSelection.splice(i,1);
|
||||
flag = false;
|
||||
}
|
||||
})
|
||||
//如果没有就push
|
||||
if(flag){
|
||||
this.$refs.table.toggleRowSelection(row,true);
|
||||
this.multipleSelection.push(row);
|
||||
//后期优化吧 element的方法用不了 只能自己改变类名
|
||||
this.$refs.table.$el.getElementsByTagName("tr")[index].className = "el-table__row seled";
|
||||
}
|
||||
},
|
||||
//列表右键点击事件
|
||||
rowContextmenu(row, event){
|
||||
//为当前的row赋值
|
||||
this.currentRow = row;
|
||||
//阻止默认右键点击事件
|
||||
event.returnValue = false;
|
||||
//获取右键坐标
|
||||
this.position.left = event.clientX
|
||||
this.position.top = event.clientY
|
||||
//菜单出现的flag
|
||||
this.toggleShow = true;
|
||||
//显示弹出窗
|
||||
},
|
||||
//右键菜单弹出事件
|
||||
menuClick(item){
|
||||
//右键点击以后隐藏
|
||||
this.toggleShow=false;
|
||||
this.$emit("rowContextmenu",item,this.currentRow)
|
||||
},
|
||||
//每页条数变化 ui定死每页20条
|
||||
handleSizeChange(val) {
|
||||
// console.log(`每页 ${val} 条`);
|
||||
},
|
||||
//当前页变化
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
this.$emit('currentPageChange',this.currentPage)
|
||||
},
|
||||
//当批量选中结束调用
|
||||
$handleSelect(){
|
||||
this.$emit('handleSelect',this.multipleSelection)
|
||||
},
|
||||
//监听表格的滚动
|
||||
handleScroll(e){
|
||||
this.targetScroll = e.target.scrollTop;
|
||||
},
|
||||
//
|
||||
headerClassName(){
|
||||
return "xd-table-header__class";
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
created() {
|
||||
//确保右键菜单消失
|
||||
document.onclick = ()=>{
|
||||
this.toggleShow=false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/styles/mixin.scss';
|
||||
|
||||
.xd-table-wrapper {
|
||||
@include wh(100%, 100%);
|
||||
.seled {
|
||||
background: #f5f5f5 !important;
|
||||
}
|
||||
.no-seled{
|
||||
background: #ffffff !important;
|
||||
}
|
||||
.el-table__body tr{
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
border-top:1px solid #f5f5f5;
|
||||
border-bottom:1px solid #f5f5f5;
|
||||
}
|
||||
.xd-table-header__class th{
|
||||
border-bottom:1px solid #f5f5f5 !important;
|
||||
}
|
||||
.el-table__body td{
|
||||
border-bottom:1px solid #f5f5f5;
|
||||
}
|
||||
// .hover-row {
|
||||
// border-top:1px solid #f5f5f5;
|
||||
// border-bottom:1px solid #f5f5f5;
|
||||
// background: #fafafa;
|
||||
// }
|
||||
|
||||
.hover-row {
|
||||
border-top:1px solid #f5f5f5;
|
||||
border-bottom:1px solid #f5f5f5;
|
||||
background: #f05252;
|
||||
}
|
||||
|
||||
.el-table__append-page{
|
||||
padding-top:48px;
|
||||
padding-bottom:48px;
|
||||
.el-pagination{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.el-table__append-info{
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
width:100%;
|
||||
.el-pagination{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.xd-table__context--menu{
|
||||
box-shadow:0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
|
||||
.xd-table__context--list {
|
||||
cursor: pointer;
|
||||
height: 48px;
|
||||
@include flexCenter(flex-start,center);
|
||||
.xd-table__context--icon{
|
||||
font-size: 14px;
|
||||
margin-left:20px;
|
||||
color:#757575;
|
||||
}
|
||||
.xd-table__context--info{
|
||||
font-size: 14px;
|
||||
margin-left:20px;
|
||||
color:#212121;
|
||||
}
|
||||
}
|
||||
.xd-table__context--list:hover{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,7 @@
|
||||
@visible-change="reverseArrow"
|
||||
|
||||
>
|
||||
<el-option v-for="item in optionItems" :key="item.lineCode" :label="item.lineName" :value="item.lineCode" />
|
||||
<el-option v-for="item in optionItems" :key="item.lineCode" :label="item.lineName+((item.status==0)?'-已停用':'')" :value="item.lineCode" />
|
||||
|
||||
</el-select>
|
||||
<!-- style="width:100%" -->
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<SearchForm slot="pageHeader" :model="queryParams" ref="queryForm" size="mini" :maxShow="30" label-width="68px" v-show="showSearch" @search="handleQuery" @reset="resetQuery">
|
||||
|
||||
<el-form-item label="线路" prop="lineCode">
|
||||
<TransLinePicker v-model="queryParams.lineCode" isInitiated="true" ></TransLinePicker>
|
||||
<TransLineAllPicker v-model="queryParams.lineCode" isInitiated="true" ></TransLineAllPicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型" prop="productType">
|
||||
<TransProductPicker placeholder="产品类型" v-model="queryParams.productType" :transLineCode="queryParams.lineCode" ></TransProductPicker>
|
||||
<TransProductAllPicker placeholder="产品类型" v-model="queryParams.productType" :transLineCode="queryParams.lineCode" ></TransProductAllPicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始网点" prop="startSiteCode">
|
||||
<EmisSiteSimplePicker1 v-model="queryParams.startSiteCode" ></EmisSiteSimplePicker1>
|
||||
@ -188,8 +188,9 @@ import EmisSupplierPicker from '@/views/emis/EmisBaseTools/EmisSupplierPicker';
|
||||
import EmisSiteSimplePicker1 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
|
||||
import EmisSiteSimplePicker2 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
|
||||
|
||||
import TransLinePicker from '@/views/emis/EmisBaseTools/TransLinePicker.vue';
|
||||
import TransProductPicker from '@/views/emis/EmisBaseTools/TransProductPicker.vue';
|
||||
import TransLineAllPicker from '@/views/emis/EmisBaseTools/TransLineAllPicker.vue';
|
||||
import TransProductAllPicker from '@/views/emis/EmisBaseTools/TransProductAllPicker.vue';
|
||||
|
||||
|
||||
import EmpNamePicker from '@/views/emis/EmisBaseTools/EmpNamePicker.vue';
|
||||
|
||||
@ -204,8 +205,8 @@ export default {
|
||||
EmisSupplierPicker,
|
||||
EmisSiteSimplePicker1,
|
||||
EmisSiteSimplePicker2,
|
||||
TransLinePicker,
|
||||
TransProductPicker,
|
||||
TransLineAllPicker,
|
||||
TransProductAllPicker,
|
||||
EmpNamePicker,
|
||||
BatchTransPlanRuleUpdateForm
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user