|
|
@@ -1,11 +1,326 @@
|
|
|
<template>
|
|
|
<div class="group-progress">
|
|
|
- 团组进度总览
|
|
|
+ <el-collapse v-model="activeNames" @change="handleChange">
|
|
|
+ <el-collapse-item name="1">
|
|
|
+ <template #title>
|
|
|
+ <span style="font-size: 18px; font-weight: bold;">商邀报批流程</span>
|
|
|
+ </template>
|
|
|
+ <div class="process-diagram">
|
|
|
+ <div slot="reference" @mouseenter="item.content=='报批资料准备'?visible = true:''" @mouseleave="visible = false" :class="item.done?'process-diagram-lis':'process-diagram-li'" v-for="(item,index) in activities" :key="index">
|
|
|
+ <el-popover
|
|
|
+ v-if="item.content=='报批资料准备'"
|
|
|
+ placement="top"
|
|
|
+ title="PS"
|
|
|
+ width="200"
|
|
|
+ trigger="manual"
|
|
|
+ content="其中包含：机构筛选、邮件对接、报批行程及请示、完成公务对接等"
|
|
|
+ v-model="visible">
|
|
|
+ </el-popover>
|
|
|
+ <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
|
|
|
+ <div>{{item.people}}</div>
|
|
|
+ <div>{{item.time}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="2">
|
|
|
+ <template #title>
|
|
|
+ <span style="font-size: 18px; font-weight: bold;">签证流程</span>
|
|
|
+ </template>
|
|
|
+ <div class="progress-table">
|
|
|
+ <el-table :border="true" :header-cell-style="headerCellStyle" :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column prop="a" label="国家" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input style="width:100%;margin-top: 10px;" size="mini" v-model="scope.row.a"
|
|
|
+ placeholder="请输入归还人"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="进度">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="progress-table-content">
|
|
|
+ <el-checkbox v-model="scope.row.b">收集资料</el-checkbox>
|
|
|
+ <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
|
|
|
+ v-model="scope.row.c" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="进度">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="progress-table-content">
|
|
|
+ <el-checkbox v-model="scope.row.b">取护照资料</el-checkbox>
|
|
|
+ <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
|
|
|
+ v-model="scope.row.c" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="进度">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="progress-table-content">
|
|
|
+ <el-checkbox v-model="scope.row.b">填资料</el-checkbox>
|
|
|
+ <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
|
|
|
+ v-model="scope.row.c" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="进度">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="progress-table-content">
|
|
|
+ <el-checkbox v-model="scope.row.b">送签</el-checkbox>
|
|
|
+ <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
|
|
|
+ v-model="scope.row.c" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="进度">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="progress-table-content">
|
|
|
+ <el-checkbox v-model="scope.row.b">出签+取护照</el-checkbox>
|
|
|
+ <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
|
|
|
+ v-model="scope.row.c" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="进度">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="progress-table-content">
|
|
|
+ <el-checkbox v-model="scope.row.b">归还护照</el-checkbox>
|
|
|
+ <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
|
|
|
+ v-model="scope.row.c" type="date" placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-input style="width:100%;margin-top: 10px;" size="mini" v-model="scope.row.c"
|
|
|
+ placeholder="请输入归还人"></el-input>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="100">
|
|
|
+ <template>
|
|
|
+ <el-button style="margin-top: 10px;" size="mini" type="danger">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="margin-top: 10px; text-align: center;">
|
|
|
+ <el-button size="mini" type="primary">添加一行</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="3">
|
|
|
+ <template #title>
|
|
|
+ <span style="font-size: 18px; font-weight: bold;">机票流程</span>
|
|
|
+ </template>
|
|
|
+ <div class="process-diagram">
|
|
|
+ <div :class="item.done?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesAir" :key="index">
|
|
|
+ <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
|
|
|
+ <div>{{item.people}}</div>
|
|
|
+ <div>{{item.time}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="4">
|
|
|
+ <template #title>
|
|
|
+ <span style="font-size: 18px; font-weight: bold;">酒店流程</span>
|
|
|
+ </template>
|
|
|
+ <div class="process-diagram">
|
|
|
+ <div :class="item.done?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesHotel" :key="index">
|
|
|
+ <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
|
|
|
+ <div>{{item.people}}</div>
|
|
|
+ <div>{{item.time}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="5">
|
|
|
+ <template #title>
|
|
|
+ <span style="font-size: 18px; font-weight: bold;">地接流程</span>
|
|
|
+ </template>
|
|
|
+ <div class="process-diagram">
|
|
|
+ <div :class="item.done?'process-diagram-sans':'process-diagram-san'" v-for="(item,index) in activitiesGuide" :key="index">
|
|
|
+ <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
|
|
|
+ <div>{{item.people}}</div>
|
|
|
+ <div>{{item.time}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="6">
|
|
|
+ <template #title>
|
|
|
+ <span style="font-size: 18px; font-weight: bold;">费用结算</span>
|
|
|
+ </template>
|
|
|
+ <div class="process-diagram">
|
|
|
+ <div :class="item.done?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesCost" :key="index">
|
|
|
+ <div style="font-weight: 600;font-size: 15px;">{{item.content}}</div>
|
|
|
+ <div>{{item.people}}</div>
|
|
|
+ <div>{{item.time}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
-
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ activeNames: ['1','2','3','4','5','6'],
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ a:'美国',
|
|
|
+ b: '',
|
|
|
+ c: '',
|
|
|
+ d: '',
|
|
|
+ e: '',
|
|
|
+ f: '',
|
|
|
+ g: '',
|
|
|
+ h:'',
|
|
|
+ i:'',
|
|
|
+ j:'',
|
|
|
+ k:'',
|
|
|
+ l:'',
|
|
|
+ m:'',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ a:'日本',
|
|
|
+ b: '',
|
|
|
+ c: '',
|
|
|
+ d: '',
|
|
|
+ e: '',
|
|
|
+ f: '',
|
|
|
+ g: '',
|
|
|
+ h:'',
|
|
|
+ i:'',
|
|
|
+ j:'',
|
|
|
+ k:'',
|
|
|
+ l:'',
|
|
|
+ m:'',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ a:'新加坡',
|
|
|
+ b: '',
|
|
|
+ c: '',
|
|
|
+ d: '',
|
|
|
+ e: '',
|
|
|
+ f: '',
|
|
|
+ g: '',
|
|
|
+ h:'',
|
|
|
+ i:'',
|
|
|
+ j:'',
|
|
|
+ k:'',
|
|
|
+ l:'',
|
|
|
+ m:'',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activities:[
|
|
|
+ {
|
|
|
+ content: '报批资料准备',
|
|
|
+ time: '2018-04-01 20:46',
|
|
|
+ people: '五六七',
|
|
|
+ done: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '开始报批',
|
|
|
+ people: '吉吉国王',
|
|
|
+ done: true,
|
|
|
+ time: '2018-04-03 20:46',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '报批中',
|
|
|
+ done: false,
|
|
|
+ people: '',
|
|
|
+ time: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '批件已出',
|
|
|
+ people: '',
|
|
|
+ done: false,
|
|
|
+ time: '',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ activitiesAir:[
|
|
|
+ {
|
|
|
+ content: '机票占位中',
|
|
|
+ time: '2018-04-01 20:46',
|
|
|
+ people: '五六七',
|
|
|
+ done: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '机票已出',
|
|
|
+ people: '',
|
|
|
+ done: false,
|
|
|
+ time: '',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activitiesHotel:[
|
|
|
+ {
|
|
|
+ content: '酒店占房中',
|
|
|
+ time: '2018-04-01 20:46',
|
|
|
+ people: '五六七',
|
|
|
+ done: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '酒店已定',
|
|
|
+ people: '',
|
|
|
+ done: false,
|
|
|
+ time: '',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activitiesGuide:[
|
|
|
+ {
|
|
|
+ content: '地接对接中',
|
|
|
+ time: '2018-04-01 20:46',
|
|
|
+ people: '五六七',
|
|
|
+ done: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '地接已安排好',
|
|
|
+ people: '吉吉国王',
|
|
|
+ done: true,
|
|
|
+ time: '2018-04-03 20:46',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '出行物资准备完毕',
|
|
|
+ people: '',
|
|
|
+ done: false,
|
|
|
+ time: '',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activitiesCost:[
|
|
|
+ {
|
|
|
+ content: '费用结算中',
|
|
|
+ time: '2018-04-01 20:46',
|
|
|
+ people: '五六七',
|
|
|
+ done: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ content: '费用结算完毕',
|
|
|
+ people: '',
|
|
|
+ done: false,
|
|
|
+ time: '',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ visible: false
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChange(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ headerCellStyle({ row, column, rowIndex, columnIndex }) {
|
|
|
+ console.log(row, column, rowIndex, columnIndex);
|
|
|
+ row[0].colSpan=1;
|
|
|
+ row[6].colSpan=6;
|
|
|
+ row[7].colSpan=1;
|
|
|
+ row[1].colSpan=0;
|
|
|
+ row[2].colSpan=0;
|
|
|
+ row[3].colSpan=0;
|
|
|
+ row[4].colSpan=0;
|
|
|
+ row[5].colSpan=0;
|
|
|
+ if (columnIndex<6&&columnIndex>0) {
|
|
|
+ return {display: 'none' }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
@@ -16,4 +331,216 @@ export default {
|
|
|
border-radius: 10px;
|
|
|
min-height: 830px;
|
|
|
}
|
|
|
-</style>
|
|
|
+ .progress-content{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .progress-content>div{
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .progress-table-content{
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .progress-content div{
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .process-diagram{
|
|
|
+ color: #606266;
|
|
|
+ margin-top: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .process-diagram-li{
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 10px #0005;
|
|
|
+ }
|
|
|
+ .process-diagram-li::after{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:10px;
|
|
|
+ height:10px;
|
|
|
+ background-color: #606266;
|
|
|
+ left: 46%;
|
|
|
+ top:-30px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-li:not(:last-child)::before{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:210%;
|
|
|
+ height:2px;
|
|
|
+ background-color: #606266;
|
|
|
+ left:55%;
|
|
|
+ top:-26px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-lis{
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 10px #0005;
|
|
|
+ }
|
|
|
+ .process-diagram-lis::after{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:10px;
|
|
|
+ height:10px;
|
|
|
+ background-color: #67C23A;
|
|
|
+ left: 46%;
|
|
|
+ top:-30px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-lis:not(:last-child)::before{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:210%;
|
|
|
+ height:2px;
|
|
|
+ background-color: #67C23A;
|
|
|
+ left:55%;
|
|
|
+ top:-26px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram>div{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .process-diagram .el-popover{
|
|
|
+ left: 110%;
|
|
|
+ top: -7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*liangge*/
|
|
|
+ .process-diagram-two{
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 10px #0005;
|
|
|
+ }
|
|
|
+ .process-diagram-two::after{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:10px;
|
|
|
+ height:10px;
|
|
|
+ background-color: #606266;
|
|
|
+ left: 46%;
|
|
|
+ top:-30px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-two:not(:last-child)::before{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:431%;
|
|
|
+ height:2px;
|
|
|
+ background-color: #606266;
|
|
|
+ left:55%;
|
|
|
+ top:-26px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-twos{
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 10px #0005;
|
|
|
+ }
|
|
|
+ .process-diagram-twos::after{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:10px;
|
|
|
+ height:10px;
|
|
|
+ background-color: #67C23A;
|
|
|
+ left: 46%;
|
|
|
+ top:-30px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-twos:not(:last-child)::before{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:431%;
|
|
|
+ height:2px;
|
|
|
+ background-color: #67C23A;
|
|
|
+ left:55%;
|
|
|
+ top:-26px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ /*sange*/
|
|
|
+ .process-diagram-san{
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 10px #0005;
|
|
|
+ }
|
|
|
+ .process-diagram-san::after{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:10px;
|
|
|
+ height:10px;
|
|
|
+ background-color: #606266;
|
|
|
+ left: 46%;
|
|
|
+ top:-30px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-san:not(:last-child)::before{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:283%;
|
|
|
+ height:2px;
|
|
|
+ background-color: #606266;
|
|
|
+ left:55%;
|
|
|
+ top:-26px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-sans{
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 10px #0005;
|
|
|
+ }
|
|
|
+ .process-diagram-sans::after{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:10px;
|
|
|
+ height:10px;
|
|
|
+ background-color: #67C23A;
|
|
|
+ left: 46%;
|
|
|
+ top:-30px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+ .process-diagram-sans:not(:last-child)::before{
|
|
|
+ position: absolute;
|
|
|
+ content:'';
|
|
|
+ display: block;
|
|
|
+ width:283%;
|
|
|
+ height:2px;
|
|
|
+ background-color: #67C23A;
|
|
|
+ left:55%;
|
|
|
+ top:-26px;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+</style>
|
yuanrf