使用el-upload實(shí)現(xiàn)文件上傳方式(包括預(yù)覽,下載)
更新時(shí)間：2025年11月22日 14:04:35 作者：Rrar
該文章介紹了兩種文件上傳、預(yù)覽和下載的方法,分別是通過卡片形式和按鈕形式,卡片形式中的下載和預(yù)覽功能尚未完善,父組件使用了el-upload組件,可以實(shí)現(xiàn)新增、編輯和查看文件的功能
一、以卡片形式上傳、預(yù)覽、下載文件（下載預(yù)覽功能沒寫好）
父組件
<template>
<el-container class="h100">
<el-aside class="h100" width="41rem">
<div class="leftbk">
<div class="tableTitle mt0">
待提交(<span class="tableTitleFont wait">{{ staticNum.ready }}</span
>)審批中(<span class="tableTitleFont wait">{{ staticNum.appealing }}</span
>)
</div>
<el-form :model="leftForm" ref="leftForm" class="leftForm">
<el-col :span="18">
<el-form-item label="提交時(shí)間:" prop="appealDate" label-width="100px">
<el-date-picker
v-model="leftForm.appealDate"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
: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="序號(hào)" align="center"> </el-table-column>
<el-table-column property="appealDescribe" label="申請(qǐng)描述" align="center" min-width="75" show-overflow-tooltip></el-table-column>
<el-table-column prop="appealFlag" label="狀態(tài)" align="center" min-width="80" filter-placement="bottom-end" :formatter="seasonAppealFlagFormat"> </el-table-column>
<el-table-column property="appealCompany" label="申請(qǐng)航司" align="center" min-width="80" show-overflow-tooltip></el-table-column>
<el-table-column property="appealTime" label="提交時(shí)間" 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" @click.stop="removeAction(scope.row)" v-if="scope.row.appealFlag == '0'">刪除</el-link>
</template>
</el-table-column>
</el-table>
<div class="tableTitle">
已審批( <span class="tableTitleFont ok">已批復(fù):{{ staticNum.ok }}</span
> <span class="tableTitleFont error">被退回:{{ staticNum.error }}</span> )
</div>
<el-form :model="leftBottomForm" ref="leftBottomForm" class="leftForm">
<el-col :span="18">
<el-form-item label="提交時(shí)間:" prop="approvalDate" label-width="100px">
<el-date-picker
v-model="leftBottomForm.approvalDate"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
: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="序號(hào)" align="center"> </el-table-column>
<el-table-column property="appealDescribe" label="申請(qǐng)描述" align="center" min-width="75" show-overflow-tooltip></el-table-column>
<el-table-column prop="appealFlag" label="狀態(tài)" align="center" min-width="80" filter-placement="bottom-end" :formatter="seasonAppealFlagFormat"> </el-table-column>
<el-table-column property="appealCompany" label="申請(qǐng)航司" align="center" min-width="80" show-overflow-tooltip></el-table-column>
<el-table-column property="appealTime" label="提交時(shí)間" 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" @click.stop="removeAction(scope.row)" v-if="scope.row.appealFlag == '0'">刪除</el-link>
</template>
</el-table-column> -->
</el-table>
</div>
</el-aside>
<el-main>
<div class="waitCommit">
<div class="tableTitle">時(shí)刻詳情</div>
<div class="reAppeal"><el-button type="primary" v-show="selectAppealFlag == '2'" @click="reAppeal()">重新申請(qǐng)</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="ruleForm.appealDescribe" maxlength="20"></el-input>
</el-form-item>
<el-form-item class="mainForm">
<el-col :span="7">
<el-form-item label="申請(qǐng)航司" prop="icao" label-width="100px">
<el-input v-model="ruleForm.icao" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="申請(qǐng)時(shí)間" prop="appealTime" label-width="100px">
<el-input v-model="ruleForm.appealTime" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="申請(qǐng)人" prop="appealBy" label-width="100px">
<el-input v-model="ruleForm.appealBy" 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="ruleForm.weekly">
<el-checkbox :label="item.id" v-for="item in weekList" :key="item.id">{{ item.text }}</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="ruleForm.timeRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期" 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="ruleForm.nextCompany" filterable placeholder="請(qǐng)選擇" style="width: 100%" clearable>
<el-option v-for="item in companyList" :key="item.icao" :label="item.icao + '/' + item.nameCn" :value="item.icao"> </el-option>
</el-select>
</el-form-item> -->
</el-form>
<div>時(shí)刻信息</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="momentTime" label="時(shí)刻" width="180" align="center"> </el-table-column>
<el-table-column prop="airport" label="機(jī)場" 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="結(jié)束日期" 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="請(qǐng)輸入內(nèi)容" v-model="ruleForm.appealExplain" 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>
<!-- 重新申請(qǐng)，新增 -->
<SeasonTimeAdd
:seasonTimeAddData.sync="seasonTimeAddData"
:fileList="appealFileList"
:seasonTimeAddTableData="tableData"
:dialogFormVisible.sync="dialogFormVisible"
@handelFormVisible="setFormVisible"
></SeasonTimeAdd>
<!-- 重新申請(qǐng),歸還 -->
<SeasonTimeReturn
:seasonTimeReturnInputData="seasonTimeReturnInputData"
:seasonTimeReturnData.sync="tableData"
:fileList="appealFileList"
:dialogFormReturnVisible.sync="dialogFormReturnVisible"
@handelFormVisible="setFormReturnVisible"
></SeasonTimeReturn>
</el-container>
</template>
<script>
import {
queryAppeal,
pagePubAppeal,
queryAppealFileByAppealUuid,
queryApproveByAppealUuid,
queryImitateByAppealUuid,
updateAppeal,
submitAppeal,
callBackAppeal,
removeAppeal,
} from '@/api/interface/time-manage/season-time-company-appeal.js';
import LesUpload from '@/components/LesUpload/index.vue';
import SeasonTimeAdd from '@/views/time-manage/season-time-add/season-time-add.vue';
import SeasonTimeReturn from '@/views/time-manage/season-time-return/season-time-return.vue';
export default {
name: 'SeasonTimeAddAppeal',
components: {
LesUpload,
SeasonTimeAdd,
SeasonTimeReturn,
},
props: {
// 是新增還是歸還
appealType: {
type: String,
default: '',
},
},
data() {
return {
id: '',
selectTaskId: '',
// 是否有審批結(jié)果的顯隱
haveResult: true,
//是否可以回收
couldReceive: false,
isDisable: {
form: true,
},
// // 組件選值列表
// list: {
// season: [],
// company: [],
// },
//左側(cè)申請(qǐng)表單統(tǒng)計(jì)數(shù)據(jù)
staticNum: {
ready: 0,
appealing: 0,
ok: 0,
error: 0,
},
// 表單參數(shù)
leftForm: {
appealDate: [],
startDate: '',
stopDate: '',
},
leftBottomForm: {
apppovalDate: [],
startDate: '',
stopDate: '',
},
// 表單參數(shù)
form: {
appealCompany: '',
appealCompanyName: '',
appealDescribe: '',
appealTime: '',
appealExplain: '',
appealBy: '',
},
// 待提交
tableDataReady: [],
// 審批中
tableDataWaiting: [],
// 已審批
tableDataResult: [],
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近一個(gè)月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
},
},
{
text: '最近三個(gè)月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
},
},
],
},
// 右側(cè)表單表格數(shù)據(jù)
ruleForm: {
appealDescribe: '',
icao: this.$UserInfoUtil.getIcao(),
// 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, //審批背景圖樣式
// 選中的行數(shù)據(jù)狀態(tài)
selectAppealFlag: '',
seasonTimeAddData: {}, //重新申請(qǐng)傳參
dialogFormVisible: false,
bizType: 'MOMENT_ADD',
dialogFormReturnVisible: false, //時(shí)刻歸還顯隱
seasonTimeReturnInputData: {}, // 歸還表單數(shù)據(jù)
};
},
methods: {
// 查詢表格
search() {
// 清空右側(cè)所有數(shù)據(jù)
// 申請(qǐng)時(shí)刻信息列表
this.tableData = [];
// 審批結(jié)果表
this.approvalTable = [];
// 選中的行數(shù)據(jù)狀態(tài)
this.selectAppealFlag = '';
// 控制顯隱
this.dialogFormVisible = false;
// 選中的行數(shù)據(jù)
this.selectData = [];
// 選中的數(shù)據(jù)，描述和說明
this.inputData = {};
this.appealFileList = []; //文件信息
// 是否有審批結(jié)果的顯隱
this.haveResult = true;
//是否可以回收
this.couldReceive = false;
this.isDisable = {
form: true,
};
this.getQueryAppeal();
this.getPagePubAppeal();
// // 獲取待提交和審批中
// queryAppeal({ seasonOrDaily: '1', bizType: this.bizType, preTask: '-1' }).then((res) => {
// if (res.data.code == '1') {
// let appealList = res.data.data;
// this.tableDataReady = res.data.data == null ? [] : res.data.data;
// let readyList = appealList.filter((item) => {
// return item.appealFlag == '0';
// });
// this.$set(this.staticNum, 'ready', readyList.length);
// let waitList = appealList.filter((item) => {
// return item.appealFlag == '1';
// });
// this.$set(this.staticNum, 'appealing', waitList.length);
// } else {
// this.tableDataReady = [];
// this.staticNum = {
// ready: 0,
// appealing: 0,
// };
// this.couldReceive = false;
// this.haveResult = true;
// this.id = '';
// }
// });
// // 獲取已審批記錄
// pagePubAppeal({ appealCompany: this.$UserInfoUtil.getIcao(), seasonUuid: this.leftForm.season, seasonOrDaily: '1', bizType: this.bizType, preTask: '-1' }).then((res) => {
// if (res.data.code == '1') {
// let approvalReasult = res.data.data;
// this.tableDataResult = res.data.data == null ? [] : res.data.data;
// let approvalList = approvalReasult.filter((item) => {
// return item.appealFlag != '1' && item.appealFlag != '0';
// });
// let tempOk = approvalList.filter((item) => {
// return item.appealFlag == '3';
// });
// this.$set(this.staticNum, 'ok', tempOk.length);
// let tempError = approvalList.filter((item) => {
// return item.appealFlag == '2';
// });
// this.$set(this.staticNum, 'error', tempError.length);
// } else {
// this.tableDataResult = [];
// this.staticNum.ok = 0;
// this.staticNum.error = 0;
// }
// });
},
getQueryAppeal() {
// 獲取待提交和審批中
queryAppeal({ seasonOrDaily: '1', bizType: this.bizType, preTask: '-1', ...this.leftForm }).then((res) => {
if (res.data.code == '1') {
let appealList = res.data.data;
this.tableDataReady = res.data.data == null ? [] : res.data.data;
let readyList = appealList.filter((item) => {
return item.appealFlag == '0';
});
this.$set(this.staticNum, 'ready', readyList.length);
let waitList = appealList.filter((item) => {
return item.appealFlag == '1';
});
this.$set(this.staticNum, 'appealing', waitList.length);
} else {
this.tableDataReady = [];
this.staticNum = {
ready: 0,
appealing: 0,
};
this.couldReceive = false;
this.haveResult = true;
this.id = '';
}
});
},
getPagePubAppeal() {
// 獲取已審批記錄
pagePubAppeal({ appealCompany: this.$UserInfoUtil.getIcao(), seasonOrDaily: '1', bizType: this.bizType, preTask: '-1', ...this.leftBottomForm }).then((res) => {
if (res.data.code == '1') {
let approvalReasult = res.data.data;
this.tableDataResult = res.data.data == null ? [] : res.data.data;
let approvalList = approvalReasult.filter((item) => {
return item.appealFlag != '1' && item.appealFlag != '0';
});
let tempOk = approvalList.filter((item) => {
return item.appealFlag == '3';
});
this.$set(this.staticNum, 'ok', tempOk.length);
let tempError = approvalList.filter((item) => {
return item.appealFlag == '2';
});
this.$set(this.staticNum, 'error', tempError.length);
} else {
this.tableDataResult = [];
this.staticNum.ok = 0;
this.staticNum.error = 0;
}
});
},
// 時(shí)間渲染
timeFormat(row, column, cellValue, index) {
if (cellValue != null && cellValue != '') {
return this.moment(cellValue).format('YYYY-MM-DD HH:mm');
}
},
rowClick(row, column, cell, event) {
this.id = row.id;
this.selectTaskId = row.taskId;
this.selectAppealFlag = row.appealFlag;
this.ruleForm.appealCompany = row.appealCompany;
this.ruleForm.appealDescribe = row.appealDescribe;
this.ruleForm.appealTime = row.appealTime;
// this.ruleForm.airport = row.airport;
this.ruleForm.appealExplain = row.appealExplain;
this.ruleForm.appealBy = row.appealBy;
// 是新增還是歸還
if (this.bizType == 'MOMENT_ADD') {
this.seasonTimeAddData = row;
} else {
this.seasonTimeReturnInputData = row;
}
// 顯示右側(cè)的同意和駁回背景圖
if (row.appealFlag == '2' || row.appealFlag == '3') {
this.approveShow = true;
if (row.appealFlag == '2') {
this.isAgree = false;
} else {
this.isAgree = true;
}
} else {
this.approveShow = false;
}
this.inputData = {
appealDescribe: row.appealDescribe,
appealExplain: row.appealExplain,
id: row.id,
// planId: row.bizId,
};
this.appealFileList = [];
// 查詢右側(cè)頂部信息
queryApproveByAppealUuid({ appealUuid: row.id, seasonOrDaily: '1' }).then((res) => {
// // 如果是待審批
if (row.appealFlag == '1' && res.data.data && res.data.data.length == 0) {
this.couldReceive = true;
this.haveResult = false;
this.isDisable.form = true;
} else {
if (row.appealFlag == '0') {
this.couldReceive = false;
this.haveResult = false;
this.isDisable.form = false;
} else {
this.couldReceive = false;
this.haveResult = true;
this.isDisable.form = true;
}
}
this.approvalTable = res.data.data;
});
// 查詢右側(cè)文件信息
queryAppealFileByAppealUuid({ appealUuid: row.id, seasonOrDaily: '1' }).then((res) => {
this.appealFileList = res.data.data == null ? [] : res.data.data;
this.appealFileList.forEach((element, index) => {
this.$set(this.appealFileList[index], 'name', element.fileName);
});
});
// 查詢右側(cè)表格數(shù)據(jù)
queryImitateByAppealUuid({ appealUuid: row.id, seasonOrDaily: '1' }).then((res) => {
this.tableData = res.data.data;
// 選中的數(shù)據(jù)
this.selectData = res.data.data;
});
},
// 日期渲染
dateFormat(row, column, cellValue, index) {
if (cellValue != null && cellValue != '') {
return this.moment(cellValue).format('YYYY-MM-DD');
}
},
// 重新申請(qǐng)
reAppeal() {
if (this.bizType == 'MOMENT_ADD') {
this.dialogFormVisible = true;
} else {
this.dialogFormReturnVisible = true;
}
},
setDialogVisible(val) {
this.dialogFormVisible = val.dialogFormVisible;
this.search();
},
// 取回
receive() {
this.$secondConfirm('確定取回嗎？').then((res) => {
if (res) {
callBackAppeal({ id: this.id, taskId: this.selectTaskId, bizType: this.bizType, seasonOrDaily: '1' }).then((res) => {
if (res.data.code == 1) {
this.$message({
message: '取回成功!',
type: 'success',
showClose: true,
});
this.search();
}
});
} else {
this.$message({
message: '已取消取回!',
type: 'info',
showClose: true,
});
}
});
},
// // 根據(jù)
// queryBySeason() {
// this.search();
// },
submit() {
let obj = {};
obj.id = this.id;
// obj.appealBy = this.$UserInfoUtil.getCurrentUserId();
// obj.appealCompany = this.$UserInfoUtil.getIcao();
this.appealFileList.forEach((element, index) => {
this.$set(this.appealFileList[index], 'fileName', element.name);
});
obj.appealFileList = this.appealFileList.length == 0 ? [] : this.appealFileList;
obj.appealDescribe = this.ruleForm.appealDescribe;
obj.appealExplain = this.ruleForm.appealExplain;
obj.bizType = this.bizType;
obj.seasonOrDaily = '1';
obj.appealMomentList = this.tableData;
this.$secondConfirm('確認(rèn)提交嗎？').then((res) => {
if (res) {
updateAppeal(obj).then((res) => {
if (res.data.code == 1) {
// this.search();
} else {
this.$message({
message: res.data.msg,
type: 'warning',
});
}
});
let tempObj = {};
tempObj.bizType = this.bizType;
tempObj.seasonOrDaily = '1';
tempObj.id = this.id;
tempObj.taskId = this.selectTaskId;
submitAppeal(tempObj).then((res) => {
if (res.data.code == '1') {
this.$message({
message: '提交成功!',
type: 'success',
showClose: true,
});
this.search();
} else {
this.$message({
message: res.data.msg,
type: 'warning',
showClose: true,
});
}
});
} else {
this.$message({
message: '已取消',
type: 'info',
showClose: true,
});
}
});
},
reset() {
this.ruleForm.appealDescribe = '';
this.ruleForm.appealExplain = '';
},
// 文件刪除
handleRemove(file, fileList) {
this.appealFileList = fileList;
},
// 文件上傳成功
fileUploadSuccess(response, file, fileList) {
if (response.code == '1') {
this.appealFileList.push(response.data[0]);
} else {
this.$message({
showClose: true,
message: '上傳失敗',
type: 'error',
});
}
},
// 查詢，重置
searchLeftForm() {
if (this.leftForm.appealDate.length == 0) {
this.leftForm.startDate = '';
this.leftForm.stopDate = '';
} else {
this.leftForm.startDate = this.leftForm.appealDate[0] + ' 00:00:00';
this.leftForm.stopDate = this.leftForm.appealDate[1] + ' 23:59:59';
}
this.getQueryAppeal();
},
// 重置
resetLeftForm() {
this.$refs.leftForm.resetFields();
this.searchLeftForm();
},
searchLeftBottomForm() {
if (this.leftBottomForm.apppovalDate.length == 0) {
this.leftBottomForm.startDate = '';
this.leftBottomForm.stopDate = '';
} else {
this.leftBottomForm.startDate = this.leftBottomForm.apppovalDate[0] + ' 00:00:00';
this.leftBottomForm.stopDate = this.leftBottomForm.apppovalDate[1] + ' 23:59:59';
}
this.getPagePubAppeal();
},
resetLeftBottomForm() {
this.$refs.leftBottomForm.resetFields();
this.getPagePubAppeal();
},
approveFlagFormat(row, column, cellValue, index) {
if (cellValue != null && cellValue != '') {
return this.$common.renderCode(cellValue, this.approveFlagList);
} else {
return '';
}
},
seasonAppealFlagFormat(row, column, cellValue, index) {
if (cellValue) {
return this.$common.renderCode(cellValue, this.appealFlagList);
} else {
return '';
}
},
// 審批結(jié)果列顏色渲染
approveFlagClass({ row, column, rowIndex, columnIndex }) {
if (column.property == 'approveFlag') {
if (row.approveFlag == '0') {
return 'approvalError';
} else {
return 'approvalOk';
}
}
},
// 申訴情況列顏色渲染
appealStatusClass({ row, column, rowIndex, columnIndex }) {
if (column.property == 'appealFlag') {
switch (row.appealFlag) {
case '0':
case '1':
return 'appealWait';
break;
case '2':
return 'appealError';
break;
case '3':
return 'appealOk';
break;
}
}
},
//將時(shí)間轉(zhuǎn)為標(biāo)準(zhǔn)yyyy-MM-dd類型
formatterDate(stringDate) {
let formatDate = '';
if (stringDate) {
formatDate = this.moment(stringDate).format('YYYY-MM-DD');
//formatDate = stringDate.substr(0, 4) + '-' + stringDate.substr(4, 2) + '-' + stringDate.substr(6, 2);
}
return formatDate;
},
// 刪除
removeAction(row) {
this.$secondConfirm('確認(rèn)刪除嗎？').then((res) => {
if (res) {
removeAppeal({ appealUuid: row.id, seasonOrDaily: '1', bizType: this.bizType }).then((res) => {
if (res.data.code == '1') {
this.$message({
message: '刪除成功!',
type: 'success',
showClose: true,
});
this.search();
}
});
} else {
this.$message({
message: '已取消!',
type: 'info',
showClose: true,
});
}
});
},
// 新增回調(diào)
setFormVisible(val) {
this.dialogFormVisible = val.dialogFormVisible;
},
// 時(shí)刻歸還回調(diào)
setFormReturnVisible(val) {
this.dialogFormReturnVisible = val.dialogFormReturnVisible;
},
},
async mounted() {
await this.$common.getBizDataByType({ type: 'seasonAppealFlag' }).then((res) => {
this.appealFlagList = res;
});
await this.$common.getBizDataByType({ type: 'approveFlag' }).then((res) => {
this.approveFlagList = res;
});
this.$common.getSelectCompanyData().then((res) => {
this.companyList = res;
});
if (this.appealType == 'timeReturn') {
this.bizType = 'MOMENT_RETURN';
} else {
this.bizType = 'MOMENT_ADD';
}
this.search();
// 收審批消息刷頁面
let that = this;
window.addEventListener('message', function (ev) {
let topic = ev.data.topic;
if ((this.bizType = 'MOMENT_RETURN')) {
if (topic == 'MOMENT_RETURN_SAVE' || topic == 'MOMENT_RETURN_PUB' || topic == 'MOMENT_RETURN_CALLBACK' || topic == 'MOMENT_RETURN_APPROVE') {
that.search();
}
} else {
if (topic == 'MOMENT_ADD_SAVE' || topic == 'MOMENT_ADD_PUB' || topic == 'MOMENT_ADD_CALLBACK' || topic == 'MOMENT_ADD_APPROVE') {
that.search();
}
}
});
},
};
</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/approveOk.png') 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/approveReject.png') 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="file.url" 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">{{ file.name || file.fileName }}</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<iframe id="iframe" style="display: none" frameborder="0"></iframe>
</div>
</template>
<script>
import globalFunction from '@/utils/globalFunction.js';
export default {
name: 'LesUpload',
props: {
fileList: {
type: Array,
default() {
return [];
},
},
limit: {
type: Number,
default: 5,
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
uploadAction: window.fileAction.uploadFileAction,
dialogImageUrl: '',
dialogVisible: false,
officeFileType: ['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx', 'csv'],
downLoadSrc: '',
successFileList: [],
};
},
mounted() {},
methods: {
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 <= 5;
if (!isLt2M) {
this.$message.error('上傳文件大小不能超過5MB!');
}
return isLt2M;
},
// 文件刪除
handleRemove(file) {
this.$secondConfirm('確認(rèn)刪除此文件嗎？').then((res) => {
if (res) {
this.successFileList.forEach((value, index, array) => {
if (value.fid == file.fid) {
array.splice(index, 1);
}
});
this.$emit('onRemoveFile', file, this.successFileList);
this.$message({
showClose: true,
message: '刪除成功',
type: 'success',
});
} else {
this.$message({
showClose: true,
message: '已取消',
type: 'info',
});
}
});
},
handleExceed(files, fileList) {
this.$message.warning(`當(dāng)前限制選擇${this.limit}個(gè)文件，本次選擇了 ${files.length} 個(gè)文件，共選擇了 ${files.length + fileList.length} 個(gè)文件`);
},
// 文件上傳成功
fileUploadSuccess(response, file, fileList) {
this.successFileList = [...fileList];
this.successFileList.pop();
this.successFileList.push(response.data[0]);
this.$emit('onSuccess', response, file, fileList);
},
// 預(yù)覽
handlePictureCardPreview(file) {
let extendName = '';
if (file.name) {
extendName = file.name.substring(file.name.lastIndexOf('.') + 1);
} else {
extendName = file.fileName.substring(file.fileName.lastIndexOf('.') + 1);
}
// 若當(dāng)前點(diǎn)擊項(xiàng)是圖片
const PIC = ['png', 'jpg', 'jpeg', 'gif', 'svg'];
if (PIC.includes(extendName.toLowerCase())) {
this.dialogImageUrl = window.fileAction.fileViewAction + file.fid;
this.dialogVisible = true;
}
// 若當(dāng)前點(diǎn)擊項(xiàng)是可以使用office在線預(yù)覽的
if ([...this.officeFileType, 'pdf'].includes(extendName.toLowerCase())) {
globalFunction.getFileOnlineViewPathByOffice(file);
}
// 若當(dāng)前點(diǎn)擊項(xiàng)是代碼或文本文件
const CODE = ['html', 'js', 'css', 'json', 'c', 'java', 'txt'];
if (CODE.includes(extendName.toLowerCase())) {
window.open(globalFunction.getViewFilePath(file), '_blank');
}
},
// 下載
handleDownload(file) {
document.getElementById('iframe').src = window.fileAction.downloadFileAction + file.fid;
},
},
};
</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/file.png') 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>
二、以按鈕的形式上傳、預(yù)覽、下載文件（功能都能用）
需求
（1）點(diǎn)擊新增按鈕可以上傳文件
（2）雙擊table某一行能夠查看數(shù)據(jù)（包括上傳的文件，有下載和預(yù)覽功能）
（3）點(diǎn)擊編輯，可以修改文件（就是重新上傳類代碼就是需求一）
父組件代碼（包括新增，編輯按鈕這些）
<!--
@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="form.studentName" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="培訓(xùn)項(xiàng)目" prop="projName">
<el-select v-model="form.projName" clearable filterable>
<el-option v-for="item in planIdList" :key="item.uuid" :label="item.project" :value="item.project"></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"> 導(dǎo)入 </el-button>
<el-button type="primary" @click="exportRowData">導(dǎo)出</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="序號(hào)" align="center" width="60" :index="(index) => this.$common.pageIndexMethod(index, form.pageIndex, form.pageSize)"> </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="身份證號(hào)碼" align="center"> </el-table-column>
<el-table-column prop="workUnit" label="工作單位" align="center" width="150"> </el-table-column>
<el-table-column prop="projName" label="培訓(xùn)項(xiàng)目" align="center" width="180"> </el-table-column>
<el-table-column prop="trainId" label="培訓(xùn)編號(hào)" align="center"> </el-table-column>
<el-table-column prop="certNo" label="證書編號(hào)" align="center" width="200"> </el-table-column>
<el-table-column prop="isReceived" label="是否領(lǐng)取" align="center"> </el-table-column>
<el-table-column prop="receiver" label="領(lǐng)取人" 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(scope.row)">編輯</el-button>
<el-button type="primary" @click="removeRowData(scope.row.uuid)">刪除</el-button>
</template>
</el-table-column> -->
<!-- 樹狀圖 -->
<el-table-column prop="projName" label="培訓(xùn)項(xiàng)目" 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="身份證號(hào)碼" align="center"> </el-table-column>
<el-table-column prop="workUnit" label="工作單位" align="center" width="150"> </el-table-column>
<el-table-column prop="trainId" label="培訓(xùn)編號(hào)" align="center"> </el-table-column>
<el-table-column prop="certNo" label="證書編號(hào)" align="center" width="200"> </el-table-column>
<el-table-column prop="isReceived" label="是否領(lǐng)取" align="center"> </el-table-column>
<el-table-column prop="receiver" label="領(lǐng)取人" 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="scope.row.pid !== '0'">
<el-button type="primary" @click="updateRowData(scope.row)">編輯</el-button>
<el-button type="primary" @click="removeRowData(scope.row.uuid)">刪除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<pagination :total="total" :page.sync="form.pageIndex" :limit.sync="form.pageSize" @pagination="onQuery" />
</el-main>
<!-- 新增/編輯合格證書 -->
<AddTrainCert :updateData.sync="selectedRow" :htmlFlag="htmlFlag" :dialogFormVisible.sync="dialogFormVisible" @handleDialogVisible="setFormVisible"></AddTrainCert>
<!-- 導(dǎo)入 -->
<ImportStudent :title="title" :templateName="templateName" :dialogFormVisible.sync="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/trainCert.js';
import { listBizCodeByType } from '@/api/eams/bizcode.js';
import { listTrainPlan } from '@/api/eams/trainPlan.js';
export default {
name: 'trainCert',
components: { pagination, AddTrainCert, ImportStudent },
data() {
return {
planIdList: null,
sexList: [],
projNameList: [], // projNameList
isReceivedList: [],
form: {
studentNo: '',
studentName: '',
projName: '',
sortField: '', //排序字段
sortOrder: '', //排序方向
pageIndex: 0, //頁數(shù)
pageSize: 30, //每頁數(shù)量
},
total: 0, //總數(shù)
tableData: [],
// 傳遞給子組件數(shù)據(jù)
htmlFlag: 'add',
selectedRow: {},
dialogFormVisible: false, //新增合格證書窗口
operateBtnShow: false, //證書新增、導(dǎo)入操作
//導(dǎo)入
file: null, //選取的導(dǎo)入文件
fileList: [], //文件列表
importExcelVisible: false, //導(dǎo)入彈窗
title: '導(dǎo)入合格證書', //導(dǎo)入對(duì)話框標(biāo)題
templateName: '培訓(xùn)合格證書導(dǎo)入模板.xlsx', //模板名稱
};
},
mounted() {
//教務(wù)室的人可新增、導(dǎo)入合格證書
let groupName = this.$UserInfoUtil.getCurrentGroupName();
if (groupName.indexOf('教務(wù)室') != -1) {
this.operateBtnShow = true;
}
//查詢性別列表
listBizCodeByType({ type: 'sex_type' }).then((res) => {
this.sexList = res.data.data;
});
//查詢是否領(lǐng)取
listBizCodeByType({ type: 'yes_or_no' }).then((res) => {
this.isReceivedList = res.data.data;
});
listTrainPlan().then((res) => {
this.planIdList = res.data.data;
});
//查詢
this.onQuery();
},
methods: {
// 查詢
onQuery() {
var param = this.getQueryCondition();
pageTrainCert(param).then((res) => {
//pageTrainee
this.tableData = res.data.data ? res.data.data.data : [];
this.tableData = this.addFatherId(this.tableData)
this.tableData = this.toTree(this.tableData);
this.total = res.data.data.total;
});
},
//查詢條件
getQueryCondition() {
var param = { ...this.form };
return param;
},
// 重置
resetForm() {
this.$refs.form.resetFields();
this.onQuery();
},
// 新增
addRowData() {
this.dialogFormVisible = true;
this.selectedRow = {};
this.htmlFlag = 'add';
},
// 修改
updateRowData(row) {
this.selectedRow = row;
this.htmlFlag = 'update';
this.dialogFormVisible = true;
},
// 刪除數(shù)據(jù)
removeRowData(uuid) {
this.$confirm('確認(rèn)刪除該記錄, 是否繼續(xù)?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
removeTrainCert({ uuid: uuid }).then((res) => {
if (res.data.data) {
this.$message({
type: 'success',
message: '刪除成功',
});
//刷新
this.onQuery();
} else {
this.$message({
type: 'error',
message: '刪除失敗',
});
}
});
})
.catch(() => {
this.$message({
type: 'success',
message: '已取消刪除',
showClose: true,
});
});
},
//導(dǎo)出
exportRowData() {
//獲取查詢條件
var vdata = this.getQueryCondition();
// 將排序字段駝峰轉(zhuǎn)大寫下劃線
vdata.sortField = this.$common.toXHXUpper(vdata.sortField);
this.$refs.exportIframe.setAttribute(
'src',
window.baseUrl + '/les/excel/back/export?serviceName=trainCertExport&title=' + encodeURI('合格證書導(dǎo)出') + '&vars=' + encodeURI(JSON.stringify(vdata))
);
},
// 合格證書關(guān)閉彈窗回調(diào)
setFormVisible(val) {
this.dialogFormVisible = val.dialogFormVisible;
this.onQuery();
},
// 導(dǎo)入
importExcel() {
this.importExcelVisible = true;
},
// 導(dǎo)入對(duì)話框關(guān)閉后回調(diào)
setImportDlgVisible(obj) {
this.importExcelVisible = obj.dialogFormVisible;
this.file = obj.file;
this.onSureImport();
},
//導(dǎo)入
onSureImport() {
if (!this.$common.isExcelFile(this.file.raw.type)) {
this.$message.error('支持導(dǎo)入文件格式:xls、xlsx!');
//需清空文件列表
// this.$refs.upload.clearFiles();
return;
}
var param = new FormData();
param.append('file', this.file.raw);
importTrainCert(param).then((res) => {
if (res.data.data) {
this.$message({
type: 'success',
message: '導(dǎo)入成功',
});
this.onQuery();
} else {
this.$message({
type: 'error',
message: '格式不正確',
});
}
});
//需清空文件列表
// this.$refs.upload.clearFiles();
},
//表格排序
onSortChanged(column) {
var order = column.order;
this.form.sortField = column.prop;
this.form.sortOrder = order
? order === 'descending' // 第一個(gè)問號(hào)：order不為空
? 'desc'
: 'asc'
: '';
this.onQuery();
},
//雙擊表格行
onTableDblclick(row) {
this.htmlFlag = 'look';
this.selectedRow = row;
this.dialogFormVisible = true;
if(row.pid == '0'){
this.dialogFormVisible = false;
}
},
//表格渲染日期
onRenderDate(row, column, cellValue) {
return this.$common.parseTime(cellValue, '{y}-{m}-wppm3vysvbp');
},
//表格渲染時(shí)間
onRenderTime(row, column, cellValue) {
return this.$common.parseTime(cellValue, '{y}-{m}-wppm3vysvbp {h}:{i}');
},
//渲染性別
onRendersex(row, column, cellValue) {
return this.$common.renderCode(cellValue, this.sexList);
},
//渲染是否接種新冠疫苗
onRenderisReceived(row, column, cellValue) {
return this.$common.renderCode(cellValue, this.isReceivedList);
},
//渲染專業(yè)
onRenderprojName(row, column, cellValue) {
return this.$common.renderCode(cellValue, this.projNameList);
},
// 數(shù)據(jù)預(yù)處理（主要是因?yàn)闆]有fatherId不能轉(zhuǎn)樹狀結(jié)構(gòu)）
addFatherId(data) {
let map = {};
if (!Array.isArray(data)) {
return [];
}
data.forEach((item) => {
// 如果projId是第一次出現(xiàn)，就給data添加節(jié)點(diǎn)的父元素
if (!map[item.projId]) {
map[item.projId] = item.projId;
data.push({
uuid:item.projId,
pid:'0',
projName: item.projName + '(' + item.trainId + ')'
})
}
});
return data;
},
// 數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)
toTree(data) {
let result = [];
let map = {};
if (!Array.isArray(data)) {
//驗(yàn)證data是不是數(shù)組類型
return [];
}
data.forEach((item) => {
map[item.uuid] = item;
});
data.forEach((item) => {
let parent = map[item.projId];
if (parent) {
item.projName = '';
(parent.children || (parent.children = [])).push(item);
} else {
result.push(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.sync="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="ruleForm.uuid"></el-input>
</el-form-item>
<el-row>
<el-col>
<el-form-item label="培訓(xùn)項(xiàng)目" prop="projId">
<el-select v-model="ruleForm.projId" @change="onProjIdChanged">
<el-option v-for="item in projIdList" :key="item.uuid" :label="item.project" :value="item.uuid"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="學(xué)員" prop="studentId">
<el-select v-model="ruleForm.studentId">
<el-option v-for="item in studentIdList" :key="item.uuid" :label="item.studentName" :value="item.uuid"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="證書編號(hào)" prop="certNo">
<el-input v-model="ruleForm.certNo" maxlength="20"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="24">
<el-form-item label="是否領(lǐng)取" prop="isReceived">
<el-radio-group v-model="ruleForm.isReceived">
<el-radio v-for="item in isReceivedList" :key="item.id" :label="item.id">{{ item.text }}</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'">點(diǎn)擊上傳</el-button>
<el-button size="small" type="primary" v-if="htmlFlag == 'look' || htmlFlag == 'audit'" @click="downloadFile" :disabled="false">點(diǎn)擊下載</el-button>
<el-button size="small" type="primary" v-if="htmlFlag == 'look' || htmlFlag == 'audit'" @click="viewCourseWare" :disabled="false">點(diǎn)擊預(yù)覽</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="領(lǐng)取人" prop="receiver">
<!--學(xué)員-->
<el-select v-model="ruleForm.receiver">
<el-option v-for="item in studentIdList" :key="item.uuid" :label="item.studentName" :value="item.uuid"></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'?'取消':'關(guān)閉'}}</el-button>
</div>
</el-dialog>
<!-- 文件下載的iframe -->
<iframe :id="'downloadIframeSon' + index" style="display: none" v-for="(item, index) in downloadList" :key="'download' + index"></iframe>
<el-dialog title="在線預(yù)覽培訓(xùn)資料" :visible.sync="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/trainCert.js';
import { listTrainPlan, listStudentByPlanId } from '@/api/eams/trainPlan.js';
import { listBizCodeByType } from '@/api/eams/bizcode.js';
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: '', //流程實(shí)例id
},
appealFileList:[],
photoAction: window.fileAction.uploadFileAction,
imageUrl: '',
// 校驗(yàn)
rules: {
projId: [{ required: true, message: '請(qǐng)選擇培訓(xùn)項(xiàng)目', trigger: 'change' }],
},
// 操作文件
uploadPath: window.fileAction.uploadFileAction, //上傳路徑
fileList: [],
fidList: [], //上傳的文件id列表
fileNameList: [], //上傳到文件名稱列表
downloadList: [], //下載列表
viewCoursewareVisible: false, //預(yù)覽附件窗口
viewFileSrc1: '', //預(yù)覽文件src
};
},
computed: {
visible: {
get() {
return this.dialogFormVisible;
},
set(val) {
this.$emit('update:dialogFormVisible', val);
},
},
},
mounted() {
listTrainPlan().then((res) => {
this.projIdList = res.data.data;
});
listTrainCert().then((res) => {
// POST /train/plan/listTraineeByPlanId POST /train/plan/listStudentByPlanId
this.receiverList = res.data.data;
});
//查詢是否領(lǐng)取
listBizCodeByType({ type: 'yes_or_no' }).then((res) => {
this.isReceivedList = res.data.data;
});
},
methods: {
//初始化
openInit() {
this.closeDialog();
this.formDisabled = false;
if (this.htmlFlag == 'update') {
this.title = '修改合格證書';
} else if (this.htmlFlag == 'look') {
this.title = '查看合格證書';
this.formDisabled = true;
} else if (this.htmlFlag == 'add') {
this.title = '新增合格證書';
}
if (this.htmlFlag != 'add') {
// this.ruleForm = { ...this.updateData };
// this.ruleForm.trainTime = [this.updateData.startTime, this.updateData.endTime];
this.imageUrl = window.fileAction.fileViewAction + this.ruleForm.photo;
this.onProjIdChanged(this.updateData.projId, (res) => {
this.ruleForm = { ...this.updateData };
this.ruleForm.trainTime = [this.updateData.startTime, this.updateData.endTime];
});
}
//課程資料賦值
this.fileList = []
if (this.updateData.fileId) {
var fileNameList = this.updateData.fileName.split(',');
fileNameList.forEach((item) => {
this.fileList.push({ name: item });
});
}
},
//關(guān)閉窗口
closeDialog() {
// 清空表單
this.$refs.ruleForm.resetFields();
// 清除校驗(yàn)
this.$refs.ruleForm.clearValidate();
},
// 觸發(fā)父頁面方法
hideDialog() {
this.$emit('handleDialogVisible', { dialogFormVisible: false });
},
// 提交
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
//先判斷是否有附件,如果有先上傳附件,然后保存或者更新成績分析表
if (this.ruleForm.fileId) {
this.fileList = [this.ruleForm.fileId];
}
if (!this.ruleForm.fileId && this.fileList.length > 0) {
this.submitUpload();
} else {
this.addOrUpdateTrainPlan();
}
} else {
return false;
}
})
},
//上傳至文件服務(wù)器
submitUpload() {
if (this.fileList.length < 0) {
this.$message({
type: 'warning',
message: '請(qǐng)選擇文件',
});
return;
}
if (this.ruleForm.fileId) {
//原有文件，無需再次上傳文件，直接提交
//修改
this.addOrUpdateTrainPlan({ ...this.ruleForm });
} else {
//新增文件，需提交文件
this.$refs.upload.submit();
}
},
//新增或修改計(jì)劃
addOrUpdateTrainPlan() {
var param = { ...this.ruleForm };
if (this.htmlFlag == 'add') {
//新增
saveTrainCert(param).then((res) => {
if (res.data.code == '1') {
var code = res.data.data.code;
if (code == '1') {
this.$message({
type: 'success',
message: '新增合格證書成功',
});
//刷新
this.$emit('handleDialogVisible', false);
} else {
this.$message({
type: 'warning',
message: res.data.data.msg,
});
}
} else {
this.$message({
type: 'error',
message: '新增合格證書失敗',
})
}
});
} else {
//修改
updateTrainCert(param).then((res) => {
if (res.data.code == '1') {
var code = res.data.data.code;
if (code == '1') {
this.$message({
type: 'success',
message: '修改合格證書成功',
});
//刷新
this.$emit('handleDialogVisible', false);
} else {
this.$message({
type: 'warning',
message: res.data.data.msg,
});
}
} else {
this.$message({
type: 'error',
message: '修改合格證書失敗',
})
}
});
}
},
// 取消
cancelForm() {
this.visible = false;
},
//培訓(xùn)項(xiàng)目值改變時(shí)
onProjIdChanged(value, callback) {
listStudentByPlanId({ planId: value }).then((res) => {
var data = res.data.data;
if (data) {
this.studentIdList = data;
} else {
this.studentIdList = [];
}
if (callback) {
callback();
}
});
},
// --------------------------------操作文件-------------------------------
//文件移除
handleRemove(file, fileList) {
this.fileList = fileList;
if (!this.fileList || this.fileList.length > 0) {
this.$refs.ruleForm.validateField('fileId');
}
this.ruleForm.fileId = '';
this.ruleForm.fileName = '';
},
//移除文件前
beforeRemove(file, fileList) {
return this.$confirm(`確定移除 ${file.name}？`);
},
//定義超出限制時(shí)的行為
handleExceed(files, fileList) {
this.$message.warning(`當(dāng)前限制選擇 1 個(gè)文件`);
},
//文件狀態(tài)改變時(shí)的鉤子
handleChange(file, fileList) {
this.fileList = fileList;
if (this.fileList && this.fileList.length > 0) {
this.$refs.ruleForm.clearValidate('fileId');
}
},
//上傳成功回調(diào)
handleSuccess(response, file, fileList) {
this.$message({
type: 'success',
message: '上傳成功',
})
// 清空 fidList和fileNameList，然后添加新的 fid
// 沒有這個(gè)的話，在修改頁面點(diǎn)擊多次重新上傳，查看的時(shí)候會(huì)有多個(gè)
this.fidList = [];
this.fileNameList = [];
this.fidList.push(response.data[0].fid);
this.fileNameList.push(response.data[0].name);
console.log(this.fidList.length)
console.log(fileList.length)
if (this.fidList.length == fileList.length) {
this.ruleForm.fileId = this.fidList.join(',');
this.ruleForm.fileName = this.fileNameList.join(',');
this.addOrUpdateTrainPlan();
}
},
//下載
downloadFile() {
var fileId = this.updateData.fileId;
this.downloadList = [];
if (fileId) {
this.downloadList = fileId.split(',');
this.$nextTick(() => {
this.downloadList.forEach((item, index) => {
document.getElementById('downloadIframeSon' + index).src = window.fileAction.downloadFileAction + item;
});
});
}
},
//預(yù)覽
viewCourseWare() {
var row = { fileId: this.updateData.fileId, fileName: this.updateData.fileName };
this.viewFileSrc1 = '';
var fileIdList = row.fileId.split(',');
var fileNameList = row.fileName.split(',');
for (let i = 0; i < fileIdList.length; i++) {
let url = window.fileAction.backBasePath + '/demo/' + fileNameList[i];
this.viewCoursewareVisible = true;
this['viewFileSrc' + (i + 1)] = window.fileAction.filePreviewAction + '?url=' + encodeURIComponent(Base64.encode(url)) + '&fid=' + fileIdList[i];
}
},
},
};
</script>
<style scoped>
.stuinfo-add >>> .el-date-editor.el-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>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)
本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue實(shí)現(xiàn)Base64編碼與解碼的代碼示例
在Web開發(fā)中,Base64編碼常用于將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為文本字符串,以便在網(wǎng)絡(luò)上傳輸,在Vue.js應(yīng)用中,Base64編碼廣泛應(yīng)用于圖像的嵌入,本文將詳細(xì)介紹如何在Vue.js中實(shí)現(xiàn)Base64編碼與解碼,并提供多種示例和實(shí)現(xiàn)思路,需要的朋友可以參考下2024-09-09
vue中ref()和reactive()區(qū)別小結(jié)
本文主要介紹了vue中ref()和reactive()區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法
本文主要介紹了Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue3+TS+Vant3+Pinia(H5端)配置教程詳解
這篇文章主要介紹了Vue3+TS+Vant3+Pinia(H5端)配置教程詳解,需要的朋友可以參考下2023-01-01
vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解
這篇文章主要介紹了vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
Vue項(xiàng)目之ES6裝飾器在項(xiàng)目實(shí)戰(zhàn)中的應(yīng)用
作為一個(gè)曾經(jīng)的Java?coder,當(dāng)?shù)谝淮慰吹絡(luò)s里面的裝飾器Decorator,就馬上想到了Java中的注解,當(dāng)然在實(shí)際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目之ES6裝飾器在項(xiàng)目實(shí)戰(zhàn)中應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關(guān)于vue.js Router中嵌套路由的相關(guān)資料,所謂嵌套路由就是路由里面嵌套他的子路由,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06