7.11 pan
Panzihang
parent
e78200689d
commit
41cb4c650a
24
pages.json
24
pages.json
|
|
@ -24,6 +24,24 @@
|
|||
"navigationBarTitleText": "船舶作业"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/documentList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "单证列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/mixWork",
|
||||
"style": {
|
||||
"navigationBarTitleText": "杂项作业"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/mixAdd",
|
||||
"style": {
|
||||
"navigationBarTitleText": "杂项作业编辑"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/monitor/index",
|
||||
"style": {
|
||||
|
|
@ -41,6 +59,12 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "质损详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/monitor/sign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "签名"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@
|
|||
<li>
|
||||
<p class="liTitle">板车照片</p>
|
||||
<view class="picture">
|
||||
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
||||
<img src="../../static/images/testImg.jpg" alt="" v-for="item in 3">
|
||||
</view>
|
||||
</li>
|
||||
<li>
|
||||
<p class="liTitle">板车车牌照</p>
|
||||
<view class="picture">
|
||||
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
||||
<img src="../../static/images/testImg.jpg" alt="" v-for="item in 3">
|
||||
</view>
|
||||
</li>
|
||||
<li class="flexLi">
|
||||
|
|
@ -70,6 +70,13 @@
|
|||
<p>质损货物品类：</p>
|
||||
<p>商品车</p>
|
||||
</li>
|
||||
<li class="imgLi">
|
||||
<img src="../../static/images/car1.png" alt="">
|
||||
<img src="../../static/images/car2.png" alt="">
|
||||
<img src="../../static/images/car3.png" alt="">
|
||||
<img src="../../static/images/car4.png" alt="">
|
||||
<img src="../../static/images/car5.png" alt="">
|
||||
</li>
|
||||
<li class="tsLi">
|
||||
<p>质损概况：</p>
|
||||
<p>其他 这是一段关于其他的描述</p>
|
||||
|
|
@ -85,21 +92,37 @@
|
|||
<li class="zpLi">
|
||||
<p class="liTitle">质损照片</p>
|
||||
<view class="picture">
|
||||
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
||||
<img src="../../static/images/testImg.jpg" alt="" v-for="item in 6">
|
||||
</view>
|
||||
</li>
|
||||
<li class="zpLi">
|
||||
<p class="liTitle">车架号图片</p>
|
||||
<view class="picture">
|
||||
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
||||
<img src="../../static/images/testImg.jpg" alt="" v-for="item in 9">
|
||||
</view>
|
||||
</li>
|
||||
</ul>
|
||||
<view class="btnList">
|
||||
<van-button type="default" @click="cancel">取消</van-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
// 取消
|
||||
cancel() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/monitor/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -149,11 +172,13 @@
|
|||
|
||||
.picture {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
/deep/.file-picker__box {
|
||||
width: 120px !important;
|
||||
height: 120px !important;
|
||||
padding-top: 0;
|
||||
img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -181,6 +206,42 @@
|
|||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.imgLi {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img:nth-of-type(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
img:nth-of-type(2) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
img:nth-of-type(3) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
img:nth-of-type(4) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
img:nth-of-type(5) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/deep/ .van-button {
|
||||
margin: 30px 0;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,8 +49,9 @@
|
|||
<p class="liTitle"><span class="required">*</span>责损负责人:</p>
|
||||
<van-field v-model="lossHead" placeholder="请输入" />
|
||||
</li>
|
||||
<li>
|
||||
<li class="zisun">
|
||||
<p class="liTitle"><span class="required">*</span>签名:</p>
|
||||
<p class="sign" @click="sign">点击签名</p>
|
||||
</li>
|
||||
</ul>
|
||||
<view class="formTitle">
|
||||
|
|
@ -96,6 +97,13 @@
|
|||
</van-radio>
|
||||
</van-radio-group>
|
||||
</li>
|
||||
<li class="imgLi">
|
||||
<img src="../../static/images/car1.png" alt="">
|
||||
<img src="../../static/images/car2.png" alt="">
|
||||
<img src="../../static/images/car3.png" alt="">
|
||||
<img src="../../static/images/car4.png" alt="">
|
||||
<img src="../../static/images/car5.png" alt="">
|
||||
</li>
|
||||
<li class="zsLi">
|
||||
<p class="liTitle"><span class="required">*</span>资损概况:</p>
|
||||
<van-checkbox-group class="radioList" v-model="result1">
|
||||
|
|
@ -244,6 +252,12 @@
|
|||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
// 点击签名
|
||||
sign() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/monitor/sign'
|
||||
})
|
||||
},
|
||||
// 船名
|
||||
shipChange(e) {
|
||||
this.shipValue = e
|
||||
|
|
@ -266,9 +280,8 @@
|
|||
},
|
||||
// 取消
|
||||
cancel() {
|
||||
console.log("取消")
|
||||
uni.navigateTo({
|
||||
url: '..//monitor/index'
|
||||
url: '/pages/monitor/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -355,6 +368,13 @@
|
|||
|
||||
}
|
||||
|
||||
.sign {
|
||||
color: #2979ff;
|
||||
line-height: 40px;
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.zsInfo {
|
||||
|
|
@ -380,6 +400,7 @@
|
|||
background-color: #fff;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.zsLi {
|
||||
|
|
@ -421,6 +442,31 @@
|
|||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.imgLi {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img:nth-of-type(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
img:nth-of-type(2) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
img:nth-of-type(3) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
img:nth-of-type(4) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
img:nth-of-type(5) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnList {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="rowFoot">
|
||||
<view class="col">
|
||||
<view class="col" @click="details">
|
||||
详情
|
||||
</view>
|
||||
<view class="col" @click="edit">
|
||||
|
|
@ -132,16 +132,20 @@
|
|||
},
|
||||
// 点击新增
|
||||
add() {
|
||||
console.log("新增")
|
||||
uni.navigateTo({
|
||||
url: 'pages/monitor/edit'
|
||||
url: '/pages/monitor/edit'
|
||||
})
|
||||
},
|
||||
// 点击编辑
|
||||
edit() {
|
||||
console.log("编辑")
|
||||
uni.navigateTo({
|
||||
url: 'pages/monitor/edit'
|
||||
url: '/pages/monitor/edit'
|
||||
})
|
||||
},
|
||||
// 点击详情
|
||||
details() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/monitor/details'
|
||||
})
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,225 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view class="sigh-btns">
|
||||
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
||||
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
||||
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
||||
<!-- <button class="btn" @tap="handleCancel">取消</button>
|
||||
<button class="btn" @tap="handleReset">重写</button>
|
||||
<button class="btn" @tap="handleConfirm">确认</button> -->
|
||||
</view>
|
||||
<view class="sign-box">
|
||||
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
|
||||
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
|
||||
|
||||
<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
var x = 20;
|
||||
var y = 20;
|
||||
var tempPoint = []; //用来存放当前画纸上的轨迹点
|
||||
var id = 0;
|
||||
var type = '';
|
||||
let that;
|
||||
let canvasw;
|
||||
let canvash;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ctx: '', //绘图图像
|
||||
points: [], //路径点集合,
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
onLoad(option) {
|
||||
that = this;
|
||||
console.log(option);
|
||||
id = option.id;
|
||||
type = option.type;
|
||||
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
|
||||
//设置画笔样式
|
||||
this.ctx.lineWidth = 4;
|
||||
this.ctx.lineCap = 'round';
|
||||
this.ctx.lineJoin = 'round';
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
that.width = res.windowWidth * 0.8;
|
||||
that.height = res.windowHeight * 0.85;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
//触摸开始，获取到起点
|
||||
touchstart: function(e) {
|
||||
let startX = e.changedTouches[0].x;
|
||||
let startY = e.changedTouches[0].y;
|
||||
let startPoint = {
|
||||
X: startX,
|
||||
Y: startY
|
||||
};
|
||||
|
||||
/* **************************************************
|
||||
#由于uni对canvas的实现有所不同，这里需要把起点存起来
|
||||
* **************************************************/
|
||||
this.points.push(startPoint);
|
||||
|
||||
//每次触摸开始，开启新的路径
|
||||
this.ctx.beginPath();
|
||||
},
|
||||
|
||||
//触摸移动，获取到路径点
|
||||
touchmove: function(e) {
|
||||
let moveX = e.changedTouches[0].x;
|
||||
let moveY = e.changedTouches[0].y;
|
||||
let movePoint = {
|
||||
X: moveX,
|
||||
Y: moveY
|
||||
};
|
||||
this.points.push(movePoint); //存点
|
||||
let len = this.points.length;
|
||||
if (len >= 2) {
|
||||
this.draw(); //绘制路径
|
||||
}
|
||||
tempPoint.push(movePoint);
|
||||
},
|
||||
|
||||
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
|
||||
touchend: function() {
|
||||
this.points = [];
|
||||
},
|
||||
|
||||
/* ***********************************************
|
||||
# 绘制笔迹
|
||||
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
||||
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
|
||||
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
|
||||
************************************************ */
|
||||
draw: function() {
|
||||
let point1 = this.points[0];
|
||||
let point2 = this.points[1];
|
||||
this.points.shift();
|
||||
this.ctx.moveTo(point1.X, point1.Y);
|
||||
this.ctx.lineTo(point2.X, point2.Y);
|
||||
this.ctx.stroke();
|
||||
this.ctx.draw(true);
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
|
||||
//清空画布
|
||||
handleReset: function() {
|
||||
console.log('handleReset');
|
||||
that.ctx.clearRect(0, 0, that.width, that.height);
|
||||
that.ctx.draw(true);
|
||||
tempPoint = [];
|
||||
},
|
||||
|
||||
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||
handleConfirm: function() {
|
||||
if (tempPoint.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先签名',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(res) {
|
||||
let tempPath = res.tempFilePath;
|
||||
console.log(tempPath)
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.sign-box {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sign-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sigh-btns {
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 30px 0px;
|
||||
padding: 8rpx;
|
||||
transform: rotate(90deg);
|
||||
border: grey 1rpx solid;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.mycanvas {
|
||||
margin: auto 0rpx;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.canvsborder {
|
||||
border: 1rpx solid #333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 10000rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<view class="documentList">
|
||||
<view class="container">
|
||||
<p class="title">作业单证</p>
|
||||
<ul>
|
||||
<li v-for="(item,index) in infoList" :key="index" @click="toGo(item.url)">
|
||||
<view class="round"></view>
|
||||
<span>{{item.name}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="title">其他作业</p>
|
||||
<ul>
|
||||
<li v-for="(item,index) in otherListh" :key="index" @click="toGo(item.url)">
|
||||
<view class="round"></view>
|
||||
<span>{{item.name}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
infoList: [{
|
||||
name: "杂项作业单",
|
||||
url: "mixWork"
|
||||
}, {
|
||||
name: "系解缆",
|
||||
url: "mixWork"
|
||||
}, {
|
||||
name: "供给",
|
||||
url: "mixWork"
|
||||
}, {
|
||||
name: "指导员作业布置",
|
||||
url: "mixWork"
|
||||
}, {
|
||||
name: "船舶装卸通知单",
|
||||
url: "mixWork"
|
||||
}, {
|
||||
name: "质量意见征询",
|
||||
url: "mixWork"
|
||||
}, {
|
||||
name: "异常情况",
|
||||
url: "mixWork"
|
||||
}, {
|
||||
name: "MAFI清单",
|
||||
url: "mixWork"
|
||||
}],
|
||||
otherListh: [{
|
||||
name: "安全巡检",
|
||||
url: "mixWork"
|
||||
},
|
||||
{
|
||||
name: "船舶载货量",
|
||||
url: "mixWork"
|
||||
},
|
||||
{
|
||||
name: "船舶资料",
|
||||
url: "mixWork"
|
||||
},
|
||||
{
|
||||
name: "船舶计划",
|
||||
url: "mixWork"
|
||||
},
|
||||
{
|
||||
name: "作业查询",
|
||||
url: "mixWork"
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toGo(url) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/${url}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.documentList {
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
li {
|
||||
margin: 10px 20px;
|
||||
|
||||
.round {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<view class="mixAdd">
|
||||
<view class="container">
|
||||
<ul>
|
||||
<li>
|
||||
<p>船名：</p>
|
||||
<span>快乐号</span>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>航次：</p>
|
||||
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"></uni-data-select>
|
||||
</li>
|
||||
<li>
|
||||
<p>进出口：</p>
|
||||
<span>进口</span>
|
||||
</li>
|
||||
<li>
|
||||
<p>贸易类型：</p>
|
||||
<span>内贸</span>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>天气：</p>
|
||||
<span>未知</span>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>泊位：</p>
|
||||
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"></uni-data-select>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>作业组数：</p>
|
||||
<uni-number-box @change="workChange" />
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>单船人数：</p>
|
||||
<uni-number-box @change="shipChange" />
|
||||
</li>
|
||||
<li>
|
||||
<p>作业时间：</p>
|
||||
</li>
|
||||
</ul>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 航次下拉框
|
||||
hcValue: "",
|
||||
hcList: [{
|
||||
value: 0,
|
||||
text: "航次0"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "航次1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "航次2"
|
||||
},
|
||||
],
|
||||
// 泊位下拉框
|
||||
bwValue: "",
|
||||
bwList: [{
|
||||
value: 0,
|
||||
text: "泊位0"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "泊位1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "泊位2"
|
||||
},
|
||||
],
|
||||
// 作业单数
|
||||
workValue: 0,
|
||||
// 单船人数
|
||||
shipValue: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 航次下拉
|
||||
hcChange(e) {
|
||||
this.hcValue = e;
|
||||
},
|
||||
// 泊位下拉
|
||||
bwChange(e) {
|
||||
this.bwValue = e;
|
||||
},
|
||||
// 作业组数
|
||||
workChange(val) {
|
||||
this.workValue = val;
|
||||
},
|
||||
// 单船人数
|
||||
shipChange(val) {
|
||||
this.shipValue = val;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mixAdd {
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
width: 44%;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: flex;
|
||||
padding: 10px 20px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/deep/.uni-numbox {
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/deep/.uni-numbox-btns {
|
||||
border-right: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/deep/.uni-numbox__value {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<view class="mixWork">
|
||||
<view class="container">
|
||||
<view class="tabsList">
|
||||
<view class="tabsBox" v-for="(item,index) in tabsList" :key="index" :class="{active:tabsIndex == index}"
|
||||
@click="tabsClick(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<ul v-if="tabsType == 1">
|
||||
<li v-for="(item,index) in peopleInfo" :key="index">
|
||||
<view class="title">航次：{{item.val1}}</view>
|
||||
<p>贸易类型：{{item.val2}}</p>
|
||||
<p>进出口：{{item.val3}}</p>
|
||||
<p>作业组数：{{item.val4}}</p>
|
||||
<p>单船人数：{{item.val5}}</p>
|
||||
<p>状态：{{item.val6}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="tabsType == 2">
|
||||
<li v-for="(item,index) in shiftInfo" :key="index">
|
||||
<view class="title">航次：{{item.val1}}</view>
|
||||
<view class="shift">
|
||||
<p>一工班</p>
|
||||
<span>作业时间：2023/09/09 13:00:00</span>
|
||||
</view>
|
||||
<view class="shift">
|
||||
<p>二工班</p>
|
||||
<span>作业时间：2023/09/09 13:00:00</span>
|
||||
</view>
|
||||
<view class="shift">
|
||||
<p>三工班</p>
|
||||
<span>作业时间：2023/09/09 13:00:00</span>
|
||||
</view>
|
||||
<view class="state">状态：{{item.val6}}</view>
|
||||
</li>
|
||||
</ul>
|
||||
<view class="addBtn" @click="add">+ 新增</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabsList: ["人员信息", "工班信息"],
|
||||
tabsType: 1,
|
||||
tabsIndex: 0,
|
||||
peopleInfo: [{
|
||||
val1: "JK9795799",
|
||||
val2: "内贸",
|
||||
val3: "进口",
|
||||
val4: "100",
|
||||
val5: "100",
|
||||
val6: "未上传",
|
||||
}, {
|
||||
val1: "JK9795799",
|
||||
val2: "内贸",
|
||||
val3: "进口",
|
||||
val4: "100",
|
||||
val5: "100",
|
||||
val6: "未上传",
|
||||
}, {
|
||||
val1: "JK9795799",
|
||||
val2: "内贸",
|
||||
val3: "进口",
|
||||
val4: "100",
|
||||
val5: "100",
|
||||
val6: "未上传",
|
||||
}],
|
||||
shiftInfo: [{
|
||||
val1: "JK9795799",
|
||||
val6: "未上传",
|
||||
}, ]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabsClick(item, index) {
|
||||
this.tabsIndex = index;
|
||||
if (item == "人员信息") {
|
||||
this.tabsType = 1;
|
||||
} else {
|
||||
this.tabsType = 2;
|
||||
}
|
||||
},
|
||||
add() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/mixAdd`
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mixWork {
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
|
||||
.tabsList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.tabsBox {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
margin: 0px 10px;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #2979ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 20px 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.shift {
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
position: fixed;
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #2979ff;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
.container {
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - 44px);
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
## 1.2.3（2023-05-23）
|
||||
更新示例工程
|
||||
## 1.2.2（2023-05-08）
|
||||
- 修复 change 事件执行顺序错误的问题
|
||||
## 1.2.1（2021-11-22）
|
||||
- 修复 vue3中某些scss变量无法找到的问题
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box)
|
||||
## 1.1.2（2021-11-09）
|
||||
- 新增 提供组件设计资源，组件样式调整
|
||||
## 1.1.1（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.1.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.7（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.0.6（2021-04-20）
|
||||
- 修复 uni-number-box 浮点数运算不精确的 bug
|
||||
- 修复 uni-number-box change 事件触发不正确的 bug
|
||||
- 新增 uni-number-box v-model 双向绑定
|
||||
## 1.0.5（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
|
||||
## 1.0.7（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持 v-model
|
||||
- 新增 支持 focus、blur 事件
|
||||
- 新增 支持 PC 端
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<template>
|
||||
<view class="uni-numbox">
|
||||
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
|
||||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
|
||||
</view>
|
||||
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
|
||||
v-model="inputValue" :style="{background, color}" />
|
||||
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
|
||||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* NumberBox 数字输入框
|
||||
* @description 带加减按钮的数字输入框
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=31
|
||||
* @property {Number} value 输入框当前值
|
||||
* @property {Number} min 最小值
|
||||
* @property {Number} max 最大值
|
||||
* @property {Number} step 每次点击改变的间隔大小
|
||||
* @property {String} background 背景色
|
||||
* @property {String} color 字体颜色（前景色）
|
||||
* @property {Boolean} disabled = [true|false] 是否为禁用状态
|
||||
* @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
|
||||
* @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
|
||||
* @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "UniNumberBox",
|
||||
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
|
||||
props: {
|
||||
value: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#f5f5f5'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.inputValue = +val;
|
||||
},
|
||||
modelValue(val) {
|
||||
this.inputValue = +val;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.value === 1) {
|
||||
this.inputValue = +this.modelValue;
|
||||
}
|
||||
if (this.modelValue === 1) {
|
||||
this.inputValue = +this.value;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_calcValue(type) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
const scale = this._getDecimalScale();
|
||||
let value = this.inputValue * scale;
|
||||
let step = this.step * scale;
|
||||
if (type === "minus") {
|
||||
value -= step;
|
||||
if (value < (this.min * scale)) {
|
||||
return;
|
||||
}
|
||||
if (value > (this.max * scale)) {
|
||||
value = this.max * scale
|
||||
}
|
||||
}
|
||||
|
||||
if (type === "plus") {
|
||||
value += step;
|
||||
if (value > (this.max * scale)) {
|
||||
return;
|
||||
}
|
||||
if (value < (this.min * scale)) {
|
||||
value = this.min * scale
|
||||
}
|
||||
}
|
||||
|
||||
this.inputValue = (value / scale).toFixed(String(scale).length - 1);
|
||||
// TODO vue2 兼容
|
||||
this.$emit("input", +this.inputValue);
|
||||
// TODO vue3 兼容
|
||||
this.$emit("update:modelValue", +this.inputValue);
|
||||
this.$emit("change", +this.inputValue);
|
||||
},
|
||||
_getDecimalScale() {
|
||||
|
||||
let scale = 1;
|
||||
// 浮点型
|
||||
if (~~this.step !== this.step) {
|
||||
scale = Math.pow(10, String(this.step).split(".")[1].length);
|
||||
}
|
||||
return scale;
|
||||
},
|
||||
_onBlur(event) {
|
||||
this.$emit('blur', event)
|
||||
let value = event.detail.value;
|
||||
if (isNaN(value)) {
|
||||
this.inputValue = this.min;
|
||||
return;
|
||||
}
|
||||
value = +value;
|
||||
if (value > this.max) {
|
||||
value = this.max;
|
||||
} else if (value < this.min) {
|
||||
value = this.min;
|
||||
}
|
||||
const scale = this._getDecimalScale();
|
||||
this.inputValue = value.toFixed(String(scale).length - 1);
|
||||
this.$emit("input", +this.inputValue);
|
||||
this.$emit("update:modelValue", +this.inputValue);
|
||||
this.$emit("change", +this.inputValue);
|
||||
},
|
||||
_onFocus(event) {
|
||||
this.$emit('focus', event)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
$box-height: 26px;
|
||||
$bg: #f5f5f5;
|
||||
$br: 2px;
|
||||
$color: #333;
|
||||
|
||||
.uni-numbox {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-numbox-btns {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
background-color: $bg;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-numbox__value {
|
||||
margin: 0 2px;
|
||||
background-color: $bg;
|
||||
width: 40px;
|
||||
height: $box-height;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.uni-numbox__minus {
|
||||
border-top-left-radius: $br;
|
||||
border-bottom-left-radius: $br;
|
||||
}
|
||||
|
||||
.uni-numbox__plus {
|
||||
border-top-right-radius: $br;
|
||||
border-bottom-right-radius: $br;
|
||||
}
|
||||
|
||||
.uni-numbox--text {
|
||||
// fix nvue
|
||||
line-height: 20px;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.uni-numbox .uni-numbox--disabled {
|
||||
color: #c0c0c0 !important;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
{
|
||||
"id": "uni-number-box",
|
||||
"displayName": "uni-number-box 数字输入框",
|
||||
"version": "1.2.3",
|
||||
"description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"数字输入框"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"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"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
|
||||
## NumberBox 数字输入框
|
||||
> **组件名：uni-number-box**
|
||||
> 代码块： `uNumberBox`
|
||||
|
||||
|
||||
带加减按钮的数字输入框。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
Loading…
Reference in New Issue