ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/dragControlApp.vue

<!--
@ 作者: 秦东
@ 时间: 2024-05-09 15:12:45
@ 备注: 自定义表单组件页面(App专用)
-->
<script lang="ts" setup>
import { jsonParseStringify } from "@/utils/DesignForm";
import controlListData from "@/components/DesignForm/assembly";
import Draggable from "vuedraggable-es";
import "@/assets/iconfont/iconfont.css";

//引入页面
import FormVersion from "@/components/DesignForm/formVersion.vue";

const props = withDefaults(
  defineProps<{
    tableKey?: number | string;
    signCode?: number | string;
  }>(),
  {}
);
const designType = inject("formDesignType") as string; //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
const isSearch = computed(() => {
  return designType === "search";
});
// 默认搜索允许显示的字段
const searchField = [
  "input",
  "radio",
  "checkbox",
  "select",
  "datePicker",
  "timePicker",
  "inputNumber",
  "cascader",
  "component",
  "button",
];
/**
@ 作者: 秦东
@ 时间: 2024-05-09 10:58:56
@ 功能: 表单组件数据
*/
const controlList = computed(() => {
  if (designType === "search") {
    // 只返回基础字段
    const temp: any = [];
    controlListData.forEach((item: any) => {
      if (item.children) {
        const filter = item.children.filter((ch: any) => {
          return searchField.includes(ch.type);
        });
        if (filter && filter.length) {
          temp.push({ title: item.title, children: filter });
        }
      }
    });
    return temp;
  } else {
    return controlListData;
  }
});
const tableVersion = ref(); //版本显示器

const emits = defineEmits<{
  (e: "versionUpdateForm", value: string): void;
  (e: "versionPreviewPage", value: string): void;
}>();
/**
@ 作者: 秦东
@ 时间: 2024-05-09 11:36:59
@ 功能: 启用和禁用版本
*/
const enableOrDisable = (val?: any) => {
  // console.log("启用和禁用版本",val)
  emits("versionUpdateForm", val);
};
/**
@ 作者: 秦东
@ 时间: 2024-05-21 09:05:20
@ 功能: 预览版本
*/
const previewPage = (val?: any) => {
  emits("versionPreviewPage", val);
};
/**
@ 作者: 秦东
@ 时间: 2024-05-09 11:40:15
@ 功能: 打开版本选择页面
*/
const useVersionClick = () => {
  tableVersion.value.open();
};
const activities = [
  {
    content: "Event start",
    timestamp: "2018-04-15",
  },
  {
    content: "Approved",
    timestamp: "2018-04-13",
  },
  {
    content: "Success",
    timestamp: "2018-04-11",
  },
];
/**
@ 作者: 秦东
@ 时间: 2024-05-15 10:15:14
@ 功能: 克隆选中的组件数据结构
*/
const clone = (origin: any) => {
  // console.log("克隆选中的组件数据结构",origin)
  return jsonParseStringify(origin);
};
</script>
<template>
  <div class="components-list">
    <div v-for="(list, index) in controlList" :key="index">
      <div class="title">
        {{ list.title }}
        <div v-if="index === 0 && !isSearch" class="template" @click="useVersionClick">
          版本
        </div>
      </div>
      <draggable
        v-model="list.children"
        tag="ul"
        :group="{ name: 'form', pull: 'clone', put: false }"
        ghost-class="ghost"
        :sort="false"
        :clone="clone"
        :item-key="key123"
      >
        <template #item="{ element }">
          <li class="fontIcon" :class="[element.type]">
            <i v-if="element.iconFont == ''" :class="`icon-${element.icon}`"></i>
            <i v-if="element.iconFont != ''" :class="`fa ${element.iconFont} `"></i>
            <span :title="element.label">{{ element.label }}</span>
          </li>
        </template>
      </draggable>
    </div>
  </div>
  <FormVersion
    ref="tableVersion"
    :table-key="props.tableKey"
    :sign-code="props.signCode"
    @enableOrDisable="enableOrDisable"
    @previewPage="previewPage"
  />
</template>
<style lang="scss" scoped>
.tab_pane_body {
  text-align: center;
}
.fontIcon {
  height: 35px;
  i {
    padding: 3px 0px 0 0px;
  }
}
</style>