Skip to content

Commit

Permalink
perf: 图表,HTML组件引入ace支持在线修改json,优化组件代码
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Jan 28, 2021
1 parent b849d8b commit 25e1399
Show file tree
Hide file tree
Showing 10 changed files with 112 additions and 118 deletions.
45 changes: 16 additions & 29 deletions src/component/form-designer/src/FormDesigner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</span>
</div>
<div class="widget-cate">基础组件</div>
<Draggable tag="ul" :list="basicComponents" v-bind="getDraggableOptions()" @end="handleMoveEnd" @start="handleMoveStart" :move="handleMove">
<Draggable tag="ul" :list="basicComponents" v-bind="getDraggableOptions()" :move="handleMove">
<li class="form-edit-widget-label" v-for="(item, index) in basicComponents" :key="index">
<a>
<Icon class="icon" :name="item.icon"></Icon>
Expand All @@ -27,7 +27,7 @@
</li>
</Draggable>
<div class="widget-cate">高级组件</div>
<Draggable tag="ul" :list="advanceComponents" v-bind="getDraggableOptions()" @end="handleMoveEnd" @start="handleMoveStart" :move="handleMove">
<Draggable tag="ul" :list="advanceComponents" v-bind="getDraggableOptions()" :move="handleMove">
<li class="form-edit-widget-label" v-for="(item, index) in advanceComponents" :key="index">
<a>
<Icon class="icon" :name="item.icon"></Icon>
Expand All @@ -36,7 +36,7 @@
</li>
</Draggable>
<div class="widget-cate">布局组件</div>
<Draggable tag="ul" :list="layoutComponents" v-bind="getDraggableOptions()" @end="handleMoveEnd" @start="handleMoveStart" :move="handleMove">
<Draggable tag="ul" :list="layoutComponents" v-bind="getDraggableOptions()" :move="handleMove">
<li
class="form-edit-widget-label"
:class="{
Expand All @@ -52,12 +52,9 @@
</li>
</Draggable>
<div class="widget-cate">基础图表</div>
<Draggable tag="ul" :list="chartComponents" v-bind="getDraggableOptions()" @end="handleMoveEnd" @start="handleMoveStart" :move="handleMove">
<Draggable tag="ul" :list="chartComponents" v-bind="getDraggableOptions()" :move="handleMove">
<li
class="form-edit-widget-label"
:class="{
'data-grid': item.name !== '分割线',
}"
v-for="(item, index) in chartComponents"
:key="index"
>
Expand Down Expand Up @@ -102,7 +99,7 @@
</div>
</el-header>
<el-main class="config-content">
<WidgetConfig v-show="configTab == 'widget'" :elementConfig="widgetFormSelect"></WidgetConfig>
<WidgetConfig v-show="configTab == 'widget'" v-if="Object.keys(widgetFormSelect).length>0" :elementConfig="widgetFormSelect"></WidgetConfig>
<FormConfig v-show="configTab == 'form'" :data="widgetForm.config"></FormConfig>
</el-main>
</el-container>
Expand All @@ -116,19 +113,20 @@
</template>
</GenerateForm>
</CusDialog>
<!-- 导入JSON对话框 -->
<CusDialog :visible="uploadVisible" @on-close="uploadVisible = false" @on-submit="handleUploadJson" ref="uploadJson" width="800px" form>
<el-alert type="info" title="在此处导入JSON"></el-alert>
<div id="uploadeditor" style="height: 400px;width: 100%;">{{ jsonEg }}</div>
</CusDialog>

<!-- 查看JSON对话框 -->
<CusDialog :visible="jsonVisible" @on-close="jsonVisible = false" ref="jsonPreview" width="800px" form>
<div id="jsoneditor" style="height: 400px;width: 100%;">{{ jsonTemplate }}</div>

<template slot="action">
<el-button type="primary" class="json-btn" :data-clipboard-text="jsonCopyValue">复制JSON</el-button>
</template>
</CusDialog>

<!-- 生成代码对话框 -->
<CusDialog :visible="codeVisible" @on-close="codeVisible = false" ref="codePreview" width="800px" form :action="false">
<!-- <div id="codeeditor" style="height: 500px; width: 100%;">{{htmlTemplate}}</div> -->
<el-tabs type="border-card" style="box-shadow: none;" v-model="codeActiveName">
Expand All @@ -140,10 +138,12 @@
</el-tab-pane>
</el-tabs>
</CusDialog>
<!-- 自动绑定对话框 -->
<CusDialog
v-if="allTables"
ref="bindKeys"
:visible="formVisible"
title="绑定后端key/自动初始化表单(根据数据库字段备注)"
title="自动生成表单(根据数据库表字段及备注自动生成)"
@on-close="
formVisible = false;
formKeys.tableName = '';
Expand All @@ -152,17 +152,10 @@
width="800px"
:action="false"
>
<template v-if="allTables">
<el-select v-model="formKeys.tableName" filterable style="width:100%" placeholder="选择数据源">
<el-option v-for="(item, index) in allTables" :key="index" size="small" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-button type="success" size="small" style="float: right;margin-top: 10px" @click="handleGenerateKey(true)">自动生成表单</el-button>
</template>
<template v-else>
<p>
初始化时请先设置getTables方法
</p>
</template>
<el-select v-model="formKeys.tableName" filterable style="width:100%" placeholder="选择数据源">
<el-option v-for="(item, index) in allTables" :key="index" size="small" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-button type="success" size="small" style="float: right;margin-top: 10px" @click="handleGenerateKey(true)">自动生成表单</el-button>
</CusDialog>
</el-container>
</template>
Expand Down Expand Up @@ -228,7 +221,7 @@ export default {
},
},
configTab: 'widget',
widgetFormSelect: null,
widgetFormSelect: {},
// 预览 对话框显示/隐藏
previewVisible: false,
// 生成json 对话框显示/隐藏
Expand Down Expand Up @@ -389,12 +382,6 @@ export default {
handleConfigSelect(value) {
this.configTab = value;
},
handleMoveEnd(evt) {
console.log('end', evt);
},
handleMoveStart({ oldIndex }) {
console.log('start', oldIndex, this.basicComponents);
},
handleMove() {
return true;
},
Expand Down
13 changes: 5 additions & 8 deletions src/component/form-designer/src/GenerateFormItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
<template>
<el-form-item :prop="widget.type == 'button'?undefined:widget.model"
:label-width="widget.options.hiddenLabel ? '0' : labelWidth"
:rules="rules">
:rules="rules"
:class="widget.options.className">
<template #label>
<template v-if="widget.options.hiddenLabel ? '' : label">
<span v-html="label"></span>
Expand All @@ -27,7 +28,7 @@
</template>
</template>
<template v-if="widget.type === 'html'">
<div style="margin-left:10px" v-html="widget.options.defaultValue"></div>
<div style="margin-left:10px" v-html="widget.options.html"></div>
</template>
<template v-if="widget.type === 'divider'">
<el-divider :content-position="widget.options.align">{{widget.name}}</el-divider>
Expand Down Expand Up @@ -323,20 +324,16 @@
<template v-if="widget.type === 'chart-pie'">
<pieChart
@click="chartOnClick"
:height="widget.options.height"
:data="widget.options.data"
:style="{
height: widget.options.height
}"
:title="widget.name"
:hollow="widget.options.hollow"
/>
</template>
<!-- 柱状图组件 -->
<template v-if="widget.type === 'chart-line'">
<lineChart
:style="{
height: widget.options.height
}"
:height="widget.options.height"
@click="chartOnClick"
:data="widget.options.data"
:title="widget.name"
Expand Down
58 changes: 41 additions & 17 deletions src/component/form-designer/src/WidgetConfig.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,22 @@
<el-form-item label="标题" v-if="elementConfig.type !== 'grid' && elementConfig.type !== 'button'">
<el-input size="mini" v-model="elementConfig.name"></el-input>
</el-form-item>
<el-form-item label="自定义className">
<el-form-item label="自定义className" v-if="Object.keys(elementConfig.options).indexOf('className') >= 0">
<el-input size="mini" v-model="elementConfig.options.className"></el-input>
</el-form-item>
<el-form-item label="显示文本" v-if="Object.keys(elementConfig.options).indexOf('text') >= 0">
<el-input size="mini" v-model="elementConfig.options.text"></el-input>
</el-form-item>
<el-form-item :label="elementConfig.type === 'html' ?'HTML' : '图表数据'" v-if="elementConfig.type === 'html' || elementConfig.type.includes('chart-')">
<el-button style="float:right" icon="el-icon-check" size="mini" @click="saveJson">保存修改</el-button>
<div id="jsoneditor2" style="height: 300px;width: 100%;">{{ jsonTemplate }}</div>
</el-form-item>
<el-form-item label="是否空心" v-if="Object.keys(elementConfig.options).indexOf('hollow') >= 0">
<el-switch v-model="elementConfig.options.hollow"></el-switch>
</el-form-item>
<el-form-item label="高度" v-if="Object.keys(elementConfig.options).indexOf('height') >= 0">
<el-input size="mini" v-model="elementConfig.options.height"></el-input>
</el-form-item>
<!-- <el-form-item label="自定义option" v-if="Object.keys(elementConfig.options).indexOf('option') >= 0">
<el-input size="mini" type="textarea" placeholder="请输入自定义图表json" v-model="elementConfig.options.option"></el-input>
</el-form-item> -->
<!-- <el-form-item label="图表数据" v-if="Object.keys(elementConfig.options).indexOf('data') >= 0">
<el-input size="mini" type="textarea" placeholder="图表数据" v-model="elementConfig.options.data"></el-input>
</el-form-item> -->
<!-- 柱状/折线图特有属性 -->
<template v-if="elementConfig.type == 'chart-line'">
<el-form-item label="图表类型">
Expand Down Expand Up @@ -396,6 +394,7 @@
<el-form-item label="操作属性"
v-if="!elementConfig.type.includes('chart-')
&& elementConfig.type !== 'table'
&& elementConfig.type !== 'html'
&& elementConfig.type !== 'blank'
&& elementConfig.type !== 'text'
&& elementConfig.type !== 'button'">
Expand All @@ -413,12 +412,13 @@
elementConfig.type != 'button' &&
elementConfig.type != 'table' &&
elementConfig.type !== 'blank' &&
elementConfig.type != 'html' &&
elementConfig.type != 'upload' &&
elementConfig.type != 'text'"
label="校验"
>
<div>
<el-checkbox v-model="elementConfig.options.required">必填</el-checkbox>
<el-checkbox v-if="Object.keys(elementConfig.options).indexOf('required') >= 0" v-model="elementConfig.options.required">必填</el-checkbox>
</div>
<el-select v-if="Object.keys(elementConfig.options).indexOf('dataType') >= 0" v-model="elementConfig.options.dataType" size="mini">
<el-option value="password" label="密码"></el-option>
Expand Down Expand Up @@ -539,6 +539,9 @@ export default {
},
data() {
return {
jsonTemplate: '',
htmlTemplate: '',
jsonEditor: null,
// 字典类型
dictType: [],
validator: {
Expand Down Expand Up @@ -574,6 +577,13 @@ export default {
}
},
methods: {
saveJson() {
if (this.elementConfig.type === 'html') {
this.elementConfig.options.html = this.jsonEditor.getValue();
} else {
this.elementConfig.options.data = JSON.parse(this.jsonEditor.getValue());
}
},
getDraggableOptions() {
return {
group: { name: 'options' },
Expand Down Expand Up @@ -686,6 +696,26 @@ export default {
}
},
// eslint-disable-next-line func-names
'elementConfig.type': function (val) {
if (val.includes('chart-')) {
this.jsonTemplate = JSON.stringify(this.elementConfig.options.data || '', null, 2);
this.$nextTick(() => {
setTimeout(() => {
this.jsonEditor = ace.edit('jsoneditor2');
this.jsonEditor.session.setMode('ace/mode/json');
}, 0);
});
} else if (val === 'html') {
this.jsonTemplate = JSON.stringify(this.elementConfig.options.html || '', null, 2);
this.$nextTick(() => {
setTimeout(() => {
this.jsonEditor = ace.edit('jsoneditor2');
this.jsonEditor.session.setMode('ace/mode/html');
}, 0);
});
}
},
// eslint-disable-next-line func-names
'elementConfig.options.isRange': function (val) {
if (typeof val !== 'undefined') {
if (val) {
Expand All @@ -695,21 +725,15 @@ export default {
},
// eslint-disable-next-line func-names
'elementConfig.options.required': function (val) {
if (this.elementConfig) {
this.validateRequired(val);
}
this.validateRequired(val);
},
// eslint-disable-next-line func-names
'elementConfig.options.dataType': function (val) {
if (this.elementConfig) {
this.validateDataType(val);
}
this.validateDataType(val);
},
// eslint-disable-next-line func-names
'elementConfig.options.pattern': function (val) {
if (this.elementConfig) {
this.valiatePattern(val);
}
this.valiatePattern(val);
},
// eslint-disable-next-line func-names
'elementConfig.name': function (val) {
Expand Down
17 changes: 1 addition & 16 deletions src/component/form-designer/src/WidgetForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@
<widget-form-item
v-for="(el, i) in col.list"
:key="el.key"
v-if="el.key"
:element="el"
:select.sync="selectWidget"
:index="i"
Expand Down Expand Up @@ -98,21 +97,10 @@
<i class="el-icon el-icon-rank"></i>
</div>
</el-row>
<!-- <el-button title="删除"
style="bottom: -20px;"
@click.stop="handleWidgetDelete(index)"
class="widget-action-delete"
v-if="selectWidget.key == element.key"
circle
plain
type="danger">
<Icon name="regular/trash-alt"
style="width: 12px;height: 12px;"></Icon>
</el-button> -->
</div>
</template>
<template v-else-if="element.type === 'form'">
<WidgetSubForm
<WidgetSubForm
v-if="element && element.key"
:key="element.key"
:element="element"
Expand Down Expand Up @@ -212,11 +200,9 @@ export default {
})),
});
}
this.selectWidget = this.data.list[newIndex];
},
handleWidgetColAdd($event, row, colIndex) {
// console.log('元素被拖到内层handleWidgetAdd`);
const { newIndex } = $event;
const { oldIndex } = $event;
const { item } = $event;
Expand Down Expand Up @@ -270,7 +256,6 @@ export default {
},
});
}
this.selectWidget = row.columns[colIndex].list[newIndex];
return null;
},
Expand Down
Loading

0 comments on commit 25e1399

Please sign in to comment.