feat:新增岗位管理
This commit is contained in:
chenchun
57
Yi.Pure.Vue3/src/views/system/post/form.vue
Normal file
57
Yi.Pure.Vue3/src/views/system/post/form.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { FormProps } from "./utils/types";
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
id: "",
|
||||
postName: "",
|
||||
postCode: "",
|
||||
remark: "",
|
||||
orderNum: 0
|
||||
})
|
||||
});
|
||||
|
||||
const ruleFormRef = ref();
|
||||
const newFormInline = ref(props.formInline);
|
||||
|
||||
function getRef() {
|
||||
return ruleFormRef.value;
|
||||
}
|
||||
|
||||
defineExpose({ getRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="postName">
|
||||
<el-input
|
||||
v-model="newFormInline.postName"
|
||||
clearable
|
||||
placeholder="请输入角色名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色标识" prop="postCode">
|
||||
<el-input
|
||||
v-model="newFormInline.postCode"
|
||||
clearable
|
||||
placeholder="请输入角色标识"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="newFormInline.remark"
|
||||
placeholder="请输入备注信息"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
293
Yi.Pure.Vue3/src/views/system/post/index.vue
Normal file
293
Yi.Pure.Vue3/src/views/system/post/index.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<script setup lang="ts">
|
||||
import { usePost } from "./utils/hook";
|
||||
import { ref, computed, nextTick, onMounted } from "vue";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import {
|
||||
delay,
|
||||
subBefore,
|
||||
deviceDetection,
|
||||
useResizeObserver
|
||||
} from "@pureadmin/utils";
|
||||
|
||||
// import Database from "@iconify-icons/ri/database-2-line";
|
||||
// import More from "@iconify-icons/ep/more-filled";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import Menu from "@iconify-icons/ep/menu";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemPost"
|
||||
});
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return [
|
||||
"w-[22px]",
|
||||
"h-[22px]",
|
||||
"flex",
|
||||
"justify-center",
|
||||
"items-center",
|
||||
"outline-none",
|
||||
"rounded-[4px]",
|
||||
"cursor-pointer",
|
||||
"transition-colors",
|
||||
"hover:bg-[#0000000f]",
|
||||
"dark:hover:bg-[#ffffff1f]",
|
||||
"dark:hover:text-[#ffffffd9]"
|
||||
];
|
||||
});
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
const contentRef = ref();
|
||||
const treeHeight = ref();
|
||||
|
||||
const {
|
||||
form,
|
||||
isShow,
|
||||
curRow,
|
||||
loading,
|
||||
columns,
|
||||
rowStyle,
|
||||
dataList,
|
||||
treeData,
|
||||
treeProps,
|
||||
isLinkage,
|
||||
pagination,
|
||||
isExpandAll,
|
||||
isSelectAll,
|
||||
treeSearchValue,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleMenu,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
filterMethod,
|
||||
transformI18n,
|
||||
onQueryChanged,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = usePost();
|
||||
|
||||
onMounted(() => {
|
||||
useResizeObserver(contentRef, async () => {
|
||||
await nextTick();
|
||||
delay(60).then(() => {
|
||||
treeHeight.value = parseFloat(
|
||||
subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="岗位名称：" prop="postName">
|
||||
<el-input
|
||||
v-model="form.postName"
|
||||
placeholder="请输入岗位名称"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位标识：" prop="postCode">
|
||||
<el-input
|
||||
v-model="form.postCode"
|
||||
placeholder="请输入岗位标识"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="state">
|
||||
<el-select
|
||||
v-model="form.state"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="已启用" :value="true" />
|
||||
<el-option label="已停用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('ri:search-line')"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div
|
||||
ref="contentRef"
|
||||
:class="['flex', deviceDetection() ? 'flex-wrap' : '']"
|
||||
>
|
||||
<PureTableBar
|
||||
:class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
|
||||
style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
|
||||
title="岗位管理"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
新增岗位
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:row-style="rowStyle"
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
@page-size-change="handleSizeChange"
|
||||
@page-current-change="handleCurrentChange"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('修改', row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除岗位名称为${row.postName}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
|
||||
<div
|
||||
v-if="isShow"
|
||||
class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
|
||||
>
|
||||
<div class="flex justify-between w-full px-3 pt-5 pb-4">
|
||||
<div class="flex">
|
||||
<span :class="iconClass">
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: '关闭'
|
||||
}"
|
||||
class="dark:text-white"
|
||||
width="18px"
|
||||
height="18px"
|
||||
:icon="Close"
|
||||
@click="handleMenu"
|
||||
/>
|
||||
</span>
|
||||
<span :class="[iconClass, 'ml-2']">
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: '保存菜单权限'
|
||||
}"
|
||||
class="dark:text-white"
|
||||
width="18px"
|
||||
height="18px"
|
||||
:icon="Check"
|
||||
@click="handleSave"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<p class="font-bold truncate">
|
||||
菜单权限
|
||||
{{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
|
||||
</p>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="treeSearchValue"
|
||||
placeholder="请输入菜单进行搜索"
|
||||
class="mb-1"
|
||||
clearable
|
||||
@input="onQueryChanged"
|
||||
/>
|
||||
<div class="flex flex-wrap">
|
||||
<el-checkbox v-model="isExpandAll" label="展开/折叠" />
|
||||
<el-checkbox v-model="isSelectAll" label="全选/全不选" />
|
||||
<el-checkbox v-model="isLinkage" label="父子联动" />
|
||||
</div>
|
||||
<el-tree-v2
|
||||
ref="treeRef"
|
||||
show-checkbox
|
||||
:data="treeData"
|
||||
:props="treeProps"
|
||||
:height="treeHeight"
|
||||
:check-strictly="!isLinkage"
|
||||
:filter-method="filterMethod"
|
||||
>
|
||||
<template #default="{ node }">
|
||||
<span>{{ transformI18n(node.label) }}</span>
|
||||
</template>
|
||||
</el-tree-v2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px 24px 0 !important;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
Yi.Pure.Vue3/src/views/system/post/utils/hook.tsx
Normal file
298
Yi.Pure.Vue3/src/views/system/post/utils/hook.tsx
Normal file
@@ -0,0 +1,298 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../form.vue";
|
||||
import {message} from "@/utils/message";
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import {usePublicHooks} from "../../hooks";
|
||||
import {transformI18n} from "@/plugins/i18n";
|
||||
import {addDialog} from "@/components/ReDialog";
|
||||
import type {FormItemProps} from "../utils/types";
|
||||
import type {PaginationProps} from "@pureadmin/table";
|
||||
import {getKeyList, deviceDetection} from "@pureadmin/utils";
|
||||
import {
|
||||
getPostList,
|
||||
addPost,
|
||||
updatePost,
|
||||
delPost,
|
||||
getPost,
|
||||
updatePostStatus
|
||||
} from "@/api/system/post"
|
||||
|
||||
import {
|
||||
type Ref,
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
h,
|
||||
toRaw,
|
||||
watch,
|
||||
nextTick
|
||||
} from "vue";
|
||||
|
||||
export function usePost(treeRef: Ref) {
|
||||
const form = reactive({
|
||||
postName: "",
|
||||
postCode: "",
|
||||
state: true,
|
||||
skipCount: 1,
|
||||
maxResultCount: 10
|
||||
});
|
||||
const curRow = ref();
|
||||
const formRef = ref();
|
||||
const dataList = ref([]);
|
||||
const treeIds = ref([]);
|
||||
const treeData = ref([]);
|
||||
const isShow = ref(false);
|
||||
const loading = ref(true);
|
||||
const isLinkage = ref(false);
|
||||
const treeSearchValue = ref();
|
||||
const switchLoadMap = ref({});
|
||||
const isExpandAll = ref(false);
|
||||
const isSelectAll = ref(false);
|
||||
const {switchStyle} = usePublicHooks();
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "岗位编号",
|
||||
prop: "id"
|
||||
},
|
||||
{
|
||||
label: "岗位名称",
|
||||
prop: "postName"
|
||||
},
|
||||
{
|
||||
label: "岗位标识",
|
||||
prop: "postCode"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
loading={switchLoadMap.value[scope.index]?.loading}
|
||||
v-model={scope.row.state}
|
||||
active-value={true}
|
||||
inactive-value={false}
|
||||
active-text="已启用"
|
||||
inactive-text="已停用"
|
||||
inline-prompt
|
||||
style={switchStyle.value}
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
),
|
||||
minWidth: 90
|
||||
},
|
||||
{label:"排序",prop:"orderNum"},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
prop: "creationTime",
|
||||
minWidth: 160,
|
||||
formatter: ({creationTime}) =>
|
||||
dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 210,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
async function onChange({row, index}) {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>${
|
||||
row.state === false ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.roleName
|
||||
}</strong>吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: true
|
||||
}
|
||||
);
|
||||
|
||||
await updatePostStatus(row.id, row.state);
|
||||
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message(`已${row.state === false ? "停用" : "启用"}${row.roleName}`, {
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
row.state === false ? (row.state = true) : (row.state = false);
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(row) {
|
||||
await delPost([row.id]);
|
||||
message(`您删除了角色名称为${row.roleName}的这条数据`, {type: "success"});
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
form.maxResultCount = val;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
form.skipCount = val;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const {data} = await getPostList(toRaw(form));
|
||||
dataList.value = data.items;
|
||||
pagination.total = data.totalCount;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
async function openDialog(title = "新增", row?: FormItemProps) {
|
||||
let data: any = null;
|
||||
if (title == "修改") {
|
||||
data = (await getPost(row?.id)).data;
|
||||
}
|
||||
addDialog({
|
||||
title: `${title}岗位`,
|
||||
props: {
|
||||
formInline: {
|
||||
postName: row?.postName ?? "",
|
||||
postCode: row?.postCode ?? "",
|
||||
remark: row?.remark ?? "",
|
||||
orderNum: data?.orderNum ?? 0,
|
||||
}
|
||||
},
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, {ref: formRef}),
|
||||
beforeSure: (done, {options}) => {
|
||||
const FormRef = formRef.value.getRef();
|
||||
const curData = options.props.formInline as FormItemProps;
|
||||
|
||||
function chores() {
|
||||
message(`您${title}了岗位名称为${curData.postName}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
done(); // 关闭弹框
|
||||
onSearch(); // 刷新表格数据
|
||||
}
|
||||
|
||||
FormRef.validate(async valid => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
// 实际开发先调用新增接口，再进行下面操作
|
||||
await addPost(curData);
|
||||
chores();
|
||||
} else {
|
||||
// 实际开发先调用修改接口，再进行下面操作
|
||||
await updatePost(row?.id, curData);
|
||||
chores();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 高亮当前权限选中行 */
|
||||
function rowStyle({row: {id}}) {
|
||||
return {
|
||||
cursor: "pointer",
|
||||
background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
|
||||
};
|
||||
}
|
||||
|
||||
/** 数据权限 可自行开发 */
|
||||
// function handleDatabase() {}
|
||||
|
||||
const onQueryChanged = (query: string) => {
|
||||
treeRef.value!.filter(query);
|
||||
};
|
||||
|
||||
const filterMethod = (query: string, node) => {
|
||||
return transformI18n(node.title)!.includes(query);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
watch(isExpandAll, val => {
|
||||
val
|
||||
? treeRef.value.setExpandedKeys(treeIds.value)
|
||||
: treeRef.value.setExpandedKeys([]);
|
||||
});
|
||||
|
||||
watch(isSelectAll, val => {
|
||||
val
|
||||
? treeRef.value.setCheckedKeys(treeIds.value)
|
||||
: treeRef.value.setCheckedKeys([]);
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
isShow,
|
||||
curRow,
|
||||
loading,
|
||||
columns,
|
||||
rowStyle,
|
||||
dataList,
|
||||
treeData,
|
||||
isLinkage,
|
||||
pagination,
|
||||
isExpandAll,
|
||||
isSelectAll,
|
||||
treeSearchValue,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete,
|
||||
filterMethod,
|
||||
transformI18n,
|
||||
onQueryChanged,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
8
Yi.Pure.Vue3/src/views/system/post/utils/rule.ts
Normal file
8
Yi.Pure.Vue3/src/views/system/post/utils/rule.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
postName: [{ required: true, message: "岗位名称为必填项", trigger: "blur" }],
|
||||
postCode: [{ required: true, message: "岗位标识为必填项", trigger: "blur" }]
|
||||
});
|
||||
18
Yi.Pure.Vue3/src/views/system/post/utils/types.ts
Normal file
18
Yi.Pure.Vue3/src/views/system/post/utils/types.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
|
||||
|
||||
interface FormItemProps {
|
||||
id?: string;
|
||||
/** 角色名称 */
|
||||
postName: string;
|
||||
/** 角色编号 */
|
||||
postCode: string;
|
||||
/** 备注 */
|
||||
remark: string;
|
||||
orderNum: number;
|
||||
|
||||
}
|
||||
interface FormProps {
|
||||
formInline: FormItemProps;
|
||||
}
|
||||
|
||||
export type { FormItemProps, FormProps };
|
||||
Reference in New Issue
Block a user