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

refactor: eslint代码检查优化

Browse Source 
Former-commit-id: 4c11b5d0cdd10f28148cf3d9b593f85e082cdc51
This commit is contained in:
郝先瑞
2022-04-15 00:45:06 +08:00
parent 15022f51b9
commit dd93144788
69 changed files with 820 additions and 1774 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,43 +3,23 @@
<!-- 搜索表单 -->
<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-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 prop="clientId">
<el-input
v-model="queryParams.clientId"
placeholder="输入客户端ID"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.clientId" 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 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 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" />
@@ -47,69 +27,33 @@
<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="认证令牌时效(单位：秒)" 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)"
/>
<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-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<pagination v-show="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-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-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-input v-model="formData.clientSecret" placeholder="请输入客户端密钥" />
</el-form-item>
</el-col>
</el-row>
@@ -132,11 +76,9 @@
<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 v-for="item in authorizedGrantTypesOptions" :key="item.value" :label="item.value">{{
item.label
}}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
@@ -144,19 +86,13 @@
<el-row>
<el-col :span="12">
<el-form-item label="认证令牌时效" prop="accessTokenValidity">
<el-input
v-model="formData.accessTokenValidity"
placeholder="请输入认证令牌时效"
/>
<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-input v-model="formData.refreshTokenValidity" placeholder="请输入刷新令牌时效" />
</el-form-item>
</el-col>
</el-row>
@@ -164,29 +100,19 @@
<el-row>
<el-col :span="12">
<el-form-item label="回调地址" prop="webServerRedirectUri">
<el-input
v-model="formData.webServerRedirectUri"
placeholder="请输入回调地址"
/>
<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-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-input v-model="formData.additionalInformation" type="textarea" placeholder="JSON格式" />
</el-form-item>
</el-col>
</el-row>
@@ -250,7 +176,6 @@ const state = reactive({
const {
loading,
ids,
single,
multiple,
queryParams,
clientList,
@@ -318,7 +243,7 @@ function submitForm() {
state.checkedAuthorizedGrantTypes.join(",");
if (state.dialog.type == "edit") {
updateClient(state.formData.clientId, state.formData).then(
(response) => {
() => {
ElMessage.success("修改成功");
state.dialog.visible = false;
cancel();
@@ -326,7 +251,7 @@ function submitForm() {
}
);
} else {
addClient(state.formData).then((response) => {
addClient(state.formData).then(() => {
ElMessage.success("新增成功");
cancel();
handleQuery();

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

@@ -179,7 +179,6 @@ const state = reactive({
ids: [] as number[],
// 非单个禁用
single: true,
disabled: false,
loading: true,
// 表格树数据
deptList: [] as DeptItem[],
@@ -205,9 +204,7 @@ const state = reactive({
});
const {
ids,
single,
disabled,
loading,
deptList,
deptOptions,
@@ -257,14 +254,6 @@ async function loadDeptOptions() {
});
}
/**
* 表单重置
**/
function resetForm() {
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
/**
* 添加部门
*/
@@ -300,15 +289,15 @@ function submitForm() {
dataForm.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateDept(state.formData.id, state.formData).then((res: any) => {
updateDept(state.formData.id, state.formData).then(() => {
ElMessage.success("修改成功");
state.dialog.visible = false;
cancel();
handleQuery();
});
} else {
addDept(state.formData).then(() => {
ElMessage.success("新增成功");
state.dialog.visible = false;
cancel();
handleQuery();
});
}
@@ -345,7 +334,8 @@ function handleDelete(row: any) {
* 取消/关闭弹窗
**/
function cancel() {
resetForm();
state.formData.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
}

104
src/views/system/dict/components/Dict.vue
View File

@@ -3,43 +3,23 @@
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="state.queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="state.multiple"
@click="handleDelete"
>删除
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="state.multiple" @click="handleDelete">删除
</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="state.queryParams.name"
placeholder="字典名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="state.queryParams.name" placeholder="字典名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<el-button :icon="Refresh" @click="resetForm">重置</el-button>
<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
highlight-current-row
:data="dictList"
v-loading="loading"
@row-click="handleRowClick"
@selection-change="handleSelectionChange"
border
>
<el-table highlight-current-row :data="dictList" v-loading="loading" @row-click="handleRowClick"
@selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典名称" prop="name" width="120" />
<el-table-column label="字典编码" prop="code" />
@@ -52,45 +32,18 @@
<el-table-column label="操作" align="center" width="150">
<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)"
/>
<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-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<pagination v-show="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="500px"
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" @close="cancel">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="字典名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名称" />
</el-form-item>
@@ -104,12 +57,8 @@
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
placeholder="请输入内容"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容"
:autosize="{ minRows: 2, maxRows: 4 }" />
</el-form-item>
</el-form>
<template #footer>
@@ -123,7 +72,7 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { onMounted, reactive, ref, toRefs, defineEmits } from "vue";
import {
listDictPages,
getDictFormDetail,
@@ -134,7 +83,6 @@ import {
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { Dialog, Dict, DictFormData, DictQueryParam } from "@/types";
import { status } from "nprogress";
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
@@ -155,7 +103,7 @@ const state = reactive({
} as DictQueryParam,
dictList: [] as Dict[],
total: 0,
dialog: {visible:false} as Dialog,
dialog: { visible: false } as Dialog,
formData: {
status: 1,
} as DictFormData,
@@ -168,14 +116,11 @@ const state = reactive({
const {
total,
dialog,
ids,
loading,
single,
multiple,
queryParams,
dictList,
formData,
rules,
queryParams
} = toRefs(state);
function handleQuery() {
@@ -221,15 +166,15 @@ function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDict(state.formData.id, state.formData).then((response) => {
updateDict(state.formData.id, state.formData).then(() => {
ElMessage.success("修改成功");
state.dialog.visible = false;
cancel()
handleQuery();
});
} else {
addDict(state.formData).then((response) => {
addDict(state.formData).then(() => {
ElMessage.success("新增成功");
state.dialog.visible = false;
cancel()
handleQuery();
});
}
@@ -237,12 +182,9 @@ function submitForm() {
});
}
function resetForm() {
function cancel() {
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
function cancel() {
state.dialog.visible = false;
}

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

@@ -3,39 +3,20 @@
<!-- 搜索表单 -->
<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-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 prop="name">
<el-input
v-model="queryParams.name"
placeholder="数据项名称"
clearable
/>
<el-input v-model="queryParams.name" placeholder="数据项名称" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<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
:data="dictItemList"
v-loading="loading"
border
@selection-change="handleSelectionChange"
>
<el-table :data="dictItemList" v-loading="loading" border @selection-change="handleSelectionChange">
<el-table-column type="selection" min-width="5%" />
<el-table-column label="数据项名称" prop="name" />
<el-table-column label="数据项值" prop="value" />
@@ -47,76 +28,37 @@
</el-table-column>
<el-table-column label="操作" align="center">
<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)"
/>
<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-show="state.total > 0"
:total="state.total"
v-model:page="state.queryParams.pageNum"
v-model:limit="state.queryParams.pageSize"
@pagination="handleQuery"
/>
<pagination v-show="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="500px"
@close="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" @close="cancel">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="字典名称">
<el-input v-model="props.dictName" :disabled="true" />
</el-form-item>
<el-form-item label="字典项名称" prop="name">
<el-input
v-model="state.formData.name"
placeholder="请输入字典项名称"
/>
<el-input v-model="formData.name" placeholder="请输入字典项名称" />
</el-form-item>
<el-form-item label="字典项值" prop="value">
<el-input
v-model="state.formData.value"
placeholder="请输入字典项值"
/>
<el-input v-model="formData.value" placeholder="请输入字典项值" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="state.formData.sort"
style="width: 80px"
controls-position="right"
:min="0"
/>
<el-input-number v-model="formData.sort" style="width: 80px" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="state.formData.status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="state.formData.remark" type="textarea"></el-input>
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-form>
<template #footer>
@@ -130,7 +72,7 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, unref, watch } from "vue";
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import {
Dialog,
@@ -147,15 +89,18 @@ import {
} from "@/api/system/dict";
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
const props = defineProps({
dictCode: {
type: String,
default: "",
default: () => {
return ''
}
},
dictName: {
type: String,
default: "",
default: () => {
return ''
}
},
});
@@ -179,32 +124,33 @@ const state = reactive({
single: true,
// 非多个禁用
multiple: true,
total: 0,
queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
dictItemList: [] as DictItem[],
total: 0,
dialog: { visible: false } as Dialog,
formData: {
dictCode: props.dictCode,
dictName: props.dictName,
status: 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.dictCode,
localDictName: props.dictName
});
const {
loading,
ids,
single,
multiple,
queryParams,
dictItemList,
total,
dialog,
formData,
rules,
total
} = toRefs(state);
function handleQuery() {
@@ -260,15 +206,15 @@ function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateDictItem(state.formData.id, state.formData).then((response) => {
updateDictItem(state.formData.id, state.formData).then(() => {
ElMessage.success("修改成功");
state.dialog.visible = false;
cancel();
handleQuery();
});
} else {
addDictItem(state.formData).then((response) => {
addDictItem(state.formData).then(() => {
ElMessage.success("新增成功");
state.dialog.visible = false;
cancel();
handleQuery();
});
}
@@ -276,13 +222,10 @@ function submitForm() {
});
}
function resetForm() {
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
function cancel() {
state.dialog.visible = false;
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {

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

@@ -17,11 +17,11 @@
<template #header>
<svg-icon color="#333" icon-class="dict"/>
<span style="margin:0 5px;">字典数据项</span>
<el-tag type="success" v-if=" state.dictCode" size="small">{{ state.dictName }}</el-tag>
<el-tag type="success" v-if="dictCode" size="small">{{dictName }}</el-tag>
<el-tag type="warning" v-else size="small">未选择字典</el-tag>
</template>
<!-- 字典项组件 -->
<dict-item :dictName="state.dictName" :dictCode='state.dictCode'/>
<dict-item :dictName="dictName" :dictCode='dictCode'/>
</el-card>
</el-col>
</el-row>

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

@@ -3,43 +3,25 @@
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="菜单名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.name" placeholder="菜单名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<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="menuList"
highlight-current-row
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@row-click="handleRowClick"
row-key="id"
border
>
<el-table v-loading="loading" :data="menuList" highlight-current-row
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="handleRowClick" row-key="id"
border>
<el-table-column label="菜单名称">
<template #default="scope">
<svg-icon
color="#333"
:icon-class="scope.row.icon ? scope.row.icon : 'build'"
/>
<svg-icon color="#333" :icon-class="scope.row.icon ? scope.row.icon : 'build'" />
{{ scope.row.name }}
</template>
</el-table-column>
@@ -53,45 +35,18 @@
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button
type="success"
:icon="Plus"
circle
plain
@click.stop="handleAdd(scope.row)"
/>
<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)"
/>
<el-button type="success" :icon="Plus" circle plain @click.stop="handleAdd(scope.row)" />
<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>
<!-- 弹窗表单 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="750px">
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="父级菜单" prop="parentId">
<tree-select
v-model="formData.parentId"
:options="menuOptions"
placeholder="选择上级菜单"
/>
<tree-select v-model="formData.parentId" :options="menuOptions" placeholder="选择上级菜单" />
</el-form-item>
<el-form-item label="菜单名称" prop="name">
@@ -110,51 +65,24 @@
</el-form-item>
<el-form-item v-if="!isExternalPath" label="页面路径" prop="component">
<el-input
v-model="formData.component"
placeholder="system/user/index"
style="width: 95%"
>
<template v-if="formData.parentId != 0" #prepend
>src/views/</template
>
<el-input v-model="formData.component" placeholder="system/user/index" style="width: 95%">
<template v-if="formData.parentId != 0" #prepend>src/views/</template>
<template v-if="formData.parentId != 0" #append>.vue</template>
</el-input>
<el-tooltip
effect="dark"
content="请输入组件路径，如果是父组件填写 Layout 即可"
placement="right"
>
<i
class="el-icon-info"
style="margin-left: 10px; color: darkseagreen"
></i>
<el-tooltip effect="dark" content="请输入组件路径，如果是父组件填写 Layout 即可" placement="right">
<i class="el-icon-info" style="margin-left: 10px; color: darkseagreen"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="图标" prop="icon">
<el-popover
placement="bottom-start"
:width="570"
trigger="click"
v-model:visible="iconSelectVisible"
>
<el-popover placement="bottom-start" :width="570" trigger="click" visible="iconSelectVisible">
<icon-select ref="iconSelectRef" @selected="selected" />
<template #reference>
<el-input
v-model="formData.icon"
placeholder="点击选择图标"
readonly
@click="iconSelectVisible = true"
>
<el-input v-model="formData.icon" placeholder="点击选择图标" readonly @click="iconSelectVisible = true">
<template #prefix>
<svg-icon
:icon-class="formData.icon ? formData.icon : 'color'"
class="el-input__icon"
style="margin: auto"
color="#999"
/>
<svg-icon :icon-class="formData.icon ? formData.icon : 'color'" class="el-input__icon"
style="margin: auto" color="#999" />
</template>
</el-input>
</template>
@@ -169,20 +97,11 @@
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
style="width: 100px"
controls-position="right"
:min="0"
/>
<el-input-number v-model="formData.sort" style="width: 100px" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="跳转路径">
<el-input
v-model="formData.redirect"
placeholder="请输入跳转路径"
maxlength="50"
/>
<el-input v-model="formData.redirect" placeholder="请输入跳转路径" maxlength="50" />
</el-form-item>
</el-form>
@@ -197,7 +116,7 @@
</template>
<script setup lang="ts">
import { reactive, ref, unref, onMounted, toRefs } from "vue";
import { reactive, ref, onMounted, toRefs, defineEmits } from "vue";
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
@@ -240,8 +159,7 @@ const state = reactive({
multiple: true,
queryParams: {} as MenuQueryParam,
menuList: [] as MenuItem[],
total: 0,
dialog: {visible:false} as Dialog,
dialog: { visible: false } as Dialog,
formData: {
parentId: 0,
visible: 1,
@@ -256,16 +174,13 @@ const state = reactive({
menuOptions: [] as Option[],
currentRow: undefined,
isExternalPath: false,
iconSelectVisible: false,
iconSelectVisible: false
});
const {
loading,
single,
multiple,
queryParams,
menuList,
total,
dialog,
formData,
rules,
@@ -307,15 +222,7 @@ function resetQuery() {
handleQuery();
}
function handleSelectionChange(selection: any) {
state.ids = selection.map((item: any) => item.id);
state.single = selection.length !== 1;
state.multiple = !selection.length;
}
function handleRowClick(row: any) {
console.log('handleRowClick',row)
state.currentRow = JSON.parse(JSON.stringify(row));
emit("menuClick", row);
}
@@ -367,15 +274,15 @@ function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
if (state.formData.id) {
updateMenu(state.formData.id, state.formData).then((response) => {
updateMenu(state.formData.id, state.formData).then(() => {
ElMessage.success("修改成功");
state.dialog.visible = false;
cancel();
handleQuery();
});
} else {
addMenu(state.formData).then((response) => {
addMenu(state.formData).then(() => {
ElMessage.success("新增成功");
state.dialog.visible = false;
cancel();
handleQuery();
});
}
@@ -399,29 +306,18 @@ function handleDelete(row: any) {
.catch(() => ElMessage.info("已取消删除"));
}
/**
* 重置表单
*/
function resetForm() {
state.formData.id = undefined;
dataFormRef.value.resetFields();
}
/**
* 取消关闭弹窗
*/
function cancel() {
state.formData.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
resetForm();
}
/**
* 显示图标选择下拉
* 选择图标后事件
*/
function showIconSelect() {
state.iconSelectVisible = true;
}
function selected(name: string) {
state.formData.icon = name;
state.iconSelectVisible = false;

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

@@ -3,44 +3,20 @@
<!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button
type="success"
:icon="Plus"
:disabled="!menuId"
@click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
<el-button type="success" :icon="Plus" :disabled="!menuId" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="权限名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.name" placeholder="权限名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<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
:data="permList"
v-loading="loading"
@selection-change="handleSelectionChange"
border
>
<el-table :data="permList" v-loading="loading" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="40" align="center" />
<el-table-column label="权限名称" prop="name" width="150" />
<el-table-column label="URL权限" align="center">
@@ -51,41 +27,19 @@
<el-table-column label="按钮权限" prop="btnPerm" width="200" />
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click="handleUpdate(scope.row)"
/>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click="handleDelete(scope.row)"
/>
<el-button type="primary" :icon="Edit" circle plain @click="handleUpdate(scope.row)" />
<el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)" />
</template>
</el-table-column>
</el-table>
<!-- 分页工具条 -->
<pagination
v-show="total > 0"
:total="total"
:page="queryParams.pageNum"
:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<pagination v-show="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="120px"
>
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="权限名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入权限名称" />
</el-form-item>
@@ -93,37 +47,21 @@
<el-form-item label="URL权限标识" prop="urlPerm">
<el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
<template #prepend>
<el-select
v-model="urlPerm.serviceName"
style="width: 130px"
placeholder="所属服务"
clearable
>
<el-option
v-for="item in microServiceOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
<el-select v-model="urlPerm.serviceName" style="width: 130px" placeholder="所属服务" clearable>
<el-option v-for="item in microServiceOptions" :key="item.value" :value="item.value"
:label="item.label" />
</el-select>
<el-select
v-model="urlPerm.requestMethod"
style="width: 120px; margin-left: 20px"
placeholder="请求方式"
clearable
>
<el-option
v-for="item in requestMethodOptions"
:key="item.value"
:value="item.value"
:label="item.label"
/>
<el-select v-model="urlPerm.requestMethod" style="width: 120px; margin-left: 20px" placeholder="请求方式"
clearable>
<el-option v-for="item in requestMethodOptions" :key="item.value" :value="item.value"
:label="item.label" />
</el-select>
</template>
</el-input>
<el-link v-show="urlPerm.requestMethod">
{{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName
{{ urlPerm.requestMethod }}:/{{
urlPerm.serviceName
}}{{ urlPerm.requestPath }}
</el-link>
</el-form-item>
@@ -143,22 +81,25 @@
</template>
<script setup lang="ts">
import {
listPermPages,
getPermFormDetail,
addPerm,
updatePerm,
deletePerms,
} from "@/api/system/perm";
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
import {
onMounted,
watch,
reactive,
ref,
getCurrentInstance,
toRefs,
toRefs
} from "vue";
import {
listPermPages,
getPermFormDetail,
addPerm,
updatePerm,
deletePerms
} from "@/api/system/perm";
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import {
Dialog,
@@ -176,7 +117,9 @@ const dataFormRef = ref(ElForm);
const props = defineProps({
menuId: {
type: String,
default: "",
default: () => {
return ''
}
},
});
@@ -216,14 +159,12 @@ const state = reactive({
urlPerm: {
requestMethod: "",
serviceName: "",
requestPath: "",
requestPath: ""
},
});
const {
loading,
ids,
single,
multiple,
permList,
total,
@@ -280,7 +221,7 @@ function handleAdd() {
loadDictOptions();
state.dialog = {
title: "添加权限",
visible: true,
visible: true
};
}
@@ -337,13 +278,13 @@ function submitForm() {
state.formData.menuId = props.menuId;
if (state.formData.id) {
updatePerm(state.formData.id, state.formData).then((response) => {
updatePerm(state.formData.id, state.formData).then(() => {
ElMessage.success("修改成功");
cancel();
handleQuery();
});
} else {
addPerm(state.formData).then((response) => {
addPerm(state.formData).then(() => {
ElMessage.success("新增成功");
cancel();
handleQuery();

38
src/views/system/role/components/Menu.vue
View File

@@ -4,44 +4,26 @@
<el-form-item>
<el-row>
<el-col :span="16">
<el-button
type="success"
plain
:icon="Switch"
@click="toggleExpandAll"
>展开/折叠</el-button
>
<el-button type="success" plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
</el-col>
<el-col :span="8" style="text-align: right">
<el-button type="primary" :icon="Check" @click="handleSubmit"
>提交</el-button
>
<el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<el-tree
ref="menuRef"
v-if="refreshTree"
:default-expanded-keys="expandedKeys"
:default-expand-all="isExpandAll"
:data="menuOptions"
show-checkbox
node-key="id"
empty-text="加载菜单中..."
:check-strictly="checkStrictly"
highlight-current
@node-click="handleNodeClick"
/>
<el-tree ref="menuRef" v-if="refreshTree" :default-expanded-keys="expandedKeys" :default-expand-all="isExpandAll"
:data="menuOptions" show-checkbox node-key="id" empty-text="加载菜单中..." :check-strictly="checkStrictly"
highlight-current @node-click="handleNodeClick" />
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
import { listSelectMenus } from "@/api/system/menu";
import { listRoleMenuIds, updateRoleMenu } from "@/api/system/role";
import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
import { ElTree, ElMessage, ElMessageBox } from "element-plus";
import { ElTree, ElMessage } from "element-plus";
import { Switch, Check } from "@element-plus/icons-vue";
import { Option } from "@/types";
@@ -49,7 +31,9 @@ const emit = defineEmits(["menuClick"]);
const props = defineProps({
role: {
type: Object,
default: {},
default: () => {
return {}
},
},
});
@@ -57,7 +41,7 @@ const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
watch(
() => props.role.id as any,
(newVal, oldVal) => {
() => {
const roleId = props.role.id;
if (roleId) {
state.checkStrictly = true;

59
src/views/system/role/components/Perm.vue
View File

@@ -3,69 +3,54 @@
<div v-if="permissionOptions.length > 0">
<el-row>
<el-col :span="12">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
</el-checkbox>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Check" @click="handleSubmit"
>提交</el-button
>
<el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
</el-col>
</el-row>
<el-row>
<el-col
:span="8"
v-for="item in permissionOptions"
style="margin-top: 20px"
:key="item.id"
>
<el-checkbox
border
v-model="item.checked"
:label="item.id"
:key="item.id"
@change="handleCheckedPermChange"
>
<el-col :span="8" v-for="item in permissionOptions" style="margin-top: 20px" :key="item.id">
<el-checkbox border v-model="item.checked" :label="item.id" :key="item.id" @change="handleCheckedPermChange">
{{ item.name }}
</el-checkbox>
</el-col>
</el-row>
</div>
<div style="text-align: center" v-else>
<el-empty
:description="
!role
? '请选择角色'
: !menu
<el-empty :description="
!role
? '请选择角色'
: !menu
? '请选择菜单'
: '暂无数据，您可在【菜单管理】配置权限数据'
"
></el-empty>
"></el-empty>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, toRefs, watch } from "vue";
import { listPerms } from "@/api/system/perm";
import { listRolePerms, saveRolePerms } from "@/api/system/role";
import { onMounted, reactive, toRefs, watch } from "vue";
import { ElMessage } from "element-plus";
import { Check } from "@element-plus/icons-vue";
import { PermQueryParam, MenuItem } from "@/types";
import { PermQueryParam } from "@/types";
const props = defineProps({
role: {
type: Object,
default: {},
default: () => {
return {}
}
},
menu: {
type: Object,
default: {},
default: () => {
return {}
}
},
});
@@ -86,10 +71,9 @@ const state = reactive({
checkedPerms: [],
});
const { permissionOptions, isIndeterminate, checkAll, checkedPerms } =
toRefs(state);
const { permissionOptions, isIndeterminate, checkAll } = toRefs(state);
function handleCheckAllChange(checked: Boolean) {
function handleCheckAllChange(checked: boolean) {
state.isIndeterminate = false;
if (checked) {
state.permissionOptions.map((item) => (item.checked = true));
@@ -99,7 +83,7 @@ function handleCheckAllChange(checked: Boolean) {
}
}
function handleCheckedPermChange(value: any) {
function handleCheckedPermChange() {
const checkedCount = state.permissionOptions.filter(
(item) => item.checked
).length;
@@ -116,7 +100,7 @@ function loadData() {
state.loading = true;
const params = { menuId: props.menu.id } as PermQueryParam;
listPerms(params).then(({data}) => {
listPerms(params).then(({ data }) => {
state.permissionOptions = data;
listRolePerms(props.role.id, props.menu.id).then((response) => {
const checkedPermIds = response.data;
@@ -150,6 +134,7 @@ function resetData() {
onMounted(() => {
loadData();
});
</script>
<style scoped>

98
src/views/system/role/components/Role.vue
View File

@@ -3,90 +3,41 @@
<!-- 搜索表单 -->
<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-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 prop="name">
<el-input
v-model="queryParams.name"
placeholder="角色名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.name" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery"
>搜索</el-button
>
<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
ref="dataTableRef"
v-loading="loading"
:data="roleList"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
highlight-current-row
border
>
<el-table ref="dataTableRef" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"
@row-click="handleRowClick" highlight-current-row border>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色名称" prop="name" />
<el-table-column label="角色编码" prop="code" />
<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)"
/>
<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-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="handleQuery"
/>
<pagination v-show="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"
@close="cancel"
width="450px"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-dialog :title="dialog.title" v-model="dialog.visible" @close="cancel" width="450px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="角色名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入角色名称" />
</el-form-item>
@@ -96,12 +47,7 @@
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
:min="0"
style="width: 100px"
/>
<el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 100px" />
</el-form-item>
<el-form-item label="状态">
@@ -123,6 +69,7 @@
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, defineEmits } from "vue";
import {
listRolePages,
updateRole,
@@ -130,7 +77,6 @@ import {
addRole,
deleteRoles,
} from "@/api/system/role";
import { onMounted, reactive, ref, toRefs, unref } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
import { RoleFormData, RoleItem, RoleQueryParam } from "@/types";
@@ -166,7 +112,6 @@ const state = reactive({
const {
loading,
single,
multiple,
queryParams,
roleList,
@@ -224,16 +169,16 @@ function submitForm() {
if (valid) {
if (state.formData.id) {
updateRole(state.formData.id as any, state.formData).then(
(response) => {
() => {
ElMessage.success("修改成功");
state.dialog.visible = false;
cancel();
handleQuery();
}
);
} else {
addRole(state.formData).then((response) => {
addRole(state.formData).then(() => {
ElMessage.success("新增成功");
state.dialog.visible = false;
cancel();
handleQuery();
});
}
@@ -244,14 +189,9 @@ function submitForm() {
/**
* 重置表单
*/
function resetForm() {
dataFormRef.value.resetFields();
handleQuery();
}
function cancel() {
resetForm();
state.dialog.visible = false;
dataFormRef.value.resetFields();
}
function handleDelete(row: any) {

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

@@ -7,7 +7,7 @@
<svg-icon color="#333" icon-class="role" />
角色列表
</template>
<role ref="role" @roleClick="handleRoleClick" />
<Role ref="role" @roleClick="handleRoleClick" />
</el-card>
</el-col>
@@ -22,7 +22,7 @@
</el-tag>
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
</template>
<menus ref="menu" @menuClick="handleMenuClick" :role="role" />
<Menus ref="menu" @menuClick="handleMenuClick" :role="role" />
</el-card>
</el-col>

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

@@ -212,7 +212,7 @@ import { listSelectDepartments } from "@/api/system/dept";
import { listRoles } from "@/api/system/role";
// 组件依赖
import { ElMessage, ElMessageBox, ElTree, ElForm, UploadRequestOptions } from "element-plus";
import { ElMessage, ElMessageBox, ElTree, ElForm, UploadFile } from "element-plus";
import {
Search,
Plus,
@@ -234,7 +234,6 @@ import {
Dialog,
UserImportFormData
} from "@/types";
import { assertFile } from "@babel/types";
// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
const deptTreeRef = ref(ElTree); // 部门树
@@ -312,7 +311,6 @@ const state = reactive({
const {
loading,
single,
multiple,
queryParams,
userList,
@@ -444,7 +442,7 @@ function resetPassword(row: { [key: string]: any }) {
ElMessage.success("修改成功，新密码是：" + value);
});
})
.catch(() => { });
.catch(() => {});
}
/**
@@ -489,7 +487,7 @@ function submitForm() {
handleQuery();
});
} else {
addUser(state.formData).then((response: any) => {
addUser(state.formData).then(() => {
ElMessage.success("新增用户成功");
cancel()
handleQuery();
@@ -576,8 +574,7 @@ async function showImportDialog() {
}
function handleExcelChange(file: any, fileList: File[]) {
const fileName = file.name;
function handleExcelChange(file: UploadFile) {
if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
ElMessage.warning('上传Excel只能为xlsx、xls格式');
state.excelFile = undefined