<template>
|
<el-dialog
|
:close-on-click-modal="false"
|
title="为【参照引用的业务类型】选取值"
|
append-to-body
|
:visible.sync="referBtmDialogParams.isShowDialog"
|
@close="recoverPage"
|
width="65%"
|
top="0"
|
class= "avue-dialog avue-dialog--top"
|
style="height: 150vh; margin-top: -13vh;">
|
<avue-crud
|
:page.sync="referBtmDialogParams.referBtmDataPage"
|
:ref="referBtmDialogParams.ref"
|
:option="referBtmDialogParams.referBtmOption"
|
:table-loading="referBtmDialogParams.referBtmDialogLoading"
|
:data="referBtmDialogParams.referBtmData"
|
@refresh-change="referBtmDataChange"
|
@search-change="referBtmSearchChange"
|
@search-reset="referBtmSearchReset"
|
@selection-change="referBtmSelectionChange"
|
@current-change="referBtmCurrentChange"
|
@size-change="referBtmSizeChange"
|
@on-load="referBtmOnLoad"
|
@row-click="referBtmRowClick">
|
</avue-crud>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="saveSelectedReferBtm">保 存</el-button>
|
<el-button @click="referBtmDialogParams.isShowDialog = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import referBtmOption from "@/const/code/referBtmDialog";
|
import {referDataGrid} from "@/api/code/referBtmType";
|
export default {
|
name: "referBtmTypeCrudDialog",
|
props: {
|
// 对话框显示隐藏控制
|
visible: {
|
type: "Boolean",
|
default: false,
|
},
|
},
|
watch: {
|
// 监听父组件传的窗口显示隐藏的值
|
visible (){
|
this.referBtmDialogParams.isShowDialog = this.visible;
|
}
|
},
|
data() {
|
return{
|
/** 参照引用的业务类型对话框相关数据 */
|
referBtmDialogParams: {
|
ref: 'crudReferBtm',
|
isShowDialog: this.visible, //对话框显示控制
|
referBtmDialogLoading: true, //表格数据加载提示
|
referBtmDataPage: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0
|
},
|
referBtmOption: referBtmOption, //表格配置
|
referBtmData: [], //表格数据
|
referBtmQuery: {}, //查询条件
|
referBtmSelectionList: [], //当前选中行
|
},
|
}
|
},
|
methods: {
|
|
// 恢复页面
|
recoverPage(){
|
this.referBtmSelectionClear();
|
this.$emit('update:visible', false);
|
},
|
/** 为参照引用的业务类型选取值，第二层嵌套对话框，及其相关方法 */
|
// 表格数据刷新按钮
|
referBtmDataChange() {
|
this.referBtmOnLoad(this.referBtmDialogParams.referBtmDataPage, this.referBtmDialogParams.referBtmQuery);
|
},
|
saveSelectedReferBtm() {
|
if(this.referBtmDialogParams.referBtmSelectionList.length != 1){
|
this.$message.warning("请选择一条数据!");
|
return false;
|
}
|
// 调用父组件的方法并传递当前选中的参数值，实现回显
|
this.$emit('echoReferBtmType', this.referBtmDialogParams.referBtmSelectionList[0])
|
//清空当前选中的行
|
this.referBtmSelectionClear();
|
this.referBtmDialogParams.isShowDialog = false;
|
},
|
referBtmSearchReset() {
|
this.referBtmDialogParams.referBtmQuery = {};
|
this.referBtmOnLoad();
|
},
|
referBtmSearchChange(params, done) {
|
this.referBtmDialogParams.referBtmQuery = params;
|
this.referBtmDialogParams.referBtmDataPage.currentPage = 1;
|
this.referBtmOnLoad();
|
done();
|
},
|
// 单击选中表格行时触发
|
referBtmRowClick(row){
|
this.$refs[this.referBtmDialogParams.ref].toggleSelection();
|
this.referBtmDialogParams.referBtmSelectionList = row;
|
this.$refs[this.referBtmDialogParams.ref].setCurrentRow(row);
|
this.$refs[this.referBtmDialogParams.ref].toggleRowSelection(row); //选中当前行
|
},
|
referBtmSelectionChange(list) {
|
this.referBtmDialogParams.referBtmSelectionList = list;
|
this.$refs[this.referBtmDialogParams.ref].setCurrentRow(this.referBtmDialogParams.referBtmSelectionList[list.length-1]);
|
},
|
referBtmSelectionClear() {
|
this.referBtmDialogParams.referBtmSelectionList = [];
|
this.$nextTick(() => {
|
this.$refs[this.referBtmDialogParams.ref].toggleSelection();
|
});
|
},
|
referBtmCurrentChange(currentPage){
|
this.referBtmDialogParams.referBtmDataPage.currentPage = currentPage;
|
},
|
referBtmSizeChange(pageSize){
|
this.referBtmDialogParams.referBtmDataPage.pageSize = pageSize;
|
},
|
refreshReferBtmDataChange() {
|
this.referBtmOnLoad(this.referBtmDialogParams.referBtmDataPage, this.referBtmDialogParams.referBtmQuery);
|
},
|
//加载中参照引用的业务类型的数据
|
referBtmOnLoad() {
|
let referBtmParams = this.referBtmDialogParams;
|
this.referBtmDialogParams.referBtmDialogLoading = true;
|
let param = {};
|
// 多个conditionMap这样传参
|
if(referBtmParams.referBtmQuery){
|
Object.keys(referBtmParams.referBtmQuery).forEach(key=>{
|
param['conditionMap['+key+']'] = referBtmParams.referBtmQuery[key];
|
});
|
}
|
referDataGrid(
|
referBtmParams.referBtmDataPage.currentPage,
|
referBtmParams.referBtmDataPage.pageSize,
|
param
|
).then(res => {
|
//console.log(res.data);
|
const data = res.data.data;
|
this.referBtmDialogParams.referBtmDataPage.total = data.total;
|
this.referBtmDialogParams.referBtmData = data.records;
|
this.referBtmDialogParams.referBtmDialogLoading = false;
|
//this.referBtmSelectionClear();
|
//表格行错位问题
|
this.$nextTick(() => {
|
this.$refs[this.referBtmDialogParams.ref].doLayout();
|
})
|
});
|
},
|
|
},
|
}
|
</script>
|
|
<style>
|
|
</style>
|
