approval-dialog.vue
4.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
<el-dialog title="审批申请" :close-on-click-modal="false" :visible.sync="visible"
class="NCC-dialog NCC-dialog_center" lock-scroll width="600px">
<el-form ref="elForm" :model="dataForm" size="small" label-width="120px" label-position="right" :rules="rules">
<el-form-item label="申请编号">
<span>{{ dataForm.id || '无' }}</span>
</el-form-item>
<el-form-item label="申请人">
<span>{{ dataForm.applicationUserName || '无' }}</span>
</el-form-item>
<el-form-item label="申请门店">
<span>{{ dataForm.applicationStoreName || '无' }}</span>
</el-form-item>
<el-form-item label="申请时间">
<span>{{ formatDateTime(dataForm.applicationTime) }}</span>
</el-form-item>
<el-form-item label="审批状态">
<el-tag :type="getStatusType(dataForm.approvalStatus)" size="small">
{{ dataForm.approvalStatus || '无' }}
</el-tag>
</el-form-item>
<el-form-item label="备注">
<span>{{ dataForm.remarks || '无' }}</span>
</el-form-item>
<el-divider></el-divider>
<el-form-item label="审批结果" prop="result">
<el-radio-group v-model="dataForm.result">
<el-radio label="通过">通过</el-radio>
<el-radio label="不通过">不通过</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="审批意见" prop="opinion">
<el-input v-model="dataForm.opinion" type="textarea" :rows="4" placeholder="请输入审批意见（可选）"
maxlength="500" show-word-limit />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { approveApplication } from '@/api/extend/lqInventory'
export default {
data() {
return {
visible: false,
btnLoading: false,
dataForm: {
id: '',
applicationUserName: '',
applicationStoreName: '',
applicationTime: null,
approvalStatus: '',
remarks: '',
result: '通过',
opinion: ''
},
rules: {
result: [
{ required: true, message: '请选择审批结果', trigger: 'change' }
]
}
}
},
methods: {
init(row) {
this.visible = true
this.dataForm = {
id: row.id || '',
applicationUserName: row.applicationUserName || '',
applicationStoreName: row.applicationStoreName || '',
applicationTime: row.applicationTime || null,
approvalStatus: row.approvalStatus || '',
remarks: row.remarks || '',
result: '通过',
opinion: ''
}
},
dataFormSubmit() {
this.$refs.elForm.validate((valid) => {
if (!valid) {
return false
}
if (this.dataForm.approvalStatus !== '审批中') {
this.$message({
type: 'warning',
message: '只有审批中状态的申请才能进行审批操作'
})
return false
}
this.btnLoading = true
approveApplication(this.dataForm.id, this.dataForm.result, this.dataForm.opinion).then(res => {
this.btnLoading = false
this.$message({
type: 'success',
message: res.msg || '审批成功',
onClose: () => {
this.visible = false
this.$emit('refresh')
}
})
}).catch(() => {
this.btnLoading = false
})
})
},
getStatusType(status) {
const statusMap = {
'待审批': 'info',
'审批中': 'warning',
'已通过': 'success',
'未通过': 'danger',
'已退回': 'info'
}
return statusMap[status] || 'info'
},
formatDateTime(timestamp) {
if (!timestamp) return '无'
const date = new Date(timestamp)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const seconds = String(date.getSeconds()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
margin-bottom: 18px;
}
</style>