jsm-mall-front/src/views/engineerFeeSettlement/dailyMaintenanceBalance/components/componentDetailList.vue

<template>
  <div>
    <el-page-header @back="goBack" content="详情"></el-page-header>
    <br /><br />
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fr">
        <el-button type="primary" size="mini" @click="exportFn">导出</el-button>
      </div>
    </div>
    <!-- 列表 -->
    <div class="mymain-container">
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
        >
          <el-table-column
            align="left"
            label="派工序号"
            prop="dispatchOrderNo"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="自编号码"
            prop="selfNo"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="left" label="状态" prop="issueStatus" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag size="mini" v-show="scope.row.issueStatus == 1" type="success">待发放</el-tag>
              <el-tag size="mini" v-show="scope.row.issueStatus == 2" type="danger">已发放</el-tag>
              <el-tag size="mini" v-show="scope.row.issueStatus == 3" type="">银行受理中</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="发放月份"
            prop="month"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="发放时间"
            prop="issueTime"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="银行卡账号"
            prop="bankAccount"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="户名"
            prop="bankAccountName"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="开户行"
            prop="depositBank"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="工单状态"
            prop="orderStatus"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="新结算单位号"
            prop="summaryNumber"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="旧结算单位号"
            prop="oldSummaryNumber"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="结算单位名"
            prop="summaryName"
            min-width="260"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="维修类型"
            prop="repairType"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="内外机"
            prop="inOutMachine"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="机器条码"
            prop="machineCode"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="外机型"
            prop="outMachineType"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="外机型描述"
            prop="outMachineDescribe"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="内机条码"
            prop="inMachineCode"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="内机型"
            prop="inMachineType"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="内机型描述"
            prop="inMachineDescribe"
            min-width="300"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="用户姓名"
            prop="userName"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="区号"
            prop="areaCode"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="移动电话"
            prop="mobile"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="电话号码"
            prop="tel"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="省份"
            prop="province"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="市县"
            prop="city"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="区县"
            prop="county"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="用户地址"
            prop="userAddr"
            min-width="400"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="GPS定位"
            prop="gpsAddr"
            min-width="500"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="邮政编码"
            prop="postalCode"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="销售单位号"
            prop="saleDeptNo"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="销售单位"
            prop="saleDeptName"
            min-width="280"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="发票编号"
            prop="invoiceCode"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="购买日期"
            prop="buyDate"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="安装日期"
            prop="installDate"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="报修日期"
            prop="reportDate"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="修复日期"
            prop="repairDate"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="维修工ID"
            prop="repairWorkerId"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="维修工姓名"
            prop="repairWorkerName"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="维修工电话"
            prop="repairWorkerMobile"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="right" label="维修费用" prop="repairFee" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.repairFee | numToFixed }}
            </template>
          </el-table-column>
          <el-table-column align="right" label="交通费" prop="trafficFee" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.trafficFee | numToFixed }}
            </template>
          </el-table-column>
          <el-table-column align="right" label="住宿费用" prop="accommodationFee" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.accommodationFee | numToFixed }}
            </template>
          </el-table-column>
          <el-table-column align="right" label="吊装费用" prop="liftingFee" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.liftingFee | numToFixed }}
            </template>
          </el-table-column>
          <el-table-column align="right" label="其他费用" prop="otherFee" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.otherFee | numToFixed }}
            </template>
          </el-table-column>
          <el-table-column align="right" label="总费用" prop="totalFee" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.totalFee | numToFixed }}
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="结算单批号"
            prop="settlementBatchNo"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="安装网点号"
            prop="installWebsitNo"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="安装网点名"
            prop="installWebsitName"
            min-width="300"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="新维修单位号"
            prop="repairUnit"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="旧维修单位号"
            prop="oldRepairUnit"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="维修单位名"
            prop="repairName"
            min-width="300"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="故障现象"
            prop="faultPhenomenon"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="故障分析"
            prop="faultAnalysis"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="维修内容"
            prop="repairDetail"
            min-width="400"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="备注"
            prop="remark"
            min-width="200"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="转结算时间"
            prop="settlementTime"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getsummaryDetailList } from '@/api/dailySettlement/financialSummaryDay'
import { number } from 'echarts'
export default {
  props: {
    detailList: {
      type: Array,
      required: true
    },
    detailTotal: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [], // 列表数据
      listLoading: false // 列表加载loading
    }
  },
  created() {
    // console.log(this.detailList, 7777);
    this.dataList = this.detailList
    this.listTotal = this.detailTotal
  },
  methods: {
    //导出
    exportFn() {
      this.$emit('exportDetailFn', {
        pageSize: this.pageSize,
        pageNo: this.currentPage
      })
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val

      this.$emit('detailFn', {
        pageSize: this.pageSize,
        pageNo: this.currentPage
      })
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.$emit('detailFn', {
        pageSize: this.pageSize,
        pageNo: this.currentPage
      })
    },
    // //获取列表数据
    // async getDataList() {
    //   let params = {
    //     pageSize: this.pageSize,
    //     pageNo: this.currentPage,
    //     serverNumber: this.detailNumber,
    //     summaryBatchNo: this.detailId,
    //   };
    //   let res = await getsummaryDetailList(params);
    //   this.listTotal = res.data.total;
    // },
    goBack() {
      this.$parent.showDetail = true
    }
  }
}
</script>

<style></style>