feat: v3版疗休养
This commit is contained in:
+104
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
基地信息
|
||||
</h3>
|
||||
</div>
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item label="年度">{{ viewData.year }}</el-descriptions-item>
|
||||
<el-descriptions-item label="排序编号">{{ viewData.sortNumber }}</el-descriptions-item>
|
||||
<el-descriptions-item label="酒店名称">{{ viewData.baseName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="区域性质">{{ viewData.regionalNature }}</el-descriptions-item>
|
||||
<!-- （校工会创建AND自由模式） OR （分工会创建） -->
|
||||
<!-- <template v-if="(viewData.createMode === 2 && viewData.signUpMode === 2 ) || viewData.createMode === 1">-->
|
||||
<!--<el-descriptions-item label="出行天数">{{ viewData.regionalNature=5?"五天四夜":"三天两夜" }}</el-descriptions-item>-->
|
||||
<el-descriptions-item label="标段时间">
|
||||
<div v-for="item in modifyBdList">
|
||||
<span v-if="viewData.lotId===item.id">{{ item.lotName }}</span>
|
||||
</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="预计费用（元）">{{ viewData.estimatedCost }}</el-descriptions-item>
|
||||
<el-descriptions-item label="酒店联系人">{{ viewData.baseContactPerson }}</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人电话">{{ viewData.baseContactNumber }}</el-descriptions-item>
|
||||
<el-descriptions-item label="报名开始时间">{{ viewData.signUpStartTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="报名结束时间">{{ viewData.signUpEndTime }}</el-descriptions-item>
|
||||
<el-descriptions-item :span="2" label="变更截至时间">{{ viewData.changeEndTime }}</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="活动开始时间">{{ viewData.activityStartTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="活动结束时间">{{ viewData.activityEndTime }}</el-descriptions-item>
|
||||
|
||||
|
||||
<!--</template>-->
|
||||
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
旅行社信息
|
||||
</h3>
|
||||
</div>
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item :span="2" label="旅行社名称">
|
||||
{{ viewData.travelAgency.travelAgencyName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人">{{ viewData.travelAgency.contact }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电话">{{ viewData.travelAgency.contactMobileNumber }}</el-descriptions-item>
|
||||
<el-descriptions-item label="邮箱">{{ viewData.travelAgency.email }}</el-descriptions-item>
|
||||
<el-descriptions-item label="官网">
|
||||
<a :href="viewData.travelAgency.officialWebsite" class="text-primary" target="_blank">
|
||||
{{ viewData.travelAgency.officialWebsite }}
|
||||
</a>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="panel panel-default mt20" style="border-color: #ebeef5">
|
||||
<div class="panel-heading" style="background: #fafafa;border-color: #ebeef5">
|
||||
<h3 class="panel-title">
|
||||
详细信息
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div v-html="viewData.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "BaseManageInfo",
|
||||
data() {
|
||||
return {
|
||||
viewData: {
|
||||
travelAgency: {}
|
||||
},
|
||||
modifyBdList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openView(id, obj) {
|
||||
this.modifyBdList = obj
|
||||
this.findOne(id)
|
||||
},
|
||||
async findOne(id) {
|
||||
const res = await $.get('/platform/staffTherapyRecuperation/baseManagement/selectBaseManageById/' + id)
|
||||
if (res.code === 0) {
|
||||
this.viewData = res.data
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.viewTable .el-descriptions__table {
|
||||
table-layout: fixed !important;
|
||||
}
|
||||
|
||||
.viewTable .el-descriptions-item__cell {
|
||||
text-align: center !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
*Desc:
|
||||
*Create by: jug
|
||||
*Create time:2023/11/10/11:07
|
||||
*/
|
||||
<template>
|
||||
<div class="el-descriptions">
|
||||
<div class="el-descriptions__body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-descriptions__table {
|
||||
table-layout: fixed;
|
||||
!important;
|
||||
}
|
||||
|
||||
.el-descriptions table {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.el-descriptions__body table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.el-descriptions :not(.is-bordered) th, td {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.el-descriptions .is-bordered th, td {
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
.el-descriptions__body table th, td {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.el-descriptions__body table th {
|
||||
font-weight: 400;
|
||||
color: #909399;
|
||||
background: #fafafa;
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 12px 10px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.el-descriptions__body table td .el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-descriptions__body table td .is-required .el-form-item__error {
|
||||
background: #303133;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
z-index: 2000;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
min-width: 10px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.el-descriptions .el-date-editor.el-input, .el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<el-drawer title="参加人员范围设置" :visible.sync="userScopeDialog" size="90%" :append-to-body="true" @closed="$emit('group_change')">
|
||||
<iframe v-if="userScopeDialog" src="/platform/activity/basic/scope" title="参加人员范围设置" style="width:100%;height:calc(100vh - 90px);border:0"></iframe>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() { return {userScopeDialog: false}; }
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<el-tabs tab-position="top" v-model="activeName" v-loading="loading">
|
||||
<el-tab-pane label="报名信息" name="1">
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
本人信息
|
||||
</h3>
|
||||
</div>
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item label="一卡通号">{{ viewData.loginName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="姓名">{{ viewData.userName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="性别">{{ viewData.sex }}</el-descriptions-item>
|
||||
<el-descriptions-item label="身份证号">{{ viewData.idCard }}</el-descriptions-item>
|
||||
<el-descriptions-item label="单位">{{ viewData.unitName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工会">{{ viewData.unionName }}</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="是否转入转出">
|
||||
<span class="label label-primary">
|
||||
<sapn v-if="viewData.takePartInUnionId!=union_id">转出报名</sapn>
|
||||
<sapn v-else-if="viewData.selfUnionId!=union_id">转入报名</sapn>
|
||||
<sapn v-else>本公会报名</sapn>
|
||||
</span>
|
||||
</el-descriptions-item>-->
|
||||
|
||||
<el-descriptions-item label="报名时间">{{ viewData.signingUptime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="参加活动时间">{{
|
||||
viewData.specificTime ? viewData.specificTime : '暂未更新'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="实际出行时间">{{
|
||||
viewData.takePartInTime ? viewData.takePartInTime : '暂未更新'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
|
||||
|
||||
<el-descriptions-item v-if="viewData.lineName" label="线路名称">{{ viewData.lineName }}</el-descriptions-item>
|
||||
<el-descriptions-item v-if="viewData.lineName" label="旅行社名称">{{ viewData.travelAgencyName }}</el-descriptions-item>
|
||||
<el-descriptions-item v-else label="旅行社名称">{{ viewData.joinTravelAgencyName }}</el-descriptions-item>
|
||||
<template v-if="configData.familyInfo == 2">
|
||||
<el-descriptions-item label="是否携带家属">
|
||||
<span class="label label-primary">
|
||||
{{ viewData.companionList && viewData.companionList.length > 0 ? '携带' : '未携带' }}
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="床型">{{ viewData.bedInfo?.bedType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="床位">{{
|
||||
viewData.bedInfo?.bedNum ? viewData.bedInfo?.bedNum : '暂无'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="意向拼床人">
|
||||
{{ viewData.bedInfo?.otherSleepUser ? viewData.bedInfo?.otherSleepUser : '暂无' }}
|
||||
</el-descriptions-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-descriptions-item label="家属人数">{{ viewData.familyNumber }}</el-descriptions-item>
|
||||
</template>
|
||||
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<div v-if="configData.familyInfo === 2" class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
同伴信息
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="border: 1px solid rgb(235, 238, 245)">
|
||||
<el-table :data="viewData.companionList">
|
||||
<el-table-column label="姓名" prop="userName"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex"></el-table-column>
|
||||
<el-table-column label="身份证号" prop="idCard"></el-table-column>
|
||||
<el-table-column label="年龄" prop="age"></el-table-column>
|
||||
<el-table-column label="床型" prop="bedType">
|
||||
<template scope="{row}">
|
||||
{{ row.bedInfo?.bedType }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="床位" prop="bedNum">
|
||||
<template scope="{row}">
|
||||
{{ row.bedInfo?.bedNum }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="意向拼床人" prop="otherSleepUser">
|
||||
<template scope="{row}">
|
||||
{{ row.bedInfo?.otherSleepUser ? row.bedInfo?.otherSleepUser : '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关系" prop="relation"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="所属分工会审核信息" name="2" v-if="viewData.selfUnionAuditId">
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
审核信息
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item label="审核人">
|
||||
{{ viewData.selfUnionAudit.username }}({{ viewData.selfUnionAudit.loginname }})
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="审核时间">{{ viewData.selfUnionAudit.auditTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="审核意见">{{ viewData.selfUnionAudit.auditOpinion }}</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="意向线路分工会审核信息" name="3" v-if="viewData.joinLineUnionAuditId">
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
审核信息
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item label="审核人">
|
||||
{{ viewData.joinLineUnionAudit.username }}({{ viewData.joinLineUnionAudit.loginname }})
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="审核时间">{{ viewData.joinLineUnionAudit.auditTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="审核意见">{{ viewData.joinLineUnionAudit.auditOpinion }}</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<slot name="handle"></slot>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {
|
||||
union_id: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
components: {
|
||||
'line-info': httpVueLoader('/components/staffbenefit/therapyRecuperation/LineInfo.vue')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "1",
|
||||
viewData: {
|
||||
companionList: [],
|
||||
bedInfo: {},
|
||||
},
|
||||
loading: false,
|
||||
configData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async findOne(id) {
|
||||
this.loading = true
|
||||
const resp = await $.get("/platform/staffTherapyRecuperation/TheRapyAudit/findOne", {id})
|
||||
this.loading = false
|
||||
if (resp.code === 0) {
|
||||
this.viewData = resp.data.viewData
|
||||
} else {
|
||||
this.viewData = {}
|
||||
this.$notify.warning({title: '警告', message: resp.data})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
openView(id) {
|
||||
this.findOne(id)
|
||||
},
|
||||
openAudit(id, activeName) {
|
||||
this.findOne(id)
|
||||
this.activeName = activeName
|
||||
},
|
||||
async getConfigData() {
|
||||
const resp = await $.get('/platform/staffTherapyRecuperation/TheRapyConfig/findOne')
|
||||
this.configData = resp.data
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
await this.getConfigData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="view">
|
||||
<a v-for="file in files" :key="file.id || file.filepath" :href="file.filepath || preview(file.id)" target="_blank" style="display:block">{{ file.filename || file.name }}</a>
|
||||
</div>
|
||||
<el-upload v-else action="/platform/staffTherapyRecuperation/common/uploadFile" name="file"
|
||||
:limit="max" :multiple="max > 1" :file-list="fileList" :drag="card"
|
||||
:before-upload="beforeUpload" :on-success="success" :on-remove="remove" :on-preview="open">
|
||||
<el-button size="small" type="primary">选择文件</el-button>
|
||||
<div slot="tip"><slot></slot></div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {files: {type: Array, default: () => []}, view: Boolean, card: Boolean,
|
||||
max: {type: Number, default: 10}, type: Array, max_size: Number},
|
||||
data() { return {fileList: []}; },
|
||||
watch: {files: {immediate: true, deep: true, handler(files) {
|
||||
this.fileList = (files || []).map(file => ({name: file.filename || file.name, url: file.filepath || therapyPreview(file.id), rawInfo: file}));
|
||||
}}},
|
||||
methods: {
|
||||
preview: therapyPreview,
|
||||
beforeUpload(file) {
|
||||
const suffix = file.name.split('.').pop().toLowerCase();
|
||||
if (this.type && !this.type.includes(suffix)) { this.$message.warning('文件格式不符合要求'); return false; }
|
||||
if (this.max_size && file.size > this.max_size) { this.$message.warning('文件大小超过限制'); return false; }
|
||||
return true;
|
||||
},
|
||||
success(result, file, list) {
|
||||
if (result.code !== 0) { this.$message.error(result.msg); return; }
|
||||
file.rawInfo = result.data;
|
||||
this.emit(list);
|
||||
},
|
||||
remove(file, list) { this.emit(list); },
|
||||
emit(list) {
|
||||
this.$emit('update:files', list.map(file => file.rawInfo || file.response && file.response.data).filter(Boolean));
|
||||
},
|
||||
open(file) { window.open(file.url || file.rawInfo && file.rawInfo.filepath); }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="guava-main-content">
|
||||
<div v-show="v==='index'" key="index" class="transition-item">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<el-card v-show="v==='edit'" key="edit" shadow="never" class="animated-card">
|
||||
<template #header>
|
||||
<el-row type="flex">
|
||||
<el-col :span="12">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12" class="text-right">
|
||||
<slot name="edit_func"></slot>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<div :class="{'card_scroll':edit_scroll}">
|
||||
<slot name="edit"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-show="v==='view'" key="view" shadow="never" class="animated-card">
|
||||
<template #header>
|
||||
<el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="v='index'">返回</el-button>
|
||||
</template>
|
||||
<div :class="{'card_scroll':edit_scroll}">
|
||||
<slot name="view"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-show="v==='public'" key="public" shadow="never" class="animated-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-button icon="el-icon-back" style="font-size: 16px" type="text" @click="back()">返回
|
||||
</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<slot name="public"></slot>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: 'index'
|
||||
},
|
||||
//为true的时候页面不会滚动 card-body滚动 edit view 自己来控制
|
||||
edit_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
view_scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v: 'index',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
v(newValue, oldValue) {
|
||||
this.$emit('vchange', {newValue, oldValue})
|
||||
this.$emit('input', newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
index() {
|
||||
this.v = 'index'
|
||||
},
|
||||
edit() {
|
||||
this.v = 'edit'
|
||||
},
|
||||
view() {
|
||||
this.v = 'view'
|
||||
},
|
||||
public() {
|
||||
this.v = 'public'
|
||||
},
|
||||
back() {
|
||||
this.v = 'index'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.guava-main-content {
|
||||
padding: 10px 12px;
|
||||
background-color: #f6f6f6;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.animated-card {
|
||||
animation-name: cardAnimation;
|
||||
animation-duration: .5s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes cardAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 5px 20px !important;
|
||||
}
|
||||
|
||||
.el-tabs--border-card {
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
.card_scroll {
|
||||
max-height: calc(100vh - 50px - 20px - 54px - 40px - 5px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.card_scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar-vertical {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card_scroll::-webkit-scrollbar-horizontal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<el-upload action="/platform/staffTherapyRecuperation/common/uploadFile" name="file" list-type="picture-card"
|
||||
:file-list="fileList" :limit="limit" :before-upload="beforeUpload"
|
||||
:on-success="success" :on-remove="remove" :on-preview="open"
|
||||
:style="{'--therapy-width': width + 'px', '--therapy-height': height + 'px'}">
|
||||
<i class="el-icon-plus"></i>
|
||||
</el-upload>
|
||||
</template>
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {value: {type: Array, default: () => []}, limit: {type: Number, default: 1},
|
||||
width: {type: Number, default: 100}, height: {type: Number, default: 100}, fileType: Array, fileSize: Number},
|
||||
data() { return {fileList: []}; },
|
||||
watch: {value: {immediate: true, deep: true, handler(values) {
|
||||
this.fileList = (values || []).map((value, index) => ({name: '图片' + (index + 1), url: therapyPreview(value)}));
|
||||
}}},
|
||||
methods: {
|
||||
beforeUpload(file) {
|
||||
if (this.fileType && !this.fileType.includes(file.name.split('.').pop().toLowerCase())) {
|
||||
this.$message.warning('图片格式不符合要求'); return false;
|
||||
}
|
||||
if (this.fileSize && file.size > this.fileSize * 1024 * 1024) {
|
||||
this.$message.warning('图片大小超过限制'); return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
success(result, file, list) {
|
||||
if (result.code !== 0) { this.$message.error(result.msg); return; }
|
||||
file.url = result.data.filepath;
|
||||
this.emit(list);
|
||||
},
|
||||
remove(file, list) { this.emit(list); },
|
||||
emit(list) { this.$emit('input', list.map(file => file.response ? file.response.data.filepath : file.url)); },
|
||||
open(file) { window.open(file.url); }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-upload-list--picture-card .el-upload-list__item, .el-upload--picture-card {
|
||||
width: var(--therapy-width); height: var(--therapy-height); line-height: var(--therapy-height);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
线路信息
|
||||
</h3>
|
||||
</div>
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item label="年度">{{ viewData.year }}</el-descriptions-item>
|
||||
<el-descriptions-item label="编号">{{ viewData.serialNumber }}</el-descriptions-item>
|
||||
<el-descriptions-item label="线路名称">{{ viewData.lineName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="区域性质">{{ viewData.regionalNature }}</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="最少参与教工">{{ viewData.minimumGroupSize }}</el-descriptions-item>-->
|
||||
<!-- （校工会创建AND自由模式） OR （分工会创建） -->
|
||||
<!-- <template v-if="(viewData.createMode === 2 && viewData.signUpMode === 2 ) || viewData.createMode === 1">-->
|
||||
|
||||
<!-- <el-descriptions-item label="报名开始时间">{{ viewData.signUpStartTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="报名结束时间">{{ viewData.signUpEndTime }}</el-descriptions-item>
|
||||
<el-descriptions-item :span="2" label="变更截至时间">{{ viewData.changeEndTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="出行开始时间">{{ viewData.playStartTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="出行结束时间">{{ viewData.playEndTime }}</el-descriptions-item>-->
|
||||
|
||||
<!-- <el-descriptions-item label="交通工具">{{ viewData.trafficTools }}</el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item label="预计费用（元）">{{ viewData.estimatedCost }}</el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item label="预计人数（含家属）">{{ viewData.estimatedFamilyNumbers }}</el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item label=""></el-descriptions-item>-->
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default mt20" style="border:none" v-if="showTravelTimePeriod">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
出行时间段
|
||||
</h3>
|
||||
</div>
|
||||
<el-table :data="times" border>
|
||||
<el-table-column label="报名开始时间" prop="signUpStartTime" width="160"></el-table-column>
|
||||
<el-table-column label="报名结束时间" prop="signUpEndTime" width="160"></el-table-column>
|
||||
<el-table-column label="变更截至时间" prop="changeEndTime" width="160"></el-table-column>
|
||||
<el-table-column label="出行开始时间" prop="playStartTime" width="160"></el-table-column>
|
||||
<el-table-column label="出行结束时间" prop="playEndTime" width="160"></el-table-column>
|
||||
<el-table-column label="旅行社" prop="travelAgencyName" width="150"></el-table-column>
|
||||
<el-table-column label="联系人" prop="contact" width="100"></el-table-column>
|
||||
<el-table-column label="联系电话" prop="contactPhone" width="120"></el-table-column>
|
||||
<el-table-column label="负责人" prop="principal" width="100"></el-table-column>
|
||||
<el-table-column label="联系方式" prop="principalContact" width="120"></el-table-column>
|
||||
<el-table-column label="交通工具" prop="trafficTools" width="100"></el-table-column>
|
||||
<el-table-column label="预计费用（元/人次）" prop="estimatedCost" width="140"></el-table-column>
|
||||
<el-table-column label="最少成团人数(包括家属)" prop="estimatedFamilyNumbers" width="160"></el-table-column>
|
||||
<el-table-column label="最多人数" prop="maxPeopleNumber" width="100"></el-table-column>
|
||||
<el-table-column label="是否开启" width="80">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.enable ? '是' : '否' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="调剂报名截止时间" prop="adjustSignUpEndTime" width="160"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
旅行社信息
|
||||
</h3>
|
||||
</div>
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item :span="2" label="旅行社名称">
|
||||
旅行社表单已隐藏，查看页同步隐藏旅行社信息。
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
-->
|
||||
<div class="panel panel-default mt20" style="border-color: #ebeef5">
|
||||
<div class="panel-heading" style="background: #fafafa;border-color: #ebeef5">
|
||||
<h3 class="panel-title">
|
||||
线路内容
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div v-html="viewData.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "LineInfo",
|
||||
data() {
|
||||
return {
|
||||
viewData: {
|
||||
travelAgency:{}
|
||||
},
|
||||
//多个出行的时间段
|
||||
times: [],
|
||||
//分工会选择校工会的线路自己设置的时间信息等等。。。
|
||||
unionSelectLineData: {},
|
||||
//是否只看基本信息 因为出行时间针对每个分工会都不一样
|
||||
showTravelTimePeriod: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openView(lineId, usUnionId, mode, year) {
|
||||
this.findOne(lineId, usUnionId, mode, year)
|
||||
},
|
||||
async findOne(id, unionId, mode, year) {
|
||||
const resp = await $.get('/platform/staffTherapyRecuperation/line/selectLineInfoById/' + id)
|
||||
if (resp.code === 0) {
|
||||
this.viewData = resp.data
|
||||
//校工会创建 分工会选择 所以每个分工会的活动时间会不一样
|
||||
if (unionId) {
|
||||
this.showTravelTimePeriod = true
|
||||
await this.findUnionSelectLineData(id, unionId, mode, year)
|
||||
} else {
|
||||
this.showTravelTimePeriod = false
|
||||
}
|
||||
}
|
||||
},
|
||||
async findUnionSelectLineData(lineId, unionId, mode, year) {
|
||||
const resp = await $.post('/platform/staffTherapyRecuperation/lineFghSelect/selectLineInfo', {
|
||||
lineId: lineId,
|
||||
unionId: unionId,
|
||||
mode: mode,
|
||||
year: year
|
||||
})
|
||||
if (resp.code === 0 && resp.data) {
|
||||
this.times = resp.data
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.viewTable .el-descriptions__table {
|
||||
table-layout: fixed !important;
|
||||
}
|
||||
|
||||
.viewTable .el-descriptions-item__cell {
|
||||
text-align: center !important;
|
||||
}
|
||||
</style>
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<el-tabs tab-position="top" v-model="activeName" v-loading="loading">
|
||||
<el-tab-pane label="报名信息" name="1">
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
本人信息
|
||||
</h3>
|
||||
</div>
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item label="一卡通号">{{ viewData.loginName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="姓名">{{ viewData.userName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="性别">{{ viewData.sex }}</el-descriptions-item>
|
||||
<el-descriptions-item label="身份证号">{{ viewData.idCard }}</el-descriptions-item>
|
||||
<el-descriptions-item label="单位">{{ viewData.unitName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="工会">{{ viewData.unionName }}</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="是否转入转出">
|
||||
<span class="label label-primary">
|
||||
<sapn v-if="viewData.takePartInUnionId!=union_id">转出报名</sapn>
|
||||
<sapn v-else-if="viewData.selfUnionId!=union_id">转入报名</sapn>
|
||||
<sapn v-else>本公会报名</sapn>
|
||||
</span>
|
||||
</el-descriptions-item>-->
|
||||
|
||||
<el-descriptions-item label="报名时间">{{ viewData.signingUptime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="参加活动时间">{{
|
||||
viewData.specificTime ? viewData.specificTime : '暂未更新'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="实际出行时间">{{
|
||||
viewData.takePartInTime ? viewData.takePartInTime : '暂未更新'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
|
||||
|
||||
<el-descriptions-item label="线路名称">{{ viewData.lineName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="旅行社名称">{{ viewData.travelAgencyName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="是否携带家属">
|
||||
<span class="label label-primary">
|
||||
{{ viewData.isFamily ? '携带' : '未携带' }}
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="床型">{{ viewData.bedInfo?.bedType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="床位">{{
|
||||
viewData.bedInfo?.bedNum ? viewData.bedInfo?.bedNum : '暂无'
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="意向拼床人">
|
||||
{{ viewData.bedInfo?.otherSleepUser ? viewData.bedInfo?.otherSleepUser : '暂无' }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
同伴信息
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body" style="border: 1px solid rgb(235, 238, 245)">
|
||||
<el-table :data="viewData.companionList">
|
||||
<el-table-column label="姓名" prop="userName"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex"></el-table-column>
|
||||
<el-table-column label="身份证号" prop="idCard"></el-table-column>
|
||||
<el-table-column label="年龄" prop="age"></el-table-column>
|
||||
<el-table-column label="床型" prop="bedType">
|
||||
<template scope="{row}">
|
||||
{{ row.bedInfo?.bedType }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="床位" prop="bedNum">
|
||||
<template scope="{row}">
|
||||
{{ row.bedInfo?.bedNum }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="意向拼床人" prop="otherSleepUser">
|
||||
<template scope="{row}">
|
||||
{{ row.bedInfo?.otherSleepUser ? row.bedInfo?.otherSleepUser : '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关系" prop="relation"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="校工会审核信息" name="2" v-if="viewData.schoolUnionAudit">
|
||||
<div class="panel panel-default mt20" style="border: none">
|
||||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||||
<h3 class="panel-title">
|
||||
审核信息
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<el-descriptions :column="2" border class="viewTable">
|
||||
<el-descriptions-item label="审核人">
|
||||
{{ viewData.schoolUnionAudit.username }}({{ viewData.schoolUnionAudit.loginname }})
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="审核时间">{{ viewData.schoolUnionAudit.auditTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="审核意见">{{ viewData.schoolUnionAudit.auditOpinion }}</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<slot name="handle"></slot>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {
|
||||
union_id: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
components: {
|
||||
'line-info': httpVueLoader('/components/staffbenefit/therapyRecuperation/LineInfo.vue')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "1",
|
||||
viewData: {
|
||||
companionList: [],
|
||||
bedInfo: {},
|
||||
},
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async findOne(id) {
|
||||
this.loading = true
|
||||
const resp = await $.get("/platform/staffTherapyRecuperation/TheRapyAudit/findOne", {id})
|
||||
this.loading = false
|
||||
if (resp.code === 0) {
|
||||
this.viewData = resp.data.viewData
|
||||
} else {
|
||||
this.viewData = {}
|
||||
this.$notify.warning({title: '警告', message: resp.data})
|
||||
}
|
||||
},
|
||||
openView(id) {
|
||||
this.findOne(id)
|
||||
},
|
||||
openAudit(id, activeName) {
|
||||
this.findOne(id)
|
||||
this.activeName = activeName
|
||||
}
|
||||
},
|
||||
created() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header" v-if="$slots.header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="card-footer" v-if="$slots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "MCard"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom:1px dashed rgba(0,0,0,.125);
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.card-header:first-child {
|
||||
border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0
|
||||
}
|
||||
|
||||
.card-body>.van-cell{
|
||||
padding: 5px 0;
|
||||
}
|
||||
.card-body{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.card-header, .card-footer {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
+89
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="loader"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "MLoading"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loader {
|
||||
z-index: 10000;
|
||||
position: relative;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.loader:before, .loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 0.25em;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.loader:before {
|
||||
animation: before 2s infinite;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
animation: after 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes before {
|
||||
0% {
|
||||
width: 0.5em;
|
||||
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
|
||||
}
|
||||
35% {
|
||||
width: 2.5em;
|
||||
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
|
||||
}
|
||||
70% {
|
||||
width: 0.5em;
|
||||
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes after {
|
||||
0% {
|
||||
height: 0.5em;
|
||||
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
|
||||
}
|
||||
35% {
|
||||
height: 2.5em;
|
||||
box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
|
||||
}
|
||||
70% {
|
||||
height: 0.5em;
|
||||
box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempt to center the whole thing!
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.25em);
|
||||
left: calc(50% - 1.25em);
|
||||
}
|
||||
</style>
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<figure>
|
||||
<div class="dot white"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
</figure>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "MTableLoading"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
figure {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 6.250em;
|
||||
height: 6.250em;
|
||||
animation: rotate 2.4s linear infinite;
|
||||
}
|
||||
|
||||
.white {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
animation: flash 2.4s linear infinite;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
width: 2.4em;
|
||||
height: 2.4em;
|
||||
border-radius: 100%;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #FF4444;
|
||||
animation: dotsY 2.4s linear infinite;
|
||||
}
|
||||
|
||||
.dot:nth-child(3) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #FFBB33;
|
||||
animation: dotsX 2.4s linear infinite;
|
||||
}
|
||||
|
||||
.dot:nth-child(4) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #99CC00;
|
||||
animation: dotsY 2.4s linear infinite;
|
||||
}
|
||||
|
||||
.dot:nth-child(5) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #33B5E5;
|
||||
animation: dotsX 2.4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
10% {
|
||||
width: 6.250em;
|
||||
height: 6.250em;
|
||||
}
|
||||
66% {
|
||||
width: 2.4em;
|
||||
height: 2.4em;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
width: 6.250em;
|
||||
height: 6.250em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotsY {
|
||||
66% {
|
||||
opacity: .1;
|
||||
width: 2.4em;
|
||||
}
|
||||
77% {
|
||||
opacity: 1;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotsX {
|
||||
66% {
|
||||
opacity: .1;
|
||||
height: 2.4em;
|
||||
}
|
||||
77% {
|
||||
opacity: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
33% {
|
||||
opacity: 0;
|
||||
border-radius: 0%;
|
||||
}
|
||||
55% {
|
||||
opacity: .6;
|
||||
border-radius: 100%;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
+671
@@ -0,0 +1,671 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<van-uploader v-model="fileList" multiple
|
||||
:after-read="afterRead"
|
||||
@delete="doDelete"
|
||||
:max-count="max"
|
||||
:show-upload="!view"
|
||||
:deletable="!view"
|
||||
:max-size="max_size"
|
||||
:preview-options="{closeable:true}"
|
||||
@oversize="onOversize"
|
||||
@click-preview="clickPreview"
|
||||
:before-read="beforeRead"
|
||||
>
|
||||
</van-uploader>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* 文件类型解析
|
||||
* @type {{isImg: wpUploadFileTypeResolve.isImg}}
|
||||
*/
|
||||
let fileTypeResolving = {
|
||||
/**
|
||||
* 是否是一张图片
|
||||
*/
|
||||
isImg: function (fileItem) {
|
||||
return fileTypeResolving.resolvingByType(fileItem.type, /image\/(\w)*/)
|
||||
},
|
||||
/**
|
||||
* 通过后缀验证图片
|
||||
*/
|
||||
isImgByName: function (fileItemName) {
|
||||
let checkSuffixArray = ['jpg', 'png', 'jpeg', 'bmp', 'gif', 'webp', 'tif', 'svg', 'wmf'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray)
|
||||
},
|
||||
/**
|
||||
* 是否是视频
|
||||
*/
|
||||
isVideo: function (fileItem) {
|
||||
return fileTypeResolving.resolvingByType(fileItem.type, /video\/(\w)*/)
|
||||
},
|
||||
/**
|
||||
* 通过后缀验证图片
|
||||
*/
|
||||
isVideoByName: function (fileItemName) {
|
||||
let checkSuffixArray = ['mp4', 'Ogg', 'webm'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray)
|
||||
},
|
||||
/**
|
||||
* 是否是音频
|
||||
*/
|
||||
isAudio: function (fileItem) {
|
||||
return fileTypeResolving.resolvingByType(fileItem.type, /audio\/(\w)*/)
|
||||
},
|
||||
/**
|
||||
* 通过后缀验证图片
|
||||
*/
|
||||
isAudioByName: function (fileItemName) {
|
||||
let checkSuffixArray = ['mp3', 'ogg', 'wav'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray)
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否是doc文件
|
||||
*/
|
||||
isDoc: function (fileItemName) {
|
||||
let checkSuffixArray = ['doc', 'docx', 'dot', 'dotx'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
/**
|
||||
* 是否是excel文件
|
||||
*/
|
||||
isExcel: function (fileItemName) {
|
||||
let checkSuffixArray = ['xls', 'xlsx', 'csv', 'xlt', 'xltx'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
/**
|
||||
* 是否是PPT文件
|
||||
*/
|
||||
isPPT: function (fileItemName) {
|
||||
let checkSuffixArray = ['ppt', 'pptx', 'pot', 'potx', 'odp'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
/**
|
||||
* 是否是Pdf文件
|
||||
*/
|
||||
isPdf: function (fileItemName) {
|
||||
let checkSuffixArray = ['pdf'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
/**
|
||||
* 是否是压缩文件
|
||||
* @param fileItem
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isZip: function (fileItemName) {
|
||||
let checkSuffixArray = ['zip', '7z', 'war', 'tar', 'rar', 'jar', 'zipx', 'zix', 'zoo'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
isWeb: function (fileItemName) {
|
||||
let checkSuffixArray = ['html', 'htm'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
isTxt: function (fileItemName) {
|
||||
let checkSuffixArray = ['txt'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
isPsd: function (fileItemName) {
|
||||
let checkSuffixArray = ['psd'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
isCad: function (fileItemName) {
|
||||
let checkSuffixArray = ['cad'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
isIso: function (fileItemName) {
|
||||
let checkSuffixArray = ['iso'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
isExe: function (fileItemName) {
|
||||
let checkSuffixArray = ['exe'];
|
||||
return fileTypeResolving.resolvingByName(fileItemName, checkSuffixArray);
|
||||
},
|
||||
/**
|
||||
* 根据文件类型来解析
|
||||
* @param fileType 文件类型
|
||||
* @param checkTypeModel 文件类型模型，如：image\/(\w)*
|
||||
* @returns {boolean}
|
||||
*/
|
||||
resolvingByType: function (fileType, checkTypeModel) {
|
||||
if (checkTypeModel.test(fileType)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* 根据名字和名字后缀名来验证文件
|
||||
* @param fileName 文件名
|
||||
* @param checkSuffixArray 文件类型包含的后缀
|
||||
*/
|
||||
resolvingByName: function (fileName, checkSuffixArray) {
|
||||
let suffixName = wpUploadFileTools.getSuffixNameByFileName(fileName);
|
||||
// 名字是否有效
|
||||
if (!wpUploadDataValid.isValidStr(suffixName)) {
|
||||
// 无效直接返回false
|
||||
return false;
|
||||
}
|
||||
suffixName = suffixName.trim();
|
||||
suffixName = suffixName.toLowerCase();
|
||||
if (checkSuffixArray.indexOf(suffixName) != -1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件工具
|
||||
* @type {{}}
|
||||
*/
|
||||
let wpUploadFileTools = {
|
||||
/**
|
||||
* 获取文件显示模版
|
||||
* @param fileItem
|
||||
*/
|
||||
wapFileItemShow: function (fileItem) {
|
||||
return wpUploadFileTools.wapFileItemShowBase(fileItem, false);
|
||||
},
|
||||
/**
|
||||
* 包装已上传的文件列表
|
||||
*/
|
||||
wapFileItemShowWithUpload(uploadFile) {
|
||||
return wpUploadFileTools.wapFileItemShowBase(uploadFile, true);
|
||||
},
|
||||
/**
|
||||
* 获取文件显示的基本操作
|
||||
*/
|
||||
wapFileItemShowBase(fileItem, isUploaded = false) {
|
||||
let fileName = "";
|
||||
let suffix = "";
|
||||
let show = "";
|
||||
let showIcon = "";
|
||||
if (!isUploaded) {
|
||||
fileName = fileItem.name;
|
||||
suffix = wpUploadFileTools.getSuffixNameByFileName(fileName);
|
||||
show = wpUploadFileTools.resolvingShow(fileItem);
|
||||
showIcon = wpUploadFileShowResolving.getFileItemShowIcon(show, fileItem, false);
|
||||
} else {
|
||||
fileName = fileItem.name ? fileItem.name : wpUploadFileTools.resolvingUrlFileName(fileItem.url);
|
||||
let fileNameGetOFuRL = wpUploadFileTools.resolvingUrlFileName(fileItem.url);
|
||||
suffix = wpUploadFileTools.getSuffixNameByFileName(fileNameGetOFuRL);
|
||||
show = wpUploadFileTools.resolvingShowByFileName(fileNameGetOFuRL);
|
||||
showIcon = wpUploadFileShowResolving.getFileItemShowIcon(show, fileItem.url, true);
|
||||
}
|
||||
let fileItemShow = {
|
||||
// 文件的id
|
||||
id: wpUploadFileTools.uuid(),
|
||||
// 文件对象
|
||||
file: null,
|
||||
// 文件的类型
|
||||
type: null,
|
||||
// 文件的大小
|
||||
size: null,
|
||||
// 文件的名字
|
||||
name: fileName,
|
||||
// 文件地址
|
||||
url: null,
|
||||
// 后缀
|
||||
suffix: suffix,
|
||||
// 显示的类型
|
||||
show: show,
|
||||
// 显示的图标或者图片地址
|
||||
showIcon: showIcon,
|
||||
// 显示进度条
|
||||
processStatus: {
|
||||
show: false,
|
||||
width: 0,
|
||||
isFail: false
|
||||
},
|
||||
// 文件来源，0选择文件上传，1回显文件
|
||||
fileSource: 0,
|
||||
// 状态0未上传,失败也会转到0，1正在上传，2已经上传
|
||||
status: 0,
|
||||
// 上传文件的描述
|
||||
fileDes: null
|
||||
}
|
||||
if (!isUploaded) {
|
||||
// 如果非选择文件下面三个属性为null
|
||||
fileItemShow.file = fileItem;
|
||||
fileItemShow.type = fileItem.type;
|
||||
fileItemShow.size = fileItem.size;
|
||||
} else {
|
||||
// 文件描述
|
||||
fileItemShow.status = 2;
|
||||
fileItemShow.fileDes = fileItem;
|
||||
fileItemShow.fileSource = 1;
|
||||
fileItemShow.url = fileItem.url;
|
||||
}
|
||||
return fileItemShow;
|
||||
},
|
||||
/**
|
||||
* 解析URL的文件名字
|
||||
*/
|
||||
resolvingUrlFileName: function (fileUrl) {
|
||||
let index = fileUrl.lastIndexOf("/");
|
||||
if (index <= 0) {
|
||||
index = fileUrl.lastIndexOf("\\");
|
||||
}
|
||||
index = index + 1;
|
||||
let fileName = fileUrl.substring(index, fileUrl.length);
|
||||
return fileName;
|
||||
},
|
||||
/**
|
||||
* 获取文件名后缀
|
||||
* @param fileName 文件名全名
|
||||
* */
|
||||
getSuffixNameByFileName: function (fileName) {
|
||||
let str = fileName;
|
||||
let index = str.lastIndexOf(".");
|
||||
if (index < 0) {
|
||||
return "";
|
||||
}
|
||||
let pos = index + 1;
|
||||
return str.substring(pos, str.length);
|
||||
},
|
||||
/**
|
||||
* 解析显示类型
|
||||
* @param fileItem 文件
|
||||
* @returns {number}
|
||||
*/
|
||||
resolvingShow: function (fileItem) {
|
||||
// 默认0普通文件
|
||||
let showResult = 0;
|
||||
if (wpUploadFileTypeResolving.isImg(fileItem)) {
|
||||
showResult = 1;
|
||||
} else if (wpUploadFileTypeResolving.isVideo(fileItem)) {
|
||||
showResult = 2;
|
||||
} else if (wpUploadFileTypeResolving.isAudio(fileItem)) {
|
||||
showResult = 3;
|
||||
} else if (wpUploadFileTypeResolving.isDoc(fileItem.name)) {
|
||||
showResult = 4;
|
||||
} else if (wpUploadFileTypeResolving.isExcel(fileItem.name)) {
|
||||
showResult = 5;
|
||||
} else if (wpUploadFileTypeResolving.isPPT(fileItem.name)) {
|
||||
showResult = 6;
|
||||
} else if (wpUploadFileTypeResolving.isPdf(fileItem.name)) {
|
||||
showResult = 7;
|
||||
} else if (wpUploadFileTypeResolving.isZip(fileItem.name)) {
|
||||
showResult = 8;
|
||||
} else if (wpUploadFileTypeResolving.isWeb(fileItem.name)) {
|
||||
showResult = 9;
|
||||
} else if (wpUploadFileTypeResolving.isTxt(fileItem.name)) {
|
||||
showResult = 10;
|
||||
} else if (wpUploadFileTypeResolving.isPsd(fileItem.name)) {
|
||||
showResult = 11;
|
||||
} else if (wpUploadFileTypeResolving.isCad(fileItem.name)) {
|
||||
showResult = 12;
|
||||
} else if (wpUploadFileTypeResolving.isIso(fileItem.name)) {
|
||||
showResult = 13;
|
||||
} else if (wpUploadFileTypeResolving.isExe(fileItem.name)) {
|
||||
showResult = 14;
|
||||
}
|
||||
return showResult
|
||||
},
|
||||
|
||||
/**
|
||||
* 解析显示类型
|
||||
* @param fileItem 文件
|
||||
* @returns {number}
|
||||
*/
|
||||
resolvingShowByFileName: function (fileItemName) {
|
||||
// 默认0普通文件
|
||||
let showResult = 0;
|
||||
if (wpUploadFileTypeResolving.isImgByName(fileItemName)) {
|
||||
showResult = 1;
|
||||
} else if (wpUploadFileTypeResolving.isVideoByName(fileItemName)) {
|
||||
showResult = 2;
|
||||
} else if (wpUploadFileTypeResolving.isAudioByName(fileItemName)) {
|
||||
showResult = 3;
|
||||
} else if (wpUploadFileTypeResolving.isDoc(fileItemName)) {
|
||||
showResult = 4;
|
||||
} else if (wpUploadFileTypeResolving.isExcel(fileItemName)) {
|
||||
showResult = 5;
|
||||
} else if (wpUploadFileTypeResolving.isPPT(fileItemName)) {
|
||||
showResult = 6;
|
||||
} else if (wpUploadFileTypeResolving.isPdf(fileItemName)) {
|
||||
showResult = 7;
|
||||
} else if (wpUploadFileTypeResolving.isZip(fileItemName)) {
|
||||
showResult = 8;
|
||||
} else if (wpUploadFileTypeResolving.isWeb(fileItemName)) {
|
||||
showResult = 9;
|
||||
} else if (wpUploadFileTypeResolving.isTxt(fileItemName)) {
|
||||
showResult = 10;
|
||||
} else if (wpUploadFileTypeResolving.isPsd(fileItemName)) {
|
||||
showResult = 11;
|
||||
} else if (wpUploadFileTypeResolving.isCad(fileItemName)) {
|
||||
showResult = 12;
|
||||
} else if (wpUploadFileTypeResolving.isIso(fileItemName)) {
|
||||
showResult = 13;
|
||||
} else if (wpUploadFileTypeResolving.isExe(fileItemName)) {
|
||||
showResult = 14;
|
||||
}
|
||||
return showResult
|
||||
},
|
||||
/**
|
||||
* 生成UUID
|
||||
* @returns {string}
|
||||
*/
|
||||
uuid: function () {
|
||||
let str = wpUploadFileTools.uuidFull();
|
||||
str = str.replace(/-/g, "");
|
||||
return str;
|
||||
},
|
||||
uuidFull() {
|
||||
let s = []
|
||||
let hexDigits = "0123456789abcdef"
|
||||
for (var i = 0; i < 36; i++) {
|
||||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
|
||||
}
|
||||
s[14] = "4"
|
||||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
|
||||
s[8] = s[13] = s[18] = s[23] = "-"
|
||||
let uuid = s.join("")
|
||||
return uuid
|
||||
},
|
||||
/**
|
||||
* 禁止某个dom的某个事件
|
||||
*/
|
||||
disableObjEvent(domObj, eventName) {
|
||||
domObj.addEventListener(eventName, function (e) {
|
||||
e.preventDefault();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据验证工具
|
||||
* @type {{isValid: wpUploadDataValid.isValid}}
|
||||
*/
|
||||
let wpUploadDataValid = {
|
||||
isValid: function (obj) {
|
||||
if (undefined === obj || null === obj) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
isValidStr: function (str) {
|
||||
let isValidObj = wpUploadDataValid.isValid(str);
|
||||
if (!isValidObj) {
|
||||
return isValidObj;
|
||||
}
|
||||
str = str.trim();
|
||||
if ("" == str || '' == str) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
isValidArray(array) {
|
||||
if (null == array || array == undefined || array.length <= 0) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
props: {
|
||||
files: Array,
|
||||
type: {
|
||||
type: Array,
|
||||
default: ['jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
max_size: {
|
||||
type: Number,
|
||||
default: 100 * 1024 * 1024
|
||||
},
|
||||
view: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
del: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
files(val) {
|
||||
this.updateFileList(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回布尔值
|
||||
beforeRead(file) {
|
||||
const lastIndexOf = file.name.lastIndexOf(".")
|
||||
const type = this.type.map(v => v.toLowerCase()).includes(file.name.substr(lastIndexOf + 1).toLowerCase())
|
||||
if (!type) {
|
||||
this.$message.warning(`上传文件只能是 ${this.type.map(v => v.toLowerCase()).join("/")} 格式!`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
getAccept() {
|
||||
return this.type.map(v => '.' + v).join(",")
|
||||
},
|
||||
onOversize() {
|
||||
this.$toast(`上传文件大小不能超过 ${this.max_size / 1024 / 1024} MB!`);
|
||||
},
|
||||
/**
|
||||
* 查看资源
|
||||
*/
|
||||
showSource(showItem) {
|
||||
const show = this.resolvingShowByFileName(showItem.filepath)
|
||||
if (show == 1 || show == 2 || show == 3) {
|
||||
$('.viewFile').viewer({
|
||||
url: 'src',
|
||||
});
|
||||
} else if (show == 4 || show == 5 || show == 7) {
|
||||
preview(showItem.filepath, showItem.id)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 解析显示类型
|
||||
* @param fileItem 文件
|
||||
* @returns {number}
|
||||
*/
|
||||
resolvingShowByFileName(fileItemName) {
|
||||
// 默认0普通文件
|
||||
let showResult = 0;
|
||||
if (fileTypeResolving.isImgByName(fileItemName)) {
|
||||
showResult = 1;
|
||||
} else if (fileTypeResolving.isVideoByName(fileItemName)) {
|
||||
showResult = 2;
|
||||
} else if (fileTypeResolving.isAudioByName(fileItemName)) {
|
||||
showResult = 3;
|
||||
} else if (fileTypeResolving.isDoc(fileItemName)) {
|
||||
showResult = 4;
|
||||
} else if (fileTypeResolving.isExcel(fileItemName)) {
|
||||
showResult = 5;
|
||||
} else if (fileTypeResolving.isPPT(fileItemName)) {
|
||||
showResult = 6;
|
||||
} else if (fileTypeResolving.isPdf(fileItemName)) {
|
||||
showResult = 7;
|
||||
} else if (fileTypeResolving.isZip(fileItemName)) {
|
||||
showResult = 8;
|
||||
} else if (fileTypeResolving.isWeb(fileItemName)) {
|
||||
showResult = 9;
|
||||
} else if (fileTypeResolving.isTxt(fileItemName)) {
|
||||
showResult = 10;
|
||||
} else if (fileTypeResolving.isPsd(fileItemName)) {
|
||||
showResult = 11;
|
||||
} else if (fileTypeResolving.isCad(fileItemName)) {
|
||||
showResult = 12;
|
||||
} else if (fileTypeResolving.isIso(fileItemName)) {
|
||||
showResult = 13;
|
||||
} else if (fileTypeResolving.isExe(fileItemName)) {
|
||||
showResult = 14;
|
||||
}
|
||||
return showResult
|
||||
},
|
||||
/**
|
||||
* 获取文件显示图标
|
||||
* @param filePath
|
||||
* @returns {string}
|
||||
*/
|
||||
getFileItemShowIcon(filePath) {
|
||||
let showIcon = '';
|
||||
switch (this.resolvingShowByFileName(filePath)) {
|
||||
case 0:
|
||||
showIcon = "#icon-yunpanlogo-3";
|
||||
break;
|
||||
// 图片
|
||||
case 1:
|
||||
showIcon = this.getImgShowIcon(filePath);
|
||||
break;
|
||||
// 视频
|
||||
case 2:
|
||||
showIcon = "#icon-yunpanlogo-6";
|
||||
break;
|
||||
// 音乐
|
||||
case 3:
|
||||
showIcon = "#icon-yunpanlogo-4";
|
||||
break;
|
||||
// doc
|
||||
case 4:
|
||||
showIcon = "#icon-yunpanlogo-2";
|
||||
break;
|
||||
// excel
|
||||
case 5:
|
||||
showIcon = "#icon-yunpanlogo-";
|
||||
break;
|
||||
// ppt
|
||||
case 6:
|
||||
showIcon = "#icon-yunpanlogo-1";
|
||||
break;
|
||||
// pdf
|
||||
case 7:
|
||||
showIcon = "#icon-yunpanlogo-12";
|
||||
break;
|
||||
// zip
|
||||
case 8:
|
||||
showIcon = "#icon-yasuobao";
|
||||
break;
|
||||
// web文件
|
||||
case 9:
|
||||
showIcon = "#icon-yunpanlogo-5";
|
||||
break;
|
||||
// txt文件
|
||||
case 10:
|
||||
showIcon = "#icon-yunpanlogo-7";
|
||||
break;
|
||||
// PSD
|
||||
case 11:
|
||||
showIcon = "#icon-yunpanlogo-10";
|
||||
break;
|
||||
// cad
|
||||
case 12:
|
||||
showIcon = "#icon-yunpanlogo-11";
|
||||
break;
|
||||
// ISO
|
||||
case 13:
|
||||
showIcon = "#icon-yunpanlogo-8";
|
||||
break;
|
||||
// 可执行
|
||||
case 14:
|
||||
showIcon = "#icon-yunpanlogo-9";
|
||||
break;
|
||||
// 普通文件
|
||||
default:
|
||||
showIcon = "#icon-yunpanlogo-3";
|
||||
}
|
||||
return showIcon;
|
||||
},
|
||||
/**
|
||||
* 获取图片的显示图标
|
||||
* @param fileItem
|
||||
* @returns {string|*}
|
||||
*/
|
||||
getImgShowIcon(fileItem) {
|
||||
return FILE_DOMAIN + fileItem;
|
||||
},
|
||||
change(fileList) {
|
||||
this.$emit("update:files", fileList.map(v => v.data))
|
||||
},
|
||||
afterRead(file) {
|
||||
file.status = 'uploading';
|
||||
file.message = '上传中...';
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append("file", file.file, file.file.name);
|
||||
|
||||
$.ajax({
|
||||
url: FILE_UPLOAD_ADDRESS,
|
||||
type: "post",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: (res) => {
|
||||
const {code, data} = res
|
||||
if (code === 0) {
|
||||
file.status = 'success';
|
||||
file.data = data
|
||||
this.change(this.fileList)
|
||||
}
|
||||
},
|
||||
error: (err) => {
|
||||
file.status = 'failed';
|
||||
file.message = '上传失败';
|
||||
}
|
||||
});
|
||||
},
|
||||
doDelete(file) {
|
||||
if (file.data) {
|
||||
const {filename, filepath} = file.data
|
||||
if (this.del) {
|
||||
$.post(FILE_DELETE_ADDRESS, {filepath})
|
||||
}
|
||||
this.change(this.fileList)
|
||||
}
|
||||
},
|
||||
clickPreview(file) {
|
||||
const {filepath, id} = file.data
|
||||
const show = this.resolvingShowByFileName(filepath)
|
||||
if (show == 4 || show == 5 || show == 7) {
|
||||
preview(filepath, id)
|
||||
}
|
||||
},
|
||||
updateFileList(val) {
|
||||
if (!val || !val.length) {
|
||||
this.fileList = []
|
||||
return
|
||||
}
|
||||
|
||||
this.fileList = val.map(v => {
|
||||
let url = ''
|
||||
if (this.resolvingShowByFileName(v.filename) == 1) {
|
||||
url = APP_DOMAIN + '/platform/staffTherapyRecuperation/common/preview?id=' + v.id
|
||||
console.log(url)
|
||||
return {data: v, url, isImage: true, file: {name: v.filename}, status: 'success'}
|
||||
}
|
||||
return {data: v, url, file: {name: v.filename}, status: 'success'}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.updateFileList(this.files)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.van-image-preview .van-image-preview__close-icon--top-right {
|
||||
font-size: 50px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user