lw-cdp-ui 1.2.48 → 1.2.49

package/dist/components/lwForm/index.vue

@@ -1,631 +0,0 @@
-<template>
-  <el-skeleton v-if="renderLoading || Object.keys(form).length == 0"
-               animated />
-
-  <el-form v-else
-           ref="form"
-           :model="form"
-           :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"
-                :key="index">
-        <el-col :span="item.span || 24"
-                v-if="!hideHandle(item)">
-          <!-- 间隔标题 -->
-          <div v-if="item.component == 'divider'"
-               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="getPropName(item)"
-                        :rules="rulesHandle(item)">
-            <template #label>
-              {{ item.label }}
-              <el-tooltip v-if="item.tips"
-                          :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?.name">
-                <el-input v-model="form[item.name][item?.options.name]"
-                          :placeholder="item?.options?.placeholder"
-                          clearable
-                          :type="item?.options.type"
-                          :disabled="item?.options?.disabled"
-                          :autocomplete="item?.options?.autocomplete || 'off'"
-                          :maxlength="item?.options.maxlength"
-                          show-word-limit>
-                  <template v-if="item?.options.prepend"
-                            #prepend>{{ item?.options.prepend }}</template>
-                  <template v-if="item?.options.append"
-                            #append>{{ item?.options.append }}</template>
-                </el-input>
-              </template>
-              <template v-else>
-                <el-input v-model="form[item.name]"
-                          :placeholder="item?.options?.placeholder"
-                          clearable
-                          :type="item?.options.type"
-                          :disabled="item?.options?.disabled"
-                          :maxlength="item?.options.maxlength"
-                          show-word-limit>
-                  <template v-if="item?.options.prepend"
-                            #prepend>{{ item?.options.prepend }}</template>
-                  <template v-if="item?.options.append"
-                            #append>{{ item?.options.append }}</template>
-                </el-input>
-              </template>
-            </template>
-            <!-- upload -->
-            <template v-else-if="item.component == 'upload'">
-              <template v-for="(_item, _index) in item?.options.items"
-                        :key="_index">
-                <template v-if="item.name">
-                  <div style="margin-right: 5px;">
-                    <lw-upload v-model="form[item.name][_item.name]"
-                               :maxSize="_item.maxSize"
-                               :accept="_item.accept"
-                               :title="_item.label"
-                               :parseData="item.parseData"
-                               :disabled="_item?.disabled"
-                               :multiple="_item?.multiple"
-                               :limit="_item?.limit"
-                               :returnFile="_item?.returnFile"
-                               :tip="_item?.tip"
-                               :apiObj="item.apiObj"></lw-upload>
-                  </div>
-                </template>
-                <template v-else>
-                  <div style="margin-right: 5px;">
-                    <lw-upload v-model="form[_item.name]"
-                               :maxSize="_item.maxSize"
-                               :accept="_item.accept"
-                               :title="_item.label"
-                               :parseData="item.parseData"
-                               :disabled="_item?.disabled"
-                               :multiple="_item?.multiple"
-                               :limit="_item?.limit"
-                               :returnFile="_item?.returnFile"
-                               :tip="_item?.tip"
-                               :apiObj="item.apiObj"></lw-upload>
-                  </div>
-                </template>
-
-              </template>
-            </template>
-            <!-- checkbox -->
-            <template v-else-if="item.component == 'checkbox'">
-              <template v-if="item.name">
-                <el-checkbox v-model="form[item.name][_item.name]"
-                             :label="_item.label"
-                             v-for="(_item, _index) in item?.options.items"
-                             :key="_index"></el-checkbox>
-              </template>
-              <template v-else>
-                <el-checkbox v-model="form[_item.name]"
-                             :label="_item.label"
-                             v-for="(_item, _index) in item?.options.items"
-                             :key="_index"></el-checkbox>
-              </template>
-            </template>
-            <!-- checkboxGroup -->
-            <template v-else-if="item.component == 'checkboxGroup'">
-              <el-checkbox-group v-model="form[item.name]">
-                <el-checkbox v-for="_item in item?.options.items"
-                             :key="_item.value"
-                             :label="_item.value">{{ _item.label }}</el-checkbox>
-              </el-checkbox-group>
-            </template>
-
-            <!-- switch -->
-            <template v-else-if="item.component == 'switch'">
-              <template v-if="item?.options?.name">
-                <el-switch v-model="form[item.name][item?.options.name]"
-                           inline-prompt
-                           :active-text="item?.options?.activeText"
-                           :inactive-text="item?.options?.inactiveText" />
-              </template>
-              <template v-else>
-                <el-switch v-model="form[item.name]"
-                           inline-prompt
-                           :active-text="item?.options?.activeText"
-                           :inactive-text="item?.options?.inactiveText" />
-              </template>
-            </template>
-            <!-- select -->
-            <template v-else-if="item.component == 'select'">
-              <template v-if="item?.options?.name">
-                <el-select v-model="form[item.name][item?.options.name]"
-                           :multiple="item?.options?.multiple"
-                           :allow-create="item?.options?.allowCreate"
-                           default-first-option
-                           :placeholder="item?.options?.placeholder || ''"
-                           :clearable="item?.options?.clearable"
-                           :disabled="item?.options?.disabled"
-                           filterable
-                           style="width: 100%;">
-                  <el-option v-for="option in item?.options.items"
-                             :key="option.value"
-                             :label="option.label"
-                             :value="option.value"></el-option>
-                </el-select>
-              </template>
-              <template v-else>
-                <el-select v-model="form[item.name]"
-                           :multiple="item?.options?.multiple"
-                           :allow-create="item?.options?.allowCreate"
-                           default-first-option
-                           :placeholder="item?.options?.placeholder || ''"
-                           :clearable="item?.options?.clearable"
-                           :disabled="item?.options?.disabled"
-                           filterable
-                           style="width: 100%;">
-                  <el-option v-for="option in item?.options.items"
-                             :key="option.value"
-                             :label="option.label"
-                             :value="option.value"></el-option>
-                </el-select>
-              </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]"
-                             style="width: 100%;"
-                             :options="item?.options.items"
-                             clearable></el-cascader>
-              </template>
-              <template v-else>
-                <el-cascader v-model="form[item.name]"
-                             style="width: 100%;"
-                             :options="item?.options.items"
-                             clearable></el-cascader>
-              </template>
-
-            </template>
-            <!-- date -->
-            <template v-else-if="item.component == 'date'">
-              <template v-if="item?.options?.name">
-                <el-date-picker v-model="form[item.name][item?.options.name]"
-                                style="width: 100%;"
-                                :type="item?.options.type"
-                                :start-placeholder="item?.options.startPlaceholder"
-                                :end-placeholder="item?.options.endPlaceholder"
-                                :shortcuts="item?.options.shortcuts"
-                                :disabled-date="item?.options?.disabledDate"
-                                :default-time="item?.options.defaultTime"
-                                :disabled="item?.options?.disabled"
-                                :value-format="item?.options.valueFormat"
-                                :format="item?.options.format"
-                                :placeholder="item?.options.placeholder || '请选择'"></el-date-picker>
-              </template>
-              <template v-else>
-                <el-date-picker v-model="form[item.name]"
-                                style="width: 100%;"
-                                :type="item?.options.type"
-                                :start-placeholder="item?.options.startPlaceholder"
-                                :end-placeholder="item?.options.endPlaceholder"
-                                :shortcuts="item?.options.shortcuts"
-                                :disabled-date="item?.options?.disabledDate"
-                                :default-time="item?.options.defaultTime"
-                                :disabled="item?.options?.disabled"
-                                :value-format="item?.options.valueFormat"
-                                :format="item?.options.format"
-                                :placeholder="item?.options.placeholder || '请选择'"></el-date-picker>
-              </template>
-
-            </template>
-            <!-- number -->
-            <template v-else-if="item.component == 'number'">
-              <template v-if="item?.options?.name">
-                <el-input-number v-model="form[item.name][item?.options.name]"
-                                 :disabled="item?.options?.disabled"
-                                 :min="item?.options?.min"
-                                 :max="item?.options?.max"
-                                 :step="item?.options?.step || 1"
-                                 :precision="item?.options?.precision"
-                                 :placeholder="item?.options?.placeholder || ''"
-                                 :controls-position="item?.options?.controlsPosition || '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]"
-                                 :disabled="item?.options?.disabled"
-                                 :min="item?.options?.min"
-                                 :max="item?.options?.max"
-                                 :step="item?.options?.step || 1"
-                                 :precision="item?.options?.precision"
-                                 :placeholder="item?.options?.placeholder || ''"
-                                 :controls-position="item?.options?.controlsPosition || 'right'">
-                  <template v-if="item?.options?.suffix"
-                            #suffix>
-                    <span>{{ item?.options.suffix }}</span>
-                  </template>
-                </el-input-number>
-              </template>
-
-            </template>
-            <!-- radio -->
-            <template v-else-if="item.component == 'radio'">
-              <template v-if="item?.options?.name">
-                <el-radio-group v-model="form[item.name][item?.options.name]"
-                                :disabled="item?.options?.disabled">
-                  <el-radio v-for="_item in item?.options.items"
-                            :key="_item.value"
-                            :value="_item.value">{{ _item.label }}</el-radio>
-                </el-radio-group>
-              </template>
-              <template v-else>
-                <el-radio-group v-model="form[item.name]"
-                                :disabled="item?.options?.disabled">
-                  <el-radio v-for="_item in item?.options.items"
-                            :key="_item.value"
-                            :value="_item.value">{{ _item.label }}</el-radio>
-                </el-radio-group>
-              </template>
-
-            </template>
-            <!-- color -->
-            <template v-else-if="item.component == 'color'">
-              <template v-if="item?.options?.name">
-                <el-color-picker
-                                 v-model="form[item.name][item?.options.name]" />
-              </template>
-              <template v-else>
-                <el-color-picker v-model="form[item.name]" />
-              </template>
-
-            </template>
-            <!-- rate -->
-            <template v-else-if="item.component == 'rate'">
-              <template v-if="item?.options?.name">
-                <el-rate style="margin-top: 6px;"
-                         v-model="form[item.name][item?.options.name]"></el-rate>
-              </template>
-              <template v-else>
-                <el-rate style="margin-top: 6px;"
-                         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 v-model="form[item.name][item?.options.name]"
-                           :marks="item?.options.marks"></el-slider>
-              </template>
-              <template v-else>
-                <el-slider 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"
-                          closable
-                          :disable-transitions="false"
-                          @close="tagClose(tag, form[item.name][item?.options.name])">
-                    {{ tag }}
-                  </el-tag>
-
-                </template>
-                <template v-else>
-                  <el-tag v-for="tag in form[item.name]"
-                          :key="tag"
-                          closable
-                          :disable-transitions="false"
-                          @close="tagClose(tag, form[item.name])">
-                    {{ tag }}
-                  </el-tag>
-                </template>
-                <el-input v-if="tagVisible"
-                          v-model="tagValue"
-                          class="w-20"
-                          size="small"
-                          @keyup.enter="tagInputConfirm(item, form)"
-                          @blur="tagInputConfirm(item, form)" />
-                <el-button v-else
-                           class="button-new-tag"
-                           size="small"
-                           @click="tagVisible = true">
-                  + 添加
-                </el-button>
-              </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>
-        </el-col>
-      </template>
-      <el-col :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 lwUpload from '../lwUpload'
-export default {
-  components: {
-    lwUpload
-  },
-  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 },
-  },
-  data() {
-    return {
-      form: {},
-      tagValue: '',
-      tagVisible: false,
-      renderLoading: false
-    }
-  },
-  watch: {
-    modelValue(val, old) {
-      if (this.hasConfig && this.hasValue) {
-        this.deepMerge(this.form, JSON.parse(JSON.stringify(val)))
-      }
-    },
-    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: {
-    /**
-     * 渲染表单数据。
-     * 遍历配置中的表单项，根据不同组件类型初始化表单数据。
-     * 对于复选框和上传组件，将选项值存储在对象中。
-     * 对于其他组件，直接将值赋给表单数据。
-     * 如果存在当前值，则将其与表单数据进行深度合并。
-     */
-    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;
-    },
-    //数据验证
-    validate(valid, obj) {
-      return this.$refs.form.validate(valid, obj)
-    },
-    scrollToField(prop) {
-      return this.$refs.form.scrollToField(prop)
-    },
-    resetFields() {
-      return this.$refs.form.resetFields()
-    },
-    //提交
-    submit() {
-      this.$emit("submit", this.form)
-    },
-    // 删除tag
-    tagClose(tag, item) {
-      item.splice(item.indexOf(tag), 1)
-    },
-    // 增加tag
-    tagInputConfirm(item, row) {
-      if (this.tagValue) {
-        if (item?.options?.name) {
-          row[item.name] = row[item.name] || {};
-          row[item.name][item?.options.name] = row[item.name][item?.options.name] || [];
-          row[item.name][item?.options.name].push(this.tagValue)
-        } else {
-          row[item.name] = row[item.name] || []
-          row[item.name].push(this.tagValue)
-        }
-      }
-      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
-      }
-    }
-  }
-}
-</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;
-}
-</style>