feat: 新建contentPanle文件夹优化ManageContent结构

src/api/message/system-notifications.ts

@@ -1,5 +1,4 @@
 import { http } from '@/utils/http/axios';
-import { issueDetilasType } from '@/views/message/systemNotifications/type.ts';
 
 export interface queryParams {
   queryParam?: string;

src/views/message/questionNotifications/components/ManageContent.vue

@@ -1,540 +1,51 @@
 <template>
   <div class="manage_content">
     <div class="content_row" style="margin-bottom: 32px">
-      <div class="content_panel" style="margin-right: 40px">
-        <div class="panel_top">
-          <div class="top_content">
-            <div class="circle">1</div>
-            <div class="title_name">问题审核阶段</div>
-            <div class="title_explain">问题审核阶段</div>
-          </div>
-          <el-button
-            v-show="toAuthEdit.openEdit === false"
-            link
-            type="primary"
-            size="small"
-            @click="openToAuth"
-            style="height: 15px; margin-top: 4px; margin-left: auto"
-            ><el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
-              <el-icon :size="16">
-                <EditPen />
-              </el-icon>
-            </el-tooltip>
-          </el-button>
-          <el-button
-            v-show="toAuthEdit.openEdit === true"
-            type="primary"
-            style="height: 24px; margin-left: auto; width: 48px"
-            @click="saveToAuth"
-            >保存</el-button
-          >
-        </div>
-        <div class="subtitle"
-          >问题审核时
-          <el-switch
-            :disabled="!toAuthEdit.openEdit"
-            v-model="toAuthEdit.atProcessing"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div class="subtitle_explain_disable">自动推送给问题发生地点的所有审核员</div>
-        <div class="subtitle"
-          >超期未审核
-          <el-switch
-            :disabled="!toAuthEdit.openEdit"
-            v-model="toAuthEdit.atExpiry"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div
-          class="subtitle_explain_disable"
-          :class="toAuthEdit.openEdit === true && toAuthEdit.atExpiry === true ? 'editable' : ''"
-          style="margin-top: 10px"
-          >超过<el-input-number
-            v-model="toAuthEdit.expiryTime"
-            :disabled="!toAuthEdit.openEdit || !toAuthEdit.atExpiry"
-            :min="0"
-            size="small"
-            style="width: 70px"
-            controls-position="right"
-          />小时未审核继续推送给审核员</div
-        >
-        <div class="subtitle"
-          >长期未审核
-          <el-switch
-            :disabled="!toAuthEdit.openEdit"
-            v-model="toAuthEdit.atLongTimeExpiry"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div
-          class="subtitle_explain_disable"
-          :class="
-            toAuthEdit.openEdit === true && toAuthEdit.atLongTimeExpiry === true ? 'editable' : ''
-          "
-          style="margin-top: 10px"
-          >超过<el-input-number
-            v-model="toAuthEdit.longTimeValue"
-            :disabled="!toAuthEdit.openEdit || !toAuthEdit.atLongTimeExpiry"
-            :min="0"
-            size="small"
-            style="width: 70px"
-            controls-position="right" />小时未审核再次推送给审核员并抄送给<el-select
-            :disabled="!toAuthEdit.openEdit || !toAuthEdit.atLongTimeExpiry"
-            v-model="toAuthEdit.copyTo"
-            value-key="realname"
-            @click="setCurrentProcess(QuestionStatus.toAuth)"
-            placeholder="Select"
-            size="small"
-            style="width: 105px"
-            multiple
-            collapse-tags
-            collapse-tags-tooltip
-          >
-            <el-option
-              v-for="item in directors"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            /> </el-select
-        ></div>
-        <div class="subtitle">推送文案 </div>
-        <el-input
-          :disabled="!toAuthEdit.openEdit"
-          v-model="toAuthEdit.textToPush"
-          style="width: 364px; margin-left: 30px; margin-top: 4px"
-        />
-      </div>
-      <div class="content_panel">
-        <div class="panel_top">
-          <div class="top_content">
-            <div class="circle">2</div>
-            <div class="title_name">问题整改阶段</div>
-            <div class="title_explain">问题整改阶段</div>
-          </div>
-          <el-button
-            v-show="todoEdit.openEdit === false"
-            link
-            type="primary"
-            size="small"
-            @click="opentodo"
-            style="height: 15px; margin-top: 4px; margin-left: auto"
-            ><el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
-              <el-icon :size="16">
-                <EditPen />
-              </el-icon>
-            </el-tooltip>
-          </el-button>
-          <el-button
-            v-show="todoEdit.openEdit === true"
-            type="primary"
-            @click="savetodo"
-            style="height: 24px; margin-left: auto; width: 48px"
-            >保存</el-button
-          >
-        </div>
-        <div class="subtitle"
-          >问题整改时
-          <el-switch
-            :disabled="!todoEdit.openEdit"
-            v-model="todoEdit.atProcessing"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div class="subtitle_explain_disable">自动推送给问题发生地点的所有整改员</div>
-        <div class="subtitle"
-          >超期未整改
-          <el-switch
-            :disabled="!todoEdit.openEdit"
-            v-model="todoEdit.atExpiry"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div
-          class="subtitle_explain_disable"
-          :class="todoEdit.openEdit === true && todoEdit.atExpiry === true ? 'editable' : ''"
-          style="margin-top: 10px"
-          >超过<el-input-number
-            v-model="todoEdit.expiryTime"
-            :disabled="!todoEdit.openEdit || !todoEdit.atExpiry"
-            :min="0"
-            size="small"
-            style="width: 70px"
-            controls-position="right"
-          />小时未整改继续推送给整改员</div
-        >
-        <div class="subtitle"
-          >长期未整改
-          <el-switch
-            :disabled="!todoEdit.openEdit"
-            v-model="todoEdit.atLongTimeExpiry"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div
-          class="subtitle_explain_disable"
-          :class="
-            todoEdit.openEdit === true && todoEdit.atLongTimeExpiry === true ? 'editable' : ''
-          "
-          style="margin-top: 10px"
-          >超过<el-input-number
-            v-model="todoEdit.longTimeValue"
-            :disabled="!todoEdit.openEdit || !todoEdit.atLongTimeExpiry"
-            :min="0"
-            size="small"
-            style="width: 70px"
-            controls-position="right" />小时未整改再次推送给整改员并抄送给<el-select
-            :disabled="!todoEdit.openEdit || !todoEdit.atLongTimeExpiry"
-            v-model="todoEdit.copyTo"
-            value-key="realname"
-            @click="setCurrentProcess(QuestionStatus.todo)"
-            placeholder="Select"
-            size="small"
-            style="width: 105px"
-            multiple
-            collapse-tags
-            collapse-tags-tooltip
-          >
-            <el-option
-              v-for="item in directors"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            /> </el-select
-        ></div>
-        <div class="subtitle">推送文案 </div>
-        <el-input
-          :disabled="!todoEdit.openEdit"
-          v-model="todoEdit.textToPush"
-          style="width: 364px; margin-left: 30px; margin-top: 4px"
-        />
-      </div>
+      <ContentPanel
+        :savedData="savedData"
+        :issue-type="QuestionStatus.toAuth"
+        :title="'审核'"
+        :save-update="saveUpdate"
+      />
+      <ContentPanel
+        :savedData="savedData"
+        :issue-type="QuestionStatus.todo"
+        :title="'整改'"
+        :save-update="saveUpdate"
+      />
     </div>
     <div class="content_row">
-      <div class="content_panel" style="margin-right: 40px">
-        <div class="panel_top">
-          <div class="top_content">
-            <div class="circle">3</div>
-            <div class="title_name">问题复核阶段</div>
-            <div class="title_explain">问题复核阶段</div>
-          </div>
-          <el-button
-            v-show="toReviewEdit.openEdit === false"
-            link
-            type="primary"
-            size="small"
-            @click="openToReview"
-            style="height: 15px; margin-top: 4px; margin-left: auto"
-            ><el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
-              <el-icon :size="16">
-                <EditPen />
-              </el-icon>
-            </el-tooltip>
-          </el-button>
-          <el-button
-            v-show="toReviewEdit.openEdit === true"
-            type="primary"
-            style="height: 24px; margin-left: auto; width: 48px"
-            @click="saveToReview"
-            >保存</el-button
-          >
-        </div>
-        <div class="subtitle"
-          >问题复核时
-          <el-switch
-            :disabled="!toReviewEdit.openEdit"
-            v-model="toReviewEdit.atProcessing"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div class="subtitle_explain_disable">自动推送给问题发生地点的所有复核员</div>
-        <div class="subtitle"
-          >超期未复核
-          <el-switch
-            :disabled="!toReviewEdit.openEdit"
-            v-model="toReviewEdit.atExpiry"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div
-          class="subtitle_explain_disable"
-          :class="
-            toReviewEdit.openEdit === true && toReviewEdit.atExpiry === true ? 'editable' : ''
-          "
-          style="margin-top: 10px"
-          >超过<el-input-number
-            :disabled="!toReviewEdit.openEdit || !toReviewEdit.atExpiry"
-            v-model="toReviewEdit.expiryTime"
-            :min="0"
-            size="small"
-            style="width: 70px"
-            controls-position="right"
-          />小时未复核继续推送给复核员</div
-        >
-        <div class="subtitle"
-          >长期未复核
-          <el-switch
-            :disabled="!toReviewEdit.openEdit"
-            v-model="toReviewEdit.atLongTimeExpiry"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div
-          class="subtitle_explain_disable"
-          :class="
-            toReviewEdit.openEdit === true && toReviewEdit.atLongTimeExpiry === true
-              ? 'editable'
-              : ''
-          "
-          style="margin-top: 10px"
-          >超过<el-input-number
-            v-model="toReviewEdit.longTimeValue"
-            :disabled="!toReviewEdit.openEdit || !toReviewEdit.atLongTimeExpiry"
-            :min="0"
-            size="small"
-            style="width: 70px"
-            controls-position="right" />小时未复核再次推送给复核员并抄送给<el-select
-            :disabled="!toReviewEdit.openEdit || !toReviewEdit.atLongTimeExpiry"
-            v-model="toReviewEdit.copyTo"
-            value-key="realname"
-            @click="setCurrentProcess(QuestionStatus.toReview)"
-            placeholder="Select"
-            size="small"
-            style="width: 105px"
-            multiple
-            collapse-tags
-            collapse-tags-tooltip
-          >
-            <el-option
-              v-for="item in directors"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            /> </el-select
-        ></div>
-        <div class="subtitle">推送文案 </div>
-        <el-input
-          :disabled="!toReviewEdit.openEdit"
-          v-model="toReviewEdit.textToPush"
-          style="width: 364px; margin-left: 30px; margin-top: 4px"
-        />
-      </div>
-      <div class="content_panel">
-        <div class="panel_top">
-          <div class="top_content">
-            <div class="circle">4</div>
-            <div class="title_name">问题完结阶段</div>
-            <div class="title_explain">问题完结阶段</div>
-          </div>
-          <el-button
-            v-show="finisheEdit.openEdit === false"
-            link
-            type="primary"
-            size="small"
-            @click="openFinish"
-            style="height: 15px; margin-top: 4px; margin-left: auto"
-            ><el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
-              <el-icon :size="16">
-                <EditPen />
-              </el-icon>
-            </el-tooltip>
-          </el-button>
-          <el-button
-            v-show="finisheEdit.openEdit === true"
-            type="primary"
-            style="height: 24px; margin-left: auto; width: 48px"
-            @click="saveFinish"
-            >保存</el-button
-          >
-        </div>
-        <div class="subtitle"
-          >问题完结时
-          <el-switch
-            :disabled="!finisheEdit.openEdit"
-            v-model="finisheEdit.atProcessing"
-            size="small"
-            style="height: 16px; margin-left: 12px"
-          />
-        </div>
-        <div class="subtitle_explain_disable">自动推送给问题发生地点的所有当事人</div>
-        <div class="subtitle">推送文案 </div>
-        <el-input
-          :disabled="!finisheEdit.openEdit"
-          v-model="finisheEdit.textToPush"
-          style="width: 364px; margin-left: 30px; margin-top: 4px"
-        />
-      </div>
+      <ContentPanel
+        :savedData="savedData"
+        :issue-type="QuestionStatus.toReview"
+        :title="'复核'"
+        :save-update="saveUpdate"
+      />
+      <ContentPanel
+        :savedData="savedData"
+        :issue-type="QuestionStatus.finishe"
+        :title="'完结'"
+        :save-update="saveUpdate"
+      />
     </div>
   </div>
-  <el-dialog
-    v-model="dialogVisible"
-    title="添加人员"
-    align-center
-    :close-on-click-modal="false"
-    style="height: 583px"
-    :width="731"
-    :destroy-on-close="true"
-    class="workShopDialog"
-  >
-    <!-- <SelectTree @cancel="handleCancle" @submit="handleSubmit" :selectedUser="selectedUser" /> -->
-    <PersonFilterSelection
-      @cancel="handleCancle"
-      @submit="handleSubmit"
-      :init-selected="selectedUser"
-    />
-  </el-dialog>
 </template>
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
-  import { EditPen } from '@element-plus/icons-vue';
+
   import { ElMessage } from 'element-plus';
   import {
     getIssueProcessMessage,
     updateIssueProcessMessage,
   } from '@/api/message/question-notifications';
-  import { QuestionStatus, PushTypeStatus, issueDetilasType, issueProcessType } from '../type';
-  import PersonFilterSelection from '@/views/message/components/PersonFilterSelection.vue';
-  import { SelectedFilterPersonInfo } from '@/api/message/person-group';
-
-  const dialogVisible = ref<boolean>(false);
-  const selectedUser = ref<SelectedFilterPersonInfo[]>([]);
-
-  const currentProcess = ref(1);
-  const setCurrentProcess = (num: number) => {
-    currentProcess.value = num;
-    switch (currentProcess.value) {
-      case QuestionStatus.toAuth:
-        selectedUser.value = toAuthEdit.value.copyTo!;
-        break;
-      case QuestionStatus.todo:
-        selectedUser.value = todoEdit.value.copyTo!;
-      case QuestionStatus.toReview:
-        selectedUser.value = toReviewEdit.value.copyTo!;
-        break;
-    }
-    dialogVisible.value = true;
-  };
-
-  const handleSubmit = (selectedData: SelectedFilterPersonInfo[]) => {
-    // selectedUser.value = selectedData;
-    switch (currentProcess.value) {
-      case QuestionStatus.toAuth:
-        toAuthEdit.value.copyTo = selectedData;
-        break;
-      case QuestionStatus.todo:
-        todoEdit.value.copyTo = selectedData;
-      case QuestionStatus.toReview:
-        toReviewEdit.value.copyTo = selectedData;
-        break;
-    }
-    dialogVisible.value = false;
-  };
-  const handleCancle = () => {
-    dialogVisible.value = false;
-  };
-
-  const openToAuth = () => {
-    toAuthEdit.value.openEdit = true;
-  };
-  const saveToAuth = () => {
-    saveUpdate(toAuthEdit.value, QuestionStatus.toAuth);
-    toAuthEdit.value.openEdit = false;
-  };
-
-  interface panelDetails {
-    openEdit: boolean;
-    atProcessing: boolean;
-    atExpiry?: boolean;
-    expiryTime?: number;
-    atLongTimeExpiry?: boolean;
-    longTimeValue?: number;
-    copyTo?: SelectedFilterPersonInfo[];
-    textToPush: string;
-  }
-
-  const toAuthEdit = ref<panelDetails>({
-    openEdit: false,
-    atProcessing: true,
-    atExpiry: true,
-    expiryTime: 5,
-    atLongTimeExpiry: true,
-    longTimeValue: 5,
-    copyTo: [],
-    textToPush: '您有一条【待审核/超期未审核/长期未审核】的问题单，请及时关注并审核',
-  });
-  const directors = [
-    {
-      value: '陆顶',
-      label: '陆顶',
-    },
-    {
-      value: '孙权',
-      label: '孙权',
-    },
-    {
-      value: '马如龙',
-      label: '马如龙',
-    },
-  ];
-  const opentodo = () => {
-    todoEdit.value.openEdit = true;
-  };
-  const savetodo = () => {
-    saveUpdate(todoEdit.value, QuestionStatus.todo);
-    todoEdit.value.openEdit = false;
-  };
-
-  const todoEdit = ref<panelDetails>({
-    openEdit: false,
-    atProcessing: true,
-    atExpiry: true,
-    expiryTime: 5,
-    atLongTimeExpiry: true,
-    longTimeValue: 5,
-    copyTo: [],
-    textToPush: '您有一条【待复核/超期未复核/长期未复核】的问题单，请及时关注并整改',
-  });
-
-  const openToReview = () => {
-    toReviewEdit.value.openEdit = true;
-  };
-  const saveToReview = () => {
-    saveUpdate(toReviewEdit.value, QuestionStatus.toReview);
-    toReviewEdit.value.openEdit = false;
-  };
-
-  const toReviewEdit = ref<panelDetails>({
-    openEdit: false,
-    atProcessing: true,
-    atExpiry: true,
-    expiryTime: 5,
-    atLongTimeExpiry: true,
-    longTimeValue: 5,
-    copyTo: [],
-    textToPush: '您有一条【待整改/超期未整改/长期未整改】的问题单，请及时关注并整改',
-  });
-
-  const openFinish = () => {
-    finisheEdit.value.openEdit = true;
-  };
-  const saveFinish = () => {
-    saveUpdate(finisheEdit.value, QuestionStatus.finishe);
-    finisheEdit.value.openEdit = false;
-  };
-  const finisheEdit = ref<panelDetails>({
-    openEdit: false,
-    atProcessing: true,
-    textToPush: '流程已完结',
-  });
+  import {
+    QuestionStatus,
+    PushTypeStatus,
+    issueDetilasType,
+    issueProcessType,
+    panelDetails,
+  } from '../type';
+  import ContentPanel from './contentPanel.vue';
 
   //根据流程的issuePhase值与pushType值去匹配id
   const idMatch = (issuePhase: number, pushType: number) => {
@@ -613,66 +124,6 @@
     // savedData.value = [];
     getIssueProcessMessage().then((res) => {
       savedData.value = res;
-      console.log(res);
-      console.log(savedData.value);
-      // return;
-      //问题审核阶段，后端拉取保存数据
-      let subData = savedData.value.find((item) => item.issuePhase === QuestionStatus.toAuth);
-      let atonceData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.atonce,
-      );
-      toAuthEdit.value.atProcessing = atonceData?.isEnabled === 1 ? true : false;
-      let expireData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.expire,
-      );
-      toAuthEdit.value.atExpiry = expireData?.isEnabled === 1 ? true : false;
-      toAuthEdit.value.expiryTime = expireData!.overtime;
-      let longTimeData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.longtime,
-      );
-      toAuthEdit.value.atLongTimeExpiry = longTimeData?.isEnabled === 1 ? true : false;
-      toAuthEdit.value.longTimeValue = longTimeData!.overtime;
-      toAuthEdit.value.copyTo = longTimeData!.ccRecipients;
-      //问题整改阶段，后端拉取保存数据
-      subData = savedData.value.find((item) => item.issuePhase === QuestionStatus.todo);
-      atonceData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.atonce,
-      );
-      todoEdit.value.atProcessing = atonceData?.isEnabled === 1 ? true : false;
-      expireData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.expire,
-      );
-      todoEdit.value.atExpiry = expireData?.isEnabled === 1 ? true : false;
-      todoEdit.value.expiryTime = expireData!.overtime;
-      longTimeData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.longtime,
-      );
-      todoEdit.value.atLongTimeExpiry = longTimeData?.isEnabled === 1 ? true : false;
-      todoEdit.value.longTimeValue = longTimeData!.overtime;
-      todoEdit.value.copyTo = longTimeData!.ccRecipients;
-      //问题复核阶段，后端拉取保存数据
-      subData = savedData.value.find((item) => item.issuePhase === QuestionStatus.toReview);
-      atonceData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.atonce,
-      );
-      toReviewEdit.value.atProcessing = atonceData?.isEnabled === 1 ? true : false;
-      expireData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.expire,
-      );
-      toReviewEdit.value.atExpiry = expireData?.isEnabled === 1 ? true : false;
-      toReviewEdit.value.expiryTime = expireData!.overtime;
-      longTimeData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.longtime,
-      );
-      toReviewEdit.value.atLongTimeExpiry = longTimeData?.isEnabled === 1 ? true : false;
-      toReviewEdit.value.longTimeValue = longTimeData!.overtime;
-      toReviewEdit.value.copyTo = longTimeData!.ccRecipients;
-      //问题完成阶段，后端拉取保存数据
-      subData = savedData.value.find((item) => item.issuePhase === QuestionStatus.finishe);
-      atonceData = subData?.issueProcessMessageList.find(
-        (item) => item.pushType === PushTypeStatus.atonce,
-      );
-      finisheEdit.value.atProcessing = atonceData?.isEnabled === 1 ? true : false;
     });
   };
 
@@ -775,4 +226,3 @@
     }
   }
 </style>
-@/api/message/question-notifications

src/views/message/questionNotifications/components/WorkShopTree.vue

@@ -69,6 +69,7 @@
   import { storeToRefs } from 'pinia';
   import { cloneDeep } from 'lodash-es';
   import { TreeKey } from 'element-plus/es/components/tree/src/tree.type';
+  import { treeSelected } from '../type';
   import {
     CameraTree,
     CameraTreeNodeType,
@@ -157,11 +158,6 @@
   const treeRef = ref<InstanceType<typeof ElTree>>();
   const total = ref<number>(0);
   const selected = ref<number>(0);
-  export interface treeSelected {
-    code: number | string;
-    name: string;
-    id: number;
-  }
   const selectedPeople = ref<treeSelected[]>([]);
   const handleTagClose = (code) => {
     const index = selectedPeople.value.findIndex((item) => item.code === code);
@@ -190,8 +186,6 @@
         console.error(error);
         handleCancle();
       });
-
-    // emit('submit', selectedPeople.value);
   };
   const handleCheckChange = (node, checked) => {
     if (!node.children) {
@@ -224,21 +218,7 @@
       selectedPeople.value = res;
     });
     getCameraData({});
-    // if (props.selectedUser) {
-    //   selectedPeople.value = cloneDeep(props.selectedUser);
-    // }
-    // selected.value = selectedPeople.value.length;
-    // getList().then((res) => {
-    //   comTreeData.value = res;
-    //   total.value = countLeafNodes(nodeData.value);
-    //   const selectedIds: TreeKey[] = selectedPeople.value.map((item) => item.code);
-    //   treeRef.value!.setCheckedKeys(selectedIds);
-    //   loading.value = false;
-    // });
   });
-  // watch(queryStr, (query) => {
-  //   treeRef.value!.filter(query);
-  // });
 </script>
 
 <style lang="scss" scoped>
@@ -294,4 +274,3 @@
     }
   }
 </style>
-@/api/message/question-notifications

src/views/message/questionNotifications/components/contentPanel.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="content_panel" style="margin-right: 40px">
+    <div class="panel_top">
+      <div class="top_content">
+        <div class="circle">1</div>
+        <div class="title_name">问题{{ props.title }}阶段</div>
+        <div class="title_explain">问题{{ props.title }}阶段</div>
+      </div>
+      <el-button
+        v-show="editDetails.openEdit === false"
+        link
+        type="primary"
+        size="small"
+        @click="openQuestionEdit"
+        style="height: 15px; margin-top: 4px; margin-left: auto"
+        ><el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
+          <el-icon :size="16">
+            <EditPen />
+          </el-icon>
+        </el-tooltip>
+      </el-button>
+      <el-button
+        v-show="editDetails.openEdit === true"
+        type="primary"
+        style="height: 24px; margin-left: auto; width: 48px"
+        @click="saveQuestionEdit"
+        >保存</el-button
+      >
+    </div>
+    <div class="subtitle"
+      >问题{{ props.title }}时
+      <el-switch
+        :disabled="!editDetails.openEdit"
+        v-model="editDetails.atProcessing"
+        size="small"
+        style="height: 16px; margin-left: 12px"
+      />
+    </div>
+    <div class="subtitle_explain_disable">自动推送给问题发生地点的所有{{ props.title }}员</div>
+    <div v-show="props.issueType != QuestionStatus.finishe" class="subtitle"
+      >超期未{{ props.title }}
+      <el-switch
+        :disabled="!editDetails.openEdit"
+        v-model="editDetails.atExpiry"
+        size="small"
+        style="height: 16px; margin-left: 12px"
+      />
+    </div>
+    <div
+      v-show="props.issueType != QuestionStatus.finishe"
+      :class="[
+        'subtitle_explain_disable',
+        { editable: editDetails.openEdit === true && editDetails.atExpiry === true },
+      ]"
+      style="margin-top: 10px"
+      >超过<el-input-number
+        v-model="editDetails.expiryTime"
+        :disabled="!editDetails.openEdit || !editDetails.atExpiry"
+        :min="0"
+        size="small"
+        style="width: 70px"
+        controls-position="right"
+      />小时未{{ props.title }}继续推送给{{ props.title }}员</div
+    >
+    <div v-show="props.issueType != QuestionStatus.finishe" class="subtitle"
+      >长期未{{ props.title }}
+      <el-switch
+        :disabled="!editDetails.openEdit"
+        v-model="editDetails.atLongTimeExpiry"
+        size="small"
+        style="height: 16px; margin-left: 12px"
+      />
+    </div>
+    <div
+      v-show="props.issueType != QuestionStatus.finishe"
+      :class="[
+        'subtitle_explain_disable',
+        { editable: editDetails.openEdit === true && editDetails.atLongTimeExpiry === true },
+      ]"
+      style="margin-top: 10px"
+      >超过<el-input-number
+        v-model="editDetails.longTimeValue"
+        :disabled="!editDetails.openEdit || !editDetails.atLongTimeExpiry"
+        :min="0"
+        size="small"
+        style="width: 70px"
+        controls-position="right" />小时未{{ props.title }}再次推送给{{
+        props.title
+      }}员并抄送给<el-select
+        :disabled="!editDetails.openEdit || !editDetails.atLongTimeExpiry"
+        v-model="editDetails.copyTo"
+        value-key="realname"
+        @click="openNameTree"
+        placeholder="Select"
+        size="small"
+        style="width: 105px"
+        multiple
+        collapse-tags
+        collapse-tags-tooltip
+      >
+        <el-option
+          v-for="item in directors"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        /> </el-select
+    ></div>
+    <div class="subtitle">推送文案 </div>
+    <el-input
+      :disabled="!editDetails.openEdit"
+      v-model="editDetails.textToPush"
+      style="width: 364px; margin-left: 30px; margin-top: 4px"
+    />
+  </div>
+  <el-dialog
+    v-model="dialogVisible"
+    title="添加人员"
+    align-center
+    :close-on-click-modal="false"
+    style="height: 583px"
+    :width="731"
+    :destroy-on-close="true"
+    class="workShopDialog"
+  >
+    <!-- <SelectTree @cancel="handleCancle" @submit="handleSubmit" :selectedUser="selectedUser" /> -->
+    <PersonFilterSelection
+      @cancel="handleCancle"
+      @submit="handleSubmit"
+      :init-selected="selectedUser"
+    />
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+  import { panelDetails, QuestionStatus, issueDetilasType, PushTypeStatus } from '../type';
+  import { EditPen } from '@element-plus/icons-vue';
+  import { ref, watch } from 'vue';
+  import { SelectedFilterPersonInfo } from '@/api/message/person-group';
+
+  const props = defineProps<{
+    savedData: Array<issueDetilasType>;
+    issueType: number;
+    title: string;
+    saveUpdate: (data: panelDetails, issueType: number) => unknown;
+  }>();
+
+  watch(
+    () => props.savedData, //监听状态值,，当拉取的数据发生变化时，对editDetails进行赋初值
+    (newValue) => {
+      //问题审核阶段，后端拉取保存数据
+      let subData = newValue.find((item) => item.issuePhase === props.issueType);
+      let atonceData = subData?.issueProcessMessageList.find(
+        (item) => item.pushType === PushTypeStatus.atonce,
+      );
+      editDetails.value.atProcessing = atonceData?.isEnabled === 1 ? true : false;
+      let expireData = subData?.issueProcessMessageList.find(
+        (item) => item.pushType === PushTypeStatus.expire,
+      );
+      editDetails.value.atExpiry = expireData?.isEnabled === 1 ? true : false;
+      editDetails.value.expiryTime = expireData!.overtime;
+      let longTimeData = subData?.issueProcessMessageList.find(
+        (item) => item.pushType === PushTypeStatus.longtime,
+      );
+      editDetails.value.atLongTimeExpiry = longTimeData?.isEnabled === 1 ? true : false;
+      editDetails.value.longTimeValue = longTimeData!.overtime;
+      editDetails.value.copyTo = longTimeData!.ccRecipients;
+    },
+    { deep: true, immediate: true }, //deep，深度监听。immediate，在程序开始运行时即马上监听
+  );
+
+  const editDetails = ref<panelDetails>({
+    atProcessing: false,
+    atExpiry: false,
+    atLongTimeExpiry: false,
+    expiryTime: 0,
+    longTimeValue: 0,
+    copyTo: [],
+    textToPush: '',
+    openEdit: false,
+  });
+  const openQuestionEdit = () => {
+    editDetails.value.openEdit = true;
+  };
+  const saveQuestionEdit = () => {
+    props.saveUpdate(editDetails.value, props.issueType);
+    editDetails.value.openEdit = false;
+  };
+
+  const directors = [
+    {
+      value: '陆顶',
+      label: '陆顶',
+    },
+  ];
+  const dialogVisible = ref<boolean>(false);
+  const selectedUser = ref<SelectedFilterPersonInfo[]>([]);
+
+  const openNameTree = () => {
+    selectedUser.value = editDetails.value.copyTo!;
+    dialogVisible.value = true;
+  };
+
+  const handleSubmit = (selectedData: SelectedFilterPersonInfo[]) => {
+    // selectedUser.value = selectedData;
+    editDetails.value.copyTo = selectedData;
+    dialogVisible.value = false;
+  };
+  const handleCancle = () => {
+    dialogVisible.value = false;
+  };
+</script>
+<style lang="scss" scoped>
+  .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>

src/views/message/questionNotifications/components/problemHandleTable.vue

@@ -86,10 +86,9 @@
   } from '@/api/message/question-notifications';
 
   import WorkShopTree from './WorkShopTree.vue';
-  import { treeSelected } from './WorkShopTree.vue';
   import ManageContent from './ManageContent.vue';
   import { ElMessage } from 'element-plus';
-  // const problemTableData = ref<problemPhase[]>([]);
+  import { treeSelected } from '../type';
 
   const cameraChosen = ref<any>([]);
 
@@ -98,14 +97,6 @@
       value: 'Option1',
       label: 'Option1',
     },
-    {
-      value: 'Option2',
-      label: 'Option2',
-    },
-    {
-      value: 'Option3',
-      label: 'Option3',
-    },
   ];
 
   const setCameraChosen = (arr: treeSelected[]) => {
@@ -115,26 +106,11 @@
   const workDialog = ref<boolean>(false);
   const showDialog = ref<boolean>(false);
   const content = ref<string>('');
-  // const listLeft = ref();
-  // const isExpandShow = ref<boolean>(false);
-  // const isExpand = ref<boolean>(true);
-  // const toExpand = () => {
-  //   isExpand.value = !isExpand.value;
-  //   if (isExpand.value) {
-  //     listLeft.value.style.maxHeight = '24px';
-  //   } else {
-  //     listLeft.value.style.maxHeight = 'none';
-  //   }
-  // };
+
   const editId = ref<number>(0);
   const handleWorkShopEdit = () => {
     workDialog.value = true;
   };
-  // const handleProbleEdit = (id: number, _content: string) => {
-  //   showDialog.value = true;
-  //   editId.value = id;
-  //   content.value = _content;
-  // };
 
   const submitDialog = () => {
     modifyContent(content.value, editId.value)
@@ -145,7 +121,6 @@
           plain: true,
         });
         closeDialog();
-        // queryIssueData();
       })
       .catch((error) => {
         console.error(error);
@@ -161,24 +136,7 @@
     id: number;
   }
   const selectedUser = ref<UserList[]>([]);
-  // const queryIssueData = () => {
-  //   queryIssueProcessMessage().then((res) => {
-  //     let params;
-  //     if (res[0].workshopList) {
-  //       params = JSON.parse(res[0].workshopList);
-  //     } else {
-  //       params = [];
-  //     }
-  //     queryWorkshopNamebyIds(params).then((res) => {
-  //       selectedUser.value = res;
-  //       nextTick(() => {
-  //         const height = listLeft.value.scrollHeight;
-  //         isExpandShow.value = height > 24 ? false : true;
-  //       });
-  //     });
-  //     problemTableData.value = res;
-  //   });
-  // };
+
   const handleCancle = () => {
     workDialog.value = false;
   };
@@ -202,7 +160,6 @@
     });
   };
   onMounted(() => {
-    // queryIssueData();
     initCameraChosen();
   });
 </script>
@@ -281,4 +238,3 @@
     width: 100%;
   }
 </style>
-@/api/message/question-notifications

src/views/message/questionNotifications/type.ts

@@ -33,3 +33,20 @@ export interface issueProcessType {
   //抄送人
   ccRecipients?: SelectedFilterPersonInfo[];
 }
+
+export interface panelDetails {
+  openEdit: boolean;
+  atProcessing: boolean;
+  atExpiry?: boolean;
+  expiryTime?: number;
+  atLongTimeExpiry?: boolean;
+  longTimeValue?: number;
+  copyTo?: SelectedFilterPersonInfo[];
+  textToPush: string;
+}
+
+export interface treeSelected {
+  code: number | string;
+  name: string;
+  id: number;
+}