363 lines
8.1 KiB
Vue
363 lines
8.1 KiB
Vue
<template>
|
||
<view class="mixWork">
|
||
<head-view :title="title" special="1" url="/pages/shipWork/documentList"></head-view>
|
||
<view class="container">
|
||
<view class="signBox">
|
||
<p class="sign" @click="sign">点击签名</p>
|
||
</view>
|
||
<view class="tabsList">
|
||
<view class="tabsBox" v-for="(item,index) in tabsList" :key="index" :class="{active:tabsIndex == index}"
|
||
@click="tabsClick(item,index)">{{item}}</view>
|
||
</view>
|
||
<!-- 人员信息列表 -->
|
||
<view class="ul" v-if="tabsType == 0">
|
||
<template v-if="peopleInfo.length > 0">
|
||
<view class="li" v-for="(item,index) in peopleInfo" :key="index" @click="add('look',item,index)">
|
||
<view class="title">
|
||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||
<text>航次：{{item.vvyName}}</text>
|
||
</view>
|
||
<view class="liInfo">
|
||
<p>贸易类型：<text>{{item.tradeTypeName}}</text></p>
|
||
<p>进出口：<text>{{item.importExportFlagName}}</text></p>
|
||
<p>作业组数：<text>{{item.workSuite}}</text></p>
|
||
<p>单船人数：<text>{{item.shipPerson}}</text></p>
|
||
</view>
|
||
<view class="status didNot">
|
||
<p>未上传</p>
|
||
</view>
|
||
<!-- <view class="status success">
|
||
<p>已上传</p>
|
||
</view>
|
||
<view class="status fail">
|
||
<p>上传失败</p>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<o-empty height="70vh" bg="#f5f6fa" width="100vw" />
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 工班信息列表 -->
|
||
<view class="ul shiftUl" v-if="tabsType == 1">
|
||
<template v-if="shiftInfo.length > 0">
|
||
<view class="li" v-for="(item,index) in shiftInfo" :key="index" @click="lookShift(item,index)">
|
||
<view class="title">
|
||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||
<text>航次：{{item[0].vvyName}}</text>
|
||
</view>
|
||
<view class="shift" v-for="(item2,index2) in item" :key="index2">
|
||
<text>{{item2.pwcTypeName}}</text>
|
||
<text class="text">作业开始时间：</text><text
|
||
class="time">{{item2.workStartTime.substring(0,item2.workStartTime.length - 3)}}</text>
|
||
<text class="text">作业结束时间：</text><text
|
||
class="time">{{item2.workEndTime.substring(0,item2.workEndTime.length - 3)}}</text>
|
||
</view>
|
||
<view class="status didNot">
|
||
<p>未上传</p>
|
||
</view>
|
||
<!-- <view class="status success">
|
||
<p>已上传</p>
|
||
</view>
|
||
<view class="status fail">
|
||
<p>上传失败</p>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||
</view>
|
||
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import sqlite from "../../common/sqlite.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: "船只 - 杂项作业单",
|
||
shipInfo: {},
|
||
tabsList: ["人员信息", "工班信息"],
|
||
tabsType: 0, // 0是人员信息 1是工班信息
|
||
tabsIndex: 0,
|
||
// 人员信息列表
|
||
peopleInfo: [],
|
||
// 工班信息列表
|
||
shiftInfo: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.tabsType = uni.getStorageSync('tabsType')
|
||
this.executeSql1('shipInfoTable')
|
||
if (this.tabsType != 0 && this.tabsType != 1) {
|
||
this.tabsType = 0
|
||
this.tabsIndex = 0
|
||
} else {
|
||
this.tabsIndex = this.tabsType
|
||
}
|
||
if (this.tabsType == 0) {
|
||
this.executeSql1('messageRespList')
|
||
} else {
|
||
this.executeSql1('workMessageRespList')
|
||
this.executeSql1('workMessageRespInfoList')
|
||
this.executeSql1('retallyMessageRespList')
|
||
this.executeSql1('infoRespList')
|
||
}
|
||
},
|
||
methods: {
|
||
// 查
|
||
executeSql1(tableName) {
|
||
let sql = `select * from ${tableName}`
|
||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||
if (tableName == 'shipInfoTable') {
|
||
this.shipInfo = value[0]
|
||
this.title = `${this.shipInfo.vslCnname} - 杂项作业单`
|
||
}
|
||
if (this.tabsType == 0) {
|
||
this.peopleInfo = value
|
||
} else {
|
||
// console.log(value)
|
||
if (tableName == 'workMessageRespList' && value.length > 0) {
|
||
this.shiftInfo = Object.values(value.reduce((res, item) => {
|
||
res[item.aId] ? res[item.aId].push(item) : res[item
|
||
.aId] = [item];
|
||
return res;
|
||
}, {}));
|
||
}
|
||
}
|
||
}).catch((error) => {
|
||
// 在reject时执行的回调函数
|
||
console.error(error);
|
||
});
|
||
},
|
||
// 点击签名
|
||
sign() {
|
||
uni.navigateTo({
|
||
url: `/pages/shipWork/mixSign`
|
||
})
|
||
},
|
||
tabsClick(item, index) {
|
||
this.tabsIndex = index;
|
||
if (item == "人员信息") {
|
||
this.tabsType = 0;
|
||
this.executeSql1('messageRespList')
|
||
} else {
|
||
this.tabsType = 1;
|
||
this.executeSql1('workMessageRespList')
|
||
this.executeSql1('workMessageRespInfoList')
|
||
this.executeSql1('retallyMessageRespList')
|
||
this.executeSql1('infoRespList')
|
||
}
|
||
},
|
||
// 点击新增
|
||
add(state, item, index) {
|
||
if (state != 'add') {
|
||
uni.setStorageSync('peopleRow', item);
|
||
uni.setStorageSync('peopleRowIndex', index);
|
||
}
|
||
let obj = {
|
||
state: state
|
||
}
|
||
const params = encodeURIComponent(JSON.stringify(obj));
|
||
if (this.tabsType == 0) {
|
||
uni.navigateTo({
|
||
url: `/pages/shipWork/peopleAdd?params=${params}`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/shipWork/shiftAdd?params=${params}`
|
||
})
|
||
}
|
||
},
|
||
lookShift(item, index) {
|
||
uni.setStorageSync('shiftRow', item);
|
||
uni.navigateTo({
|
||
url: `/pages/shipWork/shiftDetails`
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.mixWork {
|
||
.headInfo {
|
||
/deep/.uniui-bottom {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
padding: 30px 10px;
|
||
min-height: calc(100vh - 68px);
|
||
|
||
.signBox {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.sign {
|
||
text-align: right;
|
||
color: #2979ff;
|
||
padding: 10px;
|
||
background: #fff;
|
||
border: 1px solid #ccc;
|
||
}
|
||
}
|
||
|
||
.tabsList {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.tabsBox {
|
||
width: 100px;
|
||
height: 50px;
|
||
border-radius: 4px;
|
||
margin: 0px 10px;
|
||
border: 1px solid #ccc;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
}
|
||
|
||
.active {
|
||
background: #2979ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.ul {
|
||
padding: 20px 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.li {
|
||
width: 33%;
|
||
padding: 16px;
|
||
border: 1px solid #ccc;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
position: relative;
|
||
margin-bottom: 10px;
|
||
|
||
.title {
|
||
display: flex;
|
||
|
||
text {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
image {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
}
|
||
|
||
.liInfo {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-top: 16px;
|
||
|
||
p {
|
||
width: 49%;
|
||
margin-bottom: 12px;
|
||
|
||
text {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.status {
|
||
padding: 5px;
|
||
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
}
|
||
|
||
.didNot {
|
||
background-color: #FFF7EE;
|
||
color: #FC8300;
|
||
}
|
||
|
||
.success {
|
||
background: #F1F8FF;
|
||
color: #0067CF;
|
||
}
|
||
|
||
.fail {
|
||
background: #FFF0F0;
|
||
color: #E50101;
|
||
}
|
||
|
||
.shift {
|
||
display: flex;
|
||
padding: 16px 4px;
|
||
background-color: #f7f7f7;
|
||
margin: 5px 0;
|
||
|
||
text:first-child {
|
||
color: #0067CF;
|
||
margin: 0 12px;
|
||
}
|
||
|
||
.text {
|
||
color: #999;
|
||
}
|
||
|
||
.time {
|
||
color: #23262E;
|
||
margin-top: 3px;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
}
|
||
|
||
.state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.li:nth-of-type(3n - 1) {
|
||
margin: 0 0.5% 10px;
|
||
}
|
||
|
||
/deep/.o-empty {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.shiftUl {
|
||
.li {
|
||
width: 49%;
|
||
margin-right: 0.5%;
|
||
}
|
||
}
|
||
|
||
.addBtn {
|
||
position: fixed;
|
||
right: 50px;
|
||
bottom: 50px;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
background-color: #2979ff;
|
||
color: #fff;
|
||
font-size: 24px;
|
||
text-align: center;
|
||
line-height: 100px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
</style> |