完善组织架构中成员头像功能

linkwe-ui/src/components/SelectMaterial/index.vue

@@ -8,7 +8,7 @@ export default {
     // 添加标签显隐
     visible: {
       type: Boolean,
-      default: false,
+      default: false
     },
     // title: {
     //   type: String,
@@ -17,19 +17,19 @@ export default {
     // 素材类型  0:'文本', 1：'图片'
     type: {
       type: String,
-      default: '0',
+      default: '0'
     },
     // 显示哪些素材类型标签
     showArr: {
       type: Array,
-      default: () => [0, 1],
-    },
+      default: () => [0, 1]
+    }
   },
   data() {
     return {
       text: {},
       image: {},
-      file: {},
+      file: {}
     }
   },
   watch: {},
@@ -40,7 +40,7 @@ export default {
       },
       set(val) {
         this.$emit('update:visible', val)
-      },
+      }
     },
     Ptype: {
       get() {
@@ -48,8 +48,8 @@ export default {
       },
       set(val) {
         this.$emit('update:type', val)
-      },
-    },
+      }
+    }
   },
   created() {},
   mounted() {},
@@ -63,13 +63,18 @@ export default {
     },
     changeImage(data) {
       this.image = data
-    },
-  },
+    }
+  }
 }
 </script>
 
 <template>
-  <el-dialog title="选择素材" :visible.sync="Pvisible" width="650px" append-to-body>
+  <el-dialog
+    title="选择素材"
+    :visible.sync="Pvisible"
+    width="680px"
+    append-to-body
+  >
     <div>
       <el-tabs v-model="Ptype">
         <el-tab-pane name="0" v-if="showArr.includes(0)">
@@ -111,4 +116,10 @@ export default {
 .mr30 {
   margin-right: 30px;
 }
+
+/deep/.el-dialog__body {
+  padding: 5px 20px;
+  height: 76vh;
+  overflow: auto;
+}
 </style>

linkwe-ui/src/components/SelectMaterial/list.vue

@@ -79,7 +79,7 @@ export default {
 
 <template>
   <div>
-    <el-form ref="form" :model="query" label-width="80px">
+    <el-form ref="form" :model="query" label-width="70px">
       <el-form-item label="选择分组">
         <el-cascader
           v-model="query.categoryId"
@@ -143,7 +143,9 @@ export default {
               alt
             />
           </el-card>
-          <div class="mt10 toe">{{ item.materialName }}</div>
+          <div class="mt10 toe" :title="item.materialName">
+            {{ item.materialName }}
+          </div>
         </div>
       </el-radio>
     </el-radio-group>

linkwe-ui/src/views/contacts/organization.vue

 <script>
 import * as api from '@/api/organization'
+import SelectMaterial from '@/components/SelectMaterial/index'
 
 export default {
   name: 'Organization',
-  components: {},
+  components: { SelectMaterial },
   props: {},
   data() {
     return {
@@ -11,7 +12,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         isActivate: '',
-        department: '',
+        department: ''
       },
       dateRange: [],
       treeData: [],
@@ -19,19 +20,19 @@ export default {
       status: {
         0: '启用',
         1: '禁用',
-        6: '离职',
+        6: '离职'
       },
       statusActivate: {
         1: '已激活',
         2: '已禁用',
         4: '未激活',
         5: '退出企业',
-        6: '删除',
+        6: '删除'
       },
       total: 0,
       defaultProps: {
         label: 'name',
-        children: 'children',
+        children: 'children'
       },
       form: {},
       dialogVisible: false,
@@ -43,7 +44,7 @@ export default {
       dialogVisibleAvatar: false,
       queryImg: {
         pageNum: 1,
-        pageSize: 20,
+        pageSize: 20
       },
       totalImg: 0,
       // 表单校验
@@ -58,18 +59,18 @@ export default {
           {
             type: 'email',
             message: "'请输入正确的邮箱地址",
-            trigger: ['blur', 'change'],
-          },
+            trigger: ['blur', 'change']
+          }
         ],
         mobile: [
           { required: true, message: '必填项', trigger: 'blur' },
           {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
             message: '请输入正确的手机号码',
-            trigger: 'blur',
-          },
-        ],
-      }),
+            trigger: 'blur'
+          }
+        ]
+      })
     }
   },
   watch: {},
@@ -139,7 +140,7 @@ export default {
       // 0: 启用，1：禁用
       let params = {
         userId: data.userId,
-        enable: data.enable == 1 ? 0 : 1,
+        enable: data.enable == 1 ? 0 : 1
       }
       api.startOrStop(params).then(() => {
         this.msgSuccess('操作成功')
@@ -150,7 +151,7 @@ export default {
     remove(id) {
       // const operIds = id || this.ids + "";
       this.$confirm('是否确认删除吗?', '警告', {
-        type: 'warning',
+        type: 'warning'
       })
         .then(function() {
           return api.remove(id)
@@ -168,7 +169,7 @@ export default {
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
       api.syncUser().then(() => {
         loading.close()
@@ -186,7 +187,7 @@ export default {
     },
     departRemove(id) {
       this.$confirm('是否确认删除吗?', '警告', {
-        type: 'warning',
+        type: 'warning'
       })
         .then(function() {
           return api.removeDepart(id)
@@ -209,15 +210,13 @@ export default {
     },
     showAvatarDialog() {
       this.dialogVisibleAvatar = true
-      this.getImgList(1)
-    },
-    getImgList() {
-      // todo get imgage list
     },
-    submitAvatar() {
-      this.form.avatarMediaid = g
-    },
-  },
+    // 选择素材确认按钮
+    submitSelectMaterial(text, image, file) {
+      this.form.headImageUrl = image.materialUrl
+      // this.form.imageMessage._materialName = image.materialName
+    }
+  }
 }
 </script>
 
@@ -293,6 +292,7 @@ export default {
             :props="defaultProps"
             :expand-on-click-node="false"
             ref="tree"
+            highlight-current
             default-expand-all
             @node-click="handleNodeClick"
           >
@@ -416,14 +416,14 @@ export default {
       <el-row :gutter="10">
         <el-col :span="8">
           <!-- <el-upload action :show-file-list="false" :on-success="d" :before-upload="d">
-            <img v-if="form.avatarMediaid" :src="form.avatarMediaid" />
+            <img v-if="form.headImageUrl" :src="form.headImageUrl" />
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>-->
           <div class="avatar-wrap ac" @click="showAvatarDialog">
             <img
               class="avatar"
-              v-if="form.avatarMediaid"
-              :src="form.avatarMediaid"
+              v-if="form.headImageUrl"
+              :src="form.headImageUrl"
             />
             <i v-else class="el-icon-plus avatar-uploader-icon cc"></i>
           </div>
@@ -478,7 +478,7 @@ export default {
                   checkStrictly: true,
                   /** multiple: true,*/ emitPath: false,
                   value: 'id',
-                  label: 'name',
+                  label: 'name'
                 }"
               ></el-cascader>
             </el-form-item>
@@ -551,7 +551,7 @@ export default {
     </el-dialog>
 
     <!-- 选择头像弹窗 -->
-    <el-dialog :visible.sync="dialogVisibleAvatar">
+    <!-- <el-dialog :visible.sync="dialogVisibleAvatar">
       <div slot="title" class="fxbw aic">
         <span>选择头像</span>
         <el-pagination
@@ -563,7 +563,7 @@ export default {
           :total="totalImg"
         ></el-pagination>
       </div>
-      <el-radio-group class="img-wrap" v-model="form.avatarMediaid">
+      <el-radio-group class="img-wrap" v-model="form.headImageUrl">
         <el-radio :label="3" v-for="(item, index) in 20" :key="index">
           <img class="img-li" src="~@/assets/image/login-background.png" alt />
         </el-radio>
@@ -572,7 +572,14 @@ export default {
         <el-button @click="dialogVisibleAvatar = false">取 消</el-button>
         <el-button type="primary" @click="submitAvatar">确 定</el-button>
       </div>
-    </el-dialog>
+    </el-dialog> -->
+
+    <SelectMaterial
+      :visible.sync="dialogVisibleAvatar"
+      type="1"
+      :showArr="[1]"
+      @success="submitSelectMaterial"
+    ></SelectMaterial>
   </div>
 </template>