<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; } </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="出团公司:"> <el-select filterable v-model="msg.OutBranchId" class> <el-option :value="-1" label="不限"></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="出发城市:"> <el-select filterable v-model="msg.StartCityId" class> <el-option :value="0" label="不限"></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="线路:"> <el-select filterable v-model="msg.LineId" @change="getLineTeamList(msg.LineId)"> <el-option :value="0" label="不限"></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="系列:"> <el-select filterable v-model="msg.LineTeamId" class> <el-option :value="0" label="不限"></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"> <el-form-item label="团号:"> <el-input v-model="msg.TCNUM" class></el-input> </el-form-item> </el-col> <el-col :span="4"> <el-form-item label="团队编号:"> <el-input v-model="msg.TCID" class></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="发团日期:"> <el-date-picker class="h34" @change="timeAdd(1)" v-model="productionDate" type="daterange" value-format="yyyy-MM-dd" :picker-options="pickerOptions" range-separator="至" ></el-date-picker> </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()">导出</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" > <!-- 多个排序 --> </v-table> </div> </div> </template> <script> import Vue from "vue"; import XLSX from "xlsx"; import downloadExcelEasy from "../../../assets/utils/downloadExcelEasy"; import { setTimeout } from "timers"; Vue.component("fontColor", { // 是否联运团 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.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: "", StartCityId: "", LineId: "", LineTeamId: "", TCID: "", QStartDate: "", QEndDate: "", }, 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: [], pickerOptions: { onPick: ({ maxDate, minDate }) => { this.choiceDate = minDate.getTime(); if (maxDate) { this.choiceDate = ""; } }, disabledDate: time => { if(time < new Date("2018-12-31")){ return true; } else{ if (this.choiceDate) { const one = 365 * 24 * 3600 * 1000; const minTime = this.choiceDate - one; const maxTime = this.choiceDate + one; return time.getTime() < minTime || time.getTime() > maxTime; } } } }, pickerOptions2: { onPick: ({ maxDate, minDate }) => { this.choiceDate = minDate.getTime(); if (maxDate) { this.choiceDate = ""; } }, disabledDate: time => { if (this.choiceDate) { const one = 30 * 24 * 3600 * 1000; const minTime = this.choiceDate - one; const maxTime = this.choiceDate + one; return time.getTime() < minTime || time.getTime() > maxTime; } } }, columns: [ ], footer: [], pageSize: 6, pageIndex: 1, AALloading: false, }; }, created() {}, components: {}, 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.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.StartCityId) this.msg.StartCityId = 0; if (!this.msg.LineId) this.msg.LineId = 0; if (!this.msg.LineTeamId) this.msg.LineTeamId = 0; if (!this.msg.TCID) this.msg.TCID = 0; if (this.msg.QStartDate == "") this.msg.QStartDatetartDate = "2019-01-01"; this.apipost('financestatistics_post_GetYearReportList', this.msg, res=>{ if (res.data.resultCode == 1) { let allDataList = res.data.data this.DataList = res.data.data.list this.columns = [ // 团队编号、团号 点击跳转团控列表 { field: "LineName", title: "线路", width: 80, titleAlign: "left", columnAlign: "left", isResize: true, result: [], type: "select", isFrozen: true }, { field: "Remark", title: "摘要", width: 80, titleAlign: "left", columnAlign: "left", isResize: true, isFrozen: true }, { field: "BRemarkValue", title: allDataList.BYear, width: 150, titleAlign: "left", columnAlign: "left", isResize: true, result: "", filterMultiple: false, formatter: this.moneyFormat, type: "text", isFrozen: true, }, { field: "RemarkValue", title: allDataList.NowYear, formatter: this.moneyFormat, width: 80, titleAlign: "left", columnAlign: "left", isResize: true, isFrozen: true, }, { field: "Compare1", title: "两年比较", width: 100, titleAlign: "left", columnAlign: "left", isResize: true, componentName: "fontColor" }, //,orderBy:'' { field: "RemarkValue", title: allDataList.NowYear, formatter: this.moneyFormat, width: 100, titleAlign: "left", columnAlign: "left", isResize: true }, { field: "NRemarkValue", title: allDataList.NYear, formatter: this.moneyFormat, width: 100, titleAlign: "left", columnAlign: "left", isResize: true }, { field: "Compare2", title: "两年比较", width: 100, titleAlign: "left", columnAlign: "left", isResize: true, componentName: "fontColor2" }, ] 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 === "BRemarkValue") return this.priceFormat(rowData.BRemarkValue); if (field === "RemarkValue") return this.priceFormat(rowData.RemarkValue); if (field === "NRemarkValue") return this.priceFormat(rowData.NRemarkValue); }, 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.GetLocalFile( "financestatistics_post_OutToExcelYearReportList", this.msg, "年度营收报表.xls" ); this.loading = false; }, columnCellClass(rowIndex, columnName, rowData) { if (columnName === "Compare1" || columnName === "Compare2") { return "column-cell-class-name-test"; } if ( (columnName === "BRemarkValue" && rowData.BRemarkValue<0) || (columnName === "RemarkValue" &&rowData.RemarkValue<0) || (columnName === "NRemarkValue" && rowData.NRemarkValue<0)) { return "column-cell-class-text-red"; } }, getStartList1() { // 获取出发城市 this.apipost( "city_post_GetList", { isDefault: -1, priceType: -1 }, res => { if (res.data.resultCode == 1) { this.startCityList1 = res.data.data; } else { } } ); }, getLineTeamList(lineId) { //获取系列列表 this.LineTeamList = []; this.apipost( "team_post_GetList", { lineID: lineId, isTOOP: 1 }, res => { if (res.data.resultCode == 1) { this.msg.LineTeamId = "-1"; this.LineTeamList = res.data.data; } } ); }, 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; }, // handleCurrentChanges(val) { // this.pageIndex = this.msg.pageIndex = val; // this.getPageList(); // }, // getPageList() { // // 获取列表数据 // this.loading = true; // if (!this.msg.OutBranchId && this.msg.OutBranchId !== 0) // this.msg.OutBranchId = -1; // if (!this.msg.StartCityId) this.msg.StartCityId = 0; // if (!this.msg.LineId) this.msg.LineId = 0; // if (!this.msg.LineTeamId) this.msg.LineTeamId = 0; // if (!this.msg.TCID) this.msg.TCID = 0; // if (this.msg.QStartDate == "") this.msg.QStartDatetartDate = "2019-01-01"; // this.apipost( // "financestatistics_post_GetPageList", // this.msg, // res => { // if (res.data.resultCode == 1) { // let data = res.data.data.pageData; // // res.data.data.TotalRevenue // this.total = res.data.data.count; // if (this.total == 0) { // this.DataList = []; // } else { // let newData = []; // data.forEach((x, index) => { // if (index !== data.length - 1) { // x.Is_Transport = x.Is_Transport === 0 ? "否" : "是"; // newData.push(x); // } else { // x.MaoLiRate = this.total===0 ? 0 : parseFloat(x.MaoLiRate/this.total); // x.AverageIncome = this.total===0 ? 0 : parseFloat(x.AverageIncome/this.total); // x.AverageCost = this.total===0 ? 0 : parseFloat(x.AverageCost/this.total); // x.AverageProfit = this.total===0 ? 0 : parseFloat(x.AverageProfit/this.total); // x.LineName = "合计"; // x.TCID = ""; // x.TCNUM = ""; // x.Is_Transport = ""; // x.BName = ""; // newData.push(x); // } // }); // this.DataList = newData; // // this.footer.push(data[data.length-1]) // } // this.loading = false; // } else { // this.loading = false; // this.$message.error(res.data.message); // } // if ((this.msg.OutBranchId = -1)) this.msg.OutBranchId = -1; // if (!this.msg.StartCityId) this.msg.StartCityId = 0; // if (!this.msg.LineId) this.msg.LineId = 0; // if (!this.msg.LineTeamId) this.msg.LineTeamId = 0; // if (!this.msg.TCID) this.msg.TCID = ""; // }, // err => {} // ); // }, getCompanyList() { //获取公司列表 this.apipost( "admin_get_BranchGetList", this.getCompanyMsg, res => { if (res.data.resultCode == 1) { this.CompanyList = res.data.data; } 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>