lw-cdp-ui 1.2.48 → 1.2.49

package/dist/components/lwFormMini/FormItem.vue

@@ -1,466 +0,0 @@
-<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'">
-      <el-input v-model="objItem.value"
-                :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>
-    <!-- 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="_item?.disabled"
-                   :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'">
-      <el-checkbox v-model="_item.value"
-                   :label="_item.label"
-                   v-for="(_item, _index) in objItem?.options.items"
-                   :key="_index"></el-checkbox>
-    </template>
-    <!-- checkboxGroup -->
-    <template v-else-if="item.component == 'checkboxGroup'">
-      <el-checkbox-group v-model="objItem.value">
-        <el-checkbox v-for="_item in item?.options.items"
-                     :key="_item.value"
-                     :value="_item.value">{{ _item.label }}</el-checkbox>
-      </el-checkbox-group>
-    </template>
-
-    <!-- switch -->
-    <template v-else-if="item.component == 'switch'">
-      <el-switch v-model="objItem.value"
-                 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="objItem.value"
-                 :multiple="item?.options?.multiple"
-                 :allow-create="item?.options?.allowCreate"
-                 default-first-option
-                 :placeholder="item?.options?.placeholder || ''"
-                 :clearable="item?.options?.clearable"
-                 :collapse-tags="item?.options?.collapseTags"
-                 :collapse-tags-tooltip="item?.options?.collapseTagsTooltip"
-                 :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>
-    <!-- treeSelect -->
-    <template v-else-if="item.component == 'treeSelect'">
-      <el-tree-select v-model="objItem.value"
-                      :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'">
-      <el-cascader v-model="objItem.value"
-                   style="width: 100%;"
-                   :props="item?.options?.props"
-                   :separator="item?.options?.separator"
-                   :disabled="item?.options?.disabled"
-                   :options="item?.options.items"
-                   clearable></el-cascader>
-    </template>
-    <!-- date -->
-    <template v-else-if="item.component == 'date'">
-      <el-date-picker v-model="objItem.value"
-                      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="objItem.value"
-                       :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="objItem.value"
-                      :disabled="item?.options.disabled">
-        <el-radio v-for="_item in item?.options.items"
-                  :key="_item.value"
-                  :value="_item.value" :label="_item.label">{{ _item.label }}</el-radio>
-      </el-radio-group>
-    </template>
-    <!-- color -->
-    <template v-else-if="item.component == 'color'">
-      <el-color-picker v-model="objItem.value" />
-    </template>
-    <!-- rate -->
-    <template v-else-if="item.component == 'rate'">
-      <el-rate style="margin-top: 6px;"
-               v-model="objItem.value"></el-rate>
-    </template>
-    <!-- slider -->
-    <template v-else-if="item.component == 'slider'">
-      <el-slider v-model="objItem.value"
-                 :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 objItem.value"
-                :key="tag"
-                :closable="!item?.options?.disabled || item?.options?.closable"
-                :disable-transitions="false"
-                @close="tagClose(tag, objItem.value)">
-          {{ tag }}
-        </el-tag>
-        <el-input v-if="tagVisible[item.name]"
-                  v-model="tagValue"
-                  class="w-20"
-                  size="small"
-                  @keyup.enter="tagInputConfirm(item, objItem.value)"
-                  @blur="tagInputConfirm(item, objItem.value)" />
-        <el-button v-if="!tagVisible[item.name] && !item?.options?.disabled"
-                   class="button-new-tag"
-                   size="small"
-                   @click="tagVisible[item.name] = true">
-          + {{item?.options?.addText || '添加'}}
-        </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>
-</template>
-
-<script>
-import lwUpload from '../lwUpload'
-export default {
-  name: 'FormItem',
-  data() {
-    return {
-      tagVisible: {},
-      dataForm: {},
-      objItem: {},
-      tagValue: ''
-    }
-  },
-  components: {
-    lwUpload
-  },
-  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)
-        }
-
-        // 发布 这个数据
-        if (val?.name) {
-          this.$bus.$emit(`lwFormMini-${val.name}`, val)
-        }
-      },
-      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]; // 进入下一层
-        }
-      });
-
-    },
-    // 删除tag
-    tagClose(tag, item) {
-      item.splice(item.indexOf(tag), 1)
-    },
-    // 增加tag
-    tagInputConfirm(item, val) {
-      if (this.tagValue) {
-        val = val || []
-        val.push(this.tagValue)
-      }
-      this.tagVisible[item.name] = false
-      this.tagValue = ''
-    },
-    // 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;
-    },
-
-  }
-}
-</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;
-}
-
-.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>