epmet-work-pc-chengyang/src/views/modules/shequzhili/xiangmu/cpts/project-info.vue

<template>
  <div class="">
    <div class="g-page" v-show="pageType == 'info'">
      <div class="g-left">
        <el-card>
          <h3>项目详情</h3>

          <div class="m-info">
            <div class="info-prop">
              <span>项目标题：</span>
              <span>{{ projectInfo.projectTitle }}</span>
            </div>
            <div class="info-prop">
              <span>项目背景：</span>
              <span>{{ projectInfo.backGround || "--" }}</span>
            </div>
            <div class="info-prop">
              <span>项目方案：</span>
              <span>{{ projectInfo.publicReply }}</span>
            </div>
            <div class="info-prop">
              <span>内部备注：</span>
              <span>{{ projectInfo.internalRemark || "--" }}</span>
            </div>
            <div
              class="info-prop"
              v-if="projectInfo.departmentNameList.length > 0"
            >
              <span>当前处理部门：</span>
              <span>{{ projectInfo.departmentNameList.join("、") }}</span>
            </div>
            <div class="info-prop">
              <span>项目来源：</span>
              <a style="cursor: pointer" @click="handleWatchOrigin"
                >查看项目来源</a
              >
            </div>
            <div class="info-prop">
              <span>项目评价：</span>
              <a style="cursor: pointer" @click="showedEvaluation=true"
                >查看项目评价</a
              >
            </div>
            <div class="info-prop" v-if="projectCate.length > 0">
              <span>分类：</span>
              <fold-text style="width: 300px" :row="3">
                <div :key="item.name" v-for="item in projectCate">
                  {{ item.name }}
                </div>
              </fold-text>
            </div>
            <div class="info-prop" v-if="projectTag.length > 0">
              <span>标签：</span>
              <fold-text style="width: 300px" :row="3">
                <div :key="item.name" v-for="item in projectTag">
                  {{ item.name }}
                </div>
              </fold-text>
            </div>
          </div>

          <div class="m-btns" v-if="type == 'info'">
            <el-button size="" @click="handleClose">关闭</el-button>
          </div>
        </el-card>
        <el-card v-if="type == 'edit'">
          <h3>处理</h3>
          <div class="m-fm">
            <el-form
              :inline="true"
              :model="fmData"
              :rules="dataRule"
              label-position="left"
              label-width="100px"
            >
              <el-form-item label="处理：" prop="operateType">
                <el-radio-group v-model="fmData.operateType">
                  <el-radio :label="3">处理/响应</el-radio>
                  <el-radio :label="6">结案</el-radio>
                  <el-radio :label="9">转其他机关/科室</el-radio>
                  <el-radio :label="10">退回</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div class="m-btns">
            <el-button size="" style="margin-right: 50px" @click="handleClose"
              >关闭</el-button
            >
            <el-button size="" type="danger" @click="handleSubmit"
              >确定</el-button
            >
          </div>
        </el-card>
      </div>
      <div class="g-right">
        <el-card class="m-card" v-if="projectProcess.length > 0">
          <h3>处理进展</h3>
          <div class="m-process">
            <div class="list">
              <div
                class="item"
                :class="index === 0 ? 'z-on' : ''"
                :key="item.processId"
                v-for="(item, index) in projectProcess"
              >
                <div class="item-row">
                  <div class="name">{{ item.processName }}</div>
                  <div class="date">
                    {{ item.processTime }}
                  </div>
                </div>

                <div class="detail">
                  <div class="detail-field">处理部门：</div>
                  <div class="detail-value">{{ item.departmentName }}</div>
                </div>

                <div
                  class="detail"
                  v-if="item.processName != '转项目' && item.publicReply"
                >
                  <div class="detail-field">说 明：</div>
                  <div class="detail-value">
                    <fold-text :row="3">{{ item.publicReply }}</fold-text>
                  </div>
                </div>

                <div
                  class="detail"
                  v-if="item.processName != '转项目' && item.internalRemark"
                >
                  <div class="detail-field">内部备注：</div>
                  <div class="detail-value">
                    <fold-text :row="3">{{ item.internalRemark }}</fold-text>
                  </div>
                </div>
                <div class="detail">
                  <div class="attachement-list">
                    <a
                      :href="att.url"
                      target="_blank"
                      :key="att.url"
                      v-for="att in item.internalFile"
                    >
                      <i class="el-icon-folder-opened"></i>
                      {{ att.name }}
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <div v-if="pageType == 'origin-info'">
      <issue-info
        v-if="projectInfo.origin == 'issue'"
        @close="handleBackInfo"
        :issue-id="projectInfo.originId"
      />
      <event-info
        v-if="projectInfo.origin == 'resi_event'"
        @close="handleBackInfo"
        :event-id="projectInfo.originId"
      />
    </div>

    <!-- 修改弹出框 -->
    <el-dialog
      v-if="showedEvaluation"
      :visible.sync="showedEvaluation"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="formTitle"
      width="850px"
      top="5vh"
      class="dialog-h"
      @closed="showedEvaluation = false"
    >
      <project-evaluation :projectId="projectIdCopy"></project-evaluation>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import foldText from "@/views/components/foldText";
import issueInfo from "./issue-info";
import eventInfo from "./event-info";
import projectEvaluation from "./project-evaluation";
import dateFormat from "dai-js/tools/dateFormat";

function iniData() {
  return {
    pageType: "info",

    showedEvaluation: false,

    projectIdCopy: this.projectId,

    fmData: {
      operateType: "",
    },

    projectProcess: [],

    projectInfo: {
      backGround: "",
      departmentList: [
        //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
      ],
      departmentNameList: [],
      internalRemark: "",
      isSend: false,
      locateAddress: "",
      locateDimension: "",
      locateLongitude: "",
      origin: "",
      originId: "",
      platformIds: [],
      processable: false,
      projectId: "",
      projectStatus: "pending",
      projectTitle: "",
      publicReply: "",
      returnable: false,
    },

    issueInfo: {
      attitude: "",
      belongsGridName: "",
      issueIdea: "",
      issueInitiator: "",
      issueStatus: "",
      issueSuggestion: "",
      issueTitle: "",
      joinVote: true,
      projectId: "",
      projectStatus: false,
      publishIdeaFlag: false,
    },

    issueTrend: {},
    issueChartData: [],

    eventInfo: {
      eventTime: "",
      eventContent: "",
      eventAddress: "",
      gridName: "",
      isClosed: true,
      isResolve: true,
      isRollback: true,
      eventImgs: [],
      eventPerson: [],
      eventOrg: [],
      eventPeopleName: "",
      projectInfo: {
        projectId: "",
        operationName: "",
        operationTime: "",
        projectDeclare: "",
      },
    },

    projectCate: [],
    projectTag: [],
  };
}

export default {
  name: "projectInfo",
  props: {
    projectId: {
      type: String,
      default: "64502a8f1048a7240295527a9b32e513",
    },
    type: {
      type: String,
      default: "info",
    },
  },

  components: {
    foldText,
    issueInfo,
    eventInfo,
    projectEvaluation,
  },

  data: iniData,

  computed: {
    dataRule() {
      return {
        operateType: [
          { required: true, message: "处理方式不能为空", trigger: "blur" },
        ],
      };
    },
  },

  watch: {
    projectId() {
      let data = iniData();
      Object.keys(data).forEach((k) => {
        this[k] = data[k];
      });
      this.getApiData();
    },
    // projectIdCopy () {

    // },
  },

  mounted() {
    console.log(this.projectIdCopy);
    this.getApiData();
  },

  methods: {
    watchImg(src) {
      window.open(src);
    },

    handleClose() {
      this.$emit("close");
    },

    handleSubmit() {
      this.$emit("afterEdit");
    },

    handleWatchOrigin() {
      this.pageType = "origin-info";
    },
    handleBackInfo() {
      this.pageType = "info";
    },

    async getApiData() {
      await this.getProjectInfo();
      this.getProjectCate();
      this.getProjectProcess();
    },

    //加载组织数据
    async getProjectInfo() {
      const url = "/gov/project/trace/projectdetail";

      const { data, code, msg } = await requestPost(url, {
        projectId: this.projectIdCopy,
      });

      if (code === 0) {
        this.projectInfo = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getIssueInfo() {
      const url = "/resi/hall/issue/detail";

      const { data, code, msg } = await requestPost(url, {
        issueId: this.projectInfo.originId,
      });

      if (code === 0) {
        this.issueInfo = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getIssueTrend() {
      const url = "/resi/hall/issue/votingtrend";

      const { data, code, msg } = await requestPost(url, {
        issueId: this.projectInfo.originId,
      });

      if (code === 0) {
        this.issueTrend = data;
        let chartData = [];
        data.polyLine.forEach((item) => {
          let date = dateFormat(new Date(item.voteDate * 1000), "yyyy-MM-dd");
          // console.log("date:" + date);
          chartData.push(
            {
              date,
              value: item.supportIncrement,
              type: "支持",
            },
            {
              date,
              value: item.oppositionIncrement,
              type: "反对",
            }
          );
        });
        this.issueChartData = chartData;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getEventInfo() {
      const url = "/gov/project/resievent/eventdetail-icdata";

      const { data, code, msg } = await requestPost(url, {
        resiEventId: this.projectInfo.originId,
      });

      if (code === 0) {
        if (data.eventOrg && data.eventOrg.length > 0) {
          data.eventOrgShow = data.eventOrg.join("、");
        }
        if (data.eventPerson && data.eventPerson.length > 0) {
          data.eventPersonShow = data.eventPerson.join("、");
        }
        this.info = { ...data };
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getProjectProcess() {
      const url = "/gov/project/trace/processlist-v2";

      const { data, code, msg } = await requestPost(url, {
        projectId: this.projectIdCopy,
      });

      if (code === 0) {
        this.projectProcess = data.map((item) => {
          item.processTime = dateFormat(
            new Date(item.processTime * 1000),
            "yyyy-MM-dd hh:mm"
          );
          return item;
        });
      } else {
        this.$message.error(msg);
      }
    },

    async getProjectCate() {
      const url = "/gov/project/projectcategory/categorytaglist";

      const { data, code, msg } = await requestPost(url, {
        projectId: this.projectIdCopy,
      });

      if (code === 0) {
        this.projectCate = data.categoryList;
        this.projectTag = data.tagList;
      } else {
        this.$message.error(msg);
      }
    },

    toUserInfo(item) {
      this.$router.push({
        path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
      });
    },

    toProjectInfo(item) {
      console.log(item);
      this.projectIdCopy = item.projectId;
      // let data = iniData();
      // Object.keys(data).forEach((k) => {
      //   this[k] = data[k];
      // });
      this.getApiData();
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/shequzhili/project-info.scss"
  scoped
></style>