red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化项目

Browse Source
This commit is contained in:
张斌
2025-11-20 09:10:35 +08:00
parent b60a4fe9f4
commit a96be99a54
254 changed files with 40718 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/views/system/dept/component/editDept.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<div class="system-edit-dept-container">
<el-dialog :title="(ruleForm.deptId!==0?'修改':'添加')+'部门'" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="上级部门">
<el-cascader
:options="deptData"
:props="{ checkStrictly: true,emitPath: false, value: 'deptId', label: 'deptName' }"
placeholder="请选择部门"
clearable
class="w100"
v-model="ruleForm.parentId"
>
<template #default="{ node, data }">
<span>{{ data.deptName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="负责人">
<el-input v-model="ruleForm.leader" placeholder="请输入负责人" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="手机号">
<el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="邮箱">
<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排序">
<el-input-number v-model="ruleForm.orderNum" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="部门状态">
<el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.deptId!==0?'修 改':'添 加'}}</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
import {addDept,editDept, getDeptList} from "/@/api/system/dept";
import {ElMessage} from "element-plus";
// 定义接口来定义对象的类型
interface TableDataRow {
deptName: string;
id: number;
parentId:number;
children?: TableDataRow[];
}
interface RuleFormState {
deptId:number;
parentId: number;
deptName: string;
orderNum: number;
leader: string;
phone: string | number;
email: string;
status: number;
}
interface DeptSate {
isShowDialog: boolean;
ruleForm: RuleFormState;
deptData: Array<TableDataRow>;
rules: object;
}
export default defineComponent({
name: 'systemEditDept',
setup(prop,{emit}) {
const {proxy} = getCurrentInstance() as any;
const formRef = ref<HTMLElement | null>(null);
const state = reactive<DeptSate>({
isShowDialog: false,
ruleForm: {
deptId:0,
parentId: 0, // 上级部门
deptName: '', // 部门名称
orderNum:0,
leader: '',
phone: '',
email: '',
status: 1,
},
deptData: [], // 部门数据
rules: {
deptName:[
{required: true, message: "部门名称不能为空", trigger: "blur"},
]
}
});
// 打开弹窗
const openDialog = (row?: RuleFormState|number) => {
resetForm()
getDeptList().then((res:any)=>{
state.deptData = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
});
if(row && typeof row === "object"){
state.ruleForm = row;
}else if(row && typeof row === 'number'){
state.ruleForm.parentId = row
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
// 新增
const onSubmit = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
if(state.ruleForm.deptId===0){
//添加
addDept(state.ruleForm).then(()=>{
ElMessage.success('角色添加成功');
closeDialog(); // 关闭弹窗
emit('deptList')
});
}else{
//修改
editDept(state.ruleForm).then(()=>{
ElMessage.success('角色修改成功');
closeDialog(); // 关闭弹窗
emit('deptList')
});
}
}
});
};
const resetForm = ()=>{
state.ruleForm = {
deptId:0,
parentId: 0, // 上级部门
deptName: '', // 部门名称
orderNum:0,
leader: '',
phone: '',
email: '',
status: 1,
}
};
return {
openDialog,
closeDialog,
onCancel,
onSubmit,
formRef,
...toRefs(state),
};
},
});
</script>

153
src/views/system/dept/index.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<div class="system-dept-container">
<el-card shadow="hover">
<div class="system-dept-search mb15">
<el-form :inline="true">
<el-form-item label="部门名称">
<el-input size="default" v-model="tableData.param.deptName" placeholder="请输入部门名称" class="w-50 m-2" clearable/>
</el-form-item>
<el-form-item label="状态">
<el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.status" clearable>
<el-option label="启用" value="1" />
<el-option label="禁用" value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="deptList">
<el-icon>
<ele-Search />
</el-icon>
查询
</el-button>
<el-button size="default" type="success" class="ml10" @click="onOpenAddDept">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增部门
</el-button>
</el-form-item>
</el-form>
</div>
<el-table
:data="tableData.data"
style="width: 100%"
row-key="deptId"
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="deptName" label="部门名称" show-overflow-tooltip> </el-table-column>
<el-table-column prop="status" label="部门状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenAddDept(scope.row)">新增</el-button>
<el-button size="small" text type="primary" @click="onOpenEditDept(scope.row)">修改</el-button>
<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<EditDept ref="editDeptRef" @deptList="deptList"/>
</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent,getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditDept from '/@/views/system/dept/component/editDept.vue';
import {deleteDept, getDeptList} from "/@/api/system/dept";
// 定义接口来定义对象的类型
interface TableDataRow {
deptId:number;
parentId:number;
deptName:string;
status:number;
orderNum:number;
createdAt:string;
children?:TableDataRow[];
}
interface TableDataState {
tableData: {
data: Array<TableDataRow>;
loading: boolean;
param: {
pageNum: number;
pageSize: number;
deptName:string;
status:string;
};
};
}
export default defineComponent({
name: 'systemDept',
components: { EditDept },
setup() {
const {proxy} = getCurrentInstance() as any;
const editDeptRef = ref();
const state = reactive<TableDataState>({
tableData: {
data: [],
loading: false,
param: {
pageNum: 1,
pageSize: 10,
deptName:'',
status:''
},
},
});
// 初始化表格数据
const initTableData = () => {
deptList();
};
const deptList = ()=>{
getDeptList(state.tableData.param).then((res:any)=>{
state.tableData.data = proxy.handleTree(res.data.deptList??[], "deptId","parentId");
});
};
// 打开新增菜单弹窗
const onOpenAddDept = (row?: TableDataRow) => {
editDeptRef.value.openDialog(row?.deptId);
};
// 打开编辑菜单弹窗
const onOpenEditDept = (row: TableDataRow) => {
editDeptRef.value.openDialog(row);
};
// 删除当前行
const onTabelRowDel = (row: TableDataRow) => {
ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteDept(row.deptId).then(()=>{
ElMessage.success('删除成功');
deptList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
return {
editDeptRef,
deptList,
onOpenAddDept,
onOpenEditDept,
onTabelRowDel,
...toRefs(state),
};
},
});
</script>