缺点是父组件参数写太多，我同事说传一个最好（后来工作久了发现其实都可以）
后台页面
前台页面
共用对话框，后台无按钮，前台有
//共用组件代码
<template>
<div>
<el-dialog title="申请详情" :visible.sync="disabled" width="60%">
<el-row :gutter="20">
<el-col :span="16">
<div class="dia-title">申请信息</div>
<div class="apply-info">
<el-row class="info-row" :gutter="20">
<el-col :span="6"><div class="item-title">出发日期</div></el-col>
<el-col :span="6">
<div class="item-info">{{ current.cfrq }}</div>
</el-col>
<el-col :span="6"><div class="item-title">到达日期</div></el-col>
<el-col :span="6">
<div class="item-info">{{ current.ddrq }}</div>
</el-col>
</el-row>
<el-row class="info-row" :gutter="20">
<el-col :span="6"><div class="item-title">到校日期</div></el-col>
<el-col :span="6">
<div class="item-info">{{ current.dxrq || '无' }}</div>
</el-col>
<el-col :span="6"><div class="item-title">到校时间</div></el-col>
<el-col :span="6">
<div class="item-info">{{ current.dxsj || '无' }}</div>
</el-col>
</el-row>
<el-row class="info-row" :gutter="20">
<el-col :span="6"><div class="item-title">到达接送点</div></el-col>
<el-col :span="6">
<div class="item-info">{{ current.ddcz || '无' }}</div>
</el-col>
<el-col :span="6"><div class="item-title">随行人数</div></el-col>
<el-col :span="6">
<div class="item-info">{{ current.entourage || '无' }}</div>
</el-col>
</el-row>
<el-row class="info-row" :gutter="20">
<el-col :span="6"><div class="item-title">出发地址</div></el-col>
<el-col :span="18">
<div class="item-info">{{ current.prov + current.city + current.area + current.cfd }}</div>
</el-col>
</el-row>
<el-row class="info-row" :gutter="20">
<el-col :span="6"><div class="item-title">省外返校或途径省外</div></el-col>
<el-col :span="6">
<div v-if="current.is_outside == 0" class="item-info">否</div>
<div v-else class="item-info red-tips">是</div>
</el-col>
<el-col :span="6"><div class="item-title">是否高风险区</div></el-col>
<el-col :span="6">
<div v-if="current.sfgfxq == 0" class="item-info">否</div>
<div v-else class="item-info red-tips">是</div>
</el-col>
</el-row>
<el-row class="info-row" :gutter="20">
<el-col :span="6"><div class="item-title">杭州健康码</div></el-col>
<el-col :span="6">
<div class="item-info">{{ current.jkmys }}</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 16px">
<el-col :span="6"><div class="item-title">附件材料</div></el-col>
<el-col :span="18">
<el-image
v-for="(item, index) in curImgList"
:key="index"
:preview-src-list="curImgList"
:src="curImgList[index]"
style="width: 100px; margin-right: 16px"
/>
</el-col>
</el-row>
</div>
<div class="dia-title">行程信息</div>
<el-table
ref="multipleTable"
v-loading="detLoading"
border
:data="tripList"
row-key="id"
style="width: 100%; margin-bottom: 20px"
>
<el-table-column label="出发城市" prop="departure_city" />
<el-table-column label="到达城市" prop="arrival_city" />
<el-table-column label="出发时间" prop="kssj" />
<el-table-column label="出发时间" prop="jssj" />
<el-table-column label="交通工具" prop="jtfs" />
<el-table-column label="车（班）次" prop="cczw" />
</el-table>
</el-col>
<el-col :span="8">
<div class="dia-title">流程信息</div>
<div>
<el-timeline>
<el-timeline-item
v-for="(activity, index) in detInfo.threadlog"
:key="index"
:color="activity.color"
:size="activity.size"
:timestamp="activity.created_at"
:type="activity.type"
>
{{ activity.executor_xm }}
<span style="margin: 0 12px; color: #3080e8">结果：{{ activity.result || '' }}</span>
操作：{{ activity.current_desc }}
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-row>
<div v-if="tabIndex !== 10 && ifFrontpages" class="row-cent-cent" style="width: 100%; margin-top: 16px">
<!-- <div v-if="tabIndex === 10" class="row-cent-cent" style="width: 100%; margin-top: 16px">-->
<el-button type="primary" @click="myAuditApplyFor2(1, '')">审核</el-button>
<el-button type="warning" @click="myOpenDia = true">驳回</el-button>
</div>
</el-dialog>
<el-dialog v-if="ifFrontpages" title="驳回说明" :visible.sync="myOpenDia" width="30%">
<!-- <el-dialog title="驳回说明" :visible.sync="myOpenDia" width="30%">-->
<el-input v-model="myReason" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
<div class="row-cent-end" style="margin-top: 16px">
<el-button type="primary" @click="myAuditApplyFor1(-1, myReason)">驳回</el-button>
</div>
</el-dialog>
<el-dialog v-if="ifFrontpages" title="修改到校时间" :visible.sync="myOpenTimeDia" width="30%">
<!-- <el-dialog title="修改到校时间" :visible.sync="myOpenTimeDia" width="30%">-->
<el-date-picker v-model="myNewDxrq" placeholder="到校日期" type="date" value-format="yyyy-MM-dd" />
<div class="row-cent-end" style="margin-top: 16px">
<el-button type="primary" @click="mySubmitNewTime()">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'ApplicationDetail',
props: {
current: {
type: Array,
default: () => [],
},
curImgList: {
type: Array,
default: () => [],
},
detInfo: {
type: Array,
default: () => [],
},
tripList: {
type: Array,
default: () => [],
},
ifFrontpages: {
type: Boolean,
},
tabIndex: {
type: Number,
default: 0,
},
openDia: {
type: Boolean,
default: false,
},
openTimeDia: {
type: Boolean,
default: false,
},
reason: {
type: String,
default: '',
},
newDxrq: {
type: String,
default: '',
},
},
data() {
return {
disabled: false,
myOpenDia: false,
myReason: '',
myNewDxrq: '',
myOpenTimeDia: false,
}
},
created() {
this.myOpenDia = this.openDia
this.myReason = this.reason
this.myNewDxrq = this.newDxrq
this.myOpenTimeDia = this.openTimeDia
},
methods: {
showEdit() {
this.$nextTick(() => {
this.disabled = true
})
},
close() {
this.disabled = false
},
myAuditApplyFor1() {
this.$emit('my-event1', -1, this.myReason)
},
myAuditApplyFor2() {
this.$emit('my-event2', 1, '')
},
mySubmitNewTime() {
this.$emit('my-event3')
},
},
}
</script>
<style scoped lang="scss">
.more-popover {
font-size: 14px;
color: #3080e8;
}
.applyTable2 {
width: 100%;
margin-top: 20px;
td:nth-of-type(2n-1) {
background: #f5f7fa;
}
}
.dia-title {
margin-bottom: 24px;
font-weight: bold;
text-align: left;
}
.apply-info {
margin-bottom: 32px;
.item-title {
color: #303336;
}
.item-info {
color: #020a14ec;
}
.info-row {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #eee;
}
.red-tips {
color: #e83030;
}
}
</style>
//后台代码
<template>
<div ref="custom-table" class="custom-table-container">
<vab-query-form>
<vab-query-form-left-panel :span="24">
<div class="box">
<el-input
v-model="queryForm.keywords"
class="query-class"
placeholder="请输入姓名、手机号、证件号"
style="width: 220px; margin-right: 20px"
@change="getTableData"
>
<el-button slot="append" icon="el-icon-search" />
</el-input>
<el-date-picker
v-model="queryForm.ssnj"
placeholder="请选择年级"
type="year"
value-format="yyyy"
@change="getTableData()"
/>
<el-select
v-model="queryForm.departs_nums"
clearable
collapse-tags
filterable
multiple
placeholder="请选择学院"
style="margin-left: 20px"
@change="getTableData(), getDrop2()"
@remove-tag="ifDepartDropClear"
>
<el-option v-for="item in departDrop" :key="item.id" :label="item.title" :value="item.num" />
</el-select>
<!-- <el-select-->
<!-- v-model="queryForm.majors_nums"-->
<!-- clearable-->
<!-- collapse-tags-->
<!-- filterable-->
<!-- multiple-->
<!-- placeholder="请选择专业"-->
<!-- style="margin-left: 20px"-->
<!-- @change="getTableData(), getDrop3()"-->
<!-- >-->
<!-- <el-option v-for="item in majorDrop" :key="item.id" :label="item.title" :value="item.num" />-->
<!-- </el-select>-->
<el-select
v-model="queryForm.grades_nums"
clearable
collapse-tags
filterable
multiple
placeholder="请选择班级"
style="margin-left: 20px"
@change="getTableData"
>
<el-option v-for="item in classDrop" :key="item.id" :label="item.title" :value="item.num" />
</el-select>
<el-select
v-model="queryForm.ztms"
clearable
collapse-tags
filterable
placeholder="请选择审核状态"
style="margin-left: 20px"
@change="getTableData"
>
<el-option v-for="item in stateDrop" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button
:icon="isExtre ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
style="margin-bottom: 10px; margin-left: 20px"
type="primary"
@click="openExtre()"
>
高级选项
</el-button>
<el-button style="margin-left: 20px" type="primary" @click="downLoadFunc">导出</el-button>
</div>
<div ref="eb" class="extre-box">
<el-date-picker
v-model="queryForm.ksrq"
placeholder="开始日期"
style="margin-right: 20px; margin-bottom: 10px; width: 200px"
type="date"
value-format="yyyy-MM-dd"
@change="getTableData()"
/>
<el-date-picker
v-model="queryForm.jsrq"
placeholder="结束日期"
style="margin-right: 20px; margin-bottom: 10px; width: 200px"
type="date"
value-format="yyyy-MM-dd"
@change="getTableData()"
/>
<addressPicker @area="onChangeArea" @city="onChangeCity" @province="onChangeProvince" />
</div>
</vab-query-form-left-panel>
</vab-query-form>
<el-table ref="tableSort" :border="border" :data="tableData" :height="height" :size="lineHeight" :stripe="stripe">
<el-table-column
v-for="(item, index) in columns"
:key="index"
align="center"
:label="item.label"
:prop="item.prop"
:width="item.width"
>
<template #default="{ row }">
<div v-if="item.prop === 'xm'" class="linkStyle">
<a href="javascript:;" @click="getDialog(row)">{{ row[item.prop] }}</a>
</div>
<div v-else-if="item.prop === 'yxdxrq'">
<span>{{ row.approved_at || '' }}</span>
</div>
<span v-else>{{ row[item.prop] }}</span>
</template>
</el-table-column>
<template #empty>
<el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
</template>
</el-table>
<pagination
v-show="total > 0"
:limit.sync="queryForm.pageSize"
:page.sync="queryForm.page"
:page-sizes="[20, 30, 50, 100, 200, 300, 500]"
:total="total"
@pagination="fetchData"
/>
<application-detail
ref="applicationDetail"
:cur-img-list="curImgList"
:current="current"
:det-info="detInfo"
:if-frontpages="ifFrontpages"
:new-dxrq="newDxrq"
:open-dia="openDia"
:open-time-dia="openTimeDia"
:reason="reason"
:tab-index="tabIndex"
:trip-list="tripList"
/>
</div>
</template>
<script>
import { getDepartmentDrop, getGrades, getMajors } from '@/api/common'
import { getGeneralBackSchool } from '@/api/freshman'
import Pagination from '@/utils/Pagination'
import { backSchoolDet, exportExcelForBackSchool } from '@/api/frontpages'
import applicationDetail from '@/views/freshman/application/components/applicationDetail'
import _ from 'lodash'
import addressPicker from '@/views/frontpages/components/addressPicker'
export default {
name: 'Index',
components: {
Pagination,
applicationDetail,
addressPicker,
},
data() {
return {
queryForm: {
keywords: '',
ssnj: '', //年级
// majors_nums: '', //专业
grades_nums: '', //班级
departs_nums: '', //部门代码，学院
check_status: '',
page: 1,
pageSize: 20,
ztms: '',
ksrq: '',
jsrq: '',
prov: '',
city: '',
area: '',
},
tripList: [],
departDrop: [],
classDrop: [],
stateDrop: [
{ label: '处理中', value: '0' },
{ label: '用户撤销', value: '-2' },
{ label: '审核通过', value: '1' },
{ label: '不通过', value: '-1' },
],
tableData: [],
total: 0,
border: true,
height: this.$baseTableHeight(1),
stripe: false,
lineHeight: 'medium',
columns: [
{ label: '姓名', width: '100', prop: 'xm' },
{ label: '学号', width: 'auto', prop: 'xgh' },
{ label: '学院', width: 'auto', prop: 'departs_title' },
{ label: '班级', width: 'auto', prop: 'grades_title' },
{ label: '辅导员姓名', width: '100', prop: 'fdyxm' },
{ label: '省', width: '100', prop: 'prov' },
{ label: '市', width: '100', prop: 'city' },
{ label: '区', width: '100', prop: 'area' },
{ label: '出发地', width: 'auto', prop: 'cfd' },
{ label: '出发日期', width: 'auto', prop: 'cfrq' },
{ label: '到达日期', width: 'auto', prop: 'ddrq' },
{ label: '是否省外', width: 'auto', prop: 'is_outside' },
{ label: '审核状态', width: 'auto', prop: 'result' },
{ label: '允许到校日期', width: 'yxdxrq', prop: 'approved_at' },
],
disabled: false,
current: [],
curImgList: [],
detInfo: [],
ifFrontpages: false,
isExtre: false,
tabIndex: 0,
openDia: false,
reason: '',
newDxrq: '',
openTimeDia: false,
}
},
created() {
this.getDrop()
this.getTableData()
},
methods: {
getDialog(row) {
this.$refs['applicationDetail'].showEdit()
this.current = row
backSchoolDet(row.id).then((res) => {
this.detInfo = res.data
this.tripList = res.data.triplog
this.curImgList = []
this.detInfo.attachments.forEach((item) => {
this.curImgList.push(item.url)
})
})
},
handleClose() {
this.$refs['applicationDetail'].close()
},
getDrop() {
//班级
getGrades().then((res) => {
this.classDrop = res.data
})
//学院
getDepartmentDrop([2]).then((res) => {
this.departDrop = res.data
})
},
getDrop2() {
getMajors({ departs_nums: this.queryForm.departs_nums }).then((res) => {
this.majorDrop = res.data
})
getGrades({
majors_nums: this.queryForm.majors_nums,
departs_nums: this.queryForm.departs_nums,
}).then((res) => {
this.classDrop = res.data
})
},
getDrop3() {
getGrades({
majors_nums: this.queryForm.majors_nums,
}).then((res) => {
this.classDrop = res.data
})
},
ifDepartDropClear() {
if (this.queryForm.pyccms.length === 0 || this.queryForm.departs_nums.length === 0) {
this.getDrop2()
this.getDrop3()
}
},
getTableData() {
let data = _.cloneDeep(this.queryForm)
data.ztms = data.ztms ? [data.ztms] : []
this.queryForm.page = 1
getGeneralBackSchool(data).then((res) => {
this.tableData = res.data.data
this.total = res.data.total
})
},
onChangeProvince(data) {
this.queryForm.prov = data
this.getTableData()
},
onChangeArea(data) {
this.queryForm.area = data
this.getTableData()
},
onChangeCity(data) {
this.queryForm.city = data
this.getTableData()
},
async fetchData() {
const { data } = await getGeneralBackSchool(this.queryForm)
this.tableData = data.data
this.total = data.total
},
downLoadFunc() {
exportExcelForBackSchool(this.queryForm).then((res) => {
const data = res.data
var a = document.createElement('a')
document.body.appendChild(a)
a.href = data
a.click()
window.URL.revokeObjectURL(data)
})
},
openExtre() {
if (this.isExtre) {
this.$refs.eb.style.opacity = '0'
this.$refs.eb.style.height = '0'
this.isExtre = !this.isExtre
} else {
this.$refs.eb.style.opacity = '1'
this.$refs.eb.style.height = '42px'
this.isExtre = !this.isExtre
}
},
},
}
</script>
<style lang="scss" scoped>
.applyDialog {
.el-dialog__header {
padding: 0px;
}
.applyTable2 {
width: 100%;
margin-top: 20px;
td:nth-of-type(2n-1) {
background: #f5f7fa;
}
}
}
.linkStyle:hover {
text-decoration: underline;
}
.extre-box {
box-sizing: border-box;
width: 100%;
height: 0px;
opacity: 0;
overflow: hidden;
display: flex;
border-bottom: solid 1px #c2c2c2;
transition: all 0.3s;
}
</style>
//前台代码
<template>
<div class="frontpage-cont">
<Header :curindex="curindex" />
<div class="main-box">
<div class="route">
当前位置：
<a class="route-pot pointer" href="https://xssw.zjgsu.edu.cn/#/centre/home">首页</a>
>
<a class="route-pot pointer" href="https://xssw.zjgsu.edu.cn/#/apply/apply">我的应用</a>
>
<span class="route-pot">来校申请</span>
</div>
<div class="data-board-box">
<div class="box-top">
<div class="box-top-l">
<div class="item-top">
<h3>个人信息</h3>
</div>
<div v-loading="show_baseinfo" class="baseinfo-cont">
<div class="user-info">
<img
alt
class="user-avatar"
:src="mineInfo.avatar || defaultZjzp"
@error="mineInfo.avatar = defaultZjzp"
/>
<div class="user-baseinfo">
<span class="username">{{ mineInfo.name }}</span>
<div class="other-info">
<span class="info-cont">部门：</span>
<span>{{ mineInfo.departs_title }}</span>
</div>
<div class="other-info">
<span class="info-cont">电话：</span>
{{ mineInfo.sjh }}
</div>
</div>
</div>
</div>
</div>
<div class="box-top-r">
<div class="item-top">
<h3>数据统计</h3>
<a class="row-cent" href="#" target="_blank">
<img alt class="video-play-icon" src="@/assets/front_images/video_play.png" />
<span class="teaching-video">查看教学视频</span>
</a>
</div>
<div v-loading="totalData" class="baseinfo-cont">
<div></div>
<div class="pos-info">
<span class="pos-info-title">学生总数</span>
<p class="pos-num">
<span style="margin-right: 12px">
<span style="font-size: 32px; font-weight: bold">{{ dashboardData.all }}</span>
人
</span>
</p>
</div>
<div class="dash-line"></div>
<div class="pos-info">
<span class="pos-info-title">待报到人数</span>
<p class="pos-num">
<span style="margin-right: 12px">
<span style="font-size: 32px; font-weight: bold">{{ dashboardData.dbd }}</span>
人
</span>
</p>
</div>
<div class="dash-line"></div>
<div class="pos-info">
<span class="pos-info-title">在校人数</span>
<p class="pos-num">
<span style="margin-right: 12px">
<span style="font-size: 32px; font-weight: bold">{{ dashboardData.at_school }}</span>
人
</span>
</p>
</div>
<div class="dash-line"></div>
<div class="pos-info">
<span class="pos-info-title">申请中</span>
<p class="pos-num">
<span style="margin-right: 12px">
<span style="font-size: 32px; font-weight: bold">{{ dashboardData.sqz }}</span>
人
</span>
</p>
</div>
<div></div>
</div>
</div>
</div>
<div class="box-bottom">
<div class="dv-title" style="margin-bottom: 16px">
<span
v-for="(tab, index) in listCat"
:key="index"
class="normal-link"
:class="{ 'cur-link': tabIndex == index }"
@click="switchTab(tab, index)"
>
{{ tab.roles_name }}审核
</span>
<span class="normal-link" :class="{ 'cur-link': tabIndex == 10 }" @click="getRecord()">申请记录</span>
<div class="row-cent opt-btn-pos" style="margin-bottom: 10px">
<el-button v-if="tabIndex !== 10" plain type="primary" @click="auditApplyFor(1, '')">审核</el-button>
<el-button v-if="tabIndex !== 10" plain type="warning" @click="selectAudit()">驳回</el-button>
<el-button v-if="tabIndex !== 10 && approvedAuth" plain type="primary" @click="changeDxsj()">
修改时间
</el-button>
<el-button plain type="primary" @click="exportExcel()">导出</el-button>
</div>
</div>
<div class="row-cent">
<el-input
v-model="query.keywords"
placeholder="可输入姓名，学号"
style="width: 260px; margin-right: 20px; margin-bottom: 10px"
>
<el-button slot="append" class="el-icon-search" @click="getTableDatas" />
</el-input>
<el-date-picker
v-model="yearNum"
placeholder="选择所属年级"
style="margin-right: 20px; margin-bottom: 10px; width: 160px"
type="year"
value-format="yyyy"
@change="changeYear()"
/>
<el-select
v-model="query.departs_nums"
clearable
collapse-tags
filterable
multiple
placeholder="选择所属学院"
style="margin-right: 20px; margin-bottom: 10px; width: 200px"
@change="getTableDatas(), getGradeList()"
>
<el-option v-for="(drop, i) in departList" :key="i" :label="drop.short_title" :value="drop.num" />
</el-select>
<el-select
v-model="query.pyccms"
clearable
collapse-tags
filterable
multiple
placeholder="选择培养层次"
style="margin-right: 20px; margin-bottom: 10px; width: 160px"
@change="getTableDatas(), getGradeList()"
>
<el-option v-for="(drop, i) in pyccList" :key="i" :label="drop.title" :value="drop.num" />
</el-select>
<el-select
v-model="query.grades_nums"
clearable
collapse-tags
filterable
multiple
placeholder="选择所属班级"
style="margin-right: 20px; margin-bottom: 10px; width: 200px"
@change="getTableDatas()"
>
<el-option v-for="(drop, i) in gradeList" :key="i" :label="drop.title" :value="drop.num" />
</el-select>
<el-select
v-if="tabIndex == 10"
v-model="ztms"
clearable
placeholder="当前状态"
style="margin-right: 20px; margin-bottom: 10px; width: 160px"
@change="changeZtms()"
>
<el-option v-for="(drop, i) in statusList" :key="i" :label="drop.label" :value="drop.value" />
</el-select>
<el-button
:icon="isExtre ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
style="margin-bottom: 10px"
type="primary"
@click="openExtre()"
>
高级选项
</el-button>
</div>
<div ref="eb" class="extre-box">
<el-date-picker
v-model="query.ksrq"
placeholder="开始日期"
style="margin-right: 20px; margin-bottom: 10px; width: 200px"
type="date"
value-format="yyyy-MM-dd"
@change="getTableDatas()"
/>
<el-date-picker
v-model="query.jsrq"
placeholder="结束日期"
style="margin-right: 20px; margin-bottom: 10px; width: 200px"
type="date"
value-format="yyyy-MM-dd"
@change="getTableDatas()"
/>
<addressPicker @area="onChangeArea" @city="onChangeCity" @province="onChangeProvince" />
</div>
<el-table
ref="multipleTable"
v-loading="tableloading"
border
:data="tableDatas"
row-key="id"
style="width: 100%; margin-bottom: 20px"
@selection-change="handleSelectionChange"
>
<el-table-column :reserve-selection="true" type="selection" width="40px" />
<el-table-column label="姓名" prop="xm" />
<el-table-column label="学号" prop="xgh" />
<el-table-column label="学院" prop="departs_title" />
<el-table-column label="班级" prop="grades_title" />
<el-table-column label="辅导员" prop="fdyxm" />
<el-table-column label="省" prop="prov" />
<el-table-column label="市" prop="city" />
<el-table-column label="区" prop="area" />
<el-table-column label="出发地" prop="cfd" />
<el-table-column label="出发日期" prop="cfrq" />
<el-table-column label="到达日期" prop="ddrq" />
<el-table-column label="是否省外" prop="is_outside" />
<el-table-column label="审核状态" prop="result" />
<el-table-column label="允许到校日期">
<template slot-scope="{ row }">
<span>{{ row.approved_at || '' }}</span>
</template>
</el-table-column>
<el-table-column label="操作栏">
<template slot-scope="{ row }">
<span class="more-popover" @click="openDet(row)">查看</span>
</template>
</el-table-column>
</el-table>
<div class="row-center-center" style="width: 100%; margin: 30px 0 20px">
<el-pagination
:current-page="query.page"
layout="total, sizes, prev, pager, next"
:page-size="100"
:page-sizes="[10, 20, 30, 40]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
</div>
</div>
<Footer />
<application-detail
ref="applicationDetail"
:cur-img-list="curImgList"
:current="current"
:det-info="detInfo"
:if-frontpages="ifFrontpages"
:new-dxrq="newDxrq"
:open-dia="openDia"
:open-time-dia="openTimeDia"
:reason="reason"
:tab-index="tabIndex"
:trip-list="tripList"
@my-event1="auditApplyFor"
@my-event2="auditApplyFor"
@my-event3="submitNewTime"
/>
</div>
</template>
<script>
import Header from './components/header/Header'
import Footer from './components/footer/Footer'
import addressPicker from './components/addressPicker/index.vue'
import applicationDetail from '@/views/freshman/application/components/applicationDetail'
import { getDepartmentDrop, getEducationLevels, getGrades } from '@/api/common'
import {
dashboardForBackSchool,
getBackSchool,
exportExcelForBackSchool,
auditForBackSchool,
backSchoolDet,
setApproved,
} from '@/api/frontpages'
export default {
components: {
Header,
Footer,
addressPicker,
applicationDetail,
},
data() {
return {
ifFrontpages: true,
curindex: 2,
defaultZjzp: require('@/assets/front_images/default_zjzp.png'),
mineInfo: '',
show_baseinfo: false,
totalData: false,
tableloading: false,
dashboardData: '',
hasAuth: true,
query: {
ssnj: '',
grades_nums: [],
pyccms: [],
departs_nums: [],
keywords: '',
roles_id: '',
prov: '',
city: '',
area: '',
// backstatus: false,
ztms: [],
ksrq: '',
jsrq: '',
is_outside: '',
pageSize: 10,
page: 1,
},
auditQuery: {
result: '',
message: '',
ids: [],
},
yearList: [],
departList: [],
pyccList: [],
gradeList: [],
statusList: [
{
label: '审核通过',
value: '1',
},
{
label: '处理中',
value: '0',
},
{
label: '不通过',
value: '-1',
},
{
label: '用户撤销',
value: '-2',
},
],
tableDatas: [],
selectList: [],
total: 1,
tabIndex: 0,
border: true,
detInfo: {},
height: this.$baseTableHeight(1),
disabled: false,
curImgList: [],
openDia: false,
reason: '',
yearNum: '',
listCat: [],
detLoading: false,
tripList: [],
isExtre: false,
ztms: '',
approvedAuth: false,
openTimeDia: false,
newDxrq: '',
current: [],
}
},
created() {
this.mineInfo = JSON.parse(localStorage.getItem('mineInfo')) || {}
this.getDashboard()
},
methods: {
getDashboard() {
this.totalData = true
dashboardForBackSchool().then((res) => {
this.hasAuth = res.data.app_auth
if (!this.hasAuth) {
this.$message({
message: res.message,
type: 'warning',
})
setTimeout(() => {
this.$router.go(-1)
})
} else {
this.totalData = false
this.dashboardData = res.data.databoard
this.listCat = res.data.listCat
this.query.roles_id = this.listCat[0].roles_id
this.approvedAuth = res.data.setApproved_auth
this.getTableDatas()
this.getDepartList()
this.getPyccList()
this.getGradeList()
}
})
},
getTableDatas() {
this.tableloading = true
getBackSchool(this.query).then((res) => {
this.tableloading = false
this.tableDatas = res.data.data
this.total = res.data.total
})
},
openDet(row) {
this.selectList = []
this.selectList.push(row.id)
this.$refs['applicationDetail'].showEdit()
this.current = row
this.disabled = true
this.detLoading = true
backSchoolDet(row.id).then((res) => {
this.detLoading = false
this.detInfo = res.data
this.tripList = res.data.triplog
this.curImgList = []
this.detInfo.attachments.forEach((item) => {
this.curImgList.push(item.url)
})
})
},
exportExcel() {
exportExcelForBackSchool(this.query).then((res) => {
const data = res.data
var a = document.createElement('a')
document.body.appendChild(a)
a.href = data
a.click()
window.URL.revokeObjectURL(data)
})
},
auditApplyFor(state, reason) {
// console.log(state, reason)
if (!this.selectList.length) {
this.$message({
message: '请选择学生',
offset: 130,
type: 'warning',
})
} else {
const loading = this.$loading({
lock: true,
text: '处理中',
})
let data = {
result: state,
message: reason,
ids: this.selectList,
}
// console.log('提交数据', data)
auditForBackSchool(data).then((res) => {
if (res.errorCode == 0) {
this.$message({
message: res.message,
type: 'success',
})
this.openDia = false
this.disabled = false
this.getTableDatas()
this.selectList = []
this.reason = ''
this.$refs.multipleTable.clearSelection()
} else {
this.$message({
message: res.message,
type: 'error',
})
}
loading.close()
})
}
},
changeDxsj() {
if (!this.selectList.length) {
this.$message({
message: '请选择学生',
offset: 130,
type: 'warning',
})
} else {
this.openTimeDia = true
}
},
submitNewTime() {
const loading = this.$loading({
lock: true,
text: '处理中',
})
let data = {
approved_at: this.newDxrq,
ids: this.selectList,
}
// console.log('提交数据', data)
setApproved(data).then((res) => {
if (res.errorCode == 0) {
this.$message({
message: res.message,
type: 'success',
})
this.openTimeDia = false
this.getTableDatas()
this.selectList = []
this.newDxrq = ''
this.$refs.multipleTable.clearSelection()
} else {
this.$message({
message: res.message,
type: 'error',
})
}
loading.close()
})
},
switchTab(tab, i) {
this.tabIndex = i
this.query.roles_id = tab.roles_id
this.getTableDatas()
},
handleSelectionChange(e) {
var selectList = []
e.forEach((item) => {
selectList.push(item.id)
})
this.selectList = selectList
},
handleSizeChange(val) {
this.query.pageSize = val
this.getTableDatas()
},
handleCurrentChange(val) {
this.query.page = val
this.getTableDatas()
},
changeYear() {
this.query.ssnj = this.yearNum
this.getTableDatas()
},
getDepartList() {
getDepartmentDrop([2]).then((res) => {
this.departList = res.data
})
},
getPyccList() {
getEducationLevels().then((res) => {
this.pyccList = res.data
})
},
getGradeList() {
let data = {
departs_nums: this.query.departs_nums,
pyccms: this.query.pyccms,
ssnj: this.query.ssnj,
}
getGrades(data).then((res) => {
this.gradeList = res.data
})
},
changeZtms() {
if (this.ztms !== '') {
this.query.ztms = [this.ztms]
} else {
this.query.ztms = []
}
this.getTableDatas()
},
getRecord() {
this.query.ssnj = '2020'
this.query.ztms = [0]
this.tabIndex = 10
this.resetQuery()
this.getTableDatas()
},
resetQuery() {
this.query = {
ssnj: '',
grades_nums: [],
pyccms: [],
departs_nums: [],
keywords: '',
roles_id: '',
prov: '',
city: '',
area: '',
// backstatus: false,
ztms: [],
ksrq: '',
jsrq: '',
is_outside: '',
pageSize: 10,
page: 1,
}
},
selectAudit() {
if (!this.selectList.length) {
this.$message({
message: '请选择学生',
offset: 130,
type: 'warning',
})
} else {
this.openDia = true
}
},
openExtre() {
if (this.isExtre) {
this.$refs.eb.style.opacity = '0'
this.$refs.eb.style.height = '0'
this.isExtre = !this.isExtre
} else {
this.$refs.eb.style.opacity = '1'
this.$refs.eb.style.height = '42px'
this.isExtre = !this.isExtre
}
},
onChangeProvince(data) {
this.query.prov = data
this.getTableDatas()
},
onChangeArea(data) {
this.query.area = data
this.getTableDatas()
},
onChangeCity(data) {
this.query.city = data
this.getTableDatas()
},
},
}
</script>
<style scoped lang="scss">
@import './css/common.scss';
.more-popover {
font-size: 14px;
color: #3080e8;
}
.applyTable2 {
width: 100%;
margin-top: 20px;
td:nth-of-type(2n-1) {
background: #f5f7fa;
}
}
.dia-title {
margin-bottom: 24px;
text-align: left;
font-weight: bold;
}
.apply-info {
margin-bottom: 32px;
.item-title {
color: #303336;
}
.item-info {
color: #020a14ec;
}
.info-row {
border-bottom: 1px solid #eee;
height: 40px;
line-height: 40px;
}
.red-tips {
color: #e83030;
}
}
.extre-box {
box-sizing: border-box;
width: 100%;
height: 0px;
opacity: 0;
overflow: hidden;
display: flex;
border-bottom: solid 1px #c2c2c2;
transition: all 0.3s;
}
</style>
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
