znyg-frontend-common 1.1.14 → 1.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/znTable/src/components/ColSetting.vue2.mjs +1 -1
- package/es/components/znTable/src/components/ColSetting.vue2.mjs.map +1 -1
- package/es/index.mjs +1 -1
- package/es/index.mjs.map +1 -1
- package/lib/components/znTable/src/components/ColSetting.vue2.js +1 -1
- package/lib/components/znTable/src/components/ColSetting.vue2.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{defineComponent as e,ref as l,getCurrentInstance as t,watch as a,nextTick as o,onUnmounted as n,resolveComponent as r,createElementBlock as s,openBlock as i,Fragment as d,createCommentVNode as u,createVNode as c,withCtx as m,createElementVNode as p,unref as f,normalizeClass as h,renderSlot as v}from"vue";import g from"../assets/notData.png.mjs";import b from"sortablejs";import{DCaret as y}from"@element-plus/icons-vue";var w=Object.defineProperty,S=(e,l)=>w(e,"name",{value:l,configurable:!0});const U={class:"col-setting-header",style:{display:"flex","align-items":"center"}},C=["id"],V={style:{display:"flex","align-items":"center"}},_={class:"table-main"};var x=e({__name:"ColSetting",props:{colSetting:{type:Array,required:!0}},emits:["update:colSetting","updateColumns"],setup(e,{expose:w,emit:x}){const O=e,T=x,k=l(!1),I=l();let J=null;const N=t(),j=l([]),A=l(!1);let E=null;const $=S(((e,l)=>{if(N&&!N.isUnmounted)try{T(e,l)}catch(l){console.warn(`发送事件 ${e} 时出错:`,l)}else console.warn("组件已销毁，跳过事件发送",{hasInstance:!!N,isUnmounted:N?.isUnmounted})}),"safeEmit"),q=S((e=>{E&&clearTimeout(E),E=window.setTimeout((()=>{if(N&&!N.isUnmounted)try{const l=JSON.parse(JSON.stringify(e));$("updateColumns",l)}catch(e){console.warn("更新数据时出错:",e)}}),100)}),"debouncedUpdate");a((()=>O.colSetting),(e=>{if(
|
|
1
|
+
import{defineComponent as e,ref as l,getCurrentInstance as t,watch as a,nextTick as o,onUnmounted as n,resolveComponent as r,createElementBlock as s,openBlock as i,Fragment as d,createCommentVNode as u,createVNode as c,withCtx as m,createElementVNode as p,unref as f,normalizeClass as h,renderSlot as v}from"vue";import g from"../assets/notData.png.mjs";import b from"sortablejs";import{DCaret as y}from"@element-plus/icons-vue";var w=Object.defineProperty,S=(e,l)=>w(e,"name",{value:l,configurable:!0});const U={class:"col-setting-header",style:{display:"flex","align-items":"center"}},C=["id"],V={style:{display:"flex","align-items":"center"}},_={class:"table-main"};var x=e({__name:"ColSetting",props:{colSetting:{type:Array,required:!0}},emits:["update:colSetting","updateColumns"],setup(e,{expose:w,emit:x}){const O=e,T=x,k=l(!1),I=l();let J=null;const N=t(),j=l([]),A=l(!1);let E=null;const $=S(((e,l)=>{if(N&&!N.isUnmounted)try{T(e,l)}catch(l){console.warn(`发送事件 ${e} 时出错:`,l)}else console.warn("组件已销毁，跳过事件发送",{hasInstance:!!N,isUnmounted:N?.isUnmounted})}),"safeEmit"),q=S((e=>{E&&clearTimeout(E),E=window.setTimeout((()=>{if(N&&!N.isUnmounted)try{const l=JSON.parse(JSON.stringify(e));$("updateColumns",l)}catch(e){console.warn("更新数据时出错:",e)}}),100)}),"debouncedUpdate");a((()=>O.colSetting),(e=>{if(e&&Array.isArray(e)){A.value=!0;try{j.value=JSON.parse(JSON.stringify(e))}catch(l){console.warn("更新本地列设置时出错:",l),j.value=[...e]}o((()=>{setTimeout((()=>{A.value=!1}),50)}))}}),{immediate:!0,deep:!0});const D=S((()=>{N&&!N.isUnmounted&&o((()=>{if(N&&!N.isUnmounted&&I.value)try{const e=I.value.$el?.querySelector("tbody");if(!e)return void console.warn("未找到tbody元素");if(J){try{J.destroy()}catch(e){console.warn("销毁sortable实例时出错:",e)}J=null}J=b.create(e,{handle:".drag-handle",animation:300,ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",forceFallback:!0,fallbackTolerance:3,
|
|
2
2
|
// 禁用原生HTML5拖拽
|
|
3
3
|
dragoverBubble:!1,removeCloneOnHide:!0,onStart:S((e=>{if(!e.item||!e.from||!N||N.isUnmounted)return!1}),"onStart"),onEnd:S((e=>{if(!N||N.isUnmounted)return;if(A.value)return;const{oldIndex:l,newIndex:t}=e;if(void 0!==l&&void 0!==t&&l!==t&&!(l<0||t<0||l>=j.value.length||t>=j.value.length))try{const e=[...j.value],a=e.splice(l,1)[0];a&&(e.splice(t,0,a),j.value=e,q(e))}catch(e){console.warn("拖拽排序时出错:",e)}}),"onEnd")})}catch(e){console.warn("初始化sortable时出错:",e)}}))}),"initSortable"),H=S((()=>{N&&!N.isUnmounted&&(k.value=!0,setTimeout((()=>{N&&!N.isUnmounted&&D()}),200))}),"openColSetting"),z=S((()=>{N&&!N.isUnmounted&&(k.value=!1)}),"closeColSetting"),B=S((()=>{if(N&&!N.isUnmounted&&!A.value)try{q(j.value)}catch(e){console.warn("开关切换时出错:",e)}}),"handleSwitchChange");return a(k,(e=>{if(!e&&J)try{J.destroy(),J=null}catch(e){console.warn("关闭抽屉时销毁sortable实例出错:",e)}})),n((()=>{if(E&&(clearTimeout(E),E=null),J)try{J.destroy(),J=null}catch(e){console.warn("组件销毁时清理sortable实例出错:",e)}})),w({openColSetting:H,closeColSetting:z}),(e,l)=>{const t=r("el-icon"),a=r("el-table-column"),o=r("el-switch"),n=r("el-table"),b=r("el-drawer");return i(),s(d,null,[u(" 列设置 "),c(b,{modelValue:k.value,"onUpdate:modelValue":l[0]||(l[0]=e=>k.value=e),title:"列设置",size:"450px"},{header:m((({close:l,titleId:t,titleClass:a})=>[p("div",U,[p("h4",{id:t,class:h(a)},"列设置",10,C),p("div",V,[u(" 列设置头部插槽 "),v(e.$slots,"colSettingHeader")])])])),default:m((()=>[p("div",_,[c(n,{ref_key:"tableRef",ref:I,data:j.value,border:!0,"row-key":"prop","default-expand-all":"","tree-props":{children:"_children"}},{empty:m((()=>l[1]||(l[1]=[p("div",{class:"table-empty"},[p("img",{src:g,alt:"notData"}),p("div",null,"暂无可配置列")],-1
|
|
4
4
|
/* HOISTED */)]))),default:m((()=>[c(a,{align:"center",label:"拖拽",width:"60"},{default:m((()=>[c(t,{class:"drag-handle",style:{color:"#409eff",cursor:"move"}},{default:m((()=>[c(f(y))])),_:1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColSetting.vue2.mjs","sources":["../../../../../../../packages/components/znTable/src/components/ColSetting.vue"],"sourcesContent":["<template>\n <!-- 列设置 -->\n <el-drawer v-model=\"drawerVisible\" title=\"列设置\" size=\"450px\">\n <!-- 自定义头部 -->\n <template #header=\"{ close, titleId, titleClass }\">\n <div class=\"col-setting-header\" style=\"display: flex; align-items: center;\">\n <h4 :id=\"titleId\" :class=\"titleClass\">列设置</h4>\n <div style=\"display: flex; align-items: center;\">\n <!-- 列设置头部插槽 -->\n <slot name=\"colSettingHeader\"></slot>\n </div>\n </div>\n </template>\n\n <div class=\"table-main\">\n <el-table ref=\"tableRef\" :data=\"localColSetting\" :border=\"true\" row-key=\"prop\" default-expand-all :tree-props=\"{ children: '_children' }\">\n <el-table-column align=\"center\" label=\"拖拽\" width=\"60\">\n <template #default>\n <el-icon class=\"drag-handle\" style=\" color: #409eff;cursor: move\">\n <DCaret />\n </el-icon>\n </template>\n </el-table-column>\n <el-table-column prop=\"label\" align=\"center\" label=\"列名\" />\n <el-table-column v-slot=\"scope\" prop=\"isShow\" align=\"center\" label=\"显示\">\n <el-switch v-model=\"scope.row.isShow\" @change=\"handleSwitchChange\"></el-switch>\n </el-table-column>\n <el-table-column v-slot=\"scope\" prop=\"sortable\" align=\"center\" label=\"排序\">\n <el-switch v-model=\"scope.row.sortable\" @change=\"handleSwitchChange\"></el-switch>\n </el-table-column>\n <template #empty>\n <div class=\"table-empty\">\n <img src=\"../assets/notData.png\" alt=\"notData\" />\n <div>暂无可配置列</div>\n </div>\n </template>\n </el-table>\n </div>\n </el-drawer>\n</template>\n\n<script setup lang=\"ts\" name=\"ColSetting\">\n import { nextTick, onMounted, onUnmounted, ref, watch, getCurrentInstance } from 'vue'\n import Sortable from 'sortablejs'\n\n import { ColumnProps } from '../interface'\n import { DCaret } from '@element-plus/icons-vue'\n\n const props = defineProps({\n colSetting: { type: Array, required: true }\n})\n const emit = defineEmits(['update:colSetting', 'updateColumns'])\n\n const drawerVisible = ref<boolean>(false)\n const tableRef = ref()\n let sortableInstance: Sortable | null = null\n\n // 获取当前组件实例，用于检查组件是否已销毁\n const instance = getCurrentInstance()\n\n // 添加本地状态\n const localColSetting = ref<ColumnProps[]>([])\n\n // 添加更新标志，防止循环更新\n const isUpdatingFromParent = ref(false)\n\n // 防抖标志\n let updateTimer: number | null = null\n\n // 安全的emit函数\n const safeEmit = (eventName: string, data: any) => {\n // console.log('safeEmit调用:', {\n // eventName,\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted,\n // dataLength: Array.isArray(data) ? data.length : 'not array'\n // })\n\n // 检查组件实例是否还存在\n if (!instance || instance.isUnmounted) {\n console.warn('组件已销毁，跳过事件发送', {\n hasInstance: !!instance,\n isUnmounted: instance?.isUnmounted\n })\n return\n }\n\n try {\n // console.log('正在发送事件:', eventName)\n emit(eventName as any, data)\n // console.log('事件发送成功:', eventName)\n } catch (error) {\n console.warn(`发送事件 ${eventName} 时出错:`, error)\n }\n }\n\n // 防抖的更新函数\n const debouncedUpdate = (data: ColumnProps[]) => {\n // console.log('debouncedUpdate调用:', {\n // hasData: !!data,\n // dataLength: Array.isArray(data) ? data.length : 'not array',\n // hasTimer: !!updateTimer\n // })\n\n if (updateTimer) {\n // console.log('清除之前的定时器')\n clearTimeout(updateTimer)\n }\n\n updateTimer = window.setTimeout(() => {\n // console.log('防抖定时器执行:', {\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted\n // })\n\n if (!instance || instance.isUnmounted) {\n // console.warn('防抖更新时组件已销毁')\n return\n }\n\n try {\n // 深拷贝数据避免响应式问题\n const clonedData = JSON.parse(JSON.stringify(data))\n // console.log('开始发送防抖更新事件')\n // safeEmit('update:colSetting', clonedData) // 移除这个事件，避免双重更新\n safeEmit('updateColumns', clonedData)\n } catch (error) {\n console.warn('更新数据时出错:', error)\n }\n }, 100) // 100ms防抖\n }\n\n // 监听 props 变化，更新本地状态\n watch(\n () => props.colSetting,\n (newVal) => {\n if (!newVal || !Array.isArray(newVal)) return\n\n // 设置标志，表示正在从父组件更新\n isUpdatingFromParent.value = true\n let filterData=newVal.filter(item=>item.isShow)\n try {\n localColSetting.value = JSON.parse(JSON.stringify(filterData))\n } catch (error) {\n console.warn('更新本地列设置时出错:', error)\n localColSetting.value = [...filterData]\n }\n\n // 延迟重置标志，确保本次更新完成\n nextTick(() => {\n setTimeout(() => {\n isUpdatingFromParent.value = false\n }, 50)\n })\n },\n { immediate: true, deep: true }\n )\n\n // 初始化拖拽排序\n const initSortable = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n nextTick(() => {\n if (!instance || instance.isUnmounted || !tableRef.value) {\n return\n }\n\n try {\n const tbody = tableRef.value.$el?.querySelector('tbody')\n if (!tbody) {\n console.warn('未找到tbody元素')\n return\n }\n\n // 销毁之前的实例\n if (sortableInstance) {\n try {\n sortableInstance.destroy()\n } catch (error) {\n console.warn('销毁sortable实例时出错:', error)\n }\n sortableInstance = null\n }\n\n sortableInstance = Sortable.create(tbody, {\n handle: '.drag-handle',\n animation: 300,\n ghostClass: 'sortable-ghost',\n chosenClass: 'sortable-chosen',\n dragClass: 'sortable-drag',\n forceFallback: true,\n fallbackTolerance: 3,\n // 禁用原生HTML5拖拽\n dragoverBubble: false,\n removeCloneOnHide: true,\n onStart: (evt) => {\n if (!evt.item || !evt.from || !instance || instance.isUnmounted) {\n return false\n }\n },\n onEnd: (evt) => {\n // 检查组件状态\n if (!instance || instance.isUnmounted) {\n return\n }\n\n // 如果正在从父组件更新，跳过事件发送\n if (isUpdatingFromParent.value) {\n return\n }\n\n const { oldIndex, newIndex } = evt\n\n if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {\n return\n }\n\n if (oldIndex < 0 || newIndex < 0 || oldIndex >= localColSetting.value.length || newIndex >= localColSetting.value.length) {\n return\n }\n\n try {\n const newData = [...localColSetting.value]\n const movedItem = newData.splice(oldIndex, 1)[0]\n\n if (movedItem) {\n newData.splice(newIndex, 0, movedItem)\n localColSetting.value = newData\n\n // 使用防抖更新\n debouncedUpdate(newData)\n }\n } catch (error) {\n console.warn('拖拽排序时出错:', error)\n }\n }\n })\n } catch (error) {\n console.warn('初始化sortable时出错:', error)\n }\n })\n }\n\n const openColSetting = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n drawerVisible.value = true\n\n // 延迟初始化拖拽\n setTimeout(() => {\n if (!instance || instance.isUnmounted) {\n return\n }\n initSortable()\n }, 200)\n }\n\n const closeColSetting = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n drawerVisible.value = false\n }\n\n const handleSwitchChange = () => {\n // console.log('handleSwitchChange调用:', {\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted,\n // localColSettingLength: localColSetting.value.length\n // })\n\n if (!instance || instance.isUnmounted) {\n // console.warn('开关切换时组件已销毁')\n return\n }\n\n // 如果正在从父组件更新，跳过事件发送\n if (isUpdatingFromParent.value) {\n return\n }\n\n try {\n // console.log('开关切换，准备防抖更新')\n // 使用防抖更新\n debouncedUpdate(localColSetting.value)\n } catch (error) {\n console.warn('开关切换时出错:', error)\n }\n }\n\n // 监听抽屉关闭，清理拖拽实例\n watch(drawerVisible, (newVal) => {\n if (!newVal && sortableInstance) {\n try {\n sortableInstance.destroy()\n sortableInstance = null\n } catch (error) {\n console.warn('关闭抽屉时销毁sortable实例出错:', error)\n }\n }\n })\n\n // 组件销毁时清理\n onUnmounted(() => {\n if (updateTimer) {\n clearTimeout(updateTimer)\n updateTimer = null\n }\n\n if (sortableInstance) {\n try {\n sortableInstance.destroy()\n sortableInstance = null\n } catch (error) {\n console.warn('组件销毁时清理sortable实例出错:', error)\n }\n }\n })\n\n defineExpose({\n openColSetting,\n closeColSetting\n })\n</script>\n"],"names":["props","__props","emit","__emit","drawerVisible","ref","tableRef","sortableInstance","instance","getCurrentInstance","localColSetting","isUpdatingFromParent","updateTimer","safeEmit","__name","eventName","data","isUnmounted","error","console","warn","hasInstance","debouncedUpdate","clearTimeout","window","setTimeout","clonedData","JSON","parse","stringify","watch","colSetting","newVal","Array","isArray","value","filterData","filter","item","isShow","nextTick","immediate","deep","initSortable","tbody","$el","querySelector","destroy","Sortable","create","handle","animation","ghostClass","chosenClass","dragClass","forceFallback","fallbackTolerance","dragoverBubble","removeCloneOnHide","onStart","evt","from","onEnd","oldIndex","newIndex","length","newData","movedItem","splice","openColSetting","closeColSetting","handleSwitchChange","onUnmounted","__expose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ColSetting.vue2.mjs","sources":["../../../../../../../packages/components/znTable/src/components/ColSetting.vue"],"sourcesContent":["<template>\n <!-- 列设置 -->\n <el-drawer v-model=\"drawerVisible\" title=\"列设置\" size=\"450px\">\n <!-- 自定义头部 -->\n <template #header=\"{ close, titleId, titleClass }\">\n <div class=\"col-setting-header\" style=\"display: flex; align-items: center;\">\n <h4 :id=\"titleId\" :class=\"titleClass\">列设置</h4>\n <div style=\"display: flex; align-items: center;\">\n <!-- 列设置头部插槽 -->\n <slot name=\"colSettingHeader\"></slot>\n </div>\n </div>\n </template>\n\n <div class=\"table-main\">\n <el-table ref=\"tableRef\" :data=\"localColSetting\" :border=\"true\" row-key=\"prop\" default-expand-all :tree-props=\"{ children: '_children' }\">\n <el-table-column align=\"center\" label=\"拖拽\" width=\"60\">\n <template #default>\n <el-icon class=\"drag-handle\" style=\" color: #409eff;cursor: move\">\n <DCaret />\n </el-icon>\n </template>\n </el-table-column>\n <el-table-column prop=\"label\" align=\"center\" label=\"列名\" />\n <el-table-column v-slot=\"scope\" prop=\"isShow\" align=\"center\" label=\"显示\">\n <el-switch v-model=\"scope.row.isShow\" @change=\"handleSwitchChange\"></el-switch>\n </el-table-column>\n <el-table-column v-slot=\"scope\" prop=\"sortable\" align=\"center\" label=\"排序\">\n <el-switch v-model=\"scope.row.sortable\" @change=\"handleSwitchChange\"></el-switch>\n </el-table-column>\n <template #empty>\n <div class=\"table-empty\">\n <img src=\"../assets/notData.png\" alt=\"notData\" />\n <div>暂无可配置列</div>\n </div>\n </template>\n </el-table>\n </div>\n </el-drawer>\n</template>\n\n<script setup lang=\"ts\" name=\"ColSetting\">\n import { nextTick, onMounted, onUnmounted, ref, watch, getCurrentInstance } from 'vue'\n import Sortable from 'sortablejs'\n\n import { ColumnProps } from '../interface'\n import { DCaret } from '@element-plus/icons-vue'\n\n const props = defineProps({\n colSetting: { type: Array, required: true }\n})\n const emit = defineEmits(['update:colSetting', 'updateColumns'])\n\n const drawerVisible = ref<boolean>(false)\n const tableRef = ref()\n let sortableInstance: Sortable | null = null\n\n // 获取当前组件实例，用于检查组件是否已销毁\n const instance = getCurrentInstance()\n\n // 添加本地状态\n const localColSetting = ref<ColumnProps[]>([])\n\n // 添加更新标志，防止循环更新\n const isUpdatingFromParent = ref(false)\n\n // 防抖标志\n let updateTimer: number | null = null\n\n // 安全的emit函数\n const safeEmit = (eventName: string, data: any) => {\n // console.log('safeEmit调用:', {\n // eventName,\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted,\n // dataLength: Array.isArray(data) ? data.length : 'not array'\n // })\n\n // 检查组件实例是否还存在\n if (!instance || instance.isUnmounted) {\n console.warn('组件已销毁，跳过事件发送', {\n hasInstance: !!instance,\n isUnmounted: instance?.isUnmounted\n })\n return\n }\n\n try {\n // console.log('正在发送事件:', eventName)\n emit(eventName as any, data)\n // console.log('事件发送成功:', eventName)\n } catch (error) {\n console.warn(`发送事件 ${eventName} 时出错:`, error)\n }\n }\n\n // 防抖的更新函数\n const debouncedUpdate = (data: ColumnProps[]) => {\n // console.log('debouncedUpdate调用:', {\n // hasData: !!data,\n // dataLength: Array.isArray(data) ? data.length : 'not array',\n // hasTimer: !!updateTimer\n // })\n\n if (updateTimer) {\n // console.log('清除之前的定时器')\n clearTimeout(updateTimer)\n }\n\n updateTimer = window.setTimeout(() => {\n // console.log('防抖定时器执行:', {\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted\n // })\n\n if (!instance || instance.isUnmounted) {\n // console.warn('防抖更新时组件已销毁')\n return\n }\n\n try {\n // 深拷贝数据避免响应式问题\n const clonedData = JSON.parse(JSON.stringify(data))\n // console.log('开始发送防抖更新事件')\n // safeEmit('update:colSetting', clonedData) // 移除这个事件，避免双重更新\n safeEmit('updateColumns', clonedData)\n } catch (error) {\n console.warn('更新数据时出错:', error)\n }\n }, 100) // 100ms防抖\n }\n\n // 监听 props 变化，更新本地状态\n watch(\n () => props.colSetting,\n (newVal) => {\n if (!newVal || !Array.isArray(newVal)) return\n\n // 设置标志，表示正在从父组件更新\n isUpdatingFromParent.value = true\n // 不要过滤 isShow 为 false 的列，否则用户无法再将其设置为显示\n try {\n localColSetting.value = JSON.parse(JSON.stringify(newVal))\n } catch (error) {\n console.warn('更新本地列设置时出错:', error)\n localColSetting.value = [...newVal]\n }\n\n // 延迟重置标志，确保本次更新完成\n nextTick(() => {\n setTimeout(() => {\n isUpdatingFromParent.value = false\n }, 50)\n })\n },\n { immediate: true, deep: true }\n )\n\n // 初始化拖拽排序\n const initSortable = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n nextTick(() => {\n if (!instance || instance.isUnmounted || !tableRef.value) {\n return\n }\n\n try {\n const tbody = tableRef.value.$el?.querySelector('tbody')\n if (!tbody) {\n console.warn('未找到tbody元素')\n return\n }\n\n // 销毁之前的实例\n if (sortableInstance) {\n try {\n sortableInstance.destroy()\n } catch (error) {\n console.warn('销毁sortable实例时出错:', error)\n }\n sortableInstance = null\n }\n\n sortableInstance = Sortable.create(tbody, {\n handle: '.drag-handle',\n animation: 300,\n ghostClass: 'sortable-ghost',\n chosenClass: 'sortable-chosen',\n dragClass: 'sortable-drag',\n forceFallback: true,\n fallbackTolerance: 3,\n // 禁用原生HTML5拖拽\n dragoverBubble: false,\n removeCloneOnHide: true,\n onStart: (evt) => {\n if (!evt.item || !evt.from || !instance || instance.isUnmounted) {\n return false\n }\n },\n onEnd: (evt) => {\n // 检查组件状态\n if (!instance || instance.isUnmounted) {\n return\n }\n\n // 如果正在从父组件更新，跳过事件发送\n if (isUpdatingFromParent.value) {\n return\n }\n\n const { oldIndex, newIndex } = evt\n\n if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {\n return\n }\n\n if (oldIndex < 0 || newIndex < 0 || oldIndex >= localColSetting.value.length || newIndex >= localColSetting.value.length) {\n return\n }\n\n try {\n const newData = [...localColSetting.value]\n const movedItem = newData.splice(oldIndex, 1)[0]\n\n if (movedItem) {\n newData.splice(newIndex, 0, movedItem)\n localColSetting.value = newData\n\n // 使用防抖更新\n debouncedUpdate(newData)\n }\n } catch (error) {\n console.warn('拖拽排序时出错:', error)\n }\n }\n })\n } catch (error) {\n console.warn('初始化sortable时出错:', error)\n }\n })\n }\n\n const openColSetting = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n drawerVisible.value = true\n\n // 延迟初始化拖拽\n setTimeout(() => {\n if (!instance || instance.isUnmounted) {\n return\n }\n initSortable()\n }, 200)\n }\n\n const closeColSetting = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n drawerVisible.value = false\n }\n\n const handleSwitchChange = () => {\n // console.log('handleSwitchChange调用:', {\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted,\n // localColSettingLength: localColSetting.value.length\n // })\n\n if (!instance || instance.isUnmounted) {\n // console.warn('开关切换时组件已销毁')\n return\n }\n\n // 如果正在从父组件更新，跳过事件发送\n if (isUpdatingFromParent.value) {\n return\n }\n\n try {\n // console.log('开关切换，准备防抖更新')\n // 使用防抖更新\n debouncedUpdate(localColSetting.value)\n } catch (error) {\n console.warn('开关切换时出错:', error)\n }\n }\n\n // 监听抽屉关闭，清理拖拽实例\n watch(drawerVisible, (newVal) => {\n if (!newVal && sortableInstance) {\n try {\n sortableInstance.destroy()\n sortableInstance = null\n } catch (error) {\n console.warn('关闭抽屉时销毁sortable实例出错:', error)\n }\n }\n })\n\n // 组件销毁时清理\n onUnmounted(() => {\n if (updateTimer) {\n clearTimeout(updateTimer)\n updateTimer = null\n }\n\n if (sortableInstance) {\n try {\n sortableInstance.destroy()\n sortableInstance = null\n } catch (error) {\n console.warn('组件销毁时清理sortable实例出错:', error)\n }\n }\n })\n\n defineExpose({\n openColSetting,\n closeColSetting\n })\n</script>\n"],"names":["props","__props","emit","__emit","drawerVisible","ref","tableRef","sortableInstance","instance","getCurrentInstance","localColSetting","isUpdatingFromParent","updateTimer","safeEmit","__name","eventName","data","isUnmounted","error","console","warn","hasInstance","debouncedUpdate","clearTimeout","window","setTimeout","clonedData","JSON","parse","stringify","watch","colSetting","newVal","Array","isArray","value","nextTick","immediate","deep","initSortable","tbody","$el","querySelector","destroy","Sortable","create","handle","animation","ghostClass","chosenClass","dragClass","forceFallback","fallbackTolerance","dragoverBubble","removeCloneOnHide","onStart","evt","item","from","onEnd","oldIndex","newIndex","length","newData","movedItem","splice","openColSetting","closeColSetting","handleSwitchChange","onUnmounted","__expose"],"mappings":"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"}
|
package/es/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from"./installer.mjs";export{install}from"./installer.mjs";import"./functions/index.mjs";import"./hooks/index.mjs";export{copyText,formatValue,treeListUtil,treeToList}from"./utils/index.mjs";import"./directives/index.mjs";import"./components/index.mjs";import e from"./functions/modules/log.mjs";export{useDialogV2}from"./hooks/useDialogV2/index.mjs";export{useDrawerV2}from"./hooks/useDrawerV2/index.mjs";export{closeAllDrawers}from"./hooks/useDrawerV2/src/index.mjs";export{closePopWindowById,closePopWindowByTag,getAllPopWindows,showPopWindow}from"./hooks/usePopWindow/src/index.mjs";export{usePopWindow}from"./hooks/usePopWindow/index.mjs";export{closePopWindowByIdV2,closePopWindowByTagV2,getAllPopWindowsV2,showPopWindowV2}from"./hooks/usePopWindowV2/src/index.mjs";export{usePopWindowV2}from"./hooks/usePopWindowV2/index.mjs";export{useDialog}from"./hooks/useDialog/index.mjs";export{default as ImageViewer}from"./hooks/useImageViewer/src/index.vue2.mjs";export{useImageViewer}from"./hooks/useImageViewer/index.mjs";export{useDrawer}from"./hooks/useDrawer/index.mjs";export{withInstall,withInstallDirectives}from"./utils/install.mjs";export{default as vCopy}from"./directives/modules/copy.mjs";export{default as vDrag}from"./directives/modules/drag.mjs";export{default as vAutoScroll}from"./directives/modules/autoScroll.mjs";export{default as vTooltip}from"./directives/modules/tooltip.mjs";export{default as vConfirm}from"./directives/modules/confirm.mjs";export{default as vCountTo}from"./directives/modules/countTo.mjs";export{default as utils}from"./functions/modules/uitls.mjs";import*as s from"./functions/modules/is.mjs";export{s as is};export{useZnForm}from"./components/znForm/src/hooks/useZnForm.mjs";export{useZnFormV2}from"./components/znFormV2/src/hooks/useZnFormV2.mjs";export{useZnSearch}from"./components/znSearch/src/hooks/useProSearch.mjs";export{ZnChart}from"./components/znChart/index.mjs";export{ZnCountTo}from"./components/znCountTo/index.mjs";export{default as ZnFormItem}from"./components/znForm/src/components/ZnFormItem.vue2.mjs";export{ZnForm}from"./components/znForm/index.mjs";export{batchExecute,camelCaseToHyphen,checkFeatureSupport,createUniqueId,debounce,delay,executeInIdle,getElementOffsetTop,getMemoryUsage,getObjectHash,isDeepEqual,isElementInViewport,isShallowEqual,throttle}from"./components/znFormV2/src/helper/index.mjs";export{default as ZnFormV2Item}from"./components/znFormV2/src/components/ZnFormV2Item.vue2.mjs";export{ZnFormV2}from"./components/znFormV2/index.mjs";export{ZnGrid,ZnGridItem}from"./components/znGrid/index.mjs";export{ZnNumberScroll}from"./components/znNumberScroll/index.mjs";export{ZnSearch}from"./components/znSearch/index.mjs";export{ZnTable}from"./components/znTable/index.mjs";export{ZnTest}from"./components/znTest/index.mjs";export{ZnTimeline}from"./components/znTimeLine/index.mjs";export{ZnTreeFilter}from"./components/znTreeFilter/index.mjs";export{ZnTreeSelect}from"./components/znTreeSelect/index.mjs";export{initVXETable,isVXETableInitialized}from"./components/znVirtualTable/src/utils/vxe-setup.mjs";export{ZnWorkGrid}from"./components/znWorkGrid/index.mjs";export{default as ZnVirtualTable}from"./components/znVirtualTable/src/index.vue2.mjs";globalThis.log=e;"function"==typeof globalThis?.log?.success&&globalThis.log.primary("1.1.
|
|
1
|
+
import o from"./installer.mjs";export{install}from"./installer.mjs";import"./functions/index.mjs";import"./hooks/index.mjs";export{copyText,formatValue,treeListUtil,treeToList}from"./utils/index.mjs";import"./directives/index.mjs";import"./components/index.mjs";import e from"./functions/modules/log.mjs";export{useDialogV2}from"./hooks/useDialogV2/index.mjs";export{useDrawerV2}from"./hooks/useDrawerV2/index.mjs";export{closeAllDrawers}from"./hooks/useDrawerV2/src/index.mjs";export{closePopWindowById,closePopWindowByTag,getAllPopWindows,showPopWindow}from"./hooks/usePopWindow/src/index.mjs";export{usePopWindow}from"./hooks/usePopWindow/index.mjs";export{closePopWindowByIdV2,closePopWindowByTagV2,getAllPopWindowsV2,showPopWindowV2}from"./hooks/usePopWindowV2/src/index.mjs";export{usePopWindowV2}from"./hooks/usePopWindowV2/index.mjs";export{useDialog}from"./hooks/useDialog/index.mjs";export{default as ImageViewer}from"./hooks/useImageViewer/src/index.vue2.mjs";export{useImageViewer}from"./hooks/useImageViewer/index.mjs";export{useDrawer}from"./hooks/useDrawer/index.mjs";export{withInstall,withInstallDirectives}from"./utils/install.mjs";export{default as vCopy}from"./directives/modules/copy.mjs";export{default as vDrag}from"./directives/modules/drag.mjs";export{default as vAutoScroll}from"./directives/modules/autoScroll.mjs";export{default as vTooltip}from"./directives/modules/tooltip.mjs";export{default as vConfirm}from"./directives/modules/confirm.mjs";export{default as vCountTo}from"./directives/modules/countTo.mjs";export{default as utils}from"./functions/modules/uitls.mjs";import*as s from"./functions/modules/is.mjs";export{s as is};export{useZnForm}from"./components/znForm/src/hooks/useZnForm.mjs";export{useZnFormV2}from"./components/znFormV2/src/hooks/useZnFormV2.mjs";export{useZnSearch}from"./components/znSearch/src/hooks/useProSearch.mjs";export{ZnChart}from"./components/znChart/index.mjs";export{ZnCountTo}from"./components/znCountTo/index.mjs";export{default as ZnFormItem}from"./components/znForm/src/components/ZnFormItem.vue2.mjs";export{ZnForm}from"./components/znForm/index.mjs";export{batchExecute,camelCaseToHyphen,checkFeatureSupport,createUniqueId,debounce,delay,executeInIdle,getElementOffsetTop,getMemoryUsage,getObjectHash,isDeepEqual,isElementInViewport,isShallowEqual,throttle}from"./components/znFormV2/src/helper/index.mjs";export{default as ZnFormV2Item}from"./components/znFormV2/src/components/ZnFormV2Item.vue2.mjs";export{ZnFormV2}from"./components/znFormV2/index.mjs";export{ZnGrid,ZnGridItem}from"./components/znGrid/index.mjs";export{ZnNumberScroll}from"./components/znNumberScroll/index.mjs";export{ZnSearch}from"./components/znSearch/index.mjs";export{ZnTable}from"./components/znTable/index.mjs";export{ZnTest}from"./components/znTest/index.mjs";export{ZnTimeline}from"./components/znTimeLine/index.mjs";export{ZnTreeFilter}from"./components/znTreeFilter/index.mjs";export{ZnTreeSelect}from"./components/znTreeSelect/index.mjs";export{initVXETable,isVXETableInitialized}from"./components/znVirtualTable/src/utils/vxe-setup.mjs";export{ZnWorkGrid}from"./components/znWorkGrid/index.mjs";export{default as ZnVirtualTable}from"./components/znVirtualTable/src/index.vue2.mjs";globalThis.log=e;"function"==typeof globalThis?.log?.success&&globalThis.log.primary("1.1.15","欢迎使用znyg-frontend-common，在线文档：http://192.168.99.34:10000/znyg-frontend-common-docs/");export{o as default,e as log};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/es/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../packages/index.ts"],"sourcesContent":["import installer from './installer'\nimport { log } from './functions'\nexport * from './hooks'\nexport * from './utils'\nexport * from './installer'\nexport * from './directives'\nexport * from './functions'\nexport * from './components'\n\nexport default installer\nglobalThis.log = log\nconst version = '1.1.
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../packages/index.ts"],"sourcesContent":["import installer from './installer'\nimport { log } from './functions'\nexport * from './hooks'\nexport * from './utils'\nexport * from './installer'\nexport * from './directives'\nexport * from './functions'\nexport * from './components'\n\nexport default installer\nglobalThis.log = log\nconst version = '1.1.15'\nif (typeof globalThis?.log?.success === 'function') {\n globalThis.log.primary(version, '欢迎使用znyg-frontend-common，在线文档：http://192.168.99.34:10000/znyg-frontend-common-docs/')\n}\n"],"names":["globalThis","log","success","primary"],"mappings":"sqGAUAA,WAAWC,IAAMA,EAEuB,mBAA7BD,YAAYC,KAAKC,SACfF,WAAAC,IAAIE,QAFD,SAEkB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../assets/notData.png.js"),l=require("sortablejs"),o=require("@element-plus/icons-vue"),a=Object.defineProperty,n=(e,t)=>a(e,"name",{value:t,configurable:!0});const r={class:"col-setting-header",style:{display:"flex","align-items":"center"}},s=["id"],d={style:{display:"flex","align-items":"center"}},i={class:"table-main"};var c=e.defineComponent({__name:"ColSetting",props:{colSetting:{type:Array,required:!0}},emits:["update:colSetting","updateColumns"],setup(a,{expose:c,emit:u}){const m=a,p=u,f=e.ref(!1),h=e.ref();let v=null;const w=e.getCurrentInstance(),g=e.ref([]),C=e.ref(!1);let b=null;const y=n(((e,t)=>{if(w&&!w.isUnmounted)try{p(e,t)}catch(t){console.warn(`发送事件 ${e} 时出错:`,t)}else console.warn("组件已销毁，跳过事件发送",{hasInstance:!!w,isUnmounted:w?.isUnmounted})}),"safeEmit"),V=n((e=>{b&&clearTimeout(b),b=window.setTimeout((()=>{if(w&&!w.isUnmounted)try{const t=JSON.parse(JSON.stringify(e));y("updateColumns",t)}catch(e){console.warn("更新数据时出错:",e)}}),100)}),"debouncedUpdate");e.watch((()=>m.colSetting),(t=>{if(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../assets/notData.png.js"),l=require("sortablejs"),o=require("@element-plus/icons-vue"),a=Object.defineProperty,n=(e,t)=>a(e,"name",{value:t,configurable:!0});const r={class:"col-setting-header",style:{display:"flex","align-items":"center"}},s=["id"],d={style:{display:"flex","align-items":"center"}},i={class:"table-main"};var c=e.defineComponent({__name:"ColSetting",props:{colSetting:{type:Array,required:!0}},emits:["update:colSetting","updateColumns"],setup(a,{expose:c,emit:u}){const m=a,p=u,f=e.ref(!1),h=e.ref();let v=null;const w=e.getCurrentInstance(),g=e.ref([]),C=e.ref(!1);let b=null;const y=n(((e,t)=>{if(w&&!w.isUnmounted)try{p(e,t)}catch(t){console.warn(`发送事件 ${e} 时出错:`,t)}else console.warn("组件已销毁，跳过事件发送",{hasInstance:!!w,isUnmounted:w?.isUnmounted})}),"safeEmit"),V=n((e=>{b&&clearTimeout(b),b=window.setTimeout((()=>{if(w&&!w.isUnmounted)try{const t=JSON.parse(JSON.stringify(e));y("updateColumns",t)}catch(e){console.warn("更新数据时出错:",e)}}),100)}),"debouncedUpdate");e.watch((()=>m.colSetting),(t=>{if(t&&Array.isArray(t)){C.value=!0;try{g.value=JSON.parse(JSON.stringify(t))}catch(e){console.warn("更新本地列设置时出错:",e),g.value=[...t]}e.nextTick((()=>{setTimeout((()=>{C.value=!1}),50)}))}}),{immediate:!0,deep:!0});const N=n((()=>{w&&!w.isUnmounted&&e.nextTick((()=>{if(w&&!w.isUnmounted&&h.value)try{const e=h.value.$el?.querySelector("tbody");if(!e)return void console.warn("未找到tbody元素");if(v){try{v.destroy()}catch(e){console.warn("销毁sortable实例时出错:",e)}v=null}v=l.create(e,{handle:".drag-handle",animation:300,ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",forceFallback:!0,fallbackTolerance:3,
|
|
2
2
|
// 禁用原生HTML5拖拽
|
|
3
3
|
dragoverBubble:!1,removeCloneOnHide:!0,onStart:n((e=>{if(!e.item||!e.from||!w||w.isUnmounted)return!1}),"onStart"),onEnd:n((e=>{if(!w||w.isUnmounted)return;if(C.value)return;const{oldIndex:t,newIndex:l}=e;if(void 0!==t&&void 0!==l&&t!==l&&!(t<0||l<0||t>=g.value.length||l>=g.value.length))try{const e=[...g.value],o=e.splice(t,1)[0];o&&(e.splice(l,0,o),g.value=e,V(e))}catch(e){console.warn("拖拽排序时出错:",e)}}),"onEnd")})}catch(e){console.warn("初始化sortable时出错:",e)}}))}),"initSortable"),S=n((()=>{w&&!w.isUnmounted&&(f.value=!0,setTimeout((()=>{w&&!w.isUnmounted&&N()}),200))}),"openColSetting"),U=n((()=>{w&&!w.isUnmounted&&(f.value=!1)}),"closeColSetting"),x=n((()=>{if(w&&!w.isUnmounted&&!C.value)try{V(g.value)}catch(e){console.warn("开关切换时出错:",e)}}),"handleSwitchChange");return e.watch(f,(e=>{if(!e&&v)try{v.destroy(),v=null}catch(e){console.warn("关闭抽屉时销毁sortable实例出错:",e)}})),e.onUnmounted((()=>{if(b&&(clearTimeout(b),b=null),v)try{v.destroy(),v=null}catch(e){console.warn("组件销毁时清理sortable实例出错:",e)}})),c({openColSetting:S,closeColSetting:U}),(l,a)=>{const c=e.resolveComponent("el-icon"),u=e.resolveComponent("el-table-column"),m=e.resolveComponent("el-switch"),p=e.resolveComponent("el-table"),v=e.resolveComponent("el-drawer");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createCommentVNode(" 列设置 "),e.createVNode(v,{modelValue:f.value,"onUpdate:modelValue":a[0]||(a[0]=e=>f.value=e),title:"列设置",size:"450px"},{header:e.withCtx((({close:t,titleId:o,titleClass:a})=>[e.createElementVNode("div",r,[e.createElementVNode("h4",{id:o,class:e.normalizeClass(a)},"列设置",10,s),e.createElementVNode("div",d,[e.createCommentVNode(" 列设置头部插槽 "),e.renderSlot(l.$slots,"colSettingHeader")])])])),default:e.withCtx((()=>[e.createElementVNode("div",i,[e.createVNode(p,{ref_key:"tableRef",ref:h,data:g.value,border:!0,"row-key":"prop","default-expand-all":"","tree-props":{children:"_children"}},{empty:e.withCtx((()=>a[1]||(a[1]=[e.createElementVNode("div",{class:"table-empty"},[e.createElementVNode("img",{src:t.default,alt:"notData"}),e.createElementVNode("div",null,"暂无可配置列")],-1
|
|
4
4
|
/* HOISTED */)]))),default:e.withCtx((()=>[e.createVNode(u,{align:"center",label:"拖拽",width:"60"},{default:e.withCtx((()=>[e.createVNode(c,{class:"drag-handle",style:{color:"#409eff",cursor:"move"}},{default:e.withCtx((()=>[e.createVNode(e.unref(o.DCaret))])),_:1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColSetting.vue2.js","sources":["../../../../../../../packages/components/znTable/src/components/ColSetting.vue"],"sourcesContent":["<template>\n <!-- 列设置 -->\n <el-drawer v-model=\"drawerVisible\" title=\"列设置\" size=\"450px\">\n <!-- 自定义头部 -->\n <template #header=\"{ close, titleId, titleClass }\">\n <div class=\"col-setting-header\" style=\"display: flex; align-items: center;\">\n <h4 :id=\"titleId\" :class=\"titleClass\">列设置</h4>\n <div style=\"display: flex; align-items: center;\">\n <!-- 列设置头部插槽 -->\n <slot name=\"colSettingHeader\"></slot>\n </div>\n </div>\n </template>\n\n <div class=\"table-main\">\n <el-table ref=\"tableRef\" :data=\"localColSetting\" :border=\"true\" row-key=\"prop\" default-expand-all :tree-props=\"{ children: '_children' }\">\n <el-table-column align=\"center\" label=\"拖拽\" width=\"60\">\n <template #default>\n <el-icon class=\"drag-handle\" style=\" color: #409eff;cursor: move\">\n <DCaret />\n </el-icon>\n </template>\n </el-table-column>\n <el-table-column prop=\"label\" align=\"center\" label=\"列名\" />\n <el-table-column v-slot=\"scope\" prop=\"isShow\" align=\"center\" label=\"显示\">\n <el-switch v-model=\"scope.row.isShow\" @change=\"handleSwitchChange\"></el-switch>\n </el-table-column>\n <el-table-column v-slot=\"scope\" prop=\"sortable\" align=\"center\" label=\"排序\">\n <el-switch v-model=\"scope.row.sortable\" @change=\"handleSwitchChange\"></el-switch>\n </el-table-column>\n <template #empty>\n <div class=\"table-empty\">\n <img src=\"../assets/notData.png\" alt=\"notData\" />\n <div>暂无可配置列</div>\n </div>\n </template>\n </el-table>\n </div>\n </el-drawer>\n</template>\n\n<script setup lang=\"ts\" name=\"ColSetting\">\n import { nextTick, onMounted, onUnmounted, ref, watch, getCurrentInstance } from 'vue'\n import Sortable from 'sortablejs'\n\n import { ColumnProps } from '../interface'\n import { DCaret } from '@element-plus/icons-vue'\n\n const props = defineProps({\n colSetting: { type: Array, required: true }\n})\n const emit = defineEmits(['update:colSetting', 'updateColumns'])\n\n const drawerVisible = ref<boolean>(false)\n const tableRef = ref()\n let sortableInstance: Sortable | null = null\n\n // 获取当前组件实例，用于检查组件是否已销毁\n const instance = getCurrentInstance()\n\n // 添加本地状态\n const localColSetting = ref<ColumnProps[]>([])\n\n // 添加更新标志，防止循环更新\n const isUpdatingFromParent = ref(false)\n\n // 防抖标志\n let updateTimer: number | null = null\n\n // 安全的emit函数\n const safeEmit = (eventName: string, data: any) => {\n // console.log('safeEmit调用:', {\n // eventName,\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted,\n // dataLength: Array.isArray(data) ? data.length : 'not array'\n // })\n\n // 检查组件实例是否还存在\n if (!instance || instance.isUnmounted) {\n console.warn('组件已销毁，跳过事件发送', {\n hasInstance: !!instance,\n isUnmounted: instance?.isUnmounted\n })\n return\n }\n\n try {\n // console.log('正在发送事件:', eventName)\n emit(eventName as any, data)\n // console.log('事件发送成功:', eventName)\n } catch (error) {\n console.warn(`发送事件 ${eventName} 时出错:`, error)\n }\n }\n\n // 防抖的更新函数\n const debouncedUpdate = (data: ColumnProps[]) => {\n // console.log('debouncedUpdate调用:', {\n // hasData: !!data,\n // dataLength: Array.isArray(data) ? data.length : 'not array',\n // hasTimer: !!updateTimer\n // })\n\n if (updateTimer) {\n // console.log('清除之前的定时器')\n clearTimeout(updateTimer)\n }\n\n updateTimer = window.setTimeout(() => {\n // console.log('防抖定时器执行:', {\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted\n // })\n\n if (!instance || instance.isUnmounted) {\n // console.warn('防抖更新时组件已销毁')\n return\n }\n\n try {\n // 深拷贝数据避免响应式问题\n const clonedData = JSON.parse(JSON.stringify(data))\n // console.log('开始发送防抖更新事件')\n // safeEmit('update:colSetting', clonedData) // 移除这个事件，避免双重更新\n safeEmit('updateColumns', clonedData)\n } catch (error) {\n console.warn('更新数据时出错:', error)\n }\n }, 100) // 100ms防抖\n }\n\n // 监听 props 变化，更新本地状态\n watch(\n () => props.colSetting,\n (newVal) => {\n if (!newVal || !Array.isArray(newVal)) return\n\n // 设置标志，表示正在从父组件更新\n isUpdatingFromParent.value = true\n let filterData=newVal.filter(item=>item.isShow)\n try {\n localColSetting.value = JSON.parse(JSON.stringify(filterData))\n } catch (error) {\n console.warn('更新本地列设置时出错:', error)\n localColSetting.value = [...filterData]\n }\n\n // 延迟重置标志，确保本次更新完成\n nextTick(() => {\n setTimeout(() => {\n isUpdatingFromParent.value = false\n }, 50)\n })\n },\n { immediate: true, deep: true }\n )\n\n // 初始化拖拽排序\n const initSortable = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n nextTick(() => {\n if (!instance || instance.isUnmounted || !tableRef.value) {\n return\n }\n\n try {\n const tbody = tableRef.value.$el?.querySelector('tbody')\n if (!tbody) {\n console.warn('未找到tbody元素')\n return\n }\n\n // 销毁之前的实例\n if (sortableInstance) {\n try {\n sortableInstance.destroy()\n } catch (error) {\n console.warn('销毁sortable实例时出错:', error)\n }\n sortableInstance = null\n }\n\n sortableInstance = Sortable.create(tbody, {\n handle: '.drag-handle',\n animation: 300,\n ghostClass: 'sortable-ghost',\n chosenClass: 'sortable-chosen',\n dragClass: 'sortable-drag',\n forceFallback: true,\n fallbackTolerance: 3,\n // 禁用原生HTML5拖拽\n dragoverBubble: false,\n removeCloneOnHide: true,\n onStart: (evt) => {\n if (!evt.item || !evt.from || !instance || instance.isUnmounted) {\n return false\n }\n },\n onEnd: (evt) => {\n // 检查组件状态\n if (!instance || instance.isUnmounted) {\n return\n }\n\n // 如果正在从父组件更新，跳过事件发送\n if (isUpdatingFromParent.value) {\n return\n }\n\n const { oldIndex, newIndex } = evt\n\n if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {\n return\n }\n\n if (oldIndex < 0 || newIndex < 0 || oldIndex >= localColSetting.value.length || newIndex >= localColSetting.value.length) {\n return\n }\n\n try {\n const newData = [...localColSetting.value]\n const movedItem = newData.splice(oldIndex, 1)[0]\n\n if (movedItem) {\n newData.splice(newIndex, 0, movedItem)\n localColSetting.value = newData\n\n // 使用防抖更新\n debouncedUpdate(newData)\n }\n } catch (error) {\n console.warn('拖拽排序时出错:', error)\n }\n }\n })\n } catch (error) {\n console.warn('初始化sortable时出错:', error)\n }\n })\n }\n\n const openColSetting = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n drawerVisible.value = true\n\n // 延迟初始化拖拽\n setTimeout(() => {\n if (!instance || instance.isUnmounted) {\n return\n }\n initSortable()\n }, 200)\n }\n\n const closeColSetting = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n drawerVisible.value = false\n }\n\n const handleSwitchChange = () => {\n // console.log('handleSwitchChange调用:', {\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted,\n // localColSettingLength: localColSetting.value.length\n // })\n\n if (!instance || instance.isUnmounted) {\n // console.warn('开关切换时组件已销毁')\n return\n }\n\n // 如果正在从父组件更新，跳过事件发送\n if (isUpdatingFromParent.value) {\n return\n }\n\n try {\n // console.log('开关切换，准备防抖更新')\n // 使用防抖更新\n debouncedUpdate(localColSetting.value)\n } catch (error) {\n console.warn('开关切换时出错:', error)\n }\n }\n\n // 监听抽屉关闭，清理拖拽实例\n watch(drawerVisible, (newVal) => {\n if (!newVal && sortableInstance) {\n try {\n sortableInstance.destroy()\n sortableInstance = null\n } catch (error) {\n console.warn('关闭抽屉时销毁sortable实例出错:', error)\n }\n }\n })\n\n // 组件销毁时清理\n onUnmounted(() => {\n if (updateTimer) {\n clearTimeout(updateTimer)\n updateTimer = null\n }\n\n if (sortableInstance) {\n try {\n sortableInstance.destroy()\n sortableInstance = null\n } catch (error) {\n console.warn('组件销毁时清理sortable实例出错:', error)\n }\n }\n })\n\n defineExpose({\n openColSetting,\n closeColSetting\n })\n</script>\n"],"names":["props","__props","emit","__emit","drawerVisible","ref","tableRef","sortableInstance","instance","getCurrentInstance","localColSetting","isUpdatingFromParent","updateTimer","safeEmit","__name","eventName","data","isUnmounted","error","console","warn","hasInstance","debouncedUpdate","clearTimeout","window","setTimeout","clonedData","JSON","parse","stringify","watch","colSetting","newVal","Array","isArray","value","filterData","filter","item","isShow","nextTick","immediate","deep","initSortable","tbody","$el","querySelector","destroy","Sortable","create","handle","animation","ghostClass","chosenClass","dragClass","forceFallback","fallbackTolerance","dragoverBubble","removeCloneOnHide","onStart","evt","from","onEnd","oldIndex","newIndex","length","newData","movedItem","splice","openColSetting","closeColSetting","handleSwitchChange","onUnmounted","__expose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ColSetting.vue2.js","sources":["../../../../../../../packages/components/znTable/src/components/ColSetting.vue"],"sourcesContent":["<template>\n <!-- 列设置 -->\n <el-drawer v-model=\"drawerVisible\" title=\"列设置\" size=\"450px\">\n <!-- 自定义头部 -->\n <template #header=\"{ close, titleId, titleClass }\">\n <div class=\"col-setting-header\" style=\"display: flex; align-items: center;\">\n <h4 :id=\"titleId\" :class=\"titleClass\">列设置</h4>\n <div style=\"display: flex; align-items: center;\">\n <!-- 列设置头部插槽 -->\n <slot name=\"colSettingHeader\"></slot>\n </div>\n </div>\n </template>\n\n <div class=\"table-main\">\n <el-table ref=\"tableRef\" :data=\"localColSetting\" :border=\"true\" row-key=\"prop\" default-expand-all :tree-props=\"{ children: '_children' }\">\n <el-table-column align=\"center\" label=\"拖拽\" width=\"60\">\n <template #default>\n <el-icon class=\"drag-handle\" style=\" color: #409eff;cursor: move\">\n <DCaret />\n </el-icon>\n </template>\n </el-table-column>\n <el-table-column prop=\"label\" align=\"center\" label=\"列名\" />\n <el-table-column v-slot=\"scope\" prop=\"isShow\" align=\"center\" label=\"显示\">\n <el-switch v-model=\"scope.row.isShow\" @change=\"handleSwitchChange\"></el-switch>\n </el-table-column>\n <el-table-column v-slot=\"scope\" prop=\"sortable\" align=\"center\" label=\"排序\">\n <el-switch v-model=\"scope.row.sortable\" @change=\"handleSwitchChange\"></el-switch>\n </el-table-column>\n <template #empty>\n <div class=\"table-empty\">\n <img src=\"../assets/notData.png\" alt=\"notData\" />\n <div>暂无可配置列</div>\n </div>\n </template>\n </el-table>\n </div>\n </el-drawer>\n</template>\n\n<script setup lang=\"ts\" name=\"ColSetting\">\n import { nextTick, onMounted, onUnmounted, ref, watch, getCurrentInstance } from 'vue'\n import Sortable from 'sortablejs'\n\n import { ColumnProps } from '../interface'\n import { DCaret } from '@element-plus/icons-vue'\n\n const props = defineProps({\n colSetting: { type: Array, required: true }\n})\n const emit = defineEmits(['update:colSetting', 'updateColumns'])\n\n const drawerVisible = ref<boolean>(false)\n const tableRef = ref()\n let sortableInstance: Sortable | null = null\n\n // 获取当前组件实例，用于检查组件是否已销毁\n const instance = getCurrentInstance()\n\n // 添加本地状态\n const localColSetting = ref<ColumnProps[]>([])\n\n // 添加更新标志，防止循环更新\n const isUpdatingFromParent = ref(false)\n\n // 防抖标志\n let updateTimer: number | null = null\n\n // 安全的emit函数\n const safeEmit = (eventName: string, data: any) => {\n // console.log('safeEmit调用:', {\n // eventName,\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted,\n // dataLength: Array.isArray(data) ? data.length : 'not array'\n // })\n\n // 检查组件实例是否还存在\n if (!instance || instance.isUnmounted) {\n console.warn('组件已销毁，跳过事件发送', {\n hasInstance: !!instance,\n isUnmounted: instance?.isUnmounted\n })\n return\n }\n\n try {\n // console.log('正在发送事件:', eventName)\n emit(eventName as any, data)\n // console.log('事件发送成功:', eventName)\n } catch (error) {\n console.warn(`发送事件 ${eventName} 时出错:`, error)\n }\n }\n\n // 防抖的更新函数\n const debouncedUpdate = (data: ColumnProps[]) => {\n // console.log('debouncedUpdate调用:', {\n // hasData: !!data,\n // dataLength: Array.isArray(data) ? data.length : 'not array',\n // hasTimer: !!updateTimer\n // })\n\n if (updateTimer) {\n // console.log('清除之前的定时器')\n clearTimeout(updateTimer)\n }\n\n updateTimer = window.setTimeout(() => {\n // console.log('防抖定时器执行:', {\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted\n // })\n\n if (!instance || instance.isUnmounted) {\n // console.warn('防抖更新时组件已销毁')\n return\n }\n\n try {\n // 深拷贝数据避免响应式问题\n const clonedData = JSON.parse(JSON.stringify(data))\n // console.log('开始发送防抖更新事件')\n // safeEmit('update:colSetting', clonedData) // 移除这个事件，避免双重更新\n safeEmit('updateColumns', clonedData)\n } catch (error) {\n console.warn('更新数据时出错:', error)\n }\n }, 100) // 100ms防抖\n }\n\n // 监听 props 变化，更新本地状态\n watch(\n () => props.colSetting,\n (newVal) => {\n if (!newVal || !Array.isArray(newVal)) return\n\n // 设置标志，表示正在从父组件更新\n isUpdatingFromParent.value = true\n // 不要过滤 isShow 为 false 的列，否则用户无法再将其设置为显示\n try {\n localColSetting.value = JSON.parse(JSON.stringify(newVal))\n } catch (error) {\n console.warn('更新本地列设置时出错:', error)\n localColSetting.value = [...newVal]\n }\n\n // 延迟重置标志，确保本次更新完成\n nextTick(() => {\n setTimeout(() => {\n isUpdatingFromParent.value = false\n }, 50)\n })\n },\n { immediate: true, deep: true }\n )\n\n // 初始化拖拽排序\n const initSortable = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n nextTick(() => {\n if (!instance || instance.isUnmounted || !tableRef.value) {\n return\n }\n\n try {\n const tbody = tableRef.value.$el?.querySelector('tbody')\n if (!tbody) {\n console.warn('未找到tbody元素')\n return\n }\n\n // 销毁之前的实例\n if (sortableInstance) {\n try {\n sortableInstance.destroy()\n } catch (error) {\n console.warn('销毁sortable实例时出错:', error)\n }\n sortableInstance = null\n }\n\n sortableInstance = Sortable.create(tbody, {\n handle: '.drag-handle',\n animation: 300,\n ghostClass: 'sortable-ghost',\n chosenClass: 'sortable-chosen',\n dragClass: 'sortable-drag',\n forceFallback: true,\n fallbackTolerance: 3,\n // 禁用原生HTML5拖拽\n dragoverBubble: false,\n removeCloneOnHide: true,\n onStart: (evt) => {\n if (!evt.item || !evt.from || !instance || instance.isUnmounted) {\n return false\n }\n },\n onEnd: (evt) => {\n // 检查组件状态\n if (!instance || instance.isUnmounted) {\n return\n }\n\n // 如果正在从父组件更新，跳过事件发送\n if (isUpdatingFromParent.value) {\n return\n }\n\n const { oldIndex, newIndex } = evt\n\n if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {\n return\n }\n\n if (oldIndex < 0 || newIndex < 0 || oldIndex >= localColSetting.value.length || newIndex >= localColSetting.value.length) {\n return\n }\n\n try {\n const newData = [...localColSetting.value]\n const movedItem = newData.splice(oldIndex, 1)[0]\n\n if (movedItem) {\n newData.splice(newIndex, 0, movedItem)\n localColSetting.value = newData\n\n // 使用防抖更新\n debouncedUpdate(newData)\n }\n } catch (error) {\n console.warn('拖拽排序时出错:', error)\n }\n }\n })\n } catch (error) {\n console.warn('初始化sortable时出错:', error)\n }\n })\n }\n\n const openColSetting = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n drawerVisible.value = true\n\n // 延迟初始化拖拽\n setTimeout(() => {\n if (!instance || instance.isUnmounted) {\n return\n }\n initSortable()\n }, 200)\n }\n\n const closeColSetting = () => {\n if (!instance || instance.isUnmounted) {\n return\n }\n\n drawerVisible.value = false\n }\n\n const handleSwitchChange = () => {\n // console.log('handleSwitchChange调用:', {\n // hasInstance: !!instance,\n // isUnmounted: instance?.isUnmounted,\n // localColSettingLength: localColSetting.value.length\n // })\n\n if (!instance || instance.isUnmounted) {\n // console.warn('开关切换时组件已销毁')\n return\n }\n\n // 如果正在从父组件更新，跳过事件发送\n if (isUpdatingFromParent.value) {\n return\n }\n\n try {\n // console.log('开关切换，准备防抖更新')\n // 使用防抖更新\n debouncedUpdate(localColSetting.value)\n } catch (error) {\n console.warn('开关切换时出错:', error)\n }\n }\n\n // 监听抽屉关闭，清理拖拽实例\n watch(drawerVisible, (newVal) => {\n if (!newVal && sortableInstance) {\n try {\n sortableInstance.destroy()\n sortableInstance = null\n } catch (error) {\n console.warn('关闭抽屉时销毁sortable实例出错:', error)\n }\n }\n })\n\n // 组件销毁时清理\n onUnmounted(() => {\n if (updateTimer) {\n clearTimeout(updateTimer)\n updateTimer = null\n }\n\n if (sortableInstance) {\n try {\n sortableInstance.destroy()\n sortableInstance = null\n } catch (error) {\n console.warn('组件销毁时清理sortable实例出错:', error)\n }\n }\n })\n\n defineExpose({\n openColSetting,\n closeColSetting\n })\n</script>\n"],"names":["props","__props","emit","__emit","drawerVisible","ref","tableRef","sortableInstance","instance","getCurrentInstance","localColSetting","isUpdatingFromParent","updateTimer","safeEmit","__name","eventName","data","isUnmounted","error","console","warn","hasInstance","debouncedUpdate","clearTimeout","window","setTimeout","clonedData","JSON","parse","stringify","watch","colSetting","newVal","Array","isArray","value","nextTick","immediate","deep","initSortable","tbody","$el","querySelector","destroy","Sortable","create","handle","animation","ghostClass","chosenClass","dragClass","forceFallback","fallbackTolerance","dragoverBubble","removeCloneOnHide","onStart","evt","item","from","onEnd","oldIndex","newIndex","length","newData","movedItem","splice","openColSetting","closeColSetting","handleSwitchChange","onUnmounted","__expose"],"mappings":"wkBAgDE,MAAMA,EAAQC,EAGRC,EAAOC,EAEPC,EAAgBC,OAAa,GAC7BC,EAAWD,EAAAA,MACjB,IAAIE,EAAoC,KAGxC,MAAMC,EAAWC,EAAAA,qBAGXC,EAAkBL,EAAmBA,IAAA,IAGrCM,EAAuBN,OAAI,GAGjC,IAAIO,EAA6B,KAG3B,MAAAC,EAAYC,GAAA,CAAAC,EAAmBC,KAS/B,GAACR,IAAYA,EAASS,YAQtB,IAEFf,EAAKa,EAAkBC,SAEhBE,GACPC,QAAQC,KAAK,QAAQL,SAAkBG,EAAK,MAZ5CC,QAAQC,KAAK,eAAgB,CAC3BC,cAAeb,EACfS,YAAaT,GAAUS,aAUmB,GAtB/B,YA2BXK,KAAmBN,IAOnBJ,GAEFW,aAAaX,GAGDA,EAAAY,OAAOC,YAAW,KAM1B,GAACjB,IAAYA,EAASS,YAKtB,IAEF,MAAMS,EAAaC,KAAKC,MAAMD,KAAKE,UAAUb,IAG7CH,EAAS,gBAAiBa,SACnBR,GACCC,QAAAC,KAAK,WAAYF,EAAK,IAE/B,IAAG,GAhCgB,mBAoCxBY,EAAAA,OACE,IAAM9B,EAAM+B,aACXC,IACC,GAAKA,GAAWC,MAAMC,QAAQF,GAA9B,CAGArB,EAAqBwB,OAAQ,EAEzB,IACFzB,EAAgByB,MAAQR,KAAKC,MAAMD,KAAKE,UAAUG,UAC3Cd,GACCC,QAAAC,KAAK,cAAeF,GACZR,EAAAyB,MAAQ,IAAIH,EAAM,CAIpCI,EAAAA,UAAS,KACPX,YAAW,KACTd,EAAqBwB,OAAQ,CAAA,GAC5B,GAAE,GAhBgC,CAiBtC,GAEH,CAAEE,WAAW,EAAMC,MAAM,IAI3B,MAAMC,EAAqBzB,GAAA,KACpBN,IAAYA,EAASS,aAI1BmB,EAAAA,UAAS,KACP,GAAK5B,IAAYA,EAASS,aAAgBX,EAAS6B,MAI/C,IACF,MAAMK,EAAQlC,EAAS6B,MAAMM,KAAKC,cAAc,SAChD,IAAKF,EAEH,YADArB,QAAQC,KAAK,cAKf,GAAIb,EAAkB,CAChB,IACFA,EAAiBoC,gBACVzB,GACCC,QAAAC,KAAK,mBAAoBF,EAAK,CAErBX,EAAA,IAAA,CAGFA,EAAAqC,EAASC,OAAOL,EAAO,CACxCM,OAAQ,eACRC,UAAW,IACXC,WAAY,iBACZC,YAAa,kBACbC,UAAW,gBACXC,eAAe,EACfC,kBAAmB;;AAEnBC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAUC,IACJ,IAACA,EAAIC,OAASD,EAAIE,OAASlD,GAAYA,EAASS,YAC3C,OAAA,CAAA,GAFF,WAKT0C,SAAQH,IAEF,IAAChD,GAAYA,EAASS,YACxB,OAIF,GAAIN,EAAqBwB,MACvB,OAGI,MAAAyB,SAAEA,EAAUC,SAAAA,GAAaL,EAE/B,QAAiB,IAAbI,QAAuC,IAAbC,GAA0BD,IAAaC,KAIjED,EAAW,GAAKC,EAAW,GAAKD,GAAYlD,EAAgByB,MAAM2B,QAAUD,GAAYnD,EAAgByB,MAAM2B,QAI9G,IACF,MAAMC,EAAU,IAAIrD,EAAgByB,OAC9B6B,EAAYD,EAAQE,OAAOL,EAAU,GAAG,GAE1CI,IACMD,EAAAE,OAAOJ,EAAU,EAAGG,GAC5BtD,EAAgByB,MAAQ4B,EAGxBzC,EAAgByC,UAEX7C,GACCC,QAAAC,KAAK,WAAYF,EAAK,IAjC3B,iBAqCFA,GACCC,QAAAC,KAAK,kBAAmBF,EAAK,IAExC,GAnFkB,gBAsFfgD,EAAuBpD,GAAA,KACtBN,IAAYA,EAASS,cAI1Bb,EAAc+B,OAAQ,EAGtBV,YAAW,KACJjB,IAAYA,EAASS,aAGbsB,GAAA,GACZ,KAAG,GAbe,kBAgBjB4B,EAAwBrD,GAAA,KACvBN,IAAYA,EAASS,cAI1Bb,EAAc+B,OAAQ,EAAA,GALA,mBAQlBiC,EAA2BtD,GAAA,KAO3B,GAACN,IAAYA,EAASS,cAMtBN,EAAqBwB,MAIrB,IAGFb,EAAgBZ,EAAgByB,aACzBjB,GACCC,QAAAC,KAAK,WAAYF,EAAK,IAtBP,6BA2BrBY,QAAA1B,GAAgB4B,IAChB,IAACA,GAAUzB,EACT,IACFA,EAAiBoC,UACEpC,EAAA,WACZW,GACCC,QAAAC,KAAK,uBAAwBF,EAAK,CAC5C,IAKJmD,EAAAA,aAAY,KAMV,GALIzD,IACFW,aAAaX,GACCA,EAAA,MAGZL,EACE,IACFA,EAAiBoC,UACEpC,EAAA,WACZW,GACCC,QAAAC,KAAK,uBAAwBF,EAAK,CAC5C,IAISoD,EAAA,CACXJ,iBACAC;;;;;;;;"}
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./installer.js");require("./functions/index.js"),require("./hooks/index.js");var o=require("./utils/index.js");require("./directives/index.js"),require("./components/index.js");var r=require("./functions/modules/log.js"),s=require("./hooks/useDialogV2/index.js"),t=require("./hooks/useDrawerV2/index.js"),n=require("./hooks/useDrawerV2/src/index.js"),i=require("./hooks/usePopWindow/src/index.js"),u=require("./hooks/usePopWindow/index.js"),l=require("./hooks/usePopWindowV2/src/index.js"),p=require("./hooks/usePopWindowV2/index.js"),d=require("./hooks/useDialog/index.js"),a=require("./hooks/useImageViewer/src/index.vue2.js"),x=require("./hooks/useImageViewer/index.js"),c=require("./hooks/useDrawer/index.js"),m=require("./utils/install.js"),q=require("./directives/modules/copy.js"),j=require("./directives/modules/drag.js"),h=require("./directives/modules/autoScroll.js"),w=require("./directives/modules/tooltip.js"),V=require("./directives/modules/confirm.js"),T=require("./directives/modules/countTo.js"),Z=require("./functions/modules/uitls.js"),g=require("./functions/modules/is.js"),f=require("./components/znForm/src/hooks/useZnForm.js"),I=require("./components/znFormV2/src/hooks/useZnFormV2.js"),W=require("./components/znSearch/src/hooks/useProSearch.js"),F=require("./components/znChart/index.js"),P=require("./components/znCountTo/index.js"),z=require("./components/znForm/src/components/ZnFormItem.vue2.js"),v=require("./components/znForm/index.js"),b=require("./components/znFormV2/src/helper/index.js"),y=require("./components/znFormV2/src/components/ZnFormV2Item.vue2.js"),k=require("./components/znFormV2/index.js"),D=require("./components/znGrid/index.js"),S=require("./components/znNumberScroll/index.js"),E=require("./components/znSearch/index.js"),C=require("./components/znTable/index.js"),B=require("./components/znTest/index.js"),G=require("./components/znTimeLine/index.js"),A=require("./components/znTreeFilter/index.js"),U=require("./components/znTreeSelect/index.js"),L=require("./components/znVirtualTable/src/utils/vxe-setup.js"),O=require("./components/znWorkGrid/index.js"),H=require("./components/znVirtualTable/src/index.vue2.js");globalThis.log=r.default;"function"==typeof globalThis?.log?.success&&globalThis.log.primary("1.1.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./installer.js");require("./functions/index.js"),require("./hooks/index.js");var o=require("./utils/index.js");require("./directives/index.js"),require("./components/index.js");var r=require("./functions/modules/log.js"),s=require("./hooks/useDialogV2/index.js"),t=require("./hooks/useDrawerV2/index.js"),n=require("./hooks/useDrawerV2/src/index.js"),i=require("./hooks/usePopWindow/src/index.js"),u=require("./hooks/usePopWindow/index.js"),l=require("./hooks/usePopWindowV2/src/index.js"),p=require("./hooks/usePopWindowV2/index.js"),d=require("./hooks/useDialog/index.js"),a=require("./hooks/useImageViewer/src/index.vue2.js"),x=require("./hooks/useImageViewer/index.js"),c=require("./hooks/useDrawer/index.js"),m=require("./utils/install.js"),q=require("./directives/modules/copy.js"),j=require("./directives/modules/drag.js"),h=require("./directives/modules/autoScroll.js"),w=require("./directives/modules/tooltip.js"),V=require("./directives/modules/confirm.js"),T=require("./directives/modules/countTo.js"),Z=require("./functions/modules/uitls.js"),g=require("./functions/modules/is.js"),f=require("./components/znForm/src/hooks/useZnForm.js"),I=require("./components/znFormV2/src/hooks/useZnFormV2.js"),W=require("./components/znSearch/src/hooks/useProSearch.js"),F=require("./components/znChart/index.js"),P=require("./components/znCountTo/index.js"),z=require("./components/znForm/src/components/ZnFormItem.vue2.js"),v=require("./components/znForm/index.js"),b=require("./components/znFormV2/src/helper/index.js"),y=require("./components/znFormV2/src/components/ZnFormV2Item.vue2.js"),k=require("./components/znFormV2/index.js"),D=require("./components/znGrid/index.js"),S=require("./components/znNumberScroll/index.js"),E=require("./components/znSearch/index.js"),C=require("./components/znTable/index.js"),B=require("./components/znTest/index.js"),G=require("./components/znTimeLine/index.js"),A=require("./components/znTreeFilter/index.js"),U=require("./components/znTreeSelect/index.js"),L=require("./components/znVirtualTable/src/utils/vxe-setup.js"),O=require("./components/znWorkGrid/index.js"),H=require("./components/znVirtualTable/src/index.vue2.js");globalThis.log=r.default;"function"==typeof globalThis?.log?.success&&globalThis.log.primary("1.1.15","欢迎使用znyg-frontend-common，在线文档：http://192.168.99.34:10000/znyg-frontend-common-docs/"),exports.default=e.default,exports.install=e.install,exports.copyText=o.copyText,exports.formatValue=o.formatValue,exports.treeListUtil=o.treeListUtil,exports.treeToList=o.treeToList,exports.log=r.default,exports.useDialogV2=s.useDialogV2,exports.useDrawerV2=t.useDrawerV2,exports.closeAllDrawers=n.closeAllDrawers,exports.closePopWindowById=i.closePopWindowById,exports.closePopWindowByTag=i.closePopWindowByTag,exports.getAllPopWindows=i.getAllPopWindows,exports.showPopWindow=i.showPopWindow,exports.usePopWindow=u.usePopWindow,exports.closePopWindowByIdV2=l.closePopWindowByIdV2,exports.closePopWindowByTagV2=l.closePopWindowByTagV2,exports.getAllPopWindowsV2=l.getAllPopWindowsV2,exports.showPopWindowV2=l.showPopWindowV2,exports.usePopWindowV2=p.usePopWindowV2,exports.useDialog=d.useDialog,exports.ImageViewer=a.default,exports.useImageViewer=x.useImageViewer,exports.useDrawer=c.useDrawer,exports.withInstall=m.withInstall,exports.withInstallDirectives=m.withInstallDirectives,exports.vCopy=q.default,exports.vDrag=j.default,exports.vAutoScroll=h.default,exports.vTooltip=w.default,exports.vConfirm=V.default,exports.vCountTo=T.default,exports.utils=Z.default,exports.is=g,exports.useZnForm=f.useZnForm,exports.useZnFormV2=I.useZnFormV2,exports.useZnSearch=W.useZnSearch,exports.ZnChart=F.ZnChart,exports.ZnCountTo=P.ZnCountTo,exports.ZnFormItem=z.default,exports.ZnForm=v.ZnForm,exports.batchExecute=b.batchExecute,exports.camelCaseToHyphen=b.camelCaseToHyphen,exports.checkFeatureSupport=b.checkFeatureSupport,exports.createUniqueId=b.createUniqueId,exports.debounce=b.debounce,exports.delay=b.delay,exports.executeInIdle=b.executeInIdle,exports.getElementOffsetTop=b.getElementOffsetTop,exports.getMemoryUsage=b.getMemoryUsage,exports.getObjectHash=b.getObjectHash,exports.isDeepEqual=b.isDeepEqual,exports.isElementInViewport=b.isElementInViewport,exports.isShallowEqual=b.isShallowEqual,exports.throttle=b.throttle,exports.ZnFormV2Item=y.default,exports.ZnFormV2=k.ZnFormV2,exports.ZnGrid=D.ZnGrid,exports.ZnGridItem=D.ZnGridItem,exports.ZnNumberScroll=S.ZnNumberScroll,exports.ZnSearch=E.ZnSearch,exports.ZnTable=C.ZnTable,exports.ZnTest=B.ZnTest,exports.ZnTimeline=G.ZnTimeline,exports.ZnTreeFilter=A.ZnTreeFilter,exports.ZnTreeSelect=U.ZnTreeSelect,exports.initVXETable=L.initVXETable,exports.isVXETableInitialized=L.isVXETableInitialized,exports.ZnWorkGrid=O.ZnWorkGrid,exports.ZnVirtualTable=H.default;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../packages/index.ts"],"sourcesContent":["import installer from './installer'\nimport { log } from './functions'\nexport * from './hooks'\nexport * from './utils'\nexport * from './installer'\nexport * from './directives'\nexport * from './functions'\nexport * from './components'\n\nexport default installer\nglobalThis.log = log\nconst version = '1.1.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../packages/index.ts"],"sourcesContent":["import installer from './installer'\nimport { log } from './functions'\nexport * from './hooks'\nexport * from './utils'\nexport * from './installer'\nexport * from './directives'\nexport * from './functions'\nexport * from './components'\n\nexport default installer\nglobalThis.log = log\nconst version = '1.1.15'\nif (typeof globalThis?.log?.success === 'function') {\n globalThis.log.primary(version, '欢迎使用znyg-frontend-common，在线文档：http://192.168.99.34:10000/znyg-frontend-common-docs/')\n}\n"],"names":["globalThis","log","default","success","primary"],"mappings":"6sEAUAA,WAAWC,IAAMA,EAAAC,QAEuB,mBAA7BF,YAAYC,KAAKE,SACfH,WAAAC,IAAIG,QAFD,SAEkB"}
|