修改新增与编辑界面

src/components/TicketForm.vue

@@ -1,29 +1,15 @@
 <template>
-  <el-dialog
+  <el-dialog v-model="dialogVisible" :title="isEditing ? '📝 编辑工单任务' : '✨ 创建新工单'" width="550px" class="modern-dialog"
-    v-model="dialogVisible"
+    destroy-on-close @close="handleClose">
-    :title="isEditing ? '📝 编辑工单任务' : '✨ 创建新工单'"
+    <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="compact-form">
-    width="550px"
-    class="modern-dialog"
-    destroy-on-close
-    @close="handleClose"
-  >
-    <el-form 
-      ref="formRef" 
-      :model="form" 
-      :rules="rules" 
-      label-position="top"
-      class="compact-form"
-    >
       <div class="form-section">
         <div class="section-title">业务基础信息</div>
         <el-form-item label="网站地址" prop="website">
-          <el-input 
+          <el-input v-model="form.website" placeholder="" clearable>
-            v-model="form.website" 
-            placeholder="https://example.com" 
-            clearable
-          >
             <template #prefix>
-              <el-icon><Link /></el-icon>
+              <el-icon>
+                <Link />
+              </el-icon>
             </template>
           </el-input>
         </el-form-item>
@@ -31,22 +17,19 @@
 
       <div class="form-section people-grid">
         <div class="section-title column-full">权责分配</div>
-        
+
         <el-form-item label="运营人员 (外方)" prop="operator" class="client-item">
           <el-select v-model="form.operator" placeholder="请选择" style="width: 100%">
-            <el-option
+            <el-option v-for="op in operators" :key="op" :label="op" :value="op" />
-              v-for="op in operators"
-              :key="op"
-              :label="op"
-              :value="op"
-            />
           </el-select>
         </el-form-item>
 
         <el-form-item label="负责人 (我方)" prop="principalpeople" class="owner-item">
           <el-input v-model="form.principalpeople" placeholder="请输入姓名">
             <template #prefix>
-              <el-icon><UserFilled /></el-icon>
+              <el-icon>
+                <UserFilled />
+              </el-icon>
             </template>
           </el-input>
         </el-form-item>
@@ -61,13 +44,7 @@
         </el-form-item>
 
         <el-form-item label="备注说明" prop="remark">
-          <el-input
+          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="填写相关的补充信息或注意事项..." resize="none" />
-            v-model="form.remark"
-            type="textarea"
-            :rows="3"
-            placeholder="填写相关的补充信息或注意事项..."
-            resize="none"
-          />
         </el-form-item>
       </div>
     </el-form>
@@ -75,12 +52,7 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="dialogVisible = false" plain>取消</el-button>
-        <el-button 
+        <el-button type="primary" @click="handleSubmit" :loading="submitting" class="submit-btn">
-          type="primary" 
-          @click="handleSubmit" 
-          :loading="submitting"
-          class="submit-btn"
-        >
           {{ isEditing ? '保存修改' : '立即创建' }}
         </el-button>
       </div>
@@ -189,19 +161,23 @@ const handleSubmit = async () => {
   grid-template-columns: 1fr 1fr;
   gap: 20px;
 }
-.column-full { grid-column: span 2; }
+
+.column-full {
+  grid-column: span 2;
+}
 
 /* 人员项区分颜色提示 */
 :deep(.client-item .el-form-item__label) {
   color: #909399 !important;
 }
+
 :deep(.owner-item .el-form-item__label) {
   color: #409eff !important;
 }
 
 /* 现代单选框组 */
 .modern-radio-group {
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   border-radius: 8px;
   overflow: hidden;
 }
@@ -210,6 +186,7 @@ const handleSubmit = async () => {
 .dialog-footer {
   padding-top: 10px;
 }
+
 .submit-btn {
   padding-left: 24px;
   padding-right: 24px;
@@ -220,6 +197,7 @@ const handleSubmit = async () => {
 :deep(.el-form-item) {
   margin-bottom: 18px;
 }
+
 :deep(.el-form-item__label) {
   padding-bottom: 4px !important;
   font-size: 13px;