hwmom-ui/src/views/tool/draggable/index.vue

<template>
  <div>
    <div class="left-box">
      <div class="model" :style="`display:${isDrag?'inline-block':'none'}`">
      </div>
      <draggable :list="dragList" ghost-class="ghost" :force-fallback="true" :group="{ name: 'list', pull: 'clone' }"
                 :sort="false" itemKey="id" @start="onStartLeft" :clone="onClone">
        <template #item="{ element }">
          <element-mini :option="element" @dblclick.stop="addElement(element)" />
        </template>
      </draggable>

      <div class="dataBox">
        <div>{{ dragList }}</div>
        <div>----</div>
        <div>{{ formData }}</div>
      </div>
    </div>
    <div class="right-box">
      <nested-draggable :tasks="widgetList" style="height: 100%;" :formData="formData" />
    </div>
    <div class="option-box">
      <div>
        <option-from :formData="optionsData" />
        {{ optionsData }}
      </div>
      <div class="dataBox">
        <div>{{ widgetList }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, provide } from 'vue';
import draggable from 'vuedraggable';
import optionFrom from './option/optionForm.vue';
import nestedDraggable from './nest.vue';
import elementMini from './element-mini.vue';
import { v4 as getUuid } from 'uuid';

interface type {
  name: string,
  id: number
}

const optionsData = ref({});
const getOptions = (e) => {
  optionsData.value = e;
};
provide('getOptions', getOptions);
const selectUuid = ref('');
const getSelectUuid = (e) => {
  selectUuid.value = e;
};
provide('selectUuid', selectUuid);
provide('getSelectUuid', getSelectUuid);


const formData = ref({});
const dragList = [
  {
    type: 'hw-form',
    isContainer: true,
    options: { name: '表单', labelWidth: '120px', formData: {} },
    tasks: [],
    name: '表单',
    id: 0
  },
  {
    type: 'hw-input',
    isContainer: false,
    options: { name: '单行文本', type: 'text', key: '' },
    name: '单行文本',
    id: 1
  },
  { type: 'hw-input', isContainer: false, options: { name: '密码文本', type: 'password' }, name: '密码文本', id: 2 },
  { type: 'hw-input', isContainer: false, options: { name: '多行文本', type: 'textarea' }, name: '多行文本', id: 3 },
  { type: 'hw-input-number', isContainer: false, options: { name: '计数器', step: 2 }, name: '计数器', id: 4 },
  {
    type: 'hw-radio-group', isContainer: false,
    options: { name: '单选框组', items: [{ value: '1', label: '1' }, { value: '1', label: '1' }] },
    name: '单选框组',
    id: 5
  },
  { type: 'hw-slider', isContainer: false, options: { name: '滑块', step: 2, showStops: true }, name: '滑块', id: 6 }
];

function removeItemByUuid(arr, uuid) {
  arr.forEach((item, index) => {
    if (item.options.uuid === uuid) {
      arr.splice(index, 1);
    } else if (item.tasks && item.tasks.length > 0) {
      removeItemByUuid(item.tasks, uuid);
    }
  });
}

const widgetList = reactive<type[]>([]);
const delFormListItem = (uuid) => {
  removeItemByUuid(widgetList, uuid);
};

provide('delFormListItem', delFormListItem);

const isDrag = ref(false);
const onClone = (e) => {
  let item = JSON.parse(JSON.stringify(e));
  item.id = Date.now();
  item.options.uuid = getUuid();
  return item;
};
const onStartLeft = (e) => {
  // console.log(e);
};

const addElement = (e) => {
  let element = onClone(e);
  widgetList.push(element);
};

</script>
<style scoped>
.model {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.left-box {
  width: 260px;
  display: inline-block;
  user-select: none;
  vertical-align: top;
  position: relative;
  margin: 8px;
  padding: 2px;
  border: 1px solid #ccc;
}

.right-box {
  width: calc(100% - 260px - 16px - 400px - 16px - 16px - 2px);
  display: inline-block;
  user-select: none;
  vertical-align: top;
  margin: 8px;
  border: 1px solid #ccc;
  height: 80vh;
  overflow: auto;
  padding-top: 12px;

  &::-webkit-scrollbar {
    display: none;
  }
}

.option-box {
  width: 400px;
  display: inline-block;
  user-select: none;
  vertical-align: top;
  margin: 8px;
  border: 1px solid #ccc;
  min-height: 100px;
}

.dataBox {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  border: 1px solid #ccc;
}
</style>