yhjz_xcx/src/pages/businesszcmx/businesszcmx.vue

<template>
  <div v-if="viewShow" style="background-color: #eeeeee;min-height: 100vh;">
    <div style="display: flex;padding: 2% 2% 2% 2%;">
      <button type="button" class="btn" :class="{tab_bg:tabIndex == 1}" size="mini" @click="showDiv(1)">支出查询</button>
      <button type="button" class="btn" :class="{tab_bg:tabIndex == 2}" size="mini" @click="showDiv(2)">类别统计</button>
      <!--      <button type="button" class="btn" :class="{tab_bg:tabIndex == 3}" size="mini" @click="showDiv(3)">工资出勤</button>-->
      <button type="button" class="btn" :class="{tab_bg:tabIndex == 4}" size="mini" @click="showDiv(4)">食堂标准</button>
    </div>
    <div v-if="zccx || lbtj || stbz" style="font-size: 14px">
      <div style="text-align: center;padding:1% 2% 1% 2%;font-weight: 600"><span>提交时间情况</span></div>
      <div style="text-align: center;" v-for="(item,index) in timeList" :key="index">
        <div style="width: 50%">
          <div v-if="index % 2 == 0" style="height: 20px;padding-left: 20%;font-weight: 600">
            <span>{{ item.name }}:{{ item.outTime }}</span>
          </div>
        </div>
        <div style="width: 50%;float:right;margin-top: -4.8%;">
          <div v-if="index % 2 == 1" style="height: 20px;padding-right: 20%;font-weight: 600">
            <span>{{ item.name }}:{{ item.outTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--主数据-->
    <div style="padding: 2% 0 10% 4%;width: 92%;font-size:12px">
      <div style="background-color: white;border-radius: 10px;padding: 5% 5% 5% 5%;min-height: 78vh">
        <!--        支出查询-->
        <div v-if="zccx">
          <!--    条件搜索-->
          <div style="text-align: left;padding: 2% 0 1% 2%;font: bold 14px 新宋体">一、条件搜索</div>
          <div>
            <div class="showDiv"></div>
            <div style="display: flex">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">1&nbsp;时间区间：</div>
              <div style="width: 50%;display: flex;text-align: left">
                <picker mode="date" :value="dataFormZCCX.startTime" fields="day" @change="bindYearChange($event,2)">
                  <view class="picker">
                    <input disabled style="padding-top: 1%;text-align: center" placeholder="年-月-日"
                           v-model="dataFormZCCX.startTime"></input>
                  </view>
                </picker>
                <span>-</span>
                <picker mode="date" :value="dataFormZCCX.endTime" fields="day" @change="bindYearChange($event,3)">
                  <view class="picker">
                    <input disabled style="padding-top: 1%;text-align: center" placeholder="年-月-日"
                           v-model="dataFormZCCX.endTime"></input>
                  </view>
                </picker>
              </div>
              <div class="arrowOpen"></div>
            </div>
            <div class="showDiv"></div>
            <div style="display: flex" @click="showPicker(1)">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">2&nbsp;建设单位(all)：</div>
              <div style="width: 50%;padding-top: 1%;">
                <input disabled style="text-align: left" placeholder=" "
                       v-model="dataFormZCCX.jsdw"></input>
              </div>
              <div class="arrowOpen"></div>
            </div>
            <div class="showDiv"></div>
            <div style="display: flex" @click="showPicker(5)">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">3&nbsp;执行人：</div>
              <div style="width: 50%;padding-top: 1%;">
                <input disabled style="text-align: left" placeholder=" "
                       v-model="dataFormZCCX.writeUserStr"></input>
              </div>
              <div class="arrowOpen"></div>
            </div>
            <div class="showDiv"></div>
            <div style="display: flex">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">4&nbsp;关键字：</div>
              <div style="width: 50%;padding-top: 1%;">
                <input style="text-align: left" placeholder=" " v-model="dataFormZCCX.gjz"
                       @input="searchZCCXList()"></input>
              </div>
              <div style="display: flex;padding: 1px">
                <button type="button" class="qkBtn" size="mini"
                        @click="clearSearch()">清空
                </button>
              </div>
            </div>
            <div class="showDiv"></div>
          </div>
          <div style="display: flex; justify-content: space-between; align-items: flex-end">
            <div style="text-align: left;padding: 10% 0 1% 2%;font: bold 14px 新宋体">二、满足以上条件列表</div>
<!--            <div style="float: left" v-if="dataListZCCX.length >10">-->
<!--              <button v-if="!showZCCX" type="button" size="mini" style="width: 70px;height: 30px;background-color: #FF00FF;color: white" @click="projectExpand(true)">展开</button>-->
<!--              <button v-else type="button" size="mini" style="width: 70px;height: 30px;background-color: #FF00FF;color: white" @click="projectExpand(false)">收起</button>-->
<!--            </div>-->
          </div>

          <div style="overflow: auto">
            <div style="width: 1000px;">
              <div style="border-bottom: 2px solid #FF00FF;"></div>
              <div>
                <tr class="th-row"
                    style="display: flex;font-size: 12px;border-bottom: 2px solid #FF00FF;font-weight: bold;border-left: 2px solid #FF00FF;border-right: 2px solid #FF00FF">
                  <td class="trTd" style="width: 4%;text-align: center">序号</td>
                  <td class="trTd" style="width: 10%;text-align: center">日期</td>
                  <td class="trTd" style="width: 10%;text-align: center">支出金额</td>
                  <td class="trTd" style="width: 26%;text-align: center">内容</td>
                  <td class="trTd" style="width: 8%;text-align: center">执行人</td>
                  <td class="trTd" style="width: 8%;text-align: center">支付方式</td>
                  <td class="trTd" style="width: 14%;text-align: center">支出类别</td>
                  <td class="trTd" style="width: 20%;text-align: center">立项归属</td>
                  <td v-if="userId == '1' || userId == '10'" class="trTd" style="width: 10%;text-align: center">收款人</td>
<!--                  <td class="trTd" style="width: 14%;text-align: center">地址</td>-->
<!--                  <td class="trTd" style="width: 8%;text-align: center">电话</td>-->
<!--                  <td class="trTd" style="width: 15%;text-align: center">备注</td>-->
                </tr>
              </div>
<!--              <div v-for="(item,index) in dataListZCCXCommons" :key="index" style="border-right: 2px solid #FF00FF;border-left: 2px solid #FF00FF">-->
              <div v-for="(item,index) in dataListZCCX" :key="index" style="border-right: 2px solid #FF00FF;border-left: 2px solid #FF00FF">
                <div v-if="selectOneDataId == item.id" style="background-color: #f8c2f8"
                     @click="selectOneData(item.id)">
                  <tr class="th-row" style="display: flex;font-size: 12px">
                    <td class="trTd" style="width: 4%;text-align: center">{{ index + 1 }}</td>
                    <td class="trTd" style="width: 10%;text-align: center">{{ item.outTime }}</td>
                    <td class="trTd" style="width: 10%;text-align: center">{{ item.outMoney }}</td>
                    <td class="trTd" style="width: 26%;text-align: center">{{ item.outNr ? item.outNr : "暂无" }}</td>
                    <td class="trTd" style="width: 8%;text-align: center">{{ item.writeUserStr }}</td>
                    <td class="trTd" style="width: 8%;text-align: center">
                    <span v-for="(itemCh,i) in payList" :key="i" v-if="itemCh.dictId == item.outWay">{{
                      itemCh.name
                    }}</span>
                    </td>
                    <td class="trTd" style="width: 14%;text-align: center;font-weight: bold">
                  <span v-for="(itemCh,i) in expenseList" :key="i" v-if="itemCh.dictId == item.outType">{{
                      itemCh.name
                    }}</span>
                    </td>
                    <td class="trTd" style="width: 20%;text-align: center">
                      <div v-for="(itemCh,i) in projectList" :key="i" v-if="itemCh.projectId == item.outProject">
                        <span v-if="itemCh.projectNewName !== null">{{ itemCh.projectNewName }}</span>
                        <span v-else>{{ itemCh.project }}</span>
                      </div>
                    </td>
                    <td v-if="userId == '1' || userId == '10'" class="trTd" style="width: 10%;text-align: center">
                      {{ item.outPayee ? item.outPayee : "暂无"}}
                    </td>
<!--                    <td class="trTd" style="width: 14%;text-align: center">-->
<!--                      {{ item.outPayeeAddress ? item.outPayeeAddress : "暂无" }}-->
<!--                    </td>-->
<!--                    <td class="trTd" style="width: 8%;text-align: center">-->
<!--                      {{ item.outPayeePhone ? item.outPayeePhone : "暂无" }}-->
<!--                    </td>-->
<!--                    <td class="trTd" style="width: 15%;text-align: center">-->
<!--                      {{item.outRemark ? item.outRemark : "暂无"}}-->
<!--                    </td>-->
                  </tr>
                </div>
                <div v-else @click="selectOneData(item.id)">
                  <tr class="th-row" style="display: flex;font-size: 12px">
                    <td class="trTd" style="width: 4%;text-align: center">{{ index + 1 }}</td>
                    <td class="trTd" style="width: 10%;text-align: center">{{ item.outTime }}</td>
                    <td class="trTd" style="width: 10%;text-align: center">{{ item.outMoney?item.outMoney: '0' }}</td>
                    <td class="trTd" style="width: 26%;text-align: center">{{ item.outNr ? item.outNr : "暂无" }}</td>
                    <td class="trTd" style="width: 8%;text-align: center">{{ item.writeUserStr }}</td>
                    <td class="trTd" style="width: 8%;text-align: center">
                  <span v-for="(itemCh,i) in payList" :key="i" v-if="itemCh.dictId == item.outWay">{{
                      itemCh.name
                    }}</span>
                    </td>
                    <td class="trTd" style="width: 14%;text-align: center;font-weight: bold">
                  <span v-for="(itemCh,i) in expenseList" :key="i" v-if="itemCh.dictId == item.outType">{{
                      itemCh.name
                    }}</span>
                    </td>
                    <td class="trTd" style="width: 20%;text-align: center">
                      <div v-for="(itemCh,i) in projectList" :key="i" v-if="itemCh.projectId == item.outProject">
                        <span  v-if="itemCh.projectNewName !== null">{{ itemCh.projectNewName }}</span>
                        <span  v-else>{{ itemCh.project }}</span>
                      </div>
                    </td>
                    <td v-if="userId == '1' || userId == '10'" class="trTd" style="width: 10%;text-align: center">
                      {{ item.outPayee ? item.outPayee : '暂无' }}
                    </td>
<!--                    <td class="trTd" style="width: 14%;text-align: center">-->
<!--                      {{ item.outPayeeAddress ? item.outPayeeAddress : "暂无" }}-->
<!--                    </td>-->
<!--                    <td class="trTd" style="width: 8%;text-align: center">-->
<!--                      {{ item.outPayeePhone ? item.outPayeePhone : "暂无" }}-->
<!--                    </td>-->
<!--                    <td class="trTd" style="width: 15%;text-align: center">-->
<!--                      {{ item.outRemark ? item.outRemark : "暂无" }}-->
<!--                    </td>-->
                  </tr>
                </div>
              </div>
              <div v-if="!dataListZCCX.length > 0" style="text-align: center;font-size: 12px;">
                暂无数据
              </div>
              <div style="border-bottom: 2px solid #FF00FF;"></div>
            </div>
          </div>
          <view class="paging" style="display: flex;justify-content: space-between;align-items: center">
            <view class="page_btn">
              <!--                <view class="up_page"  v-if="frontPage" @click="clickFront">上一页</view>-->
              <button type="button" size="mini" style="width: 100%;height: 100%;background-color: #FF00FF;color: white" @click="clickFront">上一页</button>
            </view>
            <view class="page_num">第{{thisPages}}页  共{{pages}}页</view>
            <view class="page_btn">
              <!--                <view class="down_page" v-if="nextPage" @click="clickNext">下一页</view>-->
              <button type="button" size="mini" style="width: 100%;height: 100%;background-color: #FF00FF;color: white" @click="clickNext">下一页</button>
            </view>
          </view>
        </div>
        <!--        类别统计-->
        <div v-if="lbtj">
          <!--    条件搜索-->
<!--          <div style="text-align: left;padding: 2% 0 1% 2%;font: bold 14px 新宋体">一、条件搜索</div>-->
          <div>
            <!--<div class="showDiv"></div>
            <div style="display: flex">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:28%">1&nbsp;年度：</div>
              <div style="width: 54%;">
                <picker mode="date" :value="dataForLBTJ.year" fields="year" @change="bindYearChange($event,11)">
                  <view class="picker">
                    <input disabled style="text-align: left" placeholder=" "
                           v-model="dataForLBTJ.year"></input>
                  </view>
                </picker>
              </div>
              <div class="arrowOpen"></div>
            </div>-->
            <!--<div class="showDiv"></div>
            <div style="display: flex">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:28%">2&nbsp;起始日期：</div>
              <div style="width: 54%;">
                <picker mode="date" :value="dataForLBTJ.startTime" fields="day" @change="bindYearChange($event,12)">
                  <view class="picker">
                    <input disabled style="text-align: left" placeholder=" "
                           v-model="dataForLBTJ.startTime"></input>
                  </view>
                </picker>
              </div>
              <div class="arrowOpen"></div>
            </div>
            <div class="showDiv"></div>
            <div style="display: flex">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:28%">3&nbsp;终止日期：</div>
              <div style="width: 54%;">
                <picker mode="date" :value="dataForLBTJ.endTime" fields="day" @change="bindYearChange($event,13)">
                  <view class="picker">
                    <input disabled style="text-align: left" placeholder=" "
                           v-model="dataForLBTJ.endTime"></input>
                  </view>
                </picker>
              </div>
              <div class="arrowOpen"></div>
            </div>-->
            <div style="display: flex">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">时间区间：</div>
              <div style="width: 50%;display: flex;text-align: left">
                <picker mode="date" :value="dataForLBTJ.startTime" fields="day" @change="bindYearChange($event,12)">
                  <view class="picker">
                    <input disabled style="padding-top: 1%;text-align: center" placeholder="年-月-日"
                           v-model="dataForLBTJ.startTime"></input>
                  </view>
                </picker>
                <span>-</span>
                <picker mode="date" :value="dataForLBTJ.endTime" fields="day" @change="bindYearChange($event,13)">
                  <view class="picker">
                    <input disabled style="padding-top: 1%;text-align: center" placeholder="年-月-日"
                           v-model="dataForLBTJ.endTime"></input>
                  </view>
                </picker>
              </div>
              <div class="arrowOpen"></div>
            </div>
<!--            <div class="showDiv"></div>-->
            <div style="display: flex;padding: 1px;float: right">
              <button type="button" class="qkBtn" size="mini"
                      @click="clearLbtjSjqj()">清空
              </button>
            </div>
            <div class="showDiv"></div>
          </div>
          <div style="text-align: left;padding: 10% 0 1% 2%;font: bold 14px 新宋体">一、多角度类别统计</div>
          <div style="display: flex;" @click="showPicker(6)">
            <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">建设单位：</div>
            <div style="width: 50%;padding-top: 1%;">
              <input disabled style="text-align: left" placeholder=" "
                     v-model="dataForLBTJ.jsdw"></input>
            </div>
            <div class="arrowOpen"></div>
          </div>
          <div class="showDiv"></div>
          <div style="display: flex;padding: 1px;float: right">
            <button type="button" class="qkBtn" size="mini"
                    @click="clearJsdw()">清空
            </button>
          </div>
           <div style="width: 100%;padding: 12% 0 1% 2%;">
              <div style="border-bottom: 2px solid #FF00FF;"></div>
              <div>
                <tr class="th-row"
                    style="display: flex;font-size: 12px;border-bottom: 2px solid #FF00FF;font-weight: bold;border-left: 2px solid #FF00FF;border-right: 2px solid #FF00FF">
                  <td class="trTd" style="width: 10%;text-align: center">序号</td>
                  <td class="trTd" style="width: 35%;text-align: center">类别</td>
                  <td class="trTd" style="width: 40%;text-align: center">支出金额</td>
                  <td class="trTd" style="width: 15%;text-align: center">占比</td>
                </tr>
              </div>
              <!--            接收数组列表-->
              <div v-for="(item,index) in zclbList" :key="index" style="border-right: 2px solid #FF00FF;border-left: 2px solid #FF00FF">
                <tr v-if="index < 13" class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 10%;text-align: center">{{ index + 1 }}</td>
                  <td class="trTd" style="width: 35%;text-align: center">{{ item.name }}</td>
                  <td class="trTd" style="width: 40%;text-align: center">
                    <div v-for="(itemCh,indexCh) in dataListLBTJ" :key="indexCh">
                    <span v-if="item.dictId == itemCh.id">
                      {{ itemCh.totalNum }}
                    </span>
                    </div>
                  </td>
                  <td class="trTd" style="width: 15%;text-align: center">
                    <div v-for="(itemCh,indexCh) in dataListLBTJ" :key="indexCh">
                    <span v-if="item.dictId == itemCh.id">
                      {{ itemCh.bfb }}
                    </span>
                    </div>
                    <!--                  {{item.bfb}}-->
                  </td>
                </tr>
              </div>
              <div style="border-bottom: 2px solid #FF00FF;border-left: 2px solid #FF00FF;border-right: 2px solid #FF00FF">
                <tr class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 45.5%;text-align: center;font-weight: 600;">合计</td>
                  <td class="trTd" style="width: 40%;text-align: center;font-weight: 600;">{{ hj }}</td>
                  <td class="trTd" style="width: 15%;text-align: center;font-weight: 600;">100%</td>
                </tr>
              </div>
            </div>
          <div style="overflow: auto">
            <div style="width: 600px;padding-top: 10%">
              <div style="border-bottom: 2px solid #FF00FF;"></div>
              <div>
                <tr class="th-row"
                    style="display: flex;font-size: 12px;border-bottom: 2px solid #FF00FF;font-weight: bold;border-left: 2px solid #FF00FF;border-right: 2px solid #FF00FF">
                  <td class="trTd" style="width: 5%;text-align: center">序号</td>
                  <td class="trTd" style="width: 20%;text-align: center">类别</td>
                  <td class="trTd" style="width: 20%;text-align: center">肖爽</td>
                  <td class="trTd" style="width: 20%;text-align: center">侯吉庆</td>
                  <td class="trTd" style="width: 20%;text-align: center">李现举</td>
                  <td class="trTd" style="width: 20%;text-align: center">侯吉光</td>
                </tr>
              </div>
              <!--            接收数组列表-->
              <div v-for="(item,index) in trList" :key="index" style="border-right: 2px solid #FF00FF;border-left: 2px solid #FF00FF">
                <tr v-if="index <13" class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 5%;text-align: center">{{ index + 1 }}</td>
                  <td class="trTd" style="width: 20%;text-align: center">{{ item.typeName }}</td>
                  <td class="trTd" style="width: 20%;text-align: center">
                    {{ item.xs }}
                  </td>
                  <td class="trTd" style="width: 20%;text-align: center">
                    {{ item.hdq }}
                  </td>
                  <td class="trTd" style="width: 20%;text-align: center">
                    {{ item.lxj }}
                  </td>
                  <td class="trTd" style="width: 20%;text-align: center">
                    {{ item.hdg }}
                  </td>
                </tr>
              </div>
              <div style="border-bottom: 2px solid #FF00FF;border-right: 2px solid #FF00FF;border-left: 2px solid #FF00FF">
                <tr class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 25.5%;text-align: center;font-weight: 600;">以上支出总和</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{yszczh.xsyszh}}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{yszczh.hdqyszh}}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{yszczh.lxjyszh}}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{yszczh.hdgyszh}}</td>
                </tr>
                <tr class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 25.5%;text-align: center;font-weight: 600;">支出占比</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{yszczh.xsyszb}}%</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{yszczh.hdqyszb}}%</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{yszczh.lxjyszb}}%</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{yszczh.hdgyszb}}%</td>
                </tr>
                <tr class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 25.5%;text-align: center;font-weight: 600;">目前收入总和</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.xs }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.hdq }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.lxj }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">/</td>
                </tr>
                <tr class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 25.5%;text-align: center;font-weight: 600;">目前余额</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqye.xs  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqye.hdq  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqye.lxj  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">/</td>
                </tr>
                <tr class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 25.5%;text-align: center;font-weight: 600;">其中内部转账收入金额</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.xsnb  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.hdqnb  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.lxjnb  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">/</td>
                </tr>
                <tr class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 25.5%;text-align: center;font-weight: 600;">其中其它收入金额</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.xsqt  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.hdqqt  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">{{ mqsrzh.lxjqt  }}</td>
                  <td class="trTd" style="width: 20%;text-align: center;font-weight: 600;">/</td>
                </tr>
              </div>
            </div>
          </div>


          <div style="text-align: left;padding: 10% 0 1% 2%;font: bold 14px 新宋体">二、内部转账验证</div>
          <div style="overflow: auto">
          <div style="width: 600px;">
            <div style="border-bottom: 2px solid #FF00FF;"></div>
            <div>
              <tr class="th-row"
                  style="display: flex;font-size: 12px;border-bottom: 2px solid #FF00FF;bfont-weight: bold;border-left: 2px solid #FF00FF;border-right: 2px solid #FF00FF">
                <td class="trTd" style="width: 15%;text-align: center">年月</td>
                <td class="trTd" style="width: 19%;text-align: center"><div><span>支出</span><br><span>侯吉光</span></div></td>
                <td class="trTd" style="width: 17%;text-align: center"><div><span>收入</span><br><span>肖爽</span></div></td>
                <td class="trTd" style="width: 17%;text-align: center"><div><span>收入</span><br><span>侯吉庆</span></div></td>
                <td class="trTd" style="width: 17%;text-align: center"><div><span>收入</span><br><span>李现举</span></div></td>
                <td class="trTd" style="width: 15%;text-align: center">验证</td>
              </tr>
            </div>
            <div style="border-bottom: 2px solid #FF00FF;border-right: 2px solid #FF00FF;border-left: 2px solid #FF00FF">
              <div v-for="(item,index) in yzList" :key="index">
                <tr class="th-row" style="display: flex;font-size: 12px;">
                  <td class="trTd" style="width: 15%;text-align: center">{{ item.ny }}</td>
                  <td class="trTd" style="width: 19%;text-align: center">{{ item.hjg }}</td>
                  <td class="trTd" style="width: 17%;text-align: center">
                    {{ item.xs }}
                  </td>
                  <td class="trTd" style="width: 17%;text-align: center">
                    {{ item.hjq }}
                  </td>
                  <td class="trTd" style="width: 17%;text-align: center">
                    {{ item.lxj }}
                  </td>
                  <td class="trTd" style="width: 15%;text-align: center">
                    {{ item.yz }}
                  </td>
                </tr>
              </div>
            </div>
          </div>
          </div>
          <div style="text-align: left;padding: 10% 0 1% 2%;font: bold 14px 新宋体">三、经营统计</div>
          <xmcb ref="xmcb"></xmcb>
        </div>
        <!--        工资出勤-->
<!--        <div v-if="gzcq">-->
<!--          &lt;!&ndash;    条件搜索&ndash;&gt;-->
<!--          <div style="text-align: left;padding: 2% 1% 0 2%;font: bold 14px 新宋体">一、条件搜索</div>-->
<!--          <div>-->
<!--            <div class="showDiv"></div>-->
<!--            <div style="display: flex">-->
<!--              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">1&nbsp;年度：</div>-->
<!--              <div style="width: 50%;">-->
<!--                <picker mode="date" :value="dataFormGZCQ.year" fields="year" @change="bindYearChange($event,21)">-->
<!--                  <view class="picker">-->
<!--                    <input disabled style="text-align: left" placeholder=" "-->
<!--                           v-model="dataFormGZCQ.year"></input>-->
<!--                  </view>-->
<!--                </picker>-->
<!--              </div>-->
<!--              <div class="arrowOpen"></div>-->
<!--            </div>-->
<!--            <div class="showDiv"></div>-->
<!--            <div style="display: flex" @click="showPicker(3)">-->
<!--              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">2&nbsp;在职人员姓名：</div>-->
<!--              <div style="width: 50%;;">-->
<!--                <input disabled style="text-align: left" placeholder=" "-->
<!--                       v-model="dataFormGZCQ.zz"></input>-->
<!--              </div>-->
<!--              <div class="arrowOpen"></div>-->
<!--            </div>-->
<!--            <div class="showDiv"></div>-->
<!--            <div style="display: flex" @click="showPicker(4)">-->
<!--              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">3&nbsp;离职人员姓名：</div>-->
<!--              <div style="width: 50%;">-->
<!--                <input disabled style="text-align: left" placeholder=" "-->
<!--                       v-model="dataFormGZCQ.lz"></input>-->
<!--              </div>-->
<!--              <div class="arrowOpen"></div>-->
<!--            </div>-->
<!--            <div class="showDiv"></div>-->
<!--          </div>-->
<!--          <div style="text-align: left;padding: 10% 1% 0 2%;font: bold 14px 新宋体">二、工资出勤</div>-->
<!--          <div style="width: 100%;">-->
<!--            <div style="border-bottom: 2px solid #FF00FF;"></div>-->
<!--            <div>-->
<!--              <tr class="th-row"-->
<!--                  style="display: flex;font-size: 12px;border-bottom: 2px solid #FF00FF;font-weight: bold">-->
<!--                <td class="trTd" style="width: 10%;text-align: center">序号</td>-->
<!--                <td class="trTd" style="width: 16%;text-align: center">年月</td>-->
<!--                <td class="trTd" style="width: 20%;text-align: center">姓名</td>-->
<!--                <td class="trTd" style="width: 16%;text-align: center">工资</td>-->
<!--                <td class="trTd" style="width: 15%;text-align: center">出勤</td>-->
<!--                <td class="trTd" style="width: 20%;text-align: center">备注</td>-->
<!--              </tr>-->
<!--            </div>-->
<!--            <div v-for="(item,index) in dataCQJLList" :key="index">-->
<!--              <tr class="th-row" style="display: flex;font-size: 12px;">-->
<!--                <td class="trTd" style="width: 10%;text-align: center">{{ index + 1 }}</td>-->
<!--                <td class="trTd" style="width: 16%;text-align: center">{{ item.dateDay }}</td>-->
<!--                <td class="trTd" style="width: 20%;text-align: center">{{ item.name }}</td>-->
<!--                <td class="trTd" style="width: 16%;text-align: center">-->
<!--                  {{ item.outMoney !== null ? item.outMoney : '暂无' }}-->
<!--                </td>-->
<!--                <td class="trTd" style="width: 15%;text-align: center">{{ item.workDay !== null ? item.workDay : '' }}-->
<!--                </td>-->
<!--                <td class="trTd" style="width: 20%;text-align: center"><span class="spanClass">{{ item.remark !== null ? item.remark : '' }}</span>-->
<!--                </td>-->
<!--              </tr>-->
<!--            </div>-->
<!--            <div style="border-bottom: 2px solid #FF00FF;"></div>-->
<!--          </div>-->
<!--        </div>-->
        <!--        食堂标准-->
        <div v-if="stbz">
          <!--    条件搜索-->
          <div style="text-align: left;padding: 2% 0 1% 2%;font: bold 14px 新宋体">一、条件搜索</div>
          <div>
            <div class="showDiv"></div>
            <!--<div style="display: flex">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:28%">1&nbsp;年度：</div>
              <div style="width: 54%;">
                <picker mode="date" :value="dataFormSTBZ.year" fields="year" @change="bindYearChange($event,31)">
                  <view class="picker">
                    <input disabled style="text-align: left" placeholder=" "
                           v-model="dataFormSTBZ.year"></input>
                  </view>
                </picker>
              </div>
              <div class="arrowOpen"></div>
            </div>-->
            <div style="display: flex">
              <div style="text-align: left;padding: 1% 0 1% 4%;width:36%">1&nbsp;时间区间：</div>
              <div style="width: 50%;display: flex;text-align: left">
                <picker mode="date" :value="dataFormSTBZ.startTime" fields="month" @change="bindYearChange($event,32)">
                  <view class="picker">
                    <input disabled style="padding-top: 1%;text-align: center" placeholder="年-月"
                           v-model="dataFormSTBZ.startTime"></input>
                  </view>
                </picker>
                <span>-</span>
                <picker mode="date" :value="dataFormSTBZ.endTime" fields="month" @change="bindYearChange($event,33)">
                  <view class="picker">
                    <input disabled style="padding-top: 1%;text-align: center" placeholder="年-月"
                           v-model="dataFormSTBZ.endTime"></input>
                  </view>
                </picker>
              </div>
              <div class="arrowOpen"></div>
            </div>
            <div class="showDiv"></div>
          </div>
          <div style="display: flex; justify-content: space-between; align-items: flex-end; width: 100%">
            <div style="text-align: left;padding: 10% 0 1% 2%;font: bold 14px 新宋体">二、食堂标准</div>
<!--            <div style="float: left" v-if="dateSTBZList.length >10">-->
<!--              <button v-if="!showSTBZ" type="button" size="mini" style="width: 70px;height: 30px;background-color: #FF00FF;color: white" @click="stbzExpand(true)">展开</button>-->
<!--              <button v-else type="button" size="mini" style="width: 70px;height: 30px;background-color: #FF00FF;color: white" @click="stbzExpand(false)">收起</button>-->
<!--            </div>-->
          </div>
          <div style="overflow: auto">
            <div style="width: 450px;">
              <div style="border-bottom: 2px solid #FF00FF;"></div>
              <tr class="th-row" style="display: flex;font-size: 12px;border-bottom: 2px solid #FF00FF;font-weight: bold;border-left: 2px solid #FF00FF;border-right: 2px solid #FF00FF">
                <td class="trTd" style="width: 10%;text-align: center">序号</td>
                <td class="trTd" style="width: 20%;text-align: center">年月</td>
                <td class="trTd" style="width: 20%;text-align: center"><div><span>月支出</span><br/><span>金额</span></div></td>
                <td class="trTd" style="width: 20%;text-align: center"><div><span>月出勤</span><br/><span>天数</span></div></td>
                <td class="trTd" style="width: 20%;text-align: center">修正</td>
                <td class="trTd" style="width: 20%;text-align: center">标准</td>
              </tr>
              <div v-for="(item,index) in dateSTBZList" :key="index" style="border-left: 2px solid #FF00FF;border-right: 2px solid #FF00FF">
                <tr class="th-row" style="display: flex;font-size: 12px">
                  <td class="trTd" style="width: 10%;text-align: center">{{ index + 1 }}</td>
                  <td class="trTd" style="width: 20%;text-align: center">{{ item.dateA ? item.dateA:''}}</td>
                  <td class="trTd" style="width: 20%;text-align: center">{{ item.money?item.money:'0' }}</td>
                  <td class="trTd" style="width: 20%;text-align: center">{{ item.day?item.day:'0' }}</td>
                  <td class="trTd" style="width: 20%;text-align: center"><input v-model="item.stday"></input></td>
                  <td class="trTd" style="width: 20%;text-align: center">{{ item.jz?item.jz:'0' }}</td>
                </tr>
              </div>
              <tr style="display: flex;font-size: 12px;font-weight: bold;border-bottom: 2px solid #FF00FF;border-right: 2px solid #FF00FF;border-left: 2px solid #FF00FF">
                <td class="trTd" style="width: 31%;text-align: center">平均</td>
                <td class="trTd" style="width: 20%;text-align: center">{{ pjMoney }}</td>
                <td class="trTd" style="width: 20%;text-align: center">{{ pjDay }}</td>
                <td class="trTd" style="width: 20%;text-align: center">{{ pjStDay }}</td>
                <td class="trTd" style="width: 20%;text-align: center">{{ bzJz }}</td>
              </tr>
            </div>
          </div>
          <div style="padding: 10% 0 10% 0;display: flex">
            <button class="cbtn" type="button"
                    @click="updateStxzList()">提交
            </button>
          </div>
        </div>
      </div>
    </div>
    <mpvue-picker v-if="isShow" ref="mpvuePicker"
                  :pickerValueArray='pickerValueArray'
                  :pickerValueDefault='pickerValueDefault'
                  @onConfirm="pickerConfirm"></mpvue-picker>
  </div>
</template>

<script>
import mpvuePicker from "mpvue-picker";
import {isAuth} from "../../utils";
import xmcb from "./xmcb";

export default {
  name: "businesszcmx",
  components: {
    mpvuePicker,
    xmcb
  },
  data() {
    return {
      selectOneDataId: 0,//选中背景
      tabIndex: 1,
      viewShow: false,
      //页数
      zcpageIndex: 1,
      zctotalPage: 0,
      zcpageSize: 30,
      pageIndex: 1,
      totalPage: 0,
      pageSize: 30,
      //全局
      isShow: false,
      pickerValueArray: [],
      pickerValueDefault: [],
      //最新数据列表信息 - 时间信息
      timeList: [],
      //字典获取的数据数组
      payList: [],//支付方式
      recipientList: [],//收款人
      expenseList: [],//支出类别
      dicGCLBList: [],//工程类别
      dicJSDWList: [],//工程类别
      dicZxrList:[],//执行人
      flag: 0,//标志
      //所有的立项列表
      projectList: [],//立项数据
      //支出查询
      zccx: false,
      // 分页
      frontPage: false,//上一页 存在true，不存在false
      nextPage: false,//下一页 存在true，不存在false
      pages: 0,//所有页
      thisPages: 1,//当前页
      rows: 10,//每页条数
      total: 0,//总条数
      dataFormZCCX: {
        nowYear: "",//当前年度
        jsdwId: '',//建设单位id
        jsdw: '',//建设单位
        gclbId: '',//工程类别id
        gclb: '',//工程类别
        gjz: '',
        startTime: '',//开始年份
        endTime: '',//结束年份
        writeUserId: '',//执行人
        writeUserStr: '',//执行人
      },
      hj: 0,
      dataListZCCX: [],//支出查询数据
      dataTJList: [],//统计list
      zclbList: [],//获取字典信息
      trList: [], // 四人类别统计列表
      yzList:[],//验证统计列表
      yszczh: {}, // 以上支出总和
      mqsrzh: {}, // 目前收入总和
      mqye: {}, // 目前余额
      ///
      //类别统计
      lbtj: false,
      dataForLBTJ: {
        year: '',
        startTime: '',
        endTime: '',
      },
      dataListLBTJ: [],//类别统计数据
      dataFormLb: [],//内部转账验证数据
      yz: '',//*验证
      ///
      //工资出勤
      gzcq: false,
      dataFormGZCQ: {
        year: '',
        zzId: '',
        zz: '',
        lzId: '',
        lz: '',
      },
      ryList: [],// 获取人员列表
      dataCQJLList: [],//出勤记录
      ///
      //食堂标准
      stbz: false,
      dataFormSTBZ: {
        year: '',
        startTime: '',
        endTime: '',
      },
      dateSTBZList: [],//食堂标准list
      pjMoney: 0,//平均金额
      pjDay: 0,//平均天数
      pjStDay:0, //修正平均
      bzJz: 0,//标准均值
      userId:'',
      zxrId: '',
      showZCCX: false,
      dataListZCCXCommons: [],
      showSTBZ: false,
      dateSTBZListCommons: [],

    }
  },
  methods: {
    //支出明细展开
    projectExpand(e){
      if(e){
        this.showZCCX = e
        this.dataListZCCXCommons = [];
        this.dataListZCCXCommons = this.dataListZCCX
      }else {
        this.showZCCX = e
        this.dataListZCCXCommons = [];
        this.dataListZCCXCommons = this.dataListZCCX.slice(0,10)
      }
    },
    //食堂标准展开
    stbzExpand(e){
      if(e){
        this.showSTBZ = e
        this.dateSTBZListCommons = [];
        this.dateSTBZListCommons = this.dateSTBZList
      }else {
        this.showSTBZ = e
        this.dateSTBZListCommons = [];
        this.dateSTBZListCommons = this.dateSTBZList.slice(0,10)
      }
    },
    //页面更新框
    showDiv(num) {
      this.zcpageIndex = 1;
      this.zctotalPage = 0;
      this.zcpageSize = 30;
      this.pageIndex = 1;
      this.totalPage = 0;
      this.pageSize = 30;
      if (num == 1) {
        wx.setNavigationBarTitle({
          title: '支出统计-支出查询'
        });
        this.tabIndex = 1;
        this.zccx = true;
        this.lbtj = false;
        this.gzcq = false;
        this.stbz = false;
        this.dataFormZCCX = {
          nowYear: "",//当前年度
          jsdwId: '',//建设单位id
          jsdw: '',//建设单位
          gclbId: '',//工程类别id
          gclb: '',//工程类别
          gjz: '',
          startTime: '',//开始年份
          endTime: '',//结束年份
          writeUserId: '',//执行人
          writeUserStr: '',//执行人
        };
      } else if (num == 2) {
        wx.setNavigationBarTitle({
          title: '支出统计-统计类别'
        });
        this.tabIndex = 2;
        this.zccx = false;
        this.lbtj = true;
        this.gzcq = false;
        this.stbz = false;
        this.dataForLBTJ = {};
        this.getLatestZclb();
      } else if (num == 3) {
        wx.setNavigationBarTitle({
          title: '支出统计-工资出勤'
        });
        this.tabIndex = 3;
        this.zccx = false;
        this.lbtj = false;
        this.gzcq = true;
        this.stbz = false;
        this.dataFormGZCQ = {};
        this.dataFormGZCQ.year = new Date().getFullYear();
        this.searchGZCQList();
      } else if (num == 4) {
        wx.setNavigationBarTitle({
          title: '支出统计-食堂标准'
        });
        this.tabIndex = 4;
        this.zccx = false;
        this.lbtj = false;
        this.gzcq = false;
        this.stbz = true;
        this.dataFormSTBZ = {};
        this.dataFormSTBZ.year = new Date().getFullYear();
        this.searchSTBZList();
      }
    },
    //弹框
    //时间弹框
    bindYearChange: function (e, num) {
      if (num == 1) {
        //支出查询-当前年度
        this.dataFormZCCX.nowYear = e.mp.detail.value;
        this.dataFormZCCX.startTime = "";
        this.dataFormZCCX.endTime = "";
        this.searchZCCXList();
      } else if (num == 2) {
        this.dataFormZCCX.nowYear = "";
        this.dataFormZCCX.startTime = e.mp.detail.value;
        if (this.dataFormZCCX.startTime !== undefined && this.dataFormZCCX.endTime !== undefined) {
          this.searchZCCXList();
        }
      } else if (num == 3) {
        this.dataFormZCCX.nowYear = "";
        this.dataFormZCCX.endTime = e.mp.detail.value;
        if (this.dataFormZCCX.startTime !== undefined && this.dataFormZCCX.endTime !== undefined) {
          this.searchZCCXList();
        }
      } else if (num == 11) {
        this.dataForLBTJ.year = e.mp.detail.value;
        this.dataForLBTJ.startTime = '';
        this.dataForLBTJ.endTime = '';
        this.searchLBTJList();
      } else if (num == 12) {
        this.dataForLBTJ.startTime = e.mp.detail.value;
        this.dataForLBTJ.year = ''
        this.searchLBTJList();
        this.$refs.xmcb.startTime = e.mp.detail.value;
        this.$refs.xmcb.getAll()
      } else if (num == 13) {
        this.dataForLBTJ.year = ''
        //判断开始日期有没有值如果有进行判断  没有则  直接进行赋值
        if (this.dataForLBTJ.startTime !== undefined) {
          if (e.mp.detail.value >= this.dataForLBTJ.startTime && this.dataForLBTJ.startTime) {
            this.dataForLBTJ.endTime = e.mp.detail.value;
            this.searchLBTJList();
            this.$refs.xmcb.endTime = e.mp.detail.value;
            this.$refs.xmcb.getAll()
          } else {
            wx.showModal({
              title: '提示',
              content: '终止日期小于开始日期请重新选择',
              success: function (res) {
                if (res.confirm) {//这里是点击了确定以后
                } else {//这里是点击了取消以后
                }
              }
            })
          }
        } else {
          this.dataForLBTJ.endTime = e.mp.detail.value;
          this.searchLBTJList();
        }
      } else if (num == 21) {
        this.dataFormGZCQ.year = e.mp.detail.value;
        this.searchGZCQList();
      } else if (num == 31) {
        this.dataFormSTBZ.year = e.mp.detail.value;
        this.searchSTBZList();
      } else if (num == 32) {
        this.dataFormSTBZ.startTime = e.mp.detail.value;
        this.dataFormSTBZ.year = ''
        this.searchSTBZList();
      } else if (num == 33) {
        //判断开始日期有没有值如果有进行判断  没有则  直接进行赋值
        if (this.dataFormSTBZ.startTime !== undefined) {
          if (e.mp.detail.value >= this.dataFormSTBZ.startTime && this.dataFormSTBZ.startTime) {
            this.dataFormSTBZ.endTime = e.mp.detail.value;
            this.searchSTBZList();
          } else {
            wx.showModal({
              title: '提示',
              content: '终止日期小于开始日期请重新选择',
              success: function (res) {
                if (res.confirm) {//这里是点击了确定以后
                } else {//这里是点击了取消以后
                }
              }
            })
          }
        } else {
          this.dataFormSTBZ.endTime = e.mp.detail.value;
          this.searchSTBZList();
        }
      }
      this.$forceUpdate();
    },

    //条件选择弹框
    showPicker(num) {
      //1-建设单位 2-工程类别 3-在职人员弹框 4-离职人员弹框
      this.pickerValueArray = [];
      this.flag = num;
      if (num == 1) {
        //支出查询-建设单位
        this.dicJSDWList.forEach((item) => {
          if (this.dataFormZCCX.jsdwId == null
            || this.dataFormZCCX.jsdwId == '' || this.dataFormZCCX.jsdwId == undefined) {
            this.pickerValueArray.push({value: item.dictId, label: item.name})
          } else if (item.dictId !== this.dataFormZCCX.jsdwId) {
            this.pickerValueArray.push({value: item.dictId, label: item.name})
          }
        })
      } else if (num == 2) {
        //支出查询-工程类别
        let lxFlag = false;
        this.dicGCLBList.forEach((item) => {
          if (this.dataFormZCCX.gclbId !== null && this.dataFormZCCX.gclbId !== '' && this.dataFormZCCX.gclbId !== undefined) {
            if (this.dataFormZCCX.gclbId.toString().indexOf(",") < 0) {
              lxFlag = item.dictId.toString() == this.dataFormZCCX.gclbId.toString();
              if (lxFlag == false) {
                this.pickerValueArray.unshift({value: item.dictId, label: item.name})
              }
              lxFlag = false;
            } else {
              this.dataFormZCCX.gclbId.split(",").forEach((itemChildren) => {
                if (item.dictId.toString() == itemChildren.toString()) {
                  lxFlag = true;
                }
              })
              if (lxFlag == false) {
                this.pickerValueArray.unshift({value: item.dictId, label: item.name})
              }
              lxFlag = false;
            }
          } else {
            this.pickerValueArray.unshift({value: item.dictId, label: item.name})
          }
        })
      } else if (num == 3) {
        //在职人员弹框
        this.ryList.forEach((item) => {
          if (item.status == 0) {
            if (this.dataFormGZCQ.zzId == null
              || this.dataFormGZCQ.zzId == '' || this.dataFormGZCQ.zzId == undefined) {
              this.pickerValueArray.push({value: item.userId, label: item.name})
            } else if (item.userId !== this.dataFormGZCQ.zzId) {
              this.pickerValueArray.push({value: item.userId, label: item.name})
            }
          }
        })
      } else if (num == 4) {
        //离职人员弹框
        this.ryList.forEach((item) => {
          if (item.status == 1) {
            if (this.dataFormGZCQ.lzId == null
              || this.dataFormGZCQ.lzId == '' || this.dataFormGZCQ.lzId == undefined) {
              this.pickerValueArray.unshift({value: item.userId, label: item.name})
            } else if (item.userId !== this.dataFormGZCQ.lzId) {
              this.pickerValueArray.unshift({value: item.userId, label: item.name})
            }
          }
        })
      }
      if (num == 5) {
        //支出查询-执行人
        this.dicZxrList.forEach((item) => {
          if (this.dataFormZCCX.writeUserId == null
            || this.dataFormZCCX.writeUserId == '' || this.dataFormZCCX.writeUserId == undefined) {
            this.pickerValueArray.push({value: item.writeUserId, label: item.writeUserStr})
          } else if (item.writeUserId !== this.dataFormZCCX.writeUserId) {
            this.pickerValueArray.push({value: item.writeUserId, label: item.writeUserStr})
          }
        })
      }
      if (num == 6) {
        //支出查询-建设单位
        this.dicJSDWList.forEach((item) => {
          if (this.dataFormZCCX.jsdwId == null
            || this.dataFormZCCX.jsdwId == '' || this.dataFormZCCX.jsdwId == undefined) {
            this.pickerValueArray.push({value: item.dictId, label: item.name})
          } else if (item.dictId !== this.dataFormZCCX.jsdwId) {
            this.pickerValueArray.push({value: item.dictId, label: item.name})
          }
        })
      }
      this.$refs.mpvuePicker.show();
    },

    pickerConfirm(e) {
      if (this.flag == 1) {
        //支出查询-建设单位
        this.dataFormZCCX.jsdw = e.label;
        this.dataFormZCCX.jsdwId = e.value[0];
        this.searchZCCXList();
      } else if (this.flag == 2) {
        //支出查询-工程类别
        if (this.dataFormZCCX.gclbId == null || this.dataFormZCCX.gclbId == "" || this.dataFormZCCX.gclbId == undefined) {
          this.dataFormZCCX.gclbId = e.value[0];
          this.dataFormZCCX.gclb = e.label;
        } else {
          this.dataFormZCCX.gclbId = this.dataFormZCCX.gclbId + "," + e.value[0];
          this.dataFormZCCX.gclb = this.dataFormZCCX.gclb + "," + e.label;
        }
        this.searchZCCXList();
      } else if (this.flag == 3) {
        //在职人员查询
        this.dataFormGZCQ.zz = e.label;
        this.dataFormGZCQ.zzId = e.value[0];
        this.dataFormGZCQ.lz = "";
        this.dataFormGZCQ.lzId = "";
        this.searchGZCQList();
      } else if (this.flag == 4) {
        //离职人员查询
        this.dataFormGZCQ.lz = e.label;
        this.dataFormGZCQ.lzId = e.value[0];
        this.dataFormGZCQ.zz = "";
        this.dataFormGZCQ.zzId = "";
        this.searchGZCQList();
      } else if (this.flag == 5) {
        this.dataFormZCCX.writeUserStr = e.label;
        this.dataFormZCCX.writeUserId = e.value[0];
        // console.log("咋回事"+this.dataFormZCCX.writeUserId)
        this.searchZCCXList();
      }
      if (this.flag == 6) {
        //支出查询-建设单位
        this.dataForLBTJ.jsdw = e.label;
        this.dataForLBTJ.jsdwId = e.value[0];
        this.searchLBTJList();
      }
      this.$forceUpdate();
    },
    // 获取执行人
    getZxr(){
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/getZxr'),
        method: 'get'
      }).then(({data}) => {
          this.dicZxrList = data.page;

      })
    },

    //点击下一页
    clickNext() {
      this.thisPages = this.thisPages + 1;
      this.searchZCCXList();
    },
    //点击上一页
    clickFront() {
      this.thisPages = this.thisPages - 1;
      this.searchZCCXList();
    },
    //----------------------------- 支出查询 ----------------------------
    searchZCCXList() {
      this.dataListZCCX = [];//支出查询数据
      this.dataTJList = [];//统计list
      this.dicZxrList = [];//执行人
      this.zxrId = '';
      if(this.userId == 10){
        if(this.dataFormZCCX.writeUserId==undefined || this.dataFormZCCX.writeUserId==''){
          this.zxrId = 0;
        }else{
          this.zxrId = this.dataFormZCCX.writeUserId;
        }
      }
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/zccxList'),
        method: 'get',
        params: this.$http.adornParams({
          "jsdwId": this.dataFormZCCX.jsdwId,//建设单位id
          "startTime": this.dataFormZCCX.startTime,//开始年份
          "endTime": this.dataFormZCCX.endTime,//结束年份
          "gjz": this.dataFormZCCX.gjz,//关键字
          "writeUserId": this.dataFormZCCX.writeUserId,//执行人
          "page": this.thisPages,
          "limit": this.rows,
        })
      }).then(({data}) => {
        if (data && data.code == 0) {
          this.dataListZCCX = data.page.list;
          this.total = data.page.totalCount;
          this.pages = data.page.totalPage;
        }
      })
    },
    // searchZCCXList() {
    //   console.log(this.dataFormZCCX);
    //   /*this.pageIndex = 1;
    //   this.totalPage = 0;*/
    //   this.dataListZCCX = [];//支出查询数据
    //   this.dataTJList = [];//统计list
    //   this.dicZxrList = [];//执行人
    //   this.zxrId = '';
    //
    //   if(this.userId == 10){
    //     console.log(this.dataFormZCCX.writeUserId)
    //     if(this.dataFormZCCX.writeUserId==undefined || this.dataFormZCCX.writeUserId==''){
    //       this.zxrId = 0;
    //     }else{
    //       this.zxrId = this.dataFormZCCX.writeUserId;
    //     }
    //   }
    //   this.zcpageIndex = 1;
    //
    //   //console.log("执行人"+this.dataFormZCCX.writeUserId)
    //
    //   this.$http.request({
    //     url: this.$http.adornUrl('/business/businesszcmx/zcList'),
    //     method: 'get',
    //     params: this.$http.adornParams({
    //       // "page": this.zcpageIndex,
    //       // "limit": this.zcpageSize,
    //       "nowYear": this.dataFormZCCX.nowYear,//当前年度
    //       "jsdwId": this.dataFormZCCX.jsdwId,//建设单位id
    //       "gclbId": this.dataFormZCCX.gclbId,//工程类别id
    //       "startTime": this.dataFormZCCX.startTime,//开始年份
    //       "endTime": this.dataFormZCCX.endTime,//结束年份
    //       "gjz": this.dataFormZCCX.gjz,
    //       "writeUserId": this.dataFormZCCX.writeUserId
    //     })
    //   }).then(({data}) => {
    //     //console.log(data);
    //     if (data && data.code == 0) {
    //       this.zctotalPage = data.page.list.totalPage;
    //       this.dataListZCCX = data.page.list;
    //       this.dataListZCCXCommons = [];
    //       if(this.dataListZCCX.length>10){
    //         this.dataListZCCXCommons = this.dataListZCCX.slice(0,10)
    //       }else {
    //         this.dataListZCCX.forEach(e =>{
    //           this.dataListZCCXCommons.push(e)
    //         })
    //       }
    //       this.dataTJList = data.page.tj;
    //       this.dicZxrList = data.page.zxr;
    //       this.dataListZCCX.forEach((item) => {
    //         this.recipientList.forEach((itemCh) => {
    //           // console.log(itemCh.dictId.toString() == item.outPayee)
    //           if(itemCh.dictId.toString() == item.outPayee){
    //             item.outPayee = itemCh.name
    //           }
    //         })
    //       })
    //       // console.log(this.dataListZCCX)
    //     }
    //   })
    // },
    //------------------------------------------------------------------
    //----------------------------- 类别统计 ----------------------------
    searchLBTJList() {
      this.dataListLBTJ = [];//类别统计数据
      this.dataFormLb = [];//内部转账验证数据
      this.yz = "";//验证
      this.hj = 0; // 合计
      this.mqsrzh = {}
      this.mqye = {}
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/zclbList'),
        method: 'get',
        params: this.$http.adornParams({
          "year": this.dataForLBTJ.year,
          "jsdwId": this.dataForLBTJ.jsdwId,
          "startTime": this.dataForLBTJ.startTime,
          "endTime": this.dataForLBTJ.endTime,
        })
      }).then(({data}) => {
        //console.log(data.page)
        if (data && data.code == 0) {
          this.dataListLBTJ = data.page.lb;
          data.page.lb.forEach((item) => {
            if(item) {
              if(item.id == 137 || item.id == 138 || item.id == 139 || item.id == 140 || item.id == 141 || item.id == 142 || item.id == 143 || item.id == 144 || item.id == 145
                || item.id == 259 || item.id == 260 || item.id == 327 || item.id == 262
              ){
              //if(item.id == 137 || item.id == 138 || item.id == 139 || item.id == 141 || item.id == 142 || item.id == 143 || item.id == 144 || item.id == 145){
                  this.hj += item.totalNum
              }
            }
          })
          this.hj = parseFloat(this.hj).toFixed(2)
          data.page.lb.forEach((item) => {
            if(item) {
              if(item.id == 137 || item.id == 138 || item.id == 139 || item.id == 140 || item.id == 141 || item.id == 142 || item.id == 143 || item.id == 144 || item.id == 145
                || item.id == 259 || item.id == 260 || item.id == 327 || item.id == 262
              ){
                //if(item.id == 137 || item.id == 138 || item.id == 139 || item.id == 141 || item.id == 142 || item.id == 143 || item.id == 144 || item.id == 145){
               // this.hj += item.totalNum
                item.bfb = Math.round(item.totalNum / this.hj * 10000) / 100 + "%";
              }
            }
          })
          // console.log(data.page.lb)
          // console.log(this.dataListLBTJ)
          // console.log(this.zclbList)

          // //console.log(this.hj)
          // this.dataFormLb = data.page.tj;
          // this.yz = this.dataFormLb['侯吉光'] - (this.dataFormLb['肖爽'] !== undefined ? this.dataFormLb['肖爽'] : 0)
          //   - (this.dataFormLb['侯吉庆'] !== undefined ? this.dataFormLb['侯吉庆'] : 0)
          //   - (this.dataFormLb['李现举'] !== undefined ? this.dataFormLb['李现举'] : 0)
          // // 四人类别列表-收入
          // this.mqsrzh.xs = this.dataFormLb['肖爽'].toFixed(2)
          // this.mqsrzh.hdq = this.dataFormLb['侯吉庆'].toFixed(2)
          // this.mqsrzh.lxj = this.dataFormLb['李现举'].toFixed(2)
          // //console.log(this.yz);
          // //console.log(this.dataListLBTJ);
        }
      })

      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/srlbList'),
        method: 'get',
        params: this.$http.adornParams({
          "year": this.dataForLBTJ.year,
          "jsdwId": this.dataForLBTJ.jsdwId,
          "startTime": this.dataForLBTJ.startTime,
          "endTime": this.dataForLBTJ.endTime,
        })
      }).then(({data}) => {
        // console.log("四人的",data.page)
        this.trList = data.page.list;

        //四人以上支出
        this.yszczh.xsyszh = data.page.xsyszh.toFixed(2)
        this.yszczh.hdqyszh = data.page.hdqyszh.toFixed(2)
        this.yszczh.lxjyszh = data.page.lxjyszh.toFixed(2)
        this.yszczh.hdgyszh = data.page.hdgyszh.toFixed(2)

        //四人以上支出占比
        this.yszczh.xsyszb = data.page.xsyszb.toFixed(2)
        this.yszczh.hdqyszb = data.page.hdqyszb.toFixed(2)
        this.yszczh.lxjyszb = data.page.lxjyszb.toFixed(2)
        this.yszczh.hdgyszb = data.page.hdgyszb.toFixed(2)

        //三人收入总和
        this.mqsrzh.xs = data.page.xssrzh.toFixed(2)
        this.mqsrzh.hdq = data.page.hjqsrzh.toFixed(2)
        this.mqsrzh.lxj = data.page.lxjsrzh.toFixed(2)
        //三人收入内部转账总和
        this.mqsrzh.xsnb = data.page.xssrnb.toFixed(2)
        this.mqsrzh.hdqnb = data.page.hjqsrnb.toFixed(2)
        this.mqsrzh.lxjnb = data.page.lxjsrnb.toFixed(2)
        //三人收入其他总和
        this.mqsrzh.xsqt = data.page.xssrqt.toFixed(2)
        this.mqsrzh.hdqqt = data.page.hjqsrqt.toFixed(2)
        this.mqsrzh.lxjqt = data.page.lxjsrqt.toFixed(2)
        //三人当前余额
        this.mqye.xs = (data.page.xssrzh - data.page.xsyszh).toFixed(2)
        this.mqye.hdq = (data.page.hjqsrzh - data.page.hdqyszh).toFixed(2)
        this.mqye.lxj = (data.page.lxjsrzh - data.page.lxjyszh).toFixed(2)
      })

      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/yzList'),
        method: 'get',
        params: this.$http.adornParams({
          "startTime": this.dataForLBTJ.startTime,
          "endTime": this.dataForLBTJ.endTime,
        })
      }).then(({data}) => {
        // console.log("四人验证",data.page)
        this.yzList = data.page;
      })


    },
    //获取最新的数据时间
    getLatestZclb() {
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/getLatestTime'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code == 0) {
          this.dataForLBTJ.startTime = data.page.newTime;
          //获取当前时间
          this.dataForLBTJ.endTime = new Date().getFullYear() + '-' + (new Date().getMonth()+1 < 10?'0'+(new Date().getMonth()+1):(new Date().getMonth()+1)) + '-'
            + (new Date().getDate() < 10?'0' + new Date().getDate() : new Date().getDate())
          this.searchLBTJList();
        }
      });
    },
    //------------------------------------------------------------------
    //----------------------------- 工资出勤 ----------------------------
    searchGZCQList() {
      this.dataCQJLList = [];
      //获取内部转账信息
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/cqjlList'),
        method: 'get',
        params: this.$http.adornParams({
          "page": this.pageIndex,
          "limit": this.pageSize,
          "year": this.dataFormGZCQ.year,
          "zzId": this.dataFormGZCQ.zzId,
          "lzId": this.dataFormGZCQ.lzId,
        })
      }).then(({data}) => {
        //console.log(data);
        if (data && data.code == 0) {
          this.dataCQJLList = data.page.list
          this.totalPage = data.page.totalPage
        }
      })
    },
    //------------------------------------------------------------------
    //----------------------------- 食堂标准 ----------------------------
    searchSTBZList() {
      this.dateSTBZList = [];
      this.pjMoney = 0;//平均金额
      this.pjDay = 0;//平均天数
      this.pjStDay = 0;//修正平均
      this.bzJz = 0;//标准均值
      //console.log(typeof this.dataForm);
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/stbzList'),
        method: 'get',
        params: this.$http.adornParams({
          "year": this.dataFormSTBZ.year,
          "startTime": this.dataFormSTBZ.startTime,
          "endTime": this.dataFormSTBZ.endTime,
        })
      }).then(({data}) => {
        if (data && data.code == 0) {
          data.page.forEach((item) => {
            this.dateSTBZList.push(item);
            this.pjMoney += item.money;
            this.pjDay += item.day;
            this.pjStDay += item.stday;
          })
          // this.dateSTBZListCommons = [];
          // if(this.dateSTBZList.length>10){
          //   this.dateSTBZListCommons = this.dateSTBZList.slice(0,10)
          // }else {
          //   this.dateSTBZList.forEach(e =>{
          //     this.dateSTBZListCommons.push(e)
          //   })
          // }
          // console.log(this.pjDay);
          if(this.pjDay !== 0 || this.pjStDay !== 0){
            this.bzJz = (this.pjMoney / (this.pjDay+this.pjStDay)).toFixed(2)
          } else {
            this.bzJz = 0
          }
          this.pjMoney = this.pjMoney.toFixed(2);
          this.pjDay =  this.pjDay.toFixed(2);
        }
      })
    },
    updateStxzList(){
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/updateStxzList'),
        method: 'post',
        body: this.$http.adornData({
          "list":this.dateSTBZList
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          wx.showToast({
            title: "修正成功",
            icon: 'none',
            duration: 4000//持续的时间
          })
          this.searchSTBZList()
          this.$forceUpdate()
        }
      })
    },
    //------------------------------------------------------------------
    //清空搜索
    clearSearch() {
      this.dataFormZCCX = {
        nowYear: "",//当前年度
        jsdwId: '',//建设单位id
        jsdw: '',//建设单位
        gclbId: '',//工程类别id
        gclb: '',//工程类别
        gjz: '',
        startTime: '',//开始年份
        endTime: '',//结束年份
        writeUserId: '',//执行人
        writeUserStr: '',//执行人
      };
      this.dataListZCCX = [];
      this.dataTJList = [];
      this.searchZCCXList();
      this.$forceUpdate();
    },
    //选中的列表
    selectOneData(id) {
      if (this.selectOneDataId == id) {
        this.selectOneDataId = 0;
      } else {
        this.selectOneDataId = id;
      }
      this.$forceUpdate();
    },
    clearLbtjSjqj(){
      this.dataForLBTJ= {
        year: '',
        startTime: '',
        endTime: '',
      };
      this.searchLBTJList()
      this.$refs.xmcb.startTime = ''
      this.$refs.xmcb.endTime = ''
      this.$refs.xmcb.getAll()
    },
    clearJsdw(){
      this.dataForLBTJ.jsdwId = ''
      this.dataForLBTJ.jsdw = ''
      this.searchLBTJList()
    },
  },
  onLoad() {
    this.getZxr()
    this.selectOneDataId = 0;
    this.zccx = false;
    this.lbtj = false;
    this.gzcq = false;
    this.stbz = false;
    this.dataFormZCCX = {};
    this.dataForLBTJ = {};
    this.dataFormGZCQ = {};
    this.dataFormSTBZ = {};
    this.viewShow = false;
    //字典数组初始化
    this.payList = [];//支付方式
    this.recipientList = [];//收款人
    this.expenseList = [];//支出类别
    this.dicGCLBList = [];//工程类别
    this.dicJSDWList = [];//工程类别
    this.dicZxrList = [];//执行人
    this.flag = 0;//选择弹框标识
    this.isShow = true;//弹框默认开启
    this.pageIndex = 1;
    this.totalPage = 0;
    this.viewShow = isAuth('business:businesszcmx:list')
    //立项数据清空
    this.projectList = [];
    //字典数据
    this.zclbList = [];
    //最新数据列表信息  表头显示
    this.timeList = [];


    const token = wx.getStorageSync("token");
    if (token) {
      this.showDiv(1);
      //获取登录人信息
      this.$http.request({
        url: this.$http.adornUrl('/sys/user/info'),
        method: 'get'
      }).then(({data}) => {
        // console.log(data);
        if (data && data.code == 0) {
          this.userId = data.user.userId;
        }
      });
      //字典数据
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/dictList'),
        method: 'get'
      }).then(({data}) => {
        //console.log(data);
        if (data && data.code == 0) {
          data.data.forEach((item) => {
            if (item.dictCode == "work_type") {//工程类别
              this.dicGCLBList = item.children;
            } else if (item.dictCode == "construction_unit") {//建设单位
              this.dicJSDWList = item.children;
            } else if (item.dictCode == "pay_type") {//支付方式
              this.payList = item.children;
            } else if (item.dictCode == "recipient") {//收款人
              this.recipientList = item.children;
            } else if (item.dictCode == "expense_type") {//支出类别
              this.expenseList = item.children;
            }
          })
          this.searchZCCXList();
        } else {
          this.closePage();
        }
      });
      //获取支出查询
      //获取立项数据
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/projectAllList'),
        method: 'get'
      }).then(({data}) => {
        //console.log(data);
        if (data && data.code == 0) {
          this.projectList = data.page;
          //console.log(this.projectList);
        } else {
          this.closePage();
        }
      });
      //获取字典信息
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/dictList'),
        method: 'get'
      }).then(({data}) => {
        //console.log(data);
        if (data && data.code == 0) {
          this.zclbList =[];
          data.data.forEach((item) => {
            if (item.dictCode == "expense_type") {
              // console.log(item.children);
              //this.zclbList = item.children
              item.children.forEach((child) => {
                //if(child.dictId!='140'){
                  this.zclbList.push(child);
                //}
              })
            }
          })
        }
      });
      //获取最新的填写信息
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/biggerTimeList'),
        method: 'get'
      }).then(({data}) => {
        // console.log(data);
        if (data && data.code == 0) {
          this.timeList = data.page;
        }
      });
      //获取人员信息
      this.ryList = [];
      this.$http.request({
        url: this.$http.adornUrl('/business/businesszcmx/selectAllContainsDeparture'),
        method: 'get'
      }).then(({data}) => {
        //console.log(data);
        if (data && data.code == 0) {
          this.ryList = data.page;
          //console.log(this.ryList);
        }
      });
    } else {
      wx.redirectTo({
        url: '/pages/login/main'
      })
      wx.showToast({
        title: '登录失败请重新登录',
        icon: 'none',
        duration: 4000//持续的时间
      })
    }
  },
  //上拉触底事件
  // onReachBottom() {
  //   //支出查询
  //   if (this.zccx == true) {
  //     this.zcpageIndex += 1;
  //     if (this.zcpageIndex <= this.zctotalPage) {
  //       wx.showToast({
  //         title: "加载中，请稍后",
  //         icon: "loading",
  //         duration: 1000,
  //       })
  //       this.dataTJList = [];//统计list
  //       if(this.userId == 10){
  //         console.log(this.dataFormZCCX.writeUserId)
  //         if(this.dataFormZCCX.writeUserId==undefined || this.dataFormZCCX.writeUserId==''){
  //           this.zxrId = 0;
  //         }else{
  //           this.zxrId = this.dataFormZCCX.writeUserId;
  //         }
  //       }
  //       this.$http.request({
  //         url: this.$http.adornUrl('/business/businesszcmx/zcList'),
  //         method: 'get',
  //         params: this.$http.adornParams({
  //           "page": this.zcpageIndex,
  //           "limit": this.zcpageSize,
  //           "nowYear": this.dataFormZCCX.nowYear,//当前年度
  //           "jsdwId": this.dataFormZCCX.jsdwId,//建设单位id
  //           "gclbId": this.dataFormZCCX.gclbId,//工程类别id
  //           "startTime": this.dataFormZCCX.startTime,//开始年份
  //           "endTime": this.dataFormZCCX.endTime,//结束年份
  //           "gjz": this.dataFormZCCX.gjz,
  //           "writeUserId": this.zxrId,
  //         })
  //       }).then(({data}) => {
  //         //console.log(data);
  //         if (data && data.code == 0) {
  //           data.page.list.list.forEach((item) => {
  //             this.dataListZCCX.push(item);
  //           })
  //           this.dataTJList = data.page.tj;
  //           this.dataListZCCX.forEach((item) => {
  //             this.recipientList.forEach((itemCh) => {
  //               if(itemCh.dictId.toString() == item.outPayee){
  //                 item.outPayee = itemCh.name
  //               }
  //             })
  //           })
  //         }
  //       })
  //     } else {
  //       wx.showToast({
  //         title: "没有下一页数据",
  //         icon: "error",
  //         duration: 1000,
  //       })
  //       this.zcpageIndex -= 1;
  //     }
  //   } else if (this.lbtj == true) {//类别统计
  //     this.searchLBTJList();
  //   } else if (this.gzcq == true) {//工资出勤
  //     this.pageIndex += 1;
  //     if (this.pageIndex <= this.totalPage) {
  //       wx.showToast({
  //         title: "加载中，请稍后",
  //         icon: "loading",
  //         duration: 1000,
  //       })
  //       // this.searchGZCQList();
  //       this.$http.request({
  //         url: this.$http.adornUrl('/business/businesszcmx/cqjlList'),
  //         method: 'get',
  //         params: this.$http.adornParams({
  //           "page": this.pageIndex,
  //           "limit": this.pageSize,
  //           "year": this.dataFormGZCQ.year,
  //           "zzId": this.dataFormGZCQ.zzId,
  //           "lzId": this.dataFormGZCQ.lzId,
  //         })
  //       }).then(({data}) => {
  //         //console.log(data);
  //         if (data && data.code == 0) {
  //           data.page.list.forEach((item) => {
  //             this.dataCQJLList.push(item);
  //           })
  //         }
  //       })
  //     } else {
  //       wx.showToast({
  //         title: "没有下一页数据",
  //         icon: "error",
  //         duration: 1000,
  //       })
  //       this.pageIndex -= 1;
  //     }
  //   } else if (this.stbz == true) {//食堂标准
  //     this.searchSTBZList();
  //   }
  //
  // },
  //下拉刷新事件
  // onPullDownRefresh() {
  //   this.pageIndex = 1;
  //   this.pageSize = 30;
  //   this.totalPage = 0;
  //   if (this.zccx == true) {
  //     this.searchZCCXList();
  //   } else if (this.lbtj == true) {//类别统计
  //     this.searchLBTJList();
  //   } else if (this.gzcq == true) {//工资出勤
  //     this.searchGZCQList();
  //   } else if (this.stbz == true) {//食堂标准
  //     this.searchSTBZList();
  //   }
  //   this.$forceUpdate();
  // },
}
</script>

<style scoped>

.btn {
  text-align: center;
  border-radius: 8px;
}

.tab_bg {
  background-color: #FF00FF;
  color: white;
}

.th-row {
  min-height: 20px;
  display: flex;
  border-bottom: 1px solid #efeded;
}

.trTd {
  min-height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-left: 1px solid #efeded;
  border-right: 1px solid #efeded;
  word-wrap:break-word;
  word-break:break-all;
}

.qkBtn {
  font-size: 12px;
  font-weight: bold;
  background-color: #c5c8ce;
  width: 66px;
  height: 3.6vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}
.spanClass {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.paging{
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  font-family: "PingFangSC";
  color: #c79b4a;
  line-height: 36rpx;
  text-align: center;
}

.paging .page_btn{
  width: 140rpx;
  height: 60rpx;
  font-size: 32rpx;
  font-family: "PingFangSC";
  color: #c79b4a;
}

.page_num{
  font-size: 24rpx;
  font-family: "PingFangSC";
  /*color: #c79b4a;*/
  color: #000;
  /*margin: auto 10%;*/
}

.cbtn {
  width: 25%;
  margin-top: 4%;
  background-color: #FF00FF;
  color: #FFFFFF;
  height: 5vh;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

</style>