mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2025-01-03 23:42:23 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lbw 2023-02-09 18:17:31 +08:00
parent ebd3675233
commit b98be31d55
7 changed files with 143 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/gen/table.ts
View File

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

30
src/components/verifition/utils/axios.js
View File

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

27
src/hooks/table.ts
View File

@ -21,11 +21,7 @@ export interface BasicTableProps {
// loading
loading?: Boolean
selectObjs?: any[],
descs?: string
ascs?: string
selectObjs?: any[]
}
export interface Pagination {
@ -58,9 +54,7 @@ export function useTable(options?: BasicTableProps) {
} as Pagination,
dataListSelections: [],
loading: false,
selectObjs: [],
descs: '',
ascs: ''
selectObjs: []
}
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
}

12
src/utils/other.ts
View File

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

28
src/utils/request.ts
View File

@ -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 {Session} from '/@/utils/storage';
import { ElMessage, ElMessageBox } from 'element-plus';
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
if (Session.get('token')) {
config.headers!['Authorization'] = `Bearer ${Session.get('token')}`;
// get查询参数序列化
if (config.method === 'get') {
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;

15
src/views/admin/log/index.vue
View File

@ -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,
ascs: 'time'
pageList: pageList
});
@ -102,6 +104,7 @@ const {
downBlobFile,
getDataList,
currentChangeHandle,
sortChangeHandle,
sizeChangeHandle
} = useTable(state)

127
src/views/gen/table/edit.vue
View File

@ -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>
</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="表单显示">
<vxe-column field="fieldDict" title="字典类型" width="140">
<template #default="{ row }">
<vxe-checkbox v-model="row.formItem"></vxe-checkbox>
</template>
</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"
<vxe-select v-model="row.fieldDict" filterable>
<vxe-option v-for="item in fieldDictList" :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 }"
:edit-config="{ trigger: 'click', mode: 'cell' }">
<vxe-table ref="gridTable" 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="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="查询显示">
<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="查询表单类型">
<vxe-column field="queryFormType" title="查询表单类型" width="200">
<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
})