火狐令人窒息的浏览器。
<template>
<div class='bg-color'>
<el-row :gutter="20">
<el-col :span="24">
<div class="pull-right">
<button class="btn btn-custom-primary btn-sm" @click="addApproval()"><i class="ti-plus"></i>添加审批规则</button>
</div>
</el-col>
</el-row>
<el-row >
<table border="1" cellspacing="10" cellpadding="10" class='table-top-border' >
<tr>
<td width='20%;'>
<el-row :gutter="20">
<el-col :span="24">审批类型</el-col>
</el-row>
</td>
<td width='80%;'>
<el-row :gutter="20">
<el-col :span="24">审批流程</el-col>
</el-row>
</td>
</tr>
<tr>
<td>
<el-row :gutter="20">
<el-col :span="24">
<div class="audit-left">
<ul class='tabs-ul'>
<li v-for='(item,x) in tabsCol' :class='x==activeLi?"active-li":""' :key='x' @click='tabCheck(item,x)'>{{item}}</li>
</ul>
</div>
</el-col>
</el-row>
</td>
<td>
<div v-show='activeLi ==0'>
<el-row :gutter="20">
<el-col :span="24">
<div class="audit-right">
<el-row :gutter="20">
<el-col :span="24">
<transition-group tag="div" class="container">
<div class="item first-margin" v-for="(item,index) in items" :key="index"
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)" >
<div class="pull-left">
<div class="audit-first"> 优先级 {{index+1}}</div>
</div>
<div class="pull-right">
<div class="audit-detail">
<div class="pull-right">
<a href="javascript:void(0);" class='curstor' @click="addApproval()">编辑 </a>
<a href="javascript:void(0);" class='curstor' @click="delApproval()">删除</a>
</div>
<div class="pull-left">
<p> 已启用</p>
<div>
<span class="tit">审批名称：</span>
<span>
{{item.userName}}
</span>
</div>
<div>
<span class="tit">试用范围：</span>
<span> {{item.rangeDepart}} </span>
</div>
<div>
<span class="tit">审批条件：</span>
<div class='double-t' >
<p>符合一下任一条件</p>
<p>{{item.auditRule}}</p>
</div>
</div>
<div>
<span class="tit">审批人：</span>
<span>
<span class="show-auditer">直接主管</span> >
<span class="show-auditer" v-for='(i,j) in item.auditPerson' :key='j'>{{i}}</span>
</span>
</div>
</div>
</div>
</div>
</div>
</transition-group>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
<div v-show='activeLi ==1'>
<el-row :gutter="20">
<el-col :span="24">
<div class="audit-right">
<el-row :gutter="20">
<el-col :span="24">
<transition-group tag="div" class="container">
<div class="item first-margin" v-for="(item,index) in items" :key="index"
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)" >
<div class="pull-left">
<div class="audit-first"> 优先级 {{index+1}}</div>
</div>
<div class="pull-right">
<div class="audit-detail">
<div class="pull-right">
<a href="javascript:void(0);" class='curstor' @click="addApproval()">编辑 </a>
<a href="javascript:void(0);" class='curstor' @click="delApproval()">删除</a>
</div>
<div class="pull-left">
<p> 已启用</p>
<div>
<span class="tit">审批名称：</span>
<span>
{{item.userName}}
</span>
</div>
<div>
<span class="tit">试用范围：</span>
<span> {{item.rangeDepart}} </span>
</div>
<div>
<span class="tit">审批条件：</span>
<div class='double-t' >
<p>符合一下任一条件</p>
<p>{{item.auditRule}}</p>
</div>
</div>
<div>
<span class="tit">审批人：</span>
<span>
<span class="show-auditer">直接主管</span> >
<span class="show-auditer" v-for='(i,j) in item.auditPerson' :key='j'>{{i}}</span>
</span>
</div>
</div>
</div>
</div>
</div>
</transition-group>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</td>
</tr>
</table>
</el-row>
</div>
</template>
<script>
import api from "@/api";
export default {
name: '',
data () {
return {
items: [
{ key: 1, color: '#ffebcc',
userName:'河南九维科技有限公司',
rangeDepart:'销售一部',
auditRule:'折扣大于8折，咨询费=0元',
auditPerson:['支伟','韩琳','刘硕']
},
{ key: 2, color: '#ffb86c',userName:'河南九维科技有限公司',
rangeDepart:'销售一部',
auditRule:'折扣大于8折，咨询费=0元',
auditPerson:['支伟','刘硕'] },
{ key: 3, color: '#f01b2d',userName:'河南九维科技有限公司',
rangeDepart:'销售一部',
auditRule:'折扣大于8折，咨询费=0元',
auditPerson:['支伟','韩琳',] }
],
dragging: null,
tabsCol:['订单审核','线索主体信息修改审批','客户主体信息修改审批','联系方式修改审批'],
activeLi: 0 ,
tableData:[
{
userName:'河南九维科技有限公司',
rangeDepart:'销售一部',
auditRule:'折扣大于8折，咨询费=0元',
auditPerson:['支伟','韩琳','刘硕']
}
]
}
},
//在实例创建完成后被立即调用
created: function () {
this.getLists();
},
methods:{
getLists() {
// this.options.loading = true;
let params = {
displayStart: 0,
displayLength: 2,
}
api.client.getClueLists(params)
.then(json => {
console.log(json.result)
if (json.result) {
var str=[
{
userName:'河南九维科技有限公司',
rangeDepart:'销售一部',
auditRule:'折扣大于8折，咨询费=0元',
auditPerson:['支伟','韩琳','刘硕']
},{
userName:'河南九维科技有限公司',
rangeDepart:'销售一部',
auditRule:'折扣大于8折，咨询费=0元',
auditPerson:['支伟','韩琳','刘硕']
},{
userName:'河南九维科技有限公司',
rangeDepart:'销售一部',
auditRule:'折扣大于8折，咨询费=0元',
auditPerson:['支伟','韩琳','刘硕']
}
]
this.tableData = str;
}
})
.catch(r => {
// this.options.loading = false;
let errTips = (r.error && r.error[0]) ? r.error[0].message : r.message
this.$message.error(errTips || '出错了');
});
},
// 添加审核规则
addApproval(id) {
let query = {},
name = 'set-approval-add';
if(id){
query = { id}
name = 'set-approval-edit';
}
console.log(name,query)
const { href } = this.$router.resolve({name,query});
window.open(href, "_blank");
},
//删除
delApproval(id){
console.log(id,'删除')
this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//切换
tabCheck:function(item,index){
this.activeLi = index;
},
//开始
handleDragStart(e,item){
console.log(152,item)
//有了这句就能生效但是iE不兼容需要单独处理
console.log(e.dataTransfer.setData("imgInfo", e.target.id));
this.dragging = item;
},
//结束
handleDragEnd(e,item){
console.log(157,item)
this.dragging = null
},
//首先把div变成可以放置的元素，即重写dragenter/dragover
handleDragOver(e) {
console.log(162,e)
e.dataTransfer.dropEffect = 'move'// 在dragenter中针对放置目标来设置!
},
handleDragEnter(e,item){
console.log(166,item)
e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
if(item === this.dragging){
return
}
const newItems = [...this.items]
console.log(newItems)
const src = newItems.indexOf(this.dragging)
const dst = newItems.indexOf(item)
newItems.splice(dst, 0, ...newItems.splice(src, 1))
this.items = newItems
}
}
}
</script>
