样式优化
This commit is contained in:
parent
9141ab2970
commit
6e19351731
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
let canvaCtx = reactive(uni.createCanvasContext('mycanvas', _this)) //创建绘图对象
|
||||
//设置画笔样式
|
||||
canvaCtx.lineWidth = 4;
|
||||
canvaCtx.lineWidth = 6;
|
||||
canvaCtx.lineCap = 'round'
|
||||
canvaCtx.lineJoin = 'round'
|
||||
|
||||
|
|
|
|||
|
|
@ -37,12 +37,12 @@
|
|||
@input="onChangeNumber"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="出库数量：">
|
||||
<!-- <uni-forms-item label="出库数量：">
|
||||
<div style="display: flex; align-items: center">
|
||||
<button type="primary" size="mini" @click="onSelectCode">编码选择</button>
|
||||
<div style="margin-left: 10px">已选 {{ maCodeList.length }} 个编码</div>
|
||||
</div>
|
||||
</uni-forms-item>
|
||||
</uni-forms-item> -->
|
||||
</uni-forms>
|
||||
|
||||
<view class="outbound-btn" @tap="onHandleOutbound"> 出库 </view>
|
||||
|
|
|
|||
|
|
@ -53,8 +53,11 @@
|
|||
</view>
|
||||
|
||||
<!-- 内部维修 -->
|
||||
<view class="table-list-item">
|
||||
<view class="table-list-item top-content" :class="{'is-expanded': isExpanded1}">
|
||||
<div class="top-title">
|
||||
<h2 style="padding: 4rpx 0; font-weight: bold">内部维修</h2>
|
||||
<uni-icons class="icon" type="down" size="19" :class="{'icon-is-expanded': isExpanded1}" @click="isExpanded1 = !isExpanded1"></uni-icons>
|
||||
</div>
|
||||
<uni-forms ref="baseForm" label-align="right">
|
||||
<uni-forms-item label="维修数量">
|
||||
<uni-easyinput
|
||||
|
|
@ -104,9 +107,59 @@
|
|||
</uni-forms>
|
||||
</view>
|
||||
|
||||
<!-- 维修报废 -->
|
||||
<view class="table-list-item top-content" :class="{'is-expanded': isExpanded2}">
|
||||
<div class="top-title">
|
||||
<h2 style="padding: 4rpx 0; font-weight: bold">维修报废</h2>
|
||||
<uni-icons class="icon" type="down" size="19" :class="{'icon-is-expanded': isExpanded2}" @click="isExpanded2 = !isExpanded2"></uni-icons>
|
||||
</div>
|
||||
<uni-forms ref="baseForm" label-align="right">
|
||||
<uni-forms-item label="报废数量">
|
||||
<uni-easyinput
|
||||
placeholder="请填写报废数量"
|
||||
v-model="formRight.scrapNum"
|
||||
type="number"
|
||||
:clearable="false"
|
||||
@input="repairCheckNum3"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="报废原因">
|
||||
<uni-easyinput
|
||||
placeholder="请填写报废原因" maxlength="50"
|
||||
v-model="formRight.scrapReason"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="损坏原因">
|
||||
<uni-data-select v-model="formRight.scrapType"
|
||||
:localdata="damageReasonList"
|
||||
placeholder="请选择损坏原因"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<!-- <uni-forms-item label="其他原因">
|
||||
<uni-easyinput placeholder="请填写其他原因" />
|
||||
</uni-forms-item> -->
|
||||
<uni-forms-item label="附件">
|
||||
<!-- <div class="upload" @click="uploadScrapImg" v-if="imgBeseUrl2==''">+</div>-->
|
||||
<!-- <div class="upload" @click="uploadScrapImg" v-else>-->
|
||||
<!-- <image :src="imgBeseUrl2" style="width: 160rpx;height: 160rpx;" mode=""></image>-->
|
||||
<!-- </div>-->
|
||||
<div class="upload-container">
|
||||
<div class="upload" @click="uploadImg2" v-if="imgList2.length < 3">+</div>
|
||||
<div class="image-preview" v-for="(img, index) in imgList2" :key="index">
|
||||
<image :src="img.url" mode="aspectFill"></image>
|
||||
<view class="delete-btn" @click.stop="deleteImage2(index)">×</view>
|
||||
</div>
|
||||
</div>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
|
||||
<!-- 返厂维修 -->
|
||||
<view class="table-list-item">
|
||||
<view class="table-list-item top-content" :class="{'is-expanded': isExpanded3}">
|
||||
<div class="top-title">
|
||||
<h2 style="padding: 4rpx 0; font-weight: bold">返厂维修</h2>
|
||||
<uni-icons class="icon" type="down" size="19" :class="{'icon-is-expanded': isExpanded3}" @click="isExpanded3 = !isExpanded3"></uni-icons>
|
||||
</div>
|
||||
<uni-forms ref="baseForm" label-align="right">
|
||||
<uni-forms-item label="维修数量">
|
||||
<uni-easyinput
|
||||
|
|
@ -162,50 +215,6 @@
|
|||
</div>
|
||||
</uni-forms>
|
||||
</view>
|
||||
|
||||
<!-- 维修报废 -->
|
||||
<view class="table-list-item">
|
||||
<h2 style="padding: 4rpx 0; font-weight: bold">维修报废</h2>
|
||||
<uni-forms ref="baseForm" label-align="right">
|
||||
<uni-forms-item label="报废数量">
|
||||
<uni-easyinput
|
||||
placeholder="请填写报废数量"
|
||||
v-model="formRight.scrapNum"
|
||||
type="number"
|
||||
:clearable="false"
|
||||
@input="repairCheckNum3"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="报废原因">
|
||||
<uni-easyinput
|
||||
placeholder="请填写报废原因" maxlength="50"
|
||||
v-model="formRight.scrapReason"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="损坏原因">
|
||||
<uni-data-select v-model="formRight.scrapType"
|
||||
:localdata="damageReasonList"
|
||||
placeholder="请选择损坏原因"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<!-- <uni-forms-item label="其他原因">
|
||||
<uni-easyinput placeholder="请填写其他原因" />
|
||||
</uni-forms-item> -->
|
||||
<uni-forms-item label="附件">
|
||||
<!-- <div class="upload" @click="uploadScrapImg" v-if="imgBeseUrl2==''">+</div>-->
|
||||
<!-- <div class="upload" @click="uploadScrapImg" v-else>-->
|
||||
<!-- <image :src="imgBeseUrl2" style="width: 160rpx;height: 160rpx;" mode=""></image>-->
|
||||
<!-- </div>-->
|
||||
<div class="upload-container">
|
||||
<div class="upload" @click="uploadImg2" v-if="imgList2.length < 3">+</div>
|
||||
<div class="image-preview" v-for="(img, index) in imgList2" :key="index">
|
||||
<image :src="img.url" mode="aspectFill"></image>
|
||||
<view class="delete-btn" @click.stop="deleteImage2(index)">×</view>
|
||||
</div>
|
||||
</div>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -226,6 +235,9 @@ import {onLoad, onShow} from '@dcloudio/uni-app'
|
|||
const loading = ref(false)
|
||||
const queryParams = ref({})
|
||||
const rowData = ref({})
|
||||
const isExpanded1 = ref(true)
|
||||
const isExpanded2 = ref(true)
|
||||
const isExpanded3 = ref(false)
|
||||
onLoad((options) => {
|
||||
queryParams.value = JSON.parse(options.queryParams)
|
||||
rowData.value = JSON.parse(options.queryParams)
|
||||
|
|
@ -679,6 +691,29 @@ const costCheckNum = (item) => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-content {
|
||||
max-height: 50px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.5s ease-out;
|
||||
|
||||
&.is-expanded {
|
||||
max-height: 800px;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
margin-top: -22px;
|
||||
transition: transform 0.5s ease; /* 添加动画过渡 */
|
||||
transform: rotate(0deg);
|
||||
|
||||
&.icon-is-expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.top-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -764,11 +799,12 @@ const costCheckNum = (item) => {
|
|||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
padding-left: 24rpx;
|
||||
margin-left: 10px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
left: -10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
|
|
|
|||
Loading…
Reference in New Issue