一、以卡片形式上传、预览、下载文件（下载预览功能没写好）
(1)父组件
<template>
<el-container class="h100">
<el-aside class="h100" width="41rem">
<div class="leftbk">
<div class="tableTitle mt0">
待提交(<span class="tableTitleFont wait">{{ }}</span
>)审批中(<span class="tableTitleFont wait">{{ }}</span
>)
</div>
<el-form :model="leftForm" ref="leftForm" class="leftForm">
<el-col :span="18">
<el-form-item label="提交时间:" prop="appealDate" label-width="100px">
<el-date-picker
v-model=""
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item class="rightButton">
<el-button type="primary" @click="searchLeftForm">查询</el-button>
<el-button plain @click="resetLeftForm">重置</el-button>
</el-form-item>
</el-col>
</el-form>
<el-table :data="tableDataReady" highlight-current-row border height="calc((100% - 12rem)/2)" @row-click="rowClick" ref="readyTable" :cell-class-name="appealStatusClass">
<el-table-column type="index" width="55" label="序号" align="center"> </el-table-column>
<el-table-column property="appealDescribe" label="申请描述" align="center" min-width="75" show-overflow-tooltip></el-table-column>
<el-table-column prop="appealFlag" label="状态" align="center" min-width="80" filter-placement="bottom-end" :formatter="seasonAppealFlagFormat"> </el-table-column>
<el-table-column property="appealCompany" label="申请航司" align="center" min-width="80" show-overflow-tooltip></el-table-column>
<el-table-column property="appealTime" label="提交时间" align="center" min-width="120" :formatter="timeFormat"></el-table-column>
<el-table-column fixed="right" label="操作" width="100" align="center">
<template slot-scope="scope">
<el-link type="primary" @="removeAction()" v-if=" == '0'">删除</el-link>
</template>
</el-table-column>
</el-table>
<div class="tableTitle">
已审批( <span class="tableTitleFont ok">已批复:{{ }}</span
> <span class="tableTitleFont error">被退回:{{ }}</span> )
</div>
<el-form :model="leftBottomForm" ref="leftBottomForm" class="leftForm">
<el-col :span="18">
<el-form-item label="提交时间:" prop="approvalDate" label-width="100px">
<el-date-picker
v-model=""
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item class="rightButton">
<el-button type="primary" @click="searchLeftBottomForm">查询</el-button>
<el-button plain @click="resetLeftBottomForm">重置</el-button>
</el-form-item>
</el-col>
</el-form>
<el-table :data="tableDataResult" highlight-current-row border height="calc((100% - 12rem)/2)" @row-click="rowClick" :cell-class-name="appealStatusClass">
<el-table-column type="index" width="55" label="序号" align="center"> </el-table-column>
<el-table-column property="appealDescribe" label="申请描述" align="center" min-width="75" show-overflow-tooltip></el-table-column>
<el-table-column prop="appealFlag" label="状态" align="center" min-width="80" filter-placement="bottom-end" :formatter="seasonAppealFlagFormat"> </el-table-column>
<el-table-column property="appealCompany" label="申请航司" align="center" min-width="80" show-overflow-tooltip></el-table-column>
<el-table-column property="appealTime" label="提交时间" align="center" min-width="120" :formatter="timeFormat"></el-table-column>
<!-- <el-table-column fixed="right" label="操作" width="100" align="center">
<template slot-scope="scope">
<el-link type="primary" @="removeAction()" v-if=" == '0'">删除</el-link>
</template>
</el-table-column> -->
</el-table>
</div>
</el-aside>
<el-main>
<div class="waitCommit">
<div class="tableTitle">时刻详情</div>
<div class="reAppeal"><el-button type="primary" v-show="selectAppealFlag == '2'" @click="reAppeal()">重新申请</el-button></div>
<el-button type="primary" v-show="couldReceive" class="receiveBtn" @click="receive">取回</el-button>
<div :class="{ approveBg: isAgree, rejectBg: !isAgree }" v-show="approveShow"></div>
</div>
<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
<el-form-item label="描述信息" prop="appealDescribe" label-width="100px">
<el-input v-model="" maxlength="20"></el-input>
</el-form-item>
<el-form-item class="mainForm">
<el-col :span="7">
<el-form-item label="申请航司" prop="icao" label-width="100px">
<el-input v-model="" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="申请时间" prop="appealTime" label-width="100px">
<el-input v-model="" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="申请人" prop="appealBy" label-width="100px">
<el-input v-model="" readonly></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="3" class="addDiv">
<el-button type="primary" @click="addTime">添加</el-button>
</el-col> -->
</el-form-item>
<!-- <el-form-item class="mainForm">
<el-col :span="14">
<el-form-item label="班期" prop="weekly" label-width="100px">
<el-checkbox-group v-model="">
<el-checkbox :label="" v-for="item in weekList" :key="">{{ }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="日期范围" prop="timeRange" label-width="100px">
<el-date-picker v-model="" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions" style="width: 100%"> </el-date-picker>
</el-form-item>
</el-col>
</el-form-item> -->
<!-- <el-form-item label="选择交换航司" prop="nextCompany" label-width="140px">
<el-select v-model="" filterable placeholder="请选择" style="width: 100%" clearable>
<el-option v-for="item in companyList" :key="" :label=" + '/' + " :value=""> </el-option>
</el-select>
</el-form-item> -->
</el-form>
<div>时刻信息</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="momentTime" label="时刻" width="180" align="center"> </el-table-column>
<el-table-column prop="airport" label="机场" align="center" min-width="100"> </el-table-column>
<el-table-column prop="weeklyArrangement" label="班期" min-width="180" align="center"> </el-table-column>
<el-table-column prop="startDate" label="开始日期" width="180" align="center" :formatter="dateFormat"> </el-table-column>
<el-table-column prop="endDate" label="结束日期" width="180" align="center" :formatter="dateFormat"> </el-table-column>
<!-- <el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-link type="primary" @click="deleteRow(scope.$index, tableData)">删除</el-link>
</template>
</el-table-column> -->
</el-table>
<div>说明信息</div>
<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="" resize="none"> </el-input>
<div>文件信息</div>
<!-- 文件上传 -->
<LesUpload @onSuccess="fileUploadSuccess" @onRemoveFile="handleRemove" :fileList="appealFileList"></LesUpload>
<div class="footerDiv" v-show="!haveResult && !couldReceive">
<el-button type="primary" @click="submit">提交</el-button>
<el-button plain @click="reset">重置</el-button>
</div>
</el-main>
<!-- 重新申请，新增 -->
<SeasonTimeAdd
:="seasonTimeAddData"
:fileList="appealFileList"
:seasonTimeAddTableData="tableData"
:="dialogFormVisible"
@handelFormVisible="setFormVisible"
></SeasonTimeAdd>
<!-- 重新申请,归还 -->
<SeasonTimeReturn
:seasonTimeReturnInputData="seasonTimeReturnInputData"
:="tableData"
:fileList="appealFileList"
:="dialogFormReturnVisible"
@handelFormVisible="setFormReturnVisible"
></SeasonTimeReturn>
</el-container>
</template>
<script>
import {
queryAppeal,
pagePubAppeal,
queryAppealFileByAppealUuid,
queryApproveByAppealUuid,
queryImitateByAppealUuid,
updateAppeal,
submitAppeal,
callBackAppeal,
removeAppeal,
} from '@/api/interface/time-manage/';
import LesUpload from '@/components/LesUpload/';
import SeasonTimeAdd from '@/views/time-manage/season-time-add/';
import SeasonTimeReturn from '@/views/time-manage/season-time-return/';
export default {
name: 'SeasonTimeAddAppeal',
components: {
LesUpload,
SeasonTimeAdd,
SeasonTimeReturn,
},
props: {
// 是新增还是归还
appealType: {
type: String,
default: '',
},
},
data() {
return {
id: '',
selectTaskId: '',
// 是否有审批结果的显隐
haveResult: true,
//是否可以回收
couldReceive: false,
isDisable: {
form: true,
},
// // 组件选值列表
// list: {
// season: [],
// company: [],
// },
//左侧申请表单统计数据
staticNum: {
ready: 0,
appealing: 0,
ok: 0,
error: 0,
},
// 表单参数
leftForm: {
appealDate: [],
startDate: '',
stopDate: '',
},
leftBottomForm: {
apppovalDate: [],
startDate: '',
stopDate: '',
},
// 表单参数
form: {
appealCompany: '',
appealCompanyName: '',
appealDescribe: '',
appealTime: '',
appealExplain: '',
appealBy: '',
},
// 待提交
tableDataReady: [],
// 审批中
tableDataWaiting: [],
// 已审批
tableDataResult: [],
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
(() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
(() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
(() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
},
},
],
},
// 右侧表单表格数据
ruleForm: {
appealDescribe: '',
icao: this.$(),
// airport: '',
// weekly: [],
// weeklyArrangement: '',
// timeRange: [],
startDate: '',
endDate: '',
appealExplain: '',
appealBy: '',
appealTime: '',
},
// 周期
weekList: [
{ id: '1', text: '周一' },
{ id: '2', text: '周二' },
{ id: '3', text: '周三' },
{ id: '4', text: '周四' },
{ id: '5', text: '周五' },
{ id: '6', text: '周六' },
{ id: '7', text: '周日' },
],
tableData: [],
appealFileList: [], //文件信息
companyList: [],
approveShow: false, //是否显示审批背景图
isAgree: false, //审批背景图样式
// 选中的行数据状态
selectAppealFlag: '',
seasonTimeAddData: {}, //重新申请传参
dialogFormVisible: false,
bizType: 'MOMENT_ADD',
dialogFormReturnVisible: false, //时刻归还显隐
seasonTimeReturnInputData: {}, // 归还表单数据
};
},
methods: {
// 查询表格
search() {
// 清空右侧所有数据
// 申请时刻信息列表
= [];
// 审批结果表
= [];
// 选中的行数据状态
= '';
// 控制显隐
= false;
// 选中的行数据
= [];
// 选中的数据，描述和说明
= {};
= []; //文件信息
// 是否有审批结果的显隐
= true;
//是否可以回收
= false;
= {
form: true,
};
();
();
// // 获取待提交和审批中
// queryAppeal({ seasonOrDaily: '1', bizType: , preTask: '-1' }).then((res) => {
// if ( == '1') {
// let appealList = ;
// = == null ? [] : ;
// let readyList = ((item) => {
// return == '0';
// });
// this.$set(, 'ready', );
// let waitList = ((item) => {
// return == '1';
// });
// this.$set(, 'appealing', );
// } else {
// = [];
// = {
// ready: 0,
// appealing: 0,
// };
// = false;
// = true;
// = '';
// }
// });
// // 获取已审批记录
// pagePubAppeal({ appealCompany: this.$(), seasonUuid: , seasonOrDaily: '1', bizType: , preTask: '-1' }).then((res) => {
// if ( == '1') {
// let approvalReasult = ;
// = == null ? [] : ;
// let approvalList = ((item) => {
// return != '1' && != '0';
// });
// let tempOk = ((item) => {
// return == '3';
// });
// this.$set(, 'ok', );
// let tempError = ((item) => {
// return == '2';
// });
// this.$set(, 'error', );
// } else {
// = [];
// = 0;
// = 0;
// }
// });
},
getQueryAppeal() {
// 获取待提交和审批中
queryAppeal({ seasonOrDaily: '1', bizType: , preTask: '-1', ... }).then((res) => {
if ( == '1') {
let appealList = ;
= == null ? [] : ;
let readyList = ((item) => {
return == '0';
});
this.$set(, 'ready', );
let waitList = ((item) => {
return == '1';
});
this.$set(, 'appealing', );
} else {
= [];
= {
ready: 0,
appealing: 0,
};
= false;
= true;
= '';
}
});
},
getPagePubAppeal() {
// 获取已审批记录
pagePubAppeal({ appealCompany: this.$(), seasonOrDaily: '1', bizType: , preTask: '-1', ... }).then((res) => {
if ( == '1') {
let approvalReasult = ;
= == null ? [] : ;
let approvalList = ((item) => {
return != '1' && != '0';
});
let tempOk = ((item) => {
return == '3';
});
this.$set(, 'ok', );
let tempError = ((item) => {
return == '2';
});
this.$set(, 'error', );
} else {
= [];
= 0;
= 0;
}
});
},
// 时间渲染
timeFormat(row, column, cellValue, index) {
if (cellValue != null && cellValue != '') {
return (cellValue).format('YYYY-MM-DD HH:mm');
}
},
rowClick(row, column, cell, event) {
= ;
= ;
= ;
= ;
= ;
= ;
// = ;
= ;
= ;
// 是新增还是归还
if ( == 'MOMENT_ADD') {
= row;
} else {
= row;
}
// 显示右侧的同意和驳回背景图
if ( == '2' || == '3') {
= true;
if ( == '2') {
= false;
} else {
= true;
}
} else {
= false;
}
= {
appealDescribe: ,
appealExplain: ,
id: ,
// planId: ,
};
= [];
// 查询右侧顶部信息
queryApproveByAppealUuid({ appealUuid: , seasonOrDaily: '1' }).then((res) => {
// // 如果是待审批
if ( == '1' && && == 0) {
= true;
= false;
= true;
} else {
if ( == '0') {
= false;
= false;
= false;
} else {
= false;
= true;
= true;
}
}
= ;
});
// 查询右侧文件信息
queryAppealFileByAppealUuid({ appealUuid: , seasonOrDaily: '1' }).then((res) => {
= == null ? [] : ;
((element, index) => {
this.$set([index], 'name', );
});
});
// 查询右侧表格数据
queryImitateByAppealUuid({ appealUuid: , seasonOrDaily: '1' }).then((res) => {
= ;
// 选中的数据
= ;
});
},
// 日期渲染
dateFormat(row, column, cellValue, index) {
if (cellValue != null && cellValue != '') {
return (cellValue).format('YYYY-MM-DD');
}
},
// 重新申请
reAppeal() {
if ( == 'MOMENT_ADD') {
= true;
} else {
= true;
}
},
setDialogVisible(val) {
= ;
();
},
// 取回
receive() {
this.$secondConfirm('确定取回吗？').then((res) => {
if (res) {
callBackAppeal({ id: , taskId: , bizType: , seasonOrDaily: '1' }).then((res) => {
if ( == 1) {
this.$message({
message: '取回成功!',
type: 'success',
showClose: true,
});
();
}
});
} else {
this.$message({
message: '已取消取回!',
type: 'info',
showClose: true,
});
}
});
},
// // 根据
// queryBySeason() {
// ();
// },
submit() {
let obj = {};
= ;
// = this.$();
// = this.$();
((element, index) => {
this.$set([index], 'fileName', );
});
= == 0 ? [] : ;
= ;
= ;
= ;
= '1';
= ;
this.$secondConfirm('确认提交吗？').then((res) => {
if (res) {
updateAppeal(obj).then((res) => {
if ( == 1) {
// ();
} else {
this.$message({
message: ,
type: 'warning',
});
}
});
let tempObj = {};
= ;
= '1';
= ;
= ;
submitAppeal(tempObj).then((res) => {
if ( == '1') {
this.$message({
message: '提交成功!',
type: 'success',
showClose: true,
});
();
} else {
this.$message({
message: ,
type: 'warning',
showClose: true,
});
}
});
} else {
this.$message({
message: '已取消',
type: 'info',
showClose: true,
});
}
});
},
reset() {
= '';
= '';
},
// 文件删除
handleRemove(file, fileList) {
= fileList;
},
// 文件上传成功
fileUploadSuccess(response, file, fileList) {
if ( == '1') {
([0]);
} else {
this.$message({
showClose: true,
message: '上传失败',
type: 'error',
});
}
},
// 查询，重置
searchLeftForm() {
if ( == 0) {
= '';
= '';
} else {
= [0] + ' 00:00:00';
= [1] + ' 23:59:59';
}
();
},
// 重置
resetLeftForm() {
this.$();
();
},
searchLeftBottomForm() {
if ( == 0) {
= '';
= '';
} else {
= [0] + ' 00:00:00';
= [1] + ' 23:59:59';
}
();
},
resetLeftBottomForm() {
this.$();
();
},
approveFlagFormat(row, column, cellValue, index) {
if (cellValue != null && cellValue != '') {
return this.$(cellValue, );
} else {
return '';
}
},
seasonAppealFlagFormat(row, column, cellValue, index) {
if (cellValue) {
return this.$(cellValue, );
} else {
return '';
}
},
// 审批结果列颜色渲染
approveFlagClass({ row, column, rowIndex, columnIndex }) {
if ( == 'approveFlag') {
if ( == '0') {
return 'approvalError';
} else {
return 'approvalOk';
}
}
},
// 申诉情况列颜色渲染
appealStatusClass({ row, column, rowIndex, columnIndex }) {
if ( == 'appealFlag') {
switch () {
case '0':
case '1':
return 'appealWait';
break;
case '2':
return 'appealError';
break;
case '3':
return 'appealOk';
break;
}
}
},
//将时间转为标准yyyy-MM-dd类型
formatterDate(stringDate) {
let formatDate = '';
if (stringDate) {
formatDate = (stringDate).format('YYYY-MM-DD');
//formatDate = (0, 4) + '-' + (4, 2) + '-' + (6, 2);
}
return formatDate;
},
// 删除
removeAction(row) {
this.$secondConfirm('确认删除吗？').then((res) => {
if (res) {
removeAppeal({ appealUuid: , seasonOrDaily: '1', bizType: }).then((res) => {
if ( == '1') {
this.$message({
message: '删除成功!',
type: 'success',
showClose: true,
});
();
}
});
} else {
this.$message({
message: '已取消!',
type: 'info',
showClose: true,
});
}
});
},
// 新增回调
setFormVisible(val) {
= ;
},
// 时刻归还回调
setFormReturnVisible(val) {
= ;
},
},
async mounted() {
await this.$({ type: 'seasonAppealFlag' }).then((res) => {
= res;
});
await this.$({ type: 'approveFlag' }).then((res) => {
= res;
});
this.$().then((res) => {
= res;
});
if ( == 'timeReturn') {
= 'MOMENT_RETURN';
} else {
= 'MOMENT_ADD';
}
();
// 收审批消息刷页面
let that = this;
('message', function (ev) {
let topic = ;
if (( = 'MOMENT_RETURN')) {
if (topic == 'MOMENT_RETURN_SAVE' || topic == 'MOMENT_RETURN_PUB' || topic == 'MOMENT_RETURN_CALLBACK' || topic == 'MOMENT_RETURN_APPROVE') {
();
}
} else {
if (topic == 'MOMENT_ADD_SAVE' || topic == 'MOMENT_ADD_PUB' || topic == 'MOMENT_ADD_CALLBACK' || topic == 'MOMENT_ADD_APPROVE') {
();
}
}
});
},
};
</script>
<style scoped>
.bk {
background-color: #ffffff;
width: 100%;
min-height: 100%;
padding: 15px;
}
.leftbk {
background-color: #ffffff;
width: 100%;
height: 100%;
padding: 0px 15px 0px 0px;
}
.el-card__body,
.el-main {
padding: 0px;
padding-left: 20px;
}
.h1090 {
height: 1090px;
}
.titleTip {
font-size: 18px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: #546a79;
line-height: 31px;
letter-spacing: 0.45px;
/* margin-top: 16px; */
margin-bottom: 8px;
}
.m0 {
margin-top: 0;
}
.el-input--medium {
font-size: 16px;
}
.el-textarea__inner {
line-height: 2;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #546a79;
line-height: 31px;
letter-spacing: 0.4px;
}
.el-table >>> .appealOk .cell {
color: #89b336;
}
.el-table >>> .appealWait .cell {
color: #b38e36;
}
.el-table >>> .appealError .cell {
color: #cc2c00;
}
.el-table >>> .approvalOk .cell {
color: #00cd22;
}
.el-table >>> .approvalError .cell {
color: #cd3f00;
}
.tableTitle {
/* margin-top: 24px;
margin-bottom: 16px; */
line-height: 40px;
font-size: 24px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
color: #0074cd;
line-height: 32px;
letter-spacing: 0.6px;
}
.tableTitleFont {
font-size: 24px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
line-height: 31px;
letter-spacing: 0.6px;
}
.wait {
color: #e5a117;
}
.ok {
color: #00cd22;
}
.error {
color: #cd3f00;
}
.waitCommit {
position: relative;
margin-top: 0px;
display: flex;
height: 40px;
justify-content: space-between;
}
/* .el-col >>> .el-form-item {
width: 100%;
}
.el-form-item >>> .el-form-item__content {
width: calc(100% - 4.5rem);
}
.el-form-item__content .el-select {
width: calc(100% - 24px);
}
.el-form-item__content .el-date-editor {
width: calc(100% - 24px);
}
.el-form-item__content >>> .el-input {
width: 100%;
}
.dialog-footer {
text-align: center;
} */
.mt0 {
margin-top: 0px;
}
.btn-footer {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.receiveBtn {
float: right;
margin-bottom: 5px;
}
.approveBg {
position: absolute;
top: 0px;
right: 0px;
width: 197px;
height: 141px;
background: url('../../.././assets/flight-schedule/seasonal-time-adjust-company/') no-repeat 0px 0px;
background-size: 197px 141px;
}
.rejectBg {
position: absolute;
top: 0px;
right: 0px;
width: 197px;
height: 141px;
background: url('../../.././assets/flight-schedule/seasonal-time-adjust-company/') no-repeat 0px 0px;
background-size: 197px 141px;
}
/* .el-form >>> .el-date-editor {
width: 100%;
} */
.areaLeftClass >>> .el-textarea__inner {
height: 80px;
}
.checkPop {
position: absolute;
display: flex;
flex-direction: column;
border: 1px solid #e6e6e6;
background: #ffffff;
border-radius: 4px;
width: 100px;
z-index: 999;
}
.checkPop .el-checkbox {
padding: 8px 10px;
width: 100%;
border-bottom: 1px solid #e6e6e6;
}
.checkPop .el-checkbox:hover {
background: #e6eaee;
}
.colRight {
text-align: right;
}
.rightButton {
float: right;
}
.leftForm >>> .el-form-item {
margin-bottom: 10px;
margin-top: 10px;
}
.reAppeal {
z-index: 10;
}
.el-form >>> .el-form-item {
margin-bottom: 10px;
}
.cell-add {
color: #59b37d;
}
.cell-before {
color: #66a0cc;
}
.cell-after {
color: #e2a778;
}
.cell-del {
color: #fa1919;
}
.footerDiv {
text-align: center;
}
.mainForm >>> .el-form-item {
margin-bottom: 0px;
}
</style>
主要el-upload，组件名LesUpload（作为子组件被引入上方代码中）：
<template>
<div>
<!-- 文件上传 -->
<el-upload class="avatar-uploader" :class="{ uploadDisabled: disabled }" list-type="picture-card" :action="uploadAction" :before-upload="beforeUpload" :limit="limit" :on-exceed="handleExceed" :on-success="fileUploadSuccess" :file-list="fileList" :disabled="disabled">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<!-- <img class="el-upload-list__item-thumbnail" :src="" alt="" /> -->
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-delete" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
<span class="fileName">{{ || }}</span>
</div>
</el-upload>
<el-dialog :="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<iframe style="display: none" frameborder="0"></iframe>
</div>
</template>
<script>
import globalFunction from '@/utils/';
export default {
name: 'LesUpload',
props: {
fileList: {
type: Array,
default() {
return [];
},
},
limit: {
type: Number,
default: 5,
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
uploadAction: ,
dialogImageUrl: '',
dialogVisible: false,
officeFileType: ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx', 'csv'],
downLoadSrc: '',
successFileList: [],
};
},
mounted() {},
methods: {
beforeUpload(file) {
const isLt2M = / 1024 / 1024 <= 5;
if (!isLt2M) {
this.$('上传文件大小不能超过5MB!');
}
return isLt2M;
},
// 文件删除
handleRemove(file) {
this.$secondConfirm('确认删除此文件吗？').then((res) => {
if (res) {
((value, index, array) => {
if ( == ) {
(index, 1);
}
});
this.$emit('onRemoveFile', file, );
this.$message({
showClose: true,
message: '删除成功',
type: 'success',
});
} else {
this.$message({
showClose: true,
message: '已取消',
type: 'info',
});
}
});
},
handleExceed(files, fileList) {
this.$(`当前限制选择${}个文件，本次选择了 ${} 个文件，共选择了 ${ + } 个文件`);
},
// 文件上传成功
fileUploadSuccess(response, file, fileList) {
= [...fileList];
();
([0]);
this.$emit('onSuccess', response, file, fileList);
},
// 预览
handlePictureCardPreview(file) {
let extendName = '';
if () {
extendName = (('.') + 1);
} else {
extendName = (('.') + 1);
}
// 若当前点击项是图片
const PIC = ['png', 'jpg', 'jpeg', 'gif', 'svg'];
if ((())) {
= + ;
= true;
}
// 若当前点击项是可以使用office在线预览的
if ([..., 'pdf'].includes(())) {
(file);
}
// 若当前点击项是代码或文本文件
const CODE = ['html', 'js', 'css', 'json', 'c', 'java', 'txt'];
if ((())) {
((file), '_blank');
}
},
// 下载
handleDownload(file) {
('iframe').src = + ;
},
},
};
</script>
<style scoped>
.avatar-uploader >>> .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 80px;
height: 80px;
line-height: 80px;
}
.avatar-uploader >>> .el-upload:hover {
border-color: #409eff;
}
/*el-upload上传文件*/
.avatar-uploader >>> .el-upload-list__item {
background: url('../../assets/fileUpload/') no-repeat center 10px;
width: 80px;
height: 80px;
background-size: 48px 48px;
}
.avatar-uploader >>> .el-upload-list__item-name {
width: 80px;
position: absolute;
left: 0px;
bottom: 0px;
display: block;
font-size: 12px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #585858;
}
.avatar-uploader >>> .el-upload-list__item-name [class^='el-icon'] {
display: none;
}
.fileName {
width: 100%;
font-size: 12px;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
bottom: 0px;
text-align: center;
}
.avatar-uploader >>> .el-upload-list--picture-card .el-upload-list__item-actions span + span {
margin-left: 0px;
}
.avatar-uploader >>> .el-upload-list--picture-card .el-upload-list__item-actions {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.uploadDisabled >>> .el-upload--picture-card {
display: none;
}
</style>
二、以按钮的形式上传、预览、下载文件（功能都能用）
需求：（1）点击新增按钮可以上传文件
（2）双击table某一行能够查看数据（包括上传的文件，有下载和预览功能）
（3）点击编辑，可以修改文件（就是重新上传类代码就是需求一）
父组件代码（包括新增，编辑按钮这些）：
<!--
@Author: jingtong
@Description: 合格证书管理
@Date: 2023-03-13 14:59:22
* @LastEditTime: 2023-09-06 15:45:16
-->
<template>
<el-container class="train-plan-index">
<el-header>
<el-row>
<el-col :span="24">
<el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
<el-form-item label="姓名" prop="studentName">
<el-input v-model="" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="培训项目" prop="projName">
<el-select v-model="" clearable filterable>
<el-option v-for="item in planIdList" :key="" :label="" :value=""></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onQuery">查询</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row v-show="operateBtnShow">
<el-col :span="24">
<el-button type="primary" @click="addRowData">新增</el-button>
<el-button type="primary" class="operBtn" size="small" @click="importExcel"> 导入 </el-button>
<el-button type="primary" @click="exportRowData">导出</el-button>
<iframe ref="exportIframe" style="display: none"></iframe>
</el-col>
</el-row>
</el-header>
<el-main>
<el-table
:data="tableData"
border
style="width: 100%"
stripe
height="calc(100% - 40px)"
:default-sort="{ prop: 'saveTime', order: 'descending' }"
@sort-change="onSortChanged"
@row-dblclick="onTableDblclick"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="uuid"
default-expand-all
>
<!-- 非树状图 -->
<!-- <el-table-column type="index" label="序号" align="center" width="60" :index="(index) => this.$(index, , )"> </el-table-column>
<el-table-column prop="studentName" label="姓名" align="center" width="150"> </el-table-column>
<el-table-column prop="sex" label="性别" align="center" :formatter="onRendersex" width="100"> </el-table-column>
<el-table-column prop="idCard" label="身份证号码" align="center"> </el-table-column>
<el-table-column prop="workUnit" label="工作单位" align="center" width="150"> </el-table-column>
<el-table-column prop="projName" label="培训项目" align="center" width="180"> </el-table-column>
<el-table-column prop="trainId" label="培训编号" align="center"> </el-table-column>
<el-table-column prop="certNo" label="证书编号" align="center" width="200"> </el-table-column>
<el-table-column prop="isReceived" label="是否领取" align="center"> </el-table-column>
<el-table-column prop="receiver" label="领取人" align="center"> </el-table-column>
<el-table-column label="操作" align="center" width="240" v-if="operateBtnShow">
<template slot-scope="scope">
<el-button type="primary" @click="updateRowData()">编辑</el-button>
<el-button type="primary" @click="removeRowData()">删除</el-button>
</template>
</el-table-column> -->
<!-- 树状图 -->
<el-table-column prop="projName" label="培训项目" align="center" width="180"> </el-table-column>
<el-table-column label="参与人信息" align="center">
<el-table-column prop="studentName" label="姓名" align="center" width="150"> </el-table-column>
<el-table-column prop="sex" label="性别" align="center" :formatter="onRendersex" width="100"> </el-table-column>
<el-table-column prop="idCard" label="身份证号码" align="center"> </el-table-column>
<el-table-column prop="workUnit" label="工作单位" align="center" width="150"> </el-table-column>
<el-table-column prop="trainId" label="培训编号" align="center"> </el-table-column>
<el-table-column prop="certNo" label="证书编号" align="center" width="200"> </el-table-column>
<el-table-column prop="isReceived" label="是否领取" align="center"> </el-table-column>
<el-table-column prop="receiver" label="领取人" align="center"> </el-table-column>
</el-table-column>
<el-table-column label="操作" align="center" width="240" v-if="operateBtnShow">
<template slot-scope="scope">
<div v-if=" !== '0'">
<el-button type="primary" @click="updateRowData()">编辑</el-button>
<el-button type="primary" @click="removeRowData()">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<pagination :total="total" :="" :="" @pagination="onQuery" />
</el-main>
<!-- 新增/编辑合格证书 -->
<AddTrainCert :="selectedRow" :htmlFlag="htmlFlag" :="dialogFormVisible" @handleDialogVisible="setFormVisible"></AddTrainCert>
<!-- 导入 -->
<ImportStudent :title="title" :templateName="templateName" :="importExcelVisible" @onImportDlgClose="setImportDlgVisible"></ImportStudent>
</el-container>
</template>
<script>
import pagination from '@/components/Pagination';
import AddTrainCert from '@/views/eams/trainCert/trainCert-add';
import ImportStudent from '@/views/eams/importDlg';
import { pageTrainCert, removeTrainCert, importTrainCert } from '@/api/eams/';
import { listBizCodeByType } from '@/api/eams/';
import { listTrainPlan } from '@/api/eams/';
export default {
name: 'trainCert',
components: { pagination, AddTrainCert, ImportStudent },
data() {
return {
planIdList: null,
sexList: [],
projNameList: [], // projNameList
isReceivedList: [],
form: {
studentNo: '',
studentName: '',
projName: '',
sortField: '', //排序字段
sortOrder: '', //排序方向
pageIndex: 0, //页数
pageSize: 30, //每页数量
},
total: 0, //总数
tableData: [],
// 传递给子组件数据
htmlFlag: 'add',
selectedRow: {},
dialogFormVisible: false, //新增合格证书窗口
operateBtnShow: false, //证书新增、导入操作
//导入
file: null, //选取的导入文件
fileList: [], //文件列表
importExcelVisible: false, //导入弹窗
title: '导入合格证书', //导入对话框标题
templateName: '培训合格证书导入模板.xlsx', //模板名称
};
},
mounted() {
//教务室的人可新增、导入合格证书
let groupName = this.$();
if (('教务室') != -1) {
= true;
}
//查询性别列表
listBizCodeByType({ type: 'sex_type' }).then((res) => {
= ;
});
//查询是否领取
listBizCodeByType({ type: 'yes_or_no' }).then((res) => {
= ;
});
listTrainPlan().then((res) => {
= ;
});
//查询
();
},
methods: {
// 查询
onQuery() {
var param = ();
pageTrainCert(param).then((res) => {
//pageTrainee
= ? : [];
= ()
= ();
= ;
});
},
//查询条件
getQueryCondition() {
var param = { ... };
return param;
},
// 重置
resetForm() {
this.$();
();
},
// 新增
addRowData() {
= true;
= {};
= 'add';
},
// 修改
updateRowData(row) {
= row;
= 'update';
= true;
},
// 删除数据
removeRowData(uuid) {
this.$confirm('确认删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
removeTrainCert({ uuid: uuid }).then((res) => {
if () {
this.$message({
type: 'success',
message: '删除成功',
});
//刷新
();
} else {
this.$message({
type: 'error',
message: '删除失败',
});
}
});
})
.catch(() => {
this.$message({
type: 'success',
message: '已取消删除',
showClose: true,
});
});
},
//导出
exportRowData() {
//获取查询条件
var vdata = ();
// 将排序字段驼峰转大写下划线
= this.$();
this.$(
'src',
+ '/les/excel/back/export?serviceName=trainCertExport&title=' + encodeURI('合格证书导出') + '&vars=' + encodeURI((vdata))
);
},
// 合格证书关闭弹窗回调
setFormVisible(val) {
= ;
();
},
// 导入
importExcel() {
= true;
},
// 导入对话框关闭后回调
setImportDlgVisible(obj) {
= ;
= ;
();
},
//导入
onSureImport() {
if (!this.$()) {
this.$('支持导入文件格式:xls、xlsx!');
//需清空文件列表
// this.$();
return;
}
var param = new FormData();
('file', );
importTrainCert(param).then((res) => {
if () {
this.$message({
type: 'success',
message: '导入成功',
});
();
} else {
this.$message({
type: 'error',
message: '格式不正确',
});
}
});
//需清空文件列表
// this.$();
},
//表格排序
onSortChanged(column) {
var order = ;
= ;
= order
? order === 'descending' // 第一个问号：order不为空
? 'desc'
: 'asc'
: '';
();
},
//双击表格行
onTableDblclick(row) {
= 'look';
= row;
= true;
if( == '0'){
= false;
}
},
//表格渲染日期
onRenderDate(row, column, cellValue) {
return this.$(cellValue, '{y}-{m}-{d}');
},
//表格渲染时间
onRenderTime(row, column, cellValue) {
return this.$(cellValue, '{y}-{m}-{d} {h}:{i}');
},
//渲染性别
onRendersex(row, column, cellValue) {
return this.$(cellValue, );
},
//渲染是否接种新冠疫苗
onRenderisReceived(row, column, cellValue) {
return this.$(cellValue, );
},
//渲染专业
onRenderprojName(row, column, cellValue) {
return this.$(cellValue, );
},
// 数据预处理（主要是因为没有fatherId不能转树状结构）
addFatherId(data) {
let map = {};
if (!(data)) {
return [];
}
((item) => {
// 如果projId是第一次出现，就给data添加节点的父元素
if (!map[]) {
map[] = ;
({
uuid:,
pid:'0',
projName: + '(' + + ')'
})
}
});
return data;
},
// 数组转树形结构
toTree(data) {
let result = [];
let map = {};
if (!(data)) {
//验证data是不是数组类型
return [];
}
((item) => {
map[] = item;
});
((item) => {
let parent = map[];
if (parent) {
= '';
( || ( = [])).push(item);
} else {
(item);
}
});
return result;
},
},
};
</script>
<style scoped>
.train-plan-index .el-header {
height: auto !important;
}
.upload-plan {
display: inline-block;
margin: 0px 10px;
}
</style>
el-upload代码：
<template>
<div>
<el-dialog :title="title" class="stuinfo-add" :="visible" @opened="openInit" @close="closeDialog" width="845px" :close-on-click-modal="false" v-el-drag-dialog>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm" :disabled="formDisabled">
<el-form-item label="uuid" prop="uuid" v-show="false">
<el-input v-model=""></el-input>
</el-form-item>
<el-row>
<el-col>
<el-form-item label="培训项目" prop="projId">
<el-select v-model="" @change="onProjIdChanged">
<el-option v-for="item in projIdList" :key="" :label="" :value=""></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="学员" prop="studentId">
<el-select v-model="">
<el-option v-for="item in studentIdList" :key="" :label="" :value=""></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="证书编号" prop="certNo">
<el-input v-model="" maxlength="20"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="24">
<el-form-item label="是否领取" prop="isReceived">
<el-radio-group v-model="">
<el-radio v-for="item in isReceivedList" :key="" :label="">{{ }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>-->
<el-row>
<el-col :span="24">
<el-form-item label="合格证" prop="fileId">
<el-upload ref="upload" class="upload-demo" :action="uploadPath" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :auto-upload="false" :on-success="handleSuccess" :on-change="handleChange">
<el-button size="small" type="primary" v-if="htmlFlag == 'add' || htmlFlag == 'update'">点击上传</el-button>
<el-button size="small" type="primary" v-if="htmlFlag == 'look' || htmlFlag == 'audit'" @click="downloadFile" :disabled="false">点击下载</el-button>
<el-button size="small" type="primary" v-if="htmlFlag == 'look' || htmlFlag == 'audit'" @click="viewCourseWare" :disabled="false">点击预览</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="领取人" prop="receiver">
<!--学员-->
<el-select v-model="">
<el-option v-for="item in studentIdList" :key="" :label="" :value=""></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm()" v-if="htmlFlag!='look'">确定</el-button>
<el-button @click="cancelForm()">{{htmlFlag!='look'?'取消':'关闭'}}</el-button>
</div>
</el-dialog>
<!-- 文件下载的iframe -->
<iframe : style="display: none" v-for="(item, index) in downloadList" :key="'download' + index"></iframe>
<el-dialog title="在线预览培训资料" :="viewCoursewareVisible" class="view-dialog" append-to-body>
<iframe style="width: 100%; height: 100%; border: none" :src="viewFileSrc1"></iframe>
</el-dialog>
</div>
</template>
<script>
import { saveTrainCert, updateTrainCert, listTrainCert } from '@/api/eams/';
import { listTrainPlan, listStudentByPlanId } from '@/api/eams/';
import { listBizCodeByType } from '@/api/eams/';
let Base64 = require('js-base64').Base64;
export default {
name: 'trainPlanData',
props: {
dialogFormVisible: {
required: true,
type: Boolean,
},
updateData: {
type: Object,
default() {
return {};
},
},
htmlFlag: {
type: String,
default: 'add',
},
},
data() {
return {
title: '新增合格证书',
studentIdList: [],
planCourseIdList: [],
receiverList: [],
isReceivedList: [],
projIdList: [],
formDisabled: false, //表单是否禁用
ruleForm: {
uuid: '',
studentId: '',
projId: '',
receiver: '',
certNo: '',
isReceived: '',
fileId: '',
fileName: '',
// processInstanceId: '', //流程实例id
},
appealFileList:[],
photoAction: ,
imageUrl: '',
// 校验
rules: {
projId: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
},
// 操作文件
uploadPath: , //上传路径
fileList: [],
fidList: [], //上传的文件id列表
fileNameList: [], //上传到文件名称列表
downloadList: [], //下载列表
viewCoursewareVisible: false, //预览附件窗口
viewFileSrc1: '', //预览文件src
};
},
computed: {
visible: {
get() {
return ;
},
set(val) {
this.$emit('update:dialogFormVisible', val);
},
},
},
mounted() {
listTrainPlan().then((res) => {
= ;
});
listTrainCert().then((res) => {
// POST /train/plan/listTraineeByPlanId POST /train/plan/listStudentByPlanId
= ;
});
//查询是否领取
listBizCodeByType({ type: 'yes_or_no' }).then((res) => {
= ;
});
},
methods: {
//初始化
openInit() {
();
= false;
if ( == 'update') {
= '修改合格证书';
} else if ( == 'look') {
= '查看合格证书';
= true;
} else if ( == 'add') {
= '新增合格证书';
}
if ( != 'add') {
// = { ... };
// = [, ];
= + ;
(, (res) => {
= { ... };
= [, ];
});
}
//课程资料赋值
= []
if () {
var fileNameList = (',');
((item) => {
({ name: item });
});
}
},
//关闭窗口
closeDialog() {
// 清空表单
this.$();
// 清除校验
this.$();
},
// 触发父页面方法
hideDialog() {
this.$emit('handleDialogVisible', { dialogFormVisible: false });
},
// 提交
submitForm() {
this.$((valid) => {
if (valid) {
//先判断是否有附件,如果有先上传附件,然后保存或者更新成绩分析表
if () {
= [];
}
if (! && > 0) {
();
} else {
();
}
} else {
return false;
}
})
},
//上传至文件服务器
submitUpload() {
if ( < 0) {
this.$message({
type: 'warning',
message: '请选择文件',
});
return;
}
if () {
//原有文件，无需再次上传文件，直接提交
//修改
({ ... });
} else {
//新增文件，需提交文件
this.$();
}
},
//新增或修改计划
addOrUpdateTrainPlan() {
var param = { ... };
if ( == 'add') {
//新增
saveTrainCert(param).then((res) => {
if ( == '1') {
var code = ;
if (code == '1') {
this.$message({
type: 'success',
message: '新增合格证书成功',
});
//刷新
this.$emit('handleDialogVisible', false);
} else {
this.$message({
type: 'warning',
message: ,
});
}
} else {
this.$message({
type: 'error',
message: '新增合格证书失败',
})
}
});
} else {
//修改
updateTrainCert(param).then((res) => {
if ( == '1') {
var code = ;
if (code == '1') {
this.$message({
type: 'success',
message: '修改合格证书成功',
});
//刷新
this.$emit('handleDialogVisible', false);
} else {
this.$message({
type: 'warning',
message: ,
});
}
} else {
this.$message({
type: 'error',
message: '修改合格证书失败',
})
}
});
}
},
// 取消
cancelForm() {
= false;
},
//培训项目值改变时
onProjIdChanged(value, callback) {
listStudentByPlanId({ planId: value }).then((res) => {
var data = ;
if (data) {
= data;
} else {
= [];
}
if (callback) {
callback();
}
});
},
// --------------------------------操作文件-------------------------------
//文件移除
handleRemove(file, fileList) {
= fileList;
if (! || > 0) {
this.$('fileId');
}
= '';
= '';
},
//移除文件前
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${}？`);
},
//定义超出限制时的行为
handleExceed(files, fileList) {
this.$(`当前限制选择 1 个文件`);
},
//文件状态改变时的钩子
handleChange(file, fileList) {
= fileList;
if ( && > 0) {
this.$('fileId');
}
},
//上传成功回调
handleSuccess(response, file, fileList) {
this.$message({
type: 'success',
message: '上传成功',
})
// 清空 fidList和fileNameList，然后添加新的 fid
// 没有这个的话，在修改页面点击多次重新上传，查看的时候会有多个
= [];
= [];
([0].fid);
([0].name);
()
()
if ( == ) {
= (',');
= (',');
();
}
},
//下载
downloadFile() {
var fileId = ;
= [];
if (fileId) {
= (',');
this.$nextTick(() => {
((item, index) => {
('downloadIframeSon' + index).src = + item;
});
});
}
},
//预览
viewCourseWare() {
var row = { fileId: , fileName: };
this.viewFileSrc1 = '';
var fileIdList = (',');
var fileNameList = (',');
for (let i = 0; i < ; i++) {
let url = + '/demo/' + fileNameList[i];
= true;
this['viewFileSrc' + (i + 1)] = + '?url=' + encodeURIComponent((url)) + '&fid=' + fileIdList[i];
}
},
},
};
</script>
<style scoped>
.stuinfo-add >>> .-input {
width: 100%;
}
.stuinfo-add >>> .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.stuinfo-add >>> .avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.stuinfo-add >>> .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.stuinfo-add >>> .avatar {
width: 178px;
height: 178px;
display: block;
}
</style>