lanan-repair-app/components/projectPicker.vue

<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <view class="popupContent">
        <view class="header">
          <text class="cancel" @click="cancel">取消</text>
          <text class="title">选择维修项目</text>
          <text class="submit" @click="confirm">确定</text>
        </view>
        <view class="chooseProj">
          <view class="desc">
            已经选择{{ selectedProj.length }}项维修项目
          </view>
          <view class="selectedProj">
            <view v-for="(item, index) in selectedProj" :key="index" class="selectedProjItem">
              <text>{{ item.name }}</text>
              <image class="itemIcon" mode="aspectFit" src="/static/icons/x.png" @click="removeProj(index)"></image>
            </view>
          </view>
        </view>
        <view v-if="typeList && typeList.length > 0" class="projPicker" style="display: flex">
          <view class="type">
            <view v-for="item in typeList" :key="item.typeId" :class="{'active': typeId === item.typeId}" class="typeItem"
                  @click="chooseType(item)">
              {{ item.typeName }}
            </view>
          </view>
          <view class="container">
            <view class="groupList">
<!--              <view class="groupHeader">-->
<!--                <view class="line"></view>-->
<!--                <text>{{ item.name }}</text>-->
<!--                <view class="line"></view>-->
<!--              </view>-->
              <view class="projList">
<!--                <view v-for="(proj, index) in item.projList" :key="proj.id" class="projItem" @click="chooseProj(proj)">-->
                <view v-for="item in groupList" :key="item.id" class="projItem" @click="chooseProj(item)">
                  <text class="projName">{{ item.name }}</text>
                  <image v-if="selectedProj && selectedProj.find(f => f.id === item.id)" class="projChooseIcon"
                         mode="aspectFit" src="/static/icons/duihao.png"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </uni-popup>
  </view>
</template>
<script>
import request from "@/utils/request";

export default {
  name: "projectPicker",
  data() {
    return {
      selectedProj: [

      ],
      typeList: [],
      typeId: 1,
      groupList: []
    }
  },
  methods: {
    open(selectedProj = []) {
      console.log("执行onload")
      this.$refs.popup.open()
      this.getProjeectList()
      // this.selectedProj = JSON.parse(JSON.stringify(selectedProj))
    },
    removeProj(index) {
      this.selectedProj.splice(index, 1)
    },
    chooseProj(proj) {
      const findIndex = this.selectedProj.findIndex(f => f.id === proj.id)
      if (findIndex > -1) {
        this.selectedProj.splice(findIndex, 1)
      } else {
        this.selectedProj.push(proj)
      }
    },
    chooseType(type) {
      this.groupList = type.groupList
      this.typeId = type.typeId
    },
    getProjeectList() {
      const categoryList = []
      console.log("执行")
      const params = {
        pageNo: 1,
        pageSize: 10000,
        type: '03'
      }
      request({
        url: '/admin-api/repair/project/getRepairProjectAndCateGory',
        method: 'GET',
        params: params
      }).then(res => {
        console.log("分类",res);
        this.typeList = res.data
        // categoryList.push(...res.data)
        // console.log("categoryList",categoryList)
        //
        // categoryList.forEach(item => {
        //   let a = {
        //     name: item.name,
        //     id: item.id,
        //     groupList: [
        //
        //       ]
        //   }
        //   this.typeList.push(a)
        // })
        // console.log("typeList",this.typeList)
      })
      request({
        url: '/admin-api/repair/project/page',
        method: 'GET',
        params: params
      }).then(res => {
        console.log("项目",res);
        this.projectList = res.data.records
      })
    },

    confirm() {
      this.$emit('confirm', this.selectedProj)
      this.cancel()
    },
    cancel() {
      this.selectedProj = []
      this.groupList = this.typeList[0].groupList
      this.$refs.popup.close()
    }
  }
}
</script>


<style lang="scss" scoped>
.popupContent {
  height: 86vh;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;

  display: flex;
  flex-direction: column;
}

.header {
  padding: 40rpx;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  border-bottom: 1rpx solid #EEEEEE;

  .title {
    flex: 1;
    width: 0;
    text-align: center;

    font-weight: bold;
    color: #333333;
  }

  .cancel {
    font-weight: 500;
    color: #999999;
  }

  .submit {
    font-weight: 500;
    color: #0174F6;
  }
}

.chooseProj {
  padding: 30rpx 32rpx;

  .desc {
    font-weight: 500;
    font-size: 24rpx;
    color: #999999;
  }

  .selectedProj {
    display: flex;
    align-items: center;
    gap: 20rpx;
    flex-wrap: wrap;
    padding: 30rpx 0;

    .selectedProjItem {
      display: flex;
      align-items: center;
      column-gap: 10rpx;
      padding: 10rpx 16rpx;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      border: 2rpx solid #0174F6;
      font-weight: 500;
      font-size: 24rpx;
      color: #0174F6;

      .itemIcon {
        width: 16rpx;
        height: 16rpx;
      }
    }
  }
}

.projPicker {
  flex: 1;
  height: 0;
  overflow: auto;
  border-top: 1rpx solid #EEEEEE;

  display: flex;

  .type {
    width: 200rpx;
    background: #FFFFFF;

    .typeItem {
      width: 100%;
      background: #F2F2F7;
      padding: 40rpx 32rpx;

      &.active {
        background-color: #fff;
      }
    }
  }

  .container {
    flex: 1;
    width: 0;

    padding: 30rpx;

    .groupList {
      .groupHeader {
        display: flex;
        align-items: center;
        column-gap: 4rpx;

        font-weight: 500;
        font-size: 24rpx;
        color: #999999;

        .line {
          flex: 1;
          width: 0;
          height: 2rpx;
          background-color: #DDDDDD;
        }
      }

      .projList {
        padding: 40rpx 0;
        display: flex;
        flex-direction: column;
        row-gap: 40rpx;

        .projItem {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .projName {
            flex: 1;
            width: 0;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .projChooseIcon {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}
</style>