webb2b/src/packages/pc/views/bonded/components/detail-edit/index.vue

<!-- 保税仓业务-商品编辑 -->
<template>
    <app-drawer :title="titel" :width="860" v-model:show="show">
        <el-form ref="formRef" class="el-form--horizontal" label-width="150px" :model="formItem" :rules="formRules">
            <el-form-item label="商品名称" prop="goodsid">
                <el-select v-model="formItem.goodsid" @change="onChange">
                    <el-option :label="item.goodsname" :value="item.goodsid" v-for="(item, index) in goodsList"
                        :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="规格" prop="goodsspec">
                <el-input placeholder="请输入" v-model="formItem.goodsspec" />
            </el-form-item>
            <el-form-item label="成品对应原料明细" prop="rawdetail">
                <el-input placeholder="请输入" v-model="formItem.rawdetail" />
            </el-form-item>
            <el-form-item label="件数" prop="backagenum">
                <el-input-number placeholder="请输入" v-model="formItem.backagenum" />
            </el-form-item>
            <el-form-item label="净重(克拉)" prop="netweightct">
                <el-input-number placeholder="请输入" v-model="formItem.netweightct" />
            </el-form-item>
            <el-form-item label="净重(克)" prop="netweightgm">
                <el-input-number placeholder="请输入" v-model="formItem.netweightgm" />
            </el-form-item>
            <el-form-item label="连袋重(克)" prop="bagweightgm">
                <el-input-number placeholder="请输入" v-model="formItem.bagweightgm" />
            </el-form-item>
            <el-form-item label="单价(克)" prop="prepricegm">
                <el-input-number placeholder="请输入" v-model="formItem.prepricegm" />
            </el-form-item>
            <el-form-item label="总价" prop="totalprice">
                <el-input-number placeholder="请输入" v-model="formItem.totalprice" />
            </el-form-item>
            <el-form-item label="币种" prop="currencydes">
                <el-input placeholder="请输入" v-model="formItem.currencydes" />
            </el-form-item>
            <el-form-item label="报关总值" prop="customsvalue">
                <el-input-number placeholder="请输入" v-model="formItem.customsvalue" />
            </el-form-item>
            <el-form-item label="原产国" prop="origincountry">
                <el-input placeholder="请输入" v-model="formItem.origincountry" />
            </el-form-item>
            <el-form-item class="el-form-item--row" label="备注" prop="remark">
                <el-input type="textarea" v-model="formItem.remark" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="onCancel" plain>取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { ref, PropType } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { queryGZBSCGoods } from '@/services/api/bonded'
import AppDrawer from '@pc/components/base/drawer/index.vue'

const props = defineProps({
    titel: {
        type: String,
        default: '商品编辑'
    },
    selectedRow: {
        type: Object as PropType<Ermcp.BScinOutOrderDetailRsp>
    }
})

const emit = defineEmits(['update'])
const show = ref(true)
const formRef = ref<FormInstance>()
const goodsList = ref<Ermcp.GZBSCGoodsRsp[]>([])
const formItem = ref<Partial<Ermcp.BScinOutOrderDetailRsp>>({ detailid: '0', ...props.selectedRow })

const formRules: FormRules = {
    goodsid: [{
        required: true,
        message: '请选择商品'
    }],
    goodsspec: [{
        required: true,
        message: '请输入规格'
    }],
    rawdetail: [{
        required: true,
        message: '请输入成品对应原料明细'
    }],
    netweightct: [{
        required: true,
        message: '请输入净重'
    }],
    netweightgm: [{
        required: true,
        message: '请输入净重'
    }],
    bagweightgm: [{
        required: true,
        message: '请输入连袋重'
    }],
    prepricegm: [{
        required: true,
        message: '请输入单价'
    }],
    totalprice: [{
        required: true,
        message: '请输入总价'
    }],
    currencydes: [{
        required: true,
        message: '请输入币种'
    }],
    customsvalue: [{
        required: true,
        message: '请输入报关总值'
    }],
    origincountry: [{
        required: true,
        message: '请输入原产国'
    }],
}

const onChange = (goodsid: number) => {
    const item = goodsList.value.find((e) => e.goodsid === goodsid)
    formItem.value.goodsid = item?.goodsid
    formItem.value.goodsname = item?.goodsname
}

const onCancel = () => {
    show.value = false
}

const onSubmit = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            emit('update', formItem.value)
            onCancel()
        }
    })
}

queryGZBSCGoods({
    success: (res) => {
        goodsList.value = res.data
    }
})
</script>