7.12 pan 杂项作业单
Panzihang
parent
b77e7c07e4
commit
10d467a1e7
|
|
@ -47,6 +47,11 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "杂项作业查看(工班信息)"
|
"navigationBarTitleText": "杂项作业查看(工班信息)"
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
"path": "pages/shipWork/shiftDetails",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "工班信息详情"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/monitor/index",
|
"path": "pages/monitor/index",
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
<!-- 工班信息列表 -->
|
<!-- 工班信息列表 -->
|
||||||
<ul v-if="tabsType == 2">
|
<ul v-if="tabsType == 2">
|
||||||
<li v-for="(item,index) in shiftInfo" :key="index" @click="add('look')">
|
<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>
|
||||||
|
|
@ -102,8 +102,12 @@
|
||||||
url: `/pages/shipWork/shiftAdd?params=${params}`
|
url: `/pages/shipWork/shiftAdd?params=${params}`
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
lookShift() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/shipWork/shiftDetails`
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -3,69 +3,170 @@
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<uni-steps :options="stepList" :active="active" />
|
<uni-steps :options="stepList" :active="active" />
|
||||||
<view class="line"></view>
|
<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>
|
||||||
|
|
||||||
<ul class="ul1">
|
<!-- 翻仓信息 -->
|
||||||
<li>
|
<template v-if="active == 1">
|
||||||
<p>船名：</p>
|
<view v-for="(item,index) in fcUlList" :key="index + 'fc'">
|
||||||
<span>快乐号</span>
|
<view class="ulTop"><span @click="fcAdd">添加</span><van-icon name="arrow-down" /></view>
|
||||||
</li>
|
<ul class="fcUl">
|
||||||
<li>
|
<li>
|
||||||
<p><span class="required">*</span>航次：</p>
|
<p class="liTitle"><span class="required">*</span>翻仓类型：</p>
|
||||||
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"></uni-data-select>
|
<uni-data-select v-model="item.fcValue" :localdata="fcList"
|
||||||
</li>
|
@change="fcChange"></uni-data-select>
|
||||||
<li>
|
</li>
|
||||||
<p>进出口：</p>
|
</ul>
|
||||||
<span>进口</span>
|
<view v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'fc2'">
|
||||||
</li>
|
<view class="ulTop"><span @click="fcAdd2(index)">添加</span></span><span v-if="index2 > 0"
|
||||||
<li>
|
@click="delFc(index,index2)">删除</span><van-icon name="arrow-down" /></view>
|
||||||
<p>贸易类型：</p>
|
<ul class="ul2 fcUl2">
|
||||||
<span>内贸</span>
|
<li>
|
||||||
</li>
|
<p class="liTitle"><span class="required">*</span>翻舱起点位置：</p>
|
||||||
<li>
|
<uni-easyinput v-model="item2.qdValue" focus placeholder="请输入翻舱起点位置"></uni-easyinput>
|
||||||
<p><span class="required">*</span>装卸类型：</p>
|
</li>
|
||||||
<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange"></uni-data-select>
|
<li>
|
||||||
</li>
|
<p class="liTitle"><span class="required">*</span>翻舱终点位置：</p>
|
||||||
</ul>
|
<uni-easyinput v-model="item2.zdValue" focus placeholder="请输入翻舱终点位置"></uni-easyinput>
|
||||||
|
</li>
|
||||||
<view class="ulTop"><span @click="ulAdd1">添加</span><van-icon name="arrow-down" /></view>
|
<li>
|
||||||
<ul class="ul2" v-for="(item,index) in ulList1" :key="index">
|
<p class="liTitle"><span class="required">*</span>工班：</p>
|
||||||
<li>
|
<uni-data-select v-model="item2.gbValue" :localdata="gbList"
|
||||||
<p class="liTitle"><span class="required">*</span>工班：</p>
|
@change="gbChange"></uni-data-select>
|
||||||
<uni-data-select v-model="gbValue" :localdata="gbList" @change="gbChange"></uni-data-select>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
||||||
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
<uni-datetime-picker v-model="item2.datetime" type="datetimerange" rangeSeparator="-" />
|
||||||
<uni-datetime-picker v-model="datetime" type="datetimerange" rangeSeparator="-"
|
</li>
|
||||||
@change="changeLog" />
|
<li>
|
||||||
</li>
|
<p class="liTitle"><span class="required">*</span>数量：</p>
|
||||||
</ul>
|
<uni-number-box v-model="item2.numValue" />
|
||||||
|
</li>
|
||||||
<view class="ulTop"><span @click="ulAdd2">添加</span><span @click="del">删除</span><van-icon
|
<li>
|
||||||
name="arrow-down" /></view>
|
<p class="liTitle"><span class="required">*</span>体积：</p>
|
||||||
<ul class="ul2" v-for="(item,index) in ulList2" :key="index">
|
<uni-number-box v-model="item2.tjValue" />
|
||||||
<li>
|
</li>
|
||||||
<p class="liTitle"><span class="required">*</span>车型：</p>
|
<li>
|
||||||
<uni-data-select v-model="cxValue" :localdata="cxList" @change="cxChange"></uni-data-select>
|
<p class="liTitle"><span class="required">*</span>重量：</p>
|
||||||
</li>
|
<uni-number-box v-model="item2.zlValue" />
|
||||||
<li>
|
</li>
|
||||||
<p><span class="required">*</span>数量：</p>
|
</ul>
|
||||||
<uni-number-box @change="numChange" v-model="numValue" />
|
</view>
|
||||||
</li>
|
</view>
|
||||||
<li>
|
</template>
|
||||||
<p class="liTitle"><span class="required">*</span>装卸方式：</p>
|
|
||||||
<uni-data-select v-model="fsValue" :localdata="fsList" @change="fsChange"></uni-data-select>
|
|
||||||
</li>
|
|
||||||
<li class="widthLi">
|
|
||||||
<p class="liTitle">备注：</p>
|
|
||||||
<uni-easyinput type="textarea" autoHeight v-model="notes" placeholder="请输入任务描述(200字以内)"
|
|
||||||
maxlength="200"></uni-easyinput>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
<!-- 其他信息 -->
|
||||||
|
<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">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<van-button type="default" @click="cancel">取消</van-button>
|
||||||
<van-button type="info">保存</van-button>
|
<van-button type="info" @click="save">保存</van-button>
|
||||||
<van-button type="info">下一步</van-button>
|
<van-button type="info" @click="next" v-if="active < 2">下一步</van-button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -84,91 +185,130 @@
|
||||||
}, {
|
}, {
|
||||||
title: '其他信息'
|
title: '其他信息'
|
||||||
}],
|
}],
|
||||||
|
|
||||||
|
// 工班信息
|
||||||
// 航次下拉框
|
// 航次下拉框
|
||||||
hcValue: "",
|
hcValue: "",
|
||||||
hcList: [{
|
hcList: [{
|
||||||
value: 0,
|
value: "航次0",
|
||||||
text: "航次0"
|
text: "航次0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 1,
|
value: "航次1",
|
||||||
text: "航次1"
|
text: "航次1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 2,
|
value: "航次2",
|
||||||
text: "航次2"
|
text: "航次2"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// 装卸类型下拉框
|
// 装卸类型下拉框
|
||||||
zxValue: "",
|
zxValue: "",
|
||||||
zxList: [{
|
zxList: [{
|
||||||
value: 0,
|
value: "装卸类型0",
|
||||||
text: "装卸类型0"
|
text: "装卸类型0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 1,
|
value: "装卸类型1",
|
||||||
text: "装卸类型1"
|
text: "装卸类型1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 2,
|
value: "装卸类型2",
|
||||||
text: "装卸类型2"
|
text: "装卸类型2"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
ulList1: [{
|
||||||
ulList1: [{}],
|
gbValue: "",
|
||||||
|
dataTime: ""
|
||||||
|
}],
|
||||||
// 工班下拉框
|
// 工班下拉框
|
||||||
gbValue: "",
|
|
||||||
gbList: [{
|
gbList: [{
|
||||||
value: 0,
|
value: "工班0",
|
||||||
text: "工班0"
|
text: "工班0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 1,
|
value: "工班1",
|
||||||
text: "工班1"
|
text: "工班1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 2,
|
value: "工班2",
|
||||||
text: "工班2"
|
text: "工班2"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// 作业时间
|
ulList2: [{
|
||||||
datetime: "",
|
cxValue: "",
|
||||||
|
numValue: 0,
|
||||||
ulList2: [{}],
|
fsValue: "",
|
||||||
|
notes: "",
|
||||||
|
}],
|
||||||
// 车型下拉
|
// 车型下拉
|
||||||
cxValue: "",
|
|
||||||
cxList: [{
|
cxList: [{
|
||||||
value: 0,
|
value: "车型0",
|
||||||
text: "车型0"
|
text: "车型0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 1,
|
value: "车型1",
|
||||||
text: "车型1"
|
text: "车型1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 2,
|
value: "车型2",
|
||||||
text: "车型2"
|
text: "车型2"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// 数量
|
|
||||||
numValue: 0,
|
|
||||||
// 装卸方式下拉
|
// 装卸方式下拉
|
||||||
fsValue: "",
|
|
||||||
fsList: [{
|
fsList: [{
|
||||||
value: 0,
|
value: "装卸方式0",
|
||||||
text: "装卸方式0"
|
text: "装卸方式0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 1,
|
value: "装卸方式1",
|
||||||
text: "装卸方式1"
|
text: "装卸方式1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 2,
|
value: "装卸方式2",
|
||||||
text: "装卸方式2"
|
text: "装卸方式2"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// 备注
|
|
||||||
notes: "",
|
// 翻仓信息
|
||||||
|
// 翻仓类型下拉
|
||||||
|
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) {
|
onLoad(options) {
|
||||||
|
|
@ -178,6 +318,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 工班信息相关
|
||||||
// 航次下拉
|
// 航次下拉
|
||||||
hcChange(e) {
|
hcChange(e) {
|
||||||
this.hcValue = e;
|
this.hcValue = e;
|
||||||
|
|
@ -188,33 +329,66 @@
|
||||||
},
|
},
|
||||||
// 点击第一个添加
|
// 点击第一个添加
|
||||||
ulAdd1() {
|
ulAdd1() {
|
||||||
this.ulList1.push({})
|
this.ulList1.push({
|
||||||
|
gbValue: "",
|
||||||
|
dataTime: ""
|
||||||
|
})
|
||||||
},
|
},
|
||||||
// 工班下拉
|
// 工班下拉
|
||||||
gbChange(e) {
|
gbChange(e) {},
|
||||||
this.gbValue = e;
|
|
||||||
},
|
|
||||||
// 作业时间
|
// 作业时间
|
||||||
changeLog(e) {},
|
changeLog(e) {},
|
||||||
// 点击第二个添加
|
// 点击第二个添加
|
||||||
ulAdd2() {
|
ulAdd2() {
|
||||||
this.ulList2.push({})
|
this.ulList2.push({
|
||||||
|
cxValue: "",
|
||||||
|
numValue: 0,
|
||||||
|
fsValue: "",
|
||||||
|
notes: "",
|
||||||
|
})
|
||||||
},
|
},
|
||||||
del() {
|
del() {
|
||||||
this.ulList2.splice(0, 1)
|
this.ulList2.splice(0, 1)
|
||||||
},
|
},
|
||||||
// 车型下拉
|
// 车型下拉
|
||||||
cxChange(e) {
|
cxChange(e) {},
|
||||||
this.cxValue = e;
|
|
||||||
},
|
|
||||||
// 数量
|
// 数量
|
||||||
numChange(val) {
|
numChange(val) {},
|
||||||
console.log(val)
|
|
||||||
this.numValue = val;
|
|
||||||
},
|
|
||||||
// 装卸方式下拉
|
// 装卸方式下拉
|
||||||
fsChange(e) {
|
fsChange(e) {},
|
||||||
this.fsValue = 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)
|
||||||
},
|
},
|
||||||
|
|
||||||
// 取消
|
// 取消
|
||||||
|
|
@ -223,6 +397,12 @@
|
||||||
url: '/pages/shipWork/mixWork'
|
url: '/pages/shipWork/mixWork'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 保存
|
||||||
|
save() {},
|
||||||
|
// 下一步
|
||||||
|
next() {
|
||||||
|
this.active = this.active + 1
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -249,7 +429,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: #f2f2f2;
|
background: #f2f2f2;
|
||||||
margin-top: 20px;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ulTop {
|
.ulTop {
|
||||||
|
|
@ -269,11 +449,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fcUl {
|
||||||
|
li {
|
||||||
|
border: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
.liTitle {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fcUl2 {
|
||||||
|
.liTitle {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 20px 0;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 44%;
|
width: 44%;
|
||||||
|
|
@ -320,8 +517,6 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.ul2 {
|
.ul2 {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -332,9 +527,32 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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 {
|
.btnList {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
/deep/ .van-button {
|
/deep/ .van-button {
|
||||||
margin: 30px 20px;
|
margin: 30px 20px;
|
||||||
|
|
|
||||||
|
|
@ -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,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开发微信小程序：**皮皮虎去水印**。
|
||||||
|
|
||||||
|
关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue