c5_labsci/fapp/ciyon_ap/pages/lab/useredit.vue

<template>
  <view class="ciy-page">
    <view class="ciy-title mk bg2">
      <view class="title">编辑实验室成员信息</view>
      <button class="btn def sm" @click="goBack">返回</button>
    </view>
    <view class="main bg4 flex1 overflow-auto px4 py3">
      <form class="ciy-form-group">
        <view class="ciy-form">
          <label class="imp">成员姓名</label>
          <view>
            <ciy-input name="name" v-model="form.name" placeholder="请输入成员姓名" required></ciy-input>
          </view>
        </view>
        <view class="ciy-form">
          <label>头像</label>
          <view>
            <ciy-upload imgwidth="600" imgheight="600" path="demo" name="avar" v-model="form.icon"></ciy-upload>
          </view>
        </view>
        <view class="ciy-form">
          <label>头衔</label>
          <view>
            <ciy-select :range="g.usertitle" name="menuid" v-model="form.usertitle"></ciy-select>
          </view>
        </view>
        <view class="ciy-form">
          <label>状态</label>
          <view>
            <ciy-radio left :range="g.role" name="sigstatus" v-model="form.role"></ciy-radio>
          </view>
        </view>
        <view class="ciy-form">
          <label>学历</label>
          <view>
            <ciy-select :range="g.education" name="menuid" v-model="form.education"></ciy-select>
          </view>
        </view>
        <view class="ciy-form">
          <label class="imp">编号</label>
          <view>
            <ciy-input name="name" v-model="form.sn" placeholder="请输入成员编号" required></ciy-input>
          </view>
        </view>
        <view class="ciy-form">
          <label>性别</label>
          <view>
            <ciy-radio left :range="g.sex" name="sex" v-model="form.sex"></ciy-radio>
          </view>
        </view>
        <view class="ciy-form">
          <label>加入日期</label>
          <view>
            <ciy-inputdatetime name="date" v-model="form.addtimes"></ciy-inputdatetime>
          </view>
        </view>
        <view class="ciy-form">
          <label>手机号</label>
          <view>
            <ciy-input name="mobile" v-model="form.mobile" placeholder="请输入11位手机号"></ciy-input>
          </view>
        </view>
        <view class="ciy-form">
          <label>邮箱</label>
          <view>
            <ciy-input name="email" v-model="form.email" placeholder="请输入邮箱地址"></ciy-input>
          </view>
        </view>
        <view class="ciy-form">
          <label class="char4">修改密码</label>
          <input 
            type="password" 
            v-model="form.pass" 
            placeholder="不修改密码请留空"
            class="ciy-edit px2 py1 bg1 rounded"
          />
          <view class="text-xs text-gray-500 mt1">
          </view>
        </view>
      </form>
      <view class="ciy-form-bottom mt4">
        <button 
          class="btn man lgg long" 
          @click="submitForm"
          :disabled="isSubmitting"
        >
          {{ isSubmitting ? '更新中...' : '更新成员信息' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import md5 from '@/util/md5.js';
export default {

  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      isSubmitting: false,
      form: {
        id: 0, 
        laborgid: 0,
        stpstatus: 10,
        userlevel: 10,
        dvotecnt: 0,
        name: '',
        icon: '',
        usertitle: 0,
        role: 30,
        education: 50,
        sn: '',
        sex: 90,
        addtimes: 0,
        mobile: '',
        email: '',
        pass: '' 
      }
    };
  },
  onLoad(options) {
    if (!options.id || parseInt(options.id) <= 0) {
      this.toast('无效的成员ID，无法进入编辑页面');
      setTimeout(() => this.goBack(), 1500);
      return;
    }
    this.form.id = parseInt(options.id);
    this.getMemberDetail();
  },
  methods: {
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    async getMemberDetail() {
      try {
        const retjson = await this.callfunc({
          func: 'adduser.info', 
          data: { id: this.form.id }
        });
        if (retjson.code !== 1) {
          throw new Error(retjson.msg || '获取成员信息失败');
        }
        if (!retjson.data || typeof retjson.data !== 'object') {
          throw new Error('成员信息格式异常，请重试');
        }
        const detail = retjson.data;
        this.form = {
          ...this.form,
          ...detail,
          addtimes: detail.addtimes * 1000, 
          pass: '' 
        };
      } catch (err) {
        this.toast(err.message);
        console.error('拉取详情异常：', err);
      }
    },
    async submitForm() {
      if (!this.form.name) {
        return this.toast('请输入成员姓名');
      }
      if (!this.form.addtimes) {
        return this.toast('请选择加入日期');
      }
      if (this.form.mobile && !/^1[3-9]\d{9}$/.test(this.form.mobile)) {
        return this.toast('请输入有效的11位手机号');
      }
      if (this.form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)) {
        return this.toast('请输入有效的邮箱地址');
      }
      this.isSubmitting = true;
      try {
        const app = getApp();
        const postData = { ...this.form };
        postData.auth = (new Date()).getTime();
        if (postData.pass) {
          postData.pass = md5.md5(postData.pass + app.globalData.tokensalt);
        } else {
          delete postData.pass;
        }
        const retjson = await this.callfunc({
          func: 'adduser.update',
          data: postData     
        });

        if (retjson.code !== 1) { 
          throw new Error(retjson.msg || '更新成员失败');
        }

        this.toast('更新成员信息成功');
        setTimeout(() => this.goBack(), 1500);
      } catch (err) {
        this.toast(err.message);
        console.error('提交编辑异常：', err);
      } finally {
         this.isSubmitting = false;
      }
    }
  },
};
</script>

<style scoped>
.ciy-edit {
  width: 100%;
  height: 2rem;
  border: 1px solid var(--bg6);
  border-radius: 0.3rem;
}
.text-xs {
  font-size: 0.75rem;
}
.text-gray-500 {
  color: #9ca3af;
}
.mt1 {
  margin-top: 0.25rem;
}
</style>