|
|
@@ -1,36 +1,68 @@
|
|
|
<template>
|
|
|
- <app-view>
|
|
|
- <template #header>
|
|
|
- <app-navbar :title="inOutType === 1 ? '入库申请' : '出库申请'" />
|
|
|
- </template>
|
|
|
- <Form ref="formRef" class="g-form__container" @submit="onSubmit">
|
|
|
- <CellGroup inset>
|
|
|
- <Cell title="商品" :value="`${selectedRow.goodscode}/${selectedRow.goodsname}`" />
|
|
|
- <Field type="number" name="Qty" label="数量" v-model.trim="formData.Qty" placeholder="请输入数量" :rules="formRules.Qty" />
|
|
|
- <Field type="textarea" maxlength="250" autosize show-word-limit name="Remark" label="备注" v-model.trim="formData.Remark" placeholder="请输入备注" />
|
|
|
- </CellGroup>
|
|
|
- </Form>
|
|
|
- <template #footer>
|
|
|
- <div class="g-form__footer inset">
|
|
|
- <Button type="danger" round block @click="closed(true)">取消</Button>
|
|
|
- <Button type="danger" round block @click="formRef?.submit()">确认</Button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </app-view>
|
|
|
+ <app-modal direction="right-top" height="100%" width="100%" v-model:show="showModal" :refresh="refresh">
|
|
|
+ <app-view class="g-form">
|
|
|
+ <template #header>
|
|
|
+ <app-navbar :title="inOutType === 1 ? '入库申请' : '出库申请'" />
|
|
|
+ </template>
|
|
|
+ <Form ref="formRef" class="g-form__container" @submit="onSubmit">
|
|
|
+ <CellGroup inset>
|
|
|
+ <Cell title="商品" :value="`${selectedRow.goodscode}/${selectedRow.goodsname}`" />
|
|
|
+ <Field label="数量" type="number" name="Qty" v-model.trim="formData.Qty" placeholder="请输入数量" :rules="formRules.Qty" />
|
|
|
+ <Field label="方式" v-if="inOutType != 1" v-model="InOutModel" name="InOutModel" :rules="formRules.InOutModel" is-link @click-input="show = true" />
|
|
|
+ <Field type="textarea" maxlength="250" autosize show-word-limit name="Remark" label="备注" v-model.trim="formData.Remark" placeholder="请输入备注" />
|
|
|
+ </CellGroup>
|
|
|
+ <Popup v-model:show="show" position="bottom" teleport="body" round>
|
|
|
+ <Picker :columns="datalist" @cancel="onCancel" @confirm="onConfirm" >
|
|
|
+ <template #option="{ text, index }">
|
|
|
+ <slot name="option" :row="datalist[index]" :index="index">
|
|
|
+ <span>{{ text }}</span>
|
|
|
+ </slot>
|
|
|
+ </template>
|
|
|
+ </Picker>
|
|
|
+ </Popup>
|
|
|
+ </Form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="g-form__footer inset">
|
|
|
+ <Button type="primary" round block @click="closed(true)">取消</Button>
|
|
|
+ <Button type="danger" round block @click="formRef?.submit()">确认</Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </app-view>
|
|
|
+ </app-modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, PropType } from 'vue'
|
|
|
-import { Form, Field, Cell, CellGroup, FormInstance, Button, FieldRule } from 'vant'
|
|
|
+import { shallowRef, PropType, computed, onMounted } from 'vue'
|
|
|
+import { Popup, Picker, PickerConfirmEventParams, Form, Field, Cell, CellGroup, FormInstance, Button, FieldRule } from 'vant'
|
|
|
import { fullloading } from '@/utils/vant'
|
|
|
import { useGoodsInventoryApply } from '@/business/trade';
|
|
|
+import { getAppointmentModelOutList } from '@/constants/order';
|
|
|
+import AppModal from '@/components/base/modal/index.vue'
|
|
|
|
|
|
+// 是否弹出选择器
|
|
|
+const show = shallowRef(false)
|
|
|
const showModal = shallowRef(true)
|
|
|
const refresh = shallowRef(false) // 是否刷新父组件数据
|
|
|
const formRef = shallowRef<FormInstance>()
|
|
|
|
|
|
const { formData, formSubmit } = useGoodsInventoryApply()
|
|
|
|
|
|
+const datalist = computed(() => {
|
|
|
+ return getAppointmentModelOutList().map(e => {
|
|
|
+ return { text: e.label, value: e.value }
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+const InOutModel = shallowRef(datalist.value[0].text)
|
|
|
+
|
|
|
+const onConfirm = ({ selectedOptions: [option] }: PickerConfirmEventParams) => {
|
|
|
+ console.log(option)
|
|
|
+ show.value = false
|
|
|
+ formData.InOutModel = Number(option?.value)
|
|
|
+ InOutModel.value = option?.text?.toString() ?? ''
|
|
|
+ console.log(InOutModel.value, formData.InOutModel)
|
|
|
+}
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
selectedRow: {
|
|
|
type: Object as PropType<Model.UserGoodsInventoryRsp>,
|
|
|
@@ -53,6 +85,10 @@ const formRules: { [key in keyof Proto.GoodsInventoryApplyReq]?: FieldRule[] } =
|
|
|
}],
|
|
|
}
|
|
|
|
|
|
+const onCancel = () => {
|
|
|
+ show.value = false
|
|
|
+}
|
|
|
+
|
|
|
const onSubmit = () => {
|
|
|
const { goodsid } = props.selectedRow
|
|
|
formData.InoutType = props.inOutType
|
|
|
@@ -73,4 +109,13 @@ const closed = (isRefresh = false) => {
|
|
|
refresh.value = isRefresh
|
|
|
showModal.value = false
|
|
|
}
|
|
|
+
|
|
|
+// 暴露组件属性给父组件调用
|
|
|
+defineExpose({
|
|
|
+ closed,
|
|
|
+})
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ formData.InOutModel = getAppointmentModelOutList()[0]?.value
|
|
|
+})
|
|
|
</script>
|