wuye / webui

<template>
  <div class="print-owner-voting-container">
    <el-card>
      <el-row>
        <el-col :span="24">
          <div class="text-center">
            <h1>{{ printOwnerVotingInfo.qaName }}</h1>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div v-html="printOwnerVotingInfo.content"></div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <table class="table vc-table-border margin-top" style="color:#000;font-size:14px">
            <thead>
              <tr>
                <th class="text-center" width="200px">
                  <div style="max-width: 200px;">
                    {{ $t('printOwnerVoting.room') }}
                  </div>
                </th>
                <th v-for="(item, index) in printOwnerVotingInfo.titleValues" :key="index" scope="col"
                  class="text-center">
                  {{ item.qaValue }}
                </th>
                <th width="200px" class="text-center">
                  <div style="max-width: 200px;">
                    {{ $t('printOwnerVoting.room') }}
                  </div>
                </th>
                <th v-for="(item, index) in printOwnerVotingInfo.titleValues" :key="index" scope="col"
                  class="text-center">
                  {{ item.qaValue }}
                </th>
              </tr>
            </thead>
            <tbody>
              <template v-for="(vote, index) in printOwnerVotingInfo.userVotes">
                <tr :key="index" class="vc-table-border" v-if="index % 2 == 0">
                  <td class="text-center">
                    <div style="max-width: 200px;">{{ vote.roomName }}</div>
                  </td>
                  <td v-for="(item, tIndex) in printOwnerVotingInfo.titleValues" :key="tIndex" class="text-center">
                    {{ vote[item.qaValue] }}
                  </td>
                  <td class="text-center">
                    <div style="max-width: 200px;" v-if="printOwnerVotingInfo.userVotes.length > index">
                      {{ printOwnerVotingInfo.userVotes[index + 1].roomName }}
                    </div>
                  </td>
                  <td v-for="(item, tIndex) in printOwnerVotingInfo.titleValues" :key="tIndex" class="text-center">
                    <div v-if="printOwnerVotingInfo.userVotes.length > index">
                      {{ printOwnerVotingInfo.userVotes[index + 1][item.qaValue] }}
                    </div>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <span>{{ $t('printOwnerVoting.totalVotes') }}：{{ printOwnerVotingInfo.voteCount }}</span>；
          <span>{{ $t('printOwnerVoting.votedCount') }}：{{ printOwnerVotingInfo.votedCount }}</span>；
          <span v-for="(item, tIndex) in printOwnerVotingInfo.titleValues" :key="tIndex">
            {{ item.qaValue }}: {{ item.personCount }}{{ $t('printOwnerVoting.person') }}；
          </span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" class="text-right margin-top margin-right">
          {{ currentCommunity.name }}
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" class="text-right margin-top-sm margin-right">
          {{ formatDate(new Date()) }}
        </el-col>
      </el-row>

      <el-row id="print-btn">
        <el-col :span="24" class="text-right">
          <el-button type="primary" @click="_printPurchaseApplyDiv">
            <i class="el-icon-printer"></i>&nbsp;{{ $t('common.print') }}
          </el-button>
          <el-button type="warning" style="margin-right:20px;" @click="_closePage">
            {{ $t('common.cancel') }}
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'
import { listOwnerVote, listUserQuestionAnswer } from '@/api/oa/printOwnerVotingApi'

export default {
  name: 'PrintOwnerVotingList',
  data() {
    return {
      printOwnerVotingInfo: {
        qaName: '',
        content: '',
        titleValues: [],
        qaId: '',
        userVotes: [],
        voteCount: 0,
        votedCount: 0
      },
      currentCommunity: {
        name: '',
        communityId: ''
      }
    }
  },
  created() {
    this.printOwnerVotingInfo.qaId = this.$route.query.qaId
    this.currentCommunity.communityId = getCommunityId()
    this._listOwnerVotings()
  },
  methods: {
    async _listOwnerVotings() {
      try {
        const params = {
          page: 1,
          row: 1,
          communityId: this.currentCommunity.communityId,
          qaId: this.printOwnerVotingInfo.qaId
        }
        const { data } = await listOwnerVote(params)
        this.printOwnerVotingInfo = data[0]
        this._listValues()
      } catch (error) {
        console.error('请求失败:', error)
      }
    },
    async _listValues() {
      try {
        const params = {
          page: 1,
          row: 500,
          communityId: this.currentCommunity.communityId,
          qaId: this.printOwnerVotingInfo.qaId
        }
        const { data } = await listUserQuestionAnswer(params)
        const _titleValues = this.printOwnerVotingInfo.titleValues
        data.forEach(_value => {
          _titleValues.forEach(_title => {
            _value[_title.qaValue] = ''
            if (_value['values']) {
              _value.values.forEach(tmpValue => {
                if (tmpValue.qaValue === _title.qaValue) {
                  _value[_title.qaValue] = 'V'
                }
              })
            }
          })
        })
        this.printOwnerVotingInfo.userVotes = data
      } catch (error) {
        console.error('请求失败:', error)
      }
    },
    _printPurchaseApplyDiv() {
      document.getElementById("print-btn").style.display = "none"
      window.print()
      window.opener = null
      window.close()
    },
    _closePage() {
      window.opener = null
      window.close()
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
.print-owner-voting-container {
  padding: 20px;

  .margin-top {
    margin-top: 20px;
  }

  .margin-top-sm {
    margin-top: 10px;
  }

  .margin-right {
    margin-right: 20px;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .vc-table-border {
    border: 1px solid #ebeef5;
    border-collapse: collapse;

    th,
    td {
      border: 1px solid #ebeef5;
      padding: 8px;
    }
  }

  #print-btn {
    margin-top: 20px;
  }
}
</style>