feature/UI风格修改

.gitignore

@@ -1,5 +1,5 @@
 node_modules
-dist
+docker/dist
 .DS_Store
 docker/dist
 dist-ssr

src/api/prepare/index.ts

@@ -8,11 +8,14 @@ export function getStation(id: any) {
 }
 //分页获取当前订单列表
 export function workOrderPage(data: any) {
-  return request({
-    url: "/api/v1/plan/workOrder/page",
-    method: "post",
-    data,
-  });
+  return request(
+    {
+      url: "/api/v1/plan/workOrder/page",
+      method: "post",
+      data,
+    },
+    { loadingKey: "getListData" }
+  );
 }
 //预齐套列表数据获取
 export function getListData(data: any) {
@@ -20,7 +23,7 @@ export function getListData(data: any) {
     url: "/api/v1/process/vehicleOperation/operationMaterial",
     method: "post",
     data,
-  });
+  },{ loadingKey: "operationMaterial" });
 }
 //预齐套箱数据获取
 export function getBoxInfo(data: any) {

src/components/Empty/index.vue

@@ -13,3 +13,10 @@ defineProps({
 });
 const emptyImage = ref(EmptyImageSvg);
 </script>
+<style lang="scss" scoped>
+:deep(.el-empty__description) {
+  p {
+    font-size: $f20;
+  }
+}
+</style>

src/components/MessageBox/index.vue

@@ -1,31 +1,51 @@
 <template>
-  <div v-if="modelValue" class="body">
-    <div class="headerTittle">消息记录</div>
-    <el-scrollbar class="itemScrollbar">
-      <div class="item" v-for="(item, index) in msgData" :key="index">
-        <div>
-          <div>{{ item.created }}</div>
-          <div>{{ item.title }}</div>
+  <Transition>
+    <div v-if="modelValue" class="body">
+      <div class="headerTittle">消息记录</div>
+      <el-scrollbar class="itemScrollbar">
+        <div class="item" v-for="(item, index) in msgData" :key="index">
           <div>
-            {{ item.content }}
+            <div>{{ item.created }}</div>
+            <div>{{ item.title }}</div>
+            <div>
+              {{ item.content }}
+            </div>
           </div>
         </div>
-      </div>
-    </el-scrollbar>
-    <div class="bottomBtn">
-      <el-button type="primary" :disabled="setNextStatus" @click="setPage(1)" class="btn">下一页</el-button>
-      <el-button class="btn" :disabled="page == 1" type="primary" @click="setPage(-1)">
-        上一页
-      </el-button>
+      </el-scrollbar>
+      <div class="bottomBtn">
+        <el-button
+          type="primary"
+          :disabled="setNextStatus"
+          @click="setPage(1)"
+          class="btn"
+          >下一页</el-button
+        >
+        <el-button
+          class="btn"
+          :disabled="page == 1"
+          type="primary"
+          @click="setPage(-1)"
+        >
+          上一页
+        </el-button>
 
-      <el-button type="primary" class="btn" @click="emits('update:modelValue', false)">关 闭</el-button>
+        <el-button
+          type="primary"
+          class="btn"
+          @click="emits('update:modelValue', false)"
+          >关 闭</el-button
+        >
+      </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script setup lang="ts">
 import { useDictionaryStore } from "@/store";
 import { userMessage } from "@/api/user";
+import { Transform } from "stream";
+import { Transition } from "vue";
 const dictS = useDictionaryStore();
 const props = defineProps({
   modelValue: {
@@ -77,8 +97,8 @@ watch(
 </script>
 <style scoped lang="scss">
 .body {
-  width: 300px;
-  height: 40vh;
+  width: 400px;
+  height: 60vh;
   position: fixed;
   right: 20px;
   top: 80px;
@@ -87,7 +107,7 @@ watch(
   border-radius: 16px;
   overflow: hidden;
   padding: 0 20px;
-  border: 1px solid black;
+  border: 1px solid #00000030;
 
   .headerTittle {
     font-size: $f24;
@@ -109,6 +129,7 @@ watch(
     background-color: #f1f3f5;
     border-radius: 16px;
     justify-content: space-between;
+    font-size: $f20;
 
     .operate {
       margin-left: 10px;
@@ -125,6 +146,7 @@ watch(
     margin-top: 10px;
 
     .btn {
+      font-size: $f20;
       font-weight: 500;
     }
   }

src/components/RealTimeMsg/index.vue

@@ -3,25 +3,38 @@
     <div :class="showStatus ? 'content noneContent' : 'content haveContnet'">
       <div class="headerTittle titleText">通知确认</div>
       <el-scrollbar class="itemScrollbar">
-        <div class="item" v-for="(item, index) in messages" :key="index">
-          <div class="itemContent">
-            <div>{{ item.created }}</div>
-            <div>{{ item.title }}</div>
-            <div>{{ item.content }}</div>
+        <TransitionGroup name="list">
+          <div class="item" v-for="(item, index) in messages" :key="index">
+            <div class="itemContent">
+              <div>{{ item.created }}</div>
+              <div>{{ item.title }}</div>
+              <div>{{ item.content }}</div>
+            </div>
+            <div class="btns">
+              <el-button type="primary" class="btn" @click="submit(item, index)"
+                >收到</el-button
+              >
+            </div>
           </div>
-          <div class="btns">
-            <el-button type="primary" class="btn" @click="submit(item, index)">收到</el-button>
-          </div>
-        </div>
+        </TransitionGroup>
         <div class="describeText">
-          {{ messages.length < 1 ? "暂无数据" : "已到最底端~~~" }} </div>
+          {{ messages.length < 1 ? "暂无数据" : "已到最底端~~~" }}
+        </div>
       </el-scrollbar>
     </div>
     <div class="iconBox">
-      <el-icon class="icon" :size="40" @click="changePop">
-        <Expand v-if="showStatus" />
-        <Fold v-else />
-      </el-icon>
+      <el-tooltip
+        effect="dark"
+        content="点击打开通知"
+        :disabled="!showStatus"
+        placement="right"
+        trigger="hover"
+      >
+        <el-icon class="icon" :size="40" @click="changePop">
+          <Expand v-if="showStatus" />
+          <Fold v-else />
+        </el-icon>
+      </el-tooltip>
     </div>
   </div>
 </template>
@@ -91,6 +104,8 @@ ws.onclose = () => {
     height: 100%;
     background-color: white;
     overflow: hidden;
+    border-radius: 0 16px 16px 0;
+    border-right: 1px solid #f1f3f5;
 
     .headerTittle {
       height: 40px;
@@ -107,7 +122,6 @@ ws.onclose = () => {
       }
 
       .item {
-        border: 2px solid #ff000070;
         border-radius: 16px;
         width: 100%;
         min-height: 80px;
@@ -115,19 +129,25 @@ ws.onclose = () => {
         justify-content: space-between;
         padding: 20px;
         margin-bottom: 20px;
+        background-color: #f1f3f5;
 
         .itemContent {
           height: 100%;
-          border: 2px solid #ff000070;
           border-radius: 16px;
           padding: 20px;
+          background-color: white;
+          font-size: $f20;
         }
 
         .btns {
-          width: 40px;
+          width: 60px;
           @include flex;
-          height: 100%;
           margin-left: 20px;
+          .btn {
+            height: 100%;
+            border-radius: 16px;
+            font-size: $f20;
+          }
         }
       }
     }
@@ -135,12 +155,13 @@ ws.onclose = () => {
 
   .noneContent {
     width: 0vw;
-    transition: width 0.5s;
+    transition: 0.5s;
+    transform: translateX(-30vw);
   }
 
   .haveContnet {
     width: 30vw;
-    transition: width 0.5s;
+    transition: 0.5s;
   }
 
   .iconBox {

src/views/prepare-complete-suit/components/first.vue

@@ -9,7 +9,7 @@
       >
         <template #prefix></template>
       </el-input>
-      <el-scrollbar class="scrollbarSty">
+      <el-scrollbar class="scrollbarSty" v-loading="map.get('getListData')">
         <Order
           v-for="(item, index) in seachOrderData"
           :key="index"
@@ -32,7 +32,12 @@
     <el-col :span="14" class="elColClasss">
       <div class="rightCol">
         <div class="showTable">
-          <el-table id="table" :data="tableData" :height="tableFlexHeight">
+          <el-table
+            id="table"
+            :data="tableData"
+            :height="tableFlexHeight"
+            v-loading="map.get('operationMaterial')"
+          >
             <el-table-column label="物料名称" prop="materialName" width="180" />
             <el-table-column label="规格" prop="spec" width="180" />
             <el-table-column label="所需总数" prop="totalMaterial" />
@@ -67,6 +72,7 @@
               </div>
             </template>
           </el-table>
+
           <Pagination
             :limit="limit"
             :page="page"
@@ -121,7 +127,9 @@ import {
   getStation,
   workOrderPage,
 } from "@/api/prepare";
-
+import { useCommonStoreHook } from "@/store";
+const commonS = useCommonStoreHook();
+const map = commonS.loadingMap;
 const orderData = ref([]);
 const opsArray = ref([]);
 const tableData = ref([]);

src/views/prepare-complete-suit/components/order.vue

@@ -4,15 +4,21 @@
     <div class="topArea">
       <div class="productName">{{ item.materialName }}</div>
       <div class="productMsg">
-        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">产品型号</span>
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'"
+          >产品型号</span
+        >
         <span class="msgValue">{{ item.materialModel }}</span>
       </div>
       <div class="productMsg">
-        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">工单编号</span>
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'"
+          >工单编号</span
+        >
         <span class="msgValue">{{ item.workOrderCode }}</span>
       </div>
       <div class="productMsg">
-        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">计划编号</span>
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'"
+          >计划编号</span
+        >
         <span class="msgValue">{{ item.orderCode }}</span>
       </div>
     </div>
@@ -23,7 +29,7 @@
           产品数量
         </div>
       </div>
-      <div class="textDivider">
+      <!-- <div class="textDivider">
         <div class="dividerBox">
           <el-divider direction="vertical" style="height: 60%" />
         </div>
@@ -33,7 +39,7 @@
         <div :class="hoverStatus ? 'boxText boxTextHover' : 'boxText'">
           主料齐套
         </div>
-      </div>
+      </div> -->
     </div>
     <!-- 右下角状态盒子 -->
     <div class="statusBox">未开始</div>

src/views/prepare-complete-suit/components/steps.vue

@@ -56,19 +56,19 @@
             {{ item.completeNum }}
           </div>
         </div>
+        <Transition>
+          <div
+            :style="index == opsArray.length - 1 ? 'border: 0px;' : ''"
+            v-if="selectStepIndex == index"
+            class="describeText infoSty"
+          >
+            目标工位：{{ item.stationName ? item.stationName : "-" }}
+          </div>
+        </Transition>
         <div
-          v-if="selectStepIndex == index"
-          style="
-            margin-left: 44px;
-            border-left: 1px solid black;
-            color: black;
-            padding-left: 10px;
-          "
-          class="describeText"
-        >
-          目标工位：{{ item.stationName ? item.stationName : "-" }}
-        </div>
-        <div class="line" v-if="index != opsArray.length - 1"></div>
+          class="line"
+          v-if="index != opsArray.length - 1 && selectStepIndex !== index"
+        ></div>
       </div>
     </TransitionGroup>
     <el-empty v-if="!opsArray" description="暂无数据" />
@@ -137,7 +137,12 @@ watch(
 .stepStationHover {
   color: white !important;
 }
-
+.infoSty {
+  margin-left: 44px;
+  border-left: 1px solid black;
+  color: black;
+  padding-left: 10px;
+}
 .timeBoxHover {
   color: white !important;
 }

src/views/process/components/transferNum.vue

@@ -34,7 +34,6 @@
                     ? 'describeText active'
                     : 'describeText'
                 "
-                style="cursor: pointer"
                 >{{ item.seqNo }}</span
               >
             </el-tooltip>
@@ -92,7 +91,7 @@ onMounted(() => {
   .row {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: bottom;
     vertical-align: center;
 
     .status {
@@ -110,9 +109,10 @@ onMounted(() => {
   font-weight: $Medium;
   font-size: 30px;
   margin-bottom: $p10;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  word-break: break-all;
+  cursor: pointer;
 }
 
 .active {

src/views/storage-in/index.vue

@@ -45,14 +45,14 @@
         </el-button>
       </el-col>
       <el-col :span="8">
-        <div class="type-title">盒内原有物料</div>
+        <div class="type-title">原有物料</div>
         <el-scrollbar class="outing-container">
           <div style="height: 300px" v-if="Machinery">
             <MachineryLoading />
           </div>
           <div v-if="!outStatus">
             <div class="addbox" v-if="addSuccessStatus">
-              扫码的盒子编码:{{ addBoxInfo.code }}
+              扫码的载具编码:{{ addBoxInfo.code }}
             </div>
 
             <ScanCodeInput
@@ -60,7 +60,7 @@
               v-model="addBoxSearch"
               :clearable="true"
               :showSuffix="true"
-              placeholder="请扫描或输入料箱编号"
+              placeholder="请扫描或输入载具编号"
               @keyup.enter="addenterBox"
             />
             <el-button
@@ -73,7 +73,7 @@
             </el-button>
           </div>
           <div class="addbox" v-if="outStatus && !Machinery">
-            当前盒子编码:{{ currentBox.vehicleNo }}
+            当前载具编码:{{ currentBox.vehicleNo }}
           </div>
           <div
             v-for="(material, index) in outingMaterials"

src/views/storage-out/index.vue

@@ -63,7 +63,7 @@
           </div>
         </el-scrollbar>
         <el-button class="sureBtn" type="info" @click="backToStorage"
-          >返库
+          >入库
         </el-button>
       </el-col>
       <el-col :span="6">