Merge branch 'dev' of http://61.184.202.72:3000/wsnet/PDA-App into dev
commit
92e67a3fe8
111
pages.json
111
pages.json
|
|
@ -43,9 +43,116 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/shipWork/mixAdd",
|
"path": "pages/shipWork/peopleAdd",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "杂项作业编辑"
|
"navigationBarTitleText": "杂项作业查看(人员信息)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/shiftAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "杂项作业查看(工班信息)"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/shiftDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "工班信息详情"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/untieCord",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "系解缆"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/untieAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "系解缆信息"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/supply",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "供给"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/supplyAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "供给信息"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/workAssign",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "指导员作业布置"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/workAssignAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "指导员作业布置信息"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/notice",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "船舶装卸通知书"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/shipWork/noticeAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "船舶装卸通知书信息"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/opinion",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "质量意见征询"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/opinionAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "质量意见征询信息"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/abnormal",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "异常情况"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/abnormalAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "异常情况信息"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/mafi",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "MAFI清单"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/mafiAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "MAFI清单信息"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/patrol",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "安全巡检"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/patrolAdd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "安全巡检信息"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/shipInfo",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "船舶资料"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/shipPlan",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "船舶计划"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<view class="abnormal">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
|
||||||
|
<view class="title">类型：{{item.val1}}</view>
|
||||||
|
<p>上传状态：{{item.val2}}</p>
|
||||||
|
<p>航次：{{item.val3}}</p>
|
||||||
|
<p>贸易类型：{{item.val4}}</p>
|
||||||
|
<p>进出口：{{item.val5}}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
val1: "大风预警",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "JK097085964",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "进口",
|
||||||
|
}, {
|
||||||
|
val1: "大风预警",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "JK097085964",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "进口",
|
||||||
|
}, {
|
||||||
|
val1: "大风预警",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "JK097085964",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "进口",
|
||||||
|
}, ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/abnormalAdd?params=${params}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.abnormal {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
<template>
|
||||||
|
<view class="abnormalAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>作业日期：</p>
|
||||||
|
<uni-datetime-picker v-model="dateTime" type="date" :clear-icon="false"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>类型：</p>
|
||||||
|
<uni-easyinput v-if="obj.state != 'look'" v-model="typeValue" placeholder="请输入"></uni-easyinput>
|
||||||
|
<span v-else>类型类型</span>
|
||||||
|
</li>
|
||||||
|
<li class="wLi">
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>描述：</p>
|
||||||
|
<uni-easyinput type="textarea" autoHeight v-model="describe" placeholder="请输入任务描述(200字以内)"
|
||||||
|
maxlength="200" v-if="obj.state != 'look'"></uni-easyinput>
|
||||||
|
<span v-else>描述描述描述</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 日期
|
||||||
|
dateTime: "",
|
||||||
|
// 类型
|
||||||
|
typeValue: "",
|
||||||
|
// 描述
|
||||||
|
describe: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/abnormal'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/abnormal'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/abnormalAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.abnormalAdd {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.wLi {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -5,14 +5,14 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item,index) in infoList" :key="index" @click="toGo(item.url)">
|
<li v-for="(item,index) in infoList" :key="index" @click="toGo(item.url)">
|
||||||
<view class="round"></view>
|
<view class="round"></view>
|
||||||
<span>{{item.name}}</span>
|
<p>{{item.name}}</p]>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p class="title">其他作业</p>
|
<p class="title">其他作业</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item,index) in otherListh" :key="index" @click="toGo(item.url)">
|
<li v-for="(item,index) in otherListh" :key="index" @click="toGo(item.url)">
|
||||||
<view class="round"></view>
|
<view class="round"></view>
|
||||||
<span>{{item.name}}</span>
|
<p>{{item.name}}</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -28,41 +28,41 @@
|
||||||
url: "mixWork"
|
url: "mixWork"
|
||||||
}, {
|
}, {
|
||||||
name: "系解缆",
|
name: "系解缆",
|
||||||
url: "mixWork"
|
url: "untieCord"
|
||||||
}, {
|
}, {
|
||||||
name: "供给",
|
name: "供给",
|
||||||
url: "mixWork"
|
url: "supply"
|
||||||
}, {
|
}, {
|
||||||
name: "指导员作业布置",
|
name: "指导员作业布置",
|
||||||
url: "mixWork"
|
url: "workAssign"
|
||||||
}, {
|
}, {
|
||||||
name: "船舶装卸通知单",
|
name: "船舶装卸通知单",
|
||||||
url: "mixWork"
|
url: "notice"
|
||||||
}, {
|
}, {
|
||||||
name: "质量意见征询",
|
name: "质量意见征询",
|
||||||
url: "mixWork"
|
url: "opinion"
|
||||||
}, {
|
}, {
|
||||||
name: "异常情况",
|
name: "异常情况",
|
||||||
url: "mixWork"
|
url: "abnormal"
|
||||||
}, {
|
}, {
|
||||||
name: "MAFI清单",
|
name: "MAFI清单",
|
||||||
url: "mixWork"
|
url: "mafi"
|
||||||
}],
|
}],
|
||||||
otherListh: [{
|
otherListh: [{
|
||||||
name: "安全巡检",
|
name: "安全巡检",
|
||||||
url: "mixWork"
|
url: "patrol"
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "船舶载货量",
|
|
||||||
url: "mixWork"
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// name: "船舶载货量",
|
||||||
|
// url: "mixWork"
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
name: "船舶资料",
|
name: "船舶资料",
|
||||||
url: "mixWork"
|
url: "shipInfo"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "船舶计划",
|
name: "船舶计划",
|
||||||
url: "mixWork"
|
url: "shipPlan"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "作业查询",
|
name: "作业查询",
|
||||||
|
|
@ -108,7 +108,7 @@
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<template>
|
||||||
|
<view class="mafi">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
|
||||||
|
<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>
|
||||||
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
val1: "马菲板号",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "尺码",
|
||||||
|
val4: "类型",
|
||||||
|
val5: "装卸方式",
|
||||||
|
val6: "JK9796966",
|
||||||
|
}, {
|
||||||
|
val1: "马菲板号",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "尺码",
|
||||||
|
val4: "类型",
|
||||||
|
val5: "装卸方式",
|
||||||
|
val6: "JK9796966",
|
||||||
|
}, {
|
||||||
|
val1: "马菲板号",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "尺码",
|
||||||
|
val4: "类型",
|
||||||
|
val5: "装卸方式",
|
||||||
|
val6: "JK9796966",
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/mafiAdd?params=${params}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.mafi {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
<template>
|
||||||
|
<view class="mafiAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>作业日期：</p>
|
||||||
|
<uni-datetime-picker v-model="workTime" type="date" :clear-icon="false"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>马菲板号：</p>
|
||||||
|
<uni-easyinput v-if="obj.state != 'look'" v-model="vinCode" placeholder="请输入"></uni-easyinput>
|
||||||
|
<span v-else>马菲板号123123</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>尺码：</p>
|
||||||
|
<uni-number-box v-model="sizeNum" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>10</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>类型：</p>
|
||||||
|
<uni-data-select v-model="lxValue" :localdata="lxList" @change="lxChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>类型1</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>装卸类型：</p>
|
||||||
|
<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>装卸类型1</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 作业时间
|
||||||
|
workTime: "",
|
||||||
|
// 马菲板号
|
||||||
|
vinCode: "",
|
||||||
|
// 尺码
|
||||||
|
sizeNum: 0,
|
||||||
|
// 类型下拉框
|
||||||
|
lxValue: "",
|
||||||
|
lxList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "类型0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "类型1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "类型2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 装卸类型下拉框
|
||||||
|
zxValue: "",
|
||||||
|
zxList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "装卸类型0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "装卸类型1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "装卸类型2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 类型下拉
|
||||||
|
lxChange(e) {
|
||||||
|
this.lxValue = e;
|
||||||
|
},
|
||||||
|
// 装卸类型下拉
|
||||||
|
zxChange(e) {
|
||||||
|
this.zxValue = e;
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/mafi'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/mafi'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/mafiAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.mafiAdd {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,152 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -5,8 +5,9 @@
|
||||||
<view class="tabsBox" v-for="(item,index) in tabsList" :key="index" :class="{active:tabsIndex == index}"
|
<view class="tabsBox" v-for="(item,index) in tabsList" :key="index" :class="{active:tabsIndex == index}"
|
||||||
@click="tabsClick(item,index)">{{item}}</view>
|
@click="tabsClick(item,index)">{{item}}</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 人员信息列表 -->
|
||||||
<ul v-if="tabsType == 1">
|
<ul v-if="tabsType == 1">
|
||||||
<li v-for="(item,index) in peopleInfo" :key="index">
|
<li v-for="(item,index) in peopleInfo" :key="index" @click="add('look')">
|
||||||
<view class="title">航次：{{item.val1}}</view>
|
<view class="title">航次：{{item.val1}}</view>
|
||||||
<p>贸易类型：{{item.val2}}</p>
|
<p>贸易类型：{{item.val2}}</p>
|
||||||
<p>进出口：{{item.val3}}</p>
|
<p>进出口：{{item.val3}}</p>
|
||||||
|
|
@ -15,8 +16,9 @@
|
||||||
<p>状态：{{item.val6}}</p>
|
<p>状态：{{item.val6}}</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<!-- 工班信息列表 -->
|
||||||
<ul v-if="tabsType == 2">
|
<ul v-if="tabsType == 2">
|
||||||
<li v-for="(item,index) in shiftInfo" :key="index">
|
<li v-for="(item,index) in shiftInfo" :key="index" @click="lookShift">
|
||||||
<view class="title">航次：{{item.val1}}</view>
|
<view class="title">航次：{{item.val1}}</view>
|
||||||
<view class="shift">
|
<view class="shift">
|
||||||
<p>一工班</p>
|
<p>一工班</p>
|
||||||
|
|
@ -33,7 +35,7 @@
|
||||||
<view class="state">状态：{{item.val6}}</view>
|
<view class="state">状态：{{item.val6}}</view>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<view class="addBtn" @click="add">+ 新增</view>
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -44,8 +46,9 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tabsList: ["人员信息", "工班信息"],
|
tabsList: ["人员信息", "工班信息"],
|
||||||
tabsType: 1,
|
tabsType: 1, // 1是人员信息 2是工班信息
|
||||||
tabsIndex: 0,
|
tabsIndex: 0,
|
||||||
|
// 人员信息列表
|
||||||
peopleInfo: [{
|
peopleInfo: [{
|
||||||
val1: "JK9795799",
|
val1: "JK9795799",
|
||||||
val2: "内贸",
|
val2: "内贸",
|
||||||
|
|
@ -68,6 +71,7 @@
|
||||||
val5: "100",
|
val5: "100",
|
||||||
val6: "未上传",
|
val6: "未上传",
|
||||||
}],
|
}],
|
||||||
|
// 工班信息列表
|
||||||
shiftInfo: [{
|
shiftInfo: [{
|
||||||
val1: "JK9795799",
|
val1: "JK9795799",
|
||||||
val6: "未上传",
|
val6: "未上传",
|
||||||
|
|
@ -84,11 +88,26 @@
|
||||||
this.tabsType = 2;
|
this.tabsType = 2;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
add() {
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
if (this.tabsType == 1) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/shipWork/mixAdd`
|
url: `/pages/shipWork/peopleAdd?params=${params}`
|
||||||
})
|
})
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/shiftAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
lookShift() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/shiftDetails`
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<view class="notice">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
|
||||||
|
<view class="title">航次：{{item.val1}}</view>
|
||||||
|
<p>状态：{{item.val2}}</p>
|
||||||
|
<p>进出口：{{item.val3}}</p>
|
||||||
|
<p>贸易类型：{{item.val4}}</p>
|
||||||
|
<p>作业日期：{{item.val5}}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30",
|
||||||
|
}, {
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30",
|
||||||
|
}, {
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30",
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/noticeAdd?params=${params}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.notice {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
<template>
|
||||||
|
<view class="noticeAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>作业日期：</p>
|
||||||
|
<uni-datetime-picker v-model="workTime" type="date" :clear-icon="false"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 作业时间
|
||||||
|
workTime: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/notice'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/notice'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/noticeAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.noticeAdd {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<view class="opinion">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
|
||||||
|
<view class="title">航次：{{item.val1}}</view>
|
||||||
|
<p>状态：{{item.val2}}</p>
|
||||||
|
<p>进出口：{{item.val3}}</p>
|
||||||
|
<p>贸易类型：{{item.val4}}</p>
|
||||||
|
<p>作业日期：{{item.val5}}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30",
|
||||||
|
}, {
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30",
|
||||||
|
}, {
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30",
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/opinionAdd?params=${params}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.opinion {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,226 @@
|
||||||
|
<template>
|
||||||
|
<view class="opinionAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>泊位：</p>
|
||||||
|
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>1泊位</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>装卸类型：</p>
|
||||||
|
<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>装卸类型1</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>车辆数量：</p>
|
||||||
|
<uni-number-box v-model="carNum" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>100</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>备件数量：</p>
|
||||||
|
<uni-number-box v-model="partsNum" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>100</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>作业日期：</p>
|
||||||
|
<uni-datetime-picker v-model="workTime" type="date" :clear-icon="false"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
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"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 装卸类型下拉框
|
||||||
|
zxValue: "",
|
||||||
|
zxList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "装卸类型0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "装卸类型1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "装卸类型2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 车辆数量
|
||||||
|
carNum: 0,
|
||||||
|
// 备件数量
|
||||||
|
partsNum: 0,
|
||||||
|
// 作业时间
|
||||||
|
workTime: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 泊位下拉
|
||||||
|
bwChange(e) {
|
||||||
|
this.bwValue = e;
|
||||||
|
},
|
||||||
|
// 装卸类型下拉
|
||||||
|
zxChange(e) {
|
||||||
|
this.zxValue = e;
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/opinion'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/opinion'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/opinionAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.opinionAdd {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
<template>
|
||||||
|
<view class="patrol">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
|
||||||
|
<view class="title">类型：{{item.val1}}</view>
|
||||||
|
<p>上传状态：{{item.val2}}</p>
|
||||||
|
<p>航次：{{item.val3}}</p>
|
||||||
|
<p>贸易类型：{{item.val4}}</p>
|
||||||
|
<p>进出口：{{item.val5}}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
val1: "大风预警",
|
||||||
|
val2: "上传成功",
|
||||||
|
val3: "JK097085964",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "进口",
|
||||||
|
}, {
|
||||||
|
val1: "大风预警",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "JK097085964",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "进口",
|
||||||
|
}, {
|
||||||
|
val1: "大风预警",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "JK097085964",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "进口",
|
||||||
|
}, ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/patrolAdd?params=${params}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.patrol {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
<template>
|
||||||
|
<view class="patrolAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>类型：</p>
|
||||||
|
<uni-easyinput v-if="obj.state != 'look'" v-model="typeValue" placeholder="请输入"></uni-easyinput>
|
||||||
|
<span v-else>类型类型</span>
|
||||||
|
</li>
|
||||||
|
<li class="tpLi">
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>图片上传：</p>
|
||||||
|
<template v-if="obj.state != 'look'">
|
||||||
|
<view class="picture">
|
||||||
|
<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<view class="pictureLook" v-else>
|
||||||
|
<img src="../../static/images/testImg.jpg">
|
||||||
|
</view>
|
||||||
|
</li>
|
||||||
|
<li class="wLi">
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>描述：</p>
|
||||||
|
<uni-easyinput type="textarea" autoHeight v-model="describe" placeholder="请输入任务描述(200字以内)"
|
||||||
|
maxlength="200" v-if="obj.state != 'look'"></uni-easyinput>
|
||||||
|
<span v-else>描述描述描述</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 类型
|
||||||
|
typeValue: "",
|
||||||
|
// 描述
|
||||||
|
describe: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
console.log(this.obj)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/patrol'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/patrol'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/patrolAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.patrolAdd {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.wLi {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tpLi {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture {
|
||||||
|
/deep/.file-picker__box {
|
||||||
|
width: 120px !important;
|
||||||
|
height: 120px !important;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pictureLook {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,217 @@
|
||||||
|
<template>
|
||||||
|
<view class="peopleAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>天气：</p>
|
||||||
|
<span>未知</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>泊位：</p>
|
||||||
|
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>1泊位</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>作业组数：</p>
|
||||||
|
<uni-number-box @change="workChange" v-model="workValue" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>5</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>单船人数：</p>
|
||||||
|
<uni-number-box @change="shipChange" v-model="shipValue" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>12</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>作业时间：</p>
|
||||||
|
<uni-datetime-picker v-model="datetime" type="datetimerange" rangeSeparator="-" @change="changeLog"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
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,
|
||||||
|
// 作业时间
|
||||||
|
datetime: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 泊位下拉
|
||||||
|
bwChange(e) {
|
||||||
|
this.bwValue = e;
|
||||||
|
},
|
||||||
|
// 作业组数
|
||||||
|
workChange(val) {
|
||||||
|
this.workValue = val;
|
||||||
|
},
|
||||||
|
// 单船人数
|
||||||
|
shipChange(val) {
|
||||||
|
this.shipValue = val;
|
||||||
|
},
|
||||||
|
// 作业时间
|
||||||
|
changeLog(e) {
|
||||||
|
this.datetime = e;
|
||||||
|
console.log(e)
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/mixWork'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/mixWork'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/peopleAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.peopleAdd {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,565 @@
|
||||||
|
<template>
|
||||||
|
<view class="shiftAdd">
|
||||||
|
<view class="container">
|
||||||
|
<uni-steps :options="stepList" :active="active" />
|
||||||
|
<view class="line"></view>
|
||||||
|
<!-- 工班信息 -->
|
||||||
|
<template v-if="active == 0">
|
||||||
|
<ul class="ul1">
|
||||||
|
<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>
|
||||||
|
<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange"></uni-data-select>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="ulTop"><span @click="ulAdd1">添加</span><van-icon name="arrow-down" /></view>
|
||||||
|
<ul class="ul2" v-for="(item,index) in ulList1" :key="index+'ul'">
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>工班：</p>
|
||||||
|
<uni-data-select v-model="item.gbValue" :localdata="gbList"
|
||||||
|
@change="gbChange"></uni-data-select>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
||||||
|
<uni-datetime-picker v-model="item.datetime" type="datetimerange" rangeSeparator="-"
|
||||||
|
@change="changeLog" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="ulTop"><span @click="ulAdd2">添加</span><span @click="del">删除</span><van-icon
|
||||||
|
name="arrow-down" /></view>
|
||||||
|
<ul class="ul2" v-for="(item,index) in ulList2" :key="index+'ul2'">
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>车型：</p>
|
||||||
|
<uni-data-select v-model="item.cxValue" :localdata="cxList"
|
||||||
|
@change="cxChange"></uni-data-select>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required">*</span>数量：</p>
|
||||||
|
<uni-number-box @change="numChange" v-model="item.numValue" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>装卸方式：</p>
|
||||||
|
<uni-data-select v-model="item.fsValue" :localdata="fsList"
|
||||||
|
@change="fsChange"></uni-data-select>
|
||||||
|
</li>
|
||||||
|
<li class="widthLi">
|
||||||
|
<p class="liTitle">备注：</p>
|
||||||
|
<uni-easyinput type="textarea" autoHeight v-model="item.notes" placeholder="请输入任务描述(200字以内)"
|
||||||
|
maxlength="200"></uni-easyinput>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 翻仓信息 -->
|
||||||
|
<template v-if="active == 1">
|
||||||
|
<view v-for="(item,index) in fcUlList" :key="index + 'fc'">
|
||||||
|
<view class="ulTop"><span @click="fcAdd">添加</span><van-icon name="arrow-down" /></view>
|
||||||
|
<ul class="fcUl">
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>翻仓类型：</p>
|
||||||
|
<uni-data-select v-model="item.fcValue" :localdata="fcList"
|
||||||
|
@change="fcChange"></uni-data-select>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'fc2'">
|
||||||
|
<view class="ulTop"><span @click="fcAdd2(index)">添加</span></span><span v-if="index2 > 0"
|
||||||
|
@click="delFc(index,index2)">删除</span><van-icon name="arrow-down" /></view>
|
||||||
|
<ul class="ul2 fcUl2">
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>翻舱起点位置：</p>
|
||||||
|
<uni-easyinput v-model="item2.qdValue" focus placeholder="请输入翻舱起点位置"></uni-easyinput>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>翻舱终点位置：</p>
|
||||||
|
<uni-easyinput v-model="item2.zdValue" focus placeholder="请输入翻舱终点位置"></uni-easyinput>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>工班：</p>
|
||||||
|
<uni-data-select v-model="item2.gbValue" :localdata="gbList"
|
||||||
|
@change="gbChange"></uni-data-select>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
||||||
|
<uni-datetime-picker v-model="item2.datetime" type="datetimerange" rangeSeparator="-" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>数量：</p>
|
||||||
|
<uni-number-box v-model="item2.numValue" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>体积：</p>
|
||||||
|
<uni-number-box v-model="item2.tjValue" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>重量：</p>
|
||||||
|
<uni-number-box v-model="item2.zlValue" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 其他信息 -->
|
||||||
|
<template v-if="active == 2">
|
||||||
|
<view class="otherWork">
|
||||||
|
<p class="title">辅助作业</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>技术工人：</p>
|
||||||
|
<uni-number-box v-model="otherObj.jsWorker" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>普通工人：</p>
|
||||||
|
<uni-number-box v-model="otherObj.ptWorker" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
||||||
|
<uni-datetime-picker v-model="otherObj.workTime" type="datetimerange" rangeSeparator="-" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>重量：</p>
|
||||||
|
<uni-number-box v-model="otherObj.zlValue" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle"><span class="required">*</span>体积：</p>
|
||||||
|
<uni-number-box v-model="otherObj.tjValue" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle">描述：</p>
|
||||||
|
<uni-easyinput type="textarea" autoHeight v-model="otherObj.describe"
|
||||||
|
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="title">待工作业</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle">描述：</p>
|
||||||
|
<uni-easyinput type="textarea" autoHeight v-model="otherObj.dgWork"
|
||||||
|
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="title">作业备注</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p class="liTitle">描述：</p>
|
||||||
|
<uni-easyinput type="textarea" autoHeight v-model="otherObj.notes"
|
||||||
|
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="info" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" @click="next" v-if="active < 2">下一步</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
active: 0,
|
||||||
|
stepList: [{
|
||||||
|
title: '工班信息'
|
||||||
|
}, {
|
||||||
|
title: '翻舱信息'
|
||||||
|
}, {
|
||||||
|
title: '其他信息'
|
||||||
|
}],
|
||||||
|
|
||||||
|
// 工班信息
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: "航次0",
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "航次1",
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "航次2",
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 装卸类型下拉框
|
||||||
|
zxValue: "",
|
||||||
|
zxList: [{
|
||||||
|
value: "装卸类型0",
|
||||||
|
text: "装卸类型0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "装卸类型1",
|
||||||
|
text: "装卸类型1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "装卸类型2",
|
||||||
|
text: "装卸类型2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
ulList1: [{
|
||||||
|
gbValue: "",
|
||||||
|
dataTime: ""
|
||||||
|
}],
|
||||||
|
// 工班下拉框
|
||||||
|
gbList: [{
|
||||||
|
value: "工班0",
|
||||||
|
text: "工班0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "工班1",
|
||||||
|
text: "工班1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "工班2",
|
||||||
|
text: "工班2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
ulList2: [{
|
||||||
|
cxValue: "",
|
||||||
|
numValue: 0,
|
||||||
|
fsValue: "",
|
||||||
|
notes: "",
|
||||||
|
}],
|
||||||
|
// 车型下拉
|
||||||
|
cxList: [{
|
||||||
|
value: "车型0",
|
||||||
|
text: "车型0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "车型1",
|
||||||
|
text: "车型1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "车型2",
|
||||||
|
text: "车型2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 装卸方式下拉
|
||||||
|
fsList: [{
|
||||||
|
value: "装卸方式0",
|
||||||
|
text: "装卸方式0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "装卸方式1",
|
||||||
|
text: "装卸方式1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "装卸方式2",
|
||||||
|
text: "装卸方式2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// 翻仓信息
|
||||||
|
// 翻仓类型下拉
|
||||||
|
fcList: [{
|
||||||
|
value: "翻仓类型0",
|
||||||
|
text: "翻仓类型0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "翻仓类型1",
|
||||||
|
text: "翻仓类型1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "翻仓类型2",
|
||||||
|
text: "翻仓类型2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
fcUlList: [{
|
||||||
|
fcValue: "",
|
||||||
|
fcUlList2: [{
|
||||||
|
qdValue: "",
|
||||||
|
zdValue: "",
|
||||||
|
gbValue: "",
|
||||||
|
dataTime: "",
|
||||||
|
numValue: 0,
|
||||||
|
tjValue: 0,
|
||||||
|
zlValue: 0
|
||||||
|
}],
|
||||||
|
}],
|
||||||
|
|
||||||
|
// 其他信息
|
||||||
|
otherObj: {
|
||||||
|
jsWorker: 0,
|
||||||
|
ptworker: 0,
|
||||||
|
workTime: "",
|
||||||
|
zlValue: 0,
|
||||||
|
tjValue: 0,
|
||||||
|
describe: "",
|
||||||
|
dgWork: "",
|
||||||
|
notes: "",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 工班信息相关
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 装卸类型下拉
|
||||||
|
zxChange(e) {
|
||||||
|
this.zxValue = e;
|
||||||
|
},
|
||||||
|
// 点击第一个添加
|
||||||
|
ulAdd1() {
|
||||||
|
this.ulList1.push({
|
||||||
|
gbValue: "",
|
||||||
|
dataTime: ""
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 工班下拉
|
||||||
|
gbChange(e) {},
|
||||||
|
// 作业时间
|
||||||
|
changeLog(e) {},
|
||||||
|
// 点击第二个添加
|
||||||
|
ulAdd2() {
|
||||||
|
this.ulList2.push({
|
||||||
|
cxValue: "",
|
||||||
|
numValue: 0,
|
||||||
|
fsValue: "",
|
||||||
|
notes: "",
|
||||||
|
})
|
||||||
|
},
|
||||||
|
del() {
|
||||||
|
this.ulList2.splice(0, 1)
|
||||||
|
},
|
||||||
|
// 车型下拉
|
||||||
|
cxChange(e) {},
|
||||||
|
// 数量
|
||||||
|
numChange(val) {},
|
||||||
|
// 装卸方式下拉
|
||||||
|
fsChange(e) {},
|
||||||
|
|
||||||
|
// 翻仓信息
|
||||||
|
// 翻仓类型下拉
|
||||||
|
fcChange(e) {},
|
||||||
|
// 翻仓add
|
||||||
|
fcAdd() {
|
||||||
|
this.fcUlList.push({
|
||||||
|
fcValue: "",
|
||||||
|
fcUlList2: [{
|
||||||
|
qdValue: "",
|
||||||
|
zdValue: "",
|
||||||
|
gbValue: "",
|
||||||
|
dataTime: "",
|
||||||
|
numValue: 12,
|
||||||
|
tjValue: 12,
|
||||||
|
zlValue: 12
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fcAdd2(index) {
|
||||||
|
this.fcUlList[index].fcUlList2.push({
|
||||||
|
qdValue: "",
|
||||||
|
zdValue: "",
|
||||||
|
gbValue: "",
|
||||||
|
dataTime: "",
|
||||||
|
numValue: 0,
|
||||||
|
tjValue: 0,
|
||||||
|
zlValue: 0
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 翻仓删除
|
||||||
|
delFc(index, index2) {
|
||||||
|
this.fcUlList[index].fcUlList2.splice(index2, 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/mixWork'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {},
|
||||||
|
// 下一步
|
||||||
|
next() {
|
||||||
|
this.active = this.active + 1
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.shiftAdd {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
/deep/.uni-steps__row-title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.uni-icons {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.uni-steps__row-container {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ulTop {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: right;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #2979ff;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fcUl {
|
||||||
|
li {
|
||||||
|
border: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
.liTitle {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fcUl2 {
|
||||||
|
.liTitle {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liTitle {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.widthLi {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul2 {
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
border: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.otherWork {
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-left: 5px solid #2979ff;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:last-child {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,300 @@
|
||||||
|
<template>
|
||||||
|
<view class="shiftDetails">
|
||||||
|
<view class="container">
|
||||||
|
<custom-tabs type="c1" :value="value" @change="changeIndex">
|
||||||
|
<custom-tab-pane label="工班信息" name="c1_1">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>航次：</p>
|
||||||
|
<span>JK97065578</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>外贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>装卸类型：</p>
|
||||||
|
<span> 装货</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>工班：</p>
|
||||||
|
<span> 一工班</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>作业时间：</p>
|
||||||
|
<span> 2023/06/06 12:00 - 023/06/06 13:00</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>车型：</p>
|
||||||
|
<span>轿车</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>数量：</p>
|
||||||
|
<span>100</span>
|
||||||
|
</li>
|
||||||
|
<li class="wLi">
|
||||||
|
<p>备注：</p>
|
||||||
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
||||||
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
||||||
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
|
||||||
|
nascetur ridiculus mus. Nam</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>车型：</p>
|
||||||
|
<span>备件</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>数量：</p>
|
||||||
|
<span>100</span>
|
||||||
|
</li>
|
||||||
|
<li class="wLi">
|
||||||
|
<p>备注：</p>
|
||||||
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
||||||
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
||||||
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
|
||||||
|
nascetur ridiculus mus. Nam</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>工班：</p>
|
||||||
|
<span> 二工班</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>作业时间：</p>
|
||||||
|
<span> 2023/06/06 12:00 - 023/06/06 13:00</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>车型：</p>
|
||||||
|
<span>轿车</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>数量：</p>
|
||||||
|
<span>100</span>
|
||||||
|
</li>
|
||||||
|
<li class="wLi">
|
||||||
|
<p>备注：</p>
|
||||||
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
||||||
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
||||||
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
|
||||||
|
nascetur ridiculus mus. Nam</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</custom-tab-pane>
|
||||||
|
<custom-tab-pane label="翻仓信息" name="c1_2">
|
||||||
|
<view class="fcInfo" v-for="(item,index) in fcList" :key="index + 'fc'">
|
||||||
|
<view class="fcBox">
|
||||||
|
<p>翻舱类型：</p>
|
||||||
|
<span>舱内翻</span>
|
||||||
|
</view>
|
||||||
|
<ul v-for="(item2,index2) in item.infoList" :key="index2 + 'info'">
|
||||||
|
<li>
|
||||||
|
<p>航次：</p>
|
||||||
|
<span>JK97065578</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>翻舱起点：</p>
|
||||||
|
<span>D5H4</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>翻舱终点：</p>
|
||||||
|
<span>舱外</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>作业时间：</p>
|
||||||
|
<span>2023/06/06 12:00 - 023/06/06 13:00</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>车型：</p>
|
||||||
|
<span>轿车</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>数量：</p>
|
||||||
|
<span>100</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>体积：</p>
|
||||||
|
<span>30</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>重量：</p>
|
||||||
|
<span>50</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</custom-tab-pane>
|
||||||
|
<custom-tab-pane label="其他信息" name="c1_3">
|
||||||
|
<view class="otherInfo">
|
||||||
|
<p class="title">辅助作业</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>技术工人：</p>
|
||||||
|
<span>10</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>普通工人：</p>
|
||||||
|
<span>30</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>作业时间：</p>
|
||||||
|
<span>2023/06/06 12:00 - 023/06/06 13:00</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>重量：</p>
|
||||||
|
<span>50</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>体积：</p>
|
||||||
|
<span>30</span>
|
||||||
|
</li>
|
||||||
|
<li class="wLi">
|
||||||
|
<p>描述：</p>
|
||||||
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
||||||
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
||||||
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
|
||||||
|
montes,nascetur ridiculus mus. Nam</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="title">待工作业</p>
|
||||||
|
<ul>
|
||||||
|
<li class="wLi">
|
||||||
|
<p>描述：</p>
|
||||||
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
||||||
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
||||||
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
|
||||||
|
montes,nascetur ridiculus mus. Nam</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="title">作业备注</p>
|
||||||
|
<ul>
|
||||||
|
<li class="wLi">
|
||||||
|
<p>描述：</p>
|
||||||
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
||||||
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
||||||
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
|
||||||
|
montes,nascetur ridiculus mus. Nam</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</custom-tab-pane>
|
||||||
|
</custom-tabs>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default">删除</van-button>
|
||||||
|
<van-button type="info">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: 2,
|
||||||
|
fcList: [{
|
||||||
|
infoList: [{}, {}]
|
||||||
|
}, {
|
||||||
|
infoList: [{}]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeIndex(e) {
|
||||||
|
// console.log('选中:', e)
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/mixWork'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.shiftDetails {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.fcInfo {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
|
||||||
|
.fcBox {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 20px;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
border-bottom: 1px dashed #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.otherInfo {
|
||||||
|
.title {
|
||||||
|
margin: 20px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-left: 5px solid #2979ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 45%;
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 20px;
|
||||||
|
line-height: 35px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wLi {
|
||||||
|
width: calc(100% - 150px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<template>
|
||||||
|
<view class="shipInfo">
|
||||||
|
<view class="container">
|
||||||
|
<view class="ul">
|
||||||
|
<view class="li">船名：安吉11</view>
|
||||||
|
<view class="li">总重：100</view>
|
||||||
|
<view class="li">净重：50</view>
|
||||||
|
<view class="li">长度：30</view>
|
||||||
|
<view class="li">宽度：20</view>
|
||||||
|
<view class="li">空载吃水：空载吃水</view>
|
||||||
|
<view class="li">重载吃水：重载吃水</view>
|
||||||
|
<view class="li">舱口高度：舱口高度</view>
|
||||||
|
<view class="li">最低作业潮水：最低作业潮水</view>
|
||||||
|
<view class="li">驾驶台位置：驾驶台位置</view>
|
||||||
|
<view class="li">跳板左：跳板左</view>
|
||||||
|
<view class="li">跳板后左：跳板后左</view>
|
||||||
|
<view class="li">跳板中右：跳板中右</view>
|
||||||
|
<view class="li">跳板前右：跳板前右</view>
|
||||||
|
<view class="li">跳板后右 ：跳板后右</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.shipInfo {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
.ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
.li {
|
||||||
|
min-width: 45%;
|
||||||
|
margin: 10px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<template>
|
||||||
|
<view class="shipPlan">
|
||||||
|
<view class="container">
|
||||||
|
<p class="title">基本信息</p>
|
||||||
|
<view class="ul">
|
||||||
|
<view class="li wLi">船名：安吉11</view>
|
||||||
|
<view class="li">进口航次：进口航次11</view>
|
||||||
|
<view class="li">贸易类型：贸易类型11</view>
|
||||||
|
<view class="li">航线：航线11</view>
|
||||||
|
<view class="li">船公司：船公司11</view>
|
||||||
|
<view class="li wLi">船代：船代11</view>
|
||||||
|
<view class="li">出口航次：出口航次11</view>
|
||||||
|
<view class="li">贸易类型：贸易类型11</view>
|
||||||
|
<view class="li">航线：航线11</view>
|
||||||
|
<view class="li">船公司：船公司11</view>
|
||||||
|
<view class="li wLi">船代：船代11</view>
|
||||||
|
</view>
|
||||||
|
<p class="title">船期信息</p>
|
||||||
|
<view class="ul">
|
||||||
|
<view class="li">计划到港时间：2023/11/11 08:00:00</view>
|
||||||
|
<view class="li">计划离港时间：2023/11/11 08:00:00</view>
|
||||||
|
<view class="li">计划靠泊时间：2023/11/11 08:00:00</view>
|
||||||
|
<view class="li">计划离泊时间：2023/11/11 08:00:00</view>
|
||||||
|
<view class="li">确报时间：2023/11/11 08:00:00</view>
|
||||||
|
<view class="li">船期状态：船期状态</view>
|
||||||
|
<view class="li">靠泊状态：靠泊状态</view>
|
||||||
|
<view class="li">计划泊位：计划泊位</view>
|
||||||
|
</view>
|
||||||
|
<p class="title">计划信息</p>
|
||||||
|
<view class="ul">
|
||||||
|
<view class="li">计划开工时间：2023/11/11 08:00:00</view>
|
||||||
|
<view class="li">计划完工时间：2023/11/11 08:00:00</view>
|
||||||
|
<view class="li">品牌：品牌</view>
|
||||||
|
<view class="li">计划数量：100</view>
|
||||||
|
<view class="li">工班人数：50</view>
|
||||||
|
<view class="li">计划组数：100</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.shipPlan {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding-left: 10px;
|
||||||
|
border-left: 5px solid #2979ff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.li {
|
||||||
|
min-width: 45%;
|
||||||
|
margin: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wLi {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<view class="supply">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
|
||||||
|
<view class="title">类型：{{item.val1}}</view>
|
||||||
|
<p>状态：{{item.val2}}</p>
|
||||||
|
<p>航次：{{item.val3}}</p>
|
||||||
|
<p>进出口：{{item.val4}}</p>
|
||||||
|
<p>贸易类型：{{item.val5}}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
val1: "供水",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "JK9868548",
|
||||||
|
val4: "进口",
|
||||||
|
val5: "外贸",
|
||||||
|
}, {
|
||||||
|
val1: "供水",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "JK9868548",
|
||||||
|
val4: "进口",
|
||||||
|
val5: "外贸",
|
||||||
|
}, {
|
||||||
|
val1: "供水",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "JK9868548",
|
||||||
|
val4: "进口",
|
||||||
|
val5: "外贸",
|
||||||
|
}, ]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/supplyAdd?params=${params}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.supply {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
<template>
|
||||||
|
<view class="supplyAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>泊位：</p>
|
||||||
|
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>1泊位</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>供给类型：</p>
|
||||||
|
<uni-data-select v-model="gjValue" :localdata="gjList" @change="gjChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>供给类型1</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>供给量：</p>
|
||||||
|
<uni-number-box v-model="gjNum" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>10</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>日期：</p>
|
||||||
|
<uni-datetime-picker v-model="dateTime" type="date" :clear-icon="false"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 船舶净吨
|
||||||
|
zlShip: 100,
|
||||||
|
// 泊位下拉框
|
||||||
|
bwValue: "",
|
||||||
|
bwList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "泊位0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "泊位1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "泊位2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 供给类型
|
||||||
|
gjValue: "",
|
||||||
|
gjList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "供给类型0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "供给类型1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "供给类型2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
gjNum: 10,
|
||||||
|
// 日期
|
||||||
|
dateTime: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 泊位下拉
|
||||||
|
bwChange(e) {
|
||||||
|
this.bwValue = e;
|
||||||
|
},
|
||||||
|
// 攻击类型下拉
|
||||||
|
gjChange(e) {
|
||||||
|
this.bwValue = e;
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/supply'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/supply'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/supplyAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.supplyAdd {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,217 @@
|
||||||
|
<template>
|
||||||
|
<view class="untieAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>船舶净吨：</p>
|
||||||
|
<uni-number-box v-model="zlShip" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>100</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>泊位：</p>
|
||||||
|
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>1泊位</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>系缆时间：</p>
|
||||||
|
<uni-datetime-picker v-model="xlTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>解缆时间：</p>
|
||||||
|
<uni-datetime-picker v-model="jlTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>移泊时间：</p>
|
||||||
|
<uni-datetime-picker v-model="ybTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>停泊时间：</p>
|
||||||
|
<uni-datetime-picker v-model="tbTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 船舶净吨
|
||||||
|
zlShip: 100,
|
||||||
|
// 泊位下拉框
|
||||||
|
bwValue: "",
|
||||||
|
bwList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "泊位0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "泊位1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "泊位2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 系缆时间
|
||||||
|
xlTime: "",
|
||||||
|
// 解缆时间
|
||||||
|
jlTime: "",
|
||||||
|
// 移泊时间
|
||||||
|
ybTime: "",
|
||||||
|
// 停泊时间
|
||||||
|
tbTime: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 泊位下拉
|
||||||
|
bwChange(e) {
|
||||||
|
this.bwValue = e;
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/untieCord'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/untieCord'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/untieAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.untieAdd {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<template>
|
||||||
|
<view class="untieCord">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
|
||||||
|
<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>
|
||||||
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
val1: "JK9795799",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "外贸",
|
||||||
|
val5: "一泊位",
|
||||||
|
val6: "05/30 8:00",
|
||||||
|
}, {
|
||||||
|
val1: "JK9795799",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "外贸",
|
||||||
|
val5: "一泊位",
|
||||||
|
val6: "05/30 8:00",
|
||||||
|
}, {
|
||||||
|
val1: "JK9795799",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "外贸",
|
||||||
|
val5: "一泊位",
|
||||||
|
val6: "05/30 8:00",
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/untieAdd?params=${params}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.untieCord {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<view class="workAssign">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
|
||||||
|
<view class="title">航次：{{item.val1}}</view>
|
||||||
|
<p>状态：{{item.val2}}</p>
|
||||||
|
<p>进出口：{{item.val3}}</p>
|
||||||
|
<p>贸易类型：{{item.val4}}</p>
|
||||||
|
<p>作业时间：{{item.val5}}</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
infoList: [{
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30 8:00",
|
||||||
|
}, {
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30 8:00",
|
||||||
|
}, {
|
||||||
|
val1: "CK124324",
|
||||||
|
val2: "待上传",
|
||||||
|
val3: "进口",
|
||||||
|
val4: "内贸",
|
||||||
|
val5: "05/30 8:00",
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add(state) {
|
||||||
|
const obj = {
|
||||||
|
state: state,
|
||||||
|
}
|
||||||
|
const params = encodeURIComponent(JSON.stringify(obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/workAssignAdd?params=${params}`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.workAssign {
|
||||||
|
.container {
|
||||||
|
padding: 30px 20px;
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,260 @@
|
||||||
|
<template>
|
||||||
|
<view class="workAssignAdd">
|
||||||
|
<view class="container">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<p>船名：</p>
|
||||||
|
<span>快乐号</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||||
|
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>CK98796</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>进出口：</p>
|
||||||
|
<span>进口</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<span>内贸</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>泊位：</p>
|
||||||
|
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>1泊位</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>工班：</p>
|
||||||
|
<uni-data-select v-model="gbValue" :localdata="gbList" @change="gbChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>工班1</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>人数：</p>
|
||||||
|
<uni-number-box v-model="peopleNum" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>100</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>装卸类型：</p>
|
||||||
|
<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange"
|
||||||
|
v-if="obj.state != 'look'"></uni-data-select>
|
||||||
|
<span v-else>装卸类型1</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>车辆数量：</p>
|
||||||
|
<uni-number-box v-model="carNum" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>100</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>备件数量：</p>
|
||||||
|
<uni-number-box v-model="partsNum" v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>100</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p><span class="required" v-if="obj.state != 'look'">*</span>作业时间：</p>
|
||||||
|
<uni-datetime-picker v-model="workTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
|
||||||
|
v-if="obj.state != 'look'" />
|
||||||
|
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<view class="btnList">
|
||||||
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
|
<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||||
|
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
obj: {},
|
||||||
|
// 航次下拉框
|
||||||
|
hcValue: "",
|
||||||
|
hcList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "航次0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "航次1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "航次2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 船舶净吨
|
||||||
|
zlShip: 100,
|
||||||
|
// 泊位下拉框
|
||||||
|
bwValue: "",
|
||||||
|
bwList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "泊位0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "泊位1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "泊位2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 工班下拉框
|
||||||
|
gbValue: "",
|
||||||
|
gbList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "工班0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "工班1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "工班2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 人数
|
||||||
|
peopleNum: 0,
|
||||||
|
// 装卸类型下拉框
|
||||||
|
zxValue: "",
|
||||||
|
zxList: [{
|
||||||
|
value: 0,
|
||||||
|
text: "装卸类型0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
text: "装卸类型1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
text: "装卸类型2"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 车辆数量
|
||||||
|
carNum: 0,
|
||||||
|
// 备件数量
|
||||||
|
partsNum: 0,
|
||||||
|
// 作业时间
|
||||||
|
workTime: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if ('params' in options) {
|
||||||
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
|
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 航次下拉
|
||||||
|
hcChange(e) {
|
||||||
|
this.hcValue = e;
|
||||||
|
},
|
||||||
|
// 泊位下拉
|
||||||
|
bwChange(e) {
|
||||||
|
this.bwValue = e;
|
||||||
|
},
|
||||||
|
// 工班下拉
|
||||||
|
gbChange(e) {
|
||||||
|
this.gbValue = e;
|
||||||
|
},
|
||||||
|
// 装卸类型下拉
|
||||||
|
zxChange(e) {
|
||||||
|
this.zxValue = e;
|
||||||
|
},
|
||||||
|
// 取消
|
||||||
|
cancel() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/workAssign'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 保存
|
||||||
|
save() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shipWork/workAssign'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
toGo(state) {
|
||||||
|
this.obj.state = state;
|
||||||
|
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/workAssignAdd?params=${params}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.workAssignAdd {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-width: 85px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnList {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .van-button {
|
||||||
|
margin: 30px 20px;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
## 1.0.8（2022-04-21）
|
||||||
|
1. 优化插件，避免多个组件互相影响。
|
||||||
|
## 1.0.7（2022-04-20）
|
||||||
|
1. 优化
|
||||||
|
## 1.0.6（2022-04-20）
|
||||||
|
1. 修改使用多个该组件存在的BUG
|
||||||
|
## 1.0.5（2022-03-24）
|
||||||
|
1. 修复设置animation参数无效的BUG
|
||||||
|
2. 修复有动画切换的显示BUG
|
||||||
|
## 1.0.4（2022-03-08）
|
||||||
|
1. 增加defaultTextStyle字段，方便直接配置未选中的tab样式
|
||||||
|
2. 增加activeTextStyle字段，方便直接配置选中后tab的样式
|
||||||
|
3. 增加activeLineStyle字段，方便直接配置选中后下划线的样式
|
||||||
|
## 1.0.3（2022-03-07）
|
||||||
|
1. 修改vue2模式下 tablist is not defined 报错的bug
|
||||||
|
## 1.0.2（2022-03-02）
|
||||||
|
1. 新增tabs切换那一栏固定功能，类似吸顶效果
|
||||||
|
2. 新增监听label变化，label值可动态改变
|
||||||
|
3. 新增不显示的页面进行隐藏，防止某页面内容过多撑开其他页面
|
||||||
|
4. h5隐藏滚动条
|
||||||
|
## 1.0.0（2021-12-13）
|
||||||
|
1.0.0
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<view class="tab-pane">
|
||||||
|
<template v-if="show">
|
||||||
|
<slot></slot>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<view style="width: 750rpx;height: 0;"></view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
// // #ifdef VUE3
|
||||||
|
// import { ref, watch } from 'vue';
|
||||||
|
// const data_props = defineProps({
|
||||||
|
// label: [String, Number],
|
||||||
|
// name: [String, Number]
|
||||||
|
// });
|
||||||
|
// const show = ref(false);
|
||||||
|
// let timer = 0;
|
||||||
|
// const watchTabKey = `watchTabValue_${data_props.name.split('_')[0]}`;
|
||||||
|
// console.log(watchTabKey)
|
||||||
|
// watch(() => data_props.label, (newValue, oldValue) => {
|
||||||
|
// uni.$emit(watchTabKey, { newValue: newValue, oldValue: oldValue, name: data_props.name });
|
||||||
|
// }, { immediate: true });
|
||||||
|
// uni.$on('putChange', item => {
|
||||||
|
// if (timer) clearTimeout(timer);
|
||||||
|
// show.value = true;
|
||||||
|
// timer = setTimeout(() => {
|
||||||
|
// show.value = data_props.name == item.name;
|
||||||
|
// }, item.duration)
|
||||||
|
// })
|
||||||
|
// // #endif
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['label', 'name'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timer: 0,
|
||||||
|
show: false,
|
||||||
|
watchTabKey: `watchTabValue_${this.name.split('_')[0]}`,
|
||||||
|
putChangeKey: `putChange_${this.name.split('_')[0]}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
uni.$on(this.putChangeKey, item => {
|
||||||
|
if (this.timer) clearTimeout(this.timer);
|
||||||
|
this.show = true;
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.show = this.name == item.name;
|
||||||
|
}, item.duration)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
label: {
|
||||||
|
deep: true,
|
||||||
|
handler(newValue, oldValue) {
|
||||||
|
uni.$emit(this.watchTabKey, { newValue: newValue, oldValue: oldValue, name: this.name });
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tab-pane {
|
||||||
|
width: 750rpx;
|
||||||
|
// #ifndef APP-PLUS-NVUE
|
||||||
|
flex-shrink: 0;
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,221 @@
|
||||||
|
<template>
|
||||||
|
<view :class="['tab',{'tab-fixed':fixed}]">
|
||||||
|
<scroll-view :class="['tab-bar',{'tab-bar-center':tabCenter}]" scroll-x="true" :scroll-into-view="scrollId" scroll-with-animation>
|
||||||
|
<view v-for="(item,index) in tabList" class="tab-bar-item" :class="{'active':tabIndex==index}" :id="`tab_${index}`" :style="[{'padding':`0 ${tabSpacing}rpx`},tabIndex==index?activeTextStyle:defaultTextStyle]" :key="index" @click="putChange(item.name,index);tabChange(index)">
|
||||||
|
<text class="txt">{{item.label}}</text>
|
||||||
|
<text class="active-line" v-if="tabIndex==index" :style="[activeLineStyle]"></text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="tab-cont" :style="{'transform':`translateX(${translateX}%)`,'transition':`transform ${d/1000}s ease-in-out`}">
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "tabs",
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: [String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
value: { // 默认选中项
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
tabSpacing: { // tabbar的间距
|
||||||
|
type: [Number, String],
|
||||||
|
default: 20
|
||||||
|
},
|
||||||
|
animation: { // 切换动画
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
duration: { // 滑动动画时长 单位毫秒
|
||||||
|
type: [Number, String],
|
||||||
|
default: 200
|
||||||
|
},
|
||||||
|
tabCenter: { // tabbar是否居中
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
fixed: { // 该组件是否固定位置
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
defaultTextStyle: { // 未选中文字的样式
|
||||||
|
type: [Object]
|
||||||
|
},
|
||||||
|
activeTextStyle: { // 选中后文字的样式
|
||||||
|
type: [Object]
|
||||||
|
},
|
||||||
|
activeLineStyle: { // 选中下划线的样式
|
||||||
|
type: [Object]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabList: [],
|
||||||
|
tabIndex: 0,
|
||||||
|
d: this.duration,
|
||||||
|
translateX: 0,
|
||||||
|
scrollId: 'tab_0',
|
||||||
|
top: 0,
|
||||||
|
timer: 0,
|
||||||
|
timer2: 0,
|
||||||
|
watchTabValueKey: `watchTabValue_${this.type}`,
|
||||||
|
putChangeKey: `putChange_${this.type}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
uni.$off(this.watchTabValueKey);
|
||||||
|
uni.$on(this.watchTabValueKey, o => {
|
||||||
|
if (o.name.split('_')[0] != this.type) return false;
|
||||||
|
if (typeof o.oldValue == 'undefined') {
|
||||||
|
this.tabList.push({
|
||||||
|
label: o.newValue,
|
||||||
|
name: o.name
|
||||||
|
});
|
||||||
|
if (this.timer) clearTimeout(this.timer);
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
if (this.tabList[this.value]) this.putChange(this.tabList[this.value].name);
|
||||||
|
}, 5)
|
||||||
|
} else this.tabList.forEach(item => {
|
||||||
|
if (item.label == o.oldValue && item.name == o.name) item.label = o.newValue;
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
this.tabChange(val);
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
handler(val) {
|
||||||
|
if (!val) this.d = 0;
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabChange(index) {
|
||||||
|
if (this.tabIndex == index) return false;
|
||||||
|
this.tabIndex = index;
|
||||||
|
this.translateX = -100 * index;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollId = `tab_${index-1}`;
|
||||||
|
})
|
||||||
|
if (this.timer2) clearTimeout(this.timer2);
|
||||||
|
this.timer2 = setTimeout(() => {
|
||||||
|
if (this.tabList[index]) this.$emit('change', {
|
||||||
|
value: index,
|
||||||
|
...this.tabList[index]
|
||||||
|
});
|
||||||
|
}, 20)
|
||||||
|
},
|
||||||
|
putChange(name, index) {
|
||||||
|
if (this.tabIndex == index) return false;
|
||||||
|
uni.$emit(this.putChangeKey, {
|
||||||
|
name: name,
|
||||||
|
duration: this.d,
|
||||||
|
type: index > this.tabIndex ? 1 : 2
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* #ifndef APP-PLUS-NVUE */
|
||||||
|
>>> ::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.tab-bar.tab-bar-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.tab {
|
||||||
|
// #ifndef APP-PLUS-NVUE
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
.tab-bar {
|
||||||
|
position: relative;
|
||||||
|
height: 90rpx;
|
||||||
|
// #ifndef APP-PLUS-NVUE
|
||||||
|
white-space: nowrap;
|
||||||
|
// #endif
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
// #ifndef APP-PLUS-NVUE
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 2rpx;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
&-item {
|
||||||
|
// #ifndef APP-PLUS-NVUE
|
||||||
|
display: inline-block;
|
||||||
|
// #endif
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #222;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
position: relative;
|
||||||
|
color: #007AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
// #ifndef APP-PLUS-NVUE
|
||||||
|
.active-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 80rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
background: #007AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-fixed {
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
.tab-bar {
|
||||||
|
position: sticky;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 2022;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-cont {
|
||||||
|
// #ifndef APP-PLUS-NVUE
|
||||||
|
display: flex;
|
||||||
|
// #endif
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
{
|
||||||
|
"id": "custom-tabs",
|
||||||
|
"displayName": "Tabs标签页 灵活配置 多端兼容（暂停维护谨慎使用，建议使用uv-tabs）",
|
||||||
|
"version": "1.0.8",
|
||||||
|
"description": "在做项目的过程中用到了tab切换，本想着去插件市场找一个直接现用，后面发现找到的tab切换并不是我想要的那种使用方式，于是我结合了element-ui中Tabs标签页的方式写了该组件...",
|
||||||
|
"keywords": [
|
||||||
|
"tabs",
|
||||||
|
"tab",
|
||||||
|
"tabs标签页",
|
||||||
|
"tab切换",
|
||||||
|
"标签页"
|
||||||
|
],
|
||||||
|
"repository": "https://gitee.com/my_dear_li_pan/my-uni-modules.git",
|
||||||
|
"engines": {
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"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": "n"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "u",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "n",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
- <a href="#c1" title="概要">概要</a>
|
||||||
|
- <a href="#c2" title="Tips">Tips</a>
|
||||||
|
- <a href="#c3" title="支持的平台">支持的平台</a>
|
||||||
|
- <a href="#c4" title="使用示例">使用示例</a>
|
||||||
|
- <a href="#c5" title="Tabs Attributes">Tabs Attributes</a>
|
||||||
|
- <a href="#c6" title="Tabs Events">Tabs Events</a>
|
||||||
|
- <a href="#c7" title="Tab-pane Attributes">Tab-pane Attributes</a>
|
||||||
|
- <a href="#c8" title="关注我，不迷路">关注我，不迷路</a>
|
||||||
|
|
||||||
|
<div id="c1"></div>
|
||||||
|
|
||||||
|
#### 概要
|
||||||
|
|
||||||
|
在做项目的过程中用到了tab切换，本想着去插件市场找一个直接现用，后面发现找到的tab切换并不是我想要的那种使用方式，于是我结合了element-ui中Tabs标签页的方式写了该组件。
|
||||||
|
|
||||||
|
|
||||||
|
<div id="c2"></div>
|
||||||
|
|
||||||
|
#### Tips
|
||||||
|
|
||||||
|
1. 该插件使用的预编译，需要自行安装scss/sass插件。
|
||||||
|
2. 该插件同时兼容了VUE2和VUE3，hbuilderX 最好是更新到较新版本。
|
||||||
|
3. 由于组件重构升级，老用户需要更新插件的，需要注意参数，根据下面提供的参数修改即可。
|
||||||
|
4. 遵循uni_modules规范插件。
|
||||||
|
5. 如果发现组件有bug或者不完善可以留言交流。
|
||||||
|
6. uniapp插件git地址：https://gitee.com/my_dear_li_pan/my-uni-modules.git
|
||||||
|
7. 个人博客地址：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
|
||||||
|
|
||||||
|
<div id="c3"></div>
|
||||||
|
|
||||||
|
#### 支持的平台
|
||||||
|
- H5、app-vue、微信小程序、百度小程序等小程序平台。
|
||||||
|
- 暂不支持nvue。
|
||||||
|
- cli脚手架项目是否可用，暂未测试。
|
||||||
|
|
||||||
|
<div id="c4"></div>
|
||||||
|
|
||||||
|
#### 使用示例
|
||||||
|
```
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<custom-tabs type="c1" :value="value" @change="changeIndex">
|
||||||
|
<custom-tab-pane label="标签一" name="c1_1">
|
||||||
|
<view style="height: 100px;">内容0</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
<view style="height: 100px;">内容1</view>
|
||||||
|
</custom-tab-pane>
|
||||||
|
<custom-tab-pane label="标签二" name="c1_2">内容2</custom-tab-pane>
|
||||||
|
<custom-tab-pane label="标签三3" name="c1_3">内容3</custom-tab-pane>
|
||||||
|
<custom-tab-pane label="标签四44" name="c1_4">内容4</custom-tab-pane>
|
||||||
|
<custom-tab-pane label="标签五555" name="c1_5">内容5</custom-tab-pane>
|
||||||
|
<custom-tab-pane label="标签六6666" name="c1_6">内容6</custom-tab-pane>
|
||||||
|
<custom-tab-pane label="标签七77777" name="c1_7">内容7</custom-tab-pane>
|
||||||
|
</custom-tabs>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
// #ifdef VUE3
|
||||||
|
import { reactive, ref, watch } from 'vue';
|
||||||
|
const value = ref(2);
|
||||||
|
|
||||||
|
function changeIndex(e) {
|
||||||
|
console.log('选中:', e)
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
// #ifdef VUE2
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeIndex(e) {
|
||||||
|
console.log('选中:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
<div id="c5"></div>
|
||||||
|
|
||||||
|
#### Tabs Attributes
|
||||||
|
|
||||||
|
参数|说明|类型|是否必填|可选值|默认值
|
||||||
|
-|-|-|-|-|-|
|
||||||
|
type|组件的唯一标识，如果有多个该组件，则值必须不同|string|是|-|-
|
||||||
|
value|选中选项的索引，从0开始|Number|否|-|0
|
||||||
|
animation|切换动画|Boolean|否|true/false|true
|
||||||
|
duration|切换动画的动画时长，单位ms|Number|否|-|200
|
||||||
|
tabSpacing|tab选项的左右间距，单位rpx|Number|否|-|40
|
||||||
|
tabCenter|tab选项是否居中显示|Boolean|否|true/false|false
|
||||||
|
fixed|tab选项固定|Boolean|否|true/false|false
|
||||||
|
defaultTextStyle|未选中tab选项的样式|Object|否|示例：```:defaultTextStyle="{color:'pink'}"```|-
|
||||||
|
activeTextStyle|选中后tab选项的样式|Object|否|示例：```:activeTextStyle="{color:'red','font-weight':700}"```|-
|
||||||
|
activeLineStyle|选中后tab选项下划线的样式|Object|否|示例：```:activeLineStyle="{'background-color':'red',height:'6rpx'}"```|-
|
||||||
|
|
||||||
|
<div id="c6"></div>
|
||||||
|
|
||||||
|
#### Tabs Events
|
||||||
|
事件名称|说明|回调参数
|
||||||
|
-|-|-|
|
||||||
|
change|tab 被选中时触发|被选中的标签tab实例
|
||||||
|
|
||||||
|
<div id="c7"></div>
|
||||||
|
|
||||||
|
#### Tab-pane Attributes
|
||||||
|
|
||||||
|
参数|说明|类型|是否必填|可选值|默认值
|
||||||
|
-|-|-|-|-|-|
|
||||||
|
label|选项卡标题|String|是|-|-
|
||||||
|
name|与选项卡绑定值 value 对应的标识符，表示选项卡别名。==注意：== 该值的格式必须和组件上的type配合使用，eg：type="c1"，name="c1_"+自定义值|String|是|-|该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'c1_1'
|
||||||
|
|
||||||
|
<div id="c8"></div>
|
||||||
|
|
||||||
|
**----- 别忘记点赞哟，您的肯定就是对我最大的支持 END -----**
|
||||||
|
|
||||||
|
#### 关注我，不迷路
|
||||||
|
|
||||||
|
如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。
|
||||||
|
|
||||||
|
更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
|
||||||
|
|
||||||
|
**个人作品展示：**
|
||||||
|
|
||||||
|
uniapp+vue3.2+unicloud开发微信小程序：**皮皮虎去水印**。
|
||||||
|
|
||||||
|
关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
## 1.1.1（2021-11-22）
|
||||||
|
- 修复 vue3中某些scss变量无法找到的问题
|
||||||
|
## 1.1.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-steps](https://uniapp.dcloud.io/component/uniui/uni-steps)
|
||||||
|
## 1.0.8（2021-05-12）
|
||||||
|
- 新增 项目示例地址
|
||||||
|
## 1.0.7（2021-05-06）
|
||||||
|
- 修复 uni-steps 横向布局时，多行文字高度不合理的 bug
|
||||||
|
## 1.0.6（2021-04-21）
|
||||||
|
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||||
|
## 1.0.5（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
|
||||||
|
## 1.0.4（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-steps">
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
||||||
|
<view v-for="(item,index) in options" :key="index"
|
||||||
|
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
||||||
|
<text :style="{color:index === active?activeColor:deactiveColor}"
|
||||||
|
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||||||
|
<text :style="{color: deactiveColor}"
|
||||||
|
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
|
||||||
|
v-for="(item,index) in options" :key="index">
|
||||||
|
<view
|
||||||
|
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
||||||
|
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
|
||||||
|
</view>
|
||||||
|
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
|
||||||
|
v-if="index === active">
|
||||||
|
<uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
|
||||||
|
:style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
|
||||||
|
<view
|
||||||
|
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
||||||
|
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Steps 步骤条
|
||||||
|
* @description 评分组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=34
|
||||||
|
* @property {Number} active 当前步骤
|
||||||
|
* @property {String} direction = [row|column] 当前步骤
|
||||||
|
* @value row 横向
|
||||||
|
* @value column 纵向
|
||||||
|
* @property {String} activeColor 选中状态的颜色
|
||||||
|
* @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'UniSteps',
|
||||||
|
props: {
|
||||||
|
direction: {
|
||||||
|
// 排列方向 row column
|
||||||
|
type: String,
|
||||||
|
default: 'row'
|
||||||
|
},
|
||||||
|
activeColor: {
|
||||||
|
// 激活状态颜色
|
||||||
|
type: String,
|
||||||
|
default: '#2979FF'
|
||||||
|
},
|
||||||
|
deactiveColor: {
|
||||||
|
// 未激活状态颜色
|
||||||
|
type: String,
|
||||||
|
default: '#B7BDC6'
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
// 当前步骤
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
activeIcon: {
|
||||||
|
// 当前步骤
|
||||||
|
type: String,
|
||||||
|
default: 'checkbox-filled'
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
} // 数据
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$uni-border-color:#EDEDED;
|
||||||
|
.uni-steps {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-text-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-text-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-text {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-text {
|
||||||
|
padding: 6px 0px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: $uni-border-color;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-title {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-title {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
width: 30px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-line-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
height: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-line-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-line {
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #B7BDC6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-line {
|
||||||
|
width: 1px;
|
||||||
|
background-color: #B7BDC6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-line--after {
|
||||||
|
transform: translateX(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-line--after {
|
||||||
|
flex: 1;
|
||||||
|
transform: translate(0px, 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-line--before {
|
||||||
|
transform: translateX(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-line--before {
|
||||||
|
height: 6px;
|
||||||
|
transform: translate(0px, -13px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-circle {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #B7BDC6;
|
||||||
|
margin: 0px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-circle {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #B7BDC6;
|
||||||
|
margin: 4px 0px 5px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__row-check {
|
||||||
|
margin: 0px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-steps__column-check {
|
||||||
|
height: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
margin: 2px 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
{
|
||||||
|
"id": "uni-steps",
|
||||||
|
"displayName": "uni-steps 步骤条",
|
||||||
|
"version": "1.1.1",
|
||||||
|
"description": "步骤条组件，提供横向和纵向两种布局格式。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"步骤条",
|
||||||
|
"时间轴"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [
|
||||||
|
"uni-scss",
|
||||||
|
"uni-icons"
|
||||||
|
],
|
||||||
|
"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 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Steps 步骤条
|
||||||
|
> **组件名：uni-steps**
|
||||||
|
> 代码块： `uSteps`
|
||||||
|
|
||||||
|
|
||||||
|
步骤条，常用于显示进度
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-steps)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue