yos_web/src/SManagement/project_target/modules/detailInfo.vue

<template>
  <div class="edit">
    <div class="container normal-panel">
      <p class="normal-title normal-margin">基础信息</p>
      <el-descriptions :column="4">
          <el-descriptions-item label="年度">{{detail.year?detail.year:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="部门">{{detail.depname?detail.depname:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="人员姓名">{{detail.name?detail.name:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="职位">{{detail.position?detail.position:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="营销区域">{{detail.areaname?detail.areaname:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="状态"><span :style="detail.status === '已下达'?'color:#52C41A':'color:#000000'">{{detail.status}}</span></el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="container normal-panel" style="margin-top:16px">
      <p class="normal-title normal-margin">系统信息</p>
      <el-descriptions :column="4">
          <el-descriptions-item label="创建人">{{detail.createby?detail.createby:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{detail.createdate?detail.createdate:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="最近调整人">{{detail.changeby?detail.changeby:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="最近调整时间">{{detail.changedate?detail.changedate:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="下达人">{{detail.checkby?detail.checkby:'未知'}}</el-descriptions-item>
          <el-descriptions-item label="下达时间">{{detail.checkdate?detail.checkdate:'未知'}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="container normal-panel" style="margin-top:16px">
      <p class="normal-title normal-margin">项目统计</p>
      <el-descriptions :column="4">
          <el-descriptions-item label="项目总数">{{detail.projectnum?detail.projectnum:'暂无'}}</el-descriptions-item>
          <el-descriptions-item label="项目基本目标(万元)">{{detail.target_l?detail.target_l:'暂无'}}</el-descriptions-item>
          <el-descriptions-item label="项目挑战目标(万元)">{{detail.target_h?detail.target_h:'暂无'}}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="container normal-panel" style="margin-top:16px">
      <div class="header" style="margin-bottom:16px">
        <Search @searchActive="searchActive" @clearData="clearData" />
      </div>
      <tableLayout v-if="list" :layout="tablecols" :data="list" :custom="false" height="300">
      </tableLayout>
    </div>
  </div>
</template>

<script>
import Header from '@/SManagement/archives_upload/components/Header'
import Search from '@/components/search/index'
export default {
  name: '',
  data() {
    return {
      params: {
        "id": 20220906104002,
        "content": {
            "year": this.$route.query.year,
            "hrid": this.$route.query.id,
            "where": {
                "condition": ""
            },
            "pageNumber": 1,
            "pageSize": 20
        }
      },
      tablecols:'',
      detail:'',
      list:'',
      hrid:JSON.parse(window.sessionStorage.getItem('active_account')).hrid
    };
  },
  components: { Header , Search },
  computed:{
  },
  watch:{
  },
  created () {
    this.ProjectInfo()
    this.getprojectTargetList()
    this.tablecols = this.tool.tabelCol(this.$route.name).projectTargetTable.tablecols
    this.tablecols.pop()
  },
  methods: {
    /* 获取项目信息 */
    async ProjectInfo () {
      let res = await this.$api.requested({
          "id": 20220906094602,
          "content": {
              "year": this.$route.query.year,
              "hrid": this.$route.query.id,
              // "sa_salestargetbillid": 2//可不传
          }
      })
      this.detail = res.data
      console.log(this.detail);
    },
    /* 获取项目目标数据 */
    async getprojectTargetList() {
      this.params.content.hrid = this.hrid
      let res = await this.$api.requested(this.params)
      this.list = res.data
      console.log(this.list);
      
    },
    searchActive(data) {
      this.params.content.where.condition = data
      this.getprojectTargetList()
    },
    clearData() {
      this.params.content.where.condition = ''
      this.getprojectTargetList()
    }
  },
};
</script>

<style scoped>
  .header {
    display: flex;
    justify-content: space-between;
  }
</style>