<template>
|
<div ref="container" class="page-list-container">
|
<!--数据Table-->
|
<yrt-data-list :ref="dataListRef" :editor-ref="editorRef" :data-options="dataOptions" :fields.sync="dataListOptions.fields" :buttons="dataListOptions.buttons" :button-click="buttonClick" :data-list-selections.sync="dataListSelections" :auth-nodes="authNodes">
|
</yrt-data-list>
|
|
<!--数据编辑器Editor-->
|
<yrt-editor :ref="editorRef" :data-list-ref="dataListRef" v-bind="editorOptions" :data-options="dataOptions" :action.sync="editorOptions.action" :visible.sync="editorOptions.config.visible" :detail-button-click="detailButtonClick" :auth-nodes="authNodes">
|
</yrt-editor>
|
</div>
|
</template>
|
|
<script>
|
import yrtDataList from "@/components/common/yrtDataList";
|
import yrtEditor from "@/components/common/yrtEditor";
|
|
export default {
|
components: {
|
yrtDataList, // 数据管理器
|
yrtEditor // 数据编辑器
|
},
|
data() {
|
return {
|
dataOptions: {},
|
dataListOptions: {},
|
editorOptions: {
|
config: {}
|
},
|
// 列表选中项
|
dataListSelections: [],
|
// 权限点
|
authNodes: {},
|
// 按钮是否只读
|
btnReadOnly: {
|
save: false,
|
auditing: false,
|
add: false,
|
delete: false,
|
stop: false,
|
open: false
|
}
|
};
|
},
|
computed: {
|
// 组件后缀名
|
subName: function() {
|
var name = this.$options.name;
|
if (name) name = "-" + name;
|
return name;
|
},
|
// 编辑弹窗ref
|
editorRef: function() {
|
return "editor-dialog" + this.subName;
|
},
|
// 列表页ref
|
dataListRef: function() {
|
return "data-list" + this.subName;
|
},
|
// 编辑对话框组件
|
editor: function() {
|
return this.$refs[this.editorRef];
|
},
|
// 列表组件
|
dataList: function() {
|
return this.$refs[this.dataListRef];
|
},
|
// 编辑主表数据
|
masterData: function() {
|
return this.editor.formData;
|
},
|
// 编辑明细表数据1
|
detailRows: function() {
|
var details = this.editorOptions.fields.filter(item => item.type === "detail-grid");
|
if (details <= 0) return null;
|
|
const tableView = details[0].subTableView;
|
return this.editor.formData[tableView].rows;
|
},
|
// 编辑明细表数据2
|
detailRows2: function() {
|
var details = this.editorOptions.fields.filter(item => item.type === "detail-grid");
|
if (details <= 1) return null;
|
|
const tableView = details[1].subTableView;
|
return this.editor.formData[tableView].rows;
|
}
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
// 列表工具栏点击事件
|
buttonClick(authNode) {
|
if (authNode === "add") {
|
this.editor.addData();
|
return true;
|
}
|
},
|
// 明细工具栏点击事件
|
detailButtonClick(authNode) {},
|
// 初始化数据
|
init() {
|
var router = this.$route.fullPath;
|
if (this.$options.custoJsonmRoute) router = this.$options.custoJsonmRoute;
|
|
// 加载页面布局数据
|
var json = "/static" + router + ".json";
|
this.axios
|
.get(json)
|
.then(response => {
|
// 系统自动计算列宽
|
response.data.dataListOptions.fields.forEach(field => {
|
field.minWidth = field.minWidth || 80;
|
});
|
|
Object.keys(response.data).forEach(key => {
|
this[key] = response.data[key];
|
});
|
// 获得表格自定义设置
|
var key = "tableConfig_" + router;
|
var fields = localStorage.getItem(key);
|
if (fields) {
|
fields = JSON.parse(fields);
|
this.dataListOptions.fields = fields;
|
}
|
// 自定义表名
|
var tableName = this.$options.tableName;
|
if (tableName) {
|
this.$set(this.dataOptions, tableName, tableName);
|
}
|
// 自定义函数，用于处理数据
|
var init = this.$options.init;
|
if (typeof init === "function") {
|
init(this);
|
}
|
|
this.$nextTick(() => {
|
// 加载权限
|
this.loadAuth();
|
// 开始加载数据
|
if (this.dataList) {
|
// 优先加载下拉框，然后在加载数据
|
this.dataList.loadDropDown();
|
}
|
});
|
})
|
.catch(error => {
|
this.$message.error(error);
|
});
|
},
|
// 加载权限
|
loadAuth() {
|
// 获得明细表
|
var subTableViews = this.editorOptions.fields.filter(item => item.type === "detail-grid").map(item => item.subTableView);
|
|
// 加载页面权限
|
var url = "/api/auth/getAuth";
|
var params = {
|
id: this.dataOptions.menu_Id,
|
table_Id: this.dataOptions.table_Id,
|
fromVueData_Id: this.dataOptions.vueData_Id, // 根据原始ID找到用户自定义UIID
|
tableView: this.dataOptions.tableView,
|
subTableViews: subTableViews
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result && res.data) {
|
const auths = res.data.split(",");
|
auths.forEach(item => {
|
const nodes = item.split("=");
|
if (nodes.length >= 2) {
|
this.$set(this.authNodes, nodes[0], nodes[1] === "1");
|
}
|
});
|
}
|
// 自定义UI
|
if (res.result && !res.global_closeUserUIJson && res.userUIJson && res.userUIJson.dataOptions) {
|
this.$set(this, "dataOptions", res.userUIJson.dataOptions);
|
this.$set(this, "dataListOptions", res.userUIJson.dataListOptions);
|
this.$set(this, "editorOptions", res.userUIJson.editorOptions);
|
// 获得表格自定义设置
|
var router = this.$route.fullPath;
|
var key = "tableConfig_" + router;
|
var fields = localStorage.getItem(key);
|
if (fields) {
|
fields = JSON.parse(fields);
|
this.dataListOptions.fields = fields;
|
}
|
}
|
// 开启全局数据排序
|
if (res.global_openSortable) {
|
this.dataListOptions.fields.forEach(item => {
|
item.sortable = true;
|
});
|
}
|
|
if (res.result && res.userJson) {
|
this.setUserJson(res);
|
}
|
// 自定义函数，用于权限
|
var doAuth = this.$options.doAuth;
|
if (typeof doAuth === "function") {
|
doAuth(this);
|
}
|
},
|
false
|
);
|
},
|
// 连接弹出对话框编辑器
|
linkEditor(id) {
|
var ref = this.findRef(this.editorRef);
|
ref.editData(id);
|
},
|
// 刷新所有页面的下拉框
|
refreshDropdown() {
|
var root = this.$root;
|
const refresh = node => {
|
if (!node || !node.$children) return;
|
|
node.$children.forEach(child => {
|
var name = child.$options.name || child.$options.componentName;
|
if (!name) {
|
try {
|
name = child.$el.attributes && child.$el.attributes["name"] && child.$el.attributes.name.value;
|
} catch (e) {
|
this.$message.error(e.messsage);
|
}
|
}
|
if (child.editor && typeof child.editor.reLoadDropDown === "function") {
|
child.editor.reLoadDropDown();
|
}
|
refresh(child);
|
});
|
};
|
refresh(root);
|
},
|
// 合并自定义设置
|
setUserJson(res) {
|
const userJson = res.userJson;
|
// 查找明细字段
|
var _findEditorField = function(array, prop) {
|
for (const item of array) {
|
if (item.type === "grid") {
|
for (const colItem of item.columns) {
|
const _field = _findEditorField(colItem.fields, prop);
|
if (_field) return _field;
|
}
|
} else if (item.type === "inline-group") {
|
const _field = _findEditorField(item.fields, prop);
|
if (_field) return _field;
|
} else if (item.type === "detail-grid") {
|
const _field = _findEditorField(item.fields, prop);
|
if (_field) return _field;
|
} else {
|
if (item.options && item.options.prop === prop) {
|
return item;
|
}
|
}
|
}
|
};
|
if (userJson && userJson.fields) {
|
// 存在自定义排序
|
let hasSortNo = false;
|
userJson.fields.forEach(field => {
|
// 列表页面
|
const _field = this.dataListOptions.fields.find(f => f.prop === field.prop);
|
if (_field) {
|
if (field.sortNo) {
|
_field.sortNo = field.sortNo;
|
hasSortNo = true;
|
}
|
if (field.label) {
|
_field.label = field.label;
|
}
|
if (field.width) {
|
_field.width = field.width;
|
}
|
}
|
// 编辑页面
|
const _fieldEditor = _findEditorField(this.editorOptions.fields, field.prop);
|
if (_fieldEditor) {
|
if (field.label) {
|
_fieldEditor.label = field.label;
|
}
|
if (field.blank !== undefined) {
|
_fieldEditor.options.required = !field.blank;
|
if (_fieldEditor.rules) {
|
const rule = _fieldEditor.rules.find(item => item.required);
|
if (rule) {
|
rule.required = !field.blank;
|
}
|
}
|
}
|
}
|
});
|
// 列表进行排序
|
if (hasSortNo) {
|
this.dataListOptions.fields.sort((a, b) => {
|
return (a.sortNo || 0) > (b.sortNo || 0) ? -1 : 1;
|
});
|
this.$nextTick(() => {
|
this.$forceUpdate();
|
if (this.dataList) this.dataList.setCurrentRow(); // 目的是让列表页面重新渲染一下
|
});
|
}
|
}
|
|
// 系统自动计算列宽
|
this.dataListOptions.fields.forEach(field => {
|
let width = 60;
|
if (field.label) {
|
const _width = 16 * field.label.length;
|
if (_width > 60) {
|
width = _width;
|
}
|
}
|
// 开启全局数据排序
|
if (res.global_openSortable) {
|
width += 25;
|
}
|
if (field.remark) {
|
width += 20;
|
}
|
if (width > field.width || !field.width) {
|
this.$set(field, "minWidth", width);
|
delete field.width;
|
}
|
});
|
|
// 获得明细表
|
var subTableViews = this.editorOptions.fields.filter(item => item.type === "detail-grid");
|
|
// 明细字段处理
|
const subUserJsons = res.subUserJsons;
|
subUserJsons.forEach(item => {
|
const userJson = item.userJson;
|
const subFields = subTableViews.find(row => row.subTableView === item.subTableView).fields;
|
if (userJson && userJson.fields) {
|
// 存在自定义排序
|
let hasSortNo = false;
|
userJson.fields.forEach(field => {
|
// 明细列表
|
const _field = subFields.find(f => f.prop === field.prop);
|
if (_field) {
|
if (field.sortNo) {
|
_field.sortNo = field.sortNo;
|
hasSortNo = true;
|
}
|
if (field.label) {
|
_field.label = field.label;
|
}
|
if (field.width) {
|
_field.width = field.width;
|
}
|
}
|
});
|
// 列表进行排序
|
if (hasSortNo) {
|
subFields.sort((a, b) => {
|
return (a.sortNo || 0) > (b.sortNo || 0) ? -1 : 1;
|
});
|
}
|
}
|
});
|
},
|
// 解码
|
decode(code) {
|
const re = /71-[0-9a-zA-Z-]+/;
|
const result = re.exec(code);
|
return "P" + result;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.page-list-container {
|
min-height: calc(100vh - 110px);
|
overflow: hidden;
|
position: relative;
|
}
|
|
@media screen and (max-height: 900px) {
|
.page-list-container {
|
min-height: 600px;
|
}
|
}
|
</style>
|
