ConsumSupplier-Platform/src/views/page/orderManage-sup/alreadyDelivery/alreadyDetail.vue

<template>
    <!-- 已出库 -->
    <div>
        <!-- <div class="common-card">
            <h3>订单状态</h3>
            <yl-step></yl-step>
        </div> -->
        <div class="common-card">
            <h3>基本信息</h3>
            <el-form :model="listForm" ref="listform" label-width="200px" class="grid-form-class">
            <div class="form-body">
            <div class="flex-css">
                <el-form-item label="出库单号" prop="delvOrdId">
                    <div class="content">
                        {{ listForm.delvOrdId }}
                    </div>
                </el-form-item>
                <el-form-item label="订单号" prop="purcOrdId">
                    <div class="content">
                        {{ listForm.purcOrdId }}
                    </div>
                </el-form-item>
                <el-form-item label="采购品种数" prop="detlCnt">
                    <div class="content">
                        {{ listForm.detlCnt }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="采购总数量" prop="qtySum">
                    <div class="content">
                        {{ listForm.qtySum }}
                    </div>
                </el-form-item>
                <el-form-item label="采购总金额" prop="docmkDate">
                    <div class="content">
                        {{ listForm.docmkDate }}
                    </div>
                </el-form-item>
                <el-form-item label="来源部门" prop="deptName">
              <div class="content">
                {{ listForm.deptName }}
              </div>
            </el-form-item>
            </div>
            <div  class="flex-css">
                <el-form-item label="客户名称" prop="branchName">
              <div class="content">
                {{ listForm.branchName }}
              </div>
            </el-form-item> 
                <el-form-item label="出库人" prop="docmker">
                    <div class="content">
                        {{ listForm.docmker }}
                    </div>
                </el-form-item>
                <el-form-item label="当前状态" prop="delvOrdStas">
                    <div class="content" v-if="listForm.delvOrdStas ==='C'">
                        已出库
                    </div>
                    <div class="content" v-if="listForm.delvOrdStas ==='R'">
                        被驳回
                    </div>
                    <div class="content" v-if="listForm.delvOrdStas ==='D'">
                        部分出库
                    </div>
                    <div class="content" v-if="listForm.delvOrdStas ==='Y'">
                        已入库
                    </div>
                    <div class="content" v-if="listForm.delvOrdStas ==='P'">
                        部分入库
                    </div>
                </el-form-item>
            </div>
            <div  class="flex-css">
                <el-form-item label="出库时间" prop="docmkDate">
                    <div class="content">
                        {{ listForm.docmkDate }}
                    </div>
                </el-form-item>
            </div>
            </div>
            </el-form>
        </div>
        <div class="common-card">
            <h3>订单明细</h3>
            <el-table
                :data="tableData"
                v-loading="loding"
                element-loading-text="加载中..."
                border
                :span-method="handleSpan"
            >
                <template slot="empty">
                    <img src="@/assets/nopage.png" alt />
                    <p>暂无数据</p>
                </template>
                <el-table-column fixed type="index" label="序号" width="60"/>
                <el-table-column label="耗材编码" prop="materialId" />
                <el-table-column label="医保编码" prop="hiCode" />
                <el-table-column label="耗材名称" width="300">
                    <template slot-scope="scope">
                        <mcs-info :info="scope.row"></mcs-info>
                    </template>
                </el-table-column>
                <el-table-column label="规格" prop="spec" />
                <el-table-column label="型号" prop="mol" />
                <el-table-column label="材质" prop="matl" />
                <el-table-column label="是否集采" prop="isFas" >
            <template #default="{ row }">
              <span v-if="row.isFas == '1'">否</span>
              <span v-if="row.isFas == '0'">是</span>
            </template>
          </el-table-column>
          <el-table-column label="计价单位" prop="prcUnt" />
          <el-table-column label="采购单位" prop="purcUnt" />
          <el-table-column label="包装内数量" prop="convrat" width="90px"/>
                <el-table-column label="批次号" prop="lotNum" />
                <el-table-column label="生产日期" prop="manuDate"  width="100px"/>
                <el-table-column label="有效期至" prop="prodExpy" width="100px"/>
                <el-table-column label="需求数量" prop="purcCnt" />
                <el-table-column label="剩余出库量" prop="toDelvCnt" width="90px"/>
                <el-table-column label="本次出库量" prop="delvCnt" width="90px"/>
                <el-table-column label="客户验收数量" prop="shppCnt" width="100px"/>
                <el-table-column label="客户拒收数量" prop="returnCnt" width="100px"/>
                <el-table-column label="报关单" prop="invoFileId" >
                    <template slot-scope="scope">
                    <yl-upload
                            :fileId="scope.row.invoFileId"
                            readonly
                            v-if="scope.row.invoFileId"
                        >
                        </yl-upload> 
                    </template>
                </el-table-column>
                <!-- <el-table-column label="随货单" prop="dyntFileId" /> -->
                <el-table-column label="备注" prop="momo" />
                <!-- <el-table-column label="同行单" prop="dyntFileId" width="100">
                    <template slot-scope="scope">
                        <yl-upload
                            :fileId="scope.row.dyntFileId"
                            readonly
                            v-if="scope.row.dyntFileId"
                        >
                        </yl-upload> -->
                        <!-- <div style="display:flex;justify-content: space-between;align-items: center;" v-if="scope.row.dyntFileId"> -->
                            <!-- <el-button type="text" @click="openPdf(scope.row)">
                                {{ scope.row.dyntFileId }}
                            </el-button> -->
                            <!-- <el-button
                                type="text"
                                @click="handleTong(scope.$index,scope.row)"
                                >选择同行单</el-button
                            > -->
                        <!-- </div>
                        <div v-else>
                            <el-button
                                type="text"
                                @click="handleTong(scope.$index,scope.row)"
                                >选择同行单</el-button
                            >
                        </div> -->
                    <!-- </template>
                </el-table-column> -->
            </el-table>

            <div class="foot-button" style="margin-top:30px;">
                <!-- <el-button type="danger" @click="handleOrderEnd" :loading="endLoad">结束订单</el-button> -->
                <el-button type="primary" @click="handleBack" :loading="endLoad">返 回</el-button>
            </div>
        </div>
        <!-- 选择发票 -->
        <el-dialog
            title="选择发票"
            :visible.sync="dialogFa"
            width="55%">
            <el-form :model="faForm" ref="faform" :inline="true">
                <el-form-item label="发票信息" prop="aa">
                    <el-input v-model="faForm.aa" placeholder="请输入发票名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getFaData('search')">查询</el-button>
                    <el-button @click="faReset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-loading="faLoading"
                element-loading-text="加载中"
                :data="faData"
                fit
                stripe
                border
            >
                <template slot="empty">
                    <img src="@/assets/nopage.png" alt />
                    <p>暂无数据</p>
                </template>
                <el-table-column type="index" label="序号" width="60"/>
                <el-table-column label="发票名称" prop="aa" />
                <el-table-column label="开票金额" prop="" />
                <el-table-column label="发票号码" prop="" />
                <el-table-column label="开票时间" prop="" />
                <el-table-column label="上传时间" prop="" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="handleRow(scope.row)"
                        >选择</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <yl-pagination
                v-show="faTotal > 0"
                :total="faTotal"
                :page.sync="faForm.current"
                :limit.sync="faForm.size"
                @pagination="getFaData"
            />
        </el-dialog>
        <!-- 选择同行单 -->
        <el-dialog
            title="选择同行单"
            :visible.sync="dialogTong"
            width="55%">
            <el-form :model="tongForm" ref="tongform" :inline="true">
                <el-form-item label="发票信息" prop="aa">
                    <el-input v-model="tongForm.aa" placeholder="请输入同行单名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getTongData('search')">查询</el-button>
                    <el-button @click="TongReset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-loading="tongLoading"
                element-loading-text="加载中"
                :data="tongData"
                fit
                stripe
                border
            >
                <template slot="empty">
                    <img src="@/assets/nopage.png" alt />
                    <p>暂无数据</p>
                </template>
                <el-table-column type="index" label="序号" width="60"/>
                <el-table-column label="票据名称" prop="aa" />
                <el-table-column label="票据金额" prop="" />
                <el-table-column label="票据单号" prop="" />
                <el-table-column label="开票时间" prop="" />
                <el-table-column label="上传时间" prop="" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="handleRowTong(scope.row)"
                        >选择</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <yl-pagination
                v-show="tongTotal > 0"
                :total="tongTotal"
                :page.sync="tongForm.current"
                :limit.sync="tongForm.size"
                @pagination="getTongData"
            />
        </el-dialog>
        <!-- PDF预览 -->
        <el-dialog
            title="PDF预览"
            class="dd"
            :visible.sync="dialogVisible"
            width="70%"
            center
            >
            <iframe :src="pdfSrc" frameborder="0" style="width: 100%; height: 100%"></iframe>
        </el-dialog>
    </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylPagination from "@/components/yl-pagination";
import mcsInfo from "@/views/components/mcs-info.vue";
import ylUpload from "@/components/yl-upload";
import { getOrdDetlList,finishDelvOrd } from "@/api/orderManage-sup/index";
    export default {
        components:{
            ylStep,ylPagination,ylUpload,mcsInfo
        },
        data() {
            return {
                pdfSrc: "",
                dialogVisible: false,
                endLoad: false,
                listForm: {
                    delvOrdId:"",
                    purcOrdId: "",
                    detlCnt: "",
                    qtySum: "",
                    deptName:"",
                    docmker: "",
                    docmkDate: "",
                    delvOrdStas: "",
                    branchName:"",
                },
                stasOptions: [
                    {value: 'A', lable: "未受理"},
                    {value: 'B', lable: "已受理"},
                    {value: 'R', lable: "被驳回"},
                    {value: 'C', lable: "已出库"},
                    {value: 'D', lable: "部分出库"},
                    {value: 'Y', lable: "已入库"},
                    {value: 'P', lable: "部分入库"}
                ],
                essdrugOptions: ["非基药","基药"],
                tableData: [],
                loading: false,
                // 选择发票
                dialogFa: false,
                faForm:{
                    aa: "",
                    current: 1,
                    size: 10,
                },
                faLoading: false,
                faData: [],
                faTotal: 0,
                faIndex: "",
                // 选择同行单
                dialogTong: false,
                tongForm:{
                    aa: "",
                    current: 1,
                    size: 10,
                },
                tongLoading: false,
                tongData: [],
                tongTotal: 0,
                tongIndex: "",
                code: "",
            }
        },
        created() {
            this.listForm.delvOrdId = this.$route.query.delvOrdId;
            this.listForm.purcOrdId = this.$route.query.purcOrdId;
            this.listForm.detlCnt = this.$route.query.detlCnt;
            this.listForm.qtySum = this.$route.query.qtySum;
            this.listForm.deptName = this.$route.query.deptName;
            this.listForm.docmker = this.$route.query.docmker;
            this.listForm.docmkDate = this.$route.query.docmkDate;
            this.listForm.delvOrdStas = this.$route.query.delvOrdStas;
            this.listForm.branchName = this.$route.query.branchName
            
            // this.stasOptions.forEach((i)=>{
            //     if(i.value == this.$route.query.stas){
            //         this.listForm.purcOrdStas = i.lable
            //     }
            // })
        },
        mounted () {
            this.getData();
        },
        methods: {
            getData() {
                this.listLoading = true;
                let data = {
                    delvOrdId: this.$route.query.delvOrdId,
                    purcOrdId: this.$route.query.purcOrdId
                }
                getOrdDetlList(data).then((res) => {
                    this.tableData = res.data;
                    this.tableData.forEach((i)=>{
                        i.essdrugType = this.essdrugOptions[i.essdrugType*1]
                    })
                    this.listLoading = false;
                    this.computeCell(this.tableData);
                }).catch((err) => {
                    this.listLoading = false;
                });
            },
            // 筛选合并项
            computeCell(tableData) {
                this.cellList = [];
                this.count = null;
                for (let i = 0; i < tableData.length; i++) {
                    if (i == 0) {
                        // 先设置第一项
                        this.cellList.push(1); // 初为1，若下一项和此项相同，就往cellList数组中追加0
                        this.count = 0;
                        console.log("索引", 0, this.count);
                    } else {
                        // 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
                        if (tableData[i].materialId == tableData[i - 1].materialId) {
                            this.cellList[this.count] += 1; // 增加计数
                            this.cellList.push(0); // 相等就往cellList数组中追加0
                            console.log("索引", i, this.count);
                        } else {
                            this.cellList.push(1); // 不等就往cellList数组中追加1
                            this.count = i; // 将索引赋值为计数
                            console.log("索引", i, this.count);
                        }
                    }
                }
            },
            // 合并列
            handleSpan({ row, column, rowIndex, columnIndex }){
                if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4
                || columnIndex === 5|| columnIndex === 6|| columnIndex === 7|| columnIndex === 8 ||columnIndex === 9
                || columnIndex === 10 || columnIndex === 15 || columnIndex === 14) {
                    // console.log("单元格数组，若下一项为0，则代表合并上一项", this.cellList);
                    const rowCell = this.cellList[rowIndex];
                    if (rowCell > 0) {
                        const colCell = 1;
                        // console.log(`动态竖向合并单元格, 第${colCell}列，竖向合并${rowCell}个单元格 `);
                        return {
                            rowspan: rowCell,
                            colspan: colCell,
                        };
                    } else {
                        // 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
                        // 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
                        return {
                            rowspan: 0,
                            colspan: 0,
                        };
                    }
                }
            },
            // 预览文件
            dataURLtoBlob(e) {
                let bstr = atob(e);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                } //确定解析格式
                let blob = new Blob([u8arr], { type: "application/pdf;chartset=UTF-8" });
                let url = window.URL.createObjectURL(blob);
                return url;
            },
            // 详情
            openPdf(row){
                // let file = {
                //     id: row.fileId,
                // };
                // uploadCheck(file).then((res) => {
                //     if (res.success == true) {
                //         this.dialogVisible = true;
                //         const a = this.dataURLtoBlob(res.data.fileContent);
                //         this.pdfSrc = a;
                //     }
                // });
            },
            // 获取发票信息
            getFaData(type) {
                if (type == "search") {
                    this.faForm.current = 1;
                }
                this.faData = [{aa:"资质文件.pdf",bb:"1111"},{aa:"出库文件.pdf",bb:"2222"}];
                this.faTotal = 1
                // this.faLoading = true;
            },
            faReset(){
                this.$refs.faForm.resetFields();
                this.getFaData();
            },
            // 选择发票
            handleFa(e,row){
                this.faIndex = e;
                this.dialogFa = true;
                this.getFaData();
                this.code = "";
                this.code = row.id;
            },
            // 选择发票 确认选择
            handleRow(row){
                // this.tableData[this.faIndex].fa = row.aa;
                this.tableData.forEach((i)=>{
                    if(i.id == this.code){
                        i.invoFileId = row.bb;
                    }
                })
                this.dialogFa = false;
            },
            // 获取同行单信息
            getTongData(type) {
                if (type == "search") {
                    this.tongForm.current = 1;
                }
                this.tongData = [{aa:"资质文件.pdf",bb:"1111"},{aa:"出库文件.pdf",bb:"2222"}];
                this.tongTotal = 1
                // this.tongLoading = true;
            },
            tongReset(){
                this.$refs.tongForm.resetFields();
                this.getTongData();
            },
            // 选择同行单
            handleTong(e,row){
                this.tongIndex = e;
                this.dialogTong = true;
                this.getTongData();
                this.code = "";
                this.code = row.id;
            },
            // 选择同行单 确认选择
            handleRowTong(row){
                // this.tableData[this.tongIndex].tong = row.aa;
                this.tableData.forEach((i)=>{
                    if(i.id == this.code){
                        i.dyntFileId = row.bb;
                    }
                })	
                this.dialogTong = false;
            },
            // 结束订单
            handleOrderEnd(){
                console.log(this.tableData,'tanleData')
                // this.tableData.forEach((item) => {
                //     if (!item.fa || !item.tong) {
                //         this.$message({
                //             message: "请选择发票和同行单",
                //             type: "info",
                //         });
                //         throw new Error("请选中发票和同行单");
                //     }
                // })
                this.$confirm("确认结束订单", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    let data = {
                        delvOrdId: this.$route.query.delvOrdId,
                    }
                    this.endLoad = true;
                    finishDelvOrd(data).then((res) => {
                        this.endLoad = false;
                    }).catch((err) => {
                        this.endLoad = false;
                    });
                })
            },
            // 返回
            handleBack() {
            this.$router.push({
                name: "purOrderDelivery",
                query:{spdId:this.$route.query.spdId,activeName:this.$route.query.activeName}
            });
            },
        },
    }
</script>

<style lang="scss" scoped>
::v-deep .el-table__body tr.hover-row>td{
    background-color: transparent !important;
}
::v-deep .el-table {
  th.el-table__cell.is-leaf,
  td.el-table__cell {
    border-bottom: 1px solid #eee;
  }
}
</style>