cultivationApp/pages/plantAdmin/addBreed.vue

<template>
  <view class="content">

    <view class="cards">
      <up-form labelWidth='130' :model="data.formData" ref="form1">
        <view class="c-title">养殖信息</view>
        <view class="c-box">
          <up-form-item label="耳号" prop="sn" borderBottom required>
            <up-input input-align="right" placeholder="请输入耳号" border="none" v-model="data.formData.sn"></up-input>
          </up-form-item>
          <up-form-item label="品类" prop="animal_type" borderBottom required @click="isshow1">
            <up-input input-align="right" placeholder="请输入品类名称" border="none" suffixIcon="arrow-down"
              suffix-icon-style="color: #b6b6b6;" v-model="animal_type" readonly></up-input>
          </up-form-item>
          <up-form-item label="品种" prop="brand" borderBottom required>
            <up-input input-align="right" placeholder="请输入品种名称" border="none" v-model="data.formData.brand"></up-input>
          </up-form-item>
          <up-form-item label="性别" prop="gender" borderBottom required @click="showSex=true">
            <up-input input-align="right" placeholder="请选择性别" border="none" suffixIcon="arrow-down"
              suffix-icon-style="color: #b6b6b6;" v-model="gender" readonly></up-input>
          </up-form-item>
          <up-form-item label="生理阶段" prop="physi_stage" borderBottom required>
            <up-input input-align="right" placeholder="请输入生理阶段" border="none"
              v-model="data.formData.physi_stage"></up-input>
          </up-form-item>
          <up-form-item label="血统纯度" prop="blood_purity" borderBottom required>
            <up-input input-align="right" placeholder="请输入血统纯度" border="none"
              v-model="data.formData.blood_purity"></up-input>
          </up-form-item>
          <block v-if="data.formData.type==1">
            <up-form-item label="来源" borderBottom>
              <up-input input-align="right" border="none" v-model="animal_source" readonly></up-input>
            </up-form-item>
            <up-form-item label="栏舍" prop="fence_house_name" borderBottom required @click="isshow2">
              <up-input input-align="right" placeholder="请选择栏舍" border="none" suffixIcon="arrow-down"
                suffix-icon-style="color: #b6b6b6;" v-model="data.formData.fence_house_name" readonly></up-input>
            </up-form-item>
            <up-form-item label="现估重(kg)" prop="current_estimation" borderBottom required>
              <up-input input-align="right" placeholder="请输入现估重" type="number" border="none"
                v-model="data.formData.current_estimation"></up-input>
            </up-form-item>
            <up-form-item label="入场日期" prop="entry_date" borderBottom required @click="showDate=true">
              <up-input input-align="right" placeholder="请选择入场日期" border="none" suffixIcon="arrow-down"
                suffix-icon-style="color: #b6b6b6;" v-model="data.formData.entry_date" readonly></up-input>
            </up-form-item>
          </block>
          <block v-else>
            <up-form-item label="来源" borderBottom>
              <up-input input-align="right" border="none" v-model="animal_source" readonly></up-input>
            </up-form-item>
            <up-form-item label="栏舍" prop="fence_house_name" borderBottom required @click="isshow2">
              <up-input input-align="right" placeholder="请选择栏舍" border="none" suffixIcon="arrow-down"
                suffix-icon-style="color: #b6b6b6;" v-model="data.formData.fence_house_name" readonly></up-input>
            </up-form-item>
            <up-form-item label="代数" prop="algebra" borderBottom required>
              <up-input input-align="right" placeholder="请输入代数" type="number" border="none"
                v-model="data.formData.algebra"></up-input>
            </up-form-item>
            <up-form-item label="现估重(kg)" prop="current_estimation" borderBottom required>
              <up-input input-align="right" placeholder="请输入现估重" type="number" border="none"
                v-model="data.formData.current_estimation"></up-input>
            </up-form-item>
            <up-form-item label="出生体重(kg)" prop="birth_estimation" borderBottom required>
              <up-input input-align="right" placeholder="请输入出生体重" type="number" border="none"
                v-model="data.formData.birth_estimation"></up-input>
            </up-form-item>
            <up-form-item label="出生日期" borderBottom required @click="showDate=true">
              <up-input input-align="right" placeholder="请选择出生日期" border="none" suffixIcon="arrow-down"
                suffix-icon-style="color: #b6b6b6;" v-model="data.formData.brith_date" readonly></up-input>
            </up-form-item>
          </block>
        </view>


        <view class="card-li">
          <view class="c-title">养殖基地图片</view>
          <view class="c-box c-box-p">
            <view class="code-img1">
              <view class="" v-if="pic.length>0"
                style="display: flex;flex-direction: row;flex-wrap: wrap;margin-bottom: 30rpx;">
                <view class="" v-for="(item,i) in pic" style="margin-right: 30rpx;">
                  <view class="">
                    <u-icon name="close" size="15" style="margin-left:120.85rpx;" @click="delimg(i)"></u-icon>
                    <u-image :src="item" width="150.85rpx" height="150.85rpx"></u-image>
                  </view>
                </view>
              </view>

            </view>
            <view class="code-img">
              <view class="" @click="updateImgFn">
                <view class="carime-icon">
                  <u-image src="/static/img/DJSC.png" width="91.12rpx" height="91.12rpx"></u-image>
                  <view class="">
                    点击上传图片
                  </view>
                </view>

              </view>

            </view>
          </view>
        </view>
      </up-form>
      <u-action-sheet :show="showSex" keyName="name" closeOnClickOverlay :actions="[{name:'公'}, {name:'母'}]" title="请选择"
        @close="showSex = false" @select="selectSex"></u-action-sheet>
      <u-datetime-picker :show="showDate" :max-date="Date.now()" mode="date" v-model="changeTime" @confirm="selectDate"
        :formatter="formatter" @cancel="showDate=false"></u-datetime-picker>
      <u-action-sheet :show="show1" keyName="name" :actions="animal_type_lists" title="请选择" @close="show1 = false"
        @select="leavaType1"> </u-action-sheet>
      <u-action-sheet :show="show2" keyName="name" :actions="houses_lists" title="请选择栏舍" @close="show2 = false"
        @select="leavaType2"> </u-action-sheet>
      <u-button class="btn" @click="submit">提交</u-button>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    onMounted,
    unref,
    computed,
    watch
  } from 'vue';
  import {
    onLoad,
    onReady
  } from '@dcloudio/uni-app';
  import {
    Uploads
  } from "@/api/upload.js"
  import {
    animalTypeLists,
    fenceHouseTypeLists
  } from "@/api/dict.js"
  import {
    animalInfoAdd
  } from "@/api/manage.js"
  import {
    fenceHouseList
  } from "@/api/manage.js"

  const form1 = ref(null);
  const data = reactive({
    formData: {
      fence_house_id: '', //栏舍id
      sn: '',
      animal_type: '',
      brand: '',
      physi_stage: '',
      gender: '',
      blood_purity: '',
      current_estimation: '',
      algebra: '',
      birth: '',
      entry_date: '',
      birth_estimation: '',
      health_condition: '',
      type: 1, // 1-购买
      animal_source: '2', // 来源 1: 购买 2: 自己繁殖
      master_name: '',
      master_phone: '',
      pic: ['https://img0.baidu.com/it/u=1717510975,3258230326&fm=253&fmt=auto?w=120&h=80',
        'https://img0.baidu.com/it/u=1717510975,3258230326&fm=253&fmt=auto?w=120&h=80'
      ]
    },
    rules: {
      fence_house_id: [{
        type: 'string',
        required: true,
        message: '请选择栏舍',
        trigger: ['blur', 'change']
      }],
      sn: [{
        type: 'string',
        required: true,
        message: '请输入耳号',
        trigger: ['blur', 'change']
      }],
      animal_type: [{
        type: 'string',
        required: true,
        message: '请选择品类',
        trigger: ['blur', 'change']
      }],
      brand: [{
        type: 'string',
        required: true,
        message: '请选择品种',
        trigger: ['blur', 'change']
      }],
      gender: [{
        type: 'number',
        required: true,
        message: '请选择性别',
        trigger: ['blur', 'change']
      }],
      physi_stage: [{
        type: 'string',
        required: true,
        message: '请输入生理阶段',
        trigger: ['blur', 'change']
      }],
      blood_purity: [{
        type: 'string',
        required: true,
        message: '请输入血统纯度',
        trigger: ['blur', 'change']
      }],
      current_estimation: [{
        type: 'string',
        required: true,
        message: '请输入现估重',
        trigger: ['blur', 'change']
      }],
      birth_estimation: [{
        type: 'string',
        required: true,
        message: '请输入出生体重',
        trigger: ['blur', 'change']
      }],
      brith_date: [{
        type: 'string',
        required: true,
        message: '请选择出生日期',
        trigger: ['blur', 'change']
      }],
      entry_date: [{
        type: 'string',
        required: true,
        message: '请选择入场日期',
        trigger: ['blur', 'change']
      }],
    }
  });
  const pic = reactive([]);

  const showSex = ref(false);
  const showDate = ref(false);
  const changeFlag = ref(false);

  const show1 = ref(false)
  const isshow1 = () => {
    show1.value = true
  }
  const show2 = ref(false)
  const isshow2 = () => {
    show2.value = true
  }
  const animal_type_lists = ref([]);
  const initAnimalTypeLists = () => {
    animalTypeLists().then(res => {
      animal_type_lists.value = res.data;
    })
  }
  initAnimalTypeLists();
  const animal_type = ref('');
  const leavaType1 = (e) => {
    animal_type.value = e.name;
    data.formData.animal_type = e.value;
  }
  const houses_lists = ref([]);
  const initHousesLists = () => {
    fenceHouseList().then(res => {
      houses_lists.value = res.data.lists.map(item=>{
        return {
          value: item.id,
          name: item.fence_house_name
        }
      });
    })
  }
  initHousesLists();
  const leavaType2 = (e) => {
    data.formData.fence_house_name = e.name;
    data.formData.fence_house_id = e.value;
  }

  //图片删除
  const delimg = (i) => {
    pic.splice(i, 1);
  }

  //图片上传
  const updateImgFn = async () => {
    uni.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        Uploads(res.tempFilePaths[0], 'img').then(res => {
          // console.log(res)
          if (res.code == 1) {
            pic.push(res.data.url)
            console.log(data.formData)

            uni.$u.toast('上传成功')

          }

        }).catch(err => {
          //console.log('err', err);
          // uni.$u.toast('上传失败')
        })
      },
      fail: function(err) {
        //console.log('choose失败');
        uni.$u.toast('添加失败')
      }
    });
    // let res = await Uploads()
    // data.formData.pic = res.data.image
  }

  const gender = ref('');
  const selectSex = (e) => {
    if (e.name == '公') data.formData.gender = 1;
    else data.formData.gender = 0;
    gender.value = e.name;
  }

  const changeTime = ref(Date.now())
  const selectDate = (e) => {
    let date = new Date(e.value);
    if (data.formData.type > 1) data.formData.brith_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
    else data.formData.entry_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
    showDate.value = false;
  }

  onReady(() => {
    form1.value.setRules(data.rules);
  });

  const formatter = (type, value) => {
    if (type === 'year') {
      return `${value}年`;
    }
    if (type === 'month') {
      return `${value}月`;
    }
    if (type === 'day') {
      return `${value}日`;
    }
    return value;
  };

  const submit = async () => {
    try {
      const valid = await form1.value.validate();
      if (valid) {
        // console.log('表单通过', data.formData);
        if (pic.length == 0) {

          uni.$u.toast('请上传图片')
          return
        }
        data.formData.pic = JSON.stringify(pic)


        // 表单验证通过，执行提交操作
        animalInfoAdd(data.formData).then((res) => {
          console.log(res)
          if (res.code == 1) {
            uni.navigateBack({
              delta: 1
            })
            uni.$u.toast(res.msg)
            // console.log('提交通过');
          }
        })
      } else {
        // 表单验证不通过
        console.log('表单验证未通过');
      }
    } catch (error) {
      // 捕获验证过程中的错误
      console.error(error);
    }
  }

  const animal_source = ref(''); //来源

  onLoad((options) => {
    if (options.type > 1) {
      data.formData.animal_source = +options.type;
      animal_source.value = options.name;
    } else {
      data.formData.animal_source = 1;
      animal_source.value = '购买';
    }
    if (options.id) {
      data.formData.fence_house_id = options.id;
      data.formData.fence_house_name = options.fence_house_name;
      changeFlag.value = false;
    } else {
      changeFlag.value = true;
    }
  })
</script>

<style lang="scss">
  page {
    background-color: #fffcf5;

  }

  .cards {
    background-color: #fffcf5;
    padding: 0;
    padding-bottom: 80rpx;

    .c-title {
      font-weight: bold;
      display: flex;
      align-items: center;
      padding: 30rpx;
      padding-bottom: 15rpx;

      &:before {
        content: '';
        display: inline-block;
        height: 0.8rem;
        width: 6rpx;
        margin-top: 0.2rem;
        margin-right: 10rpx;
        background-color: #feb048;
        border-radius: 6rpx;
      }
    }

    .c-box {
      background-color: #fff;
      padding-left: 30rpx;
      padding-right: 20rpx;
      padding-bottom: 20rpx;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    }

    .c-box-p {
      padding: 20rpx;
    }

    .btn {
      margin: 20rpx auto;
      width: 694rpx;
      height: 80rpx;
      border-radius: 80rpx;
      background-color: #ffb049;
      color: #fff;
    }
  }

  .card-li-tit {
    position: relative;

    span {
      position: absolute;
      left: -9px;
      color: #f56c6c;
      line-height: 20px;
      font-size: 20px;
      top: 3px;
    }

    margin-bottom: 20rpx;
  }

  .confim-btn {
    margin: 0 auto;
    width: 196.26rpx;
    height: 66.59rpx;
    /* border: ; */
    border: #00A15E 1px solid;
    color: #00A15E;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
  }

  .up-img {
    width: 341.71rpx
  }

  .today-btn {
    width: 588.79rpx;
    background-color: #00A15E;
    color: white;
    position: fixed;
    bottom: 40rpx;
    /* transform: ; */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #00A15E, #4CC593);
    /* margin: 0 auto; */
  }

  .code-img {
    background-color: #F4F4F4;
    height: 350.47rpx;
    position: relative;

    .carime-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

  }
</style>