FinancialInfoDetail.vue

<template>
  <div class="d-page d-flex flex-column">
    <title-bar :title="title" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>

    <anchor-nav ref="anchorNav" :navList="navList">
      <template>
        <div slot="projectInfo">
          <!-- 项目信息 -->
          <table-double-view
            :data="resInfo"
            :keyValue="projectActionsKeys"
          ></table-double-view>
        </div>
        <div slot="wealthList">
          <!-- 资产负债表 -->
          <table style="margin-left: 20px" class="customer-management-information-form">
            <tr>
              <td>行次</td>
              <td>项目</td>
              <td>期初数</td>
              <td>期末数</td>
            </tr>
            <tr v-if="wealthList.length == 0">
              <td style="text-align: center" colspan="6">暂无数据！</td>
            </tr>
            <tr
              v-if="wealthList.length != 0 && item"
              v-for="(item, index) in wealthList"
              :key="index"
            >
              <td>{{ item.fncConfOrder }}</td>
              <td>{{ item.itemName }}</td>
              <td>{{ item.data1 }}</td>
              <td>{{ item.data2 }}</td>
            </tr>
          </table>
        </div>
        <div slot="profitList">
          <!-- 损益表 -->
          <table style="margin-left: 20px" class="customer-management-information-form">
            <tr>
              <td>行次</td>
              <td>项目</td>
              <td>上期金额</td>
              <td>本期金额</td>
            </tr>
            <tr v-if="profitList.length == 0">
              <td style="text-align: center" colspan="6">暂无数据！</td>
            </tr>
            <tr
              v-if="profitList.length != 0 && item"
              v-for="(item, index) in profitList"
              :key="index"
            >
              <td>{{ item.fncConfOrder }}</td>
              <td>{{ item.itemName }}</td>
              <td>{{ item.data1 }}</td>
              <td>{{ item.data2 }}</td>
            </tr>
          </table>
        </div>
        <div slot="cashFlowList">
          <!-- 现金流表 -->
          <table style="margin-left: 20px" class="customer-management-information-form">
            <tr>
              <td>行次</td>
              <td>项目</td>
              <td>上期金额</td>
              <td>本期金额</td>
            </tr>
            <tr v-if="cashFlowList.length == 0">
              <td style="text-align: center" colspan="6">暂无数据！</td>
            </tr>
            <tr
              v-if="cashFlowList.length != 0 && item"
              v-for="(item, index) in cashFlowList"
              :key="index"
            >
              <td>{{ item.fncConfOrder }}</td>
              <td>{{ item.itemName }}</td>
              <td>{{ item.data1 }}</td>
              <td>{{ item.data2 }}</td>
            </tr>
          </table>
        </div>
        <div slot="projectActionList">
          <!-- 项目行为信息 -->
          <table style="margin-left: 20px" class="customer-management-information-form">
            <tr>
              <td>行次</td>
              <td>项目</td>
              <td>指标值(比率:%)</td>
            </tr>
            <tr v-if="list.length == 0">
              <td style="text-align: center" colspan="6">暂无数据！</td>
            </tr>
            <tr
              v-if="list.length != 0 && item"
              v-for="(item, index) in list"
              :key="index"
            >
              <td>{{ item.fncConfOrder }}</td>
              <td>{{ item.itemName }}</td>
              <td>{{ item.data1 }}</td>
            </tr>
          </table>
        </div>
      </template>
    </anchor-nav>
    <!-- <div v-else align="center">
      <img
        src="@/assets/images/nodata.png"
        style="width: 40%; margin-top: 137px"
      />
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import TableDoubleView from "@/public/TableDoubleView.vue";
import TableSingleView from "@/public/TableSingleView.vue";
/**
 * @Description 项目信息
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:17
 */
@Component({
  name: "FinancialInfoDetail",
  components: { TitleBar },
})
export default class FinancialInfoDetail extends Vue {
  title = "财务详情信息"; // 页面标题
  navList = [
    {
      key: "projectInfo",
      titleText: "基本信息",
    },
    {
      key: "wealthList",
      titleText: "资产负债表",
    },
    {
      key: "profitList",
      titleText: "损益表",
    },
    {
      key: "cashFlowList",
      titleText: "现金流量表",
    },
    {
      key: "projectActionList",
      titleText: "财务指标表",
    },
  ];
  list = [];
  wealthList = []; //资产负债表数据
  profitList = []; //损益表
  cashFlowList = []; //现金流表
  itemData = {
    /* a: '2021-07-20  11:17:53',
        b: '通过',
        c: '-',
        d: '未通过',
        e: '工商行政触发历史涉诉',
        f: '89906043'*/
  };
  resInfo: any = {};

  projectActionsKeys = {
    cusName: "公司名称",
    fncConfDisName: "表名",
    inputBrName: "编制单位",
    inputDate: "编制时间",
  };
  time: any = "";
  value1 = 0;
  value2 = 0;
  option1 = [
    { text: "年报", value: 0 },
    /* { text: '季报', value: 1 }*/
  ];
  option2 = [
    /*  { text: '2021年', value: 0 },
        { text: '2020年', value: 1 },
        { text: '2019年', value: 2 }*/
  ];
  companyInfo = {};
  inputBrName = "";
  fncConfDisName = "";
  concatName = "";
  timeDu = "";
  stat_prd_style_cnName: any = "";

  onClick() {
    this.$router.go(-1);
  }
  mounted() {
    this.getCwxxInfo("01");
    this.getCwxxInfo("02");
    this.getCwxxInfo("03");
    this.getCwxxInfo("04");
    this.stat_prd_style_cnName = this.$route.query.stat_prd_style_cnName;
    this.time = this.$route.query.stat_prd;
  }
  getCwxxInfo(val:any) {
    var me = this;
    var param = {
      cus_id: this.$store.getters.getCusInfo.cus_id,
      fnc_conf_typ: val,
      stat_prd: this.$route.query.stat_prd,
      stat_style: this.$route.query.stat_style,
      stat_prd_style: this.$route.query.stat_prd_style,
      tc: nettyApi.TRADE_CODE.selectCBXQ,
    };
    NativeUI.showWaiting("正在查询...");
    IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc === "1") {
        if(val == '01'){
          me.wealthList = res.cusFncStatIColl;
        }else if(val == '02'){
          me.profitList = res.cusFncStatIColl;
        }else if(val == '03'){
          me.cashFlowList = res.cusFncStatIColl;
        }else if(val == '04'){
          me.list = res.cusFncStatIColl;
        }
        this.resInfo = res;
        this.inputBrName = res.inputBrName;
        this.fncConfDisName = res.fncConfDisName;
        this.concatName = this.inputBrName;
        this.timeDu = res.inputDate;
        console.log(me.list);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
}
</script>

<style scoped>
::v-deep .van-index-bar__sidebar {
  top: 130px !important;
  right: 5px !important;
  transform: unset;
}
.no-data-class {
  width: 40%;
}
.line-class {
  width: 80%;
  margin: 0 10%;
  background: #e0e1e2;
  height: 1px;
}
.company-box {
  display: flex;
  font-size: 16px;
  height: 48px;
  align-items: center;
  justify-content: space-around;
}
</style>