wans

src/components/global.less

@@ -1,7 +1,9 @@
 @import './index.less';
 
 body {
-
+.hover{
+  cursor: pointer;
+}
   &.colorWeak {
     filter: invert(80%);
   }

src/views/test/Test1.vue

@@ -1,19 +1,19 @@
 <template>
   <a-row :gutter="10">
     <a-col :span="4">
-      <a-card>
+      <a-card title="基础">
         <VueDraggable
           v-model="list1"
           :animation="150"
           :group="{ name: 'people', pull: 'clone', put: false }"
           :sort="false"
-          class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
-          @clone="onClone"
+          :clone="onClone"
         >
           <div
             v-for="item in list1"
             :key="item.id"
-            class="cursor-move h-50px bg-gray-500/5 rounded p-3"
+            class="hover"
+            @mousedown="handleSelect(item)"
           >
             {{ item.name }}
           </div>
@@ -22,57 +22,100 @@
     </a-col>
     <a-col :span="16">
       <a-card>
-        <VueDraggable
-          v-model="list2"
-          :animation="150"
-          group="people"
-          class="flex flex-col gap-2 p-4 w-300px m-auto bg-gray-500/5 rounded overflow-auto"
-        >
-          <div
-            v-for="item in list2"
-            :key="item.id"
-            class="cursor-move h-50px bg-gray-500/5 rounded p-3"
-          >
-            {{ item.name }}
-          </div>
-        </VueDraggable>
+        <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">
-      <a-card>
-        sd
-      </a-card>
+      <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
+    VueDraggable,
+    Detail,
+    MComponent
   },
   data () {
     return {
+      form: this.$form.createForm(this),
       list1: [
-        { id: 1, name: 'John' },
-        { id: 2, name: 'Jane' },
-        { id: 3, name: 'Jack' }
+        {
+          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: [
-        { id: 4, name: 'Jill' },
-        { id: 5, name: 'Joe' },
-        { id: 6, name: 'Jim' }
-      ]
+      list2: [],
+
+      detail: {}
     }
   },
   created () {
 
   },
   methods: {
-    onClone () {
-      console.log('clone')
+    onClone (element) {
+      // 生成随机id
+      return {
+        ...element,
+        id: Math.floor(Math.random() * 10000000000000)
+      }
+    },
+    update (val) {
+      console.log(val)
+    },
+    handleSelect (item) {
+      this.$refs.detail.base(item)
     }
   }
 }

src/views/test/modules/Component.vue

@@ -0,0 +1,30 @@
+<template>
+  <div @click="handleSelect">
+    <a-form-item :label="detail.label" >
+      <a-input v-if="detail.type==='input'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
+      <a-textarea v-if="detail.type==='textarea'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
+    </a-form-item>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MComponent',
+  props: {
+    detail: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
+  methods: {
+    handleSelect () {
+      this.$emit('select', this.detail)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/test/modules/Detail.vue

@@ -0,0 +1,34 @@
+<template>
+  <a-card title="组件信息">
+    <a-form>
+      <a-form-item label="标题">
+        <a-input v-model="model.label" />
+      </a-form-item>
+      <a-form-item label="组件描述">
+        <a-input v-model="model.desc" />
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      model: {}
+    }
+  },
+  created () {
+  },
+  methods: {
+    base (val) {
+      this.model = val
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>