表格定义显示字段设置拖拽排序

 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",

 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>


 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/tableDialog.vue

@@ -9,7 +9,8 @@
    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">
@@ -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>

@@ -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',

        }
      })
    },