客户管理菜单完成及账号管理猜的的初始化,添加上传图片组件的disabled属性

This commit is contained in:
熊丽君
2021-07-28 18:02:06 +08:00
parent 309d6e7a09
commit 89da762bc2
8 changed files with 762 additions and 7 deletions

67
src/api/customer.js Normal file
View File

@ -0,0 +1,67 @@
import request from '@/utils/request';
// 获取企业列表 deleteStatus = 1代表禁用
export function getCategoryList(params) {
return request({
url: '/companyUser/getCategoryList',
params
});
}
// 禁用/启用企业 isOpen = true代表启用
export function handleCompanyUser(params) {
return request({
url: '/companyUser/handleCompanyUser',
params
});
}
// 删除企业
export function deleteCompanyUser(params) {
return request({
url: '/companyUser/deleteCompanyUser',
params
});
}
// 重置密码
export function resetPw(data) {
return request({
url: '/companyUser/resetPw',
method: 'post',
data
});
}
// 验证手机号是否已经注册
export function checkPhoneExist(params) {
return request({
url: '/companyUser/checkPhoneExist',
params
});
}
// 添加企业
export function addCompanyUser(data) {
return request({
url: '/companyUser/addCompanyUser',
method: 'post',
data
});
}
// 修改企业
export function updateCompanyUser(data) {
return request({
url: '/companyUser/updateCompanyUser',
method: 'post',
data
});
}
// 获取修改企业数据回显
export function getCompanyUserInfo(params) {
return request({
url: '/companyUser/getCompanyUserInfo',
params
});
}
// 获取设置企业画像初始化数据
export function getLabelSetting(params) {
return request({
url: '/companyUser/getLabelSetting',
params
});
}

View File

@ -11,6 +11,7 @@
:on-preview="handlePreview"
:limit="maxCount"
:on-exceed="handleExceed"
:disabled="check"
>
<i class="el-icon-plus"></i>
</el-upload>
@ -31,6 +32,10 @@ export default {
maxCount: {
type: Number,
default: 5
},
check: {
type: Boolean,
default: false
}
},
data() {

View File

@ -10,6 +10,13 @@ const nestedRouter = {
component: resolve => require(['@/views/customer/index'], resolve),
name: '客户管理',
meta: { title: '客户管理' }
},
{
path: 'addCustomer',
component: resolve => require(['@/views/customer/add'], resolve),
name: 'addCustomer',
meta: { title: '企业管理' },
hidden: true
}
]
};

View File

@ -12,7 +12,6 @@ export function formatRichText(url) {
const flag = string.includes('http://');
if (!flag) src2[i].setAttribute('href', url + string);
}
// console.log(document.querySelectorAll('#text .ql-editor a'));
// var imgReg = /<img.*?(?:>|\/>)/gi;
// var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
// var arr = html.match(imgReg);

View File

@ -1,5 +1,119 @@
<template>
<div>
account
<div class="app-container">
<el-table style="width: 100%" :data="unscrambleList">
<el-table-column
label="序号"
align="center"
type="index"
></el-table-column>
<el-table-column
label="登录手机号"
align="center"
prop="username"
></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button @click="handlePage(scope.row.id)" type="text" size="small"
>查看</el-button
>
<el-button
@click="handleStatus(scope.row.id, false)"
type="text"
size="small"
v-if="scope.row.deleteStatus != 1"
>禁用</el-button
>
<el-button
@click="handleStatus(scope.row.id, true)"
type="text"
size="small"
v-else
>启用</el-button
>
<el-button
@click="handleDelete(scope.row.id)"
type="text"
size="small"
>升级</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {
getCategoryList,
handleCompanyUser,
deleteCompanyUser,
resetPw
} from '@/api/customer';
export default {
data() {
return {
unscrambleList: [],
optionList1: [
{
value: '1',
label: '地级市'
},
{
value: '2',
label: '合肥区县'
}
]
};
},
methods: {
getList() {
getCategoryList(this.queryParams).then(({ data }) => {
this.unscrambleList = data.list;
});
},
handleStatus(companyId, isOpen) {
handleCompanyUser({ companyId, isOpen }).then(({ message }) => {
this.msgSuccess(message);
this.getList();
});
},
// 跳转页面
handlePage(id) {
this.$router.push({ path: '/addCustomer', query: { id, check: true } });
},
/** 删除按钮操作 */
handleDelete(companyId) {
this.$confirm('确认升级该数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(function() {
return deleteCompanyUser({ companyId });
})
.then(() => {
this.getList();
this.msgSuccess('升级成功');
});
},
// 重置密码
resetPwd(userId) {
// resetPw
this.$prompt('请输入新密码', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
// inputErrorMessage: '邮箱格式不正确'
})
.then(({ value }) => {
resetPw({ userId, password: value }).then(({ data }) => {
this.msgSuccess(data);
});
})
.catch(() => {});
}
},
created() {
this.getList();
}
};
</script>

387
src/views/customer/add.vue Normal file
View File

@ -0,0 +1,387 @@
<template>
<div class="app-container">
<div>{{ editPage ? '修改' : '添加' }}企业</div>
<el-form
style="width:40%;margin:15px 0 0 15px"
label-position="left"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item label="企业全称" prop="companyName">
<el-input
placeholder="请输入"
v-model="ruleForm.companyName"
:disabled="check"
></el-input>
</el-form-item>
<el-form-item label="企业行业">
<el-input
placeholder="请输入"
v-model="ruleForm.companyType"
:disabled="check"
></el-input>
</el-form-item>
<el-form-item label="用户姓名">
<el-input
placeholder="请输入"
v-model="ruleForm.nickName"
:disabled="check"
></el-input>
</el-form-item>
<el-form-item label="用户职业">
<el-input
placeholder="请输入"
v-model="ruleForm.note"
:disabled="check"
></el-input>
</el-form-item>
<el-form-item label="企业地址" required>
<el-col :span="10">
<el-form-item prop="addressType">
<el-select
v-model="ruleForm.addressType"
placeholder="请选择"
@change="handleCity"
:disabled="check"
>
<el-option
v-for="item in optionList1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item prop="cityId">
<el-select
v-model="ruleForm.cityId"
placeholder="请选择"
:disabled="check"
>
<el-option
v-for="item in optionList2"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="详细地址">
<el-input
placeholder="请输入"
v-model="ruleForm.address"
:disabled="check"
></el-input>
</el-form-item>
<el-form-item label="登录手机号" prop="username">
<el-input
placeholder="请输入"
v-model="ruleForm.username"
:disabled="check"
></el-input>
</el-form-item>
<el-form-item label="登录密码" prop="password" v-if="!editPage">
<el-input
placeholder="请输入"
v-model="ruleForm.password"
show-password
></el-input>
</el-form-item>
<el-form-item label="企业画像" prop="labelIdList">
<el-button size="small" @click="open" v-if="!check">设置</el-button>
<el-tag v-else>1</el-tag>
</el-form-item>
<el-form-item label="头像" prop="icon">
<multi-upload
v-model="selectProductPics"
:maxCount="1"
:check="check"
></multi-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')" v-if="!check"
>确定</el-button
>
</el-form-item>
</el-form>
<el-dialog title="企业画像设置" :visible.sync="dialogVisible" width="20%">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item
:label="item.name"
v-for="(item, index) in labelList"
:key="item.id"
>
<el-select v-model="arr[index]" placeholder="请选择" clearable>
<el-option
v-for="i in item.labelList"
:key="i.id"
:label="i.name"
:value="i.id"
/>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="setIds"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getDictListByStatus } from '@/api/technology/demand';
import {
checkPhoneExist,
addCompanyUser,
updateCompanyUser,
getCompanyUserInfo,
getLabelSetting as getOptions
} from '@/api/customer';
import { getLabelSetting } from '@/api/policy/library';
import MultiUpload from '@/components/Upload/multiUpload';
export default {
components: {
MultiUpload
},
data() {
var validatorPhone = function(rule, value, callback) {
if (value === '') {
callback(new Error('手机号不能为空'));
} else if (!/^1\d{10}$/.test(value)) {
callback(new Error('手机号格式错误'));
} else {
callback();
// verifyPhoneNumber(value, function(data) {
// callback(data.state ? data.text : new Error(data.text));
// });
}
};
// var verifyPhoneNumber = function(value, callback) {
// checkPhoneExist({ phone: value }).then(({ data }) => {
// if (data !== 200) {
// callback({
// state: false,
// text: '该手机号已被注册'
// });
// }
// });
// };
return {
editPage: false,
check: false,
ruleForm: {
companyName: '',
companyType: '',
nickName: '',
note: '',
addressType: '',
cityId: '',
address: '',
username: '',
password: '',
labelIdList: '', // 企业画像
icon: ''
},
optionList1: [
{
value: 1,
label: '地级市'
},
{
value: 2,
label: '合肥区县'
}
],
optionList2: [],
dialogVisible: false,
form: {},
labelList: [],
arr: [],
rules: {
companyName: [{ required: true, message: '请输入', trigger: 'blur' }],
addressType: [{ required: true, message: '请选择', trigger: 'change' }],
cityId: [{ required: true, message: '请选择', trigger: 'change' }],
maturityId: [{ required: true, message: '请选择', trigger: 'change' }],
// username: [{ required: true, message: '请填写', trigger: 'blur' }],
username: [
{ required: true, validator: validatorPhone, trigger: 'blur' }
],
password: [{ required: true, message: '请填写', trigger: 'blur' }],
text: [{ required: true, message: '请填写内容', trigger: 'blur' }],
labelIdList: [
{ required: true, message: '请选择至少一项', trigger: 'blur' }
],
icon: [{ required: true, message: '请上传', trigger: 'blur' }]
}
};
},
computed: {
//主图和画册图片
selectProductPics: {
get: function() {
let pics = [];
if (
this.ruleForm.icon === undefined ||
this.ruleForm.icon == null ||
this.ruleForm.icon === ''
) {
return pics;
}
pics.push(this.ruleForm.icon);
if (
this.ruleForm.albumPics === undefined ||
this.ruleForm.albumPics == null ||
this.ruleForm.albumPics === ''
) {
return pics;
}
let albumPics = this.ruleForm.albumPics.split(',');
for (let i = 0; i < albumPics.length; i++) {
pics.push(albumPics[i]);
}
return pics;
},
set: function(newValue) {
if (newValue == null || newValue.length === 0) {
this.ruleForm.icon = null;
this.ruleForm.albumPics = null;
} else {
this.ruleForm.icon = newValue[0];
this.ruleForm.albumPics = '';
if (newValue.length > 1) {
for (let i = 1; i < newValue.length; i++) {
this.ruleForm.albumPics += newValue[i];
if (i !== newValue.length - 1) {
this.ruleForm.albumPics += ',';
}
}
}
}
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
if (this.editPage) {
// 修改
checkPhoneExist({
phone: this.ruleForm.username,
userId: this.ruleForm.userId
}).then(({ data }) => {
if (data === 500) return this.msgError('该手机号已被注册');
updateCompanyUser(this.ruleForm).then(({ message }) => {
this.msgSuccess(message);
this.$router.go(-1);
});
});
} else {
// 添加
checkPhoneExist({ phone: this.ruleForm.username }).then(
({ data }) => {
if (data === 500) return this.msgError('该手机号已被注册');
addCompanyUser(this.ruleForm).then(({ message }) => {
this.msgSuccess(message);
this.$router.go(-1);
});
}
);
}
} else {
console.log('error submit!!');
return false;
}
});
},
// 地级市切换
handleCity(e) {
this.ruleForm.cityId = '';
// 地级市
if (e === 1) {
this.getType(false);
} else {
this.getCity(false);
}
},
// 获取地级市
getType(edit, info) {
getDictListByStatus({ type: 5 }).then(({ data }) => {
this.optionList2 = data;
console.log(info);
if (edit) this.ruleForm = info;
});
},
// 获取地级市
getCity(edit, info) {
getDictListByStatus({ type: 6 }).then(({ data }) => {
this.optionList2 = data;
console.log(info);
if (edit) this.ruleForm = info;
});
},
open() {
this.dialogVisible = true;
},
setIds() {
this.ruleForm.labelIdList = this.arr.filter(item => item);
this.dialogVisible = false;
}
},
created() {
let { id } = this.$route.query;
let { check } = this.$route.query;
check = Boolean(check);
if (check) this.check = check;
if (id) {
this.editPage = true;
getOptions({ companyId: id }).then(({ data }) => {
this.labelList = data;
this.arr = data.map(item =>
item.labelList
? item.labelList.filter(v => v.isHas)[0]
? item.labelList.filter(v => v.isHas)[0].id
: ''
: undefined
);
getCompanyUserInfo({ companyId: id }).then(({ data }) => {
data.addressType = data.addressType - 0;
console.log(this.arr);
data.labelIdList = this.arr.filter(item => item);
console.log(data);
if (data.addressType == 1) {
this.getType(true, data);
} else {
this.getCity(true, data);
}
});
});
} else {
getLabelSetting({
policyId: 1,
pageNum: 1,
pageSize: 100
}).then(({ data }) => {
this.labelList = data.list.slice(1);
this.arr = data.list.map(item =>
item.labelList
? item.labelList.filter(v => v.isHas)[0]
? item.labelList.filter(v => v.isHas)[0].id
: ''
: undefined
);
});
}
}
};
</script>

View File

@ -1,5 +1,183 @@
<template>
<div>
客户管理
<div class="app-container">
<el-card shadow="never">
<div>
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<div style="float:right">
<el-button type="primary" @click="handleSearchList" size="small">
查询
</el-button>
</div>
</div>
<div style="margin-top: 15px">
<el-form
size="small"
:model="queryParams"
ref="queryForm"
:inline="true"
@submit.native.prevent
>
<el-form-item label="企业名称">
<el-input v-model="queryParams.companyName" placeholder="请输入" />
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<el-button class="btn-add" @click="handlePage(null)" size="mini">
添加企业
</el-button>
</el-card>
<el-table
style="width: 100%"
class="table-container"
:data="unscrambleList"
>
<el-table-column
label="序号"
align="center"
type="index"
></el-table-column>
<el-table-column label="企业全称" prop="companyName" align="center">
<template slot-scope="scope">
<el-link type="primary" :underline="false">{{
scope.row.companyName
}}</el-link>
</template>
</el-table-column>
<el-table-column label="企业地址" align="center" prop="cityType">
<template slot-scope="scope">
{{
optionList1.filter(item => item.value == scope.row.addressType)[0]
.label
}}{{ scope.row.cityName }}
</template>
</el-table-column>
<el-table-column
label="登录手机号"
align="center"
prop="username"
></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button @click="handlePage(scope.row.id)" type="text" size="small"
>编辑</el-button
>
<el-button
@click="handleStatus(scope.row.id, false)"
type="text"
size="small"
v-if="scope.row.deleteStatus != 1"
>禁用</el-button
>
<el-button
@click="handleStatus(scope.row.id, true)"
type="text"
size="small"
v-else
>启用</el-button
>
<el-button
@click="handleDelete(scope.row.id)"
type="text"
size="small"
>删除</el-button
>
<el-button
@click="resetPwd(scope.row.userId)"
type="text"
size="small"
>重置密码</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {
getCategoryList,
handleCompanyUser,
deleteCompanyUser,
resetPw
} from '@/api/customer';
export default {
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 100
},
unscrambleList: [],
optionList1: [
{
value: '1',
label: '地级市'
},
{
value: '2',
label: '合肥区县'
}
]
};
},
methods: {
handleSearchList() {
this.queryParams.pageNum = 1;
this.getList();
},
getList() {
getCategoryList(this.queryParams).then(({ data }) => {
this.unscrambleList = data.list;
});
},
handleStatus(companyId, isOpen) {
handleCompanyUser({ companyId, isOpen }).then(({ message }) => {
this.msgSuccess(message);
this.getList();
});
},
// 跳转页面
handlePage(id) {
this.$router.push({ path: '/addCustomer', query: { id } });
},
/** 删除按钮操作 */
handleDelete(companyId) {
this.$confirm('确认删除该数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(function() {
return deleteCompanyUser({ companyId });
})
.then(() => {
this.getList();
this.msgSuccess('删除成功');
});
},
// 重置密码
resetPwd(userId) {
// resetPw
this.$prompt('请输入新密码', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
// inputErrorMessage: '邮箱格式不正确'
})
.then(({ value }) => {
resetPw({ userId, password: value }).then(({ data }) => {
this.msgSuccess(data);
});
})
.catch(() => {});
}
},
created() {
this.getList();
}
};
</script>

View File

@ -80,8 +80,6 @@ export default {
// }
// };
return {
aaa: '',
bbb: '',
editPage: false,
ruleForm: {
title: '',