@lx-frontend/wrap-element-ui 1.0.28 → 2.0.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.28",
-  "description": "wrap-element-ui",
+  "version": "2.0.0-beta.1",
+  "description": "wrap-element-ui Vue 3 + Element Plus 组件库",
   "author": "",
   "main": "src/components/index.ts",
   "private": false,
@@ -13,7 +13,7 @@
     "build:sb": "cross-env MODE=production rimraf storybook-static && pnpm build:lib && storybook build",
     "preview": "serve ./storybook-static",
     "publish:dev": "npm publish --access public --tag beta",
-    "publish:prod": "npm publish --access public",
+    "publish:prod": "npm publish --access public --tag latest",
     "cdn": "gulp oss",
     "lint": "eslint src"
   },
@@ -24,11 +24,12 @@
   ],
   "peerDependencies": {
     "dayjs": "^1.11.13",
-    "element-ui": "^2.15.14",
+    "element-plus": "^2.5.0",
     "lodash": "^4.17.21",
-    "vue": "~2.7.16"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "@faker-js/faker": "^8.4.1",
     "@storybook/addon-docs": "7.6.19",
     "@storybook/addon-essentials": "7.6.19",
@@ -39,19 +40,23 @@
     "@storybook/react": "7.6.19",
     "@storybook/react-vite": "7.6.19",
     "@storybook/test": "7.6.19",
-    "@storybook/vue": "7.6.19",
-    "@storybook/vue-vite": "7.6.19",
+    "@storybook/vue3": "7.6.19",
+    "@storybook/vue3-vite": "7.6.19",
     "@types/jest": "^24.0.11",
     "@types/lodash": "^4.17.5",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/compiler-core": "^3.5.38",
+    "@vue/compiler-dom": "^3.5.38",
     "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@vue/shared": "^3.5.38",
+    "@vue/test-utils": "^2.4.0",
     "ali-oss": "^6.20.0",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
+    "element-plus": "^2.5.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.27.0",
     "gulp": "^4.0.2",
@@ -63,11 +68,15 @@
     "serve": "^14.2.3",
     "storybook": "7.6.19",
     "through2": "^4.0.2",
-    "typescript": "^4.9.5",
-    "vite": "^4.5.3",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-tsconfig-paths": "^4.3.2",
-    "vue-template-compiler": "^2.6.10"
+    "vue": "^3.4.0"
+  },
+  "volta": {
+    "node": "20.20.2",
+    "pnpm": "8.15.9"
   }
 }

package/src/components/AddMembers/index.vue

@@ -6,103 +6,113 @@
       :width="360"
       @on-change="handleCloseTechniciansSelectPopup"
     >
-      <div
-        slot="form"
-        class="team-setting__technicians-popover"
-      >
-        <div class="team-setting__technicians-select">
-          <el-input
-            v-model="techniciansSearchQuery"
-            placeholder="请输入姓名"
-            @input="handleInputTechniciansSearch"
-          />
-        </div>
+      <template #form>
         <div
-          v-if="techniciansSearchQuery && !technicianOptions.length && !fetchTechniciansLoading"
-          class="team-setting__empty-technicians-options"
-        >
-          {{ $attrs.empty || '系统未登记该员工，请先添加员工账号' }}
-        </div>
-        <ul
-          v-else
-          class="team-setting__technicians-options"
+          class="team-setting__technicians-popover"
         >
-          <li
-            class="team-setting__technicians-option"
-            v-for="item in technicianOptions"
-            :key="item[$attrs.showConfig.id]"
+          <div class="team-setting__technicians-select">
+            <el-input
+              v-model="techniciansSearchQuery"
+              placeholder="请输入姓名"
+              @input="handleInputTechniciansSearch"
+            />
+          </div>
+          <div
+            v-if="techniciansSearchQuery && !technicianOptions.length && !fetchTechniciansLoading"
+            class="team-setting__empty-technicians-options"
           >
-            <div class="team-setting__technicians-option-left">
-              {{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}
-            </div>
-            <el-button
-              v-if="item.is_selected"
-              type="text"
-              disabled
-            >
-              已添加
-            </el-button>
-            <el-button
-              v-else
-              type="text"
-              @click="handleAddTechnician($attrs.keyId, item)"
+            {{ attrs.empty || '系统未登记该员工，请先添加员工账号' }}
+          </div>
+          <ul
+            v-else
+            class="team-setting__technicians-options"
+          >
+            <li
+              class="team-setting__technicians-option"
+              v-for="item in technicianOptions"
+              :key="item[attrs.showConfig!.id]"
             >
-              添加
-            </el-button>
-          </li>
-        </ul>
-      </div>
-      <el-button
-        slot="reference"
-        type="text"
-        icon="el-icon-plus"
-      >
-        {{ title }}
-      </el-button>
+              <div class="team-setting__technicians-option-left">
+                {{ `${item[attrs.showConfig!.name]} | ${item.roles}` }}
+              </div>
+              <el-button
+                v-if="item.is_selected"
+                type="text"
+                disabled
+              >
+                已添加
+              </el-button>
+              <el-button
+                v-else
+                type="text"
+                @click="handleAddTechnician(attrs.keyId, item)"
+              >
+                添加
+              </el-button>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <template #reference>
+        <el-button
+          type="text"
+          :icon="Plus"
+        >
+          {{ title }}
+        </el-button>
+      </template>
     </PopoverForm>
   </div>
 </template>
 
-<script>
-import PopoverForm from '../PopoverForm'
-export default {
-  name: 'AddMembers',
-  components: {
-    PopoverForm
-  },
-  props: {
-    /** 成员数据 */
-    technicianOptions: Array,
-    /** 获取数据加载中 */
-    fetchTechniciansLoading: Boolean,
-    /** 弹窗标题 */
-    title: {
-      type: String,
-      default: '添加成员',
-    },
-  },
-  data() {
-    return {
-      techniciansSearchQuery: '',
-    }
-  },
-  watch: {
-  },
-  methods: {
-    handleCloseTechniciansSelectPopup(show) {
-      if (show) return;
-      this.techniciansSearchQuery = '';
-      this.$emit('update:technicianOptions', []);
-    },
-    handleInputTechniciansSearch(query) {
-      this.$emit('fetchTechniciansMethods', query);
-    },
-    handleAddTechnician(id, item) {
-      const query = { id, item };
-      this.$emit('handleAddTechnician', query);
-    },
-  },
-};
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import PopoverForm from '../PopoverForm/index.vue'
+
+defineOptions({ name: 'AddMembers' })
+
+interface IProps {
+  technicianOptions?: any[]
+  fetchTechniciansLoading?: boolean
+  title?: string
+}
+
+interface IEmits {
+  (e: 'update:technicianOptions', val: any[]): void
+  (e: 'fetchTechniciansMethods', query: string): void
+  (e: 'handleAddTechnician', query: { id: any; item: any }): void
+}
+
+withDefaults(defineProps<IProps>(), {
+  technicianOptions: () => [],
+  fetchTechniciansLoading: false,
+  title: '添加成员',
+})
+
+const emit = defineEmits<IEmits>()
+const attrs = useAttrs() as {
+  empty?: string
+  showConfig?: { id: string; name: string }
+  keyId?: any
+}
+
+const techniciansSearchQuery = ref('')
+
+const handleCloseTechniciansSelectPopup = (show: boolean) => {
+  if (show) return
+  techniciansSearchQuery.value = ''
+  emit('update:technicianOptions', [])
+}
+
+const handleInputTechniciansSearch = (query: string) => {
+  emit('fetchTechniciansMethods', query)
+}
+
+const handleAddTechnician = (id: any, item: any) => {
+  const query = { id, item }
+  emit('handleAddTechnician', query)
+}
 </script>
 
 <style lang="less">
@@ -111,6 +121,7 @@ export default {
     padding: 20px;
     height: 350px;
     overflow-y: auto;
+    overflow-x: hidden;
   }
   &__technicians-select {
     width: 320px;

package/src/components/AuditSteps/index.vue

@@ -1,86 +1,118 @@
 <template>
   <div class="audit-steps">
     <ElSteps direction="vertical">
-      <ElStep class="audit-steps__step-item" v-for="(item, index) in value" :key="index">
-        <div slot="icon">{{index + 1}}</div>
-        <div :class="{'el-name-box': item.id}" slot="description">
-          <span :class="[ 'audit-steps__step-order', {first: index===0} ]">{{index + 1}}</span>
-          <ElSelect
-            :value="item.employees"
-            @input="val => handleEditCandidate(val, index)"
-            multiple
-            :multiple-limit="maxSelect"
-            placeholder="请选择">
-            <ElOption
-              v-for="v in candidates"
-              :key="v.id"
-              :label="v.name"
-              :value="v.id" />
-          </ElSelect>
-          <i class="el-name" v-if="item.id">{{item.miniName}}</i>
-          <i class="el-icon-delete" v-if="index" @click="handleDeleteStep(index)" ></i>
-        </div>
+      <ElStep
+        class="audit-steps__step-item"
+        v-for="(item, index) in modelValue"
+        :key="index"
+      >
+        <template #icon>
+          {{ index + 1 }}
+        </template>
+        <template #description>
+          <div :class="{'el-name-box': item.id}">
+            <span :class="[ 'audit-steps__step-order', {first: index===0} ]">{{ index + 1 }}</span>
+            <ElSelect
+              :model-value="item.employees"
+              @update:model-value="val => handleEditCandidate(val, index)"
+              multiple
+              :multiple-limit="maxSelect"
+              placeholder="请选择"
+            >
+              <ElOption
+                v-for="v in candidates"
+                :key="v.id"
+                :label="v.name"
+                :value="v.id"
+              />
+            </ElSelect>
+            <i
+              class="el-name"
+              v-if="item.id"
+            >{{ item.miniName }}</i>
+            <el-icon
+              v-if="index"
+              class="el-icon-delete"
+              @click="handleDeleteStep(index)"
+            >
+              <Delete />
+            </el-icon>
+          </div>
+        </template>
       </ElStep>
     </ElSteps>
-    <ElButton v-if="isAdd" type="text" class="audit-steps__add" icon="circle-plus" @click="handleAddStep">添加审核环节</ElButton>
+    <ElButton
+      v-if="isAdd"
+      type="text"
+      class="audit-steps__add"
+      icon="circle-plus"
+      @click="handleAddStep"
+    >
+      添加审核环节
+    </ElButton>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'AuditSteps',
-  props: {
-    candidates: {
-      type: Array
-    },
-    value: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    maxSelect: {
-      type: Number,
-      default: 3
-    },
-    stepNum: {
-      type: Number,
-      default: 2
-    }
-  },
-  computed: {
-    isAdd () {
-      return this.value.length < this.stepNum
-    }
-  },
-  methods: {
-    syncSteps (modification) {
-      const _steps = [ ...this.value ]
-      this.$emit('input', modification(_steps))
-    },
-    handleEditCandidate (val, index) {
-      this.syncSteps(_steps => {
-        _steps[index].employees = val
-        return _steps
-      })
-    },
-    handleDeleteStep (i) {
-      this.syncSteps(_steps => {
-        _steps.splice(i, 1)
-        return _steps
-      })
-    },
-    handleAddStep () {
-      this.syncSteps(_steps => {
-        return _steps.concat([{ employees: [] }])
-      })
-    },
-    // 判断是不是每一个步骤都选有审核人
-    isValidateSteps () {
-      return !this.value.some(_steps => _steps.employees.length <= 0)
-    }
-  }
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Delete } from '@element-plus/icons-vue'
+import { ElSteps, ElStep, ElSelect, ElOption, ElButton } from 'element-plus'
+
+defineOptions({ name: 'AuditSteps' })
+
+interface StepItem {
+  employees: any[]
+  id?: any
+  miniName?: string
+}
+
+interface IProps {
+  candidates?: any[]
+  modelValue?: StepItem[]
+  maxSelect?: number
+  stepNum?: number
+}
+
+interface IEmits {
+  (e: 'update:modelValue', val: StepItem[]): void
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  candidates: () => [],
+  modelValue: () => [],
+  maxSelect: 3,
+  stepNum: 2,
+})
+
+const emit = defineEmits<IEmits>()
+
+const isAdd = computed(() => props.modelValue.length < props.stepNum)
+
+const syncSteps = (modification: (_steps: StepItem[]) => StepItem[]) => {
+  const _steps = [...props.modelValue]
+  emit('update:modelValue', modification(_steps))
+}
+
+const handleEditCandidate = (val: any[], index: number) => {
+  syncSteps(_steps => {
+    _steps[index].employees = val
+    return _steps
+  })
 }
+
+const handleDeleteStep = (i: number) => {
+  syncSteps(_steps => {
+    _steps.splice(i, 1)
+    return _steps
+  })
+}
+
+const handleAddStep = () => {
+  syncSteps(_steps => {
+    return _steps.concat([{ employees: [] }])
+  })
+}
+
 </script>
 
 <style lang="less">
@@ -104,6 +136,7 @@ export default {
       margin-left: 10px;
       font-size: 16px;
       cursor: pointer;
+      vertical-align: middle;
     }
   }
 

package/src/components/DemoComponent/index.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="demo-component__input">
-    <ElInput title="DemoComponent" lable="DemoComponent" />
+    <ElInput
+      title="DemoComponent"
+      lable="DemoComponent"
+    />
   </div>
 </template>
-<script>
-  export default{
-    name: 'DemoComponent'
-  }
+<script setup lang="ts">
+import { ElInput } from 'element-plus'
+
+defineOptions({ name: 'DemoComponent' })
 </script>
 
 <style lang="less">

package/src/components/EditableTable/bizHooks/useColumnHeaderOperation.ts

@@ -120,10 +120,11 @@ export function useColumnHeaderOperation({ props, tableDomRef, emit, showingColu
   }
 
   const closeSortAndFilterPopover = (exceptProp?: string) => {
-    document.querySelectorAll('span[data-popper-name]').forEach((item: any) => {
-      if (!exceptProp || exceptProp !== item.dataset.prop) {
-        item?.__vue__?.doClose?.();
-      }
+    document.querySelectorAll('.editable-table-sort-filter').forEach((item: any) => {
+      try {
+        const vm = item.__vueParentComponent?.proxy || item.__vue__;
+        vm?.doClose?.() || vm?.hide?.();
+      } catch {}
     });
   }
 

package/src/components/EditableTable/bizHooks/useDefaultOperation.ts

@@ -25,12 +25,16 @@ export function useDefaultOperation({ emit, pageSize, props, tableDomRef, hasExp
   }
 
   const closeOperationPopover = () => {
-    operationPopoverRef.value?.forEach((item) => item?.doClose());
+    const refs = operationPopoverRef.value;
+    if (!refs) return;
+    const list = Array.isArray(refs) ? refs : [refs];
+    list.forEach((item) => item?.doClose?.());
   }
 
   const closeAllExpandedRows = () => {
     if (!hasExpandRow) return
-    tableDomRef.value?.data.forEach((item) => {
+    const data = tableDomRef.value?.data ?? tableDomRef.value?.store?.states?.data?.value;
+    data?.forEach((item) => {
       tableDomRef.value?.toggleRowExpansion(item, false)
     })
   }
@@ -47,13 +51,17 @@ export function useDefaultOperation({ emit, pageSize, props, tableDomRef, hasExp
 
   const handleRowPinToTop = (scope) => {
     const { row, $index: index, store } = scope;
-    const dataList = store.states.data;
+    const dataList = store.states.data.value ?? store.states.data;
     const newList = [
       ...dataList.slice(0, index),
       ...dataList.slice(index + 1)
     ];
     newList.unshift({ ...row, isPinned: true });
-    store.states.data = newList;
+    if (typeof store.states.data.value !== 'undefined') {
+      store.states.data.value = newList;
+    } else {
+      store.states.data = newList;
+    }
     emit('row-pin-to-top', { row, rawIndex: index, page: props.currentPage, size: pageSize.value });
     closeOperationPopover();
   }

package/src/components/EditableTable/bizHooks/useDragSort.ts

@@ -188,14 +188,18 @@ export function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize,
   const handleDragDrop = (event, scope) => {
     if (!scope) return
     const { draggingIndex = 0, dropIndex = draggingIndex } = draggingData.value;
-    const dataList = scope.store.states.data;
+    const dataList = scope.store.states.data.value ?? scope.store.states.data;
     const movedRow = dataList[draggingIndex];
     const newList = [
       ...dataList.slice(0, +draggingIndex),
       ...dataList.slice(draggingIndex + 1)
     ];
     newList.splice(dropIndex, 0, movedRow);
-    scope.store.states.data = newList;
+    if (typeof scope.store.states.data.value !== 'undefined') {
+      scope.store.states.data.value = newList;
+    } else {
+      scope.store.states.data = newList;
+    }
     emit('row-drag-drop', {
       row: movedRow,
       fromIndex: draggingIndex,

package/src/components/EditableTable/bizHooks/useRowBgColor.ts

@@ -27,11 +27,15 @@ export function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
 
   const handleColorChange = async (colorId: number, scope) => {
     const { row, $index: rowIndex, store } = scope;
-    const dataList = store.states.data;
+    const dataList = store.states.data.value ?? store.states.data;
     const curRow = { ...dataList[rowIndex], colorId: +colorId };
     const newList = [...dataList];
     newList.splice(rowIndex, 1, curRow);
-    store.states.data = newList;
+    if (store.states.data.value !== undefined) {
+      store.states.data.value = newList;
+    } else {
+      store.states.data = newList;
+    }
     emit('row-bg-change', { colorId, row, rowIndex });
   };
 

package/src/components/EditableTable/bizHooks/useViewSetting.ts

@@ -115,7 +115,7 @@ export function useViewSetting({
     () => props.columnConfig,
     async(val) => {
       const _cache = localStorage.getItem(storageKey.value);
-      const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide).map(c => c.prop));
+      const setColumns = () => updateShowingColumns(val.filter(v => !v.defaultHide || v.isAlwaysShow).map(c => c.prop));
       if (!_cache) {
         setColumns();
         leftFixedColumnCount.value = props.leftFixedCount as number;
@@ -156,6 +156,7 @@ export function useViewSetting({
 
           updateShowingColumns(
             val.filter(v => {
+              if (v.isAlwaysShow) return true;
               return cache.config.fields[v.prop] ? !cache.config.fields[v.prop].hidden : !v.defaultHide
             }).sort((a, b) => {
               return (cache.config.fields[a.prop]?.order ?? 0) - (cache.config.fields[b.prop]?.order ?? 0)

package/src/components/EditableTable/features/bizColorSelect.vue

@@ -1,7 +1,8 @@
 <!-- 行颜色选择组件 -->
 <template>
   <el-popover
-    v-model="visible"
+    v-model:visible="visible"
+    :width="'auto'"
     placement="right"
     trigger="click"
     popper-class="editable-table-color-popover"
@@ -21,7 +22,7 @@
       </div>
     </div>
 
-    <div slot="reference">
+    <template #reference>
       <div
         v-if="isDefaultColor(scope.row.colorId)"
         class="editable-table__color-icon"
@@ -31,7 +32,7 @@
         class="editable-table__selected-color"
         :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
       />
-    </div>
+    </template>
   </el-popover>
 </template>