|
|
@@ -3,37 +3,83 @@
|
|
|
<template #header>
|
|
|
<app-navbar title="采购详情" />
|
|
|
</template>
|
|
|
- <Form ref="formRef" @submit="onSubmit">
|
|
|
+ <Form ref="formRef" class="goods-details__form" @submit="onSubmit">
|
|
|
<CellGroup>
|
|
|
<app-select v-model="formData.THJDeliveryMode" name="THJDeliveryMode" label="交割方式"
|
|
|
:rules="formRules.THJDeliveryMode" :options="details.deliverymodes"
|
|
|
:optionProps="{ label: 'enumdicname', value: 'enumitemname' }" />
|
|
|
- <Field label="交割月份">
|
|
|
+ <Field label="交割月份" name="PresaleApplyID" :rules="formRules.PresaleApplyID">
|
|
|
<template #input>
|
|
|
- <app-select placeholder="开始月份" :options="deliveryMonths" :is-link="false"
|
|
|
- @confirm="onMonthChange" />
|
|
|
- <app-select v-model="presaleApplyId" placeholder="结束日期" :options="deliveryDays"
|
|
|
- :optionProps="{ label: 'enddate', value: 'presaleapplyid' }" :is-link="false"
|
|
|
- @confirm="onDayChange" />
|
|
|
+ <div class="form-month">
|
|
|
+ <app-select placeholder="开始月份" :options="deliveryMonths" :is-link="false"
|
|
|
+ @confirm="onMonthChange" />
|
|
|
+ <app-select placeholder="结束日期" :options="deliveryDays"
|
|
|
+ :optionProps="{ label: 'enddate', value: 'presaleapplyid' }" :is-link="false"
|
|
|
+ @confirm="onDayChange" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</Field>
|
|
|
<app-select v-model="formData.DepositID" name="DepositID" label="支付方式" :rules="formRules.DepositID"
|
|
|
- :options="presaleApplyDeposits" v-if="presaleApplyId" />
|
|
|
- <Field v-model="formData.Qty" name="Qty" type="digit" label="采购数量" placeholder="必填"
|
|
|
- :rules="formRules.Qty" />
|
|
|
- <Field label="收货信息" placeholder="请输入" @click="openComponent('address')" is-link
|
|
|
- v-if="showReceiptInfo" />
|
|
|
+ :options="presaleApplyDeposits" v-if="selectedDate?.presaleapplyid" />
|
|
|
+ <Field v-model="formData.Qty" name="Qty" type="digit" label="采购数量" :rules="formRules.Qty">
|
|
|
+ <template #input>
|
|
|
+ <div class="form-qty">
|
|
|
+ <div class="form-qty__input">
|
|
|
+ <input type="number" v-model="formData.Qty" placeholder="必填" />
|
|
|
+ <span>≤{{ selectedDate?.remainqty ?? 0
|
|
|
+ }}{{ getGoodsUnitName(details.goodsinfo?.unitid) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="form-qty__label">
|
|
|
+ <span>定金{{ deposit }}元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Field>
|
|
|
+ <Field label="收货信息" :rules="formRules.addressInfo" @click="openComponent('address')" is-link
|
|
|
+ v-if="showAddressInfo">
|
|
|
+ <template #input>
|
|
|
+ <div class="form-address">
|
|
|
+ <template v-if="validatorAddressInfo">
|
|
|
+ <span>联系人：{{ formData.ContactName }}</span>
|
|
|
+ <span>联系方式：{{ formData.ContactInfo }}</span>
|
|
|
+ <span v-if="formData.THJDeliveryMode === 3">目的地：{{ formData.DesAddress }}</span>
|
|
|
+ <span v-if="formData.ReceiptInfo">发票信息：{{ formData.ReceiptInfo }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span class="form-address__placeholder">必填</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </Field>
|
|
|
</CellGroup>
|
|
|
</Form>
|
|
|
- <Button type="primary" @click="formRef?.submit" round block>采购下单</Button>
|
|
|
- <component ref="componentRef" :is="componentMap.get(componentId)" @closed="closeComponent" v-if="componentId" />
|
|
|
+ <div class="goods-details__content">
|
|
|
+ <div class="">
|
|
|
+ <Button type="primary" @click="formRef?.submit" round block>采购下单</Button>
|
|
|
+ </div>
|
|
|
+ <div class="" v-if="selectedDate">
|
|
|
+ <span>参考价(元/{{ getGoodsUnitName(details.goodsinfo?.unitid) }})</span>
|
|
|
+ <span>{{ selectedDate.unitprice }}</span>
|
|
|
+ </div>
|
|
|
+ <Divider>历史价格走势</Divider>
|
|
|
+ <Divider>商品详情</Divider>
|
|
|
+ <div class="">
|
|
|
+ <template v-for="(url, index) in goodsImages" :key="index">
|
|
|
+ <img :src="url" alt="" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ formData }" @updated="updateForm"
|
|
|
+ @closed="closeComponent" v-if="componentId" />
|
|
|
</app-view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { shallowRef, computed, defineAsyncComponent } from 'vue'
|
|
|
-import { CellGroup, Cell, Button, Field, Form, FormInstance, Checkbox, Toast, FieldRule, Popup, Picker, PickerOption } from 'vant'
|
|
|
-import { fullloading, dialog } from '@/utils/vant'
|
|
|
+import { CellGroup, Button, Field, Form, FormInstance, Toast, FieldRule, Divider } from 'vant'
|
|
|
+import { fullloading } from '@/utils/vant'
|
|
|
+import { getImageUrl } from '@/filters'
|
|
|
+import { getGoodsUnitName } from '@/constants/unit'
|
|
|
import { useComponent } from '@/hooks/component'
|
|
|
import { useNavigation } from '@/hooks/navigation'
|
|
|
import { useWrstandardDetails } from '@/business/goods'
|
|
|
@@ -54,19 +100,15 @@ const formRef = shallowRef<FormInstance>()
|
|
|
const { details, getWrstandardDetails } = useWrstandardDetails(wrstandardid)
|
|
|
const { formData, formSubmit } = usePurchaseOrderDesting()
|
|
|
|
|
|
-// 表单验证规则
|
|
|
-const formRules: { [key in keyof Proto.SpotPresaleDestingOrderReq]?: FieldRule[] } = {
|
|
|
- THJDeliveryMode: [{
|
|
|
- message: '请选择交割方式',
|
|
|
- validator: () => {
|
|
|
- return !!formData.THJDeliveryMode
|
|
|
- }
|
|
|
- }],
|
|
|
-}
|
|
|
+// 交割日期列表
|
|
|
+const deliveryDays = shallowRef<Model.THJWrstandardDetailRsp['deliverymonth']>([])
|
|
|
+// 当前选中的交割日期
|
|
|
+const selectedDate = shallowRef<Model.THJWrstandardDetailRsp['deliverymonth'][number]>()
|
|
|
|
|
|
-// 是否显示收货信息
|
|
|
-const showReceiptInfo = computed(() => {
|
|
|
- return formData.THJDeliveryMode === 2 || formData.THJDeliveryMode === 3
|
|
|
+// 商品图片列表
|
|
|
+const goodsImages = computed(() => {
|
|
|
+ const pictureurls = details.value.goodsinfo?.pictureurls ?? ''
|
|
|
+ return pictureurls.split(',').map((path) => getImageUrl(path))
|
|
|
})
|
|
|
|
|
|
// 交割月份列表
|
|
|
@@ -84,35 +126,121 @@ const deliveryMonths = computed(() => {
|
|
|
return [...monthMap.values()]
|
|
|
})
|
|
|
|
|
|
-// 交割日期列表
|
|
|
-const deliveryDays = shallowRef<Model.THJWrstandardDetailRsp['deliverymonth']>([])
|
|
|
-// 当前选中的预售申请ID
|
|
|
-const presaleApplyId = shallowRef('')
|
|
|
-
|
|
|
// 预售申请列表
|
|
|
const presaleApplyDeposits = computed(() => {
|
|
|
const deposits = details.value.presaleapplydeposits ?? []
|
|
|
- return deposits.filter((e) => e.presaleapplyid === presaleApplyId.value).map(({ depositrate, presaleapplyid }) => ({
|
|
|
+ const presaleApplyId = selectedDate.value?.presaleapplyid
|
|
|
+
|
|
|
+ return deposits.filter((e) => e.presaleapplyid === presaleApplyId).map(({ depositid, depositrate }) => ({
|
|
|
label: `${depositrate * 100}%`,
|
|
|
- value: presaleapplyid
|
|
|
+ value: depositid
|
|
|
}))
|
|
|
})
|
|
|
|
|
|
+// 计算定价
|
|
|
+const deposit = computed(() => {
|
|
|
+ const { Qty = 0, DepositID } = formData.value
|
|
|
+ const { presaleapplydeposits } = details.value
|
|
|
+ const { unitprice = 0 } = selectedDate.value ?? {}
|
|
|
+ const apply = presaleapplydeposits?.find((e) => e.depositid === DepositID) // 选中的支付方式
|
|
|
+
|
|
|
+ if (apply) {
|
|
|
+ return unitprice * apply.depositrate * Qty
|
|
|
+ }
|
|
|
+ return 0
|
|
|
+})
|
|
|
+
|
|
|
+// 是否显示收货信息
|
|
|
+const showAddressInfo = computed(() => {
|
|
|
+ const { THJDeliveryMode } = formData.value
|
|
|
+ return THJDeliveryMode === 2 || THJDeliveryMode === 3
|
|
|
+})
|
|
|
+
|
|
|
+// 验证收货信息
|
|
|
+const validatorAddressInfo = computed(() => {
|
|
|
+ const { THJDeliveryMode, ContactName, ContactInfo, DesAddress } = formData.value
|
|
|
+ switch (THJDeliveryMode) {
|
|
|
+ case 2: {
|
|
|
+ if (ContactName && ContactInfo) return true
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ case 3: {
|
|
|
+ if (ContactName && ContactInfo && DesAddress) return true
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true
|
|
|
+})
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const formRules: { [key in keyof Proto.SpotPresaleDestingOrderReq | 'addressInfo']?: FieldRule[] } = {
|
|
|
+ THJDeliveryMode: [{
|
|
|
+ message: '请选择交割方式',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.value.THJDeliveryMode
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ PresaleApplyID: [
|
|
|
+ {
|
|
|
+ message: '请选择交割日期',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.value.PresaleApplyID
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ DepositID: [{
|
|
|
+ message: '请选择支付方式',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.value.DepositID
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ Qty: [{
|
|
|
+ message: '请输入采购数量',
|
|
|
+ validator: (val) => {
|
|
|
+ if (val) {
|
|
|
+ const qty = Number(val)
|
|
|
+ const { remainqty = 0 } = selectedDate.value ?? {}
|
|
|
+ if (qty > 0 && qty <= remainqty) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return '采购数量不正确'
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ addressInfo: [{
|
|
|
+ message: '请输入收货信息',
|
|
|
+ validator: () => {
|
|
|
+ return validatorAddressInfo.value
|
|
|
+ }
|
|
|
+ }],
|
|
|
+}
|
|
|
+
|
|
|
// 切换交割月份
|
|
|
const onMonthChange = (value: string) => {
|
|
|
const months = details.value.deliverymonth ?? []
|
|
|
- deliveryDays.value = months.filter((e) => e.endmonth === value)
|
|
|
- presaleApplyId.value = ''
|
|
|
+ deliveryDays.value = months.filter((e) => e.endmonth === value) // 重新过滤交割日期列表
|
|
|
+ selectedDate.value = undefined // 清除选中的交割日期
|
|
|
+ formData.value.PresaleApplyID = undefined
|
|
|
+ formRef.value?.validate('PresaleApplyID')
|
|
|
}
|
|
|
|
|
|
// 切换交割日期
|
|
|
const onDayChange = (value: string) => {
|
|
|
- presaleApplyId.value = value
|
|
|
+ const months = details.value.deliverymonth ?? []
|
|
|
+ selectedDate.value = months.find((e) => e.presaleapplyid === value)
|
|
|
+ formData.value.PresaleApplyID = Long.fromString(value)
|
|
|
+ formData.value.DepositID = undefined
|
|
|
+ formRef.value?.validate('PresaleApplyID')
|
|
|
+}
|
|
|
+
|
|
|
+// 更新表单数据
|
|
|
+const updateForm = (formValue: Proto.SpotPresaleDestingOrderReq) => {
|
|
|
+ formData.value = formValue
|
|
|
}
|
|
|
|
|
|
const onSubmit = () => {
|
|
|
fullloading(() => {
|
|
|
- formData.PresaleApplyID = Long.fromString(presaleApplyId.value)
|
|
|
formSubmit().then(() => {
|
|
|
Toast.success('下单成功')
|
|
|
}).catch((err) => {
|
