tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 项目简化

Browse Source 
Former-commit-id: 73a4a6c9c41e013928e6205dd7c078d0e955f487
This commit is contained in:
horizons
2022-09-13 07:44:55 +08:00
parent 90c6059f3f
commit 81d7880ebc
64 changed files with 204 additions and 5279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
src/views/system/client/index.vue
View File

@@ -1,374 +0,0 @@
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
name: 'client',
};
</script>
<script setup lang="ts">
import {
listClientPages,
getClientFormDetial,
addClient,
updateClient,
deleteClients,
} from '@/api/system/client';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { onMounted, reactive, getCurrentInstance, ref, toRefs } from 'vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
ClientFormData,
ClientItem,
ClientQueryParam,
} from '@/types/api/system/client';
import { Option } from '@/types/common';
const { proxy }: any = getCurrentInstance();
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10,
} as ClientQueryParam,
clientList: [] as ClientItem[],
total: 0,
dialog: {
title: '',
visible: false,
type: 'create',
},
formData: {} as ClientFormData,
rules: {
clientId: [
{ required: true, message: '客户端ID不能为空', trigger: 'blur' },
],
},
authorizedGrantTypesOptions: [] as Option[],
checkedAuthorizedGrantTypes: [] as string[],
});
const {
loading,
ids,
multiple,
queryParams,
clientList,
total,
dialog,
formData,
rules,
authorizedGrantTypesOptions,
checkedAuthorizedGrantTypes,
} = toRefs(state);
function handleQuery() {
listClientPages(state.queryParams).then(({ data }) => {
state.clientList = data.list;
state.total = data.total;
state.loading = false;
});
}
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.clientId);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleAdd() {
proxy.$getDictItemsByTypeCode('grant_type').then((response: any) => {
state.authorizedGrantTypesOptions = response.data;
});
state.dialog = {
title: '添加客户端',
visible: true,
type: 'create',
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改客户端',
visible: true,
type: 'edit',
};
const clientId = row.clientId || ids;
proxy.$getDictItemsByTypeCode('grant_type').then((res: any) => {
state.authorizedGrantTypesOptions = res.data;
getClientFormDetial(clientId).then(({ data }) => {
state.formData = data;
state.checkedAuthorizedGrantTypes = data.authorizedGrantTypes?.split(',');
});
});
}
function submitForm() {
dataFormRef.value.validate((isvalid: boolean) => {
if (isvalid) {
state.formData.authorizedGrantTypes =
state.checkedAuthorizedGrantTypes.join(',');
if (state.dialog.type == 'edit') {
updateClient(state.formData.clientId, state.formData).then(() => {
ElMessage.success('修改成功');
state.dialog.visible = false;
cancel();
handleQuery();
});
} else {
addClient(state.formData).then(() => {
ElMessage.success('新增成功');
cancel();
handleQuery();
});
}
}
});
}
function cancel() {
state.dialog.visible = false;
dataFormRef.value.resetFields();
state.checkedAuthorizedGrantTypes = [];
}
function handleDelete(row: any) {
const clientIds = [row.clientId || ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteClients(clientIds).then(() => {
ElMessage.success('删除成功');
handleQuery();
});
})
.catch(() => ElMessage.info('已取消删除'));
}
onMounted(() => {
handleQuery();
});
</script>
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-form-item>
<el-form-item>
<el-input
v-model="queryParams.keywords"
placeholder="客户端ID"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table
v-loading="loading"
:data="clientList"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" type="index" width="55" align="center" />
<el-table-column label="客户端ID" prop="clientId" width="200" />
<el-table-column label="客户端密钥" prop="clientSecret" width="100" />
<el-table-column label="域" width="100" prop="scope" />
<el-table-column label="自动放行" prop="autoapprove" width="100" />
<el-table-column label="授权方式" prop="authorizedGrantTypes" />
<el-table-column
label="认证令牌时效(单位：秒)"
width="200"
prop="accessTokenValidity"
/>
<el-table-column
label="刷新令牌时效(单位：秒)"
width="200"
prop="refreshTokenValidity"
/>
<el-table-column label="操作" align="center" width="120">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
/>
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination
v-if="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<!-- 表单弹窗 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-row>
<el-col :span="12">
<el-form-item label="客户端ID" prop="clientId">
<el-input
v-model="formData.clientId"
placeholder="请输入客户端ID"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客户端密钥" prop="clientSecret">
<el-input
v-model="formData.clientSecret"
placeholder="请输入客户端密钥"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="域" prop="scope">
<el-input v-model="formData.scope" placeholder="请输入域" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="自动放行" prop="autoapprove">
<el-radio-group v-model="formData.autoapprove">
<el-radio label="true">是</el-radio>
<el-radio label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="授权方式" prop="authorizedGrantTypes">
<el-checkbox-group v-model="checkedAuthorizedGrantTypes">
<el-checkbox
v-for="item in authorizedGrantTypesOptions"
:key="item.value"
:label="item.value"
>{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="认证令牌时效" prop="accessTokenValidity">
<el-input
v-model="formData.accessTokenValidity"
placeholder="请输入认证令牌时效"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="刷新令牌时效" prop="refreshTokenValidity">
<el-input
v-model="formData.refreshTokenValidity"
placeholder="请输入刷新令牌时效"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="回调地址" prop="webServerRedirectUri">
<el-input
v-model="formData.webServerRedirectUri"
placeholder="请输入回调地址"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="权限" prop="authorities">
<el-input
v-model="formData.authorities"
placeholder="请输入权限"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="扩展信息" prop="additionalInformation">
<el-input
v-model="formData.additionalInformation"
type="textarea"
placeholder="JSON格式"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> 确定 </el-button>
<el-button @click="cancel"> 取消 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>

8
src/views/system/dept/index.vue
View File

@@ -16,16 +16,12 @@ import {
addDept,
listDeptOptions,
listDepartments
} from '@/api/system/dept';
} from '@/api/dept';
// 组件依赖
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
DeptFormData,
DeptItem,
DeptQueryParam
} from '@/types/api/system/dept';
import { DeptFormData, DeptItem, DeptQueryParam } from '@/types/api/dept';
import { Dialog, Option } from '@/types/common';
// DOM元素的引用声明定义

32
src/views/system/dict/components/DictItem.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts">
export default {
name: 'dictItem',
name: 'dictItem'
};
</script>
@@ -10,8 +10,8 @@ import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import {
DictItem,
DictItemFormData,
DictItemQueryParam,
} from '@/types/api/system/dict';
DictItemQueryParam
} from '@/types/api/dict';
import { Dialog } from '@/types/common';
import {
@@ -19,8 +19,8 @@ import {
getDictItemData,
addDictItem,
updateDictItem,
deleteDictItems,
} from '@/api/system/dict';
deleteDictItems
} from '@/api/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
const props = defineProps({
@@ -28,19 +28,19 @@ const props = defineProps({
type: String,
default: () => {
return '';
},
}
},
typeName: {
type: String,
default: () => {
return '';
},
},
}
}
});
watch(
() => props.typeCode,
(value) => {
value => {
state.queryParams.typeCode = value;
state.formData.typeCode = value;
handleQuery();
@@ -66,14 +66,14 @@ const state = reactive({
typeCode: props.typeCode,
typeName: props.typeName,
status: 1,
sort: 1,
sort: 1
} as DictItemFormData,
rules: {
name: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }],
value: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
},
localDictCode: props.typeCode,
localDictName: props.typeName,
localDictName: props.typeName
});
const {
@@ -84,7 +84,7 @@ const {
dialog,
formData,
rules,
total,
total
} = toRefs(state);
function handleQuery() {
@@ -121,14 +121,14 @@ function handleAdd() {
}
state.dialog = {
title: '添加字典数据项',
visible: true,
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典数据项',
visible: true,
visible: true
};
const id = row.id || state.ids;
getDictItemData(id).then(({ data }) => {
@@ -167,7 +167,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
type: 'warning'
})
.then(() => {
deleteDictItems(ids).then(() => {

26
src/views/system/dict/components/DictType.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts">
export default {
name: 'dictType',
name: 'dictType'
};
</script>
@@ -135,17 +135,13 @@ import {
getDictFormData,
addDictType,
updateDictType,
deleteDictTypes,
} from '@/api/system/dict';
deleteDictTypes
} from '@/api/dict';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Dialog } from '@/types/common';
import {
Dict,
DictFormTypeData,
DictQueryParam,
} from '@/types/api/system/dict';
import { Dict, DictFormTypeData, DictQueryParam } from '@/types/api/dict';
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
@@ -162,18 +158,18 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 10
} as DictQueryParam,
dictList: [] as Dict[],
total: 0,
dialog: { visible: false } as Dialog,
formData: {
status: 1,
status: 1
} as DictFormTypeData,
rules: {
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
},
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }]
}
});
const { total, dialog, loading, dictList, formData, rules, queryParams } =
@@ -203,14 +199,14 @@ function handleSelectionChange(selection: any) {
function handleAdd() {
state.dialog = {
title: '添加字典',
visible: true,
visible: true
};
}
function handleUpdate(row: any) {
state.dialog = {
title: '修改字典',
visible: true,
visible: true
};
const id = row.id || state.ids;
getDictFormData(id).then(({ data }) => {
@@ -249,7 +245,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
type: 'warning'
})
.then(() => {
deleteDictTypes(ids).then(() => {

8
src/views/system/menu/components/Menu.vue
View File

@@ -233,11 +233,7 @@ import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
import { Dialog, Option } from '@/types/common';
import {
MenuFormData,
MenuItem,
MenuQueryParam
} from '@/types/api/system/menu';
import { MenuFormData, MenuItem, MenuQueryParam } from '@/types/api/menu';
// API 依赖
import {
listMenus,
@@ -246,7 +242,7 @@ import {
addMenu,
deleteMenus,
updateMenu
} from '@/api/system/menu';
} from '@/api/menu';
import SvgIcon from '@/components/SvgIcon/index.vue';
import IconSelect from '@/components/IconSelect/index.vue';

46
src/views/system/menu/components/Perm.vue
View File

@@ -5,7 +5,7 @@ import {
reactive,
ref,
getCurrentInstance,
toRefs,
toRefs
} from 'vue';
import {
@@ -13,19 +13,15 @@ import {
getPermFormDetail,
addPerm,
updatePerm,
deletePerms,
} from '@/api/system/perm';
deletePerms
} from '@/api/perm';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import { Dialog, Option } from '@/types/common';
import {
PermFormData,
PermItem,
PermQueryParam,
} from '@/types/api/system/perm';
import { MenuItem } from '@/types/api/system/menu';
import { PermFormData, PermItem, PermQueryParam } from '@/types/api/perm';
import { MenuItem } from '@/types/api/menu';
const { proxy }: any = getCurrentInstance();
@@ -37,19 +33,19 @@ const props = defineProps({
type: Object,
default: () => {
return {} as MenuItem;
},
},
}
}
});
watch(
() => props.menu,
(value) => {
value => {
queryParams.value.menuId = value.id;
console.log('menu', value);
handleQuery();
},
{
deep: true,
deep: true
}
);
@@ -63,26 +59,26 @@ const state = reactive({
multiple: true,
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 10
} as PermQueryParam,
permList: [] as PermItem[],
total: 0,
dialog: {
visible: false,
visible: false
} as Dialog,
formData: {} as PermFormData,
rules: {
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
perm: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }],
method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }]
},
microServiceOptions: [] as Option[],
requestMethodOptions: [] as Option[],
urlPerm: {
requestMethod: '',
serviceName: '',
requestPath: '',
},
requestPath: ''
}
});
const {
@@ -96,7 +92,7 @@ const {
microServiceOptions,
requestMethodOptions,
urlPerm,
queryParams,
queryParams
} = toRefs(state);
function handleQuery() {
@@ -143,7 +139,7 @@ function handleAdd() {
loadDictOptions();
state.dialog = {
title: '添加权限',
visible: true,
visible: true
};
}
@@ -151,14 +147,14 @@ function handleUpdate(row: any) {
loadDictOptions();
state.dialog = {
title: '修改权限',
visible: true,
visible: true
};
const id = row.id || state.ids;
getPermFormDetail(id).then((response) => {
getPermFormDetail(id).then(response => {
const { data } = response;
state.formData = data;
if (data && data.urlPerm) {
// GET:/youlai-admin/api/v1/users
// GET:/youlai-system/api/v1/users
const urlPermArr = data.urlPerm.split(':');
state.urlPerm.requestMethod = urlPermArr[0];
state.urlPerm.serviceName = urlPermArr[1].substring(
@@ -225,7 +221,7 @@ function resetForm() {
state.urlPerm = {
requestMethod: '',
serviceName: '',
requestPath: '',
requestPath: ''
};
}
@@ -239,7 +235,7 @@ function handleDelete(row: any) {
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
type: 'warning'
})
.then(() => {
deletePerms(ids).then(() => {

4
src/views/system/menu/index.vue
View File

@@ -36,9 +36,9 @@ import PermTable from './components/Perm.vue';
import { reactive, toRefs } from 'vue';
import { WarningFilled } from '@element-plus/icons-vue';
import { MenuItem } from '@/types/api/system/menu';
import { MenuItem } from '@/types/api/menu';
const state = reactive({
menu: {} as MenuItem,
menu: {} as MenuItem
});
const { menu } = toRefs(state);

12
src/views/system/role/index.vue
View File

@@ -14,17 +14,13 @@ import {
deleteRoles,
getRoleResources,
updateRoleResource
} from '@/api/system/role';
import { listResources } from '@/api/system/menu';
} from '@/api/role';
import { listResources } from '@/api/menu';
import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
import {
RoleFormData,
RoleItem,
RoleQueryParam
} from '@/types/api/system/role';
import { Resource } from '@/types/api/system/menu';
import { RoleFormData, RoleItem, RoleQueryParam } from '@/types/api/role';
import { Resource } from '@/types/api/menu';
import SvgIcon from '@/components/SvgIcon/index.vue';
const emit = defineEmits(['roleClick']);

8
src/views/system/user/index.vue
View File

@@ -27,9 +27,9 @@ import {
downloadTemplate,
exportUser,
importUser
} from '@/api/system/user';
import { listDeptOptions } from '@/api/system/dept';
import { listRoleOptions } from '@/api/system/role';
} from '@/api/user';
import { listDeptOptions } from '@/api/dept';
import { listRoleOptions } from '@/api/role';
// 组件依赖
import {
@@ -55,7 +55,7 @@ import {
UserQueryParam,
UserFormData,
UserImportFormData
} from '@/types/api/system/user';
} from '@/types/api/user';
import { Option, Dialog } from '@/types/common';