Преглед изворни кода

业务员新增样式修改

祁鹏飞 пре 4 месеци
родитељ
комит
bd67e53f0c

+ 352 - 421
src/views/operationManagement/modules/addOperation.vue

@@ -1,11 +1,13 @@
 <template>
-  <div>
-    <el-form :model="operationForm" ref="OperationFormRef" :rules="operationRules" label-width="120">
-      <el-descriptions title="基本信息">
+    <pageMain class="vh100">
+    <el-form :model="operationForm" ref="OperationFormRef" :rules="operationRules" label-width="120"
+        label-position="top" class="h-full" size="large">
+      <div class="h-[calc(100%-64px)] overflow-y-auto overflow-x-hidden p-[13px_0_0]">
+      <el-descriptions title="基本信息" class="p-[0_24px]">
         <el-descriptions-item>
           <template #default>
-            <el-row :gutter="20">
-              <el-col :span="10">
+            <el-row :gutter="24">
+              <el-col :span="8">
                 <el-form-item prop="typeAttr" label="业务员类型">
                   <el-select v-model="operationForm.typeAttr" placeholder="请选择业务员类型" @change="typeAttrChange">
                     <el-option key="5" value="5" label="团队"></el-option>
@@ -15,50 +17,44 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="organizationId" label="所属团队" v-if="operationForm.typeAttr != '6'">
                   <el-select v-model="operationForm.organizationId" placeholder="请选择所属团队" @change="deptChange">
                     <el-option v-for="item in teamList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="name" label="姓名">
                   <el-input v-model="operationForm.name" placeholder="请填写姓名" maxlength="20"></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="mobile" label="手机号">
                   <el-input type="number" oninput="if(value.length>11)value=value.slice(0,11)"
                     v-model="operationForm.mobile" placeholder="请填写手机号"></el-input>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="deptId" label="所属机构">
                   <el-cascader :disabled="operationForm.typeAttr != '6'" style="width: 100%"
                     v-model="operationForm.deptId" placeholder="请选择所属机构" :options="deptOption" :props="optionProps"
                     @change="deptIdChange"></el-cascader>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="identity" label="证件号">
                   <el-input v-model="operationForm.identity" placeholder="请填写身份证号"></el-input>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="identityTimeStart" label="证件有效期始">
                   <el-date-picker v-model="operationForm.identityTimeStart" type="date" placeholder="请选择"
                     format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disabledDateStart"
                     style="width: 100%" />
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="identityTimeEnd" label="证件有效期止">
                   <el-date-picker v-model="operationForm.identityTimeEnd" type="date" placeholder="请选择"
                     format="YYYY-MM-DD" value-format="YYYY-MM-DD" :disabled-date="disabledDateEnd"
@@ -69,11 +65,11 @@
           </template>
         </el-descriptions-item>
       </el-descriptions>
-      <el-descriptions title="其他信息">
+      <el-descriptions title="其他信息" class="p-[0_24px]">
         <el-descriptions-item>
           <template #default>
             <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="leaderId" label="管理人">
                   <el-select v-model="operationForm.leaderId" filterable placeholder="请选择管理人"
                     @change="(e) => { operationForm.leaderNumber = e }">
@@ -82,14 +78,12 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="leaderNumber" label="管理人工号">
                   <el-input readonly v-model="operationForm.leaderNumber" placeholder="请填写管理人工号"></el-input>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="referrerId" label="推荐人">
                   <el-select v-model="operationForm.referrerId" filterable placeholder="请选择推荐人"
                     @change="(e) => { operationForm.referrerNumber = e }">
@@ -98,7 +92,7 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="referrerNumber" label="推荐人工号">
                   <el-input readonly v-model="operationForm.referrerNumber" placeholder="请填写推荐人工号"></el-input>
                 </el-form-item>
@@ -107,104 +101,124 @@
           </template>
         </el-descriptions-item>
       </el-descriptions>
-      <el-descriptions title="资料附件">
+      <el-descriptions title="资料附件" class="p-[0_24px]">
         <el-descriptions-item>
           <template #default>
-            <el-form-item prop="IDCardFront" label-width="150">
+            <el-form-item prop="IDCardFront" label="身份证(人像面)" label-width="150" label-position="top">
               <template #label>
                 <span style="color: #f56c6c">*</span>身份证(人像面)
               </template>
-              <el-upload action="" v-if="!IDCardFront" :auto-upload="false" :show-file-list="false"
+              <el-upload ref="sfz1" v-model:file-list="IDCardFileList" :class="IDCardFileList.length ? 'hide' : ''" :auto-upload="false" action="#" list-type="picture-card"
                 accept=".png, .jpg, .jpeg" @change="uploadImage($event, 'sfz1')">
-                <el-button link type="primary" icon="Upload">上传</el-button>
-              </el-upload>
-              <div class="fileInfo" v-else>
-                <div class="file-box">
-                  <div class="btn-top">
-                    <img class="image-close" @click="deleteImage('sfz1')" src="@/assets/images/close.png" />
-                    <!--                    <el-icon class="btn-icon"><Delete /></el-icon>-->
-                  </div>
-                  <img class="file-img" :src="IDCardFront" />
-                  <div class="btn-bottom">
-                    <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg"
-                      @change="uploadImage($event, 'sfz1')"
-                      style="display: flex; align-items: center; justify-content: center; color: white">
-                      <el-icon>
-                        <Upload />
-                      </el-icon>重新上传
-                    </el-upload>
-                    <div class="width-50"
-                      style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;"
-                      @click="downloadImage('sfz1')">
-                      <el-icon>
-                        <Download />
-                      </el-icon>下载资料
-                    </div>
-                  </div>
+                <div class="flex flex-col items-center justify-center">
+                  <img src="@/assets/images/Camera.svg" class="w-30px h-24px" alt="">
+                  <div class="text-14px color-[#999] line-height-[1] m-t-6px">人像面</div>
                 </div>
-              </div>
+                <template #file="{ file }">
+                  <div>
+                    <img class="w-208px h-130px" :src="file.url" alt="" />
+                    <span class="absolute top-0 left-0 right-0 bottom-0">
+                      <div class="bg-[var(--el-overlay-color-lighter)] flex items-center justify-around h-24px absolute bottom-0 w-full">
+                        <el-upload class="hidden1" :auto-upload="false" action="#"
+                          accept=".png, .jpg, .jpeg" @change="uploadImage($event, 'sfz1')">
+                          <span
+                            class="flex items-center text-12px color-[#fff] cursor-pointer"
+                            >
+                            <el-icon><Refresh /></el-icon>
+                            <span class="ml-4px">重新上传</span>
+                          </span>
+                        </el-upload>
+                        <div class="h-16px w-1px bg-white"></div>
+                        <span
+                          class="flex items-center text-12px color-[#fff] cursor-pointer"
+                          @click="downloadImage('sfz1')"
+                          >
+                          <el-icon><Download /></el-icon>
+                          <span class="ml-4px">下载资料</span>
+                        </span>
+                      </div>
+                      <span
+                        class="position-absolute right-0 top-0 h-12px flex items-center cursor-pointer"
+                        @click="deleteImage('sfz1')"
+                      >
+                        <img src="@/assets/images/close.png" class="w-12px h-12px" alt="">
+                      </span>
+                    </span>
+                  </div>
+                </template>
+              </el-upload>
             </el-form-item>
-            <el-form-item prop="IDCardBack" label-width="150">
+            <el-form-item prop="IDCardBack" label-width="150" label-position="top">
               <template #label>
                 <span style="color: #f56c6c">*</span>身份证(国徽面)
               </template>
-              <el-upload v-if="!IDCardBack" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg"
-                @change="uploadImage($event, 'sfz2')">
-                <el-button link type="primary" icon="Upload">上传</el-button>
-              </el-upload>
-              <div class="fileInfo" v-else>
-                <div class="file-box">
-                  <div class="btn-top">
-                    <img class="image-close" @click="deleteImage('sfz2')" src="@/assets/images/close.png" />
-                    <!--                    <el-icon class="btn-icon"><Delete /></el-icon>-->
-                  </div>
-                  <img class="file-img" :src="IDCardBack" />
-                  <div class="btn-bottom">
-                    <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg"
-                      @change="uploadImage($event, 'sfz2')"
-                      style="display: flex; align-items: center; justify-content: center; color: white">
-                      <el-icon>
-                        <Upload />
-                      </el-icon>重新上传
-                    </el-upload>
-                    <div class="width-50"
-                      style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;"
-                      @click="downloadImage('sfz2')">
-                      <el-icon>
-                        <Download />
-                      </el-icon>下载资料
-                    </div>
-                  </div>
+              <el-upload ref="sfz2" v-model:file-list="IDCardBackFileList" :class="IDCardBackFileList.length ? 'hide' : ''" :auto-upload="false" action="#" list-type="picture-card"
+                accept=".png, .jpg, .jpeg" @change="uploadImage($event, 'sfz2')">
+                <div class="flex flex-col items-center justify-center">
+                  <img src="@/assets/images/Camera.svg" class="w-30px h-24px" alt="">
+                  <div class="text-14px color-[#999] line-height-[1] m-t-6px">国徽面</div>
                 </div>
-              </div>
+                <template #file="{ file }">
+                  <div>
+                    <img class="w-208px h-130px" :src="file.url" alt="" />
+                    <span class="absolute top-0 left-0 right-0 bottom-0">
+                      <div class="bg-[var(--el-overlay-color-lighter)] flex items-center justify-around h-24px absolute bottom-0 w-full">
+                        <el-upload class="hidden1" :auto-upload="false" action="#"
+                          accept=".png, .jpg, .jpeg" @change="uploadImage($event, 'sfz2')">
+                          <span
+                            class="flex items-center text-12px color-[#fff] cursor-pointer"
+                            >
+                            <el-icon><Refresh /></el-icon>
+                            <span class="ml-4px">重新上传</span>
+                          </span>
+                        </el-upload>
+                        <div class="h-16px w-1px bg-white"></div>
+                        <span
+                          class="flex items-center text-12px color-[#fff] cursor-pointer"
+                          @click="downloadImage('sfz2')"
+                          >
+                          <el-icon><Download /></el-icon>
+                          <span class="ml-4px">下载资料</span>
+                        </span>
+                      </div>
+                      <span
+                        class="position-absolute right-0 top-0 h-12px flex items-center cursor-pointer"
+                        @click="deleteImage('sfz2')"
+                      >
+                        <img src="@/assets/images/close.png" class="w-12px h-12px" alt="">
+                      </span>
+                    </span>
+                  </div>
+                </template>
+              </el-upload>
             </el-form-item>
-            <el-form-item prop="" label="展业资格证" label-width="150">
-              <el-upload :auto-upload="false" v-if="!certification" :show-file-list="false" accept=".png, .jpg, .jpeg"
-                @change="uploadImage($event, 'qualification')">
-                <el-button link type="primary" icon="Upload">上传</el-button>
+            <el-form-item prop="" label="展业资格证" label-width="150" label-position="top">
+              <el-upload :auto-upload="false" v-if="!certification" action="#" :show-file-list="false"
+                accept=".png, .jpg, .jpeg" @change="uploadImage($event, 'qualification')">
+                  <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
               </el-upload>
-              <div class="fileInfo" v-else>
-                <div class="file-box">
-                  <div class="btn-top">
-                    <img class="image-close" @click="deleteImage('qualification')" src="@/assets/images/close.png" />
-                    <!--                    <el-icon class="btn-icon"><Delete /></el-icon>-->
-                  </div>
-                  <img class="file-img" :src="certification" />
-                  <div class="btn-bottom">
-                    <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg"
-                      @change="uploadImage($event, 'qualification')"
-                      style="display: flex; align-items: center; justify-content: center; color: white">
-                      <el-icon>
+              <div class="w-full" v-else>
+                <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
+                  <img style="width: 40px; height: 40px"
+                  :src="certificationName.includes('.png') || certificationName.includes('.jpg') || certificationName.includes('.jpeg') ? image : certificationName.includes('.pdf') ? pdf : certificationName.includes('.doc') || certificationName.includes('.docx') ? word : ''" />
+                  <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ certificationName }}</div>
+                  <div class="flex items-center ">
+                    <el-upload :auto-upload="false" action="#" :show-file-list="false"
+                      accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'qualification')"
+                      style="display: flex; align-items: center">
+                      <el-icon class="m-l-6px">
                         <Upload />
-                      </el-icon>重新上传
+                      </el-icon>
                     </el-upload>
-                    <div class="width-50"
-                      style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;"
-                      @click="downloadImage('qualification')">
-                      <el-icon>
-                        <Download />
-                      </el-icon>下载资料
-                    </div>
+                    <el-icon class="m-l-6px" @click="imageView('qualification')">
+                      <View />
+                    </el-icon>
+                    <el-icon class="m-l-6px" @click="downloadImage('qualification')">
+                      <Download />
+                    </el-icon>
+                    <el-icon class="m-l-6px" @click="deleteImage('qualification')">
+                      <Delete />
+                    </el-icon>
                   </div>
                 </div>
               </div>
@@ -212,16 +226,18 @@
           </template>
         </el-descriptions-item>
       </el-descriptions>
-      <el-divider />
-      <el-button v-if="!recordShow" link type="primary" icon="plus"
-        @click="recordShow = !recordShow">填写人事档案(选填)</el-button>
-      <el-button v-else link type="primary" icon="ArrowUp" @click="recordShow = !recordShow">收起人事档案(选填)</el-button>
-      <br /><br />
-      <el-descriptions title="个人信息" v-show="recordShow">
+      <el-divider class="m-[0_0_24px]" />
+      <div class="m-[0_24px_24px] rounded-4px b-(1px dashed #0083FF) h-32px flex justify-center items-center color-#0083FF">
+        <el-button v-if="!recordShow" link type="primary"
+        @click="recordShow = !recordShow">填写人事档案(选填)<el-icon><ArrowDown /></el-icon></el-button>
+        <el-button v-else link type="primary" @click="recordShow = !recordShow">
+          收起人事档案(选填)<el-icon><ArrowUp /></el-icon></el-button>
+      </div>
+      <el-descriptions title="个人信息" class="p-[0_24px]" v-show="recordShow">
         <el-descriptions-item>
           <template #default>
             <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="sex" label="性别">
                   <el-select v-model="operationForm.sex" placeholder="请选择性别">
                     <el-option v-for="item in options[0]" :key="item.value" :value="item.value"
@@ -229,15 +245,13 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="birthday" label="出生日期">
                   <el-date-picker v-model="operationForm.birthday" type="date" placeholder="请选择" format="YYYY-MM-DD"
                     value-format="YYYY-MM-DD" style="width: 100%" />
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="nations" label="民族">
                   <el-select v-model="operationForm.nations" placeholder="请选择业务员类型">
                     <el-option v-for="item in options[1]" :key="item.value" :value="item.value"
@@ -245,14 +259,12 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="koseki" label="户籍">
                   <el-input v-model="operationForm.koseki" placeholder="请填写户籍"></el-input>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="maritalStatus" label="婚姻状况">
                   <el-select v-model="operationForm.maritalStatus" placeholder="请选择婚姻状况">
                     <el-option v-for="item in options[2]" :key="item.value" :value="item.value"
@@ -260,7 +272,7 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="politicsStatus" label="政治面貌">
                   <el-select v-model="operationForm.politicsStatus" placeholder="请选择政治面貌">
                     <el-option v-for="item in options[3]" :key="item.value" :value="item.value"
@@ -268,9 +280,7 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="health" label="健康状况">
                   <el-select v-model="operationForm.health" placeholder="请选择健康状况">
                     <el-option v-for="item in options[4]" :key="item.value" :value="item.value"
@@ -278,20 +288,18 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="address" label="居住地区">
                   <el-cascader clearable style="width: 100%" v-model="operationForm.address" :options="areaOptions"
                     :props="areaProps" />
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="liveAddress" label="详细地址">
                   <el-input v-model="operationForm.liveAddress" placeholder="请填写详细地址"></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="postalCode" label="邮政编码">
                   <el-input v-model="operationForm.postalCode" placeholder="请填写邮政编码"></el-input>
                 </el-form-item>
@@ -300,11 +308,11 @@
           </template>
         </el-descriptions-item>
       </el-descriptions>
-      <el-descriptions title="学历信息" v-show="recordShow">
+      <el-descriptions title="学历信息" class="p-[0_24px]" v-show="recordShow">
         <el-descriptions-item>
           <template #default>
             <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="education" label="学历">
                   <el-select v-model="operationForm.education" placeholder="请选择学历">
                     <el-option v-for="item in options[5]" :key="item.value" :value="item.value"
@@ -312,20 +320,18 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="graduationTime" label="毕业时间">
                   <el-date-picker v-model="operationForm.graduationTime" type="date" placeholder="请选择"
                     format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="school" label="毕业院校">
                   <el-input v-model="operationForm.school" placeholder="请填写毕业院校"></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="isComputer" label="是否计算机专业">
                   <el-select v-model="operationForm.isComputer" placeholder="请选择是否计算机专业">
                     <el-option key="1" value="1" label="是"></el-option>
@@ -337,16 +343,16 @@
           </template>
         </el-descriptions-item>
       </el-descriptions>
-      <el-descriptions title="紧急联系人信息" v-show="recordShow">
+      <el-descriptions title="紧急联系人信息" class="p-[0_24px]" v-show="recordShow">
         <el-descriptions-item>
           <template #default>
             <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="emergencyContactName" label="姓名">
                   <el-input v-model="operationForm.emergencyContactName" placeholder="请填写姓名"></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="emergencyContactTel" label="手机号">
                   <el-input v-model="operationForm.emergencyContactTel" placeholder="请填写手机号"></el-input>
                 </el-form-item>
@@ -355,28 +361,28 @@
           </template>
         </el-descriptions-item>
       </el-descriptions>
-      <el-descriptions title="工资信息" v-show="recordShow">
+      <el-descriptions title="工资信息" class="p-[0_24px]" v-show="recordShow">
         <el-descriptions-item>
           <template #default>
             <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="salary" label="工资">
                   <el-input v-model="operationForm.salary" placeholder="请填写工资"></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="salaryLevel" label="工资等级">
                   <el-input v-model="operationForm.salaryLevel" placeholder="请填写工资等级"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row :gutter="20">
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="bankCardId" label="银行卡号">
                   <el-input v-model="operationForm.bankCardId" placeholder="请填写银行卡号"></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="10">
+              <el-col :span="8">
                 <el-form-item prop="bankName" label="开户行">
                   <el-select v-model="operationForm.bankName" placeholder="请选择开户行">
                     <el-option v-for="item in bankOption" :key="item.id" :value="item.id"
@@ -389,145 +395,161 @@
         </el-descriptions-item>
       </el-descriptions>
       <el-divider v-show="recordShow" />
-      <el-descriptions v-show="recordShow" title="其它附件">
+      <el-descriptions v-show="recordShow" class="p-[0_24px]" title="其它附件">
         <el-descriptions-item>
           <template #default>
-            <el-form-item prop="" label="劳动合同" label-width="150">
-              <el-upload v-if="!contract" :auto-upload="false" :show-file-list="false"
-                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'contract')">
-                <el-button link type="primary" icon="Upload">上传</el-button>
-              </el-upload>
-              <div class="fileInfo" v-else>
-                <img style="width: 40px; height: 40px"
-                  :src="contractName.includes('.png') || contractName.includes('.jpg') || contractName.includes('.jpeg') ? image : contractName.includes('.pdf') ? pdf : contractName.includes('.doc') || contractName.includes('.docx') ? word : ''" />
-                <div class="fileName">{{ contractName }}</div>
-                <div class="fileBtn">
-                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-                    @change="uploadImage($event, 'contract')" style="display: flex; align-items: center">
-                    <el-icon class="btn-icon">
-                      <Upload />
-                    </el-icon>
+            <el-form-item prop="" label="劳动合同" label-width="150" label-position="top">
+                  <el-upload :auto-upload="false" v-if="!contract" action="#" :show-file-list="false"
+                    accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'contract')">
+                    <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
                   </el-upload>
-                  <el-icon class="btn-icon" @click="imageView('contract')">
-                    <View />
-                  </el-icon>
-                  <el-icon class="btn-icon" @click="downloadImage('contract')">
-                    <Download />
-                  </el-icon>
-                  <el-icon class="btn-icon" @click="deleteImage('contract')">
-                    <Delete />
-                  </el-icon>
-                </div>
-              </div>
-            </el-form-item>
-            <el-form-item prop="" label="应聘表" label-width="150">
-              <el-upload v-if="!applicant" :auto-upload="false" :show-file-list="false"
-                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'applicant')">
-                <el-button link type="primary" icon="Upload">上传</el-button>
-              </el-upload>
-              <div class="fileInfo" v-else>
-                <img style="width: 40px; height: 40px"
-                  :src="applicantName.includes('.png') || applicantName.includes('.jpg') || applicantName.includes('.jpeg') ? image : applicantName.includes('.pdf') ? pdf : applicantName.includes('.doc') || applicantName.includes('.docx') ? word : ''" />
-                <div class="fileName">{{ applicantName }}</div>
-                <div class="fileBtn">
-                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-                    @change="uploadImage($event, 'applicant')" style="display: flex; align-items: center">
-                    <el-icon class="btn-icon">
-                      <Upload />
-                    </el-icon>
+                  <div class="w-full" v-else>
+                    <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
+                    <img style="width: 40px; height: 40px"
+                      :src="contractName.includes('.png') || contractName.includes('.jpg') || contractName.includes('.jpeg') ? image : contractName.includes('.pdf') ? pdf : contractName.includes('.doc') || contractName.includes('.docx') ? word : ''" />
+                    <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ contractName }}</div>
+                    <div class="flex items-center ">
+                      <el-upload :auto-upload="false" action="#" :show-file-list="false"
+                        accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'contract')"
+                        style="display: flex; align-items: center">
+                        <el-icon class="m-l-6px">
+                          <Upload />
+                        </el-icon>
+                      </el-upload>
+                      <el-icon class="m-l-6px" @click="imageView('contract')">
+                        <View />
+                      </el-icon>
+                      <el-icon class="m-l-6px" @click="downloadImage('contract')">
+                        <Download />
+                      </el-icon>
+                      <el-icon class="m-l-6px" @click="deleteImage('contract')">
+                        <Delete />
+                      </el-icon>
+                    </div>
+                    </div>
+                  </div>
+                </el-form-item>
+                <el-form-item prop="" label="应聘表" label-width="150" label-position="top">
+                  <el-upload :auto-upload="false" v-if="!applicant" action="#" :show-file-list="false"
+                    accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'applicant')">
+                    <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
                   </el-upload>
-                  <el-icon class="btn-icon" @click="imageView('applicant')">
-                    <View />
-                  </el-icon>
-                  <el-icon class="btn-icon" @click="downloadImage('applicant')">
-                    <Download />
-                  </el-icon>
-                  <el-icon class="btn-icon" @click="deleteImage('applicant')">
-                    <Delete />
-                  </el-icon>
-                </div>
-              </div>
-            </el-form-item>
-            <el-form-item prop="" label="定薪表" label-width="150">
-              <el-upload :auto-upload="false" v-if="!decidePay" :show-file-list="false"
-                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'salaryTable')">
-                <el-button link type="primary" icon="Upload">上传</el-button>
-              </el-upload>
-              <div class="fileInfo" v-else>
-                <img style="width: 40px; height: 40px"
-                  :src="decidePayName.includes('.png') || decidePayName.includes('.jpg') || decidePayName.includes('.jpeg') ? image : decidePayName.includes('.pdf') ? pdf : decidePayName.includes('.doc') || decidePayName.includes('.docx') ? word : ''" />
-                <div class="fileName">{{ decidePayName }}</div>
-                <div class="fileBtn">
-                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-                    @change="uploadImage($event, 'salaryTable')" style="display: flex; align-items: center">
-                    <el-icon class="btn-icon">
-                      <Upload />
-                    </el-icon>
+                  <div class="w-full" v-else>
+                    <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
+                    <img style="width: 40px; height: 40px"
+                      :src="applicantName.includes('.png') || applicantName.includes('.jpg') || applicantName.includes('.jpeg') ? image : applicantName.includes('.pdf') ? pdf : applicantName.includes('.doc') || applicantName.includes('.docx') ? word : ''" />
+                    <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ applicantName }}</div>
+                    <div class="flex items-center ">
+                      <el-upload :auto-upload="false" action="#" :show-file-list="false"
+                        accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'applicant')"
+                        style="display: flex; align-items: center">
+                        <el-icon class="m-l-6px">
+                          <Upload />
+                        </el-icon>
+                      </el-upload>
+                      <el-icon class="m-l-6px" @click="imageView('applicant')">
+                        <View />
+                      </el-icon>
+                      <el-icon class="m-l-6px" @click="downloadImage('applicant')">
+                        <Download />
+                      </el-icon>
+                      <el-icon class="m-l-6px" @click="deleteImage('applicant')">
+                        <Delete />
+                      </el-icon>
+                    </div>
+                    </div>
+                  </div>
+                </el-form-item>
+                <el-form-item prop="" label="定薪表" label-width="150" label-position="top">
+                  <el-upload :auto-upload="false" v-if="!decidePay" action="#" :show-file-list="false"
+                    accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'salaryTable')">
+                    <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
                   </el-upload>
-                  <el-icon class="btn-icon" @click="imageView('salaryTable')">
-                    <View />
-                  </el-icon>
-                  <el-icon class="btn-icon" @click="downloadImage('salaryTable')">
-                    <Download />
-                  </el-icon>
-                  <el-icon class="btn-icon" @click="deleteImage('salaryTable')">
-                    <Delete />
-                  </el-icon>
-                </div>
-              </div>
-            </el-form-item>
-            <el-form-item prop="" label="离职表" label-width="150">
-              <el-upload :auto-upload="false" v-if="!dimission" :show-file-list="false"
-                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'leaveTable')">
-                <el-button link type="primary" icon="Upload">上传</el-button>
-              </el-upload>
-              <div class="fileInfo" v-else>
-                <img style="width: 40px; height: 40px"
-                  :src="dimissionName.includes('.png') || dimissionName.includes('.jpg') || dimissionName.includes('.jpeg') ? image : dimissionName.includes('.pdf') ? pdf : dimissionName.includes('.doc') || dimissionName.includes('.docx') ? word : ''" />
-                <div class="fileName">{{ dimissionName }}</div>
-                <div class="fileBtn">
-                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
-                    @change="uploadImage($event, 'leaveTable')" style="display: flex; align-items: center">
-                    <el-icon class="btn-icon">
-                      <Upload />
-                    </el-icon>
+                  <div class="w-full" v-else>
+                    <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
+                    <img style="width: 40px; height: 40px"
+                      :src="decidePayName.includes('.png') || decidePayName.includes('.jpg') || decidePayName.includes('.jpeg') ? image : decidePayName.includes('.pdf') ? pdf : decidePayName.includes('.doc') || decidePayName.includes('.docx') ? word : ''" />
+                    <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ decidePayName }}</div>
+                    <div class="flex items-center ">
+                      <el-upload :auto-upload="false" action="#" :show-file-list="false"
+                        accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'salaryTable')"
+                        style="display: flex; align-items: center">
+                        <el-icon class="m-l-6px">
+                          <Upload />
+                        </el-icon>
+                      </el-upload>
+                      <el-icon class="m-l-6px" @click="imageView('salaryTable')">
+                        <View />
+                      </el-icon>
+                      <el-icon class="m-l-6px" @click="downloadImage('salaryTable')">
+                        <Download />
+                      </el-icon>
+                      <el-icon class="m-l-6px" @click="deleteImage('salaryTable')">
+                        <Delete />
+                      </el-icon>
+                    </div>
+                    </div>
+                  </div>
+                </el-form-item>
+                <el-form-item prop="" label="离职表" label-width="150" label-position="top">
+                  <el-upload :auto-upload="false" v-if="!dimission" action="#" :show-file-list="false"
+                    accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'leaveTable')">
+                    <el-button plain type="primary" icon="Upload" size="default">上传</el-button>
                   </el-upload>
-                  <el-icon class="btn-icon" @click="imageView('leaveTable')">
-                    <View />
-                  </el-icon>
-                  <el-icon class="btn-icon" @click="downloadImage('leaveTable')">
-                    <Download />
-                  </el-icon>
-                  <el-icon class="btn-icon" @click="deleteImage('leaveTable')">
-                    <Delete />
-                  </el-icon>
-                </div>
-              </div>
-            </el-form-item>
+                  <div class="w-full" v-else>
+                    <div class="w-[33%] h-76px rounded-4px b-(1px solid #eee) p-[18px_24px] flex justify-between">
+                    <img style="width: 40px; height: 40px"
+                      :src="dimissionName.includes('.png') || dimissionName.includes('.jpg') || dimissionName.includes('.jpeg') ? image : dimissionName.includes('.pdf') ? pdf : dimissionName.includes('.doc') || dimissionName.includes('.docx') ? word : ''" />
+                    <div class="w-[calc(100%-120px)] overflow-hidden text-ellipsis">{{ dimissionName }}</div>
+                    <div class="flex items-center ">
+                      <el-upload :auto-upload="false" action="#" :show-file-list="false"
+                        accept=".png, .jpg, .jpeg, .pdf, .doc, .docx" @change="uploadImage($event, 'leaveTable')"
+                        style="display: flex; align-items: center">
+                        <el-icon class="m-l-6px">
+                          <Upload />
+                        </el-icon>
+                      </el-upload>
+                      <el-icon class="m-l-6px" @click="imageView('leaveTable')">
+                        <View />
+                      </el-icon>
+                      <el-icon class="m-l-6px" @click="downloadImage('leaveTable')">
+                        <Download />
+                      </el-icon>
+                      <el-icon class="m-l-6px" @click="deleteImage('leaveTable')">
+                        <Delete />
+                      </el-icon>
+                    </div>
+                    </div>
+                  </div>
+                </el-form-item>
           </template>
         </el-descriptions-item>
       </el-descriptions>
-      <div style="display: flex; justify-content: flex-end">
-        <el-button @click="onSubmit(OperationFormRef, 0)">取消</el-button>
-        <el-button type="primary" @click="onSubmit(OperationFormRef, 1)">确定</el-button>
+      </div>
+      <div class="flex justify-center h-64px items-center b-t-(1px solid #F4F4F4)">
+        <el-button size="default" @click="onSubmit(OperationFormRef, 0)">取消</el-button>
+        <el-button type="primary" size="default" @click="onSubmit(OperationFormRef, 1)">确定</el-button>
       </div>
     </el-form>
     <!--    <div class="image-view" v-if="imageShow" @click="imageShow = false">
       <img :src="imageUrl" />
     </div>-->
-    <el-dialog title="图片预览" v-model="imageShow">
-      <img class="image-view" :src="imageUrl" />
-    </el-dialog>
+    <el-image-viewer
+      v-if="imageShow"
+      :url-list="[imageUrl]"
+      @close="imageShow = false"
+      />
     <el-dialog title="文件预览" v-model="fileShow">
       <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
     </el-dialog>
-  </div>
+  </pageMain>
 </template>
 
 <script setup lang="ts">
 import { ref, defineEmits, onMounted } from 'vue'
 import type { AddOperation } from '@/api/modules/operation.ts'
 import type { FormRules, FormInstance } from "element-plus";
+import { useRoute, useRouter } from "vue-router";
 import VueOfficeDocx from "@vue-office/docx";
 import api from "@/api";
 import { ElMessage } from "element-plus";
@@ -536,7 +558,8 @@ import image from '@/assets/images/image.png'
 import word from '@/assets/images/word.png'
 import pdf from '@/assets/images/pdf.png'
 
-const fileViewer = ref(null)
+const route = useRoute()
+const router = useRouter()
 
 interface OperationFormProps extends AddOperation {
   organizationId: string,
@@ -548,7 +571,6 @@ interface OperationFormProps extends AddOperation {
 }
 
 let emits = defineEmits(['closeDialog'])
-let option = ref([])
 const OperationFormRef = ref<FormInstance>()
 // 添加/编辑业务员表单
 let operationForm = ref<OperationFormProps>({
@@ -588,12 +610,6 @@ let operationForm = ref<OperationFormProps>({
   referrerNumber: '',
   address: [],
 })
-// 机构数据渲染格式
-const cascaderProps = {
-  value: 'id',
-  label: 'name',
-  children: 'children'
-}
 // 添加/编辑业务员表单校验
 const operationRules = ref<FormRules>({
   typeAttr: [
@@ -675,9 +691,11 @@ let fileListId = ref<{ fileId: string, fileType: string }[]>([]); // 上传文
 // 身份证人像面
 let IDCardFrontName = ref('')
 let IDCardFront = ref('')
+let IDCardFileList = ref([]);
 // 身份证国徽面
 let IDCardBackName = ref('')
 let IDCardBack = ref('')
+let IDCardBackFileList = ref([]);
 // 展业资格证
 let certificationName = ref('')
 let certification = ref('')
@@ -720,7 +738,6 @@ const processPartnerTypeAttr = (partnerTypeAttr: string) => {
 // 编辑的id
 let editId = ref('')
 const initEditData = (id, ids) => {
-  console.log(id, ids)
   if (ids) {
     editId.value = id
     api.operationApi.operationDetail(id).then(res => {
@@ -867,6 +884,7 @@ const uploadImage = async (file: any, type: string) => {
       case 'sfz1':
         IDCardFrontName.value = result.fileName
         IDCardFront.value = result.downloadUrl
+        IDCardFileList.value[0].url = result.downloadUrl;
         if (fileListId.value.some(v => v.fileType == type)) {
             fileListId.value.map(val => {
               if (val.fileType == type) {
@@ -883,6 +901,7 @@ const uploadImage = async (file: any, type: string) => {
       case 'sfz2':
         IDCardBackName.value = result.fileName
         IDCardBack.value = result.downloadUrl
+        IDCardBackFileList.value[0].url = result.downloadUrl;
         if (fileListId.value.some(v => v.fileType == type)) {
             fileListId.value.map(val => {
               if (val.fileType == type) {
@@ -1126,16 +1145,22 @@ const downloadImage = (type: string) => {
       break;
   }
 }
+const sfz1=ref(null)
+const sfz2=ref(null)
 // 图片删除
 const deleteImage = (type: string) => {
   switch (type) {
     case 'sfz1':
       IDCardFront.value = ''
       IDCardFrontName.value = ''
+      IDCardFileList.value = []
+      sfz1.value.clearFiles()
       break;
     case 'sfz2':
       IDCardBack.value = ''
       IDCardBackName.value = ''
+      IDCardBackFileList.value = []
+      sfz2.value.clearFiles()
       break;
     case 'qualification':
       certification.value = ''
@@ -1194,9 +1219,6 @@ const getRecommend = (id) => {
 // 确定
 const onSubmit = async (OperationFormRef: FormInstance, type: number) => {
   if (!OperationFormRef) {
-    emits('closeDialog', '取消')
-    recordShow.value = false
-    OperationFormRef.resetFields()
     return
   }
   if (type) {
@@ -1216,30 +1238,13 @@ const onSubmit = async (OperationFormRef: FormInstance, type: number) => {
                   message: res.msg,
                   type: 'success'
                 })
-                emits('closeDialog', '确定')
+                router.back()
               } else {
                 ElMessage({
                   message: res.msg,
                   type: 'error'
                 })
               }
-              IDCardFrontName.value = ''
-              IDCardFront.value = ''
-              IDCardBackName.value = ''
-              IDCardBack.value = ''
-              certificationName.value = ''
-              certification.value = ''
-              contractName.value = ''
-              contract.value = ''
-              applicantName.value = ''
-              applicant.value = ''
-              decidePayName.value = ''
-              decidePay.value = ''
-              dimissionName.value = ''
-              dimission.value = ''
-              recordShow.value = false
-              OperationFormRef.resetFields()
-              emits('closeDialog', '取消')
             })
           } else {
             api.operationApi.addOperation({
@@ -1251,30 +1256,13 @@ const onSubmit = async (OperationFormRef: FormInstance, type: number) => {
                   message: res.msg,
                   type: 'success'
                 })
-                emits('closeDialog', '确定')
+                router.back()
               } else {
                 ElMessage({
                   message: res.msg,
                   type: 'error'
                 })
               }
-              IDCardFrontName.value = ''
-              IDCardFront.value = ''
-              IDCardBackName.value = ''
-              IDCardBack.value = ''
-              certificationName.value = ''
-              certification.value = ''
-              contractName.value = ''
-              contract.value = ''
-              applicantName.value = ''
-              applicant.value = ''
-              decidePayName.value = ''
-              decidePay.value = ''
-              dimissionName.value = ''
-              dimission.value = ''
-              recordShow.value = false
-              OperationFormRef.resetFields()
-              emits('closeDialog', '取消')
             })
           }
         } else {
@@ -1297,23 +1285,7 @@ const onSubmit = async (OperationFormRef: FormInstance, type: number) => {
       }
     })
   } else {
-    IDCardFrontName.value = ''
-    IDCardFront.value = ''
-    IDCardBackName.value = ''
-    IDCardBack.value = ''
-    certificationName.value = ''
-    certification.value = ''
-    contractName.value = ''
-    contract.value = ''
-    applicantName.value = ''
-    applicant.value = ''
-    decidePayName.value = ''
-    decidePay.value = ''
-    dimissionName.value = ''
-    dimission.value = ''
-    recordShow.value = false
-    emits('closeDialog', '取消')
-    OperationFormRef.resetFields()
+    router.back()
   }
 }
 
@@ -1444,10 +1416,10 @@ onMounted(() => {
   getArea()
   initBankCard()
   institutionList()
+  if (route.query.id && route.query.type == "edit") initEditData( route.query.id , route.query.ids)
 })
 
 defineExpose({
-  initEditData,
   operationForm,
   initAddData
 })
@@ -1456,105 +1428,64 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-.fileInfo {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  //padding: 2px 20px;
-  border-radius: 5px;
-  margin: 0 10px;
-
-  //&:hover{
-  //  background: #ccc;
-  //}
-  .fileName {
-    width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .fileBtn {
-    display: flex;
-    align-items: center;
-
-    .btn-icon {
-      margin: 0 10px;
-      font-size: 16px;
-      cursor: pointer;
-
-      &:hover {
-        color: #00a0f4;
-      }
-    }
+:deep(.el-upload.el-upload--text){
+  --el-color-primary-light-9:#fff
+}
+:deep(.main-container){
+  padding: unset;
+}
+:deep(.el-descriptions__cell){
+  padding-bottom: unset !important;
+}
+:deep(.el-input__wrapper){
+  border-radius: 4px;
+}
+.hide {
+  :deep(.el-upload--picture-card) {
+    display: none;
   }
-
-  .file-box {
-    position: relative;
-
-    .btn-top {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      .image-close {
-        display: block;
-        width: 12px;
-        height: 12px;
-      }
-    }
-
-    .file-img {
-      display: block;
-      width: 208px;
-      height: 130px;
-      border-radius: 5px;
-    }
-
-    .btn-bottom {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      height: 24px;
-      width: 100%;
-      background: url("@/assets/images/btn-bg.png") no-repeat;
-      background-size: 100% 100%;
-
-      .width-50 {
-        width: 50%;
-      }
-    }
+}
+.hidden1 {
+  :deep(.el-upload-list) {
+    display: none;
   }
-
 }
-
-.image-view {
-  display: block;
-  width: 400px;
-  height: 260px;
-  border-radius: 5px;
-  margin: 0 auto;
+:deep(.el-upload-list__item){
+  height: 130px;
+  width: 208px;
 }
-
-:deep(.el-input__inner[type=number]::-webkit-outer-spin-button) {
-  -webkit-appearance: none;
-  margin: 0;
+:deep(.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete){
+  position: absolute;
 }
-
-:deep(.el-input__inner[type=number]::-webkit-inner-spin-button) {
-  -webkit-appearance: none;
-  margin: 0;
+.el-upload-list__item-actions{
+  height: 24px;
 }
-
-:deep(.el-input__inner[type=number]) {
-  -moz-appearance: textfield;
+:deep(.el-upload--picture-card){
+  height: 130px;
+  width: 208px;
+}
+:deep(.el-descriptions__title){
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  font-size: 18px;
+  height: 36px;
+  line-height: 22px;
+  color: #333333;
+  padding-left: 12px;
+  position: relative;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #eee;
+  width: 100%;
+  &::before{
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 3px;
+    width: 4px;
+    height: 18px;
+    background: #0083FF;
+    border-radius: 2px;
+  }
 }
 
 :deep(.vue-office-docx-main) {

+ 9 - 18
src/views/operationManagement/operation.vue

@@ -157,9 +157,6 @@
         layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
         @current-change="handleCurrentChange" />
     </div>
-    <el-dialog v-model="dialogShow" :title="title" width="1000">
-      <addOperation ref="AddOperationRef" @closeDialog="closeAddOperation"></addOperation>
-    </el-dialog>
     <el-dialog v-model="bankCardDialogShow" title="添加银行卡" width="500">
       <addCard @closeDialog="closeAddBankCard" :userInfo="addName"></addCard>
     </el-dialog>
@@ -172,14 +169,10 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
-import addOperation from './modules/addOperation.vue'
 import addCard from './modules/addCard.vue'
-import allocation from './modules/allocation.vue'
-import setDept from "@/components/DialogSetDeptLeader/index.vue"
 import type { OperationSearch, OperationIsEnable } from '@/api/modules/operation.ts'
 import api from "@/api";
 import { ElMessageBox, ElMessage, TableInstance } from 'element-plus'
-import type { TabBarInstance } from 'element-plus'
 import Allocation from "@/views/operationManagement/modules/allocation.vue";
 
 let myRouter = useRouter()
@@ -538,11 +531,14 @@ let bankCardDialogShow = ref(false)
 const tableDataCommand = (scope, e) => {
   switch (e) {
     case '编辑':
-      dialogShow.value = true
-      nextTick(() => {
-        AddOperationRef.value.initEditData(scope.row.userId, scope.row.id)
+       myRouter.push({
+        path: '/operationManagement/operation/addOperation',
+        query: {
+          type: 'edit',
+          id: scope.row.userId,
+          ids: scope.row.id
+        }
       })
-      title.value = '编辑'
       break;
     case '删除':
       ElMessageBox({
@@ -636,13 +632,8 @@ const tableDataCommand = (scope, e) => {
 }
 // 添加业务员
 const addNumber = () => {
-  // myRouter.push({
-  //   path: '/operationManagement/operation/addOperation',
-  // })
-  dialogShow.value = true
-  title.value = '添加'
-  nextTick(() => {
-    AddOperationRef.value.initAddData()
+  myRouter.push({
+    path: '/operationManagement/operation/addOperation',
   })
 }
 // 添加/编辑业务员弹框