admin 初始化
This commit is contained in:
zoujiandong
@@ -0,0 +1,410 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<a-form :model="dataInfo" :rules="rules" ref="modalFormRef" auto-label-width size="mini">
|
||||
<a-card bordered>
|
||||
<!-- 卡片插槽 开始 -->
|
||||
<template #actions>
|
||||
<a-button type="primary" @click="handleSubmit" long>提交</a-button>
|
||||
<a-button type="primary" @click="close" long>返回</a-button>
|
||||
</template>
|
||||
<!-- 卡片插槽 结束 -->
|
||||
<a-tabs default-active-key="2">
|
||||
<a-tab-pane key="1" title="基本信息">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item field="tableName">
|
||||
<template #label>
|
||||
数据表名称
|
||||
<a-tooltip content="数据库表名称，针对gorm对应的table()使用，⚠️这里必须是蛇形结构">
|
||||
<icon-question-circle-fill />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model="dataInfo.tableName" placeholder="请输入表名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="tableComment">
|
||||
<template #label>
|
||||
菜单名称
|
||||
<a-tooltip content="同步的数据库表名称，生成配置数据时，用作菜单名称">
|
||||
<icon-question-circle-fill />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model="dataInfo.tableComment" placeholder="请输入菜单名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="className">
|
||||
<template #label>
|
||||
结构体模型名称
|
||||
<a-tooltip content="结构体模型名称，代码中的struct名称定义使用">
|
||||
<icon-question-circle-fill />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model="dataInfo.className" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="functionAuthor" label="作者名称">
|
||||
<a-input v-model="dataInfo.functionAuthor" placeholder="请输入作者名称" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item field="remark" label="备注">
|
||||
<a-textarea v-model="dataInfo.remark" placeholder="请输入备注" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="2" title="字段信息">
|
||||
<a-alert type="warning" style="margin-bottom: 16px;">表字段中的id、create_by、update_by、created_at、updated_at、deleted_at的字段在此列表中已经隐藏.</a-alert>
|
||||
<a-table :data="tableData" :virtual-list-props="{height:600}" :pagination="false" :scroll="{x: '100%'}">
|
||||
<template #columns>
|
||||
<!-- <a-table-column title="序号" data-index="tableId" :width="180" ellipsis tooltip/> -->
|
||||
<a-table-column title="字段列名" data-index="columnName"/>
|
||||
<a-table-column title="字段描述" :width="120">
|
||||
<template #cell="{ record }">
|
||||
<a-input v-model="record.columnComment" />
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="物理类型" data-index="columnType" align="center" :width="120" />
|
||||
<a-table-column title="go类型" align="center" :width="140">
|
||||
<template #cell="{ record }">
|
||||
<a-select v-model="record.goType" placeholder="请选择 ...">
|
||||
<a-option value="int64">int64</a-option>
|
||||
<a-option value="string">string</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="go属性" align="center" >
|
||||
<template #cell="{ record }">
|
||||
<a-input v-model="record.goField"/>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="json属性" align="center" >
|
||||
<template #cell="{ record }">
|
||||
<a-input v-model="record.jsonField"/>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="编辑" align="center" :width="60">
|
||||
<template #cell="{ record }">
|
||||
<a-switch v-model="record.isInsert" type="large" checked-value="1" unchecked-value="0">
|
||||
<template #checked-icon>
|
||||
<icon-check/>
|
||||
</template>
|
||||
<template #unchecked-icon>
|
||||
<icon-close/>
|
||||
</template>
|
||||
</a-switch>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="列表" align="center" :width="60">
|
||||
<template #cell="{ record }">
|
||||
<a-switch v-model="record.isList" type="large" checked-value="1" unchecked-value="0">
|
||||
<template #checked-icon>
|
||||
<icon-check/>
|
||||
</template>
|
||||
<template #unchecked-icon>
|
||||
<icon-close/>
|
||||
</template>
|
||||
</a-switch>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="查询" align="center" :width="60">
|
||||
<template #cell="{ record }">
|
||||
<a-switch v-model="record.isQuery" type="large" checked-value="1" unchecked-value="0">
|
||||
<template #checked-icon>
|
||||
<icon-check/>
|
||||
</template>
|
||||
<template #unchecked-icon>
|
||||
<icon-close/>
|
||||
</template>
|
||||
</a-switch>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="查询方式" :width="90">
|
||||
<template #cell="{ record }">
|
||||
<a-select v-model="record.queryType" placeholder="请选择 ...">
|
||||
<a-option label="=" value="EQ" />
|
||||
<a-option label="!=" value="NE" />
|
||||
<a-option label=">" value="GT" />
|
||||
<a-option label=">=" value="GTE" />
|
||||
<a-option label="<" value="LT" />
|
||||
<a-option label="<=" value="LTE" />
|
||||
<a-option label="LIKE" value="LIKE" />
|
||||
</a-select>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="必填" :width="70">
|
||||
<template #cell="{ record }">
|
||||
<!-- <a-checkbox v-model="record.isRequired"/> -->
|
||||
<a-switch v-model="record.isRequired" type="large" checked-value="1" unchecked-value="0">
|
||||
<template #checked-icon>
|
||||
<icon-check/>
|
||||
</template>
|
||||
<template #unchecked-icon>
|
||||
<icon-close/>
|
||||
</template>
|
||||
</a-switch>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="显示类型" :width="140">
|
||||
<template #cell="{ record }">
|
||||
<a-select v-model="record.htmlType" placeholder="请选择 ...">
|
||||
<a-option value="input">文本框</a-option>
|
||||
<a-option value="select">下拉框</a-option>
|
||||
<a-option value="radio">单选框</a-option>
|
||||
<a-option value="textarea">文本域</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="字典类型">
|
||||
<template #cell="{ record }">
|
||||
<a-select v-model="record.dictType" allow-clear allow-search placeholder="请选择">
|
||||
<a-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType" >
|
||||
<a-descriptions :column="1" size="mini">
|
||||
<a-descriptions-item :label="dict.dictName">
|
||||
{{ dict.dictType }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="关系表">
|
||||
<template #cell="{ record }">
|
||||
<a-select v-model="record.fkTableName" allow-clear allow-search placeholder="请选择" @change="handleChangeConfig(record)">
|
||||
<a-option v-for="table in tableTree" :key="table.tableName" :label="table.tableName" :value="table.tableName">
|
||||
<span style="float: left; margin-right: 5px; font-size: 12px;">{{ table.tableName }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ table.tableComment }}</span>
|
||||
</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="关系表key">
|
||||
<template #cell="{ record }">
|
||||
<a-select v-model="record.fkLabelId" allow-clear allow-search placeholder="请选择">
|
||||
<a-option v-for="column in record.fkCol" :key="column.columnName" :label="column.columnName" :value="column.jsonField">
|
||||
<span style="float: left; margin-right: 5px; font-size: 12px;">{{ column.jsonField }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 12px;">{{ column.columnComment }}</span>
|
||||
</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="关系表value">
|
||||
<template #cell="{ record }">
|
||||
<a-select v-model="record.fkLabelName" allow-clear allow-search placeholder="请选择">
|
||||
<a-option v-for="column in record.fkCol" :key="column.columnName" :label="column.columnName" :value="column.jsonField">
|
||||
<span style="float: left; margin-right: 5px; font-size: 12px;">{{ column.jsonField }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
|
||||
</a-option>
|
||||
</a-select>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="3" title="生成信息">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item field="tplCategory" label="生成模板">
|
||||
<a-select v-model="dataInfo.tplCategory">
|
||||
<a-option label="关系表（增删改查）" value="crud" />
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="packageName">
|
||||
<template #label>
|
||||
应用名
|
||||
<a-tooltip content="应用名，例如：在app文件夹下将该功能发到那个应用中，默认：admin">
|
||||
<icon-question-circle-fill />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model="dataInfo.packageName" placeholder="请输入应用名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="businessName">
|
||||
<template #label>
|
||||
业务名
|
||||
<a-tooltip content="可理解为功能英文名，例如 user">
|
||||
<icon-question-circle-fill />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model="dataInfo.businessName" placeholder="请输入业务名" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="functionName" label="功能描述">
|
||||
<template #label>
|
||||
功能描述
|
||||
<a-tooltip content="同步的数据库表备注，用作类描述，例如：用户">
|
||||
<icon-question-circle-fill />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model="dataInfo.functionName" placeholder="请输入功能描述" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item field="moduleName">
|
||||
<template #label>
|
||||
接口路径
|
||||
<a-tooltip content="接口路径，例如：api/v1/{sys-user}">
|
||||
<icon-question-circle-fill />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input v-model="dataInfo.moduleName" placeholder="请输入接口路径" >
|
||||
<template #prepend>api/{version}/</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance, onMounted, unref } from 'vue';
|
||||
import { optionselect as getDictOptionselect } from '@/api/admin/sys-dict'
|
||||
import { getGenTable, updateGenTable, getTableTree } from '@/api/tools/gen';
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
// Rules
|
||||
const rules = {
|
||||
tableName: [
|
||||
{ required: true, message: '请输入表名称' },
|
||||
{ match: /^[a-z\._]*$/g, message: '只允许小写字母,例如 sys_demo 格式'}
|
||||
],
|
||||
tableComment: [
|
||||
{ required: true, message: '请输入菜单名称' },
|
||||
],
|
||||
className: [
|
||||
{ required: true, message: '请输入模型名称' },
|
||||
{ match: /^[A-Z][A-z0-9]*$/g, message: '只允许小写字母,例如 sys_demo 格式'}
|
||||
],
|
||||
functionAuthor: [
|
||||
{ required: true, message: '请输入作者' },
|
||||
{ match: /^[A-Za-z]+$/, message: '必须以大写字母开头,例如 SysDemo 格式'}
|
||||
],
|
||||
tplCategory: [
|
||||
{ required: true, message: '请选择生成模板' },
|
||||
],
|
||||
packageName: [
|
||||
{ required: true, message: '请输入生成包路径' },
|
||||
],
|
||||
moduleName: [
|
||||
{ required: true, message: '请输入生成模块名' },
|
||||
{ match: /^[a-z\-]*[a-z]$/g, message: '只允许小写字母,例如 sys-demo 格式'}
|
||||
],
|
||||
businessName: [
|
||||
{ required: true, message: '请输入生成业务名' },
|
||||
{ match: /^[a-z][A-Za-z]+$/, message: '校验规则: 只允许输入字母 a-z 或大写 A-Z ，并且小写字母开头'}
|
||||
],
|
||||
functionName: [
|
||||
{ required: true, message: '请输入生成功能名' },
|
||||
],
|
||||
}
|
||||
|
||||
// 字符串转布尔类型
|
||||
const stringToBool = (value) => {
|
||||
if (value == "1") {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 表详细信息
|
||||
const dataInfo = ref({})
|
||||
// 默认表格内容
|
||||
const tableData = ref([]);
|
||||
// 获取 服务数据
|
||||
const getGenTableQuery = async (params = {}) => {
|
||||
const res = await getGenTable(params);
|
||||
tableData.value = res.data.list;
|
||||
// 编辑 isInsert
|
||||
// 列表 isList
|
||||
// 查询 isQuery
|
||||
// 必填 isRequired
|
||||
dataInfo.value = res.data.info;
|
||||
};
|
||||
|
||||
|
||||
// 接收数据库表树
|
||||
const tableTree = ref([]);
|
||||
// 获取数据库表树
|
||||
const getTableTreeQuery = async (params = {}) => {
|
||||
getTableTree().then(response => {
|
||||
tableTree.value = response.data
|
||||
tableTree.value.unshift({ tableId: 0, className: '请选择' })
|
||||
})
|
||||
};
|
||||
// 关系表
|
||||
const handleChangeConfig = (row) => {
|
||||
tableTree.value.filter(function(item) {
|
||||
if (item.tableName === row.fkTableName) {
|
||||
row.fkCol = item.columns
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 字典类型列表
|
||||
const dictOptions = ref([]);
|
||||
// 查询字典下拉列表
|
||||
const getDictOption = async () => {
|
||||
const res =await getDictOptionselect();
|
||||
dictOptions.value = res.data
|
||||
};
|
||||
|
||||
|
||||
const modalFormRef = ref(null);
|
||||
// handleSubmit 修改按钮方法 20221101
|
||||
const handleSubmit = () => {
|
||||
const genTable = Object.assign({}, dataInfo.value)
|
||||
genTable.columns = tableData.value
|
||||
genTable.params = {
|
||||
treeCode: genTable.treeCode,
|
||||
treeName: genTable.treeName,
|
||||
treeParentCode: genTable.treeParentCode
|
||||
}
|
||||
|
||||
proxy.$refs.modalFormRef.validate(async (valid) => {
|
||||
if (!valid) {
|
||||
const { code, msg } = await updateGenTable(genTable);
|
||||
if (code == 200 ) {
|
||||
proxy.$notification.success('修改成功');
|
||||
} else {
|
||||
proxy.$notification.error(msg);
|
||||
}
|
||||
// 成功调用关闭方法
|
||||
close()
|
||||
} else {
|
||||
proxy.$message.error('表单校验失败');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 关闭按钮 */
|
||||
const close = () => {
|
||||
proxy.$router.push({ path: '/dev-tools/gen', query: { t: Date.now() }})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const { tableId } = proxy.$route.query
|
||||
getGenTableQuery(tableId);
|
||||
getTableTreeQuery()
|
||||
getDictOption()
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" title="导入表" @ok="handleImportTable" :ok-loading="loading" @cancel="visible = false" width="50%">
|
||||
<a-form :model="queryForm" ref="queryFormRef" layout="inline">
|
||||
<a-form-item field="tableName" label="表名称">
|
||||
<a-input v-model="queryForm.tableName" placeholder="请输入表名称" />
|
||||
</a-form-item>
|
||||
<a-form-item field="tableComment" label="表描述">
|
||||
<a-input v-model="queryForm.tableComment" placeholder="请输入表描述" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
|
||||
<a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-divider />
|
||||
|
||||
<a-table
|
||||
:data="tableData"
|
||||
:pagination="{
|
||||
'show-total': true,
|
||||
'show-jumper': true,
|
||||
'show-page-size': true,
|
||||
total: pager.count,
|
||||
current: currentPage,
|
||||
}"
|
||||
:row-selection="{ type: 'checkbox', showCheckedAll: true }"
|
||||
row-key="tableName"
|
||||
@selection-change="selectionChange"
|
||||
@page-change="handlePageChange"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column title="表名称" data-index="tableName" :width="180" ellipsis tooltip/>
|
||||
<a-table-column title="表描述" data-index="tableComment" :width="180" ellipsis tooltip/>
|
||||
<a-table-column title="创建时间" :width="180" ellipsis>
|
||||
<template #cell="{ record }">
|
||||
{{ parseTime(record.createTime) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="更新时间" :width="180" ellipsis>
|
||||
<template #cell="{ record }">
|
||||
{{ parseTime(record.updateTime) }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, getCurrentInstance } from 'vue';
|
||||
import { listDbTable,importTable,listTable} from '@/api/tools/gen';
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
// 对话框默认值
|
||||
const visible = ref(false);
|
||||
|
||||
// 按钮加载中状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 对话框确认
|
||||
const handleImportTable = () => {
|
||||
loading.value = true
|
||||
importTable({ tables: batchList.join(',') }).then(res => {
|
||||
if (res.code === 200) {
|
||||
proxy.$message.info(res.msg);
|
||||
// 关闭对话框
|
||||
visible.value = false;
|
||||
// 完成刷新下页面
|
||||
location.reload();
|
||||
} else {
|
||||
proxy.$message.info(res.msg);
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
|
||||
const queryForm = reactive({});
|
||||
// 查询列表信息
|
||||
const handleQuery = async () => {
|
||||
const params = {
|
||||
pageIndex: pager.pageIndex,
|
||||
pageSize: pager.pageSize,
|
||||
...queryForm,
|
||||
};
|
||||
|
||||
getDbTables(params);
|
||||
};
|
||||
// 重置搜索
|
||||
const handleResetQuery = () => {
|
||||
proxy.$refs.queryFormRef.resetFields();
|
||||
getDbTables(queryForm);
|
||||
}
|
||||
|
||||
|
||||
const tableData = ref([]);
|
||||
// Batch Del List
|
||||
let batchList = [];
|
||||
// Table 勾选数据
|
||||
const selectionChange = (rowKeys) => {
|
||||
batchList = rowKeys;
|
||||
};
|
||||
/**
|
||||
* 分页改变
|
||||
* @param {Number} [page]
|
||||
*/
|
||||
const handlePageChange = (page) => {
|
||||
pager.pageIndex = page;
|
||||
// 修改当前页码
|
||||
currentPage.value = page;
|
||||
getDbTables({ ...pager, ...queryForm });
|
||||
};
|
||||
|
||||
// 每页数据量
|
||||
const handlePageSizeChange = (pageSize) => {
|
||||
pager.pageSize = pageSize;
|
||||
getDbTables({ ...pager, ...queryForm });
|
||||
};
|
||||
|
||||
// 初始页数
|
||||
const currentPage = ref(1);
|
||||
// Pager
|
||||
const pager = {
|
||||
count: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
|
||||
// 获取列表数据
|
||||
const getDbTables = async (params = {}) => {
|
||||
const { data, code, msg } = await listDbTable(params);
|
||||
if ( code == 200 ) {
|
||||
tableData.value = data.list;
|
||||
Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
|
||||
} else {
|
||||
proxy.$notification.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDbTables(pager);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<a-form :model="queryForm" ref="queryFormRef" layout="inline">
|
||||
<a-form-item field="tableName" label="表名称">
|
||||
<a-input v-model="queryForm.tableName" placeholder="请输入表名称" @press-enter="handleQuery" />
|
||||
</a-form-item>
|
||||
<a-form-item field="tableComment" label="表描述">
|
||||
<a-input v-model="queryForm.tableComment" placeholder="请输入描述" @press-enter="handleQuery" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleQuery"><icon-search /> 搜索</a-button>
|
||||
<a-button @click="handleResetQuery"><icon-loop /> 重置</a-button>
|
||||
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-divider />
|
||||
|
||||
<!-- action -->
|
||||
<div class="action">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="openImportTable"><icon-plus /> 导入 </a-button>
|
||||
<a-button type="primary" status="danger" @click="() => { deleteVisible = true; }"><icon-delete /> 批量删除</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- table -->
|
||||
<a-table
|
||||
:data="tableData"
|
||||
:row-selection="{ type: 'checkbox', showCheckedAll: true }"
|
||||
row-key="tableId"
|
||||
@selection-change="(selection) => {deleteData = selection;}"
|
||||
@page-change="handlePageChange"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column title="序号" data-index="tableId" :width="180" ellipsis tooltip/>
|
||||
<a-table-column title="表名称" data-index="tableName" :width="180" ellipsis tooltip/>
|
||||
<a-table-column title="表描述" data-index="tableComment" :width="180" ellipsis tooltip/>
|
||||
<a-table-column title="模型名称" data-index="className" :width="180" ellipsis tooltip/>
|
||||
<a-table-column title="动作" :width="370" align="center" >
|
||||
<template #cell="{ record }">
|
||||
<a-button-group>
|
||||
<a-button size="small" @click="handleEditTable(record)">编辑</a-button>
|
||||
<a-button size="small" @click="handlePreview(record)">预览</a-button>
|
||||
<a-popconfirm content="正在使用代码生成请确认?" okText="生成" type="warning" @ok="handleToProject(record)">
|
||||
<a-button size="small">代码生成 </a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm content="正在使用【菜单以及API生成到数据库】请确认?" okText="写入DB" type="warning" @ok="handleToDB(record)">
|
||||
<a-button size="small">生成配置 </a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm content="正在使用代码生成配置迁移脚本请确认?" okText="迁移" type="warning" @ok="handleToApiFile(record)">
|
||||
<a-button size="small">生成迁移脚本 </a-button>
|
||||
</a-popconfirm>
|
||||
<a-button size="small" @click="() => { deleteVisible = true; deleteData = [record.jobId]; }">删除</a-button>
|
||||
</a-button-group>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 导入对话框 -->
|
||||
<import-table v-model:visible="modalVisible" />
|
||||
|
||||
<!-- 预览代码对话框 -->
|
||||
<a-modal v-model:visible="codeVisible" title="预览代码" width="80%">
|
||||
<a-space style="margin-bottom: 16px;">
|
||||
<a-tag v-for="(value, key) of preview.data" :key="key" bordered color="#165dff" @click="codeChange(key)">{{ key.substring(key.lastIndexOf('/')+1,key.indexOf('.go.template')) }}</a-tag>
|
||||
</a-space>
|
||||
<!-- 代码编辑器 -->
|
||||
<codemirror v-model="codestr" :style="{ height: '600px' }" :autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" />
|
||||
</a-modal>
|
||||
|
||||
<!-- Akiraka 20230223 删除与批量删除 开始 -->
|
||||
<DeleteModal
|
||||
:data="deleteData"
|
||||
:visible="deleteVisible"
|
||||
:apiDelete="delTable"
|
||||
@deleteVisibleChange="() => deleteVisible = false"
|
||||
/>
|
||||
<!-- Akiraka 20230223 删除与批量删除 结束 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance, onMounted, nextTick, watch } from 'vue';
|
||||
import importTable from './importTable.vue'
|
||||
import { listTable,previewTable,delTable,apiToFile,toProjectTableCheckRole,toDBTable } from '@/api/tools/gen';
|
||||
import { parseTime } from '@/utils/parseTime';
|
||||
import { Codemirror } from 'vue-codemirror'
|
||||
import { javascript } from '@codemirror/lang-javascript'
|
||||
import { oneDark } from '@codemirror/theme-one-dark'
|
||||
|
||||
// Akiraka 20230210 删除数据
|
||||
const deleteData = ref([])
|
||||
// Akiraka 20230210 删除对话框
|
||||
const deleteVisible = ref(false)
|
||||
// Akiraka 20230210 监听删除事件
|
||||
watch(() => deleteVisible.value ,(value) => {
|
||||
if ( value == false ) {
|
||||
getSysConfigInfo(pager);
|
||||
}
|
||||
})
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const currentPage = ref(1);
|
||||
// Pager
|
||||
const pager = {
|
||||
count: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
// form
|
||||
const queryForm = reactive({});
|
||||
const modalForm = reactive({
|
||||
sort: 0,
|
||||
status: 2,
|
||||
});
|
||||
|
||||
const modalVisible = ref(false);
|
||||
const openImportTable = () => {
|
||||
modalVisible.value = true;
|
||||
};
|
||||
// Batch Del List
|
||||
let batchList = [];
|
||||
|
||||
// Table Data
|
||||
const tableData = ref([]);
|
||||
|
||||
// 修改
|
||||
const handleUpdate = async (record) => {
|
||||
modalVisible.value = true;
|
||||
modalTitle.value = '修改岗位';
|
||||
await nextTick();
|
||||
Object.assign(modalForm, record);
|
||||
};
|
||||
|
||||
// Table 勾选数据
|
||||
const selectionChange = (rowKeys) => {
|
||||
batchList = rowKeys;
|
||||
};
|
||||
|
||||
/**
|
||||
* 分页改变
|
||||
* @param {Number} [page]
|
||||
*/
|
||||
const handlePageChange = (page) => {
|
||||
pager.pageIndex = page;
|
||||
// 修改当前页码
|
||||
currentPage.value = page;
|
||||
getListTable({ ...pager, ...queryForm });
|
||||
};
|
||||
|
||||
// 每页数据量
|
||||
const handlePageSizeChange = (pageSize) => {
|
||||
pager.pageSize = pageSize;
|
||||
getListTable({ ...pager, ...queryForm });
|
||||
};
|
||||
|
||||
// 获取列表数据
|
||||
const getListTable = async (params = {}) => {
|
||||
const { data, code, msg } = await listTable(params);
|
||||
if ( code == 200 ) {
|
||||
tableData.value = data.list;
|
||||
Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
|
||||
} else {
|
||||
proxy.$notification.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
// 查询列表信息
|
||||
const handleQuery = async () => {
|
||||
const params = {
|
||||
pageIndex: pager.pageIndex,
|
||||
pageSize: pager.pageSize,
|
||||
...queryForm,
|
||||
};
|
||||
|
||||
getListTable(params);
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const handleResetQuery = () => {
|
||||
proxy.$refs.queryFormRef.resetFields();
|
||||
getListTable(queryForm);
|
||||
}
|
||||
|
||||
// 按钮块
|
||||
// 编辑
|
||||
const handleEditTable = (row) => {
|
||||
const tableId = row.tableId || this.ids[0]
|
||||
proxy.$router.push({ path: '/dev-tools/editTable', query: { tableId: tableId }})
|
||||
}
|
||||
// 预览代码参数
|
||||
// 预览代码对话框
|
||||
const codeVisible = ref(false);
|
||||
// 预览参数
|
||||
const preview = ref({
|
||||
open: false,
|
||||
title: '代码预览',
|
||||
data: {},
|
||||
activeName: 'api.go'
|
||||
})
|
||||
/** 预览按钮 */
|
||||
const handlePreview = (row) => {
|
||||
codeVisible.value = true;
|
||||
previewTable(row.tableId).then(response => {
|
||||
console.log("sadasdasdasd",response)
|
||||
preview.value.data = response.data
|
||||
preview.value.open = true
|
||||
codeChange('template/api.go.template')
|
||||
})
|
||||
}
|
||||
// 代码编辑器参数
|
||||
const cmOptions = ref({
|
||||
tabSize: 4,
|
||||
theme: 'material-palenight',
|
||||
mode: 'text/javascript',
|
||||
lineNumbers: true,
|
||||
line: true
|
||||
})
|
||||
const extensions = [javascript(), oneDark];
|
||||
const codestr = ref('')
|
||||
// 预览代码 代码更改
|
||||
const codeChange = (e) => {
|
||||
if (e.indexOf('js') > -1) {
|
||||
|
||||
cmOptions.value.mode = 'text/javascript'
|
||||
}
|
||||
if (e.indexOf('model') > -1 || e.indexOf('router') > -1 || e.indexOf('api') > -1 || e.indexOf('service') > -1 || e.indexOf('dto') > -1) {
|
||||
cmOptions.value.mode = 'text/x-go'
|
||||
}
|
||||
if (e.indexOf('vue') > -1) {
|
||||
cmOptions.value.mode = 'text/x-vue'
|
||||
}
|
||||
codestr.value = preview.value.data[e]
|
||||
}
|
||||
// 代码生成
|
||||
const handleToProject = (row) => {
|
||||
console.log("dasdasd",row)
|
||||
toProjectTableCheckRole(row.tableId, false).then((response) => {
|
||||
proxy.$message.success(response.msg);
|
||||
}).catch(function() {})
|
||||
}
|
||||
// 生成配置
|
||||
const handleToDB = (row) => {
|
||||
toDBTable(row.tableId).then((response) => {
|
||||
proxy.$message.success(response.msg);
|
||||
}).catch(function() {})
|
||||
}
|
||||
// 生成迁移脚本
|
||||
const handleToApiFile = (row) => {
|
||||
apiToFile(row.tableId, true).then((response) => {
|
||||
proxy.$message.success(response.msg);
|
||||
}).catch(function() {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getListTable(pager);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.action {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<iframe class="iframe-swagger" src="http://124.222.72.164:8000/swagger/index.html"></iframe>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.iframe-swagger {
|
||||
width: 100%;
|
||||
height: calc(100vh - 90px);
|
||||
border: none
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user