ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

微调

Browse Source
This commit is contained in:
hongawen
2024-10-21 14:43:37 +08:00
parent 3857528d12
commit 951754f887
6 changed files with 227 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/main.ts
View File

@@ -1,69 +1,70 @@
import { createApp } from "vue";
import App from "./App.vue";
import { createApp } from 'vue'
import App from './App.vue'
// reset style sheet
import "@/styles/reset.scss";
import '@/styles/reset.scss'
// CSS common style sheet
import "@/styles/common.scss";
import '@/styles/common.scss'
// iconfont css
import "@/assets/iconfont/iconfont.scss";
import '@/assets/iconfont/iconfont.scss'
// font css
import "@/assets/fonts/font.scss";
import '@/assets/fonts/font.scss'
// element css
import "element-plus/dist/index.css";
import 'element-plus/dist/index.css'
// element dark css
import "element-plus/theme-chalk/dark/css-vars.css";
import 'element-plus/theme-chalk/dark/css-vars.css'
// custom element dark css
import "@/styles/element-dark.scss";
import '@/styles/element-dark.scss'
// custom element css
import "@/styles/element.scss";
import '@/styles/element.scss'
// svg icons
import "virtual:svg-icons-register";
import 'virtual:svg-icons-register'
// element plus
import ElementPlus from "element-plus";
import ElementPlus from 'element-plus'
// element icons
import * as Icons from "@element-plus/icons-vue";
import * as Icons from '@element-plus/icons-vue'
// custom directives
import directives from "@/directives/index";
import directives from '@/directives/index'
// vue Router
import router from "@/routers";
import router from '@/routers'
// vue i18n
import I18n from "@/languages/index";
import I18n from '@/languages/index'
// pinia store
import pinia from "@/stores";
import pinia from '@/stores'
// errorHandler
import errorHandler from "@/utils/errorHandler";
import errorHandler from '@/utils/errorHandler'
import registerGlobComp from '@/components'
const app = createApp(App);
const app = createApp(App)
// 自定义警告处理程序，忽略所有警告
if (import.meta.env.VUE_APP_SILENCE_WARNINGS === true) {
app.config.warnHandler = () => {};
app.config.warnHandler = () => {
}
// if (import.meta.env.VUE_APP_SILENCE_WARNINGS === true) {
// }
app.config.errorHandler = errorHandler;
app.config.errorHandler = errorHandler
// register the element Icons component
Object.keys(Icons).forEach(key => {
app.component(key, Icons[key as keyof typeof Icons]);
});
app.component(key, Icons[key as keyof typeof Icons])
})
const setupAll = async () => {
app
.use(ElementPlus)
.use(directives)
.use(router) // 使用路由
.use(I18n)
.use(pinia)
.use(registerGlobComp) // 使用全局自定义组件
app
.use(ElementPlus)
.use(directives)
.use(router) // 使用路由
.use(I18n)
.use(pinia)
.use(registerGlobComp) // 使用全局自定义组件
//待路由初始化完毕后，挂载app
await router.isReady()
//待路由初始化完毕后，挂载app
await router.isReady()
}
//挂载app
setupAll().then(() => {
app.mount('#app')
app.mount('#app')
})

30
frontend/src/styles/element.scss
View File

@@ -297,7 +297,7 @@
//全局dialog修改
.el-dialog {
padding: 0px !important;
border: 2px solid #3665a0;
border: 0 solid #3665a0;
.el-dialog__header {
background: var(--el-color-primary);
@@ -434,16 +434,9 @@
}
}
.el-dialog {
}
.dialog-small{
.el-dialog__body{
max-height: 250px;
max-height: 280px;
}
}
.dialog-middle{
@@ -455,4 +448,23 @@
.el-dialog__body{
max-height: 620px;
}
}
.form-two {
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%;
}
}
}
}

2
frontend/src/utils/elementBind.ts
View File

@@ -1,5 +1,5 @@
export const dialogSmall = {
width:'520px',
width:'400px',
closeOnClickModal:false,
draggable:true,
class:'dialog-small'

80
frontend/src/views/demo/proTable/doubleColumn.vue Normal file
View File

@@ -0,0 +1,80 @@
<!--双列-->
<template>
<el-dialog v-model='dialogVisible' :title='title' v-bind='dialogMiddle'>
<el-scrollbar>
<el-form :inline="false" label-width="auto" ref="formRef" class='form-two'>
<el-form-item label="姓名" prop="username" >
<el-input
></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input
></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input
></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="id">
<el-input
></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
></el-input>
</el-form-item>
<el-form-item label="居住地址" prop="address">
<el-input
></el-input>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input
></el-input>
</el-form-item>
<el-form-item label="来源" prop="source">
<el-input
></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<div class='dialog-footer'>
<el-button @click='close()'>取消</el-button>
<el-button type='primary' @click='confirmForm()'>确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
import { dialogMiddle } from '@/utils/elementBind'
const dialogVisible = ref(false)
const title = ref('单列弹出框')
const open = (textTitle: string) => {
dialogVisible.value = true
title.value = textTitle
}
const close = () => {
dialogVisible.value = false
}
const confirmForm = () => {
ElMessage.info('业务数据提交')
}
defineExpose({ open })
</script>
<style>
</style>

12
frontend/src/views/demo/proTable/index.vue
View File

@@ -26,6 +26,8 @@
</template>
</ProTable>
</div>
<single-column ref='singleColumn' />
<double-column ref='doubleColumn' />
</template>
<script setup lang='tsx' name='useProTable'>
import { ref ,reactive} from 'vue'
@@ -39,6 +41,8 @@ import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import userDataList from '@/api/user/userData'
import { useDictStore } from '@/stores/modules/dict'
import SingleColumn from '@/views/demo/proTable/singleColumn.vue'
import DoubleColumn from '@/views/demo/proTable/doubleColumn.vue'
const dictStore = useDictStore()
import {
getUserList,
@@ -51,6 +55,8 @@ import {
} from '@/api/user/user'
import { ElMessageBox } from 'element-plus'
const userData = userDataList
const singleColumn = ref()
const doubleColumn = ref()
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
@@ -161,8 +167,9 @@ const batchDelete = async (id: string[]) => {
}
// 重置用户密码
const resetPass = async (params: User.ResUserList) => {
await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
proTable.value?.getTableList()
// await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
// proTable.value?.getTableList()
doubleColumn.value.open("双列弹出框")
}
// 切换用户状态
const changeStatus = async (row: User.ResUserList) => {
@@ -191,5 +198,6 @@ const batchAdd = () => {
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
singleColumn.value.open("单列弹出框")
}
</script>

80
frontend/src/views/demo/proTable/singleColumn.vue Normal file
View File

@@ -0,0 +1,80 @@
<!--单列-->
<template>
<el-dialog v-model='dialogVisible' :title='title' v-bind='dialogSmall'>
<el-scrollbar>
<el-form :inline="false" label-width="auto" ref="formRef">
<el-form-item label="姓名" prop="username">
<el-input
></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input
></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input
></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="id">
<el-input
></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
></el-input>
</el-form-item>
<el-form-item label="居住地址" prop="address">
<el-input
></el-input>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input
></el-input>
</el-form-item>
<el-form-item label="来源" prop="source">
<el-input
></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<div class='dialog-footer'>
<el-button @click='close()'>取消</el-button>
<el-button type='primary' @click='confirmForm()'>确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
import { dialogSmall } from '@/utils/elementBind'
const dialogVisible = ref(false)
const title = ref('单列弹出框')
const open = (textTitle: string) => {
dialogVisible.value = true
title.value = textTitle
}
const close = () => {
dialogVisible.value = false
}
const confirmForm = () => {
ElMessage.info('业务数据提交')
}
defineExpose({ open })
</script>
<style>
</style>