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>{{ $t('navigation.evectionManagement') }}</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">{{ $t('businesstriisallowed') }}</span>
                </el-menu-item>
                <el-submenu index="2" v-if="permissions.awayOfficeAll">
                    <template slot="title">
                        <i class="iconfont firerock-iconbaoxiaodan"></i>
                        <span>{{ $t('businesstriplist') }}</span>
                    </template>
                    <!-- 导航切换 -->
                    <el-menu-item index="2-1" v-if="permissions.awayOfficeAll"><p @click="bills(false, 2)">{{ $t('all') }}</p></el-menu-item>
                    <el-menu-item index="2-2" v-if="permissions.awayOfficeAudit && !isDingding"><p @click="bills(true, 1)">{{ $t('state.WaitingAudit') }}</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">{{ $t('mbusinesstrip') }}</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">{{ $t('businessstatistics') }}</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">{{ $t('businesstriApprovalProcess') }}</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">{{ $t('businesstriisallowed') }}</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="$t('travelreason')" 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="$t('screening.inputProject')" style="width:300px;margin-right:30px" prop="projectId">
                            <el-select style="width:100%" @change="getwuduList(1)" v-model="addform.projectId" filterable clearable :placeholder="$t('defaultText.pleaseChoose')" >
                                <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="$t('defaultText.pleaseChoose')" >
                                <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="$t('traffictools')" style="width:100%">
                            <el-radio-group v-model="addform.way">
                                <el-radio :label="0">{{ $t('plane') }}</el-radio>
                                <el-radio :label="1">{{ $t('train') }}</el-radio>
                                <el-radio :label="2">{{ $t('car') }}</el-radio>
                                <el-radio :label="3">{{ $t('ship') }}</el-radio>
                                <el-radio :label="4">{{ $t('leave.other') }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 出发城市 -->
                        <el-form-item :label="$t('departurecity')" style="width:300px;margin-right:30px" prop="cityFrom">
                            <el-select style="width:100%" v-model="addform.cityFrom" filterable clearable :placeholder="$t('defaultText.pleaseChoose')" >
                                <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="$t('destinationcity')" style="width:300px" prop="cityTo">
                            <el-select style="width:100%" v-model="addform.cityTo" filterable clearable :placeholder="$t('defaultText.pleaseChoose')">
                                <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="$t('starttimes')" style="width:300px;margin-right:30px" prop="startDate">
                            <el-date-picker
                            type="date"
                            :placeholder="$t('time.startDate')"
                            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="$t('time.endTime')" style="width:300px" prop="endDate">
                            <el-date-picker
                            type="date"
                            :placeholder="$t('time.endDate')"
                            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="$t('roundtrip')" style="width:300px;margin-right:30px">
                            <el-radio-group v-model="addform.goBack">
                                <el-radio :label="0">{{ $t('oneway') }}</el-radio>
                                <el-radio :label="1">{{ $t('backandforth') }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <!-- 出差天数 -->
                        <el-form-item :label="$t('traveldays')" style="width:300px">
                            <el-input type="number" :placeholder="$t('automaticcalculation')" v-model="addform.dayCount" min="0" style="width:100%"></el-input>
                        </el-form-item>
                        <!-- 出差备注 -->
                        <el-form-item :label="$t('travelnote')" 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">{{ $t('btn.submit') }}</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="$t('pleaseselectbusinesstraveler')" clearable @change="billss(1)" 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">{{ $t('traffictools') }}</span>
                        <el-select v-model="type" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="billss(1)" style="width: 140px;" size="small" filterable="true">
                            <el-option :label="$t('plane')" :value="0"></el-option>
                            <el-option :label="$t('train')" :value="1"></el-option>
                            <el-option :label="$t('car')" :value="2"></el-option>
                            <el-option :label="$t('ship')" :value="3"></el-option>
                            <el-option :label="$t('leave.other')" :value="4"></el-option>
                        </el-select>
                    </div>
                    <div><span style="color: #606266">{{ $t('businessstate') }}</span>
                        <el-select :disabled="falg" v-model="code" :placeholder="$t('defaultText.pleaseChoose')" clearable @change="billss(1)" size="small" style="width: 140px" filterable="true">
                            <el-option :label="$t('state.approved')" :value="0"></el-option>
                            <el-option :label="$t('state.WaitingAudit')" :value="1"></el-option>
                            <el-option :label="$t('btn.rejected')" :value="2"></el-option>
                            <el-option :label="$t('state.undone')" :value="3"></el-option>
                        </el-select>
                        
                    </div>
                    <div><span style="color: #606266">{{ $t('message.period') }}</span>
                        <el-date-picker v-model="createDate" type="daterange" :range-separator="$t('other.to')" :start-placeholder="$t('time.startDate')" :end-placeholder="$t('time.endDate')" @change="billss(1)" value-format="yyyy-MM-dd" :placeholder="$t('optiondate')" size="small" clearable style="width:280px"></el-date-picker>
                    </div>
                    <div style="line-height: 32px;margin: 0 20px;">
                        <el-checkbox v-model="isOverTendays" @change="checkboxChange">{{ $t('morethantendays') }}</el-checkbox>
                    </div>
                    <!-- 从钉钉同步按钮,只有钉钉的用户并且有查看全部权限的管理员才有同步按钮 -->
                    <div style="margin: 0 0 0 20px" v-if="userComLis.dingdingUserid != null && permissions.awayOfficeAll">
                        <el-button size="small" type="primary" @click="dingdingClick()" >{{ $t('synchronizefromStaple') }}</el-button>
                    </div>
                    <div style="margin: 0 0 0 20px" v-if="userComLis.dingdingUserid != null">
                        <el-button size="small" type="primary" @click="dingdingListExport()" >{{ $t('export.export') }}</el-button>
                    </div>
                </div>
        <!-- 出差列表 -->
                <el-table :data="tableList" style="width: 100%" height="90%" :loading="tableListLoading">
                    <el-table-column prop="ownerName" :label="$t('businesspersonnel')" width="100" fixed="left" align="center">
                        <template slot-scope="scope">
                            <span :style="scope.row.dayCount >= 10 ? 'color:#e62412' : ''">{{scope.row.ownerName}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="reason" label="出差事由" width="150" header-align="center"></el-table-column> -->
                    <el-table-column :label="$t('traveldays')" width="120" align="center">
                        <template slot-scope="scope">
                            <div><span :style="scope.row.dayCount >= 10 ? 'color:#e62412' : ''">{{scope.row.dayCount}}{{ $t('time.day') }}</span></div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('detailsbusinessrip')" width="600" align="center">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.projectList" :key="item.projectId" class="detailsScope">
                                <span>{{item.startDate + $t('other.to') + item.endDate}}</span><span>{{item.projectName}}</span><span>{{item.degreeName}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="degreeName" :label="wuduData.customDegreeName" width="150" align="center">
                        <template slot-scope="scope">
                            <span v-for="item in scope.row.projectList" :key="item.projectId">{{item.degreeName == null ? '' : item.degreeName + '\u3000'}}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column :label="$t('traffictools')" width="120" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.way == 0">{{ $t('plane') }}</span>
                            <span v-if="scope.row.way == 1">{{ $t('train') }}</span>
                            <span v-if="scope.row.way == 2">{{ $t('car') }}</span>
                            <span v-if="scope.row.way == 3">{{ $t('ship') }}</span>
                            <span v-if="scope.row.way == 4">{{ $t('leave.other') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('trip')" 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="$t('applytime')" width="150" align="center" v-if="!isDingding"></el-table-column>
                    
                    <el-table-column prop="startDate" :label="$t('starttimeofbusinessrip')" width="150"></el-table-column>
                    <el-table-column prop="endDate" :label="$t('endtimeofbusinesstrip')" width="150"></el-table-column>
                    <el-table-column prop="status" :label="$t('state.states')" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0">{{ $t('state.approved') }}</span>
                            <span v-if="scope.row.status == 1" style="color: orange">{{ $t('state.WaitingAudit') }}</span>
                            <span v-if="scope.row.status == 2" style="color: red">{{ $t('btn.rejected') }}</span>
                            <span v-if="scope.row.status == 3" style="color: #666666">{{ $t('btn.undo') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" :label="$t('bei-zhu')" width="200">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" :title="$t('biao-ti')" 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 ? $t('other.audit') : $t('operation')" 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="permissions.awayOfficeDelete && ((scope.row.status != 0 && scope.row.ownerId == user.id) || permissions.awayOfficeAll)" 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.awayOfficeAll) || 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="$t('operation')" width="150" fixed="right">
                        <template slot-scope="scope">
                            <el-button icon="iconfont firerock-iconguanlian" circle size="mini" @click="DingdingEditor(scope.row)"></el-button>
                            <el-button v-if="permissions.awayOfficeDelete" icon="el-icon-delete" circle size="mini" @click="deleteOfDingding(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="$t('pleaseenterstaffsearch')" 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);">{{ $t('message.period') }}</span>
                    <el-date-picker
                        size="small"
                        v-model="searchDates"
                        type="daterange"
                        :range-separator="$t('other.to')"
                        :start-placeholder="$t('time.startDate')"
                        :end-placeholder="$t('time.endDate')"
                        @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="$t('lable.name')" width="300">
                        <template slot-scope="scope">
                            <div v-if="scope.row.ownerName">
                            {{scope.row.ownerName}}
                            </div>
                            <div v-else>
                            <span>{{ $t('nostatisticsonbusinesstripsatpresent') }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="departmentName" :label="$t('lable.department')" width="300">
                        <!-- <template slot-scope="scope">
                            {{scope.row.departmentName}}/天
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="dayCount" :label="$t('cumulativebusinesstripdays')" width="300">
                        <template slot-scope="scope">
                            {{scope.row.dayCount}}{{ $t('time.day') }}
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('details')" width="300">
                        <template slot-scope="scope">
                            <!-- {{scope.row.timeDays}} -->
                            <el-button size="mini" @click="viewDetails(1,scope.row)">{{ $t('Checkthedetails') }}</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">{{ $t('setup') }} &lt;<span style="color:#20a0ff;">{{depData.label}}&gt;</span> {{ $t('approvalprocessforbusiness') }}
                                <el-tooltip effect="dark" v-if="depData != null && depData.children!=null" :content="$t('onlyapplicabletotheimmediatestaffofthecurrentdepartment')" placement="top-start">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </div>
                            <div style="padding:5px;" v-if="depData == null">{{ $t('qing-xuan-ze-bu-men') }}</div>
                            <div style="width:100%;margin:0 auto;text-align: center; margin-top:50px;" v-if="depData != null">
                                <span>{{ $t('employeeisallowed') }}</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" >{{ $t('projectLeader') }}</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>
                                {{ $t('approvaltocomplete') }} 
                            </div>
                            <div style="width:100%;margin:0 auto;margin-bottom:30px;position: absolute;bottom: 0px;text-align: center; ">
                                <el-button type="primary" @click="submitInsert">{{ $t('save') }}</el-button>
                            </div>
                        </div>
                    </el-scrollbar>
                </el-col>
            </div>
            <el-dialog  :title="$t('pleaseselectapprover')" v-if="dialogVisible" :visible.sync="dialogVisible"  width="460px">
                <el-form label-width="140px">
                    <el-form-item :label="$t('selectdepartmentsdesignatepersonnel')" >
                        <el-cascader filterable ref="deptCascader" v-model="curDeptId" :placeholder="$t('defaultText.pleaseChoose')" 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;">{{ $t('btn.delete') }}</el-button>
                    <el-button type="primary" @click="addNode" >{{ $t('btn.determine') }}</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    <!-- 编辑框 -->
    <el-dialog :title="$t('detailsbusinessrip')" 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="$t('businesspersonnel')" prop="ownerName"  style="width: 300px;display: inline-block;">
                <span>{{editItemForm.ownerName}}</span>
            </el-form-item>
            <el-form-item :label="$t('onewayroundtrip')" prop="goBack" style="width: 300px;display: inline-block;">
                <el-radio-group v-model="editItemForm.goBack">
                    <el-radio :label="0">{{ $t('oneway') }}</el-radio>
                    <el-radio :label="1">{{ $t('backandforth') }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 交通工具 -->
            <el-form-item :label="$t('traffictools')" style="width:100%">
                <el-radio-group v-model="editItemForm.way">
                    <el-radio :label="0">{{ $t('plane') }}</el-radio>
                    <el-radio :label="1">{{ $t('train') }}</el-radio>
                    <el-radio :label="2">{{ $t('car') }}</el-radio>
                    <el-radio :label="3">{{ $t('ship') }}</el-radio>
                    <el-radio :label="4">{{ $t('leave.other') }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('screening.inputProject')" 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="$t('defaultText.pleaseChoose')" >
                    <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="$t('defaultText.pleaseChoose')" >
                    <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="$t('departurecity')" style="width:300px;margin-right:30px;display: inline-block;" prop="cityFrom">
                <el-select style="width:100%" v-model="editItemForm.cityFrom" filterable clearable :placeholder="$t('defaultText.pleaseChoose')" >
                    <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="$t('destinationcity')" style="width:300px;display: inline-block;" prop="cityTo">
                <el-select style="width:100%" v-model="editItemForm.cityTo" filterable clearable :placeholder="$t('defaultText.pleaseChoose')">
                    <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="$t('starttimes')" style="width:300px;margin-right:30px;display:inline-block;" prop="startDate">
                <el-date-picker
                type="date"
                :placeholder="$t('time.startDate')"
                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="$t('time.endTime')" style="width:300px;display:inline-block;" prop="endDate">
                <el-date-picker
                type="date"
                :placeholder="$t('time.endDate')"
                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="$t('traveldays')" style="width:300px">
                <el-input type="number" :placeholder="$t('automaticcalculation')" v-model="editItemForm.dayCount" min="0" style="width:100%"></el-input>
            </el-form-item>
            <el-form-item :label="$t('bei-zhu')" 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">{{ $t('btn.cancel') }}</el-button>
            <el-button type="primary" @click="determine()">{{ $t('btn.determine') }}</el-button>
        </span>
    </el-dialog>

    <!-- 出差统计查看详情 -->
    <el-dialog :title="$t('detailsbusinessrip')" :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="$t('businesspersonnel')" width="100" fixed="left"></el-table-column>
            <el-table-column prop="reason" :label="$t('travelreason')" width="150" header-align="center"></el-table-column>
            <el-table-column prop="projectName" :label="$t('screening.inputProject')" width="150" align="center"></el-table-column>
            <el-table-column :label="$t('traffictools')" width="120" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.way == 0">{{ $t('plane') }}</span>
                    <span v-if="scope.row.way == 1">{{ $t('train') }}</span>
                    <span v-if="scope.row.way == 2">{{ $t('car') }}</span>
                    <span v-if="scope.row.way == 3">{{ $t('ship') }}</span>
                    <span v-if="scope.row.way == 4">{{ $t('leave.other') }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('trip')" width="120" align="center">
                <template slot-scope="scope">{{scope.row.cityFrom + '-' + scope.row.cityTo}}</template>
            </el-table-column>
            <el-table-column prop="indate" :label="$t('applytime')" width="150" align="center"></el-table-column>
            <el-table-column :label="$t('traveldays')" width="80" align="center">
                <template slot-scope="scope"><div>{{scope.row.dayCount}}{{ $t('time.day') }}</div></template>
            </el-table-column>
            <el-table-column prop="startDate" :label="$t('starttimeofbusinessrip')" width="150" align="center"></el-table-column>
            <el-table-column prop="endDate" :label="$t('endtimeofbusinesstrip')" width="150" align="center"></el-table-column>
            <el-table-column prop="remark" :label="$t('bei-zhu')" width="200">
                <template slot-scope="scope">
                    <el-popover placement="top-start" title="$t('biao-ti')" 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="$t('projectAssociationInformation')" v-if="DingdingEditDialog" :close-on-click-modal="false" :visible.sync="DingdingEditDialog" width="800px" customClass="customWidth">
        
        <el-table :data="relationList" :loading="DingdingTableLoading">
            <el-table-column :label="$t('message.period')">
                <template slot-scope="scope">
                    <span>{{scope.row.startDate + $t('other.to') + scope.row.endDate}}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('rselatedprojects')" prop="projectName" show-overflow-tooltip></el-table-column>
            <el-table-column :label="wuduData.customDegreeName" prop="degreeName" show-overflow-tooltip></el-table-column>
            <el-table-column :label="$t('operation')" width="150">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="DingdingAddorMod(scope.row)">{{ $t('bian-ji') }}</el-button>
                    <el-button size="small" type="danger" @click="DingdingDelete(scope.row)">{{ $t('btn.delete') }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="DingdingEditDialog = false">{{ $t('Shutdown') }}</el-button>
            <el-button type="primary" @click="DingdingAddorMod()">{{ $t('addinganAssociatedItem') }}</el-button>
        </div>

        <el-dialog append-to-body :title="$t('addedormodifiedassociateditems')" v-if="appendAddorModDialog" :visible.sync="appendAddorModDialog" width="700px" customClass="customWidth">
            <el-form label-width="100" :inline="true" style="margin-top:20px" :model="relationItem" :rules="relationItemRules" ref="relationItemForm">
                <el-form-item :label="$t('time.startDate')" prop="startDate">
                    <el-date-picker
                    style="width:220px"
                    v-model="relationItem.startDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    @change="datechg3(1)"
                    :placeholder="$t('defaultText.pleaseChoose')"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('time.endDate')" prop="endDate" style="margin-left:35px">
                    <el-date-picker
                    style="width:220px"
                    v-model="relationItem.endDate"
                    value-format="yyyy-MM-dd"
                    type="date"
                    @change="datechg3(0)"
                    :placeholder="$t('defaultText.pleaseChoose')"></el-date-picker>
                </el-form-item><br>
                <el-form-item :label="$t('rselatedprojects')" prop="projectId">
                    <el-select v-model="relationItem.projectId" :placeholder="$t('defaultText.pleaseChoose')" @change="getwuduList(2)" style="width:220px" filterable >
                        <el-option
                        v-for="item in projectList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.projectName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="wuduData.customDegreeName" prop="degreeId" style="margin-left:44.5px">
                    <el-select v-model="relationItem.degreeId" :placeholder="$t('defaultText.pleaseChoose') + wuduData.customDegreeName" style="width:220px">
                        <el-option
                        v-for="item in wuduList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="appendAddorModDialog = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="appendAddorModSure('relationItemForm')">{{ $t('btn.submit') }}</el-button>
            </div>
        </el-dialog>
    </el-dialog>
    <!-- 点击钉钉同步弹窗 -->
    <el-dialog :title="$t('synchronizefromStaple')" :visible.sync="synchronizationDaying" width="480px" :before-close="handleClose">
        <div>
            <div class="dingdingtongbu">
                <span>{{ $t('screening.selectPeople') }}</span>
                <el-select v-model="ownerIdsId" :placeholder="$t('pleaseselectpersonnel')" style="width:280px" 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 class="dingdingtongbu" style="margin-top: 20px">
                <span>{{ $t('message.period') }}</span>
                <el-date-picker v-model="createDateList" type="daterange" :range-separator="$t('other.to')" :start-placeholder="$t('time.startDate')" :end-placeholder="$t('time.endDate')" value-format="yyyy-MM-dd" :placeholder="$t('optiondate')" size="small" clearable style="width:280px"></el-date-picker>
                <span style="width: 300px;color: #E6A23C;font-size: 10px;padding-left: 105px;margin-top: 10px"> <i class="el-icon-warning-outline"></i> {{ $t('synchronizationperiodfromstaplecannotexceedsevendays') }}</span>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="synchronizationDaying = false">{{ $t('btn.cancel') }}</el-button>
            <el-button type="primary" @click="listSynchronize()" :loading="synchronizeLoading">{{ $t('synchronous') }}</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,
            permissions: JSON.parse(sessionStorage.getItem("permissions")),
            userComLis: JSON.parse(sessionStorage.getItem("user")),
            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: this.$t('yourbusinesstrip'), trigger: "blur" }],
                cityFrom:[{ required: true, message: this.$t('selectyourdeparturecity'), trigger: "blur" }],
                cityTo:[{ required: true, message: this.$t('saelectdestinationcity'), trigger: "blur" }],
                startDate:[{ required: true, message: this.$t('selectastarttime'), trigger: "blur" }],
                endDate:[{ required: true, message: this.$t('selectanendtime'), trigger: "blur" }]
            },
            editItemRules:{
                cityFrom:[{ required: true, message: this.$t('selectyourdeparturecity'), trigger: "blur" }],
                cityTo:[{ required: true, message: this.$t('saelectdestinationcity'), trigger: "blur" }],
                startDate:[{ required: true, message: this.$t('selectastarttime'), trigger: "blur" }],
                endDate:[{ required: true, message: this.$t('selectanendtime'), 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,
            DingdingTableLoading: false,
            appendAddorModDialog: false,
            relationList: [],
            relationItem: {
                bustripId: null, //出差记录id
                startDate: null,
                endDate: null,
                projectId: null,
                degreeId: null
            },
            relationItemRules: {
                startDate:[{required: true,message: this.$t('selectastartdate'),trigger: 'change'}],
                endDate:[{required: true,message: this.$t('selectaenddate'),trigger: 'change'}],
                projectId:[{required: true,message: this.$t('projectassociate'),trigger: 'change'}],
            },
            relationItemTemporaryDate: {},
            synchronizeLoading: false,
            synchronizationDaying:false,
            createDateList: [],
            ownerIdsId: '',

            isOverTendays: false,
            tableListLoading: false,

        }
    },
    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: {
        dingdingListExport(){
            let parameter = {
                keyword: ''
            }
            if(this.createDate.length != 0){
                parameter.startDate = this.createDate[0]
                parameter.endDate = this.createDate[1]
            }
            this.http.post("/business-trip/exportData",parameter,
            res => {
                if(res.code == 'ok'){
                    var filePath = res.data;
                    const a = document.createElement('a'); // 创建a标签
                    a.setAttribute('download', this.$t('tripStatistics')+'.xls');// download属性
                    a.setAttribute('href', filePath);// href链接
                    a.click(); //自执行点击事件
                    a.remove();
                }else{
                    this.$message({
                    message: res.msg,
                    type: "error"
                    });
                }
            },error => {
                this.$message({
                    message: error,
                    type: "error"
                });
            })
        },



        checkboxChange(){
            this.billss(1)
        },
        deleteOfDingding(e) {
            this.$confirm(this.$t('deleteit'), this.$t('other.prompts'), {}).then(() => {
                this.http.post('/business-trip/delete', {id:e.id},
                res => {
                    if (res.code == "ok") {
                        this.billss();
                        this.$message({
                            message: this.$t('message.successfullyDeleted'),
                            type: "success"
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            });
        },


        dingdingClick() {
            this.synchronizationDaying = true
            this.ownerIdsId = this.users[0].id
            let startDates = this.dayjs().add('-7','day').format("YYYY-MM-DD")
            let endDates = this.dayjs().format("YYYY-MM-DD")
            let arr = []
            arr.push(startDates)
            arr.push(endDates)
            this.createDateList = arr
        },
        // 判断日期
        determineDate(startDate, endDate) {
            let startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
            let endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
            let dates = Math.abs((startTime - endTime)) / (1000 * 60 * 60 * 24);
            let flg = dates > 7 ? false : true
            return flg ;
        },
        // 从钉钉同步假期剩余表
        listSynchronize(){
            // 判断日期
            let flgs = this.determineDate(this.createDateList[0], this.createDateList[1])
            if(flgs) {
                this.synchronizeLoading = true
                let transmissionObj = {}
                transmissionObj.userId = this.ownerIdsId
                transmissionObj.companyId = this.userComLis.companyId
                if(this.createDateList != 'null' && this.createDateList != null) {
                    if(this.createDateList.length > 0) {
                        transmissionObj.startDate = this.createDateList[0]
                        transmissionObj.endDate = this.createDateList[1]
                    } else {
                        transmissionObj.startDate = this.dayjs().add('-7','day').format("YYYY-MM-DD")
                        transmissionObj.endDate = this.dayjs().format("YYYY-MM-DD")
                    }
                    
                } else {
                    transmissionObj.startDate = ''
                    transmissionObj.endDate = ''
                }
                this.http.post('/dingding/syncUserWorkData',transmissionObj,
                res => {
                    if(res.code == 'ok'){
                        this.synchronizeLoading = false
                        this.synchronizationDaying = false
                        this.$message({
                            message: this.$t('synchronoussuccess'),
                            type: 'success'
                        })
                        // this.ownerIdsId = ''
                        // this.createDateList = []
                        this.getTableList()
                    }else {
                        this.synchronizeLoading = false
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },err => {
                    this.synchronizeLoading = false
                    this.$message({
                        message: err,
                        type: 'error'
                    })
                })
            } else {
                this.$message({
                    message: this.$t('cannotbesynchronized'),
                    type: 'warning'
                });
            }
        },
        // 钉钉环境交互
        DingdingEditor(e){
            console.log(e);
            this.DingdingEditDialog = true
            this.relationItem.bustripId = e.id
            this.relationItemTemporaryDate = {
                startDate: e.startDate,
                endDate: e.endDate
            }
            this.getRelationList()
        },
        getRelationList(){
            this.DingdingTableLoading = true
            this.http.post('/bustrip-project/list',{
                bustripId: this.relationItem.bustripId
            },res => {
                if(res.code == 'ok'){
                    this.DingdingTableLoading = false
                    console.log('getlist',res.data);
                    this.relationList = res.data
                }else {
                    this.DingdingTableLoading = false
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                }
            },err => {
                this.DingdingTableLoading = false
                this.$message({
                    message: err,
                    type: 'error'
                })
            })
        },
        DingdingAddorMod(row){
            this.appendAddorModDialog = true
            if(row){
                this.relationItem.id = row.id
                this.relationItem.projectId = row.projectId
                this.getwuduList(2,1)
                this.relationItem.startDate = row.startDate
                this.relationItem.endDate = row.endDate
                this.relationItem.degreeId = row.degreeId == null ? row.degreeId : row.degreeId.toString()
                // console.log('degreeId',this.relationItem.degreeId);
            }else {
                this.relationItem.startDate = this.relationItemTemporaryDate.startDate
                this.relationItem.endDate = this.relationItemTemporaryDate.endDate
                this.relationItem.projectId = null
                this.relationItem.degreeId = null
                delete this.relationItem.id
            }
        },
        appendAddorModSure(formname){
            this.$refs[formname].validate((valid)=>{
                if(valid){
                    this.http.post('/bustrip-project/addOrMod',this.relationItem,
                        res => {
                            if(res.code == 'ok'){
                                this.appendAddorModDialog = false
                                this.getRelationList()
                                this.getTableList()
                            }else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                        },err => {
                            this.$message({
                                message: err,
                                type: 'error'
                            })
                        })
                }else {
                    return false
                }
            })
            
        },
        DingdingDelete(row){
            console.log('row',this.relationItem);
            this.$confirm(this.$t('doyouwanttodeleteit'),this.$t('other.prompts'),{
                confirmButtonText: this.$t('btn.determine'),
                cancelButtonText: this.$t('btn.cancel'),
                type: 'warning'
            }).then(()=>{
                this.http.post('/bustrip-project/delete',{
                    id:row.id
                },res => {
                    if(res.code == 'ok'){
                        // this.$message({
                        //     message: '删除成功',
                        //     type: 'success'
                        // })
                        this.getRelationList()
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },err => {
                    this.$message({
                        message: err,
                        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.page = 1
            if(this.isDingding){
                this.billss()
            }else{
                this.bills()
            }
            
        },
        handleCurrentChange(val) {
            // console.log(val, 1, '1')
            this.page =  val;
            if(this.isDingding){
                this.billss()
            }else{
                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: this.$t('applicationissuccessful'),
                                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
                }
        },
        datechg3(e){
            if(this.relationItem.endDate != null && this.relationItem.startDate != null){
                    let days = this.autoCountDay(this.relationItem.startDate,this.relationItem.endDate)
                    if(days <= 0){
                        if(e){
                            this.relationItem.endDate = this.relationItem.startDate
                        }else{
                            this.relationItem.startDate = this.relationItem.endDate
                        }
                    }
                }
        },
        // 自动计算天数
        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(e) {
            if(e){
                this.page = 1
            }
            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,
            };
            if(this.isOverTendays){
                param.checkState = 1
            }
            this.tableListLoading = true
            this.http.post('/business-trip/list', param,
            res => {
                if (res.code == "ok") {
                    this.tableList = res.data.records
                    this.total = res.data.total
                    this.tableListLoading = false
                    console.log('tablelist',this.tableList);
                    this.$forceUpdate()
                } else {
                    this.tableListLoading = false
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.tableListLoading = false
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },

        // 操作 - 删除
        deletes(e) {
            this.$confirm(this.$t('deleteit'), this.$t('other.prompts'), {}).then(() => {
                this.http.post('/business-trip/delete', {id:e.id},
                res => {
                    if (res.code == "ok") {
                        this.getTableList();
                        this.$message({
                            message: this.$t('message.successfullyDeleted'),
                            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: this.$t('message.modifyTheSuccess'),
                                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 : this.$t('lable.department') , children : this.changeArr(list1)},
                        {value: 2 , label : this.$t('designatedpersonnel'),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: this.$t('savesuccess'),
                        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
            //     pageSize: -1
            // },
            this.http.post('/user/getSimpleActiveUserList', {},
            res => {
                if (res.code == "ok") {
                    // console.log("users",res.data);
                    // this.users = res.data.records;
                    this.users = res.data;
                    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.relationItem.degreeId = null}
                    
                    if(this.relationItem.projectId == '' || this.relationItem.projectId == null){
                        return
                    }
                    var pId = this.relationItem.projectId
                    // 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") {
                        this.wuduList = res.data
                    } 
                },
                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;
}
.detailsScope{
    font-size: 12px;
    padding: 3px 0;
    line-height: 15px;
}
.detailsScope span:nth-child(1){
    display: inline-block;
    width: 25%;
}
.detailsScope span:nth-child(2){
    display: inline-block;
    width: 40%;
    text-align: left;
}
.detailsScope span:nth-child(3){
    display: inline-block;
    width: 35%;
    text-align: left;
}
.dingdingtongbu span {
    display: inline-block;
    width: 80px;
    padding-left: 20px;
}
</style>