From 10d467a1e71d1f2f4135013902a5b1fde4e43b0e Mon Sep 17 00:00:00 2001
From: Panzihang <819652404@qq.com>
Date: Wed, 12 Jul 2023 13:48:01 +0800
Subject: [PATCH] =?UTF-8?q?7.12=20pan=20=E6=9D=82=E9=A1=B9=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   5 +
 pages/shipWork/mixWork.vue                    |   8 +-
 pages/shipWork/shiftAdd.vue                   | 428 +++++++++++++-----
 pages/shipWork/shiftDetails.vue               | 300 ++++++++++++
 uni_modules/custom-tabs/changelog.md          |  22 +
 .../custom-tab-pane/custom-tab-pane.vue       |  72 +++
 .../components/custom-tabs/custom-tabs.vue    | 221 +++++++++
 uni_modules/custom-tabs/package.json          |  83 ++++
 uni_modules/custom-tabs/readme.md             | 149 ++++++
 9 files changed, 1181 insertions(+), 107 deletions(-)
 create mode 100644 pages/shipWork/shiftDetails.vue
 create mode 100644 uni_modules/custom-tabs/changelog.md
 create mode 100644 uni_modules/custom-tabs/components/custom-tab-pane/custom-tab-pane.vue
 create mode 100644 uni_modules/custom-tabs/components/custom-tabs/custom-tabs.vue
 create mode 100644 uni_modules/custom-tabs/package.json
 create mode 100644 uni_modules/custom-tabs/readme.md

diff --git a/pages.json b/pages.json
index 38f4816..04b1cd0 100644
--- a/pages.json
+++ b/pages.json
@@ -47,6 +47,11 @@
 			"style": {
 				"navigationBarTitleText": "杂项作业查看(工班信息)"
 			}
+		}, {
+			"path": "pages/shipWork/shiftDetails",
+			"style": {
+				"navigationBarTitleText": "工班信息详情"
+			}
 		},
 		{
 			"path": "pages/monitor/index",
diff --git a/pages/shipWork/mixWork.vue b/pages/shipWork/mixWork.vue
index ad6b278..4d122c1 100644
--- a/pages/shipWork/mixWork.vue
+++ b/pages/shipWork/mixWork.vue
@@ -18,7 +18,7 @@
 			</ul>
 			<!-- 工班信息列表 -->
 			<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="shift">
 						<p>一工班</p>
@@ -102,8 +102,12 @@
 						url: `/pages/shipWork/shiftAdd?params=${params}`
 					})
 				}
-
 			},
+			lookShift() {
+				uni.navigateTo({
+					url: `/pages/shipWork/shiftDetails`
+				})
+			}
 		}
 	}
 </script>
diff --git a/pages/shipWork/shiftAdd.vue b/pages/shipWork/shiftAdd.vue
index fafe402..b6e4f73 100644
--- a/pages/shipWork/shiftAdd.vue
+++ b/pages/shipWork/shiftAdd.vue
@@ -3,69 +3,170 @@
 		<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>
 
-			<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">
-				<li>
-					<p class="liTitle"><span class="required">*</span>工班：</p>
-					<uni-data-select v-model="gbValue" :localdata="gbList" @change="gbChange"></uni-data-select>
-				</li>
-				<li>
-					<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
-					<uni-datetime-picker v-model="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">
-				<li>
-					<p class="liTitle"><span class="required">*</span>车型：</p>
-					<uni-data-select v-model="cxValue" :localdata="cxList" @change="cxChange"></uni-data-select>
-				</li>
-				<li>
-					<p><span class="required">*</span>数量：</p>
-					<uni-number-box @change="numChange" v-model="numValue" />
-				</li>
-				<li>
-					<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 == 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">保存</van-button>
-				<van-button type="info">下一步</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>
@@ -84,91 +185,130 @@
 				}, {
 					title: '其他信息'
 				}],
+
+				// 工班信息
 				// 航次下拉框
 				hcValue: "",
 				hcList: [{
-						value: 0,
+						value: "航次0",
 						text: "航次0"
 					},
 					{
-						value: 1,
+						value: "航次1",
 						text: "航次1"
 					},
 					{
-						value: 2,
+						value: "航次2",
 						text: "航次2"
 					},
 				],
 				// 装卸类型下拉框
 				zxValue: "",
 				zxList: [{
-						value: 0,
+						value: "装卸类型0",
 						text: "装卸类型0"
 					},
 					{
-						value: 1,
+						value: "装卸类型1",
 						text: "装卸类型1"
 					},
 					{
-						value: 2,
+						value: "装卸类型2",
 						text: "装卸类型2"
 					},
 				],
-
-				ulList1: [{}],
+				ulList1: [{
+					gbValue: "",
+					dataTime: ""
+				}],
 				// 工班下拉框
-				gbValue: "",
 				gbList: [{
-						value: 0,
+						value: "工班0",
 						text: "工班0"
 					},
 					{
-						value: 1,
+						value: "工班1",
 						text: "工班1"
 					},
 					{
-						value: 2,
+						value: "工班2",
 						text: "工班2"
 					},
 				],
-				// 作业时间
-				datetime: "",
-
-				ulList2: [{}],
+				ulList2: [{
+					cxValue: "",
+					numValue: 0,
+					fsValue: "",
+					notes: "",
+				}],
 				// 车型下拉
-				cxValue: "",
 				cxList: [{
-						value: 0,
+						value: "车型0",
 						text: "车型0"
 					},
 					{
-						value: 1,
+						value: "车型1",
 						text: "车型1"
 					},
 					{
-						value: 2,
+						value: "车型2",
 						text: "车型2"
 					},
 				],
-				// 数量
-				numValue: 0,
 				// 装卸方式下拉
-				fsValue: "",
 				fsList: [{
-						value: 0,
+						value: "装卸方式0",
 						text: "装卸方式0"
 					},
 					{
-						value: 1,
+						value: "装卸方式1",
 						text: "装卸方式1"
 					},
 					{
-						value: 2,
+						value: "装卸方式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) {
@@ -178,6 +318,7 @@
 			}
 		},
 		methods: {
+			// 工班信息相关
 			// 航次下拉
 			hcChange(e) {
 				this.hcValue = e;
@@ -188,33 +329,66 @@
 			},
 			// 点击第一个添加
 			ulAdd1() {
-				this.ulList1.push({})
+				this.ulList1.push({
+					gbValue: "",
+					dataTime: ""
+				})
 			},
 			// 工班下拉
-			gbChange(e) {
-				this.gbValue = e;
-			},
+			gbChange(e) {},
 			// 作业时间
 			changeLog(e) {},
 			// 点击第二个添加
 			ulAdd2() {
-				this.ulList2.push({})
+				this.ulList2.push({
+					cxValue: "",
+					numValue: 0,
+					fsValue: "",
+					notes: "",
+				})
 			},
 			del() {
 				this.ulList2.splice(0, 1)
 			},
 			// 车型下拉
-			cxChange(e) {
-				this.cxValue = e;
-			},
+			cxChange(e) {},
 			// 数量
-			numChange(val) {
-				console.log(val)
-				this.numValue = val;
-			},
+			numChange(val) {},
 			// 装卸方式下拉
-			fsChange(e) {
-				this.fsValue = e;
+			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)
 			},
 
 			// 取消
@@ -223,6 +397,12 @@
 					url: '/pages/shipWork/mixWork'
 				})
 			},
+			// 保存
+			save() {},
+			// 下一步
+			next() {
+				this.active = this.active + 1
+			},
 		}
 	}
 </script>
@@ -249,7 +429,7 @@
 				width: 100%;
 				height: 10px;
 				background: #f2f2f2;
-				margin-top: 20px;
+				margin: 20px 0;
 			}
 
 			.ulTop {
@@ -269,11 +449,28 @@
 				}
 			}
 
+			.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: 20px 0;
+				margin-bottom: 20px;
 
 				li {
 					width: 44%;
@@ -320,8 +517,6 @@
 
 			}
 
-
-
 			.ul2 {
 				padding: 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 {
 				display: flex;
 				justify-content: center;
+				margin-top: 20px;
 
 				/deep/ .van-button {
 					margin: 30px 20px;
diff --git a/pages/shipWork/shiftDetails.vue b/pages/shipWork/shiftDetails.vue
new file mode 100644
index 0000000..1fa4f21
--- /dev/null
+++ b/pages/shipWork/shiftDetails.vue
@@ -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>
\ No newline at end of file
diff --git a/uni_modules/custom-tabs/changelog.md b/uni_modules/custom-tabs/changelog.md
new file mode 100644
index 0000000..4978d07
--- /dev/null
+++ b/uni_modules/custom-tabs/changelog.md
@@ -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
diff --git a/uni_modules/custom-tabs/components/custom-tab-pane/custom-tab-pane.vue b/uni_modules/custom-tabs/components/custom-tab-pane/custom-tab-pane.vue
new file mode 100644
index 0000000..63bd98a
--- /dev/null
+++ b/uni_modules/custom-tabs/components/custom-tab-pane/custom-tab-pane.vue
@@ -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>
diff --git a/uni_modules/custom-tabs/components/custom-tabs/custom-tabs.vue b/uni_modules/custom-tabs/components/custom-tabs/custom-tabs.vue
new file mode 100644
index 0000000..3cdc3e1
--- /dev/null
+++ b/uni_modules/custom-tabs/components/custom-tabs/custom-tabs.vue
@@ -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>
diff --git a/uni_modules/custom-tabs/package.json b/uni_modules/custom-tabs/package.json
new file mode 100644
index 0000000..96dfcbd
--- /dev/null
+++ b/uni_modules/custom-tabs/package.json
@@ -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"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/custom-tabs/readme.md b/uni_modules/custom-tabs/readme.md
new file mode 100644
index 0000000..97d3d95
--- /dev/null
+++ b/uni_modules/custom-tabs/readme.md
@@ -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开发微信小程序：**皮皮虎去水印**。
+
+关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】。
+
+![image](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bb657efd-fece-483e-a715-5daea480fde8/6e029310-aec8-46e9-9883-1c88dc1925ad.jpg)
+
+
+
+
+
+
+
+