Cold_putoutstorage_web/src/views/stockcontrol/transmitReceive/downing.vue

<template> 
    <el-button el-button type="primary" icon="Download" @click="showdialog">收发登记表</el-button>
    <el-button el-button type="primary" icon="Download" @click="showdialogdialog">运输登记表</el-button>
    <el-dialog v-model="dialogFormVisible" title="收发登记表" :append-to-body="true" draggable width="30%">
        <el-form :model="initParam" ref="ruleFormRef" :rules="rules">
            <el-form-item label="品名" :label-width="formLabelWidth" prop="productId">
                <el-select v-model.number="initParam.productId" filterable remote reserve-keyword placeholder="品名"
                    :remote-method="remoteMethod1" :loading="loading" clearable style="width: 100%;"
                    @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="生产企业" :label-width="formLabelWidth" prop="enterpriseId">
                <el-select v-model.number="initParam.enterpriseId" filterable remote reserve-keyword placeholder="生产企业"
                    :remote-method="remoteMethod2" :loading="loading" clearable style="width: 100%;"
                    @clear="initParam.enterpriseId = null" @click="click2">
                    <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="规格" :label-width="formLabelWidth" prop="specId">
                <el-select v-model.number="initParam.specId" filterable remote reserve-keyword placeholder="规格"
                    :remote-method="remoteMethod3" :loading="loading" clearable style="width: 100%;"
                    @clear="initParam.specId = null" @click="click3">
                    <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="批号" :label-width="formLabelWidth" prop="batchNumber">
                <!-- <el-select v-model="initParam.batchNumber" class="m-2" placeholder="Select" style="width: 100%;">
                    <el-option v-for="item in options5" :key="item" :label="item" :value="item" />
                </el-select> -->
                <el-autocomplete v-model="initParam.batchNumber" :fetch-suggestions="querySearch" clearable 
                class="inputWidth" placeholder="批号" style="width: 100%;"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef,'excel')">导出</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef,'pdf')">打印</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible1" title="运输登记表" :append-to-body="true" draggable width="30%">
        <el-form :model="initParamWord" ref="ruleFormRef1" :rules="rules1">
            <el-form-item label="出库日期" :label-width="formLabelWidth" prop="date">
                <el-date-picker v-model="initParamWord.date" type="date" value-format="YYYY-MM-DD" clearable
                    style="width: 100%;" />
            </el-form-item>
            <el-form-item label="收货单位" :label-width="formLabelWidth" prop="receivingUnit">
                <!-- <el-select v-model.number="initParamWord.receivingUnit" filterable remote reserve-keyword placeholder="收货单位"
                    :remote-method="remoteMethod4" :loading="loading" clearable style="width: 100%;"
                    @clear="initParamWord.receivingUnit = null" @click="click4">
                    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->

                <el-autocomplete v-model="initParamWord.receivingUnit" :fetch-suggestions="querySearch1" clearable class="inputWidth"
                        placeholder="收货单位" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="品名" :label-width="formLabelWidth">
                <el-select v-model.number="initParamWord.productId" filterable remote reserve-keyword placeholder="品名"
                    :remote-method="remoteMethod1" :loading="loading" clearable style="width: 100%;"
                    @clear="initParamWord.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>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">Cancel</el-button>
                <el-button type="primary" @click="submitForm1(ruleFormRef1,'word')">导出</el-button>
                <el-button type="primary" @click="submitForm1(ruleFormRef1,'pdf')">打印</el-button>

            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inventoryExcel, transportWord,stockunit } from "@/api";
import { gradeName, enterpriseFun, stockunitFun, specification, LotNumber,shoubat } from "@/plugins/selectData";
import { reactive, ref, onMounted } from 'vue'
import { downPDF, downloadExcelFun } from "@/utils/download";
import type { FormInstance } from 'element-plus'
const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleFormRef1 = ref<FormInstance>()
const formLabelWidth = '80px'
const loading = ref(false)
interface RuleForm {
    batchNumber: any,
    enterpriseId?: any,
    productId?: any,
    specId: any,
    type: string
}
const initParam = reactive<RuleForm>({//请求参数
    "batchNumber":'',
    "enterpriseId": null,
    "productId": null,
    "specId": null,
    "type": ''
})
interface RuleForm1 {
    date: any,
    receivingUnit?: any,
    productId?: any,
    type: string
}
const initParamWord = reactive<RuleForm1>({//请求参数
    "date": null,
    "receivingUnit": '',
    "productId": null,
    "type": ''
})
onMounted(async () => {
    const result1: any = await gradeName()//疫苗名称
    const result2: any = await enterpriseFun()//生产企业
    const result3: any = await specification()//规格
    const result4: any = await stockunitFun(2)//收发货单位

    list1.value = findMap(result1 || [], 'obj')
    list2.value = findMap(result2 || [], 'obj')
    list3.value = findMap(result3 || [], 'obj')
    list4.value = findMap(result4 || [], 'map')
})
//函数
const findMap = (arr: any, obj: any) => {
    return arr.map((item: any) => {
        return { value: obj == 'obj' ? item.id : item, label: obj == 'obj' ? item.name : item }
    })
}
interface ListItem {
    value: string
    label: string
}

const click1 = async () => { options1.value = list1.value }
const click2 = async () => { options2.value = list2.value }
const click3 = async () => { options3.value = list3.value }
const click4 = async () => { options4.value = list4.value }


const list1 = ref<ListItem[]>([])//疫苗名称
const list2 = ref<ListItem[]>([])//生产企业
const list3 = ref<ListItem[]>([])//收发货单位
const list4 = ref<ListItem[]>([])//收发货单位


const options1 = ref<ListItem[]>([])
const options2 = ref<ListItem[]>([])
const options3 = ref<ListItem[]>([])
const options4 = 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 remoteMethod4 = async (query: string) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options4.value = list4.value.filter((item: any) => {
                return item.label.toLowerCase().includes(query.toLowerCase())
            })
        }, 200)
    } else {
        options3.value = []
    }
}
//函数
const showdialog = async ()=>{
    dialogFormVisible.value = true
    const reslut:any  = await LotNumber()
    console.log('数据1',reslut)
    const arrMap = reslut
    const arr:any = []
    arrMap.forEach((item:any)=>{
        arr.push({ value: item, link: item})  
    })
    restaurants.value = arr
    console.log('数据2',restaurants.value)
}

interface RestaurantItem {
  value: string
  link: string
}
const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  cb(results)
}


const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}





//显示运输登记
const showdialogdialog = async ()=>{
    dialogFormVisible1.value = true
    const reslut:any  = await shoubat()
    console.log('数据1',reslut)
    const arrMap = reslut
    const arr:any = []
    arrMap.forEach((item:any)=>{
        arr.push({ value: item, link: item})  
    })
    restaurants1.value = arr
    console.log('数据2',restaurants1.value)
}
const restaurants1 = ref<RestaurantItem[]>([])
const querySearch1 = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants1.value.filter(createFilter(queryString))
    : restaurants1.value
  cb(results)
}


const rules = reactive({
    batchNumber: [{ required: true, message: '必填项', trigger: 'change' }],
    enterpriseId: [{ required: true, message: '必填项', trigger: 'change' }],
    productId: [{ required: true, message: '必填项', trigger: 'change' }],
    specId: [{ required: true, message: '必填项', trigger: 'change' }],
})
const submitForm = async (formEl: FormInstance | undefined,ty:string) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            initParam.type = ty
            const result = await inventoryExcel(initParam)
            ty=='excel'?downloadExcelFun(result):downPDF(result)
        } else {
            console.log('error submit!', fields)
        }
    })
}
const rules1 = reactive({
    date: [{ required: true, message: '必填项', trigger: 'change' }],
    receivingUnit: [{ required: true, message: '必填项', trigger: 'change' }],
})
const submitForm1 = async (formEl: FormInstance | undefined,ty:any) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            initParamWord.type = ty
            const result:any = await transportWord(initParamWord)
            ty=='word'?downloadExcelFun(result):downPDF(result)
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<style lang="scss">
/* @import url(); 引入css类 */
.inputWidth {
    width: 200px;
}
</style>