crc一致性核查回复弹窗添加取消按钮

src/views/trials/trials-panel/visit/consistency-check/components/consistencyCheckForm.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-loading="loading" class="chat-wrapper">
-    <div v-if="recordContent.length>0" class="chat-content">
+    <div v-if="recordContent.length > 0" class="chat-content">
-      <div v-for="(record,index) in recordContent" :key="`${record.CreateTime}${index}`">
+      <div v-for="(record, index) in recordContent" :key="`${record.CreateTime}${index}`">
         <div v-if="!record.IsCurrentUser" class="word">
-          <img v-if="record.UserTypeEnum*1 === 8" :src="adminAvatar" alt="Admin">
+          <img v-if="record.UserTypeEnum * 1 === 8" :src="adminAvatar" alt="Admin">
-          <img v-else-if="record.UserTypeEnum*1 === 1" :src="pmAvatar" alt="PM">
+          <img v-else-if="record.UserTypeEnum * 1 === 1" :src="pmAvatar" alt="PM">
-          <img v-else-if="record.UserTypeEnum*1 === 2" :src="crcAvatar" alt="CRC">
+          <img v-else-if="record.UserTypeEnum * 1 === 2" :src="crcAvatar" alt="CRC">
           <div class="info">
             <p class="user-info">
               <span style="font-weight:700;">{{ record.CreateUserName }} </span>
@@ -24,9 +24,9 @@
             <div class="info-content" v-html="record.TalkContent" />
           </div>
           <!-- <img :src="record.headUrl"> -->
-          <img v-if="record.UserTypeEnum*1 === 8" :src="adminAvatar" alt="Admin">
+          <img v-if="record.UserTypeEnum * 1 === 8" :src="adminAvatar" alt="Admin">
-          <img v-else-if="record.UserTypeEnum*1 === 1" :src="pmAvatar" alt="PM">
+          <img v-else-if="record.UserTypeEnum * 1 === 1" :src="pmAvatar" alt="PM">
-          <img v-else-if="record.UserTypeEnum*1 === 2" :src="crcAvatar" alt="CRC">
+          <img v-else-if="record.UserTypeEnum * 1 === 2" :src="crcAvatar" alt="CRC">
         </div>
       </div>
     </div>
@@ -36,83 +36,50 @@
     </div>
     <div v-if="checkChallengeState !== 3 && checkState !== 11" class="chat-message">
       <div class="message">
-        <el-input
+        <el-input v-model="newMessage" v-hasPermi="['trials:trials-panel:visit:consistency-check:fallback']"
-          v-model="newMessage"
+          type="textarea" :rows="2" />
-          v-hasPermi="['trials:trials-panel:visit:consistency-check:fallback']"
-          type="textarea"
-          :rows="2"
-        />
       </div>
       <div class="function">
         <!-- 申请回退 -->
-        <el-button
+        <el-button v-hasPermi="['trials:trials-panel:visit:consistency-check:apply-fallback']" type="primary"
-          v-hasPermi="['trials:trials-panel:visit:consistency-check:apply-fallback']"
-          type="primary"
           :disabled="!(checkState === 10 && (requestBackState === 0 || requestBackState === 3))"
-          @click="handleApplyBack"
+          @click="handleApplyBack">
-        >
           {{ $t('trials:consistencyCheck:action:applyFallback') }}
         </el-button>
         <!-- 拒绝回退 -->
-        <el-button
+        <el-button v-hasPermi="['trials:trials-panel:visit:consistency-check:fallback']" type="primary"
-          v-hasPermi="['trials:trials-panel:visit:consistency-check:fallback']"
+          :disabled="!(requestBackState === 1)" @click="handleRejectBack">
-          type="primary"
-          :disabled="!(requestBackState === 1)"
-          @click="handleRejectBack"
-        >
           {{ $t('trials:consistencyCheck:button:rejectBack') }}
         </el-button>
         <!-- 回退 -->
-        <el-button
+        <el-button v-hasPermi="['trials:trials-panel:visit:consistency-check:fallback']" type="primary"
-          v-hasPermi="['trials:trials-panel:visit:consistency-check:fallback']"
+          :disabled="!(requestBackState === 1)" @click="handleBack">
-          type="primary"
-          :disabled="!(requestBackState === 1)"
-          @click="handleBack"
-        >
           {{ $t('trials:consistencyCheck:action:fallback') }}
         </el-button>
         <!-- 发送 -->
-        <el-button
+        <el-button v-hasPermi="['role:pm']"
-          v-hasPermi="['role:pm']"
+          :disabled="!(checkState === 10 && checkChallengeState !== 3) || newMessage === ''" type="primary"
-          :disabled="!(checkState === 10 && checkChallengeState !== 3) || newMessage === ''"
+          :loading="btnLoading" @click="handleReply()">
-          type="primary"
-          :loading="btnLoading"
-          @click="handleReply()"
-        >
           {{ $t('trials:consistencyCheck:button:sendMessage') }}
         </el-button>
         <!-- 回复 -->
-        <el-button
+        <el-button v-hasPermi="['role:crc']" type="primary"
-          v-hasPermi="['role:crc']"
           :disabled="!(checkState === 10 && checkChallengeState !== 3) || (recordContent && recordContent.length > 0 ? recordContent[recordContent.length - 1].UserTypeEnum * 1 === 2 : false)"
-          type="primary"
+          :loading="btnLoading" @click="handleCRCReply">
-          :loading="btnLoading"
-          @click="handleCRCReply"
-        >
           {{ $t('trials:consistencyCheck:title:reply') }}
         </el-button>
         <!-- 关闭 -->
-        <el-button
+        <el-button type="primary" :loading="btnLoading" @click="close">
-          type="primary"
-          :loading="btnLoading"
-          @click="close"
-        >
           {{ $t('trials:consistencyCheck:title:close') }}
         </el-button>
       </div>
     </div>
     <!-- 回复一致性核查 -->
-    <el-dialog
+    <el-dialog v-if="sendMessageCRCVisible" v-dialogDrag :visible.sync="sendMessageCRCVisible"
-      v-if="sendMessageCRCVisible"
+      :close-on-click-modal="false" append-to-body custom-class="base-dialog-wrapper" :width="'600px'"
-      v-dialogDrag
+      :title="$t('trials:consistencyCheck:title:replyConsistency')">
-      :visible.sync="sendMessageCRCVisible"
+      <crcSendMessage :crc-message-info="crcMessageInfo" :visible.sync="sendMessageCRCVisible"
-      :close-on-click-modal="false"
+        @sendMessage="handleReply" />
-      append-to-body
-      custom-class="base-dialog-wrapper"
-      :width="'600px'"
-      :title="$t('trials:consistencyCheck:title:replyConsistency')"
-    >
-      <crcSendMessage :crc-message-info="crcMessageInfo" @sendMessage="handleReply" />
     </el-dialog>
   </div>
 </template>
@@ -277,46 +244,54 @@ export default {
 }
 </script>
 <style lang="scss">
-.chat-wrapper{
+.chat-wrapper {
-::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     width: 7px;
     height: 7px;
   }
+
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     background: #d0d0d0;
   }
-  .chat-content{
+
-    width:100%;
+  .chat-content {
+    width: 100%;
     padding: 20px;
     height: 500px;
     overflow-y: auto;
-    .word{
+
+    .word {
       display: flex;
       margin-bottom: 20px;
-      img{
+
-        width:40px;
+      img {
+        width: 40px;
         height: 40px;
         border-radius: 50%;
       }
-      .info{
+
+      .info {
         margin-left: 10px;
-        .user-info{
+
+        .user-info {
           font-size: 12px;
-          color:rgba(51,51,51,0.8);
+          color: rgba(51, 51, 51, 0.8);
-          margin:0;
+          margin: 0;
           height: 20px;
           line-height: 20px;
           margin-top: -5px;
         }
-        .info-content{
+
+        .info-content {
           padding: 10px;
           font-size: 14px;
           background-color: #ebeef5;
           position: relative;
           margin-top: 8px;
         }
-        .info-content::before{
+
+        .info-content::before {
           position: absolute;
           left: -8px;
           top: 8px;
@@ -327,29 +302,34 @@ export default {
         }
       }
     }
-    .word-my{
+
+    .word-my {
       display: flex;
       justify-content: flex-end;
       margin-bottom: 20px;
-      img{
+
+      img {
         width: 40px;
         height: 40px;
         border-radius: 50%;
       }
-      .info{
+
+      .info {
         width: 90%;
         margin-left: 10px;
         text-align: right;
-        .user-info{
+
+        .user-info {
           font-size: 12px;
-          color: rgba(51,51,51,0.8);
+          color: rgba(51, 51, 51, 0.8);
           margin: 0;
           height: 20px;
           line-height: 20px;
           margin-top: -5px;
           margin-right: 10px;
         }
-        .info-content{
+
+        .info-content {
           position: relative;
           max-width: 70%;
           padding: 10px;
@@ -361,7 +341,8 @@ export default {
           color: #fff;
           text-align: left;
         }
-        .info-content::after{
+
+        .info-content::after {
           position: absolute;
           right: -8px;
           top: 8px;
@@ -373,9 +354,11 @@ export default {
       }
     }
   }
-  .chat-message{
+
+  .chat-message {
     padding: 0 50px;
-    .function{
+
+    .function {
       margin-top: 10px;
       text-align: right;
     }

src/views/trials/trials-panel/visit/consistency-check/components/crcSendMessageNew.vue

@@ -71,6 +71,10 @@
       </div>
     </div>
     <div class="function">
+      <!-- 取消 -->
+      <el-button @click="close">
+        {{ $t('common:button:cancel') }}
+      </el-button>
       <!-- 发送 -->
       <el-button type="primary" @click="handleReply">
         {{ $t('trials:consistencyCheck:button:sendMessage') }}
@@ -118,6 +122,10 @@ export default {
           TalkContent: null
         }
       }
+    },
+    visible: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -149,6 +157,9 @@ export default {
     this.compareStudy()
   },
   methods: {
+    close() {
+      this.$emit('update:visible', false)
+    },
     compareStudy() {
       var isLackOf = false
       this.IRCList = []