lw-cdp-ui 1.2.23 → 1.2.25

package/dist/components/lwFormMini/FormItem.vue

@@ -4,15 +4,18 @@
        class="title-name title-name-divider"
        :id="'divider-' + index"
        :data-index="index">
-    {{ item.label }}
-    <el-tooltip v-if="item.tips">
-      <template #content>
-        <span style="max-width: 300px; display: inline-block;">
-          {{ item.tips }}
-        </span>
-      </template>
-      <el-icon><el-icon-question-filled /></el-icon>
-    </el-tooltip>
+    <span>
+      {{ item.label }}
+      <el-tooltip v-if="item.tips">
+        <template #content>
+          <span style="max-width: 300px; display: inline-block;">
+            {{ item.tips }}
+          </span>
+        </template>
+        <el-icon><el-icon-question-filled /></el-icon>
+      </el-tooltip>
+    </span>
+    <slot :name="item?.options?.component"></slot>
   </div>
 
   <!-- 表单内容 -->
@@ -376,6 +379,15 @@ export default {
   }
 }
 
+.title-name {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 25px;
+  border-top: 10px solid #f5f7fa;
+  padding-top: 20px;
+}
+
 .form-mini {
   display: flex;
   width: 100%;
@@ -390,15 +402,6 @@ export default {
   width: 100px;
 }
 
-.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;

package/dist/components/lwFormMini/ViewItem.vue

@@ -0,0 +1,386 @@
+<template>
+  <!-- 间隔标题 -->
+  <div v-if="item.component == 'divider'"
+       class="title-name title-name-divider"
+       :id="'divider-' + index"
+       :data-index="index">
+    <span>
+      {{ item.label }}
+      <el-tooltip v-if="item.tips">
+        <template #content>
+          <span style="max-width: 300px; display: inline-block;">
+            {{ item.tips }}
+          </span>
+        </template>
+        <el-icon><el-icon-question-filled /></el-icon>
+      </el-tooltip>
+    </span>
+    <slot :name="item?.options?.component"></slot>
+
+  </div>
+
+  <!-- 表单内容 -->
+  <el-form-item v-else
+                :class="{ 'form-item-name-null': !item?.label }"
+                :prop="getPropName(item)"
+                :rules="rulesHandle(item)">
+    <template #label>
+      {{ item.label }}
+      <el-tooltip v-if="item.tips"
+                  :raw-content="item?.rawContent"
+                  :content="item.tips">
+        <el-icon><el-icon-question-filled /></el-icon>
+      </el-tooltip>
+    </template>
+
+    <!-- input -->
+    <template v-if="item.component == 'input'">
+      <template
+                v-if="item?.options?.prepend">{{ item?.options.prepend }}</template>
+      <textToPassword v-model="objItem.value"
+                      :password="item?.options?.password" />
+      <template
+                v-if="item?.options?.append">{{ item?.options.append }}</template>
+
+    </template>
+    <!-- upload -->
+    <template v-else-if="item.component == 'upload'">
+      <template v-for="(_item, _index) in objItem?.options.items"
+                :key="_index">
+        <lw-upload v-model="_item.value"
+                   :height="item.height"
+                   :width="item.width"
+                   :maxSize="_item.maxSize"
+                   :accept="_item.accept"
+                   :title="_item.label"
+                   :parseData="item.parseData"
+                   :disabled="true"
+                   :multiple="_item?.multiple"
+                   :limit="_item?.limit"
+                   :returnFile="_item?.returnFile"
+                   :tip="_item?.tip"
+                   :apiObj="item.apiObj"></lw-upload>
+
+      </template>
+    </template>
+    <!-- checkbox -->
+    <template v-else-if="item.component == 'checkbox'">
+      <template v-for="(_item, _index) in objItem?.options.items"
+                :key="_index">{{ getKeyToLabel(_item.value, objItem?.options.items) }}</template>
+    </template>
+    <!-- checkboxGroup 、select、radio -->
+    <template
+              v-else-if="item.component == 'checkboxGroup' || item.component == 'select' || item.component == 'radio'">
+      {{ getKeyToLabel(objItem.value, item?.options.items) }}
+    </template>
+
+    <!-- switch -->
+    <template v-else-if="item.component == 'switch'">
+      {{ objItem.value ? item?.options?.true || '是' : item?.options?.false || '否' }}
+    </template>
+    <!-- treeSelect -->
+    <template v-else-if="item.component == 'treeSelect'">
+      <el-tree-select v-model="objItem.value"
+                      :props="item?.options?.props"
+                      disabled
+                      :node-Key="item?.options?.nodeKey"
+                      :multiple="item?.options?.multiple"
+                      :check-Strictly="item?.options?.checkStrictly"
+                      :data="item?.options?.items"></el-tree-select>
+
+    </template>
+    <!-- cascader -->
+    <template v-else-if="item.component == 'cascader'">
+      <el-cascader v-model="objItem.value"
+                   style="width: 100%;"
+                   :props="item?.options?.props"
+                   :separator="item?.options?.separator"
+                   disabled
+                   :options="item?.options.items"
+                   clearable></el-cascader>
+    </template>
+    <!-- date -->
+    <template v-else-if="item.component == 'date'">
+      {{ dayjs(objItem.value).format(item?.options?.valueFormat || 'YYYY-MM-DD HH:mm:ss') }}
+    </template>
+    <!-- number -->
+    <template v-else-if="item.component == 'number'">
+      {{ objItem.value }}
+      <template v-if="item?.options?.suffix">
+        <span>{{ item?.options.suffix }}</span>
+      </template>
+    </template>
+    <!-- color -->
+    <template v-else-if="item.component == 'color'">
+      <el-color-picker v-model="objItem.value"
+                       disabled />
+    </template>
+    <!-- rate -->
+    <template v-else-if="item.component == 'rate'">
+      <el-rate style="margin-top: 6px;"
+               v-model="objItem.value"
+               disabled></el-rate>
+    </template>
+    <!-- slider -->
+    <template v-else-if="item.component == 'slider'">
+      <el-slider v-model="objItem.value"
+                 :marks="item?.options.marks"
+                 disabled></el-slider>
+    </template>
+
+    <!-- tags -->
+    <template v-else-if="item.component == 'tags'">
+      <div class="tags-list">
+        <el-tag v-for="tag in objItem.value"
+                :key="tag">
+          {{ tag }}
+        </el-tag>
+      </div>
+    </template>
+
+    <!-- 没有组件是component值 就是插槽名称 -->
+    <template v-else>
+      <slot :name="item.component"
+            :itemCur="item"
+            :formCur="form">
+        <el-tag type="danger">[{{ item.component }}]
+          没有这个默认组件也未自定义插槽内容</el-tag>
+      </slot>
+    </template>
+    <div v-if="item.message"
+         class="el-form-item-msg">{{ item.message }}</div>
+  </el-form-item>
+</template>
+
+<script>
+import lwUpload from '../lwUpload'
+import dayjs from 'dayjs'
+import textToPassword from './textToPassword'
+export default {
+  name: 'ViewItem',
+  data() {
+    return {
+      tagVisible: {},
+      dataForm: {},
+      objItem: {},
+      tagValue: ''
+    }
+  },
+  components: {
+    lwUpload,
+    textToPassword
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => { }
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    form: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  watch: {
+    item: {
+      handler(val) {
+        this.objItem = val
+      },
+      immediate: true,
+      deep: true
+    },
+    form: {
+      handler(val) {
+        if (this.item.component === 'checkbox' || this.item.component === 'upload') {
+          this.objItem.options?.items?.forEach((option) => {
+            option.value = this.flattenObject(this.form, option.name, option.value)
+          });
+        } else {
+          this.objItem.value = this.flattenObject(this.form, this.item.name, this.objItem.value)
+        }
+
+      },
+      immediate: true,
+      deep: true
+    },
+    objItem: {
+      handler(val) {
+        if (val.component === 'checkbox' || val.component === 'upload') {
+          val.options?.items?.forEach((option) => {
+            this.unflattenObject(this.form, option.name, option.value)
+          });
+        } else {
+          this.unflattenObject(this.form, val.name, val.value)
+        }
+      },
+      deep: true
+    },
+  },
+  methods: {
+    flattenObject(obj, key, defaultValue = '') {
+      if (!key || !obj) { return false }
+      const keys = key.split('.');  // 将路径拆分成数组
+
+      let current = obj;
+      // 遍历路径并逐层查找
+      for (let i = 0; i < keys.length; i++) {
+        // 如果当前层级不存在，则创建该层级对象
+        if (current[keys[i]] === undefined) {
+          current[keys[i]] = (i === keys.length - 1) ? defaultValue : {};  // 如果是最后一个层级，设为默认值，否则创建空对象
+        }
+        // 否则，继续向下查找
+        current = current[keys[i]];
+      }
+      return current;
+    },
+    unflattenObject(obj, path, value) {
+      if (!path || !obj) { return false }
+      const keys = path.split('.'); // 按点分隔路径
+
+      keys.forEach((key, index) => {
+        if (index === keys.length - 1) {
+          // 最后一级，直接赋值
+          obj[key] = value;
+        } else {
+          // 如果不存在该层级，创建空对象
+          if (!obj[key] || typeof obj[key] !== 'object') {
+            obj[key] = {};
+          }
+          obj = obj[key]; // 进入下一层
+        }
+      });
+
+    },
+    // prop NAME
+    getPropName(item) {
+      if (item.component == 'checkbox' || item.component == 'upload') {
+        return item?.options.items[0].name
+      } else {
+        return item.name
+      }
+    },
+    // 处理动态必填
+    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>
+:deep(.el-col) {
+  &:first-child {
+    .title-name {
+      border: 0;
+      padding-top: 25px;
+      margin-top: 0;
+    }
+  }
+}
+
+.title-name {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 25px;
+  border-top: 10px solid #f5f7fa;
+  padding-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-mini {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+}
+.form-affix {
+  min-width: 130px;
+  padding-left: 20px;
+}
+
+.w-20 {
+  width: 100px;
+}
+
+: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);
+    }
+  }
+}
+
+:deep(.el-tag) {
+  & + .button-new-tag {
+    margin-left: 10px;
+  }
+  & + .w-20 {
+    margin-left: 10px;
+  }
+}
+</style>

package/dist/components/lwFormMini/index.vue

@@ -24,18 +24,18 @@
            :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="15">
 
       <template v-for="(item, index) in config.formItems">
         <el-col :span="item.span || 24"
                 v-if="!hideHandle(item)">
-          <FormItem :item="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'].includes(item.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"
@@ -44,10 +44,35 @@
                   没有这个默认组件也未自定义插槽内容</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 :span="24">
+      <el-col v-if="!isView"
+              :span="24">
         <el-form-item>
           <slot>
             <el-button type="primary"
@@ -61,9 +86,11 @@
 
 <script>
 import FormItem from './FormItem'
+import ViewItem from './ViewItem'
 export default {
   components: {
-    FormItem
+    FormItem,
+    ViewItem
   },
   props: {
     modelValue: { type: Object, default: () => { } },
@@ -223,6 +250,7 @@ export default {
         });
 
         delete obj[key]
+
       }
       return result;
     },
@@ -230,8 +258,13 @@ export default {
     //处理动态隐藏
     hideHandle(item) {
       if (typeof item?.hideHandle === 'string') {
-        const func = new Function('form', `return ${item?.hideHandle.replace(/\$/g, "form")}`);
-        return func(this.form);
+        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
       }

package/dist/components/lwFormMini/textToPassword.vue

@@ -0,0 +1,61 @@
+<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>

package/dist/components/lwLogin/index.vue

@@ -324,13 +324,16 @@ export default {
         username: this.ruleForm.user,
         password: this.ruleForm.password,
       };
-
+      console.log(data)
       if (this.isEncryption) {
         const publicKey = await this.$api.auth.key()
-        data = {
-          username: this.encrypt(publicKey, this.ruleForm.user),
-          password: this.encrypt(publicKey, this.ruleForm.password),
-        };
+        console.log(publicKey)
+        if (publicKey) {
+          data = {
+            username: this.encrypt(publicKey, this.ruleForm.user),
+            password: this.encrypt(publicKey, this.ruleForm.password),
+          };
+        }
       }
 
       //获取token