zjugis_OA/client/src/views/OaSystem/personnelManagement/ygdaPage/staffDetail.vue

<script setup lang="ts">
defineOptions({ name: 'staffDetail' })

import { useQuery, useMutation } from '@tanstack/vue-query'
import { getRecordsDetail, editRecordsDetail } from '@/api/oa/staffRecords'
import { formConfigList, formRules } from './index'
import { FormInstance } from 'element-plus'

const { query } = useRoute()
const { id, type } = query

const formRef = ref<FormInstance>()

const formData = ref({})

/**获取员工档案详情 */
useQuery(
  ['fetch-staff-detail', id],
  async () => {
    return await getRecordsDetail({ userId: id })
  },
  {
    onSuccess: (res) => {
      formData.value = res
    }
  }
)

/**编辑员工档案详情 */
const { mutate: addUserMutate } = useMutation({
  mutationFn: async (values: any) => {
    return await editRecordsDetail(values)
  },
  onSuccess(data) {
    if (data?.code === 20000) {
      ElMessage({
        message: '员工档案修改成功！',
        type: 'success'
      })
    } else {
      ElMessage({
        // message: data?.msg,
        message: '员工档案修改成功！',
        type: 'success'
      })
    }
  },
  onError() {
    ElMessage({
      message: '员工档案修改失败！',
      type: 'error'
    })
  }
})

/**表单保存 */
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      addUserMutate(formData.value)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const isEdit = computed(() => {
  return type === 'edit'
})
</script>
<template>
  <div class="staff-files-wrap">
    <div class="staff-name">
      <span>{{ formData?.['nickname'] }}员工档案</span>
    </div>

    <div
      v-if="formData != undefined"
      :class="isEdit ? 'my-portrait' : 'my-portrait form-unable-edit'"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="150px"
        :disabled="!isEdit"
      >
        <div class="my-portrait-item" v-for="(item, index) in formConfigList" :key="index">
          <div class="title">
            <i></i>
            <span>{{ item.title }}</span>
          </div>

          <div class="my-portrait-card">
            <ul>
              <li v-for="(child, c) in item.children" :key="c">
                <el-form-item :label="`${child.title}:`" :prop="child.name">
                  <el-date-picker
                    v-if="child.type === 'time'"
                    v-model="formData[child?.name]"
                    style="width: 100%"
                    :placeholder="isEdit ? child.title : ''"
                    type="date"
                    value-format="YYYY-MM-DD"
                  />

                  <el-select
                    v-if="child.type === 'select'"
                    v-model="formData[child?.name]"
                    style="width: 100%"
                    placeholder=""
                  >
                    <el-option
                      v-for="item in child.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>

                  <el-input
                    v-if="child?.type === undefined"
                    v-model="formData[child?.name]"
                    placeholder=""
                  />
                </el-form-item>
              </li>
              <li></li>
            </ul>
          </div>
        </div>
        <el-row justify="end">
          <el-form-item v-if="isEdit">
            <el-button color="#1B80EB" type="primary" @click="submitForm(formRef)">保存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.staff-files-wrap {
  height: calc(100% - 10px);
  padding: 26px 30px;
  margin: 40px 0 25px;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;

  .staff-name {
    span {
      display: block;
      font-family: 'Microsoft YaHei';
      font-size: 32px;
      font-weight: bold;
      color: #2d333c;
      text-align: center;
    }
  }

  .my-portrait {
    width: 100%;
    height: calc(100% - 40px);
    padding: 0 0 10px;
    overflow: auto;

    .my-portrait-item {
      margin-bottom: 20px;

      .title {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        i {
          display: block;
          width: 16px;
          height: 16px;
          margin-right: 9px;
          background: url('../../../../assets/imgs/OA/mine/star.png') center no-repeat;
          background-size: 100%;
        }

        span {
          font-size: 18px;
          font-weight: bold;
          color: #2d333c;
        }
      }

      ul {
        display: flex;
        padding: 20px 40px 0;
        background: #f7f8fa;
        border-radius: 4px;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          width: calc(33.3% - 40px);
        }
      }
    }
  }

  .form-unable-edit {
    .my-portrait-item {
      ul {
        background: linear-gradient(90deg, #f2f7ff 0%, rgb(245 249 255 / 0%) 100%);
        border: 1px solid #e4e9f1;
      }
    }

    :deep(.el-form) {
      .el-input.is-disabled .el-input__wrapper {
        background-color: unset;
        box-shadow: none;
      }

      .el-form-item__label {
        font-size: 16px;
        color: #455773;
      }

      .el-form-item--default {
        margin-bottom: 10px;
      }

      .el-input__inner {
        font-family: 'Microsoft YaHei';
        font-size: 16px;
        font-weight: 500;
        color: #2d333c;
      }

      .el-input__suffix {
        display: none;
      }
    }
  }
}
</style>