lw-cdp-ui 1.2.48 → 1.2.49

package/dist/components/lwFormJson/index.vue

@@ -1,362 +0,0 @@
-<template>
-  <el-container :style="{ maxHeight }">
-    <el-aside v-if="!hideModule"
-              width="200px"
-              class="form-json-body">
-      <div class="menu-list">
-        <el-collapse v-model="activeNames">
-          <el-collapse-item v-for="item in menuList"
-                            :title="item.title"
-                            :name="item.title"
-                            class="menu-list-title">
-            <draggable class="menu-list-group"
-                       :list="item.list"
-                       :group="{ name: 'people', pull: 'clone', put: false }"
-                       :clone="cloneItem"
-                       item-key="name">
-              <template #item="{ element }">
-                <div v-if="!element?.hide"
-                     class="list-group-item">
-                  {{ element.label }}
-                </div>
-              </template>
-            </draggable>
-          </el-collapse-item>
-        </el-collapse>
-      </div>
-
-    </el-aside>
-    <el-container>
-      <!-- <el-header v-if="hideTool">暂未开发工具栏</el-header> -->
-      <el-main class="form-json-body">
-        <el-form ref="form"
-                 @click.capture="back(config)"
-                 :model="form"
-                 :label-width="config.labelWidth"
-                 :label-position="$i18n.locale == 'en-us' ? 'top' : config.labelPosition"
-                 v-loading="loading"
-                 :disabled="isView"
-                 element-loading-text="Loading...">
-          <el-row :gutter="10">
-            <JsonItem :formItems="config.formItems"
-                      :hideBorder="hideBorder"
-                      :form="form"
-                      :custom="custom"
-                      @curClick="selectItem">
-              <template v-for="item in custom"
-                        v-slot:[item.component]="{ itemCur, formCur }">
-                <slot :name="item.component"
-                      :itemCur="itemCur"
-                      :formCur="formCur"></slot>
-              </template>
-            </JsonItem>
-          </el-row>
-
-        </el-form>
-      </el-main>
-    </el-container>
-
-    <el-aside v-if="!hideConfig"
-              width="300px"
-              class="aside-right">
-      <StatsConfig :item="curItem"
-                   :config="config" />
-    </el-aside>
-  </el-container>
-</template>
-
-<script>
-import JsonItem from './JsonItem.vue'
-import StatsConfig from './StatsConfig.vue'
-import MenuList from './menuList'
-import draggable from 'vuedraggable'
-export default {
-  components: {
-    JsonItem,
-    StatsConfig,
-    draggable
-  },
-  props: {
-    modelValue: { type: Object, default: () => { } },
-    /**
-     * 配置项
-     * {
-     *   formItems: [{
-     *     span: 24,
-     *     component: 'input', // 可选项有  input, textarea, select, cascader, date, number, radio, checkbox, switch, color, rate, slider, tags, divider, upload, 自定义名称
-     *     name: 'name', // 表单字段名称
-     *     label: '名称', // 表单字段名称
-     *     message: '提示信息', // 表单字段名称
-     *     value: '1', // 表单字段值
-     *     options: {
-     *       name: 'name', // 表单字段名称
-     *       type: 'input|', // 输入框类型
-     *       placeholder: '请输入', // 表单字段名称
-     *       disabled: false, // 表单字段名称
-     *       maxlength: 10, // 表单字段名称
-     *       append: '元', // 表单字段名称
-     *       items: [{
-     *         value: '1',
-     *         label: '选项1'
-     *       }, {
-     *         value: '2',
-     *         label: '选项2'
-     *       }]
-     *     }
-     *     ...  
-     *   }]
-     *   labelWidth: '100px', // 表单域标签的宽度
-     *   labelPosition: 'top', // 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
-     *   ...
-     * }
-     * **/
-    config: { type: Object, default: () => { return {} } },
-    // 最大高度
-    maxHeight: { type: String, default: 'calc(100vh - 137px)' },
-    // 自定义组件
-    custom: { type: Array, default: () => [] },
-    customTitle: { type: String, default: '自定义组件' },
-    // 是否显示加载中
-    loading: { type: Boolean, default: false },
-    // 隐藏工具、组件、属性
-    hideTool: { type: Boolean, default: true },
-    hideModule: { type: Boolean, default: false },
-    hideConfig: { type: Boolean, default: false },
-    // 是否是查看模式
-    isView: { type: Boolean, default: false },
-    // 隐藏边界
-    hideBorder: { type: Boolean, default: false },
-    // 隐藏默认组件
-    hideDefault: { type: Boolean, default: false }
-  },
-  data() {
-    return {
-      form: {},
-      curItem: {},
-      menuList: [],
-      scrollObserverEnabled: true,
-      renderLoading: false,
-      activeNames: ''
-    }
-  },
-  emits: ['update:config', 'update:modelValue'],
-  watch: {
-    modelValue: {
-      handler(val, old) {
-        if (this.hasConfig) {
-          this.form = val
-        }
-      },
-      deep: true
-    },
-    config: {
-      handler(val) {
-        this.render(val)
-        this.$emit("update:config", val)
-      },
-      immediate: true,
-      deep: true
-    },
-    custom: {
-      handler(val) {
-        // 初始化菜单列表
-        this.menuList = this.hideDefault ? [] : [...MenuList];
-
-        // 如果有自定义组件
-        if (val.length) {
-
-          // 查找现有的自定义组件菜单
-          const existingCustomMenu = this.menuList.find(item => item.title === this.customTitle);
-
-          if (existingCustomMenu) {
-            // 更新现有的自定义组件列表
-            existingCustomMenu.list = val;
-          } else {
-            // 添加新的自定义组件菜单
-            this.menuList.push({
-              title: this.customTitle,
-              list: val
-            });
-          }
-        }
-
-        // 设置默认激活的菜单
-        if (!this.activeNames) {
-          this.activeNames = this.menuList[0]?.title ?? '';
-        }
-
-      },
-      immediate: true,
-      deep: true
-    },
-  },
-  computed: {
-    hasConfig() {
-      return Object.keys(this.config).length > 0
-    },
-    hasValue() {
-      return Object.keys(this.modelValue).length > 0
-    }
-  },
-  mounted() {
-    if (this.hasConfig) {
-      this.render()
-      this.curItem = this.config;
-    }
-  },
-  methods: {
-    /**
-     * 渲染表单数据。
-     * 遍历配置中的表单项，根据不同组件类型初始化表单数据。
-     * 对于复选框和上传组件，将选项值存储在对象中。
-     * 对于其他组件，直接将值赋给表单数据。
-     * 如果存在当前值，则将其与表单数据进行深度合并。
-     */
-    render(config = this.config) {
-      function parse(formItems, form) {
-        const result = {};
-        formItems.forEach((item) => {
-          if (item.component === 'checkbox' || item.component === 'upload') {
-            item.options?.items?.forEach((option) => {
-              if (!option?.name) { return false }
-              result[option.name] = form?.[option.name] ?? option.value;
-            });
-          }
-          if (!item?.name) { return false }
-          let existingValue = form?.[item.name]; // 检查 form 对象中是否已有值
-
-          if (item.component === 'list') {
-            result[item.name] = item.value?.map((list, listIndex) => {
-              if (!existingValue) {
-                existingValue = []
-              } else {
-                if (form?.[item.name] && form?.[item.name][listIndex]) {
-                  existingValue = form?.[item.name][listIndex] || {}
-                } else {
-                  existingValue = {}
-                }
-
-              }
-              return parse(list, existingValue)
-            }) || [];
-          } else if (item.component === 'object') {
-            result[item.name] = parse(item.value, existingValue || {});
-          } else {
-            if (item.component === 'number') {
-              result[item.name] = existingValue ?? (item.value !== undefined ? Number(item.value) : item.options?.min || 0);
-            } else {
-              result[item.name] = existingValue ?? item.value;
-            }
-          }
-        });
-
-        return result;
-      }
-
-      let form = parse(config.formItems, this.modelValue);
-      // form = {
-      //   ...this.modelValue,
-      //   ...form
-      // }
-      this.form = this.parseNestedObject(form)
-      this.$emit("update:modelValue", this.form);
-    },
-    parseNestedObject(obj) {
-      const result = {};
-      for (const [key, value] of Object.entries(obj)) {
-        const keys = key.split('.');
-        let current = result;
-
-        keys.forEach((k, index) => {
-          if (!current[k]) {
-            current[k] = index === keys.length - 1 ? value : {};
-          }
-          current = current[k];
-        });
-
-        if (keys.length > 1) {
-          delete obj[key]
-        }
-
-      }
-      return result;
-    },
-
-    //数据验证
-    validate(valid, obj) {
-      return this.$refs.form.validate(valid, obj)
-    },
-    clearValidate(valid, obj) {
-      return this.$refs.form.clearValidate()
-    },
-    scrollToField(prop) {
-      return this.$refs.form.scrollToField(prop)
-    },
-    resetFields() {
-      return this.$refs.form.resetFields()
-    },
-    // 拷贝数据
-    cloneItem(item) {
-      let clone = JSON.parse(JSON.stringify(item));
-      if (item.component == 'checkbox' || item.component == 'upload') {
-        clone.options.items[0].name = `${item.component}-${this.$tool.getUUID('', 2)}`
-      } else {
-        clone.name = `${item.component}-${this.$tool.getUUID('', 2)}`
-      }
-      return {
-        ...clone
-      };
-    },
-    // 选中Item
-    selectItem(item) {
-      this.curItem = item
-    },
-    // 返回最外层
-    back() {
-      this.curItem = this.config
-      this.$store.state.curIndex = ''
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.menu-list {
-  :deep(.el-collapse) {
-    border-top: 0;
-  }
-  .menu-list-title {
-    :deep(.el-collapse-item__header) {
-      font-weight: bold;
-      padding-left: 10px;
-      background-color: var(--el-menu-bg-color);
-    }
-  }
-  :deep(.el-collapse-item__content) {
-    padding-bottom: 10px;
-  }
-  .menu-list-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    padding: 10px;
-    .list-group-item {
-      width: calc(50% - 5px);
-      background-color: var(--el-fill-color-light);
-      color: var(--el-button-text-color);
-      padding: 8px 10px;
-      font-size: 12px;
-      text-align: center;
-      cursor: move;
-    }
-  }
-}
-
-.aside-right {
-  border-right: 0;
-  border-left: 1px solid var(--el-border-color-light);
-}
-.form-json-body {
-  max-height: calc(100vh - 137px);
-}
-</style>

package/dist/components/lwFormJson/menuList.js

@@ -1,324 +0,0 @@
-export default [
-	{
-		title: '布局组件',
-		list: [
-			{
-				label: '组合',
-				name: 'object',
-				value: [],
-				component: 'object',
-				span: 24
-			},
-			{
-				label: '列表',
-				name: 'list',
-				value: [[]],
-				component: 'list',
-				span: 24
-			},
-			{
-				label: '标题',
-				span: 24,
-				component: 'divider'
-			}
-		]
-	},
-	{
-		title: '基础组件',
-		list: [
-			{
-				label: '单行输入',
-				name: 'input',
-				value: '',
-				component: 'input',
-				span: 24,
-				options: {
-					placeholder: '请输入'
-				}
-			},
-			{
-				label: '多行输入',
-				name: 'textarea',
-				value: '',
-				component: 'input',
-				span: 24,
-				options: {
-					type: 'textarea',
-					placeholder: '请输入'
-				}
-			},
-			{
-				label: '数值',
-				name: 'number',
-				value: 0,
-        options: {},
-				span: 24,
-				component: 'number'
-			},
-			{
-				label: '颜色',
-				name: 'color',
-				value: '',
-				span: 24,
-				component: 'color'
-			},
-      {
-				label: '标签',
-				name: 'tags',
-				value: [],
-				span: 24,
-        options: {
-          addText: '添加',
-        },
-				component: 'tags'
-			}
-		]
-	},
-	{
-		title: '是否选项',
-		list: [
-			{
-				label: '开关',
-				name: 'switch',
-				span: 24,
-        options: {},
-				value: false,
-				component: 'switch'
-			},
-			{
-				label: '下拉选择',
-				name: 'select',
-				value: '',
-				component: 'select',
-				span: 24,
-				options: {
-					placeholder: '请选择',
-					items: [
-						{
-							label: '选项1',
-							value: '1'
-						}
-					]
-				}
-			}
-		]
-	},
-	{
-		title: '单选多选',
-		list: [
-			{
-				label: '单选',
-				name: 'radio',
-				value: '',
-				component: 'radio',
-				span: 24,
-				options: {
-					items: [
-						{
-							label: '选项1',
-							value: '1'
-						}
-					]
-				}
-			},
-			{
-				label: '多选框',
-				name: 'checkboxGroup',
-				component: 'checkboxGroup',
-				span: 24,
-				value: [],
-				options: {
-					items: [
-						{
-							label: '选项1',
-							value: '1'
-						}
-					]
-				}
-			},
-			{
-				label: '下拉多选',
-				name: 'select',
-				value: '',
-				component: 'select',
-				span: 24,
-				options: {
-					placeholder: '请选择',
-					multiple: true,
-					items: [
-						{
-							label: '选项1',
-							value: '1'
-						}
-					]
-				}
-			},
-			{
-				label: '下拉单选',
-				name: 'select',
-				value: '',
-				component: 'select',
-				span: 24,
-				options: {
-					placeholder: '请选择',
-					items: [
-						{
-							label: '选项1',
-							value: '1'
-						}
-					]
-				}
-			}
-		]
-	},
-	{
-		title: '文件上传',
-		list: [
-			{
-				label: '图片单张',
-				component: 'upload',
-				span: 24,
-        width: 148,
-        height: 148,
-				options: {
-					items: [
-						{
-							label: '请选择',
-							name: 'img1',
-							value: ''
-						}
-					]
-				}
-			},
-			{
-				label: '图片多张',
-				component: 'upload',
-				span: 24,
-        width: 148,
-        height: 148,
-				options: {
-					items: [
-						{
-							label: '请选择',
-							multiple: true,
-							maxSize: 100,
-							limit: 6,
-							name: 'img2',
-              returnFile: 'url',
-							value: []
-						}
-					]
-				}
-			},
-			{
-				label: '视屏单个',
-				component: 'upload',
-				span: 24,
-        width: 148,
-        height: 148,
-				options: {
-					items: [
-						{
-							label: '请选择',
-							accept: 'video/mp4',
-							name: 'videos',
-							value: ''
-						}
-					]
-				}
-			},
-			{
-				label: '视屏多个',
-				component: 'upload',
-				span: 24,
-        width: 148,
-        height: 148,
-				options: {
-					items: [
-						{
-							label: '请选择',
-							accept: 'video/mp4',
-							multiple: true,
-							maxSize: 100,
-							limit: 6,
-							returnFile: 'url',
-							name: 'videos3',
-							value: []
-						}
-					]
-				}
-			}
-		]
-	},
-	{
-		title: '时间日期',
-		list: [
-			{
-				label: '日期范围',
-				name: 'date',
-				value: '',
-				component: 'date',
-				span: 24,
-				options: {
-					type: 'daterange',
-					startPlaceholder: '开始时间',
-					endPlaceholder: '结束时间',
-					valueFormat: 'YYYY-MM-DD HH:mm:ss'
-				}
-			},
-			{
-				label: '日期时间',
-				name: 'date1',
-				value: '',
-				component: 'date',
-				span: 24,
-				options: {
-					type: 'datetime',
-					valueFormat: 'YYYY-MM-DD HH:mm:ss'
-				}
-			},
-			{
-				label: '日期',
-				name: 'date2',
-				value: '',
-				component: 'date',
-				span: 24,
-				options: {
-					type: 'date',
-					valueFormat: 'YYYY-MM-DD'
-				}
-			},
-			{
-				label: '年',
-				name: 'date4',
-				value: '',
-				component: 'date',
-				span: 24,
-				options: {
-					type: 'year'
-				}
-			},
-			{
-				label: '月',
-				name: 'date5',
-				value: '',
-				component: 'date',
-				span: 24,
-				options: {
-					type: 'month'
-				}
-			},
-			{
-				label: '周',
-				name: 'date6',
-				value: '',
-				component: 'date',
-				span: 24,
-				options: {
-					type: 'week',
-					format: '[Week] ww'
-				}
-			}
-		]
-	}
-]