wwk / Antis_BlindBox_Service

<template>
  <transition name="el-zoom-in-center">
    <div class="NCC-preview-main">
      <div class="NCC-common-page-header">
        <el-page-header  @back="goBack" :content="'详情'"/>
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <div class="offer-container" ref="print">
        <div class="tem_list">
          <div class="tem_main">
            <h1>{{ dataForm.fullName }}</h1>
            <h4></h4>
            <p class="title text-primary">项目编号：{{ dataForm.enCode }}</p>
            <p class="lip">一、基本信息</p>
            <el-row
              :gutter="15"
              class="main"
              :style="{ margin: '0 auto', width: '100%' }"
            >
              <el-form
                ref="elForm"
                :model="dataForm"
                size="medium"
                label-width="100px"
                label-position="right"
                :disabled="!!isDetail"
              >
                <el-col :span="12">
                  <el-form-item label="客户名称" prop="customer">
                     {{dataForm.customer}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目金额" prop="amount">
                    {{dataForm.amount}}元
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目类型" prop="itemType">
                    {{dataForm.itemType}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="签订时间" prop="signingTime">
                   {{dataForm.signingTime | toDate("yyyy-MM-dd")}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开始时间" prop="startTime">
                    {{dataForm.startTime | toDate("yyyy-MM-dd")}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间" prop="endTime">
                     {{dataForm.endTime | toDate("yyyy-MM-dd")}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目工期" prop="timeLimit">
                     {{dataForm.timeLimit }}天
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="完成进度" prop="schedule">
                     {{dataForm.schedule }}%
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目经理" prop="desPerson">
                    {{dataForm.desPerson }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="参与人员" prop="managerIds">
                    {{dataForm.managerIds }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                <el-form-item label="分配情况" v-for="(item, index) in activities" :key="index">
                   {{item.text}}
              </el-form-item>
              </el-col>
            </el-form>
            </el-row>
            <p class="lip">二、项目成本</p>
            <el-table
              :data="list"
              v-loading="listLoading"
              ref="detailTable"
              :header-cell-style="{ 'text-align': 'center' }"
              show-summary
              :summary-method="getSummaries"
            >
              <el-table-column label="编号" show-overflow-tooltip width="160">
                <template slot-scope="scope">
                  <span class="text-grey">{{ scope.row.costId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="成本名称" width="140" align="left">
                <template slot-scope="scope" align="left">
                  {{ scope.row.costName }}
                </template>
              </el-table-column>
              <el-table-column label="发生时间" width="140" align="center">
                <template slot-scope="scope" align="center">
                  <span class="text-primary">{{
                    scope.row.happendTime | toDate("yyyy-MM-dd")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="amount"
                label="实际费用(元)"
                align="center"
                width="140"
              >
                <template slot-scope="scope" align="center">
                  <el-tag type="success">{{
                    scope.row.amount | currency("¥")
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="left">
                <template slot-scope="scope" align="left">
                  {{ scope.row.remark }}
                </template>
              </el-table-column>
            </el-table>
            <p class="lip">三、项目报销</p>
            <el-table
              :data="finrmbtList"
              v-loading="finrmbtListLoading"
              ref="detailTable"
              :header-cell-style="{ 'text-align': 'center' }"
              show-summary
              :summary-method="getSummaries"
            >
              <el-table-column label="编号" show-overflow-tooltip width="160">
                <template slot-scope="scope">
                  <span class="text-grey">{{ scope.row.reimbursement }}</span>
                </template>
              </el-table-column>
              <el-table-column label="报销人" width="140" align="left">
                <template slot-scope="scope" align="left">
                  {{ scope.row.handler }}
                </template>
              </el-table-column>
              <el-table-column label="发生时间" width="140" align="center">
                <template slot-scope="scope" align="center">
                  <span class="text-primary">{{
                    scope.row.happedTime | toDate("yyyy-MM-dd")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="totalAmount"
                label="报销金额(元)"
                align="center"
                width="140"
              >
                <template slot-scope="scope" align="center">
                  <el-tag type="success">{{
                    scope.row.totalAmount | currency("¥")
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="报销事由" align="left">
                <template slot-scope="scope" align="left">
                  {{ scope.row.remark }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
export default {
  components: {},
  props: [],
  data() {
    return {
      loading: false,
      list: [],
      listLoading: true,
      finrmbtList:[],
      finrmbtListLoading: true,
      visible: false,
      isDetail: false,
      dataForm: {
        enCode: undefined,
        fullName: undefined,
        itemType: undefined,
        amount: 0,
        signingTime: undefined,
        stage: undefined,
        startTime: undefined,
        endTime: undefined,
        timeLimit: 0,
        schedule: 0,
        desPerson: undefined,
        managerIds: undefined,
        state: undefined,
        customer: undefined,
        proContent: undefined,
        appendix: [],
        remark: undefined,
        creatorUserId: undefined,
        creatorTime: undefined,
        lastModifyUserId: undefined,
        lastModifyTime: undefined,
      },
      itemTypeOptions: [],
      stageOptions: [],
      stateOptions: [],
      customerOptions: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          request({
            url: "/api/SubDev/ZyOaProjectgantt/Actions/GetProjectInfo/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
            this.activities = res.data.postilJson ? JSON.parse(res.data.postilJson) : [];
          });
        }
      });
      request({
        url: `/api/SubDev/ZyOaProCost/Actions/GetProCostList/${id}`,
        method: "GET",
      }).then((res) => {
        this.list = res.data;
        this.listLoading = false;
      });
      request({
        url: `/api/SubDev/ZyOaWfFinrmbt/Actions/GetFinrmbtList/${id}`,
        method: "GET",
      }).then((res) => {
        this.finrmbtList = res.data;
        this.finrmbtListLoading = false;
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (column.property != undefined) {
          //加了prop属性的el-table-column 才能找到column.property
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr; //多行相加
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "";
          }
          sums[index] = sums[index].toFixed(2) + "元"; //保留2位小数
        }
      });
      return sums;
    },
  },
};
</script>
<style lang="scss" scoped>
.tem_main {
  width: 1100px;
  margin: 0 auto;
}
.content1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  .item {
    width: 545px;
    padding: 8px 0;
    border-bottom: 1px solid #ebeef5;
    span {
      font-size: 16px;
      padding: 10px 0;
      color: #606266;
    }
  }
}
.el-table,
.content1 {
  width: 920px !important;
  margin: 0 auto !important;
}
h1,
h2,
h3 {
  text-align: center !important;
}
p,
h4 {
  width: 920px !important;
  margin: 0 auto !important;
}
p.title {
  border-bottom: 2px dashed #606266;
  line-height: 30px;
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 15px;
  color: #606266;
  font-weight: bolder;
}
p.lip {
  padding: 20px 0;
  color: #606266;
}
.temdate {
  font-size: 14px;
  width: 802px;
  margin: 0 auto;
  text-align: right;
  margin: 20px 60px;
  color: #606266;
}
.seal {
  font-size: 14px;
  width: 480px;
  margin: 0 auto;
  text-align: right;
  margin: 10px 120px;
  padding-bottom: 40px;
  color: #606266;
}
.offer-container {
  height: 100%;
  overflow: auto;
  .tem_list {
    width: 1100px;
    height: 100%;
    margin: 0 auto;
    background: #fff;
    .tem_main {
      width: 90%;
      margin: 0 auto;
      font-size: 14px;
      padding-top: 10px;
      color: #606266;
      h1,
      h2 {
        text-align: center;
        color: #606266;
      }
      .title {
        border-bottom: 2px dashed #606266;
        line-height: 30px;
        font-size: 14px;
        color: #606266;
      }
      >>> .el-table thead tr th {
        background-color: #fff;
        color: #606266;
      }
      .lip {
        padding: 20px 0;
        color: #606266;
      }
      .demo-form-inline {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .el-form-item--mini.el-form-item,
      .el-form-item--small.el-form-item {
        border-bottom: 1px solid #ebeef5;
        width: 48%;
        margin: 0;
        >>> .el-input__inner {
          border: 0 !important;
          padding: 0;
          width: 220px;
          font-size: 12px;
        }
        >>> .el-form-item__label {
          font-size: 12px;
        }
      }
      .temdate {
        text-align: right;
        margin: 20px 60px;
      }
      .seal {
        text-align: right;
        margin: 10px 120px;
        padding-bottom: 40px;
      }
    }
  }
}
</style>