集团账户-编辑员工基本信息

src/api/enterprise.js

@@ -201,4 +201,12 @@ export const getPersonRecommendPage = async (params) => {
     url: '/app-api/menduner/system/recruit/person-recommend/page',
     params
   })
+}
+
+// 集团账户-编辑员工基本信息
+export const updateGroupUserAccount = async (data) => {
+  return await request.post({
+    url: '/app-api/menduner/system/recruit/user/update',
+    data
+  })
 }

src/views/recruit/enterprise/systemManagement/groupAccount/index.vue

@@ -42,24 +42,61 @@
           itemKey="id"
           @pageHandleChange="handleChangePage"
         >
+          <template #name="{ item }">
+            <div class="d-flex align-center cursor-pointer">
+              <v-badge
+                v-if="item?.sex === '1' || item?.sex === '2'"
+                bordered
+                offset-y="6"
+                :color="badgeColor(item)"
+                :icon="badgeIcon(item)">
+                <v-avatar size="40" :image="getUserAvatar(item.avatar, item.sex)"></v-avatar>
+              </v-badge>
+              <v-avatar v-else size="40" :image="getUserAvatar(item.avatar, item.sex)"></v-avatar>
+              <span class="defaultLink ml-3">{{ item?.name }}</span>
+            </div>
+          </template>
           <template #actions="{ item }">
+            <v-btn v-if="item.userType === '0'" color="primary" variant="text" @click="handleEdit(item)">编辑</v-btn>
             <v-btn v-if="item.status === '1' && item.userType !== '1'" color="primary" variant="text" @click="handleAction('', 0, item)">{{ $t('enterprise.userManagement.enable') }}</v-btn>
             <v-btn v-if="item.status === '0' && item.userType !== '1'" color="primary" variant="text" @click="handleAction('', 1, item)">{{ $t('enterprise.userManagement.disable') }}</v-btn>
-            <v-btn color="primary" variant="text" @click="handleChangeEmail(item)">修改员工邮箱</v-btn>
           </template>
         </CtTable>
       </v-col>
     </v-row>
   </v-card>
 
-  <CtDialog :visible="showEditEmail" :widthType="2" titleClass="text-h6" title="修改员工邮箱" @close="showEditEmail = false" @submit="handleEditEmailSubmit">
-    <CtForm ref="editEmailFormRef" class="mt-3" :items="emailFormItems"></CtForm>
+  <CtDialog :visible="showEdit" :widthType="2" titleClass="text-h6" title="编辑员工基本信息" @close="showEdit = false; editId = null" @submit="handleSubmit">
+    <CtForm ref="CtFormRef" class="mt-3" :items="formItems">
+      <template #avatar="{ item }">
+        <div style="width: 100%;">
+          <div class="d-flex">
+            <div style="color: #7a7a7a;">头像</div>
+            <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
+              <v-avatar class="elevation-5" size=80 :image="getUserAvatar(item.value, item.sex)"></v-avatar>
+              <div v-show="showIcon" @click="openFileInput" v-bind="$attrs" class="mdi mdi-camera-outline">
+                <input
+                  type="file"
+                  ref="fileInput"
+                  accept="image/png, image/jpg, image/jpeg"
+                  style="display: none;"
+                  @change="handleUploadFile"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="text-center color-999 font-size-14 mb-5">*只支持JPG、JPEG、PNG类型的图片</div>
+        </div>
+      </template>
+    </CtForm>
   </CtDialog>
+
+  <ImgCropper :visible="isShowCopper" :image="selectPic" :cropBoxResizable="true" @submit="handleHideCopper" :aspectRatio="1 / 1" @close="isShowCopper = false"></ImgCropper>
 </template>
 
 <script setup>
 defineOptions({ name: 'group-account'})
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { timesTampChange } from '@/utils/date'
 import { getEnterpriseTree } from '@/api/recruit/enterprise/system/group'
@@ -67,7 +104,10 @@ import { getEnterpriseUserList, systemUserEnable, systemUserDisable } from '@/ap
 import Confirm from '@/plugins/confirm'
 import Snackbar from '@/plugins/snackbar'
 import { checkEmail } from '@/utils/validate'
-import { entUpdateEmail } from '@/api/enterprise'
+import { updateGroupUserAccount } from '@/api/enterprise'
+import { getDict } from '@/hooks/web/useDictionaries'
+import { getUserAvatar } from '@/utils/avatar'
+import { uploadFile } from '@/api/common'
 
 const { t } = useI18n()
 const total = ref(0)
@@ -97,6 +137,13 @@ const textItem = ref({
   clearable: true,
   label: '请输入用户名称搜索'
 })
+const badgeColor = computed(() => (item) => {
+  return (item && item.sex) ? (item.sex === '1' ? '#1867c0' : 'error') : 'error'
+})
+
+const badgeIcon = computed(() => (item) => {
+  return (item && item.sex) ? (item.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'
+})
 
 // 获取用户列表
 const getUserList = async () => {
@@ -155,13 +202,39 @@ const handleAdd = (type) => {
   window.open(`/recruit/enterprise/systemManagement/groupAccount/invite/${type}`)
 }
 
-const emailFormItems = ref({
+const formItems = ref({
   options: [
+    {
+      slotName: 'avatar',
+      key: 'avatar',
+      value: null
+    },
+    {
+      type: 'ifRadio',
+      key: 'sex',
+      value: '',
+      label: '性别 *',
+      width: 90,
+      items: []
+    },
+    {
+      type: 'text',
+      key: 'name',
+      value: '',
+      label: '中文名 *',
+      rules: [v => !!v || '请填写中文名']
+    },
+    {
+      type: 'text',
+      key: 'phone',
+      value: '',
+      label: '联系电话'
+    },
     {
       type: 'text',
       key: 'email',
       value: '',
-      label: '电子邮箱',
+      label: '电子邮箱 *',
       disabled: false,
       rules: [
         value => {
@@ -173,33 +246,109 @@ const emailFormItems = ref({
           return '请输入正确的电子邮箱'
         }
       ]
+    },
+    {
+      type: 'text',
+      key: 'postName',
+      value: '',
+      label: '所在岗位'
     }
   ]
 })
-// 修改员工邮箱
-const showEditEmail = ref(false)
-const editEmailFormRef = ref()
-let editEmailItem = {}
-const handleChangeEmail = async (item) => {
-  emailFormItems.value.options.forEach(e => { if (item[e.key]) { e.value = item[e.key] } })
-  editEmailItem = item
-  showEditEmail.value = true
+getDict('menduner_sex').then(({ data }) => {
+  data = data?.length && data || []
+  formItems.value.options.find(e => e.key === 'sex').items = data
+})
+
+
+// 编辑员工信息
+const showEdit = ref(false)
+const CtFormRef = ref()
+const editId = ref(null)
+const showIcon = ref(false)
+const handleEdit = async (item) => {
+  formItems.value.options.forEach(e => { e.value = item[e.key] })
+  editId.value = item.id
+  showEdit.value = true
+}
+
+// 选择文件
+const fileInput = ref()
+const clicked = ref(false)
+const selectPic = ref('')
+const isShowCopper = ref(false)
+const openFileInput = () => {
+  if (clicked.value) return
+  clicked.value = true
+  fileInput.value.click()
+  clicked.value = false
+}
+
+// 上传头像
+const handleUploadFile = async (e) => {
+  const file = e.target.files[0]
+  if (!file) return
+  const reader = new FileReader()
+  reader.readAsDataURL(file)
+  reader.onload = () => {
+    selectPic.value = String(reader.result)
+    isShowCopper.value = true
+  }
+}
+
+const handleHideCopper = (data) => {
+  isShowCopper.value = false
+  if (data) {
+    const { file } = data
+    if (!file) return
+
+    const formData = new FormData()
+    formData.append('file', file)
+    uploadFile(formData).then(async ({ data }) => {
+      if (!data) return
+      formItems.value.options.find(e => e.key === 'avatar').value = data
+    })
+  }
 }
+
 // 提交
-const handleEditEmailSubmit = async () => {
-  const { valid } = await editEmailFormRef.value.formRef.validate()
+const handleSubmit = async () => {
+  const { valid } = await CtFormRef.value.formRef.validate()
   if (!valid) return
-  if (!editEmailItem?.id) return
-  const obj = { id: editEmailItem.id }
-  emailFormItems.value.options.forEach(e => { obj[e.key] = e.value })
-  await entUpdateEmail(obj)
-  setTimeout(async () => {
-    showEditEmail.value = false
-    getUserList()
-    Snackbar.success(t('common.submittedSuccessfully'))
-  }, 1000)
+  const obj = {
+    id: editId.value
+  } 
+  formItems.value.options.forEach(e => { obj[e.key] = e.value })
+  if (!obj.sex || obj.sex === '0') return Snackbar.warning('请选择员工性别')
+  await updateGroupUserAccount(obj)
+  showEdit.value = false
+  editId.value = null
+  Snackbar.success('编辑成功')
+  getUserList()
 }
 </script>
 
 <style scoped lang="scss">
+.avatarsBox {
+  height: 80px;
+  width: 80px;
+  position: relative;
+  cursor: pointer;
+  margin: 0 0 10px 100px;
+  .img {
+    width: 100%;
+    height: 100%;
+  }
+  .mdi {
+    font-size: 42px;
+    color: #fff;
+  }
+  div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+  }
+}
 </style>