| | |
| | | > |
| | | <el-input |
| | | type="textarea" |
| | | :maxlength="200" |
| | | show-word-limit |
| | | v-model="currentDetail.content" |
| | | placeholder="请输入工单内容" |
| | | class="required-input" |
| | |
| | | v-model="currentDetail.processingDetail" |
| | | placeholder="请输入事件处理详情" |
| | | :rows="4" |
| | | :maxlength="200" |
| | | show-word-limit |
| | | style="width: 100%; margin-bottom: 10px" |
| | | :disabled="!isCurrentUserAssigned" |
| | | /> |
| | | </template> |
| | | <!-- 已完成和已完结状态显示只读文本 --> |
| | |
| | | <template v-else> 上传图片</template> |
| | | </div> |
| | | <el-upload |
| | | :disabled="!isCurrentUserAssigned" |
| | | v-if="hasProcessedAndOverBtnPermission()" |
| | | ref="uploadRef" |
| | | :action="'#'" |
| | |
| | | :loading="completeLoading" |
| | | @click="handleComplete" |
| | | icon="el-icon-circle-check" |
| | | :disabled="!isCurrentUserAssigned" |
| | | > |
| | | 完成工单 |
| | | </el-button> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { useStore } from 'vuex' |
| | | import { ref, computed, watch, nextTick } from 'vue'; |
| | | import { flowEvent, getStepInfo } from '@/api/tickets/ticket'; |
| | | import { getSmallImg, getShowImg } from '@/utils/util'; |
| | | import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue'; |
| | | import { ElMessage} from 'element-plus'; |
| | | const store = useStore() |
| | | const userInfo = computed(() => store.state.user.userInfo) |
| | | const isLoading = ref(false); |
| | | // console.log('userInfo',userInfo.value); |
| | | // 定义props |
| | | const props = defineProps({ |
| | | modelValue: { |
| | |
| | | } |
| | | }); |
| | | |
| | | // 定义emits |
| | | // 定义emits |
| | | |
| | | const emit = defineEmits([ |
| | | 'update:modelValue', |
| | | 'detail-success', |
| | |
| | | const isEditMode = computed(() => { |
| | | return props.currentDetail.status === -1; |
| | | }); |
| | | |
| | | // 是否有权限完成工单 |
| | | const isCurrentUserAssigned =computed(()=>{ |
| | | const handleUserId = props.currentDetail?.handle_user_id; |
| | | const currentUserId = userInfo.value?.user_id; |
| | | return !!handleUserId && !!currentUserId && String(handleUserId) === String(currentUserId); |
| | | }) |
| | | const formattedDetailFields = computed(() => { |
| | | const fields = [ |
| | | { label: '工单名称', value: props.currentDetail.orderName }, |
| | |
| | | () => props.currentDetail, |
| | | (newVal) => { |
| | | if (newVal && dialogVisible.value) { |
| | | loadStepInfo(); |
| | | initMap(); |
| | | isLoading.value = true; |
| | | setTimeout(() => { |
| | | loadStepInfo(); |
| | | initMap(); |
| | | isLoading.value = false; |
| | | }, 50); |
| | | |
| | | } |
| | | }, |
| | | { deep: true } |
| | |
| | | |
| | | const mapStatus = (status) => { |
| | | const statusTextMap = { |
| | | '-1': '草稿', |
| | | 2: '待审核', |
| | | 0: '待处理', |
| | | 3: '处理中', |
| | |
| | | const hasProcessedAndOverBtnPermission = () => { |
| | | return props.permission && props.permission.tickets_view_processedAndOver === true; |
| | | }; |
| | | |
| | | // 通过不通过 |
| | | const hasReviewBtnPermission = () => { |
| | | return props.permission && props.permission.tickets_review_btn === true; |
| | | }; |
| | |
| | | const handleComplete = async () => { |
| | | if (completeLoading.value) return; |
| | | completeLoading.value = true; |
| | | |
| | | try { |
| | | if (!props.currentDetail.processingDetail) { |
| | | ElMessage.warning('请先填写事件处理详情'); |
| | | completeLoading.value = false; |
| | | return; |
| | | } |
| | | |
| | |
| | | completeLoading.value = false; |
| | | return; |
| | | } |
| | | |
| | | try { |
| | | const data = { |
| | | id: props.currentDetail.id, |
| | | status: props.currentDetail.status, |
| | | processingDetails: props.currentDetail.processingDetail, |
| | | eventNum: props.currentDetail.orderNumber, |
| | | }; |
| | | |
| | | const file = props.currentDetail.photos?.[0]?.raw || null; |
| | | |
| | | const response = await flowEvent(data, file); |
| | | |
| | | if (response.data.code === 0) { |
| | | ElMessage.success('工单已完成'); |
| | | emit('detail-success'); |
| | |
| | | |
| | | <style lang="scss"> |
| | | .custom-dialog { |
| | | max-height: 96vh; |
| | | transition: max-height 0.3s ease-out; |
| | | height: 96vh; |
| | | // min-height: 50vh; |
| | | .el-dialog__body { |
| | | border-top: 0.1rem solid #f0f0f0; |
| | | } |
| | |
| | | |
| | | .step-timer { |
| | | position: absolute; |
| | | right: 80%; |
| | | right: 92%; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | width: 100px; |
| | | margin-left: 4px; |
| | | color: #666; |
| | | font-size: 12px; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .event-total-time { |
| | |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .action-bar { |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | | .el-dialog { |
| | | .el-form-item { |
| | |
| | | margin-top: 12px; |
| | | } |
| | | |
| | | .create-ticket-form { |
| | | padding: 20px 10px; |
| | | |
| | | .form-section { |
| | | background-color: #fff; |
| | | border-radius: 4px; |
| | | |
| | | .el-row { |
| | | margin-bottom: 16px; |
| | | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .location-wrapper { |
| | | width: 100%; // 修改为100%以适应父容器 |
| | | height: auto; // 修改为auto以自适应内容 |
| | | |
| | | .map-button { |
| | | width: 100%; // 让按钮填满容器宽度 |
| | | height: 36px; // 与其他输入框保持一致的高度 |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | i { |
| | | margin-right: 4px; |
| | | } |
| | | } |
| | | |
| | | .location-text { |
| | | margin-top: 8px; |
| | | padding: 8px 12px; |
| | | background-color: #f5f7fa; |
| | | border-radius: 4px; |
| | | color: #606266; |
| | | font-size: 13px; |
| | | line-height: 1.4; |
| | | } |
| | | } |
| | | |
| | | .upload-wrapper { |
| | | .uploader { |
| | | :deep(.el-upload--picture-card) { |
| | | width: 120px; |
| | | height: 100px; |
| | | line-height: 128px; |
| | | } |
| | | |
| | | :deep(.el-upload-list__item) { |
| | | width: 120px; |
| | | height: 120px; |
| | | } |
| | | } |
| | | |
| | | .upload-tip { |
| | | font-size: 12px; |
| | | color: #909399; |
| | | line-height: 1.4; |
| | | margin-top: 8px; |
| | | } |
| | | } |
| | | |
| | | .el-form-item { |
| | | margin-bottom: 18px; |
| | | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | |
| | | :deep(.el-form-item__label) { |
| | | font-weight: 500; |
| | | color: #606266; |
| | | } |
| | | :deep(.el-textarea__inner) { |
| | | padding: 8px 12px; |
| | | } |
| | | .full-width { |
| | | width: 100%; |
| | | } |
| | | } |
| | | |
| | | :deep(.el-dialog__body) { |
| | | border-top: 0.1rem solid #f0f0f0; |
| | | } |
| | | |
| | | .dialog-footer-new { |
| | | text-align: right; |
| | | padding-top: 16px; |
| | | border-top: 1px solid #ebeef5; |
| | | |
| | | .el-button + .el-button { |
| | | margin-left: 12px; |
| | | } |
| | | |
| | | .el-button { |
| | | padding: 9px 20px; |
| | | |
| | | &:last-child { |
| | | margin-left: 12px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .dialog-footer1-new { |
| | | position: sticky; |
| | |
| | | } |
| | | } |
| | | |
| | | .location-info { |
| | | margin-top: 10px; |
| | | padding: 10px; |
| | | background-color: #f5f7fa; |
| | | border-radius: 4px; |
| | | |
| | | p { |
| | | margin: 5px 0; |
| | | color: #606266; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | |
| | | .map-select { |
| | | display: flex; |
| | |
| | | max-height: 600px; |
| | | overflow-y: scroll; |
| | | overflow-x: hidden; |
| | | |
| | | } |
| | | |
| | | .media-box { |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | /* 新建工单和处理工单的上传组件样式 */ |
| | | .create-upload, |
| | | .detail-upload { |
| | |
| | | object-fit: contain; |
| | | } |
| | | } |
| | | |
| | | /* 必填项样式 */ |
| | | .required-label { |
| | | position: relative; |
| | |
| | | margin-right: 4px; |
| | | } |
| | | } |
| | | |
| | | /* 必填输入框样式 */ |
| | | .required-input { |
| | | width: 100%; |