lw-cdp-ui 1.0.58 → 1.0.60

package/dist/components/lwForm/index.vue

@@ -17,7 +17,13 @@
                 v-if="!hideHandle(item)">
           <!-- 间隔标题 -->
           <div v-if="item.component == 'divider'"
-               class="title-name">{{ item.label }}</div>
+               class="title-name">
+            {{ item.label }}
+            <el-tooltip v-if="item.tips"
+                        :content="item.tips">
+              <el-icon><el-icon-question-filled /></el-icon>
+            </el-tooltip>
+          </div>
           <!-- 表单内容 -->
           <el-form-item v-else
                         :prop="item?.options?.name ? `${item.name}.${item.options.name}` : item.name"
@@ -194,22 +200,32 @@
                                  v-bind="{
                                   min: item?.options?.min !== undefined ? item.options.min : null,
                                   max: item?.options?.max !== undefined ? item.options.max : null,
-                                  step: item?.options?.step !== undefined ? item.options.step : null,
+                                  step: item?.options?.step !== undefined ? item.options.step : 1,
                                   precision: item?.options?.precision !== undefined ? item.options.precision : null,
                                   placeholder: item?.options?.placeholder || ''
                                 }"
-                                 controls-position="right"></el-input-number>
+                                 controls-position="right">
+                  <template v-if="item?.options?.suffix"
+                            #suffix>
+                    <span>{{item.options.suffix}}</span>
+                  </template>
+                </el-input-number>
               </template>
               <template v-else>
                 <el-input-number v-model="form[item.name]"
                                  v-bind="{
                                   min: item?.options?.min !== undefined ? item.options.min : null,
                                   max: item?.options?.max !== undefined ? item.options.max : null,
-                                  step: item?.options?.step !== undefined ? item.options.step : null,
+                                  step: item?.options?.step !== undefined ? item.options.step : 1,
                                   precision: item?.options?.precision !== undefined ? item.options.precision : null,
                                   placeholder: item?.options?.placeholder || ''
                                 }"
-                                 controls-position="right"></el-input-number>
+                                 controls-position="right">
+                  <template v-if="item?.options?.suffix"
+                            #suffix>
+                    <span>{{item.options.suffix}}</span>
+                  </template>
+                </el-input-number>
               </template>
 
             </template>
@@ -348,7 +364,7 @@ export default {
     }
   },
   watch: {
-    modelValue() {
+    modelValue(val, old) {
       if (this.hasConfig) {
         this.deepMerge(this.form, JSON.parse(JSON.stringify(this.modelValue)))
       }

package/dist/components/lwFormView/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <el-skeleton v-if="renderLoading || Object.keys(form).length==0"
+               animated />
+  <el-descriptions v-else
+                   :column="config.column || 3"
+                   :size="config.size">
+    <template v-for="(item, index) in config.formItems">
+      <template v-if="!hideHandle(item)">
+        <template v-if="item.component == 'divider'">
+          <el-descriptions-item :span="item.span || 24">
+            <template #label>
+              <span class="title-name">{{ item.label }}</span>
+            </template>
+          </el-descriptions-item>
+        </template>
+        <el-descriptions-item v-else
+                              :span="item.span/(24/(config.column || 3))">
+          <template #label>
+            <span v-if="item.label"
+                  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>
+          </template>
+          <!-- 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]"
+                              :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>
+        </el-descriptions-item>
+      </template>
+    </template>
+
+  </el-descriptions>
+</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') {
+        // eslint-disable-next-line no-eval
+        const exp = eval(item.hideHandle.replace(/\$/g, "this.form"))
+        return exp
+      } else if (typeof item.hideHandle === 'boolean') {
+        return item.hideHandle
+      }
+      return false
+    },
+    //处理动态必填
+    rulesHandle(item) {
+      if (item.requiredHandle) {
+        // eslint-disable-next-line no-eval
+        const exp = eval(item.requiredHandle.replace(/\$/g, "this.form"))
+        var requiredRule = item.rules.find(t => 'required' in t)
+        requiredRule.required = exp
+      }
+      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>
+.button-new-tag {
+  margin-left: 10px;
+}
+.w-20 {
+  width: 100px;
+  margin-left: 10px;
+}
+.title-name {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.title-item {
+  color: #7c7c7c;
+}
+
+</style>

package/dist/components/lwFormView/textToPassword.vue

@@ -0,0 +1,49 @@
+<template>
+  <span class="item-text">
+    <!-- 根据加密状态显示加密或解密后的文本 -->
+    <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: '' }, // 传入的字符串
+    password: { type: Boolean, default: false }, // 是否需要加密显示
+  },
+  data() {
+    return {
+      isEncrypted: this.password, // 根据传入的 password 值初始化加密状态
+    };
+  },
+  computed: {
+    encryptedText() {
+      // 将输入字符串加密成 *，长度与原字符串相同
+      return "*".repeat(this.modelValue.length);
+    },
+  },
+  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;
+}
+</style>