sl-sfy-safety/src/views/message/question-notifications/components/ManageContent.vue

<template>
  <div class="manage_content">
    <div class="content_row" style="margin-bottom: 32px">
      <ContentPanel
        :savedData="savedData"
        :issue-type="QuestionStatus.toAuth"
        :title="'审核'"
        text-to-show="请及时关注【待审核/超期未审核/长期未审核】的问题单！"
        :save-update="saveUpdate"
      />
      <ContentPanel
        :savedData="savedData"
        :issue-type="QuestionStatus.todo"
        :title="'整改'"
        text-to-show="请及时关注【待整改/超期未整改/长期未整改】的问题单！"
        :save-update="saveUpdate"
      />
    </div>
    <div class="content_row">
      <ContentPanel
        :savedData="savedData"
        :issue-type="QuestionStatus.toReview"
        :title="'复核'"
        text-to-show="请及时关注【待复核/超期未复核改/长期未复核】的问题单！"
        :save-update="saveUpdate"
      />
      <ContentPanel
        :savedData="savedData"
        :issue-type="QuestionStatus.finishe"
        :title="'完结'"
        text-to-show="请该违规问题已整改结束！"
        :save-update="saveUpdate"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';

  import { ElMessage } from 'element-plus';
  import { getIssueProcessMessage, updateIssueProcessMessage } from '@/api/message/question-notifications';
  import { QuestionStatus, PushTypeStatus, issueDetilasType, issueProcessType, panelDetails } from '../type';
  import ContentPanel from './contentPanel.vue';

  //根据流程的issuePhase值与pushType值去匹配id
  const idMatch = (issuePhase: number, pushType: number) => {
    let id = 0;
    savedData.value.forEach((item) => {
      if (item.issuePhase === issuePhase) {
        item.issueProcessMessageList.forEach((subItem) => {
          if (subItem.pushType === pushType) {
            id = subItem.id;
          }
        });
      }
    });
    return id;
  };
  const saveUpdate = (obj: panelDetails, panelChosen: number) => {
    let dataUpdate = {
      issuePhase: panelChosen,
      issueProcessMessageList: <issueProcessType[]>[],
    };
    dataUpdate.issueProcessMessageList.push({
      id: idMatch(panelChosen, PushTypeStatus.atonce),
      isEnabled: obj.atProcessing === true ? 1 : 0,
      pushType: PushTypeStatus.atonce,
    });
    //完结状态下面的没有
    if (panelChosen != QuestionStatus.finishe) {
      //如果为开启，那超时时长也不用传了
      if (obj.atExpiry === false) {
        dataUpdate.issueProcessMessageList.push({
          id: idMatch(panelChosen, PushTypeStatus.expire),
          isEnabled: 0,
          pushType: PushTypeStatus.expire,
        });
      } else {
        dataUpdate.issueProcessMessageList.push({
          id: idMatch(panelChosen, PushTypeStatus.expire),
          isEnabled: 1,
          overtime: obj.expiryTime!,
          pushType: PushTypeStatus.expire,
        });
      }
      //这边同理
      if (obj.atLongTimeExpiry === false) {
        dataUpdate.issueProcessMessageList.push({
          id: idMatch(panelChosen, PushTypeStatus.longtime),
          isEnabled: 0,
          pushType: PushTypeStatus.longtime,
        });
      } else {
        dataUpdate.issueProcessMessageList.push({
          id: idMatch(panelChosen, PushTypeStatus.longtime),
          isEnabled: 1,
          overtime: obj.longTimeValue!,
          pushType: PushTypeStatus.longtime,
          //只传obj.copyTo中的id
          ccRecipients: obj.copyTo!.map((user) => ({
            id: user.id,
            realname: user.realname,
            staffNo: user.staffNo,
          })),
        });
      }
    }
    updateIssueProcessMessage(dataUpdate)
      .then(() => {
        ElMessage({
          message: '保存成功',
          type: 'success',
          plain: true,
        });
        getProcessDetails();
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const savedData = ref(<issueDetilasType[]>[]);
  const getProcessDetails = () => {
    // savedData.value = [];
    getIssueProcessMessage().then((res) => {
      savedData.value = res;
    });
  };

  onMounted(() => {
    getProcessDetails();
  });
</script>
<style lang="scss" scoped>
  .manage_content {
    width: 100%;
    // height: 300px;
    // overflow-x: scroll;
    // background-color: yellowgreen;
  }
  .content_row {
    width: 1140px;
    display: flex;
    flex-direction: row;
    // background-color: gray;
  }

  .content_panel {
    width: 530px;
    height: 326px;
    // background-color: pink;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
    .panel_top {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      background-color: #fafafa;
      border-radius: 8px;
      padding: 13px 16px 0px 16px;
      .top_content {
        // width: 100%;
        height: 24px;
        display: flex;
        flex-direction: row;
        .circle {
          width: 24px;
          height: 24px;
          border-radius: 12px;
          background: #1890ff;
          font-weight: 600;
          font-size: 14px;
          color: #ffffff;
          line-height: 24px;
          text-align: center;
        }
        .title_name {
          height: 24px;
          margin-left: 8px;
          font-weight: 600;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.88);
          line-height: 24px;
          text-align: left;
        }
        .title_explain {
          height: 14px;
          margin-left: 8px;
          margin-top: 6px;
          font-weight: 400;
          font-size: 10px;
          color: #999999;
          line-height: 14px;
          text-align: left;
        }
      }
    }
    .subtitle {
      height: 17px;
      margin-left: 30px;
      margin-top: 17px;
      font-weight: 600;
      font-size: 12px;
      color: #303133;
      line-height: 17px;
      text-align: left;
      display: flex;
      flex-direction: row;
    }
    .subtitle_explain_disable {
      height: 21px;
      margin-left: 30px;
      // margin-top: 4px;
      // margin-top: 3px;
      font-weight: 400;
      font-size: 10px;
      color: #a8abb2;
      line-height: 21px;
      text-align: left;
      display: flex;
      flex-direction: row;
    }
    .editable {
      color: #303133 !important;
    }
  }
</style>