wip

src/components/ticket/TicketForm.vue

@@ -1,9 +1,24 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="isEditing ? '📝 编辑工单任务' : '✨ 创建新工单'" width="550px" class="modern-dialog"
-    destroy-on-close @close="handleClose">
+  <el-dialog v-model="dialogVisible" width="550px" class="ticket-dialog" destroy-on-close @close="handleClose">
+    <template #header>
+      <div class="dlg-header">
+        <div class="dlg-badge" :class="{ 'is-editing': isEditing }">
+          <el-icon :size="17">
+            <EditPen v-if="isEditing" />
+            <MagicStick v-else />
+          </el-icon>
+        </div>
+        <div class="dlg-head-text">
+          <div class="dlg-title">{{ isEditing ? "编辑工单任务" : "创建新工单" }}</div>
+          <div class="dlg-subtitle">{{ isEditing ? "调整任务详情，保存后即时生效" : "完善任务信息，创建后进入工单列表" }}</div>
+        </div>
+      </div>
+    </template>
     <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="compact-form">
       <div class="form-section">
-        <div class="section-title">基础信息</div>
+        <div class="section-title">
+          <span class="section-icon"><el-icon :size="12"><Document /></el-icon></span>基础信息
+        </div>
         <el-form-item label="网站地址" prop="website">
           <el-input v-model="form.website" placeholder="输入URL" clearable>
             <template #prefix>
@@ -26,7 +41,9 @@
       </div>
 
       <div class="form-section people-grid">
-        <div class="section-title column-full">人员选择</div>
+        <div class="section-title column-full">
+          <span class="section-icon"><el-icon :size="12"><UserFilled /></el-icon></span>人员选择
+        </div>
 
         <el-form-item label="客户单位" prop="company_id" class="client-item">
           <el-select v-model="form.company_id" placeholder="请选择单位" style="width: 100%" filterable
@@ -53,6 +70,9 @@
       </div>
 
       <div class="form-section">
+        <div class="section-title">
+          <span class="section-icon"><el-icon :size="12"><Odometer /></el-icon></span>进度与备注
+        </div>
         <el-form-item label="进度">
           <el-radio-group v-model="form.status" class="modern-radio-group">
             <el-radio-button :label="0">未分配</el-radio-button>
@@ -62,7 +82,7 @@
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item label="任务进度">
+        <el-form-item label="任务进度" class="progress-panel">
           <!-- 海浪液位进度条：水位高度 = 进度值，浪尖从左往右涌动；点击/拖动轨道或键盘均可调节 -->
           <div class="gauge-progress" :class="{ 'is-dragging': dragging, 'is-hovering': hovering }"
             :style="{ '--progress-color': progressColor }">