zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

made delete component reusable, added error and success place holder

This commit is contained in:
Chad Derya 2019-09-09 19:03:32 +01:00
parent 0ee3fc3722
commit 51aeb7629f
2 changed files with 59 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/views/products/components/EditorImage.vue
View File

@ -1,28 +1,36 @@
<template> <template>
<div> <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 Delete
</el-button> </el-button>
<el-dialog :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
<div> <div v-if="viewState==='initialState'">
<h3> <div>
Are you sure you want to delete this {{ type }} ? <h3>
</h3> Are you sure you want to delete this {{ type }} ?
<p>To delete this {{ type }}, type in <b>{{ name }}</b> and click delete</p> </h3>
<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">
<div class="inputBox">
<el-input v-model="input" placeholder="Please input" />
</div>
</el-col>
</el-row>
<el-button @click="dialogVisible = false">
Cancel
</el-button>
<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> </div>
<el-row :gutter="20">
<el-col :span="12" :offset="6">
<div class="inputBox">
<el-input v-model="input" placeholder="Please input" />
</div>
</el-col>
</el-row>
<el-button @click="dialogVisible = false">
Cancel
</el-button>
<el-button type="danger" :disabled="isNameCorrect" @click="handleSubmit">
Confirm
</el-button>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -32,34 +40,49 @@
export default { export default {
props: { props: {
color: { item: {
type: Object,
default: function() {
return {
name: 'BROKEN!-KEROSENOS-BROKEN!',
_id: 'THIS-ID-IS-BROKEN!'
}
}
},
type: {
type: String, type: String,
default: '#1890ff' default: 'chad'
} }
}, },
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false,
isNameCorrect: true,
input: '', input: '',
type: 'product', isNameCorrect: false,
name: 'Kerosenos' viewState: 'initialState'
} }
}, },
methods: { methods: {
openDeletePopup() {
this.dialogVisible = true
this.viewState = 'initialState'
},
checkAllSuccess() { checkAllSuccess() {
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess) return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
}, },
handleSubmit() { 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) { handleSuccess(response, file) {
const uid = file.uid const uid = file.uid

6
src/views/products/list.vue
View File

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