spfm-market-front/src/pages/main/terminal/advdetailed.vue

<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <toolList :tooltit='tooltit'></toolList>
            <div class="search">
				<mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
                <el-button class="btn-check" size="medium" type="primary" @click="outlist">导出
                </el-button>
            </div>
            <div class="tabbox">
                <table cellspacing='0' style="width: auto;">
                    <tr>
                        <th colspan="8">广告设计费</th>
                    </tr>
                    <tr>
                        <th>序号</th>
                        <th>文件编号</th>
                        <th>文件名称</th>
                        <th>提供物料</th>
                        <th>折后单价(含税,元)</th>
                        <th>数量</th>
                        <th>结算费用(含税,元)</th>
                    </tr>
                    <tr v-for="(item,index) in tabList">
                        <td>
                            <div style="text-align: left">{{index+1}}</div>
                        </td>
                        <td>
                            <div style="text-align: left;">{{item.code}}</div>
                        </td>
                        <td>
                            <div style="text-align: left;">{{item.name}}</div>
                        </td>
                        <td>
                            <div class="tab-f" style="text-align: left;" v-for="items in item.wl">{{items}}</div>
                        </td>
                        <td>
                            <div class="tab-f" style="text-align: left;" v-for="items in item.dj">{{items}}</div>
                        </td>
                        <td>
                            <div class="tab-f" style="text-align: left;" v-for="items in item.sl">{{items}}</div>
                        </td>
                        <td>
                            <div class="tab-f" style="text-align: left;" v-for="items in item.fy">{{items}}</div>
                        </td>
                        <!-- <td rowspan="11" v-if="index == 0">
                            <el-input v-model="factoryName" :disabled="disableStatus"
                                style="text-align: left;width: 200px;">
                            </el-input>
                        </td> -->
                    </tr>
                </table>
                <div style="text-align: right;padding-top: 10px;padding-right: 20px;">
                    <span style="margin-right: 20px;">合计数量：{{allNum}}</span>
                    <span>结算费用：{{allPrice}}</span>
                </div>
            </div>
        </div>
    </fullscreen>
</template>
<script>
    import mySearch from "../../../components/search.vue";
    import toolList from "../../../components/toolList.vue";

    export default {
        components: {
            mySearch,
            toolList
        },
        data() {

            return {
				searchList: [{
					type: 'input',
					tit: '供应商名称',
					value: '',
					width: '98%',
				},
    //             {
				// 	type: 'date',
				// 	tit: '开始时间',
				// 	value: '',
				// 	width: '32%',
				// }, {
				// 	type: 'date',
				// 	tit: '结束时间',
				// 	value: '',
				// 	width: '32%',
				// },
                ],
                tooltit: '广告设计费明细',
                fullscreen: false,
                total: 0,
                pageSize: 1,
                tableData: [],
                dialogStatus: false,
                disableStatus: false,
                titname: '终端',
                infolist: {},
                typeOptions: [{
                    dataCode: 1,
                    dataName: 111,
                }],
                userInfo: {},
                params: {},
                infoApply: [],
                tabList:[],
                allPrice:0,
                allNum:0,
            }
        },
        methods: {
			//搜索数据
			searchInfo(v) {
				this.params = {};
				v[0] ? this.params.supplier = v[0] : '';
				v[1] ? this.params.contractStartTimeFrom = this.$formatDate(v[1] , "YYYY-MM-DD") : '';
				v[2] ? this.params.contractStartTimeTo = this.$formatDate(v[2] , "YYYY-MM-DD") : '';
				this.getList(this.params, this.pageSize);
			},
            //获取列表
            getList(v, n) {
                this.pageSize = n;
                let _this = this;
                this.$http({
                    url: "/market/designSupplier/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + n + '","pageSize":"10"}'
                    },
                    data: v,
                }).then((res) => {
                    this.tabList = res.data;
                    this.allPrice = res.data[res.data.length-1].amountPrice;
                    this.allNum = res.data[res.data.length-1].numTotal;
                    this.tabList.pop();
                });
            },
            // 分页
            currchange(v) {
                this.pageSize = v;
                this.getList(this.params, this.pageSize);
            },

            // =======================
            outlist() {
                this.$http({
                    url: "/market/DesignSupplier/download",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: {supplier:this.params.supplier},
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: 'application/vnd.ms-excel'
                        })
                        window.navigator.msSaveOrOpenBlob(blob,
                            new Date().getTime() + '.xlsx')
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data])
                        var downloadElement = document.createElement('a')
                        var href = window.URL.createObjectURL(blob)
                        downloadElement.href = href
                        downloadElement.download = new Date().getTime() + '.xlsx'
                        document.body.appendChild(downloadElement)
                        downloadElement.click()
                        document.body.removeChild(downloadElement)
                        window.URL.revokeObjectURL(href)
                    }
                });
            },
            getUser() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
                this.infolist = {
                    opNo: '',
                    opName: '',
                };
                this.infolist.opNo = this.userInfo.loginNo;
                this.infolist.opName = this.userInfo.loginName;

            }
        },
        mounted() {
            this.getList({}, 1);
            this.getUser();
        },
        created() {

        }
    }
</script>
<style scoped lang="scss">
    .onetab {
        margin-bottom: 20px;
        padding: 0 20px;
    }

    .titbox {
        div {
            float: right;

            i {
                font-size: 22px;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }


    .pageBox {
        text-align: right;
        margin-top: 10px;
    }

    .info-line {
        width: 100%;
        display: block;
        padding-left: 20px;

        div {
            width: 50%;
            display: inline-block;
        }

        span {
            width: 80px;
            display: inline-block;
            text-align: left;

            i {
                color: red;
                display: inline-block;
                padding-right: 5px;
            }
        }

        .el-select,
        .el-input {
            width: calc(100% - 100px);
        }
    }

    .online {
        width: 100%;

        .el-select {
            width: calc(100% - 100px);
        }

        span {
            vertical-align: top;
        }

        .el-textarea {
            width: calc(100% - 100px);
        }
    }

    .tabbox {
        margin-top: 15px;
        height: calc(100vh - 300px);
        overflow-y: scroll;

        table {
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            text-align: center;
            width: 100%!important;
        }

        tr {
            // width: 100%;
        }

        th {
            border: 1px solid #ddd;
            border-bottom: 0;
            border-right: 0;
            padding: 5px 10px;
            font-size: 14px;
        }

        td {
            border: 1px solid #ddd;
            border-bottom: 0;
            border-right: 0;
            // padding: 5px 10px;
            font-size: 12px;
            width: 10%;
            div{
                padding-left: 10px;
            }
        }
    }
    .tab-f{
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }
    .tab-f:last-child{
        border-bottom: 0;
    }
</style>