WidgetFormTable.vue

<template>
  <div>
    <h3 style="margin: 10px" v-show="column.label">{{ column.label }}</h3>
    <draggable
      class="widget-form-table__content"
      :list="column.children.column"
      :group="{ name: 'form' }"
      ghost-class="ghost"
      :animation="200"
      handle=".widget-form-table__item"
      @add="handleWidgetTableAdd($event, column)"
      @end="$emit('change')"
    >
      <template v-if="column.children.column.length > 0">
        <template v-if="column.children.type === 'form'">
          <el-col
            v-for="(item, tableIndex) in column.children.column"
            :key="tableIndex"
            :md="item.span || 12"
            :xs="24"
          >
            <div
              class="widget-form-table__item is-form"
              :class="{
                active: selectWidget.prop == item.prop,
                required: item.required,
              }"
              @click.stop="handleWidgetTableSelect(item)"
              :style="item.styles"
            >
              <el-form-item
                :label="
                  item.label ? `${item.label}${item.labelSuffix || '：'}` : ''
                "
                :prop="item.prop"
                :label-width="
                  item.label
                    ? item.labelWidth
                      ? `${item.labelWidth}px`
                      : ''
                    : '0px'
                "
                :style="{
                  width: item.width ? `${(item.width / 24) * 100}%` : '100%',
                }"
              >
                <widget-form-item
                  :item="item"
                  :params="column.params"
                ></widget-form-item>
                <el-button
                  title="删除"
                  @click.stop="handleWidgetTableDelete(column, tableIndex)"
                  class="widget-table-action-delete"
                  v-if="selectWidget.prop == item.prop"
                  circle
                  plain
                  size="small"
                  type="danger"
                >
                  <i class="iconfont icon-delete"></i>
                </el-button>
              </el-form-item>
            </div>
          </el-col>
        </template>
        <template v-else>
          <div
            v-for="(item, tableIndex) in column.children.column"
            :key="tableIndex"
            class="widget-form-table__item"
            :class="{
              active: selectWidget.prop == item.prop,
              required: item.required,
            }"
            :style="{
              width:
                item.type === 'dynamic'
                  ? '100%'
                  : item.width
                  ? `${item.width}px`
                  : '32%',
            }"
            @click.stop="handleWidgetTableSelect(item)"
          >
            <el-table :data="[item]" border>
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                :align="column.children.align"
                :header-align="column.children.headerAlign"
              >
                <widget-form-item
                  :item="item"
                  :params="column.params"
                ></widget-form-item>
                <el-button
                  title="删除"
                  @click.stop="handleWidgetTableDelete(column, tableIndex)"
                  class="widget-table-action-delete"
                  v-if="selectWidget.prop == item.prop"
                  circle
                  plain
                  size="small"
                  type="danger"
                >
                  <i class="iconfont icon-delete"></i>
                </el-button>
                <!-- <el-button title="复制"
                         @click.stop="handleWidgetTableClone(column, item)"
                         class="widget-table-action-clone"
                         v-if="selectWidget.prop == item.prop"
                         circle
                         plain
                         size='small'
                         type="primary">
                <i class="iconfont icon-copy"></i>
              </el-button> -->
              </el-table-column>
            </el-table>
          </div>
        </template>
      </template>
      <template v-else>
        <div>拖拽字段至此</div>
      </template>
    </draggable>
    <el-button
      title="删除"
      @click.stop="handleWidgetDelete(index)"
      class="widget-action-delete"
      v-if="selectWidget.prop == column.prop"
      circle
      plain
      size="small"
      type="danger"
    >
      <i class="iconfont icon-delete"></i>
    </el-button>
    <el-button
      title="清空"
      @click.stop="handleWidgetClear(index)"
      class="widget-action-clear"
      v-if="selectWidget.prop == column.prop"
      circle
      plain
      size="small"
      type="warning"
    >
      <i class="iconfont icon-clear"></i>
    </el-button>
    <!-- <el-button title="复制"
               @click.stop="handleWidgetCloneTable(index)"
               class="widget-action-clone"
               v-if="selectWidget.prop == column.prop"
               circle
               plain
               size='small'
               type="primary">
      <i class="iconfont icon-copy"></i>
    </el-button> -->
  </div>
</template>
<script>
import WidgetFormItem from "./WidgetFormItem"
import draggable from "vuedraggable"

export default {
  name: "widget-form-table",
  props: ["data", "column", "select", "index"],
  components: { WidgetFormItem, draggable },
  data() {
    return {
      selectWidget: this.select,
    }
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.data.column[index]
    },
    handleWidgetClear(index) {
      this.data.column[index].children.column = []
      this.selectWidget = this.data.column[index]
      this.$emit("change")
    },
    handleWidgetDelete(index) {
      if (this.data.column.length - 1 === index) {
        if (index === 0) this.selectWidget = {}
        else this.handleSelectWidget(index - 1)
      } else this.handleSelectWidget(index + 1)

      this.$nextTick(() => {
        this.data.column.splice(index, 1)
        this.$emit("change")
      })
    },
    handleWidgetCloneTable(index) {
      let cloneData = this.deepClone(this.data.column[index])
      cloneData.prop = Date.now() + "_" + Math.ceil(Math.random() * 99999)
      cloneData.children.column.forEach((t) => {
        t.prop = Date.now() + "_" + Math.ceil(Math.random() * 99999)
      })
      this.data.column.splice(index, 0, cloneData)
      this.$nextTick(() => {
        this.handleSelectWidget(index + 1)
        this.$emit("change")
      })
    },
    handleWidgetTableAdd(evt, column) {
      let newIndex = evt.newIndex
      const item = evt.item
      const { type } = item._underlying_vm_
      if (newIndex == 1 && newIndex > column.children.column.length - 1)
        newIndex = 0
      if (type === "group") {
        this.$message.warning("该类型不可拖入")
        column.children.column.splice(newIndex, 1)
        return
      }

      const data = this.deepClone(column.children.column[newIndex])
      if (!data.prop)
        data.prop = Date.now() + "_" + Math.ceil(Math.random() * 99999)
      if (data.type === "dynamic") {
        data.prop = "fixed_field"
      }
      if (data.type == "title") {
        delete data.label
      }
      data.cType = column.children.type === "form" ? "form" : "table"
      data.subfield = true
      delete data.icon
      this.$set(column.children.column, newIndex, { ...data })
      this.selectWidget = column.children.column[newIndex]

      this.$emit("change")
    },
    handleWidgetTableSelect(data) {
      this.selectWidget = data
    },
    handleWidgetTableClone(column, item) {
      const data = this.deepClone(item)
      data.prop = Date.now() + "_" + Math.ceil(Math.random() * 99999)
      this.$set(column.children.column, column.children.column.length, {
        ...data,
      })
      this.$nextTick(() => {
        this.selectWidget =
          column.children.column[column.children.column.length - 1]
        this.$emit("change")
      })
    },
    handleWidgetTableDelete(column, index) {
      if (column.children.column.length - 1 == index) {
        if (index == 0) this.selectWidget = column
        else this.selectWidget = column.children.column[index - 1]
      } else this.selectWidget = column.children.column[index + 1]
      this.$nextTick(() => {
        column.children.column.splice(index, 1)
        this.$emit("change")
      })
    },
  },

  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler(val) {
        this.$emit("update:select", val)
      },
      deep: true,
    },
    "column.children.type": {
      handler(type) {
        this.column.children.column.map((item) => {
          this.$set(item, "cType", type ? "form" : "table")
        })
      },
      immediate: true,
    },
  },
}
</script>