lw-cdp-ui 1.1.29 → 1.1.31

package/dist/components/lwForm/index.vue

@@ -26,7 +26,7 @@
           </div>
           <!-- 表单内容 -->
           <el-form-item v-else
-                        :prop="item?.options?.name ? `${item.name}.${item.options.name}` : item.name"
+                        :prop="getPropName(item)"
                         :rules="rulesHandle(item)">
             <template #label>
               {{ item.label }}
@@ -78,7 +78,10 @@
                                :accept="_item.accept"
                                :title="_item.label"
                                :parseData="item.parseData"
-                               :disabled="item.options.disabled"
+                               :disabled="item.options?.disabled"
+                               :multiple="_item?.multiple"
+                               :limit="_item?.limit"
+                               :tip="_item?.tip"
                                :apiObj="item.apiObj"></lw-upload>
                   </div>
                 </template>
@@ -89,7 +92,10 @@
                                :accept="_item.accept"
                                :title="_item.label"
                                :parseData="item.parseData"
-                               :disabled="item.options.disabled"
+                               :disabled="item.options?.disabled"
+                               :multiple="_item?.multiple"
+                               :limit="_item?.limit"
+                               :tip="_item?.tip"
                                :apiObj="item.apiObj"></lw-upload>
                   </div>
                 </template>
@@ -580,6 +586,19 @@ export default {
       }
       this.tagVisible = false
       this.tagValue = ''
+    },
+    // prop NAME
+    getPropName(item) {
+      if (item.component == 'checkbox' || item.component == 'upload') {
+        if (item.name) {
+          return `${item.name}.${item.options.items[0].name}`
+        } else {
+          return item.options.items[0].name
+        }
+
+      } else {
+        return item?.options?.name ? `${item.name}.${item.options.name}` : item.name
+      }
     }
   }
 }

package/dist/components/lwFormMini/index.vue

@@ -41,13 +41,13 @@
               <el-input v-model="form[item.name]"
                         :placeholder="item.options?.placeholder"
                         clearable
-                        :type="item.options.type"
-                        :disabled="item.options.disabled"
-                        :maxlength="item.options.maxlength"
+                        :type="item.options?.type"
+                        :disabled="item.options?.disabled"
+                        :maxlength="item.options?.maxlength"
                         show-word-limit>
-                <template v-if="item.options.prepend"
+                <template v-if="item.options?.prepend"
                           #prepend>{{ item.options.prepend }}</template>
-                <template v-if="item.options.append"
+                <template v-if="item.options?.append"
                           #append>{{ item.options.append }}</template>
               </el-input>
             </template>
@@ -60,7 +60,10 @@
                            :accept="_item.accept"
                            :title="_item.label"
                            :parseData="item.parseData"
-                           :disabled="item.options.disabled"
+                           :disabled="item.options?.disabled"
+                           :multiple="_item?.multiple"
+                           :limit="_item?.limit"
+                           :tip="_item?.tip"
                            :apiObj="item.apiObj"></lw-upload>
 
               </template>
@@ -105,6 +108,16 @@
                            :value="option.value"></el-option>
               </el-select>
 
+            </template>
+            <!-- treeSelect -->
+            <template v-else-if="item.component == 'treeSelect'">
+              <el-tree-select v-model="form[item.name]"
+                              :props="item.options?.props"
+                              :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'">
@@ -178,7 +191,7 @@
                         @close="tagClose(tag, form[item.name])">
                   {{ tag }}
                 </el-tag>
-                <el-input v-if="tagVisible"
+                <el-input v-if="tagVisible[item.name]"
                           v-model="tagValue"
                           class="w-20"
                           size="small"
@@ -187,7 +200,7 @@
                 <el-button v-else
                            class="button-new-tag"
                            size="small"
-                           @click="tagVisible = true">
+                           @click="tagVisible[item.name] = true">
                   + 添加
                 </el-button>
               </div>
@@ -273,7 +286,7 @@ export default {
     return {
       form: {},
       tagValue: '',
-      tagVisible: false,
+      tagVisible: {},
       isChange: true,
       renderLoading: false
     }
@@ -282,7 +295,8 @@ export default {
     modelValue: {
       handler(val, old) {
         if (this.hasConfig && this.isChange) {
-          this.form = this.flattenObject(val)
+          let form = this.flattenObject(val)
+          this.form = Object.assign(this.form, form)
         }
       },
       deep: true
@@ -344,7 +358,8 @@ export default {
       })
 
       if (this.hasValue) {
-        this.form = this.flattenObject(this.modelValue)
+        let form = this.flattenObject(this.modelValue)
+        this.form = Object.assign(this.form, form)
       }
     },
     flattenObject(obj, prefix = '') {
@@ -428,7 +443,7 @@ export default {
         row[item.name] = row[item.name] || []
         row[item.name].push(this.tagValue)
       }
-      this.tagVisible = false
+      this.tagVisible[item.name] = false
       this.tagValue = ''
     }
   }

package/dist/components/lwUpload/index.vue

@@ -1,7 +1,31 @@
 <template>
   <div class="lw-upload"
-       :class="{ 'lw-upload-round': round }"
-       :style="style">
+       :class="{ 'lw-upload-round': round }">
+
+    <template v-for="(f, index) in fileList">
+      <div class="lw-upload__img"
+           :style="style">
+        <el-image class="image"
+                  :src="f"
+                  :preview-src-list="fileList"
+                  fit="cover"
+                  hide-on-click-modal
+                  append-to-body
+                  :z-index="9999">
+          <template #placeholder>
+            <div class="lw-upload__img-slot">
+              Loading...
+            </div>
+          </template>
+        </el-image>
+        <div class="lw-upload__img-actions"
+             v-if="!disabled">
+          <span class="del"
+                @click="handleRemove(index)"><el-icon><el-icon-delete /></el-icon></span>
+        </div>
+      </div>
+    </template>
+
     <div v-if="file && file.status != 'success'"
          class="lw-upload__uploading">
       <div class="lw-upload__progress">
@@ -13,29 +37,10 @@
                 :src="file.tempFile"
                 fit="cover"></el-image>
     </div>
-    <div v-if="file && file.status == 'success'"
-         class="lw-upload__img">
-      <el-image class="image"
-                :src="file.url"
-                :preview-src-list="[file.url]"
-                fit="cover"
-                hide-on-click-modal
-                append-to-body
-                :z-index="9999">
-        <template #placeholder>
-          <div class="lw-upload__img-slot">
-            Loading...
-          </div>
-        </template>
-      </el-image>
-      <div class="lw-upload__img-actions"
-           v-if="!disabled">
-        <span class="del"
-              @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
-      </div>
-    </div>
-    <el-upload v-if="!file"
+
+    <el-upload v-if="fileList.length < limit"
                class="uploader"
+               :style="style"
                ref="uploader"
                :auto-upload="autoUpload"
                :disabled="disabled"
@@ -44,7 +49,7 @@
                :name="name"
                :data="data"
                :accept="accept"
-               :limit="1"
+               :limit="limit"
                :http-request="request"
                :on-change="change"
                :before-upload="before"
@@ -61,9 +66,12 @@
           </div>
         </div>
       </slot>
+      <template #tip>
+        <div class="el-upload__tip">
+          {{tip}}
+        </div>
+      </template>
     </el-upload>
-    <span style="display:none!important"><el-input v-model="value"></el-input></span>
-
   </div>
 </template>
 
@@ -87,14 +95,16 @@ export default {
  * @property {Boolean} showFileList - 是否显示已上传文件列表，默认为 false
  * @property {Boolean} disabled - 是否禁用上传功能，默认为 false
  * @property {Boolean} round - 是否显示圆角按钮，默认为 false
+ * @property {Boolean} multiple - 是否多个文件，默认为 false
  * @property {Function} onSuccess - 上传成功后的回调函数，默认为空函数
  * @property {Function} parseData - 解析上传响应数据的函数，默认为解析状态码、文件名、图片远程地址和描述字段
  */
   props: {
-    modelValue: { type: String, default: "" },
+    modelValue: { type: [String, Array], default: "" },
     height: { type: Number, default: 148 },
     width: { type: Number, default: 148 },
     title: { type: String, default: "" },
+    tip: { type: String, default: "" },
     icon: { type: String, default: "el-icon-plus" },
     action: { type: String, default: () => { } },
     apiObj: { type: Object, default: () => { } },
@@ -105,6 +115,7 @@ export default {
     limit: { type: Number, default: 1 },
     autoUpload: { type: Boolean, default: true },
     showFileList: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     round: { type: Boolean, default: false },
     onSuccess: { type: Function, default: () => { return true } },
@@ -124,6 +135,7 @@ export default {
     return {
       value: "",
       file: null,
+      fileList: [],
       style: {
         width: this.width + "px",
         height: this.height + "px"
@@ -156,7 +168,10 @@ export default {
         this.file = null
       }
     },
-    handleRemove() {
+    handleRemove(index) {
+      if (this.multiple) {
+        this.fileList.splice(index, 1)
+      }
       this.clearFiles()
     },
     clearFiles() {
@@ -224,9 +239,16 @@ export default {
         })
         return false
       }
-      var response = this.parseData(res,file)
+      var response = this.parseData(res, file)
       file.url = response.src
-      this.value = file.url
+      console.log(this.fileList)
+      this.fileList.push(file.url)
+      if (this.multiple) {
+        this.value = this.fileList
+      } else {
+        this.value = file.url
+      }
+
     },
     error(err) {
       this.$nextTick(() => {
@@ -264,135 +286,150 @@ export default {
 }
 </script>
 
-<style lwoped>
-.el-form-item.is-error .lw-upload .el-upload--picture-card {
-  border-color: var(--el-color-danger);
-}
-
-.lw-upload .el-upload--picture-card {
-  border-radius: 0;
+<style lang="scss" scoped>
+// 表单错误状态样式
+.el-form-item.is-error {
+  .lw-upload {
+    .el-upload--picture-card {
+      border-color: var(--el-color-danger);
+    }
+  }
 }
 
-.lw-upload .uploader,
-.lw-upload:deep(.el-upload) {
+// 上传组件通用样式
+.lw-upload {
+  display: flex;
+  gap: 10px;
   width: 100%;
-  height: 100%;
-}
+  flex-wrap: wrap;
+  justify-content: left;
+  .el-upload--picture-card {
+    border-radius: 0;
+  }
 
-.lw-upload__img {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
+  .uploader,
+  :deep(.el-upload) {
+    width: 100%;
+    height: 100%;
+  }
 
-.lw-upload__img .image {
-  width: 100%;
-  height: 100%;
-}
+  &__img {
+    width: 100%;
+    height: 100%;
+    position: relative;
 
-.lw-upload__img-actions {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: none;
-}
+    .image {
+      width: 100%;
+      height: 100%;
+    }
 
-.lw-upload__img-actions span {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 25px;
-  height: 25px;
-  cursor: pointer;
-  color: #fff;
-}
+    &-actions {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: none;
 
-.lw-upload__img-actions span i {
-  font-size: 12px;
-}
+      span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 25px;
+        height: 25px;
+        cursor: pointer;
+        color: #fff;
 
-.lw-upload__img-actions .del {
-  background: #f56c6c;
-}
+        i {
+          font-size: 12px;
+        }
 
-.lw-upload__img:hover .lw-upload__img-actions {
-  display: block;
-}
+        &.del {
+          background: #f56c6c;
+        }
+      }
+    }
 
-.lw-upload__img-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-  background-color: var(--el-fill-color-lighter);
-}
+    &:hover {
+      &-actions {
+        display: block;
+      }
+    }
+  }
 
-.lw-upload__uploading {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
+  &__img-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    background-color: var(--el-fill-color-lighter);
+  }
 
-.lw-upload__progress {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--el-overlay-color-lighter);
-  z-index: 1;
-  padding: 10px;
-}
+  &__uploading {
+    width: 100%;
+    height: 100%;
+    position: relative;
 
-.lw-upload__progress .el-progress {
-  width: 100%;
-}
+    .image {
+      width: 100%;
+      height: 100%;
+    }
 
-.lw-upload__uploading .image {
-  width: 100%;
-  height: 100%;
-}
+    &__progress {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--el-overlay-color-lighter);
+      z-index: 1;
+      padding: 10px;
 
-.lw-upload .file-empty {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
+      .el-progress {
+        width: 100%;
+      }
+    }
+  }
 
-.lw-upload .file-empty i {
-  font-size: 28px;
-}
+  .file-empty {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 
-.lw-upload .file-empty h4 {
-  font-size: 12px;
-  font-weight: normal;
-  color: #8c939d;
-  margin-top: 8px;
-}
+    i {
+      font-size: 28px;
+    }
 
-.lw-upload.lw-upload-round {
-  border-radius: 50%;
-  overflow: hidden;
-}
+    h4 {
+      font-size: 12px;
+      font-weight: normal;
+      color: #8c939d;
+      margin-top: 8px;
+    }
+  }
 
-.lw-upload.lw-upload-round .el-upload--picture-card {
-  border-radius: 50%;
-}
+  &.lw-upload-round {
+    border-radius: 50%;
+    overflow: hidden;
 
-.lw-upload.lw-upload-round .lw-upload__img-actions {
-  top: auto;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
+    .el-upload--picture-card {
+      border-radius: 50%;
+    }
 
-.lw-upload.lw-upload-round .lw-upload__img-actions span {
-  width: 100%;
+    .lw-upload__img-actions {
+      top: auto;
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      span {
+        width: 100%;
+      }
+    }
+  }
 }
 </style>