DWY_mobile/src/views/page/Finish/detailed.vue

<template>
  <div style="overflow-y: scroll;padding-bottom: 6.6rem;">
    <div>
      <div class="home_header">完工</div>
      <div class="home_header_line"></div>
      <div class="home_con_body">

        <div class="send_work" v-for="(item, index) in list" :key="index">
          <div class="secd_flex">
            <div class="secd_title">
              <span>派工单号：</span><span>{{ item.dispatch_order_no }}</span>
            </div>
            <span class="secd_title_d">{{ item.product_title }}</span>
            <div style="height: 1px;background-color: #fff;opacity: 0.3;"></div>
            <div style="display: flex;flex-direction: column;gap: 1rem;margin-top: 1rem;">
              <div class="secd_input">
                <div class="secd_input_l">数量：</div>
                <div class="secd_input_r">
                  <input type="text" v-model="item.finished_num" @blur="handleChangeNumber(index)"
                    placeholder="请输入数量">
                </div>
              </div>
              <div class="secd_input">
                <div class="secd_input_l">班组：</div>
                <div class="secd_input_r">
                  <b-form-select id="input-3" v-model="item.team_finish_id" :options="teamList" class="inp select_list"
                    required placeholder="请选择站点" @change="(e) => handleChangeTeam(e, index)"></b-form-select>

                </div>
              </div>
              <div class="secd_input">
                <div class="secd_input_l">人员：</div>
                <div class="secd_input_r">
                  <Select id="input-3" multiple v-model="item.employee_id"
                    required @on-change="handleChangeEmployee($event, index)">
                    <Option v-for="item in employeeList" :key="item.value" :label="item.text" :value="item.value"/>
                  </Select>
                </div>
              </div>
              <div class="secd_input">
                <div class="secd_input_l">设备：</div>
                <div class="secd_input_r">
                  <b-form-select id="input-3" v-model="item.equipment_id" :options="equipmentList" class="inp select_list"
                    required placeholder="请选择站点" @change="(e) => handleChangeEquipment(e, index)"></b-form-select>
                </div>
              </div>
            </div>
            <div style="height: 1px;background-color: #fff;opacity: 0.3;margin-top: .8rem;margin-bottom: .8rem;"></div>
            <div v-for="(_item, _index) in item.break" :key="_index"
              style="display: flex;flex-direction: column;gap: 1rem;margin-top: .5rem;">
              <div class="defective_products">
                <div>不良品</div>
                <div style="display: flex;align-items: center;gap: .625rem;">
                  <img style="width: 1.2rem;height: 1.2rem;" @click="handleBreakAdd(_index, item, index)" src="../../../assets/home/j.png" alt="">
                  <img style="width: 1.2rem;height: 1.2rem;" @click="handleBreakCancel(_index, item, index)" src="../../../assets/home/z.png" alt="">
                </div>
              </div>
              <div class="secd_input">
                <div class="secd_input_l">不良品缺陷：</div>
                <div class="secd_input_r">
                  <b-form-select id="input-3" v-model="_item.break_defect" :options="breakDefectList" class="inp select_list" required></b-form-select>
                </div>
              </div>
              <div class="secd_input">
                <div class="secd_input_l">不良品原因：</div>
                <div class="secd_input_r">
                  <b-form-select id="input-3" v-model="_item.break_id" :options="breakList" class="inp select_list"
                    required></b-form-select>
                </div>
              </div>
              <div class="secd_input">
                <div class="secd_input_l">不良品数量：</div>
                <div class="secd_input_r">
                  <input type="text" placeholder="请输入数量" v-model="_item.break_num">
                </div>
              </div>
              <div class="secd_input">
                <div class="secd_input_l" style="width: 6rem;">花色1：</div>
                <div class="secd_input_r">
                  <b-form-select id="input-3" v-model="_item.color_code" :options="item.colorList" class="inp select_list" @change="handleChangeColor($event,_index,index,item)" required></b-form-select>
                </div>
              </div>
              <div class="secd_input">
                <div class="secd_input_l" style="width: 6rem;">花色2：</div>
                <div class="secd_input_r">
                  <b-form-select id="input-3" v-model="_item.color_code_two" :options="item.colorList" class="inp select_list" @change="handleChangeColor1($event,_index,index,item)" required></b-form-select>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="footer" style="display: flex;justify-content: space-between;position: fixed;bottom: 3rem;left: 50%;transform: translateX(-50%);">
        <div class="return_btn" @click="handleReturn">返回</div>
        <div class="confirm_btn" @click="handleSure">确认</div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [],
      name: '',
      formData: {},
      teamList: [],
      employeeList: [],
      equipmentList: [],
      state: true,
      breakList: [],
      breakDefectList: []
    }
  },
  created () {
    // 获取不良品原因
    const data2 = {
      url: 'http://122.112.250.253:7774/jbl/api/module-data/defective_list/page',
      post: {
        "direction": "DESC",
        "property": "id",
        "fromClientType": "pc",
        "number": 0,
        "sorts": [],
        "rules": [],
        "size": 999,
        "specialConditions": [],
        "dynamicFormCode": "defective",
        "developmentSystemId": null,
        "debugFlag": true
      }
    }
    this.axios.post('/api/testdwy', { ...data2 }).then(res => {
      this.breakList = res.data.content.filter(v => v.status).filter(c => c.defective_type === "REASON")
      this.breakDefectList = res.data.content.filter(v => v.status).filter(c => c.defective_type === "DEFECT")
      this.breakDefectList.forEach(v => {
        v.value = v.defective_code
        v.text = v.title
      })
      this.breakList.forEach(v => {
        v.value = v.defective_code
        v.text = v.title
      })
    })
    // 获取设备
    const data1 = {
      url: 'http://122.112.250.253:7774/jbl/api/module-data/device_list/page',
      post: {
        "direction": "DESC",
        "property": "id",
        "fromClientType": "pc",
        "number": 0,
        "sorts": [],
        "rules": [],
        "size": 15,
        "specialConditions": [],
        "dynamicFormCode": "device",
        "developmentSystemId": null,
        "debugFlag": true
      }
    }
    this.axios.post('/api/testdwy', { ...data1 }).then(res => {
      this.equipmentList = res.data.content.filter(v => v.status)
      this.equipmentList.forEach(v => {
        v.value = v.device_code
        v.text = v.title
      })
    })
    // 获取班组
    const data = {
      url: 'http://122.112.250.253:7774/jbl/api/module-data/team_list/page',
      post: {
        "direction": "DESC",
        "property": "id",
        "fromClientType": "pc",
        "number": 0,
        "sorts": [],
        "rules": [],
        "size": 15,
        "specialConditions": [],
        "dynamicFormCode": "team",
        "developmentSystemId": null,
        "debugFlag": true
      }
    }
    this.axios.post('/api/testdwy', { ...data }).then(res => {
      this.teamList = res.data.content.filter(v => v.status)
      this.teamList.forEach(v => {
        v.value = v.team_code
        v.text = v.title
      })
    })
    // 获取人员
    const data3 = {
      url: 'http://122.112.250.253:7774/jbl/api/module-data/team_code_btn/page',
      post: {
        "direction": "DESC",
        "property": "id",
        "fromClientType": "pc",
        "number": 0,
        "sorts": [],
        "rules": [],
        "size": 15,
        "specialConditions": [],
        "workflowSearchBean": {},
        "dynamicFormCode": "person",
        "dynamicFormTable": null,
        "ignoreField": true,
        "developmentSystemId": null,
        "debugFlag": true
      }
    }
    this.axios.post('/api/testdwy', { ...data3 }).then(res => {
      this.employeeList = res.data.content
      this.employeeList.forEach(v => {
        v.value = v.no
        v.text = v.name
      })
    })
  },
  beforeRouteLeave (to, from, next) {
    localStorage.removeItem(this.$route.query.id + '')
    next()
  },
  beforeRouteEnter (to, from, next) {
    if (localStorage.getItem(to.query.id)) {
      next()
    } else {
      next(vm => {
        vm.$router.replace('/cms/finish/detail')
        // 跳到该路由页面后，再替换为from.path来源路径
      })
    }
  },
  mounted () {
    const id = this.$route.query.id
    this.initData(id)
  },
  methods: {
    handleChangeColor(e,_index,index,row){
      this.list[index].break[_index].color = row.colorList.find(v=>v.value==e).paper_decor;
      this.list[index].break[_index].color_code_show = row.colorList.find(v=>v.value==e).paper_decor;
      this.list[index].break[_index].paper_company_title = row.colorList.find(v=>v.value==e).paper_company_title;
      this.list[index].break[_index].paper_company_code = row.colorList.find(v=>v.value==e).paper_company_code;
    },
    handleChangeColor1(e,_index,index,row){
      this.list[index].break[_index].color_two = row.colorList.find(v=>v.value==e).paper_decor;
      this.list[index].break[_index].color_code_two_show = row.colorList.find(v=>v.value==e).paper_decor;
      this.list[index].break[_index].paper_company_title_two = row.colorList.find(v=>v.value==e).paper_company_title;
      this.list[index].break[_index].paper_company_code_two = row.colorList.find(v=>v.value==e).paper_company_code;
    },
    handleChangeNumber (index) {
      console.log(this.list)
      if(this.list[index].finished_num>this.list[index].not_finished_num){
        this.$Message.warning('不能超过未完工数量！')
        this.list[index].finished_num = this.list[index].not_finished_num
      }
    },
    handleChangeEmployee (e, index) {
      this.list[index].employee_id_show = this.employeeList.filter(v => e.indexOf(v.no) !== -1).map(v => v.name).toString().replace(/,/g, '/$/$/$').replace(/\//g, '')
      console.log(this.list[index])
    },
    handleChangeTeam (e, index) {
      this.list[index].team_id_show = this.teamList.find(v => v.team_code === e).title
    },
    handleChangeEquipment (e, index) {
      this.list[index].equipment_id_show = this.equipmentList.find(v => v.device_code === e).title
    },
    initData (id) {
      this.list = JSON.parse(localStorage.getItem(id + ''))
      this.list.forEach(v => {
        let values = []
        if (v.color_code) {
          values.push(v.color_code)
        }
        if (v.color_code_two) {
          values.push(v.color_code_two)
        }
        // 获取花色
        const data5 = {
          url: 'http://122.112.250.253:7774/jbl/api/module-data/purchase_receipt_product/page',
          post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[{"field":"paper_model","option":"IN","values":values}],"size":999,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"purchase_receipt","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true}
        }
        this.axios.post('/api/testdwy', { ...data5 }).then(res => {
          v.colorList = [];
          res.data.content.forEach(c=>{
            let arr = v.colorList.map(v=>v.paper_decor);
            if(arr.indexOf(c.paper_decor)==-1){
              v.colorList.push(c);
            }
          })
          v.colorList.forEach(v=>{
            v.value = v.paper_model
            v.text = v.paper_decor
          })
        })
        v.team_finish_id = v.dispatch_orders.team_id
        v.team_id_show = v.dispatch_orders.team_id_show
        v.equipment_id = v.dispatch_orders.equipment_id
        v.equipment_id_show = v.dispatch_orders.equipment_id_show
        v.not_finished_num = v.dispatch_num - v.finished_num
        v.finished_num = v.not_finished_num
        v.dispatch_order_no = v.dispatch_orders.dispatch_no
        v.dispatch_item_id = v.id
        v.dispatch_item_no = v.item_num
        v.site = null
        v.id = null
        v.employee_id = v.dispatch_orders.employee_id ? v.dispatch_orders.employee_id.split(',') : []
        v.employee_id_show = v.dispatch_orders.employee_id_show
        v.break = [
          {
            break_id: '',
            break_num: 0,
            break_defect:'',
            color:'',
            color_code:"",
            color_code_show:'',
            color_two:'',
            color_code_two:'',
            color_code_two_show:'',
            paper_company_code_two:'',
            paper_company_title_two:'',
            paper_company_code:'',
            paper_company_title:''
          }
        ]
      })
    },
    handleBreakAdd (_index, item, index) {
      item.break.splice(_index + 1, 0, {
        break_id: '',
        break_num: 0,
        break_defect:'',
        color:'',
        color_code:"",
        color_code_show:'',
        color_two:'',
        color_code_two:'',
        color_code_two_show:'',
        paper_company_code_two:'',
        paper_company_title_two:'',
        paper_company_code:'',
        paper_company_title:''
      })
      this.list.splice(index, 1, item)
    },
    handleBreakCancel (_index, item, index) {
      if (_index === 0) {
        item.break = [{
          break_id: '',
          break_num: 0,
          break_defect:'',
          color:'',
          color_code:"",
          color_code_show:'',
          color_two:'',
          color_code_two:'',
          color_code_two_show:'',
          paper_company_code_two:'',
          paper_company_title_two:'',
          paper_company_code:'',
          paper_company_title:''
        }]
      } else {
        item.break.splice(_index, 1)
      }
      this.list.splice(index, 1, item)
    },
    handleReturn () {
      localStorage.removeItem(this.$route.query.id + '')
      this.$router.go(-1)
    },
    // handleChooseTeam (e) {
    //   if (e) {
    //     this.formData.team_id = e
    //     // 获取班组下的人员
    //     const id = this.teamList.find(v => v.team_code === this.formData.team_id).dynamic_form_value_id
    //     const data = {
    //       url: `http://122.112.250.253:7774/jbl/api/module-data/team/team/472629516238663680/${id}`
    //     }
    //     this.axios.post('/api/testdwyget', { ...data }).then(res => {
    //       this.employeeList = res.data.data.employee
    //       this.employeeList.forEach(v => {
    //         v.value = v.team_code
    //         v.text = v.team_code_show
    //       })
    //       this.formData.employee_id = []
    //     })
    //   } else {
    //     this.formData.employee_id = []
    //   }
    // },
    handleSure () {
      let arr = this.list.map(v =>v.break)
      let arr1 = [];
      arr.forEach(v=>{
        arr1.push(...v);
      })
      arr1 = arr1.filter(vv => vv.break_id && vv.break_defect && vv.break_num)
      if(!arr1.every(c=>c.color_code)){
        return this.$Message.warning('不良品花色1必选！')
      }

      // console.log(this.list);
      // return
      if(this.state){
        this.state = false
        this.list.forEach((v, index) => {
          v.not_finished_num = v.not_finished_num - v.finished_num
          let data3 = {
            url: 'http://122.112.250.253:7774/jbl/api/module-data/completion_orders/completion_orders',
            post: {
              bizId: -1,
              bizTypeEk: 'LOWCODE',
              dynamicFormId: "474201923419320320",
              showModelId: "474382714828959744",
              data: {
                completion_orders: {
                  completion_order_no: null,
                  completion_time: new Date(),
                  created_by: null,
                  created_date: null,
                  employee_id: v.employee_id.length === 0 ? null : v.employee_id.toString(),
                  employee_id_show: v.employee_id_show,
                  equipment_id: v.equipment_id,
                  equipment_id_show: v.equipment_id_show,
                  last_modified_by: null,
                  last_modified_date: null,
                  process_id: v.dispatch_orders.process_id,
                  process_id_show: v.dispatch_orders.process_id_show,
                  remark: null,
                  site: null,
                  team_id: v.team_finish_id,
                  team_id_show: v.team_id_show,
                  finished_num_total:v.finished_num
                },
                completion_orders_dtl: [v]
              }
            }
          }
          const data4Dtil = []
          v.break.forEach(vv => {
            if (vv.break_id && vv.break_defect && vv.break_num) {
              v.defective_num = vv.break_num
              v.defective_remark = vv.break_id
              v.defective_remark_show = vv.title
              v.defective_defect = vv.break_defect
              v.defective_defect_show = vv.title
              v.color = vv.color
              v.color_code = vv.color_code
              v.color_code_show = vv.color_code_show
              v.color_two = vv.color_two
              v.color_code_two = vv.color_code_two
              v.color_code_two_show = vv.color_code_two_show
              v.paper_company_code_two = vv.paper_company_code_two
              v.paper_company_title_two = vv.paper_company_title_two
              v.paper_company_code = vv.paper_company_code
              v.paper_company_title = vv.paper_company_title
              data4Dtil.push(JSON.parse(JSON.stringify(v)))
            }
          })
          this.axios.post('/api/testdwy', { ...data3 }).then(res => {
            if (res.code === 200) {
              if (data4Dtil.length > 0) {
                const data4 = {
                  url: 'http://122.112.250.253:7774/jbl/api/module-data/defective_orders/defective_orders',
                  post: {
                    bizId: -1,
                    bizTypeEk: 'LOWCODE',
                    dynamicFormId: "474139280406949888",
                    showModelId: "474140935059877888",
                    data: {
                      defective_orders: {
                        defective_order_no: null,
                        defection_time: new Date(),
                        created_by: null,
                        created_date: null,
                        employee_id: v.employee_id.length === 0 ? null : v.employee_id.toString(),
                        employee_id_show: v.employee_id_show,
                        equipment_id: v.equipment_id,
                        equipment_id_show: v.equipment_id_show,
                        last_modified_by: null,
                        last_modified_date: null,
                        process_id: v.dispatch_orders.process_id,
                        process_id_show: v.dispatch_orders.process_id_show,
                        site: null,
                        team_id: v.team_finish_id,
                        team_id_show: v.team_id_show
                      },
                      defective_orders_dtl: data4Dtil
                    }
                  }

                }
                this.axios.post('/api/testdwy', { ...data4 }).then(req => {
                  if (req.code == 200) {
                    if (index == this.list.length - 1) {
                      this.$Message.success(req.msg)
                      this.$router.push('/cms/home')
                    }
                  }
                  setTimeout(() => {
                    this.state = true
                  }, 5000)
                })
              } else {
                if (index == this.list.length - 1) {
                  this.$Message.success(res.msg)
                  this.$router.push('/cms/home')
                  setTimeout(()=>{
                    this.state = true
                  },5000)
                }
              }
            }
          })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.inp {
  background: #032a64 !important;
  // opacity: 0.4;
  border: none;
  color: #fff;
}

::-webkit-input-placeholder {
  color: #ffffff84;
  /* 设置占位符文字的颜色 */
}

.defective_products {
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.secd_input {
  display: flex;
  height: 2.06rem;
  font-size: 1rem;
  color: #FFFFFF;

  .secd_input_l {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 100%;
  }

  .secd_input_r {
    flex: 1;

    input {
      width: 100%;
      height: 100%;
      border-radius: 0.38rem;
      border: 0.03rem solid #76CFFF;
      background-color: #00000000;
      outline: none;
      padding: 0 .625rem;
      box-sizing: border-box;
      color: #fff;


    }
  }

}

.select_list {
  border-radius: 0.38rem;
  border: 0.03rem solid #76CFFF;
  background-color: #00000000;
  outline: none;
  padding: 0 .625rem;
  box-sizing: border-box;
  color: #fff;
  width: 100%;
  height: 100%;
  font-weight: 500;
  letter-spacing: 0.1rem;
}

.return_btn {
  background-image: url('../../../assets/home/return.png');
  background-size: 100% 100%;
}

.confirm_btn {
  background-image: url('../../../assets/home/confirm.png');
  background-size: 100% 100%;
}

.return_btn,
.confirm_btn {
  width: 10.97rem;
  height: 3.93rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.secd_flex_s>span:nth-child(1) {
  font-size: 0.94rem;
  color: #ABDFFF;
}

.secd_flex_s>span:nth-child(2) {
  font-size: 0.94rem;
  color: #03FCD3;
}

.secd_g {
  font-size: 1rem;
  color: #ABDFFF
}

.secd_title_d {
  font-size: 1.13rem;
  color: #FFFFFF;
  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.secd_flex_w {
  display: flex;
  justify-content: space-between;
  padding-right: 1.6rem;
  box-sizing: border-box;
}

.secd_flex {
  display: flex;
  flex-direction: column;
  gap: .375rem;

  .secd_title {
    font-size: 0.88rem;
    color: #ABDFFF;
    opacity: 0.5;
  }
}


.check_box_c {
  width: 1.19rem;
  height: 100%;
  background-image: url('../../../assets/home/check.png');
  background-size: 100% 100%;

}

.check_box_c_active {
  width: 1.3rem;
  height: 100%;
  background-image: url('../../../assets/home/checked.png');
  background-size: 100% 100%;
}

.send_work {
  background-image: url('../../../assets/home/packUpback.png');
  background-size: 100% 100%;
  margin-top: .83rem;
  padding: 0.44rem 0.4rem 1.34rem 1.22rem;
  box-sizing: border-box;

  .check_box {
    height: 1.19rem;
    display: flex;
    justify-content: right;
  }
}

.com_top {
  margin-top: 1.72rem !important;
}

.completion_con {
  height: 5.19rem;
  background-image: url('../../../assets/home/completion.png');
  background-size: 100% 100%;
  margin-top: 0.72rem;
  padding: 1rem 1.28rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home_con_s {
  position: relative;

  .pack_up {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5.56rem;
    background-image: url('../../../assets/home/packUp.png');
    background-size: 100% 100%;
    height: 1.97rem;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 2.59rem;
      height: 0.88rem;
    }



  }

  .pack_up_d {
    top: -1.1rem;
  }

  .pack_up_con {
    height: 14.09rem;
    background-image: url('../../../assets/home/packUpback.png');
    background-size: 100% 100%;
    padding: 1.78rem 2.03rem;
    box-sizing: border-box;

    .pack_up_name {
      height: 1.25rem;
      font-size: 1.25rem;
      color: #fff;
      font-weight: 600;
    }

    .pack_up_grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      row-gap: .625rem;

      &>div {
        display: flex;
        flex-direction: column;
        row-gap: .625rem;

        &>div {
          display: flex;
          gap: .125rem;

          span:nth-child(1) {
            font-size: 1.63rem;
            font-family: DIN-BoldItalic, DIN;
            font-weight: 600;
            color: #04FFD5;
            line-height: 1.31rem;
            transform: skewX(-10deg);
            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);

          }

          span:nth-child(2) {
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ABDFFF;
          }
        }

        &>p:nth-child(1) {
          font-size: 1rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ABDFFF;
          margin-bottom: 0px;
        }
      }
    }
  }
}

.home_con_body {
  width: 100%;
  padding: 0 1rem 1rem 1rem;
  padding-top: 0px;
  box-sizing: border-box;

}

.home_header {
  height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
}

.home_header_line {
  width: 100%;
  height: .0625rem;
  background-color: #fff;
  opacity: 0.2;
}

.content {
  height: calc(100% - 5rem);
  overflow: auto;

  .item {
    width: 94%;
    position: relative;
    left: 3%;
    margin: 1.5rem 0;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;

    .add {
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      bottom: -0.5rem;
      left: -0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      border-radius: 50%;
      box-shadow: 0.1rem 0.1rem 0.1rem 0rem #777676;
      background: #fff;
    }

    .delete {
      width: 1.5rem;
      height: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      border-radius: 50%;
      box-shadow: 0.1rem 0.1rem 0.1rem 0rem #777676;
      background: #fff;
    }

    .unit {
      width: 50%;
      padding: 0.5rem;
      display: flex;
      align-items: center;

      label {
        width: 30%;
        text-align: right;
      }
    }
  }
}

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

.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.boo {
  font-size: 2rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem;
  border: 0.1rem solid;
}
::v-deep.ivu-select-selection{
  background-color: transparent;
}
</style>