setup版本代码优化

Author: piexlmax

server/resource/template/web/form.vue.tpl

@@ -49,6 +49,7 @@ import {
   find{{.StructName}}
 } from '@/api/{{.PackageName}}'
 
+// 自动获取字典
 import { getDictFunc } from '@/utils/format'
 import { useRoute, useRouter } from "vue-router"
 import { ElMessage } from 'element-plus'
@@ -78,6 +79,8 @@ const formData = ref({
         {{- end }}
         {{- end }}
         })
+
+// 初始化方法
 const init = async () => {
  // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
     if (route.query.id) {
@@ -95,8 +98,8 @@ const init = async () => {
 }
 
 init()
-
- const save = async() => {
+// 保存按钮
+const save = async() => {
       let res
       switch (type.value) {
         case 'create':
@@ -115,7 +118,9 @@ init()
           message: '创建/更改成功'
         })
       }
-    }
+}
+
+// 返回按钮
 const back = () => {
     router.go(-1)
 }

server/resource/template/web/table.vue.tpl

@@ -140,14 +140,12 @@ import {
   get{{.StructName}}List
 } from '@/api/{{.PackageName}}'
 
+// 全量引入格式化工具 请按需保留
 import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { ref } from 'vue'
 
-const dialogFormVisible = ref(false)
-const type = ref('')
-const deleteVisible = ref(false)
-const multipleSelection = ref([])
+// 自动化生成的字典（可能为空）以及字段
     {{- range $index, $element := .DictTypes}}
 const {{ $element }}Options = ref([])
     {{- end }}
@@ -171,17 +169,19 @@ const formData = ref({
         {{- end }}
         })
 
+// =========== 表格控制部分 ===========
 const page = ref(1)
 const total = ref(0)
 const pageSize = ref(10)
 const tableData = ref([])
 const searchInfo = ref({})
 
+// 重置
 const onReset = () => {
   searchInfo.value = {}
 }
-// 搜索
 
+// 搜索
 const onSubmit = () => {
   page.value = 1
   pageSize.value = 10
@@ -198,6 +198,7 @@ const handleSizeChange = (val) => {
   getTableData()
 }
 
+// 修改页面容量
 const handleCurrentChange = (val) => {
   page.value = val
   getTableData()
@@ -216,18 +217,27 @@ const getTableData = async() => {
 
 getTableData()
 
+// ============== 表格控制部分结束 ===============
+
+// 获取需要的字典 可能为空 按需保留
 const setOptions = async () =>{
 {{- range $index, $element := .DictTypes }}
     {{ $element }}Options.value = await getDictFunc('{{$element}}')
 {{- end }}
 }
 
+// 获取需要的字典 可能为空 按需保留
 setOptions()
 
+
+// 多选数据
+const multipleSelection = ref([])
+// 多选
 const handleSelectionChange = (val) => {
     multipleSelection.value = val
 }
 
+// 删除行
 const deleteRow = (row) => {
     ElMessageBox.confirm('确定要删除吗?', '提示', {
         confirmButtonText: '确定',
@@ -237,7 +247,13 @@ const deleteRow = (row) => {
             delete{{.StructName}}Func(row)
         })
     }
- const onDelete = async() => {
+
+
+// 批量删除控制标记
+const deleteVisible = ref(false)
+
+// 多选删除
+const onDelete = async() => {
       const ids = []
       if (multipleSelection.value.length === 0) {
         ElMessage({
@@ -263,6 +279,11 @@ const deleteRow = (row) => {
         getTableData()
       }
     }
+
+// 行为控制标记（弹窗内部需要增还是改）
+const type = ref('')
+
+// 更新行
 const update{{.StructName}}Func = async(row) => {
     const res = await find{{.StructName}}({ ID: row.ID })
     type.value = 'update'
@@ -271,6 +292,33 @@ const update{{.StructName}}Func = async(row) => {
         dialogFormVisible.value = true
     }
 }
+
+
+// 删除行
+const delete{{.StructName}}Func = async (row) => {
+    const res = await delete{{.StructName}}({ ID: row.ID })
+    if (res.code === 0) {
+        ElMessage({
+                type: 'success',
+                message: '删除成功'
+            })
+            if (tableData.value.length === 1 && page.value > 1) {
+            page.value--
+        }
+        getTableData()
+    }
+}
+
+// 弹窗控制标记
+const dialogFormVisible = ref(false)
+
+// 打开弹窗
+const openDialog = () => {
+    type.value = 'create'
+    dialogFormVisible.value = true
+}
+
+// 关闭弹窗
 const closeDialog = () => {
     dialogFormVisible.value = false
     formData.value = {
@@ -293,19 +341,7 @@ const closeDialog = () => {
         {{- end }}
         }
 }
-const delete{{.StructName}}Func = async (row) => {
-    const res = await delete{{.StructName}}({ ID: row.ID })
-    if (res.code === 0) {
-        ElMessage({
-                type: 'success',
-                message: '删除成功'
-            })
-            if (tableData.value.length === 1 && page.value > 1) {
-            page.value--
-        }
-        getTableData()
-    }
-}
+// 弹窗确定
 const enterDialog = async () => {
       let res
       switch (type.value) {
@@ -328,10 +364,6 @@ const enterDialog = async () => {
         getTableData()
       }
 }
-const openDialog = () => {
-    type.value = 'create'
-    dialogFormVisible.value = true
-}
 </script>
 
 <style>

web/src/components/upload/image.vue

@@ -37,10 +37,8 @@ const props = defineProps({
     }
   })
 
-
 const path = ref(import.meta.env.VITE_BASE_API)
 const token = computed(()=>store.getters['user/token'])
-const showImageUrl = computed(()=>(props.imageUrl && props.imageUrl.slice(0, 4) !== 'http') ? path.value + props.imageUrl : props.imageUrl)
 
 const beforeImageUpload = (file) => {
       const isJPG = file.type === 'image/jpeg'

web/src/view/about/index.vue

@@ -116,14 +116,14 @@ export default {
 <script setup>
 import { ref } from 'vue'
 import { Commits, Members } from '@/api/github'
-const members = ref([])
-const dataTimeline = ref([])
 const page = ref(0)
 
 const loadMore = () => {
   page.value++
   loadCommits()
 }
+
+const dataTimeline = ref([])
 const loadCommits = () => {
   Commits(page.value).then(({ data }) => {
     data.forEach((element) => {
@@ -138,6 +138,8 @@ const loadCommits = () => {
     })
   })
 }
+
+const members = ref([])
 const loadMembers = () => {
   Members().then(({ data }) => {
     members.value = data

web/src/view/example/customer/customer.vue

@@ -81,8 +81,6 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { formatDate } from '@/utils/format'
 
-const dialogFormVisible = ref(false)
-const type = ref('')
 const form = ref({
   customerName: '',
   customerPhoneData: ''
@@ -117,6 +115,8 @@ const getTableData = async() => {
 
 getTableData()
 
+const dialogFormVisible = ref(false)
+const type = ref('')
 const updateCustomer = async(row) => {
   const res = await getExaCustomer({ ID: row.ID })
   type.value = 'update'

web/src/view/example/upload/upload.vue

@@ -82,7 +82,6 @@ const store = useStore()
 const path = ref(import.meta.env.VITE_BASE_API)
 const token = computed(() => store.getters['user/token'])
 
-const fullscreenLoading = ref(false)
 const imageUrl = ref('')
 
 const page = ref(1)
@@ -139,6 +138,8 @@ const deleteFileFunc = async(row) => {
       })
     })
 }
+
+const fullscreenLoading = ref(false)
 const checkFile = (file) => {
   fullscreenLoading.value = true
   const isJPG = file.type === 'image/jpeg'

web/src/view/superAdmin/api/api.vue

@@ -222,6 +222,9 @@ const handleCurrentChange = (val) => {
 // 排序
 const sortChange = ({ prop, order }) => {
   if (prop) {
+    if (prop === 'ID') {
+      prop = 'id'
+    }
     searchInfo.value.orderKey = toSQLLine(prop)
     searchInfo.value.desc = order === 'descending'
   }

web/src/view/superAdmin/dictionary/sysDictionary.vue

@@ -217,8 +217,6 @@ import { formatBoolean, formatDate } from '@/utils/format'
 
 const router = useRouter()
 
-const dialogFormVisible = ref(false)
-const type = ref('')
 const formData = ref({
   name: null,
   type: null,
@@ -306,6 +304,8 @@ const toDetile = (row) => {
   })
 }
 
+const dialogFormVisible = ref(false)
+const type = ref('')
 const updateSysDictionaryFunc = async(row) => {
   const res = await findSysDictionary({ ID: row.ID })
   type.value = 'update'

web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue

@@ -133,8 +133,6 @@ import { ElMessage } from 'element-plus'
 import { formatBoolean, formatDate } from '@/utils/format'
 const route = useRoute()
 
-const dialogFormVisible = ref(false)
-const type = ref('')
 const formData = ref({
   label: null,
   value: null,
@@ -212,6 +210,8 @@ const getTableData = async() => {
 
 getTableData()
 
+const type = ref('')
+const dialogFormVisible = ref(false)
 const updateSysDictionaryDetailFunc = async(row) => {
   const res = await findSysDictionaryDetail({ ID: row.ID })
   type.value = 'update'

web/src/view/superAdmin/operation/sysOperationRecord.vue

@@ -173,11 +173,10 @@ const getTableData = async() => {
   }
 }
 
-const deleteVisible = ref(false)
-const multipleSelection = ref([])
-
 getTableData()
 
+const deleteVisible = ref(false)
+const multipleSelection = ref([])
 const handleSelectionChange = (val) => {
   multipleSelection.value = val
 }