tt/vue3-element-admin
1
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

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>