diff --git a/web/src/components/tableSelector/index.vue b/web/src/components/tableSelector/index.vue index d98cff4..98c6acb 100644 --- a/web/src/components/tableSelector/index.vue +++ b/web/src/components/tableSelector/index.vue @@ -123,7 +123,7 @@ const getDict = async () => { const params = { page: pageConfig.page, limit: pageConfig.limit, - search: search + search: search.value } const dicts = dict({url: url, params: params}) await dicts.reloadDict() diff --git a/web/src/directive/authDirective.ts b/web/src/directive/authDirective.ts index 5971e64..44a8871 100644 --- a/web/src/directive/authDirective.ts +++ b/web/src/directive/authDirective.ts @@ -1,7 +1,6 @@ import type { App } from 'vue'; -import { useUserInfo } from '/@/stores/userInfo'; import { judementSameArr } from '/@/utils/arrayOperation'; - +import {BtnPermissionStore} from "/@/stores/btnPermission"; /** * 用户权限指令 * @directive 单个权限验证（v-auth="xxx"） @@ -12,16 +11,16 @@ export function authDirective(app: App) { // 单个权限验证（v-auth="xxx"） app.directive('auth', { mounted(el, binding) { - const stores = useUserInfo(); - if (!stores.userInfos.authBtnList.some((v: string) => v === binding.value)) el.parentNode.removeChild(el); + const stores = BtnPermissionStore(); + if (!stores.data.some((v: string) => v === binding.value)) el.parentNode.removeChild(el); }, }); // 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"） app.directive('auths', { mounted(el, binding) { let flag = false; - const stores = useUserInfo(); - stores.userInfos.authBtnList.map((val: string) => { + const stores = BtnPermissionStore(); + stores.data.map((val: string) => { binding.value.map((v: string) => { if (val === v) flag = true; }); @@ -32,8 +31,8 @@ export function authDirective(app: App) { // 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"） app.directive('auth-all', { mounted(el, binding) { - const stores = useUserInfo(); - const flag = judementSameArr(binding.value, stores.userInfos.authBtnList); + const stores = BtnPermissionStore(); + const flag = judementSameArr(binding.value, stores.data); if (!flag) el.parentNode.removeChild(el); }, }); diff --git a/web/src/directive/index.ts b/web/src/directive/index.ts index e2e1c57..899a303 100644 --- a/web/src/directive/index.ts +++ b/web/src/directive/index.ts @@ -1,7 +1,7 @@ import type { App } from 'vue'; import { authDirective } from '/@/directive/authDirective'; import { wavesDirective, dragDirective } from '/@/directive/customDirective'; - +import {resizeObDirective} from '/@/directive/sizeDirective' /** * 导出指令方法：v-xxx * @methods authDirective 用户权限指令，用法：v-auth @@ -15,4 +15,6 @@ export function directive(app: App) { wavesDirective(app); // 自定义拖动指令 dragDirective(app); + // 监听窗口大小变化 + resizeObDirective(app) } diff --git a/web/src/directive/sizeDirective.ts b/web/src/directive/sizeDirective.ts new file mode 100644 index 0000000..f39c689 --- /dev/null +++ b/web/src/directive/sizeDirective.ts @@ -0,0 +1,23 @@ +import {App} from "vue/dist/vue"; + +const map = new WeakMap() +const ob = new ResizeObserver((entries) => { + for(const entry of entries){ + const handler = map.get(entry.target); + handler && handler({ + width: entry.borderBoxSize[0].inlineSize, + height: entry.borderBoxSize[0].blockSize + }); + } +}); +export function resizeObDirective(app: App){ + app.directive('resizeOb', { + mounted(el,binding) { + map.set(el,binding.value); + ob.observe(el); // 监听目标元素 + }, + unmounted(el) { + ob.unobserve(el); // 停止监听 + }, + }) +} diff --git a/web/src/main.ts b/web/src/main.ts index f735d7f..b5cd68e 100644 --- a/web/src/main.ts +++ b/web/src/main.ts @@ -1,7 +1,7 @@ import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; -import { directive } from '/@/utils/directive'; +import { directive } from '/@/directive/index'; import { i18n } from '/@/i18n'; import other from '/@/utils/other'; import '/@/assets/style/tailwind.css'; // 先引入tailwind css, 以免element-plus冲突 diff --git a/web/src/utils/authDirective.ts b/web/src/utils/authDirective.ts deleted file mode 100644 index 44a8871..0000000 --- a/web/src/utils/authDirective.ts +++ /dev/null @@ -1,39 +0,0 @@ -import type { App } from 'vue'; -import { judementSameArr } from '/@/utils/arrayOperation'; -import {BtnPermissionStore} from "/@/stores/btnPermission"; -/** - * 用户权限指令 - * @directive 单个权限验证（v-auth="xxx"） - * @directive 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"） - * @directive 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"） - */ -export function authDirective(app: App) { - // 单个权限验证（v-auth="xxx"） - app.directive('auth', { - mounted(el, binding) { - const stores = BtnPermissionStore(); - if (!stores.data.some((v: string) => v === binding.value)) el.parentNode.removeChild(el); - }, - }); - // 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"） - app.directive('auths', { - mounted(el, binding) { - let flag = false; - const stores = BtnPermissionStore(); - stores.data.map((val: string) => { - binding.value.map((v: string) => { - if (val === v) flag = true; - }); - }); - if (!flag) el.parentNode.removeChild(el); - }, - }); - // 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"） - app.directive('auth-all', { - mounted(el, binding) { - const stores = BtnPermissionStore(); - const flag = judementSameArr(binding.value, stores.data); - if (!flag) el.parentNode.removeChild(el); - }, - }); -} diff --git a/web/src/utils/customDirective.ts b/web/src/utils/customDirective.ts deleted file mode 100644 index c67350f..0000000 --- a/web/src/utils/customDirective.ts +++ /dev/null @@ -1,178 +0,0 @@ -import type { App } from 'vue'; - -/** - * 按钮波浪指令 - * @directive 默认方式：v-waves，如 `
` - * @directive 参数方式：v-waves=" |light|red|orange|purple|green|teal"，如 `
` - */ -export function wavesDirective(app: App) { - app.directive('waves', { - mounted(el, binding) { - el.classList.add('waves-effect'); - binding.value && el.classList.add(`waves-${binding.value}`); - function setConvertStyle(obj: { [key: string]: unknown }) { - let style: string = ''; - for (let i in obj) { - if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`; - } - return style; - } - function onCurrentClick(e: { [key: string]: unknown }) { - let elDiv = document.createElement('div'); - elDiv.classList.add('waves-ripple'); - el.appendChild(elDiv); - let styles = { - left: `${e.layerX}px`, - top: `${e.layerY}px`, - opacity: 1, - transform: `scale(${(el.clientWidth / 100) * 10})`, - 'transition-duration': `750ms`, - 'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`, - }; - elDiv.setAttribute('style', setConvertStyle(styles)); - setTimeout(() => { - elDiv.setAttribute( - 'style', - setConvertStyle({ - opacity: 0, - transform: styles.transform, - left: styles.left, - top: styles.top, - }) - ); - setTimeout(() => { - elDiv && el.removeChild(elDiv); - }, 750); - }, 450); - } - el.addEventListener('mousedown', onCurrentClick, false); - }, - unmounted(el) { - el.addEventListener('mousedown', () => {}); - }, - }); -} - -/** - * 自定义拖动指令 - * @description 使用方式：v-drag="[dragDom,dragHeader]"，如 `
` - * @description dragDom 要拖动的元素，dragHeader 要拖动的 Header 位置 - * @link 注意：https://github.com/element-plus/element-plus/issues/522 - * @lick 参考：https://blog.csdn.net/weixin_46391323/article/details/105228020?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-10&spm=1001.2101.3001.4242 - */ -export function dragDirective(app: App) { - app.directive('drag', { - mounted(el, binding) { - if (!binding.value) return false; - - const dragDom = document.querySelector(binding.value[0]) as HTMLElement; - const dragHeader = document.querySelector(binding.value[1]) as HTMLElement; - - dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`); - - function down(e: any, type: string) { - // 鼠标按下，计算当前元素距离可视区的距离 - const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft; - const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop; - - // body当前宽度 - const screenWidth = document.body.clientWidth; - // 可见区域高度(应为body高度，可某些环境下无法获取) - const screenHeight = document.documentElement.clientHeight; - - // 对话框宽度 - const dragDomWidth = dragDom.offsetWidth; - // 对话框高度 - const dragDomheight = dragDom.offsetHeight; - - const minDragDomLeft = dragDom.offsetLeft; - const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; - - const minDragDomTop = dragDom.offsetTop; - const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; - - // 获取到的值带px 正则匹配替换 - let styL: any = getComputedStyle(dragDom).left; - let styT: any = getComputedStyle(dragDom).top; - - // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px - if (styL.includes('%')) { - styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); - styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); - } else { - styL = +styL.replace(/\px/g, ''); - styT = +styT.replace(/\px/g, ''); - } - - return { - disX, - disY, - minDragDomLeft, - maxDragDomLeft, - minDragDomTop, - maxDragDomTop, - styL, - styT, - }; - } - - function move(e: any, type: string, obj: any) { - let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj; - - // 通过事件委托，计算移动的距离 - let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX; - let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY; - - // 边界处理 - if (-left > minDragDomLeft) { - left = -minDragDomLeft; - } else if (left > maxDragDomLeft) { - left = maxDragDomLeft; - } - - if (-top > minDragDomTop) { - top = -minDragDomTop; - } else if (top > maxDragDomTop) { - top = maxDragDomTop; - } - - // 移动当前元素 - dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; - } - - /** - * pc端 - * onmousedown 鼠标按下触发事件 - * onmousemove 鼠标按下时持续触发事件 - * onmouseup 鼠标抬起触发事件 - */ - dragHeader.onmousedown = (e) => { - const obj = down(e, 'pc'); - document.onmousemove = (e) => { - move(e, 'pc', obj); - }; - document.onmouseup = () => { - document.onmousemove = null; - document.onmouseup = null; - }; - }; - - /** - * 移动端 - * ontouchstart 当按下手指时，触发ontouchstart - * ontouchmove 当移动手指时，触发ontouchmove - * ontouchend 当移走手指时，触发ontouchend - */ - dragHeader.ontouchstart = (e) => { - const obj = down(e, 'app'); - document.ontouchmove = (e) => { - move(e, 'app', obj); - }; - document.ontouchend = () => { - document.ontouchmove = null; - document.ontouchend = null; - }; - }; - }, - }); -} diff --git a/web/src/utils/directive.ts b/web/src/utils/directive.ts deleted file mode 100644 index a75b187..0000000 --- a/web/src/utils/directive.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { App } from 'vue'; -import { authDirective } from '/@/utils/authDirective'; -import { wavesDirective, dragDirective } from '/@/utils/customDirective'; - -/** - * 导出指令方法：v-xxx - * @methods authDirective 用户权限指令，用法：v-auth - * @methods wavesDirective 按钮波浪指令，用法：v-waves - * @methods dragDirective 自定义拖动指令，用法：v-drag - */ -export function directive(app: App) { - // 用户权限指令 - authDirective(app); - // 按钮波浪指令 - wavesDirective(app); - // 自定义拖动指令 - dragDirective(app); -} diff --git a/web/src/views/system/role/components/PermissionComNew/index.vue b/web/src/views/system/role/components/PermissionComNew/index.vue index 1d7a80f..9819291 100644 --- a/web/src/views/system/role/components/PermissionComNew/index.vue +++ b/web/src/views/system/role/components/PermissionComNew/index.vue @@ -6,7 +6,7 @@