OfficeApp/subpkg/updateArchives/updateArchives.vue

<template>
  <view class="">
    <view class="card">
      <u--form labelPosition="left" :model="formData" ref="archives">
        <view class="item">
          <view class="title">基本信息</view>
          <u-form-item labelWidth="auto" label="户主姓名" required prop="name" borderBottom>
            <u--input readonly v-model="formData.name" placeholder="请输入姓名"></u--input>
          </u-form-item>
          <u-form-item label="性别" required prop="sex" borderBottom>
            <u-radio-group v-model="formData.sex" disabled style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'男'},{value:2,label:'女'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="年龄" required prop="age" borderBottom>
            <u--input readonly v-model="formData.age" placeholder="请输入年龄"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
            <u--input readonly v-model="formData.id_card" placeholder="请输入身份证号" type="idcard"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="联系方式" required prop="phone" borderBottom>
            <u--input readonly v-model="formData.phone" placeholder="请输入手机号" type="number"></u--input>
          </u-form-item>
        </view>

        <block v-for="(item, index) in showDemandList" :key="'demand'+index">
          <block>
            <breeding v-if="item.id==7" ref="demandRef7"></breeding>
            <store v-if="item.id==8" ref="demandRef8"></store>
            <deepProcessing v-if="item.id==9" ref="demandRef9"></deepProcessing>
            <thickProcessing v-if="item.id==10" ref="demandRef10"></thickProcessing>
          </block>
          <block>
            <houseRepair v-if="item.id==12" ref="demandRef12"></houseRepair>
            <houseDecoration v-if="item.id==13" ref="demandRef13"></houseDecoration>
            <houseRenovate v-if="item.id==14" ref="demandRef14"></houseRenovate>
            <houseTransaction v-if="item.id==15" ref="demandRef15"></houseTransaction>
          </block>
          <block>
            <banquetMarry v-if="item.id==17" ref="demandRef17"></banquetMarry>
            <banquetBirthday v-if="item.id==18" ref="demandRef18"></banquetBirthday>
            <banquetFullMoon v-if="item.id==19" ref="demandRef19"></banquetFullMoon>
            <banquetOther v-if="item.id==20" ref="demandRef20"></banquetOther>
            <banquetFuneral v-if="item.id==21" ref="demandRef21"></banquetFuneral>
          </block>
          <button class="delete" @click="removeShowDemand(index)">删除以上信息</button>
        </block>
        <button class="plus demand" @click="demandShow=true">点击添加更多需求</button>
        <u-picker :show="demandShow" ref="demandRef" :loading="demandLoading" :columns="[demandList, demandListChild]"
          keyName="name" @change="changeHandler" @cancel="demandShow = false" @confirm="changeDemand"></u-picker>
      </u--form>
      <button @click="addArchives" class="btn">完成更新</button>
    </view>
  </view>
</template>

<script>
  import { Toast } from "../../libs/uniApi"
  import { informationDetails, informationOpportunityUpdate } from "@/api/information.js"
  import { debounce, throttle } from "lodash"
  import { categoryBusinessList } from "@/api/oaPbulic.js"
  import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
  import residents from "@/components/newArchives/residents.vue" // 常住人口
  import breeding from "@/components/newArchives/breeding.vue" // 种养殖
  import store from "@/components/newArchives/store.vue" // 开设店铺
  import deepProcessing from "@/components/newArchives/deepProcessing.vue" // 深加工
  import thickProcessing from "@/components/newArchives/thickProcessing.vue" // 粗加工
  import houseRepair from "@/components/newArchives/houseRepair.vue" // 修房
  import houseDecoration from "@/components/newArchives/houseDecoration.vue" // 装房
  import houseRenovate from "@/components/newArchives/houseRenovate.vue" // 翻新
  import houseTransaction from "@/components/newArchives/houseTransaction.vue" // 买卖房子
  import banquetMarry from "@/components/newArchives/banquetMarry.vue" // 婚宴
  import banquetBirthday from "@/components/newArchives/banquetBirthday.vue" // 寿宴
  import banquetFullMoon from "@/components/newArchives/banquetFullMoon.vue" // 满月酒
  import banquetOther from "@/components/newArchives/banquetOther.vue" // 其他庆祝宴
  import banquetFuneral from "@/components/newArchives/banquetFuneral.vue" // 白事
  export default {
    components: {
      districtSelector,
      residents,
      breeding,
      store,
      deepProcessing,
      thickProcessing,
      houseRepair,
      houseDecoration,
      houseRenovate,
      houseTransaction,
      banquetMarry,
      banquetBirthday,
      banquetFullMoon,
      banquetOther,
      banquetFuneral
    },
    data() {
      return {
        demandShow: false,
        demandLoading: false,
        demandList: [], //更多需求
        demandListChild: [], //更多二级需求
        showDemandList: [], //更多需求展示列表
        updateFlag: true,
        formData: {
          id_card: '',
          sex: '',
          name: '',
          phone: '', //电话
          highway: '', //汽车是否能到家
          smart_phone: '', //是否使用智能手机
          wechat: '', //微信号
          address: '', //家庭地址
          age: '', //年龄
          category_id: '1',
          category_child: '2',
          data_type: '1',
        },
      }
    },
    onLoad(options) {
      this.initInformationDetails({ id: options.id })
      this.initCategoryBusinessList();
    },
    onShow() {},
    methods: {
      async initInformationDetails(id) {
        let res = await informationDetails(id);
        this.formData = res.data;
      },
      // 更新档案
      addArchives: throttle(async function() {
        let refsDatas = await this.loadRefsDatas();
        if (!this.updateFlag) return;
        uni.showLoading({
          title: '正在更新...'
        });
        let res = await informationOpportunityUpdate({
          id: this.formData.id,
          datas: [...refsDatas]
        });
        uni.hideLoading();
        uni.showToast({
          icon: 'none',
          title: '更新成功',
          success() {
            setTimeout(()=>{
              uni.navigateBack()
            },1000)
          }
        })
      }, 1000),
      // 获取组件数据
      async loadRefsDatas() {
        this.updateFlag = true;
        let datas = [];
        let map = new Map(); // 使用map存储当前ref是第几位
        for (let demand of this.showDemandList) {
          if(map.get(demand.id)>=0) map.set(demand.id, map.get(demand.id)+1);
          else map.set(demand.id, 0);
          let now = map.get(demand.id);
          try {
            let res = await this.$refs['demandRef' + demand.id][now].validate();
            if (!!res) datas.push({
              card_id: demand.id,
              datas: { ...this.$refs['demandRef' + demand.id][now]['formData'] }
            })
          } catch (e) {
            console.log('err', e);
            this.updateFlag = false;
          }
        }
        return datas;
      },
      // 初始化商机分类
      async initCategoryBusinessList() {
        let res = await categoryBusinessList();
        // this.demandList = res.data;
        this.demandList = res.data.filter(item=>item.id==6);
        this.demandList[0].children = this.demandList[0].children.filter(item=>item.id==7||item.id==8);
        this.demandListChild = this.demandList[0].children;
        // console.log(this.demandList);
      },
      // 选择更多需求
      changeHandler(e) {
        if (e.columnIndex == 0) { //滑动左侧时才加载,右侧不加载
          this.demandListChild = this.demandList[e.indexs[0]].children || [];
        }
      },
      // 确认添加需求
      changeDemand: throttle(function(e) {
        this.demandShow = false;
        if (e.value[1]) {
          this.showDemandList.push(e.value[1]);
        } else {
          this.showDemandList.push(e.value[0]);
        }
      }, 3000),
      // 删除需求
      removeShowDemand(index) {
        uni.showModal({
          title: '确定删除这一部分内容吗',
          success: (res) => {
            if (res.confirm) this.showDemandList.splice(index, 1);
          }
        })
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .card {
    padding-top: 30rpx;

    .item {
      background-color: #fff;
      margin: 28rpx;
      padding: 28rpx;
      border-radius: 14rpx;

      &:nth-child(1) {
        margin-top: 0;
      }

      .title {
        font-weight: 500;
        font-size: 34rpx;

        &::before {
          width: 8rpx;
          height: 26rpx;
          border-radius: 4rpx;
          background-color: #3175f9;
          content: "";
          display: inline-block;
          margin-right: 8rpx;
        }
      }
    }

    .btn {
      margin: 32rpx auto;
      // margin-bottom: 40rpx;
      width: 694rpx;
      height: 84rpx;
      background: $theme-oa-color;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }
  }

  .delete {
    margin: 22rpx auto;
    // margin-bottom: 40rpx;
    width: 694rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: #f56c6c;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .plus {
    margin: 22rpx auto;
    // margin-bottom: 40rpx;
    width: 694rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: $theme-oa-color;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .demand {
    margin-top: 40rpx;
    margin-bottom: 50rpx;
  }
</style>