发布

src/components/OP/AffairsBackward.vue

@@ -1,5 +1,33 @@
 <template>
     <div class="affairbackward-all">
+        <div class="affairbackward-hade">
+            <el-form style="display: flex;justify-content: space-between;align-items: center;" :inline="true" :model="formInline" class="demo-form-inline">
+                <el-form-item>
+                    <el-select v-model="formInline.Status" placeholder="团组名称" style="width: 250px;">
+                        <el-option v-for="(item, index) in AuditStatus" :key="index" :label="item.title"
+                            :value="item.id"></el-option>
+                    </el-select>
+                </el-form-item>
+                <div>
+                    <el-form-item label="团队名称:">
+                        {{ formInline.name }}
+                    </el-form-item>
+                    <el-form-item label="客户:">
+                        {{ formInline.clientName }}
+                    </el-form-item>
+                    <el-form-item label="出访国家:">
+                        {{ formInline.CountriesVisited }}
+                    </el-form-item>
+                    <el-form-item label="起止日期:">
+                        {{ formInline.StartTime }}
+                    </el-form-item>
+                    <el-form-item label="天数/人数:">
+                        {{ formInline.Days }}天 / {{ formInline.Number }}人
+                    </el-form-item>
+                </div>
+                <el-button type="primary">保存</el-button>
+            </el-form>    
+        </div>
         <el-table :data="tableDatass" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
             <el-table-column prop="title" label="项目" width="180">
             </el-table-column>
@@ -161,7 +189,18 @@ export default {
             tableDatass:[],
             rowarr:[],
             spanArr: [], // 存储每个项目对应的行数
-            position: 0   // 存储spanArr的索引位置
+            position: 0,   // 存储spanArr的索引位置
+            diid:'',
+            AuditStatus:[],
+            formInline: {
+                name: '美国团',
+                clientName: '张三',
+                CountriesVisited: '美国',
+                StartTime: '2023-10-01至2023-10-10',
+                Days: 10,
+                Number: 8,
+                Status: '',
+            },
         }
     },
     created() {
@@ -239,12 +278,15 @@ export default {
 </script>
 <style>
     .affairbackward-all {
-    background-color: #fff;
-    padding: 10px;
-    box-shadow: 0 0 5px #0005;
-    border-radius: 10px;
-    min-height: 830px;
-    
-}
+        background-color: #fff;
+        padding: 10px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 10px;
+        min-height: 830px;
+        
+    }
+    .affairbackward-hade .el-form-item{
+        margin-bottom: 0;
+    }
 </style>
  

src/components/OP/GroupProgress.vue

@@ -3,8 +3,8 @@
         <div class="progress-hade">
             <el-form style="display: flex;justify-content: space-between;align-items: center;" :inline="true" :model="formInline" class="demo-form-inline">
                 <el-form-item>
-                    <el-select v-model="formInline.Status" placeholder="团组名称" style="width: 250px;">
-                        <el-option v-for="(item, index) in AuditStatus" :key="index" :label="item.title"
+                    <el-select filterable @change="GetGroupNameList" v-model="diid" placeholder="团组名称" style="width: 250px;">
+                        <el-option v-for="(item, index) in AuditStatus" :key="index" :label="item.groupName"
                             :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
@@ -33,9 +33,9 @@
                     <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">
+                    <div slot="reference" @mouseenter="item.nodeName=='报批资料准备'?visible = true:''" @mouseleave="visible = false" :class="item.statusText=='已完成'?'process-diagram-lis':'process-diagram-li'" v-for="(item,index) in activities" :key="index">
                         <el-popover
-                        v-if="item.content=='报批资料准备'"
+                        v-if="item.nodeName=='报批资料准备'"
                         placement="top"
                         title="PS"
                         width="200"
@@ -43,9 +43,10 @@
                         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 style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
+                        <div>{{item.statusText}}</div>
+                        <div>{{item.operator}}</div>
+                        <div>{{item.opeateTime}}</div>
                     </div>
                 </div>
             </el-collapse-item>
@@ -57,16 +58,16 @@
                     <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>
+                                <el-input style="width:100%;margin-top: 10px;" size="mini" v-model="scope.row.countryName"
+                                    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-checkbox v-model="scope.row.isHandle1">{{scope.row.nodeName1}}</el-checkbox>
                                     <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
-                                        v-model="scope.row.c" type="date" placeholder="选择日期">
+                                        v-model="scope.row.handleTime1" type="date" placeholder="选择日期">
                                     </el-date-picker>
                                 </div>
                             </template>
@@ -74,9 +75,9 @@
                         <el-table-column label="进度">
                             <template slot-scope="scope">
                                 <div class="progress-table-content">
-                                    <el-checkbox v-model="scope.row.b">取护照资料</el-checkbox>
+                                    <el-checkbox v-model="scope.row.isHandle2">{{scope.row.nodeName2}}</el-checkbox>
                                     <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
-                                        v-model="scope.row.c" type="date" placeholder="选择日期">
+                                        v-model="scope.row.handleTime2" type="date" placeholder="选择日期">
                                     </el-date-picker>
                                 </div>
                             </template>
@@ -84,9 +85,9 @@
                         <el-table-column label="进度">
                             <template slot-scope="scope">
                                 <div class="progress-table-content">
-                                    <el-checkbox v-model="scope.row.b">填资料</el-checkbox>
+                                    <el-checkbox v-model="scope.row.isHandle3">{{scope.row.nodeName3}}</el-checkbox>
                                     <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
-                                        v-model="scope.row.c" type="date" placeholder="选择日期">
+                                        v-model="scope.row.handleTime3" type="date" placeholder="选择日期">
                                     </el-date-picker>
                                 </div>
                             </template>
@@ -94,9 +95,9 @@
                         <el-table-column label="进度">
                             <template slot-scope="scope">
                                 <div class="progress-table-content">
-                                    <el-checkbox v-model="scope.row.b">送签</el-checkbox>
+                                    <el-checkbox v-model="scope.row.isHandle4">{{scope.row.nodeName4}}</el-checkbox>
                                     <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
-                                        v-model="scope.row.c" type="date" placeholder="选择日期">
+                                        v-model="scope.row.handleTime4" type="date" placeholder="选择日期">
                                     </el-date-picker>
                                 </div>
                             </template>
@@ -104,9 +105,9 @@
                         <el-table-column label="进度">
                             <template slot-scope="scope">
                                 <div class="progress-table-content">
-                                    <el-checkbox v-model="scope.row.b">出签+取护照</el-checkbox>
+                                    <el-checkbox v-model="scope.row.handleTime5">{{scope.row.nodeName5}}</el-checkbox>
                                     <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
-                                        v-model="scope.row.c" type="date" placeholder="选择日期">
+                                        v-model="scope.row.handleTime5" type="date" placeholder="选择日期">
                                     </el-date-picker>
                                 </div>
                             </template>
@@ -114,11 +115,11 @@
                         <el-table-column label="进度">
                             <template slot-scope="scope">
                                 <div class="progress-table-content">
-                                    <el-checkbox v-model="scope.row.b">归还护照</el-checkbox>
+                                    <el-checkbox v-model="scope.row.isHandle6">{{scope.row.nodeName6}}</el-checkbox>
                                     <el-date-picker style="width:100%;margin-top: 10px;" size="mini"
-                                        v-model="scope.row.c" type="date" placeholder="选择日期">
+                                        v-model="scope.row.handleTime6" type="date" placeholder="选择日期">
                                     </el-date-picker>
-                                    <el-input style="width:100%;margin-top: 10px;" size="mini" v-model="scope.row.c"
+                                    <el-input style="width:100%;margin-top: 10px;" size="mini" v-model="scope.row.returner"
                                         placeholder="请输入归还人"></el-input>
                                 </div>
                             </template>
@@ -130,7 +131,7 @@
                         </el-table-column>
                     </el-table>
                     <div style="margin-top: 10px; text-align: center;">
-                        <el-button size="mini" type="primary">添加一行</el-button>
+                        <el-button @click="addRow" size="mini" type="primary">添加一行</el-button>
                     </div>
                 </div>
             </el-collapse-item>
@@ -139,10 +140,11 @@
                     <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 :class="item.statusText=='已完成'?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesAir" :key="index">
+                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
+                        <div>{{item.statusText}}</div>
+                        <div>{{item.operator}}</div>
+                        <div>{{item.opeateTime}}</div>
                     </div>
                 </div>
             </el-collapse-item>
@@ -151,10 +153,11 @@
                     <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 :class="item.statusText=='已完成'?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesHotel" :key="index">
+                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
+                        <div>{{item.statusText}}</div>
+                        <div>{{item.operator}}</div>
+                        <div>{{item.opeateTime}}</div>
                     </div>
                 </div>
             </el-collapse-item>
@@ -163,10 +166,11 @@
                     <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 :class="item.statusText=='已完成'?'process-diagram-sans':'process-diagram-san'" v-for="(item,index) in activitiesGuide" :key="index">
+                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
+                        <div>{{item.statusText}}</div>
+                        <div>{{item.operator}}</div>
+                        <div>{{item.opeateTime}}</div>
                     </div>
                 </div>
             </el-collapse-item>
@@ -175,10 +179,11 @@
                     <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 :class="item.statusText=='已完成'?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesCost" :key="index">
+                        <div style="font-weight: 600;font-size: 15px;">{{item.nodeName}}</div>
+                        <div>{{item.statusText}}</div>
+                        <div>{{item.operator}}</div>
+                        <div>{{item.opeateTime}}</div>
                     </div>
                 </div>
             </el-collapse-item>
@@ -191,173 +196,176 @@ 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: '',
-                }
-            ],
+            tableData: [],
+            activities:[],
+            activitiesAir:[],
+            activitiesHotel:[],
+            activitiesGuide:[],
+            activitiesCost:[],
             visible: false,
             diid:'',
             AuditStatus:[],
             formInline: {
-                name: '美国团',
-                clientName: '张三',
-                CountriesVisited: '美国',
-                StartTime: '2023-10-01至2023-10-10',
-                Days: 10,
-                Number: 8,
+                name: '',
+                clientName: '',
+                CountriesVisited: '',
+                StartTime: '',
+                Days: 0,
+                Number: 0,
                 Status: '',
             },
+            token:'',
+            userId:'',
         }
     },
     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' }
-        }
-      }
+        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' }
+            }
+        },
+        //获取团组id
+        GetGroupNameList(){
+            var url = "/api/Business/GetGroupNameList"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                },
+                data:{
+                    portType:1,
+                }
+            }).then(function (res) {
+                if(res.data.code==200){
+                    that.AuditStatus=res.data.data;
+                    if (that.diid==='') {
+                        that.diid=res.data.data[0].id;
+                        
+                    }
+                    that.PostShareGroupInfo();
+                }else{
+                    that.$message.error(res.data.msg);
+                }
+            })
+        },
+        //获取团组详情
+        PostShareGroupInfo(){
+            var url = "/api/Business/PostShareGroupInfo"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                },
+                data:{
+                    portType:1,
+                    id: that.diid
+                }
+            }).then(function (res) {
+                console.log(res)
+                if(res.data.code==200){
+                    that.formInline.name = res.data.data.teamName;
+                    that.formInline.clientName = res.data.data.clientName;
+                    that.formInline.CountriesVisited = res.data.data.visitCountry;
+                    that.formInline.StartTime = res.data.data.visitStartDate.split(' ')[0]+'~'+res.data.data.visitEndDate.split(' ')[0];
+                    that.formInline.Days = res.data.data.visitDays;
+                    that.formInline.Number = res.data.data.visitPNumber;
+                    that.GroupProcessDetails();
+                }else{
+                    that.$message.error('获取数据源失败！');
+                }
+            })
+        },
+        //获取数据
+        GroupProcessDetails() {
+            var that = this
+            var url = "/api/Groups/GroupProcessDetails?groupId=" + that.diid
+            this.$axios({
+                method: 'get',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer ' + that.token
+                },
+            }).then(function (res) {
+                if (res.data.code == 200) {
+                    for (let i = 0; i < res.data.data.length; i++) {
+                        console.log(res.data.data[i]);
+                        if (res.data.data[i].processName == '费用结算') {
+                            that.activitiesCost=res.data.data[i].nodes;
+                        }
+                        if (res.data.data[i].processName == '地接') {
+                            that.activitiesGuide=res.data.data[i].nodes;
+                        }
+                        if (res.data.data[i].processName == '酒店') {
+                            that.activitiesHotel=res.data.data[i].nodes;
+                        }
+                        if (res.data.data[i].processName == '机票') {
+                            that.activitiesAir=res.data.data[i].nodes;
+                        }
+                        if (res.data.data[i].processName == '商邀报批') {
+                            that.activities=res.data.data[i].nodes;
+                        }
+                        if (res.data.data[i].processName == '签证') {
+                            that.tableData=res.data.data[i].nodes[0].visaSubNodes;
+                        }
+                    }
+                } else {
+                    that.activitiesCost=[];
+                    that.activitiesGuide=[];
+                    that.activitiesHotel=[];
+                    that.activitiesAir=[];
+                    that.activities=[];
+                    that.tableData=[];
+                    that.$message.error(res.data.msg);
+                }
+            })
+        },
+        //签证添加一行
+        addRow() {
+            this.tableData.push({
+                countryName: '',
+                nodeName1: '收集资料',
+                isHandle1: false,
+                handleTime1: '',
+                nodeName2: '取护照资料',
+                isHandle2: false,
+                handleTime2: '',
+                nodeName3: '填资料',
+                isHandle3: false,
+                handleTime3: '',
+                nodeName4: '送签',
+                isHandle4: false,
+                handleTime4: '',
+                nodeName5: '签+取护照',
+                isHandle5: false,
+                handleTime5: '',
+                nodeName6: '归还护照',
+                isHandle6: false,
+                handleTime6: '',
+                returner: ''
+            });
+        },
+    },
+    mounted(){
+        this.token = JSON.parse(localStorage.getItem('userinif')).token;
+        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
+        this.GetGroupNameList();
+        // this.GroupProcessDetails();
     }
 }
 </script>