hitch-sb-antd/src/views/test/Test1.vue

<template>
  <a-row :gutter="10">
    <a-col :span="5">
      <a-card title="基础">
        <a-row>
          <VueDraggable
            v-model="list1"
            :animation="150"
            :group="{ name: 'people', pull: 'clone', put: false }"
            :sort="false"
            :clone="onClone"
          >
            <a-col
              :span="12"
              v-for="item in list1"
              :key="item.id">
              <div
                class="hover type"
              >
                <a-space>
                  <a-icon type="profile" /> {{ item.name }}
                </a-space>
              </div>
            </a-col>

          </VueDraggable>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="15">
      <a-card>
        <a-form
          :form="form"
          :labelCol="BaseTool.Constant.labelCol"
          :wrapperCol="BaseTool.Constant.wrapperCol">
          <row-list :col="2">

            <VueDraggable
              v-model="list2"
              :animation="150"
              group="people"
            >
              <row-item
                class="hover"
                v-for="item in list2"
                :key="item.id"
              >
                <MComponent
                  :detail="item"
                  @select="handleSelect"
                />
              </row-item>

            </VueDraggable>
          </row-list>
        </a-form>
      </a-card>
    </a-col>
    <a-col :span="4">
      <Detail ref="detail"/>
    </a-col>
  </a-row>
</template>

<script>
import { VueDraggable } from 'vue-draggable-plus'
import Detail from './modules/Detail.vue'
import MComponent from './modules/Component.vue'
export default {
  name: 'Test1',
  components: {
    VueDraggable,
    Detail,
    MComponent
  },
  data () {
    return {
      form: this.$form.createForm(this),
      list1: [
        {
          id: 1,
          name: '单行文本',
          type: 'input',
          value: 'input',
          dependentId: false,
          required: true,
          label: 'label',
          attrs: {
            placeholder: '请输入'
          }
        },
        {
          id: 2,
          name: '多行文本',
          type: 'textarea',
          value: 'textarea',
          dependentId: false,
          required: true,
          label: 'label',
          attrs: {
            placeholder: '请输入'
          }
        }
      ],
      list2: [],

      detail: {}
    }
  },
  created () {

  },
  methods: {
    onClone (element) {
      // 生成随机id
      const val = {
        ...element,
        id: Math.floor(Math.random() * 10000000000000)
      }
      this.handleSelect(val)
      return val
    },
    update (val) {
      console.log(val)
    },
    handleSelect (item) {
      this.$refs.detail.base(item)
    }
  }
}
</script>

<style lang="less" scoped>
.type{
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
border-radius: 5px;
}

</style>