Skip to content

Commit

Permalink
refactor: 重构拖拽部分代码
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Feb 3, 2021
1 parent c96b4c3 commit 1e8c8e1
Show file tree
Hide file tree
Showing 8 changed files with 170 additions and 166 deletions.
82 changes: 38 additions & 44 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()" :move="handleMove">
<Draggable :clone="handleClone" 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()" :move="handleMove">
<Draggable :clone="handleClone" 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()" :move="handleMove">
<Draggable :clone="handleClone" tag="ul" :list="layoutComponents" v-bind="getDraggableOptions()" :move="handleMove">
<li
class="form-edit-widget-label"
:class="{
Expand All @@ -52,7 +52,7 @@
</li>
</Draggable>
<div class="widget-cate">基础图表</div>
<Draggable tag="ul" :list="chartComponents" v-bind="getDraggableOptions()" :move="handleMove">
<Draggable :clone="handleClone" tag="ul" :list="chartComponents" v-bind="getDraggableOptions()" :move="handleMove">
<li
class="form-edit-widget-label"
v-for="(item, index) in chartComponents"
Expand Down Expand Up @@ -147,7 +147,6 @@
@on-close="
formVisible = false;
formKeys.tableName = '';
formKeys.prefill = '';
"
width="800px"
:action="false"
Expand Down Expand Up @@ -249,14 +248,31 @@ export default {
}`,
formKeys: {
tableName: '',
prefill: '',
// 成功自动识别的字段
success: [],
},
dialogStatus: null,
};
},
methods: {
// 深拷贝防止拖拽clone后污染原组件,统一给所有拖拽出来的组件设置key,model
handleClone(origin) {
const { type = 'type', options: { remoteOptions } } = origin;
const key = `${type}_${Math.ceil(Math.random() * 99999)}`;

const cloneOrigin = JSON.parse(JSON.stringify({
...origin,
key,
model: key,
rules: [],
}));
if (remoteOptions) {
cloneOrigin.options.remoteFunc = `func_${key}`;
}


return cloneOrigin;
},
// 返回当前表单设计器对象
getData() {
return this.widgetForm;
Expand All @@ -267,13 +283,15 @@ export default {
[this.widgetFormSelect] = json.list;
}
},
// 导入json
handleUpload() {
this.uploadVisible = true;
this.$nextTick(() => {
this.uploadEditor = ace.edit('uploadeditor');
this.uploadEditor.session.setMode('ace/mode/json');
});
},
// 导入json
handleUploadJson() {
try {
this.setJSON(JSON.parse(this.uploadEditor.getValue()));
Expand All @@ -299,15 +317,15 @@ export default {
let flag = false;
const { COLUMN_COMMENT } = rows[i];
// 遍历整个form
const COLUMN_NAME = `${this.formKeys.prefill + rows[i].COLUMN_NAME.toLowerCase()}`;
const COLUMN_NAME = `${rows[i].COLUMN_NAME.toLowerCase()}`;
let COLUMN_NAME2 = null;
let COLUMN_COMMENT2 = null;
if (i + 1 <= rows.length && rows[i + 1]) {
flag = true;

COLUMN_COMMENT2 = rows[i + 1].COLUMN_COMMENT;
// 遍历整个form
COLUMN_NAME2 = `${this.formKeys.prefill + rows[i + 1].COLUMN_NAME.toLowerCase()}`;
COLUMN_NAME2 = `${rows[i + 1].COLUMN_NAME.toLowerCase()}`;
i += 1;
}
const row = {
Expand Down Expand Up @@ -350,7 +368,7 @@ export default {
rules: [
{
type: 'string',
message: '单行文本格式不正确',
message: `${COLUMN_COMMENT}格式不正确`,
},
],
},
Expand All @@ -370,15 +388,18 @@ export default {
},
getDraggableOptions() {
return {
// 分组设置
group: {
name: 'people',
pull: 'clone',
put: false,
},
// 禁止组内拖动
sort: false,
ghostClass: 'ghost',
};
},
// 字段配置还是表单配置
handleConfigSelect(value) {
this.configTab = value;
},
Expand All @@ -389,6 +410,7 @@ export default {
handlePreview() {
this.previewVisible = true;
},
// 预览点确定获取表单数据
handleTest() {
this.$refs.generateForm
.getData()
Expand All @@ -400,6 +422,7 @@ export default {
this.$refs.widgetPreview.end();
});
},
// 生成json
handleGenerateJson() {
this.jsonVisible = true;
this.jsonTemplate = JSON.stringify(this.widgetForm, null, 2);
Expand All @@ -417,6 +440,7 @@ export default {
this.jsonCopyValue = JSON.stringify(this.widgetForm);
});
},
// 生成代码
handleGenerateCode() {
this.codeVisible = true;
this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm), 'html');
Expand All @@ -428,45 +452,15 @@ export default {
vueeditor.session.setMode('ace/mode/html');
});
},
// 自动同步后端key
async handleGenerateKey(generateForm = false) {
// 自动绑定
async handleGenerateKey() {
this.formKeys.success = [];
const res = await this.getFormKey(this.formKeys.tableName);
if (generateForm) {
this.autoGenerateFormByBackend(res.data);
this.$alert('成功表格(默认为一行两列)');
} else {
for (const row of res.data) {
const { COLUMN_COMMENT } = row;
// 遍历整个form
const COLUMN_NAME = `${this.formKeys.prefill + row.COLUMN_NAME.toLowerCase()}`;
this.generateModle(this.widgetForm.list, COLUMN_COMMENT, COLUMN_NAME);
}
this.$alert(`识别成功以下字段:${this.formKeys.success.join(',')}`);
this.$refs.bindKeys.end();
}
this.autoGenerateFormByBackend(res.data);
this.$alert('成功表格(默认为一行两列)');
this.formVisible = false;
},

// 表单动态切换显示隐藏
generateModle(list, name, model) {
// 遍历设计的结构
for (let i = 0; i < list.length; i += 1) {
if (list[i].type === 'grid') {
list[i].columns.forEach((item) => {
this.generateModle(item.list, name, model);
});
} else {
const obj = list[i];
// 如果找到该组件并且后端key还未设置
if (obj.name === name && obj.model.includes(1)) {
// 抛出结果,意见区域显示在表单下方
this.formKeys.success.push(obj.name);
obj.model = model;
}
}
}
},
// 清空按钮
handleClear() {
this.widgetForm = {
list: [],
Expand Down
10 changes: 8 additions & 2 deletions src/component/form-designer/src/GenerateFormItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,6 @@
<Tinymce :height="400"
v-model="dataModel"
:readonly="readOnly || widget.options.readonly"></Tinymce>

</template>
<template v-if="widget.type=='upload'">
<!-- 附件上传(注意初始值prefill必须传入id) -->
Expand All @@ -320,6 +319,9 @@
<template v-if="widget.type === 'form'">
<GenerateSubForm :widget="widget"></GenerateSubForm>
</template>
<template v-if="widget.type === 'tabs'">
<GenerateTabs :widget="widget"></GenerateTabs>
</template>
<!-- 饼图组件 -->
<template v-if="widget.type === 'chart-pie'">
<pieChart
Expand Down Expand Up @@ -371,7 +373,7 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import lineChart from './components/Charts/lineChart.vue';
import pieChart from './components/Charts/pieChart.vue';
import Echarts from './components/Charts/Echarts.vue';

import GenerateTabs from './components/Tabs/GenerateTabs.vue';

@Component({
components: {
Expand All @@ -382,6 +384,7 @@ import Echarts from './components/Charts/Echarts.vue';
Echarts,
pieChart,
lineChart,
GenerateTabs,
CrudTable: () => import('@/component/crud-table/src/CrudTable.vue'),
},
model: {
Expand Down Expand Up @@ -564,6 +567,9 @@ export default class GenerateFormItem extends Vue {
if ('dict,custom,search'.includes(this.widget.options.remote)) {
return this.widget.options.remoteOptions;
}
if (typeof this.widget.options.options === 'string') {
return JSON.parse(this.widget.options.options);
}
return this.widget.options.options;
}

Expand Down
Loading

0 comments on commit 1e8c8e1

Please sign in to comment.