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

<template>
  <div>
    <div style="background-image: url('../../../assets/images/bc.png');background-size: 100% 100%;">
      <div class="home_header">扫描</div>
      <div class="home_header_line"></div>
      <div class="home_con_body">
        <div class="home_con_s">
          <div v-if="is_show" class="pack_up">
            <img @click="handleShow" src="../../../assets/home/collect.png" alt="">
          </div>
          <div v-if="!is_show" :class="!is_show ? 'pack_up_d' : ''" class="pack_up" style="display: flex;gap: .3125rem;">
            <div style="font-size: 0.88rem;
color: #ABDFFF;">展开</div>
            <img @click="handleShow" style="width: 0.41rem;height: 0.69rem;" src="../../../assets/home/zk.png" alt="">
          </div>
          <div v-if="is_show" class="pack_up_con">
            <p class="pack_up_name">王晓伟</p>
            <div class="pack_up_grid">
              <div>
                <p>人员工时</p>
                <div><span>1245</span><span>小时</span></div>
              </div>
              <div>
                <p>人员工数</p>
                <div><span>1245</span><span>件</span></div>
              </div>
              <div>
                <p>工作效率</p>
                <div><span>1245</span><span>件/小时</span></div>
              </div>
              <div>
                <p>包装件数</p>
                <div><span>1245</span><span>件</span></div>
              </div>
            </div>
          </div>
        </div>

        <div class="send_work" v-if="tableData.length > 0" v-for="(item, index) in tableData" :key="index">
          <div class="check_box">
            <div @click="handleChoose(item, index)" :class="item.is_choose ? 'check_box_c_active' : 'check_box_c'">
            </div>
          </div>
          <div class="secd_flex">
            <div class="secd_title">
              <span>派工单号：</span><span> {{ item.dispatch_no }}</span>
            </div>
            <span class="secd_title_d">{{ item.product_title }}</span>
            <div class="secd_g"><span>规格型号：</span><span>{{ item.size }}</span></div>
            <div class="secd_flex_w">
              <div class="secd_flex_s">
                <span>已完工数：</span>
                <span>{{ item.finished_num }}件</span>
              </div>
              <div class="secd_flex_s">
                <span>未完工数：</span>
                <span>{{ item.not_finished_num }}件</span>
              </div>
            </div>
          </div>

        </div>
        <div v-if="tableData.length == 0"
          style="display: flex;width: 100%;height: 10rem;justify-content: center;align-items: center;">

          <Spin size="small" />
          <Spin />
          <Spin size="small" />

        </div>
        <div class="footer">

          <div class="return_btn" @click="handleReturn">返回</div>
          <div class="confirm_btn" @click="handelGoSure">确认</div>
        </div>
      </div>
    </div>
    <!-- -------------------------- -->

    <!-- <div class="bdy">
      <table>
        <tr style="height: 2rem">
          <th style="width: 3rem">派工单号</th>
          <th style="width: 4rem">产品名称</th>
          <th style="width: 3rem">规格型号</th>
          <th style="width: 3rem">已完工数量</th>
          <th style="width: 3rem">未完工数量</th>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index" @click="handleChoose(item, index)"
          :class="item.is_choose ? 'choose_item' : ''">
          <td>
            {{ item.dispatch_no }}
          </td>
          <td>{{ item.product_title }}</td>
          <td>{{ item.size }}</td>
          <td>{{ item.finished_num }}</td>
          <td>{{ item.not_finished_num }}</td>
        </tr>
      </table>
    </div> -->

  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      is_show: true,
      is_use: false,
      spinShow: false
    }
  },
  created () {
  },
  mounted () {
    let text = []
    if (localStorage.getItem('fyy_target')) {
      let target = JSON.parse(localStorage.getItem('fyy_target'))
      localStorage.removeItem('fyy_target')
      target.forEach(v => {
        v = v.replace(/\"/g, '')
        text.push(this.func.hexToString(v))
      })
    }
    this.tableData = []
    // const fyyTarget = ('PG2023081000025,PG2023081000024').split(',')
    text.forEach(v => {
      const data = {
        url: 'http://121.36.142.167:7774/jbl/api/module-data/dispatch_orders/page',
        post: { "direction": "DESC", "property": "id", "fromClientType": "pc", "number": 0, "sorts": [], "rules": [{ "field": "dispatch_orders.dispatch_no", "option": "LIKE_ANYWHERE", "values": [v] }, { "field": "product_no", "option": "LIKE_ANYWHERE", "values": ["BC030101000001"] }], "size": 15, "specialConditions": [], "workflowSearchBean": {}, "dynamicFormCode": "dispatch_orders", "dynamicFormTable": null, "ignoreField": true, "developmentSystemId": null, "debugFlag": true }
      }
      this.initData(data)
    })
  },
  methods: {
    initData(row) {

      this.axios.post('/api/testdwy', { ...row }).then(res => {


        res.data.content.forEach(v => {
          v.is_choose = false
          v.dispatch_no = v.dispatch_orders.dispatch_no
          v.not_finished_num = v.dispatch_num - v.finished_num
        })
        this.tableData.push(...res.data.content)
      })
    },
    handelGoSure() {
      if (this.tableData.filter(v => v.is_choose).length === 0) {
        return this.$Message.warning('请先选择数据！')
      }
      localStorage.removeItem('fyy_target')
      const dataId = Math.floor(Math.random() * 100)
      const text = JSON.stringify(this.tableData.filter(v => v.is_choose))
      localStorage.setItem(dataId + '', text)
      this.$router.push({ path: '/cms/finish/detailed', query: { id: dataId } })
    },
    handleReturn() {
      localStorage.removeItem('fyy_target')
      this.$router.push('/cms/home')
    },
    handleChoose(item, index) {
      item.is_choose = !item.is_choose
      // this.tableData.splice(index, 1, item)
    },
    handleShow() {
      this.is_show = !this.is_show
      console.log(document.getElementsByClassName('header'))
      if (this.is_show) {
        document.getElementsByClassName('header')[0].style = 'height:7rem;overflow:hidden;transition:all .4s;'
        setTimeout(() => {
          document.getElementsByClassName('header')[0].style = 'overflow:none;'
          this.is_use = false
        }, 400)
      } else {
        this.is_use = true
        document.getElementsByClassName('header')[0].style = 'height:2.7rem;overflow:hidden;transition:all .4s;'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.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 {
  height: 9.69rem;
  background-image: url('../../../assets/home/packUpback.png');
  background-size: 100% 100%;
  margin-top: 1.38rem;
  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: 1rem;
  box-sizing: border-box;
}

.home_header {
  height: 3.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;
}

.header {
  width: 94%;
  height: 7rem;
  // overflow: hidden;
  // transition: all 0.4s;
  position: relative;
  top: 0.5rem;
  left: 3%;
  box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
  border-radius: 1rem;
  padding: 0.4rem 0.7rem 0 1rem;
  background: #fff;
}

.header_btn {
  border-radius: 1rem;
  padding: 0.1rem;
  width: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

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

.ot {
  position: relative;
  top: -1.3rem;
}

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

  .ft {
    font-size: 1.5rem;
    width: 5rem;
    text-align: center;
  }
}

.header_middle {
  position: relative;
  top: -0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/deep/ .btn-group>.btn,
.btn-group-vertical>.btn {
  background: #ffffff;
  color: #2c3e50;
  outline: none;
  border: none;
  margin: 0;
  z-index: 3;
}

.header_footer {
  position: absolute;
  top: -1.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  div {
    font-size: 0.5rem;
    color: rgb(244, 136, 42);
  }
}

.bdy {
  width: 94%;
  height: calc(100% - 18.7rem);
  overflow: auto;
  position: relative;
  top: 1rem;
  left: 3%;
}

/deep/td {
  text-align: center;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  /* 合并边框 */
  width: 100%;
  /* 表格宽度 */
  background: #fff;
  table-layout: fixed;
}

th {
  font-size: 0.6rem;
  background: #66b1f4;
  color: #fff;
}

td {
  font-size: 0.6rem;
  word-break: break-all;
}

td,
th {
  vertical-align: middle;
  text-align: center;
  border: 0.1rem solid #dddddd;
  /* 单元格边框样式 */
  padding: 0.02rem;
  /* 单元格内边距 */
}

.choose_item {
  background: #c8c8c8;
}

.footer {
  display: flex;
  justify-content: space-around;
  position: absolute;
  width: 100%;
  padding: 0 .55rem;
  box-sizing: border-box;
  left: 0;
  bottom: 4.8rem;
}
</style>