<style scoped> .page_fnDm { background-color: white; } .query-box { overflow: inherit; padding-bottom: 0; } ._nav { margin: 20px 0 0 0; background-color: #f5f5f5; } ._nav li { float: left; font-size: 14px; color: #666666; padding: 15px 20px; cursor: pointer; position: relative; background-color: #f1f1f1; margin-right: 5px; } ._nav li._active { background-color: #ffffff; color: #333333; } ._nav li._active::after { content: ""; width: 20px; height: 3px; background-color: #e95252; display: inline-block; position: absolute; bottom: 0; left: 38%; } .el-range-editor.el-input__inner { border-radius: 0; } .query-box { border: none; } .hight_query { position: relative; } .hight_query span { height: 34px; line-height: 34px; color: #e95252; } .hight_query span .icon-gengduo { font-size: 12px; } .hight_query span em { text-decoration: underline; cursor: pointer; } .hight_query_box { position: absolute; background-color: white; z-index: 2000; right: 200px; width: 800px; } ._hqb_shadow { box-shadow: 3px 2px 10px rgb(204, 203, 203); border: 1px solid #ececec; } .query-box ul { overflow: initial; } .hqb_t { padding: 10px 20px; font-size: 16px; background-color: #e95252; border: 1px solid #e95252; color: #fff; text-align: center; margin-bottom: 15px; } .query-box li:last-child { float: left; } .query-box > ul > li:last-child { float: right; } .query-box .hight_query ul .el-input { width: inherit; } .hight_query_box ul li { margin-top: 0; float: left; margin-right: 15px; } .hight_query_box ul li label { font-size: 14px; } .hight_query_box .el-form { padding: 0 20px; } .hight_query_box ul li._hqb_btn { float: right; margin-right: 25px; padding-top: 5px; position: inherit; } .Receipt_box { padding: 15px; color: #c94052; width: 614px; background-color: rgba(242, 242, 242, 1); border: 1px solid rgba(228, 228, 228, 1); } .Receipt_box.color_blur { color: #106baf; } .Receipt_box.color_blur .rb_stit span { display: inline-block; border-bottom: 2px solid #106baf; padding: 0 20px; } .rb_tit { font-size: 18px; text-align: center; } .rb_stit { font-size: 14px; text-align: center; } .rb_stit span { display: inline-block; border-bottom: 2px solid #c94052; padding: 0 20px; } .rb_top_row { display: flex; justify-content: space-between; font-size: 12px; } .rb_top_row span._r_name { color: #333333; } .rb_top_row span._r_bold { font-weight: bold; } .rb_top_row ._r_time span { color: #333333; } ._r_mb5 { margin-bottom: 5px; } .Receipt_table { width: 100%; font-size: 14px; text-align: center; } .Receipt_table .th { font-weight: 200 !important; } ._r_mt10 { margin-top: 10px; } ._bg__ { display: inline-block; padding: 2px 8px; color: white; border-radius: 4px; } ._bg_red { background-color: #e95252; } ._bg_green { background-color: #2bb87c; } .text_d { text-decoration: underline; cursor: pointer; } .PingFangSC { font-weight: bold; } .Bill_par { position: relative; } tr th, tr td { text-align: left; padding-left: 20px; } tr._item_list { border-bottom: 1px solid #e5e5e5; height: 78px; } tr._item_list td { border-bottom: 1px solid #e5e5e5; padding: 10px; } /* tr._t_head th{border-top: 1px solid #e5e5e5;} */ tr._item_list td:first-child { border-left: 1px solid #e5e5e5; } tr._item_list td:last-child { border-right: 1px solid #e5e5e5; } ._head_img { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; } ._btn_group { font-size: 14px; } .icon-daiqueren { color: #4bca81; } .icon-yiqueren { color: #4bca81; } .icon-yiquxiao { color: #959595; } .icon-shenhebohui { color: #e95252; } .icon-icon-zancun { color: #ff9c01; } .singeRowTable tr:hover { background-color: white; } ._TradeWayList { padding: 5px 10px; background-color: #eeeeee; border-radius: 4px; margin: 10px 0; width: 190px; } ._bold { font-weight: bold; } ._bank_name, ._bank_type { display: inline-block; background-color: #333333; color: white; padding: 2px 4px; border-radius: 4px; margin-left: 10px; } ._bank_name { margin-left: 10px; } ._bank_type { background-color: #2aaef2; } ._bank_type2 { background-color: #ff9c01; } ._font_init { color: #333333; font-size: 12px; vertical-align: top; } .InfoChangeLog { height: auto; max-height: 220px; background-color: #ffffff; } .changLogList { padding-left: 20px; max-height: 180px; overflow: auto; } .changLogList_l { border-left: 1px solid #e9e9e9; position: relative; padding-bottom: 10px; padding-left: 20px; padding-top: 10px; } ._radius_green { background-color: #47bf8c; width: 7px; height: 7px; border-radius: 50%; display: inline-block; position: absolute; left: -4px; top: 19px; } .changLog_time { color: #666666; font-size: 12px; display: inline-block; padding-right: 10px; } ._icon_btn i { width: 30px; height: 30px; display: inline-block; color: white !important; border-radius: 50%; text-align: center; line-height: 30px; margin-right: 10px; cursor: pointer; outline: none; } ._icon_btn i.edit { background-color: #00c6ff; font-size: 16px; } ._icon_btn i.edit:hover { background-color: #59daff; } ._icon_btn i.edit:active { background-color: #00b8ec; } ._icon_btn i.icon-sousuo { background-color: #47bf8c; } ._icon_btn i.icon-sousuo:hover { background-color: #66bb97; } ._icon_btn i.icon-sousuo:active { background-color: #35ab79; } ._icon_btn i.icon-ico_commodity_defaul { background-color: #f16c3c; } ._icon_btn i.icon-ico_commodity_defaul:hover { background-color: #e87c54; } ._icon_btn i.icon-ico_commodity_defaul:active { background-color: #f76630; } ._icon_btn i.icon-quxiao1 { background-color: #e95252; } ._icon_btn i.icon-quxiao1:hover { background-color: #ea6d6d; } ._icon_btn i.icon-quxiao1:active { background-color: #e42d2d; } ._icon_btn i.icon-zhuanjiao1 { background-color: #e6a014; font-size: 16px; } ._icon_btn i.icon-zhuanjiao1:hover { background-color: rgb(235, 184, 84); } ._icon_btn i.icon-zhuanjiao1:active { background-color: rgb(223, 150, 6); } ._tag_span { background-color: rgba(64, 158, 255, 0.1); display: inline-block; padding: 0 5px; height: 22px; line-height: 20px; font-size: 12px; color: #409eff; border-radius: 4px; box-sizing: border-box; border: 1px solid rgba(64, 158, 255, 0.2); white-space: nowrap; margin-bottom: 4px; } ._tag_span._tag_warr { background-color: rgba(103, 194, 58, 0.1); border-color: rgba(103, 194, 58, 0.2); color: #67c23a; } ._fex_cen { display: flex; align-items: center; } ._pad5 { padding: 5px 10px; } ._color_gar { color: gray; } ._TCIDAndTCNUMList { display: flex; } .other_report{ padding: 0 28px 15px 28px; } .other_report li{ float: left; color: #fff; background-color: #b00; border-color: #b00; min-width: 80px; padding: 4px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; text-align: center; cursor: pointer; border-radius: 4px; margin-bottom: 10px; } .year .el-date-editor.el-input{ width: auto; } </style> <template> <div class="page_fnDm page_RecPayQuery" v-loading="AALloading"> <div class="query-box"> <el-form class="_info_box clearfix" label-width="110px"> <el-row style="padding:15px 20px 0 0;"> <el-col :span="4"> <el-form-item :label="$t('scen.sc_cp')"> <el-select :disabled="BranchStatus" filterable v-model="msg.OutBranchId" class> <el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option> <el-option v-for="item in CompanyList" :label="item.BName" :value="item.Id" :key="item.Id" ></el-option> </el-select> </el-form-item> </el-col> <!-- <el-col :span="4"> <el-form-item :label="$t('system.table_goCity')"> <el-select filterable v-model="msg.StartCityId" class> <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option> <el-option v-for="item in startCityList1" :label="item.startCityName" :value="item.ID" :key="item.ID" ></el-option> </el-select> </el-form-item> </el-col> --> <el-col :span="4"> <el-form-item :label="$t('advmanager.v_line')"> <el-select filterable v-model="msg.LineId" @change="getLineTeamList(msg.LineId)"> <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option> <el-option v-for="item in LineList" :label="item.LineName" :value="item.LineID" :key="item.LineID" ></el-option> </el-select> </el-form-item> </el-col> <!-- <el-col :span="4"> <el-form-item :label="$t('advmanager.v_xilie')"> <el-select filterable v-model="msg.LineTeamId" class> <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option> <el-option v-for="item in LineTeamList" :label="item.LtName" :value="item.LtID" :key="item.LtID" ></el-option> </el-select> </el-form-item> </el-col> --> <el-col :span="4" class="year"> <el-form-item :label="$t('objFill.nianfen')"> <!-- <el-date-picker v-model="msg.QStartDate" type="year" value-format="yyyy" :placeholder="$t('objFill.xuanzhenian')"> </el-date-picker> --> <YearLimit :clearable="false" :dateTime="msg.QStartDate" @change="(Date)=>{msg.QStartDate=Date}"></YearLimit> </el-form-item> </el-col> <!-- <el-col :span="4"> <el-form-item :label="$t('scen.sc_temID')"> <el-input v-model="msg.TCID" class></el-input> </el-form-item> </el-col> --> </el-row> </el-form> <ul class="clearfix"> <li class="hight_query"> <button class="normalBtn" @click="togbu()">{{$t('pub.searchBtn')}}</button> <button class="hollowFixedBtn" @click="method5()">{{$t('visa.v_daochu')}}</button> </li> </ul> </div> <div class="_fnDm_content" v-loading="loading"> <v-table is-horizontal-resize column-width-drag :show-vertical-border="true" style="width:100%" :columns="columns" :table-data="DataList" :filter-method="filterMethod" :total="total" :pageSize="msg.pageSize" :pageIndex="msg.pageIndex" :row-height="30" :column-cell-class-name="columnCellClass" @on-custom-comp="customCompFunc" @sort-change="sortChange" :footer="footer" :footer-row-height="33" :multiple-sort="multipleSort" :row-click="rowClick" > <!-- 多个排序 --> </v-table> </div> </div> </template> <script> import Vue from "vue"; import XLSX from "xlsx"; import downloadExcelEasy from "../../../assets/utils/downloadExcelEasy"; import YearLimit from '../../public/YearLimit.vue'; import { setTimeout } from "timers"; Vue.component("fontColor", { // 是否联运团 template: `<p> <span style="color: red">{{rowData.FirstQuarter}}</span> </p>`, props: { rowData: { type: Object }, field: { type: String }, index: { type: Number } },data(){ return { red: false } },mounted(){ // this.red = this.rowData.Compare1.indexOf("-")!==-1 ? true : false } }); Vue.component("fontColor2", { // 是否联运团 template: `<p> <span v-if="red" style="color: red">{{rowData.Compare1}}</span> <span v-else>{{rowData.Compare1}}</span> </p>`, props: { rowData: { type: Object }, field: { type: String }, index: { type: Number } },data(){ return { red: false } },mounted(){ // this.red = this.rowData.Compare2.indexOf("-")!==-1 ? true : false } }); export default { data() { return { showID: false, active: 1, userId: 0, msg: { OutBranchId: "", TCID: "", LineId:"", QStartDate: "", QEndDate: "", EmployeeId:'' }, getCompanyMsg: { // 公司 RB_Group_Id: "0", Status: "0" }, DataList: [], CompanyList: [], productionDate: [], loading: false, currentPage: 1, total: 0, tableData: [], LineList: [], LineTeamList: [], // startCityList1: [], multipleSort: false, kaiqiZzBox: false, KaiqiZzTime: [], kaiqiZzTitle: "", kaiqiZzLoading: false, kaiqiZzMsg: { QStartDate: "", QEndDate: "", Is_Open: "" }, defaultMonth: [], columns: [], footer: [], pageSize: 6, pageIndex: 1, AALloading: false, BranchStatus:true, }; }, created() {}, components: {YearLimit}, mounted() { let allH, allW, cH, cW; allH = document.documentElement.clientHeight; allW = document.documentElement.clientWidth; cW = allW - 90; cH = allH - 350 -52; this.msg.pageSize = parseInt(cH / 30) - 1; let userInfo = this.getLocalStorage(); this.getCompanyMsg.RB_Group_Id = userInfo.RB_Group_id; //集团ID this.userId = userInfo.EmployeeId; this.msg.OutBranchId=0; this.msg.LineId=14; this.getCompanyList(); // this.getPageList(); this.getLineList(); // this.getStartList1(); this.togbu() }, methods: { goEasyReport: function () { let year = this.productionDate[0] ? this.productionDate[0].substring(0,4) : '' this.$router.push({ path: "/YearReport", query: { year: year, blank: "y" } }); }, togbu: function () { this.loading = true; if (!this.msg.OutBranchId && this.msg.OutBranchId !== 0) this.msg.OutBranchId = -1; if (!this.msg.TCID) this.msg.TCID = 0; if (this.msg.QStartDate == "") this.msg.QStartDate = "2023"; this.apipost('financestatistics_get_GetTravelMonthReportList', this.msg, res=>{ if (res.data.resultCode == 1) { let BranchStatus=res.data.data.IsBranchButton; if(BranchStatus==-1){ this.BranchStatus=false; }else{ this.BranchStatus=true; this.msg.OutBranchId=BranchStatus; } this.DataList = res.data.data.RObj; this.columns = [ // 团队编号、团号 点击跳转团控列表 { field: "LineName", title: this.$t('advmanager.v_line'), width: 120, titleAlign: "left", columnAlign: "left", isResize: true, result: [], type: "select", isFrozen: true }, { field: "Digest", title: this.$t('fnc.a_zhaiyao'), width: 120, titleAlign: "left", columnAlign: "left", isResize: true, isFrozen: true }, { field: "JAN", title: this.$t('objFill.yuefens')[0], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "FEB", title: this.$t('objFill.yuefens')[1], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "MAR", title: this.$t('objFill.yuefens')[2], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "FirstQuarter", title: this.$t('objFill.jidus')[0], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "APR", title: this.$t('objFill.yuefens')[3], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "MAY", title: this.$t('objFill.yuefens')[4], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "JUN", title: this.$t('objFill.yuefens')[5], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "TwoQuarter", title: this.$t('objFill.jidus')[1], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "FirstHalf", title: this.$t('objFill.jidus')[2], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "JUL", title: this.$t('objFill.yuefens')[6], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "AUG", title: this.$t('objFill.yuefens')[7], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "SEP", title: this.$t('objFill.yuefens')[8], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "ThreeQuarter", title: this.$t('objFill.jidus')[3], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "OCT", title: this.$t('objFill.yuefens')[9], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "NOV", title: this.$t('objFill.yuefens')[10], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "DEC", title: this.$t('objFill.yuefens')[11], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "FourQuarter", title: this.$t('objFill.jidus')[4], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "EndHalf", title: this.$t('objFill.jidus')[5], width: 80, titleAlign: "left", columnAlign: "right", isResize: true }, { field: "Total", title: this.$t('ground.zongji'), width: 80, titleAlign: "left", columnAlign: "right", isResize: true } ] this.loading = false; this.$message.success(res.data.message) } else {this.loading = false; this.$message.error(res.data.message) } }) }, moneyFormat(rowData, rowIndex, pagingIndex, field) { if (field === "JAN") return this.priceFormat(rowData.JAN); if (field === "FEB") return this.priceFormat(rowData.FEB); if (field === "MAR") return this.priceFormat(rowData.MAR); if (field === "APR") return this.priceFormat(rowData.APR); if (field === "MAY") return this.priceFormat(rowData.MAY); if (field === "JUN") return this.priceFormat(rowData.JUN); if (field === "TwoQuarter") return this.priceFormat(rowData.TwoQuarter); if (field === "FirstHalf") return this.priceFormat(rowData.FirstHalf); if (field === "JUL") return this.priceFormat(rowData.JUL); if (field === "AUG") return this.priceFormat(rowData.AUG); if (field === "SEP") return this.priceFormat(rowData.SEP); if (field === "ThreeQuarter") return this.priceFormat(rowData.ThreeQuarter); if (field === "OCT") return this.priceFormat(rowData.OCT); if (field === "NOV") return this.priceFormat(rowData.NOV); if (field === "DEC") return this.priceFormat(rowData.DEC); if (field === "FourQuarter") return this.priceFormat(rowData.FourQuarter); if (field === "EndHalf") return this.priceFormat(rowData.EndHalf); if (field === "Total") return this.priceFormat(rowData.Total ); }, rowClick(rowIndex,rowData,column){ let field=column.field; let StartTime=field+"StartTime"; let EndTime=field+`EndTime`; let LineId=Number(rowData.LineId); let OutBranchId=this.msg.OutBranchId; this.$router.push({ path: "TeamRevenueReport", query: { LineId:LineId, StartTime:rowData[StartTime], EndTime:rowData[EndTime], OutBranchId:OutBranchId, blank: 'y', tab: '营收报表' } }); }, priceFormat(value) { if (value == null) { return 0.0; } let nStr = value.toFixed(2); nStr += ""; let x = nStr.split("."); let x1 = x[0]; let x2 = x.length > 1 ? "." + x[1] : ""; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, "$1" + "," + "$2"); } return x1 + x2; }, method5: function() { this.loading = true; this.msg.EmployeeId=this.userId; this.GetLocalFile( "financestatistics_post_OutToExcelTravelMonthReportList", this.msg, this.$t('objFill.v101.FinancialModule.tuandystjb')+".xls" ); this.loading = false; }, columnCellClass(rowIndex, columnName, rowData) { if(rowData.JAN < 0 && columnName=="JAN"){ return "column-cell-class-name-test-red" } if(rowData.FEB < 0 && columnName=="FEB"){ return "column-cell-class-name-test-red" } if(rowData.MAR < 0 && columnName=="MAR"){ return "column-cell-class-name-test-red" } if(rowData.FirstQuarter < 0 && columnName=="FirstQuarter"){ return "column-cell-class-name-test-red" } if(rowData.APR < 0 && columnName=="APR"){ return "column-cell-class-name-test-red" } if(rowData.MAY < 0 && columnName=="MAY"){ return "column-cell-class-name-test-red" } if(rowData.JUN < 0 && columnName=="JUN"){ return "column-cell-class-name-test-red" } if(rowData.TwoQuarter < 0 && columnName=="TwoQuarter"){ return "column-cell-class-name-test-red" } if(rowData.FirstHalf < 0 && columnName=="FirstHalf"){ return "column-cell-class-name-test-red" } if(rowData.JUL < 0 && columnName=="JUL"){ return "column-cell-class-name-test-red" } if(rowData.AUG < 0 && columnName=="AUG"){ return "column-cell-class-name-test-red" } if(rowData.ThreeQuarter < 0 && columnName=="ThreeQuarter"){ return "column-cell-class-name-test-red" } if(rowData.OCT < 0 && columnName=="OCT"){ return "column-cell-class-name-test-red" } if(rowData.NOV < 0 && columnName=="NOV"){ return "column-cell-class-name-test-red" } if(rowData.OCT < 0 && columnName=="OCT"){ return "column-cell-class-name-test-red" } if(rowData.DEC < 0 && columnName=="DEC"){ return "column-cell-class-name-test-red" } if(rowData.FourQuarter < 0 && columnName=="FourQuarter"){ return "column-cell-class-name-test-red" } if(rowData.EndHalf < 0 && columnName=="EndHalf"){ return "column-cell-class-name-test-red" } if(rowData.Total < 0 && columnName=="Total"){ return "column-cell-class-name-test-red" } if (columnName === "FirstQuarter" || columnName === "TwoQuarter" || columnName === "ThreeQuarter" || columnName === "FourQuarter" || columnName === "FirstHalf" || columnName === "EndHalf") { return "column-cell-class-name-test"; } if (columnName === "Total"){ return "column-cell-class-name-test-pink"; } if (rowData.Digest === "营业毛利"){ return "column-cell-class-name-test-greed"; } }, getLineList() { // 获取线路 this.apipost("line_post_GetAllList", {}, res => { if (res.data.resultCode == 1) { this.LineList = res.data.data; } else { this.$message.error(res.data.message); } }); }, customCompFunc(param) { }, compare(property, type) { // 升序 t 1升 2降 if (type === 1) { return function(a, b) { let value1 = a[property]; let value2 = b[property]; return value1 - value2; }; } else { return function(a, b) { let value1 = a[property]; let value2 = b[property]; return value2 - value1; }; } }, sortChange(param) { if (param.YingShou === "asc") { this.DataList.sort(this.compare("YingShou", 1)); } else if (param.YingShou === "desc") { this.DataList.sort(this.compare("YingShou", 2)); } else { } //自己写实现 //{gender:"",name:"asc"} }, // 数据筛选 filterMethod(filters) { this.total = tableData.length; }, getCompanyList() { //获取公司列表 this.apipost( "admin_get_BranchGetList", this.getCompanyMsg, res => { if (res.data.resultCode == 1) { this.CompanyList = res.data.data; this.msg.OutBranchId=this.CompanyList[0].Id; } else { } }, err => {} ); }, timeAdd(type) { // 日期格式 if (type === 1) { if (!this.productionDate) { this.msg.startDate = ""; this.msg.endDate = ""; return; } this.msg.startDate = this.productionDate[0]; this.msg.endDate = this.productionDate[1]; } if (type === 2) { if (!this.KaiqiZzTime) { this.kaiqiZzMsg.QStartDate = ""; this.kaiqiZzMsg.QEndDate = ""; return; } this.kaiqiZzMsg.QStartDate = this.KaiqiZzTime[0]; this.kaiqiZzMsg.QEndDate = this.KaiqiZzTime[1]; } }, } }; </script>