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

 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,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;
          }