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 13:22:40 +08:00
parent f264d03008
commit f5751c70d9
4 changed files with 369 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
src/view/dict/modal/data/edit.vue
View File

@ -1,130 +1,158 @@
<template> <template>
<a-modal :open="visible" title="修改字典" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel"> <a-modal
<a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol"> :open="visible"
<a-form-item ref="label" label="中文标签" name="label"> title="修改字典"
<a-input v-model:value="formState.label" /> cancelText="取消"
</a-form-item> okText="提交"
<a-form-item ref="value" label="标识" name="value"> @ok="submit"
<a-input v-model:value="formState.value" /> @cancel="cancel"
</a-form-item> >
<a-form-item ref="code" label="类型" name="code"> <a-form
<a-input v-model:value="formState.code" /> ref="formRef"
</a-form-item> :model="formState"
<a-form-item ref="color" label="颜色" name="color"> :rules="formRules"
<a-input v-model:value="formState.color" /> layout="vertical"
</a-form-item> >
<a-form-item ref="sort" label="排序" name="sort"> <a-row :gutter="[16, 0]">
<a-input-number v-model:value="formState.sort" /> <a-col :span="12">
</a-form-item> <a-form-item ref="label" label="中文标签" name="label">
<a-form-item label="状态" name="enable"> <a-input v-model:value="formState.label" />
<a-switch v-model:checked="formState.enable" /> </a-form-item>
</a-form-item> </a-col>
<a-form-item label="备注" name="remark"> <a-col :span="12">
<a-textarea v-model:value="formState.remark" /> <a-form-item ref="value" label="标识" name="value">
</a-form-item> <a-input v-model:value="formState.value" />
</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="color" label="颜色" name="color">
<a-input v-model:value="formState.color" />
</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-form>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { import { message } from "@hwork/ant-design-vue";
message import { edit } from "@/api/module/dictData";
} from '@hwork/ant-design-vue'; import { defineComponent, reactive, ref, toRaw, watch } from "vue";
import { export default defineComponent({
edit props: {
} from "@/api/module/dictData"; visible: {
import { type: Boolean,
defineComponent,
reactive,
ref,
toRaw,
watch
} from "vue";
export default defineComponent({
props: {
visible: {
type: Boolean,
},
record: {
type: Object,
}
}, },
emit: ["close"], record: {
setup(props, context) { type: Object,
},
},
emit: ["close"],
setup(props, context) {
const formRef = ref();
const formRef = ref(); const formState = reactive({});
const formState = reactive({}); const formRules = {
name: [
const formRules = { {
name: [{
required: true, required: true,
message: '请输入名称', message: "请输入名称",
trigger: 'blur' trigger: "blur",
}, ], },
code: [{ ],
code: [
{
required: true, required: true,
message: '请输入标识', message: "请输入标识",
trigger: 'blur' trigger: "blur",
}, ] },
}; ],
};
watch(props, (props) => { watch(props, (props) => {
formState.id = props.record.id; formState.id = props.record.id;
formState.label = props.record.label; formState.label = props.record.label;
formState.value = props.record.value; formState.value = props.record.value;
formState.color = props.record.color; formState.color = props.record.color;
formState.code = props.record.code; formState.code = props.record.code;
formState.sort = props.record.sort; formState.sort = props.record.sort;
formState.enable = props.record.enable; formState.enable = props.record.enable;
formState.remark = props.record.remark; formState.remark = props.record.remark;
}) });
const submit = (e) => { const submit = (e) => {
formRef.value formRef.value
.validate() .validate()
.then(() => { .then(() => {
edit(toRaw(formState)).then((response) => { edit(toRaw(formState)).then((response) => {
if (response.success) { if (response.success) {
message.success({ message
content: '保存成功', .success({
duration: 1 content: "保存成功",
}).then(() => { duration: 1,
})
.then(() => {
cancel(); cancel();
}); });
} else { } else {
message.success({ message
content: '保存失败', .success({
duration: 1 content: "保存失败",
}).then(() => { duration: 1,
})
.then(() => {
cancel(); cancel();
}); });
} }
});
})
.catch(error => {
console.log('error', error);
}); });
}; })
.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);
}; };
return { return {
submit, submit,
cancel, cancel,
formRef, formRef,
formState, formState,
formRules, formRules,
labelCol: { labelCol: {
span: 6 span: 6,
}, },
wrapperCol: { wrapperCol: {
span: 18 span: 18,
}, },
}; };
}, },
}); });
</script> </script>

119
src/view/dict/modal/data/save.vue
View File

@ -8,38 +8,56 @@
@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="label" label="中文标签" name="label"> <a-row :gutter="[16, 0]">
<a-input v-model:value="formState.label" /> <a-col :span="12">
</a-form-item> <a-form-item ref="label" label="中文标签" name="label">
<a-form-item ref="value" label="标识" name="value"> <a-input v-model:value="formState.label" />
<a-input v-model:value="formState.value" /> </a-form-item>
</a-form-item> </a-col>
<a-form-item ref="code" label="类型" name="code"> <a-col :span="12">
<a-input v-model:value="formState.code" /> <a-form-item ref="value" label="标识" name="value">
</a-form-item> <a-input v-model:value="formState.value" />
<a-form-item ref="color" label="颜色" name="color"> </a-form-item>
<a-input v-model:value="formState.color" /> </a-col>
</a-form-item> <a-col :span="12">
<a-form-item ref="sort" label="排序" name="sort"> <a-form-item ref="code" label="类型" name="code">
<a-input-number v-model:value="formState.sort" /> <a-input v-model:value="formState.code" />
</a-form-item> </a-form-item>
<a-form-item label="状态" name="enable"> </a-col>
<a-switch v-model:checked="formState.enable" /> <a-col :span="12">
</a-form-item> <a-form-item ref="color" label="颜色" name="color">
<a-form-item label="备注" name="remark"> <a-input v-model:value="formState.color" />
<a-textarea v-model:value="formState.remark" /> </a-form-item>
</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-form>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { message } from '@hwork/ant-design-vue'; import { message } from "@hwork/ant-design-vue";
import { save } from "@/api/module/dictData"; import { save } from "@/api/module/dictData";
import { defineComponent, reactive, ref, toRaw, watch } from "vue"; import { defineComponent, reactive, ref, toRaw, watch } from "vue";
export default defineComponent({ export default defineComponent({
@ -49,49 +67,44 @@ 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 formState = reactive({ const formState = reactive({
sort: 0, sort: 0,
enable: "true", enable: "true",
}); });
watch(props,(props)=>{ watch(props, (props) => {
formState.code = props.record.code formState.code = props.record.code;
}) });
const formRules = { const formRules = {
name: [ name: [{ required: true, message: "请输入名称", trigger: "blur" }],
{ required: true, message: '请输入名称', trigger: 'blur'}, code: [{ required: true, message: "请输入标识", trigger: "blur" }],
],
code: [
{ required: true, message: '请输入标识', trigger: 'blur'},
]
}; };
const submit = (e) => { const submit = (e) => {
formRef.value formRef.value
.validate() .validate()
.then(() => { .then(() => {
save(toRaw(formState)).then((response)=>{ save(toRaw(formState)).then((response) => {
if(response.success){ if (response.success) {
message.success({ content: '保存成功', duration: 1 }).then(()=>{ message.success({ content: "保存成功", duration: 1 }).then(() => {
cancel(); cancel();
}); });
}else{ } else {
message.success({ content: '保存失败', duration: 1 }).then(()=>{ message.success({ content: "保存失败", duration: 1 }).then(() => {
cancel(); cancel();
}); });
} }
}); });
}) })
.catch(error => { .catch((error) => {
console.log('error', error); console.log("error", error);
}); });
}; };
@ -106,10 +119,10 @@ export default defineComponent({
formRef, formRef,
formState, formState,
formRules, formRules,
labelCol: { span: 6 }, labelCol: { span: 6 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 },
}; };
}, },
}); });
</script> </script>

223
src/view/dict/modal/edit.vue
View File

@ -1,122 +1,143 @@
<template> <template>
<a-modal :open="visible" title="修改字典" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel"> <a-modal
<a-form ref="formRef" :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol"> :open="visible"
<a-form-item ref="name" label="名称" name="name"> title="修改字典"
<a-input v-model:value="formState.name" /> cancelText="取消"
</a-form-item> okText="提交"
<a-form-item ref="code" label="标识" name="code"> @ok="submit"
<a-input v-model:value="formState.code" /> @cancel="cancel"
</a-form-item> >
<a-form-item ref="sort" label="排序" name="sort"> <a-form
<a-input-number v-model:value="formState.sort" /> ref="formRef"
</a-form-item> :model="formState"
<a-form-item label="状态" name="enable"> :rules="formRules"
<a-switch v-model:checked="formState.enable" /> layout="vertical"
</a-form-item> >
<a-form-item label="备注" name="remark"> <a-row :gutter="[16, 0]">
<a-textarea v-model:value="formState.remark" /> <a-col :span="12">
</a-form-item> <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-form>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { import { message } from "@hwork/ant-design-vue";
message import { edit } from "@/api/module/dict";
} from '@hwork/ant-design-vue'; import { defineComponent, reactive, ref, toRaw, watch } from "vue";
import { export default defineComponent({
edit props: {
} from "@/api/module/dict"; visible: {
import { type: Boolean,
defineComponent,
reactive,
ref,
toRaw,
watch
} from "vue";
export default defineComponent({
props: {
visible: {
type: Boolean,
},
record: {
type: Object,
}
}, },
emit: ["close"], record: {
setup(props, context) { type: Object,
},
},
emit: ["close"],
setup(props, context) {
const formRef = ref();
const formRef = ref(); const formState = reactive({});
const formState = reactive({}); const formRules = {
name: [
const formRules = { {
name: [{
required: true, required: true,
message: '请输入名称', message: "请输入名称",
trigger: 'blur' trigger: "blur",
}, ], },
code: [{ ],
code: [
{
required: true, required: true,
message: '请输入标识', message: "请输入标识",
trigger: 'blur' trigger: "blur",
}, ] },
}; ],
};
watch(props, (props) => { watch(props, (props) => {
formState.id = props.record.id; formState.id = props.record.id;
formState.name = props.record.name; formState.name = props.record.name;
formState.code = props.record.code; formState.code = props.record.code;
formState.sort = props.record.sort; formState.sort = props.record.sort;
formState.enable = props.record.enable; formState.enable = props.record.enable;
formState.remark = props.record.remark; formState.remark = props.record.remark;
}) });
const submit = (e) => { const submit = (e) => {
formRef.value formRef.value
.validate() .validate()
.then(() => { .then(() => {
edit(toRaw(formState)).then((response) => { edit(toRaw(formState)).then((response) => {
if (response.success) { if (response.success) {
message.success({ message
content: '保存成功', .success({
duration: 1 content: "保存成功",
}).then(() => { duration: 1,
})
.then(() => {
cancel(); cancel();
}); });
} else { } else {
message.success({ message
content: '保存失败', .success({
duration: 1 content: "保存失败",
}).then(() => { duration: 1,
})
.then(() => {
cancel(); cancel();
}); });
} }
});
})
.catch(error => {
console.log('error', error);
}); });
}; })
.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);
}; };
return { return {
submit, submit,
cancel, cancel,
formRef, formRef,
formState, formState,
formRules, formRules,
labelCol: { labelCol: {
span: 6 span: 6,
}, },
wrapperCol: { wrapperCol: {
span: 18 span: 18,
}, },
}; };
}, },
}); });
</script> </script>

82
src/view/dict/modal/save.vue
View File

@ -8,32 +8,43 @@
@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="name" label="名称" name="name"> <a-row :gutter="[16, 0]">
<a-input v-model:value="formState.name" /> <a-col :span="12">
</a-form-item> <a-form-item ref="name" label="名称" name="name">
<a-form-item ref="code" label="标识" name="code"> <a-input v-model:value="formState.name" />
<a-input v-model:value="formState.code" /> </a-form-item>
</a-form-item> </a-col>
<a-form-item ref="sort" label="排序" name="sort"> <a-col :span="12">
<a-input-number v-model:value="formState.sort" /> <a-form-item ref="code" label="标识" name="code">
</a-form-item> <a-input v-model:value="formState.code" />
<a-form-item label="状态" name="enable"> </a-form-item>
<a-switch v-model:checked="formState.enable" /> </a-col>
</a-form-item> <a-col :span="12">
<a-form-item label="备注" name="remark"> <a-form-item ref="sort" label="排序" name="sort">
<a-textarea v-model:value="formState.remark" /> <a-input-number style="width: 100%" v-model:value="formState.sort" />
</a-form-item> </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-form>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { message } from '@hwork/ant-design-vue'; import { message } from "@hwork/ant-design-vue";
import { save } from "@/api/module/dict"; import { save } from "@/api/module/dict";
import { defineComponent, reactive, ref, toRaw } from "vue"; import { defineComponent, reactive, ref, toRaw } from "vue";
export default defineComponent({ export default defineComponent({
@ -44,7 +55,6 @@ export default defineComponent({
}, },
emit: ["close"], emit: ["close"],
setup(props, context) { setup(props, context) {
const formRef = ref(); const formRef = ref();
const formState = reactive({ const formState = reactive({
@ -53,32 +63,28 @@ export default defineComponent({
}); });
const formRules = { const formRules = {
name: [ name: [{ required: true, message: "请输入名称", trigger: "blur" }],
{ required: true, message: '请输入名称', trigger: 'blur'}, code: [{ required: true, message: "请输入标识", trigger: "blur" }],
],
code: [
{ required: true, message: '请输入标识', trigger: 'blur'},
]
}; };
const submit = (e) => { const submit = (e) => {
formRef.value formRef.value
.validate() .validate()
.then(() => { .then(() => {
save(toRaw(formState)).then((response)=>{ save(toRaw(formState)).then((response) => {
if(response.success){ if (response.success) {
message.success({ content: '保存成功', duration: 1 }).then(()=>{ message.success({ content: "保存成功", duration: 1 }).then(() => {
cancel(); cancel();
}); });
}else{ } else {
message.success({ content: '保存失败', duration: 1 }).then(()=>{ message.success({ content: "保存失败", duration: 1 }).then(() => {
cancel(); cancel();
}); });
} }
}); });
}) })
.catch(error => { .catch((error) => {
console.log('error', error); console.log("error", error);
}); });
}; };