You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
spms-vue/src/views/userManage/customerManage.vue

594 lines
23 KiB
Vue

3 years ago
<template>
<div>
<el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
<el-row>
<el-form-item class="query-form-item">
<el-input
3 years ago
style="width: 400px"
v-model="filterQuery.companyName"
3 years ago
placeholder="客户名称"
></el-input>
</el-form-item>
<el-form-item>
<el-button-group>
<el-button
type="primary"
icon="el-icon-refresh"
@click="onReset"
></el-button>
<el-button type="primary" icon="search" @click="onSubmit"
>查询
</el-button
>
</el-button-group>
</el-form-item>
</el-row>
</el-form>
<el-table v-loading="loading" :data="list" style="width: 100%">
3 years ago
<el-table-column label="序号" type="index"></el-table-column>
3 years ago
<el-table-column
label="企业名称"
prop="companyName"
width="230"
></el-table-column>
<el-table-column
label="社会统一信用号"
prop="creditNum"
width="160"
></el-table-column>
<el-table-column label="所属地区" prop="area" width="180">
</el-table-column>
<el-table-column
label="详细地址"
prop="detailAddr"
width="230"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column label="企业类型" prop="bussinessStatus" width="120">
<template slot-scope="scope">
<span>{{ bussinessFlag[scope.row.bussinessStatus] }}</span>
</template>
</el-table-column>
<el-table-column label="客户状态" prop="userFlag" width="120">
<template slot-scope="scope">
<el-tag :type="scope.row.userFlag | statusFilterType">{{
3 years ago
scope.row.userFlag | statusFilterName
3 years ago
}}
</el-tag>
</template>
</el-table-column>
3 years ago
<!-- <el-table-column label="真实姓名" prop="userName" width="120"></el-table-column>-->
<!-- <el-table-column label="手机" prop="employeeName" width="120"></el-table-column>-->
<!-- <el-table-column label="联系电话" prop="tel" width="120"></el-table-column>-->
<!-- <el-table-column label="邮箱" prop="email" width="120"></el-table-column>-->
3 years ago
3 years ago
<!-- <el-table-column label="是否弹窗" prop="isInfoLink" width="120">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ isTip[scope.row.isInfoLink] }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- label="弹窗链接"-->
<!-- prop="infoLink"-->
<!-- width="180"-->
<!-- :show-overflow-tooltip="true"-->
<!-- >-->
<!-- </el-table-column>-->
3 years ago
<el-table-column label="角色" prop="role" width="120"></el-table-column>
3 years ago
<!-- <el-table-column label="打印模板" prop="pdfTemplateName" width="120"></el-table-column>-->
3 years ago
<el-table-column label="最大用户数" prop="userMax" width="120">
</el-table-column>
<el-table-column label="当前用户数" prop="count" width="120">
</el-table-column>
<el-table-column label="操作" width="120" fixed="right">
<template slot-scope="scope">
<el-button-group>
<el-button
type="text"
size="mini"
@click.native.stop="customerkDialog(scope.row)"
>查看用户
</el-button
>
<el-button
type="text"
size="mini"
@click.native.stop="contractDialog(scope.row)"
>查看联系人
</el-button
>
</el-button-group>
</template>
</el-table-column
>
<el-table-column label="操作" fixed="right" width="120">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native.stop="checkDialog(scope.row)"
>编辑
</el-button
>
<el-button
type="text"
size="small"
@click.native.stop="deleteDialog(scope.row)"
>删除
</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog title="客户信息编辑" :visible.sync="formVisible" width="60%">
<el-form :model="formData" ref="dataForm">
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="10" class="el-col" type="flex">
<div class="text item">
<el-form-item label="客户名称" prop="userName">
<el-input
v-model="formData.customerName"
style="width: 60%"
size="small"
:disabled="true"
></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="10" class="el-col">
<div class="text item">
<div class="text item">
<el-form-item label="最大用户数" prop="employeeName">
<el-input
v-model="formData.userMax"
size="small"
style="width: 40%"
type="number"
></el-input>
</el-form-item>
</div>
</div>
</el-col>
</el-row>
3 years ago
<!-- <el-row :gutter="20" class="el-row" type="flex">-->
<!-- <el-col :span="10" class="el-col" type="flex">-->
<!-- <div class="text item">-->
<!-- <el-form-item label="是否弹窗提示" prop="isInfoLink">-->
<!-- <el-select-->
<!-- v-model="formData.isInfoLink"-->
<!-- placeholder="是否弹窗提示"-->
<!-- >-->
<!-- <el-option label="否" value="0"></el-option>-->
<!-- <el-option label="是" value="1"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="10" class="el-col">-->
<!-- <div class="text item">-->
<!-- <div class="text item">-->
<!-- <el-form-item label="弹窗提示窗口链接" prop="infoLink">-->
<!-- <el-input-->
<!-- style="width: 60%"-->
<!-- size="small"-->
<!-- v-model="formData.infoLink"-->
<!-- ></el-input>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
3 years ago
3 years ago
<!-- <el-row :gutter="20" class="el-row" type="flex">-->
<!-- <el-col :span="10" class="el-col" type="flex">-->
<!-- <div class="text item">-->
<!-- <el-form-item label="选择打印模板" prop="pdfTemplateId">-->
<!-- <el-select-->
<!-- v-model="formData.pdfTemplateId"-->
<!-- placeholder="选择打印模板"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in pdfTemplates"-->
<!-- :key="item.idStr"-->
<!-- :label="item.name"-->
<!-- :value="item.idStr">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
3 years ago
<el-form-item label="状态:" prop="userFlag">
<el-radio-group v-model="formData.userFlag">
<el-radio :label="0">禁用</el-radio>
<el-radio :label="1">正常</el-radio>
<el-radio :label="2">未验证</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="分配角色:">
<el-radio-group v-model="check" @change="handleCheckedChange">
<el-radio v-for="item in roles" :key="item.id" :label="item.id">{{
3 years ago
item.name
3 years ago
}}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="cancelDialog" size="small">取消</el-button>
<el-button type="primary" size="small" @click.native="formSubmit()"
>提交
</el-button
>
</div>
</el-dialog>
<el-dialog title="客户联系人" :visible.sync="contractVisible" width="60%">
<el-form :model="contractData" ref="dataForm">
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="10" class="el-col" type="flex">
<div class="text item">
<el-form-item label="真实姓名" prop="userName">
<el-input
v-model="contractData.contacts"
style="width: 80%"
size="small"
:disabled="true"
></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="10" class="el-col">
<div class="text item">
<div class="text item">
<el-form-item label="手机" prop="employeeName">
<el-input
v-model="contractData.mobile"
size="small"
style="width: 80%"
type="number"
:disabled="true"
></el-input>
</el-form-item>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="10" class="el-col" type="flex">
<div class="text item">
<el-form-item label="联系电话" prop="tel">
<el-input
v-model="contractData.tel"
style="width: 80%"
size="small"
:disabled="true"
></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="10" class="el-col">
<div class="text item">
<div class="text item">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="contractData.email"
size="small"
style="width: 80%"
:disabled="true"
></el-input>
</el-form-item>
</div>
</div>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="cancelDialog" size="small">确定</el-button>
</div>
</el-dialog>
<div v-if="customerVisible">
<el-dialog
title="客户用户"
:visible.sync="customerVisible"
width="70%"
append-to-body
:modal-append-to-body="false"
:close-on-click-modal="false"
3 years ago
@close="closeCustomerDialog"
>
<customerUser :currentCustomer="currentCustomer"></customerUser>
</el-dialog>
</div>
<el-pagination
:page-size="filterQuery.limit"
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total="total"
></el-pagination>
</div>
</template>
<script>
3 years ago
import {getRegisters, checkPass, deleteRe} from "../../api/auth/register";
import {authAdminRoleList, authCustomerRoles} from "../../api/auth/authAdmin";
import {getSystemPDFTemplates} from "../../api/param/systemPDFTemplate";
import {
getCustomers,
updateCustomers,
deleteCustomers,
} from "../../api/auth/customer";
import customerUser from "./customerUser";
3 years ago
3 years ago
export default {
data() {
return {
filterQuery: {
companyName: "",
checkType: "",
page: 1,
limit: 20,
},
value: "",
total: 0,
checkFlag: {
0: "未审核",
1: "已通过",
2: "已拒绝",
},
3 years ago
3 years ago
userflag: {
0: "禁用",
1: "正常",
2: "未验证",
3 years ago
},
3 years ago
bussinessFlag: {
1: "医院",
2: "经营企业"
3 years ago
},
3 years ago
list: [],
isTip: {
0: "否",
1: "是",
3 years ago
},
3 years ago
formVisible: false,
contractVisible: false,
customerVisible: false,
timer: "",
formData: {
customerName: "111",
userMax: "",
isInfoLink: "",
infoLink: "",
customerId: "",
userFlag: "",
roleId: "",
pdfTemplateId: "",
3 years ago
},
3 years ago
contractData: {
contacts: "",
mobile: "",
tel: "",
email: "",
3 years ago
},
3 years ago
currentCustomer: "",
check: "",
roles: [],
pdfTemplates: [],
};
},
filters: {
statusFilterType(status) {
const statusMap = {
0: "gray",
1: "success",
2: "danger",
};
return statusMap[status];
},
statusFilterName(status) {
const statusMap = {
0: "禁用",
1: "正常",
2: "未验证",
};
return statusMap[status];
},
},
methods: {
onReset() {
this.$router.push({
path: "",
});
this.filterQuery = {
companyName: "",
page: 1,
limit: 20,
};
this.getList();
},
formSubmit() {
this.formData.roleId = this.check;
updateCustomers(this.formData)
.then((response) => {
this.loading = false;
this.cancelDialog();
this.getList();
if (response.code === 20000) {
this.$message({
type: "success",
message: "更新成功!",
});
} else {
this.$message.warning("更新失败");
}
})
.catch(() => {
this.cancelDialog();
this.loading = false;
});
},
onSubmit() {
this.getList();
},
getList() {
this.loading = true;
if (this.filterQuery.companyName != null && this.filterQuery.companyName != '') {
this.filterQuery.page = 1;
}
3 years ago
getCustomers(this.filterQuery)
.then((response) => {
this.loading = false;
this.list = response.data.list || [];
for (let i = 0; i < this.list.length; i++) {
if (this.$isNotBlank(this.list[i].pdfTemplateId)) {
for (let j = 0; j < this.pdfTemplates.length; j++) {
if (this.list[i].pdfTemplateId === this.pdfTemplates[j].idStr) {
this.list[i].pdfTemplateName = this.pdfTemplates[j].name;
break;
3 years ago
}
}
}
3 years ago
}
this.total = response.data.total || 0;
})
.catch(() => {
this.loading = false;
this.list = [];
this.total = 0;
});
},
hideForm() {
this.customerVisible = false;
},
cancelDialog() {
this.formVisible = false;
this.contractVisible = false;
},
3 years ago
3 years ago
handleSizeChange(val) {
this.filterQuery.limit = val;
this.getList();
},
handleCurrentChange(val) {
this.filterQuery.page = val;
this.getList();
},
handleCheckedChange(val) {
},
checkRegister(tquery) {
this.loading = true;
checkPass(tquery)
.then((response) => {
if (response.code === 20000) {
this.getList();
this.$message({
type: "success",
message: "更新成功!",
});
} else {
this.$message.warning("更新失败");
this.loading = false;
}
})
.catch(() => {
});
},
customerkDialog(row) {
this.currentCustomer = row.customerId;
this.timer = new Date().getTime();
this.customerVisible = true;
},
3 years ago
3 years ago
closeCustomerDialog() {
this.currentCustomer = null;
},
checkDialog(row) {
(this.formData = {
customerName: row.companyName,
userMax: row.userMax,
isInfoLink: row.isInfoLink + "",
infoLink: row.infoLink,
customerId: row.customerId,
userFlag: row.userFlag,
pdfTemplateId: row.pdfTemplateId,
}),
(this.check = parseInt(row.roleId));
this.formVisible = true;
},
3 years ago
3 years ago
contractDialog(row) {
(this.contractData = {
contacts: row.contacts,
mobile: row.mobile,
tel: row.tel,
email: row.email,
}),
(this.contractVisible = true);
},
3 years ago
3 years ago
deleteDialog(row) {
this.$confirm("删除后将清空该客户下所有用户?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
let tQuery = {
id: row.customerId,
};
deleteCustomers(tQuery).then(() => {
this.getList();
3 years ago
});
3 years ago
})
.catch(() => {
});
3 years ago
},
3 years ago
getRoleList() {
authCustomerRoles()
.then((response) => {
this.roles = response.data.list || [];
})
.catch(() => {
});
3 years ago
},
3 years ago
getPDFTemplateList() {
getSystemPDFTemplates()
.then((response) => {
this.pdfTemplates = response.data.list;
})
.catch(() => {
});
3 years ago
},
3 years ago
},
components: {
customerUser,
},
mounted() {
},
created() {
// this.getPDFTemplateList();
this.getList();
this.getRoleList();
},
};
3 years ago
</script>