lw-cdp-ui 1.2.47 → 1.2.49

package/dist/components/lwTableForm/index.vue

@@ -1,662 +0,0 @@
-<template>
-  <el-table :data="dataList"
-            stripe
-            ref="table"
-            :columns="config.formItems"
-            :max-height="maxHeight"
-            :row-key="config.rowKey || 'id'"
-            :tree-props="config?.treeProps || { children: 'children', hasChildren: 'hasChildren' }"
-            style="width: 100%">
-    <el-table-column v-for="(item, index) in config.formItems"
-                     :width="item.width"
-                     :min-width="item.minWidth"
-                     :key="index"
-                     :label="item.label"
-                     :prop="getPropName(item)"
-                     :align="item.align ?? 'left'"
-                     :fixed="item.fixed"
-                     :sortable="item.sortable"
-                     :show-overflow-tooltip="item.tooltip"
-                     :filters="item.filters ? getFilters(item.name) : null"
-                     :filter-method="item.filters ? filterHandler : null">
-      <template #header>
-        <div class="table-name"
-             :style="{ justifyContent:  item.align || 'flex-start'}">
-          <span v-if="item?.rules">*</span>
-          {{ item.label }}
-        </div>
-      </template>
-      <template #default="{ row, $index, column }">
-        <!-- input -->
-        <template v-if="item.component=='input'">
-          <el-input v-model="row[item.name]"
-                    :placeholder="item.options.placeholder"
-                    clearable
-                    :size="config.size || 'small'"
-                    :type="item.options.type"
-                    :disabled="isDisabled(item, row)"
-                    :maxlength="item.options.maxlength"
-                    show-word-limit></el-input>
-        </template>
-        <!-- upload -->
-        <template v-else-if="item.component=='upload'">
-          <el-col v-for="(_item, _index) in item.options.items"
-                  :key="_index">
-            <lw-upload v-model="row[_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 class="error-tips">
-              {{ row['errorMsg'][_item.name] }}
-            </div>
-
-          </el-col>
-        </template>
-        <!-- checkbox -->
-        <template v-else-if="item.component=='checkbox'">
-          <template v-if="item.name">
-            <template v-for="(_item, _index) in item.options.items"
-                      :key="_index">
-              <el-checkbox v-model="row[item.name]"
-                           :label="_item.label"
-                           :size="config.size || 'small'"></el-checkbox>
-              <div class="error-tips">
-                {{ row['errorMsg'][item.name] }}</div>
-            </template>
-
-          </template>
-          <template v-else>
-            <el-checkbox v-model="row[_item.name]"
-                         :label="_item.label"
-                         v-for="(_item, _index) in item.options.items"
-                         :key="_index"></el-checkbox>
-            <div class="error-tips">
-              {{ row['errorMsg'][_item.name] }}</div>
-          </template>
-        </template>
-        <!-- checkboxGroup -->
-        <template v-else-if="item.component=='checkboxGroup'">
-          <el-checkbox-group v-model="row[item.name]"
-                             :size="config.size || 'small'">
-            <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 :size="config.size || 'small'"
-                     :disabled="isDisabled(item, row)"
-                     v-model="row[item.name]" />
-        </template>
-        <!-- select -->
-        <template v-else-if="item.component=='select'">
-          <el-select v-model="row[item.name]"
-                     :multiple="item.options?.multiple"
-                     :allow-create="item.options?.allowCreate"
-                     default-first-option
-                     :placeholder="item.options?.placeholder || ''"
-                     :clearable="item.options?.clearable"
-                     :disabled="isDisabled(item, row)"
-                     filterable
-                     :size="config.size || 'small'"
-                     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 :size="config.size || 'small'"
-                       v-model="row[item.name]"
-                       :options="item.options.items"
-                       :disabled="isDisabled(item, row)"
-                       clearable></el-cascader>
-        </template>
-        <!-- date -->
-        <template v-else-if="item.component=='date'">
-          <el-date-picker v-model="row[item.name]"
-                          style="width: 100%;"
-                          :size="config.size || 'small'"
-                          :type="item.options.type"
-                          :disabled="isDisabled(item, row)"
-                          :start-placeholder="item.options.startPlaceholder"
-                          :end-placeholder="item.options.endPlaceholder"
-                          :shortcuts="item.options.shortcuts"
-                          :default-time="item.options.defaultTime"
-                          :value-rowat="item.options.valuerowat"
-                          :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
-
-        </template>
-        <!-- number -->
-        <template v-else-if="item.component=='number'">
-          <el-input-number v-model="row[item.name]"
-                           :disabled="item.options?.disabled"
-                           :min="item?.options?.min"
-                           :max="item?.options?.max"
-                           :size="config.size || 'small'"
-                           :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="row[item.name]"
-                          :disabled="isDisabled(item, row)"
-                          :size="config.size || 'small'">
-            <el-radio v-for="_item in item.options.items"
-                      :key="_item.value"
-                      :disabled="isDisabled(item, row)"
-                      :value="_item.value">{{_item.label}}</el-radio>
-          </el-radio-group>
-        </template>
-        <!-- color -->
-        <template v-else-if="item.component=='color'">
-          <el-color-picker v-model="row[item.name]"
-                           :disabled="isDisabled(item, row)"
-                           :size="config.size || 'small'" />
-        </template>
-        <!-- rate -->
-        <template v-else-if="item.component=='rate'">
-          <el-rate style="margin-top: 6px;"
-                   :disabled="isDisabled(item, row)"
-                   v-model="row[item.name]"
-                   :size="config.size || 'small'"></el-rate>
-
-        </template>
-        <!-- slider -->
-        <template v-else-if="item.component=='slider'">
-          <el-slider v-model="row[item.name]"
-                     :marks="item.options.marks"
-                     :disabled="isDisabled(item, row)"
-                     :size="config.size || 'small'"></el-slider>
-
-        </template>
-
-        <!-- tags -->
-        <template v-else-if="item.component=='tags'">
-          <div class="tags-list">
-            <el-tag v-for="tag in row[item.name]"
-                    :key="tag"
-                    closable
-                    :disable-transitions="false"
-                    @close="tagClose(tag, row[item.name])">
-              {{ tag }}
-            </el-tag>
-            <el-input v-if="row?.tagVisible"
-                      v-model="tagValue"
-                      class="w-20"
-                      :size="config.size || 'small'"
-                      @keyup.enter="tagInputConfirm(item, row)"
-                      @blur="tagInputConfirm(item, row)" />
-            <el-button v-else
-                       class="button-new-tag"
-                       :size="config.size || 'small'"
-                       :disabled="isDisabled(item, row)"
-                       @click="row.tagVisible = true">
-              + 添加
-            </el-button>
-          </div>
-        </template>
-
-        <!-- 按钮 -->
-        <template v-else-if="item.component == 'operation'">
-          <!-- 默认新增/删除 -->
-          <span v-for="o in item.options.addDelete"
-                :key="o"
-                v-show="o.isShow ? o.isShow(row) : true">
-            <el-tooltip v-if="o.icon"
-                        :content="o.label"
-                        placement="top">
-              <el-button type="primary"
-                         :size="config.size || 'small'"
-                         @click="o.clickFun ? o.clickFun(row, $index, column, tableData) : clickFun(o.type, row, $index)"
-                         :disabled="o.disabled ? o.disabled(row) : false"
-                         :icon="o.icon"
-                         circle></el-button>
-            </el-tooltip>
-            <el-button v-else
-                       type="primary"
-                       text
-                       :size="config.size || 'small'"
-                       @click="o.clickFun ? o.clickFun(row, $index, column, tableData) : clickFun(o.type, row, $index)"
-                       :disabled="o.disabled ? o.disabled(row) : false">
-              {{ o.label }}
-            </el-button>
-          </span>
-
-          <!-- 自定义按钮 省略号 -->
-          <el-dropdown
-                       v-if="item.options?.items && item.options.items.length > 0">
-            <el-button :size="config.size || 'small'"
-                       type="primary"
-                       link>
-              <el-icon class="more-btn"
-                       size="16"><el-icon-more-filled /></el-icon>
-            </el-button>
-
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item v-for="o in item.options.items.filter(o => !o.isShow || o.isShow(row))"
-                                  :key="o"
-                                  @click="o.clickFun(row, $index, column, tableData)">
-                  {{ o.label }}
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-
-          </el-dropdown>
-        </template>
-        <!-- 没有组件是component值 就是插槽名称 -->
-        <template v-else>
-          <slot :name="item.component"
-                :row="row">
-            <el-tag type="danger">[{{item.component}}]
-              没有这个默认组件也未自定义插槽内容</el-tag>
-          </slot>
-        </template>
-        <div v-if="item.message"
-             class="el-row-item-msg">{{item.message}}</div>
-
-        <!-- 错误提示 -->
-        <div v-if="row.errorMsg"
-             class="error-tips">
-          {{ row['errorMsg'][item?.name] }}
-        </div>
-      </template>
-    </el-table-column>
-  </el-table>
-  <div v-if="isPagination && tableData.length > pageSize"
-       class="pagination-body">
-    <el-pagination size="small"
-                   background
-                   :page-size="pageSize"
-                   v-model:current-page="currentPage"
-                   layout="prev, pager, next"
-                   :total="tableData.length" />
-  </div>
-  <div v-if="!isView"
-       class="btn-list">
-    <el-button type="primary"
-               class="add-btn"
-               plain
-               icon="el-icon-plus"
-               @click="addItem()">{{ $t('btn.add') }}</el-button>
-    <slot name="deleteBtn"></slot>
-  </div>
-</template>
-
-<script>
-import lwUpload from '../lwUpload'
-export default {
-  components: {
-    lwUpload
-  },
-  props: {
-    modelValue: { type: Object, default: () => { } },
-    config: { type: Object, default: () => { } },
-    maxHeight: { type: String, default: 'calc(100vh - 280px)' },
-    //  是否是查看模式
-    isView: { type: Boolean, default: false },
-    //  是否分页
-    isPagination: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      tableData: [],
-      tagValue: '',
-      currentPage: 1,
-      pageSize: 8,
-      ids: [],
-      internalUpdate: true,
-      tagVisible: false,
-    }
-  },
-  watch: {
-    tableData: {
-      handler(val) {
-        if (!this.internalUpdate) {
-          this.$emit("update:modelValue", this.unflattenObject(val));
-        }
-        this.internalUpdate = false;
-      },
-      deep: true
-    },
-    modelValue: {
-      handler(val) {
-        if (!this.internalUpdate) {
-          this.internalUpdate = true; // 设置标志位，避免递归
-          this.tableData = this.flattenObject(val);
-        }
-      },
-      deep: true
-    }
-  },
-  computed: {
-    hasConfig() {
-      return Object.keys(this.config).length > 0
-    },
-    hasValue() {
-      return Object.keys(this.modelValue).length > 0
-    },
-    dataList() {
-      if (!this.isPagination) {
-        // 如果不需要分页，直接返回所有数据
-        return this.tableData;
-      }
-
-      const currentPage = this.currentPage; // 当前页码
-
-      // 计算分页起始位置
-      const startIndex = (currentPage - 1) * this.pageSize;
-
-      // 返回分页后的数据
-      return this.tableData.slice(startIndex, startIndex + this.pageSize);
-    }
-  },
-  mounted() {
-    this.tableData = this.flattenObject(this.modelValue)
-  },
-  methods: {
-    flattenObject(array) {
-      let list = []
-      function getObj(obj, prefix = '') {
-        let result = {};
-
-        for (let key in obj) {
-          if (obj.hasOwnProperty(key)) {
-            const newKey = prefix ? `${prefix}.${key}` : key;
-
-            if ( key != 'errorMsg' && typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
-              // 递归处理嵌套对象
-              Object.assign(result, getObj(obj[key], newKey));
-            } else {
-              result[newKey] = obj[key];
-            }
-          }
-        }
-
-        return result;
-      }
-      array?.forEach(obj => {
-        list.push(getObj(obj))
-      })
-
-      return list;
-    },
-    unflattenObject(array) {
-      let list = []
-      array?.forEach(obj => {
-        const result = {};
-        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);
-          }
-        }
-        list.push(result)
-      })
-
-
-      return list;
-    },
-    // 非空校验
-    isEmpty(value) {
-      if (value == null) return true; // null 和 undefined
-      if (typeof value === 'string' && value.trim() === '') return true; // 空字符串
-      if (Array.isArray(value) && value.length === 0) return true; // 空数组
-      if (typeof value === 'object' && Object.keys(value).length === 0) return true; // 空对象
-      return false; // 其他情况非空
-    },
-    // 非空校验
-    isValue(tableData, formItems) {
-      // 校验 tableData 中的字段
-      const validationMessages = [];
-      tableData.forEach((data) => {
-        formItems.forEach((item) => {
-          if (item.rules && item.rules.length > 0) {
-            item.rules.forEach((rule) => {
-              let isVal = false;
-              if (item.component == 'checkbox' || item.component == 'upload') {
-                item.options.items.forEach((option) => {
-                  if (this.isEmpty(data[option.name])) {
-                    if (!data?.errorMsg) {
-                      data.errorMsg = {}
-                    }
-                    data['errorMsg'][option.name] = rule.message
-                  }
-                })
-              } else {
-                if (rule.required && this.isEmpty(data[item.name])) {
-                  if (!data?.errorMsg) {
-                    data.errorMsg = {}
-                  }
-                  data['errorMsg'][item.name] = rule.message
-
-                  validationMessages.push(`${item.label} ${rule.message}`);
-                } else {
-                  if (data?.errorMsg) {
-                    delete data['errorMsg'][item.name];
-                  }
-                  if (data.errorMsg?.length === 0) {
-                    delete data.errorMsg;
-                  }
-                }
-              }
-            });
-          }
-        });
-      });
-      if (validationMessages.length > 0) {
-        this.$message.warning(`校验失败,存在必填字段为空,请检查`)
-        return true; // 如果有校验失败
-      }
-
-      return false; // 如果没有校验失败
-    },
-    // 新增表单
-    addItem(tableData = this.tableData) {
-      let form = {};
-      let formItems = JSON.parse(JSON.stringify(this.config.formItems));
-      let isVal = this.isValue(tableData, formItems)
-      if (isVal) { return false }
-
-      formItems.forEach((item) => {
-        if (item.component == 'checkbox' || item.component == 'upload') {
-          if (item.name) {
-            const value = [];
-            item.options.items.forEach((option) => {
-              value.push(option.value)
-            });
-            form[item.name] = value;
-          } else if (item?.options?.items) {
-            item.options.items.forEach((option) => {
-              form[option.name] = option.value;
-            });
-          }
-        } else {
-          form[item.name] = item.value;
-        }
-      });
-
-      // 校验通过后才推送数据
-      let id = this.$tool.getUUID(this.config.rowKey, '4')
-      tableData.push({
-        [this.config.rowKey]: id,
-        ...form
-      });
-
-      // 用于识别是否是新增的
-      this.ids.push(id);
-    },
-    // 二级 新增/删除
-    clickFun(type, row, index) {
-      if (type == 'delete') {
-        this.deleteItem(row)
-      }
-      if (type == 'add') {
-        if (!row?.fields) {
-          row.fields = []
-        }
-        this.addItem(row.fields)
-      }
-    },
-    // 删除
-    removeNode(data, item) {
-      for (let i = 0; i < data.length; i++) {
-        // 比较整个 item 对象是否相同
-        if (JSON.stringify(data[i]) === JSON.stringify(item)) {
-          data.splice(i, 1)
-          return
-        }
-        // 如果有子节点，则递归调用
-        if (data[i][this.config.treeProps.children]) {
-          this.removeNode(data[i][this.config.treeProps.children], item)
-        }
-      }
-    },
-    deleteItem(item) {
-      this.removeNode(this.tableData, item)
-    },
-    // 是否禁用
-    isDisabled(item, row) {
-      return !this.ids.includes(row[this.config.rowKey]) && item.options?.disabled
-    },
-    //合并深结构对象
-    deepMerge(obj1, obj2) {
-      obj2.forEach((item) => {
-        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;
-    },
-    // 删除tag
-    tagClose(tag, item) {
-      item.splice(item.indexOf(tag), 1)
-    },
-    // 增加tag
-    tagInputConfirm(item, row) {
-      if (this.tagValue) {
-        row[item.name] = row[item.name] || []
-        row[item.name].push(this.tagValue)
-      }
-      row.tagVisible = false
-      this.tagValue = ''
-    },
-    // prop NAME
-    getPropName(item) {
-      if (item.component == 'checkbox' || item.component == 'upload') {
-        return item.options.items[0].name
-
-      } else {
-        return item.name
-      }
-    },
-    getFilters(name) {
-      let list = []
-      this.tableData.forEach(item => {
-        if (!list.includes(item[name])) {
-          list.push(item[name])
-        }
-      })
-      return list.map(item => ({
-        text: item,
-        value: item
-      }))
-    },
-    filterHandler(value, row, column) {
-      const property = column['property'];
-      return row[property] === value;
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tags-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
-.table-name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  gap: 2px;
-  span {
-    color: var(--el-color-error);
-  }
-}
-:deep(.cell) {
-  display: flex;
-  align-items: center;
-}
-.error-tips {
-  position: absolute;
-  bottom: -7px;
-  font-size: 10px;
-  color: var(--el-color-error);
-}
-.btn-list {
-  display: flex;
-  align-items: center;
-  margin-top: 10px;
-  width: 100%;
-  .add-btn {
-    width: 100%;
-  }
-}
-.pagination-body {
-  padding-top: 10px;
-  display: flex;
-  justify-content: flex-end;
-}
-</style>