admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 部门管理新增用户列表

Browse Source
This commit is contained in:
sheng
2023-07-28 14:37:42 +08:00
parent a40dc9afb1
commit c26abef364
10 changed files with 586 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
web/src/views/system/dept/index.vue
View File

@@ -3,71 +3,14 @@
<el-row class="dept-el-row">
<el-col :span="6">
<div class="dept-box dept-left">
<TreeCom :treeData="treeData" @setFormInitData="setFormInitData" @updateDept="handleUpdateMenu"
<TreeCom :treeData="deptTreeData" @treeClick="handleTreeClick" @updateDept="handleUpdateMenu"
@deleteDept="handleDeleteMenu" />
</div>
</el-col>
<el-col :span="18">
<div class="dept-box dept-form">
<el-form ref="formRef" :rules="rules" :model="deptFormData" label-width="120px" label-position="right">
<el-divider>
<strong>部门配置</strong>
</el-divider>
<el-row>
<el-col :span="10">
<el-form-item label="部门ID" prop="id">
<el-input v-model="deptFormData.id" disabled />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="父级部门ID" prop="parent">
<el-input v-model="deptFormData.parent" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item required label="部门名称" prop="name">
<el-input v-model="deptFormData.name" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item required label="部门标识" prop="key">
<el-input v-model="deptFormData.key" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="负责人" prop="owner">
<el-input v-model="deptFormData.owner" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="deptFormData.phone" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="邮箱" prop="email">
<el-input v-model="deptFormData.email" />
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="排序" prop="sort">
<el-input-number v-model="deptFormData.sort" controls-position="right" />
</el-form-item>
</el-col>
<el-col class="center">
<el-divider>
<el-button @click="handleUpdateMenu('update')" type="primary" round
:disabled="!deptFormData.id || deptBtnLoading">保存</el-button>
<el-button @click="handleUpdateMenu('create')" type="primary" round :disabled="deptBtnLoading">新建
</el-button>
<el-button @click="handleDeleteMenu" type="primary" round>删除部门
</el-button>
</el-divider>
</el-col>
</el-row>
</el-form>
<div class="dept-box dept-table">
<DeptUserCom ref="deptUserRef" />
</div>
</el-col>
</el-row>
@@ -80,36 +23,20 @@
</template>
<script lang="ts" setup name="dept">
import { ref, onMounted, reactive } from 'vue';
import { ref, onMounted } from 'vue';
import XEUtils from 'xe-utils';
import { ElForm, ElMessageBox, FormRules } from 'element-plus';
import TreeCom from './components/TreeCom.vue'
import DeptFormCom from './components/DeptFormCom.vue'
import { GetList, AddObj, UpdateObj, DelObj } from './api';
import { successMessage } from '../../../utils/message';
import { APIResponseData, DeptFormDataType, TreeItemType } from './types';
import { ElMessageBox } from 'element-plus';
import TreeCom from './components/TreeCom.vue';
import DeptFormCom from './components/DeptFormCom.vue';
import DeptUserCom from './components/DeptUserCom/index.vue';
import { GetList, DelObj } from './api';
import { successNotification } from '../../../utils/message';
import { APIResponseData, TreeItemType } from './types';
let treeData = ref([]);
let deptFormData = reactive<DeptFormDataType>({
id: '',
key: '',
parent: '',
name: '',
owner: '',
phone: '',
email: '',
sort: 0,
is_catalog: true,
})
let deptBtnLoading = ref(false)
let deptTreeData = ref([]);
let drawerVisible = ref(false)
let drawerFormData = ref<Partial<TreeItemType>>({})
const formRef = ref<InstanceType<typeof ElForm>>();
const rules = reactive<FormRules>({
name: [{ required: true, message: '部门名称必填', trigger: 'blur' }],
key: [{ required: true, message: '部门标识必填', trigger: 'blur' }],
});
let deptUserRef = ref<InstanceType<typeof DeptUserCom> | null>(null)
const getData = async () => {
let res: APIResponseData = await GetList({});
@@ -121,21 +48,20 @@ const getData = async () => {
strict: true,
});
treeData.value = result;
deptTreeData.value = result;
}
};
const setFormInitData = (data: DeptFormDataType) => {
deptFormData.id = data.id;
deptFormData.key = data.key;
deptFormData.name = data.name;
deptFormData.parent = data.parent;
deptFormData.owner = data.owner;
deptFormData.phone = data.phone;
deptFormData.email = data.email;
deptFormData.sort = data.sort;
};
/**
* 部门的点击事件
*/
const handleTreeClick = (id: string) => {
deptUserRef.value?.handleDoRefreshUser(id)
}
/**
* 部门的删除事件
*/
const handleDeleteMenu = (id: string, callback: Function) => {
ElMessageBox.confirm(
'您确认删除该部门吗?',
@@ -149,37 +75,21 @@ const handleDeleteMenu = (id: string, callback: Function) => {
const res: APIResponseData = await DelObj(id)
callback()
if (res?.code === 2000) {
successMessage(res.msg as string);
successNotification(res.msg as string);
getData();
deptUserRef.value?.handleDoRefreshUser('')
}
})
};
/**
* 部门的 新增 or 编辑 事件
*/
const handleUpdateMenu = (type: string, record?: TreeItemType) => {
if (type === 'update' && record) {
drawerFormData.value = record
}
drawerVisible.value = true
//form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
/* formRef.value?.validate(async (valid) => {
if (!valid) return
try {
let res;
deptBtnLoading.value = true
if (type === 'update') {
res = await UpdateObj(deptFormData);
} else if (type === 'create') {
res = await AddObj(deptFormData)
}
if (res?.code === 2000) {
successMessage(res.msg as string);
getData();
}
} finally {
type === 'create' && formRef.value?.resetFields();
deptBtnLoading.value = false
}
}); */
};
const handleDrawerClose = (type?: string) => {
@@ -223,12 +133,8 @@ onMounted(() => {
}
}
.dept-form {
.dept-table {
border-radius: 8px 0 0 8px;
margin-left: 10px;
}
.font-normal {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
</style>