add 款式委托

src/components/hs-material-thumbnail/hs-material-thumbnail.vue

 <template>
-  <view class="home_con_content_order u-m-t-30" >
+  <view class="home_con_content_order" @click="click">
     <image style="width: 100%;height: 160rpx;" src="@/static/images/home/1@2x.png" mode=""></image>
     <view class="order_tit">
       <view class="u-flex justify-between u-font-32">
@@ -28,6 +28,11 @@ export default {
   },
   data() {
     return {};
+  },
+  methods:{
+    click(){
+      this.$emit("click")
+    }
   }
 }
 </script>

src/config/request/apiList/colors.js

+export default {
+    colors:{
+        // 获取颜色组
+        getColors:{
+            url: "/gdep-mdm/colour/selectColour",
+            method: "get",
+        }
+    }
+}

src/config/request/apiList/orderTicket.js

+// 委托单接口列表
+let base = "/gdep-plm/orderTicket"
+export default {
+    orderTicket:{
+        // 委托单详情
+        detail:{
+            url: `${base}/detail`,
+            method: 'get'
+        },
+        // 新建委托单
+        save:{
+            url: `${base}/save`,
+            method: 'post'
+        },
+        // 编辑委托单
+        update:{
+            url: `${base}/update`,
+            method: 'post'
+        },
+        // 拆分委托单
+        split:{
+            url: `${base}/split`,
+            method: 'post'
+        },
+        // 删除委托单
+        del:{
+            url: `${base}/removeByIds`,
+            method: 'post'
+        },
+        // 取消发布
+        abolishByIds:{
+            url: `${base}/abolishByIds`,
+            method: 'post'
+        },
+        // 确认寄样
+        sendSamplesByIds:{
+            url: `${base}/sendSamplesByIds`,
+            method: 'post'
+        },
+        // 风格树
+        styleTreeList:{
+            url: `${base}/styleTreeList`,
+            method: 'get'
+        }
+    }
+}

src/config/request/apis.js

@@ -4,11 +4,15 @@
 import user from './apiList/user.js'
 import auth from './apiList/auth.js'
 import plm from './apiList/plm.js'
+import color from './apiList/colors.js'
+import orderTicket from './apiList/orderTicket.js'
 // import goods from './apiList/goods.js'
 // import base from './apiList/base.js'
 
 export default {
   ...user,
   ...auth,
+  ...color,
+  ...orderTicket,
   ...plm
 };

src/pages/designCommissioned/addItem.vue

@@ -30,7 +30,7 @@
           <view>
             <view class="u-font-28 u-m-t-18 u-m-b-8">含指定颜色，共可用颜色数量</view>
             <view class="u-flex">
-              <u-number-box v-model="detail.num" :min="minColorsLength"></u-number-box>
+              <u-number-box v-model="detail.colourQuantity" :min="minColorsLength"></u-number-box>
             </view>
           </view>
         </view>
@@ -38,19 +38,22 @@
       <!--风格款数要求-->
       <view class="u-p-30 u-m-b-20 bg-fff">
         <hs-tip-title title="风格款数要求"></hs-tip-title>
-        <view v-for="(item,index) in detail.brandList" :key="index" class="u-p-t-16 u-p-b-30 u-border-bottom">
+        <view v-for="(item,index) in detail.designRequirementsDTOList" :key="index" class="u-p-t-16 u-p-b-30 u-border-bottom">
           <view class="u-flex u-p-b-16">
             <view class="u-line-1 u-flex-1">
               {{item.name}}
             </view>
             <text class="del" @click="showDelModal(index)">删除</text>
           </view>
-          <u-number-box v-model="item.num"></u-number-box>
+          <u-number-box v-model="item.quantity"></u-number-box>
         </view>
-        <view class="brandList-tip u-m-t-20 u-m-b-20">
+        <view class="brandList-tip u-m-t-20 " v-if="total>0">
           需求款式总数  {{total}}款
         </view>
-        <u-button plain @click="addBrandList"  type="primary">+添加风格</u-button>
+        <view class="u-m-t-20">
+          <u-button plain @click="addBrandList"  type="primary">+添加风格</u-button>
+        </view>
+
       </view>
       <!--截止日期-->
       <view class="u-p-30 bg-fff">
@@ -59,7 +62,7 @@
           <view class="u-font-28 u-m-t-18 u-m-b-8"></view>
           <view class="u-flex">
             <view class="u-line-1 u-flex-1 u-font-32">
-              <input v-model="detail.date" @click="timePickerShow = true" readonly />
+              <input v-model="detail.expirationDate" @click="timePickerShow = true" readonly />
             </view>
             <u-icon name="arrow-right"></u-icon>
           </view>
@@ -80,7 +83,7 @@
           <view class="u-font-28 u-m-t-18 u-m-b-8">其他描述(选填)</view>
           <view class="u-flex">
             <view class="u-line-1 u-flex-1 u-font-32">
-              <u-input v-model="detail.desc"></u-input>
+              <u-input v-model="detail.otherDescribe"></u-input>
             </view>
           </view>
         </view>
@@ -99,6 +102,8 @@
     </view>
     <!--风格款数选择-->
     <u-select
+        label-name="name"
+        value-name="id"
         @confirm="brandSelectCallback"
         safe-area-inset-bottom v-model="brandSelectShow" :list="brandSelectList" mode="mutil-column-auto"></u-select>
     <!--日期选择-->
@@ -158,11 +163,14 @@
 </template>
 
 <script>
+import dom from "./mixins/dom"
+import styleTree from "./mixins/styleTree"
 import HsTipTitle from "../../components/hs-tip-title/hs-tip-title";
 import HsMaterialThumbnail from "../../components/hs-material-thumbnail/hs-material-thumbnail";
 export default {
   name: "index",
   components: {HsMaterialThumbnail, HsTipTitle},
+  mixins:[dom,styleTree],
   data(){
     return{
       timePickerShow: false,
@@ -174,58 +182,21 @@ export default {
       },
       activeIndex: -1,
       detail:{
-        num: 12,
-        brandList: [
-          {name: '男装｜上装｜25～35岁｜时尚休闲', num: 12},
-          {name: '男装｜上装｜15～25岁｜时尚休闲时尚休闲时', num: 12},
+        materialId: 1, // todo 主数据面料id
+        fileCode: '',  // 面料主图code
+        colourQuantity: 0, //可用颜色数量
+        designRequirementsDTOList: [
+          // {
+          //   "styleId": 1, //风格要求id
+          //   "quantity": 20 //风格要求款数
+          // }
         ],
-        colors: [],
-        date: "2020-02-12",
-        brand: "",
-        desc: "",
+        colourList: [],     //选中颜色
+        expirationDate: "", //截止日期
+        // brand: "",
+        otherDescribe: "", //其他描述
       },
-      brandSelectList: [
-        {
-          value: 1,
-          label: '男装',
-          children: [
-            {
-              value: 11,
-              label: '上装',
-              children:[
-                {
-                  value: 21,
-                  label: '18-25岁',
-                  children:[
-                    {
-                      value: 31,
-                      label: '时尚休闲',
-                    },
-                    {
-                      value: 32,
-                      label: '运动',
-                    }
-                  ]
-                },
-                {
-                  value: 22,
-                  label: '25-35岁',
-                  children:[
-                    {
-                      value: 33,
-                      label: '时尚休闲',
-                    },
-                    {
-                      value: 34,
-                      label: '运动',
-                    }
-                  ]
-                },
-              ]
-            }
-          ]
-        }
-      ],
+      brandSelectList: [], // 风格 tree
       colors: [], //颜色组
       colorDialog:{
         show: false,
@@ -295,45 +266,47 @@ export default {
           ...{
             selectLength:  this.setLength(item,this.activeColorIds),
             selectText: this.setText(item,this.activeColorIds),
-            checked: (this.detail.colors || [])
+            checked: (this.detail.colourList || [])
                 .map(($item) => {
-                  return $item.id
+                  return $item.mdmColourId
                 })
-                .indexOf(item.id) > -1
+                .indexOf(item.mdmColourId) > -1
           }
         }
       })
     },
     // 选中的颜色id List
     activeColorIds(){
-      return this.detail.colors.map((item) =>{
-        return item.id
+      return this.detail.colourList.map((item) =>{
+        return item.mdmColourId
       });
     },
     // 选中的颜色id List
     activeColorText(){
-      return this.detail.colors.map((item) =>{
+      return this.detail.colourList.map((item) =>{
         return item.colour
       }).join("｜");
     },
     // 最小颜色长度
     minColorsLength(){
-      return this.detail.colors.length
+      return this.detail.colourList.length
     },
     // 风格款数 总数
     total(){
-      return this.detail.brandList
+      return this.detail.designRequirementsDTOList
         .filter((item) =>{
           return item.isDeleted !== true
         })
         .reduce((total,currentValue) =>{
-          return total + currentValue.num;
+          return total + currentValue.quantity;
         },0)
     }
   },
   created() {
     // 获取颜色组
     this.getColors();
+    // 获取风格数据
+    this.getStyleTreeList();
   },
   mounted() {
     this.uGetRect("#footer").then(res =>{
@@ -344,6 +317,23 @@ export default {
     })
   },
   methods:{
+    getColors(){
+      this.$http("colors.getColors").then(res =>{
+        let {
+          code, data
+        } = res;
+        if(code === 200){
+          this.colors = data.map((item) =>{
+            return {
+              ...item,
+              mdmColourId: item.id
+            }
+          });
+        }
+      })
+    },
+
+
     setLength(item,target){
       if(item.children){
         return item.children.filter($item =>{
@@ -365,7 +355,7 @@ export default {
       }
     },
     colorsReset(){
-      this.detail.colors = []
+      this.detail.colourList = []
     },
     colorsConfirm(){
       if(this.colorDialog.levels.length > 1){
@@ -377,16 +367,15 @@ export default {
     // 层级选择
     treeClick(treeItem,index) {
       if(this.colorDialog.levels.length > 1){
-        let index = this.detail.colors.findIndex((item) => {
+        let index = this.detail.colourList.findIndex((item) => {
           return item.id === treeItem.id
         });
         if(index > -1){
-          this.detail.colors.splice(index,1)
+          this.detail.colourList.splice(index,1)
         }else {
-          this.detail.colors.push(treeItem);
+          this.detail.colourList.push(treeItem);
         }
-        // this.detail.colors.push(treeItem);
-        // console.log(treeItem)
+        this.detail.colourQuantity = this.detail.colourList.length
       }else{
         this.colorDialog.levels.push(index);
       }
@@ -394,407 +383,15 @@ export default {
     colorDialogLevelPop(){
       this.colorDialog.levels.pop();
     },
-    getColors(){
-      this.colors = [
-        {
-          "id": 1,
-          "colourGroup": "黑色",
-          "colour": "土黑色",
-          "colourCode": "101",
-          "selfCode": "bm101",
-          "pantoneEncode": "Black A"
-        },
-        {
-          "id": 2,
-          "colourGroup": "黑色",
-          "colour": "煤黑色",
-          "colourCode": "102",
-          "selfCode": "bm102",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 3,
-          "colourGroup": "黑色",
-          "colour": "炭黑色",
-          "colourCode": "103",
-          "selfCode": "bm103",
-          "pantoneEncode": "Black C"
-        },
-        {
-          "id": 4,
-          "colourGroup": "黑色",
-          "colour": "古铜黑",
-          "colourCode": "104",
-          "selfCode": "bm104",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 5,
-          "colourGroup": "黑色",
-          "colour": "铁黑色",
-          "colourCode": "105",
-          "selfCode": "bm105",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 6,
-          "colourGroup": "黑色",
-          "colour": "橄榄黑",
-          "colourCode": "106",
-          "selfCode": "bm106",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 7,
-          "colourGroup": "黑色",
-          "colour": "棕黑色",
-          "colourCode": "107",
-          "selfCode": "bm107",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 8,
-          "colourGroup": "黑色",
-          "colour": "青黑色",
-          "colourCode": "108",
-          "selfCode": "bm108",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 9,
-          "colourGroup": "黑色",
-          "colour": "深黑色",
-          "colourCode": "109",
-          "selfCode": "bm109",
-          "pantoneEncode": "潘通色号3"
-        },
-        {
-          "id": 10,
-          "colourGroup": "蓝色",
-          "colour": "土蓝色",
-          "colourCode": "201",
-          "selfCode": "bm201",
-          "pantoneEncode": "Black A"
-        },
-        {
-          "id": 11,
-          "colourGroup": "蓝色",
-          "colour": "煤蓝色",
-          "colourCode": "202",
-          "selfCode": "bm202",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 12,
-          "colourGroup": "蓝色",
-          "colour": "炭蓝色",
-          "colourCode": "203",
-          "selfCode": "bm203",
-          "pantoneEncode": "Black C"
-        },
-        {
-          "id": 13,
-          "colourGroup": "蓝色",
-          "colour": "古铜蓝",
-          "colourCode": "204",
-          "selfCode": "bm204",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 14,
-          "colourGroup": "蓝色",
-          "colour": "铁蓝色",
-          "colourCode": "205",
-          "selfCode": "bm205",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 15,
-          "colourGroup": "蓝色",
-          "colour": "橄榄蓝",
-          "colourCode": "206",
-          "selfCode": "bm206",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 16,
-          "colourGroup": "蓝色",
-          "colour": "棕蓝色",
-          "colourCode": "207",
-          "selfCode": "bm207",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 17,
-          "colourGroup": "蓝色",
-          "colour": "青蓝色",
-          "colourCode": "208",
-          "selfCode": "bm208",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 18,
-          "colourGroup": "蓝色",
-          "colour": "深蓝色",
-          "colourCode": "209",
-          "selfCode": "bm209",
-          "pantoneEncode": "潘通色号3"
-        },
-        {
-          "id": 19,
-          "colourGroup": "绿色",
-          "colour": "土绿色",
-          "colourCode": "301",
-          "selfCode": "bm301",
-          "pantoneEncode": "Black A"
-        },
-        {
-          "id": 20,
-          "colourGroup": "绿色",
-          "colour": "煤绿色",
-          "colourCode": "302",
-          "selfCode": "绿色",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 21,
-          "colourGroup": "绿色",
-          "colour": "炭绿色",
-          "colourCode": "303",
-          "selfCode": "bm303",
-          "pantoneEncode": "Black C"
-        },
-        {
-          "id": 22,
-          "colourGroup": "绿色",
-          "colour": "古铜绿",
-          "colourCode": "304",
-          "selfCode": "bm30",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 23,
-          "colourGroup": "绿色",
-          "colour": "铁绿色",
-          "colourCode": "305",
-          "selfCode": "bm305",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 24,
-          "colourGroup": "绿色",
-          "colour": "橄榄绿",
-          "colourCode": "306",
-          "selfCode": "bm306",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 25,
-          "colourGroup": "绿色",
-          "colour": "棕绿色",
-          "colourCode": "307",
-          "selfCode": "bm307",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 26,
-          "colourGroup": "绿色",
-          "colour": "青绿色",
-          "colourCode": "308",
-          "selfCode": "bm308",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 27,
-          "colourGroup": "绿色",
-          "colour": "深绿色",
-          "colourCode": "309",
-          "selfCode": "bm309",
-          "pantoneEncode": "潘通色号3"
-        },
-        {
-          "id": 28,
-          "colourGroup": "红色",
-          "colour": "土红色",
-          "colourCode": "401",
-          "selfCode": "bm401",
-          "pantoneEncode": "Black A"
-        },
-        {
-          "id": 37,
-          "colourGroup": "白色",
-          "colour": "乳白色",
-          "colourCode": "501",
-          "selfCode": "bm501",
-          "pantoneEncode": "Black A"
-        },
-        {
-          "id": 43,
-          "colourGroup": "其他色",
-          "colour": "迷彩色",
-          "colourCode": "601",
-          "selfCode": "bm601",
-          "pantoneEncode": "Black A"
-        },
-        {
-          "id": 29,
-          "colourGroup": "红色",
-          "colour": "煤红色",
-          "colourCode": "402",
-          "selfCode": "bm402",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 38,
-          "colourGroup": "白色",
-          "colour": "奶白色",
-          "colourCode": "502",
-          "selfCode": "bm502",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 44,
-          "colourGroup": "其他色",
-          "colour": "扎染色",
-          "colourCode": "602",
-          "selfCode": "bm602",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 30,
-          "colourGroup": "红色",
-          "colour": "炭红色",
-          "colourCode": "403",
-          "selfCode": "bm403",
-          "pantoneEncode": "Black C"
-        },
-        {
-          "id": 39,
-          "colourGroup": "白色",
-          "colour": "银白色",
-          "colourCode": "503",
-          "selfCode": "白色",
-          "pantoneEncode": "Black C"
-        },
-        {
-          "id": 45,
-          "colourGroup": "其他色",
-          "colour": "其他色",
-          "colourCode": "603",
-          "selfCode": "bm603",
-          "pantoneEncode": "Black C"
-        },
-        {
-          "id": 31,
-          "colourGroup": "红色",
-          "colour": "古铜红",
-          "colourCode": "404",
-          "selfCode": "bm404",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 40,
-          "colourGroup": "白色",
-          "colour": "苍白色",
-          "colourCode": "504",
-          "selfCode": "bm504",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 46,
-          "colourGroup": "其他色",
-          "colour": "水洗色",
-          "colourCode": "604",
-          "selfCode": "bm604",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 32,
-          "colourGroup": "红色",
-          "colour": "铁红色",
-          "colourCode": "405",
-          "selfCode": "bm405",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 41,
-          "colourGroup": "白色",
-          "colour": "葱白色",
-          "colourCode": "505",
-          "selfCode": "bm505",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 47,
-          "colourGroup": "其他色",
-          "colour": "皮肤色",
-          "colourCode": "605",
-          "selfCode": "bm605",
-          "pantoneEncode": "Black B"
-        },
-        {
-          "id": 33,
-          "colourGroup": "红色",
-          "colour": "橄榄红",
-          "colourCode": "406",
-          "selfCode": "bm406",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 42,
-          "colourGroup": "白色",
-          "colour": "月白红",
-          "colourCode": "506",
-          "selfCode": "bm506",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 34,
-          "colourGroup": "红色",
-          "colour": "棕红色",
-          "colourCode": "407",
-          "selfCode": "bm407",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 35,
-          "colourGroup": "红色",
-          "colour": "青红色",
-          "colourCode": "408",
-          "selfCode": "bm408",
-          "pantoneEncode": ""
-        },
-        {
-          "id": 36,
-          "colourGroup": "红色",
-          "colour": "深红色",
-          "colourCode": "409",
-          "selfCode": "bm409",
-          "pantoneEncode": "潘通色号3"
-        }
-      ]
-    },
-    uGetRect(selector, all) {
-      return new Promise((resolve) => {
-        uni.createSelectorQuery()
-            .in(this)[all ? 'selectAll' : 'select'](selector)
-            .boundingClientRect((rect) => {
-              if (all && Array.isArray(rect) && rect.length) {
-                resolve(rect)
-              }
-              if (!all && rect) {
-                resolve(rect)
-              }
-            })
-            .exec()
-      })
-    },
+
     addBrandList(){
       this.brandSelectShow = true;
     },
     brandSelectCallback(e){
-      this.detail.brandList.push({
-        num: 0,
+      this.detail.designRequirementsDTOList.push({
+        quantity: 0,
+        styleId: e[e.length - 1].id,
+        isDeleted: false,
         name: e.map((item) => {
           return item.label
         }).join("｜")
@@ -802,7 +399,7 @@ export default {
     },
     // 显示删除模态框
     showDelModal(index){
-      this.model.show = true;
+      this.modal.show = true;
       this.activeIndex = index;
     },
     // 显示删除模态框
@@ -810,7 +407,7 @@ export default {
       this.delBrandRow(this.activeIndex);
     },
     delBrandRow(index) {
-      this.detail.brandList.splice(index,1)
+      this.detail.designRequirementsDTOList.splice(index,1)
     },
     timePickerCallback(e){
       let {
@@ -818,7 +415,10 @@ export default {
         month,
         year,
       } = e;
-      this.detail.date = [year,month,day].join("-")
+      this.detail.expirationDate = [year,month,day].join("-")
+    },
+    submit(){
+
     }
   }
 }

src/pages/designCommissioned/list.vue

@@ -18,15 +18,16 @@
                        swiperWidth="750"></u-tabs-swiper>
       </view>
       <!--状态栏 tab-->
-      <view v-if="!status[current].status">
+      <view v-if="!status[current].close">
         <view class="list-tip u-flex u-p-r-30 u-p-l-30" >
-          <text class="u-flex-1">
-            全部总共 {{totalNum}}款
-          </text>
+
           <text class="u-flex-1" v-if="current === 3">
             已选中{{ selectedLength}} 款
           </text>
-          <u-icon name="close"></u-icon>
+          <text class="u-flex-1" v-if="current !== 3">
+            {{status[current].label}}总共 {{totalNum}}款
+          </text>
+          <u-icon name="close" @click="closeTip"></u-icon>
         </view>
       </view>
     </view>
@@ -35,9 +36,7 @@
        <view v-for="(item,index) in data">
          <view class="u-flex u-p-t-12 u-p-b-12">
            <text class="u-flex-1">
-             {{ item.label }}(20 款)
-<!--             {{item.children.length}}-->
-<!--             款)-->
+             {{ item.label }}({{item.children.length}} 款)
            </text>
            <text class="" @click="collapse(index)">
              {{ activeIndex === index ? '收起': '展开' }}
@@ -92,107 +91,76 @@
 
 <script>
 import status from './mixins/status'
+import dom from './mixins/dom'
 import HsTipTitle from "../../components/hs-tip-title/hs-tip-title";
 export default {
   name: "list",
   components: {HsTipTitle},
-  mixins: [status],
+  mixins: [status,dom],
   data() {
     return {
       current: 0, // tabs组件的current值，表示当前活动的tab选项
       activeIndex: 0,
       // data: ,
-      res: [] , //列表数据源
-      headerHeight: 0,
-      footerHeight: 0
+      res: [
+        {date: '12月11日', title: '立领夹克',status: 1},
+        {date: '12月11日', title: '立领夹克',status: 1},
+        {date: '12月10日', title: '立领夹克1',status: 1},
+        {date: '12月10日', title: '立领夹克1',status: 1}
+      ] , //列表数据源
     };
   },
   computed:{
     data(){
-      return [
-        {
-          children: [
-            {
-              title: '立领夹克',
-              status: 1
-            },
-            {
-              title: '立领夹克',
-              status: 1
-            },
-            {
-              title: '立领夹克',
-              status: 1
-            },
-            {
-              title: '立领夹克',
-              status: 1
-            },
-            {
-              title: '立领夹克',
-              status: 1
-            },
-          ],
-          label: '12月11日'
-        },
-        {
-          children: [
-            {
-              title: '立领夹克',
-              status: 1
-            },
-          ],
-          label: '12月10日'
+      function arr2Tree(data, id = "colourGroup") {
+        const newList = [],
+            map = Array.from(
+                new Set(
+                    data.map((item) => {
+                      return item[id];
+                    })
+                )
+            );
+        for (let i = 0; i < data.length; i++) {
+          let item = data[i],
+              name = item[id],
+              index = map.indexOf(name);
+          if (newList[index]) {
+            newList[index]["children"].push(item);
+          } else {
+            newList.push({
+              label: name,
+              children: [item]
+            });
+          }
         }
-      ]
+        return newList;
+      }
+
+      return arr2Tree(this.res,"date");
     },
     totalNum(){
-      let res = this.data.reduce((total,item) =>{
-        return total.concat(item.children)
-      },[]);
-      console.log(res)
-      return 0;
+      return this.res.length
     },
     selectedLength(){
-      return this.data.filter
+      return this.res.filter((item) =>{
+        return item.status == 1
+      }).length;
     }
   },
   watch:{
     current(){
+      this.getHeaderHeight();
       this.getFooterHeight();
     }
   },
-  mounted() {
-
-    this.uGetRect("#header").then(res =>{
-      this.headerHeight = res.height;
-    })
-  },
   methods: {
-    getFooterHeight(){
-      this.$nextTick(() =>{
-        this.uGetRect("#footer").then(res =>{
-          this.footerHeight = res.height || 0;
-        })
-      })
-    },
-    uGetRect(selector, all) {
-      return new Promise((resolve) => {
-        uni.createSelectorQuery()
-            .in(this)[all ? 'selectAll' : 'select'](selector)
-            .boundingClientRect((rect) => {
-              if (all && Array.isArray(rect) && rect.length) {
-                resolve(rect)
-              }
-              if (!all && rect) {
-                resolve(rect)
-              }
-              if(rect === null){
-                resolve({})
-              }
-            })
-            .exec()
+    closeTip(){
+      this.$set(this.status, this.current,{
+        ...this.status[this.current],
+        close: true
       })
+      this.getHeaderHeight()
     },
     collapse(index){
       this.activeIndex = this.activeIndex === index ? null : index;

src/pages/designCommissioned/listSelectToAdd.vue

 <!--新增委托-->
 <template>
   <view>
-    <!--新增委托navbar-->
-    <u-navbar title="新增委托"
-              :border-bottom="false"
-              :background="{backgroundColor: 'whitesmoke'}">
-      <template v-slot:right>
-        新增面料
-      </template>
-    </u-navbar>
-    <view class="title u-p-30">选择面料</view>
-    <view class="u-p-30 bg-fff">
+    <view id="header">
       <!--新增委托navbar-->
-      <u-search placeholder="请输入面料名称" v-model="keyword"
-                border-color="#e1e1e1" height="76"
-                bg-color="#fff" :show-action="false"></u-search>
+      <u-navbar title="新增委托"
+                :border-bottom="false"
+                :background="{backgroundColor: 'whitesmoke'}">
+        <template v-slot:right>
+          新增面料
+        </template>
+      </u-navbar>
+      <view class="title u-p-30">选择面料</view>
+      <view class="u-p-30 bg-fff">
+        <!--新增委托navbar-->
+        <u-search placeholder="请输入面料名称" v-model="keyword"
+                  border-color="#e1e1e1" height="76"
+                  bg-color="#fff" :show-action="false"></u-search>
+      </view>
     </view>
     <!-- 列表 确定-->
-    <view class="u-p-30">
-      <radio-group style="width: 100%">
-        <view v-for="(item, index) in list" :key="item.id" class="u-flex u-m-b-20">
-          <view>
-            <radio :value="item.value" :checked="index === selectedIndex" />
-          </view>
-          <hs-material-thumbnail :item="item"></hs-material-thumbnail>
+    <view class="u-p-30 body" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
+      <view v-for="(item, index) in list" :key="item.id" class="u-flex u-m-b-20">
+        <view class="u-m-r-30">
+          <u-icon :name="index === selectedIndex ? 'checkmark-circle-fill': 'checkmark-circle'"
+            color="#000" size="40"
+                  @click="triggerSelectItem(index)"
+          />
         </view>
-      </radio-group>
+        <hs-material-thumbnail :item="item" @click="toMaterialDetail(item)"></hs-material-thumbnail>
+      </view>
     </view>
     <!-- 底部按钮 确定-->
     <view class="footer" id="footer">
       <view class="footer-btn">
 <!--        /* 以下形式在微信小程序会无效，APP和H5有效 */-->
-        <u-button class="custom-style" shape="circle">
+        <u-button :disabled="selectedIndex === -1"
+                  @click="toAddItem"
+                  class="custom-style" shape="circle"
+        >
           确定
         </u-button>
       </view>
@@ -40,16 +46,17 @@
 </template>
 
 <script>
+import dom from './mixins/dom'
 import HsSelectItem from "../../components/hs-select-item/hs-select-item";
 import HsMaterialThumbnail from "../../components/hs-material-thumbnail/hs-material-thumbnail";
 export default {
   name: "listSelectToAdd",
   components: {HsMaterialThumbnail, HsSelectItem},
+  mixins:[dom],
   data(){
     return {
       keyword: "",
-      selectedIndex: "",
-      selectedItem: {},
+      selectedIndex: -1,
       list: [
         {
           title: '加厚荷兰绒绒布布料',
@@ -59,12 +66,47 @@ export default {
           title: '加厚荷兰绒绒布布料加厚荷兰绒绒布布料',
           id: 12
         },
+        {
+          title: '加厚荷兰绒绒布布料',
+          id: 221
+        },
         {
           title: '加厚荷兰绒绒布布料',
           id: 22
+        },
+        {
+          title: '加厚荷兰绒绒布布料',
+          id: 224
+        },
+        {
+          title: '加厚荷兰绒绒布布料',
+          id: 222
         }
       ]
     }
+  },
+  methods:{
+    triggerSelectItem(index){
+      this.selectedIndex = index === this.selectedIndex ? -1 : index;
+    },
+    // 跳转到新增详情页面
+    toAddItem({id}){
+      this.$Router.push({
+        path:"/pages/designCommissioned/addItem",
+        query:{
+          id
+        }
+      })
+    },
+    // 跳转到面料详情
+    toMaterialDetail({id}){
+      this.$Router.push({
+        path:"/pages/home/fabricDetails",
+        query:{
+          id
+        }
+      })
+    },
   }
 }
 </script>
@@ -72,6 +114,17 @@ export default {
 <style scoped lang="scss">
 $h-color: #AF8D66;
 $main-color: #fff;
+.body{
+  position: absolute;
+  width: 100%;
+  height: auto;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow-y: auto;
+
+}
 .title{
   color: $h-color;
   background-color: whitesmoke;

src/pages/designCommissioned/mixins/dom.js

+export default {
+    data(){
+        return{
+            headerHeight: 0,
+            footerHeight: 0
+        }
+    },
+    methods:{
+        getHeaderHeight(){
+            this.$nextTick(() =>{
+                this.uGetRect("#header").then(res =>{
+                    this.headerHeight = res.height;
+                })
+            })
+        },
+        getFooterHeight(){
+            this.$nextTick(() =>{
+                this.uGetRect("#footer").then(res =>{
+                    this.footerHeight = res.height;
+                })
+            })
+        },
+        uGetRect(selector, all) {
+            return new Promise((resolve) => {
+                uni.createSelectorQuery()
+                    .in(this)[all ? 'selectAll' : 'select'](selector)
+                    .boundingClientRect((rect) => {
+                        if (all && Array.isArray(rect) && rect.length) {
+                            resolve(rect)
+                        }
+                        if (!all && rect) {
+                            resolve(rect)
+                        }
+                        if(rect === null){
+                            resolve({})
+                        }
+                    })
+                    .exec()
+            })
+        },
+    },
+    mounted() {
+        this.getHeaderHeight();
+        this.getFooterHeight();
+    },
+}