弹框确认和取消按钮位置不统一

src/components/Setting/components/History.vue

@@ -111,7 +111,12 @@
         <div class="return_btn" @click="showDetailVisible = false">返回</div>
       </div>
     </div>
-    <ClearRecordByKeysModal ref="clearRecordByKeys" :keys="checkedItems"/>
+    
+    <my-modal type="confirm" icon="warning" 
+      content="确定要所选消毒记录吗！"
+      v-model:visible="clearRecordByKeysModalVisible"
+      @ok="actionClearRecordByKeysExecute"
+    ></my-modal>
   </div>
 </template>
 
@@ -121,19 +126,28 @@ import Down from '@/assets/img/arrow/down.png'
 import Top from '@/assets/img/arrow/top.png'
 import Right from '@/assets/img/arrow/right.png'
 import Left from '@/assets/img/arrow/left.png'
-import ClearRecordByKeysModal from 'cpns/dialogs/ClearRecordByKeysModal'
 import { useHistoryStore, useWebSocketStore, useSettingStore } from '@/store'
-import { getDetailInfoById, exportDisinfectionRecordByKeyListJSON } from '@/mock/command'
+import { getDetailInfoById, exportDisinfectionRecordByKeyListJSON, getAllLocalHistoryData } from '@/mock/command'
+import MyModal from 'cpns/MyModal.vue';
+/** @var {Object} */
+const webSocketStore = useWebSocketStore();
+// 选中的数据
+const checkedItems = ref([])
+/** @var {Boolean} */
+const clearRecordByKeysModalVisible = ref(false);
+
+// clear record by keys
+async function actionClearRecordByKeysExecute() {
+    await webSocketStore.call('cleanDisinfectionRecord',{keys:checkedItems.value});
+    webSocketStore.sendCommandMsg(getAllLocalHistoryData);
+}
 
 const showDetailVisible = ref(false)
 const historyStore = useHistoryStore()
-const webSocketStore = useWebSocketStore()
 const settingStore = useSettingStore()
 
 // 清除记录对话框
 const clearRecordByKeys = ref(null)
-// 选中的数据
-const checkedItems = ref([])
 // 历史数据列表
 const historyDataList = computed(() => {
     return historyStore.historyDataList.sort((a, b) => b.localeCompare(a));
@@ -149,7 +163,8 @@ function actionOperationExecute( action ) {
         settingStore.updateExportLoading(true)
         webSocketStore.sendCommandMsg(exportDisinfectionRecordByKeyListJSON(checkedItems.value));
     } else if ( 'delete' === action ) {
-        clearRecordByKeys.value.showDialog();
+        // clearRecordByKeys.value.showDialog();
+        clearRecordByKeysModalVisible.value = true;
     }
 }
 

src/components/dialogs/ClearRecordByKeysModal.vue

@@ -1,32 +1,10 @@
 <template>
-  <div v-if="enable" class="clear_record_modal_container">
-    <div class="modal_content">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="69"
-        height="69"
-        viewBox="0 0 69 69"
-      >
-        <g>
-          <path
-            d="M34.5,0C15.456,0,0,15.456,0,34.5C0,53.544,15.456,69,34.5,69C53.544,69,69,53.544,69,34.5C69,15.456,53.544,0,34.5,0ZM34.5,55.2C32.5335,55.2,30.981,53.613,30.981,51.681C30.981,49.7145,32.568,48.162,34.5,48.162C36.4665,48.162,38.019,49.749,38.019,51.681C38.019,53.613,36.4665,55.2,34.5,55.2ZM38.3295,15.8355L37.605,40.9515C37.5705,42.2625,36.225,43.2975,34.638,43.2975L34.086,43.2975C32.499,43.2975,31.1535,42.2625,31.119,40.9515L30.36,15.8355C30.291,13.8345,31.9125,12.144,33.9825,12.144L34.707,12.144C36.777,12.144,38.3985,13.8345,38.3295,15.8355Z"
-            fill="#FA1C1C"
-            fill-opacity="1"
-          />
-        </g>
-      </svg>
-      <p class="tips">
-        <span class="red">确定要所选消毒记录吗！</span>
-      </p>
-      <div class="btns">
-        <div class="ok style-btn" @click="handleStart">确定</div>
-        <div class="cancel style-btn" @click="handleCancel">取消</div>
-      </div>
-    </div>
-  </div>
+  <my-modal type="confirm" icon="warning"
+    content="确定要删除所选消毒记录吗！"
+    v-model:visible="enable"
+    @ok="handleStart"
+    @cancel="handleCancel"
+  ></my-modal>
 </template>
 
 <script setup>
@@ -54,6 +32,7 @@ const handleCancel = () => {
 
 const handleStart = () => {
   webSocketStore.sendCommandMsg(cleanDisinfectionRecordByKeysJSON(props.keys))
+  
   enable.value = false;
 }
 </script>