Cold_putoutstorage_web/src/views/stockcontrol/storageFrom/index.vue

<!--  -->
<template>
    <div class="storagePut">
        <searchAdd isButtom="查询" @event="eventFun">
            <template #searchConter>
                <el-form-item label="血液制品名称">
                    <el-select v-model.number="initParam.productId" filterable remote reserve-keyword placeholder="血液制品名称"
                        :remote-method="remoteMethod1" :loading="loading" clearable style="width: 200px;"
                        @clear="initParam.productId = null" @click="click1">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="生产企业">
                    <el-select v-model.number="initParam.enterpriseId" filterable remote reserve-keyword placeholder="生产企业"
                        :remote-method="remoteMethod2" :loading="loading" clearable @clear="initParam.enterpriseId = null"
                        @click="click2" style="width: 200px;">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="批准文号">
                    <el-input v-model="initParam.batchNumber" placeholder="血液制品批号" clearable style="width: 200px;" />
                </el-form-item>
                <el-form-item label="出库日期">
                    <el-date-picker v-model="data.datepick" type="daterange" placeholder="出/入库日期" clearable
                        start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD" style="width: 200px;"
                        @change="changFun" />
                </el-form-item>
                <el-form-item label="收货单位">
                    <el-select v-model="initParam.receivingUnit" filterable remote reserve-keyword placeholder="收货单位"
                        :remote-method="remoteMethod3" :loading="loading" clearable @click="click3" style="width: 200px;">
                        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="条码">
                    <el-input v-model="initParam.qrcode" placeholder="请输入条码" clearable style="width: 200px;" />
                </el-form-item>
            </template>
        </searchAdd>
        <bg istitle="基本信息">
            <template #btn>
                <Labour @scanCode="scanCodeFun"></Labour>
                <scanCode @scanCode="scanCodeFun" style="margin:0 10px;"></scanCode>
                <Outbound></Outbound>
                <downing></downing>
            </template>
            <template #bg>
                <tables ref="TableRef" :requestApi="stockOutList" :columns="columns" :initParam="initParam">
                    <template #right="{ row }">
                        <Editinventory :row="row" @editinvent="editinventFun"></Editinventory>
                    </template>
                </tables>
            </template>
        </bg>
    </div>
</template>

<script setup lang="ts">
import { 
    stockOutList,
    productList,//血液制品名称
    enterpriseList,//生产企业
    stockunit,//收发货单位
    medicineColumns,//表头
} from "@/api";
import Editinventory from './Editinventory.vue'
import { reactive, ref,onMounted,onBeforeMount } from "vue";
import tables from "@/components/table.vue";
import searchAdd from "@/components/searchAdd.vue";
import bg from '@/components/bg.vue'
import scanCode from './scanCode.vue'
import Labour from './Labour.vue'
import Outbound from './Outbound.vue'

import downing from './downing.vue'


const TableRef = ref()
import { columnsTableOut } from "@/plugins/rulesData";
//函数
const scanCodeFun = async ()=>{
    console.log('添加完成')
    TableRef.value?.getTableList()
}
//函数
const editinventFun = async ()=>{
    TableRef.value?.getTableList()
}

//函数
const datepickFn = ()=>{
    const today =  new Date()
    const year = today.getFullYear();
    const month = (today.getMonth() + 1).toString().padStart(2,'0'); // 注意月份从0开始，所以要加1
    const date = (today.getDate()).toString().padStart(2,'0');
    const j = year +'-' + month + '-'+date
    data.datepick = [j,j]
    initParam.startDate = j; initParam.endDate = j
}
onBeforeMount(()=>{//默认获取当天的时间
    // datepickFn()
})

const columns:any = []
//提交参数
const initParam = reactive({
    "batchNumber": "",
    "enterpriseId": null,
    "endDate": "",
    "startDate": "",
    "productId": null,
    "receivingUnit": "",
    "qrcode":''
})


const data:any = reactive({
    datepick: []
})
/**
 * 
 * @param val 子传值
 */
 const eventFun = (val: any) => {
    TableRef.value?.getTableList()
}
const loading = ref(false)
const list1 = ref<ListItem[]>([])//血液制品名称
const list2 = ref<ListItem[]>([])//生产企业
const list3 = ref<ListItem[]>([])//收发货单位
//函数
const click1 = async () => { options1.value = list1.value }
const click2 = async () => { options2.value = list2.value }
const click3 = async ()=>{options3.value = list3.value}

// 渲染表格
onMounted(async () => {
    let r:any = await medicineColumns({})
    if(r.code==200){
        let obj = [...r.data?.list]
     TableRef.value.tableColumns = [...obj,...columnsTableOut]
     }
     

    const result1: any = await productList({ age: 1, pageSize: 999 })//血液制品名称
    const result2: any = await enterpriseList({ age: 1, pageSize: 999 })//生产企业
    const result3: any = await stockunit({ type: 2 })//收发货单位


    list1.value = findMap(result1.data?.list || [], 'obj')
    list2.value = findMap(result2.data?.list || [], 'obj')
    list3.value = findMap(result3.data?.list || [],'map')

})
//函数
const changFun = async (e: any) => {
    if (e) { initParam.startDate = e[0]; initParam.endDate = e[1] }
    else { initParam.startDate = ""; initParam.endDate = "" }
}
interface ListItem {
    value: string
    label: string
}
const options1 = ref<ListItem[]>([])
const options2 = ref<ListItem[]>([])
const options3 = ref<ListItem[]>([])

const remoteMethod1 = async (query: string) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options1.value = list1.value.filter((item: any) => {
                return item.label.toLowerCase().includes(query.toLowerCase())
            })
        }, 200)
    } else {
        options1.value = []
    }
}

const remoteMethod2 = async (query: string) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options2.value = list2.value.filter((item: any) => {
                console.log('第一个', query, item)
                return item.label.toLowerCase().includes(query.toLowerCase())
            })
        }, 200)
    } else {
        options2.value = []
    }
}
const remoteMethod3 = async (query: string) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options3.value = list3.value.filter((item: any) => {
                return item.label.toLowerCase().includes(query.toLowerCase())
            })
        }, 200)
    } else {
        options3.value = []
    }
}
//函数
const findMap = (arr: any, obj: any) => {
    return arr.map((item: any) => {
        return { value: obj == 'obj' ? item.id : item, label: obj == 'obj' ? item.name : item }
    })
}





</script>
<style lang="scss">
.storagePut {
    user-select: none;
}
.el-form-item {
    // margin-bottom: 0;
}
</style>