|
|
@@ -1,100 +1,124 @@
|
|
|
<template>
|
|
|
<div class="inline-16">
|
|
|
<el-button type="text" size="small" icon="el-icon-edit" @click="onShow(dialogFormVisible = true)" style="color:#333">编 辑</el-button>
|
|
|
- <el-dialog title="编辑联系人" append-to-body :visible.sync="dialogFormVisible" width="50%">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-form :model="form" ref="form" label-position="right" label-width="80px" size="small">
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="姓名" prop="name" :rules="[
|
|
|
+ <el-drawer title="新建联系人" append-to-body :visible.sync="dialogFormVisible" size="664px">
|
|
|
+ <div class="drawer__panel">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="80px" size="small">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="姓名:" prop="name" :rules="[
|
|
|
{ required: true, message: '联系人姓名不能为空'},
|
|
|
]">
|
|
|
- <el-input v-model="form.name" autocomplete="on" placeholder="输入联系人姓名"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="性别">
|
|
|
- <el-select v-model="form.sex" style="width:100%">
|
|
|
- <el-option v-for="item in sys_options" :key="item.index" :value="item.value" :label="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="手机号码" prop="phonenumber" :rules="[
|
|
|
+ <el-input v-model="form.name" autocomplete="on" placeholder="请填写企业名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item>
|
|
|
+ <el-radio v-model="form.isTelephone" label="0">手机号</el-radio>
|
|
|
+ <el-radio v-model="form.isTelephone" label="1">座机电话</el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" v-if="form.isTelephone == '1'">
|
|
|
+ <el-form-item label="电话:" prop="telephone" >
|
|
|
+ <el-input v-model="form.areaCode" style="width: 25%" autocomplete="on" placeholder="请填写区号"></el-input>
|
|
|
+ <span style="color: #999999">——</span>
|
|
|
+ <el-input v-model="form.telephone" style="width: 68%" autocomplete="on" placeholder="请填写座机电话"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" >
|
|
|
+ <el-form-item v-if="form.isTelephone == '0'" label="手机号:" prop="phonenumber" :rules="[
|
|
|
{ required: true, message: '手机号码不能为空'},
|
|
|
{ pattern:/^1[3-9][0-9]\d{8}$/, message: '请输入正确手机号码',trigger: 'blur' }
|
|
|
]">
|
|
|
- <el-input v-model="form.phonenumber" autocomplete="on" placeholder="输入联系人手机号码"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="生日">
|
|
|
- <el-date-picker
|
|
|
- style="width:100%"
|
|
|
- v-model="form.birthday"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- type="date"
|
|
|
- placeholder="选择日期">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="邮箱" prop="email" :rules="[
|
|
|
+ <el-input v-model="form.phonenumber" autocomplete="on" placeholder="请填写手机号码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="邮箱:" prop="email" :rules="[
|
|
|
{ pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确邮箱',trigger: 'blur' }
|
|
|
]">
|
|
|
- <el-input v-model="form.email" autocomplete="on" placeholder="输入联系人邮箱"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="家庭住址">
|
|
|
- <el-input v-model="form.homeaddress" autocomplete="on" placeholder="输入联系人家庭住址"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="微信">
|
|
|
- <el-input v-model="form.wechat" autocomplete="on" placeholder="输入联系人微信"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="单位">
|
|
|
- <el-input v-model="form.company" autocomplete="on" placeholder="输入联系人单位"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="部门">
|
|
|
- <el-input v-model="form.depname" autocomplete="on" placeholder="输入联系人部门"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="职位">
|
|
|
- <el-input v-model="form.position" autocomplete="on" placeholder="输入联系人职位"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="标签">
|
|
|
- <el-select v-model="form.tag" style="width:100%" multiple>
|
|
|
- <el-option v-for="item in tagList" :key="item.index" :value="item.tag" :label="item.tag"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="群组">
|
|
|
- <el-select v-model="form.sys_phonebookgroupid" style="width:100%">
|
|
|
- <el-option v-for="item in group" :key="item.index" :value="item.sys_phonebookgroupid" :label="item.groupname"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="备注">
|
|
|
- <el-input v-model="form.remarks" autocomplete="on" placeholder="输入联系人备注"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
- </el-row>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
+ <el-input v-model="form.email" autocomplete="on" placeholder="请填写邮箱"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="传真:" prop="fax">
|
|
|
+ <el-input v-model="form.fax" autocomplete="on" placeholder="请填写传真"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="单位:" prop="company">
|
|
|
+ <el-input v-model="form.company" autocomplete="on" placeholder="请填写单位"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="部门:" prop="depname">
|
|
|
+ <el-input v-model="form.depname" autocomplete="on" placeholder="请填写部门"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="职位:" prop="position">
|
|
|
+ <el-input v-model="form.position" autocomplete="on" placeholder="请填写职位"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="性别:" prop="sex">
|
|
|
+ <el-radio v-model="form.sex" label="男">男</el-radio>
|
|
|
+ <el-radio v-model="form.sex" label="女">女</el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="生日" prop="birthday">
|
|
|
+ <el-date-picker
|
|
|
+ style="width:100%"
|
|
|
+ v-model="form.birthday"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="家庭住址" prop="homeaddress">
|
|
|
+ <el-input v-model="form.homeaddress" autocomplete="on" placeholder="请填写家庭住址"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="12">
|
|
|
+ <el-form-item label="微信">
|
|
|
+ <el-input v-model="form.wechat" autocomplete="on" placeholder="输入联系人微信"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col> -->
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="群组" prop="sys_phonebookgroupid">
|
|
|
+ <el-select v-model="form.sys_phonebookgroupid" style="width:100%">
|
|
|
+ <el-option v-for="item in group" :key="item.index" :value="item.sys_phonebookgroupid" :label="item.groupname"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="标签" prop="tags">
|
|
|
+ <el-select v-model="tags" style="width:100%" multiple>
|
|
|
+ <el-option v-for="item in tagList" :key="item.index" :value="item.tag" :label="item.tag"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注" prop="remarks">
|
|
|
+ <el-input v-model="form.remarks" autocomplete="on" placeholder="输入联系人备注"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="fixed__btn__panel">
|
|
|
<el-button size="small" style="width:120px" @click="dialogFormVisible = false">取 消</el-button>
|
|
|
<el-button size="small" style="width:120px" type="primary" @click="addGroup()">确 定</el-button>
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -104,11 +128,30 @@ import {mapGetters} from 'vuex'
|
|
|
export default {
|
|
|
props:['group','data','tagList'],
|
|
|
data () {
|
|
|
+ var telephone = (rule,value,callback) =>{
|
|
|
+ if (this.form.areaCode === ''){
|
|
|
+ callback(new Error('区号不能为空'))
|
|
|
+ } else if (this.form.telephone === ''){
|
|
|
+ callback(new Error('座机号码不能为空'))
|
|
|
+ } else if (this.form.telephone !== '') {
|
|
|
+ if (this.form.telephone.length > 8){
|
|
|
+ callback(new Error('座机号码不合法,不得大于8位'))
|
|
|
+ }else if (this.form.telephone.length < 8) {
|
|
|
+ callback(new Error('座机号码不合法,不得小于8位'))
|
|
|
+ }else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
return {
|
|
|
dialogFormVisible:false,
|
|
|
form:{
|
|
|
"sys_phonebookid":0, //sys_phonebookid<=0时 为新增
|
|
|
"sys_phonebookgroupid":null,
|
|
|
+ "isTelephone":'0',
|
|
|
"name": "",
|
|
|
"phonenumber": "",
|
|
|
"company": "",
|
|
|
@@ -119,9 +162,16 @@ export default {
|
|
|
"birthday": "",
|
|
|
"homeaddress": "",
|
|
|
"remarks": "",
|
|
|
- "tag": []
|
|
|
+ "tag": [],
|
|
|
+ "areaCode":'',
|
|
|
+ "telephone":''
|
|
|
},
|
|
|
- tags:[]
|
|
|
+ tags:[],
|
|
|
+ rules:{
|
|
|
+ telephone:[
|
|
|
+ { required: true, validator: telephone, trigger: 'change' }
|
|
|
+ ],
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
@@ -131,13 +181,22 @@ export default {
|
|
|
},
|
|
|
methods:{
|
|
|
onShow () {
|
|
|
+ console.log(this.data.data,'data')
|
|
|
this.form = Object.assign({},this.form,this.data.data)
|
|
|
+ console.log(this.form,'form')
|
|
|
+ this.form.areaCode = this.data.data.telephone.substring(0,this.form.telephone.indexOf('-'))
|
|
|
+ this.form.telephone = this.data.data.telephone.substring(this.form.areaCode.length+1)
|
|
|
+ console.log(this.form.areaCode)
|
|
|
+ console.log(this.form.telephone)
|
|
|
},
|
|
|
addGroup () {
|
|
|
this.$refs['form'].validate(async (valid) => {
|
|
|
if (!valid) return false;
|
|
|
this.tags = this.form.tag
|
|
|
this.form.tag = []
|
|
|
+ if (this.form.isTelephone == '1'){
|
|
|
+ this.form.phonenumber = this.form.areaCode + "-" + this.form.telephone
|
|
|
+ }
|
|
|
const res = await this.$api.requested({
|
|
|
"id": "20220831164503",
|
|
|
"version":1,
|