Cold_putoutstorage_web/src/views/salesmanagement/storageOrderGoods/index.vue

<!--  -->
<template>
    <div class="sellManage">
        <searchAdd isButtom="查询" :inline="true" @event="eventFun">
            <template #searchConter>
                <el-form-item label="日期">
                    <el-date-picker v-model="data.initParam.date" type="date" value-format="YYYY-MM-DD"  clearable style="width: 200px;"/>
                </el-form-item>
                <el-form-item label="购货单位">
                    <el-select v-model="data.initParam.receivingUnit" filterable remote reserve-keyword placeholder="购货单位"
                        :remote-method="remoteMethod" :loading="loading" clearable style="width: 200px;" @click="click2">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </template>
        </searchAdd>
        <bg istitle="基本信息">
            <template #btn>
                <down :initParam="data.initParam"></down>
            </template>
            <template #bg>
                <tables ref="TableRef" :requestApi="orderList" :columns="columns" :initParam="data.initParam"></tables>
            </template>
        </bg>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted,nextTick} from 'vue'
import { orderList,stockunit } from "@/api";

import tables from "@/components/table.vue";
import searchAdd from "@/components/searchAdd.vue";
import down from "./down.vue";

import bg from '@/components/bg.vue'
const TableRef = ref()

const loading = ref(false)
interface ListItem {
    value: string
    label: string
}
const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const click2 = async ()=>{options.value = list.value }
onMounted(async() => {
    const result:any = await stockunit({type:2,name:''})
    let arr = result.data?.list || []
    list.value = arr.map((item:any) => {
        return { value: item, label: item}
    })
})
const remoteMethod = async(query: string) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options.value =  list.value.filter((item:any) => {
                return item.label.toLowerCase().includes(query.toLowerCase())
            })
        }, 200)
    } else {
        options.value = []
    }
}


// 渲染表格
const columns: any = [
    { prop: 'date', label: '日期', width: 120 },
    { prop: 'receiving_unit', label: '购货单位', width: 150 },
    { prop: 'product_name', label: '品种', width: 150 },
    { prop: 'dosage_form_name', label: '剂型', width: 100 },
    { prop: 'spec_name', label: '规格（剂/支或粒）', width: 150 },
    { prop: 'enterprise_name', label: '生产企业', width: 150 },
    { prop: 'batch_number', label: '血液制品批号', width: 150 },
    { prop: 'expiry_date', label: '失效日期', width: 120 },
    
    { prop: 'approval_number', label: '批准文号', width: 120 },
    { prop: 'quantity', label: '数量', width: 120 },
    { prop: 'unit_name', label: '单位', width: 80 },
    { prop: 'sales_unit_price', label: '单价', width: 120 },
    { prop: 'sales_money', label: '金额', 'min-width': 120 },
]

//请求参数
const data:any = reactive({
    datePicker: [],//时间选择
    initParam: {
        "date": "",
        "receivingUnit": ""
    }
})

//搜索
const eventFun = async ()=>{
    nextTick(() => {
        TableRef.value?.getTableList()
    })
}
</script>
<style lang="scss">
/* @import url(); 引入css类 */

</style>