From 1519870c0e18171ced014a840e86a459dc6b00f1 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期二, 12 十二月 2023 17:26:06 +0800
Subject: [PATCH] 报工记录列表增加人员姓名

---
 src/views/dashboard/components/CraftDetailModal.vue |  295 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 290 insertions(+), 5 deletions(-)

diff --git a/src/views/dashboard/components/CraftDetailModal.vue b/src/views/dashboard/components/CraftDetailModal.vue
index e116a60..7804aec 100644
--- a/src/views/dashboard/components/CraftDetailModal.vue
+++ b/src/views/dashboard/components/CraftDetailModal.vue
@@ -2,34 +2,319 @@
   <div class="craft-detail-modal">
     <BaseModal v-model="modelData" :wider="true" @close="closeModal">
       <template #title>宸ヨ壓璇︽儏 </template>
-      <div class="modal-content">
+      <div v-if="craftModel" class="modal-content">
         <el-scrollbar always class="scroller">
-          <div class="trouble"></div>
+          <div :class="craftModel?.isUpdate ? 'modal-t margin_bottom_20' : 'modal-t  modal-t-two'">
+            <div class="modal-t-l">
+              <div class="modal-t-l-t">{{ craftModel?.procedure }}</div>
+              <div class="modal-t-l-b">
+                <span v-for="(item, index) in craftModel?.paramsMap" :key="index"> {{ index }} : {{ item }}锛� </span>
+              </div>
+            </div>
+            <div class="modal-t-r">宸ヨ壓缂栧彿锛歿{ craftModel?.number }}</div>
+          </div>
+          <div v-if="craftModel?.isUpdate" class="modal-b">
+            <div class="modal-b-t">鏇存柊璁剧疆</div>
+            <template v-if="isUpdate == 1">
+              <div class="modal-b-m">
+                <div class="modal-b-m-l">
+                  <el-icon class="refresh-icon">
+                    <Refresh />
+                  </el-icon>
+                </div>
+                <div class="modal-b-m-r">
+                  <span>宸叉鏌ュ埌鏂扮増鏈細{{ craftModel?.newNumber }}</span>
+                  <BigButton class="btn" bg-color="#4343f5" @click="updateProcess">鏇存柊宸ヨ壓</BigButton>
+                </div>
+              </div>
+              <div class="modal-b-b">
+                <div class="modal-b-b-l">
+                  <div class="modal-b-b-l-t">{{ craftModel?.procedure }}</div>
+                  <div class="modal-b-b-l-b">
+                    <span v-for="(item, index) in craftModel?.newParamsMap" :key="index">
+                      {{ index }} : {{ item }}锛�
+                    </span>
+                  </div>
+                </div>
+                <div class="modal-b-b-r">鏂扮増鏈細{{ craftModel?.newNumber }}</div>
+              </div>
+            </template>
+            <template v-else-if="isUpdate == 2">
+              <div class="refresh-box">
+                <template v-if="loading">
+                  <el-icon class="refresh-icon transform">
+                    <Refresh />
+                  </el-icon>
+                  <div class="refresh-line">鏇存柊涓紝璇风◢鍚�...</div>
+                </template>
+                <template v-else>
+                  <el-icon class="refresh-top-icon">
+                    <Top />
+                  </el-icon>
+                  <div class="refresh-line">宸叉槸鏈�鏂扮増鏈�</div>
+                </template>
+              </div>
+            </template>
+          </div>
         </el-scrollbar>
       </div>
     </BaseModal>
   </div>
 </template>
 <script setup lang="ts">
+import { Refresh, Top } from '@element-plus/icons-vue'
 import { useVModel } from '@vueuse/core'
-
+import BigButton from '@/views/dashboard/components/BigButton.vue'
+import { ref, toRefs, watch } from 'vue'
+import type { CraftModel } from '@/api/craftModel'
 export interface CraftDetailModalProps {
+  craftModel: CraftModel
+  activeArr: string[]
   modelValue: boolean
 }
 const props = withDefaults(defineProps<CraftDetailModalProps>(), {
+  craftModel: undefined,
   modelValue: false
 })
+const { craftModel, activeArr, modelValue } = toRefs(props)
 const emit = defineEmits<{
   'update:modelValue': [show: boolean]
   close: []
+  renew: [craftModel: CraftModel, true]
 }>()
 const modelData = useVModel(props, 'modelValue', emit)
-
 function closeModal() {
   emit('close')
 }
+// 鏈夋洿鏂拌缃殑鍒濆鍊�
+const isUpdate = ref(1)
+const loading = ref(false)
+watch(modelData, () => {
+  // 寮圭獥鏄剧ず鏃惰幏鍙栧伐鑹哄弬鏁�
+  if (modelData.value) {
+    getLoading()
+  }
+})
+function getLoading() {
+  for (let i in activeArr.value) {
+    if (activeArr.value[i] == craftModel?.value?.number) {
+      isUpdate.value = 2
+      loading.value = true
+      return true
+    }
+  }
+  isUpdate.value = 1
+  loading.value = false
+}
 
+function updateProcess() {
+  isUpdate.value = 2
+  if (loading.value) {
+    return true
+  }
+  // 璇锋眰鏇存柊鎺ュ彛 鑾峰緱鏁版嵁涔嬪悗isLoading.value=false;
+  emit('renew', craftModel?.value, true)
+}
 //TODO: 宸ヨ壓璇︽儏寮圭獥
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+$status-default: #b0b0b0;
+$status-running: #33ccff;
+$status-ready: blue;
+$status-done: #0dfde6;
+.refresh-icon {
+  width: 60px;
+  height: 60px;
+  background: #fff;
+  border-radius: 50%;
+  color: $status-ready;
+  font-size: 31px;
+  text-align: center;
+  margin-right: 30px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+.refresh-top-icon {
+  width: 60px;
+  height: 60px;
+  border: 4px solid $status-default;
+  border-radius: 50%;
+  color: $status-default;
+  font-size: 31px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  margin-right: 30px;
+}
+.transform {
+  -webkit-animation: spin 1s linear infinite;
+  -ms-amimation: spin 1s linear infinite;
+  -moz-amimation: spin 1s linear infinite;
+  -o-amimation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0%,
+  15% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.modal-content {
+  height: 600px;
+  overflow: auto;
+  width: calc(100% - 60px);
+  margin: 0 auto;
+  :deep(.el-scrollbar__view) {
+    height: 100%;
+  }
+  .modal-t-two {
+    height: calc(100% - 55px) !important;
+  }
+  .margin_bottom_20 {
+    margin-bottom: 200px;
+  }
+  .modal-t {
+    overflow: hidden;
+    width: 100%;
+    min-height: 150px;
+    height: auto;
+    color: #fff;
+    padding: 15px 20px 30px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    position: relative;
+    border: 1px dotted $status-running;
+    .modal-t-l {
+      width: 100%;
+      height: 100%;
+      float: left;
+      font-size: 17px;
+      .modal-t-l-t {
+        width: calc(100% - 180px);
+        color: $status-running;
+        margin-bottom: 10px;
+      }
+      .modal-t-l-b {
+        width: 100%;
+        height: calc(100% - 40px);
+        font-size: 16px;
+      }
+    }
+    .modal-t-r {
+      width: 180px;
+      padding: 8px 5px;
+      border-radius: 10px;
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      text-align: center;
+    }
+  }
+  .modal-b {
+    overflow: hidden;
+    width: 100%;
+    min-height: 350px;
+    height: auto;
+    color: #fff;
+    padding: 5px 0px 0 0px;
+    border-radius: 6px;
+    .modal-b-t {
+      font-size: 18px;
+      color: #eee;
+      height: 40px;
+      line-height: 40px;
+    }
+    .refresh-box {
+      width: 240px;
+      margin: 0 auto;
+      .refresh-icon,
+      .refresh-top-icon {
+        margin: 0 auto;
+        margin-left: 95px;
+      }
+      .refresh-line {
+        width: 100%;
+        height: 40px;
+        border-top: 5px solid #fff;
+        line-height: 40px;
+        text-align: center;
+        font-size: 18px;
+        color: #999;
+        margin-top: 15px;
+      }
+    }
+    .modal-b-m {
+      width: 100%;
+      margin: 0 auto;
+      overflow: hidden;
+      .modal-b-m-l {
+        float: left;
+        width: calc(40% - 5px);
+        border-right: 3px solid #fff;
+        .refresh-icon {
+          float: right;
+        }
+      }
+      .modal-b-m-r {
+        width: calc(60% - 30px);
+        margin-left: 30px;
+        float: left;
+        span {
+          display: inline-block;
+          width: 100%;
+        }
+        .btn {
+          width: 100px;
+          height: 35px;
+          line-height: 35px;
+          border-radius: 10px;
+          float: left;
+          font-size: 14px;
+          cursor: pointer;
+          text-align: center;
+          margin-top: 10px;
+        }
+      }
+    }
+    .modal-b-b {
+      width: 75%;
+      margin: 40px auto 0;
+      border: 1px dotted $status-running;
+      height: calc(100% - 40px - 110px);
+      min-height: 180px;
+      overflow: hidden;
+      color: #fff;
+      padding: 10px 10px 10px 30px;
+      position: relative;
+      .modal-b-b-l {
+        width: 100%;
+        height: 100%;
+        font-size: 14px;
+        .modal-b-b-l-t {
+          width: calc(100% - 180px);
+          margin-bottom: 10px;
+        }
+        .modal-b-b-l-b {
+          width: 100%;
+          height: calc(100% - 40px);
+          font-size: 14px;
+        }
+      }
+      .modal-b-b-r {
+        width: 180px;
+        padding: 10px 10px;
+        border-radius: 10px;
+        position: absolute;
+        right: 5px;
+        top: 0px;
+        text-align: right;
+      }
+    }
+  }
+}
+</style>

--
Gitblit v1.8.0