RRSWithSmartHome
/
wms_vue
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

hgwms-2098 fix 系统权限弹窗修改

hwork-master^2
A0066811 2025-11-07 11:19:50 +08:00
parent ff3740b150
commit f264d03008
3 changed files with 428 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
src/view/power/modal/edit.vue
View File

@ -8,64 +8,107 @@
@cancel="cancel"
>
<a-form
ref="formRef"
ref="formRef"
:model="formState"
:rules="formRules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
layout="vertical"
>
<a-form-item label="上级" name="parent">
<a-tree-select
v-model:value="formState.parent"
style="width: 100%;"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
:tree-data="state.powers"
placeholder="上级权限"
replace
tree-default-expand-all
:replaceFields="replaceFields"
<a-row :gutter="[16, 0]">
<a-col :span="12">
<a-form-item label="上级" name="parent">
<a-tree-select
v-model:value="formState.parent"
style="width: 100%"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
:tree-data="state.powers"
placeholder="上级权限"
replace
tree-default-expand-all
:replaceFields="replaceFields"
>
</a-tree-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="title" label="名称" name="title">
<a-input v-model:value="formState.title" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
v-if="state.showComponent"
ref="component"
label="组件"
name="component"
>
</a-tree-select>
</a-form-item>
<a-form-item ref="title" label="名称" name="title">
<a-input v-model:value="formState.title" />
</a-form-item>
<a-form-item v-if="state.showComponent" ref="component" label="组件" name="component">
<a-input v-model:value="formState.component" />
</a-form-item>
<a-form-item v-if="state.showPath" ref="path" label="路径" name="path">
<a-input v-model:value="formState.path" />
</a-form-item>
<a-form-item v-if="state.showCode" ref="code" label="标识" name="code">
<a-input v-model:value="formState.code" />
</a-form-item>
<a-form-item label="图标" name="icon">
<pro-icon-picker v-model:modelValue="formState.icon"></pro-icon-picker>
</a-form-item>
<a-form-item ref="i18n" label="i18n" name="i18n">
<a-input v-model:value="formState.i18n" />
</a-form-item>
<a-form-item ref="type" label="类型" name="type">
<a-select v-model:value="formState.type" @change="change">
<a-select-option value="0"> 目录 </a-select-option>
<a-select-option value="1"> 菜单 </a-select-option>
<a-select-option value="2"> 按钮 </a-select-option>
</a-select>
</a-form-item>
<a-form-item ref="sort" label="排序" name="sort">
<a-input-number v-model:value="formState.sort" />
</a-form-item>
<a-form-item label="状态" name="enable">
<a-switch v-model:checked="formState.enable" />
</a-form-item>
<a-form-item label="备注" name="remark">
<a-textarea v-model:value="formState.remark" />
</a-form-item>
<a-input v-model:value="formState.component" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
v-if="state.showPath"
ref="path"
label="路径"
name="path"
>
<a-input v-model:value="formState.path" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
v-if="state.showCode"
ref="code"
label="标识"
name="code"
>
<a-input v-model:value="formState.code" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="图标" name="icon">
<pro-icon-picker
v-model:modelValue="formState.icon"
></pro-icon-picker>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="i18n" label="i18n" name="i18n">
<a-input v-model:value="formState.i18n" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="type" label="类型" name="type">
<a-select v-model:value="formState.type" @change="change">
<a-select-option value="0"> 目录 </a-select-option>
<a-select-option value="1"> 菜单 </a-select-option>
<a-select-option value="2"> 按钮 </a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="sort" label="排序" name="sort">
<a-input-number
style="width: 100%"
v-model:value="formState.sort"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="状态" name="enable">
<a-switch v-model:checked="formState.enable" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="备注" name="remark">
<a-textarea v-model:value="formState.remark" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
</template>
<script>
import { message } from '@hwork/ant-design-vue';
import { message } from "@hwork/ant-design-vue";
import { edit, tree } from "@/api/module/power";
import { defineComponent, reactive, ref, toRaw, watch } from "vue";
export default defineComponent({
@ -74,17 +117,16 @@ export default defineComponent({
type: Boolean,
},
record: {
type: Object
}
type: Object,
},
},
emit: ["close"],
setup(props, context) {
const state = reactive({
depts: [],
showComponent: true,
showPath: true,
showCode: false
showCode: false,
});
const formRef = ref();
@ -94,7 +136,7 @@ export default defineComponent({
enable: true,
});
watch(props,(props) => {
watch(props, (props) => {
formState.id = props.record.id;
formState.title = props.record.title;
formState.component = props.record.component;
@ -107,7 +149,7 @@ export default defineComponent({
formState.sort = props.record.sort;
formState.remark = props.record.remark;
formState.parent = props.record.parent;
if(formState.type === '2') {
if (formState.type === "2") {
state.showComponent = false;
state.showPath = false;
state.showCode = true;
@ -116,17 +158,19 @@ export default defineComponent({
state.showPath = true;
state.showCode = false;
}
})
});
const formRules = {
title: [{ required: true, message: '请输入权限名称', trigger: 'blur'}],
i18n: [{ required: true, message: '请输入 i18n', trigger: 'blur'}],
type: [{ required: true, message: '请输入权限类型', trigger: 'blur'}],
parent: [{ required: true, message: '请选择上级权限', trigger: 'change'}]
title: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
i18n: [{ required: true, message: "请输入 i18n", trigger: "blur" }],
type: [{ required: true, message: "请输入权限类型", trigger: "blur" }],
parent: [
{ required: true, message: "请选择上级权限", trigger: "change" },
],
};
const change = function(val) {
if(val === '2') {
const change = function (val) {
if (val === "2") {
state.showComponent = false;
state.showPath = false;
state.showCode = true;
@ -135,26 +179,26 @@ export default defineComponent({
state.showPath = true;
state.showCode = false;
}
}
};
const submit = (e) => {
formRef.value
.validate()
.then(() => {
edit(toRaw(formState)).then((response)=>{
if(response.success){
message.success({ content: '保存成功', duration: 1 }).then(()=>{
cancel();
});
}else{
message.success({ content: '保存失败', duration: 1 }).then(()=>{
cancel();
});
}
edit(toRaw(formState)).then((response) => {
if (response.success) {
message.success({ content: "保存成功", duration: 1 }).then(() => {
cancel();
});
} else {
message.success({ content: "保存失败", duration: 1 }).then(() => {
cancel();
});
}
});
})
.catch(error => {
console.log('error', error);
.catch((error) => {
console.log("error", error);
});
};
@ -164,15 +208,17 @@ export default defineComponent({
};
const loadPower = () => {
tree({}).then((response)=>{
response.data = [{
id:"0",
title: "顶级菜单",
children: response.data
}]
tree({}).then((response) => {
response.data = [
{
id: "0",
title: "顶级菜单",
children: response.data,
},
];
state.powers = response.data;
})
}
});
};
loadPower();
@ -188,7 +234,12 @@ export default defineComponent({
labelCol: { span: 6 },
wrapperCol: { span: 18 },
replaceFields: {children:'children', title:'title', key:'id', value: 'id' }
replaceFields: {
children: "children",
title: "title",
key: "id",
value: "id",
},
};
},
});

157
src/view/power/modal/info.vue
View File

@ -8,57 +8,76 @@
@cancel="cancel"
>
<a-form
ref="formRef"
ref="formRef"
:model="formState"
:rules="formRules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
layout="vertical"
>
<a-form-item label="上级" name="parent">
<a-tree-select
v-model:value="formState.parent"
style="width: 100%"
:tree-data="state.powers"
placeholder="上级权限"
replace
tree-default-expand-all
:replaceFields="replaceFields"
>
</a-tree-select>
</a-form-item>
<a-form-item ref="title" label="名称" name="title">
<a-input v-model:value="formState.title" />
</a-form-item>
<a-form-item ref="component" label="组件" name="component">
<a-input v-model:value="formState.component" />
</a-form-item>
<a-form-item ref="path" label="路径" name="path">
<a-input v-model:value="formState.path" />
</a-form-item>
<a-form-item ref="i18n" label="i18n" name="i18n">
<a-input v-model:value="formState.i18n" />
</a-form-item>
<a-form-item ref="type" label="类型" name="type">
<a-select v-model:value="formState.type">
<a-select-option value="0"> 目录 </a-select-option>
<a-select-option value="1"> 菜单 </a-select-option>
<a-select-option value="2"> 按钮 </a-select-option>
</a-select>
</a-form-item>
<a-form-item ref="sort" label="排序" name="sort">
<a-input-number v-model:value="formState.sort" />
</a-form-item>
<a-form-item label="状态" name="enable">
<a-switch v-model:checked="formState.enable" />
</a-form-item>
<a-form-item label="备注" name="remark">
<a-textarea v-model:value="formState.remark" />
</a-form-item>
<a-row :gutter="[16, 0]">
<a-col :span="12">
<a-form-item label="上级" name="parent">
<a-tree-select
v-model:value="formState.parent"
style="width: 100%"
:tree-data="state.powers"
placeholder="上级权限"
replace
tree-default-expand-all
:replaceFields="replaceFields"
>
</a-tree-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="title" label="名称" name="title">
<a-input v-model:value="formState.title" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="component" label="组件" name="component">
<a-input v-model:value="formState.component" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="path" label="路径" name="path">
<a-input v-model:value="formState.path" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="i18n" label="i18n" name="i18n">
<a-input v-model:value="formState.i18n" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="type" label="类型" name="type">
<a-select v-model:value="formState.type">
<a-select-option value="0"> 目录 </a-select-option>
<a-select-option value="1"> 菜单 </a-select-option>
<a-select-option value="2"> 按钮 </a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="sort" label="排序" name="sort">
<a-input-number style="width: 100%" v-model:value="formState.sort" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="状态" name="enable">
<a-switch v-model:checked="formState.enable" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="备注" name="remark">
<a-textarea v-model:value="formState.remark" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
</template>
<script>
import { message } from '@hwork/ant-design-vue';
import { message } from "@hwork/ant-design-vue";
import { save, tree } from "@/api/module/power";
import { defineComponent, reactive, ref, toRaw, watch } from "vue";
export default defineComponent({
@ -67,24 +86,23 @@ export default defineComponent({
type: Boolean,
},
record: {
type: Object
}
type: Object,
},
},
emit: ["close"],
setup(props, context) {
const state = reactive({
depts: [],
});
const state = reactive({
depts: [],
})
const formRef = ref();
const formState = reactive({
sort: 0,
enable: true,
});
watch(props,(props) => {
watch(props, (props) => {
formState.id = props.record.id;
formState.title = props.record.title;
formState.component = props.record.component;
@ -94,15 +112,19 @@ export default defineComponent({
formState.i18n = props.record.i18n;
formState.remark = props.record.remark;
formState.parent = props.record.parent;
})
});
const formRules = {
title: [{ required: true, message: '请输入权限名称', trigger: 'blur'}],
component: [{ required: true, message: '请输入路由组件', trigger: 'blur'}],
path: [{ required: true, message: '请输入路由地址', trigger: 'blur'}],
i18n: [{ required: true, message: '请输入 i18n', trigger: 'blur'}],
type: [{ required: true, message: '请输入权限类型', trigger: 'blur'}],
parent: [{ required: true, message: '请选择上级权限', trigger: 'change'}]
title: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
component: [
{ required: true, message: "请输入路由组件", trigger: "blur" },
],
path: [{ required: true, message: "请输入路由地址", trigger: "blur" }],
i18n: [{ required: true, message: "请输入 i18n", trigger: "blur" }],
type: [{ required: true, message: "请输入权限类型", trigger: "blur" }],
parent: [
{ required: true, message: "请选择上级权限", trigger: "change" },
],
};
const submit = (e) => {
@ -116,10 +138,10 @@ export default defineComponent({
};
const loadPower = () => {
tree({}).then((response)=>{
tree({}).then((response) => {
state.powers = response.data;
})
}
});
};
loadPower();
@ -130,12 +152,17 @@ export default defineComponent({
formRef,
formState,
formRules,
labelCol: { span: 6 },
wrapperCol: { span: 18 },
replaceFields: {children:'children', title:'title', key:'id', value: 'id' }
replaceFields: {
children: "children",
title: "title",
key: "id",
value: "id",
},
};
},
});
</script>
</script>

355
src/view/power/modal/save.vue
View File

@ -1,8 +1,20 @@
<template>
<a-modal :open="visible" title="新增权限" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel">
<a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-row :gutter='[1,1]'>
<a-col :span ="12">
<a-modal
:open="visible"
title="新增权限"
cancelText="取消"
okText="提交"
@ok="submit"
@cancel="cancel"
>
<a-form
ref="formRef"
:model="formState"
:rules="formRules"
layout="vertical"
>
<a-row :gutter="[16, 0]">
<a-col :span="12">
<a-form-item ref="type" label="类型" name="type">
<a-select v-model:value="formState.type" @change="change">
<a-select-option value="0"> 目录 </a-select-option>
@ -11,7 +23,7 @@
</a-select>
</a-form-item>
</a-col>
<a-col :span ="12">
<a-col :span="12">
<a-form-item ref="clientType" label="终端" name="clientType">
<a-select v-model:value="formState.clientType" @change="change">
<a-select-option value="PC"> PC端 </a-select-option>
@ -20,191 +32,224 @@
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="上级" name="parent">
<a-tree-select
v-model:value="formState.parent"
style="width: 100%"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }"
:tree-data="state.powers"
placeholder="上级权限"
replace
tree-default-expand-all
:replaceFields="replaceFields"
>
</a-tree-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="title" label="名称" name="title">
<a-input v-model:value="formState.title" />
</a-form-item>
</a-col>
<a-col :span="12" v-if="state.showComponent">
<a-form-item ref="component" label="组件" name="component">
<a-input v-model:value="formState.component" />
</a-form-item>
</a-col>
<a-col :span="12" v-if="state.showPath">
<a-form-item ref="path" label="路径" name="path">
<a-input v-model:value="formState.path" />
</a-form-item>
</a-col>
<a-col :span="12" v-if="state.showCode">
<a-form-item ref="code" label="标识" name="code">
<a-input v-model:value="formState.code" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="图标" name="icon">
<pro-icon-picker
v-model:modelValue="formState.icon"
></pro-icon-picker>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="i18n" label="i18n" name="i18n">
<a-input v-model:value="formState.i18n" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="sort" label="排序" name="sort">
<a-input-number style="width: 100%" v-model:value="formState.sort" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="状态" name="enable">
<a-switch v-model:checked="formState.enable" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="备注" name="remark">
<a-textarea v-model:value="formState.remark" />
</a-form-item>
</a-col>
</a-row>
<a-form-item label="上级" name="parent">
<a-tree-select v-model:value="formState.parent" style="width: 100%;"
:dropdown-style="{ maxHeight: '360px', overflow: 'auto' }" :tree-data="state.powers" placeholder="上级权限"
replace tree-default-expand-all :replaceFields="replaceFields">
</a-tree-select>
</a-form-item>
<a-form-item ref="title" label="名称" name="title">
<a-input v-model:value="formState.title" />
</a-form-item>
<a-form-item v-if="state.showComponent" ref="component" label="组件" name="component">
<a-input v-model:value="formState.component" />
</a-form-item>
<a-form-item v-if="state.showPath" ref="path" label="路径" name="path">
<a-input v-model:value="formState.path" />
</a-form-item>
<a-form-item v-if="state.showCode" ref="code" label="标识" name="code">
<a-input v-model:value="formState.code" />
</a-form-item>
<a-form-item label="图标" name="icon">
<pro-icon-picker v-model:modelValue="formState.icon"></pro-icon-picker>
</a-form-item>
<a-form-item ref="i18n" label="i18n" name="i18n">
<a-input v-model:value="formState.i18n" />
</a-form-item>
<a-form-item ref="sort" label="排序" name="sort">
<a-input-number v-model:value="formState.sort" />
</a-form-item>
<a-form-item label="状态" name="enable">
<a-switch v-model:checked="formState.enable" />
</a-form-item>
<a-form-item label="备注" name="remark">
<a-textarea v-model:value="formState.remark" />
</a-form-item>
</a-form>
</a-modal>
</template>
<script>
import {
message
} from "@hwork/ant-design-vue";
import {
save,
tree
} from "@/api/module/power";
import {
defineComponent,
reactive,
ref,
toRaw,
watch
} from "vue";
export default defineComponent({
props: {
visible: {
type: Boolean,
},
import { message } from "@hwork/ant-design-vue";
import { save, tree } from "@/api/module/power";
import { defineComponent, reactive, ref, toRaw, watch } from "vue";
export default defineComponent({
props: {
visible: {
type: Boolean,
},
emit: ["close"],
setup(props, context) {
},
emit: ["close"],
setup(props, context) {
const state = reactive({
depts: [],
showComponent: true,
showPath: true,
showCode: false,
});
const state = reactive({
depts: [],
showComponent: true,
showPath: true,
showCode: false
});
const formRef = ref();
const formRef = ref();
const formState = reactive({
type: "0",
sort: 0,
parent: "0",
enable: true,
});
const formState = reactive({
type: "0",
sort: 0,
parent: "0",
enable: true,
});
const formRules = {
title: [{
const formRules = {
title: [
{
required: true,
message: "请输入权限名称",
trigger: "blur"
}],
i18n: [{
trigger: "blur",
},
],
i18n: [
{
required: true,
message: "请输入 i18n",
trigger: "blur"
}],
type: [{
trigger: "blur",
},
],
type: [
{
required: true,
message: "请输入权限类型",
trigger: "blur"
}],
clientType: [{
trigger: "blur",
},
],
clientType: [
{
required: true,
message: "请选择权限终端类型",
trigger: "blur"
}],
parent: [{
trigger: "blur",
},
],
parent: [
{
required: true,
message: "请选择上级权限",
trigger: "change"
}],
};
trigger: "change",
},
],
};
const submit = (e) => {
formRef.value
.validate()
.then(() => {
save(toRaw(formState)).then((response) => {
if (response.success) {
message.success({
const submit = (e) => {
formRef.value
.validate()
.then(() => {
save(toRaw(formState)).then((response) => {
if (response.success) {
message
.success({
content: "保存成功",
duration: 1
}).then(() => {
duration: 1,
})
.then(() => {
cancel();
});
} else {
message.success({
} else {
message
.success({
content: "保存失败",
duration: 1
}).then(() => {
duration: 1,
})
.then(() => {
cancel();
});
}
});
})
.catch((error) => {
console.log("error", error);
}
});
};
})
.catch((error) => {
console.log("error", error);
});
};
const cancel = (e) => {
formRef.value.resetFields();
context.emit("close", false);
};
const cancel = (e) => {
formRef.value.resetFields();
context.emit("close", false);
};
const loadPower = () => {
tree({}).then((response) => {
response.data = [{
const loadPower = () => {
tree({}).then((response) => {
response.data = [
{
id: "0",
title: "顶级菜单",
children: response.data
}]
state.powers = response.data;
});
};
children: response.data,
},
];
state.powers = response.data;
});
};
const change = function(val) {
if (val === '2') {
state.showComponent = false;
state.showPath = false;
state.showCode = true;
} else {
state.showComponent = true;
state.showPath = true;
state.showCode = false;
}
const change = function (val) {
if (val === "2") {
state.showComponent = false;
state.showPath = false;
state.showCode = true;
} else {
state.showComponent = true;
state.showPath = true;
state.showCode = false;
}
};
loadPower();
loadPower();
return {
state,
submit,
change,
cancel,
formRef,
formState,
formRules,
return {
state,
submit,
change,
cancel,
formRef,
formState,
formRules,
labelCol: {
span: 6
},
wrapperCol: {
span: 18
},
labelCol: {
span: 6,
},
wrapperCol: {
span: 18,
},
replaceFields: {
children: "children",
title: "title",
key: "id",
value: "id",
},
};
},
});
replaceFields: {
children: "children",
title: "title",
key: "id",
value: "id",
},
};
},
});
</script>