练习时长两天半vue

<script setup lang="ts">
import {computed, ref} from "vue";
import {getScjhService,getWorkerService,getProcessService,addWorkInfoService} from "@/api/fprw.js";

const scjh = ref({
    generalOrder:'',
    divisionOrder:'',
    subordinateOrder:'',
    productName:'',
    batch:'',
    liucheng:'',
    quantity:'',
    nextTeam:'',
    startTime:'',
    endTime:''
})

const scjhs = ref([
    {
        generalOrder:'',
        divisionOrder:'',
        subordinateOrder:'',
        productName:'',
        batch:'',
        liucheng:'',
        quantity:'',
        nextTeam:'',
        startTime:'',
        endTime:''
    }
])

const getScjh = async () => {
    let result = await getScjhService()
    scjhs.value = result.data
}

getScjh()

const workers = ref([
    {
        id:'',
        name:'',
        teamName:''
    }
])

const getWorker = async () => {
    let result = await getWorkerService()
    workers.value = result.data
}
const fprwDialogVisible = ref(false)
const openFprwDialog = (row) =>{
    scjh.value = {
        generalOrder: row.generalOrder,
        divisionOrder: row.divisionOrder,
        subordinateOrder: row.subordinateOrder,
        productName: row.productName,
        batch: row.batch,
        liucheng: row.liucheng,
        quantity: row.quantity,
        nextTeam: row.nextTeam,
        startTime: row.startTime,
        endTime: row.endTime
    }

    getWorker()
    fprwDialogVisible.value = true
}

const workInfo = ref({
    generalOrder:'',
    divisionOrder:'',
    subordinateOrder:'',
    productName:'',
    batch:'',
    liucheng:'',
    process:'',
    startTime:'',
    endTime:'',
    id:'',
    name:'',
    quantity:'',
    status:''
})

const process = ref("")
const getProcess = async () => {
    let result = await getProcessService(scjh.value.nextTeam)
    process.value = result.data
}

const selectedWorkers = ref([]) // 选择的人员

const addWorkInfo = async () => {

    await getProcess()
    console.log(process.value)

    const totalQuantity = scjh.value.quantity  // 获取总的数量
    const workerCount = selectedWorkers.value.length  // 获取选择的人员数
    const baseQuantity = Math.floor(totalQuantity / workerCount)  // 计算每个人分配的基础数量（取整）
    const remainder = totalQuantity % workerCount    // 计算余数（不能整除的部分）

    for (let i = 0; i < workerCount; i++) {
        const worker = selectedWorkers.value[i]
        const assignedQuantity = baseQuantity + (i < remainder ? 1 : 0)
        workInfo.value = {
            generalOrder: scjh.value.generalOrder,
            divisionOrder: scjh.value.divisionOrder,
            subordinateOrder: scjh.value.subordinateOrder,
            productName: scjh.value.productName,
            batch: scjh.value.batch,
            liucheng: scjh.value.liucheng,
            process: process.value,
            startTime: scjh.value.startTime,
            endTime: scjh.value.endTime,
            id: worker.id,
            name: worker.name,
            quantity: assignedQuantity,
            status: process.value.split(',')[0]
        }
        await addWorkInfoService(workInfo.value)

    }

    fprwDialogVisible.value = false
}
</script>

<template>
    <h1>分配任务</h1>

    <el-table :data="scjhs" border style="width: 100%">
        <el-table-column prop="generalOrder" label="总制令" />
        <el-table-column prop="divisionOrder" label="分制令" />
        <el-table-column prop="subordinateOrder" label="子制令" />
        <el-table-column prop="productName" label="产品名" />
        <el-table-column prop="batch" label="批次" />
        <el-table-column prop="liucheng" label="流程" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="nextTeam" label="待分配班组" />
        <el-table-column prop="startTime" label="开始时间" />
        <el-table-column prop="endTime" label="结束时间" />
        <el-table-column label="操作">
            <template #default="{row}">
                <el-button type="primary" @click="openFprwDialog(row)">分配任务</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="fprwDialogVisible" title="分配任务"  width="500" draggable center>

        <el-form label-position="left" label-width="auto">
            <el-form-item label="总制令" >
                <el-input v-model="scjh.generalOrder"   disabled />
            </el-form-item>
            <el-form-item label="分制令">
                <el-input v-model="scjh.divisionOrder"   disabled />
            </el-form-item>
            <el-form-item label="子制令">
                <el-input v-model="scjh.subordinateOrder"   disabled />
            </el-form-item>
            <el-form-item label="产品名">
                <el-input v-model="scjh.productName"   disabled />
            </el-form-item>
            <el-form-item label="批次">
                <el-input v-model="scjh.batch"   disabled />
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="scjh.quantity"   disabled />
            </el-form-item>
            <el-form-item label="选定人员">
                <el-checkbox-group v-model="selectedWorkers">

                    <el-checkbox
                        v-for="worker in workers"
                        :key="worker.id"
                        :value="worker"
                    >
                        {{ worker.name }}
                    </el-checkbox>

                </el-checkbox-group>
            </el-form-item>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="fprwDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="addWorkInfo" >分配</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<style scoped >
demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>