255 lines
8.8 KiB
Vue
255 lines
8.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-card shadow="hover">
|
|
<div class="system-user-search mb15">
|
|
<el-form :inline="true" ref="queryRef" :model="tableData.param">
|
|
<el-form-item label="表名称" prop="tableName">
|
|
<el-input v-model="tableData.param.tableName" placeholder="请输入表名称" class="w-50 m-2" clearable/>
|
|
</el-form-item>
|
|
<el-form-item label="表描述" prop="tableComment">
|
|
<el-input v-model="tableData.param.tableComment" placeholder="请输入岗位编码" class="w-50 m-2" clearable/>
|
|
</el-form-item>
|
|
<el-form-item label="创建时间" prop="dateRange">
|
|
<el-date-picker
|
|
v-model="tableData.param.dateRange"
|
|
style="width: 240px"
|
|
value-format="YYYY-MM-DD"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button size="default" type="primary" class="ml10" @click="tableList">
|
|
<el-icon>
|
|
<ele-Search />
|
|
</el-icon>
|
|
查询
|
|
</el-button>
|
|
<el-button size="default" @click="resetQuery(queryRef)">
|
|
<el-icon>
|
|
<ele-Refresh />
|
|
</el-icon>
|
|
重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
@click="handleGenTable(null)"
|
|
:disabled="multiple"
|
|
><el-icon><ele-Download /></el-icon>生成</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="info"
|
|
size="small"
|
|
@click="openImportTable"
|
|
><el-icon><ele-UploadFilled /></el-icon>导入</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="success"
|
|
size="small"
|
|
:disabled="single"
|
|
@click="handleEditTable(null)"
|
|
><el-icon><ele-EditPen /></el-icon>修改</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="danger"
|
|
size="small"
|
|
:disabled="multiple"
|
|
@click="onRowDel(null)"
|
|
><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column type="index" label="序号" width="60" />
|
|
<el-table-column prop="tableName" label="表名称" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="tableComment" label="表描述" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="className" label="实体" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="操作" width="320">
|
|
<template #default="scope">
|
|
<el-button size="small" text type="primary" @click="handlePreview(scope.row)"><el-icon><ele-View /></el-icon>预览</el-button>
|
|
<el-button size="small" text type="primary" @click="handleEditTable(scope.row)"><el-icon><ele-EditPen /></el-icon>编辑</el-button>
|
|
<el-button size="small" text type="primary" @click="handleSyncTable(scope.row)"><el-icon><ele-Refresh /></el-icon>同步</el-button>
|
|
<el-button size="small" text type="primary" @click="handleGenTable(scope.row)"><el-icon><ele-Download /></el-icon>生成代码</el-button>
|
|
<el-button size="small" text type="primary" @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-show="tableData.total>0"
|
|
:total="tableData.total"
|
|
v-model:page="tableData.param.pageNum"
|
|
v-model:limit="tableData.param.pageSize"
|
|
@pagination="tableList"
|
|
/>
|
|
</el-card>
|
|
<import-table ref="importRef" @ok="tableList" />
|
|
<gen-code-preview ref="genCodePreviewRef"></gen-code-preview>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
|
|
import {ElMessageBox, ElMessage, FormInstance} from 'element-plus';
|
|
import {getTableList, deleteTables, batchGenCode, syncTable} from "/@/api/system/tools/gen";
|
|
import {TableData,TableDataState} from "/@/views/system/tools/gen/component/model"
|
|
import importTable from "/@/views/system/tools/gen/component/importTable.vue";
|
|
import { useRouter } from 'vue-router';
|
|
import genCodePreview from '/@/views/system/tools/gen/component/preview.vue'
|
|
import {refreshBackEndControlRoutes} from "/@/router/backEnd";
|
|
defineOptions({ name: "apiV1SystemToolsGenTableList"})
|
|
const router = useRouter()
|
|
const addPostRef = ref()
|
|
const editPostRef = ref()
|
|
const queryRef = ref()
|
|
const importRef = ref()
|
|
const genCodePreviewRef = ref()
|
|
const state = reactive<TableDataState>({
|
|
ids:[],
|
|
// 非单个禁用
|
|
single: true,
|
|
// 非多个禁用
|
|
multiple: true,
|
|
tableNames:[],
|
|
tableData: {
|
|
data: [],
|
|
total: 0,
|
|
loading: false,
|
|
param: {
|
|
tableName:'',
|
|
tableComment:'',
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
dateRange: []
|
|
},
|
|
},
|
|
});
|
|
const {single,multiple, tableData}=toRefs(state)
|
|
// 初始化表格数据
|
|
const initTableData = () => {
|
|
tableList()
|
|
};
|
|
const tableList = ()=>{
|
|
getTableList(state.tableData.param).then(res=>{
|
|
state.tableData.data = res.data.list??[];
|
|
state.tableData.total = res.data.total;
|
|
})
|
|
};
|
|
/** 重置按钮操作 */
|
|
const resetQuery = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
formEl.resetFields()
|
|
tableList()
|
|
};
|
|
// 删除导入的表
|
|
const onRowDel = (row: TableData|null) => {
|
|
let msg = '你确定要删除所选数据？';
|
|
let ids:number[] = [] ;
|
|
if(row){
|
|
msg = `此操作将永久删除：“${row.tableName}”，是否继续?`
|
|
ids = [row.tableId]
|
|
}else{
|
|
msg = `此操作将永久删除：“${state.tableNames.join(',')}”，是否继续?`
|
|
ids = state.ids
|
|
}
|
|
if(ids.length===0){
|
|
ElMessage.error('请选择要删除的数据。');
|
|
return
|
|
}
|
|
ElMessageBox.confirm(msg, '提示', {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
deleteTables(ids).then(()=>{
|
|
ElMessage.success('删除成功');
|
|
tableList();
|
|
})
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
// 分页改变
|
|
const onHandleSizeChange = (val: number) => {
|
|
state.tableData.param.pageSize = val;
|
|
};
|
|
// 分页改变
|
|
const onHandleCurrentChange = (val: number) => {
|
|
state.tableData.param.pageNum = val;
|
|
};
|
|
// 页面加载时
|
|
onMounted(() => {
|
|
initTableData();
|
|
});
|
|
// 多选框选中数据
|
|
const handleSelectionChange = (selection:Array<TableData>)=> {
|
|
state.ids = selection.map(item => item.tableId)
|
|
state.multiple = !selection.length
|
|
state.single = selection.length != 1
|
|
state.tableNames = selection.map(item=>item.tableName)
|
|
};
|
|
const handleGenTable=(row: TableData|null)=>{
|
|
let msg = '你确定要生成？';
|
|
let ids:number[] = [] ;
|
|
if(row){
|
|
msg = `此操作将生成业务表：“${row.tableName}”相关代码，是否继续?`
|
|
ids = [row.tableId]
|
|
}else{
|
|
msg = `此操作将生成业务表：“${state.tableNames.join(',')}”相关代码，是否继续?`
|
|
ids = state.ids
|
|
}
|
|
if(ids.length===0){
|
|
ElMessage.error('请选择要生成的业务表数据。');
|
|
return
|
|
}
|
|
ElMessageBox.confirm(msg, '提示', {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
batchGenCode(ids).then(()=>{
|
|
ElMessage.success('生成成功');
|
|
resetMenuSession()
|
|
tableList();
|
|
})
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
// 重置菜单session
|
|
const resetMenuSession = () => {
|
|
refreshBackEndControlRoutes();
|
|
};
|
|
//打开导入页面
|
|
const openImportTable=()=>{
|
|
importRef.value.openDialog()
|
|
}
|
|
const handlePreview = (row:TableData)=>{
|
|
genCodePreviewRef.value.showView(row.tableId);
|
|
}
|
|
const handleEditTable=(row:TableData|null)=>{
|
|
const tableId = row?.tableId || state.ids[0];
|
|
router.push({ path: "/system/tools/gen/edit", query: { tableId: tableId } });
|
|
}
|
|
const handleSyncTable=((row:TableData)=>{
|
|
const tableId = row?.tableId || state.ids[0];
|
|
syncTable(tableId).then((res:any)=>{
|
|
if (res.code === 0) {
|
|
ElMessage.success('同步成功');
|
|
}
|
|
})
|
|
})
|
|
</script>
|