<template>
<n-form
inline
:label-width="80"
label-placement="left"
:model="queryForm"
size="medium"
ref="queryFormRef"
>
<n-form-item label="角色或编码：" path="value">
<n-input
v-model:value="queryForm.value"
clearable
placeholder="请输入···"
/>
</n-form-item>
<n-form-item>
<n-button type="primary" @click="handleClick('row', 'search')"
><template #icon>
<n-icon>
<Search />
</n-icon> </template
>搜索</n-button
>
</n-form-item>
<n-form-item>
<n-button
type="primary"
@click="handleClick('row', 'add')"
attr-type="button"
><template #icon>
<n-icon>
<Add />
</n-icon> </template
>新增角色</n-button
></n-form-item
>
</n-form>
<n-data-table
ref="tableRef"
:bordered="false"
:max-height="700"
striped
:columns="columns"
:data="data"
:pagination="pagination"
></n-data-table>
<n-modal
v-model:show="showModal"
:show-icon="false"
preset="card"
:title="modelTitle"
:style="{ width: '500px' }"
>
<n-transfer
v-if="modelTitle == '配置机构' || modelTitle == '配置权限'"
size="medium"
virtual-scroll
ref="transfer"
v-model:value="configure.value"
:options="configure.options"
:source-title="configure.sourceTitle"
:target-title="configure.targetTitle"
filterable
/>
<n-form
v-if="modelTitle == '新增角色' || modelTitle == '修改角色'"
:label-width="80"
:model="addFormValue"
:rules="addFormRules"
:size="medium"
label-placement="left"
ref="addFormRef"
>
<n-form-item label="角色名称：" path="roleName">
<n-input
v-model:value="addFormValue.roleName"
clearable
placeholder="请输入···"
/>
</n-form-item>
<n-form-item label="角色类型：" path="roleType">
<n-radio-group v-model:value="addFormValue.roleType">
<n-space>
<n-radio :value="0">内部角色</n-radio>
<n-radio :value="1">外部角色</n-radio>
</n-space>
</n-radio-group>
</n-form-item>
<n-form-item label="角色状态：" path="roleStatus">
<n-radio-group v-model:value="addFormValue.roleStatus">
<n-space>
<n-radio :value="0">初始化</n-radio>
<n-radio :value="1">停用</n-radio>
<n-radio :value="2">正在使用</n-radio>
</n-space>
</n-radio-group>
</n-form-item>
<n-form-item label="备注：" path="remarks">
<n-input
placeholder="请输入···"
v-model:value="addFormValue.remarks"
type="textarea"
:autosize="{
minRows: 3,
maxRows: 5,
}"
/>
</n-form-item>
<n-form-item label="排序编号：" path="sortNum">
<n-input
v-model:value="addFormValue.sortNum"
clearable
placeholder="请输入···"
/>
</n-form-item>
</n-form>
<template
#action
v-if="modelTitle == '新增角色' || modelTitle == '修改角色'"
>
<n-space>
<n-button @click="() => (showModal = false)">取消</n-button>
<n-button
type="primary"
:loading="formBtnLoading"
@click="handleClick('rows', 'sure')"
>确定</n-button
>
</n-space>
</template>
</n-modal>
</template>
<script>
import { ref, reactive, toRefs, h, onMounted } from "vue";
import { NButton, useMessage, useDialog, NTag } from "naive-ui";
import { Search, Add } from "@vicons/ionicons5";
export default {
name: "role",
components: { Search, Add },
setup() {
const state = reactive({
//搜索相关
queryForm: {
value: "",
},
//表格相关
columns: [
// {
// type: "selection",
// disabled(row, index) {
// return row.name === "Edward King 3";
// },
// },
{
title: "角色名称",
key: "roleName",
align: "center",
},
{
title: "角色类型",
key: "roleType",
align: "center",
render(row) {
return row.roleType === 0 ? "内部角色" : "外部角色";
},
},
{
title: "角色状态",
key: "roleStatus",
align: "center",
render(row) {
return h(
NTag,
{
bordered: false,
color: {
color: "transparent",
textColor:
row.roleStatus === 0
? "#2080f0"
: row.roleStatus === 1
? "#d03050"
: "#36ad6a",
},
},
{
default:
row.roleStatus === 0
? "初始化"
: row.roleStatus === 1
? "停用"
: "正在使用",
}
);
},
},
{
title: "备注",
key: "remarks",
align: "center",
},
{
title: "操作",
key: "actions",
width: "400",
align: "center",
render(row) {
const btn = state.actionColumn.map((item, index) => {
return h(
NButton,
{
text: true,
size: item.size,
style: {
margin: "10px",
},
type: item.btnType,
onClick: () => handleClick(row, item.type),
},
{ default: () => item.default }
);
});
return btn;
},
},
],
data: [],
actionColumn: [
{
size: "small",
btnType: "primary",
type: "edit",
default: "修改角色",
},
{
size: "small",
btnType: "primary",
type: "delete",
default: "删除角色",
},
{
size: "small",
btnType: "primary",
type: "configureOrgan",
default: "配置机构",
},
{
size: "small",
btnType: "primary",
type: "configureAuthority",
default: "配置权限",
},
],
//弹窗相关
showModal: false,
formBtnLoading: false,
modelTitle: "",
addFormValue: {
roleName: "",
roleType: 0,
roleStatus: 0,
remarks: "",
sortNum: "",
},
addFormRules: {
roleName: [
{
required: true,
trigger: ["blur", "change"],
message: "请输入角色名称",
},
],
sortNum: [
{
required: true,
trigger: ["blur", "change"],
message: "请输入编号",
},
],
},
configure: {
value: "",
options: [],
sourceTitle: "",
targetTitle: "",
},
});
const queryFormRef = ref(null);
const tableRef = ref(null);
const addFormRef = ref(null);
const dialog = useDialog();
const message = useMessage();
//分页
const paginationReactive = reactive({
page: 1,
pageSize: 5,
showSizePicker: true,
pageSizes: [3, 5, 7],
showQuickJumper: true,
onChange: (page) => {
paginationReactive.page = page;
},
onPageSizeChange: (pageSize) => {
paginationReactive.pageSize = pageSize;
paginationReactive.page = 1;
},
});
//获取表格数据
async function getTableData() {
const res = reactive(
{"code":200,"message":"获取系统管理-角色管理基础信息成功","data":{"totalCount":15,"pageSize":10,"totalPage":1,"currPage":1,"list":[{"roleId":1,"roleName":"Ruth Robinson","roleType":0,"roleStatus":0,"remarks":"工向一集研集速接满市再型非三有今。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1976-07-11 10:55:14"},{"roleId":2,"roleName":"Thomas Moore","roleType":1,"roleStatus":2,"remarks":"军断世阶级习如前件并立干部格。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1974-04-09 08:39:08"},{"roleId":3,"roleName":"Kevin Wilson","roleType":1,"roleStatus":2,"remarks":"直基第同况则人养质油领展。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1980-12-02 17:36:01"},{"roleId":4,"roleName":"Matthew Williams","roleType":0,"roleStatus":0,"remarks":"方王一身总关这动增到合选了存你理。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1980-09-17 23:02:36"},{"roleId":5,"roleName":"Angela Wilson","roleType":0,"roleStatus":2,"remarks":"位得东力识装安受型于部气思。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1982-02-15 12:52:22"},{"roleId":6,"roleName":"Jason Williams","roleType":0,"roleStatus":2,"remarks":"一指任进重做路真设证高号叫。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"2019-12-11 09:42:36"},{"roleId":7,"roleName":"Richard Thompson","roleType":0,"roleStatus":1,"remarks":"声管节二联世使非省从维无保。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1971-05-27 16:06:18"},{"roleId":8,"roleName":"Carol White","roleType":0,"roleStatus":1,"remarks":"级主活转里始越能该关学复。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"2003-11-16 14:26:02"},{"roleId":9,"roleName":"Angela Wilson","roleType":1,"roleStatus":1,"remarks":"可因看圆工维议县六月相验走。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1970-01-09 10:51:23"},{"roleId":10,"roleName":"Mark Walker","roleType":1,"roleStatus":0,"remarks":"身半往合资度备记海七规运引北会拉能建。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"2007-08-10 09:49:09"},{"roleId":11,"roleName":"Brian Robinson","roleType":1,"roleStatus":1,"remarks":"条政土起各手化知包活这于酸。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"2005-10-19 16:18:42"},{"roleId":12,"roleName":"Nancy Harris","roleType":1,"roleStatus":2,"remarks":"两带约队今对得太生且求民团今。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"2015-05-18 20:33:08"},{"roleId":13,"roleName":"Sarah Jones","roleType":0,"roleStatus":0,"remarks":"都员两党指听记形加参需使容完切各机。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1992-10-07 22:49:26"},{"roleId":14,"roleName":"Lisa Lee","roleType":1,"roleStatus":1,"remarks":"和线积各学各必重江因海必实感观战系。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"2005-08-08 00:48:56"},{"roleId":15,"roleName":"Carol Miller","roleType":0,"roleStatus":0,"remarks":"细理音算展山花构老数利口须自。","createUserId":1,"menuIdList":[1,3,5,7,9],"createTime":"1994-04-13 10:36:14"}]}}
)
if (res.code == 200) {
state.data = res.data.list;
}
}
//获取穿梭框的options
const createOptions = () => {
state.configure.options = Array.apply(null, { length: 100 }).map(
(v, i) => ({
label: "Option " + i,
value: i,
disabled: i % 5 === 0,
})
);
};
//获取穿梭框的value
const createValues = () => {
state.configure.value = Array.apply(null, { length: 50 }).map(
(v, i) => i
);
};
//按钮点击事件
const handleClick = (row, type) => {
switch (type) {
//搜索
case "search":
console.log("刷新界面", state.queryForm);
break;
//新增
case "add":
state.modelTitle = "新增角色";
state.showModal = true;
break;
//编辑
case "edit":
console.log(row);
state.modelTitle = "修改角色";
state.addFormValue = row;
state.showModal = true;
break;
//配置机构
case "configureOrgan":
state.modelTitle = "配置机构";
state.configure.sourceTitle = "待选机构";
state.configure.targetTitle = "已有机构";
createOptions();
createValues();
state.showModal = true;
break;
//配置权限
case "configureAuthority":
state.modelTitle = "配置权限";
state.configure.sourceTitle = "待选权限";
state.configure.targetTitle = "已有权限";
createOptions();
createValues();
state.showModal = true;
break;
//删除
case "delete":
dialog.info({
title: "提示",
content: `您想删除${row.roleName}`,
positiveText: "确定",
negativeText: "取消",
onPositiveClick: () => {
message.success("删除成功");
},
onNegativeClick: () => {},
});
break;
//确认
case "sure":
addFormRef.value.validate((errors) => {
if (!errors) {
message.success("验证成功");
state.showModal = false;
resetForm();
} else {
console.log(errors);
message.error("验证失败");
}
});
}
};
//表单重置
const resetForm = () => {};
onMounted(() => {
getTableData();
});
return {
...toRefs(state),
queryFormRef,
tableRef,
addFormRef,
getTableData,
pagination: paginationReactive,
createOptions,
createValues,
handleClick,
resetForm,
};
},
};
</script>
<style lang="less" scoped>
// ::v-deep(.n-data-table-base-table .n-button) {
// color: var(--color-text);
// }
::v-deep(.n-dialog__title) {
padding: 20px !important;
color: red !important;
}
</style>
