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

hgwms-2098 fix 用户管理弹窗修改

hwork-master
A0066811 2025-11-07 14:40:27 +08:00
parent dda045dde0
commit 84633099a9
3 changed files with 330 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
src/view/user/modal/edit.vue
View File

@ -1,64 +1,89 @@
<template> <template>
<a-modal <a-modal
:open="visible" :open="visible"
title="新增用户" title="修改用户"
cancelText="取消" cancelText="取消"
okText="提交" okText="提交"
@ok="submit" @ok="submit"
@cancel="cancel" @cancel="cancel"
> >
<a-form <a-form
ref="formRef" ref="formRef"
:model="formState" :model="formState"
:rules="formRules" :rules="formRules"
:label-col="labelCol" layout="vertical"
:wrapper-col="wrapperCol"> >
<a-form-item ref="nickname" label="昵称" name="nickname"> <a-row :gutter="[16, 0]">
<a-input v-model:value="formState.nickname" /> <a-col :span="12">
</a-form-item> <a-form-item ref="nickname" label="昵称" name="nickname">
<a-form-item ref="username" label="账户" name="username"> <a-input v-model:value="formState.nickname" />
<a-input v-model:value="formState.username" /> </a-form-item>
</a-form-item> </a-col>
<a-form-item ref="email" label="邮箱" name="email"> <a-col :span="12">
<a-input v-model:value="formState.email" /> <a-form-item ref="username" label="账户" name="username">
</a-form-item> <a-input v-model:value="formState.username" />
<a-form-item ref="phone" label="电话" name="phone"> </a-form-item>
<a-input v-model:value="formState.phone" /> </a-col>
</a-form-item> <a-col :span="12">
<a-form-item label="性别" name="gender"> <a-form-item ref="email" label="邮箱" name="email">
<a-radio-group v-model:value="formState.gender"> <a-input v-model:value="formState.email" />
<a-radio value="0">男</a-radio> </a-form-item>
<a-radio value="1">女</a-radio> </a-col>
</a-radio-group> <a-col :span="12">
</a-form-item> <a-form-item ref="phone" label="电话" name="phone">
<a-form-item label="状态" name="enable"> <a-input v-model:value="formState.phone" />
<a-switch v-model:checked="formState.enable" /> </a-form-item>
</a-form-item> </a-col>
<a-form-item label="岗位" name="postId"> <a-col :span="12">
<a-select v-model:value="formState.postId"> <a-form-item label="性别" name="gender">
<a-select-option :value="post.id" v-bind:key="index" v-for="(post,index) in state.posts">{{post.name}}</a-select-option> <a-radio-group v-model:value="formState.gender">
</a-select> <a-radio value="0">男</a-radio>
</a-form-item> <a-radio value="1">女</a-radio>
<a-form-item label="部门" name="deptId"> </a-radio-group>
<a-tree-select </a-form-item>
v-model:value="formState.deptId" </a-col>
style="width: 100%" <a-col :span="12">
:tree-data="state.depts" <a-form-item label="状态" name="enable">
placeholder="所属部门" <a-switch v-model:checked="formState.enable" />
replace </a-form-item>
tree-default-expand-all </a-col>
:replaceFields="replaceFields" <a-col :span="12">
> <a-form-item label="岗位" name="postId">
</a-tree-select> <a-select v-model:value="formState.postId">
</a-form-item> <a-select-option
<a-form-item label="备注" name="remark"> :value="post.id"
<a-textarea v-model:value="formState.remark" /> v-bind:key="index"
</a-form-item> v-for="(post, index) in state.posts"
>{{ post.name }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="部门" name="deptId">
<a-tree-select
v-model:value="formState.deptId"
style="width: 100%"
:tree-data="state.depts"
placeholder="所属部门"
replace
tree-default-expand-all
:replaceFields="replaceFields"
>
</a-tree-select>
</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-form>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { message } from '@hwork/ant-design-vue'; import { message } from "@hwork/ant-design-vue";
import { list } from "@/api/module/post"; import { list } from "@/api/module/post";
import { edit } from "@/api/module/user"; import { edit } from "@/api/module/user";
import { tree } from "@/api/module/dept"; import { tree } from "@/api/module/dept";
@ -70,61 +95,63 @@ export default defineComponent({
}, },
record: { record: {
type: Object, type: Object,
} },
}, },
emit: ["close"], emit: ["close"],
setup(props, context) { setup(props, context) {
const formRef = ref(); const formRef = ref();
const state = reactive({ const state = reactive({
posts: [], posts: [],
depts: [], depts: [],
}) });
const formState = reactive({ const formState = reactive({
enable: true, enable: true,
gender: "0", gender: "0",
}); });
const formRules = { const formRules = {
username: [ { required: true, message: '请输入账户', trigger: 'blur'} ], username: [{ required: true, message: "请输入账户", trigger: "blur" }],
nickname: [ { required: true, message: '请输入昵称', trigger: 'blur'} ], nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
password: [ { required: true, message: '请输入密码', trigger: 'blur'} ], password: [{ required: true, message: "请输入密码", trigger: "blur" }],
email: [ { required: true, message: '请输入邮箱', trigger: 'blur'} ], email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
phone: [ { required: true, message: '请输入电话', trigger: 'blur'} ], phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
postId: [ { required: true, message: '请选择岗位', trigger: 'blur'} ], postId: [{ required: true, message: "请选择岗位", trigger: "blur" }],
deptId: [ { required: true, message: '请选择部门', trigger: 'blur'} ], deptId: [{ required: true, message: "请选择部门", trigger: "blur" }],
}; };
const loadPost = () => { const loadPost = () => {
list({}).then((response)=>{ list({}).then((response) => {
state.posts = response.data; state.posts = response.data;
}) });
} };
const loadTree = () => { const loadTree = () => {
tree({}).then((response)=>{ tree({}).then((response) => {
state.depts = response.data; state.depts = response.data;
}) });
} };
const submit = (e) => { const submit = (e) => {
formRef.value.validate().then(() => { formRef.value
edit(toRaw(formState)).then((response)=>{ .validate()
if(response.success){ .then(() => {
message.success({ content: '保存成功', duration: 1 }).then(()=>{ edit(toRaw(formState)).then((response) => {
cancel(); if (response.success) {
}); message.success({ content: "保存成功", duration: 1 }).then(() => {
}else{ cancel();
message.error({ content: '保存失败', duration: 1 }).then(()=>{ });
cancel(); } else {
}); message.error({ content: "保存失败", duration: 1 }).then(() => {
cancel();
});
} }
}) });
}).catch(error => { })
console.log('error', error); .catch((error) => {
}); console.log("error", error);
});
}; };
const cancel = (e) => { const cancel = (e) => {
@ -137,7 +164,7 @@ export default defineComponent({
/// 加载部门 /// 加载部门
loadTree(); loadTree();
watch(props,(props) => { watch(props, (props) => {
formState.id = props.record.id; formState.id = props.record.id;
formState.username = props.record.username; formState.username = props.record.username;
formState.nickname = props.record.nickname; formState.nickname = props.record.nickname;
@ -148,7 +175,7 @@ export default defineComponent({
formState.deptId = props.record.deptId; formState.deptId = props.record.deptId;
formState.enable = props.record.enable; formState.enable = props.record.enable;
formState.remark = props.record.remark; formState.remark = props.record.remark;
}) });
return { return {
state, state,
@ -161,8 +188,13 @@ export default defineComponent({
labelCol: { span: 6 }, labelCol: { span: 6 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
replaceFields: {children:'children', title:'name', key:'id', value: 'id' } replaceFields: {
children: "children",
title: "name",
key: "id",
value: "id",
},
}; };
}, },
}); });
</script> </script>

151
src/view/user/modal/info.vue
View File

@ -8,52 +8,77 @@
@cancel="cancel" @cancel="cancel"
> >
<a-form <a-form
ref="formRef" ref="formRef"
:model="formState" :model="formState"
:rules="formRules" :rules="formRules"
:label-col="labelCol" layout="vertical"
:wrapper-col="wrapperCol"> >
<a-form-item ref="nickname" label="昵称" name="nickname"> <a-row :gutter="[16, 0]">
<a-input v-model:value="formState.nickname" /> <a-col :span="12">
</a-form-item> <a-form-item ref="nickname" label="昵称" name="nickname">
<a-form-item ref="username" label="账户" name="username"> <a-input v-model:value="formState.nickname" />
<a-input v-model:value="formState.username" /> </a-form-item>
</a-form-item> </a-col>
<a-form-item ref="email" label="邮箱" name="email"> <a-col :span="12">
<a-input v-model:value="formState.email" /> <a-form-item ref="username" label="账户" name="username">
</a-form-item> <a-input v-model:value="formState.username" />
<a-form-item ref="phone" label="电话" name="phone"> </a-form-item>
<a-input v-model:value="formState.phone" /> </a-col>
</a-form-item> <a-col :span="12">
<a-form-item label="性别" name="gender"> <a-form-item ref="email" label="邮箱" name="email">
<a-radio-group v-model:value="formState.gender"> <a-input v-model:value="formState.email" />
<a-radio value="0">男</a-radio> </a-form-item>
<a-radio value="1">女</a-radio> </a-col>
</a-radio-group> <a-col :span="12">
</a-form-item> <a-form-item ref="phone" label="电话" name="phone">
<a-form-item label="状态" name="enable"> <a-input v-model:value="formState.phone" />
<a-switch v-model:checked="formState.enable" /> </a-form-item>
</a-form-item> </a-col>
<a-form-item label="岗位" name="postId"> <a-col :span="12">
<a-select v-model:value="formState.postId"> <a-form-item label="性别" name="gender">
<a-select-option :value="post.id" v-bind:key="index" v-for="(post,index) in state.posts">{{post.name}}</a-select-option> <a-radio-group v-model:value="formState.gender">
</a-select> <a-radio value="0">男</a-radio>
</a-form-item> <a-radio value="1">女</a-radio>
<a-form-item label="部门" name="deptId"> </a-radio-group>
<a-tree-select </a-form-item>
v-model:value="formState.deptId" </a-col>
style="width: 100%" <a-col :span="12">
:tree-data="state.depts" <a-form-item label="状态" name="enable">
placeholder="所属部门" <a-switch v-model:checked="formState.enable" />
replace </a-form-item>
tree-default-expand-all </a-col>
:replaceFields="replaceFields" <a-col :span="12">
> <a-form-item label="岗位" name="postId">
</a-tree-select> <a-select v-model:value="formState.postId">
</a-form-item> <a-select-option
<a-form-item label="备注" name="remark"> :value="post.id"
<a-textarea v-model:value="formState.remark" /> v-bind:key="index"
</a-form-item> v-for="(post, index) in state.posts"
>{{ post.name }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="部门" name="deptId">
<a-tree-select
v-model:value="formState.deptId"
style="width: 100%"
:tree-data="state.depts"
placeholder="所属部门"
replace
tree-default-expand-all
:replaceFields="replaceFields"
>
</a-tree-select>
</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-form>
</a-modal> </a-modal>
</template> </template>
@ -68,36 +93,35 @@ export default defineComponent({
}, },
record: { record: {
type: Object, type: Object,
} },
}, },
emit: ["close"], emit: ["close"],
setup(props, context) { setup(props, context) {
const formRef = ref(); const formRef = ref();
const state = reactive({ const state = reactive({
posts: [], posts: [],
depts: [], depts: [],
}) });
const formState = reactive({ const formState = reactive({
enable: true, enable: true,
gender: "0", gender: "0",
}); });
const formRules = {}; const formRules = {};
const loadPost = () => { const loadPost = () => {
list({}).then((response)=>{ list({}).then((response) => {
state.posts = response.data; state.posts = response.data;
}) });
} };
const loadTree = () => { const loadTree = () => {
tree({}).then((response)=>{ tree({}).then((response) => {
state.depts = response.data; state.depts = response.data;
}) });
} };
const submit = (e) => { const submit = (e) => {
formRef.value.resetFields(); formRef.value.resetFields();
@ -114,7 +138,7 @@ export default defineComponent({
/// 加载部门 /// 加载部门
loadTree(); loadTree();
watch(props,(props) => { watch(props, (props) => {
formState.id = props.record.id; formState.id = props.record.id;
formState.username = props.record.username; formState.username = props.record.username;
formState.nickname = props.record.nickname; formState.nickname = props.record.nickname;
@ -125,7 +149,7 @@ export default defineComponent({
formState.deptId = props.record.deptId; formState.deptId = props.record.deptId;
formState.enable = props.record.enable; formState.enable = props.record.enable;
formState.remark = props.record.remark; formState.remark = props.record.remark;
}) });
return { return {
state, state,
@ -138,8 +162,13 @@ export default defineComponent({
labelCol: { span: 6 }, labelCol: { span: 6 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
replaceFields: {children:'children', title:'name', key:'id', value: 'id' } replaceFields: {
children: "children",
title: "name",
key: "id",
value: "id",
},
}; };
}, },
}); });
</script> </script>

210
src/view/user/modal/save.vue
View File

@ -8,60 +8,91 @@
@cancel="cancel" @cancel="cancel"
> >
<a-form <a-form
ref="formRef" ref="formRef"
:model="formState" :model="formState"
:rules="formRules" :rules="formRules"
:label-col="labelCol" layout="vertical"
:wrapper-col="wrapperCol"> >
<a-form-item ref="nickname" label="昵称" name="nickname"> <a-row :gutter="[16, 0]">
<a-input v-model:value="formState.nickname" /> <a-col :span="12">
</a-form-item> <a-form-item ref="nickname" label="昵称" name="nickname">
<a-form-item ref="username" label="账户" name="username"> <a-input v-model:value="formState.nickname" />
<a-input v-model:value="formState.username" /> </a-form-item>
</a-form-item> </a-col>
<a-form-item ref="password" label="密码" name="password"> <a-col :span="12">
<a-input v-model:value="formState.password" /> <a-form-item ref="username" label="账户" name="username">
</a-form-item> <a-input v-model:value="formState.username" />
<a-form-item ref="email" label="邮箱" name="email"> </a-form-item>
<a-input v-model:value="formState.email" /> </a-col>
</a-form-item> <a-col :span="12">
<a-form-item ref="phone" label="电话" name="phone"> <a-form-item ref="password" label="密码" name="password">
<a-input v-model:value="formState.phone" /> <a-input v-model:value="formState.password" />
</a-form-item> </a-form-item>
<a-form-item label="性别" name="gender"> </a-col>
<a-radio-group v-model:value="formState.gender"> <a-col :span="12">
<a-radio value="0">男</a-radio> <a-form-item ref="email" label="邮箱" name="email">
<a-radio value="1">女</a-radio> <a-input v-model:value="formState.email" />
</a-radio-group> </a-form-item>
</a-form-item> </a-col>
<a-form-item label="状态" name="enable"> <a-col :span="12">
<a-switch v-model:checked="formState.enable" /> <a-form-item ref="phone" label="电话" name="phone">
</a-form-item> <a-input v-model:value="formState.phone" />
<a-form-item label="岗位" name="postId"> </a-form-item>
<a-select v-model:value="formState.postId"> </a-col>
<a-select-option :value="post.id" v-bind:key="index" v-for="(post,index) in state.posts">{{post.name}}</a-select-option>
</a-select> <a-col :span="12">
</a-form-item> <a-form-item label="岗位" name="postId">
<a-form-item label="部门" name="deptId"> <a-select v-model:value="formState.postId">
<a-tree-select <a-select-option
v-model:value="formState.deptId" :value="post.id"
style="width: 100%" v-bind:key="index"
:tree-data="state.depts" v-for="(post, index) in state.posts"
placeholder="所属部门" >{{ post.name }}</a-select-option
replace >
tree-default-expand-all </a-select>
:replaceFields="replaceFields" </a-form-item>
> </a-col>
</a-tree-select> <a-col :span="12">
</a-form-item> <a-form-item label="部门" name="deptId">
<a-form-item label="备注" name="remark"> <a-tree-select
<a-textarea v-model:value="formState.remark" /> v-model:value="formState.deptId"
</a-form-item> style="width: 100%"
:tree-data="state.depts"
placeholder="所属部门"
replace
tree-default-expand-all
:replaceFields="replaceFields"
>
</a-tree-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="[16, 0]">
<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="12">
<a-form-item label="性别" name="gender">
<a-radio-group v-model:value="formState.gender">
<a-radio value="0">男</a-radio>
<a-radio value="1">女</a-radio>
</a-radio-group>
</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-form>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { message } from '@hwork/ant-design-vue'; import { message } from "@hwork/ant-design-vue";
import { list } from "@/api/module/post"; import { list } from "@/api/module/post";
import { save } from "@/api/module/user"; import { save } from "@/api/module/user";
import { tree } from "@/api/module/dept"; import { tree } from "@/api/module/dept";
@ -74,60 +105,62 @@ export default defineComponent({
}, },
emit: ["close"], emit: ["close"],
setup(props, context) { setup(props, context) {
const formRef = ref(); const formRef = ref();
const state = reactive({ const state = reactive({
posts: [], posts: [],
depts: [], depts: [],
}) });
const formState = reactive({ const formState = reactive({
enable: true, enable: true,
gender: "0", gender: "0",
}); });
const formRules = { const formRules = {
username: [ { required: true, message: '请输入账户', trigger: 'blur'} ], username: [{ required: true, message: "请输入账户", trigger: "blur" }],
nickname: [ { required: true, message: '请输入昵称', trigger: 'blur'} ], nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
password: [ { required: true, message: '请输入密码', trigger: 'blur'} ], password: [{ required: true, message: "请输入密码", trigger: "blur" }],
email: [ { required: true, message: '请输入邮箱', trigger: 'blur'} ], email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
phone: [ { required: true, message: '请输入电话', trigger: 'blur'} ], phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
postId: [ { required: true, message: '请选择岗位', trigger: 'blur'} ], postId: [{ required: true, message: "请选择岗位", trigger: "blur" }],
deptId: [ { required: true, message: '请选择部门', trigger: 'blur'} ], deptId: [{ required: true, message: "请选择部门", trigger: "blur" }],
tenantId: [ { required: true, message: '请选择租户', trigger: 'blur'} ] tenantId: [{ required: true, message: "请选择租户", trigger: "blur" }],
}; };
const loadPost = () => { const loadPost = () => {
list({}).then((response)=>{ list({}).then((response) => {
state.posts = response.data; state.posts = response.data;
}) });
} };
const loadTree = () => { const loadTree = () => {
tree({}).then((response)=>{ tree({}).then((response) => {
state.depts = response.data; state.depts = response.data;
})
}
const submit = (e) => {
formRef.value.validate().then(() => {
save(toRaw(formState)).then((response)=>{
if(response.success){
message.success({ content: '保存成功', duration: 1 }).then(()=>{
cancel();
});
}else{
message.error({ content: '保存失败', duration: 1 }).then(()=>{
cancel();
});
}
})
}).catch(error => {
console.log('error', error);
}); });
}; };
const submit = (e) => {
formRef.value
.validate()
.then(() => {
save(toRaw(formState)).then((response) => {
if (response.success) {
message.success({ content: "保存成功", duration: 1 }).then(() => {
cancel();
});
} else {
message.error({ content: "保存失败", duration: 1 }).then(() => {
cancel();
});
}
});
})
.catch((error) => {
console.log("error", error);
});
};
const cancel = (e) => { const cancel = (e) => {
formRef.value.resetFields(); formRef.value.resetFields();
context.emit("close", false); context.emit("close", false);
@ -149,8 +182,13 @@ export default defineComponent({
labelCol: { span: 6 }, labelCol: { span: 6 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
replaceFields: {children:'children', title:'name', key:'id', value: 'id' } replaceFields: {
children: "children",
title: "name",
key: "id",
value: "id",
},
}; };
}, },
}); });
</script> </script>