manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/awayOffice/awayOffice.vue

<template>
<section>
    <div class="sidebars" ref="sidebars" style="width: 200px;display: block;background: #fff" v-if="!isDingding">
        <h3><i class="iconfont firerock-iconbaoxiao" style="padding-right: 10px"></i>出差管理</h3>
        <el-divider ></el-divider>
        <el-col :span="12">
            <el-menu default-active="1" class="el-menu-vertical-demo" @select="staffs" background-color="#ffffff" text-color="#666666" active-text-color="#20A0FF" style="width:100%">
                <el-menu-item index="1" v-if="permissions.awayOfficeFil">
                    <i class="iconfont firerock-icontianbao"></i>
                    <span slot="title">出差填报</span>
                </el-menu-item>
                <el-submenu index="2" v-if="permissions.awayOfficeAll">
                    <template slot="title">
                        <i class="iconfont firerock-iconbaoxiaodan"></i>
                        <span>{{"出差列表"}}</span>
                    </template>
                    <!-- 导航切换 -->
                    <el-menu-item index="2-1" v-if="permissions.awayOfficeAll"><p @click="bills(false, 2)">全部</p></el-menu-item>
                    <el-menu-item index="2-2" v-if="permissions.awayOfficeAudit && !isDingding"><p @click="bills(true, 1)">待审核</p></el-menu-item>
                </el-submenu>
                <el-menu-item index="3" @click="bills(false, 2)" v-if="!permissions.awayOfficeAll">
                    <i class="iconfont firerock-iconbaoxiaodan"></i>
                    <span slot="title">我的出差</span>
                </el-menu-item>
                <el-menu-item index="4" v-if="permissions.awayOfficeStatistical">
                    <template slot="title">
                        <i class="iconfont firerock-icontianbao"></i>
                        <span slot="title">出差统计</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="5" v-if="permissions.awayOfficeProcess">
                    <template slot="title">
                        <i class="iconfont firerock-iconliucheng"></i>
                        <span slot="title">出差审批流程</span>
                    </template>
                </el-menu-item>
            </el-menu>
        </el-col>
    </div>

    <div class="contents">
        <div ref="headine" class="headine" v-if="!displayTable">
        <h3 ref="headHe" style="padding-left: 220px">出差填报</h3>
        </div>
        <!-- 出差填报 -->
        <div class="tops" v-if="!displayTable && apk == 0">
            <div class="ctons">
                <el-form ref="addformAO" v-loading="formloading" :model="addform" label-width="80px" :rules="formrules" style="width:700px">
                    <!-- 出差事由 -->
                    <el-form-item label="出差事由" prop="reason" style="width:100%">
                        <el-input v-model="addform.reason" style="width: 555px" maxlength="25" type="text" show-word-limit></el-input>
                    </el-form-item>
                    <!-- 维度选择添加 -->
                        <el-form-item label="投入项目" style="width:300px;margin-right:30px" prop="projectId">
                            <el-select style="width:100%" @change="getwuduList(1)" v-model="addform.projectId" filterable clearable placeholder="请选择投入项目" >
                                <el-option
                                v-for="item in projectList"
                                :key="item.id"
                                :label="item.projectName"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="wuduData.customDegreeName"
                        v-if="addform.projectId != null && wuduData.customDegreeActive == 1"
                        style="width:300px;margin-right:30px"
                        prop="degreeId">
                            <el-select style="width:100%" v-model="addform.degreeId" filterable clearable placeholder="请选择" >
                                <el-option
                                v-for="item in wuduList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <span>行程</span> -->
                        <!-- 交通工具 -->
                        <el-form-item label="交通工具" style="width:100%">
                            <el-radio-group v-model="addform.way">
                                <el-radio :label="0">飞机</el-radio>
                                <el-radio :label="1">火车</el-radio>
                                <el-radio :label="2">汽车</el-radio>
                                <el-radio :label="3">轮船</el-radio>
                                <el-radio :label="4">其他</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 出发城市 -->
                        <el-form-item label="出发城市" style="width:300px;margin-right:30px" prop="cityFrom">
                            <el-select style="width:100%" v-model="addform.cityFrom" filterable clearable placeholder="请选择出发城市" >
                                <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 目的城市 -->
                        <el-form-item label="目的城市" style="width:300px" prop="cityTo">
                            <el-select style="width:100%" v-model="addform.cityTo" filterable clearable placeholder="请选择目的城市">
                                <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 开始时间 -->
                        <el-form-item label="开始时间" style="width:300px;margin-right:30px" prop="startDate">
                            <el-date-picker
                            type="date"
                            placeholder="开始日期"
                            value-format="yyyy-MM-dd"
                            v-model="addform.startDate"
                            style="width:100%"
                            @change="datechg(1)">
                            </el-date-picker>
                        </el-form-item>
                        <!-- 结束时间 -->
                        <el-form-item label="结束时间" style="width:300px" prop="endDate">
                            <el-date-picker
                            type="date"
                            placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            v-model="addform.endDate"
                            style="width:100%"
                            @change="datechg(0)">
                            </el-date-picker>
                        </el-form-item>
                        <!-- 单程/往返 -->
                        <el-form-item label="单程往返" style="width:300px;margin-right:30px">
                            <el-radio-group v-model="addform.goBack">
                                <el-radio :label="0">单程</el-radio>
                                <el-radio :label="1">往返</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 出差天数 -->
                        <el-form-item label="出差天数" style="width:300px">
                            <el-input type="number" placeholder="自动计算" v-model="addform.dayCount" min="0" style="width:100%"></el-input>
                        </el-form-item>
                        <!-- 出差备注 -->
                        <el-form-item label="出差备注" style="width:635px">
                            <el-input type="textarea" v-model="addform.remark" :rows="3" style="width: 100%" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                </el-form>
                <div>
                    <p style="width:635px;text-align:center;">
                        <el-button type="primary" @click="formsubmit('formrules')" size="mini">提交</el-button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 出差列表 -->
        <div class="tops" v-if="displayTable && apk == 0" :style="isDingding ? 'padding-left:20px' : ''">
            <div class="ctons">
        <!-- 出差列表筛选 -->
                <div class="flex">
                    <div><el-select v-model="ownerIds" placeholder="请选择出差人员" clearable @change="billss()" style="width: 140px" size="small" filterable="true">
                            <el-option
                            v-for="item in users"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                    </el-select></div>
                    <div><span style="color: #606266">交通工具</span>
                        <el-select v-model="type" placeholder="请选择交通工具" clearable @change="billss()" style="width: 140px;" size="small" filterable="true">
                            <el-option label="飞机" :value="0"></el-option>
                            <el-option label="火车" :value="1"></el-option>
                            <el-option label="汽车" :value="2"></el-option>
                            <el-option label="轮船" :value="3"></el-option>
                            <el-option label="其他" :value="4"></el-option>
                        </el-select>
                    </div>
                    <div><span style="color: #606266">出差状态</span>
                        <el-select :disabled="falg" v-model="code" placeholder="请选择出差状态" clearable @change="billss()" size="small" style="width: 140px" filterable="true">
                            <el-option label="审核通过" :value="0"></el-option>
                            <el-option label="待审核" :value="1"></el-option>
                            <el-option label="驳回" :value="2"></el-option>
                            <el-option label="已撤销" :value="3"></el-option>
                        </el-select>
                        
                    </div>
                    <div><span style="color: #606266">时间段</span>
                        <el-date-picker v-model="createDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="billss()" value-format="yyyy-MM-dd" placeholder="选择日期" size="small" clearable style="width:280px"></el-date-picker>
                    </div>
                </div>
        <!-- 出差列表 -->
                <el-table :data="tableList" style="width: 100%" height="90%">
                    <el-table-column prop="ownerName" label="出差人员" width="100" fixed="left" align="center"></el-table-column>
                    <el-table-column prop="reason" label="出差事由" width="150" header-align="center"></el-table-column>
                    <el-table-column prop="projectName" label="投入项目" width="150" align="center"></el-table-column>
                    <el-table-column prop="degreeName" :label="wuduData.customDegreeName" width="150" align="center"></el-table-column>
                    <el-table-column label="交通工具" width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.way == 0">飞机</span>
                            <span v-if="scope.row.way == 1">火车</span>
                            <span v-if="scope.row.way == 2">汽车</span>
                            <span v-if="scope.row.way == 3">轮船</span>
                            <span v-if="scope.row.way == 4">其他</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="行程" width="120" align="center" v-if="!isDingding">
                        <template slot-scope="scope">{{scope.row.cityFrom + '-' + scope.row.cityTo}}</template>
                    </el-table-column>
                    <el-table-column prop="indate" label="申请时间" width="150" align="center" v-if="!isDingding"></el-table-column>
                    <el-table-column label="出差天数" width="120" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.dayCount}}天</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="startDate" label="出差开始时间" width="150"></el-table-column>
                    <el-table-column prop="endDate" label="出差结束时间" width="150"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0">审核通过</span>
                            <span v-if="scope.row.status == 1" style="color: orange">待审核</span>
                            <span v-if="scope.row.status == 2" style="color: red">驳回</span>
                            <span v-if="scope.row.status == 3" style="color: #666666">撤销</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" width="200">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="标题" width="200" trigger="hover" :content="scope.row.remark">
                                <div slot="reference" class="apls">{{scope.row.remark}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="isDingding" :label="isAuditList ? '审核' : '操作'" width="180" fixed="right" >
                        <template slot-scope="scope">
                            <div v-if="isAuditList">
                                <el-button icon="el-icon-check" circle size="mini" @click="approve(scope.row)"></el-button>
                                <el-button icon="el-icon-close" circle size="mini"  @click="deny(scope.row)"></el-button>
                            </div>
                            <div v-if="!isAuditList">
                                <el-button v-if="!isAuditList && ((scope.row.status != 0 && scope.row.ownerId == user.id) || permissions.leaveAll)" icon="el-icon-delete" circle size="mini"  @click="deletes(scope.row)"></el-button>
                                <el-button v-if="((scope.row.status != 0 && scope.row.ownerId == user.id) || permissions.leaveAll) || scope.row.status == 1" icon="el-icon-edit" circle size="mini" @click="editor(scope.row)"></el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="!isDingding" label="操作" width="90" fixed="right">
                        <template slot-scope="scope">
                            <el-button icon="iconfont firerock-iconguanlian" circle size="mini" @click="DingdingEditor(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 页码 -->
                <div class="poss">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[20, 50, 100, 200]"
                        :page-size="20"
                        layout="total, sizes, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 出差统计 -->
        <div class="tops" v-if="displayTable && apk == 1">
            <div class="ctons">
            <div style="display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #f2f2f2">
                <div style="display: inline-block;width: 350px">
                    <el-input style="float:left;" v-model="searchWord" class="input-with-select" placeholder="请输入人员搜索" clearable="true" size="small">
                        <el-button slot="append" @click="statistical()" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div style="display: inline-block;width: 700px;margin-left: 100px">
                    <span style="display: inline-block;margin: 0 15px 0 20px;color: rgb(96, 98, 102);">时间段</span>
                    <el-date-picker
                        size="small"
                        v-model="searchDates"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="statistical()"
                        :clearable="false"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
                
            </div>
            <!-- <div style="margin-top: 30px"> -->
            <div>
                <el-table key="apk2is4" v-loading="loading" :data="statisticalList" height="780px" style="width: 99%">
                    <el-table-column prop="ownerName" label="姓名" width="300">
                        <template slot-scope="scope">
                            <div v-if="scope.row.ownerName">
                            {{scope.row.ownerName}}
                            </div>
                            <div v-else>
                            <span>暂无出差统计</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="departmentName" label="部门" width="300">
                        <!-- <template slot-scope="scope">
                            {{scope.row.departmentName}}/天
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="dayCount" label="累计出差天数" width="300">
                        <template slot-scope="scope">
                            {{scope.row.dayCount}}天
                        </template>
                    </el-table-column>
                    <el-table-column label="详情" width="300">
                        <template slot-scope="scope">
                            <!-- {{scope.row.timeDays}} -->
                            <el-button size="mini" @click="viewDetails(1,scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            </div>
        </div>
        <!-- 出差审批流 -->
        <div class="tops" v-if="displayTable && apk == 2">
            <div class="ctons">
                <el-col :span="6" >
                    <el-scrollbar style="height:100%;border:1px solid #dddddd;margin-left:15px;" >
                        <div class="tree" :style="'height:'+ (tableHeight-120) + 'px'">
                            <el-tree :data="sdata" :props="sdefaultProps" @node-click="handleNodeClick" accordion></el-tree>
                        </div>
                    </el-scrollbar>
                </el-col>
                <el-col :span="18" >
                    <el-scrollbar style="height:100%;border:1px solid #dddddd;margin-right:20px;" >
                        <div class="tree" :style="'height:'+ (tableHeight-120) + 'px'">
                            <div style="padding:5px;color:#333;" v-if="depData != null">设置 &lt;<span style="color:#20a0ff;">{{depData.label}}&gt;</span> 直属人员出差审批流程
                                <el-tooltip effect="dark" v-if="depData != null && depData.children!=null" content="仅适用于当前部门的直属人员，子部门人员的审批流程需要单独设置" placement="top-start">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </div>
                            <div style="padding:5px;" v-if="depData == null">请选择部门</div>
                            <div style="width:100%;margin:0 auto;text-align: center; margin-top:50px;" v-if="depData != null">
                                <span>员工填报</span>
                                <icon class="iconfont firerock-iconright"></icon>
                                <icon class="iconfont firerock-iconInsertLine addNode" @click="showNodeDialog(0)"></icon>
                                <icon class="iconfont firerock-iconright"></icon>
                                <span v-for="(item, index) in dataArray" :key="item.seq" >
                                    <el-button type="primary" v-if="item.auditorType == 1" @click="editNodeDialog(index, item)">{{item.auditDeptName}}</el-button>
                                    <el-button type="primary" v-if="item.auditorType == 0" >项目负责人</el-button>
                                    <el-button type="primary" v-if="item.auditorType == 2" @click="editNodeDialog(index, item)">{{item.userName}}</el-button>
                                    <icon class="iconfont firerock-iconright"></icon>
                                    <icon class="iconfont firerock-iconInsertLine addNode" @click="showNodeDialog(index+1)"></icon>
                                    <icon class="iconfont firerock-iconright"></icon>
                                </span>
                                <icon class="iconfont firerock-iconApp_New_Line" style="color:#20A0FF;"></icon>
                                审批完成
                            </div>
                            <div style="width:100%;margin:0 auto;margin-bottom:30px;position: absolute;bottom: 0px;text-align: center; ">
                                <el-button type="primary" @click="submitInsert">保存</el-button>
                            </div>
                        </div>
                    </el-scrollbar>
                </el-col>
            </div>
            <el-dialog  title="请选择审批人" v-if="dialogVisible" :visible.sync="dialogVisible"  width="460px">
                <el-form label-width="140px">
                    <el-form-item label="选择部门/指定人员" >
                        <el-cascader filterable ref="deptCascader" v-model="curDeptId" placeholder="请选择部门/指定人员" style="width: 100%" @change="chooseDept" :options="soption" :props="{ checkStrictly: true,expandTrigger: 'hover' }" :show-all-levels="false" clearable></el-cascader>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="default" @click="deleteNode" v-if="!isAdd" style="float:left;">删除</el-button>
                    <el-button type="primary" @click="addNode" >确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    <!-- 编辑框 -->
    <el-dialog title="出差详情" v-if="editDialog" :visible.sync="editDialog" width="1000px">
        <!-- <el-form ref="editItemForm" :model="editItemForm" label-width="80px" :rules="editItemFormRules"> -->
        <el-form ref="editItemForm" :model="editItemForm" label-width="80px" :rules="editItemRules">
            <el-form-item label="出差人员" prop="ownerName"  style="width: 300px;display: inline-block;">
                <span>{{editItemForm.ownerName}}</span>
            </el-form-item>
            <el-form-item label="单程/往返" prop="goBack" style="width: 300px;display: inline-block;">
                <el-radio-group v-model="editItemForm.goBack">
                    <el-radio :label="0">单程</el-radio>
                    <el-radio :label="1">往返</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 交通工具 -->
            <el-form-item label="交通工具" style="width:100%">
                <el-radio-group v-model="editItemForm.way">
                    <el-radio :label="0">飞机</el-radio>
                    <el-radio :label="1">火车</el-radio>
                    <el-radio :label="2">汽车</el-radio>
                    <el-radio :label="3">轮船</el-radio>
                    <el-radio :label="4">其他</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="投入项目" style="width:300px;margin-right:30px;display:inline-block;" prop="projectId">
                <el-select style="width:100%" @change="getwuduList(0)" v-model="editItemForm.projectId" filterable clearable placeholder="请选择投入项目" >
                    <el-option
                    v-for="item in projectList"
                    :key="item.id"
                    :label="item.projectName"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="wuduData.customDegreeName"
            v-if="editItemForm.projectId != null && wuduData.customDegreeActive == 1"
            style="width:300px;margin-right:30px;display:inline-block;"
            prop="degreeName">
                <el-select style="width:100%" v-model="editItemForm.degreeId" filterable clearable placeholder="请选择" >
                    <el-option
                    v-for="item in wuduList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出发城市" style="width:300px;margin-right:30px;display: inline-block;" prop="cityFrom">
                <el-select style="width:100%" v-model="editItemForm.cityFrom" filterable clearable placeholder="请选择出发城市" >
                    <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 目的城市 -->
            <el-form-item label="目的城市" style="width:300px;display: inline-block;" prop="cityTo">
                <el-select style="width:100%" v-model="editItemForm.cityTo" filterable clearable placeholder="请选择目的城市">
                    <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始时间" style="width:300px;margin-right:30px;display:inline-block;" prop="startDate">
                <el-date-picker
                type="date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                v-model="editItemForm.startDate"
                style="width:100%"
                @change="datechg2(1)">
                </el-date-picker>
            </el-form-item>
            <!-- 结束时间 -->
            <el-form-item label="结束时间" style="width:300px;display:inline-block;" prop="endDate">
                <el-date-picker
                type="date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                v-model="editItemForm.endDate"
                style="width:100%"
                @change="datechg2(0)">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="出差天数" style="width:300px">
                <el-input type="number" placeholder="自动计算" v-model="editItemForm.dayCount" min="0" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item label="备注" style="width: 100%">
                <el-input type="textarea" v-model="editItemForm.remark" :rows="3" style="width: 62%" maxlength="100" show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialog = false">取 消</el-button>
            <el-button type="primary" @click="determine()">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 出差统计查看详情 -->
    <el-dialog title="出差详情" :visible.sync="seeDialog" width="1000px">
        <el-table :data="detailsData" style="width:100%" height="400" v-loading="detailsloading">
            <!-- <el-table-column prop="date" label="日期" width="150"></el-table-column>
            <el-table-column prop="name" label="姓名" width="200"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column> -->
            <el-table-column prop="ownerName" label="出差人员" width="100" fixed="left"></el-table-column>
            <el-table-column prop="reason" label="出差事由" width="150" header-align="center"></el-table-column>
            <el-table-column prop="projectName" label="投入项目" width="150" align="center"></el-table-column>
            <el-table-column label="交通工具" width="120" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.way == 0">飞机</span>
                    <span v-if="scope.row.way == 1">火车</span>
                    <span v-if="scope.row.way == 2">汽车</span>
                    <span v-if="scope.row.way == 3">轮船</span>
                    <span v-if="scope.row.way == 4">其他</span>
                </template>
            </el-table-column>
            <el-table-column label="行程" width="120" align="center">
                <template slot-scope="scope">{{scope.row.cityFrom + '-' + scope.row.cityTo}}</template>
            </el-table-column>
            <el-table-column prop="indate" label="申请时间" width="150" align="center"></el-table-column>
            <el-table-column label="出差天数" width="80" align="center">
                <template slot-scope="scope"><div>{{scope.row.dayCount}}天</div></template>
            </el-table-column>
            <el-table-column prop="startDate" label="出差开始时间" width="150" align="center"></el-table-column>
            <el-table-column prop="endDate" label="出差结束时间" width="150" align="center"></el-table-column>
            <el-table-column prop="remark" label="备注" width="200">
                <template slot-scope="scope">
                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" :content="scope.row.remark">
                        <div slot="reference" class="apls">{{scope.row.remark}}</div>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <div class="poss" style="text-align:right;">
            <el-pagination
                @size-change="detailsSizeChange"
                @current-change="detailsCurrentChange"
                :current-page="detailspage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="20"
                layout="total, sizes, prev, pager, next"
                :total="detailstotal">
            </el-pagination>
        </div>
    </el-dialog>

    <!-- 钉钉环境交互效果切换 -->
    <el-dialog title="进行项目关联" :visible.sync="DingdingEditDialog" width="800px">
        <el-form ref="DingdingForm" label-width="80px" style="margin:40px 0">
            <el-form-item label="投入项目" style="width:300px;margin-right:30px;display:inline-block;" prop="projectId">
                <el-select style="width:100%" @change="getwuduList(2,1)" v-model="DingdingForm.projectId" filterable clearable placeholder="请选择投入项目" @clear="DingdingClear">
                    <el-option
                    v-for="item in projectList"
                    :key="item.id"
                    :label="item.projectName"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="wuduData.customDegreeName"
            
            style="width:300px;margin-right:30px;display:inline-block;"
            prop="degreeName">
                <el-select style="width:100%" v-model="DingdingForm.degreeId" filterable clearable placeholder="请选择" >
                    <el-option
                    v-for="item in wuduList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="DingdingEditDialog = false">取 消</el-button>
            <el-button type="primary" @click="DingdingDetermine()">确 定</el-button>
        </span>
    </el-dialog>
</section>
</template>

<script>
import citys from '../../assets/citys/shju.json'
export default {
    name: "awayOffice",
    data(){
        // 验证手机号
        
        // var checks = (rule, value, callback) => {
        //     if (!value) {
        //             return callback(new Error('出差天数不能为空'));
        //         } else {
        //             if (value > this.timeChoose) {
        //             return callback(new Error('超过当前选择日期的天数'));
        //             } else {
        //             callback();
        //             }
        //         }
        //     };
        return {
            displayTable: false,
            formloading: false,
            apk: 0,
            // userdata: JSON.parse(sessionStorage.getItem("user")),

            permissions: JSON.parse(sessionStorage.getItem("permissions")),
            addform: {
                reason: null, //出差事由
                startDate: null,  //开始时间
                endDate: null,    //结束时间
                way: 0,    //交通工具
                cityFrom: null,   //出发城市
                cityTo: null, //目的城市
                goBack: 0, //单程往返
                dayCount: null,   //出差天数
                remark: '',  //备注
                projectId: null,  //项目id
                wuduId:null      //维度id
            },
            formrules:{
                reason:[{ required: true, message: "请输入出差事由", trigger: "blur" }],
                cityFrom:[{ required: true, message: "请选择出发城市", trigger: "blur" }],
                cityTo:[{ required: true, message: "请选择目的城市", trigger: "blur" }],
                startDate:[{ required: true, message: "请选择开始时间", trigger: "blur" }],
                endDate:[{ required: true, message: "请选择结束时间", trigger: "blur" }]
            },
            editItemRules:{
                cityFrom:[{ required: true, message: "请选择出发城市", trigger: "blur" }],
                cityTo:[{ required: true, message: "请选择目的城市", trigger: "blur" }],
                startDate:[{ required: true, message: "请选择开始时间", trigger: "blur" }],
                endDate:[{ required: true, message: "请选择结束时间", trigger: "blur" }]
            },
            cityList:[],
            cityList2:[],

            projectList: [],
            wuduList: [],
            wuduData: JSON.parse(sessionStorage.getItem("user")).timeType,

            tableList: [],
            isAuditList: false,
            
            editItemForm: {},
            // editItemFormRules: {
            //     timeDays: [{required: true, validator: checks, trigger: 'blur'}],
            //     leaveType: [{ required: true, message: "请选择出差类型", trigger: "blur" }]
            // },
            editDialog: false,
            users: null,
            user: null,


            total:0,
            page: 1,
            size: 20,
            falg: 0,
            code: '',
            type: '',
            ownerIds: null,
            createDate: [],


            // 出差统计
            searchWord:'',
            searchDates: null,
            searchStartDate: null,
            searchEndDate: null,
            statisticalList: [],

                // 出差统计查看详情
                seeDialog: false,
                detailsData: [],
                detailstotal: 0,
                detailspage: 1,
                detailssize: 20,
                detailsuserid: null,
            
            // 出差审批流
            sdata: [],
            sdefaultProps: {
                children: 'children',
                label: 'label'
            },
            depData: null,
            dataArray: [],
            dialogVisible: false,
            curDeptId: null,
            isAdd: false,
            susers: [],

            // 钉钉环境交互
            isDingding: 0,
            DingdingEditDialog: false,
            DingdingForm:{}
        }
    },
    created(){
        this.cityList = citys
        // console.log("city",this.cityList);
        let height = window.innerHeight;
        this.tableHeight = height - 195;
        const that = this;
        window.onresize = function temp() {
            that.tableHeight = window.innerHeight - 195;
        };
        this.isDingding = this.wuduData.syncDingding
    },
    mounted(){
        if(this.isDingding){
            this.staffs(2,['2'])
        }
        this.getTableList()
        this.getProjectList()
        this.getDepartment()
        
        
        // console.log("session",this.wuduData);
    },
    methods: {
        // 钉钉环境交互
        DingdingClear(){
            this.wuduList = []
            this.DingdingForm.degreeId = null
        },
        DingdingEditor(e){
            this.DingdingEditDialog = true
            if(e.degreeId != null){
                e.degreeId = e.degreeId + ''
                // console.log("e.degreeId",e.degreeId);
            }
            this.DingdingForm = e
            this.getwuduList(2)
            // console.log('editor',this.DingdingForm);
        },
        DingdingDetermine(){
            let edddd = {
                id: this.DingdingForm.id,
                projectId: this.DingdingForm.projectId,  //项目id
                degreeId:this.DingdingForm.degreeId,     //维度id
                degreeName: null
            }
            for(let i=0; i<this.wuduList.length; i++){
                if(this.wuduList[i].id == edddd.degreeId){
                    edddd.degreeName = this.wuduList[i].name
                }
            }
            this.http.post( '/business-trip/modifyProject', edddd,
                    res => {
                        if (res.code == "ok") {
                            this.DingdingForm = {}
                            this.DingdingEditDialog = false
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                            this.billss()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
        },





        staffs(key, keyPath) {
            // console.log("keypath",keyPath)
            if (keyPath[0] == '1') {
                this.displayTable = false;
                this.apk = 0
            } else if(keyPath[0] == '2' || keyPath[0] == '3') {
                this.displayTable = true;
                this.apk = 0
                if(this.users == null){ this.getUsers() }
            } else if(keyPath[0] == '4'){
                if(this.searchDates == null){
                    this.searchDates = this.getautoDate()
                    // console.log('000');
                }
                this.displayTable = true;
                this.apk = 1
                
                this.statistical()
            } else {
                this.displayTable = true;
                this.apk = 2
            }
        },
        // 导航切换
        bills(audit, tr){
            if(tr) {
                this.code = ''
                this.createDate = []
                // this.ownerIds = ''
                this.type = ''
                if(tr == 1) {
                    this.falg = 1
                    this.code = 1
                } else if(tr == 2) {
                    this.code = ''
                    this.falg = 0
                } else {
                    this.falg = 0
                }
            } else {
                this.falg = false
            }
            this.tableList = []
            this.displayTable = true;
            this.isAuditList = audit;
            this.loading = true
            var param = {
                pageIndex: this.page,
                pageSize: this.size,
                status: this.code,
                startDate: this.createDate[0],
                endDate: this.createDate[1],
                ownerId: this.ownerIds,
                leaveType: this.type,
            };
            if (this.isAuditList) {
                param.status = 1;
            }
            this.list = [];
            // this.total = 0;
            this.http.post('/business-trip/list', param,
                res => {
                    if (res.code == "ok") {
                        this.tableList = res.data.records
                        this.total = res.data.total
                        this.loading = false
                    } else {
                        this.loading = false
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.loading = false
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
        handleSizeChange(val){
            this.size = val;
            this.bills()
        },
        handleCurrentChange(val) {
            // console.log(val, 1, '1')
            this.page =  val;
            this.bills()
        },

        // 出差申请
        formsubmit(){
            this.$refs.addformAO.validate(val => {
                if(val){
                    this.formloading = true
                    // console.log("addform",this.addform);
                    this.http.post( '/business-trip/add', this.addform,
                    res => {
                        if (res.code == "ok") {
                            this.formloading = false
                            this.$message({
                                message: "申请成功",
                                type: "success"
                            })
                            this.addform = {
                                reason: null, //出差事由
                                startDate: null,  //开始时间
                                endDate: null,    //结束时间
                                way: 0,    //交通工具
                                cityFrom: null,   //出发城市
                                cityTo: null, //目的城市
                                goBack: 0, //单程往返
                                dayCount: null,   //出差天数
                                remark: '',  //备注
                                projectId: null,  //项目id
                                degreeId:null      //维度id
                            }
                        } else {
                            this.formloading = false
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.formloading = false
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                }
            })
        },
        // 日期改变
        datechg(e){
                if(this.addform.endDate != null && this.addform.startDate != null){
                    let days = this.autoCountDay(this.addform.startDate,this.addform.endDate)
                    if(days > 0){
                        this.addform.dayCount = days
                    }else{
                        this.addform.dayCount = 1
                        if(e){
                            this.addform.endDate = this.addform.startDate
                        }else{
                            this.addform.startDate = this.addform.endDate
                        }
                    }
                }else{
                    this.addform.dayCount = null
                }
        },
        datechg2(e){
            // console.log(this.editItemForm.startDate,this.editItemForm.endDate);
                if(this.editItemForm.endDate != null && this.editItemForm.startDate != null){
                    let days = this.autoCountDay(this.editItemForm.startDate,this.editItemForm.endDate)
                    if(days > 0){
                        this.editItemForm.dayCount = days
                    }else{
                        this.editItemForm.dayCount = 1
                        if(e){
                            this.editItemForm.endDate = this.editItemForm.startDate
                        }else{
                            this.editItemForm.startDate = this.editItemForm.endDate
                        }
                    }
                }else{
                    this.editItemForm.dayCount = null
                }
        },
        // 自动计算天数
        autoCountDay(st,ed){
            let differDay = new Date(ed).getTime() - new Date(st).getTime()
            let differDay2 = differDay/(24*3600*1000) + 1
            return differDay2
        },

        // 获取出差列表
        getTableList(){
            this.billss()
            // this.http.post('/business-trip/list', {
            //     pageIndex: 1,
            //     pageSize: 20,
            //     status: '',  // 全部/已审核
            //     startDate: '',  // start  end
            //     endDate: '',
            //     ownerId: '',
            //     leaveType: '', // way
            // },
            // res => {
            //     if (res.code == "ok") {
            //         this.tableList = res.data.records
            //         // console.log("getlist",res.data);
            //     } else {
            //         this.$message({
            //             message: res.msg,
            //             type: "error"
            //         });
            //     }
            // },
            // error => {
            //     this.$message({
            //         message: error,
            //         type: "error"
            //     });
            // });
        },
        // 筛选刷新
        billss() {
            var param = {
                pageIndex: this.page,
                pageSize: this.size,
                status: this.code,
                startDate: this.createDate == null ? '' : this.createDate[0],
                endDate: this.createDate == null ? '' : this.createDate[1],
                ownerId: this.ownerIds,
                way: this.type,
            };
            this.http.post('/business-trip/list', param,
            res => {
                if (res.code == "ok") {
                    this.tableList = res.data.records
                    this.total = res.data.total
                    this.loading = false
                    console.log('tablelist',this.tableList);
                    this.$forceUpdate()
                } else {
                    this.loading = false
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.loading = false
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },

        // 操作 - 删除
        deletes(e) {
            this.$confirm("确认要删除吗?", "提示", {}).then(() => {
                this.http.post('/business-trip/delete', {id:e.id},
                res => {
                    if (res.code == "ok") {
                        this.getTableList();
                        this.$message({
                            message: '删除成功',
                            type: "success"
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            });
        },
        // 操作 - 编辑
        editor(e) {
            // console.log("编辑",e);
            this.editDialog = true
            if(e.degreeId != null){
                e.degreeId = e.degreeId + ''
                // console.log("e.degreeId",e.degreeId);
            }
            this.editItemForm = e
            this.getwuduList(0)
        },
        // 编辑框确定
        determine(){
            let edddd = {
                id: this.editItemForm.id,
                reason: this.editItemForm.reason, //出差事由
                startDate: this.editItemForm.startDate,  //开始时间
                endDate: this.editItemForm.endDate,    //结束时间
                way: this.editItemForm.way,    //交通工具
                cityFrom: this.editItemForm.cityFrom,   //出发城市
                cityTo: this.editItemForm.cityTo, //目的城市
                goBack: this.editItemForm.goBack, //单程往返
                dayCount: this.editItemForm.dayCount,   //出差天数
                remark: this.editItemForm.remark,  //备注
                projectId: this.editItemForm.projectId,  //项目id
                degreeId:this.editItemForm.degreeId,      //维度id
                degreeName: null
            }
            for(let i=0; i<this.wuduList.length; i++){
                if(this.wuduList[i].id == edddd.degreeId){
                    edddd.degreeName = this.wuduList[i].name
                }
            }
            this.http.post( '/business-trip/add', edddd,
                    res => {
                        if (res.code == "ok") {
                            this.editItemForm = null
                            this.editDialog = false
                            this.billss()
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
        },

    // 出差统计
        statistical() {
            // console.log("date",this.searchDates);
            this.loading = true
            this.http.post('/business-trip/summaryData', {
                keyword: this.searchWord,
                startDate: this.searchDates[0],
                endDate: this.searchDates[1]
            },
            res => {
                if (res.code == "ok") {
                    // console.log("出差统计",res.data);
                    this.statisticalList = res.data
                    this.loading = false
                } else {
                    this.loading = false
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },
        // 获取本月一号至今
        getautoDate() {
            let newdate = new Date()
            let newyear = newdate.getFullYear()
            let newmonth = newdate.getMonth() + 1
            let newday = newdate.getDate()
            let firstdate = newyear + '-' + (newmonth < 10 ? '0' + newmonth : newmonth) + '-01'
            let seconddate = newyear + '-' + (newmonth < 10 ? '0' + newmonth : newmonth) + '-' + (newday < 10 ? '0' + newday : newday)
            return [firstdate,seconddate]
        },
        // 出差统计列表查看详情
        viewDetails(s,e){
            // console.log("e",e);
            if(s){
                this.detailsuserid = e.ownerId
            }
            var param = {
                pageIndex: this.detailspage,
                pageSize: this.detailssize,
                status: 0,
                startDate: '',
                endDate: '',
                ownerId: this.detailsuserid,
                way: '',
            };
            this.detailsloading = true
            this.http.post('/business-trip/list', param,
            res => {
                if (res.code == "ok") {
                    // this.tableList = res.data.records
                    this.detailstotal = res.data.total
                    // this.loading = false
                    // this.$forceUpdate()
                    this.detailsData = res.data.records
                    this.seeDialog = true
                    // console.log('see',res.data);
                    this.$forceUpdate()
                    this.detailsloading = false
                } else {
                    this.detailsloading = false
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.detailsloading = false
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },
        detailsSizeChange(val){
            this.detailssize = val;
            this.viewDetails(0)
        },
        detailsCurrentChange(val) {
            // console.log(val, 1, '1')
            this.detailspage =  val;
            this.viewDetails(0)
        },


    // 出差审批流
        // 获取部门列表
        getDepartment() {
            this.http.post( this.port.manage.depList, {},
            res => {
                if (res.code == "ok") {
                    var list = res.data , list1 = JSON.parse(JSON.stringify(res.data));
                    this.sdata = list;
                    this.soption = [
                        {value: 1 , label : "部门" , children : this.changeArr(list1)},
                        {value: 2 , label : "指定人员",children : this.susers}
                    ]
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },
        changeArr(arr) {
            for (var i = 0; i < arr.length; i++) {
                if(arr[i].id != -1 && arr[i].id != 0) {
                    if (arr[i].children != null && arr[i].children.length>0) {
                        arr[i].children = this.changeArr(arr[i].children);
                    }
                    arr[i].id && (arr[i].value = arr[i].id);
                    delete arr[i].id;
                }
            }
            for(var i in arr) {
                if(arr[i].id == -1 || arr[i].id == 0) {
                    arr.splice(i,1)
                }    
            }
            return arr;
        },
        handleNodeClick(data) {
            if(this.depData == null || data.id != this.depData.id) {
                this.depData = data;
                // console.log("depdata",this.depData);
                this.getSettings();
            }
        },
        getSettings() {
            this.http.post('/audit-workflow-setting/get',{deptId: this.depData.id,type: 2},
            res => {
                this.listLoading = false;
                if (res.code == "ok") {
                    this.dataArray = res.data;
                    // console.log("请求1",res.data);
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.listLoading = false;
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },
        editNodeDialog(index, item) {
            //检查是否可编辑
            this.http.post('/audit-workflow-setting/checkNodeInUse',{auditDeptId: item.auditDeptId, deptId: this.depData.id,type: 2},
            res => {
                this.listLoading = false;
                if (res.code == "ok") {
                    this.isAdd = false;
                    this.sindex = index;
                    this.curUserId = item.userId;
                    this.dialogVisible = true;
                    this.curDeptId = item.auditDeptId;
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.listLoading = false;
                this.$message({
                    message: error,
                    type: "error"
                });
            });   
        },
        showNodeDialog(index) {
            this.isAdd = true;
            this.sindex = index;
            this.curDeptId = null;
            this.curUserId = null;
            this.dialogVisible = true;
        },
        submitInsert() {
            this.http.post('/audit-workflow-setting/add',{json:JSON.stringify(this.dataArray), deptId: this.depData.id,type: 2},
            res => {
                this.listLoading = false;
                if (res.code == "ok") {
                    this.$message({
                        message: '保存成功',
                        type: "success"
                    });
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.listLoading = false;
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },
        deleteNode() {
            this.dialogVisible = false;
            this.dataArray.splice(this.sindex, 1);
        },
        addNode() {
            this.dialogVisible = false;
            if (this.curDeptId == null) return;
            var node = this.$refs.deptCascader.getCheckedNodes()[0];
            if (this.isAdd) {
                if(node.path[0] == 1){
                    var node = {auditDeptId: node.value, auditDeptName: node.label, auditorType: 1};
                }else if(node.path[0] == 2){
                    var node = {userId: node.value, userName: node.label, auditorType: 2};
                }
                this.dataArray.splice(this.sindex, 0, node);
            } else {
            //编辑
                this.dataArray[this.sindex].auditDeptId = node.value;
                this.dataArray[this.sindex].auditDeptName = node.label;
            }
        },


        getUsers() {
            this.http.post(this.port.manage.list, {
                departmentId: -1,
                pageIndex: 1,
                pageSize: 99999
            },
            res => {
                if (res.code == "ok") {
                    // console.log("users",res.data);
                    this.users = res.data.records;
                    for (let i = 0; i < this.users.length; i++) {
                        this.susers.push({value:this.users[i].id,label:this.users[i].name})
                    }
                    // if (this.user.role == 0) {
                    //     this.editItemForm.ownerId = this.user.id;
                    //     this.ownerIds = this.user.id
                    //     this.editItemForm.status = 1;
                    //     this.editItemForm.tel = this.user.phone
                    // }
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },
        // 维度选择添加
        getProjectList() {
                this.http.post( this.port.project.list, {},
                res => {
                    if (res.code == "ok") {
                        this.projectList = res.data;
                        // console.log("项目列表",this.projectList);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

        // 获取维度数据
            getwuduList(e,i) {
                
                if(e == 1){
                    this.addform.wuduId = null
                    if(this.addform.projectId == '' || this.addform.projectId == null) {
                        return
                    }
                    var pId = this.addform.projectId
                }else if(e == 0){
                    this.editItemForm.wuduId = null
                    if(this.editItemForm.projectId == '' || this.editItemForm.projectId == null) {
                        return
                    }
                    var pId = this.editItemForm.projectId
                }else{
                    // if(i == 1){
                    //     this.DingdingForm.degreeId = null
                    // }
                    if(this.DingdingForm.projectId == '' || this.DingdingForm.projectId == null){
                        return
                    }
                    var pId = this.DingdingForm.projectId
                }
                
                this.http.post('/project/getDegreeList',{ 
                    projectId: pId,
                },
                res => {
                    if (res.code == "ok") {
                        // console.log("维度数据",res.data);
                        this.wuduList = res.data
                        this.$forceUpdate()
                    } 
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                    }
                );
            },
        //获取项目列表
            // getProjectList() {
            //     this.listLoading = true;
            //     this.http.post( this.port.project.list, {},
            //     res => {
            //         this.listLoading = false;
            //         if (res.code == "ok") {
            //             this.projectList = res.data;
            //             console.log("项目列表",this.projectList);
            //         } else {
            //             this.$message({
            //                 message: res.msg,
            //                 type: "error"
            //             });
            //         }
            //     },
            //     error => {
            //         this.listLoading = false;
            //         this.$message({
            //             message: error,
            //             type: "error"
            //         });
            //     });
            // },
    }
}
</script>

<style lang="scss" scoped>
.sidebars {
    height: 100%;
    position: absolute;
    border-right: 1px solid #E6E6E6;
    z-index: 2;
    top: 0;
    h3 {
        margin: 0;
        line-height: 45px;
        background: #ffffff;
        font-weight: normal;
        color: #666;
        padding-left: 20px;
    }
    .el-col-12 {
        width: 100%
    }
}
.contents {
    height: 100%;
    background: #F7F7F7;
    .tops {
        width: 100%;
        height:100%;
        position: absolute;
        background: #f7f7f7;
        box-sizing: border-box;
        padding: 20px 0 0 220px;
    }
    .ctons {
        width: 86%;
        height: 92%;
        overflow: hidden;
        background: #fff;
        padding: 30px 40px;
        box-sizing: border-box;
        .el-form-item {
            display: inline-block;
        }
        .flex {
            display: flex;
            padding: 0 0 20px 0;
            border-bottom: 1px solid #f2f2f2;
            span {
                display: inline-block;
                margin: 0 10px 0 20px;
            }
        }
        .poss {
            position: fixed;
            bottom: 20px;
            right: 1%;
            box-sizing: border-box;
        }
    }
    .headine {
        width: 100%;
        height: 46.4px;
        line-height: 46.4px;
        background: #fff;
        box-sizing: border-box;
        h3 {
            margin: 0;
            display: inline-block;
            box-sizing: border-box;
            color: #999;
        }
        p {
            display: inline-block;
            margin: 0;
        }
    }
}
.addNode {
  cursor:pointer;
}
.addNode:hover {
  color:#20a0ff;
}
</style>