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

<template>
    <div>
        <div class="container">
            <el-form
                :model="infolist"
                ref="infolist"
                :rules="rules"
                class="container-box"
                label-width="80px"
            >
                <div>
                    <div class="section2">
                        <a
                            href="#"
                            style="margin: 20px 0;margin-right: 20px;"
                            @click="dialogApplication(1)"
                            >验收清单</a
                        >
                        <a
                            href="#"
                            style="margin: 20px 0;margin-right: 20px;"
                            @click="dialogApplication(2)"
                            >发货回执</a
                        >
                    </div>
                    <div>
                        <el-form-item class="info-line online">
                            <span>验收说明</span>
                            <el-input
                                v-model="examDescription"
                                type="textarea"
                                :rows="4"
                            ></el-input>
                        </el-form-item>
                    </div>

                    <div>
                        <el-form-item class="info-line online">
                            <span>验收证明</span>
                            <myUpload
                                @uploadBack="uploadBack"
                                :fileInfo="fileInfo"
                                :fileList="fileInfo.fileList"
                            >
                            </myUpload>
                        </el-form-item>
                    </div>
                </div>

                <div class="t-footer t-footer1">
                    <el-button
                        type="primary"
                        style="width: 120px"
                        @click="dialogCli(1)"
                        >完 成</el-button
                    >
                    <el-button @click="dialogCli(2)" style="width: 120px"
                        >取 消</el-button
                    >
                </div>
            </el-form>
        </div>
        <el-dialog
            title="验收清单"
            :visible.sync="ysListDialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
        >
            <el-form
                :model="infolist"
                ref="infolist"
                :rules="rules"
                style="height: 50vh;overflow-y: scroll; width:100%"
                :fullscreen="true"
            >
                <div class="info-line">
                    <el-table
                        :data="tableData"
                        style="width: 100%;"
                        border
                        size="large"
                        
                    >
                        <el-table-column prop="id" label="物料ID">
                        </el-table-column>
                        <el-table-column prop="regionName" label="地市公司">
                        </el-table-column>
                        <el-table-column prop="countyName" label="区县名称">
                        </el-table-column>
                        <el-table-column prop="channelCode" label="渠道编码">
                        </el-table-column>
                        <el-table-column prop="channelName" label="渠道名称">
                        </el-table-column>
                        <el-table-column prop="sceneName" label="场景">
                        </el-table-column>
                        <el-table-column prop="metirialType" label="物料类别">
                        </el-table-column>
                        <el-table-column prop="metirialCode" label="物料编码">
                        </el-table-column>
                        <el-table-column prop="metirialName" label="物料名称">
                        </el-table-column>
                        <el-table-column prop="unit" label="物料单位">
                        </el-table-column>
                        <el-table-column prop="size" label="规格尺寸">
                        </el-table-column>
                        <el-table-column prop="length" label="长">
                        </el-table-column>
                        <el-table-column prop="width" label="宽">
                        </el-table-column>
                        <el-table-column prop="direction" label="横竖">
                        </el-table-column>
                        <el-table-column prop="coefficient" label="系数">
                        </el-table-column>
                        <el-table-column prop="price" label="单价">
                        </el-table-column>
                        <el-table-column
                            prop="quantity"
                            label="数量"
                            width="100"
                        >
                        </el-table-column>
                        <el-table-column prop="priority" label="优先级">
                        </el-table-column>
                        <el-table-column label="结算金额" width="140px" prop="settlementAmount">
                            <template slot-scope="scope">
                            <div>
                                {{
                                    scope.row.quantity *
                                        scope.row.price *
                                        scope.row.coefficient
                                }}
                            </div>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form>

            <div class="t-footer">
                <el-button type="primary" @click="downloadExcel">下载</el-button
                >
                
                <el-button @click="ysListDialogStatus = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="发货回执"
            :visible.sync="feedbackListDialogStatus"
            width="30%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
        >
            <el-form
                :model="infolist"
                ref="infolist"
                :rules="rules"
                style="height: 20vh;"
            >
                <div class="info-line">
                    <!-- <a :href="feedbackList">{{ feedbackList }}</a> -->
                    {{ feedbackList }}
                </div>
            </el-form>

            <div class="t-footer">
                <!-- <el-button type="primary" @click="dialogSubmit()"
                    >确 定</el-button
                > -->
                <el-button @click="feedbackListDialogStatus = false"
                    >取 消</el-button
                >
            </div>
        </el-dialog>
        <myMessage
            :messTit="messTit"
            @closeMessage="closeMessage(1)"
            :centerDialogVisible="centerDialogVisible"
            v-if="centerDialogVisible"
        ></myMessage>
    </div>
</template>
<script>
import mySearch from "../../../components/search.vue";
import myUpload from "../../../components/upload.vue";
import deptTreeOnly from "../../../components/deptTreeOnly.vue";

export default {
    components: {
        mySearch,
        myUpload,
        deptTreeOnly
    },
    data() {
        const terminalTypeName = (rule, value, callback) => {
            if (!this.infolist.tit) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        return {
            rules: {
                terminalTypeName: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: terminalTypeName
                    }
                ]
            },
            fullscreen: false,
            tableData: [],
            disableStatus: false,
            infolist: {},
            terminal: "758639528378826752",
            userInfo: {},
            params: {},
            attList: [],
            loadinged: false,
            options: [],
            materType: "",
            scene: "",
            fileInfo: {
                // type: "img",
                limit: 50,
                url: "/market/cknowledgeatt/upload",
                fileList: []
            },
            infomaterType: [],
            // metirialName: "",
            regionsts: false,
            multipleSelection: [],
            centerDialogVisible: false,
            delid: "",
            uploadstatus: false,
            userListOpt: [],
            ysListDialogStatus: false,
            feedbackListDialogStatus: false,
            examDescription: "",
            examList: {},
            feedbackList: ""
        };
    },
    methods: {
        dialogApplication(v) {
            if (v === 1) {
                //验收清单
                this.ysListDialogStatus = true;
                this.$http({
                    url: "/market/advSubtask/getYsqd",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: { 
                        woId: this.params.woId,
                        cityWoId: this.params.cityWoId,
                        countryWoId: this.params.countyWoId
                        }
                }).then(res => {
                    this.tableData = res.data;
                    // this.feedbackList = res.data.receipt;

                });

            } else if (v === 2) {
                this.feedbackListDialogStatus = true;
                this.$http({
                    url: "/market/advSubtask/getReceipt",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: { id: this.params.cityWoId }
                }).then(res => {
                    this.feedbackList = res.data.receipt;
                });
            }
        },
        //添加
        dialogCli(v) {
            if (v === 1) {
                let fileList = [];
                this.attList.forEach(item => {
                    fileList.push({
                        id: item.fileCode,
                        fileCode: item.fileCode,
                        fileName: item.fileName
                    });
                });
                // this.examList.id = "1";
                // this.examList.woCityId = this.params.cityWoId;
                // this.examList.id = this.params.countyWoId;
                // this.examList.woId = this.params.woId;

                this.examList.woId = this.params.woId,
                this.examList.woCityId = this.params.cityWoId,
                this.examList.id = this.params.countyWoId
                this.examList.attList = JSON.stringify(fileList);
                this.examList.remark = this.examDescription;
                this.submitInfo(
                    "/market/cadvBusiMetirialWo/acceptance",
                    this.examList
                );
            } else if (v === 2) {
                this.fileInfo.fileList = [];
                this.infolist = {};
                this.attList = [];
                return;
            }
        },
        submitInfo(u, v) {
            let _this = this;
            this.$refs.infolist.validate(valid => {
                if (valid) {
                    this.loadinged = true;
                    this.$http({
                        url: u,
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: v
                    }).then(res => {
                        this.loadinged = false;
                        if (res.data.result === 2) {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else {
                            _this.$message({
                                message: "成功",
                                type: "success"
                            });

                            // _this.getList();
                            this.attList = [];
                            this.fileInfo.fileList = [];
                            this.examDescription = "";
                            this.$router.push("/materialApplication");
                        }
                    });
                }
            });
        },
        downloadExcel(){
            this.$http({
                    url: "/market/cadvBusiMetirialWo/export",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    responseType: "blob",
                    data: { id: this.params.woId }
                }).then(res => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([res.data], {
                            type: "application/vnd.ms-excel"
                        });
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            // this.wo.bizName + ".xlsx"
                            "验收清单" + ".xlsx"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([res.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = "验收清单" + ".xlsx";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
        },
        closedia() {
            this.infolist = {};

            this.ysListDialogStatus = false;
            this.feedbackListDialogStatus = false;
        },

        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
        },
        uploadBack(v) {
            this.attList = v;
        },

        // getList() {
        //     this.$http({
        //         url: "/market/cadvBusiMetirialWo/getInitiateInitialization",
        //         method: "post",
        //         headers: {
        //             "Content-Type": "application/json"
        //         },
        //         data: {}
        //     }).then(res => {
        //     });
        // }
    },
    mounted() {
        if (JSON.stringify(this.$route.query) != "{}") {
            this.params.cityWoId = this.$route.query.cityWoId;
            this.params.countyWoId = this.$route.query.countyWoId;
            this.params.woId = this.$route.query.woId;
        }
        // this.getList(this.params);
        this.getUser();
    },
    watch: {
        $route() {
            // this.getList(this.params);
        }
    },
    created() {}
};
</script>
<style scoped lang="scss">
a {
    text-decoration: none;
    color: #169bd5;
    cursor: pointer;
}
.img-box {
    height: calc(100vh - 240px);
    overflow-y: scroll;

    .boximg {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        div {
            display: inline-block;
            width: 18%;
            margin-right: 2%;
            margin-bottom: 20px;
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: 3px;
            background: #fff;
            position: relative;
            height: 100px;

            img {
                width: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                // height: 100%;
            }
        }
    }
}

.boximgc {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 80px) !important;
    margin-left: 80px;

    div {
        display: inline-block;
        width: 18% !important;
        margin-right: 2%;
        margin-bottom: 20px;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 3px;
        background: #fff;
        position: relative;
        height: 100px;

        img {
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            // height: 100%;
        }
    }
}

.typebox {
    div {
        border: 1px solid #ddd;
        border-top: transparent;

        span {
            display: inline-block;
            width: 20%;
            line-height: 30px;
            padding: 10px;
            vertical-align: top;
        }

        .big {
            width: 35%;
            // background: #f4f4f4;
        }

        .small {
            width: 5%;
            text-align: center;
            // border-right: 1px solid #ddd;
        }

        .gys {
            width: 40%;
        }
    }
}

.t-footer {
    text-align: center;
    padding-right: 20px;
    margin-top: 20px;
}
.t-footer1 {
    padding-right: 0;
    margin-top: 80px;
}
.onetab {
    padding: 20px;
    height: calc(100% - 180px);
}

.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: 60%;
        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);
    }

    .el-checkbox-group {
        border: 1px solid #ddd;
        padding-left: 20px;
        height: 40px;
        width: calc(100% - 100px);
        border-radius: 5px;
    }
}

.online {
    width: 100%;

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

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: 60%;
    }
}

.section2 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    button {
        margin-bottom: 0 !important;
    }
    h3 {
        margin-right: 40px;
    }
}
/deep/.online .el-form-item__content {
    width: 100%;
    margin-left: 0 !important;
}

/deep/.el-upload {
    width: 100% !important;
    padding: 0 !important;
}
.el-row {
    margin: 0 !important;
}
.tree {
    width: calc(50% - 60px) !important;
    display: inline-block;
    margin-right: 20px;
    height: 300px;
    overflow-y: scroll;

    .el-icon-error {
        float: right;
        font-size: 20px;
        margin-top: 9px;
        cursor: pointer;
    }
}

.treeUser {
    margin: 0;
    border: 1px solid #ddd;

    p {
        background: #f4f4f4;
        padding: 0 20px;
        margin-bottom: 5px;
    }
}

.treeUserb {
    width: calc(100% - 100px);
    border: 1px solid #ddd;
    background: #f4f4f4;
    border-radius: 3px;
    height: auto;
    overflow: hidden;

    p {
        display: inline-block;
        padding: 0 20px;
        margin-bottom: 5px;
    }
}
/deep/.container .el-upload-dragger {
    height: 120px !important;
}
.upload-demo {
    width: 60% !important;
}
</style>