优化vue3代码生成

OpenAuth.WebApi/Template/SingleTable/BuildVue3.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: yubaolee <yubaolee@163.com> | ahfu~ <954478625@qq.com>
- * @Description: 代码生成器自动生成动态头部列表
+ * @Description: OpenAuth.Pro代码生成器自动生成
- * @Copyright (c) 2022 by yubaolee | ahfu~ , All Rights Reserved. 
+ * Copyright (c) 2025 by yubaolee | ahfu~ , All Rights Reserved.  
 -->
 <template>
   <div class="flex flex-column">
@@ -9,50 +9,25 @@
       <div class="search-box">
         <el-input @keyup.enter="handleFilter" size="small" class="custom-input w-200" :placeholder="'名称'"
           v-model="listQuery.key"></el-input>
-
+        <el-button size="small" class="custom-button filter-item" icon="el-icon-search"
-        <el-button size="small" class="custom-button filter-item" icon="el-icon-search" @click="handleFilter">搜索</el-button>
+          @click="handleFilter">搜索</el-button>
       </div>
       <permission-btn v-on:btn-event="onBtnClicked"></permission-btn>
     </sticky>
-
+    <auth-table ref="mainTableRef" :select-type="'checkbox'" :table-fields="headerList" :data="list"
-    <auth-table
+      :v-loading="listLoading" @row-click="rowClick" @selection-change="handleSelectionChange"></auth-table>
-      ref="mainTable"
+    <el-pagination v-show="total > 0" :total="total" v-model:currentPage="listQuery.page"
-      :select-type="'checkbox'"
+      v-model:page-size="listQuery.limit" @current-change="handleCurrentChange" />
-      :table-fields="headerList"
-      :data="list"
-      :v-loading="listLoading"
-      @row-click="rowClick"
-      @selection-change="handleSelectionChange"></auth-table>
-    <el-pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:currentPage="listQuery.page"
-      v-model:page-size="listQuery.limit"
-      @current-change="handleCurrentChange" />
   </div>
-  <el-dialog
+  <el-dialog draggable class="dialog-mini" width="500px" :title="dialogStatus==0?'新增':'编辑'" v-model="dialogFormVisible">
-    draggable
+    <auth-form ref="dataFormRef" :rules="rules" :edit-model="true" :form-fields="headerList" :data="temp"
-    class="dialog-mini"
-    width="500px"
-    :title="txtDlgTitle[dialogStatus]"
-    v-model="dialogFormVisible">
-    <auth-form
-      ref="dataForm"
-      :rules="rules"
-      :edit-model="true"
-      :form-fields="headerList"
-      :data="temp"
       :col-num="2"></auth-form>
     <template v-slot:footer>
       <div>
         <el-button size="small" @click="dialogFormVisible = false">
           取消
         </el-button>
-        <el-button
+        <el-button size="small" v-if="dialogStatus == 0" type="primary" @click="createData">
-          size="small"
-          v-if="dialogStatus == 'create'"
-          type="primary"
-          @click="createData">
           确认
         </el-button>
         <el-button size="small" v-else type="primary" @click="updateData">
@@ -76,46 +51,35 @@ import Sticky from '@/components/Sticky/index.vue'
 import permissionBtn from '@/components/PermissionBtn/index.vue'
 import AuthForm from '../../components/Base/AuthForm.vue'
 import AuthTable from '../../components/Base/AuthTable.vue'
-
 const headerList = ref([]) //列表头
 const multipleSelection = ref([]) //列表checkbox选中的值
 const list = ref([]) //列表值
 const total = ref(0) //总条数
 const listLoading = ref(true) //进度条
 const dialogFormVisible = ref(false) //是否显示编辑框
-const dialogStatus = ref('')
+const dialogStatus = ref(0) //0:新增 1:编辑
 let temp = reactive({}) //新增（编辑）绑定对话框
-
 const listQuery = reactive({
   // 查询条件
   page: 1,
   limit: 20,
   key: undefined,
 })
-
-const txtDlgTitle = reactive({
-  //对话框标题
-  update: '编辑',
-  create: '添加',
-})
 const rules = reactive({
   name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
 })
-
 //组件refs
-const mainTable = ref(null)
+const mainTableRef = ref(null)
-const dataForm = ref(null)
+const dataFormRef = ref(null)
-
 onMounted(() => {
   headerList.value = [
-     {HeaderList}
+  {HeaderList}
   ]
   getList()
 })
-
 const rowClick = function (row) {
-  mainTable.value.clearSelection()
+  mainTableRef.value.clearSelection()
-  mainTable.value.toggleRowSelection(row)
+  mainTableRef.value.toggleRowSelection(row)
 }
 const handleSelectionChange = function (val) {
   multipleSelection.value = val
@@ -127,27 +91,18 @@ const onBtnClicked = function (domId, callback) {
       break
     case 'btnEdit':
       if (multipleSelection.value.length !== 1) {
-        ElMessage.error({
+        ElMessage.error('只能选中一个进行编辑')
-          message: '只能选中一个进行编辑',
-          type: 'error',
-        })
         return
       }
       handleUpdate(multipleSelection.value[0])
       break
     case 'btnDel':
       if (multipleSelection.value.length < 1) {
-        ElMessage.error({
+        ElMessage.error('至少删除一个')
-          message: '至少删除一个',
-          type: 'error',
-        })
         return
       }
       handleDelete(multipleSelection.value)
       break
-    case 'btnExport':
-      mainTable.value.exportExcel('资源文件', callback)
-      break
     default:
       break
   }
@@ -164,22 +119,12 @@ const handleFilter = function () {
   listQuery.page = 1
   getList()
 }
-const handleSizeChange = function (val) {
+
-  listQuery.limit = val
-  getList()
-}
 const handleCurrentChange = function (val) {
   listQuery.page = val
   getList()
 }
-const handleModifyStatus = function (row, disable) {
+
-  // 模拟修改状态
-  ElMessage.success({
-    message: '操作成功',
-    type: 'success',
-  })
-  row.disable = disable
-}
 const resetTemp = function () {
   let obj = {}
   headerList.value.forEach(item => {
@@ -188,39 +133,30 @@ const resetTemp = function () {
   Object.assign(temp, obj)
 }
 const handleCreate = async function () {
-  // 弹出添加框
   resetTemp()
-  dialogStatus.value = 'create'
+  dialogStatus.value = 0
   dialogFormVisible.value = true
   await nextTick()
-  dataForm.value.clearValidate()
+  dataFormRef.value.clearValidate()
 }
 const createData = function () {
-  // 保存提交
+  dataFormRef.value.validate(() => {
-  dataForm.value.validate(() => {
     {TableName}s.add(temp).then(() => {
       list.value.unshift(temp)
       dialogFormVisible.value = false
-      ElNotification({
+      ElNotification.success('创建成功')
-        title: '成功',
-        message: '创建成功',
-        type: 'success',
-        duration: 2000,
-      })
     })
   })
 }
 const handleUpdate = async function (row) {
-  // 弹出编辑框
   Object.assign(temp, row) //必需这样赋值才能响应式
-  dialogStatus.value = 'update'
+  dialogStatus.value = 1
   dialogFormVisible.value = true
   await nextTick()
-  dataForm.value.clearValidate()
+  dataFormRef.value.clearValidate()
 }
 const updateData = function () {
-  // 更新提交
+  dataFormRef.value.validate(() => {
-  dataForm.value.validate(() => {
     const tempData = Object.assign({}, temp)
     {TableName}s.update(tempData).then(() => {
       for (const v of list.value) {
@@ -231,17 +167,11 @@ const updateData = function () {
         }
       }
       dialogFormVisible.value = false
-      ElNotification({
+      ElNotification.success('更新成功')
-        title: '成功',
-        message: '更新成功',
-        type: 'success',
-        duration: 2000,
-      })
     })
   })
 }
 const handleDelete = function (rows) {
-  // 多行删除
+  delrows({TableName}s, rows, getList)
-  delrows({TableName}s, rows)
 }
 </script>

OpenAuth.WebApi/Template/SingleTable/BuildVue3WithDynamicHeader.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: yubaolee <yubaolee@163.com> | ahfu~ <954478625@qq.com>
- * @Description: 代码生成器自动生成动态头部列表
+ * @Description: OpenAuth.Pro代码生成器自动生成
- * @Copyright (c) 2022 by yubaolee | ahfu~ , All Rights Reserved. 
+ * Copyright (c) 2025 by yubaolee | ahfu~ , All Rights Reserved.  
 -->
 <template>
   <div class="flex flex-column">
@@ -9,50 +9,25 @@
       <div class="search-box">
         <el-input @keyup.enter="handleFilter" size="small" class="custom-input w-200" :placeholder="'名称'"
           v-model="listQuery.key"></el-input>
-
+        <el-button size="small" class="custom-button filter-item" icon="el-icon-search"
-        <el-button size="small" class="custom-button filter-item" icon="el-icon-search" @click="handleFilter">搜索</el-button>
+          @click="handleFilter">搜索</el-button>
       </div>
       <permission-btn v-on:btn-event="onBtnClicked"></permission-btn>
     </sticky>
-
+    <auth-table ref="mainTableRef" :select-type="'checkbox'" :table-fields="headerList" :data="list"
-    <auth-table
+      :v-loading="listLoading" @row-click="rowClick" @selection-change="handleSelectionChange"></auth-table>
-      ref="mainTable"
+    <el-pagination v-show="total > 0" :total="total" v-model:currentPage="listQuery.page"
-      :select-type="'checkbox'"
+      v-model:page-size="listQuery.limit" @current-change="handleCurrentChange" />
-      :table-fields="headerList"
-      :data="list"
-      :v-loading="listLoading"
-      @row-click="rowClick"
-      @selection-change="handleSelectionChange"></auth-table>
-    <el-pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:currentPage="listQuery.page"
-      v-model:page-size="listQuery.limit"
-      @current-change="handleCurrentChange" />
   </div>
-  <el-dialog
+  <el-dialog draggable class="dialog-mini" width="500px" :title="dialogStatus==0?'新增':'编辑'" v-model="dialogFormVisible">
-    draggable
+    <auth-form ref="dataFormRef" :rules="rules" :edit-model="true" :form-fields="headerList" :data="temp"
-    class="dialog-mini"
-    width="500px"
-    :title="txtDlgTitle[dialogStatus]"
-    v-model="dialogFormVisible">
-    <auth-form
-      ref="dataForm"
-      :rules="rules"
-      :edit-model="true"
-      :form-fields="headerList"
-      :data="temp"
       :col-num="2"></auth-form>
     <template v-slot:footer>
       <div>
         <el-button size="small" @click="dialogFormVisible = false">
           取消
         </el-button>
-        <el-button
+        <el-button size="small" v-if="dialogStatus == 0" type="primary" @click="createData">
-          size="small"
-          v-if="dialogStatus == 'create'"
-          type="primary"
-          @click="createData">
           确认
         </el-button>
         <el-button size="small" v-else type="primary" @click="updateData">
@@ -70,48 +45,41 @@ import { onMounted, ref, reactive, nextTick } from 'vue'
 import * as {TableName}s from '@/api/{TableName}s'
 import { defaultVal } from '@/utils/index'
 import { delrows } from '@/utils/delRows.js'
+import ColumnDefine from '@/interface/columnDefine'
 //引入组件
 import Sticky from '@/components/Sticky/index.vue'
 import permissionBtn from '@/components/PermissionBtn/index.vue'
 import AuthForm from '../../components/Base/AuthForm.vue'
 import AuthTable from '../../components/Base/AuthTable.vue'
-
 const headerList = ref([]) //列表头
 const multipleSelection = ref([]) //列表checkbox选中的值
 const list = ref([]) //列表值
 const total = ref(0) //总条数
 const listLoading = ref(true) //进度条
 const dialogFormVisible = ref(false) //是否显示编辑框
-const dialogStatus = ref('')
+const dialogStatus = ref(0) //0:新增 1:编辑
 let temp = reactive({}) //新增（编辑）绑定对话框
-
 const listQuery = reactive({
   // 查询条件
   page: 1,
   limit: 20,
   key: undefined,
 })
-
-const txtDlgTitle = reactive({
-  //对话框标题
-  update: '编辑',
-  create: '添加',
-})
 const rules = reactive({
   name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
 })
-
 //组件refs
-const mainTable = ref(null)
+const mainTableRef = ref(null)
-const dataForm = ref(null)
+const dataFormRef = ref(null)
-
 onMounted(() => {
+  headerList.value = [
+  {HeaderList}
+  ]
   getList()
 })
-
 const rowClick = function (row) {
-  mainTable.value.clearSelection()
+  mainTableRef.value.clearSelection()
-  mainTable.value.toggleRowSelection(row)
+  mainTableRef.value.toggleRowSelection(row)
 }
 const handleSelectionChange = function (val) {
   multipleSelection.value = val
@@ -123,27 +91,18 @@ const onBtnClicked = function (domId, callback) {
       break
     case 'btnEdit':
       if (multipleSelection.value.length !== 1) {
-        ElMessage.error({
+        ElMessage.error('只能选中一个进行编辑')
-          message: '只能选中一个进行编辑',
-          type: 'error',
-        })
         return
       }
       handleUpdate(multipleSelection.value[0])
       break
     case 'btnDel':
       if (multipleSelection.value.length < 1) {
-        ElMessage.error({
+        ElMessage.error('至少删除一个')
-          message: '至少删除一个',
-          type: 'error',
-        })
         return
       }
       handleDelete(multipleSelection.value)
       break
-    case 'btnExport':
-      mainTable.value.exportExcel('资源文件', callback)
-      break
     default:
       break
   }
@@ -167,22 +126,12 @@ const handleFilter = function () {
   listQuery.page = 1
   getList()
 }
-const handleSizeChange = function (val) {
+
-  listQuery.limit = val
-  getList()
-}
 const handleCurrentChange = function (val) {
   listQuery.page = val
   getList()
 }
-const handleModifyStatus = function (row, disable) {
+
-  // 模拟修改状态
-  ElMessage.success({
-    message: '操作成功',
-    type: 'success',
-  })
-  row.disable = disable
-}
 const resetTemp = function () {
   let obj = {}
   headerList.value.forEach(item => {
@@ -191,39 +140,30 @@ const resetTemp = function () {
   Object.assign(temp, obj)
 }
 const handleCreate = async function () {
-  // 弹出添加框
   resetTemp()
-  dialogStatus.value = 'create'
+  dialogStatus.value = 0
   dialogFormVisible.value = true
   await nextTick()
-  dataForm.value.clearValidate()
+  dataFormRef.value.clearValidate()
 }
 const createData = function () {
-  // 保存提交
+  dataFormRef.value.validate(() => {
-  dataForm.value.validate(() => {
     {TableName}s.add(temp).then(() => {
       list.value.unshift(temp)
       dialogFormVisible.value = false
-      ElNotification({
+      ElNotification.success('创建成功')
-        title: '成功',
-        message: '创建成功',
-        type: 'success',
-        duration: 2000,
-      })
     })
   })
 }
 const handleUpdate = async function (row) {
-  // 弹出编辑框
   Object.assign(temp, row) //必需这样赋值才能响应式
-  dialogStatus.value = 'update'
+  dialogStatus.value = 1
   dialogFormVisible.value = true
   await nextTick()
-  dataForm.value.clearValidate()
+  dataFormRef.value.clearValidate()
 }
 const updateData = function () {
-  // 更新提交
+  dataFormRef.value.validate(() => {
-  dataForm.value.validate(() => {
     const tempData = Object.assign({}, temp)
     {TableName}s.update(tempData).then(() => {
       for (const v of list.value) {
@@ -234,17 +174,11 @@ const updateData = function () {
         }
       }
       dialogFormVisible.value = false
-      ElNotification({
+      ElNotification.success('更新成功')
-        title: '成功',
-        message: '更新成功',
-        type: 'success',
-        duration: 2000,
-      })
     })
   })
 }
 const handleDelete = function (rows) {
-  // 多行删除
+  delrows({TableName}s, rows, getList)
-  delrows({TableName}s, rows)
 }
 </script>