lanan-repair-app/pages-warehouse/inOutWarehouse/part.vue

<template>
  <view class="container">
    <VNavigationBar background-color="#fff" :title="title" title-color="#333"></VNavigationBar>
    <view class="listBox">
      <view class="list">
        <view class="formItem" v-if="!isInput">
          <text class="formLabel">供应商</text>
          <input type="text" style="text-align: right" v-model="serviceName" placeholder="请输入供应商名称"/>
          <view @click="searchService">查询</view>
        </view>
        <view class="formItem" v-if="isInput">
          <text class="formLabel">关键字</text>
          <input type="text" style="text-align: right" v-model="query" placeholder="名称、规格、编码"/>
          <view @click="searchQuery" style="width: 3rem">查询</view>
        </view>
        <view class="formItem" v-if="!isInput">
          <text class="formLabel">备注</text>
          <text class="formValue"></text>
        </view>
        <view style="padding-bottom: 60rpx;border-bottom: 1px solid #ddd;" class="formItem" v-if="!isInput">
          <textarea style="height: 50px" auto-height placeholder="请输入备注" v-model="remark"/>
        </view>
        <uni-card title="车辆信息" v-if="!isInput">
          <view class="formItem">
            <view>车牌号</view>
            <view>{{ carInfo.licenseNumber }}</view>
          </view>
          <view class="formItem">
            <view>品牌</view>
            <view>{{ carInfo.carBrand }}</view>
          </view>
          <view class="formItem">
            <view>型号</view>
            <view>{{ carInfo.carModel }}</view>
          </view>
        </uni-card>
        <uni-collapse ref="collapse">
          <uni-collapse-item v-for="(key, index) in keys" :key="index" :title="key + `(${values.get(key).length})`">
            <uni-card v-for="(item, index) in values.get(key)" :key="index">
              <template>
                <view class="card-header">
                  <radio v-if="isInput" :checked="item.isSelected" @click="chooseItem(item)"/>
                  <text class="card-title">{{ item.wares.name }}</text>
                </view>
              </template>
              <view class="formItem">
                <view class="formLabel">进价</view>
                <input type="number" style="text-align: right" v-model="item.wares.purPrice"
                       placeholder="请输入单价"/>
              </view>
              <view class="formItem">
                <view class="formLabel">售价</view>
                <input type="number" style="text-align: right" v-model="item.wares.price"
                       placeholder="请输入单价"/>
              </view>
              <view class="formItem">
                <view class="formLabel">分类</view>
                <view>
                  <picker @change="bindPickerChange($event, item)" :range="options"
                          range-key="label">
                    <view class="picker">
                      {{ getServerName(item.wares.type) }}
                    </view>
                  </picker>
                </view>
              </view>
              <view class="formItem">
                <view class="formLabel">计量单价</view>
                <picker @change="bindUnitChange($event, item)" :range="unitList"
                        range-key="label">
                  <view class="picker">
                    {{ getUnitName(item.wares.unit) }}
                  </view>
                </picker>
              </view>
              <view class="formItem" v-if="!isInput">
                <view class="formLabel">数量</view>
                <input type="number" style="text-align: right" v-model="item.waresCount"
                       placeholder="请输入数量"/>
              </view>
              <view class="formItem" v-if="isInput">
                <view class="formLabel">数量</view>
                <input type="number" style="text-align: right" v-model="item.inCount"
                       placeholder="请输入数量"/>
              </view>
              <view class="formItem">
                <view class="formLabel">仓库</view>
                <uni-data-picker placeholder="请选择仓库" popup-title="请选择仓库"
                                 :localdata="waresTree" v-model="item.wares.warehouse">
                </uni-data-picker>
              </view>
            </uni-card>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>
    <view class="footer">
      <text class="label"></text>
      <text class="repairNum"></text>
      <view class="submit" @click="submit" v-if="!isInput">保存</view>
      <view class="submit" @click="inWare" v-else :disabled="subLoading">入库</view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from "@/components/VNavigationBar.vue";
import request from '@/utils/request';
import {getDictTextByCodeAndValue, createUniqueCodeByHead, buildTree} from "@/utils/utils";
import {getUserInfo, getJSONData} from '@/utils/auth.js'
import UniCollapse from "../../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";
import {getStorageWithExpiry} from "../../utils/auth";

export default {
  components: {UniCollapse, VNavigationBar},
  data() {
    return {
      //配件申请单id
      twId: '',
      //配件列表
      wares: [],
      //代采购配件列表
      partList: [],
      //01零配件、02退配件
      type: true,
      //父组件传入的数据
      formData: {},
      repairList: [],
      isInput: false, //是否入库
      remark: "",
      title: '采购单',
      selectedRepairList: [
        {name: '炫驰全合成机油S7 4L/ALL', num: 3, unit: '桶', id: 3}
      ],
      active: '',
      //供应商名称
      serviceName: "",
      //供应商id
      serviceId: "",
      soId: "",
      soiIds: [],
      carInfo: {},
      options: [],
      selectedIndex: -1,
      unitList: [],
      query: null,
      selectRows: [],
      subLoading: false,
      waresTree: [],
      chooseWares: null,
	  keys: [],
      values: null
    };
  },
  onLoad(data) {
    this.listWarehouse()
    this.listServer()
    this.listUnit()
    if (data.soId) {
      this.soId = data.soId
      this.isInput = true
      this.title = '配件入库'
      this.getSoiId()
    } else {
      if (getJSONData("applyWaresForm")) {
        this.formData = getJSONData("applyWaresForm")
        this.wares = this.formData.items
        this.twId = this.formData.id
        this.init()
      }
    }
  },
  computed: {},
  methods: {
    listWarehouse() {
      request({
        url: '/admin-api/conf/baseWarehouse/list',
        method: 'get'
      }).then(res => {
        this.waresTree = buildTree(res.data, 'id', 'parentId', {name: 'text', id: 'value'})
      })
    },
    chooseItem(item) {
      const index = this.selectRows.findIndex(i => i.id === item.id);
      if (index === -1) {
        item.isSelected = true;
        this.selectRows.push(item);
      } else {
        item.isSelected = false;
        this.selectRows.splice(index, 1);
      }

      // 将 Map 中的所有值展平成一个数组
      const partListFlat = Array.from(this.values.values()).flat();

      // 更新 Map 中的值
      const updatedValues = new Map();
      for (const [key, value] of this.values) {
        const newValue = value.map(v => {
          const foundItem = partListFlat.find(f => f.id === v.id);
          return foundItem ? { ...v, ...foundItem } : v;
        });
        updatedValues.set(key, newValue);
      }

      this.values = updatedValues;
    },
    searchQuery() {
      this.getSoiId()
    },
    getUnitName(id) {
      if (this.unitList && this.unitList.length > 0) {
        const index = this.unitList.findIndex(item => item.value === id)
        if (index !== -1) {
          return this.unitList[index].label
        } else {
          return "请选择"
        }
      }
      this.listUnit()
      return "请选择"
    },
    bindUnitChange(e, row) {
      const index = e.detail.value
      const choose = this.unitList[index]
      row.wares.unit = choose.value
    },
    listUnit() {
      if (!getStorageWithExpiry("repair_unit")) {
        getDictTextByCodeAndValue("repair_unit", null)
      }
      this.unitList = getStorageWithExpiry("repair_unit")
    },
    getServerName(id) {
      const index = this.options.findIndex(item => item.value === id)
      if (index !== -1) {
        return this.options[index].label
      }
      return "请选择"
    },
    listServer() {
      request({
        url: '/admin-api/conf/baseType/list',
        method: 'get',
        params: {type: '02'}
      }).then(res => {
        this.options = res.data.map(item => {
          return {
            label: item.name,
            value: item.id
          }
        })
      })
    },
    bindPickerChange(node, row) {
      const index = node.detail.value
      const choose = this.options[index]
      row.wares.type = choose.value
    },
    /**
     * 查询供应商
     */
    searchService() {
      if ("" == this.serviceName) {
        uni.showToast({
          title: '请输入供应商名称！',
          icon: 'none'
        })
        return
      }
      //查询供应商
      request({
        url: '/admin-api/supplier/baseSupplier/searchList',
        method: 'get',
        params: {name: this.serviceName}
      }).then((res) => {
        console.log(res)
        if (res.code == 200 && res.data.length > 0) {
          uni.showActionSheet({
            itemList: res.data.map(m => m.name),
            success: ({tapIndex}) => {
              this.serviceName = res.data[tapIndex].name
              this.serviceId = res.data[tapIndex].id
            }
          })
        } else {
          //未查询到符合条件的供应商
          uni.showToast({
            title: '未查询到符合条件的供应商，您可以直接使用，系统将自动保存为新供应商！',
            icon: 'none'
          })
        }
      })
    },
    /**
     * 初始化配件数据
     */
    init() {
      request({
        url: '/admin-api/repair/tickets/getCusAndCarById?id=' + this.formData.ticketId,
        method: 'get'
      }).then(res => {
        this.carInfo = res.data.carInfo
        if (this.carInfo.carBrand) {
          request({
            url: '/admin-api/base/carBrand/get?id=' + this.carInfo.carBrand,
            method: 'get'
          }).then(res => {
            this.carInfo.carBrand = res.data.brandName
          })
        }
      })
      const ids = this.wares.map(item => item.id)
      request({
        url: "/admin-api/repair/tw/getByIds?ids=" + ids,
        method: 'get'
      }).then(res => {
        this.partList = Object.entries(res.data)
        const value = this.partList.map(([key, value]) => value)
        value.forEach(item => {
          item.forEach(i => {
            // i.count = i.waresCount
            // i.newPrice = i.wares.purPrice
            i.totalPrice = i.waresCount * i.wares.purPrice
          })
        })
        this.keys = this.partList.map(([key, value]) => key)
        this.values = new Map(this.partList)
      })
    },
    /**
     *
     */
    addNum(repair) {
      this.$set(repair, 'waresCount', repair.waresCount + 1)
      const find = this.wares.find(f => f.id === repair.id)
      if (find) {
        find.waresCount = repair.waresCount
      } else {
        this.wares.push(JSON.parse(JSON.stringify(repair)))
      }
      console.log('repair', repair)
    },
    /**
     * 减
     */
    delNum(repair) {
      if (repair.waresCount <= 0) {
        return
      }
      this.$set(repair, 'waresCount', repair.waresCount - 1)
      const findIndex = this.wares.findIndex(f => f.id === repair.id)
      if (findIndex > -1 && repair.num <= 0) {
        this.wares.splice(findIndex, 1)
      } else if (repair.num > 0) {
        this.$set(this.wares[findIndex], 'waresCount', repair.waresCount)
      }
    },
    /**
     * 出库
     */
    submit() {
      const userInfo = getUserInfo()
      const values = Array.from(this.values.values()).flat();
      const data = {
        soType: '01',
        purchaseType: '01',
        soNo: createUniqueCodeByHead("CG"),
        userId: userInfo.id,
        userName: userInfo.nickname,
        itemCount: values.length,
        totalPrice: values.reduce((x, y) => {
          return x + y.totalPrice
        }, 0),
        soStatus: "03",
        remark: this.remark,
        supplierId: this.serviceId,
        supplierName: this.serviceName
      }
      data.goodsList = [...values.map(item => {
        return {
          soiType: '01',
          goodsId: item.wares.id,
          goodsType: '0',
          wareId: item.wares?.warehouse,
          goodsCount: item.waresCount,
          goodsPrice: item.wares.price,
          remark: item.remark
        }
      })]
      data.waresList = [...values.map(item => item.wares)]
      if (this.twId) {
        data.twId = this.twId
      }
      request({
        url: '/admin-api/repair/so/create',
        method: 'post',
        data: data
      }).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: '创建成功！',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 700)
        }
      })
    },
    getSoiId() {
      request({
        url: '/admin-api/repair/soi/getMapBySoIdAndQuery?id=' + this.soId + "&query=" + this.query,
        method: 'get'
      }).then(res => {
        this.partList = Object.entries(res.data)
        this.partList = this.partList.map(([key, value]) => {
          return [key, value.filter(item => {
            return item.inCount < item.goodsCount
          })]
        })
        this.partList = this.partList.filter(([key, value]) => value.length > 0)
        this.partList.forEach(([key, value]) => {
          value.forEach(item => {
            item.goodsCount = item.goodsCount - (item.inCount ? item.inCount : 0)
            item.inCount = item.goodsCount
          })
        })
        const values = this.partList.map(([key, value]) => value)
        if (!this.selectRows || this.selectRows.length === 0) {
          values.forEach(item => {
            item.forEach(i => {
              i.isSelected = false
            })
          })
        } else {
          values.forEach(item => {
            item.forEach(i => {
              i.isSelected = this.selectRows.findIndex(j => j.id === i.id) !== -1
            })
          })
        }
        this.keys = this.partList.map(([key, value]) => key)
        this.values = new Map(this.partList)
      })
    },
    /**
     * 入库
     */
    inWare() {
      if (!this.subLoading) {
        this.subLoading = true
        const data = {
          id: this.soId,
          soNo: createUniqueCodeByHead("RK")
        }
        const values = Array.from(this.values.values()).flat();
        if (this.selectRows && this.selectRows.length > 0) {
          const ids = this.selectRows.map(item => item.id)
          const newSelect = values.filter(item => ids.includes(item.id))
          data.soiList = [...newSelect]
          data.waresList = [...newSelect.map(item => item.wares)]
        } else {
          data.soiList = [...values]
          data.waresList = [...values.map(item => item.wares)]
        }
        request({
          url: '/admin-api/repair/so/inWare',
          method: 'post',
          data: data
        }).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '入库成功！',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 700)
          }
          this.subLoading = false
        })
      }
      // this.partList.forEach(item => {
      //   item.inCount = item.count
      //   item.goodsId = item.id
      //   // item.id = this.soiIds[0]
      //   })
      // const copiedPartList = JSON.parse(JSON.stringify(this.partList));
      // for (let i = 0; i < this.partList.length; i++) {
      //   this.partList[i].inCount = this.partList[i].count
      //   this.partList[i].goodsId = copiedPartList[i].id
      //   this.partList[i].id = this.soiIds[i]
      // }
      // console.log('partList', this.partList)
      // request({
      //   url: '/admin-api/repair/so/inWare',
      //   method: 'post',
      //   data: {
      //     id: this.soId,
      //     soiList: this.partList
      //   }
      // }).then((res) => {
      //   if (res.code == 200) {
      //     uni.showToast({
      //       title: '入库成功！',
      //       icon: 'none'
      //     })
      //     setTimeout(() => {
      //       uni.navigateBack()
      //     }, 700)
      //   }
      // })
    }


  }
}
</script>

<style lang="scss">
.container {
  height: 100%;
  background-color: #F3F5F7;
  display: flex;
  flex-direction: column;
}

.listBox {
  padding: 30rpx 32rpx;
  flex: 1;
  height: 0;
}

.list {
  background-color: #fff;
  padding: 0 30rpx;
  height: 100%;
  overflow: auto;
}

.formItem {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20rpx;

  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 20rpx;

  border-bottom: 1rpx solid #DDDDDD;
}

.formLabel {
  font-size: 32rpx;
  color: #333333;
  width: 50px;
}

.formValue {
  flex: 1;
  width: 0;
  text-align: right;
  font-size: 32rpx;
  color: #999999;
}

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

.repairDesc {
  font-size: 28rpx;
  color: #858BA0;
}

.repairUnit {
  color: #333333;
}

.footer {
  padding: 14rpx 32rpx;
  background-color: #fff;
  display: flex;
  align-items: center;

  .repairNum {
    flex: 1;
    width: 0;
    margin-right: 10rpx;
  }

  .submit {
    width: 208rpx;
    height: 72rpx;
    background: #0174F6;
    border-radius: 38rpx 38rpx 38rpx 38rpx;
    text-align: center;
    line-height: 72rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }
}
</style>