From 878bf3d5307fa9fc889539844701f30f91032b9c Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周三, 07 5月 2025 09:08:07 +0800
Subject: [PATCH] 222
---
CommonDLL/公共前端组件/BaseQueryDrawer/BaseQueryDrawer.module.scss | 78 +++++++++++++++++++
CommonDLL/公共前端组件/BaseQueryDrawer/BaseQueryDrawer.tsx | 113 ++++++++++++++++++++++++++++
2 files changed, 191 insertions(+), 0 deletions(-)
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.module.scss" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.module.scss"
new file mode 100644
index 0000000..a0393bb
--- /dev/null
+++ "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.module.scss"
@@ -0,0 +1,78 @@
+.informationDrawerPosition {
+ position: relative;
+}
+.informationDrawer {
+ background: linear-gradient(180deg, #dee4ff 0%, #ffffff 40%, #ffffff 100%);
+ box-shadow: 0px -4px 30px 1px rgba(0, 0, 0, 0.16);
+
+ border-radius: 6px 6px 0px 0px;
+ opacity: 1;
+ border: 1px solid #f0f3fd;
+
+ @keyframes iconFrames {
+ 0% {
+ opacity: 1;
+ }
+ 25% {
+ opacity: 0.66;
+ }
+ 50% {
+ opacity: 0.33;
+ }
+ 75% {
+ opacity: 0.66;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+ }
+ .iconPosition {
+ position: absolute;
+ top: 38px;
+ right: 111px;
+ user-select: none;
+ -webkit-user-drag: none;
+ animation: iconFrames 2s infinite linear;
+ }
+ :global(.cs-drawer__header) {
+ padding-top: 36px;
+ .cs-drawer__close-btn {
+ margin-top: -16px;
+ font-size: 16px;
+ }
+
+ > span {
+ font-size: 18px;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: bold;
+ color: #464e54;
+ line-height: 0px;
+ }
+ }
+ :global(.cs-drawer__close-btn) {
+ margin-top: -16px;
+ font-size: 16px;
+ }
+ :global(.cs-drawer__body) {
+ padding: 30px;
+ padding-top: 13px;
+ }
+}
+
+.modal {
+ width: var(--drawer-width);
+ left: calc(100% - var(--drawer-width)) !important;
+}
+
+.csDialogFooter {
+ padding: 0 18px;
+ .csBaseBtn {
+ width: 98px;
+ height: 26px;
+ }
+ .dialogBtn {
+ background: #efeded;
+ color: #666666;
+ }
+}
diff --git "a/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.tsx" "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.tsx"
new file mode 100644
index 0000000..9d144bb
--- /dev/null
+++ "b/CommonDLL/\345\205\254\345\205\261\345\211\215\347\253\257\347\273\204\344\273\266/BaseQueryDrawer/BaseQueryDrawer.tsx"
@@ -0,0 +1,113 @@
+import { computed, defineComponent, onMounted, ref } from 'vue'
+import styles from './BaseQueryDrawer.module.scss'
+import Icon from '../Icon/Icon'
+//@ts-ignore
+export default defineComponent<{
+ [key: string]: any
+}>({
+ // @ts-ignore
+ name: 'BaseDrawer',
+ props: {
+ // 閬僵鏄惁鍙偣鍑�
+ clickable: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ default: '',
+ },
+ width: {
+ type: String,
+ default: '',
+ },
+ // modelValue: {
+ // type: Boolean,
+ // default: false,
+ // },
+ },
+ emits: ['close','reset', 'confirmQueryForBase', 'update:modelValue', 'open', 'beforeClose'],
+ setup(props: any, { emit, slots, attrs }: any) {
+ // const size = computed(() => {
+ // if (attrs.size.includes('px')) {
+ // return attrs.size
+ // }
+ // })
+
+ // const model = computed(() => {
+ // if (attrs.model.includes('')) {
+ // return attrs.model
+ // }
+ // })
+
+ return () => {
+ return (
+ <div
+ class={styles.drawContent}
+ //@ts-ignore
+ // style={props.clickable ? { '--drawer-width': size.value } : {}}
+ >
+ <el-drawer
+ // modal-class={props.clickable ? styles.modal : ''}
+ class={{
+ [styles.informationDrawer]: true,
+ // [styles.informationDrawerPosition]: props.clickable,
+ }}
+ onOpen={() => emit('open')}
+ onClose={() => emit('close')}
+ v-slots={{
+ footer() {
+ return (
+ <div class={styles.csDialogFooter}>
+ <el-button
+ onClick={() => emit('close')}
+ type="info"
+ plain
+ class={{
+ [styles.dialogBtn]: true,
+ [styles.csBaseBtn]: true,
+ }}
+ >
+ 鍏抽棴
+ </el-button>
+ <el-button
+ onClick={() => emit('reset')}
+ type="info"
+ plain
+ class={{
+ [styles.dialogBtn]: true,
+ [styles.csBaseBtn]: true,
+ }}
+ >
+ 閲嶇疆
+ </el-button>
+ <el-button
+ onClick={() => emit('confirmQueryForBase')}
+ type="primary"
+ class={{
+ [styles.csBaseBtn]: true,
+ }}
+ >
+ 鏌ヨ
+ </el-button>
+ </div>
+ )
+ },
+ }}
+ {...attrs}
+ title={props.title}
+ size={props.width || attrs.size}
+ >
+ <Icon
+ width={167}
+ height={54}
+ class={styles.iconPosition}
+ icon="drawer_bg"
+ />
+ {slots.default?.()}
+ </el-drawer>
+ </div>
+ )
+ }
+ },
+})
--
Gitblit v1.9.3