From 8a166a60cfd1a2e593ffa103d10c0dc224fc8628 Mon Sep 17 00:00:00 2001
From: 田源 <tianyuan@vci-tech.com>
Date: 星期四, 09 一月 2025 11:14:50 +0800
Subject: [PATCH] 表格定义显示字段设置拖拽排序
---
Source/plt-web/plt-web-ui/package.json | 1
Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/tableDialog.vue | 35 ++++++++---------
Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/DragSelect.vue | 67 +++++++++++++++++++++++++++++++++
3 files changed, 84 insertions(+), 19 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/package.json b/Source/plt-web/plt-web-ui/package.json
index df7f0b8..2fc68ec 100644
--- a/Source/plt-web/plt-web-ui/package.json
+++ b/Source/plt-web/plt-web-ui/package.json
@@ -27,6 +27,7 @@
"portfinder": "^1.0.23",
"quill": "^1.3.7",
"script-loader": "^0.7.2",
+ "sortablejs": "^1.15.6",
"v-charts": "^1.19.0",
"vue": "^2.6.10",
"vue-axios": "^2.1.2",
diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/DragSelect.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/DragSelect.vue
new file mode 100644
index 0000000..315c7b4
--- /dev/null
+++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/DragSelect.vue
@@ -0,0 +1,67 @@
+<template>
+ <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners" @change="changeHandler">
+ <slot />
+ </el-select>
+</template>
+
+<script>
+import Sortable from 'sortablejs'
+
+export default {
+ name: 'DragSelect',
+ props: {
+ value: {
+ type: Array,
+ required: true
+ }
+ },
+ computed: {
+ selectVal: {
+ get() {
+ return [...this.value]
+ },
+ set(val) {
+ this.$emit('input', [...val])
+ }
+ }
+ },
+ mounted() {
+ this.setSort()
+ },
+ methods: {
+ setSort() {
+ const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
+ this.sortable = Sortable.create(el, {
+ ghostClass: 'sortable-ghost',
+ setData: function(dataTransfer) {
+ dataTransfer.setData('Text', '')
+ },
+ onEnd: evt => {
+ const targetRow = this.value.splice(evt.oldIndex, 1)[0]
+ this.value.splice(evt.newIndex, 0, targetRow)
+ }
+ })
+ },
+ changeHandler(val){
+ this.$emit('outFileChange',val);
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.drag-select {
+ ::v-deep {
+ .sortable-ghost {
+ opacity: .8;
+ color: #fff !important;
+ background: #42b983 !important;
+ }
+
+ .el-tag {
+ cursor: pointer;
+ }
+ }
+}
+</style>
+
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
index ec0dabf..b5efc09 100644
--- 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
@@ -9,17 +9,18 @@
width="60%"
@close="closeDialog"
>
- <el-form ref="form" size="small" v-loading="formLoading" :model="form" :rules="rules" label-position="right" label-width="100px">
+ <el-form ref="form" v-loading="formLoading" :model="form" :rules="rules" label-position="right" label-width="100px"
+ size="small">
<el-row>
<el-col :span="12">
<el-form-item label="鍚嶇О" prop="viName">
- <el-input v-model="form.viName" placeholder="璇疯緭鍏ュ悕绉�" ></el-input>
+ <el-input v-model="form.viName" placeholder="璇疯緭鍏ュ悕绉�"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姣忛〉琛屾暟">
- <el-input v-model="form.itemPageSize" placeholder="璇疯緭鍏ユ瘡椤佃鏁�" type="number"></el-input>
+ <el-input v-model="form.itemPageSize" placeholder="璇疯緭鍏ユ瘡椤佃鏁�" type="number"></el-input>
</el-form-item>
</el-col>
@@ -45,7 +46,7 @@
<el-col :span="12">
<el-form-item label="鐖跺悕绉�">
<div style="display: flex;align-items: center;">
- <el-input v-model="form.itemParentFolderName" placeholder="璇疯緭鍏ョ埗鍚嶇О" ></el-input>
+ <el-input v-model="form.itemParentFolderName" placeholder="璇疯緭鍏ョ埗鍚嶇О"></el-input>
<el-checkbox v-model="form.itemIsNavigatorExpand" style="margin-left: 5px; margin-right: 5px">鏄剧ず鏌ヨ鍖哄煙
</el-checkbox>
<el-checkbox v-model="form.itemIsShowFolder" style="margin-left: 5px;margin-right: 0px">鏄剧ず鏂囦欢澶�
@@ -56,15 +57,10 @@
<el-col :span="24">
<el-form-item label="鏄剧ず瀛楁" prop="showLabel">
- <el-select v-model="form.itemOutFieldList" multiple placeholder="璇烽�夋嫨" style="width: 100%"
- @change="outFileChange">
- <el-option
- v-for="(item,index) in form.itemSelectOutFieldList"
- :key="index"
- :label="item.id"
- :value="item.id">
- </el-option>
- </el-select>
+ <el-drag-select v-model="form.itemOutFieldList" multiple placeholder="璇烽�夋嫨" style="width:100%;" @outFileChange="outFileChange">
+ <el-option v-for="(item,index) in form.itemSelectOutFieldList" :key="index" :label="item.id"
+ :value="item.id"/>
+ </el-drag-select>
</el-form-item>
</el-col>
@@ -94,7 +90,7 @@
</el-col>
<el-col :span="8">
- <el-form-item label="鏌ヨ瀛楁" >
+ <el-form-item label="鏌ヨ瀛楁">
<el-input v-model="form.searchLabel" placeholder="璇疯緭鍏ユ煡璇㈠瓧娈�" size="mini"></el-input>
</el-form-item>
</el-col>
@@ -158,7 +154,7 @@
<el-col :span="24">
<el-form-item label="鍙屽嚮鎿嶄綔">
- <el-select v-model="form.itemDbl" placeholder="璇烽�夋嫨鍙屽嚮鎿嶄綔" >
+ <el-select v-model="form.itemDbl" placeholder="璇烽�夋嫨鍙屽嚮鎿嶄綔">
<el-option v-for="(item,index) in itemDblList" :key="index" :label="item.value"
:value="item.key"></el-option>
</el-select>
@@ -170,7 +166,7 @@
<div style="display: flex;align-items: center">
<div style="display: flex;align-items: center;width: 100%;">
<span>闀匡細</span>
- <el-input v-model="itemImgHeight" placeholder="璇疯緭鍏ラ暱搴�" ></el-input>
+ <el-input v-model="itemImgHeight" placeholder="璇疯緭鍏ラ暱搴�"></el-input>
</div>
<div style="display: flex;align-items: center;width: 100%;margin-left: 30px">
<span>瀹斤細</span>
@@ -194,7 +190,7 @@
<el-col :span="24">
<el-form-item label="鏌ヨ妯℃澘">
- <el-select v-model="form.itemQtName" placeholder="璇烽�夋嫨鏌ヨ妯℃澘" >
+ <el-select v-model="form.itemQtName" placeholder="璇烽�夋嫨鏌ヨ妯℃澘">
<el-option v-for="(item,index) in searchQtNameList" :key="index" :label="item.qtName"
:value="item.qtName"></el-option>
</el-select>
@@ -214,9 +210,11 @@
import basicOption from "@/util/basic-option";
import {gridPortalVIDatas, getPortalVIById, getItemDblList, savePortalVI, getObjTypeQTs} from "@/api/UI/formDefine/api";
import func from "@/util/func";
+import ElDragSelect from './DragSelect'
export default {
name: "tableDialog",
+ components: {ElDragSelect},
props: {
TreeNodeRow: {
type: Object,
@@ -470,7 +468,6 @@
$cellEdit: true,
key: item,
value: '250',
-
}
})
},
@@ -524,7 +521,7 @@
dialogSaveClickHandler() {
this.$refs.form.validate((valid) => {
if (valid) {
- if(this.form.itemOutFieldList.length <= 0){
+ if (this.form.itemOutFieldList.length <= 0) {
this.$message.error('璇烽�夋嫨鏄剧ず瀛楁');
return;
}
--
Gitblit v1.9.3