✨ Introducing new features. 代码生成支持排序

src/api/gen/table.ts

@@ -59,3 +59,10 @@ export const useGeneratorPreviewApi = (tableId: any) => {
     params: { tableId: tableId }
   })
 }
+
+export function fetchDictList() {
+  return request({
+    url: '/admin/dict/list',
+    method: 'get'
+  })
+}

src/components/verifition/utils/axios.js

@@ -1,30 +0,0 @@
-import axios from 'axios';
-
-axios.defaults.baseURL = 'https://captcha.anji-plus.com/captcha-api';
-
-const service = axios.create({
-  timeout: 40000,
-  headers: {
-    'X-Requested-With': 'XMLHttpRequest',
-    'Content-Type': 'application/json; charset=UTF-8'
-  },
-})
-service.interceptors.request.use(
-  config => {
-    return config
-  },
-  error => {
-    Promise.reject(error)
-  }
-)
-
-// response interceptor
-service.interceptors.response.use(
-  response => {
-    const res = response.data;
-    return res
-  },
-  error => {
-  }
-)
-export default service

src/hooks/table.ts

@@ -21,11 +21,7 @@ export interface BasicTableProps {
     // loading
     loading?: Boolean
 
-    selectObjs?: any[],
+    selectObjs?: any[]
-
-    descs?: string
-
-    ascs?: string
 }
 
 export interface Pagination {
@@ -58,9 +54,7 @@ export function useTable(options?: BasicTableProps) {
         } as Pagination,
         dataListSelections: [],
         loading: false,
-        selectObjs: [],
+        selectObjs: []
-        descs: '',
-        ascs: ''
     }
 
     const mergeDefaultOptions = (options: any, props: any): BasicTableProps => {
@@ -83,8 +77,6 @@ export function useTable(options?: BasicTableProps) {
                 ...state.queryForm,
                 current: state.pagination?.current,
                 size: state.pagination?.size,
-                descs: state.descs,
-                ascs: state.ascs
             }).then(res => {
                 state.dataList = state.isPage ? res.data.records : res.data
                 state.pagination!.total = state.isPage ? res.data.total : 0
@@ -114,6 +106,20 @@ export function useTable(options?: BasicTableProps) {
         query();
     };
 
+    // 排序触发事件
+    const sortChangeHandle = (column: any) => {
+        const prop = other.toUnderline(column.prop);
+        if (column.order === 'descending') {
+            state.queryForm!.descs.push(prop)
+            state.queryForm!.ascs.splice(state.queryForm!.ascs.indexOf(prop), 1)
+        }
+        if (column.order === 'ascending') {
+            state.queryForm!.ascs.push(prop)
+            state.queryForm!.descs.splice(state.queryForm!.descs.indexOf(prop), 1)
+        }
+        query();
+    }
+
     const getDataList = () => {
         state.pagination!.current = 1
         query()
@@ -129,6 +135,7 @@ export function useTable(options?: BasicTableProps) {
         getDataList,
         sizeChangeHandle,
         currentChangeHandle,
+        sortChangeHandle,
         downBlobFile
     }
 

src/utils/other.ts

@@ -286,6 +286,9 @@ const other = {
 	},
 	downBlobFile: (url: any, query: any, fileName: string) => {
 		return downBlobFile(url, query, fileName)
+	},
+	toUnderline: (str: string) => {
+		return toUnderline(str)
 	}
 
 };
@@ -321,5 +324,14 @@ export function handleTree(data, id, parentId, children, rootId) {
 	return treeData !== '' ? treeData : data
 }
 
+/**
+ * 
+ * @param str 驼峰转下划线
+ * @returns 下划线
+ */
+export function toUnderline(str: string) {
+	return str.replace(/([A-Z])/g, "_$1").toLowerCase()
+}
+
 // 统一批量导出
 export default other;

src/utils/request.ts

@@ -1,29 +1,35 @@
-import axios, {AxiosInstance, InternalAxiosRequestConfig} from 'axios';
+import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
 import errorCode from './errorCode'
-import {ElMessage, ElMessageBox} from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
-import {Session} from '/@/utils/storage';
+import { Session } from '/@/utils/storage';
 import qs from 'qs';
 
 // 配置新建一个 axios 实例
 const service: AxiosInstance = axios.create({
     baseURL: import.meta.env.VITE_API_URL,
     timeout: 50000,
-    headers: {'Content-Type': 'application/json'},
+    headers: { 'Content-Type': 'application/json' },
     paramsSerializer: {
         serialize(params) {
-            return qs.stringify(params, {allowDots: true});
+            return qs.stringify(params, { allowDots: true });
         },
     },
 });
 
 // 添加请求拦截器
 service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
-        // 在发送请求之前做些什么 token
+    // get查询参数序列化
-        if (Session.get('token')) {
+    if (config.method === 'get') {
-            config.headers!['Authorization'] = `Bearer ${Session.get('token')}`;
+        config.paramsSerializer = (params: any) => {
+            return qs.stringify(params, { arrayFormat: 'repeat' })
         }
-        return config;
+    }
-    },
+    // 在发送请求之前做些什么 token
+    if (Session.get('token')) {
+        config.headers!['Authorization'] = `Bearer ${Session.get('token')}`;
+    }
+    return config;
+},
     (error) => {
         // 对请求错误做些什么
         return Promise.reject(error);
@@ -32,7 +38,7 @@ service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
 
 // 添加响应拦截器
 service.interceptors.response.use((res: any) => {
-    if(res.data.code === 1){
+    if (res.data.code === 1) {
         throw res.data
     }
     return res.data;

src/views/admin/log/index.vue

@@ -36,7 +36,7 @@
         </div>
       </el-row>
       <el-table v-loading="state.loading" :data="state.dataList" style="width: 100%"
-        @selection-change="handleSelectionChange">
+        @selection-change="handleSelectionChange" @sort-change="sortChangeHandle">
         <el-table-column align="center" type="selection" width="50" />
         <el-table-column :label="$t('syslog.index')" type="index" width="80" />
         <el-table-column :label="$t('syslog.logType')" show-overflow-tooltip>
@@ -46,11 +46,11 @@
         </el-table-column>
         <el-table-column :label="$t('syslog.title')" prop="title" show-overflow-tooltip></el-table-column>
         <el-table-column :label="$t('syslog.remoteAddr')" prop="remoteAddr" show-overflow-tooltip></el-table-column>
-        <el-table-column :label="$t('syslog.remoteAddr')" prop="remoteAddr" show-overflow-tooltip></el-table-column>
         <el-table-column :label="$t('syslog.method')" prop="method" show-overflow-tooltip></el-table-column>
         <el-table-column :label="$t('syslog.serviceId')" prop="serviceId" show-overflow-tooltip></el-table-column>
         <el-table-column :label="$t('syslog.time')" prop="time" show-overflow-tooltip></el-table-column>
-        <el-table-column :label="$t('syslog.createTime')" prop="createTime" show-overflow-tooltip></el-table-column>
+        <el-table-column :label="$t('syslog.createTime')" prop="createTime" width="200" sortable="custom"
+          show-overflow-tooltip></el-table-column>
         <el-table-column :label="$t('common.action')" width="100">
           <template #default="scope">
             <el-button v-auth="'sys_user_del'" size="small" text type="primary" @click="handleDelete(scope.row)">
@@ -86,14 +86,16 @@ const selectObjs = ref([]);
 // 是否可以多选
 const multiple = ref(true);
 
+
 const state: BasicTableProps = reactive<BasicTableProps>({
   queryForm: {
     logType: '',
-    createTime: ''
+    createTime: '',
+    descs: ['create_time'],
+    ascs: [],
   },
   selectObjs: [],
-  pageList: pageList,
+  pageList: pageList
-  ascs: 'time'
 });
 
 
@@ -102,6 +104,7 @@ const {
   downBlobFile,
   getDataList,
   currentChangeHandle,
+  sortChangeHandle,
   sizeChangeHandle
 } = useTable(state)
 

src/views/gen/table/edit.vue

@@ -2,7 +2,7 @@
 	<el-drawer v-model="visible" title="编辑" :size="1200" :with-header="false" :close-on-click-modal="false">
 		<el-tabs v-model="activeName" @tab-click="handleClick">
 			<el-tab-pane label="属性设置" name="field">
-				<vxe-table ref="fieldTable" border row-key class="sortable-row-gen" :data="fieldList"
+				<vxe-table ref="fieldTable" align="center" border row-key class="sortable-row-gen" :data="fieldList"
 					:checkbox-config="{ checkStrictly: true }" :edit-config="{ trigger: 'click', mode: 'cell' }">
 					<vxe-column type="seq" width="60"></vxe-column>
 					<vxe-column width="60" title="拖动">
@@ -37,69 +37,37 @@
 							</vxe-select>
 						</template>
 					</vxe-column>
-					<vxe-column field="primaryPk" title="主键">
+					<vxe-column field="primaryPk" title="主键" width="60">
 						<template #default="{ row }">
 							<vxe-checkbox v-model="row.primaryPk"></vxe-checkbox>
 						</template>
 					</vxe-column>
-				</vxe-table>
+					<vxe-column field="fieldDict" title="字典类型" width="140">
-			</el-tab-pane>
-			<el-tab-pane label="表单页面" name="form">
-				<vxe-table ref="formTable" border row-key :data="fieldList" :checkbox-config="{ checkStrictly: true }"
-					:edit-config="{ trigger: 'click', mode: 'cell' }">
-					<vxe-column field="attrName" title="属性名"></vxe-column>
-					<vxe-column field="fieldComment" title="说明"></vxe-column>
-					<vxe-column field="formItem" title="表单显示">
 						<template #default="{ row }">
-							<vxe-checkbox v-model="row.formItem"></vxe-checkbox>
+							<vxe-select v-model="row.fieldDict" filterable>
-						</template>
+								<vxe-option v-for="item in fieldDictList" :key="item.value" :value="item.value"
-					</vxe-column>
-					<vxe-column field="formRequired" title="表单必填">
-						<template #default="{ row }">
-							<vxe-checkbox v-model="row.formRequired"></vxe-checkbox>
-						</template>
-					</vxe-column>
-					<vxe-column field="formValidator" title="表单效验" :edit-render="{ name: 'input' }"></vxe-column>
-					<vxe-column field="formType" title="表单类型">
-						<template #default="{ row }">
-							<vxe-select v-model="row.formType">
-								<vxe-option v-for="item in formTypeList" :key="item.value" :value="item.value"
 									:label="item.label"></vxe-option>
 							</vxe-select>
 						</template>
 					</vxe-column>
-					<vxe-column field="formDict" title="表单字典类型" :edit-render="{ name: 'input' }"></vxe-column>
 				</vxe-table>
 			</el-tab-pane>
 			<el-tab-pane label="列表查询" name="third">
-				<vxe-table ref="gridTable" border row-key :data="fieldList" :checkbox-config="{ checkStrictly: true }"
+				<vxe-table ref="gridTable" align="center" border row-key :data="fieldList"
-					:edit-config="{ trigger: 'click', mode: 'cell' }">
+					:checkbox-config="{ checkStrictly: true }" :edit-config="{ trigger: 'click', mode: 'cell' }">
 					<vxe-column field="attrName" title="属性名"></vxe-column>
 					<vxe-column field="fieldComment" title="说明"></vxe-column>
-					<vxe-column field="gridItem" title="列表显示">
+					<vxe-column field="gridItem" title="列表显示" width="100">
 						<template #default="{ row }">
 							<vxe-checkbox v-model="row.gridItem"></vxe-checkbox>
 						</template>
 					</vxe-column>
-					<vxe-column field="gridSort" title="列表排序">
+					<vxe-column field="gridSort" title="是否排序" width="100">
 						<template #default="{ row }">
 							<vxe-checkbox v-model="row.gridSort"></vxe-checkbox>
 						</template>
 					</vxe-column>
-					<vxe-column field="queryItem" title="查询显示">
+					<vxe-column field="queryFormType" title="查询表单类型" width="200">
-						<template #default="{ row }">
-							<vxe-checkbox v-model="row.queryItem"></vxe-checkbox>
-						</template>
-					</vxe-column>
-					<vxe-column field="queryType" title="查询方式">
-						<template #default="{ row }">
-							<vxe-select v-model="row.queryType">
-								<vxe-option v-for="item in queryList" :key="item.value" :value="item.value"
-									:label="item.label"></vxe-option>
-							</vxe-select>
-						</template>
-					</vxe-column>
-					<vxe-column field="queryFormType" title="查询表单类型">
 						<template #default="{ row }">
 							<vxe-select v-model="row.queryFormType">
 								<vxe-option v-for="item in formTypeList" :key="item.value" :value="item.value"
@@ -107,29 +75,76 @@
 							</vxe-select>
 						</template>
 					</vxe-column>
-					<vxe-column field="queryDict" title="查询字典类型" :edit-render="{ name: 'input' }"></vxe-column>
+					<vxe-column field="queryItem" title="查询显示" width="100">
+						<template #default="{ row }">
+							<vxe-checkbox v-model="row.queryItem"></vxe-checkbox>
+						</template>
+					</vxe-column>
+					<vxe-column field="queryType" title="查询方式" width="200">
+						<template #default="{ row }">
+							<vxe-select v-model="row.queryType">
+								<vxe-option v-for="item in queryList" :key="item.value" :value="item.value"
+									:label="item.label"></vxe-option>
+							</vxe-select>
+						</template>
+					</vxe-column>
 				</vxe-table>
 			</el-tab-pane>
+			<el-tab-pane label="表单页面" name="form">
+				<vxe-table ref="formTable" align="center" border row-key :data="fieldList"
+					:checkbox-config="{ checkStrictly: true }" :edit-config="{ trigger: 'click', mode: 'cell' }">
+					<vxe-column field="attrName" title="属性名"></vxe-column>
+					<vxe-column field="fieldComment" title="说明"></vxe-column>
+					<vxe-column field="formType" title="表单类型" width="200">
+						<template #default="{ row }">
+							<vxe-select v-model="row.formType">
+								<vxe-option v-for="item in formTypeList" :key="item.value" :value="item.value"
+									:label="item.label"></vxe-option>
+							</vxe-select>
+						</template>
+					</vxe-column>
+					<vxe-column field="formItem" title="表单显示" width="100">
+						<template #default="{ row }">
+							<vxe-checkbox v-model="row.formItem"></vxe-checkbox>
+						</template>
+					</vxe-column>
+					<vxe-column field="formRequired" title="表单必填" width="100">
+						<template #default="{ row }">
+							<vxe-checkbox v-model="row.formRequired"></vxe-checkbox>
+						</template>
+					</vxe-column>
+					<vxe-column field="formValidator" title="表单效验" :edit-render="{ name: 'input' }"></vxe-column>
+				</vxe-table>
+			</el-tab-pane>
+
 		</el-tabs>
 		<template #footer>
 			<el-button @click="visible = false">取消</el-button>
-			<el-button type="primary" @click="submitHandle()">确定</el-button>
+			<el-button @click="previewHandle()">{{
+				$t('gen.prewBtn')
+			}}</el-button> <el-button type="primary" @click="submitHandle()">确定</el-button>
 		</template>
+		<!-- 预览 -->
+		<preview-dialog ref="previewRef" />
 	</el-drawer>
 </template>
 
 <script setup lang="ts">
 import { TabsPaneContext } from 'element-plus/es'
 import Sortable from 'sortablejs'
-import { useTableFieldSubmitApi, useTableApi } from '/@/api/gen/table'
+import { useTableFieldSubmitApi, useTableApi, fetchDictList } from '/@/api/gen/table'
 import { fetchList } from '/@/api/gen/fieldtype'
 import { VxeTableInstance } from 'vxe-table'
 import { useMessage } from '/@/hooks/message'
 import { useI18n } from 'vue-i18n'
 
+const previewDialog = defineAsyncComponent(() => import('./preview.vue'));
+
 const { t } = useI18n();
 
+const previewRef = ref()
 const activeName = ref()
+const tableId = ref('')
 const fieldTable = ref<VxeTableInstance>()
 const formTable = ref<VxeTableInstance>()
 const gridTable = ref<VxeTableInstance>()
@@ -147,6 +162,7 @@ const visible = ref(false)
 const sortable = ref() as any
 
 const typeList = ref([]) as any
+const fieldDictList = ref([]) as any
 const dsName = ref()
 const tableName = ref()
 
@@ -158,6 +174,7 @@ const fillList = reactive([
 	{ label: 'INSERT_UPDATE', value: 'INSERT_UPDATE' }
 ])
 
+
 const queryList = reactive([
 	{ label: '=', value: '=' },
 	{ label: '!=', value: '!=' },
@@ -191,6 +208,7 @@ const openDialog = (dName: string, tName: string) => {
 	rowDrop()
 	getTable(dName, tName)
 	getFieldTypeList()
+	getDictList()
 }
 
 const rowDrop = () => {
@@ -210,6 +228,7 @@ const rowDrop = () => {
 const getTable = (dsName: string, tableName: string) => {
 	fieldList.value = [] // 避免第一次数据初始化， 表格显示历史数据
 	useTableApi(dsName, tableName).then(res => {
+		tableId.value = res.data.id
 		fieldList.value = res.data.fieldList
 	})
 }
@@ -219,21 +238,37 @@ const getFieldTypeList = async () => {
 
 	// 获取数据
 	const { data } = await fetchList()
+
 	// 设置属性类型值
 	data.records.forEach((item: any) => typeList.value.push({ label: item.attrType, value: item.columnType }))
 	// 增加Object类型
 	typeList.value.push({ label: 'Object', value: 'Object' })
 }
 
+const getDictList = () => {
+	fetchDictList().then((res) => {
+		for (const item of res.data) {
+			fieldDictList.value.push({ label: item.description, value: item.dictType })
+		}
+	})
+}
+
 // 表单提交
 const submitHandle = () => {
-	useTableFieldSubmitApi(dsName.value, tableName.value, fieldList.value).then(() => {
+	return useTableFieldSubmitApi(dsName.value, tableName.value, fieldList.value).then(() => {
 		useMessage().success(t('common.addSuccessText'))
 		visible.value = false // 关闭弹窗
 		emit('refreshDataList')
 	})
 }
 
+// 预览设计
+const previewHandle = () => {
+	submitHandle().then(() => {
+		previewRef.value.openDialog(tableId.value)
+	})
+}
+
 defineExpose({
 	openDialog
 })