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