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

<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList>
            <div class="search">
                <el-form
                :model="searchSection"
                ref="searchSection"
                :rules="rules"
                v-loading="loadinged"
            >
                <div class="info-line search-box">
                    <el-form-item prop="regionCode">
                        <span>地市名称</span>
                        <el-select
                            @change="changeSearch(1)"
                            clearable
                            v-model="searchSection.regionCode"
                            placeholder="地市名称"
                            @clear="clearSearch"
                        >
                            <el-option
                                v-for="item in regionOpt"
                                :key="item.compId"
                                :label="item.compName"
                                :value="item.compId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="countyCode">
                        <span>区县名称</span>
                        <el-select
                            :popper-append-to-body="false"
                            v-model="searchSection.countyCode"
                            placeholder="区县名称"
                            @change="changeSearch(2, $event)"
                            clearable
                        >
                            <el-option
                                v-for="item in countyOpt"
                                :key="item.compId"
                                :label="item.compName"
                                :value="item.compId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item prop="metirialType">
                        <span>物料类别</span>
                        <el-select
                            @change="changeSearch(3)"
                            clearable
                            v-model="searchSection.metirialType"
                            placeholder="物料类别"
                        >
                            <el-option
                                v-for="(items, index) in metirialTypeOpt"
                                :key="index"
                                :label="items"
                                :value="items"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                   <el-form-item prop="stsId">
                        <span>状态</span>
                        <el-select
                            @change="changeSearch(4)"
                            clearable
                            v-model="searchSection.stsId"
                            placeholder="状态"
                        >
                            <el-option
                                v-for="(items) in stsOpt"
                                :key="items.stsId"
                                :label="items.stsName"
                                :value="items.stsId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-button class="btn-check" size="medium" type="primary" plain icon="el-icon-search" @click="searchCli">搜索
                </el-button>
                </div>

            </el-form>


            </div>
            <div class="section2">
                <el-button
                    type="primary"
                    @click="dialogApplication(2)"
                    style="margin-right: 20px;margin-bottom: 20px;"
                    >审批轨迹</el-button
                >
                <el-button
                    type="primary"
                    @click="dialogApplication(3)"
                    style="margin-right: 20px;margin-bottom: 20px;"
                    >导出</el-button
                >
                <a
                    style="margin-right:50px; color:#169BD5; cursor:pointer"
                    @click="attStatus = true"
                    v-if="wo.fileUrl != null"
                    >下载附件</a
                >
            </div>
            <div class="tabbox">
                <el-table
                    height="calc(100% - 140px)"
                    class="com-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    size="small"
                    border
                    style="width: 100%"
                    v-loading="loading"
                >
                    <!-- <el-table-column type="selection" width="55">
                    </el-table-column> -->
                    <el-table-column prop="woSts" label="状态">
                        <template slot-scope="scope">
                            {{ stsArr[scope.row.woSts] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="regionName" label="地市公司">
                    </el-table-column>
                    <el-table-column prop="regionCode" label="公司编码">
                    </el-table-column>
                    <el-table-column prop="countyName" label="区县名称">
                    </el-table-column>
                    <el-table-column prop="countyCode" 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="sts" label="营业状态">
                    </el-table-column>
                    <el-table-column prop="quantity" label="数量" width="100">
                    </el-table-column>
                    <el-table-column prop="settlementAmount" label="结算金额">
                        <template slot-scope="scope">
                            <div>
                                {{
                                    scope.row.quantity *
                                        scope.row.price *
                                        scope.row.coefficient
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="supplierName" label="供应商">
                    </el-table-column>
                </el-table>
                <!-- <el-pagination
                    class="pageBox"
                    @current-change="currchange"
                    layout="prev, pager, next"
                    background
                    :total="total"
                >
                </el-pagination> -->
            </div>
        </div>
        <!-- 审批轨迹 -->
        <el-dialog
            :title="titname"
            :visible.sync="approvalStepDialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <div v-loading="loadinged">
                <div
                    style="margin-bottom: 20px;padding: 0 20px;"
                    v-if="titname != '添加'"
                >
                    <el-table
                        class="com-table"
                        ref="multipleTable"
                        :data="rovaList"
                        tooltip-effect="dark"
                        size="small"
                        border
                        style="width: 100%"
                    >
                        <el-table-column prop="woId" label="编号">
                        </el-table-column>
                        <el-table-column prop="name" label="环节">
                        </el-table-column>
                        <el-table-column prop="opName" label="处理人">
                        </el-table-column>
                        <el-table-column prop="opNo" label="处理人工号">
                        </el-table-column>
                        <el-table-column prop="opTime" label="处理时间">
                        </el-table-column>
                        <el-table-column prop="descs" label="备注">
                        </el-table-column>
                    </el-table>
                </div>
                <div slot="footer" class="dialog-footer myfooter">
                    <el-button @click="closedia">关 闭</el-button>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            title="附件"
            :visible.sync="attStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <div slot="title">
                <div>
                    附件
                    <i
                        class="el-icon-full-screen"
                        style="float: right; margin-right: 30px"
                        @click="
                            () => {
                                fullscreen = !fullscreen;
                            }
                        "
                    ></i>
                </div>
            </div>
            <div v-loading="loadinged">
                <div style="margin: 10px 0">
                    <uploadDown :datalist="datalist"></uploadDown>
                </div>
                <div class="dialog-footer myfooter">
                    <el-button @click="attStatus = false">取 消</el-button>
                </div>
            </div>
        </el-dialog>
        <myMessage
            :messTit="messTit"
            @closeMessage="closeMessage"
            :centerDialogVisible="centerDialogVisible"
            v-if="centerDialogVisible"
        ></myMessage>
    </fullscreen>
</template>
<script>
import mySearch from "../../../components/search.vue";
import myMessage from "../../../components/myMessage.vue";
import toolList from "../../../components/toolList";
import myUpload from "../../../components/upload";
import deptTreeOnly from "../../../components/deptTreeOnly.vue";
import { MessageBox } from "element-ui";
import { Loading } from "element-ui";
import uploadDown from "../../../components/uploadDown";

export default {
    components: {
        mySearch,
        myMessage,
        deptTreeOnly,
        MessageBox,
        toolList,
        myUpload,
        uploadDown
    },
    data() {
        const regionName = (rule, value, callback) => {
            if (!this.infolist.regionName) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const advTypeDesc = (rule, value, callback) => {
            if (!this.infolist.advTypeDesc) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        return {
            loginNo: JSON.parse(sessionStorage.userInfo).loginNo,
            rules: {
                regionName: [
                    {
                        required: true,
                        trigger: "change",
                        validator: regionName
                    }
                ],
                advTypeDesc: [
                    {
                        required: true,
                        trigger: "change",
                        validator: advTypeDesc
                    }
                ]
            },
            searchList: [
                {
                    type: "sel",
                    tit: "地市",
                    value: "",
                    width: "24%",
                    options: []
                },
                {
                    type: "sel",
                    tit: "区县",
                    value: "",
                    width: "24%",
                    options: []
                },
                {
                    type: "sel",
                    tit: "物料类别",
                    value: "",
                    width: "24%",
                    options: []
                },
                {
                    type: "sel",
                    tit: "状态",
                    value: "",
                    width: "24%",
                    options: []
                }
            ],
            tooltit: "物料申请查看",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [],
            supplierDialogStatus: false,
            disableStatus: false,
            approvalDialogStatus: false,
            approvalStepDialogStatus: false,
            titname: "",
            infolist: {
                distributionChoose: ""
            },
            approvalinfolist: {
                opinionradio: 1
            },
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: "",
            delid: "",
            loading: false,
            loadinged: false,
            fileInfo: {
                limit: 10,
                url: "/market/cwo/upload",
                fileList: []
            },
            infoApply: {},
            rovaList: [],
            woNoArr: [],
            supplierOpt: [],
            isSupplierTable: false,
            // 树形弹窗
            checkexa: false,
            treeListonly: {},
            defaultList: [],
            closeList: false,
            visionchonly: false,
            depttype: 0,
            // 固定审批人员
            fixedDialogStatus: false,
            // userListOpt: [],
            cMkAdvMetirialWoInfoSubmit: {},
            stsArr: ["待审批", "审批通过", "打回", "待确认"],
            // 分发
            distributionDialogStatus: false,
            distributionRegionOpt: [],
            cWoInfoIssued: {},
            wo: {},
            datalist: {
                url: "/market/cadvBusiMetirialWo/checkExport",
                type: 2
            },
            attStatus: false,
            stsOpt:[
                {
                    stsId: 0,
                    stsName: "待审批",
                },
                {
                    stsId: 1,
                    stsName: "审批通过",
                },
                {
                    stsId: 2,
                    stsName: "打回",
                }
                ,
                {
                    stsId: 3,
                    stsName: "待确认",
                },
                {
                    stsId: 4,
                    stsName: "已结束",
                }
            ],
            //搜索
            searchSection:{}, //搜索list
            regionOpt:[],
            countyOpt:[],
            metirialTypeOpt:[],
        };
    },
    computed: {
        amountsum: {
            set() {},
            get() {
                var sum = 0;
                this.tableData.forEach(item => {
                    sum += parseFloat(
                        item.price * item.quantity * item.coefficient
                    );
                });
                return sum.toFixed(2);
            }
        },
        countsum: {
            set() {},
            get() {
                var sum = 0;
                this.tableData.forEach(item => {
                    sum += parseFloat(item.quantity);
                });
                return sum;
            }
        }
    },
    methods: {
        tableSelectionChange(val, row) {
            this.multipleSelection = val;

            // this.woNoArr=[]
            // this.multipleSelection.forEach(item => {
            //     this.woNoArr.push(item.woNo)
            // });
        },
        closedia() {
            this.infolist = {};
            this.approvalDialogStatus = false;
            this.approvalinfolist = {};
            this.supplierDialogStatus = false;
            this.approvalStepDialogStatus = false;
            this.distributionDialogStatus = false;
            this.attStatus = false;
        },

        changeSearch(v, e) {
            if (v === 1) {
                this.searchSection.countyCode = ""
                let regionSingle = this.regionOpt.filter(item=>{
                    return item.compId == this.searchSection.regionCode
                })

                this.$http({
                    url: "/sysmgr/regionComp/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: {
                        parentCompId: regionSingle[0].compId,
                    }
                }).then(res => {
                    this.countyOpt = res.data;

                });

            }else if(v===2){
                this.searchSection.countyCode = e;
                this.$forceUpdate();
            }

        },
        clearSearch(){
            this.params.metirialType = '';

            this.searchSection.regionCode ? this.params.regionCode = this.searchSection.regionCode : '';
            this.searchSection.countyCode ? this.params.countyCode = this.searchSection.countyCode : '';
            this.params.woSts = this.searchSection.stsId
        },
        //获取地市(搜索)
        getRegion() {
            this.$http({
                url: "/sysmgr/regionComp/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {
                    parentCompId: "0"
                }
            }).then(res => {
                this.regionOpt = res.data;
            });
        },
        //搜索数据
        searchCli(){
            this.params = {}

            this.searchSection.regionCode ? this.params.regionCode = this.searchSection.regionCode : '';
            this.searchSection.countyCode ? this.params.countyCode = this.searchSection.countyCode : '';
            this.searchSection.metirialType ? this.params.metirialType = this.searchSection.metirialType : '';
            this.params.woSts = this.searchSection.stsId;
            this.params.woId = this.$route.query.id;

            this.getList(this.params, this.pageSize);
        },
        //获取列表
        getList(v, n) {
            this.pageSize = n;
            let _this = this;
            // this.loading = true;
            this.tableData = [];
            // v.assigneeNo = this.loginNo;
            this.$http({
                url: "/market/cadvBusiMetirialWo/queryPageForWoInfo",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: v
            }).then(res => {
                this.tableData = res.data.body.pageList;
                // this.userListOpt =
                //     res.data.body.step.next.userList;
                this.total = res.data.totalRecord;
                this.wo = res.data.body.wo;
                this.datalist.attList = JSON.parse(this.wo.fileUrl);


                let mOpt = []
                this.tableData.forEach(item=>{
                    mOpt.push(item.metirialType)
                });
                this.metirialTypeOpt = Array.from(new Set(mOpt))
                this.loading = false;
            });
        },

        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },

        // 申请(new)
        dialogApplication(v, n) {
            var _this = this;
            // if(this.multipleSelection == undefined){
            //     this.centerDialogVisible = true;
            //     this.messTit = "请至少选择一条进行审批";

            // }else{
            //     this.approvalDialogStatus = true;
            //     this.titname = "审批";
            //     this.disableStatus = false;
            // }
            if (v === 2) {
                this.titname = "审批轨迹";
                this.approvalStepDialogStatus = true;
                this.$http({
                    url: "/market/advBusiMetirialWoStep/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: { woId: this.params.woId }
                }).then(res => {
                    this.rovaList = res.data;
                });
            } else if (v === 3) {
                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"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([res.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = this.wo.bizName + ".xlsx";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            }
        },

        treeCheckonly(v) {
            this.treeListonly = v;
        },
        //添加
        dialogCli(v) {
            //2审批轨迹 3导出
            // if (v === 1) {
            //     this.approvalDialogStatus = false;
            //     // let list = {};
            //     this.cMkAdvMetirialWoInfoSubmit.mkAdvBusiMetirialWoInfoList = this.multipleSelection;
            //     this.cMkAdvMetirialWoInfoSubmit.woId = this.params.woId;
            //     this.cMkAdvMetirialWoInfoSubmit.remark = this.approvalinfolist.opinion;
            //     if (this.approvalinfolist.opinionradio == 1) {
            //         this.cMkAdvMetirialWoInfoSubmit.woSts = "1";
            //         if (this.userListOpt == null) {
            //             // 树形审批人
            //             this.checkexa = true;
            //         } else {
            //             // 固定审批人弹窗
            //             this.fixedDialogStatus = true;
            //         }
            //         // this.submitInfo("/market/cadvBusiMetirialWo/submitWo", list);
            //     } else if (this.approvalinfolist.opinionradio == 2) {
            //         this.cMkAdvMetirialWoInfoSubmit.woSts = "2";
            //         this.checkexa = false;
            //         this.fixedDialogStatus = false;

            //         this.submitInfo(
            //             "/market/cadvBusiMetirialWo/submitWo",
            //             this.cMkAdvMetirialWoInfoSubmit
            //         );
            //     }
            // } else
            if (v === 2) {
                this.approvalStepDialogStatus = false;
            } else if (v === 3) {
                //
            }
        },
        submitInfo(u, v) {
            let _this = this;
            let loadingInstance = Loading.service()
            this.$http({
                url: u,
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: v
            }).then(res => {
                loadingInstance.close()
                if (res.data.result === 1) {
                    _this.$message({
                        message: res.data.desc,
                        type: "error"
                    });
                }
                if (res.data.result === 2) {
                    _this.$message({
                        message: res.data.desc,
                        type: "error"
                    });
                } else {
                    _this.$message({
                        message: "成功",
                        type: "success"
                    });
                    _this.getList(this.params, this.pageSize);
                }
            });
        },
        closeMessage(v) {
            this.centerDialogVisible = false;
            let _this = this;
            if (v === 1) {
                _this
                    .$http({
                        url: "/bpm/api/deleteBpmPrePlugin",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: {
                            id: this.delid
                        }
                    })
                    .then(res => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else {
                            _this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            _this.getList(this.params, this.pageSize);
                        }
                    });
            }
        },
        //删除
        delLine(v) {
            this.centerDialogVisible = true;
            this.messTit = "即将删除此条数据, 是否删除?";
            this.delid = v.id;
        },
        //文件返回值
        uploadBack(v) {
        },
        //功能栏
        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);
        }
    },
    mounted() {
        if (JSON.stringify(this.$route.query) != "{}") {
            this.params.woId = this.$route.query.id;
        }
        this.getList(this.params, 1);
        this.getUser();
        this.getRegion();
    },
    watch: {
        $route() {
            this.getList(this.params, 1);
        }
    },
    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);
    }
}
.search{
    width: 100%;
    display: unset;
    margin-top: 20px;
}
.search-box{
    margin-top: 40px;
    div{
        width: 20%
    }
    .el-form{
        width: 100%;
    }

}
.adv-type {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    div {
        width: 33%;
        text-align: center;
        height: 80px;
        overflow: hidden;
        min-width: 100px;
        cursor: pointer;
        padding-top: 10px;
        margin: 10px 0;
    }
    div:hover {
        background: #cfe8fc;
        border-radius: 5px;
    }
    span {
        width: 100%;
        display: inline-block;
        height: 40px;
        // line-height: 40px;
        i {
            color: #0074d9;
            font-size: 36px;
        }
    }
}
.section2 {
    display: flex;
    align-items: center;
    margin: 40px 0;
    button {
        margin-bottom: 0 !important;
    }
    h3 {
        margin-right: 40px;
    }
}
.t-footer {
    text-align: center;
    padding-right: 20px;
    margin-top: 20px;
    padding-bottom: 20px;
}
.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;
    }
}
</style>