From ff5082c333b7a07c4ce71aa543e6332078305dcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=9C=B3=E5=93=B2?= <wuzhenzhe@weixiuhui.cn>
Date: Tue, 22 Jun 2021 18:51:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E5=B7=A5=E5=85=B7=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/select-parts/adjust.md  |   2 +-
 src/components/select-parts/adjust.vue |   2 +-
 src/components/select-parts/index.md   |   2 +-
 src/components/select-parts/index.vue  |   5 +-
 src/components/submit-bar/index.vue    | 141 +++++++++++++++++++++++++
 src/components/submit-bar/readme.md    |  80 ++++++++++++++
 src/pages/order/parts.vue              | 108 ++++---------------
 src/pages/order/partsList.vue          |   8 +-
 8 files changed, 251 insertions(+), 97 deletions(-)
 create mode 100644 src/components/submit-bar/index.vue
 create mode 100644 src/components/submit-bar/readme.md

diff --git a/src/components/select-parts/adjust.md b/src/components/select-parts/adjust.md
index e316012..9d04668 100644
--- a/src/components/select-parts/adjust.md
+++ b/src/components/select-parts/adjust.md
@@ -1,4 +1,4 @@
-## 配件组件使用说明
+## 配件数量调整组件使用说明
 
 ```
 该组件用于仓库配件的数量调整
diff --git a/src/components/select-parts/adjust.vue b/src/components/select-parts/adjust.vue
index 4d75bb2..14b49a0 100644
--- a/src/components/select-parts/adjust.vue
+++ b/src/components/select-parts/adjust.vue
@@ -5,7 +5,7 @@
         {{info.name}}
       </view>
       <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>
       </view>
     </view>
diff --git a/src/components/select-parts/index.md b/src/components/select-parts/index.md
index 0e90ffc..e9c8c8f 100644
--- a/src/components/select-parts/index.md
+++ b/src/components/select-parts/index.md
@@ -1,4 +1,4 @@
-## 配件组件使用说明
+## 配件选择组件使用说明
 
 ```
 该组件用于备件申请，数量调整
diff --git a/src/components/select-parts/index.vue b/src/components/select-parts/index.vue
index e9f3dcd..4b67ace 100644
--- a/src/components/select-parts/index.vue
+++ b/src/components/select-parts/index.vue
@@ -15,7 +15,7 @@
             {{ info.no }}
           </view>
           <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>
           </view>
         </view>
@@ -40,7 +40,7 @@
 			showChecked: { // 是否需要勾选
 				type: Boolean,
 				default () {
-					return false
+					return true
 				}
 			},
       disabled: { // 是否可编辑数量
@@ -55,7 +55,6 @@
 			}
 		},
 		created() {
-      console.log("this.info", this.info)
 		},
 		methods: {
       selectChange(event) {
diff --git a/src/components/submit-bar/index.vue b/src/components/submit-bar/index.vue
new file mode 100644
index 0000000..b450367
--- /dev/null
+++ b/src/components/submit-bar/index.vue
@@ -0,0 +1,141 @@
+<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>
diff --git a/src/components/submit-bar/readme.md b/src/components/submit-bar/readme.md
new file mode 100644
index 0000000..51900a2
--- /dev/null
+++ b/src/components/submit-bar/readme.md
@@ -0,0 +1,80 @@
+## 提交工具栏组件使用说明
+
+```
+该组件用于勾选配件，显示配件数量以及提交操作
+```
+
+## 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')
+    }
+  },
+}
+```
diff --git a/src/pages/order/parts.vue b/src/pages/order/parts.vue
index 8dca164..0a2c117 100644
--- a/src/pages/order/parts.vue
+++ b/src/pages/order/parts.vue
@@ -6,7 +6,7 @@
           v-for="(item, index) in lists" 
           :key="index"
           :info="item"
-          :show-checked="false"
+          :show-checked="true"
           @numChange="numChange($event, index)"
           @selectChange="selectChange($event, index)"
           @apply="apply(index)"
@@ -15,31 +15,27 @@
       <view v-else class="empty">暂无可用备件</view>
     </view>
 
-    <view class="u-flex bottom">
-      <view class="u-flex bottom-left">
-        <view class="left-list"><u-checkbox v-model="allChecked" @change="allSelect" 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', btnStatus]" @click="submit">确定</button>
-      </view>
-    </view>
+    <submit-bar 
+      :partNum="partNum"
+      :num="num"
+      :btnStatus="btnStatus"
+      :allChecked="allChecked"
+      @select="allSelect"
+      @submit="submit"
+    />
 	</view>
 </template>
 
 <script>
   import selectParts from "@/components/select-parts/index"
+  import submitBar from "@/components/submit-bar/index"
 	export default {
     components: {
-      selectParts
+      selectParts,
+      submitBar
     },
 		data() {
       return {
-        allChecked: false,
         lists: [
           {
             id: 1,
@@ -82,15 +78,23 @@
       }
     },
     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 ? 'btn-disabled' : ''
+        return count > 0 || false
+      },
+      // 全选状态
+      allChecked() {
+        const count = this.lists.reduce((counter, { checked }) => !checked ? counter += 1 : counter, 0)
+        return count === 0 || false
       }
     },
     methods: {
@@ -102,17 +106,15 @@
       },
       selectChange(val, index) {
         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
         this.lists.forEach(v => {
           this.$set(v, 'checked', count !== 0 || false)
         })
       },
       submit() {
-        console.log("this.val", this.val)
+        console.log('submit')
       }
     }
 	}
@@ -135,69 +137,5 @@
       flex: 1;
       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>
diff --git a/src/pages/order/partsList.vue b/src/pages/order/partsList.vue
index 92bbb46..499bb65 100644
--- a/src/pages/order/partsList.vue
+++ b/src/pages/order/partsList.vue
@@ -4,6 +4,7 @@
       <u-search
         :clearabled="true"
         :action-style="searchStyle"
+        bg-color="#fff"
         @custom="searchParts"
         @search="searchParts"
       ></u-search>
@@ -204,11 +205,7 @@ export default {
   computed: {
     searchStyle() {
       return {
-        background: "#2272FF",
-        color: "#FFFFFF",
-        padding: "10rpx 20rpx",
-        width: "110rpx",
-        "border-radius": "10rpx",
+        color: "#2272FF"
       };
     },
   },
@@ -249,7 +246,6 @@ export default {
 
 <style lang="scss" scoped>
 .content {
-  background: #fff;
   padding: 30rpx;
   flex-direction: column;
   height: 100vh;
-- 
2.23.0