Skip to content

Commit

Permalink
perf: 优化表单表格设计器引入方式
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Jan 7, 2021
1 parent cb535e6 commit 994429e
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 64 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"axios": "^0.19.2",
"core-js": "3.6.5",
"dayjs": "1.8.20",
"element-pro-crud": "^0.8.0-2",
"element-pro-crud": "^0.8.0-6",
"element-ui": "^2.13.2",
"inquirer": "^6.5.2",
"lodash": "^4.17.14",
Expand Down
136 changes: 110 additions & 26 deletions src/views/devTools/FormDesignerModule.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,80 @@
-->
<template>
<div class="page-container">
<CrudTable ref="table"
tableName="form"
tableTitle="表单设计"
orderCondition="timestamp desc"
:btnEditOnClick="btnEditOnClick"
:btnAddOnClick="btnAddOnClick"
fullHeight
:visibleList="{
btnDel:true,
}">
<!-- 以后这里会改成form -->
<CrudTable
ref="table"
tableName="form"
tableTitle="表单设计"
orderCondition="timestamp desc"
:btnEditOnClick="btnEditOnClick"
:btnAddOnClick="btnAddOnClick"
fullHeight
:visibleList="{
btnDel: true,
}"
>
<template #btnCustom="{row}">
<el-button slot="btnCustom"
type="primary"
size="mini"
@click="btnCopyOnClick(row)">复制</el-button>
<el-button slot="btnCustom" type="primary" size="mini" @click="btnCopyOnClick(row)">复制</el-button>
</template>
</CrudTable>
<FormDesigner ref="dialog"
tableName="dynamictables"
@after-save="dialogOnClose"/>
<el-dialog v-if="visible" ref="dialog" fullscreen class="dialog" :visible.sync="visible" append-to-body>
<FormDesigner ref="formDesigner" :getFormKey="getFormKey" :allTables="allTables">
<template #custom-btn>
<el-button type="text" size="small" @click="btnSaveOnClick" :loading="btnSaveIsLoading">保存</el-button>
</template>
</FormDesigner>
</el-dialog>
</div>
</template>

<script>
import { DML, crud } from '@/api/public/crud';
import { getTables } from '@/api/system/form';
import { getTables, getFormKey } from '@/api/system/form';
import { Vue, Component } from 'vue-property-decorator';
const STATUS = {
CREATE: 0,
UPDATE: 1,
};
@Component({
name: 'FormDesignerModule',
})
export default class FormDesignerModule extends Vue {
allTables = [];
visible = false;
btnSaveIsLoading = false;
formValues = {};
created() {
getTables().then((res) => {
this.allTables = res.data.map(item => ({
label: item.TABLE_NAME,
value: item.TABLE_NAME,
}));
});
}
getFormKey(tablename) {
return getFormKey(tablename);
}
// 添加按钮点击事件
btnAddOnClick() {
this.$refs.dialog.showDialog();
this.formValues = {};
this.visible = true;
}
// 编辑按钮点击事件
btnEditOnClick(row) {
this.$refs.dialog.showDialog({ id: row.id }, 1, row);
}
// 对话框关闭
dialogOnClose() {
this.$refs.table.tableReload();
this.formValues = { ...row };
this.visible = true;
this.$nextTick(() => {
this.$refs.formDesigner.setJSON(JSON.parse(row.formJson));
});
}
// 复制表单设计json
Expand All @@ -75,5 +102,62 @@ export default class FormDesignerModule extends Vue {
this.$refs.table.tableReload();
});
}
// 保存设计
btnSaveOnClick() {
const formValues = this.$refs.formDesigner.getData();
this.btnSaveIsLoading = true;
// 调用此方法验证表单数据和获取表单数据
let type;
let msg;
// 根据对话框状态判断保存或编辑
if (this.dialogStatus === STATUS.CREATE) {
type = DML.INSERT;
msg = '添加成功';
} else {
type = DML.UPDATE;
msg = '编辑成功';
}
// 如果有代理的保存方法
crud(type, 'form', {
...this.formValues,
formJson: JSON.stringify(formValues),
tableName: formValues.name,
position: formValues.position,
})
.then(() => {
this.btnSaveIsLoading = false;
this.$message({
type: 'success',
message: msg,
});
this.visible = false;
this.$refs.table.tableReload();
})
.catch(() => {
this.btnSaveIsLoading = false;
});
}
}
</script>
<style lang="scss" scoped>
.dialog {
::v-deep {
.el-dialog__body {
height: 100%;
padding: 0;
}
.el-dialog__header {
padding: 0;
}
.el-dialog__headerbtn {
top: 13px;
right: 10px;
border: 1px solid gray;
background: #fffbd7;
color: black;
z-index: 100;
}
}
}
</style>
122 changes: 85 additions & 37 deletions src/views/devTools/TableDesignerModule.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,32 @@
-->
<template>
<div class="page-container">
<CrudTable ref="dynamictables"
tableName="dynamictables"
tableTitle="表格设计"
orderCondition="timestamp desc"
:btnEditOnClick="btnEditOnClick"
:btnAddOnClick="btnAddOnClick"
fullHeight
:visibleList="{
btnDel:true,
}">
<template slot="btnCustom"
slot-scope="scope">
<el-button slot="btnCustom"
type="primary"
size="mini"
@click="btnCopyOnClick(scope.row)">复制</el-button>
<CrudTable
ref="dynamictables"
tableName="dynamictables"
tableTitle="表格设计"
orderCondition="timestamp desc"
:btnEditOnClick="btnEditOnClick"
:btnAddOnClick="btnAddOnClick"
fullHeight
:visibleList="{
btnDel: true,
}"
>
<template slot="btnCustom" slot-scope="scope">
<el-button slot="btnCustom" type="primary" size="mini" @click="btnCopyOnClick(scope.row)">复制</el-button>
</template>
</CrudTable>
<TableDesigner ref="dialog"
tableName="dynamictables"
@after-save="dialogOnClose"
:remoteFuncs="remoteFuncs" />
<!-- 对话框 -->
<el-dialog v-if="visible" ref="dialog" top="10vh" class="dialog" :visible.sync="visible" width="95%" append-to-body>
<TableDesigner :allTables="allTables" ref="tableDesigner" />

<!-- 底部按钮栏 -->
<el-row type="flex" justify="end">
<el-button type="primary" icon="el-icon-check" @click="btnSaveOnClick()" :loading="btnSaveIsLoading">保存</el-button>
<el-button icon="el-icon-close" @click="btnCancelOnClick()">取消</el-button>
</el-row>
</el-dialog>
</div>
</template>

Expand All @@ -36,36 +40,80 @@ import { DML, crud } from '@/api/public/crud';
import { getTables } from '@/api/system/form';
import { Vue, Component } from 'vue-property-decorator';
const STATUS = {
CREATE: 0,
UPDATE: 1,
};
@Component({
name: 'TableDesignerModule',
})
export default class TableDesignerModule extends Vue {
remoteFuncs = {
getTablesOfDB(resolve) {
// 请求表名列表
getTables().then((res) => {
const options = res.data.map(item => ({
label: item.TABLE_NAME,
value: item.TABLE_NAME,
}));
resolve(options);
});
},
};
// 对话框是否显示
visible = false;
allTables = [];
btnSaveIsLoading = false;
formValues = {};
created() {
getTables().then((res) => {
this.allTables = res.data.map(item => ({
label: item.TABLE_NAME,
value: item.TABLE_NAME,
}));
});
}
// 添加按钮点击事件
btnAddOnClick() {
this.$refs.dialog.showDialog();
this.visible = true;
}
// 编辑按钮点击事件
btnEditOnClick(row) {
this.$refs.dialog.showDialog({ id: row.id }, 1, row);
this.formValues = { ...row };
this.visible = true;
this.$nextTick(() => {
this.$refs.tableDesigner.setJSON(JSON.parse(row.formJson));
});
}
// 对话框关闭
dialogOnClose() {
this.$refs.dynamictables.tableReload();
// 取消按钮点击
btnCancelOnClick() {
this.visible = false;
}
// 保存按钮点击
btnSaveOnClick() {
this.btnSaveIsLoading = true;
let type;
let msg;
const tableDesignerJson = this.$refs.tableDesigner.getData();
// 根据对话框状态判断保存或编辑
if (this.dialogStatus === STATUS.CREATE) {
type = DML.INSERT;
msg = '添加成功';
} else {
type = DML.UPDATE;
msg = '编辑成功';
}
crud(type, 'dynamictables', {
...this.formValues,
tableName: tableDesignerJson.name,
position: tableDesignerJson.position,
formJson: JSON.stringify(tableDesignerJson),
}).then(() => {
this.btnSaveIsLoading = false;
this.visible = false;
this.$message({
type: 'success',
message: msg,
});
});
}
// 复制表格设计json
Expand Down

0 comments on commit 994429e

Please sign in to comment.