hitch-sb-antd/src/views/custom/form/modules/component/index.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="components" :animation="150" group="people" style="min-height:600px">
              <MComponent class="hover" v-for="item in components" :key="item.id" :config="config" :detail="item" @select="handleSelect" @selectInfo="handleInfoSelect" />
            </VueDraggable>
          </a-row>
        </a-form>
      </a-card>
    </a-col>
    <a-col :span="4">
      <Detail :config="config" ref="detail" @delete="handleDelete" @addForm="addForm" />
    </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 { getCustomRelation } from '@/api/custom/relation'

import { componentBaseList, componenHidetList } from './modules/components'
export default {
  name: 'Test1',
  components: {
    VueDraggable,
    Detail,
    MComponent,
    SelectInfo,
  },
  data() {
    return {
      form: this.$form.createForm(this),
      componentBaseList,
      componenHidetList,
      components: [],
      num: 1,
      detail: {},
      config: {
        layout: 2,
      },
    }
  },
  provide() {
    return {
      getFormList: () => {
        return this.components
      },
    }
  },
  watch: {
    components: {
      deep: true,
      handler(val) {
        this.num++
      },
    },
  },
  created() {},
  mounted() {
    // this.handleSelect({}, this.config)
  },
  methods: {
    base(record, params = {}) {
      this.components = record.components
      this.config = record.config
      this.num = record.num
      if (this.components.length == 0) {
        getCustomRelation(params).then((res) => {
          const datas = JSON.parse(res.data.json)
          const components = datas.forEach((item) => {
            const newVal = [...componentBaseList, ...componenHidetList].find(
              (component) => item.type === component.type
            )
            const component = {
              ...newVal,
              value: item.englishName,
              id: String(+new Date()),
              label: item.chineseName,
              isDelete: false,
            }
            console.log(component)
            this.components.push(component)
          })
        })
      }
    },
    onClone(element) {
      // 生成随机id
      const val = {
        ...JSON.parse(JSON.stringify(element)),
        value: `${element.value}${this.num}`,
        id: String(+new Date()),
      }
      this.handleSelect(val)
      return val
    },
    update(val) {
      console.log(val)
    },
    addForm(val) {
      val.forEach((item) => {
        this.components.push({
          id: item.bind,
          name: '单行文本',
          type: 'input',
          value: item.bind,
          dependentId: false,
          required: true,
          label: item.columnComment,
          attrs: {
            placeholder: '请输入',
            disabled: true,
          },
        })
      })
    },
    handleDelete(val) {
      this.components = this.components.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) {
      const {
        form: { setFieldsValue },
      } = this
      if (detail.attrs.selectType === 'radio') {
        const data = rows[0]
        const value = {}
        detail.attrs.connect.forEach((item) => {
          value[item.bind] = data[item.columnName]
        })
        this.$nextTick(() => {
          setFieldsValue(value)
        })
      } else {
        this.$nextTick(() => {
          setFieldsValue({
            [detail.attrs.connect[0].bind]: keys,
          })
        })
      }
    },
  },
}
</script>

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