Skip to content

S
self-support
Commit ff5082c3 authored by Damon's avatar Damon
Browse files
Options

提交工具栏

parent 9164eccf
Show whitespace changes
Inline Side-by-side
Showing with 251 additions and 97 deletions
src/components/select-parts/adjust.md
View file @ ff5082c3
## 配件组件使用说明 ## 配件数量调整组件使用说明
``` ```
该组件用于仓库配件的数量调整 该组件用于仓库配件的数量调整
......
src/components/select-parts/adjust.vue
View file @ ff5082c3
...@@ -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>
......
src/components/select-parts/index.md
View file @ ff5082c3
## 配件组件使用说明 ## 配件选择组件使用说明
``` ```
该组件用于备件申请，数量调整 该组件用于备件申请，数量调整
......
src/components/select-parts/index.vue
View file @ ff5082c3
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
{{ info.no }} {{ info.no }}
</view> </view>
<view class="num"> <view class="num">
<u-number-box v-if="!info.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>
<u-button v-if="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button> <u-button v-if="info.disabled" type="primary" size="mini" shape="circle" @click="addApply">加入申请</u-button>
</view> </view>
</view> </view>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
showChecked: { // 是否需要勾选 showChecked: { // 是否需要勾选
type: Boolean, type: Boolean,
default () { default () {
return false return true
} }
}, },
disabled: { // 是否可编辑数量 disabled: { // 是否可编辑数量
...@@ -55,7 +55,6 @@ ...@@ -55,7 +55,6 @@
} }
}, },
created() { created() {
console.log("this.info", this.info)
}, },
methods: { methods: {
selectChange(event) { selectChange(event) {
......
src/components/submit-bar/index.vue 0 → 100644
View file @ ff5082c3
<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">确定</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
}
}
},
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;
.u-flex {
flex-direction: column;
align-items: center;
}
.bottom-left {
margin-right: 10rpx;
.left-list {
width: 100%;
&:nth-of-type(1) {
padding-left: 10rpx;
}
&:nth-of-type(2) {
padding-top: 20rpx;
}
}
}
.bottom-center {
flex: 1;
margin-right: 20rpx;
align-items: flex-start;
.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;
.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 @ ff5082c3
## 提交工具栏组件使用说明
```
该组件用于勾选配件，显示配件数量以及提交操作
```
## 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 | | 合计总件数 |
### 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/order/parts.vue
View file @ ff5082c3
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
v-for="(item, index) in lists" v-for="(item, index) in lists"
:key="index" :key="index"
:info="item" :info="item"
:show-checked="false" :show-checked="true"
@numChange="numChange($event, index)" @numChange="numChange($event, index)"
@selectChange="selectChange($event, index)" @selectChange="selectChange($event, index)"
@apply="apply(index)" @apply="apply(index)"
...@@ -15,31 +15,27 @@ ...@@ -15,31 +15,27 @@
<view v-else class="empty">暂无可用备件</view> <view v-else class="empty">暂无可用备件</view>
</view> </view>
<view class="u-flex bottom"> <submit-bar
<view class="u-flex bottom-left"> :partNum="partNum"
<view class="left-list"><u-checkbox v-model="allChecked" @change="allSelect" shape="circle" width="30rpx" /></view> :num="num"
<view class="left-list">全选</view> :btnStatus="btnStatus"
</view> :allChecked="allChecked"
<view class="u-flex bottom-center"> @select="allSelect"
<view class="center-list">已选择 {{ partNum }} 种配件</view> @submit="submit"
<view class="center-list">合计 <text class="num"> {{ num }} </text> 件</view> />
</view>
<view class="u-flex bottom-right">
<button :class="['btn', btnStatus]" @click="submit">确定</button>
</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 {
allChecked: false,
lists: [ lists: [
{ {
id: 1, id: 1,
...@@ -82,15 +78,23 @@ ...@@ -82,15 +78,23 @@
} }
}, },
computed: { computed: {
// 配件数
partNum() { partNum() {
return this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0) return this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0)
}, },
// 总数
num() { num() {
return this.lists.reduce((counter, { checked, num }) => checked ? counter += num : counter, 0) return this.lists.reduce((counter, { checked, num }) => checked ? counter += num : counter, 0)
}, },
// 按钮状态
btnStatus() { btnStatus() {
const count = this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0) const count = this.lists.reduce((counter, { checked }) => checked ? counter += 1 : counter, 0)
return count === 0 ? 'btn-disabled' : '' return count > 0 || false
},
// 全选状态
allChecked() {
const count = this.lists.reduce((counter, { checked }) => !checked ? counter += 1 : counter, 0)
return count === 0 || false
} }
}, },
methods: { methods: {
...@@ -102,17 +106,15 @@ ...@@ -102,17 +106,15 @@
}, },
selectChange(val, index) { selectChange(val, index) {
this.$set(this.lists[index], 'checked', val) this.$set(this.lists[index], 'checked', val)
const count = this.lists.filter(v => !v.checked).length
this.allChecked = count === 0 || false
}, },
allSelect() { allSelect(value) {
const count = this.lists.filter(v => !v.checked).length const count = this.lists.filter(v => !v.checked).length
this.lists.forEach(v => { this.lists.forEach(v => {
this.$set(v, 'checked', count !== 0 || false) this.$set(v, 'checked', count !== 0 || false)
}) })
}, },
submit() { submit() {
console.log("this.val", this.val) console.log('submit')
} }
} }
} }
...@@ -135,69 +137,5 @@ ...@@ -135,69 +137,5 @@
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.bottom {
width: 100%;
padding: 0 40rpx;
font-size: 28rpx;
height: 180rpx;
.u-flex {
flex-direction: column;
align-items: center;
}
.bottom-left {
margin-right: 10rpx;
.left-list {
width: 100%;
&:nth-of-type(1) {
padding-left: 10rpx;
}
&:nth-of-type(2) {
padding-top: 20rpx;
}
}
}
.bottom-center {
flex: 1;
margin-right: 20rpx;
.center-list {
margin-right: auto;
&: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;
.btn {
width: 100%;
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;
}
}
.btn-disabled {
background: #D1D4D4;
}
}
}
} }
</style> </style>
src/pages/order/partsList.vue
View file @ ff5082c3
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<u-search <u-search
:clearabled="true" :clearabled="true"
:action-style="searchStyle" :action-style="searchStyle"
bg-color="#fff"
@custom="searchParts" @custom="searchParts"
@search="searchParts" @search="searchParts"
></u-search> ></u-search>
...@@ -204,11 +205,7 @@ export default { ...@@ -204,11 +205,7 @@ export default {
computed: { computed: {
searchStyle() { searchStyle() {
return { return {
background: "#2272FF", color: "#2272FF"
color: "#FFFFFF",
padding: "10rpx 20rpx",
width: "110rpx",
"border-radius": "10rpx",
}; };
}, },
}, },
...@@ -249,7 +246,6 @@ export default { ...@@ -249,7 +246,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.content { .content {
background: #fff;
padding: 30rpx; padding: 30rpx;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
......
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