Merge branch 'master' of http://132.232.92.186:3000/XinXiBu/oa-system

src/components/Login.vue

@@ -33,7 +33,7 @@
                         </div>
                     </div>
                     <div class="loginbtn-box">
-                        <el-button @click="Login()" class="loginbtn" v-loading.fullscreen.lock="fullscreenLoading" round>登 录</el-button>
+                        <el-button @keyup.enter.native="Login()" @click="Login()" class="loginbtn" v-loading.fullscreen.lock="fullscreenLoading" round>登 录</el-button>
                     </div>
                 </div>
                 <div></div>
@@ -72,6 +72,13 @@ export default {
         },
         //登录
         Login() {
+            if(this.usernum==""||this.password==""){
+                this.$message({
+                    message: "请填写账号密码！",
+                    type: 'warning'
+                });
+                return false;
+            }
             this.fullscreenLoading=true;
             var url="/api/login"
             var that=this
@@ -85,7 +92,7 @@ export default {
             }).then(function(res){
                 console.log(res)
                 if(res.data.code==200){
-                    localStorage.setItem('token', res.data.data.token);
+                    localStorage.setItem('userinif', JSON.stringify(res.data.data));
                     that.fullscreenLoading=false;
                     that.$router.push('/home/index')
                 }else{
@@ -100,6 +107,16 @@ export default {
     },
     mounted() {
         document.querySelector(".login-all").style.height = window.innerHeight + "px";
+        let that = this
+        document.onkeydown = function (e) {
+            e = window.event || e
+            console.log(e.code)
+            //保证是在登录页面发出的enter事件
+            if (e.code === 'Enter' || e.code === 'enter'|| e.code === 'NumpadEnter') {
+                //调用登录函数
+                that.Login();
+            }
+        }
     }
 }
 </script>

src/components/child/AuthorityJob.vue

@@ -1,37 +1,39 @@
 <template>
-    <div>
+    <div  v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading">
         <div class="job-box">
             <div class="job-head">
                 <div>
                     <el-select @change="Inquirechange()" v-model="value" clearable placeholder="权限模块">
-                        <el-option v-for="item in authority" :key="item.value" :label="item.label" :value="item.value">
+                        <el-option v-for="item in authority" :key="item.value" :label="item.name" :value="item.id">
                         </el-option>
                     </el-select>
                 </div>
                 <div>
-                    <el-select v-model="valuecorporation" clearable placeholder="公司">
-                        <el-option v-for="item in corporation" :key="item.value" :label="item.label" :value="item.value">
+                    <el-select @change="companyChange()" v-model="valuecorporation" clearable placeholder="公司">
+                        <el-option v-for="item in corporation" :key="item.value" :label="item.companyName" :value="item.id">
                         </el-option>
                     </el-select>
-                    <el-select v-model="valuedepartmental" clearable placeholder="部门">
-                        <el-option v-for="item in departmental" :key="item.value" :label="item.label" :value="item.value">
+                    <el-select @change="depaChange()" v-model="valuedepartmental" clearable placeholder="部门">
+                        <el-option v-for="item in departmental" :key="item.id" :label="item.depName" :value="item.id">
                         </el-option>
                     </el-select>
-                    <el-select v-model="valueposition" clearable placeholder="职位">
-                        <el-option v-for="item in position" :key="item.value" :label="item.label" :value="item.value">
+                    <el-select @change="JobChange()" v-model="valueposition" clearable placeholder="职位">
+                        <el-option v-for="item in position" :key="item.id" :label="item.jobName" :value="item.id">
                         </el-option>
                     </el-select>
-                    <el-button type="primary">保 存</el-button>
-                </div>
+                    <el-button type="primary" @click="saveAuth()">保 存</el-button>
+                </div> 
             </div>
             <div class="job-table">
                 <el-table :data="authorityLists.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
-                    @select="handleSelect" style="width: 100%">
+                    @select="handleSelect" @select-all="allchange" style="width: 100%">
                     <el-table-column type="selection" width="55">
                     </el-table-column>
-                    <el-table-column prop="title" label="权限页面" width="180">
+                    <el-table-column prop="name" label="权限页面" width="180">
                     </el-table-column>
-                    <el-table-column width="55" label="查看">
+                    <!-- <el-table-column width="55" label="查看">
                         <template slot-scope="scope">
                             <el-checkbox v-model="authorityLists[scope.$index].ck"
                                 @change="selectRadiocheck(scope.$index, scope.row)"
@@ -51,8 +53,19 @@
                                 @change="selectRadioedit(scope.$index, scope.row)"
                                 :disabled="authorityLists[scope.$index].disabled"></el-checkbox>
                         </template>
+                    </el-table-column> -->
+                    <el-table-column width="55" :label="op.functionName"  :key="op.id" v-for="op in opList">
+                        <template slot-scope="scope">
+                            <div>
+                                <el-checkbox @change='checkchange(authorityLists[scope.$index].id,op.id)'  v-if=" authorityLists[scope.$index].opList.indexOf(op.id) != -1" :value="authorityLists[scope.$index].selList.indexOf(op.id) != -1" >
+                                </el-checkbox >
+                                <el-checkbox  v-else :disabled="true" >
+                                </el-checkbox>
+                            </div>
+                        </template>
                     </el-table-column>
-                    <el-table-column width="55" label="下载">
+                   
+                    <!-- <el-table-column width="55" label="下载">
                         <template slot-scope="scope">
                             <el-checkbox v-model="authorityLists[scope.$index].xz"
                                 @change="selectRadiodown(scope.$index, scope.row)"
@@ -65,14 +78,14 @@
                                 @change="selectRadioup(scope.$index, scope.row)"
                                 :disabled="authorityLists[scope.$index].disabled"></el-checkbox>
                         </template>
-                    </el-table-column>
+                    </el-table-column> -->
                     <el-table-column prop="address" label="备注">
                     </el-table-column>
                 </el-table>
                 <div class="block">
                     <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="currentPage" :page-sizes="[14, 20]" :page-size="pageSize"
-                        layout="total, sizes, prev, pager, next" :total="authorityLists.length">
+                        layout="total, sizes, prev, pager, next" :total="authorityList.length">
                     </el-pagination>
                 </div>
             </div>
@@ -81,176 +94,31 @@
 </template>
 
 <script>
+import { promised, reject, resolve } from 'q';
+
 export default {
     data() {
         return {
-            authority: [{
-                value: '1',
-                label: '人事'
-            },
-            {
-                value: '2',
-                label: '国交'
-            },
-            {
-                value: '3',
-                label: '财务'
-            },
-            {
-                value: '4',
-                label: '报批'
-            },
-            {
-                value: '5',
-                label: '酒店'
-            }],
+            authority: [],
             value: '',
-
-            corporation: [{
-                value: '选项1',
-                label: '四川'
-            },
-            {
-                value: '选项2',
-                label: '成都'
-            }
-            ],
+            corporation: [],
             valuecorporation: '',
 
-            departmental: [{
-                value: '选项1',
-                label: '信息部'
-            },
-            {
-                value: '选项2',
-                label: '市场部'
-            }
-            ],
-            valuedepartmental: '',
+            departmental: [], //部门数据
+            valuedepartmental: '', //部门val
 
-            position: [{
-                value: '选项1',
-                label: '后端'
-            },
-            {
-                value: '选项2',
-                label: 'UI'
-            }
-            ],
-            valueposition: '',
+            position: [], //职位数据
+            valueposition: '',//职位val
 
             authorityLists: [],
-            authorityList: [
-                {
-                    title: "人事权限1",
-                    moduleId: "1",
-                    ck: false,
-                    sc: false,
-                    bj: true,
-                    xz: false,
-                    scc: false
-                },
-                {
-                    title: "人事权限2",
-                    moduleId: "1"
-                },
-                {
-                    title: "人事权限3",
-                    moduleId: "1"
-                },
-                {
-                    title: "人事权限4",
-                    moduleId: "1"
-                },
-                {
-                    title: "人事权限5",
-                    moduleId: "1"
-                },
-                {
-                    title: "国交权限1",
-                    moduleId: "2"
-                },
-                {
-                    title: "国交权限2",
-                    moduleId: "2"
-                },
-                {
-                    title: "国交权限3",
-                    moduleId: "2"
-                },
-                {
-                    title: "国交权限4",
-                    moduleId: "2"
-                },
-                {
-                    title: "国交权限5",
-                    moduleId: "2"
-                },
-                {
-                    title: "财务权限1",
-                    moduleId: "3"
-                },
-                {
-                    title: "财务权限2",
-                    moduleId: "3"
-                },
-                {
-                    title: "财务权限3",
-                    moduleId: "3"
-                },
-                {
-                    title: "财务权限4",
-                    moduleId: "3"
-                },
-                {
-                    title: "财务权限5",
-                    moduleId: "3"
-                },
-                {
-                    title: "报批权限1",
-                    moduleId: "4"
-                },
-                {
-                    title: "报批权限2",
-                    moduleId: "4"
-                },
-                {
-                    title: "报批权限3",
-                    moduleId: "4"
-                },
-                {
-                    title: "报批权限4",
-                    moduleId: "4"
-                },
-                {
-                    title: "报批权限5",
-                    moduleId: "4"
-                },
-                {
-                    title: "酒店权限1",
-                    moduleId: "5"
-                },
-                {
-                    title: "酒店权限2",
-                    moduleId: "5"
-                },
-                {
-                    title: "酒店权限3",
-                    moduleId: "5"
-                },
-                {
-                    title: "酒店权限4",
-                    moduleId: "5"
-                },
-                {
-                    title: "酒店权限5",
-                    moduleId: "5"
-                }
-            ],
+            authorityList: [],
             currentPage: 1, // 当前页码
             pageSize: 14,// 每页的数据条数
             stateArr: [],
             selectedAccount: [],
+            PathUrl:'http://localhost:5256',
+            opList :[],//操作方式
+            loading:true,
         }
     },
     methods: {
@@ -263,26 +131,19 @@ export default {
         handleCurrentChange(val) {
             this.currentPage = val;
         },
+        //模块下拉框
         Inquirechange() {
-            console.log(this.value)
-            var newarr = [];
-            if (this.input == "") {
-                newarr = this.authorityList;
-            } else {
-                for (var i = 0; i < this.authorityList.length; i++) {
-                    if (this.authorityList[i].moduleId.includes(this.value)) {
-                        newarr.push(this.authorityList[i]);
-                    }
-                }
-            }
-            this.authorityLists = newarr;
+            this.currentPage = 1;
+            this.pageload(this.value);
         },
         //多选框选中方法
         handleSelect(selection, row) {
-            console.log(selection)
-            this.stateArr[this.currentPage - 1] = selection
-            this.selectedAccount = this.stateArr.flat()
-            console.log(this.selectedAccount)
+            console.log(selection,row)
+            if (selection.length > 0) {
+                row.selList = this.opList.map(x => x.id);
+            }else{
+                row.selList = [];
+            }
         },
         selectRadiocheck(index, row) {
             console.log(index)
@@ -300,9 +161,163 @@ export default {
         selectRadioup(index, row) {
             console.log(index, row)
         },
+        pageload(moduleId){
+            var that = this;
+            //初始化界面数据
+            this.$axios.post(this.PathUrl + '/api/System/GetAuth', {
+                "pageSize": this.pageSize,
+                "currentPage": this.currentPage,
+                "moduleId":moduleId,
+            }, {
+                headers: {
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
+                }
+            }).then(resp => {
+                if (resp.data.code == 200) {
+                    that.authority = resp.data.data.setDataResult; //模块数据
+                    that.corporation = resp.data.data.companyDataResult; //公司数据
+                    that.authorityList = resp.data.data.systemMenuPermissionData; //页面数据(默认权限页面)
+                    that.authorityLists = that.authorityList;
+                    that.opList = resp.data.data.pageOperation; //操作方式
+                    that.loading =false;
+                }
+            }).then(suc=>{
+                if(this.valueposition != ''){
+                    this.JobChange();
+                }
+            })
+        },
+        //公司下拉框
+        companyChange(){
+            this.valuedepartmental = ''; //清空数据
+            this.valueposition = '';
+            this.position = [];
+            this.departmental = [];
+            var that = this;
+            //初始化界面数据
+            this.$axios.post(this.PathUrl + '/api/System/QueryDepartmentList', {
+                "CompanyId": this.valuecorporation,
+                "PortType": 1,
+            }, {
+                headers: {
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
+                }
+            }).then(resp => {
+                console.log(resp);
+                if (resp.data.code == 200) {
+                    that.departmental = resp.data.data;
+                }
+            })
+
+        },
+        //部门下拉框
+        depaChange(){
+            var that = this;
+            this.position = [], //职位数据
+            this.valueposition = '',//职位val
+            //初始化界面数据
+            this.$axios.post(this.PathUrl + '/api/System/QueryJobPost', {
+                "CompanyId": this.valuecorporation,
+                "DepId":this.valuedepartmental,
+                "PortType": 1,
+            }, {
+                headers: {
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
+                }
+            }).then(resp => {
+                console.log(resp);
+                if (resp.data.code == 200) {
+                    that.position =  resp.data.data;
+                }
+            })
+        },
+        //保存权限
+        saveAuth(){
+            var that = this;
+
+            if(this.valueposition == ''){
+                this.$message.error('请选择职位！');
+                return;  
+            }
+
+            var savejob = [];
+            this.authorityLists.forEach(item=>{
+                savejob.push({
+                    SmId:item.id,
+                    FIds:item.selList,
+                });
+            })
+            console.log(savejob);
+            //初始化界面数据
+            this.$axios.post(this.PathUrl + '/api/System/SaveJobAuth', {
+                "Jpid": this.valueposition,
+                "Savejobs": savejob,
+            }, {
+                headers: {
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
+                }
+            }).then(resp => {
+                console.log(resp);
+                if (resp.data.code == 200) {
+                    this.$message({
+                        message: '保存成功！',
+                        type: 'success'
+                    });
+                }else{
+                    this.$message.error('保存失败！'+ resp.data.msg);
+                }
+            })
+        },
+        //职位下拉获取权限
+        JobChange(){
+            let val = this.value == '' ? 13 :this.value;
+            var that = this;
+            //初始化界面数据
+            this.$axios.post(this.PathUrl + '/api/System/QueryJobAuth', {
+                "jobid": this.valueposition,
+                "moduleId":val,
+            }, {
+                headers: {
+                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
+                }
+            }).then(resp => {
+                console.log(resp);
+                if (resp.data.code == 200) {
+                    that.authorityList = resp.data.data; //页面数据(默认权限页面)
+                    that.authorityLists = that.authorityList;
+                }
+            })
+        },
+        //全选
+        allchange(selection){
+            let that = this;
+
+            if (selection.length > 0) {
+                selection.forEach(item => {
+                    item.selList = that.opList.map(x => x.id);
+                });
+
+            }else{
+                this.authorityLists.forEach(item => {
+                    item.selList = [];
+                });
+            }
+        },
+        checkchange(rowid, linid) {
+            this.authorityLists.forEach(item => {
+                if (item.id == rowid) {
+                    if(item.selList.indexOf(linid) == -1){
+                        item.selList.push(linid);
+                    }else{
+                        item.selList.splice(item.selList.indexOf(linid), 1)
+                    }
+                }
+            });
+            console.warn(this.authorityLists);
+        }
     },
     mounted() {
-        this.authorityLists = this.authorityList
+        this.pageload(13);
     }
 }
 </script>

src/components/child/Controltree.vue

@@ -1,78 +1,538 @@
 <template>
-    
+    <div class="controltree-box">
+        <div class="controltree-w">
+            <div class="controltree-ul" >
+                <div class="controltree-li" v-for="(item,index) in treeData" :key="index">
+                    {{item.label}}
+                    <div v-if="item.children" class="second-ul">
+                        <div class="second-ul-haed">
+                            <div>版块步骤</div>
+                            <div>预计完成时间</div>
+                            <div>完成时间</div>
+                        </div>
+                        <div v-if="item.panduan=='wu'">
+                            <div v-for="(seconditem,index) in item.children" :key="index"   class="li-steps-li">
+                                <div :style="filter_color(seconditem.state)">{{seconditem.label}}</div>
+                                <div>{{seconditem.date}}</div>
+                                <div>{{seconditem.enddate}}</div>
+                            </div>
+                        </div>
+                        <div v-if="item.panduan=='you'" style="padding:5px">
+                            <div v-for="(seconditem,index) in item.children" :key="index" class="second-li">
+                                <span>{{seconditem.label}}</span>
+                                <div class="li-steps-ul">
+                                    <div class="zanwu" v-if="!seconditem.children">暂无事件</div>
+                                    <div v-for="(stepsitem,index) in seconditem.children" :key="index"   class="li-steps-li">
+                                        <div :style="filter_color(stepsitem.state)">{{stepsitem.label}}</div>
+                                        <div>{{stepsitem.date}}</div>
+                                        <div>{{stepsitem.enddate}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
-
-
 <script>
 export default {
-    components: { Vue2OrgTree },
     data() {
         return {
-            treeData: {
-                id: 0,
-                label: "XXX科技有限公司",
-                children: [
+            treeData: [{
+                    id: 1,
+                    label: "团组出行",
+                },
                 {
                     id: 2,
-                    label: "产品研发部",
-                    children: [
-                    {
-                        id: 5,
-                        label: "研发-前端"
-                    },
-                    {
-                        id: 6,
-                        label: "研发-后端"
-                    },
-                    {
-                        id: 9,
-                        label: "UI设计"
-                    },
-                    {
-                        id: 10,
-                        label: "产品经理"
-                    }
-                    ]
+                    label: "确认出团",
                 },
                 {
                     id: 3,
-                    label: "销售部",
-                    children: [
-                    {
-                        id: 7,
-                        label: "销售一部"
-                    },
-                    {
-                        id: 8,
-                        label: "销售二部"
-                    }
+                    label: "经费预算",
+                    panduan:"wu",
+                    children:[
+                        {
+                            id:15,
+                            label: "完成经费预算",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10'
+                        }
                     ]
                 },
                 {
                     id: 4,
-                    label: "财务部"
+                    label: " 市场部人员报价对接/反馈",
+                    panduan:"wu",
+                    children:[
+                        {
+                            id:18,
+                            label: "完成报价对接/反馈",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10'
+                        },
+                        {
+                            id:19,
+                            label: "录入最终总经费预算",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10'
+                        },
+                        {
+                            id:20,
+                            label: "上传明细单",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10'
+                        }
+                    ]
+                },
+                {
+                    id: 5,
+                    label: "报批流程"
+                },
+                {
+                    id: 6,
+                    label: "护照/签证",
+                    panduan:"wu",
+                    children:[
+                        {
+                            id:22,
+                            label: "签证费用录入",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:23,
+                            label: "归还护照",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:2
+                        },
+                        {
+                            id:24,
+                            label: "出签＋取护照",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:3
+                        },
+                        {
+                            id:25,
+                            label: "送签",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:3
+                        },
+                        {
+                            id:26,
+                            label: "填资料",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:27,
+                            label: "取护照资料",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:28,
+                            label: "收集资料",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        }
+                    ]
+                },
+                {
+                    id: 7,
+                    label: "各版块操作",
+                    panduan:"you",
+                    children:[
+                        {
+                            id:29,
+                            label: "机票",
+                            children:[
+                                {
+                                    id:42,
+                                    label: "询价并导入黑屏代码",
+                                    date:"2023-01-12 ~ 2023-02-10",
+                                    enddate:'2023-02-10',
+                                    state:1
+                                },
+                                {
+                                    id:43,
+                                    label: "机票已占位",
+                                    date:"2023-01-12 ~ 2023-02-10",
+                                    enddate:'2023-02-10',
+                                    state:1
+                                },
+                                {
+                                    id:44,
+                                    label: "已出票",
+                                    date:"2023-01-12 ~ 2023-02-10",
+                                    enddate:'2023-02-10',
+                                    state:2
+                                },
+                                {
+                                    id:45,
+                                    label: "机票费用录入",
+                                    date:"2023-01-12 ~ 2023-02-10",
+                                    enddate:'',
+                                    state:3
+                                }
+                            ]
+                        },
+                        {
+                            id:30,
+                            label: "酒店",
+                            children:[
+                                {
+                                    id:46,
+                                    label: "酒店费用录入",
+                                    date:"2023-01-12 ~ 2023-02-10",
+                                    enddate:'2023-02-10'
+                                }
+                            ]
+                        },
+                        {
+                            id:31,
+                            label: "OP",
+                            children:[
+                                {
+                                    id:47,
+                                    label: "OP费用录入",
+                                    date:"2023-01-12 ~ 2023-02-10",
+                                    enddate:'2023-02-10'
+                                }
+                            ]
+                        },
+                        {
+                            id:32,
+                            label: "商邀",
+                            children:[
+                                {
+                                    id:48,
+                                    label: "报批/商邀费用录入",
+                                    date:"2023-01-12 ~ 2023-02-10",
+                                    enddate:'2023-02-10'
+                                }
+                            ]
+                        },
+                        {
+                            id:33,
+                            label: "其他",
+                            children:[
+                                {
+                                    id:49,
+                                    label: "增减款项录入",
+                                    date:"2023-01-12 ~ 2023-02-10",
+                                    enddate:'2023-02-10'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    id: 8,
+                    label: "费用审批",
+                    panduan:"wu",
+                    children:[
+                        {
+                            id:34,
+                            label: "机票费用审批",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:35,
+                            label: "酒店费用审批",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:36,
+                            label: "OP费用审批",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:37,
+                            label: "商邀费用审批",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:38,
+                            label: "增减款项审批",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        }
+                    ]
                 },
                 {
                     id: 9,
-                    label: "HR人事"
+                    label: "付款给供应商",
+                    panduan:"wu",
+                    children:[
+                        {
+                            id:39,
+                            label: "OP费用付款",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:40,
+                            label: "商邀费用付款",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        },
+                        {
+                            id:41,
+                            label: "增减款项付款",
+                            date:"2023-01-12 ~ 2023-02-10",
+                            enddate:'2023-02-10',
+                            state:1
+                        }
+                    ]
+                },
+                {
+                    id: 10,
+                    label: "开行前会"
+                },
+                {
+                    id: 11,
+                    label: "送机"
+                },
+                {
+                    id: 12,
+                    label: "数据/附件归档"
+                },
+                {
+                    id: 13,
+                    label: "接机"
+                },
+                {
+                    id: 14,
+                    label: "客户意见表"
                 }
-                ]
-            }
+            ]
         }
     },
     created(){
        
     },
     methods:{
-
+        filter_color(val){
+            if(val==1){
+                return "color:green"
+            }
+            if(val==3){
+                return "color:red"
+            }
+            if(val==2){
+                return "color:#8f8383"
+            }
+        }
+    },
+    filters:{
+        
     }
 }
 </script>
 <style>
+    ul li{
+        list-style: none;
+    }
     .controltree-box{
         background-color: #fff;
         box-shadow: 0 0 5px #0005;
         border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        padding: 100px 0;
+    }
+    .controltree-ul{
+        display: flex;
+        flex-direction: column;
+    }
+    .controltree-w{
+        display: inline-block;
+        margin: 0 auto;
+
+    }
+    .controltree-li{
+        display: inline-block;
+        padding: 10px 20px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 5px;
+        text-align: center;
+        position: relative;
+    }
+    .controltree-li:not(:last-child){
+        margin-bottom: 250px;
+    }
+    .controltree-li:not(:last-child)::after{
+        content: "";
+        display: inline-block;
+        width: 1px;
+        height: 245px;
+        position: absolute;
+        left: 50%;
+        top: 44px;
+        background-color: #F1B72C;
+    }
+    .controltree-li:nth-child(2n) .second-ul::before{
+        content: "";
+        display: inline-block;
+        width: 75px;
+        height: 1px;
+        position: absolute;
+        left: -75px;
+        top: 20px;
+        background-color: #F1B72C;
+    }
+    .controltree-li:nth-child(2n+1) .second-ul::before{
+        content: "";
+        display: inline-block;
+        width: 75px;
+        height: 1px;
+        position: absolute;
+        right: -75px;
+        top: 20px;
+        background-color: #1E5DA5;
+    }
+    .second-ul{
+        width: 480px;
+        position: absolute;
+        top: 0px;
+        box-shadow: 0 0 5px #0005;
+        border-radius: 5px;
+    }
+    .second-li{
+        text-align: left;
+        position: relative;
+        margin-bottom: 10px;
+    }
+    .controltree-li:nth-child(2n+1) .second-ul{
+        flex-direction: row-reverse;
+        color: #1E5DA5;
+    }
+    .controltree-li:nth-child(2n+1) .second-ul .second-ul-haed{
+        background-color: #1E5DA5;
+    }
+    .controltree-li:nth-child(2n) .second-ul .second-ul-haed{
+        background-color: #F1B72C;
+    }
+    .second-ul-haed{
+        display: flex;
+        justify-content: space-between;
+        color: #fff;
+        border-radius: 5px 5px 0px 0px;
+    }
+    .second-ul-haed>div{
+        padding: 10px 0;
+    }
+    .second-ul-haed>div:nth-child(1){
+        width: 30%;
+    }
+    .second-ul-haed>div:nth-child(2){
+        border-left: 1px solid #fff;
+        border-right:1px solid #fff ;
+        width: 50%;
+    }
+    .second-ul-haed>div:nth-child(3){
+        width: 20%;
+    }
+    /*.controltree-li:nth-child(2n+1) .second-ul .second-li::after{
+        content: "";
+        display: inline-block;
+        width: 24px;
+        height: 2px;
+        position: absolute;
+        left: 21px;
+        top: 10px;
+        background-color: #1E5DA5;
+    }*/
+    .controltree-li:nth-child(2n) .second-ul{
+        left: 300px;
+        color: #F1B72C;
+    }
+    .controltree-li:nth-child(2n+1) .second-ul{
+        right: 300px;
+        color: #1E5DA5;
+    }
+    .controltree-li:nth-child(2n){
+        background-color: #F1B72C;
+        color: #fff;
+    }
+    .controltree-li:nth-child(2n+1){
+        background-color: #1E5DA5;
+        color: #fff;
+    }
+    /*.controltree-li:nth-child(2n) .second-ul .second-li::after{
+        content: "";
+        display: inline-block;
+        width: 24px;
+        height: 2px;
+        position: absolute;
+        right: 21px;
+        top: 10px;
+        background-color: #F1B72C;
+    }*/
+    .second-li span{
+        display: inline-block;
+        width: 30%;
+        color: #555;
+        font-size: 17px;
+        font-weight: 600;
+        margin-bottom: 5px;
+    }
+    .li-steps-li{
+        display: flex;
+        align-items: center;
+        color: #8f8383;
+    }
+    .li-steps-li>div{
+        font-size: 13px;
+        padding: 5px 0;
+        text-align: center;
+        height: 100%;
+        padding: 11px 0;
+    }
+    .li-steps-li{
+        border: 1px solid #f7f7f7;
+    }
+    .li-steps-li:not(:first-child){
+        border-top: none;
+    }
+    .li-steps-li>div:not(:first-child){
+        border-left:1px solid #f7f7f7 ;
+    }
+    .li-steps-li>div:nth-child(1){
+        width: 30%;
+    }
+    .li-steps-li>div:nth-child(2){
+        width: 50%;
+    }
+    .li-steps-li>div:nth-child(3){
+        width: 20%;
+    }
+    .zanwu{
+        font-size: 12px;
+        color: #8f8383;
+        width: 30%;
+        text-align: center;
+        padding: 5px;
     }
 </style>

src/components/child/index.vue

@@ -322,7 +322,7 @@ export default {
         }
     },
     mounted(){
-        this.token=localStorage.getItem('token');
+        this.token=JSON.parse(localStorage.getItem('userinif')).token;
         console.log(this.token)
         this.Getemployees();
     }

src/components/home.vue

@@ -26,8 +26,8 @@
                   <img src="../assets/avatar.jpg" alt="" />
                 </div>
                 <div v-if="panduan" class="avatar-text">
-                  <div class="avatar-name">姓名: 王洪 部门: 信息部</div>
-                  <div class="avatar-division">职位: 后端开发</div>
+                  <div class="avatar-name">姓名: {{userinif.userInfo.cnName}} 部门: {{userinif.userInfo.depName}}</div>
+                  <div class="avatar-division">职位: {{userinif.userInfo.jobName}}</div>
                 </div>
               </div>
             </div>
@@ -159,8 +159,8 @@
                   <img src="../assets/avatar.jpg" alt="" />
                 </div>
                 <div class="avatar-text">
-                  <div class="avatar-name">姓名: 王洪 部门: 信息部</div>
-                  <div class="avatar-division">职位: 后端开发</div>
+                  <div class="avatar-name">姓名:{{userinif.userInfo.cnName}} 部门: {{userinif.userInfo.depName}}</div>
+                  <div class="avatar-division">职位: {{userinif.userInfo.jobName}}</div>
                 </div>
               </div>
             </div>
@@ -188,6 +188,7 @@
           username:"雷怡",
           indexs:"1",
           pdinstrument: true,
+          userinif:'',
         };
       },
       methods: {
@@ -267,6 +268,8 @@
         this.ifIndexValue();
       },
       created() {
+        this.userinif=JSON.parse(localStorage.getItem('userinif'));
+        console.log(this.userinif)
         console.log(this.$route);
       },
     };
@@ -377,7 +380,7 @@
       z-index: 2;
       right: 20px;
       top: -300px;
-      width: 260px;
+      width: 310px;
       border-radius: 5px;
       overflow: hidden;
       box-shadow: 0 0 5px #0005;