294 lines
8.7 KiB
Vue
294 lines
8.7 KiB
Vue
<template>
|
||
<el-dialog title="审核" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
|
||
:close-on-press-escape="false">
|
||
<el-form size="small" :model="form" ref="form">
|
||
<div class="info-wrapper">
|
||
<div class="info-block">
|
||
<div class="info-title">审核状态</div>
|
||
<div class="info-content">
|
||
<div class="text-info">
|
||
<div class="info-item" style="align-items: center;">
|
||
<span class="label">当前状态：</span>
|
||
<el-tag v-if="status == 0" size="small">待审核</el-tag>
|
||
<el-tag v-else-if="status == 1" type="success" size="small">通过</el-tag>
|
||
<el-tag v-else-if="status == 2" type="danger" size="small">未通过</el-tag>
|
||
<el-tag v-else-if="status == 3" type="warning" size="small">已完结</el-tag>
|
||
<el-tag v-else-if="status == 4" type="info" size="small">废除</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="group_id == 1 || group_id == 2" class="info-block">
|
||
<div class="info-title">人员信息</div>
|
||
<div class="info-content">
|
||
<div class="text-info">
|
||
<div class="info-item"><span class="label">名称：</span>{{ form.name }}</div>
|
||
<div class="info-item"><span class="label">手机号：</span>{{ form.card }}</div>
|
||
<div class="info-item"><span class="label">出生日期：</span>{{ form.both }}</div>
|
||
</div>
|
||
<div class="photo-info" v-if="group_id == 1">
|
||
<div class="photo-label">人脸照片</div>
|
||
<el-image v-if="form.face_url" :src="form.face_url" class="face-img" :preview-src-list="[form.face_url]" preview-teleported fit="cover"></el-image>
|
||
<div v-else class="empty-img"><i class="el-icon-picture-outline"></i><span>暂未上传</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="group_id == 3 || group_id == 4">
|
||
<div class="info-block">
|
||
<div class="info-title">子女信息</div>
|
||
<div class="info-content">
|
||
<div class="text-info">
|
||
<div class="info-item"><span class="label">子女名称：</span>{{ form.name }}</div>
|
||
<div class="info-item"><span class="label">子女手机号：</span>{{ form.card }}</div>
|
||
<div class="info-item"><span class="label">子女出生日期：</span>{{ form.both }}</div>
|
||
</div>
|
||
<div class="photo-info">
|
||
<div class="photo-label">子女照片</div>
|
||
<el-image v-if="form.face_url" :src="form.face_url" class="face-img" :preview-src-list="[form.face_url]" preview-teleported fit="cover"></el-image>
|
||
<div v-else class="empty-img"><i class="el-icon-picture-outline"></i><span>暂未上传</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-block">
|
||
<div class="info-title">家长1信息</div>
|
||
<div class="info-content">
|
||
<div class="text-info">
|
||
<div class="info-item"><span class="label">名称：</span>{{ form.name }}</div>
|
||
<div class="info-item"><span class="label">手机号：</span>{{ form.card }}</div>
|
||
<div class="info-item"><span class="label">出生日期：</span>{{ form.both }}</div>
|
||
</div>
|
||
<div class="photo-info">
|
||
<div class="photo-label">照片</div>
|
||
<el-image v-if="form.parent && form.parent[0] && form.parent[0].face_url" :src="form.parent[0].face_url" class="face-img" :preview-src-list="[form.parent[0].face_url]" preview-teleported fit="cover"></el-image>
|
||
<div v-else class="empty-img"><i class="el-icon-picture-outline"></i><span>暂未上传</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<template v-if="group_id == 4">
|
||
<div class="info-block">
|
||
<div class="info-title">家长2信息</div>
|
||
<div class="info-content">
|
||
<div class="text-info">
|
||
<div class="info-item"><span class="label">名称：</span>{{ form.name }}</div>
|
||
<div class="info-item"><span class="label">手机号：</span>{{ form.card }}</div>
|
||
<div class="info-item"><span class="label">出生日期：</span>{{ form.both }}</div>
|
||
</div>
|
||
<div class="photo-info">
|
||
<div class="photo-label">照片</div>
|
||
<el-image v-if="form.parent && form.parent[1] && form.parent[1].face_url" :src="form.parent[1].face_url" class="face-img" :preview-src-list="[form.parent[1].face_url]" preview-teleported fit="cover"></el-image>
|
||
<div v-else class="empty-img"><i class="el-icon-picture-outline"></i><span>暂未上传</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<div class="info-block">
|
||
<div class="info-title">联系人信息</div>
|
||
<div class="info-item"><span class="label">联系方式：</span>{{ form.mobile }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-block" style="margin: 0 10px;" v-if="status == 0 && group_id != 2">
|
||
<div class="info-title">进行审核</div>
|
||
<div class="info-content">
|
||
<div class="text-info">
|
||
<div class="info-item" style="align-items: center;">
|
||
<span class="label">审核状态：</span>
|
||
<el-select v-model="form.status" placeholder="请选择" size="small">
|
||
<el-option label="通过" :value="1"></el-option>
|
||
<el-option label="不通过" :value="2"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible">取 消</el-button>
|
||
<el-button type="primary" @click="review" :loading="loading" v-if="status == 0">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import Upload from '@/components/file/Upload';
|
||
import Uediter from '@/components/UE.vue';
|
||
import VenueApi from '@/api/venue.js';
|
||
import ComboApi from '@/api/combo.js';
|
||
|
||
export default {
|
||
components: {
|
||
Upload,
|
||
Uediter,
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
id: 0,
|
||
mobile: '',
|
||
name: '',
|
||
card: '',
|
||
both: '',
|
||
status: '',
|
||
face_url: '',
|
||
parent: [],
|
||
},
|
||
group_id: '',
|
||
/*左边长度*/
|
||
formLabelWidth: '120px',
|
||
/*是否显示*/
|
||
dialogVisible: false,
|
||
loading: false,
|
||
/*是否上传图片*/
|
||
isupload: false,
|
||
status: 0,
|
||
};
|
||
},
|
||
props: ['open_edit', 'editform'],
|
||
created() {
|
||
this.dialogVisible = this.open_edit;
|
||
this.form.id = this.editform.id;
|
||
this.form.name = this.editform.name;
|
||
this.form.mobile = this.editform.mobile;
|
||
this.form.card = this.editform.card;
|
||
this.form.both = this.editform.both;
|
||
this.form.face_url = this.editform.face_url;
|
||
this.form.group_name = this.editform.group_name;
|
||
this.form.parent = this.editform.parent;
|
||
console.log("🚀 ~ this.form.parent:", this.form.parent)
|
||
this.form.status = this.editform.status == 0 ? '' : this.editform.status;
|
||
this.status = this.form.status
|
||
this.group_id = this.editform.group_id;
|
||
},
|
||
methods: {
|
||
/*关闭弹窗*/
|
||
dialogFormVisible(e) {
|
||
if (e) {
|
||
this.$emit('closeDialog', {
|
||
type: 'success',
|
||
openDialog: false
|
||
})
|
||
} else {
|
||
this.$emit('closeDialog', {
|
||
type: 'error',
|
||
openDialog: false
|
||
})
|
||
}
|
||
},
|
||
|
||
// 审核
|
||
review() {
|
||
let self = this;
|
||
let params = {
|
||
id: self.form.id,
|
||
status: self.form.status
|
||
};
|
||
|
||
self.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
self.loading = true;
|
||
ComboApi.reviewEdit(params).then(data => {
|
||
self.loading = false;
|
||
self.$message({
|
||
message: '操作成功',
|
||
type: 'success'
|
||
});
|
||
self.dialogFormVisible(true);
|
||
}).catch(error => {
|
||
self.loading = false;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.img {
|
||
margin-top: 10px;
|
||
}
|
||
.info-wrapper {
|
||
padding: 0 10px;
|
||
}
|
||
.info-block {
|
||
background: #f8f9fa;
|
||
padding: 15px 20px;
|
||
border-radius: 6px;
|
||
margin-bottom: 20px;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
.info-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
color: #303133;
|
||
border-bottom: 1px solid #ebeef5;
|
||
padding-bottom: 10px;
|
||
}
|
||
.info-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.text-info {
|
||
flex: 1;
|
||
padding-right: 20px;
|
||
}
|
||
.info-item {
|
||
margin-bottom: 12px;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
display: flex;
|
||
line-height: 1.5;
|
||
}
|
||
.info-item .label {
|
||
width: 100px;
|
||
color: #909399;
|
||
flex-shrink: 0;
|
||
}
|
||
.photo-info {
|
||
width: 140px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
}
|
||
.photo-label {
|
||
color: #909399;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
width: 120px;
|
||
}
|
||
.face-img {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
border: 2px solid #fff;
|
||
}
|
||
.empty-img {
|
||
width: 120px;
|
||
height: 120px;
|
||
background: #f0f2f5;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #c0c4cc;
|
||
font-size: 13px;
|
||
border: 1px dashed #dcdfe6;
|
||
}
|
||
.empty-img i {
|
||
font-size: 28px;
|
||
margin-bottom: 8px;
|
||
color: #dcdfe6;
|
||
}
|
||
</style>
|