adtec-core-package 2.1.8 → 2.2.0

package/src/components/Table/ElTableColumnEdit.vue

@@ -1,265 +1,265 @@
-<!--创建人 丁盼-->
-<!--说明: ElTableColumnTable-->
-<!--创建时间: 2024/11/27 上午11:56-->
-<!--修改时间: 2024/11/27 上午11:56-->
-<template>
-  <div
-    @click.stop.prevent="displayClick"
-    :style=" { width: '100%', minHeight: '35px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: props.justifyContent }"
-    ref="ref_divView"
-    :id="guid"
-    :class="getClass" >
-    <!--    <FocusLock v-if="display" :no-focus-guards="false" class="foucs-lock">-->
-    <!--      <slot name="edit" v-if="display" tabindex="9"></slot>-->
-    <!--    </FocusLock>-->
-    <slot name="edit" v-if="display" tabindex="9"></slot>
-    <slot v-else name="view"></slot>
-  </div>
-  <div class="box" v-if="required" v-show="getRequiredComp"></div>
-</template>
-<script setup lang="ts">
-import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useActiveElement, useEventBus, useFocus, watchPausable } from '@vueuse/core'
-// import FocusLock from 'vue-focus-lock'
-const ref_divView = ref()
-import { v4 as uuidv4 } from 'uuid'
-// const { focused } = useFocusWithin(ref_divView)
-const { focused: paragraphFocus } = useFocus(ref_divView)
-const display = ref(false)
-const guid = uuidv4()
-const bus = useEventBus<string>('elTableColumnEdit')
-const bus1 = useEventBus<string>(guid)
-const busDisplayClick = useEventBus<string>(guid + 'displayClick')
-// const props = defineProps<{
-//   tableRef: any
-// }>()
-const getRequiredComp = computed(() => {
-  if (props.scope?.row[props.scope.column.property]) {
-    return false
-  } else {
-    return true
-  }
-})
-const activeElement = useActiveElement()
-watch(activeElement, (el: any) => {
-  // //判断当前点击元素是否在表格范围内
-  if (props.isEdit) {
-    let el1: any = el
-    let b = true
-    let c = false
-    let f = true
-    while (b) {
-      if (el1.className?.indexOf('el-table') > -1) {
-        c = true
-        b = false
-      } else if (el1.className?.indexOf('el-popper') > -1) {
-        b = false
-        f = false
-      } else {
-        el1 = el1.parentNode
-        if (el1 === null) {
-          b = false
-        }
-      }
-    }
-    if (f) {
-      if (!c) {
-        paragraphFocus.value = false
-        display.value = false
-      } else {
-        //判断当前点击元素ID 是否是当前组件ID
-        let el2: any = el
-        let d = true
-        let e = false
-        while (d) {
-          if (el2.id === guid) {
-            d = false
-            e = true
-          } else {
-            el2 = el2.parentNode
-            if (el2 === null) {
-              d = false
-            }
-          }
-        }
-        if (e) {
-          display.value = true
-        } else {
-          display.value = false
-        }
-      }
-    }
-  }
-})
-const instance = getCurrentInstance()
-const table = ref()
-const showOverflowTooltip = ref(false)
-const oldValue = ref()
-const props = withDefaults(
-  defineProps<{
-    scope?: any
-    /**
-     * @type boolean
-     * @default ''
-     * @description 设置是否记录编辑状态，默认为false
-     */
-    enableEditingStatus?: boolean
-    isEdit?: boolean
-    required?: boolean
-    justifyContent?: string
-  }>(),
-  {
-    /**
-     * @type string
-     * @default ''
-     * @description 设置是否记录编辑状态，默认为falseenableEditingStatus
-     */
-    enableEditingStatus: false,
-    isEdit: true,
-    required: false,
-    justifyContent: 'flex-start'
-  },
-)
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { stop, pause, resume } = watchPausable(
-  () => props.scope?.row[props.scope.column.property],
-  (v) => {
-    let val
-    if (oldValue.value === undefined || oldValue.value === null) {
-      val = ''
-    } else {
-      val = oldValue.value + ''
-    }
-    if (v + '' !== val) {
-      if (!props.scope.row.isRowEditArr) {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.scope.row.isRowEditArr = []
-      }
-      if (props.scope.row.isRowEditArr.indexOf(props.scope.column.property) === -1) {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.scope.row.isRowEditArr.push(props.scope.column.property)
-      }
-    } else {
-      if (props.scope.row.isRowEditArr) {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.scope.row.isRowEditArr.splice(
-          props.scope.row.isRowEditArr.indexOf(props.scope.column.property),
-          1,
-        )
-      }
-    }
-    if (props.scope.row.isRowEditArr && props.scope.row.isRowEditArr.length > 0) {
-      // eslint-disable-next-line vue/no-mutating-props
-      props.scope.row.isRowEdit = true
-    } else {
-      // eslint-disable-next-line vue/no-mutating-props
-      props.scope.row.isRowEdit = false
-    }
-  },
-)
-pause()
-onMounted(() => {
-  // if (props.enableEditingStatus) {
-  //   resume()
-  // } else {
-  //   pause()
-  // }
-  if (props.scope) {
-    oldValue.value = props.scope.row[props.scope.column.property]
-  }
-  // props.scope.column.property.required = props.required
-  let b = true
-  let instance1: any = instance
-  while (b) {
-    if (instance1?.type?.name === 'ElTable' || instance1?.type?.__name === 'ElTable') {
-      b = false
-    } else {
-      instance1 = instance1?.parent
-      if (instance1 === null) {
-        b = false
-      }
-    }
-  }
-  table.value = instance1
-  showOverflowTooltip.value = table.value?.props?.showOverflowTooltip
-  busDisplayClick.on(displayClick)
-})
-onUnmounted(() => {
-  bus.off(listener)
-  bus1.off(listener)
-  busDisplayClick.off(displayClick)
-})
-const getClass = computed(() => {
-  let className = showOverflowTooltip.value ? 'showOverflowTooltip' : ''
-  if (props.isEdit) {
-    return (className += ' el-table-column-edit')
-  } else {
-    return (className += ' el-table-column-view')
-  }
-})
-function listener() {
-  display.value = false
-  bus.off(listener)
-  bus1.off(listener)
-}
-const displayClick = () => {
-  if (props.isEdit) {
-    bus.emit()
-    bus.on(listener)
-    bus1.on(listener)
-    resume()
-    display.value = true
-    nextTick(()=>{
-      ref_divView.value.querySelector('input')?.focus()
-    })
-  }
-}
-</script>
-<style scoped lang="scss">
-.showOverflowTooltip {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.foucs-lock {
-  :deep {
-    div[data-lock=''] {
-      display: flex;
-      margin-top: 1.5px;
-    }
-  }
-}
-//.box ~ .parent {
-//  background-color: blue;
-//}
-
-.box {
-  position: absolute;
-  top: 0;
-  right: 0;
-  //width: 5px;
-  //height: 5px;
-}
-/* 创建三角形 */
-.box::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  border-width: 0 5px 0px 0;
-  border-style: solid;
-  border-color: transparent;
-  z-index: 1;
-}
-
-/* 创建三角形的边框 */
-.box::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  border-width: 0 5px 5px 0;
-  border-style: solid;
-  border-color: transparent #ff0000 transparent transparent;
-}
-</style>
+<!--创建人 丁盼-->
+<!--说明: ElTableColumnTable-->
+<!--创建时间: 2024/11/27 上午11:56-->
+<!--修改时间: 2024/11/27 上午11:56-->
+<template>
+  <div
+    @click.stop.prevent="displayClick"
+    :style=" { width: '100%', minHeight: '35px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: props.justifyContent }"
+    ref="ref_divView"
+    :id="guid"
+    :class="getClass" >
+    <!--    <FocusLock v-if="display" :no-focus-guards="false" class="foucs-lock">-->
+    <!--      <slot name="edit" v-if="display" tabindex="9"></slot>-->
+    <!--    </FocusLock>-->
+    <slot name="edit" v-if="display" tabindex="9"></slot>
+    <slot v-else name="view"></slot>
+  </div>
+  <div class="box" v-if="required" v-show="getRequiredComp"></div>
+</template>
+<script setup lang="ts">
+import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useActiveElement, useEventBus, useFocus, watchPausable } from '@vueuse/core'
+// import FocusLock from 'vue-focus-lock'
+const ref_divView = ref()
+import { v4 as uuidv4 } from 'uuid'
+// const { focused } = useFocusWithin(ref_divView)
+const { focused: paragraphFocus } = useFocus(ref_divView)
+const display = ref(false)
+const guid = uuidv4()
+const bus = useEventBus<string>('elTableColumnEdit')
+const bus1 = useEventBus<string>(guid)
+const busDisplayClick = useEventBus<string>(guid + 'displayClick')
+// const props = defineProps<{
+//   tableRef: any
+// }>()
+const getRequiredComp = computed(() => {
+  if (props.scope?.row[props.scope.column.property]) {
+    return false
+  } else {
+    return true
+  }
+})
+const activeElement = useActiveElement()
+watch(activeElement, (el: any) => {
+  // //判断当前点击元素是否在表格范围内
+  if (props.isEdit) {
+    let el1: any = el
+    let b = true
+    let c = false
+    let f = true
+    while (b) {
+      if (el1.className?.indexOf('el-table') > -1) {
+        c = true
+        b = false
+      } else if (el1.className?.indexOf('el-popper') > -1) {
+        b = false
+        f = false
+      } else {
+        el1 = el1.parentNode
+        if (el1 === null) {
+          b = false
+        }
+      }
+    }
+    if (f) {
+      if (!c) {
+        paragraphFocus.value = false
+        display.value = false
+      } else {
+        //判断当前点击元素ID 是否是当前组件ID
+        let el2: any = el
+        let d = true
+        let e = false
+        while (d) {
+          if (el2.id === guid) {
+            d = false
+            e = true
+          } else {
+            el2 = el2.parentNode
+            if (el2 === null) {
+              d = false
+            }
+          }
+        }
+        if (e) {
+          display.value = true
+        } else {
+          display.value = false
+        }
+      }
+    }
+  }
+})
+const instance = getCurrentInstance()
+const table = ref()
+const showOverflowTooltip = ref(false)
+const oldValue = ref()
+const props = withDefaults(
+  defineProps<{
+    scope?: any
+    /**
+     * @type boolean
+     * @default ''
+     * @description 设置是否记录编辑状态，默认为false
+     */
+    enableEditingStatus?: boolean
+    isEdit?: boolean
+    required?: boolean
+    justifyContent?: string
+  }>(),
+  {
+    /**
+     * @type string
+     * @default ''
+     * @description 设置是否记录编辑状态，默认为falseenableEditingStatus
+     */
+    enableEditingStatus: false,
+    isEdit: true,
+    required: false,
+    justifyContent: 'flex-start'
+  },
+)
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { stop, pause, resume } = watchPausable(
+  () => props.scope?.row[props.scope.column.property],
+  (v) => {
+    let val
+    if (oldValue.value === undefined || oldValue.value === null) {
+      val = ''
+    } else {
+      val = oldValue.value + ''
+    }
+    if (v + '' !== val) {
+      if (!props.scope.row.isRowEditArr) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.scope.row.isRowEditArr = []
+      }
+      if (props.scope.row.isRowEditArr.indexOf(props.scope.column.property) === -1) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.scope.row.isRowEditArr.push(props.scope.column.property)
+      }
+    } else {
+      if (props.scope.row.isRowEditArr) {
+        // eslint-disable-next-line vue/no-mutating-props
+        props.scope.row.isRowEditArr.splice(
+          props.scope.row.isRowEditArr.indexOf(props.scope.column.property),
+          1,
+        )
+      }
+    }
+    if (props.scope.row.isRowEditArr && props.scope.row.isRowEditArr.length > 0) {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.scope.row.isRowEdit = true
+    } else {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.scope.row.isRowEdit = false
+    }
+  },
+)
+pause()
+onMounted(() => {
+  // if (props.enableEditingStatus) {
+  //   resume()
+  // } else {
+  //   pause()
+  // }
+  if (props.scope) {
+    oldValue.value = props.scope.row[props.scope.column.property]
+  }
+  // props.scope.column.property.required = props.required
+  let b = true
+  let instance1: any = instance
+  while (b) {
+    if (instance1?.type?.name === 'ElTable' || instance1?.type?.__name === 'ElTable') {
+      b = false
+    } else {
+      instance1 = instance1?.parent
+      if (instance1 === null) {
+        b = false
+      }
+    }
+  }
+  table.value = instance1
+  showOverflowTooltip.value = table.value?.props?.showOverflowTooltip
+  busDisplayClick.on(displayClick)
+})
+onUnmounted(() => {
+  bus.off(listener)
+  bus1.off(listener)
+  busDisplayClick.off(displayClick)
+})
+const getClass = computed(() => {
+  let className = showOverflowTooltip.value ? 'showOverflowTooltip' : ''
+  if (props.isEdit) {
+    return (className += ' el-table-column-edit')
+  } else {
+    return (className += ' el-table-column-view')
+  }
+})
+function listener() {
+  display.value = false
+  bus.off(listener)
+  bus1.off(listener)
+}
+const displayClick = () => {
+  if (props.isEdit) {
+    bus.emit()
+    bus.on(listener)
+    bus1.on(listener)
+    resume()
+    display.value = true
+    nextTick(()=>{
+      ref_divView.value.querySelector('input')?.focus()
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+.showOverflowTooltip {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.foucs-lock {
+  :deep {
+    div[data-lock=''] {
+      display: flex;
+      margin-top: 1.5px;
+    }
+  }
+}
+//.box ~ .parent {
+//  background-color: blue;
+//}
+
+.box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  //width: 5px;
+  //height: 5px;
+}
+/* 创建三角形 */
+.box::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-width: 0 5px 0px 0;
+  border-style: solid;
+  border-color: transparent;
+  z-index: 1;
+}
+
+/* 创建三角形的边框 */
+.box::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-width: 0 5px 5px 0;
+  border-style: solid;
+  border-color: transparent #ff0000 transparent transparent;
+}
+</style>

package/src/components/Table/ElTableTool.ts

@@ -1,37 +1,37 @@
-import { ElMessage } from 'element-plus'
-
-/**
- * Create by丁盼
- * 说明: tableTool
- * 创建时间: 2025/2/28 09:42
- * 修改时间: 2025/2/28 09:42
- */
-export default {
-  /**
-   * 校验表格数据是否为空
-   * @param table 表格对象
-   * @param rules 校验规则
-   */
-  validateTableData(table: any,rules:any): Boolean {
-    try {
-      const data=table.value?table.value.data:table.data
-      data.forEach((row: any,index:number) => {
-        for(let v in rules){
-          if (!row[v]) {
-            let msg=rules[v].message
-            if(msg){
-              msg=msg.replace('{index}',index+1)
-            }
-            throw new Error(msg)
-          }
-        }
-      })
-      return true
-    } catch (e:any) {
-      if(e.message) {
-        ElMessage.warning(e.message)
-      }
-      return false
-    }
-  },
-}
+import { ElMessage } from 'element-plus'
+
+/**
+ * Create by丁盼
+ * 说明: tableTool
+ * 创建时间: 2025/2/28 09:42
+ * 修改时间: 2025/2/28 09:42
+ */
+export default {
+  /**
+   * 校验表格数据是否为空
+   * @param table 表格对象
+   * @param rules 校验规则
+   */
+  validateTableData(table: any,rules:any): Boolean {
+    try {
+      const data=table.value?table.value.data:table.data
+      data.forEach((row: any,index:number) => {
+        for(let v in rules){
+          if (!row[v]) {
+            let msg=rules[v].message
+            if(msg){
+              msg=msg.replace('{index}',index+1)
+            }
+            throw new Error(msg)
+          }
+        }
+      })
+      return true
+    } catch (e:any) {
+      if(e.message) {
+        ElMessage.warning(e.message)
+      }
+      return false
+    }
+  },
+}