|
|
@@ -1,416 +1,509 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <Form :model="formData" :label-width="76">
|
|
|
- <div class="section">
|
|
|
- <div class="section-hd">基本信息</div>
|
|
|
- <div class="section-bd">
|
|
|
- <FormItem label="用户编号：">
|
|
|
- <Input v-model="formData.uid" disabled></Input>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="真实姓名：">
|
|
|
- <Input v-model="formData.real_name" placeholder="请输入"></Input>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="手机号码：">
|
|
|
- <Input v-model="formData.phone" placeholder="请输入"></Input>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="生日：">
|
|
|
- <DatePicker :value="formData.birthday" @on-change="dateChange"></DatePicker>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="性别：">
|
|
|
- <Select v-model="formData.sex">
|
|
|
- <Option :value="0">保密</Option>
|
|
|
- <Option :value="1">男</Option>
|
|
|
- <Option :value="2">女</Option>
|
|
|
- </Select>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="省市区：">
|
|
|
- <Cascader v-model="addressSelect" :data="addresData" :load-data="loadData" @on-change="addchack"></Cascader>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="身份证号：">
|
|
|
- <Input v-model="formData.card_id" placeholder="请输入"></Input>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="详细地址：">
|
|
|
- <Input v-model="formData.addres" placeholder="请输入"></Input>
|
|
|
- </FormItem>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="section">
|
|
|
- <div class="section-hd">密码设置</div>
|
|
|
- <div class="section-bd">
|
|
|
- <FormItem label="登录密码：">
|
|
|
- <Input v-model="formData.pwd" type="password" password placeholder="请输入"></Input>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="确认密码：">
|
|
|
- <Input v-model="formData.true_pwd" type="password" password placeholder="请输入"></Input>
|
|
|
- </FormItem>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="section">
|
|
|
- <div class="section-hd">用户设置</div>
|
|
|
- <div class="section-bd">
|
|
|
- <FormItem label="推广资格：">
|
|
|
- <i-switch v-model="formData.spread_open" :true-value="1" :false-value="0" size="large">
|
|
|
- <span slot="open">启用</span>
|
|
|
- <span slot="close">禁用</span>
|
|
|
- </i-switch>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="用户状态：">
|
|
|
- <i-switch v-model="formData.status" :true-value="1" :false-value="0" size="large">
|
|
|
- <span slot="open">开启</span>
|
|
|
- <span slot="close">锁定</span>
|
|
|
- </i-switch>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="用户标签：">
|
|
|
- <div class="flex-add">
|
|
|
- <div class="labelInput acea-row row-between-wrapper" @click="openLabel">
|
|
|
- <div class="width-add">
|
|
|
- <div v-if="dataLabel.length">
|
|
|
- <Tag closable v-for="(item,index) in dataLabel" @on-close="closeLabel(item)">{{item.label_name}}</Tag>
|
|
|
- </div>
|
|
|
- <span class="span" v-else>选择用户关联标签</span>
|
|
|
- </div>
|
|
|
- <div class="iconfont iconxiayi"></div>
|
|
|
- </div>
|
|
|
- <Button type="text" @click="add(1)">添加标签</Button>
|
|
|
- </div>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="用户分组：">
|
|
|
- <div class="flex-add">
|
|
|
- <Select v-model="formData.group_id" placeholder="请选择" :transfer="true">
|
|
|
- <Option v-for="item in groupList" :key="item.id" :value="item.id">{{ item.group_name }}</Option>
|
|
|
- </Select>
|
|
|
- <Button type="text" @click="add(2)">添加分组</Button>
|
|
|
- </div>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="用户等级：">
|
|
|
- <Select v-model="formData.level">
|
|
|
- <Option v-for="item in levelOptions" :key="item.id" :value="item.id">{{ item.name }}</Option>
|
|
|
- </Select>
|
|
|
- </FormItem>
|
|
|
- <FormItem label="推广人：">
|
|
|
- <Input v-model="formData.spread_uid_nickname" @on-clear="clearSpread" clearable placeholder="请选择" icon="ios-arrow-down" @on-focus="editSpread"></Input>
|
|
|
- </FormItem>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Form>
|
|
|
- <Modal
|
|
|
- v-model="customerShow"
|
|
|
- scrollable
|
|
|
- title="请选择商城用户"
|
|
|
- :closable="false"
|
|
|
- width="900"
|
|
|
- >
|
|
|
- <customerInfo v-if="customerShow" @imageObject="imageObject"></customerInfo>
|
|
|
- </Modal>
|
|
|
- <!-- 用户标签 -->
|
|
|
- <Modal
|
|
|
- v-model="labelShow"
|
|
|
- scrollable
|
|
|
- title="选择用户标签"
|
|
|
- :closable="true"
|
|
|
- width="540"
|
|
|
- :footer-hide="true"
|
|
|
- :mask-closable="false"
|
|
|
- >
|
|
|
- <userLabel ref="userLabel" @activeData="activeData" @close="labelClose"></userLabel>
|
|
|
- </Modal>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <Form :model="formData" :label-width="76">
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-hd">基本信息</div>
|
|
|
+ <div class="section-bd">
|
|
|
+ <FormItem label="用户编号：">
|
|
|
+ <Input v-model="formData.uid" disabled></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="真实姓名：">
|
|
|
+ <Input v-model="formData.real_name" placeholder="请输入"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="手机号码：">
|
|
|
+ <Input v-model="formData.phone" placeholder="请输入"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="生日：">
|
|
|
+ <DatePicker :value="formData.birthday" @on-change="dateChange"></DatePicker>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="性别：">
|
|
|
+ <Select v-model="formData.sex">
|
|
|
+ <Option :value="0">保密</Option>
|
|
|
+ <Option :value="1">男</Option>
|
|
|
+ <Option :value="2">女</Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="省市区：">
|
|
|
+ <Cascader v-model="addressSelect" :data="addresData" :load-data="loadData2"
|
|
|
+ @on-change="addchack"></Cascader>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="身份证号：">
|
|
|
+ <Input v-model="formData.card_id" placeholder="请输入"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="详细地址：">
|
|
|
+ <Input v-model="formData.addres" placeholder="请输入"></Input>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-hd">密码设置</div>
|
|
|
+ <div class="section-bd">
|
|
|
+ <FormItem label="登录密码：">
|
|
|
+ <Input v-model="formData.pwd" type="password" password placeholder="请输入"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="确认密码：">
|
|
|
+ <Input v-model="formData.true_pwd" type="password" password placeholder="请输入"></Input>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-hd">用户设置</div>
|
|
|
+ <div class="section-bd">
|
|
|
+ <FormItem label="推广资格：">
|
|
|
+ <i-switch v-model="formData.spread_open" :true-value="1" :false-value="0" size="large">
|
|
|
+ <span slot="open">启用</span>
|
|
|
+ <span slot="close">禁用</span>
|
|
|
+ </i-switch>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="用户状态：">
|
|
|
+ <i-switch v-model="formData.status" :true-value="1" :false-value="0" size="large">
|
|
|
+ <span slot="open">开启</span>
|
|
|
+ <span slot="close">锁定</span>
|
|
|
+ </i-switch>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="用户标签：">
|
|
|
+ <div class="flex-add">
|
|
|
+ <div class="labelInput acea-row row-between-wrapper" @click="openLabel">
|
|
|
+ <div class="width-add">
|
|
|
+ <div v-if="dataLabel.length">
|
|
|
+ <Tag closable v-for="(item,index) in dataLabel" @on-close="closeLabel(item)">
|
|
|
+ {{item.label_name}}</Tag>
|
|
|
+ </div>
|
|
|
+ <span class="span" v-else>选择用户关联标签</span>
|
|
|
+ </div>
|
|
|
+ <div class="iconfont iconxiayi"></div>
|
|
|
+ </div>
|
|
|
+ <Button type="text" @click="add(1)">添加标签</Button>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="用户分组：">
|
|
|
+ <div class="flex-add">
|
|
|
+ <Select v-model="formData.group_id" placeholder="请选择" :transfer="true">
|
|
|
+ <Option v-for="item in groupList" :key="item.id" :value="item.id">{{ item.group_name }}
|
|
|
+ </Option>
|
|
|
+ </Select>
|
|
|
+ <Button type="text" @click="add(2)">添加分组</Button>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="用户等级：">
|
|
|
+ <Select v-model="formData.level">
|
|
|
+ <Option v-for="item in levelOptions" :key="item.id" :value="item.id">{{ item.name }}
|
|
|
+ </Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="推广人：">
|
|
|
+ <Input v-model="formData.spread_uid_nickname" @on-clear="clearSpread" clearable
|
|
|
+ placeholder="请选择" icon="ios-arrow-down" @on-focus="editSpread"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="运营中心：">
|
|
|
+ <Select v-model="formData.area_admin" @on-change='changearea'>
|
|
|
+ <Option :value="0">无</Option>
|
|
|
+ <Option :value="3">省</Option>
|
|
|
+ <Option :value="2">市</Option>
|
|
|
+ <Option :value="1">区</Option>
|
|
|
+ </Select>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="管理区域：">
|
|
|
+ <Cascader v-model="addressSelectDl" :data="addresData2" :load-data="loadData2"
|
|
|
+ @on-change="addchack2"></Cascader>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Form>
|
|
|
+ <Modal v-model="customerShow" scrollable title="请选择商城用户" :closable="false" width="900">
|
|
|
+ <customerInfo v-if="customerShow" @imageObject="imageObject"></customerInfo>
|
|
|
+ </Modal>
|
|
|
+ <!-- 用户标签 -->
|
|
|
+ <Modal v-model="labelShow" scrollable title="选择用户标签" :closable="true" width="540" :footer-hide="true"
|
|
|
+ :mask-closable="false">
|
|
|
+ <userLabel ref="userLabel" @activeData="activeData" @close="labelClose"></userLabel>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { userLabelAddApi, groupAddApi, levelListApi, userGroupApi, userLabelApi, putUserApi } from '@/api/user';
|
|
|
-import { cityApi } from '@/api/store';
|
|
|
-import customerInfo from "@/components/customerInfo";
|
|
|
-import userLabel from "@/components/labelList";
|
|
|
+ import {
|
|
|
+ userLabelAddApi,
|
|
|
+ groupAddApi,
|
|
|
+ levelListApi,
|
|
|
+ userGroupApi,
|
|
|
+ userLabelApi,
|
|
|
+ putUserApi
|
|
|
+ } from '@/api/user';
|
|
|
+ import {
|
|
|
+ cityApi
|
|
|
+ } from '@/api/store';
|
|
|
+ import customerInfo from "@/components/customerInfo";
|
|
|
+ import userLabel from "@/components/labelList";
|
|
|
|
|
|
-export default {
|
|
|
- name: 'userForm',
|
|
|
+ export default {
|
|
|
+ name: 'userForm',
|
|
|
components: {
|
|
|
- customerInfo,
|
|
|
+ customerInfo,
|
|
|
userLabel
|
|
|
},
|
|
|
- props: {
|
|
|
- psInfo: Object
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- labelShow:false,
|
|
|
- customerShow: false,
|
|
|
- formData: {
|
|
|
- uid: this.psInfo.uid,
|
|
|
- real_name: this.psInfo.real_name,
|
|
|
- phone: this.psInfo.phone,
|
|
|
- birthday: this.psInfo.birthday,
|
|
|
- sex: this.psInfo.sex,
|
|
|
- card_id: this.psInfo.card_id,
|
|
|
- addres: this.psInfo.addres,
|
|
|
- pwd: '',
|
|
|
- true_pwd: '',
|
|
|
- spread_open: this.psInfo.spread_open,
|
|
|
- status: this.psInfo.status,
|
|
|
- group_id: 0,
|
|
|
- label_id: [],
|
|
|
- level: this.psInfo.level,
|
|
|
- provincials: '',
|
|
|
- province: 0,
|
|
|
- city: 0,
|
|
|
- area: 0,
|
|
|
- street: 0,
|
|
|
- spread_uid: 0,
|
|
|
- spread_uid_nickname:''
|
|
|
- },
|
|
|
- dataLabel: [],
|
|
|
- addressSelect: [],
|
|
|
- levelOptions: [],
|
|
|
- labelOptions: [],
|
|
|
- addresData: [],
|
|
|
- groupList: []
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- psInfo: {
|
|
|
- handler(value) {
|
|
|
- this.formData.uid = value.uid;
|
|
|
- this.formData.real_name = value.real_name;
|
|
|
- this.formData.phone = value.phone;
|
|
|
- this.formData.birthday = value.birthday;
|
|
|
- this.formData.sex = value.sex;
|
|
|
- this.formData.card_id = value.card_id;
|
|
|
- this.formData.addres = value.addres;
|
|
|
- this.formData.spread_open = value.spread_open;
|
|
|
- this.formData.status = value.status;
|
|
|
- this.dataLabel = value.label_id;
|
|
|
- this.formData.level = value.level;
|
|
|
- this.formData.provincials = value.provincials;
|
|
|
- this.formData.province = value.province;
|
|
|
- this.formData.city = value.city;
|
|
|
- this.formData.area = value.area;
|
|
|
- this.formData.street = value.street;
|
|
|
- this.formData.spread_uid_nickname = value.spread_uid_nickname;
|
|
|
- this.formData.spread_uid = value.spread_uid;
|
|
|
- this.formData.group_id = value.group_id;
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- created () {
|
|
|
- this.levelList();
|
|
|
- this.groupLists();
|
|
|
- this.labelList();
|
|
|
- this.cityInfo({ pid: 0 });
|
|
|
- if (this.psInfo.province) {
|
|
|
- this.addressSelect.push(this.psInfo.province);
|
|
|
- }
|
|
|
- if (this.psInfo.city) {
|
|
|
- this.addressSelect.push(this.psInfo.city);
|
|
|
- }
|
|
|
- if (this.psInfo.area) {
|
|
|
- this.addressSelect.push(this.psInfo.area);
|
|
|
- }
|
|
|
- if (this.psInfo.street) {
|
|
|
- this.addressSelect.push(this.psInfo.street);
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- clearSpread(){
|
|
|
- this.formData.spread_uid = 0;
|
|
|
- this.formData.spread_uid_nickname = '';
|
|
|
- },
|
|
|
- closeLabel(label){
|
|
|
- let index = this.dataLabel.indexOf(this.dataLabel.filter(d=>d.id == label.id)[0]);
|
|
|
- this.dataLabel.splice(index,1);
|
|
|
- },
|
|
|
- activeData(dataLabel){
|
|
|
- this.labelShow = false;
|
|
|
- this.dataLabel = dataLabel;
|
|
|
- },
|
|
|
- openLabel() {
|
|
|
- this.labelShow = true;
|
|
|
- this.$refs.userLabel.userLabel(JSON.parse(JSON.stringify(this.dataLabel)));
|
|
|
- },
|
|
|
- // 标签弹窗关闭
|
|
|
- labelClose() {
|
|
|
- this.labelShow = false;
|
|
|
- },
|
|
|
- editSpread(){
|
|
|
- this.customerShow = true;
|
|
|
+ props: {
|
|
|
+ psInfo: Object
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ labelShow: false,
|
|
|
+ customerShow: false,
|
|
|
+ formData: {
|
|
|
+ uid: this.psInfo.uid,
|
|
|
+ real_name: this.psInfo.real_name,
|
|
|
+ phone: this.psInfo.phone,
|
|
|
+ birthday: this.psInfo.birthday,
|
|
|
+ sex: this.psInfo.sex,
|
|
|
+ card_id: this.psInfo.card_id,
|
|
|
+ addres: this.psInfo.addres,
|
|
|
+ pwd: '',
|
|
|
+ true_pwd: '',
|
|
|
+ spread_open: this.psInfo.spread_open,
|
|
|
+ status: this.psInfo.status,
|
|
|
+ group_id: 0,
|
|
|
+ label_id: [],
|
|
|
+ level: this.psInfo.level,
|
|
|
+ provincials: '',
|
|
|
+ province: 0,
|
|
|
+ city: 0,
|
|
|
+ area: 0,
|
|
|
+ street: 0,
|
|
|
+ spread_uid: 0,
|
|
|
+ spread_uid_nickname: '',
|
|
|
+ area_admin:"0",
|
|
|
+ area_admin_province:'',
|
|
|
+ area_admin_city:'',
|
|
|
+ area_admin_district:'',
|
|
|
},
|
|
|
- imageObject(e) {
|
|
|
- this.customerShow = false;
|
|
|
- this.formData.spread_uid = e.uid;
|
|
|
- this.formData.spread_uid_nickname = e.name
|
|
|
+ dataLabel: [],
|
|
|
+ //省市区
|
|
|
+ addressSelect: [],
|
|
|
+ // 代理区域
|
|
|
+ addressSelectDl: [],
|
|
|
+ levelOptions: [],
|
|
|
+ labelOptions: [],
|
|
|
+ // 基础地址信息
|
|
|
+ addresData: [],
|
|
|
+ // 三级地质系
|
|
|
+ addresData2: [],
|
|
|
+ groupList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ psInfo: {
|
|
|
+ handler(value) {
|
|
|
+ this.formData.uid = value.uid;
|
|
|
+ this.formData.real_name = value.real_name;
|
|
|
+ this.formData.phone = value.phone;
|
|
|
+ this.formData.birthday = value.birthday;
|
|
|
+ this.formData.sex = value.sex;
|
|
|
+ this.formData.card_id = value.card_id;
|
|
|
+ this.formData.addres = value.addres;
|
|
|
+ this.formData.spread_open = value.spread_open;
|
|
|
+ this.formData.status = value.status;
|
|
|
+ this.dataLabel = value.label_id;
|
|
|
+ this.formData.level = value.level;
|
|
|
+ this.formData.provincials = value.provincials;
|
|
|
+ this.formData.province = value.province;
|
|
|
+ this.formData.city = value.city;
|
|
|
+ this.formData.area = value.area;
|
|
|
+ this.formData.street = value.street;
|
|
|
+ this.formData.spread_uid_nickname = value.spread_uid_nickname;
|
|
|
+ this.formData.spread_uid = value.spread_uid;
|
|
|
+ this.formData.group_id = value.group_id;
|
|
|
+ this.formData.area_admin = value.area_admin;
|
|
|
+ this.formData.area_admin_province = value.area_admin_province;
|
|
|
+ this.formData.area_admin_city = value.area_admin_city;
|
|
|
+ this.formData.area_admin_district = value.area_admin_district;
|
|
|
},
|
|
|
- changeMenu (value) {
|
|
|
- this.$emit('change-menu', value);
|
|
|
- },
|
|
|
- // 添加标签、分组
|
|
|
- add (value) {
|
|
|
- switch (value) {
|
|
|
- case 1:
|
|
|
- this.$modalForm(userLabelAddApi(0)).then(() => {});
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- this.$modalForm(groupAddApi(0)).then(() => {
|
|
|
- this.groupLists();
|
|
|
- });
|
|
|
- break;
|
|
|
- }
|
|
|
- },
|
|
|
- // 会员等级列表
|
|
|
- levelList() {
|
|
|
- let data = {
|
|
|
- page: 1,
|
|
|
- limit: "",
|
|
|
- title: "",
|
|
|
- is_show: 1,
|
|
|
- };
|
|
|
- levelListApi(data).then((res) => {
|
|
|
- this.levelOptions = res.data.list;
|
|
|
- });
|
|
|
- },
|
|
|
- groupLists() {
|
|
|
- let data = {
|
|
|
- page: 1,
|
|
|
- limit: "",
|
|
|
- };
|
|
|
- userGroupApi(data).then((res) => {
|
|
|
- this.groupList = res.data.list;
|
|
|
- });
|
|
|
- },
|
|
|
- labelList() {
|
|
|
- let data = {
|
|
|
- page: 1,
|
|
|
- limit: "",
|
|
|
- };
|
|
|
- userLabelApi(data)
|
|
|
- .then(async (res) => {
|
|
|
- let data = res.data;
|
|
|
- this.labelOptions = data.list;
|
|
|
- })
|
|
|
- .catch((res) => {
|
|
|
- this.loading = false;
|
|
|
- this.$Message.error(res.msg);
|
|
|
- });
|
|
|
- },
|
|
|
- // 省市区数据
|
|
|
- cityInfo(data){
|
|
|
- cityApi(data).then(res=>{
|
|
|
- this.addresData = res.data
|
|
|
- })
|
|
|
- },
|
|
|
- loadData(item, callback) {
|
|
|
- item.loading = true;
|
|
|
- cityApi({pid:item.value}).then(res=>{
|
|
|
- item.children = res.data;
|
|
|
- item.loading = false;
|
|
|
- callback();
|
|
|
- });
|
|
|
- },
|
|
|
- addchack(e,selectedData){
|
|
|
- e.forEach((i,index)=>{
|
|
|
- if(index==0){
|
|
|
- this.formData.province = i
|
|
|
- }else if(index==1){
|
|
|
- this.formData.city = i
|
|
|
- }else if(index==2){
|
|
|
- this.formData.area = i
|
|
|
- }else {
|
|
|
- this.formData.street = i
|
|
|
- }
|
|
|
- })
|
|
|
- this.formData.provincials = (selectedData.map(o => o.label)).join("/");
|
|
|
- },
|
|
|
- dateChange (value) {
|
|
|
- this.formData.birthday = value;
|
|
|
- },
|
|
|
- // 保存用户信息
|
|
|
- detailsPut () {
|
|
|
- let activeIds = [];
|
|
|
- this.dataLabel.forEach((item)=>{
|
|
|
- activeIds.push(item.id)
|
|
|
- });
|
|
|
- this.formData.label_id = activeIds
|
|
|
- if (this.formData.phone && !/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.formData.phone)) {
|
|
|
- return this.$Message.error('请填写正确的手机号');
|
|
|
- }
|
|
|
- putUserApi(this.formData).then(res => {
|
|
|
- this.$Message.success('修改成功');
|
|
|
- this.$emit('change-menu', '99');
|
|
|
- }).catch(res => {
|
|
|
- this.$Message.error(res.msg);
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.levelList();
|
|
|
+ this.groupLists();
|
|
|
+ this.labelList();
|
|
|
+ this.cityInfo({
|
|
|
+ pid: 0
|
|
|
+ },'addresData');
|
|
|
+ if(this.psInfo.area_admin){
|
|
|
+ this.changearea(this.psInfo.area_admin.toString(),"init");
|
|
|
+ }
|
|
|
+ if (this.psInfo.province) {
|
|
|
+ this.addressSelect.push(this.psInfo.province);
|
|
|
+ }
|
|
|
+ if (this.psInfo.city) {
|
|
|
+ this.addressSelect.push(this.psInfo.city);
|
|
|
+ }
|
|
|
+ if (this.psInfo.area) {
|
|
|
+ this.addressSelect.push(this.psInfo.area);
|
|
|
+ }
|
|
|
+ console.log(this.addressSelect,'addressSelect')
|
|
|
+ if (this.psInfo.street) {
|
|
|
+ this.addressSelect.push(this.psInfo.street);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择运营中心
|
|
|
+ changearea(e,type='reload'){
|
|
|
+ try{
|
|
|
+ console.log(type);
|
|
|
+ if(type=='reload'){
|
|
|
+ this.addressSelectDl = [];
|
|
|
+ }
|
|
|
+ if(type=='init'){
|
|
|
+ this.addressSelectDl=this.psInfo.area_provincials.split('/').map((re)=>{
|
|
|
+ return +re
|
|
|
+ });
|
|
|
+ }
|
|
|
+ console.log(type);
|
|
|
+ if(e==3){
|
|
|
+ this.cityInfo({pid:0,type:4},"addresData2")
|
|
|
+ }else
|
|
|
+ if(e==2){
|
|
|
+ this.cityInfo({pid:0,type:1},"addresData2")
|
|
|
+ }else
|
|
|
+ if(e==1){
|
|
|
+ this.cityInfo({pid:0,type:2},"addresData2")
|
|
|
+ }
|
|
|
+ }catch(e){
|
|
|
+ console.log(e);
|
|
|
+ //TODO handle the exception
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ clearSpread() {
|
|
|
+ this.formData.spread_uid = 0;
|
|
|
+ this.formData.spread_uid_nickname = '';
|
|
|
+ },
|
|
|
+ closeLabel(label) {
|
|
|
+ let index = this.dataLabel.indexOf(this.dataLabel.filter(d => d.id == label.id)[0]);
|
|
|
+ this.dataLabel.splice(index, 1);
|
|
|
+ },
|
|
|
+ activeData(dataLabel) {
|
|
|
+ this.labelShow = false;
|
|
|
+ this.dataLabel = dataLabel;
|
|
|
+ },
|
|
|
+ openLabel() {
|
|
|
+ this.labelShow = true;
|
|
|
+ this.$refs.userLabel.userLabel(JSON.parse(JSON.stringify(this.dataLabel)));
|
|
|
+ },
|
|
|
+ // 标签弹窗关闭
|
|
|
+ labelClose() {
|
|
|
+ this.labelShow = false;
|
|
|
+ },
|
|
|
+ editSpread() {
|
|
|
+ this.customerShow = true;
|
|
|
+ },
|
|
|
+ imageObject(e) {
|
|
|
+ this.customerShow = false;
|
|
|
+ this.formData.spread_uid = e.uid;
|
|
|
+ this.formData.spread_uid_nickname = e.name
|
|
|
+ },
|
|
|
+ changeMenu(value) {
|
|
|
+ this.$emit('change-menu', value);
|
|
|
+ },
|
|
|
+ // 添加标签、分组
|
|
|
+ add(value) {
|
|
|
+ switch (value) {
|
|
|
+ case 1:
|
|
|
+ this.$modalForm(userLabelAddApi(0)).then(() => {});
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.$modalForm(groupAddApi(0)).then(() => {
|
|
|
+ this.groupLists();
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 会员等级列表
|
|
|
+ levelList() {
|
|
|
+ let data = {
|
|
|
+ page: 1,
|
|
|
+ limit: "",
|
|
|
+ title: "",
|
|
|
+ is_show: 1,
|
|
|
+ };
|
|
|
+ levelListApi(data).then((res) => {
|
|
|
+ this.levelOptions = res.data.list;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ groupLists() {
|
|
|
+ let data = {
|
|
|
+ page: 1,
|
|
|
+ limit: "",
|
|
|
+ };
|
|
|
+ userGroupApi(data).then((res) => {
|
|
|
+ this.groupList = res.data.list;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ labelList() {
|
|
|
+ let data = {
|
|
|
+ page: 1,
|
|
|
+ limit: "",
|
|
|
+ };
|
|
|
+ userLabelApi(data)
|
|
|
+ .then(async (res) => {
|
|
|
+ let data = res.data;
|
|
|
+ this.labelOptions = data.list;
|
|
|
+ })
|
|
|
+ .catch((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ this.$Message.error(res.msg);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 省市区数据
|
|
|
+ cityInfo(data,name) {
|
|
|
+ cityApi(data).then(res => {
|
|
|
+ this[name] = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getCityData(item, callback,type=0){
|
|
|
+ item.loading = true;
|
|
|
+ cityApi({
|
|
|
+ pid: item.value,
|
|
|
+ type
|
|
|
+ }).then(res => {
|
|
|
+ item.children = res.data;
|
|
|
+ item.loading = false;
|
|
|
+ callback();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 省市区选择
|
|
|
+ loadData(item, callback) {
|
|
|
+ this.getCityData(item, callback,0)
|
|
|
+ },
|
|
|
+ // 代理省市区选择
|
|
|
+ loadData2(item, callback) {
|
|
|
+ if(this.formData.area_admin=="2"){
|
|
|
+ this.getCityData(item, callback,1)
|
|
|
+ }else if(this.formData.area_admin=="1"){
|
|
|
+ this.getCityData(item, callback,2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addchack(e, selectedData) {
|
|
|
+ e.forEach((i, index) => {
|
|
|
+ if (index == 0) {
|
|
|
+ this.formData.province = i
|
|
|
+ } else if (index == 1) {
|
|
|
+ this.formData.city = i
|
|
|
+ } else if (index == 2) {
|
|
|
+ this.formData.area = i
|
|
|
+ } else {
|
|
|
+ this.formData.street = i
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.formData.provincials = (selectedData.map(o => o.label)).join("/");
|
|
|
+ },
|
|
|
+ addchack2(e, selectedData) {
|
|
|
+ e.forEach((i, index) => {
|
|
|
+ if (index == 0) {
|
|
|
+ this.formData.area_admin_province = selectedData[index].label
|
|
|
+ } else if (index == 1) {
|
|
|
+ this.formData.area_admin_city = selectedData[index].label
|
|
|
+ } else if (index == 2) {
|
|
|
+ this.formData.area_admin_district = selectedData[index].label
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.formData.area_provincials = (selectedData.map(o => o.id)).join("/");
|
|
|
+ },
|
|
|
+ dateChange(value) {
|
|
|
+ this.formData.birthday = value;
|
|
|
+ },
|
|
|
+ // 保存用户信息
|
|
|
+ detailsPut() {
|
|
|
+ let activeIds = [];
|
|
|
+ this.dataLabel.forEach((item) => {
|
|
|
+ activeIds.push(item.id)
|
|
|
+ });
|
|
|
+ this.formData.label_id = activeIds
|
|
|
+ if (this.formData.phone && !/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.formData.phone)) {
|
|
|
+ return this.$Message.error('请填写正确的手机号');
|
|
|
+ }
|
|
|
+ putUserApi(this.formData).then(res => {
|
|
|
+ this.$Message.success('修改成功');
|
|
|
+ this.$emit('change-menu', '99');
|
|
|
+ }).catch(res => {
|
|
|
+ this.$Message.error(res.msg);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.flex-add {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.width-add {
|
|
|
- width: 90%;
|
|
|
-}
|
|
|
-.section {
|
|
|
- padding: 25px 0 5px;
|
|
|
- border-top: 1px dashed #EEEEEE;
|
|
|
+ .flex-add {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .width-add {
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
|
|
|
- &:first-child {
|
|
|
- border-top: 0;
|
|
|
- }
|
|
|
+ .section {
|
|
|
+ padding: 25px 0 5px;
|
|
|
+ border-top: 1px dashed #EEEEEE;
|
|
|
|
|
|
- &-hd {
|
|
|
- padding-left: 10px;
|
|
|
- border-left: 3px solid #1890FF;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 16px;
|
|
|
- color: #303133;
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ border-top: 0;
|
|
|
+ }
|
|
|
|
|
|
- &-bd {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
+ &-hd {
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 3px solid #1890FF;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
|
|
|
- .ivu-form-item {
|
|
|
- flex: 0 0 50%;
|
|
|
- margin-bottom: 20px;
|
|
|
+ &-bd {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(odd) {
|
|
|
- padding-right: 48px;
|
|
|
- }
|
|
|
+ .ivu-form-item {
|
|
|
+ flex: 0 0 50%;
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
- &:nth-child(even) {
|
|
|
- padding-left: 48px;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:nth-child(odd) {
|
|
|
+ padding-right: 48px;
|
|
|
+ }
|
|
|
|
|
|
- .ivu-date-picker {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ &:nth-child(even) {
|
|
|
+ padding-left: 48px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .ivu-btn-text {
|
|
|
- color: #1890FF;
|
|
|
+ .ivu-date-picker {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- &:focus {
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.labelInput{
|
|
|
- border: 1px solid #dcdee2;
|
|
|
- width: 100%;
|
|
|
- padding: 0 5px;
|
|
|
- border-radius: 5px;
|
|
|
- min-height: 30px;
|
|
|
- cursor: pointer;
|
|
|
- .span{
|
|
|
- color: #c5c8ce;
|
|
|
+ .ivu-btn-text {
|
|
|
+ color: #1890FF;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .iconxiayi{
|
|
|
- font-size: 12px
|
|
|
+
|
|
|
+ .labelInput {
|
|
|
+ border: 1px solid #dcdee2;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ min-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .span {
|
|
|
+ color: #c5c8ce;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconxiayi {
|
|
|
+ font-size: 12px
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|
