Skip to content

Commit

Permalink
perf: 优化表格布局样式,几处细节修复
Browse files Browse the repository at this point in the history
  • Loading branch information
BoBoooooo committed Mar 19, 2021
1 parent 3b71cb1 commit e32ebf1
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 34 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "element-pro-crud",
"version": "0.9.1-11",
"version": "0.9.1-12",
"author": "BoBo<[email protected]>",
"main": "lib/ProCrud.umd.min.js",
"files": [
Expand Down
2 changes: 1 addition & 1 deletion src/component/form-designer/src/FormDesigner.vue
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ export default {
required: false,
dataType: 'string',
pattern: '',
placeholder: '',
placeholder: `请填写${COLUMN_COMMENT}`,
remoteFunc: 'func_1575516931000_89639',
},
key: `1575516931000_${Math.random()}`,
Expand Down
9 changes: 6 additions & 3 deletions src/component/form-designer/src/WidgetConfig.vue
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
<el-form-item label="隐藏标签" v-if="elementConfig.options.hiddenLabel !== undefined">
<el-switch :disabled="elementConfig.type === 'button'" v-model="elementConfig.options.hiddenLabel"></el-switch>
</el-form-item>
<el-form-item label="宽度" v-if="Object.keys(elementConfig.options).indexOf('width') >= 0">
<el-form-item label="组件宽度" v-if="Object.keys(elementConfig.options).indexOf('width') >= 0">
<el-input size="mini" v-model="elementConfig.options.width"></el-input>
</el-form-item>
<el-form-item label="大小" v-if="Object.keys(elementConfig.options).indexOf('size') >= 0">
Expand Down Expand Up @@ -579,9 +579,9 @@ import 'vue-awesome/icons/sliders-h';
import 'vue-awesome/icons/regular/image';
import 'vue-awesome/icons/chalkboard';
import 'vue-awesome/icons/divide';

import { DML } from '@/types/common';
import { elementComponentConfig } from './componentsConfig';
import { formElement, elementComponentConfig } from './componentsConfig';


export default {
name: 'WidgetConfig',
Expand Down Expand Up @@ -812,6 +812,9 @@ export default {
this.validateDataType(this.elementConfig.options.dataType);
this.valiatePattern(this.elementConfig.options.pattern);
}
if (formElement.includes(this.elementConfig.type)) {
this.elementConfig.options.placeholder = `请填写${val}`;
}
},
},
};
Expand Down
6 changes: 3 additions & 3 deletions src/component/form-designer/src/WidgetForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
<div
class="data-grid widget-grid-table-container widget-col widget-view"
:key="element && element.key"
:class="{ active: selectWidget.key == element.key }"
:class="{ active: selectWidget && selectWidget.key == element.key }"
@click="handleSelectWidget(index)"
>
<table
Expand All @@ -100,7 +100,7 @@
height: col.options.height
}"
align="left"
:class="{ active: selectWidget.key == col.key }"
:class="{ active: selectWidget && selectWidget.key == col.key }"
class="widget-grid-table__td"
>
<Draggable
Expand All @@ -119,7 +119,7 @@
</transition-group>
</Draggable>
<!-- td设置 -->
<div class="widget-td-setting" v-if="selectWidget.key == col.key">
<div class="widget-td-setting" v-if="selectWidget && selectWidget.key == col.key">
<el-dropdown size="mini" trigger="click" @command="handleTdSettingCommand($event, element, row, rowIndex, col, colIndex)">
<span class="el-dropdown-link">
<i class="el-icon-setting el-icon--right" title="详细设置"></i>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<template v-if="readOnly || scope.row._mode === 'DETAIL'">
<span>{{ scope.row[row.model] }}</span>
</template>
<GenerateFormItem v-else :remote="remote" :models="inlineFormData" :widget="row" :readOnly="readOnly || row._mode === 'DETAIL' ? {} : null" />
<GenerateFormItem class="form-item" v-else :remote="remote" :models="inlineFormData" :widget="row" :readOnly="readOnly || row._mode === 'DETAIL' ? {} : null" />
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" min-width="100">
Expand Down Expand Up @@ -59,61 +59,61 @@ import SvgIcon from '@/icons/SvgIcon.vue';
})
export default class GenerateSubForm extends Vue {
$refs!: {
tableForm: HTMLFormElement
}
tableForm: HTMLFormElement;
};

@Prop({
type: Object as () => {
tableColumns: any
options: any
model: string
tableColumns: any;
options: any;
model: string;
},
default: () => ({}),
})
widget!: {
tableColumns: any
options: any
model: string
}
tableColumns: any;
options: any;
model: string;
};

@Prop({
type: Object,
default: () => ({}),
})
remote: any
remote: any;

@Prop({
type: Object,
default: null,
})
readOnly: any
readOnly: any;

@Prop({
type: Object,
default: () => ({}),
})
formTableConfig: any
formTableConfig: any;

@Prop({
type: Object,
default: () => ({}),
})
models: any
@Prop({
type: Object,
default: () => ({}),
})
models: any;

// 整个子表单数据
subTableForm = {
tableData: [],
}
};

// 单行数据
inlineFormData = {}
inlineFormData = {};

// 原始数据
initialData = {}
initialData = {};

mode: 'ADD' | 'EDIT' | 'DETAIL' | '' = 'DETAIL'
mode: 'ADD' | 'EDIT' | 'DETAIL' | '' = 'DETAIL';

btnSaveIsLoading = false
btnSaveIsLoading = false;

created() {
this.fetchList();
Expand Down Expand Up @@ -356,17 +356,29 @@ export default class GenerateSubForm extends Vue {
}
}
}
.table_box{
.table_box {
width: 100%;
}
.subTableForm {
width: 100%;
.form-item{
background: #f3fefa;
}
/deep/.el-table__empty-text {
line-height: 10px;
margin-bottom: 15px;
color: rgba(0, 0, 0, 0.25) !important;
font-size: 14px;
}
/deep/.el-form-item__content {
.el-select,
.el-input {
width: 100% !important;
}
.el-input__inner,.el-textarea__inner{
background: none!important;
}
}
.empty_icon {
width: 4em;
height: 4em;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
:select.sync="selectWidget"
:index="index"
:data="data"
@click.native="handleSelectWidget(index)"
@click.native.stop="handleSelectWidget(index)"
></WidgetFormItem>
</div>
</transition-group>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
outline: none;
}
.el-form-item__error {
top: calc(100% - 12px);
top: calc(100% - 14px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand Down

0 comments on commit e32ebf1

Please sign in to comment.