会务流程

src/components/OP/AffairsBackward.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="affairbackward-all">
+    <div class="affairbackward-all" v-loading="affairbackwardloading">
         <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"
+                    <el-select filterable @change="ConferenceProceduresInit" v-model="diid" placeholder="团组名称" style="width: 250px;">
+                        <el-option v-for="(item, index) in AuditStatus" :key="index" :label="item.teamName"
                             :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
@@ -25,20 +25,21 @@
                         {{ formInline.Days }}天 / {{ formInline.Number }}人
                     </el-form-item>
                 </div>
-                <el-button type="primary">保存</el-button>
+                <el-button @click="ConferenceProceduresSave" type="primary">保存</el-button>
             </el-form>    
         </div>
-        <el-table :data="tableDatass" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
+        <div style="margin-top: 20px;font-size: 15px;font-weight: 600;color: red;">PS:插入行与删除行并未进行保存操作，需要保存请点击保存按钮！！！</div>
+        <el-table :data="tableDatass" :span-method="objectSpanMethod" border style="width: 100%; ">
             <el-table-column prop="title" label="项目" width="180">
             </el-table-column>
             <el-table-column prop="date" label="时间"  width="180">
                 <template slot-scope="scope">
-                    <el-input v-model="scope.row.date" placeholder="请输入内容"></el-input>
+                    <el-input v-model="scope.row.dataDetails" placeholder="请输入内容"></el-input>
                 </template>
             </el-table-column>
             <el-table-column prop="content" label="内容">
                 <template slot-scope="scope">
-                    <el-input v-model="scope.row.content" placeholder="请输入内容"></el-input>
+                    <el-input v-model="scope.row.details" placeholder="请输入内容"></el-input>
                 </template>
             </el-table-column>
             <el-table-column prop="remark" label="备注">
@@ -48,11 +49,11 @@
             </el-table-column>
              <el-table-column prop="remark" label="操作" width="150">
                 <template slot-scope="scope">
-                    <el-button size="mini" @click="scope.row.remark='121212'" type="primary">插入行↑</el-button>
+                     <el-button class="czbtn" size="mini" type="primary" @click="insertTaskAbove(scope.$index,scope.row)">插入行↑</el-button>
                     <br />
-                    <el-button style="margin: 10px 0;" size="mini" type="danger">删 除</el-button>
+                    <el-button style="margin: 10px 0;" size="mini" @click="deleterow(scope.$index,scope.row)" type="danger">删 除</el-button>
                     <br />
-                    <el-button size="mini" type="primary">插入行↓</el-button>
+                    <el-button size="mini" @click="insertTaskBelow(scope.$index,scope.row)" type="primary">插入行↓</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -62,68 +63,7 @@
 export default {
     data() {
         return {
-            tableData: [
-                {
-                    title:'嘉宾邀约',
-                    Childdate:[
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                    ],
-                },
-                {
-                    title:'服务方案',
-                    Childdate:[
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                    ],
-                },
-                {
-                    title:'场地协调',
-                    Childdate:[
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                    ],
-                },
-                {
-                    title:'视觉呈现',
-                    Childdate:[
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                    ],
-                },
-                {
-                    title:'物料制作',
-                    Childdate:[
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                        {date:'提前45天',content:'初筛邀请对象，结合客户需求，梳理邀请名单',Remark:'实际根据项目启动时间，倒推时间是否足够'},
-                    ],
-                },
-            ],
+            tableData: [],
             tableDatas:[
                 {
                     title:'1',
@@ -201,28 +141,60 @@ export default {
                 Number: 8,
                 Status: '',
             },
+            token:'',
+            userId:'',
+            affairbackwardloading:false,
         }
     },
     created() {
-        this.getSpanArr();
-        this.flattenData();
+        // this.getSpanArr();
+        // this.flattenData();
     },
     methods:{
         // 将嵌套的数据结构转换为扁平结构
         flattenData() {
             this.tableDatass = [];
             this.tableData.forEach(item => {
-                item.Childdate.forEach(child => {
+                item.itmes.forEach(child => {
                     this.tableDatass.push({
+                        id:child.id,
                         title: item.title,
-                        date: child.date,
-                        content: child.content,
-                        remark: child.Remark
+                        dataDetails: child.dataDetails,
+                        details: child.details,
+                        remark: child.remark
                     });
                 });
             });
-            console.log(this.tableDatass);
-            
+        },
+        // 将扁平结构转换为嵌套的数据结构
+        unflattenData() {
+            let result = [];
+            let currentTitle = null;
+            let currentItem = null;
+            this.tableDatass.forEach(row => {
+                if (row.title !== currentTitle) {
+                    if (currentItem) {
+                        result.push(currentItem);
+                    }
+                    currentTitle = row.title;
+                    currentItem = {
+                        title: currentTitle,
+                        itmes: []
+                    };
+                }
+                console.log(row);
+                
+                currentItem.itmes.push({
+                    id:row.id,
+                    dataDetails: row.dataDetails,
+                    details: row.details,
+                    remark: row.remark
+                });
+            });
+            if (currentItem) {
+                result.push(currentItem);
+            }
+            this.tableData = result;
         },
         // 计算每个项目对应的行数
         getSpanArr() {
@@ -230,7 +202,7 @@ export default {
             this.position = 0;
             
             this.tableData.forEach(item => {
-                this.spanArr.push(item.Childdate.length);
+                this.spanArr.push(item.itmes.length);
             });
         },
         objectSpanMethod({ row, column, rowIndex, columnIndex }) {
@@ -247,7 +219,6 @@ export default {
                     }
                     pos += this.spanArr[i];
                 }
-
                 // 如果是当前项目的第一个行，返回合并行数
                 if (rowIndex === pos) {
                     return {
@@ -260,19 +231,126 @@ export default {
                         colspan: 0
                     };
                 }
-                // if (rowIndex % 2 === 0) {
-                //     return {
-                //         rowspan: 2,
-                //         colspan: 1
-                //     };
-                // } else {
-                //     return {
-                //         rowspan: 0,
-                        // colspan: 0
-                //     };
-                // }
             }
-        }
+        },
+        //数据初始化
+        ConferenceProceduresInit(){
+            this.affairbackwardloading=true;
+            this.AuditStatus=[];
+            var url = "/api/Groups/ConferenceProceduresInit"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                },
+                data:{
+                    groupId:that.diid==''?0:that.diid,
+                }
+            }).then(function (res) {
+                if(res.data.code==200){
+                    that.AuditStatus=res.data.data.groupList;
+                    if (that.diid==='') {
+                        that.diid=res.data.data.groupInfo.id;
+                    }
+                    that.formInline.name = res.data.data.groupInfo.teamName;
+                    that.formInline.clientName = res.data.data.groupInfo.clientName;
+                    that.formInline.CountriesVisited = res.data.data.groupInfo.visitCountry;
+                    that.formInline.StartTime = res.data.data.groupInfo.visitStartDate.split(' ')[0]+'~'+res.data.data.groupInfo.visitEndDate.split(' ')[0];
+                    that.formInline.Days = res.data.data.groupInfo.visitDays;
+                    that.formInline.Number = res.data.data.groupInfo.visitPNumber;
+                    that.tableData=res.data.data.conferenceProceduresGroupByTitle;
+                    that.getSpanArr();
+                    that.flattenData(); 
+                    that.affairbackwardloading=false;
+                }else{
+                    that.affairbackwardloading=false;
+                    that.$message.error(res.data.msg);
+                }
+            })
+        },
+        //插入行
+        insertTaskAbove(index,row) {
+            for (let i = 0; i < this.tableData.length; i++) {
+                if (this.tableData[i].title === row.title) {
+                    this.tableData[i].itmes.splice(index - this.position, 0, {
+                        "id":0,
+                        "dataDetails":"",
+                        "details": "",
+                        "remark": "",
+                    });
+                    this.getSpanArr();
+                    this.flattenData(); 
+                    break;
+                }
+                this.position += this.spanArr[i];
+            }
+        },
+        //插入行
+        insertTaskBelow(index,row) {
+            for (let i = 0; i < this.tableData.length; i++) {
+                if (this.tableData[i].title === row.title) {
+                    this.tableData[i].itmes.splice((index+1) - this.position, 0, {
+                        "id":0,
+                        "dataDetails":"",
+                        "details": "",
+                        "remark": "",
+                    });
+                    this.getSpanArr();
+                    this.flattenData(); 
+                    break;
+                }
+                this.position += this.spanArr[i];
+            }
+        },
+        //删除行
+        deleterow(index,row) {
+            for (let i = 0; i < this.tableData.length; i++) {
+                if (this.tableData[i].title === row.title) {
+                    this.tableData[i].itmes.splice(index - this.position, 1);
+                    this.getSpanArr();
+                    this.flattenData(); 
+                    break;
+                }
+                this.position += this.spanArr[i];
+            }
+        },
+        //保存
+        ConferenceProceduresSave(){
+            this.affairbackwardloading=true;
+            this.unflattenData();
+            var url = "/api/Groups/ConferenceProceduresSave"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                },
+                data:{
+                    groupId:that.diid,
+                    userId: that.userId,
+                    conferenceProceduresSaveItem:that.tableData,
+                }
+            }).then(function (res) {
+                if(res.data.code==200){
+                    that.$message({
+                        type: 'success',
+                        message: res.data.msg
+                    });
+                    that.ConferenceProceduresInit();
+                }else{
+                    that.$message.error(res.data.msg);
+                    that.progressloading=false;
+                }
+            })
+        },
+    },
+    mounted(){
+        this.token = JSON.parse(localStorage.getItem('userinif')).token;
+        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
+        this.ConferenceProceduresInit();
     }
 }
 </script>

src/components/OP/GroupProgress.vue

@@ -191,7 +191,7 @@
                     <span style="font-size: 18px; font-weight: bold;">费用结算</span>
                 </template>
                 <div class="process-diagram">
-                    <div :class="item.statusText=='已完成'?'process-diagram-twos':'process-diagram-two'" v-for="(item,index) in activitiesCost" :key="index">
+                    <div @click="financeclick(item)" :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>
@@ -305,7 +305,7 @@ export default {
                     that.formInline.Number = res.data.data.visitPNumber;
                     that.GroupProcessDetails();
                 }else{
-                    that.$message.error('获取数据源失败！');
+                    that.$message.error(res.data.msg);
                     that.progressloading=false;
                 }
             })
@@ -448,10 +448,45 @@ export default {
                 }
             })
         },
+        //财务节点点击确认
+        financeclick(item){
+            var qxarr=[22,187]
+            if (!qxarr.includes(this.userId)) {
+                this.$message({
+                    message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',
+                    type: 'warning'
+                });
+                return
+            }
+            this.progressloading=true;
+            var url = "/api/Groups/GroupProcessUpdateNodeStatus"
+            var that = this
+            this.$axios({
+                method: 'post',
+                url: url,
+                headers: {
+                    Authorization: 'Bearer '
+                },
+                data:{
+                    nodeId:item.id,
+                    currUserId: that.userId
+                }
+            }).then(function (res) {
+                console.log(res)
+                if(res.data.code==200){
+                    that.$message({
+                        type: 'success',
+                        message: res.data.msg
+                    });
+                    that.GroupProcessDetails();
+                }else{
+                    that.$message.error(res.data.msg);
+                    that.progressloading=false;
+                }
+            })
+        },
         //签证保存
         Visaclick(text){
-            console.log(this.tableData);
-            
             if (text!=this.jobName) {
                 this.$message({
                     message: '该流程不在此账号的操作权限内！如有疑问联系该流程负责人！',