公司模板增加删除确认

src/views/system-config/template/CardCommon.vue

@@ -30,15 +30,20 @@
         <el-table-column label="创建时间" prop="createdAt" />
         <el-table-column label="操作">
           <template #default="scoped">
-            <img
-              :src="del"
-              alt=""
-              @click="deleteTableData(scoped.row)"
-              style="height: 30px; width: 30px; padding: 5px"
-            />
+            <el-popconfirm title="确认要删除吗？" @confirm="deleteTableData(scoped.row)">
+              <template #reference>
+                <img
+                  :src="del"
+                  alt="delete"
+                  class="actionIcon"
+                  style="height: 30px; width: 30px; padding: 5px"
+                />
+              </template>
+            </el-popconfirm>
             <img
               :src="edit"
-              alt=""
+              alt="edit"
+              class="actionIcon"
               @click="showEditDrawer(scoped.row)"
               style="height: 30px; width: 30px; padding: 5px"
             />
@@ -140,14 +145,8 @@
 
   // 弹框关闭事件-finish
   const handleClose = (done: () => void) => {
-    ElMessageBox.confirm('是否确认关闭?')
-      .then(() => {
-        done();
-        closeDrawer();
-      })
-      .catch(() => {
-        // catch error
-      });
+    done();
+    closeDrawer();
   };
 
   // 编辑提交数据
@@ -223,4 +222,9 @@
   });
 </script>
 
-<style scoped></style>
+<style scoped>
+  .actionIcon {
+    display: inline-block;
+    cursor: pointer;
+  }
+</style>

src/views/system-config/template/DrawerCommon.vue

@@ -33,17 +33,17 @@
         <el-input placeholder="请输入备注" v-model="form.remark" />
       </el-form-item>
 
-      <el-form-item label="模板上传">
+      <!-- <el-form-item label="模板上传">
         <el-upload>
           <el-button disabled>上传</el-button>
         </el-upload>
-      </el-form-item>
+      </el-form-item> -->
 
       <el-form-item label="状态" prop="status">
         <el-switch v-model="form.status" :active-value="0" :inactive-value="1" />
       </el-form-item>
 
-      <div style="margin-top: 100px; margin-left: 250px">
+      <div style="margin-top: 100px; margin-left: 180px">
         <el-button style="margin-left: 50px" @click="resetForm(ruleDrawerRef)">重置</el-button>
         <el-button style="margin-left: 50px" @click="submitDrawer(ruleDrawerRef)" type="primary"
           >提交</el-button

src/views/system-config/template/TitleCommon.vue

@@ -1,112 +1,121 @@
 <template>
-    <div>
-        <el-form inline ref="ruleFormRef" :model="form">
-            <el-form-item style="margin-top: 20px;">
-                <el-input v-model="form.name" :placeholder="`请输入` + props.type + `名称`" class="input-with-select">
-
-                    <template #append>
-                        <el-button :icon="Search" @click="findDataByName(ruleFormRef)" />
-                    </template>
-                </el-input>
-
-                <!-- <el-input style="width: 200px" :placeholder="`请输入` + props.type + `名称`" v-model="form.name" clearable
+  <div>
+    <el-form inline ref="ruleFormRef" :model="form">
+      <el-form-item style="margin-top: 20px">
+        <el-input
+          v-model="form.name"
+          :placeholder="`请输入` + props.type + `名称`"
+          class="input-with-select"
+        >
+          <template #append>
+            <el-button :icon="Search" @click="findDataByName(ruleFormRef)" />
+          </template>
+        </el-input>
+
+        <!-- <el-input style="width: 200px" :placeholder="`请输入` + props.type + `名称`" v-model="form.name" clearable
                     @clear="clearData" /> -->
-            </el-form-item>
-            <!-- <el-button type="primary" :icon="Search" @click="findDataByName(ruleFormRef)">查询</el-button> -->
-            <el-button type="primary" :icon="Plus" @click="addForm" style="position: absolute;right:0;width: 100px;">
-                模板</el-button>
-        </el-form>
-    </div>
-
-
-    <el-drawer v-model="titleDrawer" direction="rtl" :title="currentType" :before-close="handleClose">
-        <DrawerCommonVue :detail="drawerFormData" @submit-drawer="submitDrawer" />
-    </el-drawer>
+      </el-form-item>
+      <!-- <el-button type="primary" :icon="Search" @click="findDataByName(ruleFormRef)">查询</el-button> -->
+      <el-button
+        type="primary"
+        :icon="Plus"
+        @click="addForm"
+        style="position: absolute; right: 0; width: 100px"
+      >
+        模板</el-button
+      >
+    </el-form>
+  </div>
+
+  <el-drawer v-model="titleDrawer" direction="rtl" :title="currentType" :before-close="handleClose">
+    <DrawerCommonVue :detail="drawerFormData" @submit-drawer="submitDrawer" />
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { Search, Plus } from '@element-plus/icons-vue';
-import { onMounted, ref, watch } from 'vue';
-import { ElMessageBox, FormInstance } from 'element-plus';
-import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
-
-export type CreateType = '添加模板' | '修改模板';
-const props = defineProps<{ type: string, pagesize: number, pagenumber: number, drawer: boolean }>();
-const emit = defineEmits(['findDataByName', 'submitDrawer', 'handleClose', 'addForm', 'clearData'])
-const form = ref({
+  import { Search, Plus } from '@element-plus/icons-vue';
+  import { onMounted, ref, watch } from 'vue';
+  import { ElMessageBox, FormInstance } from 'element-plus';
+  import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
+
+  export type CreateType = '添加模板' | '修改模板';
+  const props = defineProps<{
+    type: string;
+    pagesize: number;
+    pagenumber: number;
+    drawer: boolean;
+  }>();
+  const emit = defineEmits([
+    'findDataByName',
+    'submitDrawer',
+    'handleClose',
+    'addForm',
+    'clearData',
+  ]);
+  const form = ref({
     name: '',
-});
-const ruleFormRef = ref<FormInstance>();
-const currentType = ref<CreateType>('添加模板');
-const drawerFormData = ref<FormModelCommon>({} as FormModelCommon);
-
-
-export interface DataCommon {
-    name: string,
-    size: number,
-    page: number,
-}
-
-const titleDrawer = ref(false);
-watch(
+  });
+  const ruleFormRef = ref<FormInstance>();
+  const currentType = ref<CreateType>('添加模板');
+  const defaultFormValue = { id: 0, code: '', name: '', remark: '', status: 0 };
+  const drawerFormData = ref<FormModelCommon>({ ...defaultFormValue } as FormModelCommon);
+
+  export interface DataCommon {
+    name: string;
+    size: number;
+    page: number;
+  }
+
+  const titleDrawer = ref(false);
+  watch(
     () => props.drawer,
     (newdrawer) => {
-        titleDrawer.value = newdrawer;
+      titleDrawer.value = newdrawer;
     },
     { immediate: true },
-);
-
+  );
 
-// 根据名称找到数据-finish
-function findDataByName(formEl: FormInstance | undefined) {
-    console.log('findDataByName')
+  // 根据名称找到数据-finish
+  function findDataByName(formEl: FormInstance | undefined) {
+    console.log('findDataByName');
     if (!formEl) return;
     formEl.validate((valid, fields) => {
-        if (valid) {
-            const data = ref<DataCommon>({
-                name: form.value.name,
-                size: props.pagesize,
-                page: props.pagenumber,
-            })
-            emit('findDataByName', data.value);
-        } else {
-            console.log('error submit!', fields);
-        }
+      if (valid) {
+        const data = ref<DataCommon>({
+          name: form.value.name,
+          size: props.pagesize,
+          page: props.pagenumber,
+        });
+        emit('findDataByName', data.value);
+      } else {
+        console.log('error submit!', fields);
+      }
     });
-}
+  }
 
-function addForm() {
+  function addForm() {
     currentType.value = '添加模板';
-    emit('addForm')
-}
+    emit('addForm');
+  }
 
-// 添加
-function submitDrawer(data) {
+  // 添加
+  function submitDrawer(data) {
     emit('submitDrawer', data);
-    drawerFormData.value = { id: 0, code: '', name: '', remark: '', status: 0 };
-}
-
-
-const handleClose = (done: () => void) => {
-    ElMessageBox.confirm('是否确认关闭?')
-        .then(() => {
-            done();
-            emit('handleClose');
-        })
-        .catch(() => {
-            // catch error
-        });
-    // emit('handleClose');
-};
-
-// function clearData() {
-//     emit('clearData');
-// }
+    setTimeout(() => {
+      drawerFormData.value = { ...defaultFormValue };
+    }, 500);
+  }
 
+  const handleClose = (done: () => void) => {
+    done();
+    emit('handleClose');
+  };
 
-onMounted(() => {
+  // function clearData() {
+  //     emit('clearData');
+  // }
 
-});
+  onMounted(() => {});
 </script>
 
-<style scoped></style>
+<style scoped></style>