bonus-ui/src/views/business/components/ConfirmationDialog.vue

76 lines
2.0 KiB
Vue

<template>
<el-dialog
title="确定添加"
:visible.sync="visible"
width="720px"
@close="handleClose"
>
<div v-loading="loading">
<!-- 列表 -->
<div style="margin-bottom: 20px">
<div style="font-weight: bold; margin-bottom: 10px">已添加(共 {{ selectedRows.length }} 项)</div>
<el-table :data="selectedRows" style="width: 100%" max-height="300" border>
<el-table-column prop="typeName" align="center" label="装备名称" show-overflow-tooltip/>
<el-table-column prop="num" align="center" label="数量" show-overflow-tooltip>
<template slot-scope="{ row }">
<span v-if="row.num">{{ row.num }}</span>
<span v-else-if="row.repairNum">{{ row.repairNum }}</span>
<span v-else-if="row.scrapQuantity">{{ row.scrapQuantity }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose" size="mini">取消</el-button>
<el-button type="primary" @click="confirm" size="mini" :loading="loading">确定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'ConfirmationDialog',
data() {
return {
visible: false,
loading: false,
selectedRows: [],
}
},
methods: {
openDialog(selectedRows) {
console.log('🚀 ~ selectedRows:', selectedRows)
this.selectedRows = selectedRows
this.visible = true
},
async confirm() {
this.visible = false
// // 返回正确的promise
// return new Promise((resolve, reject) => {
// resolve()
// })
this.$emit('confirm')
},
handleClose() {
this.visible = false
this.selectedRows = []
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding: 20px;
}
::v-deep.el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
</style>