上海联调
Panzihang
parent
72907ea511
commit
7845a157c7
17
App.vue
17
App.vue
|
|
@ -1,14 +1,9 @@
|
|||
<script>
|
||||
export default {
|
||||
// onLaunch: function() {
|
||||
// console.log('App Launch')
|
||||
// },
|
||||
// onShow: function() {
|
||||
// console.log('App Show')
|
||||
// },
|
||||
// onHide: function() {
|
||||
// console.log('App Hide')
|
||||
// }
|
||||
onLaunch: function() {
|
||||
plus.screen.lockOrientation('landscape-primary'); //锁定横屏
|
||||
plus.navigator.setFullscreen(true); //隐藏状态栏(应用全屏:只能隐藏状态栏，标题栏和虚拟返回键都还可以显示)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -45,4 +40,8 @@
|
|||
/deep/.uni-numbox__plus {
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/deep/.lotus-loading-wrap {
|
||||
background-color: rgba(0, 0, 0, .7) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,4 +10,17 @@ module.exports = {
|
|||
var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
|
||||
return YY + MM + DD + " " + hh + mm + ss;
|
||||
},
|
||||
|
||||
// 分页切割数组(数组，分割个数)
|
||||
getMapping(list, num) {
|
||||
let len = list.length
|
||||
let newList = []
|
||||
if (len) {
|
||||
var chunk = num
|
||||
for (var i = 0, j = len; i < j; i += chunk) {
|
||||
newList.push(list.slice(i, i + chunk))
|
||||
}
|
||||
}
|
||||
return newList
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/**
|
||||
* 压缩图片到指定大小
|
||||
* @param baseImg base64图片
|
||||
* @param maxSize 单位kb
|
||||
*/
|
||||
export function compressImgBySize(baseImg, maxSize = 200) {
|
||||
return new Promise((resolve) => {
|
||||
// 计算图片大小
|
||||
const strLength = baseImg.length
|
||||
const fileLength = parseInt(strLength - (strLength / 8) * 2)
|
||||
let size = parseInt((fileLength / 1024).toFixed(2))
|
||||
|
||||
// 判断图片是否符合指定大小要求
|
||||
if (size <= maxSize) {
|
||||
resolve(baseImg)
|
||||
return
|
||||
}
|
||||
|
||||
// 创建image对象
|
||||
const img = new Image()
|
||||
if (baseImg.indexOf('data:image/') !== -1) {
|
||||
img.src = baseImg
|
||||
} else {
|
||||
img.src = 'data:image/jpeg;base64,' + baseImg
|
||||
}
|
||||
|
||||
img.onload = () => {
|
||||
// 把image对象 转换为 canvas对象
|
||||
const canvas = imgToCanvas(img)
|
||||
let resUrl = ''
|
||||
// 图片质量，范围：0 ~ 1
|
||||
let quality = 0.9
|
||||
|
||||
// 当图片大小大于指定maxSize，图片质量大于0时继续通过降低图片资料来压缩
|
||||
while (size > maxSize && quality > 0) {
|
||||
// 在canvas上绘制该HTMLImageElement，得到图片base64
|
||||
resUrl = canvas.toDataURL('image/jpeg', quality).replace(/^data:image\/\w+;base64,/, '')
|
||||
const resLength = resUrl.length
|
||||
// 计算绘制出的base64图片大小
|
||||
const resFileLength = parseInt(resLength - (resLength / 8) * 2)
|
||||
size = parseInt((resFileLength / 1024).toFixed(2))
|
||||
// 降低图片质量
|
||||
quality = (quality - 0.1).toFixed(1)
|
||||
}
|
||||
resolve(resUrl)
|
||||
}
|
||||
img.onerror = () => {
|
||||
resolve(baseImg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 把image 转换为 canvas对象
|
||||
export function imgToCanvas(image) {
|
||||
var canvas = document.createElement('canvas')
|
||||
canvas.width = image.width
|
||||
canvas.height = image.height
|
||||
canvas.getContext('2d').drawImage(image, 0, 0)
|
||||
return canvas
|
||||
}
|
||||
|
|
@ -36,45 +36,45 @@ module.exports = {
|
|||
this.createSafetyInspectionRespUrlList()
|
||||
// 创建作业查询
|
||||
this.createShipmentShipLoadPlansRespList()
|
||||
// 创建船舶资料
|
||||
this.createShipmentShipManage()
|
||||
// 创建下拉数据
|
||||
this.createShipOption()
|
||||
// 创建单证签名表
|
||||
this.createWorkSignTable()
|
||||
},
|
||||
// 创建船舶基本信息 shipInfoTable
|
||||
createShipInfoTable() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists shipInfoTable ("webId" text NOT NULL,"vslCd" text,"vslCnname" text,"vvyId" text,"vvyName" text,"importExportFlag" text,"importExportFlagName" text,"tradeType" text,"tradeTypeName" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
'CREATE TABLE if not exists shipInfoTable ("webId" text NOT NULL,"agencyCname" text,"ctyCnname" text,"ctyCode" text,"dataVersion" text,"shipCname" text,"shipTypeName" text,"spmBoardCentrele" text,"spmBoardCentrerg" text,"spmBoardFrontle" text,"spmBoardFrontrg" text,"spmBoardLaterle" text,"spmBoardLaterrg" text,"spmCab" text,"spmCabinht" text,"spmCountrycd" text,"spmEdicd" text,"spmId" text,"spmLightWeight" text,"spmMadeTime" text,"spmMintide" text,"spmMmsi" text,"spmNationality" text,"spmPilot" text,"spmPilotName" text,"spmRemark" text,"spmShipSign" text,"spmShipType" text,"spmTotalCargo" text,"spmTrade" text,"spmTradeName" text,"tenantId" text,"termcd" text,"valid" text,"vslAudio" text,"vslBaynum" text,"vslBkbaynum" text,"vslBkendbay" text,"vslBkstartbay" text,"vslBksternnum" text,"vslBreadth" text,"vslCallid" text,"vslCallsign" text,"vslCd" text,"vslCnname" text,"vslCstAgency" text,"vslCstShippingline" text,"vslCtyCountrycd" text,"vslDeckmaxrows" text,"vslDeckmaxtiers" text,"vslDepth" text,"vslDerrickamount" text,"vslDraftload" text,"vslDraftunload" text,"vslEndlength" text,"vslEnname" text,"vslGton" text,"vslHatchamount" text,"vslHatchcoveramount" text,"vslHatchmaxrows" text,"vslHatchmaxtiers" text,"vslImono" text,"vslLcg" text,"vslLoa" text,"vslLoaddisargereq" text,"vslMadedt" text,"vslNetton" text,"vslOrigin" text,"vslPilotage" text,"vslRfsocket" text,"vslSailspeed" text,"vslSpoptp" text,"vslStdId" text,"vslStopsign" text,"vslStowagereq" text,"vslSummaryloading" text,"vslTcg" text,"vslTotallocation" text,"vslUncode" text,"vslVcg" text,"vslVtpcode" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建人员信息 messageRespList
|
||||
createMessageRespList() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists messageRespList ("webId" text NOT NULL,"bthId" text,"bthIdName" text,"jobStartTime" text,"jobEndTime" text,"shipPerson" text,"vvyId" text,"vvyName" text,"weatherId" text,"weatherType" text,"workSuite" text,"tradeTypeName" text,"importExportFlagName" text,"spmName" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
'CREATE TABLE if not exists messageRespList ("webId" text NOT NULL,"bthId" text,"bthIdName" text,"jobStartTime" text,"jobEndTime" text,"shipPerson" text,"vvyId" text,"vvyName" text,"weatherType" text,"weatherTypeDesc" text,"workSuite" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建工班信息 workMessageRespList
|
||||
createWorkMessageRespList() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists workMessageRespList ("webId" text NOT NULL,"contactId" text,"aId" text,"vvyId" text,"vvyName" text,"loadType" text,"loadTypeName" text,"pwcType" text,"pwcTypeName" text,"workStartTime" text,"workEndTime" text,"tradeTypeName" text,"importExportFlagName" text,"spmName" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
'CREATE TABLE if not exists workMessageRespList ("webId" text NOT NULL,"contactId" text,"aId" text,"vvyId" text,"vvyName" text,"loadType" text,"loadTypeName" text,"pwcType" text,"pwcTypeName" text,"workStartTime" text,"workEndTime" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建工班信息详细 workMessageRespInfoList
|
||||
createWorkMessageRespInfoList() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists workMessageRespInfoList ("webId" text NOT NULL,"contactId" text,"carType" text,"carTypeName" text,"goodsNumber" text,"loadingType" text,"loadingTypeName" text,"remark" text,"tradeTypeName" text,"importExportFlagName" text,"spmName" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
'CREATE TABLE if not exists workMessageRespInfoList ("webId" text NOT NULL,"contactId" text,"carType" text,"carTypeName" text,"goodsNumber" text,"loadingType" text,"loadingTypeName" text,"remark" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建工班信息翻仓 retallyMessageRespList
|
||||
createRetallyMessageRespList() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists retallyMessageRespList ("webId" text NOT NULL,"contactId" text,"aId" text,"vvyId" text,"vvyName" text,"retallyType" text,"retallyTypeName" text,"retallyOrigin" text,"retallyTerminus" text,"retallyStartTime" text,"retallyEndTime" text,"carType" text,"carTypeName" text,"goodsNumber" text,"goodsVolume" text,"goodsWeight" text,"tradeTypeName" text,"importExportFlagName" text,"spmName" text,"editStatus" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
'CREATE TABLE if not exists retallyMessageRespList ("webId" text NOT NULL,"contactId" text,"aId" text,"vvyId" text,"vvyName" text,"retallyType" text,"retallyTypeName" text,"retallyOrigin" text,"retallyTerminus" text,"retallyStartTime" text,"retallyEndTime" text,"carType" text,"carTypeName" text,"goodsNumber" text,"goodsVolume" text,"goodsWeight" text,"editStatus" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建工班信息其他 infoRespList
|
||||
createInfoRespList() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists infoRespList ("webId" text NOT NULL,"contactId" text,"aId" text,"vvyId" text,"vvyName" text,"tecNum" text,"tecStartTm" text,"tecEndTm" text,"tecWeight" text,"tecVolume" text,"genNum" text,"genStartTm" text,"genEndTm" text,"genWeight" text,"genVolume" text,"auxRemark" text,"waitRemark" text,"workRemark" text,"tradeTypeName" text,"importExportFlagName" text,"spmName" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
'CREATE TABLE if not exists infoRespList ("webId" text NOT NULL,"contactId" text,"aId" text,"vvyId" text,"vvyName" text,"tecNum" text,"tecStartTm" text,"tecEndTm" text,"tecWeight" text,"tecVolume" text,"genNum" text,"genStartTm" text,"genEndTm" text,"genWeight" text,"genVolume" text,"auxRemark" text,"waitRemark" text,"workRemark" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建系解缆 attachUnmoorRespList
|
||||
|
|
@ -104,7 +104,7 @@ module.exports = {
|
|||
// 创建质量意见征询 shipmentQualityConsultationRespList
|
||||
createShipmentQualityConsultationRespList() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists shipmentQualityConsultationRespList ("webId" text NOT NULL,"vvyId" text,"vvyName" text,"bthId" text,"bthIdName" text,"loaderTypeId" text,"loaderType" text,"vehicleSize" text,"sparePart" text,"workTime" text,"tradeTypeName" text,"importExportFlagName" text,"spmName" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
'CREATE TABLE if not exists shipmentQualityConsultationRespList ("webId" text NOT NULL,"vvyId" text,"vvyName" text,"bthId" text,"bthIdName" text,"handlingTypeId" text,"handlingType" text,"vehiclesNumber" text,"spareNumber" text,"operationDate" text,"tradeTypeName" text,"importExportFlagName" text,"spmName" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建异常情况 abnormalConditionRespList
|
||||
|
|
@ -137,18 +137,18 @@ module.exports = {
|
|||
'CREATE TABLE if not exists shipmentShipLoadPlansRespList ("webId" text NOT NULL,"agentId" text,"agentName" text,"amount" text,"brdId" text,"brdName" text,"bvdId" text,"bvdName" text,"bvmId" text,"bvmName" text,"carHeight" text,"carLength" text,"carWidth" text,"customsDeclareNo" text,"customsDeclareStatus" text,"mnfBl" text,"potId" text,"potName" text,"sourceType" text,"vvyId" text,"vvyName" text,"yardPos" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建船舶资料 shipmentShipManage
|
||||
createShipmentShipManage() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists shipmentShipManage ("webId" text NOT NULL,"vslCd" text,"vslCnname" text,"vslGton" text,"vslNetton" text,"vslLoa" text,"vslBreadth" text,"vslDraftunload" text,"vslDraftload" text,"spmCabinht" text,"spmMintide" text,"spmCab" text,"spmBoardCentrele" text,"spmBoardFrontle" text,"spmBoardLaterle" text,"spmBoardCentrerg" text,"spmBoardFrontrg" text,"spmBoardLaterrg" text,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建下拉数据 shipOption
|
||||
createShipOption() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists shipOption ("dictionariesName" text,"ptrCode" text,"ptrDesc" text,"webId" text NOT NULL,"webStatus" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 创建单证签名表 workSignTable
|
||||
createWorkSignTable() {
|
||||
let sql =
|
||||
'CREATE TABLE if not exists workSignTable ("webId" text,"vvyId" text,"vvyName" text,"signId" text,"url" text,"signTable" text,"signType" text,"webDate" text, PRIMARY KEY("webId"));'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
executeSql(sql) {
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import * as CryptoJS from 'crypto-js/crypto-js';
|
||||
// 工具类
|
||||
const CryptoUtil = require('crypto-js')
|
||||
// 约定密钥(与后端密钥保持一致)
|
||||
const key = CryptoUtil.enc.Utf8.parse('C0Bb0RsnNZYf8XQtcgdfcpuHw2JBTV9A') // 密钥16位长度字符 内容可自定义
|
||||
const IV = CryptoUtil.enc.Utf8.parse('fc6cb288893f45be') // 密钥偏移量 16位长度字符
|
||||
|
||||
/**
|
||||
* AES对称加密 （CBC模式，需要偏移量）
|
||||
* @param {Object} params 明文参数
|
||||
*/
|
||||
export function encrypt(params) {
|
||||
// 明文参数
|
||||
const str = CryptoUtil.enc.Utf8.parse(params)
|
||||
// 加密
|
||||
const encryptedData = CryptoUtil.AES.encrypt(str, key, {
|
||||
iv: IV,
|
||||
mode: CryptoUtil.mode.CBC, // AES加密模式
|
||||
padding: CryptoUtil.pad.Pkcs7 // 填充方式
|
||||
})
|
||||
return CryptoUtil.enc.Base64.stringify(encryptedData.ciphertext) // 返回base64格式密文
|
||||
}
|
||||
|
||||
/**
|
||||
* AES对称解密
|
||||
* @param {Object} params 加密参数
|
||||
*/
|
||||
export function decrypt(params) {
|
||||
// base64格式密文转换
|
||||
const base64 = CryptoUtil.enc.Base64.parse(params)
|
||||
const str = CryptoUtil.enc.Base64.stringify(base64)
|
||||
// 解密
|
||||
const decryptedData = CryptoUtil.AES.decrypt(str, key, {
|
||||
iv: IV,
|
||||
mode: CryptoUtil.mode.CBC, // AES加密模式
|
||||
padding: CryptoUtil.pad.Pkcs7 // 填充方式
|
||||
})
|
||||
return CryptoUtil.enc.Utf8.stringify(decryptedData).toString() // 返回明文
|
||||
}
|
||||
|
|
@ -54,6 +54,7 @@ module.exports = {
|
|||
path: this.dbPath,
|
||||
success(e) {
|
||||
resolve(e); // 成功回调
|
||||
console.log("创建数据库成功")
|
||||
},
|
||||
fail(e) {
|
||||
reject(e); // 失败回调
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<!--
|
||||
* lotusLoadingData.isShow:设置显示加载中组件
|
||||
* -->
|
||||
<view v-if="lotusLoadingData.isShow" class="lotus-loading-wrap">
|
||||
<view class="lotus-loading-inner">
|
||||
<view class="lotus-loading-center">
|
||||
<text class="lotus-loading-img"></text>
|
||||
<view class="lotus-loading-text">加载中</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "./Winglau14-loutsLoading.css";
|
||||
</style>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'lotus-loading',
|
||||
props: ['lotusLoadingData'],
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
.lotus-loading-wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
/*display: -webkit-box;
|
||||
display: -webkit-flex;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.lotus-loading-text {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.lotus-loading-inner {
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/*display: -webkit-box;
|
||||
display: -webkit-flex;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.lotus-loading-img {
|
||||
display: block;
|
||||
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
|
||||
background-size: 100%;
|
||||
animation: lotusLoading 1s steps(12, end) infinite;
|
||||
width: 62rpx;
|
||||
height: 62rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
@-webkit-keyframes lotusLoading {
|
||||
0% {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 360deg);
|
||||
transform: rotate3d(0, 0, 1, 360deg);
|
||||
}
|
||||
}
|
||||
@keyframes lotusLoading {
|
||||
0% {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 360deg);
|
||||
transform: rotate3d(0, 0, 1, 360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
@import (reference) '../../static/style/config.less';
|
||||
@import (reference) '../../static/style/set1Px.less';
|
||||
|
||||
@lotusLoading: lotus-loading;
|
||||
.@{lotusLoading} {
|
||||
&-wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
.flex();
|
||||
.flex-hvc();
|
||||
}
|
||||
&-text{
|
||||
color:#fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
&-inner{
|
||||
width:146rpx;
|
||||
height:146rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, .65);
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
.flex();
|
||||
.flex-hvc();
|
||||
}
|
||||
&-img{
|
||||
display: block;
|
||||
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
|
||||
background-size: 100%;
|
||||
animation: lotusLoading 1s steps(12, end) infinite;
|
||||
width:62rpx;
|
||||
height:62rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
@-webkit-keyframes lotusLoading {
|
||||
0% {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 360deg);
|
||||
transform: rotate3d(0, 0, 1, 360deg);
|
||||
}
|
||||
}
|
||||
@keyframes lotusLoading {
|
||||
0% {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 0deg);
|
||||
transform: rotate3d(0, 0, 1, 0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate3d(0, 0, 1, 360deg);
|
||||
transform: rotate3d(0, 0, 1, 360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,81 +1,99 @@
|
|||
<template>
|
||||
<view class="headInfo">
|
||||
<view class="infoLeft">
|
||||
<view class="infoLogo">
|
||||
<image src="../../static/images/theme/logo.png" mode="" class="logo"></image>
|
||||
</view>
|
||||
<view class="navList">
|
||||
<template v-for="(item,index) in navList">
|
||||
<navigator :key="index" :url="item.url" open-type="redirect" class="item">
|
||||
<view class="itemInfo" :class="item.type?'navActive':''">
|
||||
<image :src="item.imageUrl" v-if="item.type"></image>
|
||||
<image :src="item.imageUrl2" v-if="!item.type"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</navigator>
|
||||
</template>
|
||||
</view>
|
||||
<view class="headInfoBox">
|
||||
<view class="mask" @click="maskClick">
|
||||
</view>
|
||||
<view class="infoRight">
|
||||
<view class="info" @click="showInfo">
|
||||
<image class="toux" src="@/static/images/theme/toux.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="infoList" v-if="infoType">
|
||||
<view class="userInfo">
|
||||
<p>张星星 - 堆场计划员</p>
|
||||
<p>12341234567</p>
|
||||
<view class="headInfo" @click.stop="showInfo">
|
||||
<view class="infoLeft">
|
||||
<view class="infoLogo">
|
||||
<image src="../../static/images/theme/logo.png" mode="widthFix" class="logo"></image>
|
||||
</view>
|
||||
<view class="borTop" @click="tabsPort('center')">
|
||||
<uni-icons type="loop" size="16" />
|
||||
<text>切换港区</text>
|
||||
</view>
|
||||
<view class="borTop" @click="outLogin">
|
||||
<uni-icons type="undo" size="16" />
|
||||
<text>退出登录</text>
|
||||
<view class="navList">
|
||||
<template v-for="(item,index) in navList">
|
||||
<navigator :key="index" :url="item.url" open-type="redirect" class="item">
|
||||
<view class="itemInfo" :class="item.type?'navActive':''">
|
||||
<image :src="item.imageUrl" mode="widthFix" v-if="item.type"></image>
|
||||
<image :src="item.imageUrl2" mode="widthFix" v-if="!item.type"></image>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</navigator>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="#fff" @change="change">
|
||||
<view class="popupBox">
|
||||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in portList" :key="index"
|
||||
:class="{active:activeIndex == index}" @click="selectPort(item,index)">
|
||||
<text>{{item.title}}</text>
|
||||
<view class="infoRight" @click.stop="showInfo">
|
||||
<view class="info" @click.stop="showInfoOpen">
|
||||
<image class="toux" src="@/static/images/theme/toux.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="infoList" v-if="infoType">
|
||||
<view class="userInfo">
|
||||
<p>张星星 - 堆场计划员</p>
|
||||
<p>12341234567</p>
|
||||
</view>
|
||||
<view class="borTop" @click="messageSql('center')">
|
||||
<uni-icons type="vip" size="16" />
|
||||
<text>数据库管理</text>
|
||||
</view>
|
||||
<view class="borTop" @click="tabsPort('center')">
|
||||
<uni-icons type="loop" size="16" />
|
||||
<text>切换港区</text>
|
||||
</view>
|
||||
<view class="borTop" @click="outLogin">
|
||||
<uni-icons type="undo" size="16" />
|
||||
<text>退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="#fff">
|
||||
<view class="popupBox">
|
||||
<view class="popupTitle">
|
||||
请选择港区
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in portList" :key="index"
|
||||
:class="{active:activeIndex == index}" @click="selectPort(item,index)">
|
||||
<text>{{item.pamName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnBox">
|
||||
<button class="btn" type="primary" @click="toGo">确 定</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnBox">
|
||||
<button class="btn" type="default" @click="close">取 消</button>
|
||||
<button class="btn" type="primary" @click="toGo">确 定</button>
|
||||
</uni-popup>
|
||||
<uni-popup ref="popup2" type="dialog">
|
||||
<uni-popup-dialog confirmText="确定" content="是否退出登录？" @close="close2"
|
||||
@confirm="outConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
<uni-popup ref="popup3" type="dialog">
|
||||
<view class="message">
|
||||
<view class="title">
|
||||
管理数据库
|
||||
</view>
|
||||
<view class="btnList">
|
||||
<button class="searchBtn" type="default" @click="open">打开数据库</button>
|
||||
<button class="searchBtn" type="default" @click="closeSql">关闭数据库</button>
|
||||
<button class="searchBtn" type="default" @click="isOpen">判断数据库是否打开</button>
|
||||
<button class="searchBtn" type="default" @click="createTable">创建数据库</button>
|
||||
<button class="searchBtn" type="default" @click="dropTable">删除表</button>
|
||||
<button class="searchBtn" type="default" @click="dropData">删除数据</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="popup2" type="dialog">
|
||||
<uni-popup-dialog confirmText="确定" content="是否退出登录？" @close="close2"
|
||||
@confirm="outConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
import tableList from "../../common/createDataTable.js"
|
||||
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginObj: {},
|
||||
infoType: false,
|
||||
// 弹框状态
|
||||
type: "",
|
||||
portList: [{
|
||||
value: "1",
|
||||
title: "港区1"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
title: "港区2"
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
title: "港区3"
|
||||
},
|
||||
],
|
||||
portList: [],
|
||||
portId: "",
|
||||
portName: "",
|
||||
activeIndex: 0,
|
||||
|
|
@ -112,57 +130,228 @@
|
|||
imageUrl2: "../../static/images/theme/cbIcon1-2.png"
|
||||
}
|
||||
],
|
||||
lotusLoadingData: {
|
||||
isShow: false //设置显示加载中组件true显示false隐藏
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LotusLoading
|
||||
},
|
||||
props: {
|
||||
navIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.activeIndex = uni.getStorageSync("selectPortIndex")
|
||||
this.portId = this.portList[this.activeIndex].value
|
||||
this.portName = this.portList[this.activeIndex].title
|
||||
this.navList[this.navIndex].type = true
|
||||
},
|
||||
methods: {
|
||||
maskClick() {
|
||||
this.infoType = false
|
||||
},
|
||||
showInfo() {
|
||||
this.infoType = !this.infoType
|
||||
this.infoType = false
|
||||
|
||||
},
|
||||
showInfoOpen() {
|
||||
if (!this.infoType) {
|
||||
this.infoType = true
|
||||
} else {
|
||||
this.infoType = false
|
||||
}
|
||||
},
|
||||
// 获取所有港区
|
||||
initData() {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/app/user/getMinato?mediaType=pad`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
this.lotusLoadingData.isShow = false
|
||||
if (res.data.status == 200) {
|
||||
let newData = res.data.data
|
||||
for (let key in newData) {
|
||||
if (newData.hasOwnProperty(key)) {
|
||||
this.portList.push({
|
||||
pamId: key,
|
||||
pamName: newData[key]
|
||||
})
|
||||
}
|
||||
}
|
||||
if (this.portList.length > 0) {
|
||||
this.$refs.popup.open(this.type)
|
||||
this.portId = this.portList[this.activeIndex].pamId
|
||||
this.portName = this.portList[this.activeIndex].pamName
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击管理数据库
|
||||
messageSql(type) {
|
||||
this.type = type
|
||||
this.$refs.popup3.open(type)
|
||||
},
|
||||
// 打开数据库
|
||||
open() {
|
||||
plus.sqlite.openDatabase({
|
||||
name: 'dianji_chat',
|
||||
path: '_doc/dianji_chat.db',
|
||||
success: function(e) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '打开数据库成功'
|
||||
});
|
||||
return;
|
||||
},
|
||||
fail: function(e) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '打开数据库失败'
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 关闭数据库
|
||||
closeSql() {
|
||||
plus.sqlite.closeDatabase({
|
||||
name: 'dianji_chat',
|
||||
success(e) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '关闭数据库成功'
|
||||
});
|
||||
return;
|
||||
},
|
||||
fail(e) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '关闭数据库失败'
|
||||
});
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 判断数据库是否打开
|
||||
isOpen() {
|
||||
let res = plus.sqlite.isOpenDatabase({
|
||||
name: 'dianji_chat',
|
||||
path: '_doc/dianji_chat.db',
|
||||
});
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '数据库已打开'
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '数据库未打开'
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
// 创建所有数据库
|
||||
createTable() {
|
||||
tableList.createAllTable()
|
||||
},
|
||||
// 删除指定表
|
||||
dropTable() {
|
||||
let sql = 'DROP TABLE shipmentQualityConsultationRespList;'
|
||||
plus.sqlite.selectSql({
|
||||
name: 'dianji_chat',
|
||||
sql: sql,
|
||||
success: function(e) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '删除该表成功'
|
||||
});
|
||||
return;
|
||||
},
|
||||
fail: function(e) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '删除该表失败'
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除指定表中数据
|
||||
dropData() {
|
||||
let sql = "delete from workSignTable"
|
||||
plus.sqlite.selectSql({
|
||||
name: 'dianji_chat',
|
||||
sql: sql,
|
||||
success: function(e) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '删除该表数据成功'
|
||||
});
|
||||
return;
|
||||
},
|
||||
fail: function(e) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '删除该表数据失败'
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 点击切换港区
|
||||
tabsPort(type) {
|
||||
this.type = type
|
||||
this.$refs.popup.open(type)
|
||||
this.lotusLoadingData.isShow = true
|
||||
this.initData()
|
||||
},
|
||||
// 弹框
|
||||
change(e) {},
|
||||
// 选择弹框内容
|
||||
selectPort(item, index) {
|
||||
this.portName = item.title
|
||||
this.portId = item.value
|
||||
this.portName = item.pamName
|
||||
this.portId = item.pamId
|
||||
this.activeIndex = index
|
||||
},
|
||||
// 确认弹框
|
||||
toGo() {
|
||||
let portObj = {
|
||||
portName: this.portName,
|
||||
portId: this.portId
|
||||
}
|
||||
uni.setStorageSync('portObj', portObj);
|
||||
uni.setStorageSync('selectPortIndex', this.activeIndex)
|
||||
this.$refs.popup.close()
|
||||
this.infoType = false
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
uni.request({
|
||||
url: `${this.$local}/api/app/user/setMinato?mediaType=${this.mediaType}&pamNo=${this.portId}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == 200) {
|
||||
let portObj = {
|
||||
portName: this.portName,
|
||||
portId: this.portId
|
||||
}
|
||||
uni.setStorageSync('portObj', portObj);
|
||||
uni.setStorageSync('selectPortIndex', this.activeIndex)
|
||||
this.$refs.popup.close()
|
||||
this.infoType = false
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: `切换到${this.portName}`
|
||||
});
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭弹框
|
||||
close() {
|
||||
this.infoType = false
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
// 点击退出登录
|
||||
outLogin() {
|
||||
this.$refs.popup2.open()
|
||||
|
|
@ -182,143 +371,215 @@
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.headInfo {
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
line-height: 66px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #999999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.headInfoBox {
|
||||
position: relative;
|
||||
|
||||
.infoLeft {
|
||||
display: flex;
|
||||
|
||||
.logo {
|
||||
width: 175px;
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.navList {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
.item {
|
||||
width: 124px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 8px;
|
||||
background: #F2F7FC;
|
||||
margin-right: 16px;
|
||||
|
||||
.itemInfo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #445173;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 9px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navActive {
|
||||
background: #0067CF;
|
||||
color: #fff !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.infoRight {
|
||||
.headInfo {
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
line-height: 66px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #999999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.info {
|
||||
margin-right: 20px;
|
||||
.infoLeft {
|
||||
display: flex;
|
||||
|
||||
.toux {
|
||||
margin-top: 10rpx;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
.logo {
|
||||
width: 175px;
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.navList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: 12px;
|
||||
|
||||
.item {
|
||||
width: 124px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 8px;
|
||||
background: #F2F7FC;
|
||||
margin-right: 16px;
|
||||
|
||||
.itemInfo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #445173;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 9px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navActive {
|
||||
background: #0067CF;
|
||||
color: #fff !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infoList {
|
||||
width: 200px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
.infoRight {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
justify-content: center;
|
||||
|
||||
.borTop {
|
||||
border-top: 1px #ccc solid;
|
||||
.info {
|
||||
margin-right: 20px;
|
||||
|
||||
/deep/.uni-icons {
|
||||
margin-right: 10px;
|
||||
.toux {
|
||||
margin-top: 10rpx;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.infoList {
|
||||
width: 200px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 60px;
|
||||
|
||||
.borTop {
|
||||
border-top: 1px #ccc solid;
|
||||
|
||||
/deep/.uni-icons {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popupBox {
|
||||
width: 400px;
|
||||
height: 330px;
|
||||
overflow: scroll;
|
||||
padding: 30px;
|
||||
.popupBox {
|
||||
width: 280px;
|
||||
height: 320px;
|
||||
overflow: scroll;
|
||||
|
||||
.ul {
|
||||
.li {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
.popupTitle {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
color: #23262E;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #0079fe;
|
||||
border-color: #0079fe;
|
||||
.ul {
|
||||
padding: 30px;
|
||||
|
||||
.li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #0079fe;
|
||||
border-color: #0079fe;
|
||||
}
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||
border-radius: 0 0 16px 16px;
|
||||
|
||||
.btn {
|
||||
width: 170px;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
height: 36px;
|
||||
line-height: 18px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.btn:last-child {
|
||||
color: #fff;
|
||||
background-color: #0067CF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
margin: 10px 20px;
|
||||
.message {
|
||||
width: 400px;
|
||||
padding: 30px;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
padding: 0 20px 10px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid black;
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btnList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.searchBtn {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-left: 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #0067CF;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.uni-dialog-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.uni-dialog-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,6 +17,10 @@
|
|||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
special: {
|
||||
type: String,
|
||||
default: () => ""
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: () => ""
|
||||
|
|
@ -31,6 +35,9 @@
|
|||
} else {
|
||||
uni.navigateBack('-1')
|
||||
}
|
||||
if (this.special == 1) {
|
||||
uni.setStorageSync('tabsType', 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ export default {
|
|||
/**
|
||||
* @description api请求基础路径
|
||||
*/
|
||||
// local: "http://192.168.61.133/tos",
|
||||
local: "http://192.168.61.133/tos",
|
||||
// local: "http://192.168.61.133/tos", // VPN地址
|
||||
local: "https://rtops4.haitongauto.com/tos", // 海通地址
|
||||
imgSrc: "http://116.205.142.169/HtRtosResource/assets/",
|
||||
mapkey: "FUFBZ-KBIWW-P63RR-RR4W3-BNV4H-T6BGX"
|
||||
}
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
function getLocalFilePath(path) {
|
||||
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('file://') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('/storage/emulated/0/') === 0) {
|
||||
return path
|
||||
}
|
||||
if (path.indexOf('/') === 0) {
|
||||
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
|
||||
if (localFilePath !== path) {
|
||||
return localFilePath
|
||||
} else {
|
||||
path = path.substr(1)
|
||||
}
|
||||
}
|
||||
return '_www/' + path
|
||||
}
|
||||
|
||||
function dataUrlToBase64(str) {
|
||||
var array = str.split(',')
|
||||
return array[array.length - 1]
|
||||
}
|
||||
|
||||
var index = 0
|
||||
function getNewFileId() {
|
||||
return Date.now() + String(index++)
|
||||
}
|
||||
|
||||
function biggerThan(v1, v2) {
|
||||
var v1Array = v1.split('.')
|
||||
var v2Array = v2.split('.')
|
||||
var update = false
|
||||
for (var index = 0; index < v2Array.length; index++) {
|
||||
var diff = v1Array[index] - v2Array[index]
|
||||
if (diff !== 0) {
|
||||
update = diff > 0
|
||||
break
|
||||
}
|
||||
}
|
||||
return update
|
||||
}
|
||||
|
||||
export function pathToBase64(path) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
if (typeof window === 'object' && 'document' in window) {
|
||||
if (typeof FileReader === 'function') {
|
||||
var xhr = new XMLHttpRequest()
|
||||
xhr.open('GET', path, true)
|
||||
xhr.responseType = 'blob'
|
||||
xhr.onload = function() {
|
||||
if (this.status === 200) {
|
||||
let fileReader = new FileReader()
|
||||
fileReader.onload = function(e) {
|
||||
resolve(e.target.result)
|
||||
}
|
||||
fileReader.onerror = reject
|
||||
fileReader.readAsDataURL(this.response)
|
||||
}
|
||||
}
|
||||
xhr.onerror = reject
|
||||
xhr.send()
|
||||
return
|
||||
}
|
||||
var canvas = document.createElement('canvas')
|
||||
var c2x = canvas.getContext('2d')
|
||||
var img = new Image
|
||||
img.onload = function() {
|
||||
canvas.width = img.width
|
||||
canvas.height = img.height
|
||||
c2x.drawImage(img, 0, 0)
|
||||
resolve(canvas.toDataURL())
|
||||
canvas.height = canvas.width = 0
|
||||
}
|
||||
img.onerror = reject
|
||||
img.src = path
|
||||
return
|
||||
}
|
||||
if (typeof plus === 'object') {
|
||||
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
|
||||
entry.file(function(file) {
|
||||
var fileReader = new plus.io.FileReader()
|
||||
fileReader.onload = function(data) {
|
||||
resolve(data.target.result)
|
||||
}
|
||||
fileReader.onerror = function(error) {
|
||||
reject(error)
|
||||
}
|
||||
fileReader.readAsDataURL(file)
|
||||
}, function(error) {
|
||||
reject(error)
|
||||
})
|
||||
}, function(error) {
|
||||
reject(error)
|
||||
})
|
||||
return
|
||||
}
|
||||
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
|
||||
wx.getFileSystemManager().readFile({
|
||||
filePath: path,
|
||||
encoding: 'base64',
|
||||
success: function(res) {
|
||||
resolve('data:image/png;base64,' + res.data)
|
||||
},
|
||||
fail: function(error) {
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
reject(new Error('not support'))
|
||||
})
|
||||
}
|
||||
|
||||
export function base64ToPath(base64) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
if (typeof window === 'object' && 'document' in window) {
|
||||
base64 = base64.split(',')
|
||||
var type = base64[0].match(/:(.*?);/)[1]
|
||||
var str = atob(base64[1])
|
||||
var n = str.length
|
||||
var array = new Uint8Array(n)
|
||||
while (n--) {
|
||||
array[n] = str.charCodeAt(n)
|
||||
}
|
||||
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
|
||||
}
|
||||
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
|
||||
if (extName) {
|
||||
extName = extName[1]
|
||||
} else {
|
||||
reject(new Error('base64 error'))
|
||||
}
|
||||
var fileName = getNewFileId() + '.' + extName
|
||||
if (typeof plus === 'object') {
|
||||
var basePath = '_doc'
|
||||
var dirPath = 'uniapp_temp'
|
||||
var filePath = basePath + '/' + dirPath + '/' + fileName
|
||||
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
|
||||
plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
|
||||
entry.getDirectory(dirPath, {
|
||||
create: true,
|
||||
exclusive: false,
|
||||
}, function(entry) {
|
||||
entry.getFile(fileName, {
|
||||
create: true,
|
||||
exclusive: false,
|
||||
}, function(entry) {
|
||||
entry.createWriter(function(writer) {
|
||||
writer.onwrite = function() {
|
||||
resolve(filePath)
|
||||
}
|
||||
writer.onerror = reject
|
||||
writer.seek(0)
|
||||
writer.writeAsBinary(dataUrlToBase64(base64))
|
||||
}, reject)
|
||||
}, reject)
|
||||
}, reject)
|
||||
}, reject)
|
||||
return
|
||||
}
|
||||
var bitmap = new plus.nativeObj.Bitmap(fileName)
|
||||
bitmap.loadBase64Data(base64, function() {
|
||||
bitmap.save(filePath, {}, function() {
|
||||
bitmap.clear()
|
||||
resolve(filePath)
|
||||
}, function(error) {
|
||||
bitmap.clear()
|
||||
reject(error)
|
||||
})
|
||||
}, function(error) {
|
||||
bitmap.clear()
|
||||
reject(error)
|
||||
})
|
||||
return
|
||||
}
|
||||
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
|
||||
var filePath = wx.env.USER_DATA_PATH + '/' + fileName
|
||||
wx.getFileSystemManager().writeFile({
|
||||
filePath: filePath,
|
||||
data: dataUrlToBase64(base64),
|
||||
encoding: 'base64',
|
||||
success: function() {
|
||||
resolve(filePath)
|
||||
},
|
||||
fail: function(error) {
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
reject(new Error('not support'))
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"id": "mmmm-image-tools",
|
||||
"name": "image-tools",
|
||||
"version": "1.4.0",
|
||||
"description": "图像转换工具，可用于图像和base64的转换",
|
||||
"keywords": [
|
||||
"base64",
|
||||
"保存",
|
||||
"图像"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
# lotus-loading
|
||||
|
||||
> 数据加载中组件 适用H5/APP/微信小程序
|
||||
|
||||
## how to use uni-app提供的uni.showLoading，样式显示不太友好，用样式去重置，都没办法覆盖，所以重写了个
|
||||
|
||||
### 插件的方式引入使用
|
||||
1.xx.vue
|
||||
```$xslt
|
||||
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
||||
```
|
||||
|
||||
2.vue页面内引用：<br/>
|
||||
```
|
||||
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
||||
```
|
||||
3.参数说明：<br/>
|
||||
（1）参数定义
|
||||
```$xslt
|
||||
data () {
|
||||
return {
|
||||
//加载中组件数据
|
||||
lotusLoadingData:{
|
||||
isShow:true//设置显示加载中组件true显示false隐藏
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
4.方法定义与调用：<br/>
|
||||
```$xslt
|
||||
components:{
|
||||
LotusLoading
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
{
|
||||
"name" : "iapd",
|
||||
"appid" : "__UNI__820CEDC",
|
||||
"name" : "海通Pad",
|
||||
"appid" : "__UNI__F864E80",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"orientation" : [ "landscape-primary" ],
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
|
|
@ -44,9 +45,13 @@
|
|||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
"ios" : {
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
"sdkConfigs" : {
|
||||
"ad" : {}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
46
package.json
46
package.json
|
|
@ -1,27 +1,23 @@
|
|||
{
|
||||
"id": "fjj-condition",
|
||||
"name": "tongtong-条件筛选",
|
||||
"version": "1.0.6",
|
||||
"description": "支持单选多选筛选、日期范围筛选、数量或金额范围筛选， 兼容h5、微信小程序、其它端未测试",
|
||||
"keywords": [
|
||||
"筛选",
|
||||
"条件筛选",
|
||||
"多选",
|
||||
"单选",
|
||||
"日期筛选"
|
||||
],
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"imagemin": "^8.0.1",
|
||||
"imagemin-mozjpeg": "^10.0.0",
|
||||
"imagemin-pngquant": "^9.0.2",
|
||||
"imagemin-svgo": "^10.0.1",
|
||||
"uuid": "^9.0.0",
|
||||
"vant": "^2.12.54"
|
||||
}
|
||||
"id": "zqs-select",
|
||||
"name": "下拉多选，单选，搜索",
|
||||
"displayName": "下拉多选，单选，搜索",
|
||||
"version": "1.0.2",
|
||||
"description": "下拉多选，单选，搜索（纯uni 规范代码 不引入其他任何插件）",
|
||||
"keywords": [
|
||||
"multiSelector",
|
||||
"单选",
|
||||
"多选",
|
||||
"下拉",
|
||||
"筛选"
|
||||
],
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"crypto-js": "^4.1.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
69
pages.json
69
pages.json
|
|
@ -18,6 +18,12 @@
|
|||
"navigationBarTitleText": "指令"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/domesticTrade",
|
||||
"style": {
|
||||
"navigationBarTitleText": "指令"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/instructDetails",
|
||||
"style": {
|
||||
|
|
@ -30,6 +36,18 @@
|
|||
"navigationBarTitleText": "卸船指令"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/discharge/instruct",
|
||||
"style": {
|
||||
"navigationBarTitleText": "指令"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/discharge/instructDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText": "货物详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/index",
|
||||
"style": {
|
||||
|
|
@ -48,6 +66,54 @@
|
|||
"navigationBarTitleText": "单证签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/mixSign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "杂项单证签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/untieSign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "系解缆签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/supplySign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "供给签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/workAssignSign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "指导员作业布置签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/noticeSign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "装卸货通知单签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/opinionSign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "质量意见征询签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/abnormalSign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "异常情况签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/mafiSign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "MAFI清单签名"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/mixWork",
|
||||
"style": {
|
||||
|
|
@ -232,6 +298,9 @@
|
|||
"van-stepper": "/wxcomponents/vant/dist/stepper/index"
|
||||
},
|
||||
"navigationStyle": "custom",
|
||||
"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
|
||||
"rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
|
||||
"rpxCalcIncludeWidth": 750, // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
|
||||
"app-plus": {
|
||||
"titleNView": false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,28 +2,204 @@
|
|||
<view class="app">
|
||||
<head-info :navIndex="1"></head-info>
|
||||
<view class="container">
|
||||
卸船指令
|
||||
<view class="content">
|
||||
<view class="form">
|
||||
<view class="end">
|
||||
<superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
|
||||
placeholder="请选择贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox>
|
||||
</uni-easyinput>
|
||||
<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyShip"
|
||||
placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"></superwei-combox>
|
||||
</uni-easyinput>
|
||||
<button class="btn" @click="onSearch">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemList">
|
||||
<template v-if="itemList.length > 0">
|
||||
<view v-for="(item, index) in itemList" :key="index" class="item">
|
||||
<view @click="toDetails(item)">
|
||||
<view class="title">
|
||||
<view class="titleft">
|
||||
<image src="../../static/images/ship.png" mode="widthFix"></image>
|
||||
<view class="name">
|
||||
{{item.spmIdDesc}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="status">
|
||||
<text v-if="item.vvyStatus==0" class="nStarted">● {{item.vvyStatusName}}</text>
|
||||
<text v-if="item.vvyStatus==1" class="green">● {{item.vvyStatusName}}</text>
|
||||
<text v-if="item.vvyStatus==2" class="complete">● {{item.vvyStatusName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nitem">
|
||||
航次: <text>{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="nitem">
|
||||
贸易类型: <text>{{item.tradeType}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nitem">
|
||||
进出口: <text>{{item.importExportFlag}}</text>
|
||||
</view>
|
||||
<view class="nitem">
|
||||
泊位: <text>{{item.actualBerthageDesc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||
</view>
|
||||
<view class="pageBox" v-if="itemList.length > 0">
|
||||
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
||||
@change="changePage" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadInfo from '@/components/head-info/head-info';
|
||||
import api from "../../common/api.js"
|
||||
let timers = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ltemList: [1, 1, 1, 1, 2, 1, 1, 1, 1],
|
||||
loginObj: {},
|
||||
itemList: [],
|
||||
tradeName: "外贸",
|
||||
tradeType: "W",
|
||||
tradeItem: {},
|
||||
tradeList: [{
|
||||
value: "1",
|
||||
name: "内贸"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
name: "外贸"
|
||||
}
|
||||
],
|
||||
vvyShip: "",
|
||||
vvyId: "",
|
||||
shipId: "",
|
||||
shipName: '',
|
||||
shipList: [],
|
||||
|
||||
// 分页
|
||||
total: 0,
|
||||
pageSize: 6,
|
||||
current: 1,
|
||||
|
||||
// 港区信息
|
||||
portObj: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
this.portObj = uni.getStorageSync('portObj')
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.getShip()
|
||||
},
|
||||
onBackPress(options) {
|
||||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||||
if (options.from == 'backbutton') {
|
||||
return true;
|
||||
} else if (options.from == 'navigateBack') {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
methods: {
|
||||
// 切换贸易类型
|
||||
tradeSelect(e) {
|
||||
this.tradeItem = e
|
||||
this.tradeName = e.name
|
||||
this.shipId = ""
|
||||
this.shipName = ""
|
||||
this.vvyId = ""
|
||||
this.vvyShip = ""
|
||||
this.getShip()
|
||||
},
|
||||
// 选择船
|
||||
shipSelect(e) {
|
||||
this.shipId = e.spmId
|
||||
this.shipName = e.vslCnname
|
||||
this.vvyId = e.vvyId
|
||||
this.vvyShip = e.vvyShip
|
||||
},
|
||||
// 获取船舶
|
||||
getShip() {
|
||||
if (this.tradeName == '外贸') {
|
||||
this.tradeType = "W"
|
||||
} else {
|
||||
this.tradeType = "N"
|
||||
}
|
||||
let ieType = "I"
|
||||
let key = ""
|
||||
let spmId = ""
|
||||
uni.request({
|
||||
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
if (res.data.status == "200") {
|
||||
this.shipList = res.data.data
|
||||
this.shipList.forEach(v => {
|
||||
let vvyShip = `${v.vslCnname}/${v.vvyName}`
|
||||
this.$set(v, "vvyShip", vvyShip)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击搜索
|
||||
onSearch() {
|
||||
this.initData()
|
||||
},
|
||||
initData() {
|
||||
if (this.tradeName == '外贸') {
|
||||
this.tradeType = "W"
|
||||
} else {
|
||||
this.tradeType = "N"
|
||||
}
|
||||
uni.request({
|
||||
url: `${this.$local}/api/unload/command/queryUnloadVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&tradeType=${this.tradeType}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
let newArr = api.getMapping(res.data.data.records, this.pageSize)
|
||||
this.total = res.data.data.records.length
|
||||
this.itemList = newArr[this.current - 1];
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击分页
|
||||
changePage(e) {
|
||||
this.current = e.current;
|
||||
this.initData()
|
||||
},
|
||||
toDetails(item) {
|
||||
let obj = {
|
||||
shipInfo: item,
|
||||
tradeType: this.tradeType
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: '/pages/discharge/instruct?params=' + params
|
||||
})
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -36,20 +212,35 @@
|
|||
.content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 68px - 40px);
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.input {
|
||||
width: 200px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
border: 1px solid #c9cacb;
|
||||
border-radius: 5px;
|
||||
padding-left: 10px;
|
||||
margin-left: 15px;
|
||||
.end {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.input {
|
||||
width: 200px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding-left: 10px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-left: 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #0067CF;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.itemList {
|
||||
|
|
@ -57,36 +248,71 @@
|
|||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
/deep/.o-empty {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 32%;
|
||||
margin-top: 15px;
|
||||
margin-right: 2%;
|
||||
height: 160px;
|
||||
border: 1px solid #c9cacb;
|
||||
padding: 22px 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
justify-content: space-between;
|
||||
font-size: 21px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
.titleft {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
color: #23262E;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
.nitem {
|
||||
width: 46%;
|
||||
|
||||
.text {
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
|
||||
.nStarted {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.complete {
|
||||
color: #0067CF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -95,5 +321,9 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pageBox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,455 @@
|
|||
<template>
|
||||
<view class="details">
|
||||
<head-view :title="title"></head-view>
|
||||
<view class="container">
|
||||
<view class="liBox">
|
||||
<view class="title">
|
||||
<image src="../../static/images/carInfo.png" mode="widthFix"></image>
|
||||
<text>基本信息</text>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li">
|
||||
<p>船名：</p>
|
||||
<text>{{objInfo.shipInfo.spmIdDesc}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>航次：</p>
|
||||
<text>{{objInfo.shipInfo.vvyName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>泊位：</p>
|
||||
<text>{{objInfo.shipInfo.actualBerthageDesc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liBox">
|
||||
<view class="title">
|
||||
<image src="../../static/images/goodsImg.png" mode="widthFix"></image>
|
||||
<text>详细信息</text>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li">
|
||||
<p>品牌：</p>
|
||||
<text>{{objInfo.xqInfo.brdName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>提单号：</p>
|
||||
<text>{{objInfo.xqInfo.mnfBl}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车型：</p>
|
||||
<text>{{objInfo.xqInfo.bvmName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>型号：</p>
|
||||
<text>{{objInfo.xqInfo.model}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>数量：</p>
|
||||
<text>{{objInfo.xqInfo.amount}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>场位：</p>
|
||||
<text>{{objInfo.xqInfo.yardPos}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liBox">
|
||||
<view class="title">
|
||||
<image src="../../static/images/goodsImg2.png" mode="widthFix"></image>
|
||||
<text>货物明细</text>
|
||||
</view>
|
||||
<view class="formNr">
|
||||
<uni-table border stripe emptyText="暂无更多数据">
|
||||
<!-- 表头行 -->
|
||||
<uni-tr class="gray">
|
||||
<uni-th align="center" width="10">序号</uni-th>
|
||||
<uni-th align="center" width="22">车架号/条形码</uni-th>
|
||||
<uni-th align="center" width="15">作业状态</uni-th>
|
||||
<uni-th align="center" width="40">场位</uni-th>
|
||||
<uni-th align="center" width="15">货物性质</uni-th>
|
||||
<uni-th align="center" width="10">操作</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr v-for="(item,index) in tableList" :key="index">
|
||||
<uni-td align="center">{{index + 1}}</uni-td>
|
||||
<uni-td align="center">{{item.vinCode}}</uni-td>
|
||||
<uni-td align="center">{{item.workStatus}}</uni-td>
|
||||
<uni-td align="center">{{item.yardPos}}</uni-td>
|
||||
<uni-td align="center">{{item.natureFlagName}}</uni-td>
|
||||
<uni-td align="center">
|
||||
<text class="operate" @click="open(item)">残损</text>
|
||||
</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 弹出层 -->
|
||||
<uni-popup ref="popup" :mask-click="false">
|
||||
<view class="dialog">
|
||||
<view class="dtitle">
|
||||
<text>残损信息</text>
|
||||
<uni-icons type="closeempty" size="30" @click="close"></uni-icons>
|
||||
</view>
|
||||
<view class="tableContant">
|
||||
<view class="nr">
|
||||
<text class="text">品牌:{{rowInfo.brdName}}</text>
|
||||
<text class="text">车型:{{rowInfo.bvmName}}</text>
|
||||
<text class="text">车架号/条形码:{{rowInfo.vinCode}}</text>
|
||||
</view>
|
||||
<view class="table" v-for="(item,index) in damagedList" :key="index">
|
||||
<view class="title">
|
||||
<view>质损发生环节: {{item.qdLinkName}}</view>
|
||||
<view class="tag" v-if="item.godStatus != null">{{item.godStatus}}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
质损上报人员: {{item.qdReportPerson}}
|
||||
</view>
|
||||
<view class="col">
|
||||
质损上报时间: {{item.qualityDamageTime}}
|
||||
</view>
|
||||
<view class="col">
|
||||
质损发生位置: {{item.yardPos}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
质损概况: {{item.qualityDamageSituationName}}
|
||||
</view>
|
||||
<view class="col">
|
||||
损坏情况: {{item.damageSituationName}}
|
||||
</view>
|
||||
<view class="col">
|
||||
处置情况: {{item.disposalSituationName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="imgRow">
|
||||
<view class="name">
|
||||
质损照片:
|
||||
</view>
|
||||
<view class="imgList">
|
||||
<view class="img" v-for="(item2,index2) in item.damageImageList" :key="index2">
|
||||
<image :src="item2" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="imgRow">
|
||||
<view class="name">
|
||||
车架号照片:
|
||||
</view>
|
||||
<view class="imgList">
|
||||
<view class="img" v-for="(item2,index2) in item.vinCodeImageList" :key="index2">
|
||||
<image :src="item2" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadInfo from '@/components/head-info/head-info';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginObj: {},
|
||||
title: "货物详情",
|
||||
id: "",
|
||||
|
||||
// 基本信息
|
||||
basicInfo: {},
|
||||
|
||||
// 详细信息
|
||||
detailInfo: {},
|
||||
|
||||
// 货物明细
|
||||
tableList: [],
|
||||
|
||||
// 货物明细当前行信息
|
||||
rowInfo: {},
|
||||
|
||||
// 残损信息列表
|
||||
damagedList: [],
|
||||
|
||||
// 质损照片
|
||||
damageImage: [],
|
||||
|
||||
// 车架号照片
|
||||
vinCodeImage: [],
|
||||
|
||||
// 内贸详情数据
|
||||
objInfo: {},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
onLoad(options) {
|
||||
this.objInfo = JSON.parse(decodeURIComponent(options.params))
|
||||
console.log(this.objInfo)
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.getTableInfo()
|
||||
},
|
||||
methods: {
|
||||
// 获取货物明细数据
|
||||
getTableInfo() {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/unload/command/pageForCargoDetails?supId=${this.objInfo.xqInfo.supId}&lwpId=${this.objInfo.jcInfo.lwpId}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == 200) {
|
||||
this.tableList = res.data.data.records
|
||||
console.log(this.tableList)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
open(item) {
|
||||
this.rowInfo = item
|
||||
console.log(item)
|
||||
this.$refs.popup.open('center')
|
||||
this.getDamaged(item.vinCode)
|
||||
},
|
||||
// 获取残损信息
|
||||
getDamaged(vinCode) {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/goodsQuality/damage/${vinCode}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == 200) {
|
||||
this.damagedList = res.data.data
|
||||
this.damagedList.forEach((item, index) => {
|
||||
item.damageImage.forEach((v, index2) => {
|
||||
this.initImg(v, "1", index, index2)
|
||||
})
|
||||
item.vinCodeImage.forEach((v, index2) => {
|
||||
this.initImg(v, "2", index, index2)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initImg(fileName, type, index, index2) {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/file/url/?fileName=${fileName}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (type == 1) {
|
||||
this.damageImage.push(res.data)
|
||||
this.$set(this.damagedList[index], "damageImageList", this.damageImage)
|
||||
if (this.damagedList[index].damageImage.length == this.damageImage.length) {
|
||||
this.damageImage = []
|
||||
}
|
||||
} else if (type == 2) {
|
||||
this.vinCodeImage.push(res.data)
|
||||
this.$set(this.damagedList[index], "vinCodeImageList", this.vinCodeImage)
|
||||
if (this.damagedList[index].vinCodeImage.length == this.vinCodeImage.length) {
|
||||
this.vinCodeImage = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.details {
|
||||
.container {
|
||||
padding: 16px;
|
||||
|
||||
.liBox {
|
||||
width: 100%;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.li {
|
||||
width: 32%;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
|
||||
p {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #23262E;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.formTitle {
|
||||
padding-left: 10px;
|
||||
border-left: 5px solid #2979ff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.formNr {
|
||||
.gray {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.operate {
|
||||
color: #2979ff;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: 90vh;
|
||||
height: 80vh;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
|
||||
.dtitle {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 0 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
background-color: #f9f9f9;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tableContant {
|
||||
height: calc(80vh - 60px);
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
.nr {
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.text {
|
||||
min-width: 120px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 20px 20px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-weight: 900;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.tag {
|
||||
width: 60px;
|
||||
margin: 10px 15px 0;
|
||||
border-radius: 3px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #108ee9;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
font-size: 10px;
|
||||
|
||||
.col {
|
||||
width: 32%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.imgRow {
|
||||
margin-bottom: 25rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.name {
|
||||
width: 80px;
|
||||
text-align: left;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.imgList {
|
||||
width: calc(100% - 80px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.img {
|
||||
width: 100px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,358 @@
|
|||
<template>
|
||||
<view class="place">
|
||||
<view class="placeTop">
|
||||
<view class="topLeft">
|
||||
堆场资源 B3区
|
||||
</view>
|
||||
<view class="topRight">
|
||||
<button @click="back"><text class="back">返回</text></button>
|
||||
<button @click="show"><text class="show">显示</text></button>
|
||||
</view>
|
||||
<view class="showBox" v-if="showType">
|
||||
<view class="showInfo">
|
||||
车道
|
||||
</view>
|
||||
<view class="showInfo">
|
||||
车位
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeInfo">
|
||||
<view class="infoLeft">
|
||||
<text>车位总数：12*15=180车位</text>
|
||||
<text>使用车位：40车位</text>
|
||||
<text>剩余车位：40车位</text>
|
||||
<text>虚拟场位：12车位</text>
|
||||
<text>可停放车辆：12辆</text>
|
||||
<text>已停放车辆：12辆</text>
|
||||
</view>
|
||||
<view class="infoRight">
|
||||
<view class="tipBox">
|
||||
<text>空置</text>
|
||||
<view class="colorBox vacant"></view>
|
||||
</view>
|
||||
<view class="tipBox">
|
||||
<text>使用</text>
|
||||
<view class="colorBox use"></view>
|
||||
</view>
|
||||
<view class="tipBox">
|
||||
<text>虚拟车位</text>
|
||||
<view class="colorBox virtually"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="placeList">
|
||||
<view class="listInfo">
|
||||
<view class="title">
|
||||
01道（合计12辆车-13车位）
|
||||
</view>
|
||||
<view class="listType1">
|
||||
<view class="type1Box box1">
|
||||
宝马-轿车 12辆
|
||||
</view>
|
||||
<view class="type1Box box2">
|
||||
奔驰-轿车 12辆
|
||||
</view>
|
||||
<view class="type1Box box3">
|
||||
未使用：5车位
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="listInfo">
|
||||
<view class="title">
|
||||
02道（合计12辆车-13车位）
|
||||
</view>
|
||||
<view class="listType2">
|
||||
<view class="type2Box">
|
||||
<template v-for="(item, index) in type2List">
|
||||
<view class="type2info"
|
||||
:class="{'type0':item.type == 0, 'type1':item.type == 1, 'type2':item.type == 2}"
|
||||
:key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="listInfo">
|
||||
<view class="title">
|
||||
03道（合计12辆车-13车位）
|
||||
</view>
|
||||
<view class="listType3">
|
||||
未使用：5车位
|
||||
</view>
|
||||
</view>
|
||||
<view class="listInfo">
|
||||
<view class="title">
|
||||
04道（合计12辆车-13车位）
|
||||
</view>
|
||||
<view class="listType3">
|
||||
未使用：5车位
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type2List: [{
|
||||
id: "01",
|
||||
name: "宝马-轿车",
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
id: "02",
|
||||
name: "宝马-轿车",
|
||||
type: 1,
|
||||
}, {
|
||||
id: "03",
|
||||
name: "宝马-轿车",
|
||||
type: 1,
|
||||
}, {
|
||||
id: "04",
|
||||
name: "空置",
|
||||
type: 0,
|
||||
}, {
|
||||
id: "05",
|
||||
name: "宝马-轿车",
|
||||
type: 1,
|
||||
}, {
|
||||
id: "06",
|
||||
name: "空置",
|
||||
type: 0,
|
||||
}, {
|
||||
id: "07",
|
||||
name: "宝马-轿车",
|
||||
type: 1,
|
||||
}, {
|
||||
id: "08",
|
||||
name: "空置",
|
||||
type: 0,
|
||||
}, {
|
||||
id: "09",
|
||||
name: "宝马-轿车",
|
||||
type: 1,
|
||||
}, {
|
||||
id: "10",
|
||||
name: "空置",
|
||||
type: 0,
|
||||
}, {
|
||||
id: "11",
|
||||
name: "宝马-轿车",
|
||||
type: 1,
|
||||
}, {
|
||||
id: "12",
|
||||
name: "虚拟车位",
|
||||
type: 2,
|
||||
},
|
||||
],
|
||||
showType: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击返回
|
||||
back() {
|
||||
this.$emit("modifyPlaceTabs", 0)
|
||||
},
|
||||
// 点击显示
|
||||
show() {
|
||||
this.showType = !this.showType
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.place {
|
||||
.placeTop {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
|
||||
.topLeft {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topRight {
|
||||
display: flex;
|
||||
|
||||
uni-button {
|
||||
margin-left: 30px;
|
||||
width: 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.back {
|
||||
color: #0079FE;
|
||||
}
|
||||
|
||||
.show {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.showBox {
|
||||
position: absolute;
|
||||
bottom: -102px;
|
||||
right: 25px;
|
||||
border: 1px solid #aaa;
|
||||
|
||||
.showInfo {
|
||||
padding: 20px 30px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeInfo {
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
.infoLeft {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
text {
|
||||
margin: 10px;
|
||||
margin-right: 0;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.infoRight {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin-left: 30px;
|
||||
|
||||
.tipBox {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
|
||||
.colorBox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.vacant {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.use {
|
||||
background-color: #0079FE;
|
||||
}
|
||||
|
||||
.virtually {
|
||||
background-color: #F86E56;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeList {
|
||||
padding: 20px;
|
||||
background-color: #000;
|
||||
|
||||
.listInfo {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
padding-left: 10px;
|
||||
border-left: 5px solid #0079FE;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.listType1 {
|
||||
display: flex;
|
||||
|
||||
.type1Box {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
flex: 1;
|
||||
background-color: #0079FE;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
flex: 1;
|
||||
background-color: #0079FE;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.box3 {
|
||||
flex: 2;
|
||||
background-color: #fff;
|
||||
color: #aaa
|
||||
}
|
||||
}
|
||||
|
||||
.listType2 {
|
||||
padding: 10px 0;
|
||||
background-color: #222;
|
||||
|
||||
.type2Box {
|
||||
display: flex;
|
||||
|
||||
.type2info {
|
||||
flex: 1;
|
||||
height: 150px;
|
||||
border-radius: 8px;
|
||||
margin: 0 5px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.type0 {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.type1 {
|
||||
background-color: #0079FE;
|
||||
}
|
||||
|
||||
.type2 {
|
||||
background-color: #F86E56;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listType3 {
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
color: #F86E56;
|
||||
line-height: 200px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
background-color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -5,174 +5,213 @@
|
|||
<view class="content">
|
||||
<view class="form">
|
||||
<view class="end">
|
||||
<superwei-combox class="input" :candidates="portList" :isJSON="true" keyName="pamName"
|
||||
placeholder="港区" v-model="portName" @input="portInput"
|
||||
@select="portSelect"></superwei-combox>
|
||||
<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyName"
|
||||
placeholder="船名/航次" v-model="shipName" @input="shipInput"
|
||||
@select="shipSelect"></superwei-combox>
|
||||
<superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
|
||||
placeholder="请选择贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox>
|
||||
</uni-easyinput>
|
||||
<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyShip"
|
||||
placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"></superwei-combox>
|
||||
</uni-easyinput>
|
||||
<button class="btn" @click="onSearch">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemList">
|
||||
<view v-for="(item, index) in ltemList" :key="index" class="item" @click="toDetails(item.spmId)">
|
||||
<view class="title">
|
||||
<view class="name">
|
||||
海王星领袖
|
||||
</view>
|
||||
<view class="status">
|
||||
<text v-if="item.vvyStatus==2" class="green">● 作业中</text>
|
||||
<text v-else>● 已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table">
|
||||
<view class="row">
|
||||
<view class="nitem">
|
||||
航次: <text>735546</text>
|
||||
<template v-if="itemList.length > 0">
|
||||
<view v-for="(item, index) in itemList" :key="index" class="item">
|
||||
<view @click="toDetails(item)">
|
||||
<view class="title">
|
||||
<view class="titleft">
|
||||
<image src="../../static/images/ship.png" mode="widthFix"></image>
|
||||
<view class="name">
|
||||
{{item.spmIdDesc}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="status">
|
||||
<text v-if="item.vvyStatus==0" class="nStarted">● {{item.vvyStatusName}}</text>
|
||||
<text v-if="item.vvyStatus==1" class="green">● {{item.vvyStatusName}}</text>
|
||||
<text v-if="item.vvyStatus==2" class="complete">● {{item.vvyStatusName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nitem">
|
||||
贸易类型: <text>{{item.tradeType}}</text>
|
||||
<view class="row">
|
||||
<view class="nitem">
|
||||
航次: <text>{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="nitem">
|
||||
贸易类型: <text>{{item.tradeType}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nitem">
|
||||
进出口: <text>{{item.importExportFlag}}</text>
|
||||
</view>
|
||||
<view class="nitem">
|
||||
泊位: <text>{{item.actualBerthage}}</text>
|
||||
<view class="row">
|
||||
<view class="nitem">
|
||||
进出口: <text>{{item.importExportFlag}}</text>
|
||||
</view>
|
||||
<view class="nitem">
|
||||
泊位: <text>{{item.actualBerthageDesc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||
</view>
|
||||
<view class="pageBox" v-if="itemList.length > 0">
|
||||
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
||||
@change="changePage" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadInfo from '@/components/head-info/head-info';
|
||||
import {
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import api from "../../common/api.js"
|
||||
let timers = null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ltemList: [],
|
||||
portName: '',
|
||||
portItem: {},
|
||||
portList: [],
|
||||
loginObj: {},
|
||||
itemList: [],
|
||||
tradeName: "外贸",
|
||||
tradeType: "W",
|
||||
tradeItem: {},
|
||||
tradeList: [{
|
||||
value: "1",
|
||||
name: "内贸"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
name: "外贸"
|
||||
}
|
||||
],
|
||||
vvyShip: "",
|
||||
vvyId: "",
|
||||
shipId: "",
|
||||
shipName: '',
|
||||
shipItem: {},
|
||||
shipList: []
|
||||
shipList: [],
|
||||
|
||||
// 分页
|
||||
total: 0,
|
||||
pageSize: 6,
|
||||
current: 1,
|
||||
|
||||
// 港区信息
|
||||
portObj: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.portObj = uni.getStorageSync('portObj')
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.getShip()
|
||||
},
|
||||
onBackPress(options) {
|
||||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||||
if (options.from == 'backbutton') {
|
||||
return true;
|
||||
} else if (options.from == 'navigateBack') {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
methods: {
|
||||
...mapActions([
|
||||
'majax',
|
||||
'najax'
|
||||
]),
|
||||
portInput(e) {
|
||||
clearTimeout(timers)
|
||||
timers = setTimeout(() => {
|
||||
this.getPort(e)
|
||||
}, 500)
|
||||
},
|
||||
portSelect(e) {
|
||||
this.portItem = e
|
||||
this.shipName = ''
|
||||
this.shipItem = {}
|
||||
},
|
||||
// 获取港口
|
||||
getPort(keyWords) {
|
||||
let data = {}
|
||||
data.pamName = keyWords
|
||||
this.majax({
|
||||
url: this.$local + "/api/miniapp/portAreaManage/getPortArea",
|
||||
params: data,
|
||||
method: 'GET'
|
||||
}).then(res => {
|
||||
this.portList = res.data
|
||||
})
|
||||
// 模拟
|
||||
this.portList = [{
|
||||
potId: 1123,
|
||||
pamName: '测试港口'
|
||||
}]
|
||||
},
|
||||
shipInput(e) {
|
||||
clearTimeout(timers)
|
||||
timers = setTimeout(() => {
|
||||
this.getShip(e)
|
||||
}, 500)
|
||||
// 切换贸易类型
|
||||
tradeSelect(e) {
|
||||
this.tradeItem = e
|
||||
this.tradeName = e.name
|
||||
this.shipId = ""
|
||||
this.shipName = ""
|
||||
this.vvyId = ""
|
||||
this.vvyShip = ""
|
||||
this.getShip()
|
||||
},
|
||||
// 选择船
|
||||
shipSelect(e) {
|
||||
this.shipItem = e
|
||||
this.shipId = e.spmId
|
||||
this.shipName = e.vslCnname
|
||||
this.vvyId = e.vvyId
|
||||
this.vvyShip = e.vvyShip
|
||||
},
|
||||
// 获取船舶
|
||||
getShip(keyWords) {
|
||||
console.log(this.portName);
|
||||
let data = {}
|
||||
data.ieType = 'I' // I进口 E出口 暂无法区分
|
||||
data.key = keyWords
|
||||
data.pamId = this.portItem.pamId
|
||||
this.majax({
|
||||
url: this.$local + "/api/shipInstructions/queryByKey",
|
||||
params: data,
|
||||
method: 'GET'
|
||||
}).then(res => {
|
||||
this.shipList = res.data
|
||||
getShip() {
|
||||
if (this.tradeName == '外贸') {
|
||||
this.tradeType = "W"
|
||||
} else {
|
||||
this.tradeType = "N"
|
||||
}
|
||||
let ieType = "E"
|
||||
let key = ""
|
||||
let spmId = ""
|
||||
uni.request({
|
||||
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == "200") {
|
||||
this.shipList = res.data.data
|
||||
this.shipList.forEach(v => {
|
||||
let vvyShip = `${v.vslCnname}/${v.vvyName}`
|
||||
this.$set(v, "vvyShip", vvyShip)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
// 模拟
|
||||
this.shipList = [{
|
||||
vvyId: 1123,
|
||||
vvyName: '测试航次'
|
||||
}]
|
||||
},
|
||||
// 点击搜索
|
||||
onSearch() {
|
||||
let data = {}
|
||||
data.tradeType = '外贸' // I进口 E出口 暂无法区分
|
||||
data.vvyId = this.shipItem.vvyId
|
||||
data.pamId = this.portItem.pamId
|
||||
this.majax({
|
||||
url: this.$local + "/api/shipInstructions/queryStowageVoyages",
|
||||
params: data,
|
||||
method: 'GET'
|
||||
}).then(res => {
|
||||
this.ltemList = res.data.records
|
||||
})
|
||||
// 模拟
|
||||
this.ltemList = [{
|
||||
actualBerthage: "一号位置",
|
||||
actualBerthageDesc: "",
|
||||
importExportFlag: "出口",
|
||||
spmId: "spm1112",
|
||||
spmIdDesc: "331122",
|
||||
tradeType: "内贸",
|
||||
vvyId: "11231",
|
||||
vvyName: "海王星领袖",
|
||||
vvyStatus: "2",
|
||||
vvyStatusName: "作业中",
|
||||
}]
|
||||
this.initData()
|
||||
},
|
||||
toDetails(id) {
|
||||
const newId = encodeURIComponent(JSON.stringify(id));
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/instruct?id=' + newId
|
||||
initData() {
|
||||
let url = ""
|
||||
if (this.tradeName == '内贸') {
|
||||
url =
|
||||
`${this.$local}/api/domestic/load/command/queryLoadVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}`
|
||||
} else if (this.tradeName == '外贸') {
|
||||
url =
|
||||
`${this.$local}/api/shipInstructions/queryStowageVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&tradeType=${this.tradeType}`
|
||||
}
|
||||
uni.request({
|
||||
url: url,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
let newArr = api.getMapping(res.data.data.records, this.pageSize)
|
||||
this.total = res.data.data.records.length
|
||||
this.itemList = newArr[this.current - 1];
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击分页
|
||||
changePage(e) {
|
||||
this.current = e.current;
|
||||
this.initData()
|
||||
},
|
||||
toDetails(item) {
|
||||
let obj = {
|
||||
shipInfo: item,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
if (this.tradeName == '外贸') {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/instruct?params=' + params
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/domesticTrade?params=' + params
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -180,6 +219,7 @@
|
|||
.content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 68px - 40px);
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
|
|
@ -200,7 +240,11 @@
|
|||
.btn {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-left: 20px;
|
||||
margin-left: 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #0067CF;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -211,43 +255,72 @@
|
|||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
/deep/.o-empty {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 32%;
|
||||
margin-top: 15px;
|
||||
margin-right: 2%;
|
||||
height: 160px;
|
||||
border: 1px solid #c9cacb;
|
||||
padding: 22px 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
justify-content: space-between;
|
||||
font-size: 21px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.titleft {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
color: #23262E;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
|
||||
.nitem {
|
||||
width: 46%;
|
||||
|
||||
text {
|
||||
.text {
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
|
||||
.nStarted {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.complete {
|
||||
color: #0067CF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -255,5 +328,9 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pageBox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,127 +4,158 @@
|
|||
<view class="container">
|
||||
<view class="liBox">
|
||||
<view class="title">
|
||||
<image src="../../static/images/carInfo.png" mode=""></image>
|
||||
<image src="../../static/images/carInfo.png" mode="widthFix"></image>
|
||||
<text>基本信息</text>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="ul" v-if="objInfo.tradeName == 'W'">
|
||||
<view class="li">
|
||||
<p>船名：</p>
|
||||
<text>海王星领袖</text>
|
||||
<text>{{basicInfo.vslCnName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>航次：</p>
|
||||
<text>29089473289</text>
|
||||
<text>{{basicInfo.vvyName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>港口：</p>
|
||||
<text>厦门港</text>
|
||||
<text>{{basicInfo.potName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>货代：</p>
|
||||
<text>货代货代货代货代</text>
|
||||
<text>{{basicInfo.goodsAgent}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>联系人：</p>
|
||||
<text>张xx</text>
|
||||
<text>{{basicInfo.contact}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>联系方式：</p>
|
||||
<text>12345678900</text>
|
||||
<text>{{basicInfo.contactNumber}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>泊位：</p>
|
||||
<text>一泊位</text>
|
||||
<text>{{basicInfo.planBerthageName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>备注：</p>
|
||||
<text>我是备注我是备注我是备注</text>
|
||||
<text>{{basicInfo.remark}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ul" v-if="objInfo.tradeName == 'N'">
|
||||
<view class="li">
|
||||
<p>船名：</p>
|
||||
<text>{{objInfo.shipInfo.spmIdDesc}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>航次：</p>
|
||||
<text>{{objInfo.shipInfo.vvyName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>目的港：</p>
|
||||
<text>{{objInfo.jcInfo.destPortDesc}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>泊位：</p>
|
||||
<text>{{objInfo.shipInfo.actualBerthageDesc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liBox">
|
||||
<view class="title">
|
||||
<image src="../../static/images/goodsImg.png" mode=""></image>
|
||||
<text>货物明细</text>
|
||||
<image src="../../static/images/goodsImg.png" mode="widthFix"></image>
|
||||
<text>详细信息</text>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="ul" v-if="objInfo.tradeName == 'W'">
|
||||
<view class="li">
|
||||
<p>提单号：</p>
|
||||
<text>789654654123</text>
|
||||
<text>{{detailInfo.mnfBl}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>品牌：</p>
|
||||
<text>奔驰</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>型号：</p>
|
||||
<text>cx87898888</text>
|
||||
<text>{{detailInfo.brdName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车辆明细：</p>
|
||||
<text>车辆明细车辆明细</text>
|
||||
<text>{{detailInfo.bvdName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车长：</p>
|
||||
<text>1888</text>
|
||||
<text>{{detailInfo.carLength}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车宽：</p>
|
||||
<text>1688</text>
|
||||
<text>{{detailInfo.carWidth}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车高：</p>
|
||||
<text>1000</text>
|
||||
<text>{{detailInfo.carHeight}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>体积：</p>
|
||||
<text>28888</text>
|
||||
<text>{{detailInfo.volume}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>重量：</p>
|
||||
<text>48888</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>数量：</p>
|
||||
<text>288</text>
|
||||
<text>{{detailInfo.weight}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>单票数量：</p>
|
||||
<text>10</text>
|
||||
<text>{{detailInfo.ticketGtpks}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>单票重量：</p>
|
||||
<text>33</text>
|
||||
<text>{{detailInfo.ticketWeight}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>单票体积：</p>
|
||||
<text>20</text>
|
||||
<text>{{detailInfo.ticketVolume}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ul" v-if="objInfo.tradeName == 'N'">
|
||||
<view class="li">
|
||||
<p>提单号：</p>
|
||||
<text>{{objInfo.xqInfo.mnfBl}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>品牌：</p>
|
||||
<text>{{objInfo.xqInfo.brdName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车型：</p>
|
||||
<text>{{objInfo.xqInfo.bvmName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车辆数：</p>
|
||||
<text>{{objInfo.xqInfo.carAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liBox">
|
||||
<view class="title">
|
||||
<image src="../../static/images/goodsImg2.png" mode=""></image>
|
||||
<text>货物表格</text>
|
||||
<image src="../../static/images/goodsImg2.png" mode="widthFix"></image>
|
||||
<text>货物明细</text>
|
||||
</view>
|
||||
<view class="formNr">
|
||||
<uni-table border stripe emptyText="暂无更多数据">
|
||||
<!-- 表头行 -->
|
||||
<uni-tr class="gray">
|
||||
<uni-th align="center" width="22">序号</uni-th>
|
||||
<uni-th align="center" width="10">序号</uni-th>
|
||||
<uni-th align="center" width="22">车架号/条形码</uni-th>
|
||||
<uni-th align="center" width="22">作业状态</uni-th>
|
||||
<uni-th align="center" width="22">场位</uni-th>
|
||||
<uni-th align="center" width="12">操作</uni-th>
|
||||
<uni-th align="center" width="15">作业状态</uni-th>
|
||||
<uni-th align="center" width="40">场位</uni-th>
|
||||
<uni-th align="center" width="15">货物性质</uni-th>
|
||||
<uni-th align="center" width="10">操作</uni-th>
|
||||
</uni-tr>
|
||||
<!-- 表格数据行 -->
|
||||
<uni-tr>
|
||||
<uni-td>1</uni-td>
|
||||
<uni-td>a</uni-td>
|
||||
<uni-td>ix3</uni-td>
|
||||
<uni-td>18283</uni-td>
|
||||
<uni-tr v-for="(item,index) in tableList" :key="index">
|
||||
<uni-td align="center">{{index + 1}}</uni-td>
|
||||
<uni-td align="center">{{item.vinCode}}</uni-td>
|
||||
<uni-td align="center">{{item.workStatus}}</uni-td>
|
||||
<uni-td align="center" v-if="objInfo.tradeName == 'W'">{{item.yardPosition}}</uni-td>
|
||||
<uni-td align="center" v-if="objInfo.tradeName == 'N'">{{item.yardPos}}</uni-td>
|
||||
<uni-td align="center">{{item.natureFlagName}}</uni-td>
|
||||
<uni-td align="center">
|
||||
<text class="operate" @click="open">残损</text>
|
||||
<text class="operate" @click="open(item)">残损</text>
|
||||
</uni-td>
|
||||
</uni-tr>
|
||||
</uni-table>
|
||||
|
|
@ -139,35 +170,36 @@
|
|||
</view>
|
||||
<view class="tableContant">
|
||||
<view class="nr">
|
||||
<text class="text">品牌:</text>
|
||||
<text class="text">车型:</text>
|
||||
<text class="text">车架号/条形码:</text>
|
||||
<text class="text">品牌:{{rowInfo.brdName}}</text>
|
||||
<text class="text" v-if="objInfo.tradeName == 'W'">车型:{{rowInfo.goodsTypeName}}</text>
|
||||
<text class="text" v-if="objInfo.tradeName == 'N'">车型:{{rowInfo.bvmName}}</text>
|
||||
<text class="text">车架号/条形码:{{rowInfo.vinCode}}</text>
|
||||
</view>
|
||||
<view class="table">
|
||||
<view class="table" v-for="(item,index) in damagedList" :key="index">
|
||||
<view class="title">
|
||||
<view>质损发生环节: 收车交接</view>
|
||||
<view class="tag">已收车</view>
|
||||
<view>质损发生环节: {{item.qdLinkName}}</view>
|
||||
<view class="tag" v-if="item.godStatus != null">{{item.godStatus}}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
质损上报人员: 张星星
|
||||
质损上报人员: {{item.qdReportPerson}}
|
||||
</view>
|
||||
<view class="col">
|
||||
质损上报时间: 2023/09/08 23:00
|
||||
质损上报时间: {{item.qualityDamageTime}}
|
||||
</view>
|
||||
<view class="col">
|
||||
质损发生位置: 舱内
|
||||
质损发生位置: {{item.yardPos}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
质损概况: 磕伤
|
||||
质损概况: {{item.qualityDamageSituationName}}
|
||||
</view>
|
||||
<view class="col">
|
||||
损坏情况: 凹陷
|
||||
损坏情况: {{item.damageSituationName}}
|
||||
</view>
|
||||
<view class="col">
|
||||
处置情况: 其他 这是一段关于其他的描述
|
||||
处置情况: {{item.disposalSituationName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="imgRow">
|
||||
|
|
@ -175,17 +207,8 @@
|
|||
质损照片:
|
||||
</view>
|
||||
<view class="imgList">
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
<view class="img" v-for="(item2,index2) in item.damageImageList" :key="index2">
|
||||
<image :src="item2" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -194,81 +217,8 @@
|
|||
车架号照片:
|
||||
</view>
|
||||
<view class="imgList">
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table">
|
||||
<view class="title">
|
||||
<view>质损发生环节: 收车交接</view>
|
||||
<view class="tag">已收车</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
备注：这段备注很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
质损上报人员: 张星星
|
||||
</view>
|
||||
<view class="col">
|
||||
质损上报时间: 2023/09/08 23:00
|
||||
</view>
|
||||
<view class="col">
|
||||
质损发生位置: 舱内
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
质损概况: 磕伤
|
||||
</view>
|
||||
<view class="col">
|
||||
损坏情况: 凹陷
|
||||
</view>
|
||||
<view class="col">
|
||||
处置情况: 其他 这是一段关
|
||||
</view>
|
||||
</view>
|
||||
<view class="imgRow">
|
||||
<view class="name">
|
||||
质损照片:
|
||||
</view>
|
||||
<view class="imgList">
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="imgRow">
|
||||
<view class="name">
|
||||
车架号照片:
|
||||
</view>
|
||||
<view class="imgList">
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
|
||||
<view class="img" v-for="(item2,index2) in item.vinCodeImageList" :key="index2">
|
||||
<image :src="item2" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -281,42 +231,146 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import HeadInfo from '@/components/head-info/head-info';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginObj: {},
|
||||
title: "货物详情",
|
||||
id: 0
|
||||
id: "",
|
||||
|
||||
// 基本信息
|
||||
basicInfo: {},
|
||||
|
||||
// 详细信息
|
||||
detailInfo: {},
|
||||
|
||||
// 货物明细
|
||||
tableList: [],
|
||||
|
||||
// 货物明细当前行信息
|
||||
rowInfo: {},
|
||||
|
||||
// 残损信息列表
|
||||
damagedList: [],
|
||||
|
||||
// 质损照片
|
||||
damageImage: [],
|
||||
|
||||
// 车架号照片
|
||||
vinCodeImage: [],
|
||||
|
||||
// 内贸详情数据
|
||||
objInfo: {},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = JSON.parse(decodeURIComponent(options.id))
|
||||
this.loadList() // 总指令：分页查询
|
||||
this.objInfo = JSON.parse(decodeURIComponent(options.params))
|
||||
console.log(this.objInfo)
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.loadList()
|
||||
this.getTableInfo()
|
||||
},
|
||||
methods: {
|
||||
...mapActions([
|
||||
'majax',
|
||||
'najax'
|
||||
]),
|
||||
// 获取基础信息和详细信息
|
||||
loadList() {
|
||||
let data = {}
|
||||
data.spsId = this.id
|
||||
this.majax({
|
||||
url: this.$local + "/api/shipInstructions/listDetail",
|
||||
params: data,
|
||||
method: 'GET'
|
||||
}).then(res => {
|
||||
// this.itemList = res.data.records
|
||||
uni.request({
|
||||
url: `${this.$local}/api/shipInstructions/listDetail?spsId=${this.objInfo.id}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == 200) {
|
||||
this.basicInfo = res.data.data.basicInfo
|
||||
this.detailInfo = res.data.data.detailInfo
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
open() {
|
||||
// 获取货物明细数据
|
||||
getTableInfo() {
|
||||
let url = ""
|
||||
if (this.objInfo.tradeName == 'W') {
|
||||
url = `${this.$local}/api/shipInstructions/goodsDetail/page?spsId=${this.objInfo.id}`
|
||||
} else if (this.objInfo.tradeName == 'N') {
|
||||
url =
|
||||
`${this.$local}/api/domestic/load/command/pageForCargoDetails?splId=${this.objInfo.xqInfo.splId}&dlcId=${this.objInfo.jcInfo.dlcId}`
|
||||
}
|
||||
uni.request({
|
||||
url: url,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == 200) {
|
||||
this.tableList = res.data.data.records
|
||||
console.log(this.tableList)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
open(item) {
|
||||
console.log(item)
|
||||
this.rowInfo = item
|
||||
this.$refs.popup.open('center')
|
||||
this.getDamaged(item.vinCode)
|
||||
},
|
||||
// 获取残损信息
|
||||
getDamaged(vinCode) {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/goodsQuality/damage/${vinCode}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == 200) {
|
||||
this.damagedList = res.data.data
|
||||
this.damagedList.forEach((item, index) => {
|
||||
item.damageImage.forEach((v, index2) => {
|
||||
this.initImg(v, "1", index, index2)
|
||||
})
|
||||
item.vinCodeImage.forEach((v, index2) => {
|
||||
this.initImg(v, "2", index, index2)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initImg(fileName, type, index, index2) {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/file/url/?fileName=${fileName}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (type == 1) {
|
||||
this.damageImage.push(res.data)
|
||||
this.$set(this.damagedList[index], "damageImageList", this.damageImage)
|
||||
if (this.damagedList[index].damageImage.length == this.damageImage.length) {
|
||||
this.damageImage = []
|
||||
}
|
||||
} else if (type == 2) {
|
||||
this.vinCodeImage.push(res.data)
|
||||
this.$set(this.damagedList[index], "vinCodeImageList", this.vinCodeImage)
|
||||
if (this.damagedList[index].vinCodeImage.length == this.vinCodeImage.length) {
|
||||
this.vinCodeImage = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
|
|
|
|||
|
|
@ -1,100 +1,211 @@
|
|||
<template>
|
||||
<view class="login">
|
||||
<view class="leftImg">
|
||||
<image src="../../static/images/shipWork/loginImg.png"></image>
|
||||
<view class="pBox">
|
||||
<p>海通国际码头</p>
|
||||
<p>智能管控系统</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loginBox">
|
||||
<uni-easyinput prefixIcon="person-filled" v-model="account" placeholder="请输入账号"></uni-easyinput>
|
||||
<uni-easyinput type="password" prefixIcon="locked-filled" suffixIcon="search" v-model="account"
|
||||
placeholder="请输入密码">
|
||||
</uni-easyinput>
|
||||
<view class="button" @click="loginGo('center')">登录</view>
|
||||
<uni-popup ref="popup" background-color="#fff" @change="change">
|
||||
<view class="loginTop">
|
||||
<image src="../../static/images/theme/logo.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="loginInfo">
|
||||
<view class="loginTitle">
|
||||
<p>账号密码登录</p>
|
||||
</view>
|
||||
<view class="loginInput">
|
||||
<uni-easyinput prefixIcon="person-filled" v-model="account" placeholder="请输入账号"></uni-easyinput>
|
||||
<uni-easyinput type="password" prefixIcon="locked-filled" suffixIcon="search" v-model="password"
|
||||
placeholder="请输入密码">
|
||||
</uni-easyinput>
|
||||
<button class="button" @click="loginGo('center')">立即登录</button>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="#fff">
|
||||
<view class="popupBox">
|
||||
<view class="popupTitle">
|
||||
请选择港区
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in portList" :key="index"
|
||||
:class="{active:activeIndex == index}" @click="selectPort(item,index)">
|
||||
<text>{{item.title}}</text>
|
||||
<text>{{item.pamName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnBox">
|
||||
<button class="btn" type="default" @click="close">取 消</button>
|
||||
<button class="btn" type="primary" @click="toGo">确 定</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<uni-popup ref="popup2" type="dialog">
|
||||
<uni-popup-dialog type="error" confirmText="确定" title="通知" content="未开通权限，请联系管理员"></uni-popup-dialog>
|
||||
<uni-popup-dialog type="error" title="通知" content="未开通权限，请联系管理员"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
<uni-popup ref="popup3" type="dialog">
|
||||
<uni-popup-dialog type="error" title="通知" :content="errorTitle"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
import tableList from "../../common/createDataTable.js"
|
||||
import {
|
||||
encrypt,
|
||||
decrypt
|
||||
} from "../../common/crypto.js"
|
||||
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// rtoswuhan1
|
||||
account: 'rtoswuhan1',
|
||||
// 123456
|
||||
password: '123456',
|
||||
// q123456
|
||||
password: 'q123456',
|
||||
// 登录类型 pad
|
||||
mediaType: "app",
|
||||
// 登录失败提示
|
||||
errorTitle: "",
|
||||
// 弹框状态
|
||||
type: "",
|
||||
portList: [],
|
||||
portId: "",
|
||||
portName: "",
|
||||
activeIndex: 0,
|
||||
// 登录接口成功后返回值
|
||||
loginObj: {},
|
||||
lotusLoadingData: {
|
||||
isShow: false //设置显示加载中组件true显示false隐藏
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.portList = [{
|
||||
value: "1",
|
||||
title: "港区1"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
title: "港区2"
|
||||
},
|
||||
{
|
||||
value: "3",
|
||||
title: "港区3"
|
||||
},
|
||||
]
|
||||
components: {
|
||||
LotusLoading
|
||||
},
|
||||
methods: {
|
||||
// 登录
|
||||
loginGo(type) {
|
||||
if (this.account == "rtoswuhan1" && this.password == "123456") {
|
||||
if (this.portList.length > 0) {
|
||||
this.$refs.popup.open(type)
|
||||
this.portId = this.portList[0].value
|
||||
this.portName = this.portList[0].title
|
||||
} else {
|
||||
this.$refs.popup2.open()
|
||||
}
|
||||
this.lotusLoadingData.isShow = true
|
||||
this.type = type
|
||||
let pwd = encrypt(this.password)
|
||||
let data = {
|
||||
account: this.account,
|
||||
mediaType: this.mediaType,
|
||||
password: pwd,
|
||||
}
|
||||
uni.request({
|
||||
url: `${this.$local}/api/app/login`,
|
||||
data: data,
|
||||
header: {
|
||||
'Content-Type': 'application/json' //自定义请求头信息
|
||||
},
|
||||
method: 'POST', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
this.lotusLoadingData.isShow = false
|
||||
if (res.statusCode == "200") {
|
||||
this.loginObj = res.data.data
|
||||
uni.setStorageSync('loginObj', this.loginObj);
|
||||
this.portData()
|
||||
} else {
|
||||
if (res.data.error_description != null) {
|
||||
this.errorTitle = `${res.data.error_description}，请重新登录。如有疑问请联系管理员。"`
|
||||
} else {
|
||||
this.errorTitle = "网络错误，请重试！"
|
||||
}
|
||||
this.$refs.popup3.open()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取港区
|
||||
portData() {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/app/user/getMinato?mediaType=${this.mediaType}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == 200) {
|
||||
let newData = res.data.data
|
||||
for (let key in newData) {
|
||||
if (newData.hasOwnProperty(key)) {
|
||||
this.portList.push({
|
||||
pamId: key,
|
||||
pamName: newData[key]
|
||||
})
|
||||
}
|
||||
}
|
||||
if (this.portList.length > 0) {
|
||||
this.$refs.popup.open(this.type)
|
||||
this.portId = this.portList[0].pamId
|
||||
this.portName = this.portList[0].pamName
|
||||
} else {
|
||||
this.$refs.popup2.open()
|
||||
}
|
||||
} else {
|
||||
this.errorTitle = res.data.error_description + "，请重新登录。如有疑问请联系管理员。"
|
||||
this.$refs.popup3.open()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 弹框
|
||||
change(e) {},
|
||||
// 选择弹框内容
|
||||
selectPort(item, index) {
|
||||
this.portName = item.title
|
||||
this.portId = item.value
|
||||
this.portName = item.pamName
|
||||
this.portId = item.pamId
|
||||
this.activeIndex = index
|
||||
},
|
||||
// 确认弹框
|
||||
toGo() {
|
||||
let portObj = {
|
||||
portName: this.portName,
|
||||
portId: this.portId
|
||||
}
|
||||
uni.setStorageSync('portObj', portObj)
|
||||
uni.setStorageSync('selectPortIndex', this.activeIndex)
|
||||
this.$refs.popup.close()
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
uni.request({
|
||||
url: `${this.$local}/api/app/user/setMinato?mediaType=${this.mediaType}&pamNo=${this.portId}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.data.status == 200) {
|
||||
let portObj = {
|
||||
portName: this.portName,
|
||||
portId: this.portId
|
||||
}
|
||||
uni.setStorageSync('portObj', portObj)
|
||||
uni.setStorageSync('selectPortIndex', this.activeIndex)
|
||||
this.$refs.popup.close()
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
this.open()
|
||||
this.createTable()
|
||||
} else {
|
||||
if (res.data.error_description != null) {
|
||||
this.errorTitle = `${res.data.error_description}，请重新登录。如有疑问请联系管理员。"`
|
||||
} else {
|
||||
this.errorTitle = "网络错误，请重试！"
|
||||
}
|
||||
this.$refs.popup3.open()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭弹框
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
// 打开数据库
|
||||
open() {
|
||||
plus.sqlite.openDatabase({
|
||||
name: 'dianji_chat',
|
||||
path: '_doc/dianji_chat.db',
|
||||
success: function(e) {},
|
||||
fail: function(e) {}
|
||||
});
|
||||
},
|
||||
// 创建所有数据库
|
||||
createTable() {
|
||||
tableList.createAllTable()
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -104,33 +215,92 @@
|
|||
.login {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
.leftImg {
|
||||
flex: 4;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.pBox {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 16.2%;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 36px;
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
border: 1px solid #999;
|
||||
margin: 0 auto;
|
||||
padding: 30px;
|
||||
flex: 6;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.loginTop {
|
||||
width: 172px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.loginInfo {
|
||||
width: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.loginTitle {
|
||||
font-size: 20px;
|
||||
color: #445173;
|
||||
font-weight: 600;
|
||||
padding-bottom: 21px;
|
||||
border-bottom: 2px solid #F0F0F0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loginInput {
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/deep/.is-input-border {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.popupBox {
|
||||
width: 400px;
|
||||
height: 330px;
|
||||
width: 280px;
|
||||
height: 320px;
|
||||
overflow: scroll;
|
||||
padding: 30px;
|
||||
|
||||
.popupTitle {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #23262E;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.ul {
|
||||
padding: 30px;
|
||||
|
||||
.li {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -141,12 +311,26 @@
|
|||
}
|
||||
|
||||
.btnBox {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||
border-radius: 0 0 16px 16px;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
margin: 10px 20px;
|
||||
width: 170px;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
height: 36px;
|
||||
line-height: 18px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.btn:last-child {
|
||||
color: #fff;
|
||||
background-color: #0067CF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -156,12 +340,12 @@
|
|||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
letter-spacing: 4rpx;
|
||||
border-radius: 12rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 2px;
|
||||
height: 40px;
|
||||
background-color: #0079fe;
|
||||
margin-top: 50px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -339,6 +339,14 @@
|
|||
};
|
||||
}
|
||||
},
|
||||
onBackPress(options) {
|
||||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||||
if (options.from == 'backbutton') {
|
||||
return true;
|
||||
} else if (options.from == 'navigateBack') {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
components: {
|
||||
HeadInfo,
|
||||
|
|
@ -517,7 +525,6 @@
|
|||
|
||||
/deep/.van-icon {
|
||||
transform: scale(0.8);
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,41 +3,40 @@
|
|||
<head-view title="船名/航次"></head-view>
|
||||
<view class="container">
|
||||
<view class="userInfo">
|
||||
<p>填报人：张星星</p>
|
||||
<p>上报部门：安全质量部</p>
|
||||
<p>填报人：{{infoData.qdReportPerson}}</p>
|
||||
<p>上报部门：{{infoData.qrpDept}}</p>
|
||||
</view>
|
||||
<view class="formTitle">
|
||||
基本信息
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li flexLi">
|
||||
<p class="liTitle">质损发生环节</p>
|
||||
<view class="ul zsInfo">
|
||||
<view class="li">
|
||||
<p>质损发生环节</p>
|
||||
<view class="rightInfo">
|
||||
<p>客户反馈</p>
|
||||
<p>这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的描述
|
||||
<p>{{infoData.qdLinkName}} </p>
|
||||
<p v-if="infoData.linkFeedback != '' || infoData.linkOther != ''">
|
||||
备注：{{infoData.linkFeedback}}{{infoData.linkOther}}
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li">
|
||||
<p class="liTitle">板车照片</p>
|
||||
<view class="picture">
|
||||
<image src="../../static/images/testImg.jpg" v-for="item in 3"></image>
|
||||
<template v-for="item in boardCarPhotos">
|
||||
<image :key="item" :src="item" mode="widthFix"></image>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p class="liTitle">板车车牌照</p>
|
||||
<view class="picture">
|
||||
<image src="../../static/images/testImg.jpg" v-for="item in 3"></image>
|
||||
<template v-for="item in boardCarList">
|
||||
<image :key="item" :src="item" mode="widthFix"></image>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li flexLi">
|
||||
<p class="liTitle">质损负责人</p>
|
||||
<p>张砰砰</p>
|
||||
</view>
|
||||
<view class="li flexLi">
|
||||
<p class="liTitle">签名</p>
|
||||
<p>张砰砰</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="formTitle">
|
||||
质损信息
|
||||
|
|
@ -45,61 +44,96 @@
|
|||
<view class="ul zsInfo">
|
||||
<view class="li">
|
||||
<p>车架号/条形码：</p>
|
||||
<p>1000000000</p>
|
||||
<p>{{infoData.vinCode}}</p>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>船名/航次：</p>
|
||||
<p>运程10/HC98685976</p>
|
||||
<p>{{infoData.spmIdAndVvyId}}</p>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车型：</p>
|
||||
<p>1000000000</p>
|
||||
<p>{{infoData.bvmName}}</p>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>品牌：</p>
|
||||
<p>这是一个品牌</p>
|
||||
<p>{{infoData.brdName}}</p>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>场位：</p>
|
||||
<p>1000000000</p>
|
||||
<p>{{infoData.pos}}</p>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>质损时间：</p>
|
||||
<p>2023/09/08 23:00:00</p>
|
||||
<p>{{infoData.qualityDamageTime}}</p>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>质损货物品类：</p>
|
||||
<p>商品车</p>
|
||||
<view class="rightInfo">
|
||||
<p>{{infoData.qdGodsCategoryName}}</p>
|
||||
<p v-if="infoData.qdGcOther != ''">
|
||||
备注：{{infoData.qdGcOther}}
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li imgLi">
|
||||
<image src="../../static/images/car1.png"></image>
|
||||
<image src="../../static/images/car2.png"></image>
|
||||
<image src="../../static/images/car3.png"></image>
|
||||
<image src="../../static/images/car4.png"></image>
|
||||
<image src="../../static/images/car5.png"></image>
|
||||
<view class="li imageLi">
|
||||
<image :src="zsImg" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="li tsLi">
|
||||
<p>质损概况：</p>
|
||||
<p>其他 这是一段关于其他的描述</p>
|
||||
<view class="rightInfo">
|
||||
<p>{{infoData.qdGodsCategoryName}}</p>
|
||||
<p v-if="infoData.qdGcOther != ''">
|
||||
备注：{{infoData.qdGcOther}}
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li tsLi">
|
||||
<p>损伤情况：</p>
|
||||
<p>磕伤（点状）</p>
|
||||
<view class="rightInfo">
|
||||
<p>{{infoData.damageSituationName}}</p>
|
||||
<p v-if="infoData.dsOther != ''">
|
||||
备注：{{infoData.dsOther}}
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li tsLi">
|
||||
<p>处置情况：</p>
|
||||
<p>取消发运</p>
|
||||
<view class="rightInfo">
|
||||
<p>{{infoData.disposalSituationName}}</p>
|
||||
<p v-if="infoData.dpsOther != ''">
|
||||
备注：{{infoData.dpsOther}}
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li zpLi">
|
||||
<p class="liTitle">质损照片</p>
|
||||
<view class="picture">
|
||||
<image src="../../static/images/testImg.jpg" v-for="item in 6"></image>
|
||||
<template v-for="item in qualityDamage">
|
||||
<image :key="item" :src="item" mode="widthFix"></image>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="li zpLi">
|
||||
<p class="liTitle">车架号图片</p>
|
||||
<view class="picture">
|
||||
<image src="../../static/images/testImg.jpg" alt="" v-for="item in 9"></image>
|
||||
<template v-for="item in carFrameNumber">
|
||||
<image :key="item" :src="item" mode="widthFix"></image>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="formTitle">
|
||||
签字
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li flexLi">
|
||||
<p class="liTitle">质损负责人</p>
|
||||
<p>{{infoData.qdLiablePerson}}</p>
|
||||
</view>
|
||||
<view class="li flexLi">
|
||||
<p class="liTitle">签名</p>
|
||||
<view class="picture">
|
||||
<image :src="signImg" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -113,9 +147,95 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
ygqId: "",
|
||||
loginObj: {},
|
||||
infoData: {},
|
||||
// 板车照片
|
||||
boardCarPhotos: [],
|
||||
// 板车车牌照
|
||||
boardCarList: [],
|
||||
// 质损照片
|
||||
qualityDamage: [],
|
||||
// 车架号图片
|
||||
carFrameNumber: [],
|
||||
// 签名图片
|
||||
signImg: "",
|
||||
// 质损参考图
|
||||
zsImg: "",
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if ('params' in options) {
|
||||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||
this.ygqId = JSON.parse(decodeURIComponent(options.params)).ygqId
|
||||
}
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/goodsQuality/getDetail?ygqId=${this.ygqId}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode == 200) {
|
||||
this.infoData = res.data.data
|
||||
// 获取板车照片
|
||||
this.infoData.boardCarPhotos.forEach(v => {
|
||||
this.initImg(v.filePath, "1")
|
||||
})
|
||||
// 获取板车车牌照
|
||||
this.infoData.boardCarLicensePlates.forEach(v => {
|
||||
this.initImg(v.filePath, "2")
|
||||
})
|
||||
// 获取质损照片
|
||||
this.infoData.qualityDamagePhotos.forEach(v => {
|
||||
this.initImg(v.filePath, "3")
|
||||
})
|
||||
// 获取车架号图片
|
||||
this.infoData.carFrameNumberPhotos.forEach(v => {
|
||||
this.initImg(v.filePath, "4")
|
||||
})
|
||||
this.initImg(this.infoData.signUrl, "5")
|
||||
this.initImg(this.infoData.refImageUrl, "6")
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// type 1 板车照片 2板车车牌照 3质损照片 4车架号图片 5签名 6参考图
|
||||
initImg(fileName, type) {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/file/url/?fileName=${fileName}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
if (type == 1) {
|
||||
this.boardCarPhotos.push(res.data)
|
||||
} else if (type == 2) {
|
||||
this.boardCarList.push(res.data)
|
||||
} else if (type == 3) {
|
||||
this.qualityDamage.push(res.data)
|
||||
} else if (type == 4) {
|
||||
this.carFrameNumber.push(res.data)
|
||||
} else if (type == 5) {
|
||||
this.signImg = res.data
|
||||
} else if (type == 5) {
|
||||
this.zsImg = res.data
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 取消
|
||||
cancel() {
|
||||
uni.navigateTo({
|
||||
|
|
@ -151,6 +271,14 @@
|
|||
.ul {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.rightInfo {
|
||||
display: flex;
|
||||
|
||||
p {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.flexLi {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -165,12 +293,6 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rightInfo {
|
||||
p:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.picture {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
|
|
@ -181,8 +303,9 @@
|
|||
height: 120px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -208,34 +331,9 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.imgLi {
|
||||
.imageLi {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
height: 400px;
|
||||
|
||||
image {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
image:nth-of-type(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
image:nth-of-type(2) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
image:nth-of-type(3) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
image:nth-of-type(4) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
image:nth-of-type(5) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,83 +4,80 @@
|
|||
<view class="container">
|
||||
<view class="content">
|
||||
<view class="form">
|
||||
<button type="primary" class="button" @click="add">
|
||||
<button type="primary" class="button" @click="modify('add','')">
|
||||
<uni-icons type="plusempty" color="#fff" size="20"></uni-icons>新增
|
||||
</button>
|
||||
<view class="right">
|
||||
<uni-easyinput suffixIcon="search" v-model="value" placeholder="船名/航次" @iconClick="iconClick">
|
||||
</uni-easyinput>
|
||||
<view class="select">
|
||||
<uni-data-select v-model="value1" :localdata="range1" @change="change">
|
||||
</uni-data-select>
|
||||
</view>
|
||||
<view class="select">
|
||||
<uni-data-select v-model="value2" :localdata="range2" @change="change">
|
||||
</uni-data-select>
|
||||
</view>
|
||||
<view class="select">
|
||||
<uni-data-select v-model="value3" :localdata="range3" @change="change">
|
||||
</uni-data-select>
|
||||
</view>
|
||||
<superwei-combox class="select" :candidates="shipList" :isJSON="true" keyName="vslCnname"
|
||||
placeholder="请选择船名" v-model="shipValue" @select="shipChange"></superwei-combox>
|
||||
<superwei-combox class="select" :candidates="brandList" :isJSON="true" keyName="brdName"
|
||||
placeholder="请选择品牌" v-model="brandValue" @select="brandChange"></superwei-combox>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="itemList">
|
||||
<view class="item" v-for="item in itemList" :key="item.index">
|
||||
<view class="row">
|
||||
<view class="col weight">
|
||||
CJH290387532753799
|
||||
<template v-if="itemList.length > 0">
|
||||
<view class="item" v-for="(item,index) in itemList" :key="index" @click="details(item)">
|
||||
<view class="row">
|
||||
<view class="col weight">
|
||||
{{item.vinCode}}
|
||||
</view>
|
||||
<view class="col">
|
||||
品牌：{{item.brdName}}
|
||||
</view>
|
||||
<view class="col">
|
||||
货物状态：{{item.godStatusName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="col">
|
||||
品牌：特斯拉
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
航次/船名：{{item.spmIdAndVvyId}}
|
||||
</view>
|
||||
<view class="col">
|
||||
车型：{{item.bvmName}}
|
||||
</view>
|
||||
<view class="col">
|
||||
场位：{{item.pos}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="col">
|
||||
车型：轿车
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
作业时间：{{item.workTime}}
|
||||
</view>
|
||||
<view class="col">
|
||||
作业人：{{item.qdLiablePerson}}
|
||||
</view>
|
||||
<view class="col">
|
||||
质损发生环节：{{item.qdLinkName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
质损概况：{{item.damageSituationName}}
|
||||
</view>
|
||||
<view class="col">
|
||||
处置情况：{{item.disposalSituationName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="rowFoot">
|
||||
<view class="col" @click.stop="modify('edit',item)">
|
||||
编辑
|
||||
</view>
|
||||
<view class="col" @click.stop="del(item)">
|
||||
删除
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
船名：运程10
|
||||
</view>
|
||||
<view class="col">
|
||||
航次：HC867468096
|
||||
</view>
|
||||
<view class="col">
|
||||
场位：A2-09-08
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
货物状态：已装船
|
||||
</view>
|
||||
<view class="col">
|
||||
作业时间：2023/09/08 14:00
|
||||
</view>
|
||||
<view class="col">
|
||||
作业人：张星星
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="col">
|
||||
质损发生环节：收车交接
|
||||
</view>
|
||||
<view class="col">
|
||||
质损概况：碰撞
|
||||
</view>
|
||||
<view class="col">
|
||||
处置情况：带伤发运
|
||||
</view>
|
||||
</view>
|
||||
<view class="rowFoot">
|
||||
<view class="col" @click="details">
|
||||
详情
|
||||
</view>
|
||||
<view class="col" @click="edit">
|
||||
编辑
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||
</view>
|
||||
<view class="pageBox" v-if="itemList.length > 0">
|
||||
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
||||
@change="changePage" />
|
||||
</view>
|
||||
<uni-popup ref="popup" type="dialog">
|
||||
<uni-popup-dialog confirmText="确定" content="是否退出登录？" @confirm="delConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -92,60 +89,183 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
range1: [{
|
||||
value: 0,
|
||||
text: "一号港"
|
||||
}, ],
|
||||
range2: [{
|
||||
value: 0,
|
||||
text: "一号港"
|
||||
}, ],
|
||||
range3: [{
|
||||
value: 0,
|
||||
text: "一号港"
|
||||
}, ],
|
||||
itemList: [1, 1, 1, 1, 2, 1, 1, 1, 1],
|
||||
loginObj: {},
|
||||
// 查询值
|
||||
queryValue: '',
|
||||
// 品牌下拉
|
||||
brandId: "",
|
||||
brandValue: "",
|
||||
brandList: [],
|
||||
// 列表数据
|
||||
itemList: [],
|
||||
// 分页
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
current: 1,
|
||||
// 当前行数据
|
||||
rowInfo: {},
|
||||
|
||||
// 港区信息
|
||||
portObj: {},
|
||||
|
||||
// 船名下拉
|
||||
shipList: [],
|
||||
shipId: "",
|
||||
shipValue: "",
|
||||
vvyId: "",
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.portObj = uni.getStorageSync('portObj')
|
||||
uni.setStorageSync('signObj', "")
|
||||
this.initData()
|
||||
this.getBrand()
|
||||
this.getShip()
|
||||
},
|
||||
onBackPress(options) {
|
||||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||||
if (options.from == 'backbutton') {
|
||||
return true;
|
||||
} else if (options.from == 'navigateBack') {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
HeadInfo
|
||||
},
|
||||
methods: {
|
||||
iconClick(type) {
|
||||
uni.showToast({
|
||||
title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
|
||||
icon: 'none'
|
||||
// 获取列表数据
|
||||
initData() {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/goodsQuality/page?current=${this.current}&page=${this.pageSize}&brdId=${this.brandId}&vvyId=${this.vvyId}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode == 200) {
|
||||
this.itemList = res.data.data.records
|
||||
this.total = res.data.data.total
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
// 点击新增
|
||||
add() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/quality/edit'
|
||||
// 获取船名
|
||||
getShip() {
|
||||
let ieType = ""
|
||||
let key = ""
|
||||
let pamId = this.portObj.portId
|
||||
let spmId = ""
|
||||
let tradeType = ""
|
||||
uni.request({
|
||||
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${tradeType}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
console.log(res)
|
||||
this.shipList = res.data.data
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击编辑
|
||||
edit() {
|
||||
// 船名/航次
|
||||
shipChange(e) {
|
||||
this.shipId = e.vslCd
|
||||
this.shipValue = e.vslCnname
|
||||
this.vvyId = e.vvyId
|
||||
this.current = 1
|
||||
this.initData()
|
||||
},
|
||||
// 获取品牌
|
||||
getBrand() {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/miniapp/queryBrand`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
this.brandList = res.data.data
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 品牌下拉选择
|
||||
brandChange(e) {
|
||||
this.brandId = e.brdId
|
||||
this.brandValue = e.brdName
|
||||
this.current = 1
|
||||
this.initData()
|
||||
},
|
||||
// 点击新增/编辑
|
||||
modify(type, item) {
|
||||
let obj = {
|
||||
type: type,
|
||||
ygqId: item.ygqId
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: '/pages/quality/edit'
|
||||
url: `/pages/quality/edit?params=${params}`
|
||||
})
|
||||
},
|
||||
// 点击详情
|
||||
details() {
|
||||
details(item) {
|
||||
let obj = {
|
||||
ygqId: item.ygqId
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: '/pages/quality/details'
|
||||
url: `/pages/quality/details?params=${params}`
|
||||
|
||||
})
|
||||
},
|
||||
// 点击删除
|
||||
del(item) {
|
||||
this.$refs.popup.open()
|
||||
this.rowInfo = item
|
||||
},
|
||||
// 删除确认
|
||||
delConfirm() {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/goodsQuality/delQuality/${this.rowInfo.ygqId}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'DELETE', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode == 200) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
title: '删除成功'
|
||||
});
|
||||
this.initData()
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: `${res.data.error_description}`
|
||||
});
|
||||
this.initData()
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击分页
|
||||
changePage(e) {
|
||||
this.current = e.current;
|
||||
this.initData()
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -167,19 +287,19 @@
|
|||
|
||||
.button {
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 600px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.select {
|
||||
width: 130px;
|
||||
height: 35px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -206,7 +326,6 @@
|
|||
width: 22%;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.col {
|
||||
|
|
@ -215,12 +334,25 @@
|
|||
|
||||
.rowFoot {
|
||||
width: 12%;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #1890ff;
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.col:last-child {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageBox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="sign">
|
||||
<head-view title="场位监控签名"></head-view>
|
||||
<head-view title="签名"></head-view>
|
||||
<view class="container">
|
||||
<view class="sign-box">
|
||||
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
|
||||
|
|
@ -17,6 +17,13 @@
|
|||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
pathToBase64,
|
||||
base64ToPath
|
||||
} from '../../js_sdk/mmmm-image-tools/index.js'
|
||||
import {
|
||||
compressImgBySize
|
||||
} from '@/common/compressImg'
|
||||
import utils from '@/common/util.js';
|
||||
var x = 20;
|
||||
var y = 20;
|
||||
|
|
@ -33,9 +40,10 @@
|
|||
points: [], //路径点集合,
|
||||
width: 0,
|
||||
height: 0,
|
||||
loginObj: {},
|
||||
signImg: "",
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
onLoad(option) {
|
||||
that = this;
|
||||
id = option.id;
|
||||
|
|
@ -53,6 +61,8 @@
|
|||
that.height = res.windowHeight * 0.85;
|
||||
}
|
||||
});
|
||||
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
},
|
||||
methods: {
|
||||
//触摸开始，获取到起点
|
||||
|
|
@ -126,6 +136,7 @@
|
|||
|
||||
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||
handleConfirm: function() {
|
||||
let that = this
|
||||
if (tempPoint.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先签名',
|
||||
|
|
@ -133,38 +144,57 @@
|
|||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(res) {
|
||||
let tempPath = res.tempFilePath;
|
||||
console.log(tempPath, '压缩前')
|
||||
// 示例用法
|
||||
utils.compress(tempPath, 500, 0.3).then(res => {
|
||||
console.log(res, '压缩后');
|
||||
}); //conpress封装的压缩方法; //conpress封装的压缩方法
|
||||
const ctx = uni.createCanvasContext('camCacnvs', that);
|
||||
ctx.translate(0, that.width);
|
||||
ctx.rotate((-90 * Math.PI) / 180);
|
||||
ctx.drawImage(tempPath, 0, 0, that.width, that.height);
|
||||
ctx.draw();
|
||||
setTimeout(() => {
|
||||
//保存签名图片到本地
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'camCacnvs',
|
||||
success: function(res) {
|
||||
//这是签名图片文件的本地临时地址
|
||||
let path = res.tempFilePath;
|
||||
},
|
||||
fail: err => {
|
||||
console.log('fail', err);
|
||||
}
|
||||
} else {
|
||||
let that = this
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(e) {
|
||||
let timestamp = new Date().getTime();
|
||||
let sunumber = Math.floor(Math.random() * 999);
|
||||
var file = that.base64ToFile(e.tempFilePath, timestamp + sunumber)
|
||||
uni.uploadFile({
|
||||
url: `${that.$local}/api/file/upload`, //上传图片api
|
||||
header: {
|
||||
'Authorization': `Bearer ${that.loginObj.access_token}`
|
||||
},
|
||||
this
|
||||
);
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
file: file,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
success: (res) => {
|
||||
console.log(JSON.parse(res.data))
|
||||
that.signImg = JSON.parse(res.data).data.filePath
|
||||
let signObj = {
|
||||
signImg: that.signImg,
|
||||
}
|
||||
uni.setStorageSync('signObj', signObj)
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
base64ToFile(base64, name) {
|
||||
if (typeof base64 != 'string') {
|
||||
return;
|
||||
}
|
||||
var arr = base64.split(',')
|
||||
var type = arr[0].match(/:(.*?);/)[1]
|
||||
var fileExt = type.split('/')[1]
|
||||
var bstr = atob(arr[1])
|
||||
var n = bstr.length
|
||||
var u8arr = new Uint8Array(n)
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n)
|
||||
}
|
||||
return new File([u8arr], `${name}.` + fileExt, {
|
||||
type: type
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
@ -178,7 +208,6 @@
|
|||
}
|
||||
|
||||
.sign-box {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
margin-left: 10%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/hc.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
const dataType = encodeURIComponent(JSON.stringify(objType));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?dataType=${dataType}`
|
||||
url: `/pages/shipWork/abnormalSign?dataType=${dataType}`
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
|
|
|
|||
|
|
@ -0,0 +1,377 @@
|
|||
<template>
|
||||
<view class="noticeSign">
|
||||
<head-view :title="title" url="/pages/shipWork/abnormal"></head-view>
|
||||
<custom-tabs type="c1" :value="tabsValue" @change="tabsChange">
|
||||
<custom-tab-pane :label="item.name" v-for="(item,index) in tabsList" :name="'c1_'+index" :key="index">
|
||||
<view></view>
|
||||
<view class="container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h-l1r1">
|
||||
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix">
|
||||
</image>
|
||||
</td>
|
||||
<td class="h-l1r2"> </td>
|
||||
<td class="h-l1r3">
|
||||
<p>上海海通国际汽车码头有限公司</p>
|
||||
<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="bh-dz">QR-7.5.1-01-11-M</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="h-l2r1">
|
||||
<p class="name-dz">海通码头异常情况告知书单</p>
|
||||
<p class="ename-dz">Emergency Notice</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-main2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>船名：</p>
|
||||
<p>Name of Ship </p>
|
||||
</td>
|
||||
<td class="td2">
|
||||
<p>{{shipInfo.vslCnname}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="t-zx">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text">Earlier this month ,one of EUKOR vessels was blown away more than 10
|
||||
meters
|
||||
from berth by
|
||||
a suddenly extraordinary wind （speed >40M/S）within few seconds. The thunder
|
||||
storm
|
||||
warning had been forecasted just 5 minutes ago before the crisis, which left us
|
||||
few time
|
||||
to deal with. Fortunately the wind lasted very short time and no damage
|
||||
happened. Also
|
||||
in the summer time during the last 5 years some similar dangerous situation
|
||||
occurred due
|
||||
to the same reason. In order to avoid further accidents please obey the
|
||||
following
|
||||
requirements or your side will be held responsible for all the consequences
|
||||
arising
|
||||
there from. </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 本月初，有一艘EUKOR船公司的滚装船在几秒钟之内就被突风(风速>40米/秒)吹离泊位超过10米远。
|
||||
而雷电风暴气象警告仅仅在事发前5分钟才发布预警，导致几乎没有时间去做防范工作。 幸运的是突风持续时间很短，所以没有造成任何破坏性后果。
|
||||
在过去5年的夏天，由于同样的原因，也发生过类似的事故。 所以为了避免再次发生类似的事故，请您遵守以下规定，否则您将对其产生的一切后果负责。 </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 1.Take breast lines when berthing. </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 1. 靠泊时请在船头和船尾各加带横缆</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 2.Tighten all the lines and keep duty man patrolling all the time.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 2. 在泊期间请时刻保持缆绳处于收紧状态并安排专人进行巡检 </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 3.Stand by engine and bow thruster at once when informed by
|
||||
terminal or at
|
||||
any time in case of emergency. </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 3. 在发生紧急情况和接到码头通知后，请立即备车并启动侧推 </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 4. Prepare one more line fore and after on board for rescue. </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 4. 为了应对紧急情况，请你在船头和船尾各准备一根缆绳备用</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 5.Cooperate with terminal when needed for safety.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="text"> 5. 为了您的船舶安全，请您配合码头采取的进一步防范措施。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<view class="sginBox">
|
||||
<view class="box">
|
||||
<p>通知人员:</p>
|
||||
<p class="sign" @click="togoSign('0')" v-if="zdySign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="zdySign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(zdySign.id)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="box">
|
||||
<p> 船方(Capt/Chief Mate):</p>
|
||||
<p class="sign" @click="togoSign('1')" v-if="czSign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="czSign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(czSign.id)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sginBox">
|
||||
<view class="box">
|
||||
<p>日期:</p>
|
||||
<p class="date">2023-11-11</p>
|
||||
</view>
|
||||
<view class="box">
|
||||
<p>日期:</p>
|
||||
<p class="date">2023-11-11</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</custom-tab-pane>
|
||||
</custom-tabs>
|
||||
<uni-popup ref="delPopup" type="dialog">
|
||||
<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
|
||||
@confirm="delConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "异常情况签名",
|
||||
tabsValue: 0,
|
||||
tabsList: [],
|
||||
// 船舶信息
|
||||
shipInfo: {},
|
||||
// 表内数据
|
||||
tableInfo: [],
|
||||
// 签名信息
|
||||
zdySign: {
|
||||
url: "",
|
||||
id: ""
|
||||
},
|
||||
czSign: {
|
||||
url: "",
|
||||
id: ""
|
||||
},
|
||||
delId: "",
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if ('params' in option) {
|
||||
this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.executeSql('shipInfoTable')
|
||||
},
|
||||
methods: {
|
||||
// 查船舶信息
|
||||
executeSql(tableName) {
|
||||
let sql = `select * from ${tableName}`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.shipInfo = value[0]
|
||||
this.executeSql1('abnormalConditionRespList', this.tabsValue)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查异常情况信息
|
||||
executeSql1(tableName, tabsValue) {
|
||||
let sql = `select * from ${tableName} WHERE vvyId='${this.shipInfo.vvyId}'`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.tabsList = []
|
||||
this.tableInfo = value[tabsValue]
|
||||
value.forEach((v, index) => {
|
||||
let obj = {
|
||||
name: `异常情况${index + 1}`,
|
||||
}
|
||||
this.tabsList.push(obj)
|
||||
this.executeSql2()
|
||||
})
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查单证签字表
|
||||
executeSql2() {
|
||||
let sql = `select * from workSignTable WHERE signId = '${this.tableInfo.webId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
let zdyList = []
|
||||
let czList = []
|
||||
if (value.length > 0) {
|
||||
value.forEach(v => {
|
||||
if (v.signType == '0') {
|
||||
this.zdySign = {
|
||||
url: v.url,
|
||||
id: v.webId
|
||||
}
|
||||
zdyList.push(v)
|
||||
} else {
|
||||
this.czSign = {
|
||||
url: v.url,
|
||||
id: v.webId
|
||||
}
|
||||
czList.push(v)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (zdyList.length == 0) {
|
||||
this.zdySign = {
|
||||
url: "",
|
||||
id: ""
|
||||
}
|
||||
}
|
||||
if (czList.length == 0) {
|
||||
this.czSign = {
|
||||
url: "",
|
||||
id: ""
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 标签切换
|
||||
tabsChange(e) {
|
||||
this.tabsValue = e.value
|
||||
this.executeSql1('abnormalConditionRespList', e.value)
|
||||
},
|
||||
// 点击签名
|
||||
togoSign(signType) {
|
||||
let obj = {
|
||||
id: this.tableInfo.webId,
|
||||
url: "abnormalSign",
|
||||
signType: signType, // 0 指导员 1 船长/大副
|
||||
signTable: "abnormal",
|
||||
tabsValue: this.tabsValue,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?params=${params}`
|
||||
})
|
||||
},
|
||||
// 删除当前签名
|
||||
delSign(id) {
|
||||
this.$refs.delPopup.open()
|
||||
this.delId = id
|
||||
},
|
||||
// 弹框删除
|
||||
delConfirm() {
|
||||
let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../../style/css/main-dz.css";
|
||||
|
||||
.container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#t-main2 .td1 {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#t-main2 .td2 {
|
||||
width: 70px;
|
||||
text-align: left;
|
||||
border-bottom: #000000 solid 1px;
|
||||
|
||||
p {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#t-xjl .td1 {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#t-xjl .td2 {
|
||||
text-align: left;
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
|
||||
.sginBox {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.del {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-left: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.sign {
|
||||
color: #2979ff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,12 +5,12 @@
|
|||
<view class="container">
|
||||
<view class="workBox">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/zydz.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/zydz.png" mode="widthFix"></image>
|
||||
<text>作业单证</text>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="toGo(item.url)">
|
||||
<image :src="item.imgUrl" mode=""></image>
|
||||
<image :src="item.imgUrl" mode="widthFix"></image>
|
||||
<p>{{item.name}}</p>
|
||||
<view class="uploadStatus" v-if="!item.status">
|
||||
<text>未上传</text>
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
</view>
|
||||
<view class="workBox">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/qtzy.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/qtzy.png" mode="widthFix"></image>
|
||||
<text>其他作业</text>
|
||||
</view>
|
||||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in otherListh" :key="index" @click="toGo(item.url)">
|
||||
<image :src="item.imgUrl" mode=""></image>
|
||||
<image :src="item.imgUrl" mode="widthFix"></image>
|
||||
<p>{{item.name}}</p>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
data() {
|
||||
return {
|
||||
title: "船名：海王星领袖 / 进口航次：29089473289 / 出口航次：12083772682998376",
|
||||
noticeText: "uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。",
|
||||
noticeText: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试。",
|
||||
infoList: [{
|
||||
name: "杂项作业单",
|
||||
url: "mixWork",
|
||||
|
|
|
|||
|
|
@ -5,25 +5,25 @@
|
|||
<view class="content">
|
||||
<view class="form">
|
||||
<view class="select">
|
||||
<superwei-combox :candidates="shipList" :isJSON="true" keyName="spmName" placeholder="请选择船名航次"
|
||||
v-model="shipName" @input="input_json" @select="select_json"></superwei-combox>
|
||||
<superwei-combox :candidates="shipList" :isJSON="true" keyName="shipVvyname"
|
||||
placeholder="请选择船名航次" v-model="shipVvyname" @input="input_json"
|
||||
@select="select_json"></superwei-combox>
|
||||
</view>
|
||||
<button class="searchBtn" type="default" @click="search">搜索</button>
|
||||
<button class="searchBtn" type="default" @click="open">打开数据库</button>
|
||||
<!-- <button class="searchBtn" type="default" @click="isOpen">判断</button> -->
|
||||
<!-- <button class="searchBtn" type="default" @click="createTable">创建</button>
|
||||
<button class="searchBtn" type="default" @click="dropTable">删除表</button> -->
|
||||
<!-- <button class="searchBtn" type="default" @click="dropData">删除数据</button> -->
|
||||
<!-- <button class="searchBtn" type="default" @click="executeSql1('shipOption')">查询</button> -->
|
||||
<button class="searchBtn" type="default" @click="createTable">创建</button>
|
||||
<button class="searchBtn" type="default" @click="dropTable">删除表</button>
|
||||
<button class="searchBtn" type="default" @click="dropData">删除数据</button>
|
||||
<button class="searchBtn" type="default" @click="executeSql1('shipOption')">查询</button>
|
||||
<button class="searchBtn" type="default" @click="delAll">批量删除</button>
|
||||
</view>
|
||||
<view class="itemList">
|
||||
<template v-if="itemList.length > 0">
|
||||
<view v-for="(item, index) in itemList" :key="index" class="item">
|
||||
<view @click="toGo(item)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/ship.png" mode=""></image>
|
||||
<image src="../../static/images/ship.png" mode="widthFix"></image>
|
||||
<view class="name">
|
||||
{{item.shipName}}
|
||||
{{item.spmName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="statusBox statusBox1">
|
||||
<view class="statusInfo" v-if="item.uploadTime != ''">
|
||||
<view class="statusInfo" v-if="item.uploadStatus == '1'">
|
||||
<text>已上传</text>
|
||||
<text>{{item.uploadTime}}</text>
|
||||
</view>
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="statusBox statusBox2">
|
||||
<view class="statusInfo" v-if="item.downloadTime != ''">
|
||||
<view class="statusInfo" v-if="item.downloadStatus == '1'">
|
||||
<text>已下载</text>
|
||||
<text>{{item.downloadTime}}</text>
|
||||
</view>
|
||||
|
|
@ -105,19 +105,25 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginObj: {},
|
||||
// 下载成功提示
|
||||
popupText: "",
|
||||
// 下载失败提示
|
||||
errorText: "",
|
||||
// 提示类型
|
||||
msgType: "",
|
||||
// 下载数据
|
||||
downloadData: {},
|
||||
|
||||
// 港口
|
||||
pamValue: "",
|
||||
portObj: {},
|
||||
// pamList: [],
|
||||
// 船名航次
|
||||
shipName: "",
|
||||
shipValue: '',
|
||||
spmId: "", // 船名ID
|
||||
spmName: '', // 船名
|
||||
vvyId: "", // 航次ID
|
||||
vvyName: "", // 航次名
|
||||
shipVvyname: "",
|
||||
shipList: [],
|
||||
shipInput: "",
|
||||
itemList: [],
|
||||
|
|
@ -126,37 +132,6 @@
|
|||
pageSize: 4,
|
||||
current: 1,
|
||||
|
||||
// 船舶基本信息
|
||||
shipInfo: {
|
||||
vslCd: "123",
|
||||
vslCnname: "测试船只",
|
||||
vvyId: "1",
|
||||
vvyName: "hc123",
|
||||
importExportFlag: "jinchukouId",
|
||||
importExportFlagName: "进口",
|
||||
tradeType: "maoyileixingId",
|
||||
tradeTypeName: "外贸"
|
||||
},
|
||||
// 船舶资料
|
||||
shipData: {
|
||||
vslCd: "123",
|
||||
vslCnname: "兰花快航",
|
||||
vslGton: "9535",
|
||||
vslNetton: "2861",
|
||||
vslLoa: "100.29",
|
||||
vslBreadth: "0",
|
||||
vslDraftunload: "0",
|
||||
vslDraftload: "0",
|
||||
spmCabinht: "0",
|
||||
spmMintide: "0",
|
||||
spmCab: "15",
|
||||
spmBoardCentrele: "0",
|
||||
spmBoardFrontle: "0",
|
||||
spmBoardLaterle: "0",
|
||||
spmBoardCentrerg: "0",
|
||||
spmBoardFrontrg: "0",
|
||||
spmBoardLaterrg: "0"
|
||||
},
|
||||
// 作业查询数据
|
||||
workList: [{
|
||||
agentId: "1",
|
||||
|
|
@ -206,178 +181,66 @@
|
|||
}
|
||||
],
|
||||
// 下拉数据
|
||||
optionData: [{
|
||||
dictionariesName: "epTypeList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "贸易方式一",
|
||||
},
|
||||
{
|
||||
dictionariesName: "epTypeList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "贸易方式二",
|
||||
}, {
|
||||
dictionariesName: "handTypeList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "装货",
|
||||
}, {
|
||||
dictionariesName: "handTypeList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "卸货",
|
||||
}, {
|
||||
dictionariesName: "loadTypeList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "Others",
|
||||
}, {
|
||||
dictionariesName: "loadTypeList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "Ro/Ro",
|
||||
}, {
|
||||
dictionariesName: "loadTypeList",
|
||||
ptrCode: "3",
|
||||
ptrDesc: "PortDevice",
|
||||
}, {
|
||||
dictionariesName: "ieTypeList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "出口",
|
||||
}, {
|
||||
dictionariesName: "ieTypeList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "进口",
|
||||
},
|
||||
{
|
||||
dictionariesName: "supplyTypeList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "供油",
|
||||
}, {
|
||||
dictionariesName: "supplyTypeList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "供水",
|
||||
}, {
|
||||
dictionariesName: "supplyTypeList",
|
||||
ptrCode: "3",
|
||||
ptrDesc: "供电",
|
||||
}, {
|
||||
dictionariesName: "supplyTypeList",
|
||||
ptrCode: "4",
|
||||
ptrDesc: "其他",
|
||||
}, {
|
||||
dictionariesName: "turnoverTypeList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "舱内翻",
|
||||
}, {
|
||||
dictionariesName: "turnoverTypeList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "舱外翻",
|
||||
webStatus: "0",
|
||||
}, {
|
||||
dictionariesName: "turnoverTypeList",
|
||||
ptrCode: "3",
|
||||
ptrDesc: "货物重装",
|
||||
}, {
|
||||
dictionariesName: "bthList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "泊位1",
|
||||
}, {
|
||||
dictionariesName: "bthList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "泊位2",
|
||||
}, {
|
||||
dictionariesName: "bthList",
|
||||
ptrCode: "3",
|
||||
ptrDesc: "泊位3",
|
||||
}, {
|
||||
dictionariesName: "carList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "轿车111",
|
||||
}, {
|
||||
dictionariesName: "carList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "备件",
|
||||
}, {
|
||||
dictionariesName: "carList",
|
||||
ptrCode: "3",
|
||||
ptrDesc: "大型轿车",
|
||||
}, {
|
||||
dictionariesName: "shiftList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "工班1",
|
||||
}, {
|
||||
dictionariesName: "shiftList",
|
||||
ptrCode: "2",
|
||||
ptrDesc: "工班2",
|
||||
}, {
|
||||
dictionariesName: "shiftList",
|
||||
ptrCode: "3",
|
||||
ptrDesc: "工班3",
|
||||
}, {
|
||||
dictionariesName: "vvyList",
|
||||
ptrCode: "1",
|
||||
ptrDesc: "hc123",
|
||||
}
|
||||
optionData: [],
|
||||
|
||||
// 批量删除表
|
||||
delList: ["shipInfoTable", "messageRespList", "workMessageRespList", "workMessageRespInfoList",
|
||||
"retallyMessageRespList", "infoRespList", "attachUnmoorRespList", "shipmentShipSupplyRespList",
|
||||
"shipmentAdviserLayoutRespList", "shipmentLoadUnloadNoticeRespList",
|
||||
"shipmentQualityConsultationRespList", "abnormalConditionRespList", "mafiListRespList",
|
||||
"safetyInspectionRespList", "safetyInspectionRespUrlList", "shipmentShipLoadPlansRespList",
|
||||
"shipOption", "workSignTable"
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
HeadInfo,
|
||||
},
|
||||
onBackPress(options) {
|
||||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||||
if (options.from == 'backbutton') {
|
||||
return true;
|
||||
} else if (options.from == 'navigateBack') {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.pamValue = uni.getStorageSync('portObj').portId
|
||||
// this.shipInfo = uni.getStorageSync('shipInfo').voyageScheduleDataList
|
||||
this.portObj = uni.getStorageSync('portObj')
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.getShip()
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
plus.sqlite.openDatabase({
|
||||
name: 'dianji_chat',
|
||||
path: '_doc/dianji_chat.db',
|
||||
success: function(e) {
|
||||
console.log('打开数据库成功')
|
||||
},
|
||||
fail: function(e) {
|
||||
console.log(e, '打开数据库失败')
|
||||
}
|
||||
});
|
||||
},
|
||||
isOpen() {
|
||||
let res = plus.sqlite.isOpenDatabase({
|
||||
name: 'dianji_chat',
|
||||
path: '_doc/dianji_chat.db',
|
||||
});
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '数据库已打开'
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '数据库未打开'
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
createTable() {
|
||||
tableList.createAllTable()
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
console.log('批量删除表');
|
||||
this.delList.forEach(v => {
|
||||
let sql = `DROP TABLE ${v};`
|
||||
this.executeSql(sql)
|
||||
})
|
||||
},
|
||||
dropTable() {
|
||||
console.log('删除表');
|
||||
let sql = 'DROP TABLE infoRespList;'
|
||||
let sql = 'shipInfoTable;'
|
||||
this.executeSql(sql)
|
||||
},
|
||||
dropData() {
|
||||
console.log('删除数据');
|
||||
let sql = "delete from retallyMessageRespList"
|
||||
let sql = "delete from shipOption"
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 查
|
||||
executeSql(sql) {
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
console.log(value)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查
|
||||
executeSql1(tableName) {
|
||||
let sql = 'select * from ' + tableName
|
||||
this.executeSql(sql)
|
||||
|
|
@ -385,33 +248,20 @@
|
|||
// 获取船的数据
|
||||
initData() {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/shipOperate/select?pamId=${this.pamValue}&vvyId=${this.shipValue}`,
|
||||
url: `${this.$local}/api/shipOperate/select?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&size=${this.pageSize}¤t=${this.current}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json' //自定义请求头信息
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode === 200) {
|
||||
this.total = res.data.data.records.length
|
||||
let newArr = this.getMapping(res.data.data.records, this.pageSize)
|
||||
this.itemList = newArr[this.current - 1];
|
||||
this.total = res.data.data.total
|
||||
this.itemList = res.data.data.records
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 分页切割数组(数组，分割个数)
|
||||
getMapping(list, num) {
|
||||
let len = list.length
|
||||
let newList = []
|
||||
if (len) {
|
||||
var chunk = num
|
||||
for (var i = 0, j = len; i < j; i += chunk) {
|
||||
newList.push(list.slice(i, i + chunk))
|
||||
}
|
||||
}
|
||||
return newList
|
||||
},
|
||||
// 点击分页
|
||||
changePage(e) {
|
||||
this.current = e.current;
|
||||
|
|
@ -422,100 +272,83 @@
|
|||
uni.request({
|
||||
url: `${this.$local}/api/shipOperate/queryShipmentVoyageData?key=${this.shipInput}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json' //自定义请求头信息
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode === 200) {
|
||||
this.shipList = res.data.data
|
||||
this.shipList.forEach(v => {
|
||||
this.$set(v, "shipVvyname", `${v.spmName}/${v.vvyName}`)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 船名航次下拉模糊查询
|
||||
input_json(e) {
|
||||
this.shipInput = e;
|
||||
this.getShip();
|
||||
this.shipInput = e
|
||||
if (e == "") {
|
||||
this.vvyId = ""
|
||||
}
|
||||
this.getShip()
|
||||
},
|
||||
// 船名航次下拉选项
|
||||
select_json(e) {
|
||||
this.shipValue = e.vvyId
|
||||
this.shipName = e.spmName
|
||||
console.log(e)
|
||||
this.vvyId = e.vvyId
|
||||
this.vvyName = e.vvyName
|
||||
this.spmId = e.spmId
|
||||
this.spmName = e.spmName
|
||||
},
|
||||
// 点击搜索
|
||||
search() {
|
||||
this.itemList = [{
|
||||
shipName: "海王星领袖",
|
||||
uploadTime: "2022-12-11 12:00:08",
|
||||
uploadStatusDesc: "已上传",
|
||||
downloadTime: "2022-12-12 12:00:08",
|
||||
downloadStatusDesc: "已下载",
|
||||
actualBerthageName: "一泊位",
|
||||
planBerthageName: "一泊位",
|
||||
outTradeTypeName: "外贸",
|
||||
outVvyName: "381527688",
|
||||
inTradeTypeName: "内贸",
|
||||
inVvyName: "381527688"
|
||||
}, {
|
||||
shipName: "海王星领袖",
|
||||
uploadTime: "",
|
||||
downloadTime: "",
|
||||
actualBerthageName: "一泊位",
|
||||
planBerthageName: "一泊位",
|
||||
outTradeTypeName: "外贸",
|
||||
outVvyName: "381527688",
|
||||
inTradeTypeName: "内贸",
|
||||
inVvyName: "381527688"
|
||||
}, {
|
||||
shipName: "海王星领袖",
|
||||
uploadTime: "2022-12-11 12:00:08",
|
||||
downloadTime: "",
|
||||
actualBerthageName: "一泊位",
|
||||
planBerthageName: "一泊位",
|
||||
outTradeTypeName: "外贸",
|
||||
outVvyName: "381527688",
|
||||
inTradeTypeName: "内贸",
|
||||
inVvyName: "381527688"
|
||||
}, {
|
||||
shipName: "海王星领袖",
|
||||
uploadTime: "",
|
||||
downloadTime: "2022-12-12 12:00:08",
|
||||
actualBerthageName: "一泊位",
|
||||
planBerthageName: "一泊位",
|
||||
outTradeTypeName: "外贸",
|
||||
outVvyName: "381527688",
|
||||
inTradeTypeName: "内贸",
|
||||
inVvyName: "381527688"
|
||||
}]
|
||||
// this.initData()
|
||||
this.initData()
|
||||
},
|
||||
// 下拉数据
|
||||
xlData() {
|
||||
for (let i = 0; i < this.optionData.length; i++) {
|
||||
this.optionData[i]["webId"] = uuidv4()
|
||||
let date = new Date().getTime()
|
||||
this.optionData[i]["webStatus"] = "0"
|
||||
this.optionData[i]["webDate"] = api.getDate(date)
|
||||
let dbTable = 'shipOption'
|
||||
let Arr = []
|
||||
for (let key in this.optionData[i]) {
|
||||
Arr.push(`'${ this.optionData[i][key]}'`);
|
||||
}
|
||||
let Str = Arr.join(',')
|
||||
// console.log(Str)
|
||||
sqlite.insertTableData(dbTable, Str).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.executeSql(value)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 船舶基本信息
|
||||
shipDataInfo() {
|
||||
let webStatus = 0
|
||||
let sql = ""
|
||||
shipDataInfo(info) {
|
||||
let date = new Date().getTime()
|
||||
let webId = uuidv4()
|
||||
let webDate = api.getDate(date)
|
||||
sql =
|
||||
`insert into shipInfoTable values('${webId}','${this.shipInfo.vslCd}','${this.shipInfo.vslCnname}',
|
||||
'${this.shipInfo.vvyId}','${this.shipInfo.vvyName}','${this.shipInfo.importExportFlag}','${this.shipInfo.importExportFlagName}',
|
||||
'${this.shipInfo.tradeType}','${this.shipInfo.tradeTypeName}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 船舶资料数据
|
||||
cbzlData() {
|
||||
let webStatus = 0
|
||||
let sql = ""
|
||||
let date = new Date().getTime()
|
||||
let webId = uuidv4()
|
||||
let webDate = api.getDate(date)
|
||||
sql =
|
||||
`insert into shipmentShipManage values('${webId}','${this.shipData.vslCd}','${this.shipData.vslCnname}',
|
||||
'${this.shipData.vslGton}','${this.shipData.vslNetton}','${this.shipData.vslLoa}','${this.shipData.vslBreadth}','${this.shipData.vslDraftunload}','${this.shipData.vslDraftload}',
|
||||
'${this.shipData.spmCabinht}','${this.shipData.spmMintide}','${this.shipData.spmCab}','${this.shipData.spmBoardCentrele}',
|
||||
'${this.shipData.spmBoardFrontle}','${this.shipData.spmBoardLaterle}','${this.shipData.spmBoardCentrerg}','${this.shipData.spmBoardFrontrg}','${this.shipData.spmBoardLaterrg}',
|
||||
'${webStatus}','${webDate}')`
|
||||
let sql =
|
||||
`insert into shipInfoTable values('${webId}','${info.agencyCname}','${info.ctyCnname}','${info.ctyCode}','${info.dataVersion}','${info.shipCname}',
|
||||
'${info.shipTypeName}','${info.spmBoardCentrele}','${info.spmBoardCentrerg}','${info.spmBoardFrontle}','${info.spmBoardFrontrg}','${info.spmBoardLaterle}',
|
||||
'${info.spmBoardLaterrg}','${info.spmCab}','${info.spmCabinht}','${info.spmCountrycd}','${info.spmEdicd}','${info.spmId}',
|
||||
'${info.spmLightWeight}','${info.spmMadeTime}','${info.spmMintide}','${info.spmMmsi}','${info.spmNationality}','${info.spmPilot}',
|
||||
'${info.spmPilotName}','${info.spmRemark}','${info.spmShipSign}','${info.spmShipType}','${info.spmTotalCargo}','${info.spmTrade}',
|
||||
'${info.spmTradeName}','${info.tenantId}','${info.termcd}','${info.valid}','${info.vslAudio}','${info.vslBaynum}',
|
||||
'${info.vslBkbaynum}','${info.vslBkendbay}','${info.vslBkstartbay}','${info.vslBksternnum}','${info.vslBreadth}','${info.vslCallid}',
|
||||
'${info.vslCallsign}','${info.vslCd}','${info.vslCnname}','${info.vslCstAgency}','${info.vslCstShippingline}','${info.vslCtyCountrycd}',
|
||||
'${info.vslDeckmaxrows}','${info.vslDeckmaxtiers}','${info.vslDepth}','${info.vslDerrickamount}','${info.vslDraftload}','${info.vslDraftunload}',
|
||||
'${info.vslEndlength}','${info.vslEnname}','${info.vslGton}','${info.vslHatchamount}','${info.vslHatchcoveramount}','${info.vslHatchmaxrows}',
|
||||
'${info.vslHatchmaxtiers}','${info.vslImono}','${info.vslLcg}','${info.vslLoa}','${info.vslLoaddisargereq}','${info.vslMadedt}',
|
||||
'${info.vslNetton}','${info.vslOrigin}','${info.vslPilotage}','${info.vslRfsocket}','${info.vslSailspeed}','${info.vslSpoptp}',
|
||||
'${info.vslStdId}','${info.vslStopsign}','${info.vslStowagereq}','${info.vslSummaryloading}','${info.vslTcg}','${info.vslTotallocation}',
|
||||
'${info.vslUncode}','${info.vslVcg}','${info.vslVtpcode}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
},
|
||||
// 作业查询数据
|
||||
|
|
@ -536,71 +369,169 @@
|
|||
this.executeSql(sql)
|
||||
}
|
||||
},
|
||||
// 下拉数据
|
||||
xlData() {
|
||||
for (let i = 0; i < this.optionData.length; i++) {
|
||||
this.optionData[i]["webId"] = uuidv4()
|
||||
let date = new Date().getTime()
|
||||
this.optionData[i]["webStatus"] = "0"
|
||||
this.optionData[i]["webDate"] = api.getDate(date)
|
||||
let dbTable = 'shipOption'
|
||||
let Arr = []
|
||||
for (let key in this.optionData[i]) {
|
||||
Arr.push(`'${ this.optionData[i][key]}'`);
|
||||
}
|
||||
let Str = Arr.join(',')
|
||||
// console.log(Str)
|
||||
sqlite.insertTableData(dbTable, Str).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
// console.log(value);
|
||||
this.executeSql(value)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 下载
|
||||
download(item) {
|
||||
// 下载创建单证内的表
|
||||
// tableList.createAllTable()
|
||||
// this.zycxData()
|
||||
// this.cbzlData()
|
||||
// this.xlData()
|
||||
// this.shipDataInfo()
|
||||
if (item.uploadTime != '') {
|
||||
this.popupText = "下载成功"
|
||||
this.msgType = "success"
|
||||
this.$refs.popup.open()
|
||||
} else {
|
||||
this.popupText = "下载失败"
|
||||
this.msgType = "error"
|
||||
this.$refs.popup.open()
|
||||
let vvyIds = []
|
||||
if (item.inVvyId != null && item.outVvyId == null) {
|
||||
vvyIds.push(item.inVvyId)
|
||||
} else if (item.outVvyId != null && item.inVvyId == null) {
|
||||
vvyIds.push(item.outVvyId)
|
||||
} else if (item.inVvyId != null && item.outVvyId != null) {
|
||||
vvyIds.push(item.inVvyId)
|
||||
vvyIds.push(item.outVvyId)
|
||||
}
|
||||
// let ids = []
|
||||
// if (item.inVvyId != null && item.outVvyId == null) {
|
||||
// ids.push(item.inVvyId)
|
||||
// } else if (item.outVvyId != null && item.inVvyId == null) {
|
||||
// ids.push(item.outVvyId)
|
||||
// } else if (item.inVvyId != null && item.outVvyId != null) {
|
||||
// ids.push(item.inVvyId)
|
||||
// ids.push(item.outVvyId)
|
||||
// }
|
||||
// console.log(ids)
|
||||
// uni.request({
|
||||
// url: this.$local + '/api/shipOperate/download?vvyIds=' + ids,
|
||||
// header: {
|
||||
// 'Content-Type': 'application/json' //自定义请求头信息
|
||||
// },
|
||||
// method: 'GET', //请求方式，必须为大写
|
||||
// success: (res) => {
|
||||
// console.log('接口返回------', res);
|
||||
// if (res.statusCode == 200) {
|
||||
// // 存储数据
|
||||
// uni.setStorageSync('shipInfo', res.data.data);
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
uni.request({
|
||||
url: `${this.$local}/api/shipOperate/download?vvyIds=${vvyIds}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log('接口返回------', res);
|
||||
if (res.statusCode == 200) {
|
||||
this.downloadData = res.data.data
|
||||
// this.shipDataInfo(this.downloadData.shipmentShipManage)
|
||||
this.optionData = []
|
||||
// 贸易类型
|
||||
this.downloadData.epTypeList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "epTypeList",
|
||||
ptrCode: v.ptrCode,
|
||||
ptrDesc: v.ptrDesc,
|
||||
})
|
||||
})
|
||||
// 装卸类型
|
||||
this.downloadData.handTypeList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "handTypeList",
|
||||
ptrCode: v.ptrCode,
|
||||
ptrDesc: v.ptrDesc,
|
||||
})
|
||||
})
|
||||
// 进出口
|
||||
this.downloadData.ieTypeList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "ieTypeList",
|
||||
ptrCode: v.ptrCode,
|
||||
ptrDesc: v.ptrDesc,
|
||||
})
|
||||
})
|
||||
// 装卸方式
|
||||
this.downloadData.loadTypeList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "loadTypeList",
|
||||
ptrCode: v.ptrCode,
|
||||
ptrDesc: v.ptrDesc,
|
||||
})
|
||||
})
|
||||
// 泊位
|
||||
this.downloadData.pubBerthesManageRespList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "bthList",
|
||||
ptrCode: v.bthId,
|
||||
ptrDesc: v.bthBthnm,
|
||||
})
|
||||
})
|
||||
// 翻仓类型
|
||||
this.downloadData.turnoverTypeList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "turnoverTypeList",
|
||||
ptrCode: v.ptrCode,
|
||||
ptrDesc: v.ptrDesc,
|
||||
})
|
||||
})
|
||||
// 天气预报
|
||||
this.downloadData.weatherForecastList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "weather",
|
||||
ptrCode: v.weatherType,
|
||||
ptrDesc: v.weatherTypeDesc,
|
||||
})
|
||||
})
|
||||
// 工班类型
|
||||
this.downloadData.shipmentBasicShiftList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "shiftList",
|
||||
ptrCode: v.pwcCode,
|
||||
ptrDesc: v.pwcTypeDesc,
|
||||
})
|
||||
})
|
||||
// 供给类型
|
||||
this.downloadData.supplyTypeList.forEach(v => {
|
||||
this.optionData.push({
|
||||
dictionariesName: "supplyTypeList",
|
||||
ptrCode: v.ptrCode,
|
||||
ptrDesc: v.ptrDesc,
|
||||
})
|
||||
})
|
||||
// 存下拉到数据库
|
||||
this.xlData()
|
||||
let webStatus = 0
|
||||
// 杂项单证人员信息表
|
||||
if (this.downloadData.messageRespList.length > 0) {
|
||||
this.downloadData.messageRespList.forEach(v => {
|
||||
let sql = `insert into messageRespList values('${v.pmeId}','${v.bthId}','${v.bthIdName}',
|
||||
'${v.jobStartTime}','${v.jobEndTime}','${v.shipPerson}','${v.vvyId}','${v.vvyName}','${v.weatherType}',
|
||||
'${v.weatherTypeDesc}','${v.workSuite}','${webStatus}','${v.createTime}')`
|
||||
this.executeSql(sql)
|
||||
})
|
||||
}
|
||||
// 工班信息
|
||||
let aId = uuidv4()
|
||||
if (this.downloadData.workMessageRespList.length > 0) {
|
||||
this.downloadData.workMessageRespList.forEach(v => {
|
||||
let sql = `insert into workMessageRespList values('${v.wkmId}','${this.downloadData.shipmentShipManage.spmId}','${aId}',
|
||||
'${v.vvyId}','${v.vvyName}','${v.loadType}','${v.loadTypeName}','${v.pwcType}',
|
||||
'${v.pwcTypeName}','${v.workStartTime}','${v.workEndTime}','${webStatus}','${v.createTime}')`
|
||||
this.executeSql(sql)
|
||||
if (v.workMessageDetailRespDTOS.length > 0) {
|
||||
v.workMessageDetailRespDTOS.forEach(v2 => {
|
||||
let sql2 = `insert into workMessageRespInfoList values('${v2.wkdId}','${v2.wkmId}','${v2.carType}',
|
||||
'${v2.carTypeName}','${v2.goodsNumber}','${v2.loadingType}','${v2.loadingTypeName}','${v2.remark}',
|
||||
'${webStatus}','${v.createTime}')`
|
||||
this.executeSql(sql2)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
let editStatus = 1
|
||||
// 翻仓信息
|
||||
if (this.downloadData.retallyRespList.length > 0) {
|
||||
this.downloadData.retallyRespList.forEach(v => {
|
||||
let sql = `insert into retallyMessageRespList values('${v.reyId}','${this.downloadData.shipmentShipManage.spmId}','${aId}',
|
||||
'${v.reyVvyId}','${v.reyVvyName}','${v.retallyType}','${v.retallyTypeName}','${v.retallyOrigin}','${v.retallyTerminus}',
|
||||
'${v.retallyStartTime}','${v.retallyEndTime}','${v.carType}','${v.carTypeName}',
|
||||
'${v.goodsNumber}','${v.goodsVolume}','${v.goodsWeight}','${editStatus}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
})
|
||||
}
|
||||
// 其他信息
|
||||
if (this.downloadData.infoRespList.length > 0) {
|
||||
this.downloadData.infoRespList.forEach(v => {
|
||||
let sql =
|
||||
`insert into infoRespList values('${v.soiId}','${this.downloadData.shipmentShipManage.spmId}','${aId}','${v.vvyId}',
|
||||
'${v.vvyIdDesc}','${v.tecNum}','${v.startTm}','${v.endTm}','${v.weight}','${v.volume}','${v.genNum}',
|
||||
'${v.startTmPt}','${v.endTmPt}','${v.weightPt}','${v.volumePt}','${v.auxRemark}',
|
||||
'${v.waitRemark}','${v.workRemark}','${webStatus}','${v.createTime}')`
|
||||
this.executeSql(sql)
|
||||
})
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: `下载成功`,
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: `下载失败`,
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 上传
|
||||
upload(item) {
|
||||
|
|
@ -787,7 +718,8 @@
|
|||
url: this.$local + '/api/shipOperate/upload',
|
||||
data: workDataInfo,
|
||||
header: {
|
||||
'Content-Type': 'application/json' //自定义请求头信息
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'POST', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/hc.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
const dataType = encodeURIComponent(JSON.stringify(objType));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?dataType=${dataType}`
|
||||
url: `/pages/shipWork/mafiSign?dataType=${dataType}`
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
|
|
|
|||
|
|
@ -0,0 +1,266 @@
|
|||
<template>
|
||||
<view class="noticeSign">
|
||||
<head-view :title="title" url="/pages/shipWork/mafi"></head-view>
|
||||
<view class="container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h-l1r1">
|
||||
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix"></image>
|
||||
</td>
|
||||
<td class="h-l1r2"> </td>
|
||||
<td class="h-l1r3">
|
||||
<p>上海海通国际汽车码头有限公司</p>
|
||||
<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="bh-dz">QR-7.5.1-01-11-M</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="h-l2r1">
|
||||
<p class="name-dz">海通码头MAFI清单</p>
|
||||
<p class="ename-dz">MAFI RECEPTION LIST</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-main2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>航次：</p>
|
||||
<p>voy No </p>
|
||||
</td>
|
||||
<td class="td2">{{shipInfo.vvyName}}</td>
|
||||
<td class="td1">
|
||||
<p>日期：</p>
|
||||
<p>Date </p>
|
||||
</td>
|
||||
<td class="td2">2023-11-11</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-mafi">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>NO.</td>
|
||||
<td>Equipment NO.</td>
|
||||
<td>SIZE</td>
|
||||
<td>FULL/Empty</td>
|
||||
<td>LOAD/DISC</td>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableInfo" :key="index">
|
||||
<td>{{index + 1}}</td>
|
||||
<td>{{item.mafiBarcode}}</td>
|
||||
<td>{{item.size}}</td>
|
||||
<td>
|
||||
<text v-if="item.type == '重板'">FULL</text>
|
||||
<text v-if="item.type == '空板'">Empty</text>
|
||||
</td>
|
||||
<td>
|
||||
<text v-if="item.loaderType == '装货'">LOAD</text>
|
||||
<text v-if="item.loaderType == '卸货'">DISC</text>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<view class="sginBox">
|
||||
<view class="box">
|
||||
<p>Foreman(指导员):</p>
|
||||
<p class="sign" @click="togoSign('0')" v-if="zdySign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="zdySign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(zdySign.id)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="box">
|
||||
<p>Capt/Chief Mate(船长/大副):</p>
|
||||
<p class="sign" @click="togoSign('1')" v-if="czSign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="czSign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(czSign.id)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="delPopup" type="dialog">
|
||||
<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
|
||||
@confirm="delConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "MAFI清单签名",
|
||||
// 船舶信息
|
||||
shipInfo: {},
|
||||
// 表内数据
|
||||
tableInfo: [],
|
||||
// 签名信息
|
||||
zdySign: {
|
||||
url: "",
|
||||
id: ""
|
||||
},
|
||||
czSign: {
|
||||
url: "",
|
||||
id: ""
|
||||
},
|
||||
delId: "",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.executeSql('shipInfoTable')
|
||||
},
|
||||
methods: {
|
||||
// 查船舶信息
|
||||
executeSql(tableName) {
|
||||
let sql = `select * from ${tableName}`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.shipInfo = value[0]
|
||||
this.executeSql1('mafiListRespList')
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查mafi清单信息
|
||||
executeSql1(tableName) {
|
||||
let sql =
|
||||
`select * from ${tableName} WHERE vvyId='${this.shipInfo.vvyId}' ORDER BY mafiListRespList.loaderType ASC, mafiListRespList.type DESC, mafiListRespList.size ASC`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.tableInfo = value
|
||||
console.log(this.tableInfo)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查单证签字表
|
||||
executeSql2() {
|
||||
let sql = `select * from workSignTable WHERE signId = '${this.shipInfo.vvyId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
console.log(value)
|
||||
let zdyList = []
|
||||
let czList = []
|
||||
if (value.length > 0) {
|
||||
value.forEach(v => {
|
||||
if (v.signType == '0') {
|
||||
this.zdySign = {
|
||||
url: v.url,
|
||||
id: v.webId
|
||||
}
|
||||
zdyList.push(v)
|
||||
} else {
|
||||
this.czSign = {
|
||||
url: v.url,
|
||||
id: v.webId
|
||||
}
|
||||
czList.push(v)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (zdyList.length == 0) {
|
||||
this.zdySign = {
|
||||
url: "",
|
||||
id: ""
|
||||
}
|
||||
}
|
||||
if (czList.length == 0) {
|
||||
this.czSign = {
|
||||
url: "",
|
||||
id: ""
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 点击签名
|
||||
togoSign(signType) {
|
||||
let obj = {
|
||||
id: this.shipInfo.vvyId,
|
||||
url: "mafiSign",
|
||||
signType: signType, // 0 指导员 1 船长/大副
|
||||
signTable: "mafi",
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?params=${params}`
|
||||
})
|
||||
},
|
||||
// 删除当前签名
|
||||
delSign(id) {
|
||||
this.$refs.delPopup.open()
|
||||
this.delId = id
|
||||
},
|
||||
// 弹框删除
|
||||
delConfirm() {
|
||||
let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../../style/css/main-dz.css";
|
||||
|
||||
.container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#t-mafi {
|
||||
border-collapse: collapse;
|
||||
border: #000000 solid 1px;
|
||||
border-spacing: 0px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#t-mafi td {
|
||||
border: #000000 solid 1px;
|
||||
padding: 0px 10px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.sginBox {
|
||||
display: flex;
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.del {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sign {
|
||||
color: #2979ff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,495 @@
|
|||
<template>
|
||||
<view class="mixSign">
|
||||
<head-view :title="title" url="/pages/shipWork/mixWork"></head-view>
|
||||
<custom-tabs type="c1" :value="tabsValue" @change="tabsChange">
|
||||
<custom-tab-pane :label="item.name" v-for="(item,index) in tabsList" :name="'c1_'+index" :key="index">
|
||||
<view></view>
|
||||
<view class="container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h-l1r1">
|
||||
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix"></image>
|
||||
</td>
|
||||
<td class="h-l1r2"> </td>
|
||||
<td class="h-l1r3">
|
||||
<p>上海海通国际汽车码头有限公司</p>
|
||||
<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="bh-dz">QR-7.5.1-01-11-M</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="h-l2r1">
|
||||
<p class="name-dz">海通码头装卸和杂项作业单</p>
|
||||
<p class="ename-dz">SHANGHAI HARBOUR BUREAU STEVEDORE WORKING RECORD</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="m-b-30">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name of ship:</td>
|
||||
<td class="td-b-b1">{{shipInfo.vslCnname}}</td>
|
||||
<td>Voy No:</td>
|
||||
<td class="td-b-b1">{{shipInfo.vvyName}}</td>
|
||||
<td>Weather:</td>
|
||||
<td class="td-b-b1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Date:</td>
|
||||
<td class="td-b-b1"></td>
|
||||
<td>Gangs:</td>
|
||||
<td class="td-b-b1"></td>
|
||||
<td>Foreman:</td>
|
||||
<td class="td-b-b1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Foreman Working time:</td>
|
||||
<td class="td-b-b0"></td>
|
||||
<td>Berthed at Haitong:</td>
|
||||
<td class="td-b-b1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="t-zx">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2"> </td>
|
||||
<td colspan="6">Working time</td>
|
||||
<td colspan="4">Kind Of Works</td>
|
||||
<td rowspan="2">B/L</td>
|
||||
<td colspan="3">Handling method</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">From</td>
|
||||
<td colspan="3">To</td>
|
||||
<td colspan="4">Loading□/UnLoading□</td>
|
||||
<td>Ro/Ro</td>
|
||||
<td>PortDevices</td>
|
||||
<td>Others</td>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in shiftList" :key="index + 'shift'">
|
||||
<td>{{item.pwcTypeName}}</td>
|
||||
<td colspan="3">{{item.workStartTime}}</td>
|
||||
<td colspan="3">{{item.workEndTime}}</td>
|
||||
<td colspan="4">车型:{{item.carTypeName}},数量:{{item.goodsNumber}}</td>
|
||||
<td>{{item.remark}}</td>
|
||||
<td><text v-if="item.loadingTypeName == 'Ro/Ro'">√</text></td>
|
||||
<td><text v-if="item.loadingTypeName == 'PortDevice'">√</text></td>
|
||||
<td><text v-if="item.loadingTypeName == 'Others'">√</text></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td :rowspan="fcList.length + 2">翻仓信息</td>
|
||||
<td colspan="2" rowspan="2">Kind of Rehangdling</td>
|
||||
<td colspan="2">DK/H</td>
|
||||
<td colspan="6">Working time</td>
|
||||
<td colspan="4">Weight/Measure</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>From</td>
|
||||
<td>To</td>
|
||||
<td colspan="3">From</td>
|
||||
<td colspan="3">To</td>
|
||||
<td colspan="2">Vehicle type/Quantity</td>
|
||||
<td colspan="2">Total W/M</td>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in fcList" :key="index + 'fc'">
|
||||
<td colspan="2">{{item.retallyTypeName}}</td>
|
||||
<td>{{item.retallyOrigin}}</td>
|
||||
<td>{{item.retallyTerminus}}</td>
|
||||
<td colspan="3">{{item.retallyStartTime}}</td>
|
||||
<td colspan="3">{{item.retallyEndTime}}</td>
|
||||
<td colspan="2">车型:{{item.carTypeName}},数量:{{item.goodsNumber}}</td>
|
||||
<td colspan="2">重量:{{item.goodsWeight}},体积:{{item.goodsVolume}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td colspan="2">Reason</td>
|
||||
<td colspan="3">技术工人</td>
|
||||
<td>From</td>
|
||||
<td>To</td>
|
||||
<td>Weight/Measure</td>
|
||||
<td colspan="3">普通工人</td>
|
||||
<td>From</td>
|
||||
<td>To</td>
|
||||
<td>Weight/Measure</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Extra Labour（辅助作业）</td>
|
||||
<td colspan="2">{{qtList.auxRemark}}</td>
|
||||
<td colspan="3">{{qtList.tecNum}}</td>
|
||||
<td>{{qtList.tecStartTm}}</td>
|
||||
<td>{{qtList.tecEndTm}}</td>
|
||||
<td>重量:{{qtList.tecWeight}},体积:{{qtList.tecVolume}}</td>
|
||||
<td colspan="3">{{qtList.genNum}}</td>
|
||||
<td>{{qtList.genStartTm}}</td>
|
||||
<td>{{qtList.genEndTm}}</td>
|
||||
<td>重量:{{qtList.genWeight}},体积:{{qtList.genVolume}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Stand by（待工）</td>
|
||||
<td colspan="15">{{qtList.waitRemark}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Remark（备注）</td>
|
||||
<td colspan="15">{{qtList.workRemark}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<view class="sginBox">
|
||||
<view class="box">
|
||||
<p>Foreman(指导员):</p>
|
||||
<p class="sign" @click="togoSign('0')" v-if="zdySign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="zdySign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(zdySign.id)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="box">
|
||||
<p>Capt/Chief Mate(船长/大副):</p>
|
||||
<p class="sign" @click="togoSign('1')" v-if="czSign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="czSign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(czSign.id)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</custom-tab-pane>
|
||||
</custom-tabs>
|
||||
<uni-popup ref="delPopup" type="dialog">
|
||||
<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
|
||||
@confirm="delConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "杂项单证签名",
|
||||
tabsValue: 0,
|
||||
tabsList: [],
|
||||
aIdList: [],
|
||||
aId: "",
|
||||
// 船舶信息
|
||||
shipInfo: {},
|
||||
// 工班信息
|
||||
shiftList: [],
|
||||
// 翻仓信息
|
||||
fcList: [],
|
||||
// 其他信息
|
||||
qtList: {},
|
||||
// 签名信息
|
||||
zdySign: {
|
||||
url: "",
|
||||
id: ""
|
||||
},
|
||||
czSign: {
|
||||
url: "",
|
||||
id: ""
|
||||
},
|
||||
delId: "",
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if ('params' in option) {
|
||||
this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.executeSql('shipInfoTable')
|
||||
},
|
||||
methods: {
|
||||
// 查船舶信息
|
||||
executeSql(tableName) {
|
||||
let sql = `select * from ${tableName}`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
if (tableName == 'shipInfoTable') {
|
||||
this.shipInfo = value[0]
|
||||
this.executeSql1()
|
||||
} else {
|
||||
console.log(value)
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查标签
|
||||
executeSql1() {
|
||||
let sql = `select distinct aId from workMessageRespList`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.aIdList = value
|
||||
this.aIdList.forEach((item, index) => {
|
||||
let obj = {
|
||||
name: `杂项单证${index + 1}`,
|
||||
}
|
||||
this.tabsList.push(obj)
|
||||
})
|
||||
this.aId = this.aIdList[this.tabsValue].aId
|
||||
this.executeSql2()
|
||||
this.executeSql3()
|
||||
this.executeSql4()
|
||||
this.executeSql5()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查工班信息
|
||||
executeSql2() {
|
||||
let sql =
|
||||
`select w.aId, w.vvyId, w.vvyName,w.pwcType,w.pwcTypeName,w.workStartTime,w.workEndTime,wi.carType,wi.carTypeName,wi.goodsNumber,wi.remark,wi.loadingType,wi.loadingTypeName
|
||||
from workMessageRespInfoList wi Left join workMessageRespList w on wi.contactId=w.webId WHERE aId = '${this.aId}' and w.vvyId='${this.shipInfo.vvyId}' order by w.pwcType asc;`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
// let arr = []
|
||||
// value.forEach(item => {
|
||||
// if (!arr[item.pwcType]) {
|
||||
// arr[item.pwcType] = {
|
||||
// pwcType: item.pwcType,
|
||||
// pwcTypeName: item.pwcTypeName,
|
||||
// workStartTime: item.workStartTime,
|
||||
// workEndTime: item.workEndTime,
|
||||
// shiftInfo: []
|
||||
// };
|
||||
// }
|
||||
// arr[item.pwcType].shiftInfo.push({
|
||||
// vvyId: item.vvyId,
|
||||
// vvyName: item.vvyName,
|
||||
// carType: item.carType,
|
||||
// carTypeName: item.carTypeName,
|
||||
// goodsNumber: item.goodsNumber,
|
||||
// remark: item.remark,
|
||||
// loadingType: item.loadingType,
|
||||
// loadingTypeName: item.loadingTypeName
|
||||
// });
|
||||
// });
|
||||
// this.shiftList = Object.values(arr)
|
||||
this.shiftList = value
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查翻仓信息
|
||||
executeSql3() {
|
||||
let sql =
|
||||
`select vvyId,vvyName,retallyType,retallyTypeName,retallyOrigin,retallyTerminus,retallyStartTime,retallyEndTime,
|
||||
carType,carTypeName,goodsNumber,goodsVolume,goodsWeight,tradeTypeName,importExportFlagName,spmName
|
||||
from retallyMessageRespList WHERE aId = '${this.aId}' and vvyId='${this.shipInfo.vvyId}' order by retallyType asc;`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
// let arr = []
|
||||
// value.forEach(item => {
|
||||
// if (!arr[item.retallyType]) {
|
||||
// arr[item.retallyType] = {
|
||||
// retallyType: item.retallyType,
|
||||
// retallyTypeName: item.retallyTypeName,
|
||||
// fcInfo: []
|
||||
// };
|
||||
// }
|
||||
// arr[item.retallyType].fcInfo.push({
|
||||
// vvyId: item.vvyId,
|
||||
// vvyName: item.vvyName,
|
||||
// retallyOrigin: item.retallyOrigin,
|
||||
// retallyTerminus: item.retallyTerminus,
|
||||
// carType: item.carType,
|
||||
// carTypeName: item.carTypeName,
|
||||
// datetime: [item.retallyStartTime, item.retallyEndTime],
|
||||
// retallyStartTime: item.retallyStartTime,
|
||||
// retallyEndTime: item.retallyEndTime,
|
||||
// goodsNumber: item.goodsNumber,
|
||||
// goodsVolume: item.goodsVolume,
|
||||
// goodsWeight: item.goodsWeight
|
||||
// });
|
||||
// });
|
||||
// this.fcList = Object.values(arr)
|
||||
this.fcList = value
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查其他信息
|
||||
executeSql4() {
|
||||
let sql =
|
||||
`select vvyId,vvyName,tecNum,tecStartTm,tecEndTm,tecWeight,tecVolume,genNum,genStartTm,genEndTm,genWeight,genVolume,auxRemark,
|
||||
waitRemark,workRemark,tradeTypeName,importExportFlagName from infoRespList
|
||||
WHERE aId = '${this.aId}' and vvyId='${this.shipInfo.vvyId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.qtList = value[0]
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查单证签字表
|
||||
executeSql5() {
|
||||
let sql = `select * from workSignTable WHERE signId = '${this.aId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
let zdyList = []
|
||||
let czList = []
|
||||
if (value.length > 0) {
|
||||
value.forEach(v => {
|
||||
if (v.signType == '0') {
|
||||
this.zdySign = {
|
||||
url: v.url,
|
||||
id: v.webId
|
||||
}
|
||||
zdyList.push(v)
|
||||
} else {
|
||||
this.czSign = {
|
||||
url: v.url,
|
||||
id: v.webId
|
||||
}
|
||||
czList.push(v)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (zdyList.length == 0) {
|
||||
this.zdySign = {
|
||||
url: "",
|
||||
id: ""
|
||||
}
|
||||
}
|
||||
if (czList.length == 0) {
|
||||
this.czSign = {
|
||||
url: "",
|
||||
id: ""
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 删除当前签名
|
||||
delSign(id) {
|
||||
this.$refs.delPopup.open()
|
||||
this.delId = id
|
||||
},
|
||||
// 弹框删除
|
||||
delConfirm() {
|
||||
let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.executeSql5()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 点击标签
|
||||
tabsChange(e) {
|
||||
this.aId = this.aIdList[e.value].aId
|
||||
this.tabsValue = e.value
|
||||
this.zdySign = {
|
||||
url: "",
|
||||
id: ""
|
||||
}
|
||||
this.czSign = {
|
||||
url: "",
|
||||
id: ""
|
||||
}
|
||||
this.executeSql2()
|
||||
this.executeSql3()
|
||||
this.executeSql4()
|
||||
this.executeSql5()
|
||||
},
|
||||
// 点击签名
|
||||
togoSign(signType) {
|
||||
let obj = {
|
||||
id: this.aId,
|
||||
url: "mixSign",
|
||||
signType: signType, // 0 指导员 1 船长/大副
|
||||
signTable: "mixWork",
|
||||
tabsValue: this.tabsValue,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?params=${params}`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../../style/css/main-dz.css";
|
||||
|
||||
.container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.bowei {
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rd-td2 {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.m-b-30 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.m-b-30 td {
|
||||
padding: 0px 20px;
|
||||
height: 36px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.td-b-b0 {
|
||||
width: 600px !important;
|
||||
border-bottom: #000000 solid 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.td-b-b1 {
|
||||
border-bottom: #000000 solid 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.t-zx td {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.sginBox {
|
||||
display: flex;
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.del {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sign {
|
||||
color: #2979ff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="mixWork">
|
||||
<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
|
||||
<head-view :title="title" special="1" url="/pages/shipWork/documentList"></head-view>
|
||||
<view class="container">
|
||||
<view class="signBox">
|
||||
<p class="sign" @click="sign">点击签名</p>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<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=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<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=""></image>
|
||||
<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">
|
||||
|
|
@ -135,12 +135,8 @@
|
|||
},
|
||||
// 点击签名
|
||||
sign() {
|
||||
const objType = {
|
||||
signType: "mixWork"
|
||||
}
|
||||
const dataType = encodeURIComponent(JSON.stringify(objType));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?dataType=${dataType}`
|
||||
url: `/pages/shipWork/mixSign`
|
||||
})
|
||||
},
|
||||
tabsClick(item, index) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/hc.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
const dataType = encodeURIComponent(JSON.stringify(objType));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?dataType=${dataType}`
|
||||
url: `/pages/shipWork/noticeSign?dataType=${dataType}`
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
|
|
|
|||
|
|
@ -0,0 +1,268 @@
|
|||
<template>
|
||||
<view class="noticeSign">
|
||||
<head-view :title="title"></head-view>
|
||||
<view class="container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h-l1r1">
|
||||
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix"></image>
|
||||
</td>
|
||||
<td class="h-l1r2"> </td>
|
||||
<td class="h-l1r3">
|
||||
<p>上海海通国际汽车码头有限公司</p>
|
||||
<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="bh-dz">QR-7.5.1-01-11-M</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="h-l2r1">
|
||||
<p class="name-dz">海通码头船舶装/卸货通知单</p>
|
||||
<p class="ename-dz">Vessel Operation Notic</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-xjl">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">船名(M/V):</td>
|
||||
<td class="td2"> </td>
|
||||
<td class="td1">航次(Voy):</td>
|
||||
<td class="td2"> </td>
|
||||
<td class="td1">日期Date:</td>
|
||||
<td class="td2"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-main">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1h">检查项目(Check List)</td>
|
||||
<td class="td2">YES</td>
|
||||
<td class="td3">NO</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 1.Was the effective cushion put under ramp?</p>
|
||||
<p>有效衬垫物已放在跳板下？</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 2.The ship's height and with of deck、slope、passage、route way ete.should be
|
||||
accorded with
|
||||
the loading/unloading?</p>
|
||||
<p>船舶装卸货物的甲板高度、宽度、通道等入口应当符合此次装/卸货物的安全要求？</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 3.Has the following equipments been propared and checked?</p>
|
||||
<p>下列设备已备好并检查？</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 1）Ship's ramp,including
|
||||
stem-ramp、side-ramp、and
|
||||
inner-ramp.</p>
|
||||
<p> 船舶所有跳板处于有效、可用的工作状态</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 2）The deck of loaded cargo has been using in
|
||||
condition.</p>
|
||||
<p> 装卸货的甲板处于良好、可用的状态</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 3）All of the rout way is clear and effective
|
||||
in
|
||||
loaded cargo deck.</p>
|
||||
<p> 所有通道保持有效的畅通</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 4）Ventilation equipment are guarantced and
|
||||
keep
|
||||
ready.</p>
|
||||
<p> 通风设备已经开启并且设备良好</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 5）The illuminative equipment are in good
|
||||
condition.
|
||||
</p>
|
||||
<p> 创仓内照明设备良好</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p> 6）Claspers、chain、cloth mat、rubber mat and
|
||||
wooden
|
||||
place are enough and effective.</p>
|
||||
<p> 绑扎帯、绑扎链条等绑扎材料、垫衬和垫料是足够且可用</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>4.Are the safe working load of stern ramp/side ramp safety and effective for this
|
||||
cargo
|
||||
operation.</p>
|
||||
<p>尾跳和中跳的安全符合此次的装货的要求</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>5.Pay attention to stevedores working area.</p>
|
||||
<p>船员在工人作业区域要高度注意安全</p>
|
||||
</td>
|
||||
<td class="td2"><input type="checkbox"></td>
|
||||
<td class="td3"><input type="checkbox"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>备注：</p>
|
||||
</td>
|
||||
<td class="td2"> </td>
|
||||
<td class="td3"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-qm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>Signature of Foreman:</p>
|
||||
<p>(单船指导员签名)</p>
|
||||
</td>
|
||||
<td class="td2"> </td>
|
||||
<td class="td3">
|
||||
<p>Signature of Duty manger:</p>
|
||||
<p>（值班经理签名） </p>
|
||||
</td>
|
||||
<td class="td4"> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "装卸货通知单签名",
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../../style/css/main-dz.css";
|
||||
|
||||
.container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#t-xjl {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#t-xjl .td1 {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#t-xjl .td2 {
|
||||
text-align: left;
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
|
||||
#t-main {
|
||||
border-collapse: collapse;
|
||||
border: #000000 solid 1px;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
#t-main td {
|
||||
border: #000000 solid 1px;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
#t-main .td1 {
|
||||
width: 1200px;
|
||||
height: 80px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#t-main .td2 {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#t-main .td3 {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#t-main .td1h {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#t-qm .td1 {
|
||||
text-align: right;
|
||||
height: 50px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#t-qm .td2 {
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
|
||||
#t-qm .td3 {
|
||||
text-align: right;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#t-qm .td4 {
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,13 +9,13 @@
|
|||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/hc.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
<p>进出口：{{item.importExportFlagName}}</p>
|
||||
<p>贸易类型：{{item.tradeTypeName}}</p>
|
||||
<p>作业日期：{{item.workTime}}</p>
|
||||
<p>作业日期：{{item.operationDate}}</p>
|
||||
</view>
|
||||
<view class="status didNot">
|
||||
<p>未上传</p>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
const dataType = encodeURIComponent(JSON.stringify(objType));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?dataType=${dataType}`
|
||||
url: `/pages/shipWork/opinionSign?dataType=${dataType}`
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
|
|
|
|||
|
|
@ -29,25 +29,25 @@
|
|||
</view>
|
||||
<view class="li">
|
||||
<p><text class="required" v-if="obj.state != 'look'">*</text>装卸类型：</p>
|
||||
<uni-data-select v-model="loaderTypeId" :localdata="zxList" @change="zxChange"
|
||||
<uni-data-select v-model="handlingTypeId" :localdata="zxList" @change="zxChange"
|
||||
v-if="obj.state != 'look'"></uni-data-select>
|
||||
<text v-else>{{loaderType}}</text>
|
||||
<text v-else>{{handlingType}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p><text class="required" v-if="obj.state != 'look'">*</text>车辆数量：</p>
|
||||
<uni-number-box v-model="vehicleSize" :max="1000000000" v-if="obj.state != 'look'" />
|
||||
<text v-else>{{vehicleSize}}</text>
|
||||
<uni-number-box v-model="vehiclesNumber" :max="1000000000" v-if="obj.state != 'look'" />
|
||||
<text v-else>{{vehiclesNumber}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p><text class="required" v-if="obj.state != 'look'">*</text>备件数量：</p>
|
||||
<uni-number-box v-model="sparePart" :max="1000000000" v-if="obj.state != 'look'" />
|
||||
<text v-else>{{sparePart}}</text>
|
||||
<uni-number-box v-model="spareNumber" :max="1000000000" v-if="obj.state != 'look'" />
|
||||
<text v-else>{{spareNumber}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p><text class="required" v-if="obj.state != 'look'">*</text>作业日期：</p>
|
||||
<uni-datetime-picker v-model="workTime" type="date" :clear-icon="false" @change="changeLog"
|
||||
<uni-datetime-picker v-model="operationDate" type="date" :clear-icon="false" @change="changeLog"
|
||||
v-if="obj.state != 'look'" />
|
||||
<text v-else>{{workTime}}</text>
|
||||
<text v-else>{{operationDate}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" type="dialog">
|
||||
|
|
@ -87,15 +87,15 @@
|
|||
bthIdName: "",
|
||||
bwList: [],
|
||||
// 装卸类型下拉框
|
||||
loaderTypeId: "",
|
||||
loaderType: "",
|
||||
handlingTypeId: "",
|
||||
handlingType: "",
|
||||
zxList: [],
|
||||
// 车辆数量
|
||||
vehicleSize: 0,
|
||||
vehiclesNumber: 0,
|
||||
// 备件数量
|
||||
sparePart: 0,
|
||||
spareNumber: 0,
|
||||
// 作业时间
|
||||
workTime: [''],
|
||||
operationDate: [''],
|
||||
|
||||
// 下拉数据
|
||||
optionData: [],
|
||||
|
|
@ -112,11 +112,11 @@
|
|||
this.getRow();
|
||||
}
|
||||
if (this.obj.state == "edit") {
|
||||
this.title = "编辑船舶装卸通知书"
|
||||
this.title = "编辑质量意见征询"
|
||||
} else if (this.obj.state == "look") {
|
||||
this.title = "查看船舶装卸通知书"
|
||||
this.title = "查看质量意见征询"
|
||||
} else {
|
||||
this.title = "新增船舶装卸通知书"
|
||||
this.title = "新增质量意见征询"
|
||||
}
|
||||
this.executeSql1('shipOption')
|
||||
this.executeSql1("shipInfoTable")
|
||||
|
|
@ -184,16 +184,17 @@
|
|||
// 获取当前行信息
|
||||
getRow() {
|
||||
this.opinionRow = uni.getStorageSync('opinionRow');
|
||||
console.log(this.opinionRow)
|
||||
this.opinionRowIndex = uni.getStorageSync('opinionRowIndex');
|
||||
this.vvyId = this.opinionRow.vvyId
|
||||
this.vvyName = this.opinionRow.vvyName
|
||||
this.bthId = this.opinionRow.bthId
|
||||
this.bthIdName = this.opinionRow.bthIdName
|
||||
this.loaderTypeId = this.opinionRow.loaderTypeId
|
||||
this.loaderType = this.opinionRow.loaderType
|
||||
this.vehicleSize = this.opinionRow.vehicleSize
|
||||
this.sparePart = this.opinionRow.sparePart
|
||||
this.workTime = this.opinionRow.workTime
|
||||
this.handlingTypeId = this.opinionRow.handlingTypeId
|
||||
this.handlingType = this.opinionRow.handlingType
|
||||
this.vehiclesNumber = this.opinionRow.vehiclesNumber
|
||||
this.spareNumber = this.opinionRow.spareNumber
|
||||
this.operationDate = this.opinionRow.operationDate
|
||||
},
|
||||
// 航次下拉
|
||||
hcChange(e) {
|
||||
|
|
@ -215,16 +216,16 @@
|
|||
},
|
||||
// 装卸类型下拉
|
||||
zxChange(e) {
|
||||
this.loaderTypeId = e;
|
||||
this.handlingTypeId = e;
|
||||
this.zxList.forEach(v => {
|
||||
if (v.value == e) {
|
||||
this.loaderType = v.text
|
||||
this.handlingType = v.text
|
||||
}
|
||||
})
|
||||
},
|
||||
// 作业时间
|
||||
changeLog(e) {
|
||||
this.workTime = e
|
||||
this.operationDate = e
|
||||
},
|
||||
// 取消
|
||||
cancel() {
|
||||
|
|
@ -253,14 +254,14 @@
|
|||
if (this.obj.state == "edit") {
|
||||
let sql =
|
||||
`UPDATE shipmentQualityConsultationRespList SET vvyId = '${this.vvyId}', vvyName = '${this.vvyName}',
|
||||
bthId = '${this.bthId}',bthIdName = '${this.bthIdName}',loaderTypeId = '${this.loaderTypeId}',
|
||||
loaderType = '${this.loaderType}', vehicleSize = '${this.vehicleSize}', sparePart = '${this.sparePart}',
|
||||
workTime = '${this.workTime}',webStatus = '${webStatus}',webDate = '${webDate}' WHERE webId = '${this.opinionRow.webId}';`
|
||||
bthId = '${this.bthId}',bthIdName = '${this.bthIdName}',handlingTypeId = '${this.handlingTypeId}',
|
||||
handlingType = '${this.handlingType}', vehiclesNumber = '${this.vehiclesNumber}', spareNumber = '${this.spareNumber}',
|
||||
operationDate = '${this.operationDate}',webStatus = '${webStatus}',webDate = '${webDate}' WHERE webId = '${this.opinionRow.webId}';`
|
||||
this.executeSql(sql)
|
||||
} else if (this.obj.state == "add") {
|
||||
let sql = `insert into shipmentQualityConsultationRespList values('${webId}','${this.vvyId}','${this.vvyName}',
|
||||
'${this.bthId}','${this.bthIdName}','${this.loaderTypeId}','${this.loaderType}','${this.vehicleSize}',
|
||||
'${this.sparePart}','${this.workTime}','${this.shipInfo.tradeTypeName}',
|
||||
'${this.bthId}','${this.bthIdName}','${this.handlingTypeId}','${this.handlingType}','${this.vehiclesNumber}',
|
||||
'${this.spareNumber}','${this.operationDate}','${this.shipInfo.tradeTypeName}',
|
||||
'${this.shipInfo.importExportFlagName}','${this.shipInfo.spmName}',
|
||||
'${webStatus}','${webDate}')`
|
||||
console.log(sql)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<view class="opinionSign">
|
||||
<head-view :title="title"></head-view>
|
||||
<view class="container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h-l1r1">
|
||||
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix"></image>
|
||||
</td>
|
||||
<td class="h-l1r2"> </td>
|
||||
<td class="h-l1r3">
|
||||
<p>上海海通国际汽车码头有限公司</p>
|
||||
<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="bh-dz">QR-7.5.1-01-11-M</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="h-l2r1">
|
||||
<p class="name-dz">海通码头船舶装/卸质量意见征询单</p>
|
||||
<p class="ename-dz">Form Seeking Advice On The Quality Of Vessel Loading/Discharge
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-xjl">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">泊位(Berth No):</td>
|
||||
<td class="td2"> </td>
|
||||
<td class="td1">日期Date:</td>
|
||||
<td class="td2"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="t-zx">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="n-chuanming">船名(Name Of vessel)</td>
|
||||
<td class="n-hangci">航次(Voyage No.)</td>
|
||||
<td class="n-shuliang">装/卸量/件(Quality/Pkg's)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="v-chuanming"> </td>
|
||||
<td class="v-hangci"> </td>
|
||||
<td class="v-shuliang">
|
||||
<p>load3520+489/discharge289+35</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-ac" colspan="3">
|
||||
<p>Following Blanks are to Be Filled in by the carrier</p>
|
||||
<p>(以下请船方填写)</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p>1.Did our terminal operation meet the requiremants of the carrier?</p>
|
||||
<p>(港方按照船方实施装/卸？)</p>
|
||||
<p class="td-ar">1<input type="radio">2<input type="radio">3<input type="radio">4<input
|
||||
type="radio">5<input type="radio"></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p>2.Did the vehicle travel following the linited speed in cargo hold?</p>
|
||||
<p>(船舱内按照规定速度行驶？)</p>
|
||||
<p class="td-ar">1<input type="radio">2<input type="radio">3<input type="radio">4<input
|
||||
type="radio">5<input type="radio"></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p>3.Not founded The roughly opertions?</p>
|
||||
<p>(无野蛮作业？)</p>
|
||||
<p class="td-ar">1<input type="radio">2<input type="radio">3<input type="radio">4<input
|
||||
type="radio">5<input type="radio"></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p>4.Did the Terminal Cooperated other requirmants of Carrier?</p>
|
||||
<p>(积极配合船方的其他要求？)</p>
|
||||
<p class="td-ar">1<input type="radio">2<input type="radio">3<input type="radio">4<input
|
||||
type="radio">5<input type="radio"></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-ac" colspan="3">
|
||||
<p>POINT SCORING: -1 poor -2 below average -3 average -4 good -5 excellent</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p>Other coments:</p>
|
||||
<p>(其他意见)</p>
|
||||
<p> </p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p>Captain/Chief Officer:</p>
|
||||
<p class="td-ac">(船方签章)</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-ac" colspan="2">
|
||||
<p>Signature of Foreman:</p>
|
||||
<p>(单船指导员签名) 陈逸清</p>
|
||||
</td>
|
||||
<td class="td-ac">
|
||||
<p>Signature of Duty manger:</p>
|
||||
<p>（值班经理签名） </p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p>地址(Address):上海浦东港建路1919号（1919 GangJian Road,PuDong ShangHai）</p>
|
||||
<p>电话(Tel):203009604&68685186</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "质量意见征询签名",
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../../style/css/main-dz.css";
|
||||
|
||||
.container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#t-xjl {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#t-xjl .td1 {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#t-xjl .td2 {
|
||||
text-align: left;
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
|
||||
.n-chuanming {
|
||||
width: 500px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.n-hangci {
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.n-shuliang {
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.v-chuanming {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.v-hangci {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.v-shuliang {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.t-zx .td-ar {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/hc.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@
|
|||
<p><text class="required" v-if="obj.state != 'look'">*</text>图片上传：</p>
|
||||
<template v-if="obj.state != 'look'">
|
||||
<view class="picture">
|
||||
<uni-file-picker limit="9" v-model="url" fileMediatype="image" @select="select"
|
||||
title="最多选择9张图片"></uni-file-picker>
|
||||
<uni-file-picker limit="9" v-model="urlList" fileMediatype="image" @select="select"
|
||||
@delete="delUrl" title="最多选择9张图片"></uni-file-picker>
|
||||
</view>
|
||||
</template>
|
||||
<view class="pictureLook" v-else>
|
||||
<view v-for="(item,index) in url" :key="index">
|
||||
<image :src="item">
|
||||
<view v-for="(item,index) in urlList" :key="index">
|
||||
<image :src="item.url" mode="widthFix">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -64,10 +64,17 @@
|
|||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
import api from "../../common/api.js";
|
||||
import utils from '@/common/util.js';
|
||||
import {
|
||||
pathToBase64,
|
||||
base64ToPath
|
||||
} from '../../js_sdk/mmmm-image-tools/index.js'
|
||||
import {
|
||||
compressImgBySize
|
||||
} from '@/common/compressImg'
|
||||
import {
|
||||
v4 as uuidv4
|
||||
} from 'uuid';
|
||||
let that;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -83,8 +90,9 @@
|
|||
// 类型
|
||||
type: "",
|
||||
// 图片
|
||||
url: [], // 待增加
|
||||
urlList: [],
|
||||
ysUrl: [],
|
||||
delUrlList: [],
|
||||
// 描述
|
||||
remark: "",
|
||||
|
||||
|
|
@ -99,6 +107,7 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
that = this
|
||||
if (this.obj.state == 'edit' || this.obj.state == 'look') {
|
||||
this.getRow();
|
||||
}
|
||||
|
|
@ -111,7 +120,7 @@
|
|||
}
|
||||
this.executeSql1('shipOption')
|
||||
this.executeSql1("shipInfoTable")
|
||||
this.executeSql2('safetyInspectionRespUrlList')
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 查
|
||||
|
|
@ -134,7 +143,7 @@
|
|||
let sql = `select * from ${tableName} WHERE contactId = '${this.patrolRow.webId}'`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
// console.log(value)
|
||||
this.urlList = value
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
|
|
@ -161,11 +170,11 @@
|
|||
getRow() {
|
||||
this.patrolRow = uni.getStorageSync('patrolRow');
|
||||
this.patrolRowIndex = uni.getStorageSync('patrolRowIndex');
|
||||
this.executeSql2('safetyInspectionRespUrlList')
|
||||
this.vvyId = this.patrolRow.vvyId
|
||||
this.vvyName = this.patrolRow.vvyName
|
||||
this.type = this.patrolRow.type
|
||||
this.remark = this.patrolRow.remark
|
||||
// this.url = this.patrolRow.url // 待增加
|
||||
},
|
||||
// 航次下拉
|
||||
hcChange(e) {
|
||||
|
|
@ -178,27 +187,36 @@
|
|||
},
|
||||
// 图片上传
|
||||
select(e) {
|
||||
console.log(e)
|
||||
let file = e.tempFiles[0].file
|
||||
this.fileToBase64(file).then(res => {
|
||||
console.log(res)
|
||||
utils.compress(res, 500, 0.3).then(res2 => {
|
||||
console.log(res2)
|
||||
this.ysUrl.push(res2)
|
||||
});
|
||||
console.log(this.ysUrl)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
pathToBase64(e.tempFiles[0].path)
|
||||
.then(base64 => {
|
||||
compressImgBySize(base64, 1200).then(baseImg => {
|
||||
// 输出图片base64
|
||||
that.ysUrl.push(baseImg)
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
})
|
||||
},
|
||||
fileToBase64(file) {
|
||||
return new Promise((resolve, reject) => { ///专门用来读文件的工具类
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
// 移除图片
|
||||
delUrl(e) {
|
||||
if (this.obj.state == 'edit') {
|
||||
this.delUrlList.push(e.tempFile.webId)
|
||||
}
|
||||
pathToBase64(e.tempFile.path)
|
||||
.then(base64 => {
|
||||
compressImgBySize(base64, 1200).then(baseImg => {
|
||||
// 输出图片base64
|
||||
this.ysUrl.forEach((v, index) => {
|
||||
if (v == base64) {
|
||||
this.ysUrl.splice(index, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
})
|
||||
},
|
||||
// 取消
|
||||
cancel() {
|
||||
|
|
@ -208,6 +226,10 @@
|
|||
},
|
||||
// 弹框删除
|
||||
delConfirm() {
|
||||
for (var i = 0; i < this.urlList.length; i++) {
|
||||
let delSql = `DELETE FROM safetyInspectionRespUrlList WHERE webId = '${this.urlList[i].webId}';`
|
||||
this.executeSql(delSql)
|
||||
}
|
||||
let sql = `DELETE FROM safetyInspectionRespList WHERE webId = '${this.patrolRow.webId}';`
|
||||
this.executeSql(sql)
|
||||
uni.navigateTo({
|
||||
|
|
@ -230,17 +252,27 @@
|
|||
type = '${this.type}',remark = '${this.remark}', webStatus = '${webStatus}',
|
||||
webDate = '${webDate}' WHERE webId = '${this.patrolRow.webId}';`
|
||||
this.executeSql(sql)
|
||||
if (this.delUrlList.length > 0) {
|
||||
for (var i = 0; i < this.delUrlList.length; i++) {
|
||||
let delSql = `DELETE FROM safetyInspectionRespUrlList WHERE webId = '${this.delUrlList[i]}';`
|
||||
this.executeSql(delSql)
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < this.ysUrl.length; i++) {
|
||||
let webId2 = uuidv4()
|
||||
let sql2 = `insert into safetyInspectionRespUrlList values('${webId2}','${this.patrolRow.webId}','${this.ysUrl[i]}',
|
||||
'${webStatus}','${webDate}')`
|
||||
this.executeSql(sql2)
|
||||
}
|
||||
} else if (this.obj.state == "add") {
|
||||
let sql = `insert into safetyInspectionRespList values('${webId}','${this.vvyId}','${this.vvyName}',
|
||||
'${this.type}','${this.remark}','${this.shipInfo.tradeTypeName}','${this.shipInfo.importExportFlagName}',
|
||||
'${this.shipInfo.spmName}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
console.log(this.ysUrl)
|
||||
for (var i = 0; i < this.ysUrl.length; i++) {
|
||||
let webId2 = uuidv4()
|
||||
let sql2 = `insert into safetyInspectionRespUrlList values('${webId2}','${webId}','${this.ysUrl[i]}',
|
||||
'${webStatus}','${webDate}')`
|
||||
console.log(sql2)
|
||||
this.executeSql(sql2)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -276,9 +276,7 @@
|
|||
} else if (this.obj.state == "add") {
|
||||
let sql = `insert into messageRespList values('${webId}','${this.bwValue}','${this.bwTextValue}',
|
||||
'${this.startTime}','${this.endTime}','${this.shipValue}','${this.hcValue}','${this.hcTextValue}','${this.tqValue}',
|
||||
'${this.tqTextValue}','${this.workValue}','${this.shipInfo.tradeTypeName}',
|
||||
'${this.shipInfo.importExportFlagName}','${this.shipInfo.spmName}',
|
||||
'${webStatus}','${webDate}')`
|
||||
'${this.tqTextValue}','${this.workValue}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
}
|
||||
uni.setStorageSync('tabsType', 0);
|
||||
|
|
|
|||
|
|
@ -729,11 +729,10 @@
|
|||
} else {
|
||||
let webId2 = uuidv4()
|
||||
let webDate = api.getDate(date)
|
||||
let sql2 = `insert into workMessageRespInfoList values('${webId2}','${this.ulList1[i].webId}','${this.ulList1[i].ulList2[j].carType}',
|
||||
let sql2 =
|
||||
`insert into workMessageRespInfoList values('${webId2}','${this.ulList1[i].webId}','${this.ulList1[i].ulList2[j].carType}',
|
||||
'${this.ulList1[i].ulList2[j].carTypeName}','${this.ulList1[i].ulList2[j].goodsNumber}','${this.ulList1[i].ulList2[j].loadingType}',
|
||||
'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}',
|
||||
'${this.shipInfo.tradeTypeName}','${this.shipInfo.importExportFlagName}',
|
||||
'${this.shipInfo.vslCnname}','${webStatus}','${webDate}')`
|
||||
'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql2)
|
||||
}
|
||||
}
|
||||
|
|
@ -743,8 +742,6 @@
|
|||
let sql = `insert into workMessageRespList values('${webId}','${contactId}','${this.aId}','${this.hcValue}',
|
||||
'${this.hcTextValue}','${this.zxValue}','${this.zxTextValue}','${this.ulList1[i].gbValue}',
|
||||
'${this.ulList1[i].gbTextValue}','${this.ulList1[i].startTime}','${this.ulList1[i].endTime}',
|
||||
'${this.shipInfo.tradeTypeName}',
|
||||
'${this.shipInfo.importExportFlagName}','${this.shipInfo.vslCnname}',
|
||||
'${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
for (let j = 0; j < this.ulList1[i].ulList2.length; j++) {
|
||||
|
|
@ -758,11 +755,10 @@
|
|||
} else {
|
||||
let webId2 = uuidv4()
|
||||
let webDate = api.getDate(date)
|
||||
let sql2 = `insert into workMessageRespInfoList values('${webId2}','${webId}','${this.ulList1[i].ulList2[j].carType}',
|
||||
let sql2 =
|
||||
`insert into workMessageRespInfoList values('${webId2}','${webId}','${this.ulList1[i].ulList2[j].carType}',
|
||||
'${this.ulList1[i].ulList2[j].carTypeName}','${this.ulList1[i].ulList2[j].goodsNumber}','${this.ulList1[i].ulList2[j].loadingType}',
|
||||
'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}',
|
||||
'${this.shipInfo.tradeTypeName}','${this.shipInfo.importExportFlagName}',
|
||||
'${this.shipInfo.vslCnname}','${webStatus}','${webDate}')`
|
||||
'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql2)
|
||||
}
|
||||
}
|
||||
|
|
@ -791,9 +787,7 @@
|
|||
'${this.fcUlList[i].fcTextValue}','${this.fcUlList[i].fcUlList2[j].qdValue}','${this.fcUlList[i].fcUlList2[j].zdValue}',
|
||||
'${this.fcUlList[i].fcUlList2[j].startTime}','${this.fcUlList[i].fcUlList2[j].endTime}','${this.fcUlList[i].fcUlList2[j].carType}',
|
||||
'${this.fcUlList[i].fcUlList2[j].carTypeName}','${this.fcUlList[i].fcUlList2[j].goodsNumber}','${this.fcUlList[i].fcUlList2[j].tjValue}',
|
||||
'${this.fcUlList[i].fcUlList2[j].zlValue}','${this.shipInfo.tradeTypeName}',
|
||||
'${this.shipInfo.importExportFlagName}','${this.shipInfo.vslCnname}',
|
||||
'${editStatus}','${webStatus}','${webDate}')`
|
||||
'${this.fcUlList[i].fcUlList2[j].zlValue}','${editStatus}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
}
|
||||
}
|
||||
|
|
@ -806,9 +800,7 @@
|
|||
'${this.fcUlList[i].fcTextValue}','${this.fcUlList[i].fcUlList2[j].qdValue}','${this.fcUlList[i].fcUlList2[j].zdValue}',
|
||||
'${this.fcUlList[i].fcUlList2[j].startTime}','${this.fcUlList[i].fcUlList2[j].endTime}','${this.fcUlList[i].fcUlList2[j].carType}',
|
||||
'${this.fcUlList[i].fcUlList2[j].carTypeName}','${this.fcUlList[i].fcUlList2[j].goodsNumber}','${this.fcUlList[i].fcUlList2[j].tjValue}',
|
||||
'${this.fcUlList[i].fcUlList2[j].zlValue}','${this.shipInfo.tradeTypeName}',
|
||||
'${this.shipInfo.importExportFlagName}','${this.shipInfo.vslCnname}',
|
||||
'${editStatus}','${webStatus}','${webDate}')`
|
||||
'${this.fcUlList[i].fcUlList2[j].zlValue}','${editStatus}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
}
|
||||
}
|
||||
|
|
@ -847,18 +839,15 @@
|
|||
let sql = `insert into workMessageRespList values('${webId}','${contactId}','${aId}','${this.hcValue}',
|
||||
'${this.hcTextValue}','${this.zxValue}','${this.zxTextValue}','${this.ulList1[i].gbValue}',
|
||||
'${this.ulList1[i].gbTextValue}','${this.ulList1[i].startTime}','${this.ulList1[i].endTime}',
|
||||
'${this.shipInfo.tradeTypeName}',
|
||||
'${this.shipInfo.importExportFlagName}','${this.shipInfo.vslCnname}',
|
||||
'${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
for (let j = 0; j < this.ulList1[i].ulList2.length; j++) {
|
||||
let webId2 = uuidv4()
|
||||
let webDate = api.getDate(date)
|
||||
let sql2 = `insert into workMessageRespInfoList values('${webId2}','${webId}','${this.ulList1[i].ulList2[j].carType}',
|
||||
let sql2 =
|
||||
`insert into workMessageRespInfoList values('${webId2}','${webId}','${this.ulList1[i].ulList2[j].carType}',
|
||||
'${this.ulList1[i].ulList2[j].carTypeName}','${this.ulList1[i].ulList2[j].goodsNumber}','${this.ulList1[i].ulList2[j].loadingType}',
|
||||
'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}',
|
||||
'${this.shipInfo.tradeTypeName}','${this.shipInfo.importExportFlagName}',
|
||||
'${this.shipInfo.vslCnname}','${webStatus}','${webDate}')`
|
||||
'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql2)
|
||||
}
|
||||
}
|
||||
|
|
@ -872,9 +861,7 @@
|
|||
'${this.fcUlList[i].fcTextValue}','${this.fcUlList[i].fcUlList2[j].qdValue}','${this.fcUlList[i].fcUlList2[j].zdValue}',
|
||||
'${this.fcUlList[i].fcUlList2[j].startTime}','${this.fcUlList[i].fcUlList2[j].endTime}','${this.fcUlList[i].fcUlList2[j].carType}',
|
||||
'${this.fcUlList[i].fcUlList2[j].carTypeName}','${this.fcUlList[i].fcUlList2[j].goodsNumber}','${this.fcUlList[i].fcUlList2[j].tjValue}',
|
||||
'${this.fcUlList[i].fcUlList2[j].zlValue}','${this.shipInfo.tradeTypeName}',
|
||||
'${this.shipInfo.importExportFlagName}','${this.shipInfo.vslCnname}',
|
||||
'${editStatus}','${webStatus}','${webDate}')`
|
||||
'${this.fcUlList[i].fcUlList2[j].zlValue}','${editStatus}','${webStatus}','${webDate}')`
|
||||
this.executeSql(sql)
|
||||
}
|
||||
}
|
||||
|
|
@ -885,9 +872,8 @@
|
|||
`insert into infoRespList values('${webId}','${contactId}','${aId}','${this.hcValue}','${this.hcTextValue}','${this.otherObj.jsworker}',
|
||||
'${this.otherObj.startTime}','${this.otherObj.endTime}','${this.otherObj.zlValue}','${this.otherObj.tjValue}','${this.otherObj.ptworker}',
|
||||
'${this.otherObj.startTime2}','${this.otherObj.endTime2}','${this.otherObj.zlValue2}','${this.otherObj.tjValue2}','${this.otherObj.describe}',
|
||||
'${this.otherObj.dgWork}','${this.otherObj.remark}','${this.shipInfo.tradeTypeName}',
|
||||
'${this.shipInfo.importExportFlagName}','${this.shipInfo.vslCnname}',
|
||||
'${webStatus}','${webDate}')`
|
||||
'${this.otherObj.dgWork}','${this.otherObj.remark}','${webStatus}','${webDate}')`
|
||||
|
||||
this.executeSql(sql)
|
||||
}
|
||||
uni.setStorageSync('tabsType', 1);
|
||||
|
|
|
|||
|
|
@ -79,6 +79,10 @@
|
|||
<p>作业时间：</p>
|
||||
<text>{{item2.retallyStartTime}} - {{item2.retallyEndTime}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>车型：</p>
|
||||
<text>{{item2.carTypeName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p>数量：</p>
|
||||
<text>{{item2.goodsNumber}}</text>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="sign">
|
||||
<head-view title="单证签名"></head-view>
|
||||
<head-view title="单证签名" :url="backUrl"></head-view>
|
||||
<view class="container">
|
||||
<view class="sign-box">
|
||||
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
|
||||
|
|
@ -17,7 +17,18 @@
|
|||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import utils from '@/common/util.js';
|
||||
import {
|
||||
pathToBase64,
|
||||
base64ToPath
|
||||
} from '../../js_sdk/mmmm-image-tools/index.js'
|
||||
import {
|
||||
compressImgBySize
|
||||
} from '@/common/compressImg'
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
import api from "../../common/api.js"
|
||||
import {
|
||||
v4 as uuidv4
|
||||
} from 'uuid';
|
||||
var x = 20;
|
||||
var y = 20;
|
||||
var tempPoint = []; //用来存放当前画纸上的轨迹点
|
||||
|
|
@ -33,12 +44,26 @@
|
|||
points: [], //路径点集合,
|
||||
width: 0,
|
||||
height: 0,
|
||||
sginType: ""
|
||||
sginId: "",
|
||||
signImgUrl: "",
|
||||
shipInfo: {},
|
||||
nextUrl: "",
|
||||
signType: "",
|
||||
signTable: "",
|
||||
backUrl: "",
|
||||
tabsValue: 0
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
this.executeSql1('shipInfoTable')
|
||||
},
|
||||
onLoad(option) {
|
||||
this.sginType = JSON.parse(decodeURIComponent(option.dataType)).signType
|
||||
this.sginId = JSON.parse(decodeURIComponent(option.params)).id
|
||||
this.nextUrl = JSON.parse(decodeURIComponent(option.params)).url
|
||||
this.signType = JSON.parse(decodeURIComponent(option.params)).signType
|
||||
this.signTable = JSON.parse(decodeURIComponent(option.params)).signTable
|
||||
this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
|
||||
this.backUrl = `/pages/shipWork/${this.nextUrl}`
|
||||
that = this;
|
||||
id = option.id;
|
||||
type = option.type;
|
||||
|
|
@ -119,7 +144,6 @@
|
|||
|
||||
//清空画布
|
||||
handleReset: function() {
|
||||
console.log('handleReset');
|
||||
that.ctx.clearRect(0, 0, that.width, that.height);
|
||||
that.ctx.draw(true);
|
||||
tempPoint = [];
|
||||
|
|
@ -127,6 +151,7 @@
|
|||
|
||||
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||
handleConfirm: function() {
|
||||
that = this
|
||||
if (tempPoint.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先签名',
|
||||
|
|
@ -134,37 +159,61 @@
|
|||
duration: 2000
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
let info = this.shipInfo
|
||||
let signId = this.sginId
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(res) {
|
||||
setTimeout(function() {
|
||||
pathToBase64(res.tempFilePath)
|
||||
.then(base64 => {
|
||||
compressImgBySize(base64, 1200).then(baseImg => {
|
||||
// 输出图片base64
|
||||
that.signImgUrl = baseImg
|
||||
let date = new Date().getTime()
|
||||
let webId = uuidv4()
|
||||
let webDate = api.getDate(date)
|
||||
let sql =
|
||||
`insert into workSignTable values('${webId}','${info.vvyId}','${info.vvyName}','${signId}','${that.signImgUrl}','${that.signTable}',${that.signType},'${webDate}')`
|
||||
sqlite.executeSqlCeshi(sql).then((
|
||||
value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
let obj = {
|
||||
tabsValue: that
|
||||
.tabsValue
|
||||
}
|
||||
const params =
|
||||
encodeURIComponent(JSON
|
||||
.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/${that.nextUrl}?params=${params}`
|
||||
})
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
}
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(res) {
|
||||
let tempPath = res.tempFilePath;
|
||||
console.log(tempPath, '压缩前')
|
||||
// 示例用法
|
||||
utils.compress(tempPath, 500, 0.3).then(res => {
|
||||
console.log(res, '压缩后');
|
||||
}); //conpress封装的压缩方法; //conpress封装的压缩方法
|
||||
const ctx = uni.createCanvasContext('camCacnvs', that);
|
||||
ctx.translate(0, that.width);
|
||||
ctx.rotate((-90 * Math.PI) / 180);
|
||||
ctx.drawImage(tempPath, 0, 0, that.width, that.height);
|
||||
ctx.draw();
|
||||
setTimeout(() => {
|
||||
//保存签名图片到本地
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'camCacnvs',
|
||||
success: function(res) {
|
||||
//这是签名图片文件的本地临时地址
|
||||
let path = res.tempFilePath;
|
||||
},
|
||||
fail: err => {
|
||||
console.log('fail', err);
|
||||
}
|
||||
},
|
||||
this
|
||||
);
|
||||
}, 200);
|
||||
},
|
||||
// 查船舶信息
|
||||
executeSql1(tableName) {
|
||||
let sql = `select * from ${tableName}`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
if (tableName == 'shipInfoTable') {
|
||||
this.shipInfo = value[0]
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/hc.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
const dataType = encodeURIComponent(JSON.stringify(objType));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?dataType=${dataType}`
|
||||
url: `/pages/shipWork/supplySign?dataType=${dataType}`
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
|
|
|
|||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<view class="supplySign">
|
||||
<head-view :title="title" url="/pages/shipWork/supply"></head-view>
|
||||
<custom-tabs type="c1" :value="tabsValue" @change="tabsChange">
|
||||
<custom-tab-pane :label="item.name" v-for="(item,index) in tabsList" :name="'c1_'+index" :key="index">
|
||||
<view></view>
|
||||
<view class="container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h-l1r1">
|
||||
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix">
|
||||
</image>
|
||||
</td>
|
||||
<td class="h-l1r2"> </td>
|
||||
<td class="h-l1r3">
|
||||
<p>上海海通国际汽车码头有限公司</p>
|
||||
<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="bh-dz">QR-7.5.1-01-11-M</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="h-l2r1">
|
||||
<p class="name-dz">供给作业单</p>
|
||||
<p class="ename-dz">FRESH WTAER SUPPLIED EX WHARF</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-main2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>船名：</p>
|
||||
<p>Name of Ship </p>
|
||||
</td>
|
||||
<td class="td2">{{shipInfo.vslCnname}}</td>
|
||||
<td class="td1">
|
||||
<p>{{tableInfo.supplyType}}</p>
|
||||
<p>Fresh Supply</p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.supplyAmount}}</td>
|
||||
<td class="td3">
|
||||
<p>吨</p>
|
||||
<p>Tons</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6" class="tr0"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>航次：</p>
|
||||
<p>voy No </p>
|
||||
</td>
|
||||
<td class="td2">{{shipInfo.vvyName}}</td>
|
||||
<td class="td1">
|
||||
<p>泊位：</p>
|
||||
<p>Berth </p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.stopBerthageName}}</td>
|
||||
<td class="td1">
|
||||
<p>日期：</p>
|
||||
<p>Date </p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.supplyDate}}</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<view class="sginBox">
|
||||
<view class="box">
|
||||
<p>Capt/Chief Mate(船长/大副):</p>
|
||||
<p class="sign" @click="togoSign('1')" v-if="czSign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="czSign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(czSign.webId)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</custom-tab-pane>
|
||||
</custom-tabs>
|
||||
<uni-popup ref="delPopup" type="dialog">
|
||||
<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
|
||||
@confirm="delConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "供给签名",
|
||||
tabsValue: 0,
|
||||
tabsList: [],
|
||||
// 船舶信息
|
||||
shipInfo: {},
|
||||
// 表内数据
|
||||
tableInfo: [],
|
||||
// 签名信息
|
||||
czSign: {},
|
||||
delId: "",
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if ('params' in option) {
|
||||
this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.executeSql('shipInfoTable')
|
||||
},
|
||||
methods: {
|
||||
// 查船舶信息
|
||||
executeSql(tableName) {
|
||||
let sql = `select * from ${tableName}`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.shipInfo = value[0]
|
||||
this.executeSql1('shipmentShipSupplyRespList', this.tabsValue)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查供给信息
|
||||
executeSql1(tableName, tabsValue) {
|
||||
let sql = `select * from ${tableName} WHERE vvyId='${this.shipInfo.vvyId}'`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.tabsList = []
|
||||
this.tableInfo = value[tabsValue]
|
||||
value.forEach((v, index) => {
|
||||
let obj = {
|
||||
name: `供水${index + 1}`,
|
||||
}
|
||||
this.tabsList.push(obj)
|
||||
})
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查单证签字表
|
||||
executeSql2() {
|
||||
let sql = `select * from workSignTable WHERE signId = '${this.tableInfo.webId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
if (value.length > 0) {
|
||||
this.czSign = value[0]
|
||||
} else {
|
||||
this.czSign = {
|
||||
url: ""
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 标签切换
|
||||
tabsChange(e) {
|
||||
this.tabsValue = e.value
|
||||
this.executeSql1('shipmentShipSupplyRespList', e.value)
|
||||
},
|
||||
// 点击签名
|
||||
togoSign(signType) {
|
||||
let obj = {
|
||||
id: this.tableInfo.webId,
|
||||
url: "supplySign",
|
||||
signType: signType, // 0 指导员 1 船长/大副
|
||||
signTable: "supply",
|
||||
tabsValue: this.tabsValue,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?params=${params}`
|
||||
})
|
||||
},
|
||||
// 删除当前签名
|
||||
delSign(id) {
|
||||
this.$refs.delPopup.open()
|
||||
this.delId = id
|
||||
},
|
||||
// 弹框删除
|
||||
delConfirm() {
|
||||
let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../../style/css/main-dz.css";
|
||||
|
||||
.container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.sginBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
margin-right: 80px;
|
||||
|
||||
image {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.del {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.sign {
|
||||
color: #2979ff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/hc.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
const dataType = encodeURIComponent(JSON.stringify(objType));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?dataType=${dataType}`
|
||||
url: `/pages/shipWork/untieSign?dataType=${dataType}`
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
|
|
|
|||
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<view class="untieSign">
|
||||
<head-view :title="title" url="/pages/shipWork/untieCord"></head-view>
|
||||
<custom-tabs type="c1" :value="tabsValue" @change="tabsChange">
|
||||
<custom-tab-pane :label="item.name" v-for="(item,index) in tabsList" :name="'c1_'+index" :key="index">
|
||||
<view></view>
|
||||
<view class="container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h-l1r1">
|
||||
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix">
|
||||
</image>
|
||||
</td>
|
||||
<td class="h-l1r2"> </td>
|
||||
<td class="h-l1r3">
|
||||
<p>上海海通国际汽车码头有限公司</p>
|
||||
<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="bh-dz">QR-7.5.1-01-11-M</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="h-l2r1">
|
||||
<p class="name-dz">海通码头系解缆签证单</p>
|
||||
<p class="ename-dz">MOONRING AND UNMOONRING RECORD</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-main2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>船名：</p>
|
||||
<p>Name of Ship </p>
|
||||
</td>
|
||||
<td class="td2">{{shipInfo.vslCnname}}</td>
|
||||
<td class="td1">
|
||||
<p>船舶净吨：</p>
|
||||
<p>Net tonnage </p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.shipDeadWeight}}</td>
|
||||
<td class="td3">
|
||||
<p>吨</p>
|
||||
<p>Tons</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6" class="tr0"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>航次：</p>
|
||||
<p>voy No </p>
|
||||
</td>
|
||||
<td class="td2">{{shipInfo.vvyName}}</td>
|
||||
<td class="td1">
|
||||
<p>泊位：</p>
|
||||
<p>Berth </p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.bthIdName}}</td>
|
||||
<td class="td1">
|
||||
<p>系缆时间：</p>
|
||||
<p>Time of Moonring </p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.attachTime}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6" class="tr0"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1">
|
||||
<p>解缆时间：</p>
|
||||
<p>Time of Unmoonring </p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.unmoorTime}}</td>
|
||||
<td class="td1">
|
||||
<p>移泊时间：</p>
|
||||
<p>Time of Shifting </p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.shiftingBerthTime}}</td>
|
||||
<td class="td1">
|
||||
<p>停泊时间：</p>
|
||||
<p>Time of Shifting </p>
|
||||
</td>
|
||||
<td class="td2">{{tableInfo.noProductBerthTime}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<view class="sginBox">
|
||||
<view class="box">
|
||||
<p>Capt/Chief Mate(船长/大副):</p>
|
||||
<p class="sign" @click="togoSign('1')" v-if="czSign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="czSign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(czSign.webId)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</custom-tab-pane>
|
||||
</custom-tabs>
|
||||
<uni-popup ref="delPopup" type="dialog">
|
||||
<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
|
||||
@confirm="delConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "系解缆签名",
|
||||
tabsValue: 0,
|
||||
tabsList: [],
|
||||
// 船舶信息
|
||||
shipInfo: {},
|
||||
// 表内数据
|
||||
tableInfo: [],
|
||||
// 签名信息
|
||||
czSign: {},
|
||||
delId: "",
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if ('params' in option) {
|
||||
this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.executeSql('shipInfoTable')
|
||||
},
|
||||
methods: {
|
||||
// 查船舶信息
|
||||
executeSql(tableName) {
|
||||
let sql = `select * from ${tableName}`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.shipInfo = value[0]
|
||||
this.executeSql1('attachUnmoorRespList', this.tabsValue)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查系解缆信息
|
||||
executeSql1(tableName, tabsValue) {
|
||||
let sql = `select * from ${tableName} WHERE vvyId='${this.shipInfo.vvyId}'`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.tabsList = []
|
||||
this.tableInfo = value[tabsValue]
|
||||
value.forEach((v, index) => {
|
||||
let obj = {
|
||||
name: `系解缆${index + 1}`,
|
||||
}
|
||||
this.tabsList.push(obj)
|
||||
})
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查单证签字表
|
||||
executeSql2() {
|
||||
let sql = `select * from workSignTable WHERE signId = '${this.tableInfo.webId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
if (value.length > 0) {
|
||||
this.czSign = value[0]
|
||||
} else {
|
||||
this.czSign = {
|
||||
url: ""
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 标签切换
|
||||
tabsChange(e) {
|
||||
this.tabsValue = e.value
|
||||
this.executeSql1('attachUnmoorRespList', e.value)
|
||||
},
|
||||
// 点击签名
|
||||
togoSign(signType) {
|
||||
let obj = {
|
||||
id: this.tableInfo.webId,
|
||||
url: "untieSign",
|
||||
signType: signType, // 0 指导员 1 船长/大副
|
||||
signTable: "untieCord",
|
||||
tabsValue: this.tabsValue,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?params=${params}`
|
||||
})
|
||||
},
|
||||
// 删除当前签名
|
||||
delSign(id) {
|
||||
this.$refs.delPopup.open()
|
||||
console.log(id)
|
||||
this.delId = id
|
||||
},
|
||||
// 弹框删除
|
||||
delConfirm() {
|
||||
let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../../style/css/main-dz.css";
|
||||
|
||||
.container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.sginBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
margin-right: 80px;
|
||||
|
||||
image {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.del {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.sign {
|
||||
color: #2979ff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<view class="ul">
|
||||
<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
|
||||
<view class="title">
|
||||
<image src="../../static/images/shipWork/hc.png" mode=""></image>
|
||||
<image src="../../static/images/shipWork/hc.png" mode="widthFix"></image>
|
||||
<text>航次：{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="liInfo">
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
const dataType = encodeURIComponent(JSON.stringify(objType));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?dataType=${dataType}`
|
||||
url: `/pages/shipWork/workAssignSign?dataType=${dataType}`
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
|
|
|
|||
|
|
@ -0,0 +1,551 @@
|
|||
<template>
|
||||
<view class="workAssignSign">
|
||||
<head-view :title="title"></head-view>
|
||||
<custom-tabs type="c1" :value="tabsValue" @change="tabsChange">
|
||||
<custom-tab-pane :label="item.name" v-for="(item,index) in tabsList" :name="'c1_'+index" :key="index">
|
||||
<view></view>
|
||||
<view class="container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="h-l1r1">
|
||||
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix">
|
||||
</image>
|
||||
</td>
|
||||
<td class="h-l1r2"> </td>
|
||||
<td class="h-l1r3">
|
||||
<p>上海海通国际汽车码头有限公司</p>
|
||||
<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="bh-dz">QR-7.5.1-01-11-M</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="h-l2r1">
|
||||
<p class="name-dz">海通码头单船指导员作业布置表</p>
|
||||
<p class="ename-dz"></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-xjl">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">船名:</td>
|
||||
<td class="td2">{{shipInfo.vslCnname}}</td>
|
||||
<td class="td1">航次:</td>
|
||||
<td class="td2">{{shipInfo.vvyName}}</td>
|
||||
<td class="td1">泊位:</td>
|
||||
<td class="td2">{{tableInfo.bthIdName}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-xjl">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">人数:</td>
|
||||
<td class="td2">{{tableInfo.personNumber}}</td>
|
||||
<td class="td1">装/卸货辆/件:</td>
|
||||
<td class="td2">{{tableInfo.vehicleSize}}/{{tableInfo.sparePart}}</td>
|
||||
<td class="td1">工班:</td>
|
||||
<td class="td2">{{tableInfo.pwcType}}</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="t-xjl">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="td1">作业日期:</td>
|
||||
<td class="td2">{{tableInfo.startTime}} - {{tableInfo.endTime}}</td>
|
||||
<td class="td1">作业开始时间:</td>
|
||||
<td class="td2">{{tableInfo.startTime}}</td>
|
||||
<td class="td1">作业结束时间:</td>
|
||||
<td class="td2">{{tableInfo.endTime}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<view class="title">
|
||||
<p>确认项目</p>
|
||||
</view>
|
||||
<table id="t-main">
|
||||
<tbody v-for="(item,index) in items" :key="index">
|
||||
<tr>
|
||||
<td class="td1h">{{item.itemTitle}}</td>
|
||||
<td class="td2">YES</td>
|
||||
<td class="td3">NO</td>
|
||||
<td class="td3">备注</td>
|
||||
</tr>
|
||||
<tr v-for="(item2,index2) in item.list" :key="index2">
|
||||
<td class="td1">
|
||||
<p>{{item2.listTitle}}</p>
|
||||
</td>
|
||||
<td class="td2">
|
||||
<radio :value="item2.yesValue" :checked="item2.yesRadio" :disabled="true" />
|
||||
</td>
|
||||
<td class="td2">
|
||||
<radio :value="item2.noValue" :checked="item2.noRadio" :disabled="true" />
|
||||
</td>
|
||||
<td class="td3"><uni-easyinput :v-model="item2.notes" :disabled="true"></uni-easyinput>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<view class="sginBox">
|
||||
<view class="box">
|
||||
<p>单船指导员签名(Signature of Foreman):</p>
|
||||
<p class="sign" @click="togoSign('0')" v-if="zdySign.url == ''">点击签名</p>
|
||||
<template v-else>
|
||||
<image :src="zdySign.url" mode="widthFix"></image>
|
||||
<text class="del" @click="delSign(zdySign.webId)">删除</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</custom-tab-pane>
|
||||
</custom-tabs>
|
||||
<uni-popup ref="delPopup" type="dialog">
|
||||
<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
|
||||
@confirm="delConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sqlite from "../../common/sqlite.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: "指导员作业布置表签名",
|
||||
items: [{
|
||||
itemTitle: "1.靠泊前/后准备及安全措施的落实。",
|
||||
list: [{
|
||||
listTitle: "（1）码头前沿泊位清爽，无影响靠泊船舶/障碍物，靠泊旗/灯位置摆放准确。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
},
|
||||
{
|
||||
listTitle: "（2）检查手提式对讲机和靠泊对讲机有效使用并保持和船舶引水联系畅通。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（3）船舶带缆缆桩大概位置清楚，缆桩上无障碍物。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（4）带缆工人提前到码头，并检查劳保用品和救生衣穿戴整齐、规范、有效。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（5）带缆工人根据公司规定配员合理。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（6）靠泊期间潮汐情况已经了解并做好相应的记录。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（7）带缆期间集中注意力，面向船舶，严肃、认真，与相关协助靠泊人员保持有效沟通。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（8）带缆期间提醒带缆工人注意站位并在缆绳绞紧期间站在安全距离外。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（9）靠泊期间码头前沿无关人员远离。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（10）缆绳全部上桩并绞紧后单船指导员才能离开现场。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（11）靠泊后如有人员从舷梯上下，督促船方放妥安全网。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
itemTitle: "2.装/卸货物前的准备。",
|
||||
list: [{
|
||||
listTitle: "（1）装/卸船货物已经实地查看并对装船高度差较小的车辆进行核实高度。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
},
|
||||
{
|
||||
listTitle: "（2）核对装/卸船货物的唛头，确认装/卸船货物的准确性。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（3）大型工程车辆装/卸船前已经根据船方要求舱内做好相应的铺垫工作。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（4）船舱内、码头、引桥、场地等限速场所按照规定速度行驶。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（5）装/卸船时对有高低舱的甲板已经做好明显的标识，并告知作业相关人员。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（6）船上实际查看作业层面并对作业路线做了必要的安全标识和有效的路线安排。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（7）作业前与船舶大副签署《通知书》并告知实际的作业路线安排和相关注意事项。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（8）重点舱、重点货物装船已经安排好专人操作/指挥。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（9）根据跳板的实际情况对超长货物/重点货物提前预判装船顺序。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}
|
||||
]
|
||||
}, {
|
||||
itemTitle: "3.装/卸作业安全措施的布置和落实。",
|
||||
list: [{
|
||||
listTitle: "（1）船图、东雷作业计划书、场位图、堆场计划、堆场装/卸作业计划书等相关资料齐全。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
},
|
||||
{
|
||||
listTitle: "（2）与堆场相关负责人核对装/卸货物的场地。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（3）根据实际情况会同相关人员制定作业路线图，并在交叉路口安排信号员。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（4）已经实地查看将要装/卸船的货物并对重点货物采取了必要的安全措施。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（5）装/卸大型机械做好相关的铺垫工作并在作业过程中根据实际情况及时调整。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（6）通知船舶大副装/卸作业期间船员禁止进入作业区域。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（7）作业过程中发现违章、违规现象及时制止并纠正必要时予以现场整改。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（8）装/卸重点舱、重点货物时候单船指导员在现场指挥。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（9）货物的绑扎按照操作规范执行并的到船方确认。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}, {
|
||||
listTitle: "（10）重大件货物的绑扎安全、有效并得到船方确认。",
|
||||
yesValue: "yes",
|
||||
yesRadio: true,
|
||||
noValye: "no",
|
||||
noRadio: false,
|
||||
notes: "",
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
tabsValue: 0,
|
||||
tabsList: [],
|
||||
// 船舶信息
|
||||
shipInfo: {},
|
||||
// 表内数据
|
||||
tableInfo: {},
|
||||
// 签名信息
|
||||
zdySign: {},
|
||||
delId: "",
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if ('params' in option) {
|
||||
this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.executeSql('shipInfoTable')
|
||||
},
|
||||
methods: {
|
||||
// 查船舶信息
|
||||
executeSql(tableName) {
|
||||
let sql = `select * from ${tableName}`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.shipInfo = value[0]
|
||||
console.log(this.shipInfo)
|
||||
this.executeSql1('shipmentAdviserLayoutRespList', this.tabsValue)
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查指导员作业布置
|
||||
executeSql1(tableName, tabsValue) {
|
||||
let sql = `select * from ${tableName} WHERE vvyId='${this.shipInfo.vvyId}'`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.tabsList = []
|
||||
this.tableInfo = value[tabsValue]
|
||||
console.log(value)
|
||||
value.forEach((v, index) => {
|
||||
let obj = {
|
||||
name: `指导员作业布置表${index + 1}`,
|
||||
}
|
||||
this.tabsList.push(obj)
|
||||
})
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 查单证签字表
|
||||
executeSql2() {
|
||||
let sql = `select * from workSignTable WHERE signId = '${this.tableInfo.webId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
if (value.length > 0) {
|
||||
this.zdySign = value[0]
|
||||
} else {
|
||||
this.zdySign = {
|
||||
url: ""
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
// 标签切换
|
||||
tabsChange(e) {
|
||||
this.tabsValue = e.value
|
||||
this.executeSql1('shipmentAdviserLayoutRespList', e.value)
|
||||
},
|
||||
// 点击签名
|
||||
togoSign(signType) {
|
||||
let obj = {
|
||||
id: this.tableInfo.webId,
|
||||
url: "workAssignSign",
|
||||
signType: signType, // 0 指导员 1 船长/大副
|
||||
signTable: "workAssign",
|
||||
tabsValue: this.tabsValue,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/sign?params=${params}`
|
||||
})
|
||||
},
|
||||
// 删除当前签名
|
||||
delSign(id) {
|
||||
this.$refs.delPopup.open()
|
||||
this.delId = id
|
||||
},
|
||||
// 弹框删除
|
||||
delConfirm() {
|
||||
let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
|
||||
sqlite.executeSqlCeshi(sql).then((value) => {
|
||||
// 在resolve时执行的回调函数
|
||||
this.executeSql2()
|
||||
}).catch((error) => {
|
||||
// 在reject时执行的回调函数
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "../../style/css/main-dz.css";
|
||||
|
||||
.container {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#t-xjl .td1 {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#t-xjl .td2 {
|
||||
text-align: center;
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
border: 1px solid #000000;
|
||||
border-bottom: none;
|
||||
|
||||
}
|
||||
|
||||
#t-main {
|
||||
border-collapse: collapse;
|
||||
border: #000000 solid 1px;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
#t-main td {
|
||||
border: #000000 solid 1px;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
#t-main .td1 {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#t-main .td2 {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#t-main .td3 {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#t-main .bn {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#t-main .td1h {
|
||||
width: 1200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.sginBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
margin-right: 80px;
|
||||
|
||||
image {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.del {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.sign {
|
||||
color: #2979ff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="37px" height="5px" viewBox="0 0 37 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 6备份</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-6备份" transform="translate(0.292429, 0.089476)">
|
||||
<polygon id="Fill-1" fill="#FFFFFF" transform="translate(18.321017, 3.551318) scale(1, -1) translate(-18.321017, -3.551318) " points="2.51901703 2.23881782 1.32601703 4.86381782 35.316017 4.86381782 34.123017 2.23881782"></polygon>
|
||||
<g id="编组-5" transform="translate(0.000000, -0.000000)" fill="#999999">
|
||||
<rect id="矩形" transform="translate(34.910512, 2.431909) scale(-1, 1) rotate(-390.000000) translate(-34.910512, -2.431909) " x="34.3768208" y="-0.068091091" width="1.0673816" height="5"></rect>
|
||||
<rect id="矩形备份" transform="translate(1.712190, 2.435743) scale(1, -1) rotate(-330.000000) translate(-1.712190, -2.435743) " x="1.17849899" y="-0.064256756" width="1.0673816" height="5"></rect>
|
||||
<path d="M4.42501703,2.60531074 L4.42437958,4.10617282 L3.42437958,4.10617282 L3.42501703,2.60531074 L4.42501703,2.60531074 Z M6.42501703,2.60531074 L6.42437958,4.10617282 L5.42437958,4.10617282 L5.42501703,2.60531074 L6.42501703,2.60531074 Z M8.42501703,2.60531074 L8.42437958,4.10617282 L7.42437958,4.10617282 L7.42501703,2.60531074 L8.42501703,2.60531074 Z M10.425017,2.60531074 L10.4243796,4.10617282 L9.42437958,4.10617282 L9.42501703,2.60531074 L10.425017,2.60531074 Z M12.425017,2.60531074 L12.4243796,4.10617282 L11.4243796,4.10617282 L11.425017,2.60531074 L12.425017,2.60531074 Z M14.425017,2.60531074 L14.4243796,4.10617282 L13.4243796,4.10617282 L13.425017,2.60531074 L14.425017,2.60531074 Z M16.425017,2.60531074 L16.4243796,4.10617282 L15.4243796,4.10617282 L15.425017,2.60531074 L16.425017,2.60531074 Z M18.425017,2.60531074 L18.4243796,4.10617282 L17.4243796,4.10617282 L17.425017,2.60531074 L18.425017,2.60531074 Z M20.425017,2.60531074 L20.4243796,4.10617282 L19.4243796,4.10617282 L19.425017,2.60531074 L20.425017,2.60531074 Z M22.425017,2.60531074 L22.4243796,4.10617282 L21.4243796,4.10617282 L21.425017,2.60531074 L22.425017,2.60531074 Z M24.425017,2.60531074 L24.4243796,4.10617282 L23.4243796,4.10617282 L23.425017,2.60531074 L24.425017,2.60531074 Z M26.425017,2.60531074 L26.4243796,4.10617282 L25.4243796,4.10617282 L25.425017,2.60531074 L26.425017,2.60531074 Z M32.425017,2.60531074 L32.4243796,4.10617282 L31.4243796,4.10617282 L31.425017,2.60531074 L32.425017,2.60531074 Z M30.425017,2.60531074 L30.4243796,4.10617282 L29.4243796,4.10617282 L29.425017,2.60531074 L30.425017,2.60531074 Z M28.425017,2.60531074 L28.4243796,4.10617282 L27.4243796,4.10617282 L27.425017,2.60531074 L28.425017,2.60531074 Z" id="形状结合" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="21px" height="20px" viewBox="0 0 21 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 8</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组-8" transform="translate(0.000000, 0.636006)">
|
||||
<path d="M0,1.29409523 L4.32602405,1.53851169 C13.7484641,9.27525542 18.7947517,13.6267886 19.4648867,14.5931114 C20.1350217,15.5594341 19.8579547,16.918269 18.6336856,18.6696163 L12.7528695,17.0789301 C5.53681312,15.1270785 0.392065707,8.75917919 0,1.29409523 L0,1.29409523 L0,1.29409523 Z" id="路径-3" fill="#FFFFFF"></path>
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" transform="translate(19.796239, 15.576191) rotate(-345.000000) translate(-19.796239, -15.576191) " x="19.7625481" y="13.5761911" width="1" height="4" rx="0.5"></rect>
|
||||
<rect id="矩形备份" stroke="#979797" fill="#D8D8D8" transform="translate(2.552944, 1.162553) rotate(-285.000000) translate(-2.552944, -1.162553) " x="2.51925311" y="-0.837446661" width="1" height="4"></rect>
|
||||
<path d="M14.6428415,15.3199652 C14.9477234,15.4486865 15.2573759,15.5718581 15.5715475,15.6894636 L15.5715475,15.6894636 L15.0454534,17.0941789 C14.7115978,16.9692015 14.3827808,16.8383812 14.0592187,16.70177 L14.0592187,16.70177 Z M12.8255048,14.4560406 C13.1176593,14.6117408 13.4154014,14.7616126 13.7184578,14.905638 L13.7184578,14.905638 L13.0749819,16.2606063 C12.7507239,16.1065119 12.432457,15.946284 12.1204039,15.7799865 L12.1204039,15.7799865 Z M11.0936377,13.4198538 C11.3685271,13.6041233 11.6498885,13.7822988 11.9374269,13.9543609 L11.9374269,13.9543609 L11.1679372,15.2419502 C10.8574786,15.0561896 10.5540716,14.8640111 10.2579444,14.6654929 L10.2579444,14.6654929 Z M9.47374827,12.1985293 C9.72673845,12.4131251 9.98716706,12.6213624 10.2547165,12.8232204 L10.2547165,12.8232204 L9.35077753,14.0202562 C9.05998151,13.8008442 8.77736701,13.5747915 8.503165,13.3421937 L8.503165,13.3421937 Z M8.03953309,10.8260839 C8.26495499,11.0701366 8.49872244,11.3076631 8.74050194,11.5386416 L8.74050194,11.5386416 L7.70428245,12.6231918 C7.43933196,12.370075 7.18367394,12.1102154 6.93753619,11.8437296 L6.93753619,11.8437296 Z M6.79225068,9.28707575 C6.98450118,9.55916796 7.18590199,9.82467762 7.39611186,10.0835823 L7.39611186,10.0835823 L6.23146438,11.0288845 C5.99946646,10.7431365 5.77776756,10.4507261 5.56658118,10.1517926 L5.56658118,10.1517926 Z M5.74394836,7.56151265 C5.89731195,7.85887237 6.06043611,8.14974636 6.23298363,8.43411247 L6.23298363,8.43411247 L4.95052711,9.21212615 C4.75957021,8.89741471 4.57962661,8.57638968 4.41087833,8.24920756 L4.41087833,8.24920756 Z M4.9441802,5.70138701 C5.05492693,6.01810968 5.17569457,6.32864623 5.30616573,6.63297577 L5.30616573,6.63297577 L3.92727423,7.22344896 C3.78278118,6.88637631 3.64957632,6.54357736 3.52779742,6.19521034 L3.52779742,6.19521034 Z M4.40556232,3.74206267 C4.47305761,4.0724375 4.55053859,4.39705144 4.63771716,4.71588555 L4.63771716,4.71588555 L3.19048172,5.11023461 C3.09450939,4.75912957 3.00960835,4.40302922 2.93587097,4.042075 L2.93587097,4.042075 Z" id="形状结合" fill="#999999" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -3,9 +3,8 @@
|
|||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zhanwei {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border: 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bh-dz {
|
||||
padding-right: 30px;
|
||||
text-align: right;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.h-l1r1 .h-l1r2 {
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.h-l1r3 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.h-l1r3 p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.h-l2r1 {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-dz {
|
||||
font-family: "黑体";
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
height: 22px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ename-dz {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.t-zx {
|
||||
border-collapse: collapse;
|
||||
border: #000000 solid 1px;
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
.t-zx td {
|
||||
border: #000000 solid 1px;
|
||||
padding: 0px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.t-zx .td-ar {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#t-main2 {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#t-main2 p {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
#t-main2 .td1 {
|
||||
width: 200px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.td2 {
|
||||
text-align: center;
|
||||
border-bottom: #000000 solid 1px;
|
||||
}
|
||||
|
||||
#t-main2 .tr0 {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#HT-logo {
|
||||
width: 300px;
|
||||
height: 55px;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
## 1.0.0（2022-11-21）
|
||||
```text
|
||||
<template>
|
||||
<view style="padding: 20px 10%;">
|
||||
|
||||
|
||||
<!-- 多选下拉菜单 - 使用默认的显示方式 -->
|
||||
<view style="border: 1px solid gray;">
|
||||
<rudon-multiSelector welcome="请选择" :is_using_slot="false" :is_using_icon="true" :localdata="options" @change="whenChanged"></rudon-multiSelector>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 多选下拉菜单 - 使用自定义的显示方式 -->
|
||||
<view style="border: 1px solid gray;margin-top: 200px;">
|
||||
<rudon-multiSelector :is_using_slot="true" :localdata="options" @change="whenChanged">
|
||||
<view>
|
||||
{{JSON.stringify(options)}}
|
||||
</view>
|
||||
</rudon-multiSelector>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 初始选项
|
||||
options: [{
|
||||
value: 0,
|
||||
text: "数学",
|
||||
is_selected: false,
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "美术",
|
||||
is_selected: false,
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "体育",
|
||||
is_selected: true
|
||||
}
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
whenChanged(e) {
|
||||
console.log(JSON.stringify(e))
|
||||
this.options = e
|
||||
}
|
||||
|
||||
// METHODS结束
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
|
@ -0,0 +1,537 @@
|
|||
<template>
|
||||
<view class="rudon-component__select componentW100">
|
||||
|
||||
<!-- 组件介绍 -->
|
||||
<!-- 名称：rudon-multiSelector 多选下拉菜单 -->
|
||||
<!-- 作者：Rudon <https://rudon.blog.csdn.net> -->
|
||||
<!-- 用途：多选下拉菜单 -->
|
||||
<!-- 用法：
|
||||
0）参考https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html
|
||||
1）项目安装本组件，
|
||||
2）vue中直接引用即可，例如下面的例子
|
||||
-->
|
||||
<!-- 例如:
|
||||
<rudon-multiSelector :clear="false" :localdata="菜单对象" @change="mss($event, item)"></rudon-multiSelector>
|
||||
-->
|
||||
|
||||
|
||||
<span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
|
||||
<view class="rudon-select componentW100">
|
||||
<view class="rudon-select__input-box componentW100" @click="toggleSelector">
|
||||
|
||||
<!-- 显示插槽内容 -->
|
||||
<view class="" v-show="is_using_slot">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- 不显示插槽内容 -->
|
||||
<view class="componentW100" v-show="!is_using_slot" style="display: flex; justify-content: space-between; align-items: center; flex-direction: row;">
|
||||
<!-- 欢迎语句 -->
|
||||
<view v-show="!onShowNames.length">
|
||||
{{welcome}}
|
||||
</view>
|
||||
<!-- 已选内容 -->
|
||||
<view v-show="onShowNames.length">
|
||||
{{onShowNames.join(', ')}}
|
||||
</view>
|
||||
<!-- 下拉图标 -->
|
||||
<view v-show="is_using_icon">
|
||||
<uni-icons type="bottom" color="#c0c4cc" size="16" v-show="!showSelector"></uni-icons>
|
||||
<uni-icons type="top" color="#c0c4cc" size="16" v-show="showSelector"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 遍历 -->
|
||||
<!-- <text v-for="(item, index) in onShowNames" :key="'selected_items_'+index">
|
||||
{{item}}
|
||||
</text> -->
|
||||
|
||||
|
||||
</view>
|
||||
<view class="rudon-select--mask" v-if="showSelector" @click="toggleSelector" />
|
||||
<view class="rudon-select__selector componentW100" v-if="showSelector">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<scroll-view scroll-y="true" class="rudon-select__selector-scroll">
|
||||
<view class="rudon-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="rudon-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index" @click="selectOneItem(item)" style="padding: 10px 0 10px 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;">
|
||||
<view class="" style="padding: 0 8px 0 4px;">
|
||||
|
||||
<!-- 未选中 -->
|
||||
<uni-icons type="checkbox-filled" size="25" color="#ebebeb" v-show="!item.is_selected"></uni-icons>
|
||||
|
||||
<!-- 已选中 -->
|
||||
<uni-icons type="checkbox-filled" size="25" color="#f08418" v-show="item.is_selected"></uni-icons>
|
||||
|
||||
</view>
|
||||
<view>
|
||||
<text :class="{'rudon-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* DataChecklist 数据选择器
|
||||
* @description 通过数据渲染的下拉框组件
|
||||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
||||
* @property {String} value 默认值
|
||||
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||
* @property {Boolean} clear 是否可以清空已选项
|
||||
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||
* @property {String} label 左侧标题
|
||||
* @property {String} placeholder 输入框的提示文字
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "rudon-multiSelector",
|
||||
mixins: [uniCloud.mixinDatacom || {}],
|
||||
data() {
|
||||
return {
|
||||
showSelector: false,
|
||||
current: '',
|
||||
mixinDatacomResData: [],
|
||||
apps: [],
|
||||
channels: [],
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
// 初始化显示提示语 - 当没有选项选中时
|
||||
welcome: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
// 是否使用slot
|
||||
is_using_slot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 是否使用非slot模式下的右边的向下箭头图标
|
||||
is_using_icon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 本地数据， 格式：
|
||||
* [
|
||||
{
|
||||
// 值
|
||||
value: 0,
|
||||
// 显示文字
|
||||
text: "服装业",
|
||||
// 是否已选中
|
||||
is_selected: false,
|
||||
},
|
||||
{
|
||||
// 值
|
||||
value: 1,
|
||||
// 显示文字
|
||||
text: "矿业",
|
||||
// 是否已选中
|
||||
is_selected: false,
|
||||
}
|
||||
]
|
||||
*/
|
||||
localdata: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '...'
|
||||
},
|
||||
emptyTips: {
|
||||
type: String,
|
||||
default: '无选项'
|
||||
},
|
||||
clear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
defItem: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.last = `${this.collection}_last_selected_option_value`
|
||||
if (this.collection && !this.localdata.length) {
|
||||
this.mixinDatacomEasyGet()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 已选中的标题
|
||||
onShowNames () {
|
||||
let res = []
|
||||
for (let i in this.localdata) {
|
||||
let cur = this.localdata[i]
|
||||
if (cur.hasOwnProperty('is_selected') && cur.is_selected) {
|
||||
// 已选中
|
||||
if (cur.hasOwnProperty('text')) {
|
||||
res.push(cur.text)
|
||||
} else if (cur.hasOwnProperty('title')) {
|
||||
res.push(cur.title)
|
||||
} else {
|
||||
res.push('标题缺失')
|
||||
}
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localdata: {
|
||||
immediate: true,
|
||||
handler(val, old) {
|
||||
if (Array.isArray(val)) {
|
||||
this.mixinDatacomResData = val
|
||||
}
|
||||
}
|
||||
},
|
||||
// #ifndef VUE3
|
||||
value() {
|
||||
this.initDefVal()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue() {
|
||||
this.initDefVal()
|
||||
},
|
||||
// #endif
|
||||
mixinDatacomResData: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val.length) {
|
||||
this.initDefVal()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDefVal() {
|
||||
let defValue = ''
|
||||
if ((this.value || this.value === 0) && !this.isDisabled(this.value)) {
|
||||
defValue = this.value
|
||||
} else if ((this.modelValue || this.modelValue === 0) && !this.isDisabled(this.modelValue)) {
|
||||
defValue = this.modelValue
|
||||
} else {
|
||||
let strogeValue
|
||||
if (this.collection) {
|
||||
strogeValue = uni.getStorageSync(this.last)
|
||||
}
|
||||
if (strogeValue || strogeValue === 0) {
|
||||
defValue = strogeValue
|
||||
} else {
|
||||
let defItem = ''
|
||||
if (this.defItem > 0 && this.defItem < this.mixinDatacomResData.length) {
|
||||
defItem = this.mixinDatacomResData[this.defItem - 1].value
|
||||
}
|
||||
defValue = defItem
|
||||
}
|
||||
this.emit(defValue)
|
||||
}
|
||||
const def = this.mixinDatacomResData.find(item => item.value === defValue)
|
||||
this.current = def ? this.formatItemName(def) : ''
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {[String, Number]} value
|
||||
* 判断用户给的 value 是否同时为禁用状态
|
||||
*/
|
||||
isDisabled(value) {
|
||||
let isDisabled = false;
|
||||
|
||||
this.mixinDatacomResData.forEach(item => {
|
||||
if (item.value === value) {
|
||||
isDisabled = item.disable
|
||||
}
|
||||
})
|
||||
|
||||
return isDisabled;
|
||||
},
|
||||
|
||||
clearVal() {
|
||||
this.emit('')
|
||||
if (this.collection) {
|
||||
uni.removeStorageSync(this.last)
|
||||
}
|
||||
},
|
||||
change(item) {
|
||||
if (!item.disable) {
|
||||
this.showSelector = false
|
||||
this.current = this.formatItemName(item)
|
||||
this.emit(item.value)
|
||||
}
|
||||
},
|
||||
emit(val) {
|
||||
|
||||
if (val != '' && val != null) {
|
||||
this.$emit('change', val)
|
||||
}
|
||||
|
||||
this.$emit('input', val)
|
||||
this.$emit('update:modelValue', val)
|
||||
if (this.collection) {
|
||||
uni.setStorageSync(this.last, val)
|
||||
}
|
||||
},
|
||||
|
||||
toggleSelector() {
|
||||
this.showSelector = !this.showSelector
|
||||
},
|
||||
formatItemName(item) {
|
||||
let {
|
||||
text,
|
||||
value,
|
||||
channel_code
|
||||
} = item
|
||||
channel_code = channel_code ? `(${channel_code})` : ''
|
||||
return this.collection.indexOf('app-list') > 0 ?
|
||||
`${text}(${value})` :
|
||||
(
|
||||
text ?
|
||||
text :
|
||||
`未命名${channel_code}`
|
||||
)
|
||||
},
|
||||
|
||||
// 点击某一个成员，选中或者反选
|
||||
selectOneItem (item) {
|
||||
// console.log(JSON.stringify(item))
|
||||
|
||||
|
||||
// 允许选择
|
||||
let tobe = (item.is_selected)? false: true
|
||||
|
||||
for (let i in this.localdata) {
|
||||
if (this.localdata[i].value == item.value) {
|
||||
this.localdata[i].is_selected = tobe
|
||||
}
|
||||
}
|
||||
|
||||
this.emit(this.localdata)
|
||||
}
|
||||
|
||||
|
||||
// Methods结束
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-base-color: #6a6a6a !default;
|
||||
$uni-main-color: #3a3a3a !default;
|
||||
$uni-secondary-color: #909399 !default;
|
||||
$uni-border-3: #DCDCDC;
|
||||
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
@media screen and (max-width: 100%) {
|
||||
.hide-on-phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.rudon-component__select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uni-label-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: $uni-base-color;
|
||||
margin: auto 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.rudon-select {
|
||||
font-size: 14px;
|
||||
// border: 1px solid $uni-border-3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 1px;
|
||||
padding: 0 5px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
user-select: none;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
// border-bottom: solid 1px $uni-border-3;
|
||||
}
|
||||
|
||||
.rudon-select__label {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding-right: 10px;
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.rudon-select__input-box {
|
||||
min-height: 20px;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rudon-select__input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.rudon-select__input-plac {
|
||||
font-size: 14px;
|
||||
color: $uni-secondary-color;
|
||||
}
|
||||
|
||||
.rudon-select__selector {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: 0;
|
||||
width: auto;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #EBEEF5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 2;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.rudon-select__selector-scroll {
|
||||
padding: 5px;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.rudon-select__selector-empty,
|
||||
.rudon-select__selector-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
/* border-bottom: solid 1px $uni-border-3; */
|
||||
padding: 10px 20px;
|
||||
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.rudon-select__selector-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.rudon-select__selector-empty:last-child,
|
||||
.rudon-select__selector-item:last-child {
|
||||
/* #ifndef APP-NVUE */
|
||||
border-bottom: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.rudon-select__selector__disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* picker 弹出层通用的指示小三角 */
|
||||
.uni-popper__arrow,
|
||||
.uni-popper__arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.uni-popper__arrow {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
top: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.uni-popper__arrow::after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.rudon-select__input-text {
|
||||
color: $uni-main-color;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.rudon-select__input-placeholder {
|
||||
color: $uni-base-color;
|
||||
}
|
||||
|
||||
.rudon-select--mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// 全宽
|
||||
.componentW100 {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
{
|
||||
"id": "rudon-multiSelector",
|
||||
"displayName": "Rudon多选下拉菜单",
|
||||
"version": "1.0.0",
|
||||
"description": "rudon-multiSelector 多选下拉菜单",
|
||||
"keywords": [
|
||||
"multiSelector",
|
||||
"多选",
|
||||
"下拉",
|
||||
"picker"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
# rudon-multiSelector
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
<<<<<<< HEAD
|
||||
<template>
|
||||
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
||||
<template v-if="!isLocal">
|
||||
|
|
@ -200,215 +199,11 @@
|
|||
|
||||
// if (this.formItem) {
|
||||
// this.isTop = 6
|
||||
=======
|
||||
<template>
|
||||
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
||||
<template v-if="!isLocal">
|
||||
<view class="uni-data-loading">
|
||||
<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
|
||||
<text v-else>{{mixinDatacomErrorMessage}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
|
||||
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon">
|
||||
<view class="checkbox__inner-icon"></view>
|
||||
</view>
|
||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
|
||||
</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
|
||||
<!-- -->
|
||||
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
||||
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
|
||||
:style="item.styleBackgroud">
|
||||
<view class="radio__inner-icon" :style="item.styleIcon"></view>
|
||||
</view>
|
||||
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||
<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* DataChecklist 数据选择器
|
||||
* @description 通过数据渲染 checkbox 和 radio
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||
* @property {String} mode = [default| list | button | tag] 显示模式
|
||||
* @value default 默认横排模式
|
||||
* @value list 列表模式
|
||||
* @value button 按钮模式
|
||||
* @value tag 标签模式
|
||||
* @property {Boolean} multiple = [true|false] 是否多选
|
||||
* @property {Array|String|Number} value 默认值
|
||||
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||
* @property {Number|String} min 最小选择个数 ，multiple为true时生效
|
||||
* @property {Number|String} max 最大选择个数 ，multiple为true时生效
|
||||
* @property {Boolean} wrap 是否换行显示
|
||||
* @property {String} icon = [left|right] list 列表模式下icon显示位置
|
||||
* @property {Boolean} selectedColor 选中颜色
|
||||
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||
* @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
|
||||
* @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
|
||||
* @value left 左侧显示
|
||||
* @value right 右侧显示
|
||||
* @event {Function} change 选中发生变化触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniDataChecklist',
|
||||
mixins: [uniCloud.mixinDatacom || {}],
|
||||
emits:['input','update:modelValue','change'],
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [Array, String, Number],
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// TODO vue3
|
||||
modelValue: {
|
||||
type: [Array, String, Number],
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
localdata: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
min: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
wrap: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
selectedTextColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
emptyText:{
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
disabled:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
map:{
|
||||
type: Object,
|
||||
default(){
|
||||
return {
|
||||
text:'text',
|
||||
value:'value'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localdata: {
|
||||
handler(newVal) {
|
||||
this.range = newVal
|
||||
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
mixinDatacomResData(newVal) {
|
||||
this.range = newVal
|
||||
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||
},
|
||||
value(newVal) {
|
||||
this.dataList = this.getDataList(newVal)
|
||||
// fix by mehaotian is_reset 在 uni-forms 中定义
|
||||
// if(!this.is_reset){
|
||||
// this.is_reset = false
|
||||
// this.formItem && this.formItem.setValue(newVal)
|
||||
// }
|
||||
},
|
||||
modelValue(newVal) {
|
||||
this.dataList = this.getDataList(newVal);
|
||||
// if(!this.is_reset){
|
||||
// this.is_reset = false
|
||||
// this.formItem && this.formItem.setValue(newVal)
|
||||
// }
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
range: [],
|
||||
contentText: {
|
||||
contentdown: '查看更多',
|
||||
contentrefresh: '加载中',
|
||||
contentnomore: '没有更多'
|
||||
},
|
||||
isLocal:true,
|
||||
styles: {
|
||||
selectedColor: '#2979ff',
|
||||
selectedTextColor: '#666',
|
||||
},
|
||||
isTop:0
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
dataValue(){
|
||||
if(this.value === '')return this.modelValue
|
||||
if(this.modelValue === '') return this.value
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.form = this.getForm('uniForms')
|
||||
// this.formItem = this.getForm('uniFormsItem')
|
||||
// this.formItem && this.formItem.setValue(this.value)
|
||||
|
||||
// if (this.formItem) {
|
||||
// this.isTop = 6
|
||||
>>>>>>> cf4cde6399c3c847ec80ef42bece70d7d39de0b1
|
||||
// if (this.formItem.name) {
|
||||
// // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
|
||||
// if(!this.is_reset){
|
||||
// this.is_reset = false
|
||||
// this.formItem.setValue(this.dataValue)
|
||||
<<<<<<< HEAD
|
||||
// }
|
||||
// this.rename = this.formItem.name
|
||||
// this.form.inputChildrens.push(this)
|
||||
|
|
@ -588,187 +383,6 @@
|
|||
*/
|
||||
setStyleBackgroud(item) {
|
||||
let styles = {}
|
||||
=======
|
||||
// }
|
||||
// this.rename = this.formItem.name
|
||||
// this.form.inputChildrens.push(this)
|
||||
// }
|
||||
// }
|
||||
|
||||
if (this.localdata && this.localdata.length !== 0) {
|
||||
this.isLocal = true
|
||||
this.range = this.localdata
|
||||
this.dataList = this.getDataList(this.getSelectedValue(this.range))
|
||||
} else {
|
||||
if (this.collection) {
|
||||
this.isLocal = false
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
this.mixinDatacomGet().then(res=>{
|
||||
this.mixinDatacomResData = res.result.data
|
||||
if(this.mixinDatacomResData.length === 0){
|
||||
this.isLocal = false
|
||||
this.mixinDatacomErrorMessage = this.emptyText
|
||||
}else{
|
||||
this.isLocal = true
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.mixinDatacomErrorMessage = err.message
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getForm(name = 'uniForms') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
chagne(e) {
|
||||
const values = e.detail.value
|
||||
|
||||
let detail = {
|
||||
value: [],
|
||||
data: []
|
||||
}
|
||||
|
||||
if (this.multiple) {
|
||||
this.range.forEach(item => {
|
||||
|
||||
if (values.includes(item[this.map.value] + '')) {
|
||||
detail.value.push(item[this.map.value])
|
||||
detail.data.push(item)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const range = this.range.find(item => (item[this.map.value] + '') === values)
|
||||
if (range) {
|
||||
detail = {
|
||||
value: range[this.map.value],
|
||||
data: range
|
||||
}
|
||||
}
|
||||
}
|
||||
// this.formItem && this.formItem.setValue(detail.value)
|
||||
// TODO 兼容 vue2
|
||||
this.$emit('input', detail.value);
|
||||
// // TOTO 兼容 vue3
|
||||
this.$emit('update:modelValue', detail.value);
|
||||
this.$emit('change', {
|
||||
detail
|
||||
})
|
||||
if (this.multiple) {
|
||||
// 如果 v-model 没有绑定 ，则走内部逻辑
|
||||
// if (this.value.length === 0) {
|
||||
this.dataList = this.getDataList(detail.value, true)
|
||||
// }
|
||||
} else {
|
||||
this.dataList = this.getDataList(detail.value)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取渲染的新数组
|
||||
* @param {Object} value 选中内容
|
||||
*/
|
||||
getDataList(value) {
|
||||
// 解除引用关系，破坏原引用关系，避免污染源数据
|
||||
let dataList = JSON.parse(JSON.stringify(this.range))
|
||||
let list = []
|
||||
if (this.multiple) {
|
||||
if (!Array.isArray(value)) {
|
||||
value = []
|
||||
}
|
||||
}
|
||||
dataList.forEach((item, index) => {
|
||||
item.disabled = item.disable || item.disabled || false
|
||||
if (this.multiple) {
|
||||
if (value.length > 0) {
|
||||
let have = value.find(val => val === item[this.map.value])
|
||||
item.selected = have !== undefined
|
||||
} else {
|
||||
item.selected = false
|
||||
}
|
||||
} else {
|
||||
item.selected = value === item[this.map.value]
|
||||
}
|
||||
|
||||
list.push(item)
|
||||
})
|
||||
return this.setRange(list)
|
||||
},
|
||||
/**
|
||||
* 处理最大最小值
|
||||
* @param {Object} list
|
||||
*/
|
||||
setRange(list) {
|
||||
let selectList = list.filter(item => item.selected)
|
||||
let min = Number(this.min) || 0
|
||||
let max = Number(this.max) || ''
|
||||
list.forEach((item, index) => {
|
||||
if (this.multiple) {
|
||||
if (selectList.length <= min) {
|
||||
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
|
||||
if (have !== undefined) {
|
||||
item.disabled = true
|
||||
}
|
||||
}
|
||||
|
||||
if (selectList.length >= max && max !== '') {
|
||||
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
|
||||
if (have === undefined) {
|
||||
item.disabled = true
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setStyles(item, index)
|
||||
list[index] = item
|
||||
})
|
||||
return list
|
||||
},
|
||||
/**
|
||||
* 设置 class
|
||||
* @param {Object} item
|
||||
* @param {Object} index
|
||||
*/
|
||||
setStyles(item, index) {
|
||||
// 设置自定义样式
|
||||
item.styleBackgroud = this.setStyleBackgroud(item)
|
||||
item.styleIcon = this.setStyleIcon(item)
|
||||
item.styleIconText = this.setStyleIconText(item)
|
||||
item.styleRightIcon = this.setStyleRightIcon(item)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取选中值
|
||||
* @param {Object} range
|
||||
*/
|
||||
getSelectedValue(range) {
|
||||
if (!this.multiple) return this.dataValue
|
||||
let selectedArr = []
|
||||
range.forEach((item) => {
|
||||
if (item.selected) {
|
||||
selectedArr.push(item[this.map.value])
|
||||
}
|
||||
})
|
||||
return this.dataValue.length > 0 ? this.dataValue : selectedArr
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置背景样式
|
||||
*/
|
||||
setStyleBackgroud(item) {
|
||||
let styles = {}
|
||||
>>>>>>> cf4cde6399c3c847ec80ef42bece70d7d39de0b1
|
||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||
if (this.selectedColor) {
|
||||
if (this.mode !== 'list') {
|
||||
|
|
@ -777,7 +391,6 @@
|
|||
if (this.mode === 'tag') {
|
||||
styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
}
|
||||
let classles = ''
|
||||
for (let i in styles) {
|
||||
|
|
@ -787,17 +400,6 @@
|
|||
},
|
||||
setStyleIcon(item) {
|
||||
let styles = {}
|
||||
=======
|
||||
}
|
||||
let classles = ''
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
setStyleIcon(item) {
|
||||
let styles = {}
|
||||
>>>>>>> cf4cde6399c3c847ec80ef42bece70d7d39de0b1
|
||||
let classles = ''
|
||||
if (this.selectedColor) {
|
||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||
|
|
@ -808,7 +410,6 @@
|
|||
styles['background-color'] = '#F2F6FC'
|
||||
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
}
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
|
|
@ -1218,414 +819,3 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
=======
|
||||
}
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
setStyleIconText(item) {
|
||||
let styles = {}
|
||||
let classles = ''
|
||||
if (this.selectedColor) {
|
||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||
if (this.mode === 'tag') {
|
||||
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
|
||||
} else {
|
||||
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
|
||||
}
|
||||
if(!item.selected && item.disabled){
|
||||
styles.color = '#999'
|
||||
}
|
||||
}
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
setStyleRightIcon(item) {
|
||||
let styles = {}
|
||||
let classles = ''
|
||||
if (this.mode === 'list') {
|
||||
styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
|
||||
}
|
||||
for (let i in styles) {
|
||||
classles += `${i}:${styles[i]};`
|
||||
}
|
||||
|
||||
return classles
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #2979ff !default;
|
||||
$border-color: #DCDFE6;
|
||||
$disable:0.4;
|
||||
|
||||
@mixin flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-data-loading {
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
padding-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.uni-data-checklist {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
flex: 1;
|
||||
// 多选样式
|
||||
.checklist-group {
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.is-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.checklist-box {
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
margin-right: 25px;
|
||||
|
||||
.hidden {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 文字样式
|
||||
.checklist-content {
|
||||
@include flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.checklist-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.checkobx__list {
|
||||
border-right-width: 1px;
|
||||
border-right-color: #007aff;
|
||||
border-right-style: solid;
|
||||
border-bottom-width:1px;
|
||||
border-bottom-color: #007aff;
|
||||
border-bottom-style: solid;
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
left: -5px;
|
||||
transform-origin: center;
|
||||
transform: rotate(45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 多选样式
|
||||
.checkbox__inner {
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
.checkbox__inner-icon {
|
||||
position: absolute;
|
||||
/* #ifdef APP-NVUE */
|
||||
top: 2px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
top: 1px;
|
||||
/* #endif */
|
||||
left: 5px;
|
||||
height: 8px;
|
||||
width: 4px;
|
||||
border-right-width: 1px;
|
||||
border-right-color: #fff;
|
||||
border-right-style: solid;
|
||||
border-bottom-width:1px ;
|
||||
border-bottom-color: #fff;
|
||||
border-bottom-style: solid;
|
||||
opacity: 0;
|
||||
transform-origin: center;
|
||||
transform: rotate(40deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 单选样式
|
||||
.radio__inner {
|
||||
@include flex;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 16px;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
|
||||
.radio__inner-icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认样式
|
||||
&.is--default {
|
||||
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
}
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中
|
||||
&.is-checked {
|
||||
.checkbox__inner {
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
.radio__inner {
|
||||
border-color: $uni-primary;
|
||||
.radio__inner-icon {
|
||||
opacity: 1;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
.checklist-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
// 选中禁用
|
||||
&.is-disable {
|
||||
.checkbox__inner {
|
||||
opacity: $disable;
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
opacity: $disable;
|
||||
}
|
||||
.radio__inner {
|
||||
opacity: $disable;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式
|
||||
&.is--button {
|
||||
margin-right: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px $border-color solid;
|
||||
border-radius: 3px;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
border: 1px #eee solid;
|
||||
opacity: $disable;
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
.radio__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
border-color: $uni-primary;
|
||||
.checkbox__inner {
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.radio__inner {
|
||||
border-color: $uni-primary;
|
||||
|
||||
.radio__inner-icon {
|
||||
opacity: 1;
|
||||
background-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
// 选中禁用
|
||||
&.is-disable {
|
||||
opacity: $disable;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标签样式
|
||||
&.is--tag {
|
||||
margin-right: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px $border-color solid;
|
||||
border-radius: 3px;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.checklist-text {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
opacity: $disable;
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
background-color: $uni-primary;
|
||||
border-color: $uni-primary;
|
||||
|
||||
.checklist-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 列表样式
|
||||
&.is--list {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: 10px 15px;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
&.is-list-border {
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
// 禁用
|
||||
&.is-disable {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
.checkbox__inner {
|
||||
background-color: #F2F6FC;
|
||||
border-color: $border-color;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
.checklist-text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-checked {
|
||||
.checkbox__inner {
|
||||
border-color: $uni-primary;
|
||||
background-color: $uni-primary;
|
||||
|
||||
.checkbox__inner-icon {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
.radio__inner {
|
||||
.radio__inner-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.checklist-text {
|
||||
color: $uni-primary;
|
||||
}
|
||||
|
||||
.checklist-content {
|
||||
.checkobx__list {
|
||||
opacity: 1;
|
||||
border-color: $uni-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中禁用
|
||||
&.is-disable {
|
||||
.checkbox__inner {
|
||||
opacity: $disable;
|
||||
}
|
||||
|
||||
.checklist-text {
|
||||
opacity: $disable;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
>>>>>>> cf4cde6399c3c847ec80ef42bece70d7d39de0b1
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
## 0.2.5（2023-01-09）
|
||||
修复可能出现的可能出现的与swiper联动时报错node不存在的bug
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
// z-tabs全局配置文件，注意避免更新时此文件被覆盖，若被覆盖，可在此文件中右键->点击本地历史记录，找回覆盖前的配置
|
||||
export default {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,736 @@
|
|||
<!-- z-tabs v0.2.5 by-ZXLee -->
|
||||
<!-- github地址:https://github.com/SmileZXLee/uni-z-tabs -->
|
||||
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?name=z-tabs -->
|
||||
<!-- 反馈QQ群：790460711 -->
|
||||
|
||||
<template name="z-tabs">
|
||||
<view class="z-tabs-conatiner" :style="[{background:bgColor}, tabsStyle]">
|
||||
<view class="z-tabs-left">
|
||||
<slot name="left" />
|
||||
</view>
|
||||
<view ref="z-tabs-scroll-view-conatiner" class="z-tabs-scroll-view-conatiner">
|
||||
<scroll-view ref="z-tabs-scroll-view" class="z-tabs-scroll-view" :scroll-x="true" :scroll-left="scrollLeft" :show-scrollbar="false" :scroll-with-animation="isFirstLoaded" @scroll="scroll">
|
||||
<view class="z-tabs-list-container" :style="[tabsListStyle]">
|
||||
<view class="z-tabs-list" :style="[tabsListStyle, {marginTop: -finalBottomSpace+'px'}]">
|
||||
<view :ref="`z-tabs-item-${index}`" :id="`z-tabs-item-${index}`" class="z-tabs-item" :style="[tabStyle]" v-for="(item,index) in list" :key="index" @click="tabsClick(index,item)">
|
||||
<view class="z-tabs-item-title-container">
|
||||
<text :class="{'z-tabs-item-title':true,'z-tabs-item-title-disabled':item.disabled}"
|
||||
:style="[{color:item.disabled?disabledColor:(currentIndex===index?activeColor:inactiveColor)},item.disabled?disabledStyle:(currentIndex===index?activeStyle:inactiveStyle)]">
|
||||
{{item[nameKey]||item}}
|
||||
</text>
|
||||
<text v-if="item.badge&&_formatCount(item.badge.count).length" class="z-tabs-item-badge" :style="[badgeStyle]">{{_formatCount(item.badge.count)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="z-tabs-bottom" :style="[{width: tabsContainerWidth+'px', bottom: finalBottomSpace+'px'}]">
|
||||
<view ref="z-tabs-bottom-dot" class="z-tabs-bottom-dot"
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
:style="[{transform:`translateX(${bottomDotX}px)`,transition:dotTransition,background:activeColor},finalDotStyle]"
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
:style="[{background:activeColor},finalDotStyle]"
|
||||
<!-- #endif -->
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="z-tabs-right">
|
||||
<slot name="right" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const weexDom = weex.requireModule('dom');
|
||||
const weexAnimation = weex.requireModule('animation');
|
||||
// #endif
|
||||
import zTabsConfig from './config/index'
|
||||
|
||||
//获取默认配置信息
|
||||
function _gc(key, defaultValue) {
|
||||
let config = null;
|
||||
if (zTabsConfig && Object.keys(zTabsConfig).length) {
|
||||
config = zTabsConfig;
|
||||
} else {
|
||||
return defaultValue;
|
||||
}
|
||||
const value = config[_toKebab(key)];
|
||||
return value === undefined ? defaultValue : value;
|
||||
}
|
||||
//驼峰转短横线
|
||||
function _toKebab(value) {
|
||||
return value.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* z-tabs 标签
|
||||
* @description 一个简单轻量的tabs标签，全平台兼容，支持nvue、vue3
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=z-tabs
|
||||
* @property {Array} list 数据源数组，支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
|
||||
* @property {Number|String} current 当前选中的index，默认为0
|
||||
* @property {Number|String} scroll-count list数组长度超过scrollCount时滚动显示(不自动铺满全屏)，默认为5
|
||||
* @property {Number|String} tab-width 自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx"
|
||||
* @property {Number|String} bar-width 滑块宽度，单位rpx，支持传100、"100px"或"100rpx"
|
||||
* @property {Number|String} bar-height 滑块高度，单位rpx，支持传100、"100px"或"100rpx"
|
||||
* @property {Object} bar-style 滑块样式，其中的width和height将被bar-width和bar-height覆盖
|
||||
* @property {Number|String} bottom-space tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx"
|
||||
* @property {String} bar-animate-mode 切换tab时滑块动画模式，与swiper联动时有效，点击切换tab时无效，必须调用setDx。默认为line，即切换tab时滑块宽度保持不变，线性运动。可选值为worm，即为类似毛毛虫蠕动效果
|
||||
* @property {String} name-key list中item的name(标题)的key，默认为name
|
||||
* @property {String} value-key list中item的value的key，默认为value
|
||||
* @property {String} active-color 激活状态tab的颜色
|
||||
* @property {String} inactive-color 未激活状态tab的颜色
|
||||
* @property {String} disabled-color 禁用状态tab的颜色
|
||||
* @property {Object} active-style 激活状态tab的样式
|
||||
* @property {Object} inactive-style 未激活状态tab的样式
|
||||
* @property {Object} disabled-style 禁用状态tab的样式
|
||||
* @property {Number|String} badge-max-count 徽标数最大数字限制，超过这个数字将变成badge-max-count+，默认为99
|
||||
* @property {Object} badge-style 徽标样式，例如可自定义背景色，字体等等
|
||||
* @property {String} bg-color z-tabs背景色
|
||||
* @property {Object} tabs-style z-tabs样式
|
||||
* @property {Boolean} init-trigger-change 初始化时是否自动触发change事件
|
||||
* @event {Function(index,value)} change tabs改变时触发，index:当前切换到的index；value:当前切换到的value
|
||||
* @example <z-tabs :list="list"></z-tabs>
|
||||
*/
|
||||
export default {
|
||||
name: 'z-tabs',
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
currentSwiperIndex: 0,
|
||||
bottomDotX: -1,
|
||||
bottomDotXForIndex: 0,
|
||||
showBottomDot: false,
|
||||
shouldSetDx: true,
|
||||
|
||||
barCalcedWidth: 0,
|
||||
pxBarWidth: 0,
|
||||
scrollLeft: 0,
|
||||
tabsSuperWidth: uni.upx2px(750),
|
||||
tabsWidth: uni.upx2px(750),
|
||||
tabsHeight: uni.upx2px(80),
|
||||
tabsLeft: 0,
|
||||
tabsContainerWidth: 0,
|
||||
itemNodeInfos: [],
|
||||
isFirstLoaded: false,
|
||||
currentScrollLeft: 0,
|
||||
changeTriggerFailed: false,
|
||||
currentChanged: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
//数据源数组，支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
|
||||
list: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
//当前选中的index
|
||||
current: {
|
||||
type: [Number, String],
|
||||
default: _gc('current',0)
|
||||
},
|
||||
//list数组长度超过scrollCount时滚动显示(不自动铺满全屏)
|
||||
scrollCount: {
|
||||
type: [Number, String],
|
||||
default: _gc('scrollCount',5)
|
||||
},
|
||||
//z-tabs样式
|
||||
tabsStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc('tabsStyle',{})
|
||||
}
|
||||
},
|
||||
//自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx"
|
||||
tabWidth: {
|
||||
type: [Number, String],
|
||||
default: _gc('tabWidth',0)
|
||||
},
|
||||
//滑块宽度，单位rpx，支持传100、"100px"或"100rpx"
|
||||
barWidth: {
|
||||
type: [Number, String],
|
||||
default: _gc('barWidth',45)
|
||||
},
|
||||
//滑块高度，单位rpx，支持传100、"100px"或"100rpx"
|
||||
barHeight: {
|
||||
type: [Number, String],
|
||||
default: _gc('barHeight',8)
|
||||
},
|
||||
//滑块样式，其中的width和height将被barWidth和barHeight覆盖
|
||||
barStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc('barStyle',{});
|
||||
}
|
||||
},
|
||||
//tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx"
|
||||
bottomSpace: {
|
||||
type: [Number, String],
|
||||
default: _gc('bottomSpace',8)
|
||||
},
|
||||
//切换tab时滑块动画模式，与swiper联动时有效，点击切换tab时无效，必须调用setDx。默认为line，即切换tab时滑块宽度保持不变，线性运动。可选值为worm，即为类似毛毛虫蠕动效果
|
||||
barAnimateMode: {
|
||||
type: String,
|
||||
default: _gc('barAnimateMode','line')
|
||||
},
|
||||
//list中item的name(标题)的key
|
||||
nameKey: {
|
||||
type: String,
|
||||
default: _gc('nameKey','name')
|
||||
},
|
||||
//list中item的value的key
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: _gc('valueKey','value')
|
||||
},
|
||||
//激活状态tab的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: _gc('activeColor','#007AFF')
|
||||
},
|
||||
//未激活状态tab的颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: _gc('inactiveColor','#666666')
|
||||
},
|
||||
//禁用状态tab的颜色
|
||||
disabledColor: {
|
||||
type: String,
|
||||
default: _gc('disabledColor','#bbbbbb')
|
||||
},
|
||||
//激活状态tab的样式
|
||||
activeStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc('activeStyle',{});
|
||||
}
|
||||
},
|
||||
//未激活状态tab的样式
|
||||
inactiveStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc('inactiveStyle',{});
|
||||
}
|
||||
},
|
||||
//禁用状态tab的样式
|
||||
disabledStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc('disabledStyle',{});
|
||||
}
|
||||
},
|
||||
//z-tabs背景色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: _gc('bgColor','white')
|
||||
},
|
||||
//徽标数最大数字限制，超过这个数字将变成badgeMaxCount+
|
||||
badgeMaxCount: {
|
||||
type: [Number, String],
|
||||
default: _gc('badgeMaxCount',99)
|
||||
},
|
||||
//徽标样式，例如可自定义背景色，字体等等
|
||||
badgeStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return _gc('badgeStyle',{})
|
||||
}
|
||||
},
|
||||
//初始化时是否自动触发change事件
|
||||
initTriggerChange: {
|
||||
type: Boolean,
|
||||
default: _gc('initTriggerChange',false)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateSubviewLayout();
|
||||
},
|
||||
watch: {
|
||||
current: {
|
||||
handler(newVal) {
|
||||
this.currentChanged && this._lockDx();
|
||||
this.currentIndex = newVal;
|
||||
this._preUpdateDotPosition(this.currentIndex);
|
||||
if (this.initTriggerChange) {
|
||||
if (newVal < this.list.length) {
|
||||
this.$emit('change', newVal, this.list[newVal][this.valueKey]);
|
||||
}else {
|
||||
this.changeTriggerFailed = true;
|
||||
}
|
||||
}
|
||||
this.currentChanged = true;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
list: {
|
||||
handler(newVal) {
|
||||
this._handleListChange(newVal);
|
||||
},
|
||||
immediate: false
|
||||
},
|
||||
bottomDotX(newVal) {
|
||||
if(newVal >= 0){
|
||||
// #ifndef APP-NVUE
|
||||
this.showBottomDot = true;
|
||||
// #endif
|
||||
this.$nextTick(() => {
|
||||
// #ifdef APP-NVUE
|
||||
weexAnimation.transition(this.$refs['z-tabs-bottom-dot'], {
|
||||
styles: {
|
||||
transform: `translateX(${newVal}px)`
|
||||
},
|
||||
duration: this.showAnimate ? 200 : 0,
|
||||
delay: 0
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.showBottomDot = true;
|
||||
},10)
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
},
|
||||
finalBarWidth: {
|
||||
handler(newVal) {
|
||||
this.barCalcedWidth = newVal;
|
||||
this.pxBarWidth = this.barCalcedWidth;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
currentIndex: {
|
||||
handler(newVal) {
|
||||
this.currentSwiperIndex = newVal;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shouldScroll(){
|
||||
return this.list.length > this.scrollCount;
|
||||
},
|
||||
finalTabsHeight(){
|
||||
return this.tabsHeight;
|
||||
},
|
||||
tabStyle(){
|
||||
const stl = this.shouldScroll ? {'flex-shrink': 0} : {'flex': 1};
|
||||
if(this.finalTabWidth > 0){
|
||||
stl['width'] = this.finalTabWidth + 'px';
|
||||
}else{
|
||||
delete stl.width;
|
||||
}
|
||||
return stl;
|
||||
},
|
||||
tabsListStyle(){
|
||||
return this.shouldScroll ? {} : {'flex':1};
|
||||
},
|
||||
showAnimate(){
|
||||
return this.isFirstLoaded && !this.shouldSetDx;
|
||||
},
|
||||
dotTransition(){
|
||||
return this.showAnimate ? 'transform .2s linear':'none';
|
||||
},
|
||||
finalDotStyle(){
|
||||
return {...this.barStyle, width: this.barCalcedWidth + 'px', height: this.finalBarHeight + 'px', opacity: this.showBottomDot ? 1 : 0};
|
||||
},
|
||||
finalTabWidth(){
|
||||
return this._convertTextToPx(this.tabWidth);
|
||||
},
|
||||
finalBarWidth(){
|
||||
return this._convertTextToPx(this.barWidth);
|
||||
},
|
||||
finalBarHeight(){
|
||||
return this._convertTextToPx(this.barHeight);
|
||||
},
|
||||
finalBottomSpace(){
|
||||
return this._convertTextToPx(this.bottomSpace);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//根据swiper的@transition实时更新底部dot位置
|
||||
setDx(dx) {
|
||||
if (!this.shouldSetDx) return;
|
||||
const isLineMode = this.barAnimateMode === 'line';
|
||||
const isWormMode = this.barAnimateMode === 'worm';
|
||||
let dxRate = dx / this.tabsSuperWidth;
|
||||
this.currentSwiperIndex = this.currentIndex + parseInt(dxRate);
|
||||
const isRight = dxRate > 0;
|
||||
const barWidth = this.pxBarWidth;
|
||||
if(this.currentSwiperIndex !== this.currentIndex){
|
||||
dxRate = dxRate - (this.currentSwiperIndex - this.currentIndex);
|
||||
const currentNode = this.itemNodeInfos[this.currentSwiperIndex];
|
||||
if (!!currentNode){
|
||||
this.bottomDotXForIndex = this._getBottomDotX(currentNode, barWidth);
|
||||
}
|
||||
}
|
||||
const currentIndex = this.currentSwiperIndex;
|
||||
let nextIndex = currentIndex + (isRight ? 1 : -1);
|
||||
nextIndex = Math.max(0, nextIndex);
|
||||
nextIndex = Math.min(nextIndex, this.itemNodeInfos.length - 1);
|
||||
const currentNodeInfo = this.itemNodeInfos[currentIndex];
|
||||
const nextNodeInfo = this.itemNodeInfos[nextIndex];
|
||||
const nextBottomX = this._getBottomDotX(nextNodeInfo, barWidth);
|
||||
if (isLineMode){
|
||||
this.bottomDotX = this.bottomDotXForIndex + (nextBottomX - this.bottomDotXForIndex) * Math.abs(dxRate);
|
||||
} else if (isWormMode) {
|
||||
if ((isRight && currentIndex >= this.itemNodeInfos.length - 1) || (!isRight && currentIndex <= 0)) return;
|
||||
const spaceOffset = isRight ? nextNodeInfo.right - currentNodeInfo.left : currentNodeInfo.right - nextNodeInfo.left;
|
||||
let barCalcedWidth = barWidth + spaceOffset * Math.abs(dxRate);
|
||||
if (isRight) {
|
||||
if (barCalcedWidth > nextBottomX - this.bottomDotX + barWidth) {
|
||||
const barMinusWidth = barWidth + spaceOffset * (1 - dxRate);
|
||||
this.bottomDotX = this.bottomDotXForIndex + (barCalcedWidth - barMinusWidth) / 2;
|
||||
barCalcedWidth = barMinusWidth;
|
||||
}
|
||||
}else if (!isRight) {
|
||||
if (barCalcedWidth > this.bottomDotXForIndex + barWidth - nextBottomX){
|
||||
const barMinusWidth = barWidth + spaceOffset * (1 + dxRate);
|
||||
barCalcedWidth = barMinusWidth;
|
||||
this.bottomDotX = nextBottomX;
|
||||
} else{
|
||||
this.bottomDotX = this.bottomDotXForIndex - (barCalcedWidth - barWidth);
|
||||
}
|
||||
}
|
||||
barCalcedWidth = Math.max(barCalcedWidth, barWidth);
|
||||
this.barCalcedWidth = barCalcedWidth;
|
||||
}
|
||||
},
|
||||
//在swiper的@animationfinish中通知z-tabs结束多setDx的锁定，若在父组件中调用了setDx，则必须调用unlockDx
|
||||
unlockDx() {
|
||||
this.$nextTick(() => {
|
||||
this.shouldSetDx = true;
|
||||
})
|
||||
},
|
||||
//更新z-tabs内部布局
|
||||
updateSubviewLayout(tryCount = 0) {
|
||||
this.$nextTick(() => {
|
||||
let delayTime = 10;
|
||||
// #ifdef APP-NVUE || MP-BAIDU
|
||||
delayTime = 50;
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
this._getNodeClientRect('.z-tabs-scroll-view-conatiner').then(res=>{
|
||||
if (res){
|
||||
if (!res[0].width && tryCount < 10) {
|
||||
setTimeout(() => {
|
||||
tryCount ++;
|
||||
this.updateSubviewLayout(tryCount);
|
||||
}, 50);
|
||||
return;
|
||||
}
|
||||
this.tabsWidth = res[0].width;
|
||||
this.tabsHeight = res[0].height;
|
||||
this.tabsLeft = res[0].left;
|
||||
this._handleListChange(this.list);
|
||||
}
|
||||
})
|
||||
this._getNodeClientRect('.z-tabs-conatiner').then(res=>{
|
||||
if(res && res[0].width){
|
||||
this.tabsSuperWidth = res[0].width;
|
||||
}
|
||||
})
|
||||
},delayTime)
|
||||
})
|
||||
},
|
||||
//点击了tabs
|
||||
tabsClick(index,item) {
|
||||
if (item.disabled) return;
|
||||
if (this.currentIndex != index) {
|
||||
this.shouldSetDx = false;
|
||||
this.$emit('change', index, item[this.valueKey]);
|
||||
this.currentIndex = index;
|
||||
this._preUpdateDotPosition(index);
|
||||
} else {
|
||||
this.$emit('secondClick',index, item[this.valueKey]);
|
||||
}
|
||||
},
|
||||
//scroll-view滚动
|
||||
scroll(e){
|
||||
this.currentScrollLeft = e.detail.scrollLeft;
|
||||
},
|
||||
//锁定dx，用于避免在swiper被动触发滚动时候执行setDx中的代码
|
||||
_lockDx() {
|
||||
this.shouldSetDx = false;
|
||||
},
|
||||
//更新底部dot位置之前的预处理
|
||||
_preUpdateDotPosition(index) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery().in(this).select(".z-tabs-scroll-view").fields({
|
||||
scrollOffset: true
|
||||
}, data => {
|
||||
if (data) {
|
||||
this.currentScrollLeft = data.scrollLeft;
|
||||
this._updateDotPosition(index);
|
||||
} else {
|
||||
this._updateDotPosition(index);
|
||||
}
|
||||
}).exec();
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
this._updateDotPosition(index);
|
||||
// #endif
|
||||
},
|
||||
//更新底部dot位置
|
||||
_updateDotPosition(index){
|
||||
if(index >= this.itemNodeInfos.length) return;
|
||||
this.$nextTick(async ()=>{
|
||||
let node = this.itemNodeInfos[index];
|
||||
let offset = 0;
|
||||
let tabsContainerWidth = this.tabsContainerWidth;
|
||||
if (JSON.stringify(this.activeStyle) !== '{}') {
|
||||
const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${index}`,true);
|
||||
if (nodeRes) {
|
||||
node = nodeRes[0];
|
||||
offset = this.currentScrollLeft;
|
||||
this.tabsHeight = Math.max(node.height + uni.upx2px(28), this.tabsHeight);
|
||||
tabsContainerWidth = 0;
|
||||
for(let i = 0;i < this.itemNodeInfos.length;i++){
|
||||
let oldNode = this.itemNodeInfos[i];
|
||||
tabsContainerWidth += i === index ? node.width : oldNode.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.bottomDotX = this._getBottomDotX(node, this.finalBarWidth, offset);
|
||||
this.bottomDotXForIndex = this.bottomDotX;
|
||||
if (this.tabsWidth) {
|
||||
setTimeout(()=>{
|
||||
let scrollLeft = this.bottomDotX - this.tabsWidth / 2 + this.finalBarWidth / 2;
|
||||
scrollLeft = Math.max(0,scrollLeft);
|
||||
if (tabsContainerWidth) {
|
||||
scrollLeft = Math.min(scrollLeft,tabsContainerWidth - this.tabsWidth + 10);
|
||||
}
|
||||
if (this.shouldScroll && tabsContainerWidth > this.tabsWidth) {
|
||||
this.scrollLeft = scrollLeft;
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
this.isFirstLoaded = true;
|
||||
})
|
||||
},200)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 处理list改变
|
||||
_handleListChange(newVal) {
|
||||
this.$nextTick(async ()=>{
|
||||
if(newVal.length){
|
||||
let itemNodeInfos = [];
|
||||
let tabsContainerWidth = 0;
|
||||
let delayTime = 0;
|
||||
// #ifdef MP-BAIDU
|
||||
delayTime = 100;
|
||||
// #endif
|
||||
setTimeout(async()=>{
|
||||
for(let i = 0;i < newVal.length;i++){
|
||||
const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${i}`,true);
|
||||
if(nodeRes){
|
||||
const node = nodeRes[0];
|
||||
node.left += this.currentScrollLeft;
|
||||
itemNodeInfos.push(node);
|
||||
tabsContainerWidth += node.width;
|
||||
}
|
||||
if (i === this.currentIndex){
|
||||
this.itemNodeInfos = itemNodeInfos;
|
||||
this.tabsContainerWidth = tabsContainerWidth;
|
||||
this._updateDotPosition(this.currentIndex);
|
||||
}
|
||||
}
|
||||
this.itemNodeInfos = itemNodeInfos;
|
||||
this.tabsContainerWidth = tabsContainerWidth;
|
||||
this._updateDotPosition(this.currentIndex);
|
||||
},delayTime)
|
||||
}
|
||||
})
|
||||
|
||||
if (this.initTriggerChange && this.changeTriggerFailed && newVal.length) {
|
||||
if (this.current < newVal.length) {
|
||||
this.$emit('change', this.current, newVal[this.current][this.valueKey]);
|
||||
}
|
||||
}
|
||||
},
|
||||
//根据node获取bottomX
|
||||
_getBottomDotX(node, barWidth = this.finalBarWidth, offset = 0){
|
||||
return node.left + node.width / 2 - barWidth / 2 + offset - this.tabsLeft;
|
||||
},
|
||||
//获取节点信息
|
||||
_getNodeClientRect(select, withRefArr = false) {
|
||||
// #ifdef APP-NVUE
|
||||
select = select.replace('.', '').replace('#', '');
|
||||
const ref = withRefArr ? this.$refs[select][0] : this.$refs[select];
|
||||
return new Promise((resolve, reject) => {
|
||||
if (ref) {
|
||||
weexDom.getComponentRect(ref, option => {
|
||||
if (option && option.result) {
|
||||
resolve([option.size]);
|
||||
} else resolve(false);
|
||||
})
|
||||
} else resolve(false);
|
||||
});
|
||||
return;
|
||||
// #endif
|
||||
const res = uni.createSelectorQuery().in(this);
|
||||
res.select(select).boundingClientRect();
|
||||
return new Promise((resolve, reject) => {
|
||||
res.exec(data => {
|
||||
resolve((data && data != '' && data != undefined && data.length) ? data : false);
|
||||
});
|
||||
});
|
||||
},
|
||||
//格式化badge中的count
|
||||
_formatCount(count) {
|
||||
if (!count) return '';
|
||||
if (count > this.badgeMaxCount) {
|
||||
return this.badgeMaxCount + '+';
|
||||
}
|
||||
return count.toString();
|
||||
},
|
||||
//将文本的px或者rpx转为px的值
|
||||
_convertTextToPx(text) {
|
||||
const dataType = Object.prototype.toString.call(text);
|
||||
if (dataType === '[object Number]') {
|
||||
return uni.upx2px(text);
|
||||
}
|
||||
let isRpx = false;
|
||||
if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) {
|
||||
text = text.replace('rpx', '').replace('upx', '');
|
||||
isRpx = true;
|
||||
} else if (text.indexOf('px') !== -1) {
|
||||
text = text.replace('px', '');
|
||||
} else {
|
||||
text = uni.upx2px(text);
|
||||
}
|
||||
if (!isNaN(text)) {
|
||||
if (isRpx) return Number(uni.upx2px(text));
|
||||
return Number(text);
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.z-tabs-conatiner{
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.z-tabs-scroll-view-conatiner{
|
||||
flex: 1;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.z-tabs-scroll-view ::-webkit-scrollbar {
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
background: transparent;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.z-tabs-scroll-view{
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.z-tabs-list-container{
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.z-tabs-list,.z-tabs-list-container{
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.z-tabs-item{
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0px 20rpx;
|
||||
}
|
||||
|
||||
.z-tabs-item-title-container{
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.z-tabs-item-title{
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.z-tabs-item-title-disabled{
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.z-tabs-item-badge{
|
||||
margin-left: 8rpx;
|
||||
background-color: #ec5b56;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
border-radius: 100px;
|
||||
padding: 0rpx 10rpx;
|
||||
}
|
||||
|
||||
.z-tabs-bottom{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.z-tabs-bottom-dot{
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.z-tabs-left,.z-tabs-right{
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
{
|
||||
"id": "z-tabs",
|
||||
"name": "z-tabs",
|
||||
"displayName": "【z-tabs】一个简单轻量的tabs组件",
|
||||
"version": "0.2.5",
|
||||
"description": "全平台兼容，支持nvue、vue3",
|
||||
"keywords": [
|
||||
"tabs"
|
||||
],
|
||||
"repository": "https://github.com/SmileZXLee/uni-z-tabs",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.0.7"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "393727164"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@zxlee/z-tabs",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
# z-tabs
|
||||
|
||||
[](https://github.com/SmileZXLee/uni-z-tabs)
|
||||
[](https://en.wikipedia.org/wiki/MIT_License)
|
||||
|
||||
***
|
||||
|
||||
### 反馈qq群(点击加群)：[790460711](https://jq.qq.com/?_wv=1027&k=vU2fKZZH)
|
||||
|
||||
***
|
||||
|
||||
## z-tabs文档
|
||||
|
||||
### 安装
|
||||
|
||||
#### 方式1(推荐)：通过uni_modules安装，在插件市场中点击右上角【使用HbuilderX导入插件】即可。
|
||||
|
||||
***
|
||||
|
||||
#### 方式2：通过npm安装
|
||||
|
||||
```bash
|
||||
//若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程
|
||||
npm init -y
|
||||
|
||||
//安装
|
||||
npm install @zxlee/z-tabs --save
|
||||
//更新
|
||||
npm update @zxlee/z-tabs
|
||||
```
|
||||
|
||||
然后在`pages.json`中配置`easycom`(注意：下方配置只有在使用npm安装时才需要配置！！！！！)
|
||||
|
||||
```json
|
||||
"easycom": {
|
||||
"^z-tabs": "@zxlee/z-tabs/components/z-tabs/z-tabs.vue"
|
||||
}
|
||||
```
|
||||
|
||||
### 基本使用
|
||||
|
||||
```html
|
||||
<template>
|
||||
<z-tabs :list="list"></z-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const list = [];
|
||||
for(let i = 0;i < 10;i++) {
|
||||
// list内item支持字符串或对象，下方这个是字符串
|
||||
list.push('tab标题');
|
||||
|
||||
// 如果要展示徽标数，则list中item的数据结构应为：
|
||||
list.push({
|
||||
name: 'tab标题',
|
||||
badge: {
|
||||
// 设置徽标数为6
|
||||
count: 6
|
||||
},
|
||||
// 可以禁用某个item
|
||||
disabled: true
|
||||
});
|
||||
}
|
||||
this.list = list;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| :------------------ | :----------------------------------------------------------- | :------------- | :------ | :----- |
|
||||
| list | 数据源数组，支持形如`['tab1','tab2']`的格式或`[{name:'tab1',value:1}]`的格式 | Array | [] | - |
|
||||
| current | 当前选中的index | Number\|String | 0 | - |
|
||||
| scroll-count | list数组长度超过scrollCount时滚动显示(不自动铺满全屏) | Number\|String | 5 | - |
|
||||
| tab-width | 自定义每个tab的宽度，默认为0，即代表根据内容自动撑开，单位rpx，支持传100、"100px"或"100rpx" | Number\|String | 0 | 0 |
|
||||
| bar-width | 滑块宽度，单位rpx，支持传100、"100px"或"100rpx" | Number\|String | 45rpx | - |
|
||||
| bar-height | 滑块高度，单位rpx，支持传100、"100px"或"100rpx" | Number\|String | 8rpx | - |
|
||||
| bar-style | 滑块样式，其中的`width`和`height`将被`bar-width`和`bar-height`覆盖 | Object | {} | - |
|
||||
| bottom-space | tabs与底部的间距，单位rpx，支持传100、"100px"或"100rpx" | Number\|String | 8rpx | - |
|
||||
| bar-animate-mode | 【v0.1.5起支持】切换tab时滑块动画模式，与`swiper`联动时有效，点击切换tab时无效，必须调用`setDx`。默认为`line`，即切换tab时滑块宽度保持不变，线性运动。可选值为`worm`，即为类似毛毛虫蠕动效果 | String | line | worm |
|
||||
| name-key | list中item的name(标题)的key | String | name | - |
|
||||
| value-key | list中item的value的key | String | value | - |
|
||||
| active-color | 激活状态tab的颜色 | String | #007AFF | - |
|
||||
| inactive-color | 未激活状态tab的颜色 | String | #666666 | - |
|
||||
| disabled-color | 禁用状态tab的颜色 | String | #bbbbbb | - |
|
||||
| active-style | 激活状态tab的样式 | Object | {} | - |
|
||||
| inactive-style | 未激活状态tab的样式 | Object | {} | - |
|
||||
| disabled-style | 禁用状态tab的样式 | Object | {} | - |
|
||||
| badge-max-count | 徽标数最大数字限制，超过这个数字将变成`badge-max-count`+ | Number\|String | 99 | - |
|
||||
| badge-style | 徽标样式，例如可自定义背景色，字体等等 | Object | {} | - |
|
||||
| bg-color | z-tabs背景色 | String | white | - |
|
||||
| tabs-style | z-tabs样式 | Object | {} | - |
|
||||
| init-trigger-change | 初始化时是否自动触发change事件 | Boolean | true | false |
|
||||
|
||||
|
||||
### events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------------ | -------------------- | ------------------------------------------------------------ |
|
||||
| @change | tabs改变(点击)时触发 | `参数1`:index(当前切换到的index)；<br/>`参数2`:value(当前切换到的value) |
|
||||
| @secondClick | tabs二次点击时触发 | `参数1`:index(当前切换到的index)；<br/>`参数2`:value(当前切换到的value) |
|
||||
|
||||
### methods
|
||||
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ------------------- | ------------------------------------------------------------ | -------------------------------------- |
|
||||
| setDx | 根据swiper的`@transition`实时更新底部dot位置 | swiper的`@transition`中的`e.detail.dx` |
|
||||
| unlockDx | 在swiper的`@animationfinish`中通知`z-tabs`结束多`setDx`的锁定，若在父组件中调用了`setDx`，则必须调用`unlockDx` | - |
|
||||
| updateSubviewLayout | 在nvue+安卓中，若在cell中使用`z-tabs`，且页面加载时cell在屏幕之外，因cell的复用机制，可能导致`z-tabs`内部的布局失效：例如底部bar无法显示，此时可在list滚动到一定区域内(例如快显示`z-tabs`)的时候调用此方法以更新其内部布局。其他情况无需调用！ | - |
|
||||
|
||||
### slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| :---- | ------------ |
|
||||
| left | tabs左侧插槽 |
|
||||
| right | tabs右侧插槽 |
|
||||
|
||||
### 支持全局配置
|
||||
|
||||
* 在`/z-tabs/components/z-tabs/config/index.js`文件中进行配置
|
||||
|
||||
```js
|
||||
export default {
|
||||
'active-color': 'red'
|
||||
}
|
||||
```
|
||||
|
||||
### 【v0.1.4起支持】底部dot与swiper联动演示
|
||||
|
||||
```html
|
||||
<template>
|
||||
<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
|
||||
<swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
||||
xxx
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabList: ['测试1','测试2','测试3','测试4'],
|
||||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//tabs通知swiper切换
|
||||
tabsChange(index) {
|
||||
this.current = index;
|
||||
},
|
||||
//swiper滑动中
|
||||
swiperTransition(e) {
|
||||
this.$refs.tabs.setDx(e.detail.dx);
|
||||
},
|
||||
//swiper滑动结束
|
||||
swiperAnimationfinish(e) {
|
||||
this.current = e.detail.current;
|
||||
this.$refs.tabs.unlockDx();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
Loading…
Reference in New Issue