优化名片

quanwei

3 days ago 73b874c72ad55eb9eef21c36160ac0de58f0189e

 branch_vue/src/views/member/member/dialog/addMember.vue

@@ -1,32 +1,58 @@
<template>
  <el-dialog title="新增成员" :visible.sync="dialogVisible" @close="cancelFunc" :close-on-click-modal="false" :close-on-press-escape="false" width="30%">
  <el-dialog title="新增成员" :visible.sync="dialogVisible" @close="cancelFunc" :close-on-click-modal="false" :close-on-press-escape="false" width="50%">
    <el-form ref="form" :model="formData">
      <el-form-item label="选择用户" prop="user_id" :label-width="formLabelWidth" :rules="[{required: true,message: '请选择用户'}]">
        <el-row>
          <el-button @click="selectUser" icon="el-icon-plus">选择用户</el-button>
          <div v-if="formData.user_id!=''" class="img">
            <img :src="user_info.avatarUrl" width="100" height="100" />
          <div v-if="formData.user_id!=''" class="img d-s-c">
            <img :src="user_info.avatarUrl" width="30" height="30" />
            <span class="ml10">{{ user_info.nickName }}</span>
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="头像" :label-width="formLabelWidth">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('avatarUrl')">选择图片</el-button>
          <div v-if="formData.avatarUrl!=''" class="mt10">
            <img :src="formData.avatarUrl" width="100" height="100" />
          </div>
          <div class="gray9">请上传正方形的图片，如果不需要更换，可以不上传</div>
        </el-row>
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth" prop="real_name" :rules="[{required: true,message: '请输入真实姓名'}]">
        <el-input type="text" v-model="formData.real_name" autocomplete="off"></el-input>
        <el-input type="text" v-model="formData.real_name" autocomplete="off" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth" prop="mobile" :rules="[{required: true,message: '请输入手机号'}]">
        <el-input type="text" v-model="formData.mobile" autocomplete="off"></el-input>
        <el-input type="text" v-model="formData.mobile" autocomplete="off" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="成员身份" prop="position_id" :label-width="formLabelWidth" :rules="[{required: true,message: '请选择成员身份'}]">
        <el-select v-model="formData.position_id" placeholder="-请选择成员身份">
          <el-option v-for="(item,index) in positionList" :key="index" :label="item.name" :value="item.position_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属企业" prop="shop_supplier_id" :label-width="formLabelWidth" :rules="[{required: true,message: '请选择企业'}]">
      <el-form-item label="所属企业" prop="shop_supplier_id" :label-width="formLabelWidth" :rules="[{required: false,message: '请选择企业'}]">
        <el-row>
          <el-button @click="selectSupplier" icon="el-icon-plus">选择企业</el-button>
          <div v-if="formData.shop_supplier_id!=''" class="mt10">
            <el-tag>{{ supplier_name }}</el-tag>
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="籍贯" :label-width="formLabelWidth">
        <el-select v-model="formData.province_id" placeholder="省" @change="initCity">
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList" :key='index'></el-option>
        </el-select>
        <el-select v-if="formData.province_id!=''" v-model="formData.city_id" placeholder="市" @change="initRegion">
          <el-option :label="item1.name" :value="item1.id" v-for="(item1,index1) in areaList[formData.province_id]['city']"
            :key='index1'></el-option>
        </el-select>
        <el-select v-if="formData.city_id!=''" v-model="formData.region_id" placeholder="区">
          <el-option :label="item2.name" :value="item2.id" v-for="(item2,index2) in areaList[formData.province_id]['city'][formData.city_id]['region']"
            :key='index2'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="个人简介" :label-width="formLabelWidth" prop="describe">
        <el-input type="textarea" v-model="formData.describe" class="max-w460"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
@@ -37,6 +63,8 @@
    <GetUser :is_open="open_getuser" @close="closeGetuserFunc"></GetUser>
    <!--选择商户-->
    <GetSupplier :open="open_supplier" @close="closeSupplierFunc"></GetSupplier>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
  </el-dialog>
</template>

@@ -44,10 +72,13 @@
import BranchApi from '@/api/branch.js';
import GetUser from '@/components/user/GetUser.vue';
import GetSupplier from '@/components/supplier/Supplier.vue';
import Upload from '@/components/file/Upload';
export default {
    components: {
    GetUser,
    GetSupplier
    GetSupplier,
    /*上传组件*/
    Upload,
  },
  data() {
    return {
@@ -63,24 +94,35 @@
          branch_id: '',
          position_id: '',
          shop_supplier_id: '', // 所属企业
          describe: '',
          // 籍贯
          province_id: '',
          city_id: '',
          region_id: '',
          avatarUrl: '',
      },
      open_getuser: false,
      user_info: [],
      open_supplier: false,
      supplier_name: '',
      /*省市区*/
      areaList: [],
      /*是否上传图片*/
      isupload: false,
    };
  },
  props: ['open_add', 'positionList'],
  created() {
    this.dialogVisible = this.open_add;
    // this.getData();
    this.getData();
  },
  methods: {
    getData(){
      let self = this;
      BranchApi.positionList({}, true)
      BranchApi.toAddMember({}, true)
        .then(res => {
          self.positionList = res.data.positionList;
          // self.positionList = res.data.positionList;
          self.areaList = res.data.areaList;
        })
        .catch(error => {});
    },
@@ -142,7 +184,30 @@
      this.$emit('close', {
        type:type
      });
    }
    },

    /*初始化城市id*/
    initCity() {
      this.formData.city_id = ''
    },

    /*初始化区id*/
    initRegion() {
      this.formData.region_id = ''
    },

    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.formData.avatarUrl = e[0].file_path;
      }
      this.isupload = false;
    },
  }
};
</script>
@@ -150,5 +215,9 @@
<style lang="scss" scoped>
  .img {
    margin-top: 10px;

    img {
      border-radius: 30px;
    }
  }
</style>