hgwms-2098 fix 物料分类弹窗修改

hwork-master
A0066811 2025-11-07 09:56:41 +08:00
parent ce4105b45c
commit 87e3bdf933
2 changed files with 352 additions and 253 deletions

View File

@ -1,138 +1,179 @@
<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="categoryCode" label="种类编号" name="categoryCode"> title="修改"
<a-input v-model:value="formState.categoryCode" placeholder="请输入种类编号"/> cancelText="取消"
</a-form-item> okText="提交"
<a-form-item ref="categoryName" label="种类名称" name="categoryName"> @ok="submit"
<a-input v-model:value="formState.categoryName" placeholder="请输入种类名称"/> @cancel="cancel"
</a-form-item> >
<a-form-item ref="categoryDesc" label="种类描述" name="categoryDesc"> <a-form
<a-input v-model:value="formState.categoryDesc" placeholder="请输入种类描述"/> ref="formRef"
</a-form-item> :model="formState"
<a-form-item ref="treeLevel" label="树层级" name="treeLevel"> :rules="formRules"
<a-input v-model:value="formState.treeLevel" placeholder="请输入树层级"/> layout="vertical"
</a-form-item> >
<a-form-item ref="treeCode" label="树编号" name="treeCode"> <a-row :gutter="[16, 0]">
<a-input v-model:value="formState.treeCode" placeholder="请输入树编号"/> <a-col :span="12">
</a-form-item> <a-form-item ref="categoryCode" label="种类编号" name="categoryCode">
<a-form-item ref="isActive" label="是否有效" name="isActive"> <a-input
<a-select v-model:value="formState.isActive" :options="skuCategoryIsActive" laceholder="请选择是否有效"/> v-model:value="formState.categoryCode"
</a-form-item> placeholder="请输入种类编号"
<a-form-item label="备注" name="remark"> />
<a-textarea v-model:value="formState.remark" /> </a-form-item>
</a-form-item> </a-col>
<a-col :span="12">
<a-form-item ref="categoryName" label="种类名称" name="categoryName">
<a-input
v-model:value="formState.categoryName"
placeholder="请输入种类名称"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="categoryDesc" label="种类描述" name="categoryDesc">
<a-input
v-model:value="formState.categoryDesc"
placeholder="请输入种类描述"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="treeLevel" label="树层级" name="treeLevel">
<a-input
v-model:value="formState.treeLevel"
placeholder="请输入树层级"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="treeCode" label="树编号" name="treeCode">
<a-input
v-model:value="formState.treeCode"
placeholder="请输入树编号"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="isActive" label="是否有效" name="isActive">
<a-select
v-model:value="formState.isActive"
:options="skuCategoryIsActive"
laceholder="请选择是否有效"
/>
</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/wms/skuCategory";
} from '@hwork/ant-design-vue'; import { defineComponent, reactive, ref, toRaw, watch } from "vue";
import { export default defineComponent({
edit props: {
} from "@/api/wms/skuCategory"; visible: {
import { type: Boolean,
defineComponent, },
reactive, record: {
ref, type: Object,
toRaw, },
watch },
} from "vue"; emit: ["close"],
export default defineComponent({ setup(props, context) {
props: { const formRef = ref();
visible: {
type: Boolean, const formState = reactive({});
const skuCategoryIsActive = ref([
{
value: "1",
label: "是",
}, },
record: { {
type: Object, value: "0",
} label: "否",
}, },
emit: ["close"], ]);
setup(props, context) {
const formRef = ref(); watch(props, (props) => {
formState.id = props.record.id;
formState.categoryName = props.record.categoryName;
formState.categoryDesc = props.record.categoryDesc;
formState.categoryCode = props.record.categoryCode;
formState.treeLevel = props.record.treeLevel;
formState.treeCode = props.record.treeCode;
formState.fullTreeCode = props.record.fullTreeCode;
formState.isActive = props.record.isActive;
formState.remark = props.record.remark;
});
const formState = reactive({}); const formRules = {};
const skuCategoryIsActive = ref([{
value: '1',
label: '是',
}, {
value: '0',
label: '否',
}, ]);
watch(props, (props) => { const editKey = "add";
formState.id = props.record.id
formState.categoryName = props.record.categoryName
formState.categoryDesc = props.record.categoryDesc
formState.categoryCode = props.record.categoryCode
formState.treeLevel = props.record.treeLevel
formState.treeCode = props.record.treeCode
formState.fullTreeCode = props.record.fullTreeCode
formState.isActive = props.record.isActive
formState.remark = props.record.remark
})
const formRules = { const submit = (e) => {
}; message.loading({
content: "提交中...",
const editKey = "add"; key: editKey,
});
const submit = (e) => { formRef.value
message.loading({ .validate()
content: '提交中...', .then(() => {
key: editKey edit(toRaw(formState)).then((response) => {
}); if (response.success) {
formRef.value message
.validate() .success({
.then(() => { content: "保存成功",
edit(toRaw(formState)).then((response) => {
if (response.success) {
message.success({
content: '保存成功',
key: editKey, key: editKey,
duration: 1 duration: 1,
}).then(() => { })
.then(() => {
cancel(); cancel();
}); });
} else { } else {
message.success({ message
content: '保存失败', .success({
content: "保存失败",
key: editKey, key: editKey,
duration: 1 duration: 1,
}).then(() => { })
.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,
cancel,
formRef,
formState,
formRules,
skuCategoryIsActive,
submit, labelCol: {
cancel, span: 8,
formRef, },
formState, wrapperCol: {
formRules, span: 12,
skuCategoryIsActive, },
};
labelCol: { },
span: 8 });
},
wrapperCol: {
span: 12
},
};
},
});
</script> </script>

View File

@ -1,157 +1,215 @@
<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="categoryCode" label="种类编号" name="categoryCode"> title="新增"
<a-input v-model:value="formState.categoryCode" placeholder="请输入种类编号" /> cancelText="取消"
</a-form-item> okText="提交"
<a-form-item ref="categoryName" label="种类名称" name="categoryName"> @ok="submit"
<a-input v-model:value="formState.categoryName" placeholder="请输入种类名称" /> @cancel="cancel"
</a-form-item> >
<a-form-item ref="categoryDesc" label="种类描述" name="categoryDesc"> <a-form
<a-input v-model:value="formState.categoryDesc" placeholder="请输入种类描述" /> ref="formRef"
</a-form-item> :model="formState"
<a-form-item ref="treeLevel" label="树层级" name="treeLevel"> :rules="formRules"
<a-input v-model:value="formState.treeLevel" placeholder="请输入树层级" /> layout="vertical"
</a-form-item> >
<a-form-item ref="treeCode" label="树编号" name="treeCode"> <a-row :gutter="[16, 0]">
<a-input v-model:value="formState.treeCode" placeholder="请输入树编号" /> <a-col :span="12">
</a-form-item> <a-form-item ref="categoryCode" label="种类编号" name="categoryCode">
<a-form-item ref="isActive" label="是否有效" name="isActive"> <a-input
<a-select v-model:value="formState.isActive" :options="skuCategoryIsActive" :disabled="false" placeholder="请选择是否有效" /> v-model:value="formState.categoryCode"
</a-form-item> placeholder="请输入种类编号"
<a-form-item label="备注" name="remark"> />
<a-textarea v-model:value="formState.remark"/> </a-form-item>
</a-form-item> </a-col>
<a-col :span="12">
<a-form-item ref="categoryName" label="种类名称" name="categoryName">
<a-input
v-model:value="formState.categoryName"
placeholder="请输入种类名称"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="categoryDesc" label="种类描述" name="categoryDesc">
<a-input
v-model:value="formState.categoryDesc"
placeholder="请输入种类描述"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="treeLevel" label="树层级" name="treeLevel">
<a-input
v-model:value="formState.treeLevel"
placeholder="请输入树层级"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="treeCode" label="树编号" name="treeCode">
<a-input
v-model:value="formState.treeCode"
placeholder="请输入树编号"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item ref="isActive" label="是否有效" name="isActive">
<a-select
v-model:value="formState.isActive"
:options="skuCategoryIsActive"
:disabled="false"
placeholder="请选择是否有效"
/>
</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 { save } from "@/api/wms/skuCategory";
} from '@hwork/ant-design-vue';
import {
save
} from "@/api/wms/skuCategory";
import { import { defineComponent, reactive, ref, toRaw } from "vue";
defineComponent, export default defineComponent({
reactive, props: {
ref, visible: {
toRaw type: Boolean,
} from "vue"; },
export default defineComponent({ },
props: { emit: ["close"],
visible: { setup(props, context) {
type: Boolean, const formRef = ref();
const formState = reactive({
isActive: "1",
});
const skuCategoryIsActive = ref([
{
value: "1",
label: "是",
}, },
}, ]);
emit: ["close"],
setup(props, context) {
const formRef = ref(); const formRules = {
categoryCode: [
{
required: true,
message: "请输入种类编号",
trigger: "blur",
},
],
categoryName: [
{
required: true,
message: "请输入种类名称",
trigger: "blur",
},
],
categoryDesc: [
{
required: true,
message: "请输入种类描述",
trigger: "blur",
},
],
treeLevel: [
{
required: true,
message: "请输入树层级",
trigger: "blur",
},
],
treeCode: [
{
required: true,
message: "请输入树编号",
trigger: "blur",
},
],
fullTreeCode: [
{
required: true,
message: "请输入全树编号",
trigger: "blur",
},
],
isActive: [
{
required: true,
message: "是否有效",
trigger: "blur",
},
],
};
const formState = reactive({ const saveKey = "save";
isActive: "1",
const submit = (e) => {
message.loading({
content: "提交中...",
key: saveKey,
}); });
formRef.value
const skuCategoryIsActive = ref([{ .validate()
value: '1', .then(() => {
label: '是', save(toRaw(formState)).then((response) => {
}]); if (response.success) {
message
const formRules = { .success({
categoryCode: [{ content: "保存成功",
required: true,
message: '请输入种类编号',
trigger: 'blur'
}],
categoryName: [{
required: true,
message: '请输入种类名称',
trigger: 'blur'
}],
categoryDesc: [{
required: true,
message: '请输入种类描述',
trigger: 'blur'
}],
treeLevel: [{
required: true,
message: '请输入树层级',
trigger: 'blur'
}],
treeCode: [{
required: true,
message: '请输入树编号',
trigger: 'blur'
}],
fullTreeCode: [{
required: true,
message: '请输入全树编号',
trigger: 'blur'
}],
isActive: [{
required: true,
message: '是否有效',
trigger: 'blur'
}],
};
const saveKey = "save";
const submit = (e) => {
message.loading({
content: '提交中...',
key: saveKey
});
formRef.value
.validate()
.then(() => {
save(toRaw(formState)).then((response) => {
if (response.success) {
message.success({
content: '保存成功',
key: saveKey, key: saveKey,
duration: 1 duration: 1,
}).then(() => { })
.then(() => {
cancel(); cancel();
}); });
} else { } else {
message.success({ message
content: '保存失败', .success({
content: "保存失败",
key: saveKey, key: saveKey,
duration: 1 duration: 1,
}).then(() => { })
.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,
skuCategoryIsActive, skuCategoryIsActive,
labelCol: { labelCol: {
span: 8 span: 8,
}, },
wrapperCol: { wrapperCol: {
span: 12 span: 12,
}, },
}; };
}, },
}); });
</script> </script>