284 lines
8.2 KiB
Vue
284 lines
8.2 KiB
Vue
<template>
|
||
<base-model :config="model_cfg">
|
||
<template slot="dialog-body">
|
||
<el-form
|
||
ref="roleForm"
|
||
v-loading="dict.type.UserTypeGroup.length === 0"
|
||
:rules="rules"
|
||
:model="form"
|
||
class="demo-ruleForm"
|
||
size="small"
|
||
label-width="130px"
|
||
>
|
||
<el-form-item label="User Type: " prop="UserTypeName">
|
||
<el-input v-model="form.UserTypeName" />
|
||
</el-form-item>
|
||
<el-form-item label="Shortname: " prop="UserTypeShortName">
|
||
<el-input v-model="form.UserTypeShortName" />
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="$t('system:role:form:isInternal')"
|
||
prop="IsInternal"
|
||
>
|
||
<el-radio-group v-model="form.IsInternal">
|
||
<el-radio
|
||
v-for="item of $d.YesOrNo"
|
||
:key="`IsInternal${item.value}`"
|
||
:label="item.value"
|
||
>{{ item.label }}</el-radio
|
||
>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="Group: " prop="UserTypeGroupIdList">
|
||
<el-select v-model="form.UserTypeGroupIdList" multiple>
|
||
<el-option
|
||
v-for="item of dict.type.UserTypeGroup"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="Order: ">
|
||
<el-input-number
|
||
v-model="form.Order"
|
||
controls-position="right"
|
||
:min="0"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="PermissionStr: " prop="PermissionStr">
|
||
<el-input v-model="form.PermissionStr" />
|
||
</el-form-item>
|
||
<el-form-item label="User Type Enum: " prop="UserTypeEnum">
|
||
<el-select v-model="form.UserTypeEnum">
|
||
<el-option
|
||
v-for="item of $d.UserType"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="Description: " prop="Description">
|
||
<el-input v-model="form.Description" type="textarea" :rows="5" />
|
||
</el-form-item>
|
||
<el-form-item label="role: ">
|
||
<el-checkbox
|
||
v-model="menuExpand"
|
||
@change="handleCheckedTreeExpand($event)"
|
||
>{{ $t("system:role:form:checkbox:menuExpand") }}</el-checkbox
|
||
>
|
||
<el-checkbox
|
||
v-model="menuNodeAll"
|
||
@change="handleCheckedTreeNodeAll($event)"
|
||
>{{ $t("system:role:form:checkbox:menuNodeAll") }}</el-checkbox
|
||
>
|
||
<el-checkbox
|
||
v-model="form.menuCheckStrictly"
|
||
@change="handleCheckedTreeConnect($event)"
|
||
>{{
|
||
$t("system:role:form:checkbox:menuCheckStrictly")
|
||
}}</el-checkbox
|
||
>
|
||
<el-tree
|
||
ref="menu"
|
||
class="tree-border"
|
||
:check-strictly="!form.menuCheckStrictly"
|
||
:data="menuOptions"
|
||
show-checkbox
|
||
node-key="MenuId"
|
||
empty-text="加载中，请稍后"
|
||
:props="defaultProps"
|
||
/>
|
||
<!--:check-strictly="!form.deptCheckStrictly"-->
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
<template slot="dialog-footer">
|
||
<el-button
|
||
:disabled="btnLoading"
|
||
size="small"
|
||
type="primary"
|
||
@click="model_cfg.visible = false"
|
||
>Cancel
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
:loading="btnLoading"
|
||
@click="handleSave"
|
||
>Save</el-button
|
||
>
|
||
</template>
|
||
</base-model>
|
||
</template>
|
||
<script>
|
||
import { addOrUpdateUserType } from "@/api/admin";
|
||
// import { addOrUpdateUserType } from '@/api/system/role'
|
||
// import { getMenuList } from '@/api/system/menu'
|
||
import { getMenuList } from "@/api/system/menu";
|
||
import { model_cfg } from "../role";
|
||
import BaseModel from "@/components/BaseModel";
|
||
|
||
export default {
|
||
components: { BaseModel },
|
||
dicts: ["UserTypeGroup"],
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
Id: "",
|
||
UserTypeName: "",
|
||
IsInternal: true,
|
||
UserTypeShortName: "",
|
||
Order: "",
|
||
Description: "",
|
||
PermissionStr: "",
|
||
UserTypeEnum: null,
|
||
};
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
menuExpand: false,
|
||
menuNodeAll: false,
|
||
userTypeGroupOptions: [
|
||
{ value: 1, label: "Trial" },
|
||
{ value: 2, label: "Reviewer" },
|
||
{ value: 3, label: "Other" },
|
||
],
|
||
model_cfg,
|
||
defaultProps: {
|
||
children: "Children",
|
||
label: "MenuName",
|
||
},
|
||
form: {
|
||
Id: "",
|
||
UserType: "",
|
||
IsInternal: true,
|
||
UserTypeShortName: "",
|
||
Type: null,
|
||
Description: "",
|
||
UserTypeGroupIdList: [],
|
||
menuCheckStrictly: true,
|
||
},
|
||
rules: {
|
||
UserTypeName: [
|
||
{ required: true, message: "Please specify", trigger: "blur" },
|
||
{
|
||
max: 50,
|
||
message: "The maximum length is 50",
|
||
},
|
||
],
|
||
UserTypeShortName: [
|
||
{ required: true, message: "Please specify", trigger: "blur" },
|
||
{
|
||
max: 50,
|
||
message: "The maximum length is 50",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
Description: [{ max: 500, message: "The maximum length is 500" }],
|
||
UserTypeGroupIdList: [
|
||
{ required: true, message: "Please specify", trigger: "blur" },
|
||
],
|
||
UserTypeEnum: [
|
||
{ required: true, message: "Please select", trigger: "blur" },
|
||
],
|
||
},
|
||
menuOptions: [],
|
||
btnLoading: false,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getMenuList();
|
||
if (Object.keys(this.data).length && this.data.Id) {
|
||
this.form = { ...this.data };
|
||
}
|
||
},
|
||
methods: {
|
||
handleCheckedTreeConnect(value) {
|
||
this.form.menuCheckStrictly = !!value;
|
||
},
|
||
getMenuAllCheckedKeys() {
|
||
// 目前被选中的菜单节点
|
||
const checkedKeys = this.$refs.menu.getCheckedKeys();
|
||
// 半选中的菜单节点
|
||
const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
|
||
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
|
||
return checkedKeys;
|
||
},
|
||
|
||
handleCheckedTreeExpand(value) {
|
||
const treeList = this.menuOptions;
|
||
for (let i = 0; i < treeList.length; i++) {
|
||
this.$refs.menu.store.nodesMap[treeList[i].MenuId].expanded = value;
|
||
}
|
||
},
|
||
handleCheckedTreeNodeAll(value, type) {
|
||
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
|
||
},
|
||
toTree(arr, ParentId) {
|
||
function loop(ParentId) {
|
||
const res = [];
|
||
for (let i = 0; i < arr.length; i++) {
|
||
const item = arr[i];
|
||
item.hasChildren = false;
|
||
if (item.ParentId !== ParentId) {
|
||
continue;
|
||
}
|
||
item.Children = loop(item.MenuId);
|
||
res.push(item);
|
||
}
|
||
return res;
|
||
}
|
||
|
||
return loop(ParentId);
|
||
},
|
||
getMenuList() {
|
||
getMenuList({})
|
||
.then((res) => {
|
||
const menu = this.toTree(
|
||
res.Result,
|
||
"00000000-0000-0000-0000-000000000000"
|
||
);
|
||
this.menuOptions = menu;
|
||
console.log(this.menuOptions);
|
||
this.$nextTick(() => {
|
||
this.form.MenuIds.forEach((v) => {
|
||
this.$refs.menu.setChecked(v, true, false);
|
||
});
|
||
});
|
||
})
|
||
.catch(function () {});
|
||
},
|
||
handleSave() {
|
||
this.$refs.roleForm.validate((valid) => {
|
||
if (!valid) return;
|
||
this.btnLoading = true;
|
||
this.model_cfg.showClose = false;
|
||
this.form.MenuIds = this.getMenuAllCheckedKeys();
|
||
console.log(this.form.MenuIds);
|
||
addOrUpdateUserType(this.form)
|
||
.then((res) => {
|
||
this.btnLoading = false;
|
||
this.$refs["roleForm"].resetFields();
|
||
this.$emit("close");
|
||
this.model_cfg.showClose = true;
|
||
this.$message.success("Saved successfully!");
|
||
})
|
||
.catch(() => {
|
||
this.btnLoading = false;
|
||
this.model_cfg.showClose = true;
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|