修改新增与编辑界面
This commit is contained in:
@@ -1,29 +1,15 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="isEditing ? '📝 编辑工单任务' : '✨ 创建新工单'"
|
||||
width="550px"
|
||||
class="modern-dialog"
|
||||
destroy-on-close
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
class="compact-form"
|
||||
>
|
||||
<el-dialog v-model="dialogVisible" :title="isEditing ? '📝 编辑工单任务' : '✨ 创建新工单'" 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
|
||||
v-model="form.website"
|
||||
placeholder="https://example.com"
|
||||
clearable
|
||||
>
|
||||
<el-input v-model="form.website" placeholder="" clearable>
|
||||
<template #prefix>
|
||||
<el-icon><Link /></el-icon>
|
||||
<el-icon>
|
||||
<Link />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@@ -34,19 +20,16 @@
|
||||
|
||||
<el-form-item label="运营人员 (外方)" prop="operator" class="client-item">
|
||||
<el-select v-model="form.operator" placeholder="请选择" style="width: 100%">
|
||||
<el-option
|
||||
v-for="op in operators"
|
||||
:key="op"
|
||||
:label="op"
|
||||
:value="op"
|
||||
/>
|
||||
<el-option 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
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="填写相关的补充信息或注意事项..."
|
||||
resize="none"
|
||||
/>
|
||||
<el-input 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
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
:loading="submitting"
|
||||
class="submit-btn"
|
||||
>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting" class="submit-btn">
|
||||
{{ isEditing ? '保存修改' : '立即创建' }}
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -189,12 +161,16 @@ 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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user