cmc-oa/oa-ui-app/pages/oa/staff/staffEdit.vue

<template>
  <view class="container">
    <uv-form ref="form" :model="form" :rules="rules" label-width="200rpx">
      <!-- 基本信息 -->
      <view class="form-section">
        <view class="section-title">基本信息</view>
        <view class="form-item">
          <uv-form-item label="姓名" prop="nickName">
            <uv-input v-model="form.nickName" placeholder="请输入姓名" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="性别">
            <uv-radio-group v-model="form.sex">
              <uv-radio label="0">男</uv-radio>
              <uv-radio label="1">女</uv-radio>
            </uv-radio-group>
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="手机号码" prop="phonenumber">
            <uv-input v-model="form.phonenumber" placeholder="请输入手机号码" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="身份证" prop="idCard">
            <uv-input v-model="form.idCard" placeholder="请输入身份证号码" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="籍贯">
            <uv-input v-model="form.nativePlace" placeholder="请输入籍贯" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="民族">
            <uv-input v-model="form.ethnic" placeholder="请输入民族" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="政治面貌">
            <uv-select v-model="form.politicalAffiliation" :options="politicalOptions" placeholder="请选择政治面貌" multiple />
          </uv-form-item>
        </view>
      </view>

      <!-- 工作信息 -->
      <view class="form-section">
        <view class="section-title">工作信息</view>
        <view class="form-item">
          <uv-form-item label="归属部门" prop="deptId">
            <uv-select v-model="form.deptId" :options="deptOptions" placeholder="请选择归属部门" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="入职时间">
            <uv-datetime-picker v-model="form.entryDate" mode="date" placeholder="请选择入职时间" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="合同签订">
            <uv-datetime-picker v-model="form.contractSign" mode="date" placeholder="请选择合同签订时间" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="合同期满">
            <uv-datetime-picker v-model="form.contractExpire" mode="date" placeholder="请选择合同期满时间" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="技术职称">
            <uv-select v-model="form.titles" :options="titleOptions" placeholder="请选择技术职称" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="职称专业">
            <uv-input v-model="form.titleProfession" placeholder="请输入职称专业" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="职业资格">
            <uv-select v-model="form.certificates" :options="certificateOptions" placeholder="请选择职业资格" multiple />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="岗级">
            <view class="level-group">
              <uv-select v-model="form.postLevel" :options="postLevelOptions" placeholder="请选择岗级" />
              <uv-select v-model="form.salaryLevel" :options="salaryLevelOptions" placeholder="请选择薪级" />
            </view>
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="状态">
            <uv-radio-group v-model="form.status">
              <uv-radio label="0">在职</uv-radio>
              <uv-radio label="1">离职</uv-radio>
              <uv-radio label="2">退休</uv-radio>
              <uv-radio label="3">试用</uv-radio>
              <uv-radio label="4">返聘</uv-radio>
            </uv-radio-group>
          </uv-form-item>
        </view>
      </view>

      <!-- 教育背景 -->
      <view class="form-section">
        <view class="section-title">教育背景</view>
        <view class="form-item">
          <uv-form-item label="最高学历">
            <uv-select v-model="form.degree" :options="degreeOptions" placeholder="请选择最高学历" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="最高学历专业">
            <uv-input v-model="form.major" placeholder="请输入最高学历专业" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="最高学历毕业学校">
            <uv-input v-model="form.graduateSchool" placeholder="请输入最高学历毕业学校" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="初始学历">
            <uv-select v-model="form.initialDegree" :options="degreeOptions" placeholder="请选择初始学历" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="初始学历专业">
            <uv-input v-model="form.initialMajor" placeholder="请输入初始学历专业" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="初始学历毕业学校">
            <uv-input v-model="form.initialSchool" placeholder="请输入初始学历毕业学校" />
          </uv-form-item>
        </view>
      </view>

      <!-- 其他信息 -->
      <view class="form-section">
        <view class="section-title">其他信息</view>
        <view class="form-item">
          <uv-form-item label="家庭住址">
            <uv-textarea v-model="form.homePlace" placeholder="请输入家庭住址" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="紧急联系人">
            <uv-input v-model="form.contact" placeholder="请输入紧急联系人" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="紧急联系电话">
            <uv-input v-model="form.telephone" placeholder="请输入紧急联系电话" />
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item label="备注">
            <uv-textarea v-model="form.remark" placeholder="请输入备注信息" />
          </uv-form-item>
        </view>
      </view>
    </uv-form>

    <!-- 操作按钮 -->
    <view class="action-section">
      <uv-button type="default" @click="handleCancel">取消</uv-button>
      <uv-button type="primary" @click="handleSubmit">保存</uv-button>
    </view>
  </view>
</template>

<script>
import { getUser, updateUser, addUser } from "@/api/system/user";
import { deptTreeSelectNew } from "@/api/system/dept";

export default {
  data() {
    return {
      form: {
        userId: undefined,
        nickName: '',
        sex: '0',
        phonenumber: '',
        idCard: '',
        nativePlace: '',
        ethnic: '',
        politicalAffiliation: [],
        deptId: undefined,
        entryDate: '',
        contractSign: '',
        contractExpire: '',
        titles: '',
        titleProfession: '',
        certificates: [],
        postLevel: '',
        salaryLevel: '',
        status: '0',
        degree: '',
        major: '',
        graduateSchool: '',
        initialDegree: '',
        initialMajor: '',
        initialSchool: '',
        homePlace: '',
        contact: '',
        telephone: '',
        remark: ''
      },
      deptOptions: [],
      politicalOptions: [
        { label: '中共党员', value: '1' },
        { label: '中共预备党员', value: '2' },
        { label: '共青团员', value: '3' },
        { label: '民革党员', value: '4' },
        { label: '民盟盟员', value: '5' },
        { label: '民建会员', value: '6' },
        { label: '民进会员', value: '7' },
        { label: '农工党党员', value: '8' },
        { label: '致公党党员', value: '9' },
        { label: '九三学社社员', value: '10' },
        { label: '台盟盟员', value: '11' },
        { label: '无党派人士', value: '12' },
        { label: '群众', value: '13' }
      ],
      titleOptions: [
        { label: '高级工程师', value: '1' },
        { label: '工程师', value: '2' },
        { label: '助理工程师', value: '3' },
        { label: '技术员', value: '4' }
      ],
      certificateOptions: [
        { label: '注册测绘师', value: '1' },
        { label: '注册建筑师', value: '2' },
        { label: '注册结构师', value: '3' },
        { label: '注册造价师', value: '4' }
      ],
      degreeOptions: [
        { label: '博士', value: '1' },
        { label: '硕士', value: '2' },
        { label: '本科', value: '3' },
        { label: '专科', value: '4' },
        { label: '高中', value: '5' }
      ],
      postLevelOptions: [
        { label: '一级', value: '1' },
        { label: '二级', value: '2' },
        { label: '三级', value: '3' },
        { label: '四级', value: '4' },
        { label: '五级', value: '5' }
      ],
      salaryLevelOptions: [
        { label: 'A', value: '1' },
        { label: 'B', value: '2' },
        { label: 'C', value: '3' },
        { label: 'D', value: '4' },
        { label: 'E', value: '5' }
      ],
      rules: {
        nickName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phonenumber: [
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        idCard: [
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '请选择归属部门', trigger: 'change' }
        ]
      }
    }
  },
  
  onLoad(options) {
    this.getDeptTree();
    if (options.userId) {
      this.getStaffInfo(options.userId);
    }
  },
  
  methods: {
    // 获取部门树
    async getDeptTree() {
      try {
        const res = await deptTreeSelectNew();
        this.deptOptions = res.data || [];
      } catch (error) {
        console.error('获取部门树失败:', error);
      }
    },
    
    // 获取员工信息
    async getStaffInfo(userId) {
      try {
        const res = await getUser(userId);
        this.form = { ...this.form, ...res.data };
        
        // 处理政治面貌数组
        if (this.form.politicalAffiliation) {
          this.form.politicalAffiliation = this.form.politicalAffiliation.split(',');
        }
        
        // 处理职业资格数组
        if (this.form.certificates) {
          this.form.certificates = this.form.certificates.split(',');
        }
      } catch (error) {
        console.error('获取员工信息失败:', error);
        uni.showToast({
          title: '获取员工信息失败',
          icon: 'none'
        });
      }
    },
    
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            // 处理数组字段
            const submitData = { ...this.form };
            submitData.politicalAffiliation = this.form.politicalAffiliation.join(',');
            submitData.certificates = this.form.certificates.join(',');
            
            if (this.form.userId) {
              // 更新
              await updateUser(submitData);
              uni.showToast({
                title: '更新成功',
                icon: 'success'
              });
            } else {
              // 新增
              await addUser(submitData);
              uni.showToast({
                title: '添加成功',
                icon: 'success'
              });
            }
            
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } catch (error) {
            console.error('保存失败:', error);
            uni.showToast({
              title: '保存失败',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 取消
    handleCancel() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.form-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    border-left: 6rpx solid #007aff;
    padding-left: 20rpx;
  }
  
  .form-item {
    margin-bottom: 30rpx;
  }
  
  .level-group {
    display: flex;
    gap: 20rpx;
    
    .uv-select {
      flex: 1;
    }
  }
}

.action-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  gap: 20rpx;
  
  .uv-button {
    flex: 1;
  }
}
</style>