epmet-work-pc/src/views/modules/shequzhili/eventOld/cpts/event-info.vue

<template>
  <div class="">
    <div v-if="pageTypeCopy == 'add'">
      <el-card>
        <h3 class="h3-title">
          <img
            src="../../../../../assets/images/index/title-icon-zntb.png"
            width="30px"
            height="30px"
            alt=""
          />
          新增事件
        </h3>
        <event-add
          ref="ref_add"
          @changeName="changeName"
          @changeMobile="changeMobile"
          @changeUserId="changeUserId"
          @changeGridId="changeGridId"
        ></event-add>
      </el-card>

      <div class="process-form">
        <el-card>
          <h3 class="h3-title">
            <img
              src="../../../../../assets/images/index/title-icon-chuli.png"
              width="30px"
              height="30px"
              alt=""
            />
            处理
          </h3>
          <process-form
            ref="ref_processinfo_add"
            :demandUserId="demandUserId"
            :eventDetailData="eventDetailData"
            :demandUserName="demandUserName"
            :demandUserMobile="demandUserMobile"
            :gridId="gridId"
          ></process-form>

          <div class="div-btn">
            <el-button size="small" @click="handleClose">关闭</el-button>
            <el-button
              style="margin-left: 20px"
              type="primary"
              size="small"
              @click="handleComfirm"
              >保存</el-button
            >
          </div>
        </el-card>
      </div>
    </div>

    <div
      v-if="pageTypeCopy == 'dispose' || pageTypeCopy == 'info'"
      class="g-page"
    >
      <!-- 面包屑放到这里-->
      <div class="tabs" v-if="pageTypeCopy == 'info'">
        <i class="el-icon-arrow-left"></i>
        <el-button
          class="diy-button--white"
          style="height: 20px"
          @click="handleClose"
        >
          查看详情</el-button
        >
      </div>
      <div
        :class="[
          'g-total',
          {
            'g-left': projectProcess.length > 0,
            'g-left-top40': pageType == 'info',
          },
        ]"
      >
        <event-detail
          ref="ref_detail"
          :type="pageType"
          :eventId="eventId"
          :eventDetailData="eventDetailData"
          :source="source"
          @handleToProject="handleToProject"
          @handleToDemand="handleToDemand"
          @handleToIssue="handleToIssue"
          @handleClose="handleClose"
        ></event-detail>

        <div
          v-if="!eventDetailData.operationId && pageTypeCopy == 'dispose'"
          class="process-form"
        >
          <el-card :class="{ 'box-card': source === 'visiual' }">
            <div
              :class="[
                'process-title',
                { 'process-title-vis': source === 'visiual' },
              ]"
            >
              <img
                src="../../../../../assets/images/index/title-icon-chuli.png"
                width="30px"
                height="30px"
                alt=""
              />
              处理
            </div>
            <process-form
              ref="ref_processinfo_dispose"
              :source="source"
              :eventId="eventId"
              :eventDetailData="eventDetailData"
            ></process-form>

            <div class="div-btn">
              <el-button size="small" @click="handleClose">关闭</el-button>
              <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                @click="handleComfirm"
                >保存</el-button
              >
            </div>
          </el-card>
        </div>
      </div>

      <div
        v-if="projectProcess.length > 0"
        :class="['g-right', pageType == 'info' ? 'g-right-top40' : '']"
      >
        <el-card
          :class="{ 'box-card': source === 'visiual' }"
          style="min-height: calc(88vh - 50px); overflow: auto"
        >
          <div class="m-process">
            <div
              :class="[
                'process-title',
                { 'process-title-vis': source === 'visiual' },
              ]"
            >
              <img
                src="../../../../../assets/images/index/title-icon-cljz.png"
                width="30px"
                height="30px"
                alt=""
              />
              处理进展
            </div>
            <div class="list">
              <div
                class="item"
                :class="[
                  index === 0 ? 'z-on' : '',
                  { 'item-vis': source === 'visiual' },
                ]"
                :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 v-if="item.type === 'event'">
                  <div class="detail">
                    <div class="detail-field">回复人：</div>
                    <div class="detail-value">{{ item.departmentName }}</div>
                  </div>
                  <div class="detail">
                    <div class="detail-field">回复内容：</div>
                    <div class="detail-value">{{ item.publicReply }}</div>
                  </div>
                </div>

                <div v-else-if="item.type === 'project'">
                  <div v-if="item.processName === '回复'">
                    <div class="detail">
                      <div class="detail-field">回复人：</div>
                      <div class="detail-value">{{ item.departmentName }}</div>
                    </div>
                    <div class="detail">
                      <div class="detail-field">回复内容：</div>
                      <div class="detail-value">{{ item.publicReply }}</div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="detail">
                      <div class="detail-field">处理部门：</div>
                      <div class="detail-value">{{ item.departmentName }}</div>
                    </div>

                    <!-- <div class="detail"
                         v-if="item.assistanceUnitName">
                      <div class="detail-field">协办单位：</div>
                      <div class="detail-value">
                        <fold-text :row="3">{{ item.assistanceUnitName }}</fold-text>
                      </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
                      v-if="item.internalFile && item.internalFile.length > 0"
                      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 v-else-if="item.type === 'demand'">
                  <div v-if="item.processName === '回复'">
                    <div class="detail">
                      <div class="detail-field">回复人：</div>
                      <div class="detail-value">{{ item.departmentName }}</div>
                    </div>
                    <div class="detail">
                      <div class="detail-field">回复内容：</div>
                      <div class="detail-value">{{ item.publicReply }}</div>
                    </div>
                  </div>
                  <div v-if="item.processName === '需求完成'">
                    <div class="detail">
                      <div class="detail-field">服务方：</div>
                      <div class="detail-value">{{ item.serviceParty }}</div>
                    </div>
                    <div class="detail">
                      <div class="detail-field">实际服务时间：</div>
                      <div class="detail-value">
                        {{ item.actualServiceTime }}
                      </div>
                    </div>
                  </div>
                  <div v-if="item.processName === '转服务'">
                    <div class="detail">
                      <div class="detail-field">服务时间：</div>
                      <div class="detail-value">{{ item.serviceTime }}</div>
                    </div>
                  </div>
                </div>

                <div v-else-if="item.type === 'issue'">
                  <div class="detail">
                    <div class="detail-field">回复人：</div>
                    <div class="detail-value">{{ item.departmentName }}</div>
                  </div>
                  <div class="detail">
                    <div class="detail-field">回复内容：</div>
                    <div class="detail-value">{{ item.publicReply }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <div v-if="pageTypeCopy == 'project'">
      <project-info-origin
        ref="eleEditForm"
        :source="source"
        :sourceType="sourceType"
        :type="projectPageType"
        :eventId="eventId"
        :projectId="eventDetailCopy.operationId"
        @close="handleCloseProject"
        @afterEdit="handleCloseProject"
      />
    </div>
    <div v-if="pageTypeCopy == 'demand'">
      <demand-info-origin
        ref="demandEditForm"
        :source="source"
        :demandRecId="eventDetailCopy.operationId"
        @close="handleCloseProject"
      />
    </div>
    <div v-if="pageTypeCopy == 'issue'">
      <issue-info-origin
        ref="eleEditForm"
        :pageType="issuePageType"
        :issueId="eventDetailCopy.operationId"
        :issueDetailData="issueDetailData"
        @handleClose="handleCloseProject"
        @handleOk="handleCloseProject"
        @dialogOk="handleCloseProject"
      />
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import { Loading } from "element-ui"; // 引入Loading服务
import foldText from "@/views/components/foldText";
import projectInfoOrigin from "../../xiangmu/cpts/project-info";
import demandInfoOrigin from "@/views/modules/communityService/measure/info";
import issueInfoOrigin from "../../issue/cpts/issue-info";
import dateFormat from "dai-js/tools/dateFormat";
import eventAdd from "./add";
import eventDetail from "./event-detail";
import processForm from "./process-form";

let loading; // 加载动画
function iniData() {
  return {
    formData: {
      operationType: "",
    },
    eventInfoData: {},
    replayInfo: {},
    demand: {},
    project: {},
    issueInfo: {},

    //新增
    demandUserId: "",
    demandUserName: "",
    demandUserMobile: "",
    gridId: "",

    eventDetailCopy: {},

    projectProcess: [],
    projectPageType: "info",
    pageTypeCopy: "",

    issuePageType: "",
    issueDetailData: {},

    sourceType: "",
  };
}

export default {
  name: "projectInfo",
  props: {
    eventId: {
      type: String,
      default: "",
    },
    pageType: {
      type: String,
      default: "",
    },
    eventDetailData: {
      type: Object,
      default() {
        return {};
      },
    },

    source: {
      //展示来源：manage  管理平台    visiual  可视化平台
      type: String,
      default: "manage",
    },
  },

  components: {
    foldText,

    eventAdd,
    eventDetail,
    processForm,
    projectInfoOrigin,
    demandInfoOrigin,
    issueInfoOrigin,
  },

  data: iniData,

  computed: {},

  watch: {
    eventId() {
      let data = iniData();
      Object.keys(data).forEach((k) => {
        this[k] = data[k];
      });
      // this.getApiData();
    },
  },
  created() {},
  mounted() {
    this.pageTypeCopy = this.pageType;
    if (this.pageTypeCopy !== "add") {
      this.getProjectProcess();
    }

    if (this.eventId) {
      this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));
    }
  },

  methods: {
    changeName(val) {
      this.demandUserName = val;
    },
    changeMobile(val) {
      this.demandUserMobile = val;
    },
    changeUserId(val) {
      this.demandUserId = val;
    },
    changeGridId(val) {
      this.gridId = val;
    },

    //加载组织数据
    async getProjectProcess() {
      const url = "/governance/icEventOld/process";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/process";

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

      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);
      }
    },

    getEventInfo() {
      this.$refs.ref_add.getEventInfo();
      if (this.$refs.ref_add.okflag) {
        this.eventInfoData = this.$refs.ref_add.formData;
      } else {
        return false;
      }

      console.log("eventInfo", this.eventInfoData);
    },

    async handleComfirm() {
      this.startLoading();
      if (this.pageTypeCopy === "add") {
        await this.handelAdd();
      }
      if (this.pageTypeCopy === "dispose") {
        await this.handelDispose();
      }
      this.endLoading();
    },

    async handelAdd() {
      this.$refs.ref_add.getEventInfo();
      if (this.$refs.ref_add.okflag) {
        this.eventInfoData = this.$refs.ref_add.formData;
      } else {
        return false;
      }
      console.log("eventInfo", this.eventInfoData);

      this.$refs.ref_processinfo_add.getProcessInfo();
      // if (this.$refs.ref_processinfo_add.okflag) {

      // this.formData.operationType =
      //   this.$refs.ref_processinfo_add.operationType;
      // this.eventInfoData.operationType =
      //   this.$refs.ref_processinfo_add.operationType;
      this.$refs.ref_processinfo_add.getProcessInfo();
      this.formData.operationType =
        this.$refs.ref_processinfo_add.operationType;
      this.eventInfoData.operationType =
        this.$refs.ref_processinfo_add.operationType;
      if (
        this.formData.operationType === "0" ||
        this.formData.operationType === "2" ||
        this.formData.operationType === "6"
      ) {
        this.replayInfo = this.$refs.ref_processinfo_add.replayInfo;
        //回复属性赋值
        this.eventInfoData.content = this.replayInfo.content;
        this.eventInfoData.status = this.replayInfo.status;
        this.eventInfoData.timeLimit = this.replayInfo.timeLimit;
        if (this.replayInfo.categoryId) {
          this.eventInfoData.categoryList = [];
          this.eventInfoData.categoryList.push(this.replayInfo.categoryId);
        }
      } else if (this.formData.operationType === "5") {
        this.replayInfo = this.$refs.ref_processinfo_add.replayInfo;
        //回复属性赋值
        this.eventInfoData.content = this.replayInfo.content;
        this.eventInfoData.status = this.replayInfo.status;
        this.eventInfoData.timeLimit = this.replayInfo.timeLimit;
        if (this.replayInfo.categoryId) {
          this.eventInfoData.categoryList = [];
          this.eventInfoData.categoryList.push(this.replayInfo.categoryId);
        }
      } else if (this.formData.operationType === "4") {
        this.replayInfo = {};
      }

      // }

      this.formData = {
        ...this.eventInfoData,
        // replayInfo: this.replayInfo,
        project: this.project,
        demand: this.demand,
        issueInfo: this.issueInfo,
      };

      console.log("this.formData", this.formData);
      await this.submit();
    },

    async submit() {
      //  (this.formData.operationType == 2 && this.demand.demandUserName) ||(this.formData.operationType == 3 && this.issueInfo.issueTitle) || (this.formData.operationType == 1 && this.project.categoryList) ||(this.formData.operationType == 0 && this.eventInfoData.content) ||
      if (
        this.formData.operationType == "4" ||
        this.formData.operationType == "5" ||
        this.formData.operationType == "6" ||
        this.formData.operationType == "0" ||
        this.formData.operationType == "2"
      ) {
        const url = "/governance/icEventOld/add";
        const { formData } = this;
        const { data, code, msg } = await requestPost(url, {
          ...formData,
        });
        if (code === 0) {
          this.$message.success("操作成功！");
          if (this.pageTypeCopy === "add") {
            this.eventInfo = this.$refs.ref_add.resetData();
          }
          this.$emit("handleOk");
        } else {
          this.$message.error(msg);
        }
      } else if (this.formData.operationType == "") {
        this.$message.error("请选择处理方式!");
      }
    },

    async handelDispose() {
      this.$refs.ref_processinfo_dispose.getProcessInfo();
      if (this.$refs.ref_processinfo_dispose.okflag) {
        this.formData.operationType =
          this.$refs.ref_processinfo_dispose.operationType;

        if (this.formData.operationType === "0") {
          this.project = {};
          this.demand = {};
          this.replayInfo = this.$refs.ref_processinfo_dispose.replayInfo;

          this.replayInfo.icEventId = this.eventId;
          console.log("replayInfo", this.replayInfo);
          //回复属性赋值
          let url = "/governance/icEventOld/reply";
          await this.submitDispose(url, this.replayInfo);
        } else if (this.formData.operationType === "1") {
          this.replayInfo = {};
          this.demand = {};
          this.project = this.$refs.ref_processinfo_dispose.project;
          //项目的属性同事件一样
          this.project.icEventId = this.eventId;
          console.log("projectInfo", this.project);
          let url = "/governance/icEventOld/icEventToProject";
          await this.submitDispose(url, this.project);
        } else if (this.formData.operationType === "2") {
          this.replayInfo = {};
          this.project = {};
          this.demand = this.$refs.ref_processinfo_dispose.demand;
          //需求的属性同事件一样
          this.demand.icEventId = this.eventId;
          console.log("demond", this.demand);
          let url = "/governance/icEventOld/icEventToDemand";
          await this.submitDispose(url, this.demand);
        } else if (this.formData.operationType === "3") {
          this.replayInfo = {};
          this.demand = {};
          this.project = {};
          this.issueInfo = this.$refs.ref_processinfo_dispose.issueInfo;
          //项目的属性同事件一样

          console.log("issueInfo", this.issueInfo);
          let url = "/governance/icEventOld/icEventToIssue";
          await this.submitDispose(url, this.issueInfo);
        } else {
          this.$message.info("请选择一种处理方式");
        }
      } else {
        return false;
      }
    },
    async submitDispose(url, params) {
      const { data, code, msg } = await requestPost(url, {
        ...params,
      });
      if (code === 0) {
        this.$message.success("操作成功！");

        this.$emit("handleOk");
      } else {
        this.$message.error(msg);
      }
    },

    handleClose() {
      if (this.pageTypeCopy === "add") {
        this.eventInfo = this.$refs.ref_add.resetData();
      }

      this.$emit("handleClose");
    },
    handleToProject(type) {
      if (this.eventDetailCopy.status === "processing") {
        this.projectPageType = "edit";
      } else {
        this.projectPageType = "info";
      }
      this.sourceType = "event";
      this.pageTypeCopy = "project";
    },
    handleToDemand() {
      // if (this.eventDetailCopy.status === 'processing') {
      //   this.projectPageType = 'edit'
      // } else {
      //   this.projectPageType = 'info'
      // }
      this.pageTypeCopy = "demand";
    },
    async handleToIssue() {
      const url = "/governance/manage/votingissuedetail";

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

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

      if (this.issueDetailData.issueStatus === "voting") {
        this.issuePageType = "dispose";
      } else {
        this.issuePageType = "info";
      }
      this.pageTypeCopy = "issue";
    },
    handleCloseProject() {
      this.getProjectProcess();
      this.pageTypeCopy = "info";
    },

    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";
.tabs {
  position: absolute;
  margin-left: 30px;
  height: 50px;
  line-height: 50px;
  .diy-button--white {
    border: none !important;
    color: rgba(0, 0, 0, 0.65) !important;
    height: 30px !important;
    padding: 0 12px !important;
    margin-left: 10px;
  }
}
.list {
  & > :last-child {
    border: none !important;
  }
  & > :first-child {
    .name {
      background: url("../../../../../assets/images/index/bubble.png") no-repeat;
      color: #fff !important;
      padding: 0px 10px 3px 13px !important;
      background-size: 100% 100%;
      border: none !important;
    }
  }
}
.g-left-top40 {
  margin-top: 40px;
}
.g-right-top40 {
  margin-top: 40px;
}
</style>