From edeb0b47f1052c2257a0f14c0e4b6499a6816cce Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期四, 29 八月 2024 17:49:09 +0800
Subject: [PATCH] 表单定义-编写表格新增对话框以及表单树拖拽节点添加
---
Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue | 9
Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue | 145 +++++++++++++--
Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/tableDialog.vue | 344 ++++++++++++++++++++++++++++++++++++++
3 files changed, 474 insertions(+), 24 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue
index 87c22e0..d93d6cd 100644
--- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue
+++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue
@@ -5,26 +5,28 @@
:visible.sync="visible"
append-to-body="true"
class="avue-dialog"
- title=""
+ title="琛ㄥ崟"
width="100%"
@close="closeDialog"
>
<el-container>
- <div style="height: 80vh;display: flex;width: 100%;">
+ <div style="height: 79vh;display: flex;width: 100%;">
<el-aside width="15%">
<basic-container>
<div style="height:650px;">
<avue-tree
:data="treeData"
- :option="treeOption"></avue-tree>
+ :option="treeOption"
+ @node-drag-start="handleDragStart">
+ </avue-tree>
</div>
</basic-container>
</el-aside>
- <el-main>
+ <el-main >
<basic-container>
- <div style="height: 650px">
+ <div style="height: 645px" @drop="drop" @dragover.prevent>
<div style="display: flex;justify-content: center">
<span style="display: flex;align-items: center; margin-right: 5px;">
<p class="tableTopLabel">鍚嶇О锛�</p>
@@ -52,9 +54,9 @@
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="columnNumber">
- <el-tooltip content="categoryoid.lastmodifytime" placement="top">
- <el-form-item class="hiddenLabel" label="categoryoid.lastmodifytime">
- <el-input v-model="user" placeholder="瀹℃壒浜�"></el-input>
+ <el-tooltip v-for="(item,index) in formList" :key="index" :content="item.name" placement="top">
+ <el-form-item class="hiddenLabel" :label="item.name + '锛�'">
+ <el-input v-model="item.value" :splaceholder="item.name" size="mini"></el-input>
</el-form-item>
</el-tooltip>
</el-col>
@@ -104,7 +106,7 @@
<el-col :span="24">
<el-tooltip content="榛樿鍊艰〃杈惧紡" placement="top">
- <el-form-item label="榛樿鍊艰〃杈惧紡" class="hiddenLabel">
+ <el-form-item class="hiddenLabel" label="榛樿鍊艰〃杈惧紡">
<el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
</el-form-item>
</el-tooltip>
@@ -120,7 +122,7 @@
<el-col :span="24">
<el-tooltip content="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆" placement="top">
- <el-form-item label="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆锛�" class="hiddenLabel">
+ <el-form-item class="hiddenLabel" label="鏃ユ湡鏍煎紡鍖栧瓧绗︿覆锛�">
<el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
</el-form-item>
</el-tooltip>
@@ -147,7 +149,7 @@
<el-col :span="24" style="height: 90px">
<el-tooltip content="鍙閫夋嫨鏉′欢" placement="top">
- <el-form-item label="鍙閫夋嫨鏉′欢" class="hiddenLabel">
+ <el-form-item class="hiddenLabel" label="鍙閫夋嫨鏉′欢">
<el-input
v-model="textarea2"
:rows="3"
@@ -181,7 +183,7 @@
</el-col>
</el-row>
- <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px"">
+ <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px">
<el-col :span="24" style="height: 90px">
<el-form-item label="鑴氭湰楠岃瘉">
<el-input
@@ -219,22 +221,90 @@
</el-col>
<el-col :span="24">
- <el-form-item label="瀛樺偍璺緞" >
+ <el-form-item label="瀛樺偍璺緞">
<el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-tooltip content="瀛樺偍璺緞瀛楁" placement="top">
- <el-form-item label="瀛樺偍璺緞瀛楁" class="hiddenLabel">
- <div style="display: flex">
- <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
- <el-checkbox v-model="checked" style="margin-left: 5px">http瀛樺偍</el-checkbox>
- </div>
- </el-form-item>
+ <el-form-item class="hiddenLabel" label="瀛樺偍璺緞瀛楁">
+ <div style="display: flex">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ <el-checkbox v-model="checked" style="margin-left: 5px">http瀛樺偍</el-checkbox>
+ </div>
+ </el-form-item>
</el-tooltip>
</el-col>
+ </el-row>
+
+ <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px">
+ <h4>閫夐」鍒楄〃</h4>
+ <el-col :span="12">
+ <el-form-item label="鍚嶇О">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item class="rightLabel" label="鍊�" label-width="95px">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24" style="height: 190px">
+ <el-form-item>
+ <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
+ <el-table
+ :data="optionRightData"
+ :highlight-current-row="true"
+ :show-header="false"
+ border
+ stripe
+ style="width: 100%">
+ <el-table-column
+ align="center"
+ label="鍚嶇О"
+ prop="name">
+ <template slot-scope="scope">
+ <el-tag size="medium">{{ scope.row.name }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ align="center"
+ label="鍊�"
+ prop="value">
+ <template slot-scope="scope">
+ <el-tag size="medium">{{ scope.row.value }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <div style="display: flex;align-items: center;justify-content: center;margin-top: 5px">
+ <el-button plain size="mini" style="margin-right: 5px" type="success">娣诲姞</el-button>
+ <el-button plain size="mini" style="margin-left: 5px" type="danger">鍒犻櫎</el-button>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="涓�绾у弬鐓�">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="浜岀骇鍙傜収">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="鍙傜収鍊�">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
</el-row>
<el-row style="margin-top: 10px">
@@ -250,6 +320,7 @@
</el-form-item>
</el-col>
</el-row>
+
</el-form>
</div>
</basic-container>
@@ -262,10 +333,18 @@
</template>
<script>
+
export default {
name: "formDialog",
data() {
return {
+ formList:[],
+ optionRightData: [
+ {
+ name: 'test',
+ value: 'test'
+ }
+ ],
form: {},
rules: {},
columnNumber: 12,
@@ -274,6 +353,13 @@
treeOption: {
menu: false,
addBtn: false,
+ draggable: true,
+ allowDrop: () => {
+ return false;
+ },
+ allowDrag: () => {
+ return true;
+ },
// props: {
// label: 'name',
// value: 'id',
@@ -462,6 +548,25 @@
methods: {
// 鍏抽棴瀵硅瘽妗�
closeDialog() {
+ },
+
+ // 寮�濮嬫嫋鎷芥爲鑺傜偣浜嬩欢
+ handleDragStart(node, ev) {
+ // 浣跨敤 setData 鏂规硶璁剧疆鏁版嵁
+ ev.dataTransfer.setData('item', JSON.stringify(node.data));
+ },
+
+ // 鎷栨嫿鍒拌〃鍗曟椂
+ drop(event) {
+ // 浣跨敤 getData 鏂规硶鑾峰彇鏁版嵁
+ const data = JSON.parse(event.dataTransfer.getData('item'));
+ console.log('data', data);
+ const params = {
+ name:data.label,
+ value:'',
+ type:''
+ }
+ this.formList.push(params)
}
}
}
@@ -469,7 +574,7 @@
<style lang="scss" scoped>
::v-deep {
- .hiddenLabel{
+ .hiddenLabel {
.el-form-item__label {
white-space: nowrap; // 闃叉鎹㈣
overflow: hidden; //闅愯棌瓒呭嚭閮ㄥ垎
diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/tableDialog.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/tableDialog.vue
new file mode 100644
index 0000000..0805b0c
--- /dev/null
+++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/tableDialog.vue
@@ -0,0 +1,344 @@
+<template>
+ <el-dialog
+ v-dialogDrag
+ v-loading="loading"
+ :visible.sync="visible"
+ append-to-body="true"
+ class="avue-dialog"
+ title="琛ㄦ牸"
+ width="60%"
+ @close="closeDialog"
+ >
+ <el-form :model="form" :rules="rules" label-position="right" label-width="100px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="鍚嶇О">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+
+ <el-col :span="12">
+ <el-form-item label="姣忛〉琛屾暟">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="闄勫姞鏌ヨ鏉′欢">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item label="缁戝畾琛ㄥ崟">
+ <div style="display: flex;align-items: center;">
+ <el-select v-model="form.region" placeholder="璇烽�夋嫨娲诲姩鍖哄煙" size="mini">
+ <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
+ <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+ </el-select>
+ <el-button plain size="mini" style="margin-left: 3px" type="success">閫夋嫨</el-button>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item label="鐖跺悕绉�">
+ <div style="display: flex;align-items: center;">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ <el-checkbox v-model="checked" style="margin-left: 5px; margin-right: 5px">鏄剧ず鏌ヨ鍖哄煙</el-checkbox>
+ <el-checkbox v-model="checked" style="margin-left: 5px;margin-right: 0px">鏄剧ず鏂囦欢澶�</el-checkbox>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item label="鏄剧ず瀛楁">
+ <div style="display: flex; align-items: center">
+ <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
+ <el-table
+ :data="showLifeTable"
+ style="width: 100%">
+ <el-table-column
+ align="center"
+ label="鍙娇鐢ㄥ瓧娈�"
+ prop="id">
+ </el-table-column>
+ </el-table>
+ </div>
+ <div style="margin-left: 10px; margin-right: 10px">
+ <el-button circle icon="el-icon-back" style="margin-right: 10px"></el-button>
+ <el-button circle icon="el-icon-right"></el-button>
+ </div>
+ <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
+ <el-table
+ :data="showRightTable"
+ style="width: 100%">
+ <el-table-column
+ align="center"
+ label="闇�瑕佷娇鐢ㄥ瓧娈�"
+ prop="id">
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item label="鎼滅储瀛楁">
+ <div style="display: flex; align-items: center">
+ <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
+ <el-table
+ :data="searchLifeTable"
+ style="width: 100%">
+ <el-table-column
+ align="center"
+ label="鍙緵鎼滅储瀛楁"
+ prop="id">
+ </el-table-column>
+ </el-table>
+ </div>
+ <div style="margin-left: 10px; margin-right: 10px">
+ <el-button circle icon="el-icon-back" style="margin-right: 10px"></el-button>
+ <el-button circle icon="el-icon-right"></el-button>
+ </div>
+ <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
+ <el-table
+ :data="searchRightTable"
+ style="width: 100%">
+ <el-table-column
+ align="center"
+ label="闇�鎼滅储瀛楁"
+ prop="id">
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item label="鍒�">
+ <el-select v-model="form.region" placeholder="璇烽�夋嫨鍒�" size="mini">
+ <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
+ <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item label="瀹藉害">
+ <div style="display: flex;align-items: center;">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini" style="width: 193px"></el-input>
+ <el-button plain size="mini" style="margin-left: 3px" type="success">璁剧疆</el-button>
+ </div>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-col :span="24">
+ <el-form-item label="璁剧疆鍒楀">
+ <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
+ <el-table
+ :data="columnWidthData"
+ :highlight-current-row="true"
+ border
+ stripe
+ style="width: 100%">
+ <el-table-column
+ align="center"
+ label="鍒楀悕"
+ prop="id">
+ <template slot-scope="scope">
+ <el-tag size="medium">{{ scope.row.id }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ align="center"
+ label="鍒楀"
+ prop="width">
+ <template slot-scope="scope">
+ <el-tag size="medium">{{ scope.row.width }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="8">
+ <el-form-item label="鏌ヨ瀛楁">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="8">
+ <el-form-item label="鏌ヨ娆℃暟">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="8">
+ <el-form-item label="鏌ヨsql">
+ <div style="display: flex;align-items: center">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ <el-button plain size="mini" style="margin-left: 3px" type="success">娣诲姞</el-button>
+ <el-button plain size="mini" style="margin-left: 3px" type="danger">鍒犻櫎</el-button>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="鏌ヨ瀛楁">
+ <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
+ <el-table
+ :data="columnSearchData"
+ :highlight-current-row="true"
+ border
+ stripe
+ style="width: 100%">
+ <el-table-column
+ align="center"
+ label="鏌ヨ瀛楁"
+ prop="id">
+ <template slot-scope="scope">
+ <el-tag size="medium">{{ scope.row.id }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ align="center"
+ label="鏌ヨ娆℃暟"
+ prop="name">
+ <template slot-scope="scope">
+ <el-tag size="medium">{{ scope.row.name }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ align="center"
+ label="鏌ヨsql"
+ prop="sql">
+ <template slot-scope="scope">
+ <el-tag size="medium">{{ scope.row.sql }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="鍙屽嚮鎿嶄綔">
+ <el-select v-model="form.region" placeholder="璇烽�夋嫨鍙屽嚮鎿嶄綔" size="mini">
+ <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
+ <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="鍥剧墖鏄剧ず">
+ <div style="display: flex;align-items: center">
+ <div style="display: flex;align-items: center;width: 100%;">
+ <span>闀匡細</span>
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </div>
+ <div style="display: flex;align-items: center;width: 100%;margin-left: 30px">
+ <span>瀹斤細</span>
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </div>
+ </div>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item label="瀛楃涓叉埅鍙�">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="8">
+ <el-form-item label="瓒呴摼鎺�">
+ <el-input v-model="user" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="鏌ヨ妯℃澘">
+ <el-select v-model="form.region" placeholder="璇烽�夋嫨鏌ヨ妯℃澘" size="mini">
+ <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
+ <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-form>
+
+ <span slot="footer" class="dialog-footer">
+ <el-button>鍙� 娑�</el-button>
+ <el-button type="primary">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+</template>
+
+<script>
+export default {
+ name: "tableDialog",
+ data() {
+ return {
+ columnSearchData: [
+ {
+ id: 'test',
+ name: '3',
+ sql: 'xxxxx'
+ }
+ ],
+ columnWidthData: [
+ {
+ id: 'test',
+ width: '250'
+ }
+ ],
+ searchLifeTable: [],
+ searchRightTable: [],
+ showRightTable: [],
+ showLifeTable: [
+ {
+ id: 'test1'
+ },
+ {
+ id: 'test2'
+ },
+ {
+ id: 'test1'
+ },
+ {
+ id: 'test2'
+ },
+ {
+ id: 'test1'
+ },
+ {
+ id: 'test2'
+ }
+ ],
+ rules: {},
+ form: {},
+ loading: false,
+ visible: false
+ }
+ },
+ methods: {
+ closeDialog() {
+
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+ .el-form-item .el-select {
+ //width: 100%;
+ }
+}
+</style>
diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue
index 42ae94d..8693e99 100644
--- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue
+++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue
@@ -63,16 +63,18 @@
</basic-container>
</el-main>
<form-dialog ref="formDialog"></form-dialog>
+ <table-dialog ref="tableDialog"></table-dialog>
</el-container>
</template>
<script>
import basicOption from "@/util/basic-option";
import FormDialog from "@/views/modelingMenu/ui/formDefine/components/formDialog";
+import TableDialog from "@/views/modelingMenu/ui/formDefine/components/tableDialog"
export default {
name: "index",
- components: {FormDialog},
+ components: {FormDialog, TableDialog},
data() {
return {
option: {
@@ -96,9 +98,8 @@
this.$message.error('璇峰湪琛ㄦ牸涓婃柟閫夋嫨鏂板绫诲瀷');
return;
}
- if (this.tableRadio === "0") {
- this.$refs.formDialog.visible = true;
- }
+
+ this.tableRadio === "0" ? this.$refs.formDialog.visible = true : this.$refs.tableDialog.visible = true;
}
}
}
--
Gitblit v1.9.3