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