city-life-line/src/views/subSystem/hidden/HazardOperationPage.vue

<template>
  <div class="app-container">
    <el-form ref="queryRef" :inline="true" :model="queryParams" v-show="showSearch" label-width="80px">
      <el-form-item label="关键词" prop="keyword">
        <el-input
          v-model="queryParams.keyword"
          clearable
          placeholder="隐患编号/描述"
          style="width: 220px"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      <el-form-item label="隐患类型" prop="hazardType">
        <el-select v-model="queryParams.hazardType" clearable placeholder="全部" style="width: 150px">
          <el-option v-for="item in hazardTypeDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="隐患等级" prop="hazardLevel">
        <el-select v-model="queryParams.hazardLevel" clearable placeholder="全部" style="width: 140px">
          <el-option v-for="item in hazardLevelDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="隐患来源" prop="hazardSource">
        <el-select v-model="queryParams.hazardSource" clearable placeholder="全部" style="width: 160px">
          <el-option v-for="item in hazardSourceDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属片区" prop="district">
        <el-select v-model="queryParams.district" clearable placeholder="全部" style="width: 140px">
          <el-option v-for="item in districtDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="mode === 'submission'" label="治理状态" prop="hazardStatus">
        <el-select v-model="queryParams.hazardStatus" clearable placeholder="全部" style="width: 140px">
          <el-option v-for="item in hazardStatusDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="mode === 'feedback'" label="反馈状态" prop="feedbackStatus">
        <el-select v-model="queryParams.feedbackStatus" clearable placeholder="全部" style="width: 140px">
          <el-option label="未反馈" value="0" />
          <el-option label="已反馈" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
        <el-button icon="Refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="loadData" />
    </el-row>

    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="hazardNo" label="隐患编号" width="155" show-overflow-tooltip fixed="left" />
      <el-table-column label="隐患类型" width="115" align="center">
        <template #default="{ row }">{{ getDictLabel(hazardTypeDict, row.hazardType) }}</template>
      </el-table-column>
      <el-table-column label="隐患等级" width="105" align="center">
        <template #default="{ row }">
          <el-tag :type="levelTag(row.hazardLevel)">{{ getDictLabel(hazardLevelDict, row.hazardLevel) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hazardDesc" label="隐患描述" min-width="220" show-overflow-tooltip />
      <el-table-column label="隐患来源" width="125" align="center">
        <template #default="{ row }">{{ getDictLabel(hazardSourceDict, row.hazardSource) || '-' }}</template>
      </el-table-column>
      <el-table-column prop="district" label="所属片区" width="100" align="center">
        <template #default="{ row }">{{ getDictLabel(districtDict, row.district) || '-' }}</template>
      </el-table-column>
      <el-table-column prop="reportTime" label="上报时间" width="165" align="center" />

      <template v-if="mode === 'feedback'">
        <el-table-column label="反馈状态" width="110" align="center">
          <template #default="{ row }">
            <el-tag :type="hasFeedback(row) ? 'success' : 'info'">{{ hasFeedback(row) ? '已反馈' : '未反馈' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="rectifyFeedback" label="治理反馈" min-width="180" show-overflow-tooltip>
          <template #default="{ row }">{{ row.rectifyFeedback || '-' }}</template>
        </el-table-column>
      </template>

      <el-table-column label="操作" :width="mode === 'submission' ? 150 : 250" fixed="right" align="center" class-name="small-padding fixed-width">
        <template #default="{ row }">
          <el-button link type="primary" icon="View" @click="handleDetail(row)">详情</el-button>
          <el-button
            v-if="mode === 'submission'"
            link
            type="success"
            icon="Promotion"
            :disabled="isSubmitted(row)"
            @click="handleSubmit(row)"
          >
            {{ isSubmitted(row) ? '已报送' : '报送' }}
          </el-button>
          <template v-else>
            <el-button
              link
              :type="hasFeedback(row) ? 'success' : 'warning'"
              icon="Edit"
              :disabled="hasFeedback(row)"
              @click="handleFeedback(row)"
            >
              {{ hasFeedback(row) ? '已反馈' : '治理反馈' }}
            </el-button>
            <el-button v-if="row.workOrderId" link type="primary" icon="Tickets" @click="handleViewOrder(row)">查看工单</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="pageNum"
      v-model:limit="pageSize"
      :page-sizes="[10, 20, 50]"
      @pagination="loadData"
    />

    <el-drawer v-model="detailVisible" title="隐患详情" size="760px" direction="rtl">
      <el-descriptions v-if="detailData" :column="2" border>
        <el-descriptions-item label="隐患编号">{{ detailData.hazardNo }}</el-descriptions-item>
        <el-descriptions-item label="隐患类型">{{ getDictLabel(hazardTypeDict, detailData.hazardType) }}</el-descriptions-item>
        <el-descriptions-item label="隐患等级">
          <el-tag :type="levelTag(detailData.hazardLevel)">{{ getDictLabel(hazardLevelDict, detailData.hazardLevel) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="隐患来源">{{ getDictLabel(hazardSourceDict, detailData.hazardSource) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="所属片区">{{ getDictLabel(districtDict, detailData.district) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="治理状态" v-if="mode === 'submission'">
          <el-tag :type="statusTag(detailData.hazardStatus)">{{ getDictLabel(hazardStatusDict, detailData.hazardStatus) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="反馈状态" v-else>
          <el-tag :type="hasFeedback(detailData) ? 'success' : 'info'">{{ hasFeedback(detailData) ? '已反馈' : '未反馈' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="报送状态">
          <el-tag :type="isSubmitted(detailData) ? 'success' : 'info'">{{ isSubmitted(detailData) ? '已报送' : '未报送' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item v-if="mode === 'feedback'" label="关联工单" :span="2">
          <template v-if="detailOrder">
            <el-tag :type="orderStatusType(detailOrder.orderStatus)" class="order-tag">{{ orderStatusText(detailOrder.orderStatus) }}</el-tag>
            <span class="order-no">{{ detailOrder.orderNo || detailOrder.orderId }}</span>
          </template>
          <span v-else-if="detailData.workOrderId">工单ID：{{ detailData.workOrderId }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="上报时间">{{ detailData.reportTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="报送时间">{{ detailData.submitTime || '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="mode === 'submission'" label="核查人">{{ detailData.verifyPerson || '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="mode === 'submission'" label="核查时间">{{ detailData.verifyTime || '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="mode === 'submission'" label="整改责任人">{{ detailData.rectifyPerson || '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="mode === 'submission'" label="整改期限">{{ detailData.rectifyDeadline || '-' }}</el-descriptions-item>
        <el-descriptions-item label="隐患描述" :span="2">{{ detailData.hazardDesc || '-' }}</el-descriptions-item>
        <el-descriptions-item label="整改方案" :span="2">{{ detailData.rectifyPlan || '-' }}</el-descriptions-item>
        <el-descriptions-item label="治理反馈" :span="2">{{ detailData.rectifyFeedback || '-' }}</el-descriptions-item>
        <el-descriptions-item label="隐患图片" :span="2">
          <div v-if="detailImageUrls.length" class="detail-images">
            <el-image
              v-for="(image, index) in detailImageUrls"
              :key="image"
              :src="image"
              :preview-src-list="detailImageUrls"
              :initial-index="index"
              preview-teleported
              fit="contain"
              lazy
            />
          </div>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-drawer>

    <el-dialog v-model="feedbackVisible" title="隐患治理反馈" width="720px" append-to-body destroy-on-close>
      <el-form ref="feedbackFormRef" :model="feedbackForm" :rules="feedbackRules" label-width="105px">
        <el-alert
          :title="`${feedbackForm.hazardNo || ''} ${feedbackForm.hazardDesc || ''}`"
          type="info"
          :closable="false"
          class="feedback-alert"
        />
        <!-- 关联工单信息：辅助填写治理反馈内容 -->
        <div v-if="feedbackOrder || feedbackOrderLoading" v-loading="feedbackOrderLoading" class="feedback-order">
          <div class="feedback-order-title">关联工单信息</div>
          <el-descriptions v-if="feedbackOrder" :column="2" border size="small">
            <el-descriptions-item label="工单编号">{{ feedbackOrder.orderNo || feedbackOrder.orderId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="工单状态">
              <el-tag :type="orderStatusType(feedbackOrder.orderStatus)" size="small">{{ orderStatusText(feedbackOrder.orderStatus) }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ feedbackOrder.deviceName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="处置人">{{ feedbackOrder.receiveUserName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="故障发生时间">{{ feedbackOrder.faultTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="计划完成时间">{{ feedbackOrder.planFinishTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="实际完成时间">{{ feedbackOrder.realFinishTime || '-' }}</el-descriptions-item>
            <el-descriptions-item label="核验人">{{ feedbackOrder.verifyUserName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="问题描述" :span="2">{{ feedbackOrder.orderDesc || '-' }}</el-descriptions-item>
            <el-descriptions-item label="维修处置结果" :span="2">{{ feedbackOrder.repairResult || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <el-form-item label="治理反馈" prop="rectifyFeedback">
          <el-input v-model="feedbackForm.rectifyFeedback" type="textarea" :rows="5" placeholder="请输入治理过程、处理结果及现场复核情况" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="saving" @click="saveFeedback">提交反馈</el-button>
          <el-button @click="feedbackVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="orderVisible" title="关联工单信息" width="720px" append-to-body destroy-on-close>
      <el-descriptions v-if="orderData" :column="2" border v-loading="orderLoading">
        <el-descriptions-item label="工单编号">{{ orderData.orderNo || '-' }}</el-descriptions-item>
        <el-descriptions-item label="工单状态">
          <el-tag :type="orderStatusType(orderData.orderStatus)">{{ orderStatusText(orderData.orderStatus) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ orderData.deviceName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备编码">{{ orderData.deviceCode || '-' }}</el-descriptions-item>
        <el-descriptions-item label="处置人">{{ orderData.receiveUserName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="核验人">{{ orderData.verifyUserName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="故障发生时间">{{ orderData.faultTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="计划完成时间">{{ orderData.planFinishTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="实际完成时间">{{ orderData.realFinishTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="问题描述" :span="2">{{ orderData.orderDesc || '-' }}</el-descriptions-item>
        <el-descriptions-item label="维修处置结果" :span="2">{{ orderData.repairResult || '-' }}</el-descriptions-item>
      </el-descriptions>
      <el-empty v-else-if="!orderLoading" description="工单信息加载失败" />
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDicts } from '@/api/system/dict/data'
import { getHazardById, getHazardPage, submitHazard, feedbackHazard } from '@/api/pipeNetwork/hazard'
import { getWorkOrder } from '@/api/pipeNetwork/ops/workOrder'
import { orderStatusText, orderStatusType } from '@/views/subSystem/pipeNetwork/ops/workOrder/js/workOrderDict.js'
import { buildMinioAttachmentUrl } from '@/utils/minioAttachment'

const props = defineProps({
  mode: {
    type: String,
    required: true,
    validator: value => ['submission', 'feedback'].includes(value)
  }
})

const loading = ref(false)
const saving = ref(false)
const showSearch = ref(true)
const queryRef = ref(null)
const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const dateRange = ref([])
const queryParams = reactive({
  keyword: '',
  hazardType: '',
  hazardLevel: '',
  hazardSource: '',
  district: '',
  hazardStatus: '',
  // 报送页固定只展示未报送隐患；治理反馈页固定只看已报送数据。
  isSubmitted: props.mode === 'feedback' ? 1 : 0,
  // 反馈状态筛选（仅治理反馈页）：0-未反馈 1-已反馈
  feedbackStatus: '',
  timeType: 'report'
})

const hazardTypeDict = ref([])
const hazardLevelDict = ref([])
const hazardStatusDict = ref([])
const hazardSourceDict = ref([])
// 所属片区，与字典 drainage_district、DistrictEnum、equipment_base.district 同口径（0城南/1城北/2太常）
const districtDict = ref([])
const detailVisible = ref(false)
const detailData = ref(null)
const detailImageUrls = computed(() => parseImageUrls(detailData.value?.hazardImages))
const feedbackVisible = ref(false)
const feedbackFormRef = ref(null)
const feedbackRecord = ref(null)
// 反馈弹窗内展示的关联工单信息（辅助填写治理反馈）
const feedbackOrder = ref(null)
const feedbackOrderLoading = ref(false)
const orderVisible = ref(false)
const orderLoading = ref(false)
const orderData = ref(null)
const detailOrder = ref(null)

const feedbackForm = reactive({
  hazardNo: '',
  hazardDesc: '',
  rectifyFeedback: ''
})

const feedbackRules = {
  rectifyFeedback: [{ required: true, message: '请输入治理反馈', trigger: 'blur' }]
}

function getDictLabel(dict, value) {
  const item = dict.find(entry => String(entry.dictValue) === String(value))
  return item ? item.dictLabel : value
}

function isSubmitted(row) {
  return Number(row?.isSubmitted) === 1
}

// 反馈状态判定：治理反馈内容已填写即视为已反馈（与隐患一张图口径一致）
function hasFeedback(row) {
  return !!(row?.rectifyFeedback && String(row.rectifyFeedback).trim())
}

function levelTag(value) {
  // 与报警等级口径一致：1 一级(红 danger) / 2 二级(橙 warning) / 3 三级(蓝 默认色) / 4 四级(绿 success)
  const map = { '1': 'danger', '2': 'warning', '3': '', '4': 'success' }
  return map[String(value)] || 'info'
}

function statusTag(value) {
  const label = String(getDictLabel(hazardStatusDict.value, value) || '')
  if (label.includes('已整改') || label.includes('闭环')) return 'success'
  if (label.includes('整改中') || label.includes('治理中')) return 'warning'
  return 'info'
}

function parseImageUrls(value) {
  if (!value) return []
  let values = value
  if (typeof values === 'string') {
    const text = values.trim()
    if (text.startsWith('[') || text.startsWith('{')) {
      try {
        values = JSON.parse(text)
      } catch (error) {
        values = text.split(/[,;\n]/)
      }
    } else {
      values = text.split(/[,;\n]/)
    }
  }
  if (!Array.isArray(values)) values = [values]
  return values.map(item => {
    const source = typeof item === 'object' ? (item.url || item.fileName || item.name) : item
    return normalizeImageUrl(source)
  }).filter(Boolean)
}

function normalizeImageUrl(value) {
  const url = String(value || '').trim()
  if (!url || /^(blob:|data:)/i.test(url)) return url
  const minioBase = String(import.meta.env.VITE_APP_MINIO_BASE_URL || '').trim().replace(/\/+$/, '')
  if (/^https?:\/\//i.test(url)) return buildMinioAttachmentUrl(url)
  if (minioBase) {
    if (url.startsWith('/')) return buildMinioAttachmentUrl(url)
    if (url.startsWith('upload/')) return `${minioBase}/${url}`
    if (!url.includes('/')) return `${minioBase}/upload/${url}`
  }
  const baseApi = String(import.meta.env.VITE_APP_BASE_API || '').trim().replace(/\/+$/, '')
  return url.startsWith('/') ? `${baseApi}${url}` : `${baseApi}/${url}`
}

function buildQuery() {
  const params = {}
  Object.entries(queryParams).forEach(([key, value]) => {
    if (value !== '' && value !== null && value !== undefined) params[key] = value
  })
  if (dateRange.value?.length === 2) {
    params.startDate = dateRange.value[0]
    params.endDate = dateRange.value[1]
  }
  if (props.mode === 'submission') {
    // 报送页固定只展示未报送数据
    params.timeType = 'report'
    params.isSubmitted = 0
  } else {
    // 治理反馈页固定只展示已报送数据
    params.timeType = 'report'
    params.isSubmitted = 1
  }
  return params
}

async function loadDicts() {
  try {
    const [typeRes, levelRes, statusRes, sourceRes, districtRes] = await Promise.all([
      getDicts('hazard_type'),
      getDicts('hazard_level'),
      getDicts('hazard_status'),
      getDicts('hazard_source'),
      getDicts('drainage_district')
    ])
    hazardTypeDict.value = typeRes.data || []
    hazardLevelDict.value = levelRes.data || []
    hazardStatusDict.value = statusRes.data || []
    hazardSourceDict.value = sourceRes.data || []
    districtDict.value = districtRes.data || []
  } catch (error) {
    ElMessage.error(error?.message || '隐患字典加载失败')
  }
}

async function loadData() {
  loading.value = true
  try {
    const response = await getHazardPage(pageNum.value, pageSize.value, buildQuery())
    tableData.value = response.data?.records || []
    total.value = Number(response.data?.total || 0)
  } catch (error) {
    ElMessage.error(error?.response?.data?.msg || error?.message || '隐患数据加载失败')
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  pageNum.value = 1
  loadData()
}

function handleReset() {
  queryRef.value?.resetFields()
  Object.assign(queryParams, {
    keyword: '',
    hazardType: '',
    hazardLevel: '',
    hazardSource: '',
    district: '',
    hazardStatus: '',
    isSubmitted: props.mode === 'feedback' ? 1 : 0,
    feedbackStatus: '',
    timeType: 'report'
  })
  dateRange.value = []
  handleSearch()
}

async function fetchDetail(row) {
  try {
    const response = await getHazardById(row.hazardId)
    return response.data || row
  } catch (error) {
    return row
  }
}

async function handleDetail(row) {
  detailData.value = await fetchDetail(row)
  detailOrder.value = null
  detailVisible.value = true
  if (props.mode === 'feedback' && detailData.value?.workOrderId) {
    try {
      const response = await getWorkOrder(detailData.value.workOrderId)
      // 详情接口返回 { order, logs }，工单字段在 order 里
      detailOrder.value = response.data?.order || null
    } catch (error) {
      detailOrder.value = null
    }
  }
}

async function handleSubmit(row) {
  try {
    await ElMessageBox.confirm(
      `确认将隐患“${row.hazardNo}”报送到上级主管单位？报送成功后将自动生成工单并流转至工单系统。`,
      '隐患报送确认',
      { type: 'warning', confirmButtonText: '确认报送', cancelButtonText: '取消' }
    )
    const response = await submitHazard(row.hazardId)
    ElMessage.success(response.data ? '报送成功，已自动创建工单' : '报送成功')
    loadData()
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    ElMessage.error(error?.response?.data?.msg || error?.message || '报送失败')
  }
}

function handleViewOrder(row) {
  if (!row?.workOrderId) return
  orderVisible.value = true
  orderLoading.value = true
  orderData.value = null
  getWorkOrder(row.workOrderId)
    .then(response => {
      // 详情接口返回 { order, logs }，工单字段在 order 里
      orderData.value = response.data?.order || null
    })
    .catch(error => {
      ElMessage.error(error?.response?.data?.msg || error?.message || '工单信息加载失败')
    })
    .finally(() => {
      orderLoading.value = false
    })
}

async function handleFeedback(row) {
  const record = await fetchDetail(row)
  if (hasFeedback(record)) {
    ElMessage.warning('该隐患已反馈，不允许二次修改')
    return
  }
  feedbackRecord.value = record
  Object.assign(feedbackForm, {
    hazardNo: record.hazardNo || '',
    hazardDesc: record.hazardDesc || '',
    rectifyFeedback: ''
  })
  feedbackVisible.value = true
  // 拉取关联工单，展示在反馈表单内辅助填写
  feedbackOrder.value = null
  if (record.workOrderId) {
    feedbackOrderLoading.value = true
    getWorkOrder(record.workOrderId)
      .then(response => {
        // 详情接口返回 { order, logs }，工单字段在 order 里
        feedbackOrder.value = response.data?.order || null
      })
      .catch(() => {
        feedbackOrder.value = null
      })
      .finally(() => {
        feedbackOrderLoading.value = false
      })
  }
}

async function saveFeedback() {
  if (!feedbackFormRef.value || !feedbackRecord.value) return
  try {
    await feedbackFormRef.value.validate()
    saving.value = true
    // 仅提交反馈内容，反馈后不允许二次修改
    await feedbackHazard(feedbackRecord.value.hazardId, feedbackForm.rectifyFeedback)
    ElMessage.success('反馈提交成功')
    feedbackVisible.value = false
    loadData()
  } catch (error) {
    if (error?.fields) return
    ElMessage.error(error?.response?.data?.msg || error?.message || '治理反馈提交失败')
  } finally {
    saving.value = false
  }
}

onMounted(async () => {
  await loadDicts()
  loadData()
})
</script>

<style scoped>
.detail-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-images .el-image {
  width: 110px;
  height: 110px;
  border-radius: 6px;
}

.feedback-alert {
  margin-bottom: 20px;
}

.feedback-order {
  margin-bottom: 20px;
}

.feedback-order-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
}

.order-tag {
  margin-right: 8px;
}

.order-no {
  color: var(--el-text-color-primary);
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
</style>