From a9c03a275657b3bb8bbaad7fe9707282a3aa0f3c Mon Sep 17 00:00:00 2001 From: hongawen <83944980@qq.com> Date: Mon, 28 Oct 2024 13:25:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E-=E5=85=A8=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=BC=B9=E5=87=BA=E6=A1=86=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/user/userData.ts | 33 ++++ frontend/src/hooks/useTime.ts | 60 +++---- frontend/src/hooks/useViewSize.ts | 37 +++++ frontend/src/styles/element.scss | 84 +++++----- frontend/src/views/demo/proTable/index.vue | 69 ++++---- frontend/src/views/demo/proTable/open.vue | 177 +++++++++++++++++++++ 6 files changed, 361 insertions(+), 99 deletions(-) create mode 100644 frontend/src/hooks/useViewSize.ts create mode 100644 frontend/src/views/demo/proTable/open.vue diff --git a/frontend/src/api/user/userData.ts b/frontend/src/api/user/userData.ts index 5582e9d..d22e8ba 100644 --- a/frontend/src/api/user/userData.ts +++ b/frontend/src/api/user/userData.ts @@ -95,6 +95,39 @@ const data = [ 'status': 1, 'rolename': '操作员', }, + { + 'id': '448686878612127245', + 'username': 'operator_J', + 'password': '12345678', + 'realname': '孙芳2', + 'status': 1, + 'rolename': '操作员', + }, + { + 'id': '448686878612127245', + 'username': 'operator_J', + 'password': '12345678', + 'realname': '孙芳2', + 'status': 1, + 'rolename': '操作员', + }, + { + 'id': '448686878612127245', + 'username': 'operator_J', + 'password': '12345678', + 'realname': '孙芳2', + 'status': 1, + 'rolename': '操作员', + }, + { + 'id': '448686878612127245', + 'username': 'operator_J', + 'password': '12345678', + 'realname': '孙芳2', + 'status': 1, + 'rolename': '操作员', + } + ] export default data \ No newline at end of file diff --git a/frontend/src/hooks/useTime.ts b/frontend/src/hooks/useTime.ts index e5a6674..a59574f 100644 --- a/frontend/src/hooks/useTime.ts +++ b/frontend/src/hooks/useTime.ts @@ -1,38 +1,38 @@ -import { ref } from "vue"; +import { ref } from 'vue' /** * @description 获取本地时间 */ export const useTime = () => { - const year = ref(0); // 年份 - const month = ref(0); // 月份 - const week = ref(""); // 星期几 - const day = ref(0); // 天数 - const hour = ref(0); // 小时 - const minute = ref(0); // 分钟 - const second = ref(0); // 秒 - const nowTime = ref(""); // 当前时间 + const year = ref(0) // 年份 + const month = ref(0) // 月份 + const week = ref('') // 星期几 + const day = ref(0) // 天数 + const hour = ref(0) // 小时 + const minute = ref(0) // 分钟 + const second = ref(0) // 秒 + const nowTime = ref('') // 当前时间 - // 更新时间 - const updateTime = () => { - const date = new Date(); - year.value = date.getFullYear(); - month.value = date.getMonth() + 1; - week.value = "日一二三四五六".charAt(date.getDay()); - day.value = date.getDate(); - hour.value = - (date.getHours() + "")?.padStart(2, "0") || - new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours()); - minute.value = - (date.getMinutes() + "")?.padStart(2, "0") || - new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes()); - second.value = - (date.getSeconds() + "")?.padStart(2, "0") || - new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getSeconds()); - nowTime.value = `${year.value}年${month.value}月${day.value} ${hour.value}:${minute.value}:${second.value}`; - }; + // 更新时间 + const updateTime = () => { + const date = new Date() + year.value = date.getFullYear() + month.value = date.getMonth() + 1 + week.value = '日一二三四五六'.charAt(date.getDay()) + day.value = date.getDate() + hour.value = + (date.getHours() + '')?.padStart(2, '0') || + new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours()) + minute.value = + (date.getMinutes() + '')?.padStart(2, '0') || + new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes()) + second.value = + (date.getSeconds() + '')?.padStart(2, '0') || + new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getSeconds()) + nowTime.value = `${year.value}年${month.value}月${day.value} ${hour.value}:${minute.value}:${second.value}` + } - updateTime(); + updateTime() - return { year, month, day, hour, minute, second, week, nowTime }; -}; + return { year, month, day, hour, minute, second, week, nowTime } +} diff --git a/frontend/src/hooks/useViewSize.ts b/frontend/src/hooks/useViewSize.ts new file mode 100644 index 0000000..5ab9197 --- /dev/null +++ b/frontend/src/hooks/useViewSize.ts @@ -0,0 +1,37 @@ +import { ref } from 'vue' + +export const useViewSize = () => { + + const popupBaseView = ref(null) + const viewWidth = ref("0") + const viewHeight = ref("0") + const unit = 'px' + + /** + * 更新宽和高的数据 + */ + const updateDimensions = () => { + if (popupBaseView.value) { + viewWidth.value = popupBaseView.value.offsetWidth + unit + viewHeight.value = popupBaseView.value.offsetHeight + unit + } + } + + /** + * 组件挂载完毕，计算宽高，并且给浏览器添加监听器，监听窗口大小改变 + */ + onMounted(() => { + updateDimensions() + window.addEventListener('resize', updateDimensions) + }) + + /** + * 组件视图更新完毕，计算宽高 + */ + onUpdated(() => { + updateDimensions() + }) + + return { popupBaseView, viewWidth, viewHeight } + +} \ No newline at end of file diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss index a3c7f5b..b7d2e63 100644 --- a/frontend/src/styles/element.scss +++ b/frontend/src/styles/element.scss @@ -25,9 +25,9 @@ .mask-image { padding-right: 50px; mask-image: linear-gradient(90deg, - #000000 0%, - #000000 calc(100% - 50px), - transparent); + #000000 0%, + #000000 calc(100% - 50px), + transparent); } /* custom card */ @@ -110,7 +110,7 @@ margin-bottom: 10px; .el-form { - .el-form-item__content>* { + .el-form-item__content > * { width: 100%; } @@ -182,7 +182,7 @@ } // 设置 el-table 中 header 文字不换行，并省略 - .el-table__header .el-table__cell>.cell { + .el-table__header .el-table__cell > .cell { // white-space: nowrap; white-space: wrap; } @@ -328,6 +328,11 @@ } } + .el-overlay { + position: absolute; + } + + .el-dialog__body { // height: 200px; // max-height: 60vh; @@ -356,19 +361,20 @@ border-top: 1px solid #cccccc; width: 100%; bottom: 0; - - - .el-button { - font-size: 12px ; - - padding: 5px 11px; - height: 24px; - - } - .el-button + .el-button { - margin-left: 10px; + + + .el-button { + font-size: 12px; + + padding: 5px 11px; + height: 24px; + } + + .el-button + .el-button { + margin-left: 10px; } + } } //全局el-form-item间距 @@ -434,37 +440,43 @@ } } -.dialog-small{ - .el-dialog__body{ + +.dialog-small { + .el-dialog__body { max-height: 260px; } } -.dialog-middle{ - .el-dialog__body{ + +.dialog-middle { + .el-dialog__body { max-height: 400px; } } -.dialog-big{ - .el-dialog__body{ + +.dialog-big { + .el-dialog__body { max-height: 620px; } } .form-two { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .el-form-item { display: flex; - flex-wrap: wrap; - justify-content: space-between; - .el-form-item { - display: flex; - width: 48%; - .el-form-item__content { - flex: 1; - .el-select, - .el-cascader, - .el-input__inner, - .el-date-editor { - width: 100%; - } - } + width: 48%; + + .el-form-item__content { + flex: 1; + + .el-select, + .el-cascader, + .el-input__inner, + .el-date-editor { + width: 100%; } + } + } } \ No newline at end of file diff --git a/frontend/src/views/demo/proTable/index.vue b/frontend/src/views/demo/proTable/index.vue index ff4d3f5..3598bb1 100644 --- a/frontend/src/views/demo/proTable/index.vue +++ b/frontend/src/views/demo/proTable/index.vue @@ -1,9 +1,9 @@ + \ No newline at end of file