hcj
6 months ago
parent
70c85d086a
commit
146e23af91
@ -1,179 +1,217 @@ |
||||
<template> |
||||
<div class="upload-file"> |
||||
<el-upload |
||||
:action="uploadFileUrl" |
||||
:before-upload="handleBeforeUpload" |
||||
:file-list="fileList" |
||||
:limit="1" |
||||
:on-error="handleUploadError" |
||||
:on-exceed="handleExceed" |
||||
:on-success="handleUploadSuccess" |
||||
:show-file-list="false" |
||||
:headers="headers" |
||||
class="upload-file-uploader" |
||||
ref="upload" |
||||
> |
||||
<!-- 上传按钮 --> |
||||
<el-button size="mini" type="primary">选取文件</el-button> |
||||
<!-- 上传提示 --> |
||||
<div class="el-upload__tip" slot="tip" v-if="showTip"> |
||||
请上传 |
||||
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> |
||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> |
||||
的文件 |
||||
</div> |
||||
</el-upload> |
||||
|
||||
<!-- 文件列表 --> |
||||
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> |
||||
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list"> |
||||
<el-link :href="file.url" :underline="false" target="_blank"> |
||||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span> |
||||
</el-link> |
||||
<div class="ele-upload-list__item-content-action"> |
||||
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> |
||||
</div> |
||||
</li> |
||||
</transition-group> |
||||
</div> |
||||
<div class="upload-file"> |
||||
<el-upload |
||||
:action="uploadFileUrl" |
||||
:before-upload="handleBeforeUpload" |
||||
:file-list="fileList" |
||||
:limit="limit" |
||||
:on-error="handleUploadError" |
||||
:on-exceed="handleExceed" |
||||
:on-success="handleUploadSuccess" |
||||
:show-file-list="false" |
||||
:headers="headers" |
||||
class="upload-file-uploader" |
||||
ref="upload" |
||||
> |
||||
<!-- 上传按钮 --> |
||||
<el-button size="mini" type="primary">选取文件</el-button> |
||||
<!-- 上传提示 --> |
||||
<div class="el-upload__tip" slot="tip" v-if="showTip"> |
||||
请上传 |
||||
<template v-if="fileSize"> |
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
||||
</template> |
||||
<template v-if="fileType"> |
||||
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> |
||||
</template> |
||||
的文件 |
||||
</div> |
||||
</el-upload> |
||||
<!-- 文件列表 --> |
||||
<transition-group |
||||
class="upload-file-list el-upload-list el-upload-list--text" |
||||
name="el-fade-in-linear" |
||||
tag="ul" |
||||
> |
||||
<li |
||||
:key="file.uid + ''" |
||||
class="el-upload-list__item ele-upload-list__item-content" |
||||
v-for="(file, index) in fileList" |
||||
> |
||||
<el-link :href="file.url" :underline="false" target="_blank"> |
||||
<span class="el-icon-document"> {{ file.fileName }} </span> |
||||
</el-link> |
||||
<div class="ele-upload-list__item-content-action"> |
||||
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> |
||||
</div> |
||||
</li> |
||||
</transition-group> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getToken } from "@/utils/auth"; |
||||
import { getToken } from '@/utils/auth' |
||||
|
||||
export default { |
||||
props: { |
||||
// 值 |
||||
value: [String, Object, Array], |
||||
// 大小限制(MB) |
||||
fileSize: { |
||||
type: Number, |
||||
default: 5, |
||||
}, |
||||
// 文件类型, 例如['png', 'jpg', 'jpeg'] |
||||
fileType: { |
||||
type: Array, |
||||
default: () => ["doc", "xls", "ppt", "txt", "pdf"], |
||||
}, |
||||
// 是否显示提示 |
||||
isShowTip: { |
||||
type: Boolean, |
||||
default: true |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
||||
headers: { |
||||
Authorization: "Bearer " + getToken(), |
||||
}, |
||||
fileList: [], |
||||
}; |
||||
}, |
||||
computed: { |
||||
// 是否显示提示 |
||||
showTip() { |
||||
return this.isShowTip && (this.fileType || this.fileSize); |
||||
props: { |
||||
// 值 |
||||
value: [String, Object, Array], |
||||
// 大小限制(MB) |
||||
fileSize: { |
||||
type: Number, |
||||
default: 5, |
||||
}, |
||||
// 文件类型, 例如['png', 'jpg', 'jpeg'] |
||||
fileType: { |
||||
type: Array, |
||||
default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf'], |
||||
}, |
||||
// 是否显示提示 |
||||
isShowTip: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
limit: { |
||||
type: Number, |
||||
default: 1, |
||||
}, |
||||
}, |
||||
// 列表 |
||||
list() { |
||||
let temp = 1; |
||||
if (this.value) { |
||||
// 首先将值转为数组 |
||||
const list = Array.isArray(this.value) ? this.value : [this.value]; |
||||
// 然后将数组转为对象数组 |
||||
return list.map((item) => { |
||||
if (typeof item === "string") { |
||||
item = { name: item, url: item }; |
||||
} |
||||
item.uid = item.uid || new Date().getTime() + temp++; |
||||
return item; |
||||
}); |
||||
} else { |
||||
this.fileList = []; |
||||
return []; |
||||
} |
||||
}, |
||||
}, |
||||
methods: { |
||||
// 上传前校检格式和大小 |
||||
handleBeforeUpload(file) { |
||||
// 校检文件类型 |
||||
if (this.fileType) { |
||||
let fileExtension = ""; |
||||
if (file.name.lastIndexOf(".") > -1) { |
||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); |
||||
} |
||||
const isTypeOk = this.fileType.some((type) => { |
||||
if (file.type.indexOf(type) > -1) return true; |
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true; |
||||
return false; |
||||
}); |
||||
if (!isTypeOk) { |
||||
this.$message.error(`请上传${this.fileType.join("/")}格式文件!`); |
||||
return false; |
||||
} |
||||
} |
||||
// 校检文件大小 |
||||
if (this.fileSize) { |
||||
const isLt = file.size / 1024 / 1024 < this.fileSize; |
||||
if (!isLt) { |
||||
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`); |
||||
return false; |
||||
data() { |
||||
return { |
||||
uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址 |
||||
headers: { |
||||
Authorization: 'Bearer ' + getToken(), |
||||
}, |
||||
fileList: [], |
||||
} |
||||
} |
||||
return true; |
||||
}, |
||||
// 文件个数超出 |
||||
handleExceed() { |
||||
this.$message.error(`只允许上传单个文件`); |
||||
computed: { |
||||
// 是否显示提示 |
||||
showTip() { |
||||
return this.isShowTip && (this.fileType || this.fileSize) |
||||
}, |
||||
// // 列表 |
||||
// list() { |
||||
// let temp = 1; |
||||
// if (this.value) { |
||||
// console.log(this.value); |
||||
// // 首先将值转为数组 |
||||
// const list = Array.isArray(this.value) ? this.value : [this.value]; |
||||
// // 然后将数组转为对象数组 |
||||
// return list.map((item) => { |
||||
// if (typeof item === "string") { |
||||
// item = { name: item, url: item }; |
||||
// } |
||||
// item.uid = item.uid || new Date().getTime() + temp++; |
||||
// return item; |
||||
// }); |
||||
// } else { |
||||
// this.fileList = []; |
||||
// return []; |
||||
// } |
||||
// }, |
||||
}, |
||||
// 上传失败 |
||||
handleUploadError(err) { |
||||
this.$message.error("上传失败, 请重试"); |
||||
methods: { |
||||
// 上传前校检格式和大小 |
||||
handleBeforeUpload(file) { |
||||
// 校检文件类型 |
||||
if (this.fileType) { |
||||
let fileExtension = '' |
||||
if (file.name.lastIndexOf('.') > -1) { |
||||
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1) |
||||
} |
||||
const isTypeOk = this.fileType.some((type) => { |
||||
if (file.type.indexOf(type) > -1) return true |
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true |
||||
return false |
||||
}) |
||||
if (!isTypeOk) { |
||||
this.$message.error(`请上传${this.fileType.join('/')}格式文件!`) |
||||
return false |
||||
} |
||||
} |
||||
// 校检文件大小 |
||||
if (this.fileSize) { |
||||
const isLt = file.size / 1024 / 1024 < this.fileSize |
||||
if (!isLt) { |
||||
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`) |
||||
return false |
||||
} |
||||
} |
||||
return true |
||||
}, |
||||
// 文件个数超出 |
||||
handleExceed() { |
||||
this.$message.error(`只允许上传${this.limit}个文件`) |
||||
}, |
||||
fileInit(val) { |
||||
console.log(this.fileList); |
||||
if (val) { |
||||
this.fileList = val |
||||
} else { |
||||
this.fileList = this.value |
||||
} |
||||
}, |
||||
// 上传失败 |
||||
handleUploadError(err) { |
||||
this.$message.error('上传失败, 请重试') |
||||
}, |
||||
// 上传成功回调 |
||||
handleUploadSuccess(res, file) { |
||||
const temp = { |
||||
filePath: res.fileName, |
||||
fileName: file.name, |
||||
} |
||||
// console.log(temp); |
||||
this.fileList.push(temp) |
||||
this.$message.success('上传成功') |
||||
this.$emit('input', this.fileList) |
||||
}, |
||||
// 删除文件 |
||||
handleDelete(index) { |
||||
this.fileList.splice(index, 1) |
||||
this.$emit('input', this.fileList) |
||||
}, |
||||
// 获取文件名称 |
||||
getFileName(name) { |
||||
if (name.lastIndexOf('/') > -1) { |
||||
return name.slice(name.lastIndexOf('/') + 1).toLowerCase() |
||||
} else { |
||||
return '' |
||||
} |
||||
}, |
||||
reset() { |
||||
console.log('reset') |
||||
this.fileList = [] |
||||
}, |
||||
}, |
||||
// 上传成功回调 |
||||
handleUploadSuccess(res, file) { |
||||
this.$message.success("上传成功"); |
||||
this.$emit("input", res.url); |
||||
created() { |
||||
this.fileList = this.value |
||||
// console.log(this.fileList) |
||||
}, |
||||
// 删除文件 |
||||
handleDelete(index) { |
||||
this.fileList.splice(index, 1); |
||||
this.$emit("input", ''); |
||||
}, |
||||
// 获取文件名称 |
||||
getFileName(name) { |
||||
if (name.lastIndexOf("/") > -1) { |
||||
return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); |
||||
} else { |
||||
return ""; |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
this.fileList = this.list; |
||||
}, |
||||
}; |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.upload-file-uploader { |
||||
margin-bottom: 5px; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.upload-file-list .el-upload-list__item { |
||||
border: 1px solid #e4e7ed; |
||||
line-height: 2; |
||||
margin-bottom: 10px; |
||||
position: relative; |
||||
border: 1px solid #e4e7ed; |
||||
line-height: 2; |
||||
margin-bottom: 10px; |
||||
position: relative; |
||||
} |
||||
|
||||
.upload-file-list .ele-upload-list__item-content { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
color: inherit; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
color: inherit; |
||||
} |
||||
|
||||
.ele-upload-list__item-content-action .el-link { |
||||
margin-right: 10px; |
||||
margin-right: 10px; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,90 @@ |
||||
<template> |
||||
<div class="singInWrapper"> |
||||
<div class="expBtn"> |
||||
<el-button icon="el-icon-download" type="warning" size="small" style="margin-bottom:20px" @click="excelExport" |
||||
>导出为excel</el-button |
||||
> |
||||
</div> |
||||
<el-table v-loading="loading" :data="signinList"> |
||||
<el-table-column label="序号" type="index" /> |
||||
<el-table-column label="学生姓名" prop="studentName" align="center" /> |
||||
<el-table-column label="学号" prop="studentCode" align="center" /> |
||||
<el-table-column label="手机号" prop="mobile" align="center"> </el-table-column> |
||||
<!-- <el-table-column label="签到总次数" prop="createTime" align="center"></el-table-column> --> |
||||
<el-table-column label="实际签到次数" prop="signCount" align="center"></el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="signIninit" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getAttendanceList, delAttendance, exportAttendance } from '@/api/trainService/index' |
||||
import { saveAs } from 'file-saver' |
||||
|
||||
export default { |
||||
created() { |
||||
const query = this.$route.query |
||||
this.name = query.name |
||||
this.id = query.id |
||||
this.signIninit() |
||||
}, |
||||
props: {}, |
||||
data() { |
||||
return { |
||||
name: '', |
||||
id: '', |
||||
loading: false, |
||||
total: 0, |
||||
signinList: [], |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}, |
||||
} |
||||
}, |
||||
methods: { |
||||
async signIninit() { |
||||
const res = await getAttendanceList(this.id) |
||||
this.total = res.total |
||||
this.signinList = res.rows |
||||
}, |
||||
async excelExport() { |
||||
const res = await exportAttendance(this.id) |
||||
const blob = new Blob([res]) |
||||
saveAs(blob, this.name + '考勤表.xlsx') |
||||
}, |
||||
toDelSignInItem(params) { |
||||
this.$confirm('是否确认删除', '警告', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}) |
||||
.then(function () { |
||||
return delAttendance(params.signId) |
||||
}) |
||||
.then(() => { |
||||
this.signIninit() |
||||
this.$message.success('删除成功') |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.singInWrapper { |
||||
padding: 20px; |
||||
.expBtn { |
||||
display: flex; |
||||
margin: 5px; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
</style> |
||||
|
Before Width: | Height: | Size: 288 KiB |
|
Before Width: | Height: | Size: 293 KiB |
|
Before Width: | Height: | Size: 573 KiB |
|
Before Width: | Height: | Size: 501 KiB |
@ -0,0 +1,96 @@ |
||||
<template> |
||||
<div class="singInWrapper"> |
||||
<div class="expBtn"> |
||||
<el-button icon="el-icon-download" type="warning" size="small" style="margin-bottom:20px" @click="excelExport" |
||||
>导出为excel</el-button |
||||
> |
||||
</div> |
||||
<el-table v-loading="loading" :data="signinList"> |
||||
<el-table-column label="序号" type="index" /> |
||||
<el-table-column label="学生姓名" prop="studenName" align="center" /> |
||||
<el-table-column label="学号" prop="studenCode" align="center" /> |
||||
<el-table-column label="手机号" prop="mobile" align="center"> </el-table-column> |
||||
<el-table-column label="时间" prop="createTime" align="center"></el-table-column> |
||||
<el-table-column label="操作" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button size="mini" type="text" @click="delSignInItem(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="signIninit" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getSigninInfo, delSigninItem, exportSignIn } from '@/api/trainService/index' |
||||
import { saveAs } from 'file-saver' |
||||
|
||||
export default { |
||||
created() { |
||||
const query = this.$route.query |
||||
this.name = query.name |
||||
this.id = query.id |
||||
this.signIninit() |
||||
}, |
||||
props: {}, |
||||
data() { |
||||
return { |
||||
name: '', |
||||
id: '', |
||||
loading: false, |
||||
total: 0, |
||||
signinList: [], |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}, |
||||
} |
||||
}, |
||||
methods: { |
||||
async signIninit() { |
||||
console.log(this.id) |
||||
const res = await getSigninInfo(this.id) |
||||
this.total = res.total |
||||
this.signinList = res.rows |
||||
}, |
||||
async excelExport() { |
||||
const res = await exportSignIn(this.id) |
||||
const blob = new Blob([res]) |
||||
saveAs(blob, this.name + '签到记录.xlsx') |
||||
//this.$route.query.name |
||||
// this.download(res) |
||||
}, |
||||
delSignInItem(params) { |
||||
this.$confirm('是否确认删除', '警告', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning', |
||||
}) |
||||
.then(function () { |
||||
return delSigninItem(params.signId) |
||||
}) |
||||
.then(() => { |
||||
this.signIninit() |
||||
this.$message.success('删除成功') |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.singInWrapper { |
||||
padding: 20px; |
||||
.expBtn { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 5px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue