wsnet
/
pad-app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pad单证页面

dev2
Panzihang 2023-07-19 18:12:19 +08:00
parent 4a1903071b
commit 57741a7cdd
7 changed files with 561 additions and 387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
App.vue
View File

@ -17,4 +17,16 @@
@import "style/css/main.css"; @import "style/css/main.css";
@import "style/css/flex-main.css"; @import "style/css/flex-main.css";
@import "/style/iconfont.css"; @import "/style/iconfont.css";
/deep/.uni-select {
background-color: #fff;
}
/deep/.uni-date-x--border {
background-color: #fff;
}
/deep/.superwei-combox {
background-color: #fff;
}
</style> </style>

49
pages/shipWork/mixWork.vue
View File

@ -6,7 +6,7 @@
@click="tabsClick(item,index)">{{item}}</view> @click="tabsClick(item,index)">{{item}}</view>
</view> </view>
<!-- 人员信息列表 --> <!-- 人员信息列表 -->
<view class="ul" v-if="tabsType == 1"> <view class="ul" v-if="tabsType == 0">
<view class="li" v-for="(item,index) in peopleInfo" :key="index" @click="add('look',item,index)"> <view class="li" v-for="(item,index) in peopleInfo" :key="index" @click="add('look',item,index)">
<view class="title">航次：{{item.vvyName}}</view> <view class="title">航次：{{item.vvyName}}</view>
<p>贸易类型：{{item.tradeTypeName}}</p> <p>贸易类型：{{item.tradeTypeName}}</p>
@ -17,12 +17,12 @@
</view> </view>
</view> </view>
<!-- 工班信息列表 --> <!-- 工班信息列表 -->
<view class="ul" v-if="tabsType == 2"> <view class="ul" v-if="tabsType == 1">
<view class="li" v-for="(item,index) in shiftInfo" :key="index" @click="lookShift"> <view class="li" v-for="(item,index) in shiftInfo" :key="index" @click="lookShift(item,index)">
<view class="title">航次：{{item.vvyName}}</view> <view class="title">航次：{{item.vvyName}}</view>
<view class="shift" v-for="(item2,index2) in item.workMessageDetailReqDTOS" :key="index2"> <view class="shift" v-for="(item2,index2) in item.shiftList" :key="index2">
<p>{{item2.wkdId}}</p> <p>{{item2.gbTextValue}}</p>
<span>作业时间：{{item2.workTime}}</span> <span>作业开始时间：{{item2.startTime}}</span>
</view> </view>
<view class="state">状态：未上传</view> <view class="state">状态：未上传</view>
</view> </view>
@ -39,38 +39,35 @@
return { return {
shipInfo: [], shipInfo: [],
tabsList: ["人员信息", "工班信息"], tabsList: ["人员信息", "工班信息"],
tabsType: 1, // 1是人员信息 2是工班信息 tabsType: 0, // 0是人员信息 1是工班信息
tabsIndex: 0, tabsIndex: 0,
// 人员信息列表 // 人员信息列表
peopleInfo: [], peopleInfo: [],
// 工班信息列表 // 工班信息列表
shiftInfo: [{ shiftInfo: []
vvyName: "511I",
workMessageDetailReqDTOS: [{
wkdId: "一工班",
workTime: "2023/09/09 13:00:00"
}, {
wkdId: "二工班",
workTime: "2023/09/09 13:00:00"
}, {
wkdId: "三工班",
workTime: "2023/09/09 13:00:00"
}]
}, ]
} }
}, },
mounted() { mounted() {
this.tabsType = this.$route.query.infoType
if (this.tabsType != 0 || this.tabsType != 1) {
this.tabsType = 0
this.tabsIndex = 0
} else {
this.tabsIndex = this.tabsType
}
this.peopleInfo = uni.getStorageSync('addPeopleArr')
this.shiftInfo = uni.getStorageSync('addShiftArr')
console.log(this.shiftInfo)
this.shipInfo = uni.getStorageSync('shipInfo') this.shipInfo = uni.getStorageSync('shipInfo')
this.peopleInfo = uni.getStorageSync('addPeopleArr');
}, },
methods: { methods: {
tabsClick(item, index) { tabsClick(item, index) {
this.tabsIndex = index; this.tabsIndex = index;
if (item == "人员信息") { if (item == "人员信息") {
this.tabsType = 1; this.tabsType = 0;
} else { } else {
this.tabsType = 2; this.tabsType = 1;
} }
}, },
add(state, item, index) { add(state, item, index) {
@ -80,7 +77,7 @@
state: state state: state
} }
const params = encodeURIComponent(JSON.stringify(obj)); const params = encodeURIComponent(JSON.stringify(obj));
if (this.tabsType == 1) { if (this.tabsType == 0) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/shipWork/peopleAdd?params=${params}` url: `/pages/shipWork/peopleAdd?params=${params}`
}) })
@ -90,7 +87,9 @@
}) })
} }
}, },
lookShift() { lookShift(item, index) {
uni.setStorageSync('shiftRow', item);
uni.setStorageSync('shiftRowIndex', index);
uni.navigateTo({ uni.navigateTo({
url: `/pages/shipWork/shiftDetails` url: `/pages/shipWork/shiftDetails`
}) })

9
pages/shipWork/peopleAdd.vue
View File

@ -112,7 +112,6 @@
} }
}, },
mounted() { mounted() {
if (this.obj.state == "edit" || this.obj.state == "look") { if (this.obj.state == "edit" || this.obj.state == "look") {
this.getRow() this.getRow()
} }
@ -139,7 +138,6 @@
getRow() { getRow() {
this.peopleRow = uni.getStorageSync('peopleRow'); this.peopleRow = uni.getStorageSync('peopleRow');
this.peopleRowIndex = uni.getStorageSync('peopleRowIndex'); this.peopleRowIndex = uni.getStorageSync('peopleRowIndex');
if (this.obj.state == "edit") {
this.hcValue = this.peopleRow.vvyId this.hcValue = this.peopleRow.vvyId
this.hcTextValue = this.peopleRow.vvyName this.hcTextValue = this.peopleRow.vvyName
this.tqValue = this.peopleRow.weatherId this.tqValue = this.peopleRow.weatherId
@ -151,7 +149,6 @@
this.datetime = [this.peopleRow.jobStartTime, this.peopleRow.jobEndTime] this.datetime = [this.peopleRow.jobStartTime, this.peopleRow.jobEndTime]
this.startTime = this.peopleRow.jobStartTime this.startTime = this.peopleRow.jobStartTime
this.endTime = this.peopleRow.jobEndTime this.endTime = this.peopleRow.jobEndTime
}
}, },
// 航次下拉 // 航次下拉
hcChange(e) { hcChange(e) {
@ -197,7 +194,7 @@
// 取消 // 取消
cancel() { cancel() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/shipWork/mixWork' url: '/pages/shipWork/mixWork?infoType=0'
}) })
}, },
// 删除 // 删除
@ -206,7 +203,7 @@
addPeopleArr.splice(this.peopleRowIndex, 1) addPeopleArr.splice(this.peopleRowIndex, 1)
uni.setStorageSync('addPeopleArr', addPeopleArr); uni.setStorageSync('addPeopleArr', addPeopleArr);
uni.navigateTo({ uni.navigateTo({
url: '/pages/shipWork/mixWork' url: '/pages/shipWork/mixWork?infoType=0'
}) })
}, },
// 保存 // 保存
@ -243,7 +240,7 @@
} }
uni.navigateTo({ uni.navigateTo({
url: '/pages/shipWork/mixWork' url: '/pages/shipWork/mixWork?infoType=0'
}) })
}, },
// 编辑 // 编辑

251
pages/shipWork/shiftAdd.vue
View File

@ -32,12 +32,12 @@
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>工班：</p> <p class="liTitle"><text class="required">*</text>工班：</p>
<uni-data-select v-model="item.gbValue" :localdata="gbList" <uni-data-select v-model="item.gbValue" :localdata="gbList"
@change="gbChange"></uni-data-select> @change="gbChange(item,index)"></uni-data-select>
</view> </view>
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>作业时间 ：</p> <p class="liTitle"><text class="required">*</text>作业时间 ：</p>
<uni-datetime-picker v-model="item.datetime" type="datetimerange" rangeSeparator="-" <uni-datetime-picker v-model="item.datetime" type="datetimerange" rangeSeparator="-"
@change="changeLog" /> @change="changeLog(item)" />
</view> </view>
</view> </view>
<view class="ulTop"><text @click="ulAdd2">添加</text><text @click="del">删除</text><van-icon <view class="ulTop"><text @click="ulAdd2">添加</text><text @click="del">删除</text><van-icon
@ -46,7 +46,7 @@
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>车型：</p> <p class="liTitle"><text class="required">*</text>车型：</p>
<uni-data-select v-model="item.cxValue" :localdata="cxList" <uni-data-select v-model="item.cxValue" :localdata="cxList"
@change="cxChange"></uni-data-select> @change="cxChange(item,index)"></uni-data-select>
</view> </view>
<view class="li"> <view class="li">
<p><text class="required">*</text>数量：</p> <p><text class="required">*</text>数量：</p>
@ -55,7 +55,7 @@
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>装卸方式：</p> <p class="liTitle"><text class="required">*</text>装卸方式：</p>
<uni-data-select v-model="item.fsValue" :localdata="fsList" <uni-data-select v-model="item.fsValue" :localdata="fsList"
@change="fsChange"></uni-data-select> @change="fsChange(item,index)"></uni-data-select>
</view> </view>
<view class="li widthLi"> <view class="li widthLi">
<p class="liTitle">备注：</p> <p class="liTitle">备注：</p>
@ -73,7 +73,7 @@
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>翻仓类型：</p> <p class="liTitle"><text class="required">*</text>翻仓类型：</p>
<uni-data-select v-model="item.fcValue" :localdata="fcList" <uni-data-select v-model="item.fcValue" :localdata="fcList"
@change="fcChange"></uni-data-select> @change="fcChange(item,index)"></uni-data-select>
</view> </view>
</view> </view>
<view v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'fc2'"> <view v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'fc2'">
@ -82,20 +82,21 @@
<view class="ul ul2 fcUl2"> <view class="ul ul2 fcUl2">
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>翻舱起点位置：</p> <p class="liTitle"><text class="required">*</text>翻舱起点位置：</p>
<uni-easyinput v-model="item2.qdValue" focus placeholder="请输入翻舱起点位置"></uni-easyinput> <uni-easyinput v-model="item2.qdValue" placeholder="请输入翻舱起点位置"></uni-easyinput>
</view> </view>
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>翻舱终点位置：</p> <p class="liTitle"><text class="required">*</text>翻舱终点位置：</p>
<uni-easyinput v-model="item2.zdValue" focus placeholder="请输入翻舱终点位置"></uni-easyinput> <uni-easyinput v-model="item2.zdValue" placeholder="请输入翻舱终点位置"></uni-easyinput>
</view> </view>
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>工班：</p> <p class="liTitle"><text class="required">*</text>工班：</p>
<uni-data-select v-model="item2.gbValue" :localdata="gbList" <uni-data-select v-model="item2.gbValue" :localdata="gbList"
@change="gbChange"></uni-data-select> @change="fcgbChange(index,item2,index2)"></uni-data-select>
</view> </view>
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>作业时间 ：</p> <p class="liTitle"><text class="required">*</text>作业时间 ：</p>
<uni-datetime-picker v-model="item2.datetime" type="datetimerange" rangeSeparator="-" /> <uni-datetime-picker v-model="item2.datetime" type="datetimerange" rangeSeparator="-"
@change="changeLog(item2)" />
</view> </view>
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>数量：</p> <p class="liTitle"><text class="required">*</text>数量：</p>
@ -125,11 +126,12 @@
</view> </view>
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>普通工人：</p> <p class="liTitle"><text class="required">*</text>普通工人：</p>
<uni-number-box v-model="otherObj.ptWorker" /> <uni-number-box v-model="otherObj.ptworker" />
</view> </view>
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>作业时间 ：</p> <p class="liTitle"><text class="required">*</text>作业时间 ：</p>
<uni-datetime-picker v-model="otherObj.workTime" type="datetimerange" rangeSeparator="-" /> <uni-datetime-picker v-model="otherObj.datetime" type="datetimerange" rangeSeparator="-"
@change="changeLog(otherObj)" />
</view> </view>
<view class="li"> <view class="li">
<p class="liTitle"><text class="required">*</text>重量：</p> <p class="liTitle"><text class="required">*</text>重量：</p>
@ -165,7 +167,8 @@
</template> </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" @click="save">保存</van-button> <van-button type="info" @click="back" v-if="active > 0">上一步</van-button>
<van-button type="info" @click="save" v-if="active == 2">保存</van-button>
<van-button type="info" @click="next" v-if="active < 2">下一步</van-button> <van-button type="info" @click="next" v-if="active < 2">下一步</van-button>
</view> </view>
</view> </view>
@ -184,6 +187,8 @@
}] }]
}, },
obj: {}, obj: {},
dataInfo: {},
shiftRowIndex: 0,
active: 0, active: 0,
stepList: [{ stepList: [{
title: '工班信息' title: '工班信息'
@ -207,79 +212,52 @@
zxList: [], zxList: [],
ulList1: [{ ulList1: [{
gbValue: "", gbValue: "",
dataTime: "" gbTextValue: "",
datetime: ['', ''],
startTime: "",
endTime: "",
}], }],
// 工班下拉框 // 工班下拉框
gbList: [{ gbList: [],
value: "工班0",
text: "工班0"
},
{
value: "工班1",
text: "工班1"
},
{
value: "工班2",
text: "工班2"
},
],
ulList2: [{ ulList2: [{
cxValue: "", cxValue: "",
cxTextValue: "",
numValue: 0, numValue: 0,
fsValue: "", fsValue: "",
fsTextValue: "",
notes: "", notes: "",
}], }],
// 车型下拉 // 车型下拉
cxList: [{ cxList: [],
value: "车型0",
text: "车型0"
},
{
value: "车型1",
text: "车型1"
},
{
value: "车型2",
text: "车型2"
},
],
// 装卸方式下拉 // 装卸方式下拉
fsList: [{ fsList: [],
value: "装卸方式0",
text: "装卸方式0"
},
{
value: "装卸方式1",
text: "装卸方式1"
},
{
value: "装卸方式2",
text: "装卸方式2"
},
],
// 翻仓信息 // 翻仓信息
// 翻仓类型下拉 // 翻仓类型下拉
fcList: [{ fcList: [{
value: "翻仓类型0", value: "0",
text: "翻仓类型0" text: "翻仓类型0"
}, },
{ {
value: "翻仓类型1", value: "1",
text: "翻仓类型1" text: "翻仓类型1"
}, },
{ {
value: "翻仓类型2", value: "2",
text: "翻仓类型2" text: "翻仓类型2"
}, },
], ],
fcUlList: [{ fcUlList: [{
fcValue: "", fcValue: "",
fcTextValue: "",
fcUlList2: [{ fcUlList2: [{
qdValue: "", qdValue: "",
zdValue: "", zdValue: "",
gbValue: "", gbValue: "",
dataTime: "", gbTextValue: "",
datetime: ['', ''],
startTime: "",
endTime: "",
numValue: 0, numValue: 0,
tjValue: 0, tjValue: 0,
zlValue: 0 zlValue: 0
@ -290,7 +268,9 @@
otherObj: { otherObj: {
jsWorker: 0, jsWorker: 0,
ptworker: 0, ptworker: 0,
workTime: "", datetime: ['', ''],
startTime: "",
endTime: "",
zlValue: 0, zlValue: 0,
tjValue: 0, tjValue: 0,
describe: "", describe: "",
@ -307,23 +287,69 @@
}, },
mounted() { mounted() {
this.getShip() this.getShip()
if (this.obj.state == 'edit') {
this.editData();
}
}, },
methods: { methods: {
// 获取船只信息 // 获取船只信息
getShip() { getShip() {
this.shipInfo = uni.getStorageSync('shipInfo') this.shipInfo = uni.getStorageSync('shipInfo')
// 航次数据
this.shipInfo.voyageScheduleDataList.forEach((v, index) => { this.shipInfo.voyageScheduleDataList.forEach((v, index) => {
this.hcList.push({ this.hcList.push({
text: v.vvyName, text: v.vvyName,
value: v.vvyId value: v.vvyId
}) })
}) })
// 装卸类型数据
this.shipInfo.handTypeList.forEach((v, index) => { this.shipInfo.handTypeList.forEach((v, index) => {
this.zxList.push({ this.zxList.push({
text: v.ptrDesc, text: v.ptrDesc,
value: v.ptrCode value: v.ptrCode
}) })
}) })
// 工班数据
this.shipInfo.shipmentBasicShiftList.forEach((v, index) => {
this.gbList.push({
text: v.pwcTypeDesc,
value: v.pwcId
})
})
// 车型数据
this.shipInfo.shipmentVehicleModeList.forEach((v, index) => {
this.cxList.push({
text: v.bvmName,
value: v.bvmId
})
})
// 装卸方式
this.shipInfo.loadTypeList.forEach((v, index) => {
this.fsList.push({
text: v.ptrDesc,
value: v.ptrCode
})
})
// 翻仓类型
this.shipInfo.retallyMessageRespList.forEach((v, index) => {
this.fcList.push({
text: v.retallyTypeName,
value: v.retallyType
})
})
},
//状态为编辑获取数据
editData() {
this.dataInfo = uni.getStorageSync('shiftRow')
this.shiftRowIndex = uni.getStorageSync('shiftRowIndex')
this.hcValue = this.dataInfo.vvyId
this.hcTextValue = this.dataInfo.vvyName
this.zxValue = this.dataInfo.zxId
this.zxTextValue = this.dataInfo.zxTextValue
this.ulList1 = this.dataInfo.shiftList
this.ulList2 = this.dataInfo.shiftList2
this.fcUlList = this.dataInfo.fcList
this.otherObj = this.dataInfo.otherList
}, },
// 工班信息相关 // 工班信息相关
// 航次下拉 // 航次下拉
@ -347,14 +373,26 @@
// 点击第一个添加 // 点击第一个添加
ulAdd1() { ulAdd1() {
this.ulList1.push({ this.ulList1.push({
datetime: ['', ''],
gbValue: "", gbValue: "",
dataTime: "" gbTextValue: ""
}) })
}, },
// 工班下拉 // 工班下拉
gbChange(e) {}, gbChange(item, index) {
this.ulList1[index].gbValue = item.gbValue
this.gbList.forEach(v => {
if (v.value == item.gbValue) {
item.gbTextValue = v.text
}
})
},
// 作业时间 // 作业时间
changeLog(e) {}, changeLog(item) {
item.startTime = item.datetime[0].slice(0, item.datetime[0].length - 3)
item.endTime = item.datetime[1].slice(0, item.datetime[1].length - 3)
},
// 点击第二个添加 // 点击第二个添加
ulAdd2() { ulAdd2() {
this.ulList2.push({ this.ulList2.push({
@ -368,28 +406,62 @@
this.ulList2.splice(0, 1) this.ulList2.splice(0, 1)
}, },
// 车型下拉 // 车型下拉
cxChange(e) {}, cxChange(item, index) {
this.ulList2[index].cxValue = item.cxValue
this.cxList.forEach(v => {
if (v.value == item.cxValue) {
item.cxTextValue = v.text
}
})
},
// 数量 // 数量
numChange(val) {}, numChange(val) {},
// 装卸方式下拉 // 装卸方式下拉
fsChange(e) {}, fsChange(item, index) {
this.ulList2[index].fsValue = item.fsValue
this.fsList.forEach(v => {
if (v.value == item.fsValue) {
item.fsTextValue = v.text
}
})
},
// 翻仓信息 // 翻仓信息
// 翻仓类型下拉 // 翻仓类型下拉
fcChange(e) {}, fcChange(item, index) {
this.fcUlList[index].fcValue = item.fcValue
this.fcList.forEach(v => {
if (v.value == item.fcValue) {
item.fcTextValue = v.text
}
})
},
// 翻仓工班
fcgbChange(index, item2, index2) {
this.fcUlList[index].fcUlList2[index2].gbValue = item2.gbValue
this.gbList.forEach(v => {
if (v.value == item2.gbValue) {
item2.gbTextValue = v.text
}
})
},
// 翻仓add // 翻仓add
fcAdd() { fcAdd() {
this.fcUlList.push({ this.fcUlList.push({
fcValue: "", fcValue: "",
fcTextValue: "",
fcUlList2: [{ fcUlList2: [{
qdValue: "", qdValue: "",
zdValue: "", zdValue: "",
gbValue: "", gbValue: "",
dataTime: "", gbTextValue: "",
numValue: 12, datetime: ['', ''],
tjValue: 12, startTime: "",
zlValue: 12 endTime: "",
}] numValue: 0,
tjValue: 0,
zlValue: 0
}],
}) })
}, },
fcAdd2(index) { fcAdd2(index) {
@ -397,7 +469,10 @@
qdValue: "", qdValue: "",
zdValue: "", zdValue: "",
gbValue: "", gbValue: "",
dataTime: "", gbTextValue: "",
datetime: ['', ''],
startTime: "",
endTime: "",
numValue: 0, numValue: 0,
tjValue: 0, tjValue: 0,
zlValue: 0 zlValue: 0
@ -411,15 +486,47 @@
// 取消 // 取消
cancel() { cancel() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/shipWork/mixWork' url: '/pages/shipWork/mixWork?infoType=1'
}) })
}, },
// 保存 // 上一步
save() {}, back() {
this.active = this.active - 1
},
// 下一步 // 下一步
next() { next() {
this.active = this.active + 1 this.active = this.active + 1
}, },
// 保存
save() {
let addShiftArr = uni.getStorageSync('addShiftArr')
let addShiftObj = {
vvyName: this.hcTextValue,
vvyId: this.hcValue,
zxName: this.zxTextValue,
zxId: this.zxValue,
shiftList: this.ulList1,
shiftList2: this.ulList2,
fcList: this.fcUlList,
otherList: this.otherObj
}
if (this.obj.state == 'add') {
if (addShiftArr != "") {
addShiftArr.push(addShiftObj)
uni.setStorageSync('addShiftArr', addShiftArr);
} else {
addShiftArr = []
addShiftArr.push(addShiftObj)
uni.setStorageSync('addShiftArr', addShiftArr);
}
} else {
addShiftArr[this.shiftRowIndex] = addShiftObj;
uni.setStorageSync('addShiftArr', addShiftArr);
}
uni.navigateTo({
url: '/pages/shipWork/mixWork?infoType=1'
})
},
} }
} }
</script> </script>

301
pages/shipWork/shiftDetails.vue
View File

@ -3,197 +3,142 @@
<view class="container"> <view class="container">
<custom-tabs type="c1" :value="value" @change="changeIndex"> <custom-tabs type="c1" :value="value" @change="changeIndex">
<custom-tab-pane label="工班信息" name="c1_1"> <custom-tab-pane label="工班信息" name="c1_1">
<ul> <view></view>
<li> <view class="ul">
<view class="li">
<p>船名：</p> <p>船名：</p>
<span>快乐号</span> <text>{{shipInfo.voyageScheduleDataList[0].spmName}}</text>
</li> </view>
<li> <view class="li">
<p>航次：</p> <p>航次：</p>
<span>JK97065578</span> <text>{{shipInfo.voyageScheduleDataList[0].vvyName}}</text>
</li> </view>
<li> <view class="li">
<p>进出口：</p> <p>进出口：</p>
<span>进口</span> <text>{{shipInfo.voyageScheduleDataList[0].importExportFlagName}}</text>
</li> </view>
<li> <view class="li">
<p>贸易类型：</p> <p>贸易类型：</p>
<span>外贸</span> <text>{{shipInfo.voyageScheduleDataList[0].tradeTypeName}}</text>
</li> </view>
<li> <view class="li">
<p>装卸类型：</p> <p>装卸类型：</p>
<span> 装货</span> <text> {{dataInfo.zxName}}</text>
</li> </view>
</ul> </view>
<ul> <view class="ul bUl" v-for="(item,index) in dataInfo.shiftList" :key="index + 'a'">
<li> <view class="li">
<p>工班：</p> <p>工班：</p>
<span> 一工班</span> <text> {{item.gbTextValue}}</text>
</li> </view>
<li> <view class="li">
<p>作业时间：</p> <p>作业时间：</p>
<span> 2023/06/06 12:00 - 023/06/06 13:00</span> <text> {{item.startTime}} - {{item.endTime}}</text>
</li> </view>
<li> </view>
<view class="ul bUl" v-for="(item,index) in dataInfo.shiftList2" :key="index + 'b'">
<view class="li">
<p>车型：</p> <p>车型：</p>
<span>轿车</span> <text>{{item.cxTextValue}}</text>
</li> </view>
<li> <view class="li">
<p>数量：</p> <p>数量：</p>
<span>100</span> <text>{{item.numValue}}</text>
</li> </view>
<li class="wLi"> <view class="li wLi">
<p>备注：</p> <p>备注：</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum <text>{{item.notes}}</text>
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin </view>
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, </view>
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>
<custom-tab-pane label="翻仓信息" name="c1_2"> <custom-tab-pane label="翻仓信息" name="c1_2">
<view class="fcInfo" v-for="(item,index) in fcList" :key="index + 'fc'"> <view class="fcInfo" v-for="(item,index) in dataInfo.fcList" :key="index + 'fc'">
<view class="fcBox"> <view class="fcBox">
<p>翻舱类型：</p> <p>翻舱类型：</p>
<span>舱内翻</span> <text>{{item.fcTextValue}}</text>
</view> </view>
<ul v-for="(item2,index2) in item.infoList" :key="index2 + 'info'"> <view class="ul" v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'info'">
<li> <view class="li">
<p>航次：</p> <p>航次：</p>
<span>JK97065578</span> <text>{{shipInfo.voyageScheduleDataList[0].vvyName}}</text>
</li> </view>
<li> <view class="li">
<p>翻舱起点：</p> <p>翻舱起点：</p>
<span>D5H4</span> <text>{{item2.qdValue}}</text>
</li> </view>
<li> <view class="li">
<p>翻舱终点：</p> <p>翻舱终点：</p>
<span>舱外</span> <text>{{item2.zdValue}}</text>
</li> </view>
<li> <view class="li">
<p>作业时间：</p> <p>作业时间：</p>
<span>2023/06/06 12:00 - 023/06/06 13:00</span> <text>{{item2.startTime}} - {{item2.endTime}}</text>
</li> </view>
<li> <view class="li">
<p>车型：</p>
<span>轿车</span>
</li>
<li>
<p>数量：</p> <p>数量：</p>
<span>100</span> <text>{{item2.numValue}}</text>
</li> </view>
<li> <view class="li">
<p>体积：</p> <p>体积：</p>
<span>30</span> <text>{{item2.tjValue}}</text>
</li> </view>
<li> <view class="li">
<p>重量：</p> <p>重量：</p>
<span>50</span> <text>{{item2.zlValue}}</text>
</li> </view>
</ul> </view>
</view> </view>
</custom-tab-pane> </custom-tab-pane>
<custom-tab-pane label="其他信息" name="c1_3"> <custom-tab-pane label="其他信息" name="c1_3">
<view class="otherInfo"> <view class="otherInfo">
<p class="title">辅助作业</p> <p class="title">辅助作业</p>
<ul> <view class="ul">
<li> <view class="li">
<p>技术工人：</p> <p>技术工人：</p>
<span>10</span> <text>{{dataInfo.otherList.jsWorker}}</text>
</li> </view>
<li> <view class="li">
<p>普通工人：</p> <p>普通工人：</p>
<span>30</span> <text>{{dataInfo.otherList.ptworker}}</text>
</li> </view>
<li> <view class="li">
<p>作业时间：</p> <p>作业时间：</p>
<span>2023/06/06 12:00 - 023/06/06 13:00</span> <text>{{dataInfo.otherList.startTime}} - {{dataInfo.otherList.endTime}}</text>
</li> </view>
<li> <view class="li">
<p>重量：</p> <p>重量：</p>
<span>50</span> <text>{{dataInfo.otherList.zlValue}}</text>
</li> </view>
<li> <view class="li">
<p>体积：</p> <p>体积：</p>
<span>30</span> <text>{{dataInfo.otherList.tjValue}}</text>
</li> </view>
<li class="wLi"> <view class="li wLi">
<p>描述：</p> <p>描述：</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum <text>{{dataInfo.otherList.describe}}</text>
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin </view>
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient </view>
montes,nascetur ridiculus mus. Nam</span>
</li>
</ul>
<p class="title">待工作业</p> <p class="title">待工作业</p>
<ul> <view class="ul">
<li class="wLi"> <view class="li wLi">
<p>描述：</p> <p>描述：</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum <text>{{dataInfo.otherList.dgWork}}</text>
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin </view>
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient </view>
montes,nascetur ridiculus mus. Nam</span>
</li>
</ul>
<p class="title">作业备注</p> <p class="title">作业备注</p>
<ul> <view class="ul">
<li class="wLi"> <view class="li wLi">
<p>描述：</p> <p>描述：</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum <text>{{dataInfo.otherList.notes}}</text>
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin </view>
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient </view>
montes,nascetur ridiculus mus. Nam</span>
</li>
</ul>
</view> </view>
</custom-tab-pane> </custom-tab-pane>
</custom-tabs> </custom-tabs>
<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="default">删除</van-button> <van-button type="default" @click="del">删除</van-button>
<van-button type="info">编辑</van-button> <van-button type="info" @click="edit('edit')">编辑</van-button>
</view> </view>
</view> </view>
</view> </view>
@ -204,13 +149,24 @@
data() { data() {
return { return {
value: 0, value: 0,
fcList: [{ shipInfo: {
infoList: [{}, {}] voyageScheduleDataList: [{
}, { spmName: "",
infoList: [{}] importExportFlagName: "",
tradeTypeName: ""
}] }]
},
dataInfo: {
otherList: {}
},
shiftRowIndex: 0,
} }
}, },
mounted() {
this.shipInfo = uni.getStorageSync('shipInfo')
this.dataInfo = uni.getStorageSync('shiftRow')
this.shiftRowIndex = uni.getStorageSync('shiftRowIndex')
},
methods: { methods: {
changeIndex(e) { changeIndex(e) {
// console.log('选中:', e) // console.log('选中:', e)
@ -218,7 +174,26 @@
// 取消 // 取消
cancel() { cancel() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/shipWork/mixWork' url: '/pages/shipWork/mixWork?infoType=1'
})
},
// 删除
del() {
let addShiftArr = uni.getStorageSync('addShiftArr')
addShiftArr.splice(this.shiftRowIndex, 1)
uni.setStorageSync('addShiftArr', addShiftArr);
uni.navigateTo({
url: '/pages/shipWork/mixWork?infoType=1'
})
},
// 编辑
edit(state) {
this.obj = {
state: state
};
const params = encodeURIComponent(JSON.stringify(this.obj));
uni.navigateTo({
url: `/pages/shipWork/shiftAdd?params=${params}`
}) })
}, },
} }
@ -242,11 +217,11 @@
font-size: 16px; font-size: 16px;
} }
ul { .ul {
border-bottom: 1px dashed #ccc; border-bottom: 1px dashed #ccc;
} }
ul:last-child { .ul:last-child {
border: none; border: none;
} }
} }
@ -261,12 +236,18 @@
} }
} }
ul { .ul[data-v-298cacec] {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.ul {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
li { .li {
width: 45%; width: 45%;
display: flex; display: flex;
padding: 10px 20px; padding: 10px 20px;
@ -284,6 +265,10 @@
} }
} }
.bUl {
border-top: 1px solid #999;
}
.btnList { .btnList {
display: flex; display: flex;
justify-content: center; justify-content: center;

242
pages/shipWork/untieAdd.vue
View File

@ -1,64 +1,60 @@
<template> <template>
<view class="untieAdd"> <view class="untieAdd">
<view class="container"> <view class="container">
<ul> <view class="ul">
<li> <view class="li">
<p>船名：</p> <p>船名：</p>
<span>快乐号</span> <text>{{shipInfo.voyageScheduleDataList[0].spmName}}</text>
</li> </view>
<li> <view class="li">
<p><span class="required" v-if="obj.state != 'look'">*</span>船舶净吨：</p> <p><text class="required" v-if="obj.state != 'look'">*</text>船舶净吨：</p>
<uni-number-box v-model="zlShip" v-if="obj.state != 'look'" /> <uni-number-box v-model="zlShip" v-if="obj.state != 'look'" />
<span v-else>100</span> <text v-else>{{zlShip}}</text>
</li> </view>
<li> <view class="li">
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p> <p><text class="required" v-if="obj.state != 'look'">*</text>航次：</p>
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange" <uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
v-if="obj.state != 'look'"></uni-data-select> v-if="obj.state != 'look'"></uni-data-select>
<span v-else>CK98796</span> <text v-else>{{hcTextValue}}</text>
</li> </view>
<li> <view class="li">
<p>进出口：</p> <p>进出口：</p>
<span>进口</span> <text>{{shipInfo.voyageScheduleDataList[0].importExportFlagName}}</text>
</li> </view>
<li> <view class="li">
<p>贸易类型：</p> <p>贸易类型：</p>
<span>内贸</span> <text>{{shipInfo.voyageScheduleDataList[0].tradeTypeName}}</text>
</li> </view>
<li> <view class="li">
<p><span class="required" v-if="obj.state != 'look'">*</span>泊位：</p> <p><text class="required" v-if="obj.state != 'look'">*</text>泊位：</p>
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange" <uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
v-if="obj.state != 'look'"></uni-data-select> v-if="obj.state != 'look'"></uni-data-select>
<span v-else>1泊位</span> <text v-else>{{bwTextValue}}</text>
</li> </view>
<li> <view class="li">
<p><span class="required" v-if="obj.state != 'look'">*</span>系缆时间：</p> <p><text class="required" v-if="obj.state != 'look'">*</text>系缆时间：</p>
<uni-datetime-picker v-model="xlTime" type="datetimerange" rangeSeparator="-" @change="changeLog" <uni-datetime-picker v-model="xlTime" @change="changeLog1" v-if="obj.state != 'look'" />
v-if="obj.state != 'look'" /> <text v-else>{{xlTime}}</text>
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span> </view>
</li> <view class="li">
<li>
<p>解缆时间：</p> <p>解缆时间：</p>
<uni-datetime-picker v-model="jlTime" type="datetimerange" rangeSeparator="-" @change="changeLog" <uni-datetime-picker v-model="jlTime" @change="changeLog2" v-if="obj.state != 'look'" />
v-if="obj.state != 'look'" /> <text v-else>{{jlTime}}</text>
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span> </view>
</li> <view class="li">
<li>
<p>移泊时间：</p> <p>移泊时间：</p>
<uni-datetime-picker v-model="ybTime" type="datetimerange" rangeSeparator="-" @change="changeLog" <uni-datetime-picker v-model="ybTime" @change="changeLog3" v-if="obj.state != 'look'" />
v-if="obj.state != 'look'" /> <text v-else>{{ybTime}}</text>
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span> </view>
</li> <view class="li">
<li>
<p>停泊时间：</p> <p>停泊时间：</p>
<uni-datetime-picker v-model="tbTime" type="datetimerange" rangeSeparator="-" @change="changeLog" <uni-datetime-picker v-model="tbTime" @change="changeLog4" v-if="obj.state != 'look'" />
v-if="obj.state != 'look'" /> <text v-else>{{tbTime}}</text>
<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span> </view>
</li> </view>
</ul>
<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="default" v-if="obj.state == 'look'">删除</van-button> <van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</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 == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button> <van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
</view> </view>
@ -70,63 +66,115 @@
export default { export default {
data() { data() {
return { return {
shipInfo: {
voyageScheduleDataList: [{
spmName: "",
importExportFlagName: "",
tradeTypeName: ""
}]
},
obj: {}, obj: {},
untieRow: {},
untieRowIndex: 0,
// 航次下拉框 // 航次下拉框
hcValue: "", hcValue: "",
hcList: [{ hcTextValue: "",
value: 0, hcList: [],
text: "航次0"
},
{
value: 1,
text: "航次1"
},
{
value: 2,
text: "航次2"
},
],
// 船舶净吨 // 船舶净吨
zlShip: 100, zlShip: 0,
// 泊位下拉框 // 泊位下拉框
bwValue: "", bwValue: "",
bwList: [{ bwTextValue: "",
value: 0, bwList: [],
text: "泊位0"
},
{
value: 1,
text: "泊位1"
},
{
value: 2,
text: "泊位2"
},
],
// 系缆时间 // 系缆时间
xlTime: "", xlTime: [''],
// 解缆时间 // 解缆时间
jlTime: "", jlTime: [''],
// 移泊时间 // 移泊时间
ybTime: "", ybTime: [''],
// 停泊时间 // 停泊时间
tbTime: "", tbTime: [''],
} }
}, },
onLoad(options) { onLoad(options) {
if ('params' in options) { if ('params' in options) {
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象 // 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
this.obj = JSON.parse(decodeURIComponent(options.params)) this.obj = JSON.parse(decodeURIComponent(options.params))
console.log(this.obj)
} }
}, },
mounted() {
if (this.obj.state == "edit" || this.obj.state == "look") {
this.getRow()
}
this.getShip()
},
methods: { methods: {
// 获取船只信息
getShip() {
this.shipInfo = uni.getStorageSync('shipInfo')
this.shipInfo.pubBerthesManageRespList.forEach((v, index) => {
this.bwList.push({
text: v.bthBthnm,
value: v.bthId
})
})
this.shipInfo.voyageScheduleDataList.forEach((v, index) => {
this.hcList.push({
text: v.vvyName,
value: v.vvyId
})
})
},
// 获取当前行信息
getRow() {
this.untieRow = uni.getStorageSync('untieRow');
this.untieRowIndex = uni.getStorageSync('untieRowIndex');
console.log(this.untieRow)
console.log(this.untieRowIndex)
this.hcValue = this.untieRow.vvyId
this.hcTextValue = this.untieRow.vvyName
this.zlShip = this.untieRow.zlShip
this.bwValue = this.untieRow.bthId
this.bwTextValue = this.untieRow.bthIdName
this.xlTime = this.untieRow.xlTime
this.jlTime = this.untieRow.jlTime
this.ybTime = this.untieRow.ybTime
this.tbTime = this.untieRow.tbTime
},
// 航次下拉 // 航次下拉
hcChange(e) { hcChange(e) {
this.hcValue = e; this.hcValue = e;
this.hcList.forEach(v => {
if (v.value == e) {
this.hcTextValue = v.text
}
})
}, },
// 泊位下拉 // 泊位下拉
bwChange(e) { bwChange(e) {
this.bwValue = e; this.bwValue = e;
this.bwList.forEach(v => {
if (v.value == e) {
this.bwTextValue = v.text
}
})
},
// 系缆时间
changeLog1(e) {
this.xlTime = e.slice(0, e.length - 3)
},
// 解缆时间
changeLog2(e) {
this.jlTime = e.slice(0, e.length - 3)
},
// 移泊时间
changeLog3(e) {
this.ybTime = e.slice(0, e.length - 3)
},
// 停泊时间
changeLog4(e) {
this.tbTime = e.slice(0, e.length - 3)
}, },
// 取消 // 取消
cancel() { cancel() {
@ -134,8 +182,46 @@
url: '/pages/shipWork/untieCord' url: '/pages/shipWork/untieCord'
}) })
}, },
// 删除
del() {
let addUntieArr = uni.getStorageSync('addUntieArr')
addUntieArr.splice(this.untieRowIndex, 1)
uni.setStorageSync('addUntieArr', addUntieArr);
uni.navigateTo({
url: '/pages/shipWork/untieCord'
})
},
// 保存 // 保存
save() { save() {
let addUntieArr = uni.getStorageSync('addUntieArr')
let addUntieObj = {
zlShip: this.zlShip,
vvyId: this.hcValue,
vvyName: this.hcTextValue,
bthId: this.bwValue,
bthIdName: this.bwTextValue,
tradeTypeName: this.shipInfo.voyageScheduleDataList[0].tradeTypeName,
importExportFlagName: this.shipInfo.voyageScheduleDataList[0].importExportFlagName,
spmName: this.shipInfo.voyageScheduleDataList[0].spmName,
xlTime: this.xlTime,
jlTime: this.jlTime,
ybTime: this.ybTime,
tbTime: this.tbTime
}
if (this.obj.state == "edit") {
addUntieArr[this.untieRowIndex] = addUntieObj;
uni.setStorageSync('addUntieArr', addUntieArr);
} else if (this.obj.state == "add") {
if (addUntieArr != "") {
addUntieArr.push(addUntieObj)
uni.setStorageSync('addUntieArr', addUntieArr);
} else {
addUntieArr = []
addUntieArr.push(addUntieObj)
uni.setStorageSync('addUntieArr', addUntieArr);
}
}
uni.navigateTo({ uni.navigateTo({
url: '/pages/shipWork/untieCord' url: '/pages/shipWork/untieCord'
}) })
@ -157,12 +243,12 @@
.container { .container {
padding: 30px 20px; padding: 30px 20px;
ul { .ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
li { .li {
width: 44%; width: 44%;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;

58
pages/shipWork/untieCord.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<view class="untieCord"> <view class="untieCord">
<view class="container"> <view class="container">
<ul> <view class="ul">
<li v-for="(item,index) in infoList" :key="index" @click="add('look')"> <view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
<view class="title">航次：{{item.val1}}</view> <view class="title">航次：{{item.spmName}}</view>
<p>状态：{{item.val2}}</p> <p>状态：未上传</p>
<p>进出口：{{item.val3}}</p> <p>进出口：{{item.importExportFlagName}}</p>
<p>贸易类型：{{item.val4}}</p> <p>贸易类型：{{item.tradeTypeName}}</p>
<p>泊位：{{item.val5}}</p> <p>泊位：{{item.bthIdName}}</p>
<p>系缆时间：{{item.val6}}</p> <p>系缆时间：{{item.xlTime}}</p>
</li> </view>
</ul> </view>
<view class="addBtn" @click="add('add')">+ 新增</view> <view class="addBtn" @click="add('add')">+ 新增</view>
</view> </view>
</view> </view>
@ -20,32 +20,20 @@
export default { export default {
data() { data() {
return { return {
infoList: [{ shipInfo: {},
val1: "JK9795799", infoList: []
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",
}]
} }
}, },
mounted() {
this.shipInfo = uni.getStorageSync('shipInfo')
this.infoList = uni.getStorageSync('addUntieArr')
console.log(this.shipInfo)
console.log(this.infoList)
},
methods: { methods: {
add(state) { add(state, item, index) {
uni.setStorageSync('untieRow', item);
uni.setStorageSync('untieRowIndex', index);
const obj = { const obj = {
state: state, state: state,
} }
@ -63,10 +51,10 @@
.container { .container {
padding: 30px 20px; padding: 30px 20px;
ul { .ul {
padding: 20px 0; padding: 20px 0;
li { .li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;