包装ui修改

src/views/page/Package/detailed.vue

@@ -1,12 +1,70 @@
 <template>
-  <div>
+  <div style="overflow-y: scroll;padding-bottom: 5rem;">
+    <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="send_work" v-for="(item, index) in list" :key="index">
+
+
+          <div class="secd_flex">
+            <div class="secd_title">
+              <span>销售订单号：</span><span>{{ item.no }}</span>
+            </div>
+            <span class="secd_title_d">{{ item.material_code_show }}</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.un_box_num" @on-change="handleChangeNumber($event, 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_id" :options="teamList" class="inp select_list" required
+                    placeholder="请选择站点" @change="handleChooseTeam($event, index)"></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" :disabled="item.team_id ? false : true" v-model="item.employee_id"
+                    :options="employeeList" class="inp select_list" required placeholder="请选择人员"
+                    @on-change="handleChangeEmployee($event, index)"></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.num" :options="numList" class="inp select_list" required
+                    placeholder="请选择设备" @change="(e) => handleChangeEquipment(e, index)"></b-form-select>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div class="footer"
+          style="display: flex;justify-content: space-between;position: fixed;bottom: 5rem;left: 50%;transform: translateX(-50%);">
+          <div class="return_btn" @click="handleReturn">返回</div>
+          <div class="confirm_btn" @click="handleSure">确认</div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+  <!-- <div>
     <div class="content">
       <div v-for="(item, index) in list" :key="index" class="item">
-        <!--<div class="add" @click="handleAdd(item, index)">+</div>-->
-        <!--<div class="delete" @click="handleDelete(index)">x</div>-->
+       
         <div class="unit" style="display: flex">
           <label style="width: 50%">销售订单号：</label>
-          <div style="width: 50%;word-break: break-all">{{ item.no}}</div>
+          <div style="width: 50%;word-break: break-all">{{ item.no }}</div>
         </div>
         <div style="display: flex" class="unit">
           <label>产品名称：</label>
@@ -18,95 +76,55 @@
         </div>
         <div style="display: flex" class="unit">
           <label>包装数量：</label>
-          <Input
-            size="small"
-            type="number"
-            placeholder="  请输入"
-            style="width: 60%; padding: 0 0 0 0.2rem"
-            v-model="item.un_box_num"
-          />
+          <Input size="small" type="number" placeholder="  请输入" style="width: 60%; padding: 0 0 0 0.2rem"
+            v-model="item.un_box_num" />
         </div>
         <div class="unit">
-          <label>班组：</label
-          ><span>
-            <b-form-select
-              v-model="item.team_id"
-              :options="teamList"
-              style="
+          <label>班组：</label><span>
+            <b-form-select v-model="item.team_id" :options="teamList" style="
                 height: 1.4rem;
                 width: 60%;
                 border: 0.1rem solid;
                 border-radius: 0.6rem;
                 background: #fff;
-              "
-              @change="handleChooseTeam($event,index)"
-            >
+              " @change="handleChooseTeam($event, index)">
               <template v-slot:first>
-                <b-form-select-option value="" disabled
-                  >请选择班组</b-form-select-option
-                >
-              </template></b-form-select
-            ></span
-          >
+                <b-form-select-option value="" disabled>请选择班组</b-form-select-option>
+              </template></b-form-select></span>
         </div>
         <div class="unit">
           <label>人员：</label>
-          <Select
-            v-model="item.employee_id"
-            :options="employeeList"
-            style="
+          <Select v-model="item.employee_id" :options="employeeList" style="
               width: 60%;
               background: #fff;
-            "
-            multiple
-            transfer
-            size="small"
-            :disabled="item.team_id ? false : true"
-          >
-            <Option v-for="item in employeeList" :key="item.id" :label="item.text" :value="item.value"/>
+            " multiple transfer size="small" :disabled="item.team_id ? false : true">
+            <Option v-for="item in employeeList" :key="item.id" :label="item.text" :value="item.value" />
           </Select>
         </div>
         <div class="unit">
           <label>商标损耗：</label>
-          <b-form-select
-            v-model="item.num"
-            :options="numList"
-            style="
+          <b-form-select v-model="item.num" :options="numList" style="
               height: 1.4rem;
               width: 60%;
               border: 0.1rem solid;
               border-radius: 0.6rem;
               background: #fff;
-            "
-          >
+            ">
             <template v-slot:first>
-              <b-form-select-option value="" disabled
-                >请选择数量</b-form-select-option
-              >
-            </template></b-form-select
-          >
+              <b-form-select-option value="" disabled>请选择数量</b-form-select-option>
+            </template></b-form-select>
         </div>
       </div>
       <div class="footer_btn">
-        <b-button
-          variant="primary"
-          style="width: 35%; margin-left: 3%"
-          @click="handleReturn"
-          >返回</b-button
-        >
-        <b-button
-          variant="primary"
-          style="width: 35%; margin-right: 3%"
-          @click="handleSure"
-          >确认</b-button
-        >
+        <b-button variant="primary" style="width: 35%; margin-left: 3%" @click="handleReturn">返回</b-button>
+        <b-button variant="primary" style="width: 35%; margin-right: 3%" @click="handleSure">确认</b-button>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       list: [],
       formData: {},
@@ -120,11 +138,11 @@ export default {
       state: true
     }
   },
-  created () {
+  created() {
     // 获取班组
     const data = {
       url: 'http://121.36.142.167: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}
+      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)
@@ -136,7 +154,7 @@ export default {
     // 获取人员
     const data1 = {
       url: 'http://121.36.142.167: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}
+      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', { ...data1 }).then(res => {
       this.employeeList = res.data.content
@@ -146,11 +164,11 @@ export default {
       })
     })
   },
-  beforeRouteLeave (to, from, next) {
+  beforeRouteLeave(to, from, next) {
     localStorage.removeItem(this.$route.query.id + '')
     next()
   },
-  beforeRouteEnter (to, from, next) {
+  beforeRouteEnter(to, from, next) {
     if (localStorage.getItem(to.query.id)) {
       next()
     } else {
@@ -160,18 +178,21 @@ export default {
       })
     }
   },
-  mounted () {
+  mounted() {
     const id = this.$route.query.id
     this.initData(id)
   },
   methods: {
-    initData (id) {
-      this.list = JSON.parse(localStorage.getItem(id + ''))
-      this.list.forEach(v => {
-        v.team_id = ''
-      })
+    initData(id) {
+      if (id) {
+        this.list = JSON.parse(localStorage.getItem(id + ''))
+        this.list.forEach(v => {
+          v.team_id = ''
+        })
+      }
+
     },
-    handleChooseTeam (e, index) {
+    handleChooseTeam(e, index) {
       if (e) {
         // 获取班组下的人员
         const id = this.teamList.find(v => v.team_code === e).dynamic_form_value_id
@@ -184,18 +205,18 @@ export default {
         })
       }
     },
-    handleReturn () {
+    handleReturn() {
       this.$router.go(-1)
     },
-    handleSure () {
+    handleSure() {
       let box_orders_products = [];
       let team_id = '';
       // let team_name = '';
       // let employee_ids = '';
       // let employee_names = '';
-      this.list.forEach((v,index) => {
+      this.list.forEach((v, index) => {
         let box_orders_product = {
-          "item_num": (index+1),
+          "item_num": (index + 1),
           "product_no": v.material_code,
           "product_title": v.material_code_show,
           "color_code": v.craft_type_code_show,
@@ -204,7 +225,7 @@ export default {
           "process_title": v.craft_type_code_show,
           "color": v.decor_code_show,
           "process_title_two": v.craft_type_two_show,
-          "color_two":  v.decor_two_code_show,
+          "color_two": v.decor_two_code_show,
           "product_size": v.specs,
           "product_unit": v.unit_code,
           "product_unit_title": v.unit_code_show,
@@ -242,14 +263,14 @@ export default {
         "dynamicFormId": "474107044420857856",
         "showModelId": "474108545251880960",
         data: {
-          "box_orders" : box_orders,
-          "box_orders_label_product" : [],
-          "box_orders_product" : box_orders_products,
-          "production_orders_dtl" : box_orders_products,
+          "box_orders": box_orders,
+          "box_orders_label_product": [],
+          "box_orders_product": box_orders_products,
+          "production_orders_dtl": box_orders_products,
         }
       }
       let data1 = {
-        url:'http://121.36.142.167:7774/jbl/api/module-data/box_orders/box_orders',
+        url: 'http://121.36.142.167:7774/jbl/api/module-data/box_orders/box_orders',
         post: data
       }
       this.axios.post('/api/testdwy', data1).then(res => {
@@ -266,6 +287,7 @@ export default {
 .content {
   height: calc(100% - 5rem);
   overflow: auto;
+
   .item {
     width: 94%;
     height: auto;
@@ -278,6 +300,7 @@ export default {
     font-size: 0.8rem;
     display: flex;
     flex-wrap: wrap;
+
     .add {
       position: absolute;
       width: 1.5rem;
@@ -292,6 +315,7 @@ export default {
       box-shadow: 0.1rem 0.1rem 0.1rem 0rem #777676;
       background: #fff;
     }
+
     .delete {
       width: 1.5rem;
       height: 1.5rem;
@@ -306,11 +330,13 @@ export default {
       box-shadow: 0.1rem 0.1rem 0.1rem 0rem #777676;
       background: #fff;
     }
+
     .unit {
       width: 50%;
       padding: 0.5rem;
 
       vertical-align: middle;
+
       label {
         width: 40%;
         text-align: center;
@@ -324,7 +350,306 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-/deep/ .ivu-select-dropdown-list{
+
+/deep/ .ivu-select-dropdown-list {
   padding: 0 !important;
 }
+
+/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;
+
+  &>div {
+    img {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+  }
+
+}
+
+.secd_input {
+  display: flex;
+  height: 2.06rem;
+  font-size: 1rem;
+  color: #FFFFFF;
+
+  .secd_input_l {
+    display: flex;
+    align-items: 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: 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;
+  padding-top: 0px;
+  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;
+}
 </style>