lw-cdp-ui 1.2.48 → 1.2.49

package/dist/components/lwFormView/index.vue

@@ -1,390 +0,0 @@
-<template>
-  <el-skeleton v-if="renderLoading || Object.keys(form).length == 0"
-               animated />
-  <el-row :gutter="0"
-          v-else>
-    <template v-for="(item, index) in config.formItems">
-      <template v-if="!hideHandle(item)">
-        <template v-if="item.component == 'divider'">
-          <el-col :span="item.span || 24"
-                  :class="{ topPadding: index !== 0 }">
-            <div class="top-title-body">
-              <span class="lw-form-view-title-name">{{ item.label }}</span>
-              <slot :name="item?.options?.component"></slot>
-            </div>
-          </el-col>
-        </template>
-        <el-col v-else
-                :span="item.span">
-          <div class="span-item"
-               :class="[config.labelPosition]">
-            <span v-if="item.label"
-                  :style="{ minWidth: config.labelWidth }"
-                  class="title-item">
-              {{ item.label }}
-              <el-tooltip v-if="item.tips"
-                          :content="item.tips">
-                <el-icon><el-icon-question-filled /></el-icon>
-              </el-tooltip>:
-            </span>
-            <!-- input -->
-            <template
-                      v-if="item.component == 'input' || item.component == 'number'">
-              <template v-if="item?.options?.name">
-                <textToPassword v-model="form[item.name][item?.options.name]"
-                                :width="config.labelWidth"
-                                :password="item?.options?.password" />
-              </template>
-              <template v-else>
-                <textToPassword v-model="form[item.name]"
-                                :password="item?.options?.password" />
-              </template>
-            </template>
-            <!-- upload -->
-            <template v-else-if="item.component == 'upload'">
-              <el-col v-for="(_item, _index) in item?.options.items"
-                      :key="_index">
-                <template v-if="item.name">
-                  <el-image style="width: 100px; height: 100px"
-                            :src="form[item.name][_item.name]"
-                            :fit="contain" />
-                </template>
-                <template v-else>
-                  <el-image style="width: 100px; height: 100px"
-                            :src="form[_item.name]"
-                            :fit="contain" />
-                </template>
-
-              </el-col>
-            </template>
-            <!-- checkbox -->
-            <template v-else-if="item.component == 'checkbox'">
-              <template v-if="item.name">
-                {{ form[item.name][_item.name] }}
-              </template>
-              <template v-else>
-                {{ form[_item.name] }}
-              </template>
-            </template>
-            <!-- checkboxGroup -->
-            <template v-else-if="item.component == 'checkboxGroup'">
-              {{ form[item.name] }}
-            </template>
-            <!-- switch -->
-            <template v-else-if="item.component == 'switch'">
-              <template v-if="item?.options?.name">
-                {{ form[item.name][item?.options.name] ? item?.options.true || '是' : item?.options.false || '否' }}
-              </template>
-              <template v-else>
-                {{ form[item.name] ? item?.options.true || '是' : item?.options.false || '否' }}
-              </template>
-            </template>
-            <!-- select -->
-            <template
-                      v-else-if="item.component == 'select' || item.component == 'radio'">
-              <template v-if="item?.options?.name">
-                {{ getKeyToLabel(form[item.name][item?.options.name], item?.options.items) }}
-              </template>
-              <template v-else>
-                {{ getKeyToLabel(form[item.name], item?.options.items) }}
-              </template>
-            </template>
-            <!-- cascader -->
-            <template v-else-if="item.component == 'cascader'">
-              <template v-if="item?.options?.name">
-                <el-cascader v-model="form[item.name][item?.options.name]"
-                             :options="item?.options.items"
-                             clearable></el-cascader>
-              </template>
-              <template v-else>
-                <el-cascader v-model="form[item.name]"
-                             :options="item?.options.items"
-                             clearable></el-cascader>
-              </template>
-            </template>
-            <!-- date -->
-            <template v-else-if="item.component == 'date'">
-              <template v-if="item?.options?.name">
-                {{ dayjs(form[item.name][item?.options.name]).format(item?.options.valueFormat || 'YYYY-MM-DD HH:mm:ss')
-                }}
-
-              </template>
-              <template v-else>
-                {{ dayjs(form[item.name]).format(item?.options.valueFormat || 'YYYY-MM-DD HH:mm:ss') }}
-              </template>
-
-            </template>
-            <!-- color -->
-            <template v-else-if="item.component == 'color'">
-              <template v-if="item?.options?.name">
-                <el-color-picker disabled
-                                 v-model="form[item.name][item?.options.name]" />
-              </template>
-              <template v-else>
-                <el-color-picker disabled
-                                 v-model="form[item.name]" />
-              </template>
-
-            </template>
-            <!-- rate -->
-            <template v-else-if="item.component == 'rate'">
-              <template v-if="item?.options?.name">
-                <el-rate disabled
-                         v-model="form[item.name][item?.options.name]"></el-rate>
-              </template>
-              <template v-else>
-                <el-rate disabled
-                         v-model="form[item.name]"></el-rate>
-              </template>
-            </template>
-            <!-- slider -->
-            <template v-else-if="item.component == 'slider'">
-              <template v-if="item?.options?.name">
-                <el-slider disabled
-                           v-model="form[item.name][item?.options.name]"
-                           :marks="item?.options.marks"></el-slider>
-              </template>
-              <template v-else>
-                <el-slider disabled
-                           v-model="form[item.name]"
-                           :marks="item?.options.marks"></el-slider>
-              </template>
-
-            </template>
-
-            <!-- tags -->
-            <template v-else-if="item.component == 'tags'">
-              <div class="tags-list">
-                <template v-if="item?.options?.name">
-                  <el-tag v-for="tag in form[item.name][item?.options?.name]"
-                          :key="tag">
-                    {{ tag }}
-                  </el-tag>
-
-                </template>
-                <template v-else>
-                  <el-tag v-for="tag in form[item.name]"
-                          :key="tag">
-                    {{ tag }}
-                  </el-tag>
-                </template>
-
-              </div>
-            </template>
-
-            <!-- 没有组件是component值 就是插槽名称 -->
-            <template v-else>
-              <slot :name="item.component">
-                <el-tag type="danger">
-                  [{{ item.component }}]
-                  没有这个默认组件也未自定义插槽内容</el-tag>
-              </slot>
-            </template>
-            <div v-if="item.message"
-                 class="el-form-item-msg">{{ item.message }}</div>
-          </div>
-        </el-col>
-      </template>
-    </template>
-
-  </el-row>
-</template>
-
-<script>
-import lwUpload from '../lwUpload'
-import textToPassword from './textToPassword'
-import dayjs from 'dayjs'
-export default {
-  components: {
-    lwUpload,
-    textToPassword
-  },
-  props: {
-    modelValue: { type: Object, default: () => { } },
-    config: { type: Object, default: () => { } },
-    loading: { type: Boolean, default: false },
-    isView: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      form: {},
-      tagValue: '',
-      tagVisible: false,
-      renderLoading: false
-    }
-  },
-  watch: {
-    modelValue() {
-      if (this.hasConfig) {
-        this.deepMerge(this.form, JSON.parse(JSON.stringify(this.modelValue)))
-      }
-    },
-    config() {
-      this.render()
-    },
-    form: {
-      handler(val) {
-        this.$emit("update:modelValue", val)
-      },
-      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()
-    }
-  },
-  methods: {
-    //构建form对象
-    render() {
-      this.form = {}
-      this.config.formItems.forEach((item) => {
-        if (item.component == 'checkbox' || item.component == 'upload') {
-          if (item.name) {
-            const value = {}
-            item?.options.items.forEach((option) => {
-              value[option.name] = option.value
-            })
-            this.form[item.name] = value
-          } else if (item?.options?.items) {
-            item?.options.items.forEach((option) => {
-              this.form[option.name] = option.value
-            })
-          }
-        } else {
-          if (item?.options?.name) {
-            if (!this.form[item.name]) {
-              this.form[item.name] = {}
-            }
-            this.form[item.name][item?.options?.name] = item.value
-          } else if (item.name) {
-            this.form[item.name] = item.value
-          }
-
-        }
-      })
-
-      if (this.hasValue) {
-        this.form = this.deepMerge(this.form, this.modelValue)
-      }
-    },
-    //合并深结构对象
-    deepMerge(obj1, obj2) {
-      for (let key in obj2) {
-        if (obj2.hasOwnProperty(key)) {
-          // 确保 obj1[key] 和 obj2[key] 不是 null 或 undefined
-          const isObj1Valid = obj1[key] !== null && obj1[key] !== undefined;
-          const isObj2Valid = obj2[key] !== null && obj2[key] !== undefined;
-
-          if (
-            isObj1Valid &&
-            typeof obj1[key] === "object" &&
-            !Array.isArray(obj1[key]) &&
-            isObj2Valid &&
-            typeof obj2[key] === "object" &&
-            !Array.isArray(obj2[key])
-          ) {
-            obj1[key] = this.deepMerge(obj1[key], obj2[key]);
-          } else {
-
-            if (isObj2Valid) {
-              obj1[key] = obj2[key];
-            } else if (!isObj2Valid) {
-              delete obj1[key];
-            }
-          }
-        }
-      }
-      return obj1;
-    },
-    //处理动态隐藏
-    hideHandle(item) {
-      if (typeof item.hideHandle === 'string') {
-        const func = new Function('form', `return ${item?.hideHandle.replace(/\$/g, "form")}`);
-        return func(this.form);
-      } else if (typeof item.hideHandle === 'boolean') {
-        return item.hideHandle
-      }
-      return false
-    },
-    // 处理动态必填
-    rulesHandle(item) {
-      if (item.requiredHandle) {
-        try {
-          const requiredHandleFunc = new Function("form", `return ${item.requiredHandle.replace(/\$/g, "form")}`);
-          const exp = requiredHandleFunc(this.form);
-
-          const requiredRule = item.rules.find(t => 'required' in t);
-          if (requiredRule) {
-            requiredRule.required = exp;
-          }
-        } catch (error) {
-          console.error("Error requiredHandle function:", error);
-        }
-      }
-      return item.rules;
-    },
-    // key to label
-    getKeyToLabel(val, items = []) {
-      let item = items.find(item => { return item.value == val })
-      return item?.label || '--'
-    },
-    dayjs: dayjs
-  }
-}
-</script>
-<style lang="scss" scoped>
-.topPadding {
-  border-top: 2px solid #f7f8fa;
-  margin-top: 30px;
-  padding-top: 30px;
-}
-
-.top-title-body {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 30px;
-  margin-bottom: 5px;
-  .lw-form-view-title-name {
-    font-size: 18px;
-    font-weight: bold;
-  }
-}
-
-.span-item {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin-bottom: 10px;
-  line-height: 24px;
-  font-size: 14px;
-  width: 100%;
-
-  &.top {
-    flex-direction: column;
-  }
-
-  &.right {
-    .title-item {
-      text-align: right;
-    }
-  }
-
-  .title-item {
-    color: #7c7c7c;
-    display: inline-block;
-  }
-}
-</style>

package/dist/components/lwFormView/textToPassword.vue

@@ -1,59 +0,0 @@
-<template>
-  <span class="item-text"
-        :style="{width: textWidth}">
-    <!-- 根据加密状态显示加密或解密后的文本 -->
-    <span>{{ isEncrypted ? encryptedText : modelValue }}</span>
-    <!-- 切换加密/解密按钮 -->
-    <el-button v-if="password"
-               link
-               type="primary"
-               icon="el-icon-view"
-               @click="toggleEncryption"></el-button>
-  </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;
-  }
-}
-</style>