<template>
|
<el-dialog
|
v-dialogDrag
|
v-loading="loading"
|
:visible.sync="visible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="表格"
|
width="60%"
|
@close="closeDialog"
|
>
|
<el-form ref="form" v-loading="formLoading" :model="form" :rules="rules" label-position="right" label-width="100px"
|
size="small">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="名称" prop="viName">
|
<el-input v-model="form.viName" placeholder="请输入名称"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="每页行数">
|
<el-input v-model="form.itemPageSize" placeholder="请输入每页行数" type="number"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="附加查询条件">
|
<el-input v-model="form.itemAddFilter" placeholder="请输入查询条件"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="绑定表单" prop="itemInObj">
|
<div style="display: flex;align-items: center;">
|
<el-select v-model="form.itemInObj" clearable placeholder="请选择绑定表单"
|
@change="formSelectChange">
|
<el-option v-for="(item,index) in selectList" :key="index" :label="item.viName"
|
:value="item.id"></el-option>
|
</el-select>
|
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="父名称">
|
<div style="display: flex;align-items: center;">
|
<el-input v-model="form.itemParentFolderName" placeholder="请输入父名称"></el-input>
|
<el-checkbox v-model="form.itemIsNavigatorExpand" style="margin-left: 5px; margin-right: 5px">显示查询区域
|
</el-checkbox>
|
<el-checkbox v-model="form.itemIsShowFolder" style="margin-left: 5px;margin-right: 0px">显示文件夹
|
</el-checkbox>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="显示字段" prop="showLabel">
|
<el-drag-select v-model="form.itemOutFieldList" multiple placeholder="请选择" style="width:100%;" @outFileChange="outFileChange">
|
<el-option v-for="(item,index) in form.itemSelectOutFieldList" :key="index" :label="item.id"
|
:value="item.id"/>
|
</el-drag-select>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="搜索字段">
|
<el-select v-model="form.itemKeyFieldList" multiple placeholder="请选择" style="width: 100%">
|
<el-option
|
v-for="(item,index) in form.itemSearchFieldList"
|
:key="index"
|
:label="item.id"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
|
<el-col :span="24">
|
<el-form-item label="设置列宽">
|
<avue-crud
|
:data="form.itemFieldWidthList"
|
:option="fileWidthOption">
|
</avue-crud>
|
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="8">
|
<el-form-item label="查询字段">
|
<el-input v-model="form.searchLabel" placeholder="请输入查询字段" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="8">
|
<el-form-item label="查询次数">
|
<el-input v-model="form.searchNumber" placeholder="请输入查询次数" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="8">
|
<el-form-item label="查询sql">
|
<div style="display: flex;align-items: center">
|
<el-input v-model="form.searchSql" placeholder="请输入sql" size="mini"></el-input>
|
<el-button plain size="mini" style="margin-left: 3px" type="success" @click="searchAddClickHandler">添加
|
</el-button>
|
<el-button plain size="mini" style="margin-left: 3px" type="danger" @click="searchDelClickHandler">删除
|
</el-button>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="查询字段">
|
<div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
|
<el-table
|
:data="form.itemSeniorQueryBOS"
|
:highlight-current-row="true"
|
border
|
stripe
|
style="width: 100%"
|
@row-click="itemSeniorRowClick">
|
<el-table-column
|
align="center"
|
label="查询字段"
|
prop="itemSeniorQueryCols">
|
<template slot-scope="scope">
|
<el-tag size="medium">{{ scope.row.itemSeniorQueryCols }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="查询次数"
|
prop="itemSeniorQueryColsCounts">
|
<template slot-scope="scope">
|
<el-tag size="medium">{{ scope.row.itemSeniorQueryColsCounts }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
label="查询sql"
|
prop="itemQuerySql">
|
<template slot-scope="scope">
|
<el-tag size="medium">{{ scope.row.itemQuerySql }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="双击操作">
|
<el-select v-model="form.itemDbl" placeholder="请选择双击操作">
|
<el-option v-for="(item,index) in itemDblList" :key="index" :label="item.value"
|
:value="item.key"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="图片显示">
|
<div style="display: flex;align-items: center">
|
<div style="display: flex;align-items: center;width: 100%;">
|
<span>长：</span>
|
<el-input v-model="itemImgHeight" placeholder="请输入长度"></el-input>
|
</div>
|
<div style="display: flex;align-items: center;width: 100%;margin-left: 30px">
|
<span>宽：</span>
|
<el-input v-model="itemImgWidth" placeholder="请输入宽度"></el-input>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="字符串截取">
|
<el-input v-model="form.itemCut" placeholder="请输入字符串" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="8">
|
<el-form-item label="超链接">
|
<el-input v-model="form.itemHrefConf" placeholder="请输入超链接" size="mini"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="查询模板">
|
<el-select v-model="form.itemQtName" placeholder="请选择查询模板">
|
<el-option v-for="(item,index) in searchQtNameList" :key="index" :label="item.qtName"
|
:value="item.qtName"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="closeDialog">取 消</el-button>
|
<el-button type="primary" @click="dialogSaveClickHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
</template>
|
|
<script>
|
import basicOption from "@/util/basic-option";
|
import {gridPortalVIDatas, getPortalVIById, getItemDblList, savePortalVI, getObjTypeQTs} from "@/api/UI/formDefine/api";
|
import func from "@/util/func";
|
import ElDragSelect from './DragSelect'
|
|
export default {
|
name: "tableDialog",
|
components: {ElDragSelect},
|
props: {
|
TreeNodeRow: {
|
type: Object,
|
default: () => {
|
}
|
},
|
treeRadio: {
|
type: String,
|
default: ""
|
}
|
},
|
created() {
|
// this.getDbList();
|
},
|
data() {
|
return {
|
fileWidthOption: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
refreshBtn: false,
|
highlightCurrentRow: true,
|
height: 200,
|
menu: false,
|
selection: false,
|
column: [
|
{
|
label: '列名',
|
prop: 'key',
|
},
|
{
|
label: '列宽',
|
prop: 'value',
|
cell: true,
|
rules: [
|
{
|
required: true,
|
message: '请输入列宽',
|
trigger: 'blur'
|
}
|
]
|
}
|
]
|
},
|
searchQtNameList: [],
|
formLoading: false,
|
itemImgHeight: '',
|
itemImgWidth: '',
|
itemSeniorRow: {},
|
itemDblList: [],
|
selectFormOption: {
|
...basicOption,
|
addBtn: false,
|
menu: false,
|
refreshBtn: false,
|
column: [
|
{
|
label: '业务名称',
|
prop: 'typeName',
|
|
},
|
{
|
label: '名称',
|
prop: 'viName',
|
sortable: true,
|
},
|
{
|
label: '类型',
|
prop: 'viTypeText',
|
},
|
]
|
},
|
selectFormData: [],
|
selectFormLoading: false,
|
selectFormVisible: false,
|
rules: {
|
viName: [{
|
required: true,
|
message: '请输入名称',
|
trigger: 'blur'
|
}],
|
itemInObj: [{
|
required: true,
|
message: '请选择绑定表单',
|
trigger: 'change'
|
}],
|
// showLabel: [{
|
// required: true,
|
// message: '请选择显示字段',
|
// trigger: 'submit'
|
// }],
|
},
|
form: {
|
viName: '', // 名称
|
itemPageSize: '', // 每页可显示行数
|
itemAddFilter: '', // 附加查询条件
|
itemInObj: '', // 绑定表单
|
itemParentFolderName: '', // 父名称
|
itemIsShowFolder: false, // 是否显示文件夹
|
itemIsNavigatorExpand: false, // 显示查询区域
|
itemSelectOutFieldList: [], // 可使用字段
|
itemOutFieldList: [], // 需要使用字段 // 列下拉框
|
itemSearchFieldList: [], // 可供搜索使用字段
|
itemKeyFieldList: [], // 需要搜索字段
|
itemWidth: '250', // 宽度
|
itemFieldWidthList: [], // 设置列宽数组 与 itemOutFieldList 相匹配
|
searchLabel: '', // 查询字段
|
searchNumber: '1', // 查询次数
|
searchSql: '', // 查询sql
|
itemSeniorQueryBOS: [], // 查询字段列表
|
itemDbl: [], // 双击操作
|
itemImgWH: '', // 图片宽高 w,h
|
itemCut: '', // 字符串截取
|
itemHrefConf: '', // 超链接
|
itemQtName: '', // 查询模板
|
},
|
defaultForm: {
|
viName: '', // 名称
|
itemPageSize: '', // 每页可显示行数
|
itemAddFilter: '', // 附加查询条件
|
itemInObj: '', // 绑定表单
|
itemParentFolderName: '', // 父名称
|
itemIsShowFolder: false, // 是否显示文件夹
|
itemIsNavigatorExpand: false, // 显示查询区域
|
itemSelectOutFieldList: [], // 可使用字段
|
itemOutFieldList: [], // 需要使用字段 // 列下拉框
|
itemSearchFieldList: [], // 可供搜索使用字段
|
itemKeyFieldList: [], // 需要搜索字段
|
itemWidth: '250', // 宽度
|
itemFieldWidthList: [], // 设置列宽数组 与 itemOutFieldList 相匹配
|
searchLabel: '', // 查询字段
|
searchNumber: '1', // 查询次数
|
searchSql: '', // 查询sql
|
itemSeniorQueryBOS: [], // 查询字段列表
|
itemDbl: [], // 双击操作
|
itemImgWH: '', // 图片宽高 w,h
|
itemCut: '', // 字符串截取
|
itemHrefConf: '', // 超链接
|
itemQtName: '', // 查询模板
|
},
|
loading: false,
|
visible: false,
|
selectList: [],
|
lastIndex: null,
|
showLabelLeftRow: {},
|
showLabelRightRow: {},
|
searchLeftRow: {},
|
searchRightRow: {},
|
itemFileWidthRow: {},
|
itemFileWidthChangeVal: '',
|
}
|
},
|
methods: {
|
// 获取初始化表格里需要的默认数据
|
getFormSelectList() {
|
this.formLoading = true;
|
const params = {
|
'conditionMap[typeName]': this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name,
|
'conditionMap[viType]': 'Form',
|
'conditionMap[viTypeFlag]': this.treeRadio === '0' ? 'BtmType' : this.treeRadio === '1' ? 'LinkType' : '',
|
};
|
|
// 发起第一个请求
|
gridPortalVIDatas(1, -1, params).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.selectList = data;
|
|
// 确保 this.selectList 已经赋值且不为空
|
if (this.selectList && this.selectList.length > 0) {
|
const param = {
|
id: this.form.itemInObj,
|
viType: '1'
|
};
|
|
// 发起第二个请求
|
return getPortalVIById(param);
|
}
|
}
|
}).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.obj.prm.prmItemList.map(item => ({
|
id: item.itemField
|
}));
|
// 过滤出来需要使用字段 赋值给 可使用字段渲染 （使用字段由编辑接口传递）
|
const list = data.filter(item =>
|
!this.form.itemOutFieldList.some(outItem => outItem.id === item.id)
|
);
|
this.getSearchSelectList(); // 选择表单下拉接口
|
this.getFormSelect(); // 查询模板下拉接口
|
this.getDbList(); // 双击操作下拉接口
|
this.$set(this.form, 'itemSelectOutFieldList', list);
|
this.formLoading = false;
|
}
|
})
|
},
|
// 关闭对话框
|
closeDialog() {
|
this.visible = false;
|
this.$refs.form.clearValidate();
|
this.form = {...this.defaultForm};
|
},
|
|
// 获取选择表单数据
|
getFormSelect() {
|
const params = {
|
'conditionMap[typeName]': this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name,
|
'conditionMap[viType]': 'Form',
|
'conditionMap[viTypeFlag]': this.treeRadio === '0' ? 'BtmType' : this.treeRadio === '1' ? 'LinkType' : '',
|
}
|
gridPortalVIDatas(1, -1, params).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.selectList = data;
|
}
|
});
|
},
|
|
// 表单选择change事件
|
formSelectChange(val) {
|
this.form.itemOutFieldList = [];
|
this.form.itemKeyFieldList = [];
|
this.form.itemFieldWidthList = [];
|
|
const params = {
|
id: val,
|
viType: '1'
|
}
|
getPortalVIById(params).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.obj.prm.prmItemList.map(item => {
|
return {
|
id: item.itemField
|
}
|
});
|
this.form.itemSelectOutFieldList = data;
|
}
|
})
|
},
|
|
// 显示字段change
|
outFileChange(val) {
|
this.form.itemSearchFieldList = this.form.itemOutFieldList.map(item => {
|
return {
|
id: item
|
}
|
})
|
this.form.itemFieldWidthList = this.form.itemOutFieldList.map(item => {
|
return {
|
$cellEdit: true,
|
key: item,
|
value: '250',
|
}
|
})
|
},
|
|
// 查询模板下拉接口查询
|
getSearchSelectList() {
|
getObjTypeQTs({btName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name}).then(res => {
|
this.searchQtNameList = res.data.data;
|
})
|
},
|
|
// 获取双击操作数据
|
getDbList() {
|
getItemDblList().then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.itemDblList = data;
|
}
|
})
|
},
|
|
// 查询模板表格行点击
|
itemSeniorRowClick(row) {
|
this.itemSeniorRow = row;
|
},
|
|
// 查询模板添加
|
searchAddClickHandler() {
|
if (!this.form.searchLabel) {
|
this.$message.error('查询字段不能为空!');
|
return;
|
}
|
this.form.itemSeniorQueryBOS.push({
|
itemSeniorQueryCols: this.form.searchLabel,
|
itemSeniorQueryColsCounts: this.form.searchNumber,
|
itemQuerySql: this.form.searchSql
|
});
|
},
|
|
// 查询模板删除
|
searchDelClickHandler() {
|
if (func.isEmptyObject(this.itemSeniorRow)) {
|
this.$message.error('请选择一条数据进行删除');
|
return;
|
}
|
|
this.form.itemSeniorQueryBOS = this.form.itemSeniorQueryBOS.filter(item => item.itemSeniorQueryCols != this.itemSeniorRow.itemSeniorQueryCols);
|
},
|
|
// 表格对话框保存
|
dialogSaveClickHandler() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
if (this.form.itemOutFieldList.length <= 0) {
|
this.$message.error('请选择显示字段');
|
return;
|
}
|
const paramsForm = {...this.form};
|
paramsForm.itemSelectOutFieldList = this.form.itemSelectOutFieldList.map(item => item.id); // 可使用字段
|
paramsForm.itemOutFieldList = this.form.itemOutFieldList; // 需要使用字段
|
paramsForm.itemSearchFieldList = this.form.itemSearchFieldList.map(item => item.id); // 可供搜索字段
|
paramsForm.itemKeyFieldList = this.form.itemKeyFieldList; // 需要使用字段
|
paramsForm.itemImgWH = `${this.itemImgWidth},${this.itemImgHeight}`;
|
const params = {
|
id: this.form.editNodeId,
|
prm: {
|
formQtName: this.form.itemQtName,
|
prmItemList: [
|
paramsForm
|
],
|
},
|
typeFlag: this.treeRadio,
|
typeFlagText: this.treeRadio === '0' ? "业务类型的表单" : '链接类型的表单',
|
typeName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name, // 业务类型名 or 链接类型名
|
viName: this.form.viName,
|
viType: 0,
|
viTypeText: "表格"
|
}
|
savePortalVI(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
// this.closeDialog();
|
this.$emit('updataTable');
|
// this.$refs.form.clearValidate();
|
this.visible = false;
|
}
|
})
|
} else {
|
return false;
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-form-item .el-select {
|
//width: 100%;
|
}
|
}
|
</style>
|
