页面美化

src/views/oa/entry/edit.vue

@@ -61,11 +61,15 @@
               </el-form-item>
               <el-form-item label="审批人" prop="peopleList">
                 <el-input type="textarea" v-model="form.peopleList" style="display: none;"/>
-                <el-button class="button-new-tag" @click="openPS">+ 添加</el-button>
-                <el-tag :key="tag" v-for="tag in peopleList" closable :disable-transitions="false"
+                <el-button class="button-new-tag" @click="openMultiple">+ 添加</el-button>
+                <span :key="tag" v-for="tag in peopleList">
+                  <i class="el-icon-arrow-right"></i>
+                  <el-tag type="info" closable :disable-transitions="false"
                   @close="handleClose(tag)">
-                  {{ tag }}
+                  <span class="user-avatar">{{ tag.substring(0,1) || 'U' }}</span>
+                 {{ tag }}
                 </el-tag>
+                </span>
 
               </el-form-item>
               <el-form-item>
@@ -283,15 +287,29 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-
+.user-avatar{
+  width: 22px;
+    height: 22px;
+    line-height: 19px;
+    font-size: 12px;
+    background: #46c26f;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    color: #fff;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 2px;
+}
 .el-tag+.el-tag {
   margin-left: 10px;
 }
 
 .button-new-tag {
   margin-right: 10px;
-  height: 32px;
-  line-height: 32px;
+  height: 30px;
+  line-height: 30px;
   padding-top: 0;
   padding-bottom: 0;
 }

src/views/oa/entry/index.vue

@@ -70,11 +70,16 @@
               </el-form-item>
               <el-form-item label="审批人" prop="peopleList">
                 <el-input type="textarea" v-model="form.peopleList" style="display: none;"/>
-                <el-button class="button-new-tag" @click="openPS">+ 添加</el-button>
-                <el-tag :key="tag" v-for="tag in peopleList" closable :disable-transitions="false"
+                <el-button size="mini" class="button-new-tag" @click="openPS">+ 添加</el-button>
+                <span :key="tag" v-for="tag in peopleList">
+                  <i class="el-icon-arrow-right"></i>
+                  <el-tag type="info" closable :disable-transitions="false"
                   @close="handleClose(tag)">
+                  <span class="user-avatar">{{ tag.substring(0,1) || 'U' }}</span>
                   {{ tag }}
                 </el-tag>
+                </span>
+               
 
               </el-form-item>
               <el-form-item>
@@ -200,7 +205,7 @@ export default {
         },
       status: true,
 
-      type: 'single',
+      type: 'multiple',
       //是否打开选人组件，默认不打开
       peopleOpen: false,
       fileAccept: ".crt",
@@ -279,10 +284,10 @@ export default {
       this.peopleOpen = true;
     },
     //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
-    submitPeople(peopleList) {
+    submitPeople(peopleList,nikeNamelist) {
       console.log(peopleList);
-      this.peopleList = peopleList;
-      this.form.peopleList = peopleList;
+      this.peopleList = nikeNamelist;
+      this.form.peopleList = nikeNamelist;
       this.peopleOpen = false;
     },
     //获取状态
@@ -293,6 +298,21 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.user-avatar{
+  width: 22px;
+    height: 22px;
+    line-height: 19px;
+    font-size: 12px;
+    background: #46c26f;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    color: #fff;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 2px;
+}
 .fixed-header {
   position: fixed;
   top: 0;
@@ -313,7 +333,7 @@ export default {
   padding: 32px;
 
   .apply-box {
-    width: 50%;
+    width: 70%;
     margin: 0 auto;
   }
 
@@ -346,16 +366,10 @@ export default {
 }
 
 .button-new-tag {
-  margin-right: 10px;
-  height: 32px;
-  line-height: 32px;
+  margin-right: 0px;
+  height: 30px;
+  line-height: 30px;
   padding-top: 0;
   padding-bottom: 0;
 }
-
-.input-new-tag {
-  width: 90px;
-  margin-left: 10px;
-  vertical-align: bottom;
-}
 </style>

src/views/oa/turnJust/detail.vue

@@ -4,7 +4,7 @@
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
           <span class="field-required">*</span>
-          <div class="field-name">入职人</div>
+          <div class="field-name">转正人</div>
         </div>
         <div class="field-component">
           <span :title="form.loginName">{{ form.loginName }}</span>
@@ -12,7 +12,7 @@
       </div>
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
-          <div class="field-name">部门</div>
+          <div class="field-name">员工编号</div>
         </div>
         <div class="field-component">
           <span :title="form.deptName">{{ form.deptName }}</span>
@@ -20,7 +20,7 @@
       </div>
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
-          <div class="field-name">职位</div>
+          <div class="field-name">部门</div>
         </div>
         <div class="field-component">
           <span :title="form.position">{{ form.position }}</span>
@@ -29,7 +29,7 @@
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
           <span class="field-required">*</span>
-          <div class="field-name">员工类型</div>
+          <div class="field-name">职位</div>
         </div>
         <div class="field-component">
           <span :title="form.employeeTypeName">{{ form.employeeTypeName }}</span>
@@ -38,7 +38,7 @@
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
           <span class="field-required">*</span>
-          <div class="field-name">性别</div>
+          <div class="field-name">入职日期</div>
         </div>
         <div class="field-component">
           <span :title="form.gender">{{ form.gender }}</span>
@@ -47,7 +47,7 @@
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
           <span class="field-required">*</span>
-          <div class="field-name">出生日期</div>
+          <div class="field-name">试用期结束日期</div>
         </div>
         <div class="field-component">
           <span :title="form.birthday">{{ form.birthday }}</span>
@@ -56,7 +56,7 @@
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
           <span class="field-required">*</span>
-          <div class="field-name">联系电话</div>
+          <div class="field-name">转正日期</div>
         </div>
         <div class="field-component">
           <span :title="form.birthday">{{ form.contactNumber }}</span>
@@ -67,7 +67,7 @@
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
           <span class="field-required">*</span>
-          <div class="field-name">电子邮箱</div>
+          <div class="field-name">转正申请理由</div>
         </div>
         <div class="field-component">
           <span :title="form.birthday">{{ form.email }}</span>
@@ -77,7 +77,7 @@
 
       <div class="fx-field x-grid-col-12">
         <div class="field-label">
-          <div class="field-name">教育背景</div>
+          <div class="field-name">工作总结</div>
         </div>
         <div class="field-component">
           <span :title="form.birthday">{{ form.education }}</span>
@@ -85,25 +85,7 @@
       </div>
 
 
-      <div class="fx-field x-grid-col-12">
-        <div class="field-label">
-          <div class="field-name">工作经验</div>
-        </div>
-        <div class="field-component">
-          <span :title="form.birthday">{{ form.workExperience }}</span>
-        </div>
-      </div>
-
-
-      <div class="fx-field x-grid-col-12">
-        <div class="field-label">
-          <span class="field-required">*</span>
-          <div class="field-name">入职日期</div>
-        </div>
-        <div class="field-component">
-          <span :title="form.birthday">{{ form.startDate }}</span>
-        </div>
-      </div>
+    
 
 
       <div class="fx-field x-grid-col-12">

src/views/oa/turnJust/edit.vue

@@ -58,10 +58,14 @@
               <el-form-item label="审批人" prop="peopleList">
                 <el-input type="textarea" v-model="form.peopleList" style="display: none;"/>
                 <el-button class="button-new-tag" @click="openMultiple">+ 添加</el-button>
-                <el-tag :key="tag" v-for="tag in peopleList" closable :disable-transitions="false"
+                <span :key="tag" v-for="tag in peopleList">
+                  <i class="el-icon-arrow-right"></i>
+                  <el-tag type="info" closable :disable-transitions="false"
                   @close="handleClose(tag)">
-                  {{ tag }}
+                  <span class="user-avatar">{{ tag.substring(0,1) || 'U' }}</span>
+                 {{ tag }}
                 </el-tag>
+                </span>
 
               </el-form-item>
               <el-form-item>
@@ -302,15 +306,29 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-
+.user-avatar{
+  width: 22px;
+    height: 22px;
+    line-height: 19px;
+    font-size: 12px;
+    background: #46c26f;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    color: #fff;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 2px;
+}
 .el-tag+.el-tag {
   margin-left: 10px;
 }
 
 .button-new-tag {
   margin-right: 10px;
-  height: 32px;
-  line-height: 32px;
+  height: 30px;
+  line-height: 30px;
   padding-top: 0;
   padding-bottom: 0;
 }

src/views/oa/turnJust/index.vue

@@ -67,10 +67,14 @@
               <el-form-item label="审批人" prop="peopleList">
                 <el-input type="textarea" v-model="form.peopleList" style="display: none;"/>
                 <el-button class="button-new-tag" @click="openMultiple">+ 添加</el-button>
-                <el-tag :key="tag" v-for="tag in peopleList" closable :disable-transitions="false"
+                <span :key="tag" v-for="tag in peopleList">
+                  <i class="el-icon-arrow-right"></i>
+                  <el-tag type="info" closable :disable-transitions="false"
                   @close="handleClose(tag)">
-                  {{ tag }}
+                  <span class="user-avatar">{{ tag.substring(0,1) || 'U' }}</span>
+                 {{ tag }}
                 </el-tag>
+                </span>
 
               </el-form-item>
               <el-form-item>
@@ -312,6 +316,21 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.user-avatar{
+  width: 22px;
+    height: 22px;
+    line-height: 19px;
+    font-size: 12px;
+    background: #46c26f;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    color: #fff;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 2px;
+}
 .fixed-header {
   position: fixed;
   top: 0;
@@ -332,7 +351,7 @@ export default {
   padding: 32px;
 
   .apply-box {
-    width: 50%;
+    width: 70%;
     margin: 0 auto;
   }
 
@@ -365,16 +384,10 @@ export default {
 }
 
 .button-new-tag {
-  margin-right: 10px;
-  height: 32px;
-  line-height: 32px;
+  margin-right: 0px;
+  height: 30px;
+  line-height: 30px;
   padding-top: 0;
   padding-bottom: 0;
 }
-
-.input-new-tag {
-  width: 90px;
-  margin-left: 10px;
-  vertical-align: bottom;
-}
 </style>