控制器添加复杂接口

Yi.Vue/src/components/Table.vue

@@ -10,6 +10,7 @@
       v-model="selected"
       :search="search"
     >
+    <slot/>
       <template v-slot:top>
         <!-- 搜索框 -->
         <v-toolbar flat>
@@ -23,12 +24,22 @@
             class="mx-4"
           ></v-text-field>
 
-          <v-btn color="primary" dark class="mb-2 mx-2" @click="dialog = true">
+          <v-btn
+            v-if="axiosUrls.hasOwnProperty('add')"
+            color="primary"
+            dark
+            class="mb-2 mx-2"
+            @click="dialog = true"
+          >
             添加新项
           </v-btn>
 
           <!-- 添加提示框 -->
-          <v-dialog v-model="dialog" max-width="500px">
+          <v-dialog
+            v-if="axiosUrls.hasOwnProperty('add')"
+            v-model="dialog"
+            max-width="500px"
+          >
             <v-card>
               <v-card-title>
                 <span class="headline">{{ formTitle }}</span>
@@ -61,35 +72,35 @@
             </v-card>
           </v-dialog>
 
-          <v-btn color="red" dark class="mb-2" @click="deleteItem(null)">
+          <v-btn
+            v-if="axiosUrls.hasOwnProperty('del')"
+            color="red"
+            dark
+            class="mb-2"
+            @click="deleteItem(null)"
+          >
             删除所选
           </v-btn>
-
-          <!-- 删除提示框 -->
-          <v-dialog v-model="dialogDelete" max-width="500px">
-            <v-card>
-              <v-card-title class="headline"
-                >你确定要删除此条记录吗？</v-card-title
-              >
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" text @click="closeDelete"
-                  >取消</v-btn
-                >
-                <v-btn color="blue darken-1" text @click="deleteItemConfirm"
-                  >确定</v-btn
-                >
-                <v-spacer></v-spacer>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
         </v-toolbar>
       </template>
 
       <!-- 表格中的删除和修改 -->
       <template v-slot:item.actions="{ item }">
-        <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
-        <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
+        <v-icon
+          v-if="axiosUrls.hasOwnProperty('update')"
+          small
+          class="mr-2"
+          @click="editItem(item)"
+        >
+          mdi-pencil
+        </v-icon>
+        <v-icon
+          v-if="axiosUrls.hasOwnProperty('del')"
+          small
+          @click="deleteItem(item)"
+        >
+          mdi-delete
+        </v-icon>
       </template>
 
       <!-- 初始化 -->
@@ -100,9 +111,9 @@
   </v-card>
 </template>
 <script>
-import itemApi from './TableApi.js'
+import itemApi from "./TableApi.js";
 export default {
-  name: 'Tables',
+  name: "Tables",
   props: {
     defaultItem: {
       type: Object,
@@ -110,9 +121,9 @@ export default {
     headers: {
       type: Array,
     },
-    axiosUrls:{
-        type: Object,
-    }
+    axiosUrls: {
+      type: Object,
+    },
   },
 
   data: () => ({
@@ -120,7 +131,6 @@ export default {
     selected: [],
     search: "",
     dialog: false,
-    dialogDelete: false,
     desserts: [],
     editedIndex: -1,
     editedItem: {},
@@ -135,10 +145,7 @@ export default {
   watch: {
     dialog(val) {
       val || this.close();
-    },
-    dialogDelete(val) {
-      val || this.closeDelete();
-    },
+    }
   },
 
   created() {
@@ -147,11 +154,11 @@ export default {
 
   methods: {
     initialize() {
-        itemApi.getItem(this.axiosUrls.get).then((resp) => {
-          const response = resp.data;
-          this.desserts = response;
-        });
-    
+      itemApi.getItem(this.axiosUrls.get).then((resp) => {
+        const response = resp.data;
+        this.desserts = response;
+      });
+
       this.$nextTick(() => {
         this.editedItem = Object.assign({}, this.defaultItem);
         this.editedIndex = -1;
@@ -165,10 +172,21 @@ export default {
       this.dialog = true;
     },
 
-    deleteItem(item) {
+    async deleteItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
-      this.dialogDelete = true;
+
+      var p = await this.$dialog.warning({
+        text: "你确定要删除此条记录吗？?",
+        title: "警告",
+        actions: {
+          false: "取消",
+          true: "确定",
+        },
+      });
+      if (p) {
+        this.deleteItemConfirm();
+      }
     },
     deleteItemConfirm() {
       var Ids = [];
@@ -179,7 +197,9 @@ export default {
           Ids.push(item.id);
         });
       }
-        itemApi.delItemList(this.axiosUrls.del,Ids).then(() => this.initialize());
+      itemApi
+        .delItemList(this.axiosUrls.del, Ids)
+        .then(() => this.initialize());
       this.closeDelete();
     },
     close() {
@@ -200,9 +220,13 @@ export default {
 
     save() {
       if (this.editedIndex > -1) {
-        itemApi.updateItem(this.axiosUrls.update,this.editedItem).then(() => this.initialize());
+        itemApi
+          .updateItem(this.axiosUrls.update, this.editedItem)
+          .then(() => this.initialize());
       } else {
-        itemApi.addItem(this.axiosUrls.add,this.editedItem).then(() => this.initialize());
+        itemApi
+          .addItem(this.axiosUrls.add, this.editedItem)
+          .then(() => this.initialize());
       }
       this.close();
     },