ticket-system/src/views/invoiceInOut/productManager/components/ChildGoodEditModal.vue

<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { ElDialog } from 'element-plus';
import { goodColumns } from '../config/columns';
import BasicDescriptions from "/@/components/BasicDescriptions";

import { NumberInput } from "/@/components/Input"
import { ref, watch} from 'vue';

const props = defineProps<{ 
    visible: boolean;
    index: any; 
    data: any; 
}>()

const emit = defineEmits(['submit'])
const visible = useVModel(props, 'visible')

const child_num = ref(0)


watch(() => visible.value, () => {
    if(!visible.value){  return }
    child_num.value = props.data.child_num
})

function handleSubmit(){
    emit('submit', props.index, { ...props.data, child_num: child_num.value })    
    visible.value = false
}
</script>

<template>
    <ElDialog
       v-model="visible"
       title="编辑子商品" 
       center
    >
        <BasicDescriptions style="overflow: hidden;" v-if="props.data" :data="props.data" :columns="goodColumns" />

        <div class="flex justify-between mt-[10px]">
            <div class="flex items-center">
                <p style="width: 110px">子商品比例:</p>
                <NumberInput v-model="child_num" placeholder="子商品比例" />
            </div>

            <ElButton type="primary" @click="handleSubmit">保存</ElButton>
        </div>
    </ElDialog>
</template>