lw-cdp-ui 1.1.27 → 1.1.28

package/dist/components/lwFormMini/index.vue

@@ -0,0 +1,454 @@
+<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="item.name"
+                        :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'">
+              <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>
+            <!-- upload -->
+            <template v-else-if="item.component == 'upload'">
+              <template v-for="(_item, _index) in item.options.items"
+                        :key="_index">
+                <lw-upload v-model="form[_item.name]"
+                           :maxSize="_item.maxSize"
+                           :accept="_item.accept"
+                           :title="_item.label"
+                           :parseData="item.parseData"
+                           :disabled="item.options.disabled"
+                           :apiObj="item.apiObj"></lw-upload>
+
+              </template>
+            </template>
+            <!-- checkbox -->
+            <template v-else-if="item.component == 'checkbox'">
+              <el-checkbox v-model="form[_item.name]"
+                           :label="_item.label"
+                           v-for="(_item, _index) in item.options.items"
+                           :key="_index"></el-checkbox>
+            </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'">
+              <el-switch v-model="form[item.name]"
+                         inline-prompt
+                         :active-text="item.options?.activeText"
+                         :inactive-text="item.options?.inactiveText" />
+            </template>
+            <!-- select -->
+            <template v-else-if="item.component == 'select'">
+              <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>
+            <!-- cascader -->
+            <template v-else-if="item.component == 'cascader'">
+              <el-cascader v-model="form[item.name]"
+                           style="width: 100%;"
+                           :options="item.options.items"
+                           clearable></el-cascader>
+            </template>
+            <!-- date -->
+            <template v-else-if="item.component == 'date'">
+              <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>
+            <!-- number -->
+            <template v-else-if="item.component == 'number'">
+              <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>
+            <!-- radio -->
+            <template v-else-if="item.component == 'radio'">
+              <el-radio-group v-model="form[item.name]"
+                              :disabled="item.options.disabled">
+                <el-radio v-for="_item in item.options.items"
+                          :key="_item.value"
+                          :label="_item.value">{{ _item.label }}</el-radio>
+              </el-radio-group>
+            </template>
+            <!-- color -->
+            <template v-else-if="item.component == 'color'">
+              <el-color-picker v-model="form[item.name]" />
+            </template>
+            <!-- rate -->
+            <template v-else-if="item.component == 'rate'">
+              <el-rate style="margin-top: 6px;"
+                       v-model="form[item.name]"></el-rate>
+            </template>
+            <!-- slider -->
+            <template v-else-if="item.component == 'slider'">
+              <el-slider v-model="form[item.name]"
+                         :marks="item.options.marks"></el-slider>
+            </template>
+
+            <!-- tags -->
+            <template v-else-if="item.component == 'tags'">
+              <div class="tags-list">
+                <el-tag v-for="tag in form[item.name]"
+                        :key="tag"
+                        closable
+                        :disable-transitions="false"
+                        @close="tagClose(tag, form[item.name])">
+                  {{ tag }}
+                </el-tag>
+                <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,
+      isChange: true,
+      renderLoading: false
+    }
+  },
+  watch: {
+    modelValue(val, old) {
+      if (this.hasConfig && this.isChange) {
+        this.form = this.flattenObject(val)
+      }
+      this.isChange = true;
+    },
+    config() {
+      this.render()
+    },
+    form: {
+      handler(val) {
+        this.$emit("update:modelValue", this.unflattenObject(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 {
+          this.form[item.name] = item.value
+        }
+      })
+
+      if (this.hasValue) {
+        this.form = this.flattenObject(this.modelValue)
+      }
+    },
+    flattenObject(obj, prefix = '') {
+      let result = {};
+
+      for (let key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          const newKey = prefix ? `${prefix}.${key}` : key;
+
+          if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+            // 递归处理嵌套对象
+            Object.assign(result, this.flattenObject(obj[key], newKey));
+          } else {
+            result[newKey] = obj[key];
+          }
+        }
+      }
+
+      return result;
+    },
+    unflattenObject(obj) {
+      const result = {};
+      this.isChange = false;
+
+      for (let key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          const keys = key.split('.');  // 按 `.` 分割键名
+          keys.reduce((acc, part, index) => {
+            if (index === keys.length - 1) {
+              acc[part] = obj[key];
+            } else {
+              acc[part] = acc[part] || {};  // 如果没有该键，创建一个空对象
+            }
+            return acc[part];
+          }, result);
+        }
+      }
+
+      return result;
+    },
+    //处理动态隐藏
+    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
+    },
+    //数据验证
+    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 = ''
+    }
+  }
+}
+</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>