lw-cdp-ui 1.2.48 → 1.2.49

package/dist/components/lwFormMini/index.vue

@@ -1,421 +0,0 @@
-<template>
-  <el-affix v-if="showMenu"
-            :offset="100"
-            style="width: 100%; height: 45px;">
-    <ul class="affix-body">
-      <template v-for="(item, index) in config.formItems"
-                :key="index">
-        <a v-if="item.component === 'divider'"
-           class="anchor-link"
-           :class="{active: affixIndex == index}"
-           @click="clickAffix(index)">
-          {{ item.label }}
-        </a>
-      </template>
-    </ul>
-  </el-affix>
-
-  <el-skeleton v-if="renderLoading || Object.keys(form).length == 0"
-               animated />
-
-  <el-form v-else
-           ref="form"
-           :model="form"
-           :disabled="isView"
-           :label-width="config.labelWidth"
-           :label-position="$i18n.locale == 'en-us' ? 'top' : config.labelPosition"
-           v-loading="loading"
-           :size="config?.size || 'default'"
-           element-loading-text="Loading...">
-    <el-row :gutter="15">
-
-      <template v-for="(item, index) in config.formItems">
-        <el-col :span="item.span || 24"
-                v-if="!hideHandle(item)">
-          <ViewItem v-if="isView"
-                    :item="item"
-                    :form="form"
-                    :index="index">
-            <!-- 没有组件是component值 就是插槽名称 -->
-            <template v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider','tags', 'divider'].includes(item.component)"
-                      v-slot:[item.component]>
-              <slot :name="item.component"
-                    :itemCur="item"
-                    :formCur="form">
-                <el-tag type="danger">[{{ item.component }}]
-                  没有这个默认组件也未自定义插槽内容</el-tag>
-              </slot>
-            </template>
-            <template v-if="item?.options?.component"
-                      v-slot:[item?.options?.component]>
-              <slot :name="item?.options?.component"></slot>
-            </template>
-
-          </ViewItem>
-          <FormItem v-else
-                    :item="item"
-                    :form="form"
-                    :index="index">
-            <!-- 没有组件是component值 就是插槽名称 -->
-            <template v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider','tags', 'divider'].includes(item.component)"
-                      v-slot:[item.component]>
-              <slot :name="item.component"
-                    :itemCur="item"
-                    :formCur="form">
-                <el-tag type="danger">[{{ item.component }}]
-                  没有这个默认组件也未自定义插槽内容</el-tag>
-              </slot>
-            </template>
-            <template v-if="item?.options?.component"
-                      v-slot:[item?.options?.component]>
-              <slot :name="item?.options?.component"></slot>
-            </template>
-          </FormItem>
-        </el-col>
-      </template>
-      <el-col v-if="!isView"
-              :span="24">
-        <el-form-item>
-          <slot>
-            <el-button type="primary"
-                       @click="submit">提交</el-button>
-          </slot>
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
-</template>
-
-<script>
-import FormItem from './FormItem'
-import ViewItem from './ViewItem'
-export default {
-  components: {
-    FormItem,
-    ViewItem
-  },
-  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: () => { } },
-    // 是否显示加载中
-    loading: { type: Boolean, default: false },
-    // 是否是查看模式
-    isView: { type: Boolean, default: false },
-    // 显示导航
-    showMenu: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      form: {},
-      affixIndex: 0,
-      isChange: true,
-      scrollObserverEnabled: true,
-      renderLoading: false
-    }
-  },
-  watch: {
-    modelValue: {
-      handler(val, old) {
-        if (this.hasConfig && this.isChange) {
-          this.form = val
-        }
-      },
-      deep: true
-    },
-    config: {
-      handler(val) {
-        this.render(val)
-        if (this.showMenu) {
-          this.$nextTick(() => {
-            this.handleScroll()
-          })
-        }
-        this.$emit("update:config", val)
-      },
-      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()
-    }
-  },
-  beforeDestroy() {
-  },
-  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 {
-                existingValue = form?.[item.name][listIndex] || {}
-              }
-              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];
-        });
-
-        delete obj[key]
-
-      }
-      return result;
-    },
-
-    //处理动态隐藏
-    hideHandle(item) {
-      if (typeof item?.hideHandle === 'string') {
-        try {
-          // 构造一个函数并执行，同时捕获潜在的异常
-          const func = new Function('form', `return ${item?.hideHandle.replace(/\$/g, "form")}`);
-          return func(this.form);
-        } catch (error) {
-          return false; // 或根据需求返回默认值
-        }
-      } else if (typeof item?.hideHandle === 'boolean') {
-        return item.hideHandle
-      }
-      return false
-    },
-
-    //数据验证
-    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()
-    },
-    //提交
-    submit() {
-      this.$emit("submit", this.form)
-    },
-    clickAffix(index) {
-      this.affixIndex = index
-      const targetElement = document.getElementById('divider-' + index)
-      if (targetElement) {
-        targetElement.scrollIntoView({
-          behavior: 'smooth', // 实现平滑滚动
-          block: 'start' // 保证滚动时目标元素的顶部对齐窗口顶部
-        })
-      }
-
-      this.scrollObserverEnabled = false;
-      setTimeout(() => {
-        this.scrollObserverEnabled = true;
-      }, 500);
-    },
-    // 监听滚动
-    handleScroll() {
-      // 获取所有 title-name-divider 元素
-      const titleNameDividers = document.querySelectorAll('.title-name-divider');
-      const elMain = document.querySelector('.el-main');
-      let _this = this
-      // 创建观察者实例
-      const observer = new IntersectionObserver((entries) => {
-        let entry = entries[0]
-        const rect = entry.target.getBoundingClientRect();
-        const distanceFromTop = rect.top;
-        if (distanceFromTop >= 0 && distanceFromTop <= 100 && _this.scrollObserverEnabled) {
-          const dataIndex = entry.target.getAttribute('data-index');
-          _this.affixIndex = dataIndex;  // 更新 affixIndex
-        }
-      }, {
-        root: elMain, // 设置根元素为 el-main
-        rootMargin: '0px 0px 70% 0px'  // 可根据需要调整
-      });
-
-      // 开始观察每个 title-name-divider 元素
-      titleNameDividers.forEach(divider => {
-        observer.observe(divider);
-      });
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-:deep(.el-col) {
-  &:first-child {
-    .title-name {
-      border: 0;
-      padding-top: 25px;
-      margin-top: 0;
-    }
-  }
-}
-
-.form-mini {
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-}
-.form-affix {
-  min-width: 130px;
-  padding-left: 20px;
-}
-.button-new-tag {
-  margin-left: 10px;
-}
-
-.w-20 {
-  width: 100px;
-  margin-left: 10px;
-}
-
-.title-name {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  margin-top: 25px;
-  border-top: 10px solid #f5f7fa;
-  padding-top: 20px;
-}
-
-:deep(.form-item-name-null) {
-  > .el-form-item__label {
-    display: none !important;
-  }
-}
-.affix-body {
-  background-color: var(--el-fill-color-light);
-  border: 1px solid var(--el-border-color-light);
-  margin: 0;
-  position: relative;
-  &::after {
-    content: "";
-    position: absolute;
-    left: -2px;
-    right: 0;
-    height: 16px;
-    background-color: #ffffff;
-    top: -17px;
-  }
-  .anchor-link {
-    padding: 0 20px;
-    height: var(--el-tabs-header-height);
-    box-sizing: border-box;
-    list-style: none;
-    font-size: var(--el-font-size-base);
-    font-weight: bold;
-    color: var(--el-text-color-secondary);
-    position: relative;
-    height: 40px;
-    display: inline-block;
-    line-height: 40px;
-    cursor: pointer;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-  }
-  .active {
-    color: var(--el-color-primary);
-    background-color: var(--el-bg-color-overlay);
-    border-bottom: 1px solid var(--el-bg-color-overlay);
-    border-right-color: var(--el-border-color);
-    border-left: 1px solid var(--el-border-color-light);
-    border-right: 1px solid var(--el-border-color-light);
-    &:first-child {
-      border-left: 1px solid var(--el-fill-color-light);
-    }
-  }
-}
-</style>

package/dist/components/lwFormMini/textToPassword.vue

@@ -1,61 +0,0 @@
-<template>
-  <span class="item-text"
-        :style="{width: textWidth}">
-    <!-- 根据加密状态显示加密或解密后的文本 -->
-    <span>{{ isEncrypted ? encryptedText : (modelValue || '--') }}</span>
-    <!-- 切换加密/解密按钮 -->
-    <el-icon v-if="password"
-             class="primary"
-             @click="toggleEncryption"><el-icon-view /></el-icon>
-  </span>
-</template>
-
-<script>
-export default {
-  props: {
-    modelValue: { type: String, default: '' }, // 传入的字符串
-    width: { type: String, default: '' },
-    password: { type: Boolean, default: false }, // 是否需要加密显示
-  },
-  data() {
-    return {
-      isEncrypted: this.password, // 根据传入的 password 值初始化加密状态
-    };
-  },
-  computed: {
-    encryptedText() {
-      // 将输入字符串加密成 *，长度与原字符串相同
-      return "*".repeat(this.modelValue.length);
-    },
-    textWidth() {
-      return this?.width ? `calc(100% - ${this.width} - 10px)` : "";
-    }
-  },
-  methods: {
-    toggleEncryption() {
-      // 切换加密和解密状态
-      this.isEncrypted = !this.isEncrypted;
-      // 如果是解密状态，可以更新父组件的值
-      if (!this.isEncrypted) {
-        this.$emit('update:modelValue', this.modelValue);
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.item-text {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-  span {
-    word-wrap: break-word;
-    word-break: break-all;
-    white-space: normal;
-  }
-  .primary{
-    cursor: pointer;
-    color: var(--el-color-primary);
-  }
-}
-</style>