From 470dbce4c83de0f4e4e3732c05a8573d1b060fee Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 22 Nov 2025 16:27:06 +0800
Subject: [PATCH] feat:样式调整
---
src/views/tickets/ticketComponent/TicketDetailDialog.vue | 309 +++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 295 insertions(+), 14 deletions(-)
diff --git a/src/views/tickets/ticketComponent/TicketDetailDialog.vue b/src/views/tickets/ticketComponent/TicketDetailDialog.vue
index af8f87a..7b28bcd 100644
--- a/src/views/tickets/ticketComponent/TicketDetailDialog.vue
+++ b/src/views/tickets/ticketComponent/TicketDetailDialog.vue
@@ -127,6 +127,8 @@
>
<el-input
type="textarea"
+ :maxlength="200"
+ show-word-limit
v-model="currentDetail.content"
placeholder="请输入工单内容"
class="required-input"
@@ -154,7 +156,10 @@
v-model="currentDetail.processingDetail"
placeholder="请输入事件处理详情"
:rows="4"
+ :maxlength="200"
+ show-word-limit
style="width: 100%; margin-bottom: 10px"
+ :disabled="!isCurrentUserAssigned"
/>
</template>
<!-- 已完成和已完结状态显示只读文本 -->
@@ -174,6 +179,7 @@
<template v-else> 上传图片</template>
</div>
<el-upload
+ :disabled="!isCurrentUserAssigned"
v-if="hasProcessedAndOverBtnPermission()"
ref="uploadRef"
:action="'#'"
@@ -357,6 +363,7 @@
:loading="completeLoading"
@click="handleComplete"
icon="el-icon-circle-check"
+ :disabled="!isCurrentUserAssigned"
>
完成工单
</el-button>
@@ -380,11 +387,16 @@
</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: {
@@ -425,7 +437,8 @@
}
});
-// 定义emits
+// 定义emits
+
const emit = defineEmits([
'update:modelValue',
'detail-success',
@@ -460,7 +473,12 @@
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 },
@@ -510,8 +528,13 @@
() => props.currentDetail,
(newVal) => {
if (newVal && dialogVisible.value) {
- loadStepInfo();
- initMap();
+ isLoading.value = true;
+ setTimeout(() => {
+ loadStepInfo();
+ initMap();
+ isLoading.value = false;
+ }, 50);
+
}
},
{ deep: true }
@@ -565,7 +588,6 @@
const mapStatus = (status) => {
const statusTextMap = {
- '-1': '草稿',
2: '待审核',
0: '待处理',
3: '处理中',
@@ -619,7 +641,7 @@
const hasProcessedAndOverBtnPermission = () => {
return props.permission && props.permission.tickets_view_processedAndOver === true;
};
-
+// 通过不通过
const hasReviewBtnPermission = () => {
return props.permission && props.permission.tickets_review_btn === true;
};
@@ -718,10 +740,9 @@
const handleComplete = async () => {
if (completeLoading.value) return;
completeLoading.value = true;
-
- try {
if (!props.currentDetail.processingDetail) {
ElMessage.warning('请先填写事件处理详情');
+ completeLoading.value = false;
return;
}
@@ -730,18 +751,15 @@
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');
@@ -764,8 +782,8 @@
<style lang="scss">
.custom-dialog {
- max-height: 96vh;
- transition: max-height 0.3s ease-out;
+ height: 96vh;
+
.el-dialog__body {
border-top: 0.1rem solid #f0f0f0;
}
@@ -823,6 +841,9 @@
margin-bottom: 12px;
}
+.action-bar {
+ margin-bottom: 16px;
+}
.el-dialog {
.el-form-item {
@@ -850,10 +871,125 @@
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-input__inner) {
+ // height: 36px;
+ // line-height: 36px;
+ // }
+
+ :deep(.el-textarea__inner) {
+ padding: 8px 12px;
+ }
+
+ // :deep(.el-input__inner),
+ // :deep(.el-select),
+ // :deep(.el-select .el-input) {
+ // width: 100%; // 确保所有输入框和选择框宽度一致
+ // }
+
+ .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;
@@ -899,6 +1035,18 @@
}
}
+.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;
@@ -1243,6 +1391,137 @@
}
}
+// 添加新的样式
+.review-dialog {
+ :deep(.el-dialog__body) {
+ padding: 0;
+ background-color: #f5f7fa;
+ border-top: 0.1rem solid #f0f0f0;
+ }
+}
+
+.re-check-dialog {
+ :deep(.el-dialog__body) {
+ padding: 0;
+ background-color: #f5f7fa;
+ border-top: 0.1rem solid #f0f0f0;
+ }
+}
+
+.review-container {
+ position: relative;
+
+ .review-image-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 600px;
+ background-color: #f5f7fa;
+ }
+
+ .review-image-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ :deep(.el-image) {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .el-image__inner {
+ max-height: 100%;
+ max-width: 100%;
+ object-fit: contain;
+ }
+ }
+ }
+
+ .arrow-button {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 44px;
+ height: 44px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 50%;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s;
+ z-index: 100;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.6);
+ }
+
+ i {
+ color: #fff;
+ font-size: 24px;
+ }
+
+ &.left {
+ left: 20px;
+ color: #ffffff;
+ }
+
+ &.right {
+ right: 20px;
+ color: #ffffff;
+ }
+ }
+
+ .preview-image {
+ max-width: 100%;
+ max-height: 100%;
+ }
+
+ .review-pagination {
+ padding: 16px 0;
+ display: flex;
+ justify-content: center;
+ background-color: #fff;
+
+ :deep(.el-pagination) {
+ .btn-prev,
+ .btn-next {
+ display: none;
+ }
+
+ .el-pager {
+ .number {
+ margin: 0 4px;
+ }
+ }
+ }
+ }
+
+ .image-error {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #909399;
+
+ i {
+ font-size: 48px;
+ margin-bottom: 16px;
+ }
+
+ span {
+ font-size: 16px;
+ }
+ }
+}
+
/* 新建工单和处理工单的上传组件样式 */
.create-upload,
.detail-upload {
@@ -1277,6 +1556,7 @@
object-fit: contain;
}
}
+
/* 必填项样式 */
.required-label {
position: relative;
@@ -1287,6 +1567,7 @@
margin-right: 4px;
}
}
+
/* 必填输入框样式 */
.required-input {
width: 100%;
--
Gitblit v1.9.3