Skip to content

Commit d92404f

Browse files
YunaiVYunaiV
committed
✨ ERP：初始化其它入库的表单 20%
1 parent 2634363 commit d92404f

File tree

4 files changed

+632
-0
lines changed

4 files changed

+632
-0
lines changed

‎src/api/erp/stock/in/index.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import request from '@/config/axios'
2+
3+
// ERP 其它入库单 VO
4+
export interface StockInVO {
5+
id: number // 入库编号
6+
no: string // 入库单号
7+
supplierId: number // 供应商编号
8+
inTime: Date // 入库时间
9+
totalCount: number // 合计数量
10+
totalPrice: number // 合计金额，单位：元
11+
status: number // 状态
12+
remark: string // 备注
13+
}
14+
15+
// TODO 芋艿：稍后清理字段
16+
// ERP 其它入库单 API
17+
export const StockInApi = {
18+
// 查询ERP 其它入库单分页
19+
getStockInPage: async (params: any) => {
20+
return await request.get({ url: `/erp/stock-in/page`, params })
21+
},
22+
23+
// 查询ERP 其它入库单详情
24+
getStockIn: async (id: number) => {
25+
return await request.get({ url: `/erp/stock-in/get?id=` + id })
26+
},
27+
28+
// 新增ERP 其它入库单
29+
createStockIn: async (data: StockInVO) => {
30+
return await request.post({ url: `/erp/stock-in/create`, data })
31+
},
32+
33+
// 修改ERP 其它入库单
34+
updateStockIn: async (data: StockInVO) => {
35+
return await request.put({ url: `/erp/stock-in/update`, data })
36+
},
37+
38+
// 删除ERP 其它入库单
39+
deleteStockIn: async (id: number) => {
40+
return await request.delete({ url: `/erp/stock-in/delete?id=` + id })
41+
},
42+
43+
// 导出ERP 其它入库单 Excel
44+
exportStockIn: async (params) => {
45+
return await request.download({ url: `/erp/stock-in/export-excel`, params })
46+
},
47+
48+
// ==================== 子表（ERP 其它入库单项） ====================
49+
50+
// 获得ERP 其它入库单项列表
51+
getStockInItemListByInId: async (inId) => {
52+
return await request.get({ url: `/erp/stock-in/stock-in-item/list-by-in-id?inId=` + inId })
53+
}
54+
}

‎src/views/erp/stock/in/StockInForm.vue

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<template>
2+
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1080">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="100px"
8+
v-loading="formLoading"
9+
>
10+
<el-row :gutter="20">
11+
<el-col :span="12">
12+
<el-form-item label="入库单号" prop="no">
13+
<el-input v-model="formData.no" placeholder="请输入入库单号" />
14+
</el-form-item>
15+
</el-col>
16+
<el-col :span="12">
17+
<el-form-item label="入库时间" prop="inTime">
18+
<el-date-picker
19+
v-model="formData.inTime"
20+
type="date"
21+
value-format="x"
22+
placeholder="选择入库时间"
23+
/>
24+
</el-form-item>
25+
</el-col>
26+
<el-col :span="12">
27+
<el-form-item label="供应商" prop="supplierId">
28+
<el-input v-model="formData.supplierId" placeholder="请输入供应商编号" />
29+
</el-form-item>
30+
</el-col>
31+
<!-- TODO 芋艿：附件 -->
32+
<el-col :span="24">
33+
<el-form-item label="备注" prop="remark">
34+
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
35+
</el-form-item>
36+
</el-col>
37+
</el-row>
38+
</el-form>
39+
<!-- 子表的表单 -->
40+
<el-tabs v-model="subTabsName">
41+
<el-tab-pane label="入库产品清单" name="stockInItem">
42+
<StockInItemForm ref="stockInItemFormRef" :in-id="formData.id" />
43+
</el-tab-pane>
44+
</el-tabs>
45+
<el-form
46+
ref="formRef2"
47+
:model="formData"
48+
:rules="formRules"
49+
label-width="100px"
50+
v-loading="formLoading"
51+
>
52+
<el-form-item label="合计数量" prop="totalCount">
53+
<el-input v-model="formData.totalCount" placeholder="请输入合计数量" />
54+
</el-form-item>
55+
<el-form-item label="合计金额" prop="totalPrice">
56+
<el-input v-model="formData.totalPrice" placeholder="请输入合计金额，单位：元" />
57+
</el-form-item>
58+
</el-form>
59+
<template #footer>
60+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
61+
<el-button @click="dialogVisible = false">取 消</el-button>
62+
</template>
63+
</Dialog>
64+
</template>
65+
<script setup lang="ts">
66+
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
67+
import { StockInApi, StockInVO } from '@/api/erp/stock/in'
68+
import StockInItemForm from './components/StockInItemForm.vue'
69+
70+
/** ERP 其它入库单 表单 */
71+
defineOptions({ name: 'StockInForm' })
72+
73+
const { t } = useI18n() // 国际化
74+
const message = useMessage() // 消息弹窗
75+
76+
const dialogVisible = ref(false) // 弹窗的是否展示
77+
const dialogTitle = ref('') // 弹窗的标题
78+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
79+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
80+
const formData = ref({
81+
id: undefined,
82+
no: undefined,
83+
supplierId: undefined,
84+
inTime: undefined,
85+
totalCount: undefined,
86+
totalPrice: undefined,
87+
remark: undefined
88+
})
89+
const formRules = reactive({
90+
no: [{ required: true, message: '入库单号不能为空', trigger: 'blur' }],
91+
inTime: [{ required: true, message: '入库时间不能为空', trigger: 'blur' }],
92+
totalCount: [{ required: true, message: '合计数量不能为空', trigger: 'blur' }],
93+
totalPrice: [{ required: true, message: '合计金额，单位：元不能为空', trigger: 'blur' }]
94+
})
95+
const formRef = ref() // 表单 Ref
96+
const formRef2 = ref() // 表单 Ref TODO 芋艿：需要优化
97+
98+
/** 子表的表单 */
99+
const subTabsName = ref('stockInItem')
100+
const stockInItemFormRef = ref()
101+
102+
/** 打开弹窗 */
103+
const open = async (type: string, id?: number) => {
104+
dialogVisible.value = true
105+
dialogTitle.value = t('action.' + type)
106+
formType.value = type
107+
resetForm()
108+
// 修改时，设置数据
109+
if (id) {
110+
formLoading.value = true
111+
try {
112+
formData.value = await StockInApi.getStockIn(id)
113+
} finally {
114+
formLoading.value = false
115+
}
116+
}
117+
}
118+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
119+
120+
/** 提交表单 */
121+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
122+
const submitForm = async () => {
123+
// 校验表单
124+
await formRef.value.validate()
125+
await formRef2.value.validate() // TODO 芋艿：需要在看看
126+
// 校验子表单
127+
try {
128+
await stockInItemFormRef.value.validate()
129+
} catch (e) {
130+
subTabsName.value = 'stockInItem'
131+
return
132+
}
133+
// 提交请求
134+
formLoading.value = true
135+
try {
136+
const data = formData.value as unknown as StockInVO
137+
// 拼接子表的数据
138+
data.stockInItems = stockInItemFormRef.value.getData()
139+
if (formType.value === 'create') {
140+
await StockInApi.createStockIn(data)
141+
message.success(t('common.createSuccess'))
142+
} else {
143+
await StockInApi.updateStockIn(data)
144+
message.success(t('common.updateSuccess'))
145+
}
146+
dialogVisible.value = false
147+
// 发送操作成功的事件
148+
emit('success')
149+
} finally {
150+
formLoading.value = false
151+
}
152+
}
153+
154+
/** 重置表单 */
155+
const resetForm = () => {
156+
formData.value = {
157+
id: undefined,
158+
no: undefined,
159+
supplierId: undefined,
160+
inTime: undefined,
161+
totalCount: undefined,
162+
totalPrice: undefined,
163+
remark: undefined
164+
}
165+
formRef.value?.resetFields()
166+
formRef2.value?.resetFields() // TODO 芋艿：需要在看看
167+
}
168+
</script>

‎src/views/erp/stock/in/components/StockInItemForm.vue

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<template>
2+
<el-form
3+
ref="formRef"
4+
:model="formData"
5+
:rules="formRules"
6+
v-loading="formLoading"
7+
label-width="0px"
8+
:inline-message="true"
9+
>
10+
<el-table :data="formData" show-summary class="-mt-10px">
11+
<el-table-column label="序号" type="index" width="60" />
12+
<el-table-column label="仓库名称" min-width="150">
13+
<template #default="{ row, $index }">
14+
<el-form-item
15+
:prop="`${$index}.warehouseId`"
16+
:rules="formRules.warehouseId"
17+
class="mb-0px!"
18+
>
19+
<el-input v-model="row.warehouseId" placeholder="请输入仓库编号" />
20+
</el-form-item>
21+
</template>
22+
</el-table-column>
23+
<el-table-column label="产品名称" min-width="150">
24+
<template #default="{ row, $index }">
25+
<el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!">
26+
<el-input v-model="row.productId" placeholder="请输入产品编号" />
27+
</el-form-item>
28+
</template>
29+
</el-table-column>
30+
<el-table-column label="条码" min-width="150">
31+
<template #default="{ row }">
32+
<el-form-item class="mb-0px!">
33+
<el-input disabled v-model="row.productId" placeholder="请输入条码" />
34+
</el-form-item>
35+
</template>
36+
</el-table-column>
37+
<el-table-column label="单位" min-width="150">
38+
<template #default="{ row }">
39+
<el-form-item class="mb-0px!">
40+
<el-input disabled v-model="row.productUnitId" placeholder="请输入单位编号" />
41+
</el-form-item>
42+
</template>
43+
</el-table-column>
44+
<el-table-column label="数量" prop="count" min-width="150">
45+
<template #default="{ row, $index }">
46+
<el-form-item :prop="`${$index}.count`" :rules="formRules.count" class="mb-0px!">
47+
<el-input v-model="row.count" placeholder="请输入商品数量" />
48+
</el-form-item>
49+
</template>
50+
</el-table-column>
51+
<el-table-column label="商品单价" min-width="150">
52+
<template #default="{ row, $index }">
53+
<el-form-item
54+
:prop="`${$index}.productPrice`"
55+
:rules="formRules.productPrice"
56+
class="mb-0px!"
57+
>
58+
<el-input v-model="row.productPrice" placeholder="请输入商品单价" />
59+
</el-form-item>
60+
</template>
61+
</el-table-column>
62+
<el-table-column label="合计金额" min-width="150">
63+
<template #default="{ row, $index }">
64+
<el-form-item
65+
:prop="`${$index}.totalPrice`"
66+
:rules="formRules.totalPrice"
67+
class="mb-0px!"
68+
>
69+
<el-input v-model="row.totalPrice" placeholder="请输入合计金额，单位：元" />
70+
</el-form-item>
71+
</template>
72+
</el-table-column>
73+
<el-table-column label="备注" min-width="150">
74+
<template #default="{ row, $index }">
75+
<el-form-item :prop="`${$index}.remark`" :rules="formRules.remark" class="mb-0px!">
76+
<el-input v-model="row.remark" placeholder="请输入备注" />
77+
</el-form-item>
78+
</template>
79+
</el-table-column>
80+
<el-table-column align="center" fixed="right" label="操作" width="60">
81+
<template #default="{ $index }">
82+
<el-button @click="handleDelete($index)" link>—</el-button>
83+
</template>
84+
</el-table-column>
85+
</el-table>
86+
</el-form>
87+
<el-row justify="center" class="mt-3">
88+
<el-button @click="handleAdd" round>+ 添加入库产品</el-button>
89+
</el-row>
90+
</template>
91+
<script setup lang="ts">
92+
import { StockInApi } from '@/api/erp/stock/in'
93+
94+
const props = defineProps<{
95+
inId: undefined // 入库编号（主表的关联字段）
96+
}>()
97+
const formLoading = ref(false) // 表单的加载中
98+
const formData = ref([])
99+
const formRules = reactive({
100+
inId: [{ required: true, message: '入库编号不能为空', trigger: 'blur' }],
101+
warehouseId: [{ required: true, message: '仓库编号不能为空', trigger: 'blur' }],
102+
productId: [{ required: true, message: '产品编号不能为空', trigger: 'blur' }],
103+
productUnitId: [{ required: true, message: '商品单位编号不能为空', trigger: 'blur' }],
104+
productPrice: [{ required: true, message: '商品单价不能为空', trigger: 'blur' }],
105+
count: [{ required: true, message: '商品数量不能为空', trigger: 'blur' }],
106+
totalPrice: [{ required: true, message: '合计金额，单位：元不能为空', trigger: 'blur' }]
107+
})
108+
const formRef = ref() // 表单 Ref
109+
110+
/** 监听主表的关联字段的变化，加载对应的子表数据 */
111+
watch(
112+
() => props.inId,
113+
async (val) => {
114+
// 1. 重置表单
115+
formData.value = []
116+
// 2. val 非空，则加载数据
117+
if (!val) {
118+
return
119+
}
120+
try {
121+
formLoading.value = true
122+
formData.value = await StockInApi.getStockInItemListByInId(val)
123+
} finally {
124+
formLoading.value = false
125+
}
126+
},
127+
{ immediate: true }
128+
)
129+
130+
/** 新增按钮操作 */
131+
const handleAdd = () => {
132+
const row = {
133+
id: undefined,
134+
inId: undefined,
135+
warehouseId: undefined,
136+
productId: undefined,
137+
productUnitId: undefined,
138+
productPrice: undefined,
139+
count: undefined,
140+
totalPrice: undefined,
141+
remark: undefined
142+
}
143+
row.inId = props.inId
144+
formData.value.push(row)
145+
}
146+
147+
/** 删除按钮操作 */
148+
const handleDelete = (index) => {
149+
formData.value.splice(index, 1)
150+
}
151+
152+
/** 表单校验 */
153+
const validate = () => {
154+
return formRef.value.validate()
155+
}
156+
157+
/** 表单值 */
158+
const getData = () => {
159+
return formData.value
160+
}
161+
162+
defineExpose({ validate, getData })
163+
</script>

0 commit comments

Comments
 (0)