向文可
3 years ago
parent
c4cbcc91d7
commit
0837259f96
@ -0,0 +1,29 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
export const search = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/uc/menu/tree',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const create = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/uc/menu',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const update = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/uc/menu/' + data.id,
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
export const remove = (idList) => {
|
||||||
|
return request({
|
||||||
|
url: '/uc/menu',
|
||||||
|
method: 'delete',
|
||||||
|
params: { idList },
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
export const search = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/uc/system',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
import * as api from '@/api/permission/menu.js';
|
||||||
|
import * as systemAPI from '@/api/permission/system.js';
|
||||||
|
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||||
|
const state = () => ({
|
||||||
|
code: 'MenuManagement',
|
||||||
|
condition: {},
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
opts: {
|
||||||
|
init: false,
|
||||||
|
system: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const getters = {};
|
||||||
|
const mutations = {
|
||||||
|
setCondition: (state, data) => (state.condition = data),
|
||||||
|
setList: (state, data) => (state.list = data),
|
||||||
|
setTotal: (state, data) => (state.total = data),
|
||||||
|
setOpts: (state, data) => (state.opts = data),
|
||||||
|
};
|
||||||
|
const actions = {
|
||||||
|
search: async ({ state, commit }) => {
|
||||||
|
let res = await api.search(state.condition);
|
||||||
|
commit('setList', res || []);
|
||||||
|
if (!res) {
|
||||||
|
ElMessage.error('查询失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
load: async ({ state, commit }) => {
|
||||||
|
commit('setOpts', {
|
||||||
|
...state.opts,
|
||||||
|
init: true,
|
||||||
|
system: await systemAPI.search(),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
detail: async (context, id) => {
|
||||||
|
let res = await api.detail(id);
|
||||||
|
if (!res) {
|
||||||
|
ElMessage.error('加载详情失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
save: async ({ dispatch }, data) => {
|
||||||
|
let save = data.id ? api.update : api.create;
|
||||||
|
let res = await save(data);
|
||||||
|
if (res) {
|
||||||
|
ElMessage.success('保存成功');
|
||||||
|
dispatch('search');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('保存失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
remove: async ({ dispatch }, idList) => {
|
||||||
|
if (!idList.length) {
|
||||||
|
ElMessage.warning('请选择要删除的数据');
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
|
||||||
|
let res = await api.remove(idList.join(','));
|
||||||
|
if (res) {
|
||||||
|
ElMessage.success('删除成功');
|
||||||
|
dispatch('search');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('删除失败');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消删除', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
state,
|
||||||
|
getters,
|
||||||
|
mutations,
|
||||||
|
actions,
|
||||||
|
};
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-container">
|
||||||
|
<div class="header">
|
||||||
|
<el-form inline :model="state.condition">
|
||||||
|
<el-form-item label="系统" prop="systemId">
|
||||||
|
<el-select
|
||||||
|
v-model="state.condition.systemId"
|
||||||
|
:config="{ label: 'systemName', value: 'systemCode' }"
|
||||||
|
:opts="opts.system"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="aside">
|
||||||
|
<div class="aside-header">
|
||||||
|
<div class="aside-title">菜单</div>
|
||||||
|
<div class="aside-action">
|
||||||
|
<el-button type="text" @click="handleCreate">新增</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aside-body">
|
||||||
|
<el-tree
|
||||||
|
:data="list"
|
||||||
|
default-expand-all
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
highlight-current
|
||||||
|
node-key="id"
|
||||||
|
:props="{
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
children: 'childDepartment',
|
||||||
|
disabled: (data) => !data.isEnable,
|
||||||
|
}"
|
||||||
|
@current-change="(data) => (state.condition2.departmentId = data.id)"
|
||||||
|
>
|
||||||
|
<template #default="{ data, node }">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="name">
|
||||||
|
{{ data.name }}
|
||||||
|
</div>
|
||||||
|
<div v-if="node.level > 1" class="btns">
|
||||||
|
<el-button type="text" @click.stop="handleCreate(null, data)">
|
||||||
|
<el-icon name="Plus" />
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" @click.stop="handleCreate(data)">
|
||||||
|
<el-icon name="Edit" />
|
||||||
|
</el-button>
|
||||||
|
<el-switch v-model="data.isEnable" @click.stop="handleEnabled(data)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
<el-dialog
|
||||||
|
v-model="formState.formVisible"
|
||||||
|
:title="(formState.form.id ? '编辑' : '新增') + '部门'"
|
||||||
|
width="300px"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="refsForm"
|
||||||
|
v-loading="formState.submitting"
|
||||||
|
label-width="100px"
|
||||||
|
:model="formState.form"
|
||||||
|
:rules="formState.rules"
|
||||||
|
>
|
||||||
|
<el-form-item label="上级组织" prop="parentId">
|
||||||
|
<el-cascader
|
||||||
|
v-model="formState.form.parentId"
|
||||||
|
:options="list"
|
||||||
|
:props="{
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
children: 'childDepartment',
|
||||||
|
disabled: (data) => !data.isEnable,
|
||||||
|
checkStrictly: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
emitPath: false,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="组织名称" prop="name">
|
||||||
|
<el-input v-model="formState.form.name" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="handleCancel">取消</el-button>
|
||||||
|
<el-button :loading="formState.submitting" type="primary" @click="handleSave">
|
||||||
|
保存
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import ElButton from '@/components/extra/ElButton.vue';
|
||||||
|
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
||||||
|
const store = useStore();
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const opts = computed(() => store.state.menu.opts);
|
||||||
|
if (!unref(opts).init) {
|
||||||
|
store.dispatch('menu/load');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询树结构 */
|
||||||
|
const loading = ref(false);
|
||||||
|
const list = computed(() => _.cloneDeep(store.state.menu.list));
|
||||||
|
const state = reactive({
|
||||||
|
condition: { systemId: null },
|
||||||
|
});
|
||||||
|
const handleSearch = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('menu/search');
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('dept/setCondition', _.cloneDeep(value));
|
||||||
|
handleSearch();
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
/* 表单 */
|
||||||
|
const refsForm = ref(null);
|
||||||
|
const formState = reactive({
|
||||||
|
formVisible: false,
|
||||||
|
submitting: false,
|
||||||
|
form: {
|
||||||
|
id: null,
|
||||||
|
parentId: null,
|
||||||
|
name: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [{ required: true, message: '请输入组织名称' }],
|
||||||
|
parentId: [{ required: true, message: '请选择组织类型' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const handleCreate = (row, parent) => {
|
||||||
|
formState.formVisible = true;
|
||||||
|
Object.assign(
|
||||||
|
formState.form,
|
||||||
|
row || {
|
||||||
|
id: null,
|
||||||
|
parentId: null,
|
||||||
|
name: null,
|
||||||
|
isEnable: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (parent) {
|
||||||
|
formState.form.parentId = parent.id;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleCancel = () => {
|
||||||
|
formState.formVisible = false;
|
||||||
|
};
|
||||||
|
const handleEnabled = (row) => {
|
||||||
|
store.dispatch('dept/save', row);
|
||||||
|
};
|
||||||
|
const handleSave = async () => {
|
||||||
|
formState.submitting = true;
|
||||||
|
try {
|
||||||
|
await proxy.$validate(refsForm);
|
||||||
|
let data = _.cloneDeep(formState.form);
|
||||||
|
await store.dispatch('dept/save', data);
|
||||||
|
formState.formVisible = false;
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消保存', e);
|
||||||
|
}
|
||||||
|
formState.submitting = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.list-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
.aside {
|
||||||
|
margin-right: @layout-space;
|
||||||
|
.aside-header {
|
||||||
|
min-width: max-content;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.aside-title {
|
||||||
|
font-size: @layout-h3;
|
||||||
|
}
|
||||||
|
.aside-action {
|
||||||
|
margin-left: @layout-space;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.aside-body {
|
||||||
|
:deep(.el-tree) {
|
||||||
|
.flex {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.btns {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: @layout-space-super;
|
||||||
|
.el-button {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
+ .el-button {
|
||||||
|
margin-left: @layout-space-small;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-switch {
|
||||||
|
height: 100%;
|
||||||
|
transform: scale(0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue