spfm-market-front/src/pages/main/advertising/materialAppMessage.vue

<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList>
            <div class="search">
                <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
                <el-button class="btn-check" size="medium" type="primary" @click="exportTempletelist">导出
                </el-button>
            </div>
            <div class="tabbox">
                <el-table height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
                    tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="region" label="城市">
                    </el-table-column>
                    <el-table-column prop="district" label="区县">
                    </el-table-column>

                    <el-table-column prop="selectedGys" label="供应商(全称)">
                    </el-table-column>
                    <el-table-column prop="useCase" label="使用场景">
                    </el-table-column>
                    <el-table-column prop="materialNo" label="物料编码">
                    </el-table-column>
                    <el-table-column prop="material" label="物料名称">
                    </el-table-column>
                    <el-table-column prop="unit" label="物料单位">
                    </el-table-column>
                    <el-table-column prop="spec" label="规格尺寸">
                    </el-table-column>
                    <el-table-column prop="chang" label="长(M)">
                    </el-table-column>
                    <el-table-column prop="kuan" label="宽(M)">
                    </el-table-column>
                    <el-table-column prop="coefficient" label="系数">
                    </el-table-column>

                    <el-table-column prop="quantity" label="数量">
                    </el-table-column>
                    <el-table-column prop="selectedGysPrice" label="结算金额(元,不含税)">
                    </el-table-column>
                </el-table>
                <el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
                    :total="total">
                </el-pagination>
            </div>
        </div>
</fullscreen>
</template>
<script>
import mySearch from "../../../components/search.vue";
import toolList from "../../../components/toolList";

export default {
    components: {
        mySearch,
        toolList,
    },
    data() {
       
        return {
            searchList: [
                {
                    type: "sel",
                    tit: "使用场景",
                    value: "",
                    width: "31%",
                    options: [
                        {
                            dataCode: "营业厅-VI改造-自有渠道",
                            dataName: "营业厅-VI改造-自有渠道"
                        },
                        {
                            dataCode: "营业厅-常规物料-自有渠道",
                            dataName: "营业厅-常规物料-自有渠道"
                        },
                        {
                            dataCode: "营业厅-VI改造-合作渠道",
                            dataName: "营业厅-VI改造-合作渠道"
                        },
                        {
                            dataCode: "营业厅-常规物料-合作渠道",
                            dataName: "营业厅-常规物料-合作渠道"
                        },
                        {
                            dataCode: "小区",
                            dataName: "小区"
                        },
                        {
                            dataCode: "校园",
                            dataName: "校园"
                        },
                        {
                            dataCode: "政企",
                            dataName: "政企"
                        }
                    ]
                },
                { type: "input", tit: "供应商", value: "", width: "31%" },
                { type: "input", tit: "城市名称", value: "", width: "31%" },
                { type: "input", tit: "区县名称", value: "", width: "31%" },
                { type: "input", tit: "物料编码", value: "", width: "31%" }
            ],
            tooltit: "宣传物料制作费用明细",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [],
            dialogStatus: false,
            disableStatus: false,
            titname: "",
            infolist: {},
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: "",
            delid: "",
            loading: false,
            loadinged: false,
            //使用场景
            sceneopt: [
                {
                    dataCode: "1",
                    dataName: "小区"
                },
                {
                    dataCode: "2",
                    dataName: "校园"
                },
                {
                    dataCode: "3",
                    dataName: "营业厅-VI改造-自有渠道"
                },
                {
                    dataCode: "4",
                    dataName: "营业厅-常规物料-自有渠道"
                },
                {
                    dataCode: "5",
                    dataName: '营业厅-VI改造-合作渠道'
                },
                {
                    dataCode: "6",
                    dataName: '营业厅-常规物料-合作渠道'
                },
                {
                    dataCode: "7",
                    dataName: "政企"
                }
            ],
            // 基础数据
            isAsicopt: [
                {
                    id: "0",
                    name: "是"
                },
                {
                    id: "1",
                    name: "否"
                }
            ],
            coefficientopt: [
                {
                    id: "0",
                    name: "按需录入"
                },
                {
                    id: "1",
                    name: "1"
                }
            ],
            //单位
            unitopt: [
                {
                    id: "0",
                    name: "平方米"
                },
                {
                    id: "1",
                    name: "个"
                },
                {
                    id: "2",
                    name: "延长米"
                },
                {
                    id: "3",
                    name: "套"
                },
                {
                    id: "4",
                    name: "组"
                }, {
                    id: "5",
                    name: "延米"
                }, {
                    id: '6',
                    name: '张'
                }
            ],
            //物料名称
            nameopt: [],
            //供应商
            suppOpt: [],
            usePlanceArr: [],
            metirialTypeopt: [],
            metirialCodeDisableStatus: false,
            // scene:[]
        };
    },
    methods: {
        exportTempletelist() {
            let data = this.params;
            // return
            this.$http({
                url: "/market/xcwlProcess/excelExportFeeDetail",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                responseType: "blob",
                data: {},
            }).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)
                }
            });
        },
        usePlance(v) {
            this.usePlanceArr = v;

        },
        closedia() {
            this.infolist = {};
            this.dialogStatus = false;
        },
        //搜索数据
        searchInfo(v) {
            this.params = {};
            v[0] ? (this.params.useCase = v[0]) : "";
            v[1] ? (this.params.selectedGys = v[1]) : "";
            v[2] ? (this.params.region = v[2]) : "";
            v[3] ? (this.params.district = v[3]) : "";
            v[4] ? (this.params.materialNo = v[4]) : "";
            this.getList(this.params, this.pageSize);
        },
        uploadBack(v) {
            let that = this;
            console.log(v);
            if (v.data.result == 0) {
                that.getList({}, 1);
                that.getUser();
                that.getMetirialType();
                that.getMetirialInfo();
            }
        },
        getMetirialInfo() {
            this.$http({
                url: "/market/cadvSecbuyMetirial/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {
                    dictCodePks: "metirialType"
                }
            }).then(res => {
                this.materialNameopt = res.data;
            });
        },
        getMetirialType() {
            this.$http({
                url: "/sysmgr/cfgDataDicts/queryMap",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {
                    dictCodePks: "metirialType"
                }
            }).then(res => {
                this.metirialTypeopt = res.data.body.metirialType;
            });
        },
        //获取列表
        getList(v, n) {
            this.pageSize = n;
            let _this = this;
            this.loading = true;
            this.tableData = [];
            this.$http({
                url: "/market/xcwlProcess/queryDonePage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: v
            }).then(res => {
                res.data.data.forEach(item => {
                    for (let i = 0; i < this.sceneopt.length; i++) {
                        if (this.sceneopt[i].dataCode == item.sceneName) {
                            item.sceneName = this.sceneopt[i].dataName;
                        }
                    }
                });
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },

        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen;
            }
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            this.$http({
                url: "/market/cadvSupplier/queryValidSupplierList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                // data: { buyTypeCode: "2" }
                data: {}
            }).then(res => {
                this.suppOpt = res.data;
            });
        }
    },
    mounted() {
        this.getList({}, 1);
        this.getUser();

        this.$http({
            url: "/sysmgr/cfgDataDicts/queryMap",
            method: "post",
            headers: {
                "Content-Type": "application/json"
            },
            data: {
                dictCodePks: "metirialType"
            }
        }).then(res => {
            this.metirialTypeopt = res.data.body.metirialType;
            // this.stypeList = res.data.body.materType;
        });
    },
    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;
        }
    }
}

.tabbox {
    margin-top: 15px;
}

.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);
    }
}
</style>