Commit b256eb56 authored by Damon's avatar Damon

refactor: 备件-物料

parent ef4f9e56
<!-- ******************* 配件选择 ******************* -->
<!-- ******************* 物料选择 ******************* -->
<template>
<view>
<view class="list u-flex u-row-between">
<image class="item-image" :src="mixingImage" v-if="item.required"></image>
<view class="u-m-r-20">{{item.fieldsTitle}}</view>
<view class="u-flex-1 add-parts" @click="toParts" v-if="!disabled && lists.length > 0">
添加备件<u-icon name="arrow-right" color="#2979ff" size="30"></u-icon>
添加物料<u-icon name="arrow-right" color="#2979ff" size="30"></u-icon>
</view>
</view>
<view class="complete-part">
......@@ -17,8 +17,8 @@
<image :src="noPartsImage" class="part-icon" />
</view>
<view class="u-flex content">
<text class="title">暂无备件信息</text>
<text class="desc">可选择备件仓备件</text>
<text class="title">暂无物料信息</text>
<text class="desc">可选择物料仓物料</text>
</view>
<view class="btn">
<u-button shape="circle" :custom-style="customStyle" @click="toParts">
......@@ -43,14 +43,14 @@
orderId: {
type: String,
default: ''
},
categoryId: {
type: String,
default: ''
},
brandId: {
type: String,
default: ''
},
categoryId: {
type: String,
default: ''
},
brandId: {
type: String,
default: ''
}
},
data() {
......@@ -72,11 +72,11 @@
},
noPartsImage() {
return process.uniEnv.qn_base_url + 'no_parts.png'
},
selectedParts() {
return this.lists.filter((item) => {
return item.quantity > 0
})
},
selectedParts() {
return this.lists.filter((item) => {
return item.quantity > 0
})
}
},
mounted() {
......
......@@ -8,74 +8,74 @@
<image :src="baseImageUrl + item.image" class="image-content"></image>
</view>
<view :class="['text-content', item.type]">{{item.label}}</view>
</u-button>
<view v-if="item.count && item.count > 0" class="bradge-vidw">{{item.count}}</view>
</u-button>
<view v-if="item.count && item.count > 0" class="bradge-vidw">{{item.count}}</view>
</view>
</view>
</template>
<script>
export default {
props: {
// label: 按钮文字,
// type: 'text'普通按钮;'image'图文按钮
// image: type='image'的时候,按钮图片
// show: 是否显示,
// disabled: 是否禁用,true禁用;false 可以点击
props: {
// label: 按钮文字,
// type: 'text'普通按钮;'image'图文按钮
// image: type='image'的时候,按钮图片
// show: 是否显示,
// disabled: 是否禁用,true禁用;false 可以点击
// customStyle: 自定义button样式
buttons: {
type: Array,
default () {
// id: 0 主流程; 1 过程反馈;2 异常签到; 3 现场拍照; 4 配件申请
// label: 按钮文字,
// type: 'image' 上图片下文字;'text' 纯文字,
// image: 图片名,
// show: 是否显示,
// disabled: 是 禁用;否 正常,
// id: 区分各个按钮
return [{
label: '过程反馈',
type: 'image',
image: 'guochengfankui.png',
show: false,
disabled: false,
id: 1
},
{
label: '异常签到',
type: 'image',
image: 'yichangqiandao.png',
show: false, // 待签到显示
disabled: false,
id: 2
},
{
label: '现场拍照',
type: 'image',
image: 'xiancahngpaizhao.png',
show: false,
disabled: false,
id: 3
},
{
label: '备件申请',
type: 'image',
image: 'peijian.png',
show: false,
disabled: false,
count: 0,
id: 4
},
{
label: '去接单',
type: 'text',
image: '',
show: true,
disabled: false,
id: 0,
customStyle: {
'background-color': '#D1D4D4'
}
// id: 0 主流程; 1 过程反馈;2 异常签到; 3 现场拍照; 4 物料申请
// label: 按钮文字,
// type: 'image' 上图片下文字;'text' 纯文字,
// image: 图片名,
// show: 是否显示,
// disabled: 是 禁用;否 正常,
// id: 区分各个按钮
return [{
label: '过程反馈',
type: 'image',
image: 'guochengfankui.png',
show: false,
disabled: false,
id: 1
},
{
label: '异常签到',
type: 'image',
image: 'yichangqiandao.png',
show: false, // 待签到显示
disabled: false,
id: 2
},
{
label: '现场拍照',
type: 'image',
image: 'xiancahngpaizhao.png',
show: false,
disabled: false,
id: 3
},
{
label: '物料申请',
type: 'image',
image: 'peijian.png',
show: false,
disabled: false,
count: 0,
id: 4
},
{
label: '去接单',
type: 'text',
image: '',
show: true,
disabled: false,
id: 0,
customStyle: {
'background-color': '#D1D4D4'
}
}]
}
}
......@@ -106,7 +106,7 @@
'display': 'flex',
'flex-direction': 'column',
'height': '104rpx',
'width': '100%',
'width': '100%',
},
'disabled': {
......@@ -121,7 +121,7 @@
}
},
},
methods: {
methods: {
// 0 主流程; 1 过程反馈;2 异常签到; 3 现场拍照
handleClick(item) {
if (item.disabled) return
......@@ -140,13 +140,13 @@
.button-view {
max-width: 600rpx;
display: flex;
display: flex;
position: relative;
&.image {}
&.text {
width: 100%;
display: flex;
width: 100%;
display: flex;
justify-content: flex-end;
}
......@@ -154,17 +154,17 @@
display: flex;
flex-direction: column;
width: 100%;
&.image {
margin-right: 22rpx;
&.image {
margin-right: 22rpx;
}
&.text {
width: 360rpx;
margin-left: 18rpx;
&.one {
width: 600rpx;
margin-left: 0rpx;
}
&.text {
width: 360rpx;
margin-left: 18rpx;
&.one {
width: 600rpx;
margin-left: 0rpx;
}
}
.image-view {
flex-shrink: 0;
......@@ -195,21 +195,21 @@
}
}
}
.bradge-vidw {
height: 24rpx;
border-radius: 12rpx;
background-color: #FFFFFF;
position: absolute;
top: -10rpx;
right: 4rpx;
border: 2rpx solid #FA5A49;
color: #FA5A49;
font-size: 16rpx;
line-height: 24rpx;
text-align: center;
min-width: 36rpx;
z-index: 1;
}
}
.bradge-vidw {
height: 24rpx;
border-radius: 12rpx;
background-color: #FFFFFF;
position: absolute;
top: -10rpx;
right: 4rpx;
border: 2rpx solid #FA5A49;
color: #FA5A49;
font-size: 16rpx;
line-height: 24rpx;
text-align: center;
min-width: 36rpx;
z-index: 1;
}
}
}
</style>
</style>
<template>
<!-- 已申请配件cell -->
<!-- 已申请物料cell -->
<view class="return-cell" @click="handleClick">
<view class="title-view">
<text class="title-text" :style="{'color': titleColor}">{{title}}</text>
......
<template>
<!-- 申请配件按钮 -->
<!-- 申请物料按钮 -->
<view class="apply-button">
<u-button :custom-style="customStyle" shape="circle" @click.stop="handleClick" type="primary">
<u-icon class="apply-icon" name="plus"></u-icon>
<text class="apply-text" v-if="showText">申请备件</text>
<text class="apply-text" v-if="showText">申请物料</text>
</u-button>
</view>
</template>
......@@ -32,11 +32,11 @@
'width': this.typeWidth[this.type],
}
}
},
created() {
setTimeout(()=> {
this.$emit('update:type', 'collapse')
}, 3000)
},
created() {
setTimeout(()=> {
this.$emit('update:type', 'collapse')
}, 3000)
},
methods: {
handleClick() {
......@@ -48,12 +48,12 @@
<style lang="scss" scoped>
.apply-button {
.apply-icon {
font-size: 36rpx;
.apply-icon {
font-size: 36rpx;
}
.apply-text {
font-size: 32rpx;
font-size: 32rpx;
padding-left: 10rpx;
}
}
</style>
</style>
......@@ -5,21 +5,21 @@
<!-- 申请列表 -->
<view class="apply-list-view">
<view class="content-view">
<view class="list-content">
<swiper class="swiper" :indicator-dots="true" style="height: 100%;" :current="currentIndex">
<swiper-item v-for="(item, index) in list" :key="index">
<view class="cell-view">
<view class="shadow-view">
<AppliedCell @operate="handleOperate" @express="handleClickExpress" @action="handleClickCell" :info="item" :type="vertical" class="applied-cell"></AppliedCell>
</view>
</view>
</swiper-item>
<view class="list-content">
<swiper class="swiper" :indicator-dots="true" style="height: 100%;" :current="currentIndex">
<swiper-item v-for="(item, index) in list" :key="index">
<view class="cell-view">
<view class="shadow-view">
<AppliedCell @operate="handleOperate" @express="handleClickExpress" @action="handleClickCell" :info="item" :type="vertical" class="applied-cell"></AppliedCell>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="bottom-view">
<view class="bottom-warehouse">
<view class="bottom-title">
<text>备件订单</text>
<text>物料订单</text>
<view class="order-file-right" @click="$u.throttle(handleClick, 500)">
<text>点击查看</text>
<u-icon name="arrow-right"></u-icon>
......@@ -110,12 +110,12 @@
},
handleOperate(partsId, operateType, willStatus) {
this.$emit('operate', partsId, operateType, willStatus)
},
handleClickCell(info) {
this.$emit('action', info)
},
handleClickExpress() {
this.$emit('express', info)
},
handleClickCell(info) {
this.$emit('action', info)
},
handleClickExpress() {
this.$emit('express', info)
},
handleApply() {
this.$emit('apply')
......@@ -143,21 +143,21 @@
flex-direction: column;
.list-content {
height: 100%;
.swiper {
.cell-view {
height: 100%;
padding-bottom: 100rpx;
// display: flex;
// flex-direction: column;
.shadow-view{
border-radius: 12rpx;
margin:30rpx;
height: 100%;
box-shadow: 0px 6px 10px rgba(22,72,155,0.15);
}
}
height: 100%;
.swiper {
.cell-view {
height: 100%;
padding-bottom: 100rpx;
// display: flex;
// flex-direction: column;
.shadow-view{
border-radius: 12rpx;
margin:30rpx;
height: 100%;
box-shadow: 0px 6px 10px rgba(22,72,155,0.15);
}
}
}
}
......@@ -171,10 +171,10 @@
font-weight: bold;
font-size: 32rpx;
margin: 0rpx 30rpx 40rpx 30rpx;
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
align-items: center;
.order-file-right {
.order-file-right {
font-weight: 400;
color: #2272FF;
font-size: 26rpx;
......@@ -239,4 +239,4 @@
}
}
}
</style>
</style>
<template>
<!-- 已申请配件cell -->
<!-- 已申请物料cell -->
<view class="applied-cell" @click="handleClick">
<view class="title-view">
<text class="title-text">{{title}}</text>
......
## 配件数量调整组件使用说明
## 物料数量调整组件使用说明
```
该组件用于仓库配件的数量调整
该组件用于仓库物料的数量调整
```
## API
......@@ -17,8 +17,8 @@
```json
{
"name": "正泰漏保", // 配件名称
"quantity": 1, // 配件数量
"name": "正泰漏保", // 物料名称
"quantity": 1, // 物料数量
"min": 1, // 数量最小值
"max": 100 // 数量最大值
}
......
## 配件选择组件使用说明
## 物料选择组件使用说明
```
该组件用于备件申请,数量调整
该组件用于物料申请,数量调整
```
## API
......
......@@ -44,7 +44,7 @@
return false
}
},
partNum: { // 配件数量
partNum: { // 物料数量
type: Number,
default () {
return 0
......@@ -61,10 +61,10 @@
default () {
return '确定'
}
},
customStyle: {
type: String,
default: 'background-color: #FFFFFF;padding: 0 30rpx;'
},
customStyle: {
type: String,
default: 'background-color: #FFFFFF;padding: 0 30rpx;'
},
},
......
## 提交工具栏组件使用说明
```
该组件用于勾选配件,显示配件数量以及提交操作
该组件用于勾选物料,显示物料数量以及提交操作
```
## API
......@@ -13,7 +13,7 @@
| showChecked | Boolean | true | true/false | 是否显示勾选 |
| allChecked | Boolean | true | true/false | 是否全选 |
| btnStatus | Boolean | true | true/false | 确定按钮是否可点击 |
| partNum | Number | 0 | | 配件数量 |
| partNum | Number | 0 | | 物料数量 |
| num | Number | 0 | | 合计总件数 |
| submitTxt | String | 确定 | | 确定按钮文字 |
......@@ -50,7 +50,7 @@ export default {
}
},
computed: {
// 配件
// 物料
partNum() {
return 0
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment