crm_front_v3/src/views/rai_manage/activityManage/components/ThemeSurvey/votingResultsDlg.vue

<template>
  <div class="container vote-dlg-container">
    <!-- 投票结果 -->
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="投票结果"
      :modal-append-to-body="false"
      center
      :append-to-body="true"
      :visible.sync="isVotinRgesultsDlg"
      :before-close="closeHandler"
      width="500px"
    >
      <el-table border :data="voteDetailList" style="margin-bottom: 20px" height="350">
        <el-table-column align="center" prop="ActivityTheme" key="name" label="主题"></el-table-column>
        <el-table-column width="100" align="center" prop="VoteTotal" key="name" label="票数">
          <template slot-scope="{ row }">
            <span class="editsty" @click="lookVoteDetailsHandler(row)"> {{ row.VoteTotal }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 票数明细 -->
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="票数明细"
      :modal-append-to-body="false"
      center
      :append-to-body="true"
      :visible.sync="isVoteDetails"
      :before-close="closeHandlerTwo"
      width="600px"
    >
      <el-table border :data="voteNumDetailList" style="margin-bottom: 20px" height="350">
        <el-table-column align="center" prop="RealName" key="name" label="投票人姓名"></el-table-column>
        <el-table-column align="center" prop="CompanyName" key="name" label="公司名"></el-table-column>
        <el-table-column align="center" prop="SellerName" key="name" label="所属销售"></el-table-column>
        <el-table-column width="160" align="center" prop="CreateTime" key="name" label="投票时间"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 其余主题 -->
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="其余主题"
      :modal-append-to-body="false"
      center
      :append-to-body="true"
      :visible.sync="theRemainingThemeDlg"
      :before-close="closeHandlerThree"
      width="600px"
    >
      <el-table border :data="voteOtherList" style="margin-bottom: 20px" height="350">
        <el-table-column align="center" prop="Content" key="name" label="主题内容"></el-table-column>
        <el-table-column align="center" prop="RealName" key="name" label="提交人姓名"></el-table-column>
        <el-table-column align="center" prop="CompanyName" key="name" label="公司名"></el-table-column>
        <el-table-column align="center" prop="SellerName" key="name" label="所属销售"></el-table-column>
        <el-table-column width="160" align="center" prop="CreateTime" key="name" label="提交时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface, raiSpecial } from "@/api/api.js";

export default {
  name: "",
  props: {
    isVotinRgesultsDlg: {
      type: Boolean,
      default: false,
    },
    theRemainingThemeDlg: {
      type: Boolean,
      default: false,
    },
    rowForm: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      isVoteDetails: false,
      voteDetailList: [], //投票结果
      voteNumDetailList: [], //查看票数详情
      voteOtherList: [], //查看其余主题
    };
  },
  computed: {},
  watch: {
    isVotinRgesultsDlg: {
      handler(newValue) {
        newValue && this.getVoteDetail();
      },
    },
    theRemainingThemeDlg: {
      handler(newValue) {
        newValue && this.lookVoteOther();
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 关闭弹框事件
    closeHandler(type) {
      this.$emit("update:isVotinRgesultsDlg", false);
      this.$emit("update:rowForm", {});
    },
    closeHandlerTwo() {
      this.isVoteDetails = false;
    },
    closeHandlerThree() {
      this.$emit("update:theRemainingThemeDlg", false);
      this.$emit("update:rowForm", {});
    },
    // 投票结果
    async getVoteDetail() {
      const res = await raiInterface.questionnaireVote_detail({
        QuestionnaireId: this.rowForm.QuestionnaireId,
      });
      if (res.Ret === 200) {
        this.$nextTick(() => {
          this.voteDetailList = res.Data.List || [];
        });
      }
    },
    // 查看票数详情
    async lookVoteDetailsHandler(item) {
      const res = await raiInterface.questionnaireVote_list({
        QuestionnaireThemeId: item.QuestionnaireThemeId,
      });

      if (res.Ret === 200) {
        this.isVoteDetails = true;
        this.$nextTick(() => {
          this.voteNumDetailList = res.Data.List || [];
        });
      }
    },
    // 查看其余主题
    async lookVoteOther() {
      console.log(this.rowForm);
      const res = await raiInterface.questionnaireVote_other({
        QuestionnaireId: this.rowForm.QuestionnaireId,
      });

      if (res.Ret === 200) {
        this.$nextTick(() => {
          this.voteOtherList = res.Data.List || [];
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.vote-dlg-container-theme-survey {
  .add-theme-content {
    display: flex;
    align-items: center;
  }
  .delete-item-icon {
    display: flex;
    align-items: center;
    margin-left: 20px;
    cursor: pointer;
    img {
      width: 15px;
      height: 15px;
    }
  }
  .add-theme-box {
    display: flex;
    align-items: center;
  }
}

.fr-wrapper-content-vote-dlg-container {
  border-top: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc !important;
}
</style>