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="componentBaseList"
            :animation="150"
            :group="{ name: 'people', pull: 'clone', put: false }"
            :sort="false"
            :clone="onClone"
          >
            <a-col
              :span="12"
              v-for="item in componentBaseList"
              :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-card title="高级" >
        <a-row>
          <VueDraggable
            v-model="componenHidetList"
            :animation="150"
            :group="{ name: 'people', pull: 'clone', put: false }"
            :sort="false"
            :clone="onClone"
          >
            <a-col
              :span="12"
              v-for="item in componenHidetList"
              :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">
          <a-row>
            <VueDraggable
              v-model="list2"
              :animation="150"
              group="people"
              style="min-height:600px"
            >
              <MComponent
                class="hover"
                v-for="item in list2"
                :key="item.id"
                :config="config"
                :detail="item"
                @select="handleSelect"
                @selectInfo="handleInfoSelect"
              />
            </VueDraggable>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-button type="primary" @click="handleSubmit">提交</a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </a-col>
    <a-col :span="4">
      <Detail :config="config" ref="detail" @delete="handleDelete"/>
    </a-col>
    <SelectInfo ref="selectInfo" @selected="handleInfoSelected" />
  </a-row>
</template>

<script>
import { VueDraggable } from 'vue-draggable-plus'
import Detail from './modules/Detail.vue'
import MComponent from './modules/Component.vue'
import SelectInfo from './modules/SelectInfo'

import { componentBaseList, componenHidetList } from './modules/components'
export default {
  name: 'Test1',
  components: {
    VueDraggable,
    Detail,
    MComponent,
    SelectInfo

  },
  data () {
    return {
      form: this.$form.createForm(this),
      componentBaseList,
      componenHidetList,
      list2: [],
      detail: {},
      config: {
        layout: 2
      }
    }
  },
  provide () {
    return {
      getFormList: () => {
        return this.list2
      }
    }
  },
  mounted () {
    this.handleSelect({}, this.config)
  },
  methods: {
    onClone (element) {
      // 生成随机id
      const val = {
        ...JSON.parse(JSON.stringify(element)),
        id: Math.floor(Math.random() * 10000000000000)
      }
      this.handleSelect(val)
      return val
    },
    update (val) {
      console.log(val)
    },
    handleDelete (val) {
      this.list2 = this.list2.filter(v => v.id !== val.id)
    },
    handleSubmit () {
      const {
        form: { validateFieldsAndScroll }
      } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        console.log(values)
        if (errors) {
          this.confirmLoading = false
        }
      })
    },
    handleSelect (item) {
      this.$refs.detail.base(item, this.config)
    },
    handleInfoSelect (item) {
      this.$refs.selectInfo.base(item)
    },
    handleInfoSelected (keys, rows, detail) {
      console.log(keys, rows, detail)
      const {
        form: { setFieldsValue }
      } = this
      const data = rows[0]
      const value = {}
      detail.attrs.connect.forEach(item => {
        value[item.bind] = data[item.columnName]
      })
      this.$nextTick(() => {
        setFieldsValue(value)
      })
    }
  }
}
</script>

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

</style>