|
|
<template>
|
|
|
<div class="dataStatisticsContainer">
|
|
|
<!-- <div class="pb16 bb1 mb16 f20" style="color:#1890ff">团队数据</div> -->
|
|
|
<a-breadcrumb class="newBreadcrumb mt0 mb16">
|
|
|
<a-breadcrumb-item href>
|
|
|
<router-link :to="{name:'merchantBack'}">
|
|
|
<a-icon type="home" />
|
|
|
</router-link>
|
|
|
</a-breadcrumb-item>
|
|
|
<a-breadcrumb-item>团队数据</a-breadcrumb-item>
|
|
|
</a-breadcrumb>
|
|
|
<div class="bodyContainer contentbody">
|
|
|
<div class="leftContainer pb24">
|
|
|
<div class="searchbox pb12 ml12 mr12">
|
|
|
<div class="searchinput">
|
|
|
<a-input-search placeholder="搜索成员" v-model.trim="contentListSearchForm.keys" allowClear @search="onDataSearch" @keyup.enter="onDataSearch" @input="resetsearch">
|
|
|
<!-- <a-icon slot="prefix" type="search" class="cccc" />
|
|
|
<a-button slot="enterButton" class="cblue">搜索</a-button>-->
|
|
|
</a-input-search>
|
|
|
</div>
|
|
|
<!-- <i class="iconfont icon-fangda ml12 c6 curp" @click="[addGroupShow = true,isEdit = false]" style="line-height:32px"></i> -->
|
|
|
</div>
|
|
|
|
|
|
<a-radio-group v-model="menuType" class="pl12 pr12 tac" style="width:100%" :style="{ marginBottom: '8px' }">
|
|
|
<a-radio-button value="role" class="changeGroup" style="width:50%">个人排序</a-radio-button>
|
|
|
<a-radio-button value="group" class="changeGroup" style="width:50%">团队排序</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
<div v-if="menuType == 'role'">
|
|
|
<a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
|
|
|
<a-menu-item key="all" class="fsa showdot bb_after fw500" @click="selectGroup('all')">
|
|
|
全部成员
|
|
|
<span>{{totalDataList.length}}</span>
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
|
<!-- <div class="bb1 ml12 mr12 mt4 mb8" style="wdith:calc(100% - 24px)"></div> -->
|
|
|
<!-- <div class="f12 c9 ml24 mb8">默认角色（11人）</div> -->
|
|
|
<a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
|
|
|
<template v-for="(item, index) in groupDataList">
|
|
|
<a-menu-item :key="item.agencyTeamName" class="fsa showdot" @click="selectGroup(item)">
|
|
|
<span>{{item.agencyTeamName}}</span>
|
|
|
<i class="the_num" @click.stop>{{item.users.length}}</i>
|
|
|
</a-menu-item>
|
|
|
</template>
|
|
|
</a-menu>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
|
|
|
<a-menu-item key="all" class="fsa showdot bb_after fw500" @click="selectGroup('all')">
|
|
|
全部部门
|
|
|
<span>{{totalDataList.length}}</span>
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
|
<!-- <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
|
|
|
<a-menu-item key="all" class="fsa showdot bb_after" @click="selectGroup('all')">全部角色</a-menu-item>
|
|
|
</a-menu>
|
|
|
<div class="bb1 ml12 mr12 mt4 mb8" style="wdith:calc(100% - 24px)"></div>
|
|
|
<a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
|
|
|
<template v-for="(item, index) in groupList">
|
|
|
<a-menu-item :key="item.teamName" class="fsa showdot" @click="selectGroup(item)">
|
|
|
{{item.teamName}}
|
|
|
</a-menu-item>
|
|
|
</template>
|
|
|
</a-menu>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="rightContainer mb24" id="rightContainer">
|
|
|
<div class="navTitle">
|
|
|
<div class="dateSelect fsa">
|
|
|
<div class="fsa">
|
|
|
<a-range-picker style="width:274px" @change="dateChange" class />
|
|
|
<div class="ml16">
|
|
|
<a-checkable-tag class="f14" v-model="checked6" @change="handleChange(6, checked6)">今日</a-checkable-tag>
|
|
|
<a-checkable-tag class="f14" v-model="checked7" @change="handleChange(7, checked7)">昨日</a-checkable-tag>
|
|
|
<a-checkable-tag class="f14" v-model="checked2" @change="handleChange(2, checked2)">本周</a-checkable-tag>
|
|
|
<a-checkable-tag class="f14" v-model="checked3" @change="handleChange(3, checked3)">上周</a-checkable-tag>
|
|
|
<a-checkable-tag class="f14" v-model="checked0" @change="handleChange(0, checked0)">近7日</a-checkable-tag>
|
|
|
<a-checkable-tag class="f14" v-model="checked1" @change="handleChange(1, checked1)">近30日</a-checkable-tag>
|
|
|
<a-checkable-tag class="f14" v-model="checked4" @change="handleChange(4, checked4)">本月</a-checkable-tag>
|
|
|
<a-checkable-tag class="f14" v-model="checked5" @change="handleChange(5, checked5)">上月</a-checkable-tag>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-select :disabled="true" style="width: 124px" @change="handleChange">
|
|
|
<div slot="placeholder" class="c9">渠道运营</div>
|
|
|
<a-select-option value="jack">Jack</a-select-option>
|
|
|
<a-select-option value="lucy">Lucy</a-select-option>
|
|
|
<a-select-option value="Yiminghe">yiminghe</a-select-option>
|
|
|
</a-select>
|
|
|
<!-- <div class="pagechange">
|
|
|
<button @click="changepage(-1)">上一页</button>
|
|
|
<button @click="changepage(1)">下一页</button>
|
|
|
</div>-->
|
|
|
</div>
|
|
|
<div class="total">
|
|
|
<!-- <div class="fsa">
|
|
|
<div style="width:50px"></div>
|
|
|
<div style="width:100px">总计</div>
|
|
|
</div>-->
|
|
|
<!-- <div class="fsa"> -->
|
|
|
<div>
|
|
|
<span class="fwb">{{totalObj.signUps}}</span>
|
|
|
<div>报名</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span class="fwb">{{totalObj.arrived}}</span>
|
|
|
<div>到面</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span class="fwb">{{totalObj.passed}}</span>
|
|
|
<div>通过</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span class="fwb">{{totalObj.entry}}</span>
|
|
|
<div>入职</div>
|
|
|
</div>
|
|
|
<div class="table_left">
|
|
|
<span class="fwb">{{totalObj.obJob}}</span>
|
|
|
<div>在职人数</div>
|
|
|
</div>
|
|
|
<div class="table_left">
|
|
|
<span class="fwb">{{toFixed(totalObj.entryGPA)}}</span>
|
|
|
<div>入职绩点</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span class="fwb">{{toFixed(totalObj.finshedGPA)}}</span>
|
|
|
<div>交付绩点</div>
|
|
|
</div>
|
|
|
<!-- </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<!-- :expanded-row-keys.sync="expandedRowKeys" childrenColumnName="users" -->
|
|
|
<!-- :scroll="{ y: tableHeight }" -->
|
|
|
<!-- :style="{width:screenWidth + 'px !important'}" -->
|
|
|
<!-- :scroll="{x:currWidth}" -->
|
|
|
<a-table :columns="columns" class="dataTable" :data-source="dataList" :style="{minWidth:1250 + 'px !important'}" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :rowKey="(record) => record.index">
|
|
|
<span slot="custom_objob">
|
|
|
<span class="fw500">在职人数</span>
|
|
|
</span>
|
|
|
<span slot="title_index">
|
|
|
<span class="pl8">序号</span>
|
|
|
</span>
|
|
|
<a @click="getBillInfo(text1,10)" style="color:#576B95;text-decoration:underline" slot="signUps" slot-scope="text, text1">{{text}}</a>
|
|
|
<a @click="getBillInfo(text1,20)" style="color:#576B95;text-decoration:underline" slot="arrived" slot-scope="text, text1">{{text}}</a>
|
|
|
<a @click="getBillInfo(text1,30)" style="color:#576B95;text-decoration:underline" slot="passed" slot-scope="text, text1">{{text}}</a>
|
|
|
<a @click="getBillInfo(text1,40)" style="color:#576B95;text-decoration:underline" slot="entry" slot-scope="text, text1">{{text}}</a>
|
|
|
<a @click="getBillInfo(text1,50)" style="color:#576B95;text-decoration:underline" slot="obJob" slot-scope="text, text1">{{text}}</a>
|
|
|
<a @click="getBillInfo(text1,60)" style="color:#576B95;text-decoration:underline" slot="entryGPA" slot-scope="text, text1">{{toFixed(text)}}</a>
|
|
|
<a @click="getBillInfo(text1,70)" style="color:#576B95;text-decoration:underline" slot="finshedGPA" slot-scope="text, text1">{{toFixed(text)}}</a>
|
|
|
<a @click="getBillInfo(text1,60)" style="color:#576B95;text-decoration:underline" slot="packageIdx" slot-scope="text, text1">{{toFixed(text)}}</a>
|
|
|
<a @click="getBillInfo(text1,60)" style="color:#576B95;text-decoration:underline" slot="funnel" slot-scope="text, text1">{{toFixed(text)}}</a>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
<!-- <div class="pagecontainer mt16" v-if="dataList.length > 0">
|
|
|
<a-pagination :current="contentListSearchForm.pageNum" :page-size-options="pagination.pageSizeOptions" :default-current="1" :defaultPageSize="10" :total="contentListSearchForm.total" @change="onChange" size="small" show-size-changer show-quick-jumper />
|
|
|
<div class="ant-pagination-options-quick-jumper ml12 f14">
|
|
|
<span>共{{ contentListSearchForm.total }}条，</span>跳至
|
|
|
<input ref="pageinput" type="text" style="height:28px" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
|
|
|
</div>
|
|
|
</div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-modal class="townsmanDetailModal" centered v-model="townsmanDetailVisible" width="1200px" @cancel="townsmanDetailModalClose" :footer="null" destroyOnClose>
|
|
|
<div slot="title" destoryOnClose>明细</div>
|
|
|
<div class="searchinput mb16">
|
|
|
<a-input-search placeholder="请输入老乡姓名" v-model.trim="billPagination.keys" allowClear @search="onSearch" @keyup.enter="onSearch" @input="resetsearch">
|
|
|
<!-- <a-icon slot="prefix" type="search" class="cccc" />
|
|
|
<a-button slot="enterButton" class="cblue">搜索</a-button>-->
|
|
|
</a-input-search>
|
|
|
<!-- <a-input placeholder="请输入老乡姓名/身份证号" @keyup.enter="onSearch" @input="resetsearch" v-model.trim="billPagination.keys">
|
|
|
<i slot="prefix" class="iconfont icon-sousuo"></i>
|
|
|
<button slot="suffix" @click="onSearch">搜索</button>
|
|
|
</a-input>-->
|
|
|
</div>
|
|
|
<a-table :columns="billColumns" :data-source="billList" class="detailTable" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :rowKey="(record) => record.index">
|
|
|
<span slot="storeJobName" slot-scope="text">{{text}}</span>
|
|
|
<span slot="userName" slot-scope="text">{{text}}1</span>
|
|
|
|
|
|
<span slot="billDate">{{dateType}}</span>
|
|
|
</a-table>
|
|
|
<div class="pagecontainer mt16" v-if="billList.length > 0">
|
|
|
<!-- <a-pagination :current="billPagination.pageNum" :default-current="1" :defaultPageSize="10" :total="billPagination.total" @change="onChange" /> -->
|
|
|
<a-pagination :current="billPagination.pageNum" :default-current="1" :defaultPageSize="20" :show-total="total => `共${total}条`" :total="billPagination.total" @change="onChange" size="small" show-size-changer show-quick-jumper />
|
|
|
<!-- <div class="ant-pagination-options-quick-jumper ml12">
|
|
|
<span>共{{ billPagination.total }}条，</span>跳至
|
|
|
<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
|
|
|
</div>-->
|
|
|
</div>
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getMemberGroupApi, dataStatisticsTeamDetailApi, dataStatisticsListApi } from '../../../../api/merchantConfig'
|
|
|
|
|
|
import moment from 'moment'
|
|
|
import { getDateYMD, formatDateYMD, formatDateYMDHM, getUserApplyOrderStatusById, toFixed, tableWidth, fullCopy, setReturnFee } from '../../../../utils/commonUtil'
|
|
|
const rowSelection = {
|
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
|
|
|
},
|
|
|
onSelect: (record, selected, selectedRows) => {
|
|
|
console.log(record, selected, selectedRows)
|
|
|
},
|
|
|
onSelectAll: (selected, selectedRows, changeRows) => {
|
|
|
console.log(selected, selectedRows, changeRows)
|
|
|
},
|
|
|
}
|
|
|
export default {
|
|
|
// 组件名称
|
|
|
name: 'dataStatistics',
|
|
|
// 局部注册的组件
|
|
|
components: {},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
screenWidth: 0,
|
|
|
checked0: false,
|
|
|
checked1: false,
|
|
|
checked2: false,
|
|
|
checked3: false,
|
|
|
checked4: false,
|
|
|
checked5: false,
|
|
|
checked6: true,
|
|
|
checked7: false,
|
|
|
sortedInfo: null,
|
|
|
dataList: [],
|
|
|
expandedRowKeys: [],
|
|
|
rowSelection,
|
|
|
menuType: 'role',
|
|
|
currentData: {},
|
|
|
selectedKeys: ['all'],
|
|
|
groupList: [],
|
|
|
billPagination: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 20,
|
|
|
total: null, //分页配置
|
|
|
status: 0,
|
|
|
keys: null,
|
|
|
// searchTag: 1,
|
|
|
},
|
|
|
billList: [],
|
|
|
contentListSearchForm: { pageNum: 1, pageSize: 10, keys: '' },
|
|
|
townsmanDetailVisible: false,
|
|
|
isspinning: false,
|
|
|
totalObj: {
|
|
|
// 数据总计
|
|
|
arrived: 0,
|
|
|
entry: 0,
|
|
|
obJob: 0,
|
|
|
passed: 0,
|
|
|
signUps: 0,
|
|
|
entryGPA: 0,
|
|
|
finshedGPA: 0,
|
|
|
},
|
|
|
pagination: {
|
|
|
hideOnSinglePage: false,
|
|
|
showQuickJumper: true,
|
|
|
pageSize: 100,
|
|
|
total: 0,
|
|
|
size: 'small',
|
|
|
showTotal: function (total, range) {
|
|
|
return `共${total}条`
|
|
|
},
|
|
|
pageSizeOptions: ['25', '50', '100'],
|
|
|
showSizeChanger: true,
|
|
|
// showSizeChange:function(current, pageSize){
|
|
|
// this.pageSize = pageSize;
|
|
|
// }
|
|
|
},
|
|
|
dateType: '',
|
|
|
dateVal: '',
|
|
|
tableHeight: 300,
|
|
|
totalDataList: [],
|
|
|
groupDataList: [],
|
|
|
totalGroupNum: 0,
|
|
|
currentGroup: {},
|
|
|
}
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {
|
|
|
columns() {
|
|
|
const columns = [
|
|
|
{
|
|
|
// title: ' 序号',
|
|
|
dataIndex: 'index',
|
|
|
key: 'index',
|
|
|
slots: { title: 'title_index' },
|
|
|
|
|
|
customRender: (text, row, index) => {
|
|
|
// if (row.users) {
|
|
|
// return ''
|
|
|
// } else {
|
|
|
return index + 1
|
|
|
// }
|
|
|
},
|
|
|
width: 50,
|
|
|
},
|
|
|
{
|
|
|
title: '姓名',
|
|
|
dataIndex: 'aliasName',
|
|
|
key: 'aliasName',
|
|
|
customRender: (text, row, index) => {
|
|
|
// if (row.users) {
|
|
|
// return row.agencyTeamName
|
|
|
// } else {
|
|
|
return row.aliasName
|
|
|
// }
|
|
|
},
|
|
|
ellipsis: true,
|
|
|
// width: 100,
|
|
|
},
|
|
|
{
|
|
|
title: '报名',
|
|
|
dataIndex: 'signUps',
|
|
|
key: 'signUps',
|
|
|
scopedSlots: { customRender: 'signUps' },
|
|
|
sorter: (a, b) => a.signUps - b.signUps,
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '到面',
|
|
|
dataIndex: 'arrived',
|
|
|
key: 'arrived',
|
|
|
scopedSlots: { customRender: 'arrived' },
|
|
|
sorter: (a, b) => a.arrived - b.arrived,
|
|
|
|
|
|
width: 120,
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
title: '通过',
|
|
|
dataIndex: 'passed',
|
|
|
key: 'passed',
|
|
|
sorter: (a, b) => a.passed - b.passed,
|
|
|
|
|
|
scopedSlots: { customRender: 'passed' },
|
|
|
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '入职',
|
|
|
dataIndex: 'entry',
|
|
|
key: 'entry',
|
|
|
sorter: (a, b) => a.entry - b.entry,
|
|
|
scopedSlots: { customRender: 'entry' },
|
|
|
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
// title: '在职',
|
|
|
dataIndex: 'obJob',
|
|
|
key: 'obJob',
|
|
|
slots: { title: 'custom_objob' },
|
|
|
sorter: (a, b) => a.obJob - b.obJob,
|
|
|
scopedSlots: { customRender: 'obJob' },
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '入职绩点',
|
|
|
dataIndex: 'entryGPA',
|
|
|
key: 'entryGPA',
|
|
|
sorter: (a, b) => a.entryGPA - b.entryGPA,
|
|
|
scopedSlots: { customRender: 'entryGPA' },
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '交付绩点',
|
|
|
dataIndex: 'finshedGPA',
|
|
|
key: 'finshedGPA',
|
|
|
// customRender: (text, row, index) => {
|
|
|
// return toFixed(text)
|
|
|
// },
|
|
|
sorter: (a, b) => a.finshedGPA - b.finshedGPA,
|
|
|
scopedSlots: { customRender: 'finshedGPA' },
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '背包指数',
|
|
|
dataIndex: 'packageIdx',
|
|
|
key: 'packageIdx',
|
|
|
// customRender: (text, row, index) => {
|
|
|
// return '*'
|
|
|
// },
|
|
|
sorter: (a, b) => a.packageIdx - b.packageIdx,
|
|
|
scopedSlots: { customRender: 'packageIdx' },
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '漏斗指数',
|
|
|
dataIndex: 'funnel',
|
|
|
key: 'funnel',
|
|
|
// customRender: (text, row, index) => {
|
|
|
// return toFixed(text)
|
|
|
// },
|
|
|
sorter: (a, b) => a.funnel - b.funnel,
|
|
|
scopedSlots: { customRender: 'funnel' },
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
]
|
|
|
return columns
|
|
|
},
|
|
|
billColumns() {
|
|
|
let { sortedInfo } = this
|
|
|
console.log(sortedInfo)
|
|
|
sortedInfo = sortedInfo || {}
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '序号',
|
|
|
dataIndex: 'index',
|
|
|
key: 'index',
|
|
|
customRender: (text, row, index) => {
|
|
|
return index + 1
|
|
|
},
|
|
|
width: 50,
|
|
|
},
|
|
|
{
|
|
|
title: '姓名',
|
|
|
dataIndex: 'userName',
|
|
|
key: 'userName',
|
|
|
ellipsis: true,
|
|
|
width: 180,
|
|
|
// scopedSlots: { customRender: 'userName' },
|
|
|
customRender: (text, row, index) => {
|
|
|
let sex
|
|
|
if (row.sex == '1') {
|
|
|
sex = '男'
|
|
|
} else if (row.sex == '2') {
|
|
|
sex = '女'
|
|
|
} else {
|
|
|
sex = '未知'
|
|
|
}
|
|
|
// switch (row.sex) {
|
|
|
// case '0':
|
|
|
// sex = '男女不限'
|
|
|
// case '1':
|
|
|
// sex = '男'
|
|
|
// case '2':
|
|
|
// sex = '女'
|
|
|
|
|
|
// default:
|
|
|
// break
|
|
|
// }
|
|
|
return text.trim() + (sex ? '/' + sex : '') + (row.age ? '/' + row.age : '') + (row.nation ? '/' + row.nation : '')
|
|
|
},
|
|
|
},
|
|
|
// {
|
|
|
// title: '年龄',
|
|
|
// dataIndex: 'age',
|
|
|
// key: 'age',
|
|
|
// ellipsis: true,
|
|
|
// width: 60,
|
|
|
// },
|
|
|
// {
|
|
|
// title: '性别',
|
|
|
// dataIndex: 'sex',
|
|
|
// key: 'sex',
|
|
|
// ellipsis: true,
|
|
|
// customRender: (text, row, index) => {
|
|
|
// switch (text) {
|
|
|
// case 0:
|
|
|
// return '男女不限'
|
|
|
// case 1:
|
|
|
// return '男'
|
|
|
// case 2:
|
|
|
// return '女'
|
|
|
|
|
|
// default:
|
|
|
// break
|
|
|
// }
|
|
|
// },
|
|
|
// width: 60,
|
|
|
// },
|
|
|
// {
|
|
|
// title: '民族',
|
|
|
// dataIndex: 'nation',
|
|
|
// key: 'nation',
|
|
|
// ellipsis: true,
|
|
|
// width: 90,
|
|
|
// },
|
|
|
// {
|
|
|
// title: '电话',
|
|
|
// dataIndex: 'tel',
|
|
|
// key: 'tel',
|
|
|
// ellipsis: true,
|
|
|
// width: 120,
|
|
|
// },
|
|
|
// {
|
|
|
// title: '身份证',
|
|
|
// dataIndex: 'idCard',
|
|
|
// key: 'idCard',
|
|
|
// ellipsis: true,
|
|
|
// width: 180,
|
|
|
// },
|
|
|
{
|
|
|
title: '报名岗位',
|
|
|
dataIndex: 'storeJobName',
|
|
|
key: 'storeJobName',
|
|
|
ellipsis: true,
|
|
|
// width: 180,
|
|
|
// width: 60,
|
|
|
},
|
|
|
{
|
|
|
// title: '报名时间',
|
|
|
dataIndex: this.dateVal,
|
|
|
key: this.dateVal,
|
|
|
ellipsis: true,
|
|
|
width: 160,
|
|
|
slots: { title: 'billDate' },
|
|
|
customRender: (text, row, index) => {
|
|
|
return formatDateYMDHM(text)
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '当前状态',
|
|
|
dataIndex: 'status',
|
|
|
key: 'status',
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
customRender: (text, row, index) => {
|
|
|
switch (text) {
|
|
|
case 10:
|
|
|
return '报名审核中'
|
|
|
case 20:
|
|
|
return '审核通过'
|
|
|
case 21:
|
|
|
return '审核未通过'
|
|
|
case 25:
|
|
|
return '已接到'
|
|
|
case 26:
|
|
|
return '未接到'
|
|
|
case 30:
|
|
|
return '面试通过'
|
|
|
case 35:
|
|
|
return '面试未通过'
|
|
|
case 40:
|
|
|
return '已入职'
|
|
|
case 45:
|
|
|
return '通过未入职'
|
|
|
case 50:
|
|
|
return '已离职'
|
|
|
default:
|
|
|
break
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '报名人',
|
|
|
dataIndex: 'applyUserName',
|
|
|
key: 'applyUserName',
|
|
|
ellipsis: true,
|
|
|
width: 180,
|
|
|
slots: { title: 'applyUserName' },
|
|
|
customRender: (text, row, index) => {
|
|
|
return row.applyUserName
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '服务费',
|
|
|
dataIndex: 'returnFee',
|
|
|
key: 'returnFee',
|
|
|
ellipsis: true,
|
|
|
width: 80,
|
|
|
// slots: { title: 'applyUserName' },
|
|
|
customRender: (text, row, index) => {
|
|
|
// console.log(row);
|
|
|
return setReturnFee(row.returnFee, row.returnFeeType)
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '入职绩点',
|
|
|
dataIndex: 'entryGPA',
|
|
|
key: 'entryGPA',
|
|
|
ellipsis: true,
|
|
|
width: 80,
|
|
|
slots: { title: 'entryGPA' },
|
|
|
customRender: (text, row, index) => {
|
|
|
return toFixed(text)
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '交付绩点',
|
|
|
dataIndex: 'finshedGPA',
|
|
|
key: 'finshedGPA',
|
|
|
ellipsis: true,
|
|
|
width: 80,
|
|
|
slots: { title: 'finshedGPA' },
|
|
|
customRender: (text, row, index) => {
|
|
|
return toFixed(text)
|
|
|
},
|
|
|
},
|
|
|
]
|
|
|
return columns
|
|
|
},
|
|
|
},
|
|
|
// 侦听器
|
|
|
watch: {
|
|
|
menuType: {
|
|
|
handler(value) {
|
|
|
let that = this
|
|
|
console.log(value)
|
|
|
|
|
|
if (value == 'group') {
|
|
|
console.log(this.columns)
|
|
|
|
|
|
that
|
|
|
.getDataStatisticsList()
|
|
|
.then(() => {
|
|
|
console.log(1313123131231232)
|
|
|
// this.dataList = this.groupDataList
|
|
|
that.columns.splice(1, 1, {
|
|
|
title: '部门',
|
|
|
dataIndex: 'agencyTeamName',
|
|
|
key: 'agencyTeamName',
|
|
|
ellipsis: true,
|
|
|
// width: 120,
|
|
|
slots: { title: 'agencyTeamName' },
|
|
|
})
|
|
|
tableWidth(that, that.columns, 120)
|
|
|
this.$forceUpdate()
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err)
|
|
|
})
|
|
|
//
|
|
|
} else {
|
|
|
console.log(that.columns.slice(1, 2)[0].title)
|
|
|
if (that.columns.slice(1, 2)[0].title == '部门') {
|
|
|
that.getDataStatisticsList().then(() => {
|
|
|
console.log(1313123131231232)
|
|
|
that.dataList = fullCopy(that.totalDataList)
|
|
|
that.columns.splice(1, 1, {
|
|
|
title: '姓名',
|
|
|
dataIndex: 'aliasName',
|
|
|
key: 'aliasName',
|
|
|
customRender: (text, row, index) => {
|
|
|
return row.aliasName
|
|
|
},
|
|
|
ellipsis: true,
|
|
|
})
|
|
|
this.$forceUpdate()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
that.selectedKeys = ['all']
|
|
|
this.selectGroup('all')
|
|
|
// if (that.contentListSearchForm.start == that.contentListSearchForm.end) {
|
|
|
// console.log(123123)
|
|
|
// that.dataList.sort((a, b) => {
|
|
|
// return b.funnel - a.funnel
|
|
|
// })
|
|
|
// } else {
|
|
|
// console.log(321312)
|
|
|
// that.dataList.sort((a, b) => {
|
|
|
// return b.entryGPA - a.entryGPA
|
|
|
// })
|
|
|
// }
|
|
|
// that.$forceUpdate()
|
|
|
},
|
|
|
immediate: true,
|
|
|
// setTimeout(()=>{
|
|
|
|
|
|
// },200)
|
|
|
},
|
|
|
},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
this.contentListSearchForm.start = moment().add(-0, 'd').format('YYYY-MM-DD')
|
|
|
this.contentListSearchForm.end = moment().format('YYYY-MM-DD')
|
|
|
// this.billList = [...this.billList, ...this.billList, ...this.billList]
|
|
|
tableWidth(this, this.columns, 120)
|
|
|
console.log(this.currWidth)
|
|
|
this.$emit('setTitle', '团队数据')
|
|
|
this.getDataStatisticsList()
|
|
|
this.getMemberGroup()
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {
|
|
|
let that = this
|
|
|
console.log(document.documentElement.clientHeight)
|
|
|
console.log(document.getElementsByClassName('content')[0].offsetTop)
|
|
|
|
|
|
this.tableHeight = document.documentElement.clientHeight - document.getElementsByClassName('content')[0].offsetTop - 160
|
|
|
// let tableContent
|
|
|
// tableContent = document.querySelector('#rightContainer')
|
|
|
// console.dir(tableContent)
|
|
|
// console.log(tableContent.scrollWidth)
|
|
|
// let width = window.innerWidth
|
|
|
// console.log(width)
|
|
|
// that.screenWidth = tableContent.scrollWidth - 20
|
|
|
// window.onresize = function (e) {
|
|
|
// console.log(e)
|
|
|
// tableContent = document.querySelector('#rightContainer')
|
|
|
// console.dir(tableContent)
|
|
|
// console.log(tableContent.scrollWidth)
|
|
|
// let width = window.innerWidth
|
|
|
// console.log(width)
|
|
|
// that.screenWidth = (tableContent.scrollWidth < 852 ? tableContent.scrollWidth : that.screenWidth)
|
|
|
// console.log(that.screenWidth)
|
|
|
// // setRem(640);
|
|
|
// }
|
|
|
},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
/**
|
|
|
* 请求日期切换
|
|
|
*
|
|
|
*
|
|
|
*/
|
|
|
handleChange(tag, checked) {
|
|
|
let that = this
|
|
|
this.checked0 = false
|
|
|
this.checked1 = false
|
|
|
this.checked2 = false
|
|
|
this.checked3 = false
|
|
|
this.checked4 = false
|
|
|
this.checked5 = false
|
|
|
this.checked6 = false
|
|
|
this.checked7 = false
|
|
|
var start = getDateYMD()
|
|
|
var end = getDateYMD()
|
|
|
if (tag == 0) {
|
|
|
that.checked0 = true
|
|
|
start = moment().add(-6, 'd').format('YYYY-MM-DD')
|
|
|
end = moment().format('YYYY-MM-DD')
|
|
|
} else if (tag == 1) {
|
|
|
that.checked1 = true
|
|
|
|
|
|
start = moment().add(-29, 'd').format('YYYY-MM-DD')
|
|
|
end = moment().format('YYYY-MM-DD')
|
|
|
} else if (tag == 2) {
|
|
|
that.checked2 = true
|
|
|
start = moment().startOf('week').weekday(-1).format('YYYY-MM-DD')
|
|
|
end = moment().format('YYYY-MM-DD')
|
|
|
} else if (tag == 3) {
|
|
|
that.checked3 = true
|
|
|
// console.log(moment().week(moment().week() - 1).weekday(-1).format('YYYY-MM-DD'));
|
|
|
// console.log(moment().week(moment().week() - 1).weekday(5).format('YYYY-MM-DD'));
|
|
|
// start = moment()
|
|
|
// .week(moment().week() - 1)
|
|
|
// .startOf('week')
|
|
|
// .format('YYYY-MM-DD')
|
|
|
// end = moment()
|
|
|
// .week(moment().week() - 1)
|
|
|
// .endOf('week')
|
|
|
// .format('YYYY-MM-DD')
|
|
|
start = moment()
|
|
|
.week(moment().week() - 1)
|
|
|
.weekday(-1)
|
|
|
.format('YYYY-MM-DD')
|
|
|
end = moment()
|
|
|
.week(moment().week() - 1)
|
|
|
.weekday(5)
|
|
|
.format('YYYY-MM-DD')
|
|
|
console.log(start)
|
|
|
console.log(end)
|
|
|
// return
|
|
|
} else if (tag == 4) {
|
|
|
that.checked4 = true
|
|
|
|
|
|
start = moment().startOf('month').format('YYYY-MM-DD')
|
|
|
end = moment().format('YYYY-MM-DD')
|
|
|
} else if (tag == 5) {
|
|
|
that.checked5 = true
|
|
|
start = moment().subtract('month', 1).format('YYYY-MM') + '-01'
|
|
|
end = moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD')
|
|
|
} else if (tag == 6) {
|
|
|
that.checked6 = true
|
|
|
start = moment().add(-0, 'd').format('YYYY-MM-DD')
|
|
|
end = moment().format('YYYY-MM-DD')
|
|
|
} else if (tag == 7) {
|
|
|
that.checked7 = true
|
|
|
start = moment().add(-1, 'd').format('YYYY-MM-DD')
|
|
|
end = moment().add(-1, 'd').format('YYYY-MM-DD')
|
|
|
}
|
|
|
|
|
|
that.contentListSearchForm.start = start
|
|
|
that.contentListSearchForm.end = end
|
|
|
// this.selDate = [moment(that.contentListSearchForm.start, 'YYYY-MM-DD'), moment(that.contentListSearchForm.end, 'YYYY-MM-DD')]
|
|
|
|
|
|
that.contentListSearchForm.pageNum = 1
|
|
|
this.pagination.current = 1
|
|
|
|
|
|
this.getDataStatisticsList()
|
|
|
},
|
|
|
async getDataStatisticsList() {
|
|
|
this.isspinning = true
|
|
|
let { data } = await dataStatisticsListApi(this.contentListSearchForm)
|
|
|
console.log(data)
|
|
|
if (data.status == 200) {
|
|
|
this.totalObj = {
|
|
|
arrived: null,
|
|
|
entry: null,
|
|
|
obJob: null,
|
|
|
passed: null,
|
|
|
signUps: null,
|
|
|
finshedGPA: null,
|
|
|
entryGPA: null,
|
|
|
}
|
|
|
data.data.list.forEach((item, index) => {
|
|
|
this.totalObj.arrived += item.arrived
|
|
|
this.totalObj.entry += item.entry
|
|
|
this.totalObj.obJob += item.obJob
|
|
|
this.totalObj.passed += item.passed
|
|
|
this.totalObj.signUps += item.signUps
|
|
|
this.totalObj.finshedGPA += item.finshedGPA
|
|
|
this.totalObj.entryGPA += item.entryGPA
|
|
|
|
|
|
this.totalObj.index = index + 2
|
|
|
})
|
|
|
let newList = []
|
|
|
data.data.list.forEach((item, index) => {
|
|
|
newList = newList.concat(item.users)
|
|
|
console.log(item)
|
|
|
console.log(index)
|
|
|
})
|
|
|
console.log(newList)
|
|
|
if (this.menuType == 'group') {
|
|
|
console.log('isgroup')
|
|
|
this.dataList = fullCopy(data.data.list)
|
|
|
} else {
|
|
|
console.log('isrole')
|
|
|
this.dataList = fullCopy(newList)
|
|
|
}
|
|
|
if (this.contentListSearchForm.start == this.contentListSearchForm.end) {
|
|
|
this.dataList.sort((a, b) => {
|
|
|
return b.funnel - a.funnel
|
|
|
})
|
|
|
} else {
|
|
|
this.dataList.sort((a, b) => {
|
|
|
return b.entryGPA - a.entryGPA
|
|
|
})
|
|
|
}
|
|
|
this.groupDataList = fullCopy(data.data.list)
|
|
|
this.totalDataList = fullCopy(newList)
|
|
|
if (this.currentGroup) {
|
|
|
this.selectGroup(this.currentGroup)
|
|
|
}
|
|
|
this.isspinning = false
|
|
|
}
|
|
|
},
|
|
|
|
|
|
toFixed(value) {
|
|
|
return toFixed(value)
|
|
|
},
|
|
|
inputpageChange(e) {
|
|
|
const pagenumcount = this.billPagination.total / this.billPagination.pageSize
|
|
|
console.log(pagenumcount)
|
|
|
if (e.target.value) {
|
|
|
if (e.target.value > pagenumcount) {
|
|
|
this.billPagination.pageNum = Math.ceil(pagenumcount)
|
|
|
} else {
|
|
|
this.billPagination.pageNum = e.target.value
|
|
|
}
|
|
|
} else {
|
|
|
this.billPagination.pageNum = 1
|
|
|
}
|
|
|
this.gitBillList()
|
|
|
// this.getJobList();
|
|
|
// this.getTownsman()
|
|
|
console.log(e)
|
|
|
},
|
|
|
dateChange(data) {
|
|
|
console.log(data)
|
|
|
var that = this
|
|
|
if (data.length == 2) {
|
|
|
that.contentListSearchForm.start = data[0].format('YYYY-MM-DD')
|
|
|
that.contentListSearchForm.end = data[1].format('YYYY-MM-DD')
|
|
|
|
|
|
that.checked0 = false
|
|
|
that.checked1 = false
|
|
|
that.checked2 = false
|
|
|
that.checked3 = false
|
|
|
that.checked4 = false
|
|
|
that.checked5 = false
|
|
|
that.checked6 = false
|
|
|
that.checked7 = false
|
|
|
} else {
|
|
|
that.checked0 = false
|
|
|
that.checked1 = false
|
|
|
that.checked2 = false
|
|
|
that.checked3 = false
|
|
|
that.checked4 = false
|
|
|
that.checked5 = false
|
|
|
that.checked6 = true
|
|
|
that.checked7 = false
|
|
|
that.contentListSearchForm.start = moment().add(-0, 'd').format('YYYY-MM-DD')
|
|
|
that.contentListSearchForm.end = moment().format('YYYY-MM-DD')
|
|
|
}
|
|
|
|
|
|
that.getDataStatisticsList()
|
|
|
},
|
|
|
townsmanDetailModalClose() {
|
|
|
this.townsmanDetailVisible = false
|
|
|
this.billPagination = {
|
|
|
pageNum: 1,
|
|
|
pageSize: 20,
|
|
|
total: null, //分页配置
|
|
|
status: 0,
|
|
|
keys: null,
|
|
|
// searchTag: 1,
|
|
|
}
|
|
|
},
|
|
|
onSearch() {
|
|
|
if (this.billPagination.keys != null && this.billPagination.keys.length != 0) {
|
|
|
this.gitBillList()
|
|
|
// this.getTownsman()
|
|
|
// this.gettownsManCount()
|
|
|
}
|
|
|
},
|
|
|
resetsearch(e) {
|
|
|
console.log(e)
|
|
|
if (e.target.value.length === 0) {
|
|
|
this.billPagination.keys = ''
|
|
|
|
|
|
this.gitBillList()
|
|
|
// this.gettownsManCount()
|
|
|
// this.getTownsman()
|
|
|
}
|
|
|
},
|
|
|
onChange(e, e1, e2) {
|
|
|
console.log(e)
|
|
|
console.log(e1)
|
|
|
console.log(e2)
|
|
|
if (typeof e == 'number') {
|
|
|
this.billPagination.pageNum = e
|
|
|
this.gitBillList()
|
|
|
}
|
|
|
},
|
|
|
getMemberGroup() {
|
|
|
getMemberGroupApi().then(({ data }) => {
|
|
|
if (data.status == 200) {
|
|
|
console.log(data)
|
|
|
this.groupList = data.data.list
|
|
|
this.groupList.forEach((item, index) => {
|
|
|
console.log(item)
|
|
|
if (index > 0) {
|
|
|
item.checked = false
|
|
|
} else {
|
|
|
item.checked = true
|
|
|
}
|
|
|
console.log(item)
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
* 点击获取数据统计详情
|
|
|
*
|
|
|
*
|
|
|
*/
|
|
|
getBillInfo(e, type) {
|
|
|
console.log(e)
|
|
|
if (e.users) {
|
|
|
if (e.agencyTeamId == '') {
|
|
|
}
|
|
|
}
|
|
|
this.currentData = { ...e, type }
|
|
|
switch (type) {
|
|
|
case 10:
|
|
|
this.dateType = '报名时间'
|
|
|
this.dateVal = 'createTime'
|
|
|
break
|
|
|
case 20:
|
|
|
this.dateType = '面试时间'
|
|
|
this.dateVal = 'status25OperateTime'
|
|
|
break
|
|
|
case 30:
|
|
|
this.dateType = '通过时间'
|
|
|
this.dateVal = 'status30OperateTime'
|
|
|
break
|
|
|
case 40:
|
|
|
this.dateType = '入职时间'
|
|
|
this.dateVal = 'entryTime'
|
|
|
break
|
|
|
case 50:
|
|
|
this.dateType = '入职时间'
|
|
|
this.dateVal = 'status40OperateTime'
|
|
|
break
|
|
|
case 60:
|
|
|
this.dateType = '入职时间'
|
|
|
this.dateVal = 'status40OperateTime'
|
|
|
break
|
|
|
case 70:
|
|
|
this.dateType = '交付时间'
|
|
|
this.dateVal = 'finishedTime'
|
|
|
break
|
|
|
default:
|
|
|
break
|
|
|
}
|
|
|
this.gitBillList()
|
|
|
},
|
|
|
async gitBillList() {
|
|
|
this.isspinning = true
|
|
|
console.log(this.billPagination.keys)
|
|
|
console.log(this.currentData)
|
|
|
let data = {
|
|
|
pageNum: this.billPagination.pageNum,
|
|
|
pageSize: this.billPagination.pageSize,
|
|
|
start: this.contentListSearchForm.start,
|
|
|
end: this.contentListSearchForm.end,
|
|
|
keys: this.billPagination.keys,
|
|
|
userId: this.currentData.id ? this.currentData.id : '',
|
|
|
agencyTeamId: this.currentData.agencyTeamId,
|
|
|
type: this.currentData.type,
|
|
|
}
|
|
|
console.log(data);
|
|
|
let res = await dataStatisticsTeamDetailApi(data)
|
|
|
console.log(res)
|
|
|
let pageBean = res.data.data.pageBean
|
|
|
if (res.data.status == 200) {
|
|
|
this.billList = pageBean.recordList
|
|
|
this.billPagination = { ...this.billPagination, total: pageBean.recordCount, pageNum: pageBean.currentPage }
|
|
|
this.townsmanDetailVisible = true
|
|
|
}
|
|
|
this.isspinning = false
|
|
|
},
|
|
|
selectGroup(val) {
|
|
|
console.log(val)
|
|
|
this.selectedKeys = [val.agencyTeamName || 'all']
|
|
|
if (typeof val == 'object') {
|
|
|
this.currentGroup = val
|
|
|
this.groupDataList.forEach((item) => {
|
|
|
console.log(item)
|
|
|
console.log()
|
|
|
if (item.agencyTeamId == val.agencyTeamId) {
|
|
|
this.dataList = item.users
|
|
|
this.totalObj.arrived = 0
|
|
|
this.totalObj.entry = 0
|
|
|
this.totalObj.obJob = 0
|
|
|
this.totalObj.passed = 0
|
|
|
this.totalObj.signUps = 0
|
|
|
this.totalObj.finshedGPA = 0
|
|
|
this.totalObj.entryGPA = 0
|
|
|
this.dataList.forEach((item1) => {
|
|
|
this.totalObj.arrived += item1.arrived
|
|
|
this.totalObj.entry += item1.entry
|
|
|
this.totalObj.obJob += item1.obJob
|
|
|
this.totalObj.passed += item1.passed
|
|
|
this.totalObj.signUps += item1.signUps
|
|
|
this.totalObj.finshedGPA += item1.finshedGPA
|
|
|
this.totalObj.entryGPA += item1.entryGPA
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
if (this.contentListSearchForm.start == this.contentListSearchForm.end) {
|
|
|
this.dataList.sort((a, b) => {
|
|
|
return b.funnel - a.funnel
|
|
|
})
|
|
|
} else {
|
|
|
this.dataList.sort((a, b) => {
|
|
|
return b.entryGPA - a.entryGPA
|
|
|
})
|
|
|
}
|
|
|
console.log(this.dataList)
|
|
|
} else {
|
|
|
this.currentGroup = {}
|
|
|
|
|
|
this.getDataStatisticsList()
|
|
|
}
|
|
|
|
|
|
// this.getDataStatisticsList()
|
|
|
},
|
|
|
onDataSearch() {
|
|
|
this.getDataStatisticsList()
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
table {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.dataStatisticsContainer {
|
|
|
height: 100%;
|
|
|
// padding: 16px;
|
|
|
// min-height: 780px;
|
|
|
}
|
|
|
.contentbody {
|
|
|
overflow: hidden;
|
|
|
padding-right: 16px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding-left: 0;
|
|
|
padding-bottom: 0px;
|
|
|
// overflow: hidden;
|
|
|
min-height: calc(100vh - 105px);
|
|
|
// height: calc(100vh - 105px);
|
|
|
.leftContainer {
|
|
|
width: 260px;
|
|
|
min-width: 220px;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
/deep/ .searchbox {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.searchinput {
|
|
|
width: 100%;
|
|
|
}
|
|
|
// padding-bottom: 14px;
|
|
|
}
|
|
|
.leftMenu {
|
|
|
max-width: calc(100% - 1px);
|
|
|
margin-right: 1px;
|
|
|
border-right-color: transparent;
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 0;
|
|
|
}
|
|
|
}
|
|
|
.thedot {
|
|
|
display: none;
|
|
|
}
|
|
|
.showdot:hover .thedot {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
.rightContainer {
|
|
|
flex: 1;
|
|
|
padding-left: 16px;
|
|
|
overflow-x: auto;
|
|
|
position: relative;
|
|
|
min-width: 274px;
|
|
|
|
|
|
&::before {
|
|
|
position: absolute;
|
|
|
content: '';
|
|
|
width: 1px;
|
|
|
height: calc(100% - 16px);
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
background: #eee;
|
|
|
}
|
|
|
.addmemeber {
|
|
|
border: 0;
|
|
|
padding: 0 12px;
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
color: #fff;
|
|
|
background: #1890ff;
|
|
|
border-radius: 4px;
|
|
|
i {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
.addRole {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
color: #1890ff;
|
|
|
i {
|
|
|
// transform: translateY(4px);
|
|
|
margin-right: 4px;
|
|
|
font-weight: 400;
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
.addItem {
|
|
|
width: 404px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/ .ant-table-placeholder {
|
|
|
min-height: 300px;
|
|
|
> div {
|
|
|
position: relative;
|
|
|
height: 131px;
|
|
|
top: 30px;
|
|
|
// transform: translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.pagechange {
|
|
|
button {
|
|
|
width: 66px;
|
|
|
height: 24px;
|
|
|
border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
// border-radius: 4px;
|
|
|
font-size: 14px;
|
|
|
color: #4d575e;
|
|
|
background-color: #fff;
|
|
|
&:hover {
|
|
|
border-color: #1890ff;
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
&:first-child {
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.townsmanDetailModal {
|
|
|
/deep/ .ant-modal-header {
|
|
|
// background-color: #f5f5f5;
|
|
|
> div {
|
|
|
height: 44px;
|
|
|
line-height: 44px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
padding: 0 20px;
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
}
|
|
|
/deep/ .ant-modal-content {
|
|
|
.ant-modal-body {
|
|
|
min-height: 730px;
|
|
|
max-height: 730px;
|
|
|
padding-bottom: 50px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
td:empty:before {
|
|
|
content: '-';
|
|
|
}
|
|
|
|
|
|
/deep/ .ant-table.ant-table-fixed-header .ant-table-scroll .ant-table-header {
|
|
|
overflow: auto !important;
|
|
|
margin-bottom: -20px !important;
|
|
|
padding-bottom: 20px !important;
|
|
|
}
|
|
|
|
|
|
/deep/ .ant-table {
|
|
|
table {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.ant-table-pagination.ant-pagination {
|
|
|
float: unset;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.ant-table-thead {
|
|
|
> tr {
|
|
|
> th {
|
|
|
font-weight: bold !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// .ant-table-body::-webkit-scrollbar {
|
|
|
// width: 0 !important;
|
|
|
// }
|
|
|
.ant-table-hide-scrollbar {
|
|
|
// padding-right: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
.navTitle {
|
|
|
// margin: 16px 0;
|
|
|
width: 100%;
|
|
|
min-width: 856px;
|
|
|
}
|
|
|
.content {
|
|
|
position: relative;
|
|
|
min-width: 1250px;
|
|
|
// overflow: auto;
|
|
|
// max-height: 700px;
|
|
|
}
|
|
|
.total {
|
|
|
// background-color: #fafafa;
|
|
|
// width: 100%;
|
|
|
// width: 460px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-size: 22px;
|
|
|
margin-top: 48px;
|
|
|
padding-bottom: 32px;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
// padding-right: 10px;
|
|
|
> div {
|
|
|
text-align: center;
|
|
|
// font-weight: bold;
|
|
|
flex: 1;
|
|
|
&:last-child {
|
|
|
// margin-left: 420px;
|
|
|
> div {
|
|
|
// padding-right: 26px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
> div {
|
|
|
// padding: 16px;
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/deep/.searchinput {
|
|
|
width: 320px;
|
|
|
// margin-bottom: 16px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.pagecontainer {
|
|
|
// position: absolute;
|
|
|
// bottom: 0;
|
|
|
// left: 50%;
|
|
|
width: 100%;
|
|
|
// transform: translateX(-50%);
|
|
|
display: flex;
|
|
|
// justify-content: center;
|
|
|
}
|
|
|
/deep/.ant-btn-primary:hover {
|
|
|
border-color: #40a9ff;
|
|
|
background-color: #40a9ff;
|
|
|
color: #fff;
|
|
|
}
|
|
|
/deep/.detailTable {
|
|
|
.ant-table-thead {
|
|
|
& > tr > th {
|
|
|
padding: 12px 8px !important;
|
|
|
}
|
|
|
.ant-table-row-cell-break-word {
|
|
|
padding: 12px 8px;
|
|
|
// text-align: center;
|
|
|
}
|
|
|
}
|
|
|
.ant-table-body {
|
|
|
.ant-table-tbody {
|
|
|
> tr > td {
|
|
|
font-size: 14px;
|
|
|
padding: 12px 8px;
|
|
|
// height: 20px;
|
|
|
// display: inline-block;
|
|
|
// padding: 0px 16px;
|
|
|
}
|
|
|
.ant-table-row-indent {
|
|
|
display: none;
|
|
|
}
|
|
|
.ant-table-column-title {
|
|
|
overflow: unset !important;
|
|
|
}
|
|
|
.ant-table-row-cell-break-word {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.dataTable {
|
|
|
/deep/ .ant-table-content {
|
|
|
.ant-table-body {
|
|
|
.ant-table-thead {
|
|
|
th {
|
|
|
padding: 12px 0;
|
|
|
div {
|
|
|
// padding: 0px 8px;
|
|
|
}
|
|
|
&:not(:first-child) {
|
|
|
> span {
|
|
|
// line-height: 22px;
|
|
|
> div {
|
|
|
// line-height: 1;
|
|
|
border-left: 1px solid #ddd;
|
|
|
padding-left: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ant-table-row-cell-break-word {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
.ant-table-tbody {
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
padding: 12px 12px;
|
|
|
}
|
|
|
.ant-table-row-expand-icon {
|
|
|
// color: #000;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.ant-table-row-indent {
|
|
|
display: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/deep/.ant-table-tbody {
|
|
|
> tr > td {
|
|
|
font-size: 14px;
|
|
|
// height: 20px;
|
|
|
// display: inline-block;
|
|
|
padding: 0px 16px;
|
|
|
}
|
|
|
.ant-table-row-indent {
|
|
|
display: none;
|
|
|
}
|
|
|
.ant-table-column-title {
|
|
|
overflow: unset !important;
|
|
|
}
|
|
|
.ant-table-row-cell-break-word {
|
|
|
// height: 54px;
|
|
|
// text-align: right;
|
|
|
// padding-right: 26px !important;
|
|
|
overflow: hidden;
|
|
|
.ant-table-row-spaced {
|
|
|
display: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/ .ant-select-dropdown-menu-item-active,
|
|
|
.ant-select-dropdown-menu-item-selected {
|
|
|
color: #1890ff !important;
|
|
|
font-weight: normal;
|
|
|
background-color: #e6f7ff !important;
|
|
|
}
|
|
|
.table_left {
|
|
|
position: relative;
|
|
|
}
|
|
|
.table_left:before {
|
|
|
content: '';
|
|
|
width: 1px;
|
|
|
height: 20px;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
background-color: #ccc;
|
|
|
position: absolute;
|
|
|
left: 0px;
|
|
|
}
|
|
|
/deep/.spinstyle {
|
|
|
.ant-spin-dot-item {
|
|
|
background-color: #1890ff !important;
|
|
|
}
|
|
|
.ant-spin-text {
|
|
|
color: #1890ff !important;
|
|
|
}
|
|
|
}
|
|
|
/deep/.ant-calendar-panel {
|
|
|
.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
|
|
|
background: #1890ff !important;
|
|
|
}
|
|
|
.ant-calendar-date:hover {
|
|
|
border-color: #1890ff !important;
|
|
|
background-color: #fff;
|
|
|
color: #1890ff !important;
|
|
|
}
|
|
|
.ant-calendar-today .ant-calendar-date {
|
|
|
background-color: #1890ff !important;
|
|
|
border-color: #1890ff !important;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,
|
|
|
.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date {
|
|
|
background-color: #1890ff !important;
|
|
|
border-color: #1890ff !important;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.ant-calendar-range .ant-calendar-in-range-cell::before {
|
|
|
background: #e6f7ff !important;
|
|
|
}
|
|
|
.ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date:hover,
|
|
|
.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date:hover {
|
|
|
background: #1890ff !important;
|
|
|
}
|
|
|
.ant-calendar-header a:hover {
|
|
|
color: #1890ff !important;
|
|
|
}
|
|
|
.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover,
|
|
|
.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
|
|
|
.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade,
|
|
|
.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover,
|
|
|
.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover {
|
|
|
background: #1890ff !important;
|
|
|
}
|
|
|
.ant-calendar-month-panel-month:hover,
|
|
|
.ant-calendar-year-panel-year:hover,
|
|
|
.ant-calendar-decade-panel-decade:hover {
|
|
|
background: #e6f7ff !important;
|
|
|
}
|
|
|
}
|
|
|
// /deep/.ant-popover .ant-popover-content .ant-popover-inner-content {
|
|
|
// width: 200px !important;
|
|
|
// }
|
|
|
</style>
|
|
|
<style>
|
|
|
.ant-modal-close-x {
|
|
|
width: 44px;
|
|
|
height: 44px;
|
|
|
line-height: 44px;
|
|
|
}
|
|
|
.ant-empty-description {
|
|
|
font-size: 14px;
|
|
|
color: rgba(0, 0, 0, 0.25);
|
|
|
}
|
|
|
.ant-table-placeholder {
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
</style> |