lw-cdp-ui 1.2.48 → 1.2.49

package/dist/components/lwFormMini/ViewItem.vue

@@ -1,391 +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'">
-      <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'">
-      <template v-if="typeof objItem.value == 'string'">
-        {{ dayjs(objItem.value).format(item?.options?.valueFormat || 'YYYY-MM-DD HH:mm:ss') }}
-      </template>
-      <template v-if="typeof objItem.value == 'object'">
-        {{ objItem.value.length > 0 ? dayjs(objItem.value[0]).format(item?.options?.valueFormat || 'YYYY-MM-DD HH:mm:ss') + ' - ' + dayjs(objItem.value[1]).format(item?.options?.valueFormat || 'YYYY-MM-DD HH:mm:ss') : '--' }}
-      </template>
-    </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 || val || '--'
-    },
-    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>