spfm-market-front/src/pages/main/advertising/contractCap.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="dialogCheck(3)"
                    v-if="userInfo.countyName == null && userInfo.cityName != null"
                    >添加
                </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="regionName" label="地市名称">
                    </el-table-column>
                    <!-- <el-table-column prop="regionCode" label="地市编码">
                    </el-table-column> -->
                    <!-- <el-table-column prop="preAccount" label="一采预算">
                    </el-table-column> -->
                    <el-table-column
                        prop="secbuyPreAccount"
                        label="二采预算总额"
                    >
                    </el-table-column>
                    <!-- <el-table-column prop="costAccount" label="一采累计使用">
                    </el-table-column> -->
                    <!-- <el-table-column prop="secbuyCostAccount" label="二采累计使用">
                    </el-table-column> -->
                    <el-table-column
                        prop="secbuyLastAccount"
                        label="二采剩余预算"
                    >
                    </el-table-column>
                    <el-table-column prop="secbuySchedule" label="使用进度">
                    </el-table-column>
                    <!-- <el-table-column
                        :label="item.supplierName"
                        v-for="(item, index) in supplierArr"
                        :key="index"
                    >
                        <template slot-scope="scope">
                            <div
                                v-if="
                                    scope.row.cMkSupplierCumulativeAmounts.filter(
                                        n => {
                                            return (
                                                n.supplierName ==
                                                item.supplierName
                                            );
                                        }
                                    ).length > 0
                                "
                            >
                                {{ item.sumBudget }}
                            </div>
                        </template>
                    </el-table-column> -->
                    <!-- <el-table-column prop="advYearn" :label="advYearnLabel">
					</el-table-column> -->
                    <el-table-column label="操作" width="160px" align="center" v-if="userInfo.countyName == null && userInfo.cityName != null">
                        <template slot-scope="scope">
                            <!-- <el-button
                                size="mini"
                                type="primary"
                                @click="dialogCheck(1, scope.row)"
                                >查看</el-button
                            > -->
                            <el-button
                                size="mini"
                                type="primary"
                                @click="dialogCheck(2, scope.row)" 
                                v-if="userInfo.countyName == null && userInfo.cityName != null"
                                >编辑</el-button>
                            <!-- <el-button
                                size="mini"
                                type="danger"
                                @click="delLine(scope.row)" 
                                >删除</el-button
                            > -->
                        </template>
                    </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="dialogStatus"
            width="40%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <div v-loading="loadinged">
                <el-form :model="infolist" ref="infolist" :rules="rules">
                    <div class="info-line" style="width: 50%; margin: 0 auto;">
                        <!-- <el-form-item prop="regionCode">
                            <span>地市名称</span>
                            <el-select
                                :popper-append-to-body="false"
                                v-model="infolist.regionCode"
                                placeholder="地市名称"
                                @change="verifcheck"
                                :disabled="secbuyLastDisableStatus"
                            >
                                <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="secbuyPreAccount" style="width: 100%;">
                            <span>二采预算总额</span>
                            <el-input
                                v-model="infolist.secbuyPreAccount"
                                placeholder="二采预算总额"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="secbuyLastAccount" style="width: 100%;">
                            <span>二采剩余预算</span>
                            <el-input
                                v-model="infolist.secbuyLastAccount"
                                placeholder="二采剩余预算"
                            ></el-input>
                        </el-form-item>
                        <!-- <el-form-item prop="secbuySchedule">
                            <span>使用进度</span>
                            <el-input
                                v-model="infolist.secbuySchedule"
                                placeholder="使用进度"
                                disabled
                            ></el-input>
                        </el-form-item> -->
                        <!-- <el-form-item prop="secbuyCostAccount">
                            <span>二采使用</span>
                            <el-input v-model="infolist.secbuyCostAccount" placeholder="二采累计使用" disabled></el-input>
                        </el-form-item>
						<el-form-item>
						    <span>统计周期</span>
						    <el-input v-model="infolist.advYearn" placeholder="统计周期" :disabled="disableStatus"></el-input>
						</el-form-item> -->
                    </div>
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">
                    <el-button
                        type="primary"
                        @click="dialogCli(2)"
                        v-if="titname !== '查看'"
                        >确 定</el-button
                    >
                    <el-button @click="dialogCli(1)" v-if="titname === '查看'"
                        >确 定</el-button
                    >
                    <el-button @click="dialogCli(1)">取 消</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 { MessageBox } from "element-ui";

export default {
    components: {
        mySearch,
        myMessage,
        toolList,
        MessageBox
    },
    data() {
        const regionCode = (rule, value, callback) => {
            if (!this.infolist.regionCode) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const secbuyPreAccount = (rule, value, callback) => {
            if (!this.infolist.secbuyPreAccount) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const secbuyLastAccount = (rule, value, callback) => {
            if (!this.infolist.secbuyLastAccount) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };

        return {
            rules: {
                regionCode: [
                    {
                        required: true,
                        trigger: "change",
                        validator: regionCode
                    }
                ],
                secbuyPreAccount: [
                    {
                        required: true,
                        trigger: "change",
                        validator: secbuyPreAccount
                    }
                ],
                secbuyLastAccount: [
                    {
                        required: true,
                        trigger: "change",
                        validator: secbuyLastAccount
                    }
                ]
            },
            searchList: [
                {
                    type: "input",
                    tit: "地市名称",
                    value: "",
                    width: "98%"
                }
            ],
            tooltit: "预算及合同上限",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [],
            dialogStatus: false,
            disableStatus: false,
            secbuyLastDisableStatus: false,
            titname: "",
            infolist: {},
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: "",
            delid: "",
            loading: false,
            loadinged: false,
            regionOpt: [],
            proviceopt: [
                {
                    id: "0",
                    name: "省公司"
                },
                {
                    id: "1",
                    name: "地市公司"
                }
            ],
            countyOpt: [],
            areaCode: "",
            areaName: "",
            supplierArr: [],
            currentRole: []
        };
    },
    computed: {
        // secbuySchedule: function() {
        //     this.infolist.secbuySchedule = (this.infolist.secbuyPreAccount - this.infolist.secbuyLastAccount) / this.infolist.secbuyPreAccount;
        //     this.infolist.secbuySchedule = ((parseFloat(this.infolist.secbuySchedule)*100).toFixed(2));
        //     if(isNaN(this.infolist.secbuySchedule)){
        //         this.infolist.secbuySchedule = ''
        //     }
        //     return this.infolist.secbuySchedule;
        // }
    },
    methods: {
        closedia() {
            this.infolist = {};
            this.dialogStatus = false;
        },
        //搜索数据
        searchInfo(v) {
            this.params = {};
            v[0] ? (this.params.regionName = v[0]) : "";
            this.getList(this.params, this.pageSize);
        },
        //获取列表
        getList(v, n) {
            this.pageSize = n;
            let _this = this;
            this.loading = true;
            this.tableData = [];
            this.$http({
                url: "/market/cadvContract/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: v
            }).then(res => {
                if (
                    this.userInfo.countyName == null &&
                    this.userInfo.cityName == null
                ) {
                    this.tableData = res.data.data;
                } else if (this.userInfo.countyName == null && this.userInfo.cityName != null) {
                    this.tableData = res.data.data.filter(item => {
                        return item.regionName == this.userInfo.cityName;
                    });
                }
                
                this.total = res.data.totalRecord;
                this.loading = false;

                var arr = new Set();
                this.tableData.forEach(item => {
                    // this.advYearnLabel = item.advYearn + '供应商'
                    this.supplierArr = item.cMkSupplierCumulativeAmounts;
                    this.supplierArr.forEach(n => {
                        arr.add(n);
                    });
                });
                this.supplierArr = Array.from(arr);
            });
        },
        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },
        //申请
        dialogCheck(v, n) {
            this.dialogStatus = true;
            this.infolist = Object.assign({}, n);
            this.areaCode = this.infolist.areaCode;
            this.areaName = this.infolist.areaName;
            if (v === 1) {
                this.titname = "查看";
                this.disableStatus = true;
                // this.getComp(v.regionCode);
                return;
            } else if (v === 2) {
                this.titname = "编辑";
                this.disableStatus = false;
                this.secbuyLastDisableStatus = true;
                // this.getComp(v.regionCode);
            } else if (v === 3) {
                this.titname = "添加";
                this.secbuyLastDisableStatus = false;
                this.disableStatus = false;
            }
            this.infolist.opNo = this.userInfo.loginNo;
            this.infolist.opName = this.userInfo.loginName;
        },
        //添加
        dialogCli(v) {
            if (v === 1) {
                this.infolist = {};
                this.dialogStatus = false;
                return;
            } else {
                this.infolist.opTime = this.$formatDate(
                    new Date(),
                    "YYYY-MM-DD"
                );
                this.infolist.areaCode = this.areaCode;
                this.infolist.areaName = this.areaName;

                if(this.currentRole.length == 1){
                   this.infolist.regionName = this.currentRole[0].compName;
                   this.infolist.regionCode = this.currentRole[0].compId;
                }

                if (this.titname === "添加") {
                this.submitInfo("/market/cadvContract/add");
                } else if (this.titname === "编辑") {
                    this.submitInfo("/market/cadvContract/update", v);
                }
                
            }
        },
        submitInfo(u) {
            // callback(new Error('不能为空'))
            // if (
            //     this.infolist.secbuyPreAccount <=
            //     this.infolist.secbuyLastAccount
            // ) {
            //     new Error("二采预算总额应大于二采剩余预算");
            // }

            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: this.infolist
                    }).then(res => {
                        this.loadinged = false;
                        if (res.data.result === 0) {
                             _this.$message({
                                message: "成功",
                                type: "success"
                            });
                            _this.infolist = {};
                            _this.dialogStatus = false;
                            _this.getList({}, _this.pageSize);
                        } else {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        }
                    });
                }
            });
        },
        closeMessage(v) {
            this.centerDialogVisible = false;
            let _this = this;
            if (v === 1) {
                _this
                    .$http({
                        url: "/market/cadvContract/del",
                        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;
            }
        },
        // verifcheck(v) {
        //     if (v == 2) {
        //         for (let i = 0; i < this.countyOpt.length; i++) {
        //             if (this.countyOpt[i].compId === this.areaCode) {
        //                 this.areaName = this.countyOpt[i].compName;
        //             }
        //         }
        //     } else {
        //         for (let i = 0; i < this.regionOpt.length; i++) {
        //             if (this.regionOpt[i].compId === this.infolist.regionCode) {
        //                 this.infolist.regionName = this.regionOpt[i].compName;
        //                 this.areaCode = "";
        //                 this.areaName = "";
        //                 this.getComp(this.regionOpt[i].compId);
        //             }
        //         }
        //     }
        // },
        // getComp(v) {
        //     this.$http({
        //         url: "/sysmgr/regionComp/queryList",
        //         method: "post",
        //         headers: {
        //             "Content-Type": "application/json"
        //         },
        //         data: {
        //             parentCompId: v
        //         }
        //     }).then(res => {
        //         this.countyOpt = res.data;
        //     });
        // },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            this.$http({
                url: "/sysmgr/regionComp/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {
                    parentCompId: "0"
                }
            }).then(res => {
                this.currentRole = res.data.filter(item=>{
                    return item.compName == this.userInfo.cityName
                })
                // if (
                //     this.userInfo.countyName == null && this.userInfo.cityName == null
                // ) {
                //     this.regionOpt = res.data;
                // } else if (this.userInfo.countyName == null && this.userInfo.cityName != null) {
                //     this.regionOpt = res.data.filter(item => {
                //         return item.compName == this.userInfo.cityName;
                //     });
                // }
            });
        }
    },
    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;
        }
    }
}

.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: 100px;
        display: inline-block;
        text-align: left;

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

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

.online {
    width: 100%;

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

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }
}
</style>