2025-01-21 11:30:31 +08:00

710 lines
38 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="layout-content-wrap">
<div class="navigation-bar flex-row mb-16">
<img src="../../assets/image/Link.png" height="22" alt="">
<a>/</a>
<a>案件包列表</a><a>/</a>
<a>案件列表</a>
</div>
<div class="layout-tabs-content-box background-color-fff border-radius-4">
<div class="pt-8 border-b-solid-lighter-1">
<div class="height-30 flex-row align-items-center justify-content-between mb-24">
<div class="f22 color-text-primary">筛选</div>
<div class="flex-row align-items-center color-text-regular cursor-pointer"
@click="handleToggleSearch">
<span class="f14 pr-8">{{showSearch?'展开':'收起'}}</span>
<i :class="['f14 el-icon-arrow-down transform-time-default', {
'rotate--180': showSearch
}]"></i>
</div>
</div>
<el-collapse-transition>
<div v-show="showSearch">
<el-row :gutter="56">
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">案件包名称</span>
<el-input v-model.trim="queryParam.pkgName"
clearable placeholder="请输入案件包名称"
@keydown.enter.native="handleSearch">
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">金融机构名称</span>
<el-input v-model.trim="queryParam.financialOrgName"
clearable placeholder="请输入金融机构名称"
@keydown.enter.native="handleSearch">
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">案件编号</span>
<el-input v-model.trim="queryParam.caseNo"
clearable placeholder="请输入案件编号"
@keydown.enter.native="handleSearch">
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">所属调解员</span>
<el-select v-model="queryParam.mediatorId"
clearable placeholder="请选择所属调解员"
@keydown.enter.native="handleSearch"
class="width100">
<el-option
v-for="item in MediateUserList"
:key="item.id"
:label="item.realName"
:value="item.id">
</el-option>
</el-select>
</div>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">案件状态</span>
<el-select v-model="queryParam.caseStatus"
clearable placeholder="请选择案件状态"
@keydown.enter.native="handleSearch"
class="width100">
<el-option
v-for="item in CaseStatusEnum"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">分案状态</span>
<el-select v-model="queryParam.dispatch"
clearable placeholder="请选择分案状态"
@keydown.enter.native="handleSearch"
class="width100">
<el-option
v-for="item in PartCaseStatusEnum"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">调解进度</span>
<el-select v-model="queryParam.labels"
clearable placeholder="请选择调解进度"
@keydown.enter.native="handleSearch"
:multiple="true" :multiple-limit="3"
class="width100">
<el-option
v-for="item in MediateProgEnum"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">调解状态</span>
<el-select v-model="queryParam.mediateStatus"
clearable placeholder="请选择调解状态"
@keydown.enter.native="handleSearch"
class="width100">
<el-option
v-for="item in MediateStatusEnum"
:key="item.label"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">被申请人姓名</span>
<el-input v-model.trim="queryParam.creditorName"
clearable placeholder="请输入被申请人姓名"
@keydown.enter.native="handleSearch">
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">被申请人电话</span>
<el-input v-model.trim="queryParam.creditorPhone"
clearable placeholder="请输入被申请人电话"
@keydown.enter.native="handleSearch"
maxlength="11"
>
</el-input>
</div>
</el-col>
<el-col :span="6">
<div class="flex-row-center align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">被申请人证件号</span>
<el-input v-model.trim="queryParam.creditorCode"
clearable placeholder="请输入被申请人证件号"
@keydown.enter.native="handleSearch"
maxlength="11"
>
</el-input>
</div>
</el-col>
</el-row>
<el-row :gutter="56">
<el-col :span="18">
<div class="flex-row align-items-center height-40 mb-24">
<span class="tabs__search-criteria-title flex-shrink-0 pr-16">最新跟进时间</span>
<span :class="['f14 pr-24 cursor-pointer', i === 0 ? 'pl-8' : '',
activeUsage === item ?'color-primary' : 'color-text-regular']"
v-for="(item, i) in usageOption" :key="i"
@click="handleClickUsage(item)">{{item}}</span>
<el-date-picker
v-model="queryDate"
type="daterange"
clearable
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleChangeDate">
</el-date-picker>
</div>
</el-col>
<el-col :span="4" :offset="2">
<div class="flex-row align-items-center justify-content-end">
<el-button @click="hanldeReset">重置</el-button>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</div>
</el-col>
</el-row>
</div>
</el-collapse-transition>
</div>
<!-- table -->
<div class="pt-8">
<div class="height-56 flex-row align-items-center justify-content-between">
<div class="f22 color-text-primary">案件列表</div>
<div class="flex-row">
<!-- <el-button size="small" @click="handleImport">导入</el-button>
<el-button size="small" @click="handleBatchDelete">删除</el-button>-->
<el-button size="small" @click="handleConclude">案件办结</el-button>
<el-button size="small" type="primary" @click="handleCaseAllocation">案件分配</el-button>
</div>
</div>
<div class="height-56 flex-row align-items-center justify-content-between" style="height: 22px;margin-left: 10px;margin-top: -10px;margin-bottom: 5px">
<div class="f22 color-text-primary"><el-checkbox :indeterminate="indeterminate" @change="handleCheckAllChange">全选</el-checkbox></div>
</div>
<div class="case-table">
<el-table :data="tableData" :height="`${contentHeight}`" @selection-change="handleSelectionChange" :show-header="false">
<!-- <el-table-column type="selection" width="55"></el-table-column> -->
<!-- <el-table-column align="center" width="85">
<template slot="header">
<div>
<el-checkbox :indeterminate="indeterminate" @change="handleCheckAllChange">全选</el-checkbox>
</div>
</template>
</el-table-column> -->
<el-table-column prop="pkgName" label="操作" show-overflow-tooltip >
<template slot-scope="scope">
<div class="table-row flex-column justify-content-between">
<div class="flex-row pt-8">
<span>
<el-checkbox-group v-model="selectionData">
<!-- 此处的label是复选框右边显示的值也是选中后的值。如果要一行的数据直接使用row即可 -->
<!-- label的内容会显示在页面上需要配合css把label的内容隐藏掉 -->
<el-checkbox :disabled="scope.row.caseStatus == 1 ? true :false" :key="scope.row.id" :label="scope.row.id"></el-checkbox>
</el-checkbox-group>
</span>
<span class="f-weight500 color-000 f16">被申请人:
<a v-for="(item,index) in scope.row.debtorEntityList.filter(item => item.role == 'DEBTOR' && item.type == '本人')" :key="index">{{index == 0 ?'':','}}{{item.name}}</a>
</span>
<span class="case-lable">
<a :class="'case-status'+ $util.getMediationTypeData(scope.row.mediateStatus).key">{{$util.getMediationTypeData(scope.row.mediateStatus).label}}</a>
<a v-if="scope.row.mediateRecordStatus != undefined && scope.row.mediateRecordStatus != null" :class="'case-status'+ $util.getMediationprogressData(scope.row.mediateRecordStatus).key">{{$util.getMediationprogressData(scope.row.mediateRecordStatus).label}}</a>
<a class="case-status0" v-if="scope.row.assistMediatorId">协办</a>
<a class="case-status4" v-if="scope.row.caseStatus == 2">办结</a>
</span>
</div>
<div class="flex-row justify-content-between table-span-one">
<span class="">
<p>案件号:</p>
<p class="color-000">{{ scope.row.caseNo }}</p>
</span>
<span>
<p>申请人:</p>
<p class="color-000">{{ scope.row.financialOrgName }}</p>
</span>
<span>
<p>最新跟进时间:</p>
<p class="color-000">{{ scope.row.updateAt }}</p>
</span>
<span>
<p>逾期金额(元)</p>
<p class="color-000">{{ scope.row.moneyAmount }}</p>
</span>
<span>
<p>委案日期:</p>
<p class="color-000">{{ scope.row.planStartTime }}</p>
</span>
<span>
<p>所属调解员:</p>
<p class="color-000">{{ scope.row.mediatorName }}</p>
</span>
<span style=" text-align: right;">
<el-button size="mini" class="case-btn" @click="jumpUrl(`/case-detail?dataKey=casepack&caseId=${scope.row.id}`)">查看详情</el-button>
<el-button size="mini" class="case-btn" @click="handleDelete(scope)">删除</el-button>
</span>
</div>
<div class="flex-row justify-content-between case-bg">
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'1',title:'短信发送记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>短信</p>
<p class="color-000"><a class="color-274ea4">成功{{scope.row.statistics.sms.success}}</a>/发送{{scope.row.statistics.sms.total}}</p>
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'2',title:'电话呼叫记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>外呼</p>
<p class="color-000"><a class="color-274ea4">接通{{scope.row.statistics.calling.answered}}</a>/外呼{{scope.row.statistics.calling.total}}</p>
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>调解视频</p>
<p class="color-000"><a class="color-274ea4">结束{{scope.row.statistics.vido.finish}}</a>/预约{{scope.row.statistics.vido.total}}</p>
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>文书</p>
<p class="color-000">{{scope.row.statistics.file}}</p>
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'5',title:'文书签字记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>文书签字</p>
<p class="color-000"><a class="color-274ea4">成功{{scope.row.statistics.sign.success}}</a>/发起{{scope.row.statistics.sign.total}}</p>
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'6',title:'文书送达记录',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>文书送达</p>
<p class="color-000">{{scope.row.statistics.served}}</p>
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'7',title:'还款计划',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>还款计划</p>
<p class="color-000"><a class="color-274ea4">{{scope.row.statistics.plan == 0 ? '未设置':'已设置'}}</a></p>
</span>
<span class="cursor-pointer" @click="CaseTraceDialog = {activeName:'8',title:'还款凭证',caseNo:scope.row.caseNo,caseId:scope.row.id}">
<p>还款凭证</p>
<p class="color-000"><a class="color-274ea4">已填{{scope.row.statistics.proof}}</a></p>
</span>
</div>
<!-- <div class="flex-row justify-content-end">
<span><el-button size="mini" class="case-btn" @click="handleEdit(scope)">查看详情</el-button></span>
<span><el-button size="mini" class="case-btn" @click="handleDelete(scope)">删除</el-button></span>
</div> -->
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="text-center pt-16">
<el-pagination
@size-change="getCaseInfoList"
@current-change="getCaseInfoList"
:current-page="queryParam.current"
:page-size="queryParam.size"
layout="total, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</div>
<!-- 导入 -->
<!-- <importCaseDialog v-if="importCaseDialog" :importCaseDialog.sync="importCaseDialog" /> -->
<!-- 新增 -->
<!-- <addCaseDialog v-if="addCaseDialog" :addCaseDialog.sync="addCaseDialog" /> -->
<!-- 编辑 -->
<!-- <editCaseDrawer v-if="editCaseDrawer" :editCaseDrawer.sync="editCaseDrawer"/> -->
<!-- 案件分配-->
<caseAllocationDialog v-if="caseAllocationDialog" :caseAllocationDialog.sync="caseAllocationDialog" />
<!-- 各种案件追踪记录 -->
<CaseTraceDialog v-if="CaseTraceDialog" :eventTraDialog.sync="CaseTraceDialog" />
</div>
</template>
<script>
import api from "@/services/caseManagement";
import smapi from "@/services/systemManage";
import { values } from "lodash";
export default {
components: {
// importCaseDialog: () => import('./components/importCaseDialog'),//导入
// addCaseDialog: () => import('./components/addCaseDialog'),//新增
// editCaseDrawer: () => import('./components/editCaseDrawer'),//编辑
CaseTraceDialog: () => import('./components/CaseTraceDialog.vue'),//各种案件追踪记录
caseAllocationDialog: () => import('./components/caseAllocationDialog'),//案件分配
},
data() {
return {
CaseTraceDialog:null,//各种案件追踪记录
isCheck: false,//全选按钮绑定值
indeterminate: false,//全选按钮的不确定状态选中数据selectionData的长度length符合 0 < selectionData.length < enabledDataList.length 值为true
selectionData: [],//表格多选选中的数据
enabledDataList: [],//这个指表格中没有被禁用的行数据,进来组件的时候需要自己处理下
//案件状态
CaseStatusEnum:[{label:'在办',value:1},{label:'办结',value:2}],
//分案状态
PartCaseStatusEnum:[{label:'待分案',value:false},{label:'已分案',value:true}],
//调解进度
MediateProgEnum:[{label:'承诺账户',value:'承诺账户'},{label:'重点账户',value:'重点账户'},{label:'已结清客户',value:'已结清客户'},
{label:'疑难账户',value:'疑难账户'},{label:'失联账户',value:'失联账户'},{label:'半失联账户',value:'半失联账户'},{label:'部分还款账户',value:'部分还款账户'},
{label:'适诉案件',value:'适诉案件'},{label:'可联账户',value:'可联账户'},{label:'投诉倾向客户',value:'投诉倾向客户'},{label:'分期客户',value:'分期客户'},
{label:'其他/无标签',value:'其他/无标签'}
],
//调解状态
MediateStatusEnum:[{label:'未触达',value:0},{label:'调解中',value:1},{label:'已达成方案',value:2},
{label:'已签署协议',value:3},{label:'调解失败',value:4},{label:'调解成功',value:5}],
showSearch: true,
queryDate: '',
activeUsage: '',
queryParam: {
pkgId:'',
financialOrgName:'',//金融机构名称
caseNo: '',//案件编号
productTypeId: '',//产品类型id
caseStatus: '',//案件状态
creditorName:'',//债券人姓名
creditorPhone:'',//债务人手机号
creditorCode:'',
endTime: '',//结束时间
beginTime:'',//开始时间
deptId:'',//区域id
current:1,
size:10,
dataAuthUserId:'',//当前登录用户所拥有权限的用户id
dataAuthDeptId:'',//当前登录用户所拥有权限的区域id
mediatorId:'',//调解员id
caseStatus:null,//案件状态
mediateStatus:null,//调解状态
dispatch:null,//分案状态
labels:null,//案件标签
},
usageOption: ['今日','昨日', '近一周', '近一月', '近半年', '近一年'],
tableData: [],
total:0,
uniqueSelection:[],
caseAllocationDialog:null,//案件分配弹框
importCaseDialog:null,//导入
addCaseDialog:null,//新增
editCaseDrawer:null,//编辑
caseStatusData:[],
MediateUserList:[]
}
},
watch: {
// 监听选中的数据,选中的数据发生变化,通过判断长度给多选按钮赋值
selectionData: {
handler(v) {
if (this.enabledDataList.length) {
let checkedCount = v.length;
this.isCheck = checkedCount === this.enabledDataList.length;
this.indeterminate = checkedCount > 0 && checkedCount < this.enabledDataList.length;
}
},
immediate: true
}
},
created() {
if (this.$route.query.pkgName != undefined) {
this.queryParam.pkgName = this.$route.query.pkgName;
}
this.getMediateUserList()
this.getCaseInfoList(1)
},
computed:{
// 获取抽屉drawer的内容高度
contentHeight(){
let oh = document.documentElement.clientHeight;
if(this.showSearch){
return oh-56-48-366-145
}else{
return oh-56-48-175-75
}
}
},
methods: {
jumpUrl (url) {
this.$router.push(url);
},
// 调解员数据
getMediateUserList(){
let deptId = ''
if(JSON.parse(sessionStorage.getItem('userInfo'))){
deptId = JSON.parse(sessionStorage.getItem('userInfo')).deptId
}
smapi.getUserByDeptList({ids:[deptId]}).then(res => {
if (!res.code) {
this.MediateUserList = res
}
})
},
// 全选
handleCheckAllChange(value){
this.selectionData = value ? this.enabledDataList.map(el=>el.id) : [];
this.indeterminate = false;
},
// 导入
handleImport(){
this.importCaseDialog={
title:'导入案件',
}
},
// 批量删除
handleBatchDelete(){
if(this.uniqueSelection.length==0){
this.$message.warning("请先选择你要删除的列表数据");
return
}
this.$confirm("请确定是否删除这些数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
if(!this.$clickThrottle()) { return }//防止重复点击
let data = {
ids:this.uniqueSelection
}
api.deleteCaseBatch(data).then((res) => {
this.$message.success("成功");
this.getCaseInfoList(1)
});
}).catch(() => {});
},
// 单条删除
handleDelete(scope){
this.$confirm("请确定是否删除此条数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
if(!this.$clickThrottle()) { return }//防止重复点击
api.deleteCaseInfoById(scope.row.id).then((res) => {
this.$message.success("成功");
this.getCaseInfoList(1)
});
}).catch(() => {});
},
// 新增
// handleAddForm(){
// this.addCaseDialog={
// title:'新增案件',
// }
// },
handleConclude() {
// 批量办结
if (this.selectionData.length == 0) {
this.$message.warning(`请至少选中一个调解案件!`)
return
}
if (!this.$clickThrottle()) {
return
}//防止重复点击
api.updateCaseStatus({caseStatus: 2, ids: this.selectionData}).then(res => {
this.$message.success("成功");
this.getCaseInfoList(1)
})
},
// 案件分配
handleCaseAllocation(){
if(this.selectionData.length > 0){
this.caseAllocationDialog={
title:'案件分配',
choosecaseIds:this.selectionData
}
}
else
{
this.$message({
showClose: true,
message: '请选择需要分案的案件!',
type: 'warning'
});
return false
}
},
// 编辑
handleEdit(scope){
this.editCaseDrawer={
title:'编辑案件',
data:scope.row,
currentPage:this.queryParam.current
}
},
// 列表数据
getCaseInfoList(val){
this.queryParam.current = val
api.getCaseInfoList(this.queryParam).then(res => {
if (!res.code) {
this.tableData = res.records;
this.total = res.total;
// 给enabledDataList赋值需要去掉被禁用的数据
this.enabledDataList = this.tableData.filter(v=>!v.disabled)
}
})
},
handleToggleSearch() {
this.showSearch = !this.showSearch
},
// 重置
hanldeReset() {
for (let key in this.queryParam) {
this.queryParam[key] = ''
}
this.queryParam.current = 1
this.queryParam.size = 10
},
handleSearch() {
this.queryParam.size = 10;
this.queryParam.current = 1;
this.getCaseInfoList(1)
},
handleClickUsage(item) {
this.activeUsage = item
this.setDateFast()
},
handleChangeDate() {
this.activeUsage = ''
if(this.queryDate === null) {
this.setDateFast()
}else {
this.queryParam.beginTime = this.$util.getDayStart(this.queryDate[0])
this.queryParam.endTime = this.$util.getDayEnd(this.queryDate[1])
}
},
setDateFast() {
switch (this.activeUsage) {
case "今日":
let todayObj = this.$util.getToday()
this.queryParam.beginTime = todayObj.todayStart
this.queryParam.endTime = todayObj.todayEnd
break
case "昨日":
let yesterdayObj = this.$util.getYesterday()
this.queryParam.beginTime = yesterdayObj.beginTime
this.queryParam.endTime = yesterdayObj.endTime
break
case "近一周":
let rangeWeek = this.$util.getRecentWeeks()
this.queryParam.beginTime = rangeWeek.recentWeekStart
this.queryParam.endTime = rangeWeek.todayEnd
break
case "近一月":
let rangeMonth = this.$util.getRecentMonths()
this.queryParam.beginTime = rangeMonth.recentMonthStart
this.queryParam.endTime = rangeMonth.todayEnd
break
case "近半年":
let rangeMonths = this.$util.getRecentMonths(6)
console.log('近半年:', rangeMonths)
this.queryParam.beginTime = rangeMonths.recentMonthStart
this.queryParam.endTime = rangeMonths.todayEnd
break
case "近一年":
let rangeYear = this.$util.getRecentYears()
this.queryParam.beginTime = rangeYear.recentYearStart
this.queryParam.endTime = rangeYear.todayEnd
break
default:
this.queryParam.beginTime = ''
this.queryParam.endTime = ''
this.queryDate = ''
break
}
if(this.queryParam.beginTime && this.queryParam.endTime) {
this.queryDate = [this.queryParam.beginTime, this.queryParam.endTime]
}
},
handleSelectionChange(val){
console.log('获取val',val)
this.uniqueSelection = []
val.forEach((row)=>{
this.uniqueSelection.push(row.id)
})
console.log('uniqueSelection',this.uniqueSelection)
},
}
}
</script>
<style scoped lang="scss">
.el-badge{
top: 3px;
}
.case-table{
.table-row{
color: #86909C;
p{padding: 0;margin: 0;}
.case-bg{
background-color: #eceef1d1;
padding: 10px 20px;
margin: 5px 0 10px 0;
}
.table-span-one span{width: 180px;}
.case-btn{
color: #C66A5B;
border-color: #C66A5B;
margin: 0 5px;
}
}
}
</style>
<style lang="scss">
.case-table{
.el-table tr {
background-color: #f7f8fa63 !important;
}
.el-checkbox{line-height: 10px;margin-top: -3px;}
.el-checkbox .el-checkbox__label{width: 0px;overflow: hidden;}
}
</style>