Implement handleDispose method for processing warning results, enhance UI with improved HTML structure, and update styles for better readability.

src/views/system/operationWarnresult/index.vue

@@ -142,7 +142,14 @@
             >
               {{ scope.row.goodsSkuName }}
             </el-link>
-            <em style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" :title="scope.row.remark">{{ scope.row.remark }}</em>
+            <em
+              style="
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+              :title="scope.row.remark"
+            >{{ scope.row.remark }}</em>
             <em>{{ scope.row.goodsSkuSn }}</em>
             <em>￥{{ scope.row.initPrice }}</em>
           </div>
@@ -155,25 +162,37 @@
         prop="initPrice"
       >
         <template slot-scope="scope">
-          <div v-if="scope.row.curPrice" class="price--info" style="text-align: left; display: flex;">
-            
-
-            <span style="display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 30px; padding: 2px;">
+          <div
+            v-if="scope.row.curPrice"
+            class="price--info"
+            style="text-align: left; display: flex"
+          >
+            <span
+              style="
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                width: 30px;
+                padding: 2px;
+              "
+            >
               <i
                 v-if="
-                parseFloat(scope.row.curPrice) > parseFloat(scope.row.initPrice)
-              "
-              class="el-icon-top"
-              style="color: green; font-size: 16px"
-            />
-            <i
-              v-else-if="
-                parseFloat(scope.row.curPrice) ===
-                  parseFloat(scope.row.initPrice)
-              "
-              class="el-icon-minus"
-              style="color: #999; font-size: 16px"
-            />
+                  parseFloat(scope.row.curPrice) >
+                    parseFloat(scope.row.initPrice)
+                "
+                class="el-icon-top"
+                style="color: green; font-size: 16px"
+              />
+              <i
+                v-else-if="
+                  parseFloat(scope.row.curPrice) ===
+                    parseFloat(scope.row.initPrice)
+                "
+                class="el-icon-minus"
+                style="color: #999; font-size: 16px"
+              />
               <i
                 v-else
                 class="el-icon-bottom"
@@ -182,7 +201,7 @@
             </span>
 
             <span
-              style="color: #303133; font-size: 14px;"
+              style="color: #303133; font-size: 14px"
             >￥{{ scope.row.curPrice }}</span>
           </div>
         </template>
@@ -215,20 +234,20 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <!-- <el-button
+          <el-button
             v-if="scope.row.status == 0"
             v-hasPermi="['system:operationWarnresult:edit']"
             size="mini"
             type="text"
             icon="el-icon-circle-check"
-            @click="handleUpdate(scope.row)"
+            @click="handleDispose(scope.row)"
           >处理</el-button>
 
           <span
             v-else
             class="text-info"
             style="margin-right: 10px"
-          >已处理</span> -->
+          >已处理</span>
 
           <el-button
             size="mini"
@@ -366,6 +385,39 @@ export default {
       }
       this.resetForm('form')
     },
+    /** 处理按钮操作 */
+    handleDispose(row) {
+      const _html = `
+        <p class="warn-result-text">预警商品：<a href="${row.goodsSkuUrl}" target="_blank">${row.goodsSkuName}</a></p>
+        <p class="warn-result-text">预警价格：${row.curPrice}</p>
+        <p class="warn-result-text">预警时间：${row.warnTime}</p>
+        <p class="warn-result-text">预警平台：${row.platform}</p>
+        <p class="warn-result-text">预警备注：${row.remark}</p>
+        <p class="warn-result-text">预警快照：<a href="${row.snapshotUrl}" target="_blank">点击查看</a></p>
+        <p class="warn-result-tips">注：如果点击“稍后处理”，则预警结果将不会被处理，预警状态将不会被修改。如果点击“立即处理”，则当前商品基准价格将会被修改为预警价格，价格监控按照新的基准价格进行监控。</p>
+      `
+      this.$confirm(_html, '提示', {
+        confirmButtonText: '立即处理',
+        cancelButtonText: '稍后处理',
+        dangerouslyUseHTMLString: true,
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        showClose: false,
+        customClass: 'warn-result-message'
+      }).then(() => {
+        this.loading = true
+        row.status = 1
+        updateOperationWarnresult(row)
+          .then((response) => {
+            this.$modal.msgSuccess('处理成功')
+            this.open = false
+            this.getList()
+          })
+          .finally(() => {
+            this.loading = false
+          })
+      })
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1
@@ -450,16 +502,31 @@ export default {
   }
 }
 </script>
-<style>
-.warn-result table{
+<style lang="scss">
+.warn-result table {
   width: 100% !important;
 }
 .warn-result table td a {
   display: none;
 }
-.warn-result table img{
+.warn-result table img {
   width: 100% !important;
 }
+.warn-result-message {
+  .warn-result-text {
+    font-size: 14px;
+    color: #303133;
+    a {
+      color: #409eff;
+      text-decoration: underline;
+    }
+  }
+  .warn-result-tips {
+    font-size: 12px;
+    color: #999;
+    margin-top: 10px;
+  }
+}
 </style>
 <style lang="scss" scoped>
 .goods--info {