初始化项目
This commit is contained in:
183
src/views/system/post/component/editPost.vue
Normal file
183
src/views/system/post/component/editPost.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="system-edit-post-container">
|
||||
<el-dialog v-model="isShowDialog" width="769px">
|
||||
<template #header>
|
||||
<div v-drag="['.system-edit-post-container .el-dialog', '.system-edit-post-container .el-dialog__header']">{{(formData.postId===0?'添加':'修改')+'岗位'}}</div>
|
||||
</template>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input v-model="formData.postName" placeholder="请输入岗位名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input v-model="formData.postCode" placeholder="请输入编码名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位顺序" prop="postSort">
|
||||
<el-input-number v-model="formData.postSort" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位状态" prop="status">
|
||||
<el-switch v-model="formData.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{formData.postId===0?'新 增':'修 改'}}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
|
||||
import {addPost, editPost} from "/@/api/system/post";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
interface DialogRow {
|
||||
postId:number;
|
||||
postCode:string;
|
||||
postName:string;
|
||||
postSort:number;
|
||||
status:number;
|
||||
remark:string;
|
||||
}
|
||||
interface PostState {
|
||||
loading:boolean;
|
||||
isShowDialog: boolean;
|
||||
formData: DialogRow;
|
||||
menuExpand:boolean;
|
||||
menuNodeAll:boolean;
|
||||
menuCheckStrictly:boolean;
|
||||
menuProps: {
|
||||
children: string;
|
||||
label: string;
|
||||
};
|
||||
rules: object;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'systemEditPost',
|
||||
setup(props,{emit}) {
|
||||
const formRef = ref<HTMLElement | null>(null);
|
||||
const menuRef = ref();
|
||||
const state = reactive<PostState>({
|
||||
loading:false,
|
||||
isShowDialog: false,
|
||||
formData: {
|
||||
postId:0,
|
||||
postCode:'',
|
||||
postName:'',
|
||||
postSort:0,
|
||||
status:1,
|
||||
remark:'',
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
postName: [
|
||||
{ required: true, message: "岗位名称不能为空", trigger: "blur" }
|
||||
],
|
||||
postCode: [
|
||||
{ required: true, message: "岗位编码不能为空", trigger: "blur" }
|
||||
],
|
||||
postSort: [
|
||||
{ required: true, message: "岗位顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
menuExpand:false,
|
||||
menuNodeAll:false,
|
||||
menuCheckStrictly:false,
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
},
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (row?: DialogRow) => {
|
||||
resetForm();
|
||||
if(row) {
|
||||
state.formData = 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) {
|
||||
state.loading = true;
|
||||
if(state.formData.postId===0){
|
||||
//添加
|
||||
addPost(state.formData).then(()=>{
|
||||
ElMessage.success('岗位添加成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('getPostList')
|
||||
}).finally(()=>{
|
||||
state.loading = false;
|
||||
})
|
||||
}else{
|
||||
//修改
|
||||
editPost(state.formData).then(()=>{
|
||||
ElMessage.success('岗位修改成功');
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('getPostList')
|
||||
}).finally(()=>{
|
||||
state.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const resetForm = ()=>{
|
||||
state.menuCheckStrictly=false;
|
||||
state.menuExpand = false;
|
||||
state.menuNodeAll = false;
|
||||
state.formData = {
|
||||
postId:0,
|
||||
postCode:'',
|
||||
postName:'',
|
||||
postSort:0,
|
||||
status:1,
|
||||
remark:'',
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
menuRef,
|
||||
formRef,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7!important;
|
||||
background: #fff none!important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.system-edit-post-container {
|
||||
.menu-data-tree {
|
||||
border: var(--el-input-border, var(--el-border-base));
|
||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
200
src/views/system/post/index.vue
Normal file
200
src/views/system/post/index.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="system-post-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="system-user-search mb15">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="岗位名称">
|
||||
<el-input size="default" v-model="tableData.param.postName" placeholder="请输入岗位名称" class="w-50 m-2" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码">
|
||||
<el-input size="default" v-model="tableData.param.postCode" 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="postList">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddPost">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增岗位
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
删除岗位
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="postCode" label="岗位编码" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="postName" label="岗位名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="postSort" 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="remark" 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="onOpenEditPost(scope.row)">修改</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="tableData.total>0"
|
||||
:total="tableData.total"
|
||||
v-model:page="tableData.param.pageNum"
|
||||
v-model:limit="tableData.param.pageSize"
|
||||
@pagination="postList"
|
||||
/>
|
||||
</el-card>
|
||||
<EditPost ref="editPostRef" @getPostList="postList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {toRefs, reactive, onMounted, ref, defineComponent, toRaw} from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import EditPost from '/@/views/system/post/component/editPost.vue';
|
||||
import {deletePost, getPostList} from "/@/api/system/post";
|
||||
// 定义接口来定义对象的类型
|
||||
interface TableData {
|
||||
postId:number;
|
||||
postCode:string;
|
||||
postName:string;
|
||||
postSort:number;
|
||||
status:number;
|
||||
remark:string;
|
||||
createdAt:string;
|
||||
}
|
||||
interface TableDataState {
|
||||
ids:number[];
|
||||
tableData: {
|
||||
data: Array<TableData>;
|
||||
total: number;
|
||||
loading: boolean;
|
||||
param: {
|
||||
postName:string;
|
||||
status:string;
|
||||
postCode:string;
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'apiV1SystemPostList',
|
||||
components: {EditPost},
|
||||
setup() {
|
||||
const addPostRef = ref();
|
||||
const editPostRef = ref();
|
||||
const state = reactive<TableDataState>({
|
||||
ids:[],
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
postName:'',
|
||||
status:'',
|
||||
postCode:'',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const initTableData = () => {
|
||||
postList()
|
||||
};
|
||||
const postList = ()=>{
|
||||
getPostList(state.tableData.param).then(res=>{
|
||||
state.tableData.data = res.data.postList??[];
|
||||
state.tableData.total = res.data.total;
|
||||
})
|
||||
};
|
||||
// 打开新增岗位弹窗
|
||||
const onOpenAddPost = () => {
|
||||
editPostRef.value.openDialog();
|
||||
};
|
||||
// 打开修改岗位弹窗
|
||||
const onOpenEditPost = (row: Object) => {
|
||||
editPostRef.value.openDialog(toRaw(row));
|
||||
};
|
||||
// 删除岗位
|
||||
const onRowDel = (row: any) => {
|
||||
let msg = '你确定要删除所选岗位？';
|
||||
let ids:number[] = [] ;
|
||||
if(row){
|
||||
msg = `此操作将永久删除岗位：“${row.postName}”，是否继续?`
|
||||
ids = [row.postId]
|
||||
}else{
|
||||
ids = state.ids
|
||||
}
|
||||
if(ids.length===0){
|
||||
ElMessage.error('请选择要删除的数据。');
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(msg, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
deletePost(ids).then(()=>{
|
||||
ElMessage.success('删除成功');
|
||||
postList();
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initTableData();
|
||||
});
|
||||
// 多选框选中数据
|
||||
const handleSelectionChange = (selection:Array<TableData>)=> {
|
||||
state.ids = selection.map(item => item.postId)
|
||||
};
|
||||
return {
|
||||
addPostRef,
|
||||
editPostRef,
|
||||
onOpenAddPost,
|
||||
onOpenEditPost,
|
||||
onRowDel,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
postList,
|
||||
handleSelectionChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user