优化
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import '@/styles/adminDensity.css'
|
||||
import '@/styles/adminWorkbench.css'
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { Eye, Save } from '@lucide/vue'
|
||||
@@ -166,7 +167,7 @@ watch(() => props.resource?.id, (id, previous) => { if (id && id !== previous) v
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="formRef" :model="draft" :rules="rules" label-position="top" :disabled="readonly || submitting" class="truck-form admin-density density-form" :class="{ 'truck-form--create': !resource }">
|
||||
<el-form ref="formRef" :model="draft" :rules="rules" label-position="top" :disabled="readonly || submitting" class="truck-form admin-density density-form admin-workbench" :class="{ 'truck-form--create': !resource }">
|
||||
<div v-if="$slots['relation-note-actions']" class="relation-note">
|
||||
<div v-if="$slots['relation-note-actions']" class="relation-note__actions"><slot name="relation-note-actions" /></div>
|
||||
</div>
|
||||
@@ -238,7 +239,7 @@ watch(() => props.resource?.id, (id, previous) => { if (id && id !== previous) v
|
||||
<style scoped>
|
||||
.truck-form { min-width:0; padding-bottom:var(--admin-space-1); }
|
||||
.truck-form--create { max-width:1040px; margin-inline:auto; }
|
||||
.relation-note { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-4); margin-bottom:var(--admin-space-5); color:var(--cc-muted); font-size:var(--admin-font-caption); line-height:1.5; }
|
||||
.relation-note { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-4); margin-bottom:var(--admin-space-5); color:var(--workbench-muted); font-size:var(--admin-font-caption); line-height:1.5; }
|
||||
.relation-note__actions { display:flex; flex:0 0 auto; }
|
||||
.relation-alert { margin-bottom:var(--admin-space-5); }
|
||||
.appointment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--admin-space-6); }
|
||||
@@ -246,18 +247,18 @@ watch(() => props.resource?.id, (id, previous) => { if (id && id !== previous) v
|
||||
:deep(.el-form-item), :deep(.el-form-item__content) { min-width:0; }
|
||||
:deep(.el-select), :deep(.el-date-editor), :deep(.el-input), :deep(.el-textarea) { width:100%; max-width:100%; }
|
||||
:deep(.el-select__selected-item) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.selection-summary { display:flex; flex-wrap:wrap; gap:var(--admin-space-1) var(--admin-space-5); width:100%; margin:var(--admin-space-2) 0 0; color:var(--cc-muted); font-size:var(--admin-font-caption); line-height:1.5; }
|
||||
.selection-summary { display:flex; flex-wrap:wrap; gap:var(--admin-space-1) var(--admin-space-5); width:100%; margin:var(--admin-space-2) 0 0; color:var(--workbench-muted); font-size:var(--admin-font-caption); line-height:1.5; }
|
||||
.selection-summary div { display:flex; min-width:0; gap:var(--admin-space-2); }
|
||||
.selection-summary dt { flex-shrink:0; }
|
||||
.selection-summary dd { margin:0; color:var(--el-text-color-regular); overflow-wrap:anywhere; }
|
||||
.field-error { width:100%; display:flex; flex-wrap:wrap; gap:var(--admin-space-2); margin-top:var(--admin-space-1); color:var(--cc-muted); font-size:var(--admin-font-caption); line-height:1.5; }
|
||||
.field-error { width:100%; display:flex; flex-wrap:wrap; gap:var(--admin-space-2); margin-top:var(--admin-space-1); color:var(--workbench-muted); font-size:var(--admin-font-caption); line-height:1.5; }
|
||||
.field-error { color:var(--el-color-danger); }
|
||||
.field-help-label { display:inline-flex; align-items:center; gap:var(--admin-space-1); }
|
||||
.readiness-alerts:empty { display:none; }
|
||||
.readiness-alerts :deep(.el-alert) { margin-bottom:var(--admin-space-4); }
|
||||
.dispatch-details { border-top:1px solid var(--el-border-color-lighter); }
|
||||
.dispatch-details summary { padding:var(--admin-space-4) 0; cursor:pointer; font-size:var(--admin-font-body); font-weight:600; color:var(--el-text-color-primary); }
|
||||
.dispatch-details summary:focus-visible { outline:2px solid var(--cc-primary); outline-offset:2px; }
|
||||
.dispatch-details summary:focus-visible { outline:2px solid var(--workbench-primary); outline-offset:2px; }
|
||||
.dispatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
|
||||
.form-actions { display:flex; justify-content:flex-end; gap:var(--admin-space-3); padding-top:var(--admin-space-4); border-top:1px solid var(--el-border-color-lighter); }
|
||||
@media (max-width:720px) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import '@/styles/adminDensity.css'
|
||||
import '@/styles/adminWorkbench.css'
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { FileUp } from '@lucide/vue'
|
||||
@@ -22,7 +23,7 @@ async function upload() { if (busy.value || !props.appointmentId || !selectedFil
|
||||
async function remove(item: TruckAttachmentReference) { if (busy.value || !props.appointmentId || !item.id || !props.canManage) return; busy.value = true; error.value = null; try { await ElMessageBox.confirm(`确认删除“${item.fileName || '未命名文件'}”的附件引用?`, attachmentDialogTitle('删除预约附件'), { customClass: 'admin-density-confirm', confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }); await deleteTruckAppointmentAttachment(props.appointmentId, item.id); emit('changed'); ElMessage.success('附件引用已删除') } catch (cause) { if (cause === 'cancel' || cause === 'close') return; error.value = getApiErrorDetails(cause, '附件删除失败,请稍后重试') } finally { busy.value = false } }
|
||||
</script>
|
||||
<template>
|
||||
<AppDialog class="admin-density-dialog" :model-value="props.modelValue" :title="attachmentDialogTitle('预约附件')" width="min(640px, 94vw)" fullscreenable :show-confirm="false" :close-on-click-modal="true" @update:model-value="emit('update:modelValue', $event)">
|
||||
<AppDialog class="admin-density-dialog admin-workbench is-dialog" :model-value="props.modelValue" :title="attachmentDialogTitle('预约附件')" width="min(640px, 94vw)" fullscreenable :show-confirm="false" :close-on-click-modal="true" @update:model-value="emit('update:modelValue', $event)">
|
||||
<el-alert v-if="error" type="error" :closable="true" show-icon @close="error = null"><template #title>{{ error.message }}</template><ApiErrorMeta :details="error" /></el-alert>
|
||||
<div class="density-dialog-sections">
|
||||
<section v-if="props.canManage" class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">上传附件</h3><div class="upload-panel"><el-select v-model="selectedType" aria-label="附件类型" class="attachment-type"><el-option v-for="(label, type) in attachmentTypeLabels" :key="type" :label="label" :value="type" /></el-select><el-upload :auto-upload="false" :limit="1" :show-file-list="true" :on-change="selectFile" :on-remove="() => { selectedFile = null }"><el-button><FileUp :size="15" />选择附件</el-button></el-upload><el-button type="primary" :loading="busy" :disabled="!selectedFile" @click="upload">上传并关联</el-button></div></section>
|
||||
@@ -40,7 +41,7 @@ async function remove(item: TruckAttachmentReference) { if (busy.value || !props
|
||||
<style scoped>
|
||||
.upload-panel { display:flex; align-items:center; flex-wrap:wrap; gap:var(--admin-space-3); }
|
||||
.attachment-type { width:160px; }
|
||||
.attachment-row { display:flex; justify-content:space-between; gap:var(--admin-space-5); overflow-wrap:anywhere; margin:0; padding:var(--admin-space-3) 0; border:0; border-bottom:1px solid var(--cc-border); border-radius:0; }.attachment-row small { display:block; margin-top:var(--admin-space-1); color:var(--el-text-color-secondary); }
|
||||
.attachment-row { display:flex; justify-content:space-between; gap:var(--admin-space-5); overflow-wrap:anywhere; margin:0; padding:var(--admin-space-3) 0; border:0; border-bottom:1px solid var(--workbench-border); border-radius:0; }.attachment-row small { display:block; margin-top:var(--admin-space-1); color:var(--el-text-color-secondary); }
|
||||
.attachment-row>div{min-width:0}.attachment-row strong{overflow-wrap:anywhere}
|
||||
@media (max-width: 560px) { .attachment-row { flex-direction:column; margin:0; padding:var(--admin-space-3) 0; border:0; border-bottom:1px solid var(--cc-border); border-radius:0; } }
|
||||
@media (max-width: 560px) { .attachment-row { flex-direction:column; margin:0; padding:var(--admin-space-3) 0; border:0; border-bottom:1px solid var(--workbench-border); border-radius:0; } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user