提交代码

src/views/dataCenter/annotationTask/child/examLabelStudio.vue

@@ -1,21 +1,11 @@
 <template>
   <div class="label-studio-annotator">
-    <div id="label-studio" class="annotation-container"></div>
     <div class="button-container">
-      <button class="agree-button" @click="agreement(1)">同意</button>
-      <button class="disagree-button" @click="showDisagreement = true">不同意</button>
-    </div>
-    <!-- 弹出层 -->
-    <div v-if="showDisagreement" class="layui-layer">
-      <div class="layui-layer-content">
-        <h2><span STYLE="color: red">*</span>填写说明</h2>
-        <textarea v-model="disagreementReason" placeholder="填写不同意的原因"></textarea>
-        <div class="layui-layer-buttons">
-          <button class="layui-btn layui-btn-primary" @click="sendDisagreement">提交</button>
-          <button class="layui-btn layui-btn-danger" @click="closeDisagreementModal">取消</button>
-        </div>
-      </div>
+      <el-button type="success" plain size="small" :disabled="this.annotations === null" @click="agreement(1)">同意</el-button>
+      <el-button type="danger" plain  size="small"  :disabled="this.annotations === null" @click="showDisagreement()">不同意</el-button>
     </div>
+    <div id="label-studio" class="annotation-container"></div>
+
   </div>
 </template>
 
@@ -51,7 +41,6 @@ export default {
     return {
       labelStudio: null,
       annotationsList: [] ,
-      showDisagreement: false, // 控制不同意说明弹出层的显示
       disagreementReason: '' // 存储不同意的原因
     };
   },
@@ -62,21 +51,44 @@ export default {
     this.initLabelStudio(); // 组件挂载完成后初始化LabelStudio
   },
   methods: {
+    showDisagreement(){
+      this.$prompt('请输入驳回原因', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputType: 'textarea', // 使用多行文本框
+        inputPlaceholder: '请输入描述',
+        inputPattern: /^.{0,200}$/, // 限制最多200字符
+        inputErrorMessage: '描述不能超过200字符',
+        beforeClose: (action, instance, done) => {
+          console.log(instance)
+          // 验证输入框内容是否为空（必填）
+          if (!instance.inputValue) {
+            this.$message({
+              type: 'error',
+              message: '驳回原因不能为空'
+            });
+            return; // 阻止关闭弹框
+          }
+          done();
+        }
+      })
+        .then(({ value }) => {
+          this.sendDisagreement(value);
+        })
+        .catch(() => {
+        });
+    },
     // 关闭不同意说明弹出层
     closeDisagreementModal() {
       this.showDisagreement = false;
       this.disagreementReason = ''; // 清空原因
     },
     // 发送不同意原因到后台
-    sendDisagreement() {
-      if(this.disagreementReason === ""){
-        this.$modal.msgSuccess('说明原因不能为空');
-        return;
-      }
+    sendDisagreement(value) {
       agreement({
         taskId: Number(this.taskId),
         fileId: Number(this.id),
-        auditFailedReason: this.disagreementReason
+        auditFailedReason: value
       }).then(response => {
         this.$modal.msgSuccess('已提交不同意原因');
         this.closeDisagreementModal(); // 关闭弹出层
@@ -125,7 +137,7 @@ export default {
         id: this.id,
         data: { image: this.fileUrl },
       };
-      if (this.annotations.length) {
+      if (this.annotations) {
         task.annotations = this.getAnnotations();
       }
 
@@ -186,11 +198,7 @@ export default {
 }
 
 .button-container {
-  position: absolute;
-  float: right;
-  justify-content: center;
-  margin-left: 28%;
-  top: 53%;
+  margin: 10px;
 }
 
 .agree-button, .disagree-button {