made delete component reusable, added error and success place holder

src/views/products/components/EditorImage.vue

@@ -1,14 +1,15 @@
 <template>
   <div>
-    <el-button icon="el-icon-delete" size="mini" type="danger" @click=" dialogVisible=true">
+    <el-button icon="el-icon-delete" size="mini" type="danger" @click="openDeletePopup">
       Delete
     </el-button>
     <el-dialog :visible.sync="dialogVisible">
+      <div v-if="viewState==='initialState'">
         <div>
           <h3>
             Are you sure you want to delete this {{ type }} ?
           </h3>
-        <p>To delete this {{ type }}, type in <b>{{ name }}</b> and click delete</p>
+          <p>To delete this {{ type }}, type in <b>{{ item.name }}</b> and click delete</p>
         </div>
         <el-row :gutter="20">
           <el-col :span="12" :offset="6">
@@ -23,6 +24,13 @@
         <el-button type="danger" :disabled="isNameCorrect" @click="handleSubmit">
           Confirm
         </el-button>
+      </div>
+      <div v-else-if="viewState==='Success'">
+        <h1>SUCCESS you can now close this popup</h1>
+      </div>
+      <div v-else-if="viewState==='Error'">
+        <h1>ERROR please try again, if the error persist contact Chadmin!</h1>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -32,34 +40,49 @@
 
 export default {
   props: {
-    color: {
+    item: {
+      type: Object,
+      default: function() {
+        return {
+          name: 'BROKEN!-KEROSENOS-BROKEN!',
+          _id: 'THIS-ID-IS-BROKEN!'
+        }
+      }
+    },
+    type: {
       type: String,
-      default: '#1890ff'
+      default: 'chad'
     }
   },
   data() {
     return {
       dialogVisible: false,
-      isNameCorrect: true,
       input: '',
-      type: 'product',
+      isNameCorrect: false,
-      name: 'Kerosenos'
+      viewState: 'initialState'
     }
   },
   methods: {
+    openDeletePopup() {
+      this.dialogVisible = true
+      this.viewState = 'initialState'
+    },
     checkAllSuccess() {
       return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
     },
     handleSubmit() {
-      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      console.log(this.input)
-      if (!this.checkAllSuccess()) {
+      console.log(this.item._id)
-        this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
+      if (this.input) {
-        return
+        this.viewState = 'Success'
+      } else if (!this.input) {
+        this.viewState = 'Error'
       }
-      this.$emit('successCBK', arr)
+      // const arr = Object.keys(this.listObj).map(v => this.listObj[v])
-      this.listObj = {}
+      // if (!this.checkAllSuccess()) {
-      this.fileList = []
+      //   this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
-      this.dialogVisible = false
+      //   return
+      // }
     },
     handleSuccess(response, file) {
       const uid = file.uid

src/views/products/list.vue

@@ -41,8 +41,10 @@
             </el-button>
           </router-link>
 
-          <editorImage />
+          <editorImage
-
+            :item="scope.row"
+            :type="'Product'"
+          />
         </template>
       </el-table-column>
     </el-table>