微调

frontend/src/main.ts

@@ -1,69 +1,70 @@
-import { createApp } from "vue";
+import { createApp } from 'vue'
-import App from "./App.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
+    app
-    .use(ElementPlus)
+        .use(ElementPlus)
-    .use(directives)
+        .use(directives)
-    .use(router) // 使用路由
+        .use(router) // 使用路由
-    .use(I18n)
+        .use(I18n)
-    .use(pinia)
+        .use(pinia)
-    .use(registerGlobComp) // 使用全局自定义组件
+        .use(registerGlobComp) // 使用全局自定义组件
 
-  //待路由初始化完毕后，挂载app
+    //待路由初始化完毕后，挂载app
-  await router.isReady()
+    await router.isReady()
 }
 
 //挂载app
 setupAll().then(() => {
-  app.mount('#app')
+    app.mount('#app')
 })

frontend/src/styles/element.scss

@@ -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: 280px;
-   
-    max-height: 250px;
   }
 }
 .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%;
+              }
+          }
+      }
 }

frontend/src/utils/elementBind.ts

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

frontend/src/views/demo/proTable/doubleColumn.vue

@@ -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>

frontend/src/views/demo/proTable/index.vue

@@ -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}】用户密码`)
+  // await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
-  proTable.value?.getTableList()
+  // 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>

frontend/src/views/demo/proTable/singleColumn.vue

@@ -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>