scrm-vue/src/scrm_pages/systemsetting/components/EditStaffForm.vue

<template>
    <div id="Edit-staff-form-box">
          <el-dialog
              title="编辑会员"
              :visible.sync="centerDialogVisible"
              width="50%"
              center>
              <el-form label-width="100px" class="clearfix" :model="form" ref="staffform" :rules="staffrules">
                 <el-row>
                   <el-col :span="12">
                      <el-form-item label="姓名:"  required prop="name">
                           <el-input placeholder="请输入姓名" v-model="form.name">

                           </el-input>
                      </el-form-item>
                   </el-col>
                   <el-col :span="12">
                     <el-form-item label="手机号:" required prop="phone">
                       <el-input placeholder="请输入手机号" v-model="form.phone">

                       </el-input>
                     </el-form-item>
                   </el-col>
                 </el-row>
                <el-row>
                   <el-col :span="12">
                       <el-form-item label="性别:" required prop="gender">
                           <el-radio-group v-model="form.gender">
                                <el-radio :label="gender.id" :value="gender.id" v-for="(gender, index) in genderOptions" :key="index">{{gender.name}}</el-radio>
                            </el-radio-group>
                       </el-form-item>
                   </el-col>
                  <el-col :span="12">
                   <el-form-item label="生日:" required prop="birthday">
                        <el-date-picker v-model="form.birthday" prefix-icon="el-icon-date" :editable="false" style="width: 100%;" type="date" placeholder="请选择日期" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                 </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="员工职称:" required prop="user_type">
                          
                            <el-select v-model="form.user_type" placeholder="请选择">
                             <el-option
                                v-for="item in user_types"
                                :key="item.index"
                                :label="item.name"
                                :value="item.index">
                             </el-option>
                            </el-select>

                            <el-select v-model="form.user_title"  placeholder="请选择"> 
                          <el-option
                            v-for="item in user_titles"
                            :key="item.index"
                            :label="item.name"
                            :value="item.index">
                          </el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>              
                  <el-col :span="4">
                      <el-form-item label="医生头像:" required prop="dochead">
                        <el-upload
                          v-loading="uploading"
                          class="avatar-uploader"
                          action="https://upload.qiniup.com"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload"
                          :on-error="handleAvatarError"
                          :data="uploadData">
                          <img v-if="form.dochead" :src="form.dochead" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </el-form-item>
                </el-col>
                </el-row>
                 <el-row>
                     <el-col :span="24">
                         <el-form-item label="医生简介:" required prop="content">
                           <keep-alive>
                             <neditor ref="neditor"
                                      id="editor"
                                      v-bind:r_content="form.content">
                             </neditor>
                           </keep-alive>
                         </el-form-item>
                     </el-col>
                 </el-row>
              </el-form>
              <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="SaveStaffInfo('staffform');">保存</el-button>
               </span>
          </el-dialog>
    </div>
</template>

<script>
    import Neditor from '@/components/Neditor'
    import {getToken} from '@/api/qiniu'
    import {checkMobile, uParseTime} from "@/utils/tools"
    import {SaveStaffInfo} from '@/api/act/staffmanager'
    import { getFileExtension} from '@/utils/tools'
    
    export default {
        name: "EditStaffForm",
          components:{
           Neditor,
       },
        props:{
         form:{
          id:0,
          name:'',
          phone:'',
          birthday:'',
          gender:'',
          user_type:'',
          user_title:'',
          dochead:'',
          page:1,
          limit:10,
          content:'',
        },
        staffIndex:{
          type:Number,
          default:-1,
        },
          staffsData:{
          type: Array,
          default: function () {
          return [];
         }
       }, 
      },
      data(){
        var checkMobileRule = (rule, value, callback) => {
          if (!checkMobile(value)) {
            callback(new Error('请填写正确的手机号'));
             }else {
             callback();
            }
          };
        return{
          centerDialogVisible: false,
          qiniuDomain: 'https://images.shengws.com/',
          uploading: false,
          uploadData: {token:'',key:''},
         user_types: [
            { index: 1, name: '医生' },
            { index: 2, name: '护士' },
            { index: 3, name: '运营' },
            ],
        user_titles: [
            { index: 1, name: '医士' },
            { index: 2, name: '医师' },
            { index: 3, name: '住院医师' },
            { index: 4, name: '主治医师' },
            { index: 5, name: '副主任医师' },
            { index: 6, name: '主任医师' },
            { index: 7, name: '护士' },
            { index: 8, name: '护师' },
            { index: 9, name: '主管护师' },
            { index: 10, name: '副主任护师' },
            { index: 11, name: '主任护师' },
            { index: 12, name: '运营专员' },
            { index: 13, name: '运营主管' },
            ],
         keyword:'',
        staffform:[],
         staffrules:{
            name: [{required: true, message: "姓名不能为空"},],
            phone: [{required: true,message:"手机号码不能为空"},{validator:checkMobileRule}],
            birthday: [{required: true,message:"生日不能为空"}],
            gender: [{required: true,message:"性别不能为空"}],
            user_type: [{required: true,message:"职称类别不能为空"}],
            user_title: [{required: true,message:"职称不能为空"}],
            content: [{required: true,message:"医生简介不能为空"}],
            dochead: [{required: true,message:"头像不能为空"}],
        },
         genderOptions:[
          {id:1, name:'男'},
          {id:2, name:'女'},
         ],
         staffData:[], 
        }
      },
      methods:{
        open:function(){
           this.centerDialogVisible = true;
          },
          staffCreateTime(time) {
          return uParseTime(time, "{y}-{m}-{d}");
        },
            handleAvatarSuccess(res, file) {
              console.log("路径",res.url,"文件名",file.name)
              this.form.dochead = this.qiniuDomain + res.url;
              this.uploading = false;
              conso.log(this.form.dochead);
              },
             beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              console.log("是什么呢",isJPG)
              const isLt2M = file.size / 1024 / 1024 < 2;
             if (!isJPG) {
              this.$message.error('上传头像图片只能是JPG或者png格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }

             var date = new Date()
             var ext = getFileExtension(file.name)
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
             this.uploading = true;
             this.loadingText = '封面图片上传中'
             const _self = this
            return new Promise((resolve, reject) => {
            getToken().then(response => {
            const token = response.data.data.uptoken
            console.log("token是什么?",token)
            _self._data.uploadData.token = token
             _self._data.uploadData.key = key
               resolve(true)
              }).catch(err => {
                reject(false)
                })
               })
              },
        handleAvatarError(err, file, fileList) {
          this.$message.error(err);
            return false
          },    
          
          SaveStaffInfo(forname){
             this.$refs[forname].validate((valid)=>{
                 if(valid){
                    SaveStaffInfo(this.form.id,this.form).then(response=>{
                        if(response.data.state==1){
                           var userStaffInfo =  response.data.data.userStaffInfo;
                           console.log("heeh",userStaffInfo)
                           this.centerDialogVisible = false;
                           this.$message.success("保存成功");
                           this.staffsData[this.staffIndex].name = userStaffInfo.name;
                           this.staffsData[this.staffIndex].phone = userStaffInfo.phone;
                           this.staffsData[this.staffIndex].birthday = userStaffInfo.birthday;
                           this.staffsData[this.staffIndex].gender = userStaffInfo.gender;
                           this.staffsData[this.staffIndex].user_type = userStaffInfo.user_type;
                           this.staffsData[this.staffIndex].user_title = userStaffInfo.user_title;
                           this.staffsData[this.staffIndex].dochead = userStaffInfo.dochead;
                           this.staffsData[this.staffIndex].content = userStaffInfo.content;
                        }
                    })
                 }
             })
          }
      }
    }
</script>

<style scoped>

</style>