Skip to content

Commit acceaee

Browse files
committed
perf(BaseModule): 表单表格组件代码优化
1 parent c63df1f commit acceaee

File tree

6 files changed

+51
-181
lines changed

6 files changed

+51
-181
lines changed

src/components/BaseDialog/FormDesignerDialog.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -198,9 +198,9 @@
198198
</tbody>
199199
</table>
200200
<el-button type="success"
201-
@click="handleGenerateKey(true)">自动生成表单(初始化,暂时默认一行两列)</el-button>
202-
<el-button type="primary"
203-
@click="handleGenerateKey()">自动绑定key(已有表单的情况)</el-button>
201+
@click="handleGenerateKey(true)">自动生成表单(根据数据库字段初始化,默认一行两列)</el-button>
202+
<!-- <el-button type="primary"
203+
@click="handleGenerateKey()">自动绑定key(已有表单的情况)</el-button> -->
204204
</cus-dialog>
205205
</el-container>
206206
</el-dialog>

src/components/BaseDialog/GenerateFormDialog.vue

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
:append-to-body="appendToBody"
1515
:fullscreen="fullscreen"
1616
:close-on-click-modal="closeOnClickModal">
17-
<slot name="formTitle"></slot>
1817
<!-- 对话框内动态表单 -->
1918
<GenerateForm ref="generateDialogForm"
2019
:value="formValues"
@@ -27,9 +26,6 @@
2726
<el-row type="flex"
2827
justify="end"
2928
slot="footer">
30-
<slot name="footer"
31-
v-if="!readOnly"
32-
:save="btnSaveOnClick"></slot>
3329
<template v-if="readOnly">
3430
<el-button @click="visible=false">关 闭</el-button>
3531
</template>
@@ -66,9 +62,6 @@ const STATUS = {
6662
},
6763
})
6864
export default class GenerateFormDialog extends Vue {
69-
// 异步更新表单数据
70-
@Prop({ default: () => ({}), type: Object }) formValuesAsync!: any;
71-
7265
// 子表tableConfig 详情看GenerateFormItem中解释
7366
@Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
7467
@@ -289,13 +282,5 @@ export default class GenerateFormDialog extends Vue {
289282
formDesign: this.formDesign,
290283
});
291284
}
292-
293-
@Watch('formValuesAsync', { deep: true })
294-
onValueChange(value: any) {
295-
Object.keys(value).forEach((k) => {
296-
// 异步赋值
297-
this.$set(this.formValues, k, value[k]);
298-
});
299-
}
300285
}
301286
</script>

src/components/BaseTable/BaseTable.vue

Lines changed: 6 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,16 @@
1919
<!-- 添加 -->
2020
<slot name="btnAdd" />
2121
</div>
22-
<!--
23-
高级搜索表单
24-
submit-handler 用于接收查询按钮点击回调
25-
-->
22+
2623
<SearchForm ref="searchForm"
2724
v-if="view.searchForm"
2825
:columns="columns"
2926
@click="fetchHandler(false,true)"
30-
:showSeniorSearchForm="view.showSeniorSearchForm"
3127
:searchFormCondition.sync="searchFormCondition"
3228
:remoteFuncs="remoteFuncs"
3329
:isLoading="loading"
3430
@clear="dataChangeHandler(true)">
35-
<template #SeniorSearchForm>
36-
<slot name="SeniorSearchForm"></slot>
37-
</template>
3831
</SearchForm>
39-
<slot :loading="loading"
40-
name="form" />
4132
<!-- 表格主体 -->
4233
<el-table v-loading.lock="loading"
4334
element-loading-text="加载中……"
@@ -140,8 +131,6 @@
140131
:prop="column.prop"
141132
:$index="scope.$index" />
142133
</span>
143-
<el-input v-else-if="scope.row.isEdit"
144-
v-model="scope.row[column.prop]"></el-input>
145134
<span v-else>
146135
{{ scope.row[column.prop] }}
147136
</span>
@@ -216,7 +205,7 @@ export default class BaseTable extends Vue {
216205
maxHeight: string | number = '100%';
217206
218207
// 表格高度
219-
tableHeight:number|string = '100%';
208+
tableHeight: number | string = '100%';
220209
221210
// 是否需要多选
222211
@Prop({ default: false, type: Boolean }) isMultiple!: boolean;
@@ -336,25 +325,6 @@ export default class BaseTable extends Vue {
336325
default: () => ({}),
337326
}) tableParams!: any;
338327
339-
// 请求类型(远端,本地)
340-
@Prop({
341-
type: String,
342-
default: 'remote',
343-
validator(value) {
344-
const types = ['remote', 'local'];
345-
const validType = types.indexOf(value) !== -1;
346-
if (!validType) {
347-
throw new Error(`Invalid type of '${value}', please set one type of 'remote' or 'local'.`);
348-
}
349-
return validType;
350-
},
351-
}) type!: string;
352-
353-
// 表格数据data
354-
@Prop({
355-
type: Array,
356-
}) data: any;
357-
358328
// 表格设计json
359329
@Prop({
360330
type: Array,
@@ -393,7 +363,6 @@ export default class BaseTable extends Vue {
393363
get view() {
394364
return {
395365
searchForm: true,
396-
showSeniorSearchForm: true,
397366
...this.visibleList,
398367
};
399368
}
@@ -416,15 +385,12 @@ export default class BaseTable extends Vue {
416385
mounted() {
417386
// event: expand changed to `expand-change` in Element v2.x
418387
this.$refs.table.$on('expand', (row, expanded) => this.emitEventHandler('expand', row, expanded));
419-
const { type, data } = this;
388+
389+
// 初始化表格高度
420390
this.setMaxHeight();
391+
// 请求数据
392+
this.fetchHandler(true);
421393
422-
// type为remote则加载远程数据,否则加载本地数据
423-
if (type === 'remote') {
424-
this.fetchHandler(true);
425-
} else {
426-
this.tableData = this.data;
427-
}
428394
// 自适应分页组件按钮;
429395
window.addEventListener('resize', () => {
430396
this.setPagerByWidth();
@@ -624,14 +590,6 @@ export default class BaseTable extends Vue {
624590
// 最后再刷新表格
625591
this.dataChangeHandler();
626592
}
627-
628-
@Watch('data')
629-
onDataChange(value: any, oldval: any) {
630-
// 监听本地数据变动实时更新列表
631-
if (Array.isArray(value) && this.type === 'local') {
632-
this.tableData = this.data;
633-
}
634-
}
635593
}
636594
</script>
637595
<style scoped>

src/components/BaseTable/SearchForm.vue

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@
2323
style="display:inline"></i>
2424
</el-tooltip>
2525
<!-- 高级查询表单 -->
26-
<SeniorSearchForm v-if="showSeniorSearchForm"
27-
:remoteFuncs="remoteFuncs"
26+
<SeniorSearchForm :remoteFuncs="remoteFuncs"
2827
@fetchSearch="getFetchParamsSearch"
2928
:columns="columns"> </SeniorSearchForm>
3029
<el-tooltip class="item"
@@ -37,8 +36,6 @@
3736
</el-tooltip>
3837
</div>
3938
</el-input>
40-
<!-- 自定义高级查询表单-->
41-
<slot name="SeniorSearchForm"></slot>
4239
<div class="tips">
4340
<!-- 提示当前查询内容 -->
4441
<template v-if="isArray">
@@ -72,9 +69,6 @@ export default class SearchForm extends Vue {
7269
// 远程数据方法
7370
@Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
7471
75-
// 是否显示高级查询按钮
76-
@Prop({ default: true, type: Boolean }) showSeniorSearchForm!: boolean;
77-
7872
// 表格设计json
7973
@Prop({
8074
type: Array,
@@ -86,7 +80,7 @@ export default class SearchForm extends Vue {
8680
searchContent = '';
8781
8882
// 查询tips
89-
paramsTips:any = null;
83+
paramsTips: any = null;
9084
9185
get isArray() {
9286
return Array.isArray(this.paramsTips);
@@ -123,7 +117,7 @@ export default class SearchForm extends Vue {
123117
* 获取查询条件
124118
*/
125119
getParams() {
126-
let params:any = [];
120+
let params: any = [];
127121
// 拿到所有字段
128122
const props = this.columns.filter(item => item.searchable).map(item => item.prop);
129123
const str = props.toString();
@@ -149,7 +143,7 @@ export default class SearchForm extends Vue {
149143
// 获取高级查询组件中的查询条件
150144
getFetchParamsSearch(data) {
151145
this.paramsTips = [];
152-
const params:any = [];
146+
const params: any = [];
153147
Object.keys(data).forEach((key) => {
154148
if (key && data[key]) {
155149
if (Array.isArray(data[key])) {

src/components/BaseTable/SeniorSearchForm.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ import {
5757
},
5858
})
5959
export default class SeniorSearchForm extends Vue {
60+
$refs!: {
61+
generateDialogForm: HTMLFormElement;
62+
};
63+
6064
visible = false;
6165
6266
entity: any = {};
@@ -73,9 +77,6 @@ export default class SeniorSearchForm extends Vue {
7377
// 远程数据方法
7478
@Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
7579
76-
$refs!: {
77-
generateDialogForm: HTMLFormElement;
78-
};
7980
8081
created() {
8182
this.autoGenerateFormByBackend();
@@ -183,7 +184,6 @@ export default class SeniorSearchForm extends Vue {
183184
row.columns.push(date);
184185
} else if (option && option.type === 'select') {
185186
row.columns.push(select);
186-
console.log(select);
187187
} else {
188188
row.columns.push(input);
189189
}

0 commit comments

Comments
 (0)