hgwms-2098 fix 角色管理弹窗修改

hwork-master
A0066811 2025-11-07 14:48:53 +08:00
parent 84633099a9
commit f907724c24
4 changed files with 169 additions and 146 deletions

View File

@ -8,32 +8,43 @@
@cancel="cancel"
>
<a-form
ref="formRef"
ref="formRef"
:model="formState"
:rules="formRules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
layout="vertical"
>
<a-form-item ref="name" label="名称" name="name">
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item ref="code" label="标识" name="code">
<a-input v-model:value="formState.code" />
</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 ref="name" label="名称" name="name">
<a-input v-model:value="formState.name" />
</a-form-item>
</a-col>
<a-col :span="12">
<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 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 } from "@/api/module/role";
import { defineComponent, reactive, ref, toRaw, watch } from "vue";
export default defineComponent({
@ -43,51 +54,46 @@ export default defineComponent({
},
record: {
type: Object,
}
},
},
emit: ["close"],
setup(props, context) {
const formRef = ref();
const formState = reactive({});
const formRules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur'},
],
code: [
{ required: true, message: '请输入标识', trigger: 'blur'},
]
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
code: [{ required: true, message: "请输入标识", trigger: "blur" }],
};
watch(props,(props)=>{
watch(props, (props) => {
formState.id = props.record.id;
formState.name = props.record.name;
formState.code = props.record.code;
formState.sort = props.record.sort;
formState.enable = props.record.enable;
formState.remark = props.record.remark;
})
});
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);
});
};
@ -102,10 +108,10 @@ export default defineComponent({
formRef,
formState,
formRules,
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
},
});
</script>
</script>

View File

@ -1,12 +1,5 @@
<template>
<a-modal
:open="visible"
title="权限配置"
cancelText="取消"
okText="保存"
@ok="submit"
@cancel="cancel"
>
<a-drawer :open="visible" title="权限配置" style="padding: 0 8px">
<a-tabs v-model:activeKey="state.active">
<a-tab-pane key="1" tab="菜单权限">
<a-tree
@ -23,11 +16,13 @@
<a-select-option value="ALL">全部</a-select-option>
<a-select-option value="SELF">仅自己</a-select-option>
<a-select-option value="DEPT">所在部门</a-select-option>
<a-select-option value="DEPT_CHILD">所在部门及下级部门</a-select-option>
<a-select-option value="DEPT_CHILD"
>所在部门及下级部门</a-select-option
>
<a-select-option value="CUSTOM">自定义数据</a-select-option>
</a-select>
<br/>
<br/>
<br />
<br />
<a-tree
checkable
show-line="true"
@ -38,7 +33,11 @@
/>
</a-tab-pane>
</a-tabs>
</a-modal>
<template #footer>
<a-button @click="cancel"></a-button>
<a-button type="primary" @click="submit"></a-button>
</template>
</a-drawer>
</template>
<script>
import { message } from "@hwork/ant-design-vue";
@ -58,7 +57,6 @@ export default defineComponent({
},
emit: ["close"],
setup(props, context) {
const scope = ref("ALL");
const state = reactive({
@ -66,8 +64,8 @@ export default defineComponent({
powers: [],
active: "1",
showDept: false,
checkedPowerIds: {checked:[]},
checkedDeptIds: {checked:[]},
checkedPowerIds: { checked: [] },
checkedDeptIds: { checked: [] },
powerReplaceFields: { key: "id" },
deptReplaceFields: { key: "id", title: "name" },
});
@ -86,13 +84,13 @@ export default defineComponent({
///
watch(scope, (scope) => {
if(scope === "CUSTOM") {
if (scope === "CUSTOM") {
state.showDept = true;
} else {
state.checkedDeptIds = [];
state.showDept = false;
}
})
});
///
watch(props, (props) => {
@ -104,12 +102,12 @@ export default defineComponent({
state.checkedPowerIds = powerIds;
});
let deptIds = [];
dept({ roleId: props.record.id}).then((response) => {
dept({ roleId: props.record.id }).then((response) => {
response.data.forEach((element) => {
deptIds.push(element.id);
})
});
state.checkedDeptIds = deptIds;
})
});
scope.value = props.record.scope;
});
@ -117,23 +115,26 @@ export default defineComponent({
loadDept();
const submit = (e) => {
give({
give({
scope: scope.value,
roleId: props.record.id,
powerIds: state.checkedPowerIds.checked?state.checkedPowerIds.checked:state.checkedPowerIds,
deptIds: state.checkedDeptIds.checked?state.checkedDeptIds.checked:state.checkedDeptIds }).then(
(response) => {
if (response.success) {
message.success({ content: "保存成功", duration: 1 }).then(() => {
cancel();
});
} else {
message.error({ content: "保存失败", duration: 1 }).then(() => {
cancel();
});
}
powerIds: state.checkedPowerIds.checked
? state.checkedPowerIds.checked
: state.checkedPowerIds,
deptIds: state.checkedDeptIds.checked
? state.checkedDeptIds.checked
: state.checkedDeptIds,
}).then((response) => {
if (response.success) {
message.success({ content: "保存成功", duration: 1 }).then(() => {
cancel();
});
} else {
message.error({ content: "保存失败", duration: 1 }).then(() => {
cancel();
});
}
);
});
};
const cancel = (e) => {
@ -145,8 +146,8 @@ export default defineComponent({
state,
submit,
cancel,
SHOW_PARENT
SHOW_PARENT,
};
},
});
</script>
</script>

View File

@ -8,27 +8,38 @@
@cancel="cancel"
>
<a-form
ref="formRef"
ref="formRef"
:model="formState"
:rules="formRules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
layout="vertical"
>
<a-form-item ref="name" label="名称" name="name">
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item ref="code" label="标识" name="code">
<a-input v-model:value="formState.code" />
</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 ref="name" label="名称" name="name">
<a-input v-model:value="formState.name" />
</a-form-item>
</a-col>
<a-col :span="12">
<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 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>
@ -41,25 +52,24 @@ export default defineComponent({
},
record: {
type: Object,
}
},
},
emit: ["close"],
setup(props, context) {
const formRef = ref();
const formState = reactive({});
const formRules = {};
watch(props,(props)=>{
watch(props, (props) => {
formState.id = props.record.id;
formState.name = props.record.name;
formState.code = props.record.code;
formState.sort = props.record.sort;
formState.enable = props.record.enable;
formState.remark = props.record.remark;
})
});
const cancel = (e) => {
formRef.value.resetFields();
@ -77,10 +87,10 @@ export default defineComponent({
formRef,
formState,
formRules,
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
},
});
</script>
</script>

View File

@ -8,32 +8,43 @@
@cancel="cancel"
>
<a-form
ref="formRef"
ref="formRef"
:model="formState"
:rules="formRules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
layout="vertical"
>
<a-form-item ref="name" label="名称" name="name">
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item ref="code" label="标识" name="code">
<a-input v-model:value="formState.code" />
</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 ref="name" label="名称" name="name">
<a-input v-model:value="formState.name" />
</a-form-item>
</a-col>
<a-col :span="12">
<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 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 } from "@/api/module/role";
import { defineComponent, reactive, ref, toRaw } from "vue";
export default defineComponent({
@ -44,41 +55,36 @@ export default defineComponent({
},
emit: ["close"],
setup(props, context) {
const formRef = ref();
const formState = reactive({
sort: 0,
enable: "true",
});
const formRules = {
name: [
{ required: true, message: '请输入名称', trigger: 'blur'},
],
code: [
{ required: true, message: '请输入标识', trigger: 'blur'},
]
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
code: [{ required: true, message: "请输入标识", trigger: "blur" }],
};
const submit = (e) => {
formRef.value
.validate()
.then(() => {
save(toRaw(formState)).then((response)=>{
if(response.success){
message.success({ content: '保存成功', duration: 1 }).then(()=>{
cancel();
});
}else{
message.success({ content: '保存失败', duration: 1 }).then(()=>{
cancel();
});
}
save(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);
});
};
@ -93,10 +99,10 @@ export default defineComponent({
formRef,
formState,
formRules,
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
},
});
</script>
</script>