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/components/formDialog.vue | 145 +++++++++++++++++++++++++++++++++++++++++------
1 files changed, 125 insertions(+), 20 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; //闅愯棌瓒呭嚭閮ㄥ垎
--
Gitblit v1.9.3