forked from kongfp/Tp_Web2.0
feat: 新建页面
PC-20230628KUOD\Administrator
2 years ago
parent
263a91ec16
commit
eff876b311
@ -0,0 +1,55 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { formRules } from "./utils/rule";
|
||||||
|
import { FormProps } from "./utils/types";
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<FormProps>(), {
|
||||||
|
formInline: () => ({
|
||||||
|
name: "",
|
||||||
|
code: "",
|
||||||
|
remark: ""
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
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="name">
|
||||||
|
<el-input
|
||||||
|
v-model="newFormInline.name"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入角色名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="角色标识" prop="code">
|
||||||
|
<el-input
|
||||||
|
v-model="newFormInline.code"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入角色标识"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input
|
||||||
|
v-model="newFormInline.remark"
|
||||||
|
placeholder="请输入备注信息"
|
||||||
|
type="textarea"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,217 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useRole } from "./utils/hook";
|
||||||
|
import { PureTableBar } from "@/components/RePureTableBar";
|
||||||
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
|
import { PureTable } from "@pureadmin/table";
|
||||||
|
|
||||||
|
// 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 Search from "@iconify-icons/ep/search";
|
||||||
|
import Refresh from "@iconify-icons/ep/refresh";
|
||||||
|
import Menu from "@iconify-icons/ep/menu";
|
||||||
|
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "Role"
|
||||||
|
});
|
||||||
|
|
||||||
|
const formRef = ref();
|
||||||
|
const {
|
||||||
|
form,
|
||||||
|
loading,
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
pagination,
|
||||||
|
// buttonClass,
|
||||||
|
onSearch,
|
||||||
|
resetForm,
|
||||||
|
openDialog,
|
||||||
|
handleMenu,
|
||||||
|
handleDelete,
|
||||||
|
// handleDatabase,
|
||||||
|
handleSizeChange,
|
||||||
|
handleCurrentChange,
|
||||||
|
handleSelectionChange
|
||||||
|
} = useRole();
|
||||||
|
</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="code">
|
||||||
|
<el-input
|
||||||
|
v-model="form.code"
|
||||||
|
placeholder="请输入角色标识"
|
||||||
|
clearable
|
||||||
|
class="!w-[180px]"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态：" prop="status">
|
||||||
|
<el-select
|
||||||
|
v-model="form.status"
|
||||||
|
placeholder="请选择状态"
|
||||||
|
clearable
|
||||||
|
class="!w-[180px]"
|
||||||
|
>
|
||||||
|
<el-option label="已启用" value="1" />
|
||||||
|
<el-option label="已停用" value="0" />
|
||||||
|
</el-select>
|
||||||
|
</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"
|
||||||
|
@refresh="onSearch"
|
||||||
|
>
|
||||||
|
<template #buttons>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="useRenderIcon(AddFill)"
|
||||||
|
@click="openDialog()"
|
||||||
|
>
|
||||||
|
新增角色
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<template v-slot="{ size, dynamicColumns }">
|
||||||
|
<pure-table
|
||||||
|
border
|
||||||
|
align-whole="center"
|
||||||
|
showOverflowTooltip
|
||||||
|
table-layout="auto"
|
||||||
|
:loading="loading"
|
||||||
|
:size="size"
|
||||||
|
adaptive
|
||||||
|
:data="dataList"
|
||||||
|
:columns="dynamicColumns"
|
||||||
|
:pagination="pagination"
|
||||||
|
:paginationSmall="size === 'small' ? true : false"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-table-row-hover-bg-color)',
|
||||||
|
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-button
|
||||||
|
class="reset-margin"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon(Menu)"
|
||||||
|
@click="handleMenu"
|
||||||
|
>
|
||||||
|
菜单权限
|
||||||
|
</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>
|
||||||
|
<!-- <el-dropdown>
|
||||||
|
<el-button
|
||||||
|
class="ml-3 mt-[2px]"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon(More)"
|
||||||
|
/>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item>
|
||||||
|
<el-button
|
||||||
|
:class="buttonClass"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon(Menu)"
|
||||||
|
@click="handleMenu"
|
||||||
|
>
|
||||||
|
菜单权限
|
||||||
|
</el-button>
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item>
|
||||||
|
<el-button
|
||||||
|
:class="buttonClass"
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
:size="size"
|
||||||
|
:icon="useRenderIcon(Database)"
|
||||||
|
@click="handleDatabase"
|
||||||
|
>
|
||||||
|
数据权限
|
||||||
|
</el-button>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown> -->
|
||||||
|
</template>
|
||||||
|
</pure-table>
|
||||||
|
</template>
|
||||||
|
</PureTableBar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-dropdown-menu__item i) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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" }],
|
||||||
|
code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
|
||||||
|
});
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
|
||||||
|
|
||||||
|
interface FormItemProps {
|
||||||
|
/** 角色名称 */
|
||||||
|
name: string;
|
||||||
|
/** 角色编号 */
|
||||||
|
code: string;
|
||||||
|
/** 备注 */
|
||||||
|
remark: string;
|
||||||
|
}
|
||||||
|
interface FormProps {
|
||||||
|
formInline: FormItemProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { FormItemProps, FormProps };
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { formRules } from "./utils/rule";
|
||||||
|
import { FormProps } from "./utils/types";
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<FormProps>(), {
|
||||||
|
formInline: () => ({
|
||||||
|
/** 角色名称 */
|
||||||
|
username: "",
|
||||||
|
/** 角色编号 */
|
||||||
|
code: "",
|
||||||
|
/** 备注 */
|
||||||
|
remark: "",
|
||||||
|
/** 手机号 */
|
||||||
|
mobile: "",
|
||||||
|
/** 性别 */
|
||||||
|
sex: null,
|
||||||
|
/** 状态 */
|
||||||
|
status: null,
|
||||||
|
/** 组织 */
|
||||||
|
dept: {
|
||||||
|
id: null,
|
||||||
|
name: ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
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="username">
|
||||||
|
<el-input
|
||||||
|
v-model="newFormInline.username"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入用户名称"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="手机号">
|
||||||
|
<el-input
|
||||||
|
v-model="newFormInline.mobile"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-switch
|
||||||
|
v-model="newFormInline.status"
|
||||||
|
class="ml-2"
|
||||||
|
inline-prompt
|
||||||
|
:active-value="1"
|
||||||
|
:inactive-value="0"
|
||||||
|
active-text="已开启"
|
||||||
|
inactive-text="已关闭"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,358 @@
|
|||||||
|
import dayjs from "dayjs";
|
||||||
|
import { message } from "@/utils/message";
|
||||||
|
import editForm from "../form.vue";
|
||||||
|
import { addDialog } from "@/components/ReDialog";
|
||||||
|
import { type FormItemProps } from "../utils/types";
|
||||||
|
// import { getUserList } from "@/api/system";
|
||||||
|
import { ElMessageBox } from "element-plus";
|
||||||
|
import { type PaginationProps } from "@pureadmin/table";
|
||||||
|
import { reactive, ref, computed, h, onMounted } from "vue";
|
||||||
|
// import { http } from "@/utils/http";
|
||||||
|
import { number } from "echarts";
|
||||||
|
|
||||||
|
export function useUser() {
|
||||||
|
const form = reactive({
|
||||||
|
/** 角色名称 */
|
||||||
|
username: "",
|
||||||
|
/** 手机号 */
|
||||||
|
mobile: "",
|
||||||
|
/** 状态 */
|
||||||
|
status: number
|
||||||
|
});
|
||||||
|
const formRef = ref();
|
||||||
|
const dataList = ref([]);
|
||||||
|
const loading = ref(true);
|
||||||
|
const switchLoadMap = ref({});
|
||||||
|
const pagination = reactive<PaginationProps>({
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
currentPage: 1,
|
||||||
|
background: true
|
||||||
|
});
|
||||||
|
const columns: TableColumnList = [
|
||||||
|
{
|
||||||
|
label: "序号",
|
||||||
|
type: "index",
|
||||||
|
width: 70,
|
||||||
|
fixed: "left"
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: "用户编号",
|
||||||
|
// prop: "id",
|
||||||
|
// minWidth: 130
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
label: "用户名称",
|
||||||
|
prop: "username",
|
||||||
|
minWidth: 130
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: "用户昵称",
|
||||||
|
// prop: "nickname",
|
||||||
|
// minWidth: 130
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
label: "性别",
|
||||||
|
prop: "sex",
|
||||||
|
minWidth: 90,
|
||||||
|
cellRenderer: ({ row, props }) => (
|
||||||
|
<el-tag
|
||||||
|
size={props.size}
|
||||||
|
type={row.sex === 1 ? "danger" : ""}
|
||||||
|
effect="plain"
|
||||||
|
>
|
||||||
|
{row.sex === 1 ? "女" : "男"}
|
||||||
|
</el-tag>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "组织",
|
||||||
|
prop: "dept",
|
||||||
|
minWidth: 90,
|
||||||
|
formatter: ({ dept }) => dept.name
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "手机号码",
|
||||||
|
prop: "mobile",
|
||||||
|
minWidth: 90
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "状态",
|
||||||
|
prop: "status",
|
||||||
|
minWidth: 90,
|
||||||
|
cellRenderer: scope => (
|
||||||
|
<el-switch
|
||||||
|
size={scope.props.size === "small" ? "small" : "default"}
|
||||||
|
loading={switchLoadMap.value[scope.index]?.loading}
|
||||||
|
v-model={scope.row.status}
|
||||||
|
active-value={1}
|
||||||
|
inactive-value={0}
|
||||||
|
active-text="已开启"
|
||||||
|
inactive-text="已关闭"
|
||||||
|
inline-prompt
|
||||||
|
onChange={() => onChange(scope as any)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "创建时间",
|
||||||
|
minWidth: 90,
|
||||||
|
prop: "createTime",
|
||||||
|
formatter: ({ createTime }) =>
|
||||||
|
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "操作",
|
||||||
|
fixed: "right",
|
||||||
|
width: 180,
|
||||||
|
slot: "operation"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const buttonClass = computed(() => {
|
||||||
|
return [
|
||||||
|
"!h-[20px]",
|
||||||
|
"reset-margin",
|
||||||
|
"!text-gray-500",
|
||||||
|
"dark:!text-white",
|
||||||
|
"dark:hover:!text-primary"
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
function onChange({ row, index }) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
`确认要<strong>${
|
||||||
|
row.status === 0 ? "停用" : "启用"
|
||||||
|
}</strong><strong style='color:var(--el-color-primary)'>${
|
||||||
|
row.username
|
||||||
|
}</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
|
||||||
|
}
|
||||||
|
);
|
||||||
|
message("已成功修改用户状态", {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
row.status === 0 ? (row.status = 1) : (row.status = 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdate(row) {
|
||||||
|
console.log(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(row) {
|
||||||
|
message(`您删除了角色名称为${row.username}的这条数据`, { type: "success" });
|
||||||
|
const deleteListData = userList.value.list.filter(
|
||||||
|
item => item.id !== row.id
|
||||||
|
);
|
||||||
|
userList.value.list = deleteListData;
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSizeChange(val: number) {
|
||||||
|
console.log(`${val} items per page`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCurrentChange(val: number) {
|
||||||
|
console.log(`current page: ${val}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSelectionChange(val) {
|
||||||
|
console.log("handleSelectionChange", val);
|
||||||
|
}
|
||||||
|
|
||||||
|
const userList = ref({
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
username: "admin",
|
||||||
|
nickname: "admin",
|
||||||
|
remark: "管理员",
|
||||||
|
deptId: 103,
|
||||||
|
postIds: [1],
|
||||||
|
mobile: "15888888888",
|
||||||
|
sex: 0,
|
||||||
|
id: 1,
|
||||||
|
status: 0,
|
||||||
|
createTime: 1605456000000,
|
||||||
|
dept: {
|
||||||
|
id: 103,
|
||||||
|
name: "研发部门"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
username: "pure",
|
||||||
|
nickname: "pure",
|
||||||
|
remark: "不要吓我",
|
||||||
|
deptId: 104,
|
||||||
|
postIds: [1],
|
||||||
|
mobile: "15888888888",
|
||||||
|
sex: 0,
|
||||||
|
id: 100,
|
||||||
|
status: 1,
|
||||||
|
createTime: 1605456000000,
|
||||||
|
dept: {
|
||||||
|
id: 104,
|
||||||
|
name: "市场部门"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
username: "lucy",
|
||||||
|
nickname: "girl",
|
||||||
|
remark: null,
|
||||||
|
deptId: 106,
|
||||||
|
postIds: null,
|
||||||
|
mobile: "15888888888",
|
||||||
|
sex: 1,
|
||||||
|
id: 103,
|
||||||
|
status: 1,
|
||||||
|
createTime: 1605456000000,
|
||||||
|
dept: {
|
||||||
|
id: 106,
|
||||||
|
name: "财务部门"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
username: "mike",
|
||||||
|
nickname: "boy",
|
||||||
|
remark: null,
|
||||||
|
deptId: 107,
|
||||||
|
postIds: [],
|
||||||
|
mobile: "15888888888",
|
||||||
|
sex: 0,
|
||||||
|
id: 104,
|
||||||
|
status: 0,
|
||||||
|
createTime: 1605456000000,
|
||||||
|
dept: {
|
||||||
|
id: 107,
|
||||||
|
name: "运维部门"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
total: 4
|
||||||
|
});
|
||||||
|
|
||||||
|
function getUserList() {
|
||||||
|
// http.request("post", "/login")
|
||||||
|
return userList;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSearch() {
|
||||||
|
loading.value = true;
|
||||||
|
const data = getUserList();
|
||||||
|
console.log(data);
|
||||||
|
dataList.value = data.value.list;
|
||||||
|
pagination.total = data.value.total;
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = formEl => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.resetFields();
|
||||||
|
onSearch();
|
||||||
|
};
|
||||||
|
function openDialog(title = "新增", row?: FormItemProps) {
|
||||||
|
addDialog({
|
||||||
|
title: `${title}用户`,
|
||||||
|
props: {
|
||||||
|
formInline: {
|
||||||
|
username: row?.username ?? "",
|
||||||
|
mobile: row?.mobile ?? "",
|
||||||
|
status: row?.status ?? ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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.username}的这条数据`, {
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
done(); // 关闭弹框
|
||||||
|
onSearch(); // 刷新表格数据
|
||||||
|
}
|
||||||
|
FormRef.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
console.log("curData", curData);
|
||||||
|
// 表单规则校验通过
|
||||||
|
if (title === "新增") {
|
||||||
|
// 实际开发先调用新增接口，再进行下面操作
|
||||||
|
const addItem = {
|
||||||
|
username: curData.username,
|
||||||
|
mobile: "15888888888",
|
||||||
|
status: curData.status,
|
||||||
|
nickname: "boy",
|
||||||
|
remark: null,
|
||||||
|
deptId: 107,
|
||||||
|
postIds: [],
|
||||||
|
sex: 0,
|
||||||
|
id: 105,
|
||||||
|
createTime: 1605456000000,
|
||||||
|
dept: {
|
||||||
|
id: 107,
|
||||||
|
name: "运维部门"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
userList.value.list.push(addItem);
|
||||||
|
chores();
|
||||||
|
} else {
|
||||||
|
// 实际开发先调用编辑接口，再进行下面操作
|
||||||
|
chores();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSearch();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
form,
|
||||||
|
loading,
|
||||||
|
columns,
|
||||||
|
dataList,
|
||||||
|
pagination,
|
||||||
|
buttonClass,
|
||||||
|
onSearch,
|
||||||
|
openDialog,
|
||||||
|
resetForm,
|
||||||
|
handleUpdate,
|
||||||
|
handleDelete,
|
||||||
|
handleSizeChange,
|
||||||
|
handleCurrentChange,
|
||||||
|
handleSelectionChange
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { reactive } from "vue";
|
||||||
|
import type { FormRules } from "element-plus";
|
||||||
|
|
||||||
|
/** 自定义表单规则校验 */
|
||||||
|
export const formRules = reactive(<FormRules>{
|
||||||
|
username: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
|
||||||
|
code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
|
||||||
|
});
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
// 虽然字段很少 但是抽离出来 后续有扩展字段需求就很方便了
|
||||||
|
|
||||||
|
interface FormItemProps {
|
||||||
|
/** 角色名称 */
|
||||||
|
username: string;
|
||||||
|
/** 状态 */
|
||||||
|
status: number;
|
||||||
|
/** 手机 */
|
||||||
|
mobile: string;
|
||||||
|
}
|
||||||
|
interface FormProps {
|
||||||
|
formInline: FormItemProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { FormItemProps, FormProps };
|
||||||
Loading…
Reference in New Issue