Skip to content

S
self-support
Commit 9117c30c authored by 高铭波's avatar 高铭波
Browse files
Options

Merge branch 'dev' of https://git.banshouhui.com/lijundan/self-support into dev

parents 6730a468 dc9dcd1b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 678 additions and 314 deletions
src/components/select-parts/adjust.md
View file @ 9117c30c
## 配件组件使用说明 ## 配件数量调整组件使用说明
``` ```
该组件用于仓库配件的数量调整 该组件用于仓库配件的数量调整
......
src/components/select-parts/adjust.vue
View file @ 9117c30c
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
{{info.name}} {{info.name}}
</view> </view>
<view class="num"> <view class="num">
<u-number-box v-if="!disabled" v-model="info.num" :min="info.min" :max="info.max" @change="numChange"></u-number-box> <u-number-box v-if="!disabled" v-model="info.num" :min="info.min || 0" :max="info.max || info.num" @change="numChange"></u-number-box>
<text class="nums" v-else>x{{ info.num || 1 }}</text> <text class="nums" v-else>x{{ info.num || 1 }}</text>
</view> </view>
</view> </view>
...@@ -43,7 +43,6 @@ ...@@ -43,7 +43,6 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.parts{ .parts{
padding: 0 20rpx;
.lists { .lists {
padding: 10rpx 0; padding: 10rpx 0;
.name { .name {
......
src/components/select-parts/index.md
View file @ 9117c30c
## 配件组件使用说明 ## 配件选择组件使用说明
``` ```
该组件用于仓库配件的选择与数量调整 该组件用于备件申请，数量调整
``` ```
## API ## API
...@@ -11,20 +11,22 @@ ...@@ -11,20 +11,22 @@
| 属性名 | 类型 | 默认值 | 可选值 | 说明 | | 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :---------: | :-----: | :----: | :--------: | :---------------------: | | :---------: | :-----: | :----: | :--------: | :---------------------: |
| showChecked | Boolean | false | true/false | 是否需要复选框 | | showChecked | Boolean | false | true/false | 是否需要复选框 |
| disabled | Boolean | true | true/false | 是否禁用 |
| info | Object | {} | - | 列表数据 **格式见下文** | | info | Object | {} | - | 列表数据 **格式见下文** |
### lists 格式 ### lists 格式
```json ```json
{ {
"name": "正泰漏保", // 配件名称 id: 1,
"num": 1, // 配件数量 name: "正泰漏保", // 名称
"min": 1, // 数量最小值 no: 'NO.202006170015', // 编号
"max": 100, // 数量最大值 desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下', // 描述
"desc": "NO.202006170015", // 描述 num: 1, // 默认数量
"img": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", // 图片地址 min: 1, // 数量最小值
"checked": false // 勾选状态，如果需要回显勾选状态需传 max: 100, // 数量最大值
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", // 图片
checked: false, // 是否勾选
disabled: true // 是否禁用数量调整，如果禁用则会显示添加申请按钮
} }
``` ```
...@@ -34,6 +36,7 @@ ...@@ -34,6 +36,7 @@
| :-----------: | :----------: | :--------: | | :-----------: | :----------: | :--------: |
| @numChange | 数量发生改变 | 改变的数量 | | @numChange | 数量发生改变 | 改变的数量 |
| @selectChange | 勾选发生改变 | 勾选的状态 | | @selectChange | 勾选发生改变 | 勾选的状态 |
| @apply | 点击添加申请 | 无 |
## 组件用法 ## 组件用法
...@@ -44,9 +47,10 @@ ...@@ -44,9 +47,10 @@
v-for="(item, index) in lists" v-for="(item, index) in lists"
:key="index" :key="index"
:info="item" :info="item"
:show-checked="true" :show-checked="false"
@numChange="numChange" @numChange="numChange($event, index)"
@selectChange="selectChange" @selectChange="selectChange($event, index)"
@apply="apply(index)"
></select-parts> ></select-parts>
``` ```
...@@ -62,34 +66,39 @@ export default { ...@@ -62,34 +66,39 @@ export default {
{ {
id: 1, id: 1,
name: "正泰漏保", name: "正泰漏保",
desc: "NO.202006170015", no: 'NO.202006170015',
desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
num: 1, num: 1,
min: 1, min: 1,
max: 100, max: 100,
img: img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false, checked: false,
disabled: true
}, },
{ {
id: 2, id: 1,
name: "挚达广汽充电桩", name: "挚达广汽充电桩",
desc: "NO.202006170014", no: 'NO.202006170014',
desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
num: 3, num: 3,
min: 1, min: 1,
max: 5, max: 5,
img: img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false, checked: false,
disabled: true
}, },
], ],
} }
}, },
methods: { methods: {
numChange(val) { apply(index) { // 添加申请
console.log("val", val) this.$set(this.lists[index], 'disabled', false)
},
numChange(val, index) { // 设置数量
this.$set(this.lists[index], 'num', val)
}, },
selectChange(val) { selectChange(val, index) { // 设置勾选状态
console.log("val", val) this.$set(this.lists[index], 'checked', val)
}, },
}, },
} }
......
src/components/select-parts/index.vue
View file @ 9117c30c
<template> <template>
<view class="parts"> <view class="u-flex parts">
<uni-list-item <view class="u-flex left" v-if="showChecked">
:title="info.name" <u-checkbox v-model="info.checked" @change="selectChange" shape="circle" width="30rpx"></u-checkbox>
:note="info.desc" </view>
:thumb="info.img" <view class="u-flex right">
thumb-size="lg" <view class="right-img">
:border="false" <u-image :src="info.img" width="200rpx" height="200rpx" />
> </view>
<template slot="header" class="u-flex"> <view class="u-flex right-content">
<view class="uni-list-item__header"> <view class="right-content-name">{{ info.name }}</view>
<view v-if="showChecked" class="uni-list-item__check"><u-checkbox v-model="info.checked" @change="selectChange" shape="circle"></u-checkbox></view> <view class="right-content-desc">{{ info.desc }}</view>
<view v-if="info.img" class="uni-list-item__icon"><image :src="info.img" class="uni-list-item__icon-img" /></view> <view class="u-flex right-content-opera">
<view class="no">
{{ info.no }}
</view> </view>
</template>
<template slot="footer" class="u-flex">
<view class="num"> <view class="num">
<u-number-box v-if="!disabled" v-model="info.num" :min="info.min" :max="info.max" @change="numChange"></u-number-box> <u-number-box v-if="!info.disabled" v-model="info.num" :min="info.min || 0" :max="info.max || info.num" @change="numChange"></u-number-box>
<text class="nums" v-if="disabled">x{{ info.num || 1 }}</text> <u-button v-if="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button>
</view>
</view>
</view>
</view> </view>
</template>
</uni-list-item>
</view> </view>
</template> </template>
<script> <script>
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default { export default {
components: {
uniListItem,
},
props: { props: {
info: { info: {
info () { info () {
...@@ -39,7 +35,7 @@ ...@@ -39,7 +35,7 @@
showChecked: { // 是否需要勾选 showChecked: { // 是否需要勾选
type: Boolean, type: Boolean,
default () { default () {
return false return true
} }
}, },
disabled: { // 是否可编辑数量 disabled: { // 是否可编辑数量
...@@ -54,7 +50,6 @@ ...@@ -54,7 +50,6 @@
} }
}, },
created() { created() {
console.log("this.info", this.info)
}, },
methods: { methods: {
selectChange(event) { selectChange(event) {
...@@ -63,35 +58,59 @@ ...@@ -63,35 +58,59 @@
numChange(event) { numChange(event) {
this.$emit('numChange', event.value) this.$emit('numChange', event.value)
}, },
addApply() {
this.$emit('apply')
}
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.parts{ .parts{
.uni-list-item__header {
display: flex;
flex-direction: row;
align-items: center;
}
.uni-list-item__icon {
margin-right: 18rpx;
flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; padding: 30rpx 10rpx;
border-bottom: 1px solid #F4F5F7;
.left {
width: 60rpx;
} }
.right {
.uni-list-item__icon-img { flex: 1;
overflow: hidden;
.right-img {
padding-right: 20rpx;
}
.right-content {
flex: 1;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
.right-content-name {
font-size: 32rpx;
color: #333;
font-weight: bold;
}
.right-content-desc {
font-size: 24rpx;
color: #999;
overflow: hidden;
line-height: 40rpx;
height: 80rpx; height: 80rpx;
width: 80rpx; margin: 10rpx 0;
margin-right: 10px; }
.right-content-opera {
justify-content: space-between;
width: 100%;
.no {
font-size: 24rpx;
color: #999;
overflow: hidden;
flex: 1;
} }
.num { .num {
display: flex; flex: 1;
align-items: center; text-align: right;
.nums { }
font-size: 28rpx; }
} }
} }
} }
......
src/components/submit-bar/index.vue 0 → 100644
View file @ 9117c30c
<template>
<view class="u-flex bottom">
<view class="u-flex bottom-left" v-if="showChecked">
<view class="left-list"><u-checkbox v-model="checked" @change="selectAll" shape="circle" width="30rpx" /></view>
<view class="left-list">全选</view>
</view>
<view class="u-flex bottom-center">
<view class="center-list">已选择 {{ partNum }} 种配件</view>
<view class="center-list">合计 <text class="num"> {{ num }} </text> 件</view>
</view>
<view class="u-flex bottom-right">
<button :class="['btn', btnActive]" @click="submit">{{ submitTxt }}</button>
</view>
</view>
</template>
<script>
export default {
props: {
showChecked: { // 是否显示勾选
type: Boolean,
default() {
return true
}
},
allChecked: { // 是否全选
type: Boolean,
default() {
return false
}
},
btnStatus: { // 确定按钮是否可点击
type: Boolean,
default() {
return false
}
},
partNum: { // 配件数量
type: Number,
default () {
return 0
}
},
num: { // 合计总件数
type: Number,
default () {
return 0
}
},
submitTxt: { // 提交按钮文字
type: String,
default () {
return '确定'
}
}
},
data() {
return {
checked: false
}
},
computed: {
btnActive() {
return this.btnStatus ? 'btn-active' : ''
}
},
watch: {
'allChecked': function(newValue, oldValue) {
if (this.showChecked) this.checked = newValue
}
},
created() {
if (this.showChecked) this.checked = this.allChecked
},
methods: {
selectAll(event) {
this.$emit('select', event.value)
},
submit() {
if (this.btnStatus) this.$emit('submit')
}
}
}
</script>
<style scoped lang="scss">
.bottom {
width: 100%;
height: 180rpx;
background: #fff;
justify-content: space-between;
.u-flex {
flex-direction: column;
align-items: center;
}
.bottom-left {
margin-left: 30rpx;
.left-list {
width: 100%;
&:nth-of-type(1) {
padding-left: 10rpx;
}
&:nth-of-type(2) {
padding-top: 20rpx;
}
}
}
.bottom-center {
flex: 1;
align-items: flex-start;
margin: 0 20rpx;
.center-list {
&:nth-of-type(1) {
color: #666;
font-size: 26rpx;
}
&:nth-of-type(2) {
color: #333;
font-size: 28rpx;
margin-top: 20rpx;
.num {
color: #2272FF;
padding: 0 10rpx;
}
}
}
}
.bottom-right {
width: 340rpx;
margin-right: 20rpx;
.btn {
width: 100%;
padding: 30rpx;
border-radius: 52rpx;
line-height: 44rpx;
font-size: 32rpx;
text-align: center;
background: #D1D4D4;
color: #fff;
&::after {
content: '';
height: 0;
border: none;
}
}
.btn-active {
background: #2272ff;
}
}
}
</style>
src/components/submit-bar/readme.md 0 → 100644
View file @ 9117c30c
## 提交工具栏组件使用说明
```
该组件用于勾选配件，显示配件数量以及提交操作
```
## API
### Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :------: | :-----: | :----: | :--------: | :-----------------: |
| showChecked | Boolean | true | true/false | 是否显示勾选 |
| allChecked | Boolean | true | true/false | 是否全选 |
| btnStatus | Boolean | true | true/false | 确定按钮是否可点击 |
| btnStatus | Boolean | true | true/false | 确定按钮是否可点击 |
| partNum | Number | 0 | | 配件数量 |
| num | Number | 0 | | 合计总件数 |
| submitTxt | String | 确定 | | 确定按钮文字 |
### Events
| 事件称名 | 说明 | 返回值 |
| :------: | :----------------: | :------: |
| @select | 全选状态改变 | 新的状态 |
| @submit | 点击提交按钮 | |
## 组件用法
### 基础用法
```html
<submit-bar
:partNum="partNum"
:num="num"
:btnStatus="btnStatus"
:allChecked="allChecked"
@select="allSelect"
@submit="submit"
/>
```
```js
import submitBar from "@/components/submit-bar/index"
export default {
components: {
submitBar,
},
data() {
return {
}
},
computed: {
// 配件数
partNum() {
return 0
},
// 总数
num() {
return 0
},
// 按钮状态
btnStatus() {
return false
},
// 全选状态
allChecked() {
return false
}
},
methods: {
allSelect(value) {
console.log(value)
},
submit() {
console.log('submit')
}
},
}
```
src/pages.json
View file @ 9117c30c
...@@ -352,7 +352,7 @@ ...@@ -352,7 +352,7 @@
{ {
"path": "parts", "path": "parts",
"style": { "style": {
"navigationBarTitleText": "备件仓可用的配件" "navigationBarTitleText": "可用备件"
} }
}, },
{ {
......
src/pages/order/parts.vue
View file @ 9117c30c
<template> <template>
<view class="det-wrap"> <view class="u-flex det-wrap">
<view class="content"> <view class="content">
<scroll-view v-if="lists.length > 0" style="height: 70vh;" scroll-y="true"> <scroll-view v-if="lists.length > 0" style="height: 100%;" scroll-y="true">
<select-parts <select-parts
v-for="(item, index) in lists" v-for="(item, index) in lists"
:key="index" :key="index"
:info="item" :info="item"
:show-checked="true" :show-checked="true"
@numChange="numChange" @numChange="numChange($event, index)"
@selectChange="selectChange" @selectChange="selectChange($event, index)"
@apply="apply(index)"
></select-parts> ></select-parts>
</scroll-view> </scroll-view>
<view v-else class="empty">暂无可用备件</view> <view v-else class="empty">暂无可用备件</view>
</view> </view>
<view class="bottom" v-if="lists.length > 0"> <view class="bar">
<button class="btn" @click="submit"> <submit-bar
<text class="button-text">保存，继续完工</text> :partNum="partNum"
</button> :num="num"
:btnStatus="btnStatus"
:allChecked="allChecked"
@select="allSelect"
@submit="submit"
/>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import selectParts from "@/components/select-parts/index" import selectParts from "@/components/select-parts/index"
import submitBar from "@/components/submit-bar/index"
export default { export default {
components: { components: {
selectParts selectParts,
submitBar
}, },
data() { data() {
return { return {
...@@ -34,36 +42,81 @@ ...@@ -34,36 +42,81 @@
{ {
id: 1, id: 1,
name: "正泰漏保", name: "正泰漏保",
desc: 'NO.202006170015', no: 'NO.202006170015',
desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
num: 1, num: 1,
min: 1, min: 1,
max: 100, max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false checked: false,
disabled: true
}, },
{ {
id: 1, id: 1,
name: "挚达广汽充电桩", name: "挚达广汽充电桩",
desc: 'NO.202006170014', no: 'NO.202006170014',
desc: '这个空开盒子和其他的空开有什么不一样，这里可以写一下',
num: 3, num: 3,
min: 1, min: 1,
max: 5, max: 5,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png", img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false checked: false,
disabled: true
},
{
id: 1,
name: "正泰漏保",
no: 'NO.202006170015NO.202006170015',
desc: '这个充电桩的简介可以写的长一点',
num: 1,
min: 1,
max: 100,
img: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
checked: false,
disabled: false
} }
], ],
val: [] val: []
} }
}, },
computed: {
// 配件数
partNum() {
return this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0)
},
// 总数
num() {
return this.lists.reduce((counter, { checked, num }) => checked ? counter += num : counter, 0)
},
// 按钮状态
btnStatus() {
const count = this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0)
return count > 0 || false
},
// 全选状态
allChecked() {
const count = this.lists.reduce((counter, { checked }) => !checked ? counter += 1 : counter, 0)
return count === 0 || false
}
},
methods: { methods: {
numChange(val) { apply(index) {
console.log("val", val) this.$set(this.lists[index], 'disabled', false)
},
numChange(val, index) {
this.$set(this.lists[index], 'num', val)
},
selectChange(val, index) {
this.$set(this.lists[index], 'checked', val)
}, },
selectChange(val) { allSelect(value) {
console.log("val", val) const count = this.lists.filter(v => !v.checked).length
this.lists.forEach(v => {
this.$set(v, 'checked', count !== 0 || false)
})
}, },
submit() { submit() {
console.log("this.val", this.val) console.log('submit')
} }
} }
} }
...@@ -71,39 +124,23 @@ ...@@ -71,39 +124,23 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.det-wrap { .det-wrap {
background: #fff;
flex-flow: column;
height: 100vh;
.content { .content {
border-radius: 12rpx; border-radius: 12rpx;
background: #fff;
padding: 10rpx; padding: 10rpx;
min-height: 70vh; width: 100%;
}
.empty { .empty {
text-align: center; text-align: center;
font-size: 26rpx; font-size: 26rpx;
color: #aaa; color: #aaa;
} }
.bottom { flex: 1;
width: 100%; overflow-y: auto;
padding: 0 40rpx;
font-size: 28rpx;
position: fixed;
bottom: 100rpx;
left: 50%;
margin-left: -50%;
.btn {
padding: 30rpx;
border-radius: 52rpx;
line-height: 44rpx;
font-size: 32rpx;
text-align: center;
background-color: #2272ff;
color: #fff;
&::after {
content: '';
height: 0;
border: none;
}
} }
.bar {
width: 100%;
} }
} }
</style> </style>
src/pages/order/partsList.vue
View file @ 9117c30c
This diff is collapsed.
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