diff --git a/src/component/pro-table/CrudTable.vue b/src/component/pro-table/CrudTable.vue
new file mode 100644
index 0000000..c1aafb1
--- /dev/null
+++ b/src/component/pro-table/CrudTable.vue
@@ -0,0 +1,1106 @@
+
+
+
+
+
+
+
+
+
+
{{tableTitle}}
+
+
+
+
+
+
+
+ {{text.multiDel}}
+
+ {{text.add}}
+
+
+
+
+
+
+
+
+
+
+
+ {{text.multiDel}}
+
+ {{text.add}}
+
+
+
+
+
+
+
+ {{this.emptyText}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{text.add}}
+
+
+
+ {{text.edit}}
+
+
+ {{text.detail}}
+
+
+ {{text.del}}
+
+
+
+
+
+
+
+
+ {{ scope.row[column.prop] }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/component/pro-table/src/ProTable.vue b/src/component/pro-table/src/ProTable.vue
index 0089d62..8e034e3 100644
--- a/src/component/pro-table/src/ProTable.vue
+++ b/src/component/pro-table/src/ProTable.vue
@@ -1,5 +1,5 @@
{{tableTitle}}
-
-
-
- {{text.multiDel}}
-
- {{text.add}}
-
-
- {{text.multiDel}}
-
- {{text.add}}
@@ -77,17 +46,17 @@
+ :data="tableData">
{{this.emptyText}}
-
-
-
-
-
+
+
+
-
+
-
-
- {{text.add}}
-
-
-
- {{text.edit}}
-
-
- {{text.detail}}
-
-
- {{text.del}}
-
-
-
-
-
+
+
-
-
-
-
-
-
-
@@ -229,7 +140,6 @@ import { confirm } from '@/utils/confirm';
import SvgIcon from '@/icons/SvgIcon.vue';
import _cloneDeep from 'lodash/cloneDeep';
import { DML, Params, DataSource } from '@/types/common';
-import GenerateFormDialog from './GenerateFormDialog.vue';
import SearchForm from './SearchForm.vue';
const STATUS = {
@@ -240,7 +150,6 @@ const STATUS = {
@Component({
name: 'ProTable',
components: {
- GenerateFormDialog,
SearchForm,
SvgIcon,
},
@@ -249,14 +158,9 @@ export default class ProTable extends Vue {
// https://github.com/vuejs/vue-class-component/issues/94
$refs!: {
table: HTMLFormElement;
- dialog: HTMLFormElement;
searchForm: HTMLFormElement;
- TableDesigner: HTMLFormElement;
};
- // 当前点击行
- currentRow: any = {};
-
// 结果总数
total = 0;
@@ -299,32 +203,6 @@ export default class ProTable extends Vue {
})
searchMode!: string;
- // listField
- @Prop({
- type: String,
- default: 'data.list',
- })
- listField!: string;
-
- // 设置只读
- @Prop({ default: false, type: Boolean }) readOnly!: any;
-
- // 添加对话框预填项
- @Prop({ default: null, type: Object }) prefill!: any;
-
- // 弹出表单appendToBody
- @Prop({ default: true, type: Boolean }) dialogAppendToBody!: boolean;
-
- // 弹出表单width
- @Prop({ default: '80%', type: String }) dialogWidth!: string;
-
- // 用于请求表格设计json的name
- @Prop({
- type: String,
- default: null,
- })
- tableDesignerName!: string;
-
// 对话框内加载FormDesigner的表名
@Prop({
type: String,
@@ -335,13 +213,6 @@ export default class ProTable extends Vue {
// 内部元素显示控制
@Prop({ default: () => ({}), type: Object }) visibleList!: any;
- // 表名
- @Prop({
- type: String,
- default: '',
- })
- tableName!: string;
-
// 表格标题
@Prop({
type: String,
@@ -349,48 +220,6 @@ export default class ProTable extends Vue {
})
tableTitle!: string;
- // 按钮名字
- @Prop({ default: () => ({}), type: Object }) textMap!: any;
-
- // 删除方法代理
- @Prop({ default: null, type: Function }) promiseForDel!: any;
-
- // 批量删除方法代理
- @Prop({ default: null, type: Function }) promiseForDels!: any;
-
- // 详情方法代理
- @Prop({ default: null, type: Function }) promiseForDetail!: any;
-
- // 代理保存方法
- @Prop({ default: null, type: Function }) promiseForSave!: any;
-
- // 请求数据方法代理
- @Prop({ default: null, type: Function }) promiseForSelect!: any;
-
- // 删除按钮是否可见代理
- @Prop({ default: null, type: Function }) btnDelVisibleFunc!: any;
-
- // 编辑按钮是否可见代理
- @Prop({ default: null, type: Function }) btnEditVisibleFunc!: any;
-
- // 表格行中的添加按钮是否显示事件
- @Prop({ default: null, type: Function }) btnAddVisibleFunc!: any;
-
- // 查看按钮是否可见代理
- @Prop({ default: null, type: Function }) btnDetailVisibleFunc!: any;
-
- // 表格添加按钮点击事件
- @Prop({ default: null, type: Function }) btnAddOnClick!: any;
-
- // 表格行中的编辑按钮点击事件
- @Prop({ default: null, type: Function }) btnEditOnClick!: any;
-
- // 表格行中的查看按钮点击事件
- @Prop({ default: null, type: Function }) btnDetailOnClick!: any;
-
- // 表格行中的添加按钮点击事件
- @Prop({ default: null, type: Function }) btnRowAddOnClick!: any;
-
// 是否显示分页
@Prop({ default: true, type: Boolean }) showPagination!: boolean;
@@ -440,13 +269,6 @@ export default class ProTable extends Vue {
// 排序条件
@Prop({ default: null, type: String }) orderCondition!: string;
- // totalField
- @Prop({
- type: String,
- default: 'data.total',
- })
- totalField!: string;
-
// tableParams 预设查询参数
@Prop({
type: [Object, Array],
@@ -477,6 +299,7 @@ export default class ProTable extends Vue {
@Prop({
type: Object,
default: null,
+ required: true,
})
columns!: any;
@@ -502,42 +325,15 @@ export default class ProTable extends Vue {
};
}
- // 文本映射
- get text() {
- return {
- add: '添加',
- edit: '编辑',
- del: '删除',
- detail: '查看',
- multiDel: '批量删除',
- ...this.textMap,
- };
- }
-
// 内部元素显示控制
get view() {
const viewObj = {
searchForm: true,
tableTitle: false,
- btnAdd: true,
- btnDel: false,
- actionColumnBtnAdd: false,
- actionColumnBtnEdit: true,
- actionColumnBtnDetail: false,
- actionColumnBtnDel: true,
actionColumn: true,
seniorSearchBtn: true,
- btnAddOnColumnHeader: false,
...this.visibleList,
};
- // 只读模式隐藏添加编辑删除按钮
- if (this.readOnly) {
- viewObj.btnAdd = false;
- viewObj.btnAddOnColumnHeader = false;
- viewObj.actionColumnBtnDel = false;
- viewObj.actionColumnBtnEdit = false;
- viewObj.actionColumnBtnDetail = true;
- }
// 操作列是否隐藏
if (!viewObj.actionColumn) {
this.tableConfig.columns = this.tableConfig.columns.filter((item: any) => item.slotName !== 'actionColumn');
@@ -557,205 +353,22 @@ export default class ProTable extends Vue {
// 外侧传入表格json
if (this.columns) {
this.tableConfig = this.columns;
- return;
- }
- // 请求表格设计json
- const promise = this.$PROCRUD.getTableDetail(this.tableDesignerName ? this.tableDesignerName : this.tableName);
- // 加载表格结构
- promise.then((res) => {
- this.tableConfig = JSON.parse(res.data.formJson);
- const { actionColumnWidth } = this;
- // 如果显示指明了操作列列宽
- if (actionColumnWidth) {
- const actionColumn: any = this.tableConfig.columns.find((item: any) => item.slotName === 'actionColumn');
- if (actionColumn) {
- actionColumn.width = actionColumnWidth;
- actionColumn.minWidth = actionColumnWidth;
- }
- }
- });
- }
-
- // 表格刷新
- tableReload() {
- this.dataChangeHandler();
- }
-
- // 添加
- btnAdd() {
- if (this.btnAddOnClick) {
- this.btnAddOnClick();
- } else if (this.prefill) {
- // 对话框内加载预填项
- this.$refs.dialog.showDialog({}, 0, this.prefill);
} else {
- this.$refs.dialog.showDialog();
- }
- }
-
- // 操作列-添加
- actionColumnAdd(row) {
- // 添加成功后需要刷新当前结点的子节点,此处特殊处理
- this.currentRow.parentid = _cloneDeep(row).id;
- if (this.btnRowAddOnClick) {
- this.btnRowAddOnClick(row);
- } else if (this.prefill) {
- // 对话框内加载预填项
- // 此处跟正常情况的preFill不一样
- // 此处传的为Array
- // 用于tree接口点添加自动赋值parentid的情况
- // 例如传 { parentid : id} 则表示添加的parentid = row.id
- const obj = {};
- Object.keys(this.prefill).forEach((key) => {
- obj[key] = row[this.prefill[key]];
- });
- this.$refs.dialog.showDialog({}, 0, obj);
- } else {
- this.$refs.dialog.showDialog();
- }
- }
-
- // 操作列-编辑
- actionColumnEdit(row) {
- this.currentRow = row;
- if (this.btnEditOnClick) {
- this.btnEditOnClick(row);
- } else {
- const promise = this.promiseForDetail
- ? this.promiseForDetail(row.id)
- : this.$PROCRUD.crud(
- DML.DETAIL,
- this.tableName,
- {},
- {
- id: row.id,
- },
- );
- // 请求后台detail接口获取表单数据
- promise.then((res) => {
- this.$refs.dialog.showDialog({ id: row.id }, STATUS.UPDATE, res.data);
- });
+ this.$message.error('请先设置columns');
}
}
- // 操作列-查看
- actionColumnDetail(row) {
- this.currentRow = row;
- if (this.btnDetailOnClick) {
- this.btnDetailOnClick(row);
- } else {
- const promise = this.promiseForDetail
- ? this.promiseForDetail(row.id)
- : this.$PROCRUD.crud(
- DML.DETAIL,
- this.tableName,
- {},
- {
- id: row.id,
- },
- );
- // 请求后台detail接口获取表单数据
- promise.then((res) => {
- this.$refs.dialog.showDialog({ id: row.id }, STATUS.DETAIL, res.data);
- });
- }
- }
-
- // 批量删除按钮
- btnDeletesOnClick() {
- const { length } = this.selectedRows || [];
- if (length > 0) {
- this.$confirm(`已选中${length}项,确认删除?`, '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- })
- .then(() => {
- const promise = this.promiseForDels
- ? this.promiseForDels(this.selectedRows.map(item => item.id))
- : this.$PROCRUD.crud(
- DML.DELETES,
- this.tableName,
- this.selectedRows.map(item => item.id),
- );
- promise.then(() => {
- this.tableReload();
- this.$message.success('批量删除成功');
- });
- })
- .catch(() => {
- this.$message.info('已取消删除');
- });
- } else {
- this.$message('请先选择删除项');
- }
- }
-
- // 操作列-删除
- @confirm('确认删除?', '提示')
- actionColumnDel(row) {
- this.currentRow = row;
- // 如果prop传入了promiseForDel说明需要回调自定义删除
- const promise = this.promiseForDel ? this.promiseForDel(row.id) : this.$PROCRUD.crud(DML.DELETE, this.tableName, {}, { id: row.id });
- promise.then(() => {
- this.tableReload();
- this.$message({
- type: 'success',
- message: '删除成功',
- });
- });
- }
-
- // 操作列-添加按钮是否显示
- actionColumnBtnAddVisible(row) {
- let visible;
- if (this.btnAddVisibleFunc) {
- // 如果传入了计算函数,取函数结果
- visible = this.btnAddVisibleFunc(row);
- } else {
- // 默认不显示
- visible = this.view.actionColumnBtnAdd;
- }
- return visible;
- }
-
- // 操作列-编辑按钮是否显示
- actionColumnBtnEditVisible(row) {
- let visible;
- if (this.btnEditVisibleFunc) {
- // 如果传入了计算函数,取函数结果
- visible = this.btnEditVisibleFunc(row);
- } else {
- // 默认不显示
- visible = this.view.actionColumnBtnEdit;
- }
- return visible;
+ mounted() {
+ // 请求数据
+ this.fetchHandler(true);
+ // 自适应分页组件按钮;
+ window.addEventListener('resize', this.resizeHandler);
}
- // 操作列-详情按钮是否显示
- actionColumnBtnDetailVisible(row) {
- let visible;
- // 如果传入了计算函数,取函数结果
- if (this.btnDetailVisibleFunc) {
- visible = this.btnDetailVisibleFunc(row);
- } else {
- // 默认不显示
- visible = this.view.actionColumnBtnDetail;
- }
- return visible;
- }
- // 操作列-删除按钮是否显示
- actionColumnBtnDelVisible(row) {
- let visible;
- if (this.btnDelVisibleFunc) {
- // 如果传入了计算函数,取函数结果
- visible = this.btnDelVisibleFunc(row);
- } else {
- // 默认显示
- visible = this.view.actionColumnBtnDel;
- }
- return visible;
+ // 表格刷新
+ tableReload() {
+ this.dataChangeHandler();
}
// 多选事件
@@ -764,26 +377,6 @@ export default class ProTable extends Vue {
this.$emit('selection-change', selection);
}
- // 生成的按钮点击
- formBtnOnClick(widget) {
- this.$emit('form-btn-on-click', widget);
- }
-
- // 监听dialog中form对象改变
- formChange(val) {
- this.$emit('form-change', val);
- }
-
- mounted() {
- // 请求数据
- this.fetchHandler(true);
-
- // 自适应分页组件按钮;
- window.addEventListener('resize', this.resizeHandler);
- // 初始化表格高度
- this.setMaxHeight();
- }
-
resizeHandler() {
this.setPagerByWidth();
this.setMaxHeight();
@@ -826,19 +419,9 @@ export default class ProTable extends Vue {
let searchCondition: any[] = [];
this.loading = true;
const {
- showPagination, pageIndexKey, pageSizeKey, pagination, listField, totalField,
+ showPagination, pageIndexKey, pageSizeKey, pagination,
} = this;
const { tableParams, searchFormCondition } = this;
-
- // 已加载完成, tree lazy table 局部刷新. 待处理
- // if (this.lazy && this.tableData.length > 0) {
- // this.treeload({
- // id: this.currentRow.parentid,
- // });
- // this.loading = false;
- // return;
- // }
-
// 如清空查询条件,则清空
if (clearParams) {
searchCondition = [];
@@ -888,13 +471,14 @@ export default class ProTable extends Vue {
.then((response: DataSource) => {
const { data = [], total = 0 } = response;
this.tableData = data;
- // 以下代码 获取该列表总数
this.total = total;
this.loading = false;
+ // 刷新表格清空已勾选项
if (this.$refs.table) {
- // 获取到数据后清空已选项
this.$refs.table.clearSelection();
}
+ // 初始化表格高度
+ this.setMaxHeight();
this.$emit('done', this);
})
.catch((e) => {
@@ -907,28 +491,6 @@ export default class ProTable extends Vue {
});
}
- /** 懒加载树 */
- treeload(tree, treeNode?: any, resolve?: any) {
- const { tableName } = this;
- const data = {
- searchCondition: [
- {
- field: 'parentid',
- operator: 'eq',
- value: tree.id,
- },
- ],
- };
-
- this.$PROCRUD.crud(DML.TREE_LAZY, this.tableName, data).then((res) => {
- if (resolve) {
- resolve(res.data);
- }
- // 强制更新已渲染子结点
- this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, res.data);
- });
- }
-
/**
* 排序条件发生变化的时候会触发该事件
*
@@ -949,32 +511,6 @@ export default class ProTable extends Vue {
window.removeEventListener('resize', this.resizeHandler);
}
- /**
- * 下列为dev模式代码,不需要可自行删除
- *
- */
- tableOnSave({ tableDesign }) {
- this.tableConfig = tableDesign;
- // 如果不显示操作列,则隐藏
- if (!this.view.actionColumn) {
- this.tableConfig.columns = this.tableConfig.columns.filter((item: any) => item.slotName !== 'actionColumn');
- }
- const { actionColumnWidth } = this;
- // 如果显示指明了操作列列宽
- if (actionColumnWidth) {
- const actionColumn: any = this.tableConfig.columns.find((item: any) => item.slotName === 'actionColumn');
- if (actionColumn) {
- actionColumn.width = actionColumnWidth;
- actionColumn.minWidth = actionColumnWidth;
- }
- }
- }
-
- async showTableDesigner() {
- const res = await this.$PROCRUD.getTableDetail(this.tableDesignerName || this.tableName);
- this.$refs.TableDesigner.showDialog({ id: res.data.id }, 1, res.data);
- }
-
@Watch('columns', {
deep: true,
})
@@ -1030,13 +566,5 @@ export default class ProTable extends Vue {
margin-left: 10px;
}
}
- .dev-module {
- display: inline-block;
- margin-left: 20px;
- line-height: 28px;
- button {
- padding: 0;
- }
- }
}