通知单管理-封装全局删除对话框

src/components/DeleteDialog/index.vue

+<template>
+<!--  <el-dialog-->
+<!--      v-model="dialogVisible"-->
+<!--      title="提示"-->
+<!--      align-center-->
+<!--      width="400px"-->
+<!--  >-->
+<!--    <template #content>-->
+<!--      <div style="display: flex; align-items: center;">-->
+<!--        <el-icon style="color: orange; font-size: 18px; margin: 5px"><WarningFilled /></el-icon>-->
+<!--        <div style="font-size: 14px">{{ prompt }}</div>-->
+<!--      </div>-->
+<!--    </template>-->
+<!--    <template #footer>-->
+<!--      <div style="margin-top: 10px">-->
+<!--        <el-button @click="cancel">取消</el-button>-->
+<!--        <el-button type="primary" @click="confirm">确认</el-button>-->
+<!--      </div>-->
+<!--    </template>-->
+<!--  </el-dialog>-->
+
+  <el-dialog
+      class="my_dialog__header_deep"
+      v-model="dialogVisible"
+      title="提示"
+      align-center
+      :before-close="cancel"
+      style="width: 400px;height: 195px;margin-top: 300px" :fullscreen="true"
+  >
+    <template #header>
+      <div>提示</div>
+<!--      <div>{{Prompt}}</div>-->
+    </template>
+    <div style="display: flex;align-items: center;">
+      <el-icon style="color: orange;font-size: 18px;margin:5px"><WarningFilled /></el-icon>
+      <div style="font-size: 14px">{{ content }}</div>
+    </div>
+    <template #footer>
+      <div style="margin-top: 10px">
+        <el-button class="btn-B" @click="cancel">取消</el-button>
+        <el-button class="btn-A" @click="confirm">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from 'vue';
+import { WarningFilled } from '@element-plus/icons-vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  content: {
+    type: String,
+    default: '确定删除该项目吗？'
+  }
+});
+
+const emits = defineEmits(['confirm', 'cancel']);
+
+const dialogVisible = ref(props.visible);
+
+// 监听 visible 属性变化，更新对话框显示状态
+watch(() => props.visible, (newValue) => {
+  dialogVisible.value = newValue;
+});
+
+const confirm = () => {
+  emits('confirm');
+
+};
+
+const cancel = () => {
+  emits('cancel');
+
+};
+</script>
+<style lang="scss">
+.my_dialog__header_deep{
+  .el-dialog__header.show-close{
+    background-color: #ffffff;
+  }
+  .el-dialog__header.show-close{
+    padding: 14px 18px;
+  }
+  .el-dialog__body{
+    padding: 20px;
+  }
+  .el-dialog__footer{
+    padding: 0;
+    margin: 20px;
+  }
+}
+
+</style>

src/views/controlPlan/controlPlanNotice/notificationManagement/index.vue

@@ -154,11 +154,13 @@
       <el-table-column label="创建人" align="center" prop="createUserName"  />
       <el-table-column label="批准人" align="center" prop="approvalUserName"  />
 
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" width="140">
         <template #default="scope">
             <el-button type="text" style="color: rgb(0,0,255)"  @click="handleMaintain(scope.row)">查看详情</el-button>
-            <el-button type="text" style="color: rgb(255,54,54)" @click="copeAdd(scope.row)">删除</el-button>
+            <el-button type="text" style="color: rgb(255,54,54)" @click="delNotification(scope.row)">删除</el-button>
             <el-button type="text" style="color: rgb(255,153,0)"  @click="copeAdd(scope.row)">撤回</el-button>
+          <el-button type="text" v-if="scope.row.notificationStatus === '3'" style="color: rgb(255,153,0)"  @click="copeAdd(scope.row)">作废</el-button>
+
         </template>
       </el-table-column>
     </el-table>
@@ -390,9 +392,19 @@
         </el-table>
       </div>
     </el-dialog>
+
+
+<!--    //提示框-->
+    <DeleteDialog
+        :visible="undoDialogVisible"
+        :content="Prompt"
+        @confirm="handleDelete"
+        @cancel="hideDeleteDialog"
+    />
   </div>
 </template>
 <script setup>
+import DeleteDialog from '@/components/DeleteDialog/index.vue';
 import SelectRole from "@/components/SelectRole/index.vue"
 import {
   brandData,
@@ -406,8 +418,9 @@ import {
   updateCertificationManager
 } from "@/api/notificationManagement/list.js"
 import {ref} from "vue";
-import {ElMessage} from 'element-plus'
+import {ElMessage,ElMessageBox } from 'element-plus'
 const allUserList = ref([])
+const undoDialogVisible = ref(false)
 const personTableList = ref([])
 const { proxy } = getCurrentInstance();
 const { certification_body
@@ -418,6 +431,7 @@ const { vehicle_model_series_icar } = proxy.useDict('vehicle_model_series_icar')
 //车型系列-除了事业部icar选这个
  const {vehicle_model_series } = proxy.useDict('vehicle_model_series')
 const tableList =ref([])
+const Prompt = ref("")
 //车型代码
 const modelCodeList = ref([])
 const dialogVisible = ref(false)
@@ -528,6 +542,16 @@ const beforeClose = (done) => {
   getList()
 };
 
+//提示框确认删除操作
+function handleDelete(){
+  //删除操作
+  console.log("删除")
+  undoDialogVisible.value = false
+}
+function hideDeleteDialog(){
+  undoDialogVisible.value = false
+}
+
 function addPerson(row){
   console.log(row)
   tObj.value.id = row.id
@@ -539,6 +563,12 @@ function addPerson(row){
     personTableList.value = res.data
   })
 }
+//删除
+function delNotification(row){
+  Prompt.value = "确定删除该通知单吗？"
+
+  undoDialogVisible.value = true
+}
 
 //获取品牌列表
 function  getBrandDataList(){