1071 lines
26 KiB
Vue
1071 lines
26 KiB
Vue
<template>
|
||
<view class="addIssue">
|
||
<view class="fixedheader">
|
||
<headers :showBack="true" :themeType="true">
|
||
<view class="headerName">
|
||
工作票列表
|
||
</view>
|
||
</headers>
|
||
</view>
|
||
<view class="search-box" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
|
||
<view class="uni-form-item">
|
||
<u-search class="uni-input" placeholder="搜索工作票编号名称" :show-action="false" @change="loadData"
|
||
v-model="policeCameraInfo.numberOrContent"></u-search>
|
||
</view>
|
||
<u-dropdown :duration="0" ref="uDropdown" @open="open" @close="close" :style="dropDownShow ? '' :'overflow:hidden'" :overlay="true"
|
||
active-color="#3190F3">
|
||
<u-dropdown-item
|
||
:title="policeCameraInfo.typeId == '' ? '类别' : recursionDataListUp(workTicketTypeList, policeCameraInfo.typeId,'typeName')"
|
||
v-model="policeCameraInfo.typeId" :options="workTicketTypeListAll">
|
||
<view class="slot-content">
|
||
<scroll-view scroll-y="true" class="scroll-view">
|
||
<TreeView :multiple="false" :data="workTicketTypeListAll" :children-key="'children'"
|
||
:label-key="'typeName'" :id-key="'id'" v-model="typeIds" @node-click="onNodeClick(1)" />
|
||
</scroll-view>
|
||
</view>
|
||
</u-dropdown-item>
|
||
<u-dropdown-item
|
||
:title="policeCameraInfo.constructionAreas == '' ? '施工场站' : recursionDataListUp(qualityRegionList, policeCameraInfo.constructionAreas, 'regionName')"
|
||
v-model="policeCameraInfo.constructionAreas" :options="qualityRegionList">
|
||
<view class="slot-content">
|
||
<scroll-view scroll-y="true" class="scroll-view">
|
||
<TreeView :multiple="false" :data="qualityRegionList" :children-key="'children'"
|
||
:label-key="'regionName'" :id-key="'id'" v-model="checkedIds"
|
||
@node-click="onNodeClick(2)" />
|
||
</scroll-view>
|
||
</view>
|
||
</u-dropdown-item>
|
||
<u-dropdown-item @change="onMenuChage" v-model="policeCameraInfo.status" :options="inserviceTypeList"
|
||
:title="policeCameraInfo.status == '' ? '状态' : dataListUp(inserviceTypeList, policeCameraInfo.status)">
|
||
<view class="slot-content">
|
||
<scroll-view scroll-y="true" class="scroll-view">
|
||
<TreeView :multiple="false" :data="inserviceTypeList" :children-key="'children'"
|
||
:label-key="'label'" :id-key="'value'" v-model="statusIds"
|
||
@node-click="onNodeClick(3)" />
|
||
</scroll-view>
|
||
</view>
|
||
</u-dropdown-item>
|
||
</u-dropdown>
|
||
<view @click="constructionTimeShow = true" class="calendar_box">
|
||
<view :class="{'calendar_active': constructionTimeShow}" class="calendar"></view>
|
||
<!-- <u-icon name="calendar" color="#3190F3" size="32"></u-icon> -->
|
||
</view>
|
||
</view>
|
||
<view class="content" :style="{paddingTop: mobileTopHeight + 130 + 'px'}">
|
||
<view class="content_main" v-if="workTicketList.length > 0">
|
||
<view class="main3_box" @click.prevent="onNavigateToDetail(item)" :class="{'pb_140': item.status != 4}"
|
||
v-for="item in workTicketList" :key="item.id">
|
||
<view class="box-header">
|
||
<view @click.stop>
|
||
<u-checkbox-group>
|
||
<u-checkbox shape="circle" v-model="item.checked" :name="item.id"></u-checkbox>
|
||
</u-checkbox-group>
|
||
<view>
|
||
{{item.workTicketNumber}}
|
||
</view>
|
||
</view>
|
||
<view
|
||
:class="{'wks_active': item.status == 1, 'sgz_active': item.status == 2,'ztz_active': item.status == 3,'ywg_acitve': item.status == 4}">
|
||
{{statusUp(item.status)}}
|
||
</view>
|
||
</view>
|
||
<view class="box-item">
|
||
<view>类别</view>
|
||
<view>{{item.typeName}}</view>
|
||
</view>
|
||
<view class="box-content">
|
||
<view>作业内容</view>
|
||
<view @click.stop="item.expandMoreShow = !item.expandMoreShow">
|
||
{{item.expandMoreShow ? '收起': '展开更多'}}
|
||
</view>
|
||
</view>
|
||
<view :class="{'webkit-clamp_2': !item.expandMoreShow}" class="box-content_detail">
|
||
{{item.workContent}}
|
||
</view>
|
||
<view class="box-item">
|
||
<view>施工场站</view>
|
||
<view>{{item.constructionAreaNames}}</view>
|
||
</view>
|
||
<view class="box-item">
|
||
<view>施工人员</view>
|
||
<view>{{item.operator}}</view>
|
||
</view>
|
||
<view class="box-item">
|
||
<view>施工计划时间</view>
|
||
<view>{{item.constructionTimeBegin}}至{{item.constructionTimeEnd}}</view>
|
||
</view>
|
||
<view class="box-bottom" v-if="item.status == 1">
|
||
<view @click.stop="onChangeState(1, item)" class="btn-start">开始作业</view>
|
||
</view>
|
||
<view class="box-bottom" v-else-if="item.status != 4">
|
||
<view v-if="item.status == 2" @click.stop="onStateShow(2, item)">暂停作业</view>
|
||
<view v-if="item.status == 3" @click.stop="onChangeState(3, item)">继续作业</view>
|
||
<view @click.stop="onStateShow(4, item)" class="btn-error">结束作业</view>
|
||
</view>
|
||
<view class="box-bottom" v-else>
|
||
<view @click.stop="onStateShow(3, item)">重新开始</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="new-nodata" v-else>
|
||
<view></view>
|
||
<text>暂无数据...</text>
|
||
</view>
|
||
<view class="confrim-bottom">
|
||
<view class="">
|
||
<u-checkbox-group @change="checkedAll">
|
||
<u-checkbox shape="circle" v-model="checked">全选</u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<view class="confrim-btn">
|
||
<view @click="onDelete">删除</view>
|
||
<view @click="issueInvoiceShow = true">新增</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast" />
|
||
<u-calendar v-model="constructionTimeShow" mode="range" :max-date="'2300-01-01'"
|
||
@change="onConstructionTimeChange"></u-calendar>
|
||
<u-modal @cancel="onCancel" @confirm="onConfirm" v-model="submitShow" confirm-text="绑定完成"
|
||
:show-cancel-button="true" cancel-text="继续添加" content="设备已绑定作业票，请选择继续添加设备或者绑定完成进行下一步操作"></u-modal>
|
||
<u-popup v-model="issueInvoiceShow" :closeable="false" mode="bottom">
|
||
<view class="content-popup">
|
||
<view class="content-popup_header">
|
||
工作票类型
|
||
</view>
|
||
<scroll-view scroll-y="true" style="height: 800rpx;">
|
||
<TreeView :multiple="false" checked-bg-color="rgba(81,129,246,0.1)" :data="workTicketTypeList"
|
||
:children-key="'children'" :label-key="'typeName'" :id-key="'id'" v-model="checkedIdList" />
|
||
</scroll-view>
|
||
<view class="confrim-btn">
|
||
<view @click="issueInvoiceShow = false;">取消</view>
|
||
<view @click="onSubmit">确定</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-modal @cancel="onStateCancel" @confirm="onStateConfirm" v-model="stateShow"
|
||
:confirm-text="stateType == 2 ? '是,立即暂停' : stateType == 3 ? '是,重新开始' : '是，立即结束'" :show-cancel-button="true" :cancel-text="stateType == 3 ? '取消' : '不,继续作业'">
|
||
<view class="slot-content">
|
||
<view class="content_main-box1" v-if="stateType == 2">
|
||
<view>
|
||
暂未全部施工完成，将进入暂停施工状态，待下次点击继续作业...
|
||
</view>
|
||
<view>
|
||
<u-icon name="info-circle"></u-icon>
|
||
<view>点击暂停作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_main-box1" v-if="stateType == 3">
|
||
<view>
|
||
作业已完成，点击重新开始作业
|
||
</view>
|
||
<view>
|
||
<!-- <u-icon name="info-circle"></u-icon>
|
||
<view>点击结束作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="content_main-box1" v-else-if="stateType == 4">
|
||
<view>
|
||
作业已全部施工完成，点击结束作业
|
||
</view>
|
||
<view>
|
||
<u-icon name="info-circle"></u-icon>
|
||
<view>点击结束作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TreeView from '@/components/tree-view/TreeView.vue';
|
||
export default {
|
||
components: {
|
||
TreeView
|
||
},
|
||
data() {
|
||
return {
|
||
mobileTopHeight: 0,
|
||
projectDetail: {},
|
||
checked: false,
|
||
searchName: "",
|
||
inserviceTypeList: [{
|
||
label: '全部',
|
||
value: ''
|
||
},
|
||
{
|
||
label: '未开始',
|
||
value: '1'
|
||
},
|
||
{
|
||
label: '施工中',
|
||
value: '2'
|
||
},
|
||
{
|
||
label: '暂停中',
|
||
value: '3'
|
||
},
|
||
{
|
||
label: '已完工',
|
||
value: '4'
|
||
}
|
||
],
|
||
dropDownShow: false,
|
||
submitShow: false,
|
||
workTicketList: [],
|
||
policeCameraInfo: {
|
||
typeId: "",
|
||
constructionAreas: "",
|
||
status: "",
|
||
numberOrContent: "",
|
||
},
|
||
typeIds: [''],
|
||
checkedIds: [''],
|
||
statusIds: [''],
|
||
selectList: [],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
workTicketTypeList: [],
|
||
workTicketTypeListAll: [],
|
||
qualityRegionList: [],
|
||
issueInvoiceShow: false,
|
||
checkedIdList: [],
|
||
constructionTimeShow: false,
|
||
stateShow: false,
|
||
stateType: "",
|
||
stateInfo: {},
|
||
}
|
||
},
|
||
onLoad(opts) {
|
||
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
|
||
this.getWorkTicketTypeListFn();
|
||
this.getQualityRegionListFn();
|
||
},
|
||
mounted() {
|
||
var that = this
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
||
uni.setStorageSync('systemInfo', res)
|
||
console.log(res)
|
||
}
|
||
})
|
||
},
|
||
onShow() {
|
||
this.loadData();
|
||
},
|
||
onReachBottom() {
|
||
console.log(1)
|
||
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
||
this.isLoadMore = true
|
||
this.pageNo += 1
|
||
this.getPoliceCameraItemListFn()
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
console.log(2)
|
||
this.pageNo = 1
|
||
this.workTicketList = []
|
||
this.getPoliceCameraItemListFn()
|
||
},
|
||
methods: {
|
||
onStateShow(type, row) {
|
||
this.stateType = type;
|
||
this.stateInfo = row,
|
||
this.stateShow = true;
|
||
},
|
||
onStateCancel() {
|
||
this.stateShow = false;
|
||
},
|
||
onStateConfirm() {
|
||
this.onChangeState(this.stateType, this.stateInfo);
|
||
this.stateShow = false;
|
||
},
|
||
// 获取时间
|
||
onConstructionTimeChange(event) {
|
||
console.log(113344, event)
|
||
this.policeCameraInfo.constructionTimeBegin_end = event.startDate;
|
||
this.policeCameraInfo.constructionTimeEnd_start = event.endDate;
|
||
this.loadData();
|
||
},
|
||
// 打开详情
|
||
onNavigateToDetail(row) {
|
||
uni.navigateTo({
|
||
url: `./workTicketDetail?id=${row.id}`
|
||
})
|
||
},
|
||
onNodeClick(type) {
|
||
// node: 当前点击的节点
|
||
// path: 从根到当前节点的所有父级（含自己）
|
||
console.log(type, this.typeIds, this.checkedIds);
|
||
if (type == 1) {
|
||
this.onMenuClick({
|
||
value: this.typeIds.join(',')
|
||
}, 1)
|
||
} else if (type == 2) {
|
||
this.onMenuClick({
|
||
value: this.checkedIds.join(',')
|
||
}, 2)
|
||
} else if (type == 3) {
|
||
this.onMenuClick({
|
||
value: this.statusIds.join(',')
|
||
}, 3)
|
||
}
|
||
this.$refs.uDropdown.close();
|
||
},
|
||
// 全选
|
||
checkedAll(e) {
|
||
this.workTicketList.forEach(item => {
|
||
item.checked = this.checked;
|
||
})
|
||
},
|
||
onChangeState(operateStatus, item) {
|
||
let that = this;
|
||
let data = {
|
||
projectSn: this.projectDetail.projectSn,
|
||
id: item.id,
|
||
operateStatus,
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/workTicket/operateWorkTicket',
|
||
method: 'POST',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
that.showToast('修改成功', 'success');
|
||
that.loadData();
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onSubmit() {
|
||
console.log(333, this.checkedIdList);
|
||
if (this.checkedIdList.length == 0) return this.showToast('请先选择作业票类型', 'warning');
|
||
this.issueInvoiceShow = false;
|
||
uni.navigateTo({
|
||
url: `./addWorkTicket?id=${this.checkedIdList[0]}`
|
||
})
|
||
},
|
||
onDelete() {
|
||
let that = this;
|
||
const resultList = this.workTicketList.filter(item => item.checked);
|
||
if (resultList.length == 0) {
|
||
this.showToast('请先选择需要删除的作业票', 'warning');
|
||
return
|
||
}
|
||
let data = {
|
||
projectSn: this.projectDetail.projectSn,
|
||
ids: resultList.map(item => item.id).join(',')
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/workTicket/deleteBatch',
|
||
method: 'POST',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
that.showToast('删除成功！', 'success');
|
||
that.loadData();
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onCancel() {
|
||
this.getPoliceCameraItemListFn();
|
||
this.submitShow = false;
|
||
},
|
||
onConfirm() {
|
||
uni.$emit('updateData', JSON.stringify(this.selectList))
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
open() {
|
||
this.dropDownShow = true
|
||
},
|
||
close() {
|
||
this.dropDownShow = false
|
||
},
|
||
onMenuChage(event) {
|
||
this.loadData();
|
||
},
|
||
onMenuClick(row, type) {
|
||
if (type == 1) {
|
||
this.policeCameraInfo.typeId = row.value;
|
||
} else if (type == 2) {
|
||
this.policeCameraInfo.constructionAreas = row.value;
|
||
} else if (type == 3) {
|
||
this.policeCameraInfo.status = row.value;
|
||
}
|
||
this.loadData();
|
||
},
|
||
loadData() {
|
||
this.pageNo = 1
|
||
this.workTicketList = []
|
||
this.getPoliceCameraItemListFn();
|
||
},
|
||
// 获取施工场站
|
||
getQualityRegionListFn() {
|
||
let that = this;
|
||
let data = {
|
||
projectSn: this.projectDetail.projectSn,
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/qualityRegion/list',
|
||
method: 'POST',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
that.qualityRegionList = [{
|
||
id: "",
|
||
value: "",
|
||
label: "全部",
|
||
regionName: "全部"
|
||
}, ...res.result];
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取工作票列表
|
||
getPoliceCameraItemListFn() {
|
||
let data = {
|
||
...this.policeCameraInfo,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
projectSn: this.projectDetail.projectSn,
|
||
}
|
||
|
||
this.sendRequest({
|
||
url: 'xmgl/workTicket/page',
|
||
method: 'GET',
|
||
data: data,
|
||
success: res => {
|
||
uni.hideLoading()
|
||
if (res.code == 200) {
|
||
console.log("workList======================", res)
|
||
const resultList = res.result.records.map(item => {
|
||
return {
|
||
...item,
|
||
checked: false,
|
||
expandMoreShow: false,
|
||
}
|
||
})
|
||
this.workTicketList = this.workTicketList.concat(resultList)
|
||
if (res.result.records.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
this.isLoadMore = true
|
||
this.loadStatus = 'nomore'
|
||
} else {
|
||
this.isLoadMore = false
|
||
// that.loadStatus='more'
|
||
}
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取工作票类型
|
||
getWorkTicketTypeListFn() {
|
||
let that = this;
|
||
let data = {
|
||
projectSn: this.projectDetail.projectSn,
|
||
pageNo: 1,
|
||
pageSize: -1,
|
||
};
|
||
this.sendRequest({
|
||
url: 'xmgl/workTicketType/tree/page',
|
||
method: 'GET',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 200) {
|
||
that.workTicketTypeList = [...res.result.records];
|
||
that.workTicketTypeListAll = [{
|
||
id: "",
|
||
value: "",
|
||
label: "全部",
|
||
typeName: "全部"
|
||
}, ...res.result.records];
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 查找数据
|
||
findNodeById(dataList, id) {
|
||
for (const node of dataList) {
|
||
if (node.id === id) return node;
|
||
if (node.children && node.children.length) {
|
||
const found = this.findNodeById(node.children, id);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
return null;
|
||
},
|
||
showToast(title, type) {
|
||
this.$refs.uToast.show({
|
||
title: title,
|
||
type: type,
|
||
})
|
||
},
|
||
},
|
||
computed: {
|
||
recursionDataListUp() {
|
||
return (dataList, id, typeName) => {
|
||
const find = this.findNodeById(dataList, id)
|
||
return find ? find[typeName] : '--'
|
||
}
|
||
},
|
||
dataListUp() {
|
||
return (dataList, id) => {
|
||
const find = dataList.find(item => item.value == id);
|
||
return find ? find.label : '--'
|
||
}
|
||
},
|
||
statusUp() {
|
||
return (id) => {
|
||
const dataList = [{
|
||
value: 1,
|
||
label: "未开始"
|
||
}, {
|
||
value: 2,
|
||
label: "施工中"
|
||
}, {
|
||
value: 3,
|
||
label: "暂停中"
|
||
}, {
|
||
value: 4,
|
||
label: "已完工"
|
||
}]
|
||
const find = dataList.find(item => item.value == id);
|
||
return find ? find.label : '--'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/deep/ .u-mode-center-box {
|
||
width: 698rpx !important;
|
||
|
||
.u-model__title {
|
||
padding: 0;
|
||
font-size: 32rpx;
|
||
color: #272D45;
|
||
height: 86rpx;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.u-model__content__message {
|
||
padding: 26rpx 26rpx 72rpx;
|
||
font-size: 28rpx;
|
||
color: #171717;
|
||
}
|
||
|
||
.u-model__footer__button {
|
||
height: 76rpx;
|
||
line-height: 76rpx;
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #5181F6;
|
||
}
|
||
|
||
.hairline-left {
|
||
background-color: #5181F6;
|
||
color: white !important;
|
||
}
|
||
|
||
.content_main-box1 {
|
||
padding: 26rpx 28rpx;
|
||
|
||
>view:first-child {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #171717;
|
||
}
|
||
|
||
>view:last-child {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
font-size: 24rpx;
|
||
color: #FFA026;
|
||
margin-top: 26rpx;
|
||
|
||
.u-icon {
|
||
font-size: 35rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-popup {
|
||
.content-popup_header {
|
||
height: 86rpx;
|
||
box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 30rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
uni-scroll-view {
|
||
margin: 26rpx 0;
|
||
}
|
||
|
||
.confrim-btn {
|
||
padding: 18rpx 26rpx;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
|
||
>view {
|
||
width: 50%;
|
||
height: 76rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
>view:first-child {
|
||
background-color: rgba(81, 129, 246, 0.1);
|
||
border-radius: 6rpx 0rpx 0rpx 6rpx;
|
||
color: #5181F6;
|
||
}
|
||
|
||
>view:last-child {
|
||
background-color: #5181F6;
|
||
border-radius: 0rpx 6rpx 6rpx 0rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addIssue {
|
||
min-height: 100vh;
|
||
background-color: #F2F3F7;
|
||
}
|
||
|
||
.content {
|
||
.content_main {
|
||
margin-top: 26rpx;
|
||
// background-color: white;
|
||
padding-bottom: 138rpx;
|
||
min-height: calc(100vh - 130rpx - 138rpx - 26rpx);
|
||
|
||
>.main3_box:not(:first-child) {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.pb_140 {
|
||
padding-bottom: 140rpx !important;
|
||
}
|
||
|
||
.main3_box {
|
||
padding: 30rpx 28rpx;
|
||
background-color: white;
|
||
border-radius: 18rpx;
|
||
position: relative;
|
||
|
||
.box-bottom {
|
||
width: 100%;
|
||
padding: 0 26rpx;
|
||
height: 112rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
border-radius: 0 0 18rpx 18rpx;
|
||
justify-content: flex-end;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
|
||
>view {
|
||
padding: 10rpx 18rpx;
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #3E89FD;
|
||
font-size: 28rpx;
|
||
color: #3E89FD;
|
||
}
|
||
|
||
>view:not(:first-child) {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.btn-error {
|
||
border-color: #ED2B29;
|
||
color: #ED2B29;
|
||
}
|
||
|
||
.btn-start {
|
||
background-color: #3E89FD;
|
||
border-color: #3E89FD;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.box-content_detail {
|
||
font-size: 28rpx;
|
||
color: #4D4D4D;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.webkit-clamp_2 {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
/* 限制为两行 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.box-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 26rpx;
|
||
font-size: 28rpx;
|
||
|
||
>view:first-child {
|
||
color: #808080;
|
||
}
|
||
|
||
>view:last-child {
|
||
font-size: 24rpx;
|
||
color: #4D8EEC;
|
||
}
|
||
}
|
||
|
||
.box-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 26rpx;
|
||
font-size: 28rpx;
|
||
|
||
>view:first-child {
|
||
width: 168rpx;
|
||
margin-right: 26rpx;
|
||
color: #808080;
|
||
}
|
||
|
||
>view:last-child {
|
||
flex: 1;
|
||
color: #4D4D4D;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
/* 限制为两行 */
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.box-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
>view:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
>view:last-child {
|
||
font-weight: 800;
|
||
font-size: 30rpx;
|
||
color: #171717;
|
||
}
|
||
}
|
||
|
||
>view:last-child {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 4rpx;
|
||
border: 2rpx solid #F1F1F1;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.wks_active {
|
||
background-color: #898989;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.sgz_active {
|
||
background-color: #BED0FA;
|
||
color: #5181F6;
|
||
}
|
||
|
||
.ztz_active {
|
||
background-color: #C38100;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.ywg_acitve {
|
||
background-color: #88CF65;
|
||
color: #1A1A1A;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.confrim-bottom {
|
||
width: 100%;
|
||
padding: 26rpx 26rpx;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: fixed;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
|
||
>view:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.confrim-btn {
|
||
display: flex;
|
||
|
||
>view {
|
||
padding: 10rpx 20rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
>view:first-child {
|
||
border: 2rpx solid #ED2B29;
|
||
border-radius: 6rpx;
|
||
color: #ED2B29;
|
||
}
|
||
|
||
>view:last-child {
|
||
margin-left: 12rpx;
|
||
background-color: #5181F6;
|
||
border-radius: 6rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 999;
|
||
|
||
/deep/ .headerBox {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.headerName {
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.search-box {
|
||
background-color: white;
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 99;
|
||
|
||
.uni-form-item {
|
||
padding: 26rpx 26rpx 0;
|
||
position: relative;
|
||
|
||
.uni-input {
|
||
border: 2rpx solid #E4E4E4;
|
||
border-radius: 68rpx;
|
||
padding: 0;
|
||
font-size: 30rpx;
|
||
color: #444444;
|
||
|
||
/deep/ .u-content {
|
||
background-color: #FFFFFF !important;
|
||
|
||
.u-input {
|
||
background-color: #FFFFFF !important;
|
||
color: #999999 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-btn {
|
||
width: 130rpx;
|
||
height: calc(100% - 26rpx - 26rpx);
|
||
background: #2F8FF3;
|
||
border-radius: 68rpx;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
right: 26rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
/deep/ .u-dropdown {
|
||
padding-right: 60rpx;
|
||
}
|
||
|
||
.calendar_box {
|
||
position: absolute;
|
||
right: 28rpx;
|
||
bottom: 20rpx;
|
||
.calendar {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background-image: url('@/static/workTicketManage/calendar.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.calendar_active {
|
||
background-image: url('@/static/workTicketManage/calendar-active.png');
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll-view {
|
||
margin: 10rpx 26rpx;
|
||
width: calc(100% - 26rpx - 26rpx);
|
||
max-height: 60vh;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
/deep/ .u-dropdown__menu__item__text {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
/* 限制为两行 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cell-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 13px 16px;
|
||
font-size: 14px;
|
||
line-height: 27px;
|
||
color: #606266;
|
||
background-color: #fff;
|
||
text-align: left;
|
||
|
||
>view {
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
/* 限制为两行 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.box-active {
|
||
color: rgb(49, 144, 243);
|
||
}
|
||
|
||
>image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
/deep/ .u-mask {
|
||
z-index: 10 !important;
|
||
}
|
||
|
||
/deep/ .u-dropdown__content {
|
||
// height: initial !important;
|
||
// top: 166rpx !important;
|
||
overflow: visible !important;
|
||
}
|
||
|
||
/deep/ .van-dropdown-item__content,
|
||
/deep/ .u-cell-item-box {
|
||
margin: 20rpx 26rpx;
|
||
width: calc(100% - 26rpx - 26rpx);
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
/deep/ .u-cell-item-box {
|
||
// max-height: 60vh;
|
||
// overflow-y: scroll;
|
||
}
|
||
|
||
/deep/ .uicon-arrow-down {
|
||
// position: absolute;
|
||
// top: 50%;
|
||
// right: -4px;
|
||
margin-top: -5px;
|
||
border: 3px solid;
|
||
border-color: transparent transparent #dcdee0 #dcdee0;
|
||
-webkit-transform: rotate(-45deg);
|
||
transform: rotate(-45deg);
|
||
opacity: .8;
|
||
content: '';
|
||
}
|
||
|
||
/deep/ .u-dropdown__menu__item__arrow--rotate .uicon-arrow-down {
|
||
border-color: transparent transparent rgb(49, 144, 243) rgb(49, 144, 243);
|
||
}
|
||
|
||
/deep/ .uicon-arrow-down::before {
|
||
display: none;
|
||
}
|
||
|
||
/deep/ .u-dropdown__menu {
|
||
flex-wrap: wrap;
|
||
// height: 166rpx !important;
|
||
box-shadow: none;
|
||
|
||
.u-dropdown__menu__item {
|
||
width: 33%;
|
||
// height: 82rpx;
|
||
flex: initial;
|
||
}
|
||
}
|
||
|
||
.new-nodata {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
>view {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
background-image: url('@/static/staffAttendance/nodata.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
>text {
|
||
font-size: 22rpx;
|
||
color: #808080;
|
||
margin-top: 60rpx;
|
||
}
|
||
}
|
||
</style> |