mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-11-09 12:13:37 +08:00
perf: 系统管理
This commit is contained in:
pan
80
src/views/system/job/form.vue
Normal file
80
src/views/system/job/form.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { formRules } from "./utils/rule";
|
||||
import { FormProps } from "./utils/types";
|
||||
import { usePublicHooks } from "../hooks";
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
formInline: () => ({
|
||||
higherDeptOptions: [],
|
||||
jobSort: 0,
|
||||
id: 0,
|
||||
deptSort: 0,
|
||||
enabled: false,
|
||||
name: "",
|
||||
principal: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
version: 0,
|
||||
sort: 0,
|
||||
remark: ""
|
||||
})
|
||||
});
|
||||
|
||||
const ruleFormRef = ref();
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const newFormInline = ref(props.formInline);
|
||||
|
||||
function getRef() {
|
||||
return ruleFormRef.value;
|
||||
}
|
||||
onMounted(() => {
|
||||
// 在这里编写页面加载后要执行的代码
|
||||
});
|
||||
defineExpose({ getRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="newFormInline"
|
||||
:rules="formRules"
|
||||
label-width="82px"
|
||||
>
|
||||
<el-row :gutter="30">
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="岗位名称" prop="name">
|
||||
<el-input
|
||||
v-model="newFormInline.name"
|
||||
clearable
|
||||
placeholder="请输入岗位名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number
|
||||
v-model="newFormInline.jobSort"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
<re-col :value="12" :xs="24" :sm="24">
|
||||
<el-form-item label="岗位状态">
|
||||
<el-switch
|
||||
v-model="newFormInline.enabled"
|
||||
inline-prompt
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
:style="switchStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
229
src/views/system/job/index.vue
Normal file
229
src/views/system/job/index.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useDept } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import datePicker from "@/views/components/date-picker.vue";
|
||||
import * as Job from "@/api/system/job";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
defineOptions({
|
||||
name: "Dept"
|
||||
});
|
||||
|
||||
const handleSelectionChange = val => {
|
||||
multipleSelection.value = val;
|
||||
if (val != null && val.length > 0) {
|
||||
value2.value = false;
|
||||
} else {
|
||||
value2.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
async function deleteAll() {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>删除所选的</strong><strong style='color:var(--el-color-primary)'>${multipleSelection.value.length}</strong>个岗位吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
Job.del(multipleSelection.value.map(dept => dept.id)).then(() => {
|
||||
message("已删除所选的岗位", {
|
||||
type: "success"
|
||||
});
|
||||
onSearch();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
const exportClick = async () => {
|
||||
const response: Blob = await Job.download(null);
|
||||
const a = document.createElement("a");
|
||||
const url = window.URL.createObjectURL(response); // 创建媒体流 url ，详细了解可自己查 URL.createObjectURL（推荐 MDN ）
|
||||
|
||||
a.href = url;
|
||||
a.style.display = "none";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.parentNode.removeChild(a);
|
||||
window.URL.revokeObjectURL(url); // 删除创建的媒体流 url 对象
|
||||
message("导出成功", {
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
const value2 = ref(true);
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
multipleSelection,
|
||||
pagination,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange
|
||||
} = useDept();
|
||||
</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]"
|
||||
>
|
||||
<el-form-item label="岗位名称：" prop="name">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入岗位名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select
|
||||
v-model="form.enabled"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="停用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="createTime">
|
||||
<datePicker v-model="form.createTime" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('search')"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="岗位列表"
|
||||
:columns="columns"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #add>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog()"
|
||||
>
|
||||
新增岗位
|
||||
</el-button>
|
||||
</template>
|
||||
<template #delete>
|
||||
<el-button
|
||||
type="danger"
|
||||
:disabled="value2"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="deleteAll()"
|
||||
>
|
||||
删除岗位
|
||||
</el-button>
|
||||
</template>
|
||||
<template #export>
|
||||
<el-button
|
||||
type="success"
|
||||
:icon="useRenderIcon('solar:upload-bold')"
|
||||
@click="exportClick()"
|
||||
>
|
||||
导出数据
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
adaptive
|
||||
:adaptiveConfig="{ offsetBottom: 32 }"
|
||||
align-whole="center"
|
||||
row-key="id"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
default-expand-all
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:columns="dynamicColumns"
|
||||
:data="dataList"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
: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.name}的这条数据`"
|
||||
@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>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
271
src/views/system/job/utils/hook.tsx
Normal file
271
src/views/system/job/utils/hook.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../form.vue";
|
||||
import { message } from "@/utils/message";
|
||||
import * as Job from "@/api/system/job";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
import { reactive, ref, onMounted, h } from "vue";
|
||||
import type { FormItemProps } from "../utils/types";
|
||||
import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
|
||||
export function useDept() {
|
||||
const form = reactive({
|
||||
name: "",
|
||||
enabled: null,
|
||||
createTime: ""
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const dataList = reactive([]);
|
||||
const loading = ref(true);
|
||||
const multipleSelection = ref([]);
|
||||
const switchLoadMap = ref({});
|
||||
const { switchStyle } = usePublicHooks();
|
||||
|
||||
/** 分页配置 */
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 10,
|
||||
pageSize: 2,
|
||||
pageSizes: [10, 20, 50],
|
||||
currentPage: 1,
|
||||
align: "left",
|
||||
background: true
|
||||
});
|
||||
/** 表格索引 */
|
||||
const indexMethod = (index: number) => {
|
||||
return index + 1;
|
||||
};
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection"
|
||||
},
|
||||
{
|
||||
type: "index",
|
||||
index: indexMethod
|
||||
},
|
||||
{
|
||||
label: "岗位名称",
|
||||
prop: "name",
|
||||
width: 180,
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
label: "排序",
|
||||
prop: "jobSort",
|
||||
minWidth: 70
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "enabled",
|
||||
minWidth: 100,
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
v-model={scope.row.enabled}
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
loading={switchLoadMap.value[scope.row.index]?.loading}
|
||||
style={switchStyle.value}
|
||||
inline-prompt
|
||||
active-value={true}
|
||||
inactive-value={false}
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 200,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 160,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function resetForm(formEl) {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const queryType = new Job.JobQueryCriteria();
|
||||
if (!isAllEmpty(form.name)) {
|
||||
queryType.name = form.name;
|
||||
}
|
||||
if (!isAllEmpty(form.enabled)) {
|
||||
queryType.enabled = form.enabled;
|
||||
}
|
||||
if (!isAllEmpty(form.createTime)) {
|
||||
queryType.createTime = form.createTime;
|
||||
}
|
||||
queryType.page = pagination.currentPage - 1;
|
||||
queryType.size = pagination.pageSize;
|
||||
const depts = (await Job.get(queryType)).data;
|
||||
pagination.total = depts.totalElements;
|
||||
let newData = depts.content;
|
||||
dataList.splice(0, dataList.length); // 清空数组
|
||||
newData.forEach(x => {
|
||||
dataList.push(x);
|
||||
});
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function openDialog(title = "新增", row?: FormItemProps) {
|
||||
addDialog({
|
||||
title: `${title}岗位`,
|
||||
props: {
|
||||
formInline: {
|
||||
higherDeptOptions: cloneDeep(dataList),
|
||||
id: row?.id ?? 0,
|
||||
name: row?.name ?? "",
|
||||
jobSort: row?.jobSort ?? 0,
|
||||
principal: row?.principal ?? "",
|
||||
phone: row?.phone ?? "",
|
||||
email: row?.email ?? "",
|
||||
sort: row?.sort ?? 0,
|
||||
version: row?.version ?? 0,
|
||||
enabled: row?.enabled ?? false,
|
||||
remark: row?.remark ?? ""
|
||||
}
|
||||
},
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
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.name}的这条数据`, {
|
||||
type: "success"
|
||||
});
|
||||
done(); // 关闭弹框
|
||||
onSearch(); // 刷新表格数据
|
||||
}
|
||||
FormRef.validate(valid => {
|
||||
if (valid) {
|
||||
// 表单规则校验通过
|
||||
if (title === "新增") {
|
||||
// 实际开发先调用新增接口，再进行下面操作
|
||||
Job.add({
|
||||
name: curData.name,
|
||||
enabled: curData.enabled,
|
||||
version: curData.version,
|
||||
jobSort: curData.jobSort
|
||||
}).finally(() => chores());
|
||||
} else if (title === "编辑") {
|
||||
Job.edit({
|
||||
id: curData.id,
|
||||
name: curData.name,
|
||||
enabled: curData.enabled,
|
||||
version: curData.version,
|
||||
jobSort: curData.jobSort
|
||||
}).finally(() => chores());
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
Job.del([row.id]).then(() => {
|
||||
message(`您删除了岗位名称为${row.name}的这条数据`, { type: "success" });
|
||||
});
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function onChange({ row, index }) {
|
||||
ElMessageBox.confirm(
|
||||
`确认要<strong>${
|
||||
!row.enabled ? "停用" : "启用"
|
||||
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||
row.name
|
||||
}</strong>用户吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
dangerouslyUseHTMLString: true,
|
||||
draggable: true
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: true
|
||||
}
|
||||
);
|
||||
setTimeout(() => {
|
||||
switchLoadMap.value[index] = Object.assign(
|
||||
{},
|
||||
switchLoadMap.value[index],
|
||||
{
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
Job.edit({
|
||||
id: row.id,
|
||||
name: row.name,
|
||||
enabled: row.enabled,
|
||||
version: row.version,
|
||||
jobSort: row.jobSort
|
||||
});
|
||||
message("已成功修改岗位状态", {
|
||||
type: "success"
|
||||
});
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {
|
||||
row.enabled ? (row.enabled = false) : (row.enabled = true);
|
||||
});
|
||||
}
|
||||
function handleSizeChange(val: number) {
|
||||
pagination.pageSize = val;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
pagination.currentPage = val;
|
||||
onSearch();
|
||||
}
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
multipleSelection,
|
||||
pagination,
|
||||
/** 搜索 */
|
||||
onSearch,
|
||||
/** 重置 */
|
||||
resetForm,
|
||||
/** 新增、编辑岗位 */
|
||||
openDialog,
|
||||
/** 删除岗位 */
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange
|
||||
};
|
||||
}
|
||||
8
src/views/system/job/utils/rule.ts
Normal file
8
src/views/system/job/utils/rule.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { reactive } from "vue";
|
||||
import type { FormRules } from "element-plus";
|
||||
|
||||
/** 自定义表单规则校验 */
|
||||
export const formRules = reactive(<FormRules>{
|
||||
name: [{ required: true, message: "岗位名称为必填项", trigger: "blur" }],
|
||||
jobSort: [{ required: true, message: "岗位排序为必填项", trigger: "blur" }]
|
||||
});
|
||||
19
src/views/system/job/utils/types.ts
Normal file
19
src/views/system/job/utils/types.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
interface FormItemProps {
|
||||
higherDeptOptions: Record<string, unknown>[];
|
||||
parentId?: number;
|
||||
id: number;
|
||||
jobSort: number;
|
||||
name: string;
|
||||
principal: string;
|
||||
phone: string | number;
|
||||
email: string;
|
||||
sort: number;
|
||||
version: number;
|
||||
enabled: boolean;
|
||||
remark: string;
|
||||
}
|
||||
interface FormProps {
|
||||
formInline: FormItemProps;
|
||||
}
|
||||
|
||||
export type { FormItemProps, FormProps };
|
||||
Reference in New Issue
Block a user