hcj
6 months ago
parent
70c85d086a
commit
146e23af91
@ -1,179 +1,217 @@ |
|||||||
<template> |
<template> |
||||||
<div class="upload-file"> |
<div class="upload-file"> |
||||||
<el-upload |
<el-upload |
||||||
:action="uploadFileUrl" |
:action="uploadFileUrl" |
||||||
:before-upload="handleBeforeUpload" |
:before-upload="handleBeforeUpload" |
||||||
:file-list="fileList" |
:file-list="fileList" |
||||||
:limit="1" |
:limit="limit" |
||||||
:on-error="handleUploadError" |
:on-error="handleUploadError" |
||||||
:on-exceed="handleExceed" |
:on-exceed="handleExceed" |
||||||
:on-success="handleUploadSuccess" |
:on-success="handleUploadSuccess" |
||||||
:show-file-list="false" |
:show-file-list="false" |
||||||
:headers="headers" |
:headers="headers" |
||||||
class="upload-file-uploader" |
class="upload-file-uploader" |
||||||
ref="upload" |
ref="upload" |
||||||
> |
> |
||||||
<!-- 上传按钮 --> |
<!-- 上传按钮 --> |
||||||
<el-button size="mini" type="primary">选取文件</el-button> |
<el-button size="mini" type="primary">选取文件</el-button> |
||||||
<!-- 上传提示 --> |
<!-- 上传提示 --> |
||||||
<div class="el-upload__tip" slot="tip" v-if="showTip"> |
<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="fileSize"> |
||||||
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> |
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
||||||
的文件 |
</template> |
||||||
</div> |
<template v-if="fileType"> |
||||||
</el-upload> |
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> |
||||||
|
</template> |
||||||
<!-- 文件列表 --> |
的文件 |
||||||
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> |
</div> |
||||||
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list"> |
</el-upload> |
||||||
<el-link :href="file.url" :underline="false" target="_blank"> |
<!-- 文件列表 --> |
||||||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span> |
<transition-group |
||||||
</el-link> |
class="upload-file-list el-upload-list el-upload-list--text" |
||||||
<div class="ele-upload-list__item-content-action"> |
name="el-fade-in-linear" |
||||||
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link> |
tag="ul" |
||||||
</div> |
> |
||||||
</li> |
<li |
||||||
</transition-group> |
:key="file.uid + ''" |
||||||
</div> |
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> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import { getToken } from "@/utils/auth"; |
import { getToken } from '@/utils/auth' |
||||||
|
|
||||||
export default { |
export default { |
||||||
props: { |
props: { |
||||||
// 值 |
// 值 |
||||||
value: [String, Object, Array], |
value: [String, Object, Array], |
||||||
// 大小限制(MB) |
// 大小限制(MB) |
||||||
fileSize: { |
fileSize: { |
||||||
type: Number, |
type: Number, |
||||||
default: 5, |
default: 5, |
||||||
}, |
}, |
||||||
// 文件类型, 例如['png', 'jpg', 'jpeg'] |
// 文件类型, 例如['png', 'jpg', 'jpeg'] |
||||||
fileType: { |
fileType: { |
||||||
type: Array, |
type: Array, |
||||||
default: () => ["doc", "xls", "ppt", "txt", "pdf"], |
default: () => ['doc', 'xls', 'ppt', 'txt', 'pdf'], |
||||||
}, |
}, |
||||||
// 是否显示提示 |
// 是否显示提示 |
||||||
isShowTip: { |
isShowTip: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
default: true |
default: true, |
||||||
} |
}, |
||||||
}, |
limit: { |
||||||
data() { |
type: Number, |
||||||
return { |
default: 1, |
||||||
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
}, |
||||||
headers: { |
|
||||||
Authorization: "Bearer " + getToken(), |
|
||||||
}, |
|
||||||
fileList: [], |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
// 是否显示提示 |
|
||||||
showTip() { |
|
||||||
return this.isShowTip && (this.fileType || this.fileSize); |
|
||||||
}, |
}, |
||||||
// 列表 |
data() { |
||||||
list() { |
return { |
||||||
let temp = 1; |
uploadFileUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址 |
||||||
if (this.value) { |
headers: { |
||||||
// 首先将值转为数组 |
Authorization: 'Bearer ' + getToken(), |
||||||
const list = Array.isArray(this.value) ? this.value : [this.value]; |
}, |
||||||
// 然后将数组转为对象数组 |
fileList: [], |
||||||
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; |
|
||||||
} |
} |
||||||
} |
|
||||||
return true; |
|
||||||
}, |
}, |
||||||
// 文件个数超出 |
computed: { |
||||||
handleExceed() { |
// 是否显示提示 |
||||||
this.$message.error(`只允许上传单个文件`); |
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 []; |
||||||
|
// } |
||||||
|
// }, |
||||||
}, |
}, |
||||||
// 上传失败 |
methods: { |
||||||
handleUploadError(err) { |
// 上传前校检格式和大小 |
||||||
this.$message.error("上传失败, 请重试"); |
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 = [] |
||||||
|
}, |
||||||
}, |
}, |
||||||
// 上传成功回调 |
created() { |
||||||
handleUploadSuccess(res, file) { |
this.fileList = this.value |
||||||
this.$message.success("上传成功"); |
// console.log(this.fileList) |
||||||
this.$emit("input", res.url); |
|
||||||
}, |
}, |
||||||
// 删除文件 |
} |
||||||
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> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||||
.upload-file-uploader { |
.upload-file-uploader { |
||||||
margin-bottom: 5px; |
margin-bottom: 5px; |
||||||
} |
} |
||||||
|
|
||||||
.upload-file-list .el-upload-list__item { |
.upload-file-list .el-upload-list__item { |
||||||
border: 1px solid #e4e7ed; |
border: 1px solid #e4e7ed; |
||||||
line-height: 2; |
line-height: 2; |
||||||
margin-bottom: 10px; |
margin-bottom: 10px; |
||||||
position: relative; |
position: relative; |
||||||
} |
} |
||||||
|
|
||||||
.upload-file-list .ele-upload-list__item-content { |
.upload-file-list .ele-upload-list__item-content { |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
align-items: center; |
align-items: center; |
||||||
color: inherit; |
color: inherit; |
||||||
} |
} |
||||||
|
|
||||||
.ele-upload-list__item-content-action .el-link { |
.ele-upload-list__item-content-action .el-link { |
||||||
margin-right: 10px; |
margin-right: 10px; |
||||||
} |
} |
||||||
</style> |
</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