avue是基于element二次封装的框架
<template><!-- vue的模板元素标签 -->
<div class="execution">
<basic-container>
<avue-crud <!-- avue的表格标签 -->
ref="crud" <!-- 在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件 -->
:page="page" <!-- 表格分页配置选项 -->
:data="tableData" <!-- 表格显示的数据 -->
:permission="permissionList"
:table-loading="tableLoading" <!-- 表格等待框的控制-->
:option="tableOption" <!-- 表格配置属性-->
@on-load="getList"
@selection-change="selectionChange" <!-- 当选择项发生变化时会触发该事件 -->
@search-change="searchChange" <!-- 点击搜索后触发该事件 -->
@refresh-change="refreshChange" <!-- 点击刷新按钮触发该事件 -->
@row-update="handleUpdate" <!-- 编辑数据后确定触发该事件 -->
@row-save="handleSave" <!-- 新增数据后点击确定触发该事件 -->
@row-del="rowDel"> <!-- 行数据删除时触发该事件 -->
<template slot="expand" slot-scope="scope"> <!-- 卡槽expand模板是：表格展开折叠行布局。要在tableOption对象的js中搭配expand:true使用；传入的scope为当前行的对象，可通过scope.row获取 -->
联系电话：{{scope.row.lxdh}} ,产品费用：{{scope.row.cpfy}} ,产品销售净额：{{scope.row.xsje}}
</template>
<template slot="menuLeft" slot-scope="scope"> <!-- 卡槽menuLeft模板是：表格上方菜单栏按钮。 -->
<el-button type="primary"
icon="el-icon-plus"
size="small"
@click.stop="rowAdd(scope.row)">添加交易</el-button>
<el-button type="primary"
icon="el-icon-upload2"
size="small"
plain
@click.stop="importExcelDialog">批量导入</el-button>
<el-button type="primary"
icon="el-icon-sell"
size="small"
plain
@click.stop="rowLotDialog(1,scope.row)">提交申请</el-button>
<el-button type="primary"
icon="el-icon-tickets"
size="small"
plain
@click.stop="rowLotDialog(2,scope.row)">我要复核</el-button>
<el-button type="warning"
icon="el-icon-download"
size="small"
plain
@click.stop="exportExcel">导 出</el-button>
</template>
<template slot="menu" slot-scope="scope"> <!-- 卡槽menu模板是：表格内右侧边操作菜单栏按钮。 -->
<el-button icon="el-icon-edit"
size="small" type="text"
@click.stop="rowUpdate(scope.row,scope.index)">编辑</el-button>
<el-button icon="el-icon-delete"
size="small" type="text"
@click.stop="rowDel(scope.row,scope.index)">删除</el-button>
<el-button icon="el-icon-sell"
size="small" type="text"
@click.stop="rowDialog(1,scope.row,scope.index)">提交</el-button>
<el-button icon="el-icon-tickets"
size="small" type="text"
@click.stop="rowDialog(2,scope.row,scope.index)">复核</el-button>
<el-dialog <!-- 使用element弹窗对话框方式，对提交操作按钮布局 -->
title="提交复核申请" <!-- 弹窗标题 -->
:visible.sync="dialogFormVisibleSbumit" <!-- 是否显示 Dialog，支持 .sync 修饰符 -->
width="40%" <!-- 弹出的对话框宽度 -->
append-to-body="true"> <!-- Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true -->
<el-form :model="form"> <!-- 表单 -->
<h3>当前已选择待复核交易共<span>{{selectcpobjs.length}}</span>笔，详细交易如下：</h3>
<div style="margin-top:20px;" >
<el-tooltip
class="item"
effect="dark"
v-for="(item,i) of selectcpobjs" :key="i"
placement="top-start">
<div slot="content">
产品名称:{{selectcpobjs[i].cpmc}} , 客户名称:{{selectcpobjs[i].hymc}} ，<br/>
成交金额:{{selectcpobjs[i].cjje}} , 产品定价:{{selectcpobjs[i].cpdj}} ,<br/>
</div>
<el-button>{{selectcpobjs[i].cpmc.length>9?selectcpobjs[i].cpmc.slice(0,8)+'...':selectcpobjs[i].cpmc}}</el-button>
</el-tooltip>
</div>
<el-form-item>
<el-select v-model="fhrmc" placeholder="请选择复核人">
<el-option
v-for="item in fhrList"
:key="item.userId"
:label="item.username"
:value="item.userId"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelDialog">取 消</el-button>
<el-button type="primary" @click="toAudit(1)">发 送</el-button>
</span>
</el-dialog>
<el-dialog title="复核" :visible.sync="dialogFormVisibleTickets" width="40%" append-to-body="true">
<el-form :model="form">
<div>
<h3>当前需审核产品简要信息如下：</h3>
<div style="margin-top:20px;" >
<el-tooltip
class="item"
effect="dark"
v-for="(item,i) of selectcpobjs" :key="i"
placement="top-start">
<div slot="content">
产品名称:{{selectcpobjs[i].cpmc}} , 客户名称:{{selectcpobjs[i].hymc}} ，<br/>
成交金额:{{selectcpobjs[i].cjje}} , 产品定价:{{selectcpobjs[i].cpdj}} ,<br/>
</div>
<el-button>{{selectcpobjs[i].cpmc}}</el-button>
</el-tooltip>
</div>
<div style="margin-top:20px;">
<el-radio-group v-model="radio" @change="setTextArea">
<el-radio-button label="1">同意</el-radio-button>
<el-radio-button label="2">不同意</el-radio-button>
</el-radio-group>
<div style="margin-top:20px;">
<el-input
type="textarea"
:autosize="{ minRows: 5, maxRows: 10}"
v-model="textarea"
ref="tex">
</el-input>
</div>
</div>
</div>
<div style="height:10px;"></div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="doAudit(radio)">提 交</el-button>
<el-button @click="cancelDialog">取 消</el-button>
</span>
</el-dialog>
</template>
<template slot-scope="scope" slot="jkhsjlListForm">
<div style="height:135px;">
<el-row v-for="(item,i) of jkhsjlListArr" :key="i">
<el-col :span="5">
<el-input
:placeholder=i+1
maxlength="18"
minlength="1"
v-model="index.val[i]">
</el-input>
</el-col>
<el-col :span="1" align="center">--</el-col>
<el-col :span="5">
<el-input
placeholder="回输日期"
v-model="hsrq.val[i]">
</el-input>
</el-col>
<el-col :span="1" align="center">--</el-col>
<el-col :span="10">
<el-input
maxlength="18"
minlength="1"
placeholder="说明"
v-model="sm.val[i]">
</el-input>
</el-col>
<el-col :span="1">
<el-link @click="jkhsjlListDelete(i)" icon="el-icon-remove-outline" :underline="false" style="margin-left:4px;">
</el-link>
</el-col>
<el-col :span="1">
<el-link @click="jkhsjlListAdd()" icon="el-icon-circle-plus-outline" :underline="false">
</el-link>
</el-col>
</el-row>
</div>
</template>
</avue-crud>
</basic-container>
</div>
</template>
<script>
import {fetchList, getObj, addObj, putObj, delObj,exportExecl,getFhrlist} from '@/api/hygl/rfjktzjy'
import {tableOption} from '@/const/crud/hygl/rfjktzjy'
import { exportExcel,importExcel } from '@/util/util'
import {mapGetters} from 'vuex'
export default {
name: 'rfjktzjy',
data() {
return {
textarea:'同意',
radio:1,
fhrList:[],
fhrmc:'',
selectcpobjs:[],
dialogFormVisibleTickets:false,
dialogFormVisibleSbumit:false,
count:2,
index:{val:[]},
hsrq:{val:[]},
sm:{val:[]},
jkhsjlListArr:[' '],
searchForm: {},
tableData: [],
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 20 // 每页显示多少条
},
tableLoading: false,
tableOption: tableOption
}
},
computed: {
...mapGetters(['permissions']),
permissionList() {
return {
addBtn: this.vaildData(this.permissions.hygl_rfjktzjy_add, false),
delBtn: this.vaildData(this.permissions.hygl_rfjktzjy_del, false),
editBtn: this.vaildData(this.permissions.hygl_rfjktzjy_edit, false),
excelBtn:this.vaildData(this.permissions.hygl_rfjktzjy_excel, false)
};
}
},
methods: {
exportExcel(page, params){
exportExcel("/hygl/rfjkcpxx",Object.assign({
current: page.currentPage,
size: page.pageSize
}, params, this.searchForm ));
},//导出表格
toAudit:function(type){
var lcspobj={};
this.curlcInfo["lcid"]=type;
this.curlcInfo["sprid"]="1";
this.curlcInfo["sprmc"]="yrj";
if(type=="1"){ //提交
if (this.fhrmc==""){
this.$message.success('请先选择复核人');
}else {
this.curlcInfo["jdid"] = 1;
//lcspobj["cpzt"] = 1;
lcspobj["fhzt"] = 1;
//lcspobj["cpobjs"] = this.selectcpobjs;
lcspobj["lcInfo"] = this.curlcInfo;
tjsqObj(lcspobj).then(response => {
this.curlcInfo = {};
this.selectcpobjs = [];
this.dialogFormVisibleSbumit = false;
this.$refs.crud.toggleSelection();
this.refreshChange();
});
}
}else if (type=="2"){ //复核
if (this.fhrmc==""){
this.$message.success('请先选择复核人');
}else {
this.curlcInfo["jdid"] = 4;
//lcspobj["cpobjs"] = this.selectcpobjs;
lcspobj["lcInfo"] = this.curlcInfo;
//lcspobj["cpzt"] = 3;
lcspobj["fhzt"] = 1;
fhsqObj(lcspobj).then(response => {
this.curlcInfo = {};
this.selectcpobjs = [];
this.dialogFormVisibleSoldout = false;
this.$refs.crud.toggleSelection();
this.refreshChange();
});
}
}
}, //提交、复核保存事件
rowLotDialog:function(type,row){
getFhrlist("admin").then(response =>{
this.fhrList=response.data.data;
})
var optNm=["","提交申请","我要复核"];
if (this.selectcpobjs.length<=0){
this.$message.success('请先选中的数据，然后进行产品【'+optNm[type]+"】操作。");
}else{
this.dialogFormVisibleSbumit=type==1;
this.dialogFormVisibleTickets=type==2;
}
},//批量提交，批量复核点击弹窗
refreshChange() {
this.$refs.crud.toggleSelection();//用于多选表格，切换所有行的选中状态。
this.getList(this.page)
},//去除勾选，刷新表格
setTextArea:function(){
if(this.radio==1){
this.$refs.tex.value='同意';
}else{
this.$refs.tex.value='不同意';
}
},//复核弹窗文本框赋值
cancelDialog:function(){
this.fhrmc='';
this.selectcpobjs=[];
this.dialogFormVisibleTickets=false;
this.dialogFormVisibleSbumit=false;
this.refreshChange();//去除勾选，刷新表格
},//弹窗取消按钮事件
rowDialog:function(type,row,index){
this.dialogFormVisibleTickets=type==2;
this.dialogFormVisibleSbumit= type==1;
this.fhrmc='';//复核人清空
this.selectcpobjs=[];//清空，否则点击会导致数组累加
this.selectcpobjs.push(row);
getFhrlist("admin").then(response =>{
this.fhrList=response.data.data;
})
},//提交，复核点击弹窗
selectionChange:function(list){
this.selectcpobjs=[];
for (var i=0;i<list.length;i++){
if(this.selectcpobjs.indexOf(list[i])==-1){
this.selectcpobjs.push(list[i]);
}
}
},//当选择项发生变化时会触发该事件
rowDel: function (row, index) {
var _this = this
this.$confirm('是否确认删除ID为' + row.id, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
return delObj(row.id)
}).then(data => {
_this.tableData.splice(index, 1)
_this.$message({
showClose: true,
message: '删除成功',
type: 'success'
})
this.getList(this.page)
})
},//删除确认提示弹窗，以及保存事件
handleUpdate: function (row, index, done,loading) {
putObj(row).then(data => {
this.$message({
showClose: true,
message: '修改成功',
type: 'success'
})
done()
this.getList(this.page)
}).catch(() => {
loading();
});
},//编辑弹窗保存事件
rowUpdate:function (type,row, index) {
this.$refs.crud.rowEdit(row, index);//打开表单编辑弹窗
this.type=type;
if(type==2){ //转让
for(let i=0;i<this.tableOption.column.length;i++){
let obj = this.tableOption.column[i]
obj.editDisabled=true;
for (let key in obj){
switch(obj[key]){
case 'yqlv':
obj.editDisabled=false;
break;
case 'tzdqr':
obj.editDisabled=false;
break;
case 'yqlx':
obj.editDisabled=false;
break;
case 'yqbxhj':
obj.editDisabled=false;
break;
}
}
}
}
if(type==1){
for(let i=0;i<this.tableOption.column.length;i++){
let obj = this.tableOption.column[i]
for (let key in obj){
obj.editDisabled=false;
}
}
}
},//打开弹窗—编辑
handleSave: function (row, done,loading) {
addObj(row).then(data => {
this.$message({
showClose: true,
message: '添加成功',
type: 'success'
})
done()
this.getList(this.page)
}).catch(() => {
loading();
});
},//新增弹窗保存事件
jkhsjlListAdd:function(){
if(this.jkhsjlListArr.length<2){
this.jkhsjlListArr.push(' ');
}
},//添加行
jkhsjlListDelete:function(i){
if(i>0) {
this.jkhsjlListArr.splice(i, 1);
this.index.val.splice(i, 1);
this.hsrq.val.splice(i, 1);
this.sm.val.splice(i, 1);
}
},//删除行
rowAdd:function(row){
/* this.clearSyl();
this.jkhsjlListAdd();*/
this.$refs.crud.rowAdd();
//debugger;
},//打开弹窗—保存
searchChange(form) {
this.searchForm = form
this.getList(this.page, form)
},
getList(page, params) {
this.tableLoading = true
fetchList(Object.assign({
current: page.currentPage,
size: page.pageSize
}, params, this.searchForm )).then(response => {
this.tableData = response.data.data.records
this.page.total = response.data.data.total
this.tableLoading = false
}).catch(() => {
this.tableLoading=false
})
},
exportExcel(page, params){
this.tableLoading = true
exportExecl(Object.assign({
current: page.currentPage,
size: page.pageSize
}, params, this.searchForm )).then(response => {
this.tableLoading = false
}).catch(() => {
this.tableLoading=false
})
}
}
}
</script>
<style lang="scss" scoped>
/*表格展开行样式*/
div /deep/ .el-table__expanded-cell{
padding-left: 100px !important;
padding-right:220px !important;
}
/*复核提示按钮样式*/
.item{
width:30%;
height:50px;
margin:0 5px 20px 5px;
}
/*复核人选择框样式*/
div /deep/ .el-select .el-input--medium .el-input__inner{
margin-top:40px;
width:500px !important;
height:50px !important;
line-height:50px !important;
}
div /deep/ .el-input__icon{
height: 140% !important;
}
</style>
