micro_vue/src/scrm_pages/systemsetting/components/CreateStaffForm.vue

<template>
        <div id="create-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" @change="selectGender">
                                <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="8">
                        <el-form-item label="员工职称:" required prop="user_type">
                          <template>
                            <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>
                          </template>
                        </el-form-item>
                    </el-col>

                  <el-col :span="6">
                      <template>
                        <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>
                      </template>
                  </el-col>
                  <el-col :span="4">
                      <el-form-item label="医生头像:" required prop="dochead">
                        <el-upload
                          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="addStaffInfo('staffform');">保存</el-button>
               </span>
          </el-dialog>
         </div>
</template>

<script>
      import Neditor from '@/components/Neditor'
      import {addStaffInfo} from '@/api/act/staffmanager'
      import {getToken} from '@/api/qiniu'
      import {getFileExtension,checkMobile,uParseTime} from '@/utils/tools'
    export default {
        name: "CreateStaffForm",
         components:{
           Neditor,
       },
      props:{
        staffsData:{
         type: Array,
         default: function () {
          return [];
        }
        }
     },
       data(){
          var checkMobileRule = (rule, value, callback) => {
            if (!checkMobile(value)) {
            callback(new Error('请填写正确的手机号'));
              }else {
               callback();
             }
          };
   
           return {
                crumbs: [
          { path: false, name: '系统设置' },
          { path: '/Systemsetting/staffmanagement', name: '员工管理' }
        ],
         centerDialogVisible: false,
          radio: '1',
          value: '',
          qiniuDomain: 'https://images.shengws.com/',
          uploadData: { token: '', key: '' },
         user_types: [
            { index: 2, name: '医生' },
            { index: 3, name: '护士' },
            { index: 4, 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: '运营主管' },
            ],
        imageUrl: '',

        form:{
          name:'',
          phone:'',
          birthday:'',
          gender:'',
          user_type:'',
          user_title:'',
          dochead:'',
          page:1,
          limit:10,
          content:'',
        },
         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;
            },
            resetForm(formName) {
               if (typeof(this.$refs[formName]) !='undefined') {
                this.$refs[formName].resetFields();
                }
              },
            handleAvatarSuccess(res, file) {
              this.form.dochead =  this.qiniuDomain + res.url;
              },
             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)
                })
               })
              },
          selectGender:function(gender) {
            if(gender == 2) {
             this.form.avatar = 'https://images.shengws.com/201809182128222.png';
            }else {
              this.form.avatar = 'https://images.shengws.com/201809182128111.png';
            }
          },
             handleAvatarError(err, file, fileList) {
               this.$message.error(err);
               return false
              },

                addStaffInfo(forName){
                this.form.content = this.$refs.neditor.content;
                console.log("文章内容",this.$refs.neditor.content)
                this.$refs[forName].validate((valid)=>{
                 if(valid){
                addStaffInfo(this.form).then(response=>{
                 if(response.data.state ==1){
                    var staffInfo = response.data.data.staffInfo
                    this.centerDialogVisible=false;
                    this.staffsData.unshift(staffInfo);
                    this.resetForm("staffform");
                    this.$message.success("保存成功");     
                 }
               })
              }
             })
            },
          }
       }
</script>

<style scoped>
     .avatar-uploader{
      border: 1px dashed  #d9d9d9;
      border-radius: 1px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader{
      border-color: #d9d9d9;
    }
    .avatar-uploader-icon {
      font-size: 20px;
      color: #8c939d;
      width: 44px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .avatar {
      width: 68px;
      height: 50px;
      display: block;
    }
</style>