You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
438 lines
11 KiB
438 lines
11 KiB
<template>
|
|
<div>
|
|
<!--查询-->
|
|
<div>
|
|
<div ref="lxHeader">
|
|
<lx-header
|
|
icon="md-apps"
|
|
style="margin-bottom: 10px; border: 0px; margin-top: 15px"
|
|
text="客户列表"
|
|
>
|
|
<div slot="content"></div>
|
|
|
|
<slot>
|
|
<div>
|
|
<el-select
|
|
placeholder="关联板块"
|
|
multiple
|
|
v-model="select.product_type_id"
|
|
size="small"
|
|
style="width: 300px; margin-right: 10px"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in types"
|
|
:key="item.id"
|
|
:value="item.id"
|
|
:label="item.name"
|
|
></el-option>
|
|
</el-select>
|
|
|
|
<el-input
|
|
size="small"
|
|
placeholder="关键字搜索"
|
|
v-model="select.keyword"
|
|
style="width: 200px; margin-right: 10px"
|
|
/>
|
|
|
|
<Button
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
@click="(select.page = 1), getCustomers()"
|
|
>查询</Button
|
|
>
|
|
<Button
|
|
style="margin-left: 10px"
|
|
type="primary"
|
|
@click="
|
|
($refs['addCustomer'].type = 'add'),
|
|
($refs['addCustomer'].isShow = true)
|
|
"
|
|
>新增客户
|
|
</Button>
|
|
</div>
|
|
</slot>
|
|
</lx-header>
|
|
</div>
|
|
</div>
|
|
|
|
<xy-table
|
|
ref="table"
|
|
:total="total"
|
|
:list="list"
|
|
:table-item="tableItem"
|
|
:default-expand-all="false"
|
|
@pageSizeChange="
|
|
(e) => {
|
|
select.page_size = e;
|
|
select.page = 1;
|
|
getCustomers();
|
|
}
|
|
"
|
|
@pageIndexChange="
|
|
(e) => {
|
|
select.page = e;
|
|
getCustomers();
|
|
}
|
|
"
|
|
>
|
|
<template v-slot:btns>
|
|
<el-table-column
|
|
fixed="right"
|
|
width="166"
|
|
header-align="center"
|
|
align="center"
|
|
label="操作"
|
|
>
|
|
<template v-slot:default="scope">
|
|
<Poptip
|
|
transfer
|
|
confirm
|
|
title="确认要删除?"
|
|
@on-ok="destroy(scope.row)"
|
|
>
|
|
<Button size="small" type="error" ghost style="margin-right: 6px"
|
|
>删除</Button
|
|
>
|
|
</Poptip>
|
|
<Button
|
|
size="small"
|
|
ghost
|
|
type="primary"
|
|
@click="editor(scope.row)"
|
|
style="margin-right: 6px"
|
|
>编辑</Button
|
|
>
|
|
<Button
|
|
size="small"
|
|
type="primary"
|
|
@click="
|
|
($refs['addOrder'].customerIdcard = scope.row.idcard),
|
|
($refs['addOrder'].isShow = true),
|
|
($refs['addOrder'].form.customer_id = scope.row.id)
|
|
"
|
|
>录入</Button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</xy-table>
|
|
|
|
<addOrder
|
|
ref="addOrder"
|
|
:types="types"
|
|
:accounts="accounts"
|
|
@refresh="getCustomers"
|
|
></addOrder>
|
|
<add-customer
|
|
ref="addCustomer"
|
|
:level-types="levelTypes"
|
|
:types="types"
|
|
:accounts="accounts"
|
|
:cities="cities"
|
|
:disability-level="disabilityLevel"
|
|
@refresh="getCustomers"
|
|
></add-customer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getList, destroy } from "@/api/customer";
|
|
import { getparameter } from "@/api/system/dictionary";
|
|
import { getList as getUnit } from "@/api/payUnit";
|
|
import { getList as getTypes } from "@/api/productType";
|
|
import { deepCopy } from "@/utils";
|
|
|
|
import addCustomer from "@/views/customer/component/addCustomer";
|
|
import addOrder from "./component/addOrder";
|
|
export default {
|
|
components: {
|
|
addCustomer,
|
|
addOrder,
|
|
},
|
|
data() {
|
|
return {
|
|
select: {
|
|
product_type_id: [],
|
|
page: 1,
|
|
page_size: 10,
|
|
keyword: "",
|
|
},
|
|
disabilityLevel: [],
|
|
levelTypes: [],
|
|
cities: [],
|
|
accounts: [],
|
|
types: [],
|
|
|
|
total: 0,
|
|
list: [],
|
|
tableItem: [
|
|
{
|
|
type: "expand",
|
|
expandFn: (props) => {
|
|
return (
|
|
<Table
|
|
style={{
|
|
margin: "0 166px 0 40px",
|
|
}}
|
|
width={1370}
|
|
stripe={true}
|
|
border={true}
|
|
size="small"
|
|
columns={[
|
|
{
|
|
title: "订单编号",
|
|
key: "no",
|
|
width: 220,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "订单产品",
|
|
width: 200,
|
|
align: "center",
|
|
render: (h, params) => {
|
|
return h("div", params.row.product.name);
|
|
},
|
|
},
|
|
{
|
|
title: "时间",
|
|
width: 270,
|
|
align: "center",
|
|
render: (h, params) => {
|
|
return h("div", [
|
|
h("span", params.row.start_date),
|
|
h("span", " ~ "),
|
|
h("span", params.row.end_date),
|
|
]);
|
|
},
|
|
},
|
|
{
|
|
title: "单次价格",
|
|
width: 180,
|
|
align: "right",
|
|
key: "unit_price",
|
|
},
|
|
{
|
|
title: "总计时长",
|
|
width: 160,
|
|
align: "center",
|
|
key: "total_time",
|
|
},
|
|
{
|
|
title: "总计金额",
|
|
width: 190,
|
|
align: "right",
|
|
key: "total_money",
|
|
},
|
|
{
|
|
title: "执行状态",
|
|
align: "center",
|
|
render: (h, params) => {
|
|
let statusName = new Map([
|
|
[0, "未开始"],
|
|
[1, "进行中"],
|
|
[2, "已完成"],
|
|
]);
|
|
let statusColor = new Map([
|
|
[0, "blue"],
|
|
[1, "red"],
|
|
[2, "green"],
|
|
]);
|
|
return h(
|
|
"div",
|
|
{
|
|
style: {
|
|
color: statusColor.get(params.row.status),
|
|
},
|
|
},
|
|
statusName.get(params.row.status)
|
|
);
|
|
},
|
|
},
|
|
]}
|
|
data={props?.row.orders}
|
|
></Table>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
prop: "name",
|
|
label: "姓名",
|
|
width: "180",
|
|
},
|
|
{
|
|
label: "订单产品",
|
|
width: 220,
|
|
align: "left",
|
|
customFn: (row) => {
|
|
return (
|
|
<div>
|
|
{" "}
|
|
{row.orders
|
|
.map((item) => {
|
|
return item.product.name;
|
|
})
|
|
.toString()}{" "}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
prop: "idcard",
|
|
label: "身份证号",
|
|
width: "220",
|
|
},
|
|
{
|
|
prop: "phone",
|
|
label: "手机号",
|
|
width: "160",
|
|
},
|
|
{
|
|
label: "委托人",
|
|
width: "180",
|
|
prop: "contact_name",
|
|
},
|
|
{
|
|
label: "委托人电话",
|
|
width: "160",
|
|
prop: "contact_phone",
|
|
},
|
|
{
|
|
prop: "idcard_address",
|
|
label: "户籍地址",
|
|
width: 140,
|
|
},
|
|
{
|
|
label: "默认上门地址",
|
|
minWidth: 300,
|
|
align: "left",
|
|
customFn: (row) => {
|
|
return (
|
|
<div>
|
|
{" "}
|
|
{row.customer_address.filter((item) => {
|
|
return item.default === 1;
|
|
})[0]?.address ||
|
|
row.customer_address[0]?.address ||
|
|
"无"}{" "}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
label: "上门地址数",
|
|
prop: "customer_address_count",
|
|
width: 140,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
async getLevelTypes() {
|
|
const types = await getparameter(
|
|
{
|
|
number: "disabilityType",
|
|
},
|
|
false
|
|
);
|
|
this.levelTypes = types.detail;
|
|
},
|
|
|
|
async getDisabilityLevel() {
|
|
const levels = await getparameter(
|
|
{
|
|
number: "disabilityLevel",
|
|
},
|
|
false
|
|
);
|
|
this.disabilityLevel = levels.detail;
|
|
},
|
|
|
|
async getCustomers() {
|
|
let copySelect = deepCopy(this.select);
|
|
copySelect.product_type_id = copySelect?.product_type_id.toString();
|
|
const res = await getList(copySelect);
|
|
this.list = res.data.data;
|
|
this.total = res.data.total;
|
|
},
|
|
|
|
async getAccounts() {
|
|
const res = await getUnit(
|
|
{
|
|
page: 1,
|
|
page_size: 9999,
|
|
},
|
|
false
|
|
);
|
|
this.accounts = res.data;
|
|
},
|
|
|
|
async getTypes() {
|
|
const res = await getTypes(
|
|
{
|
|
page: 1,
|
|
page_size: 9999,
|
|
},
|
|
false
|
|
);
|
|
this.types = res.data;
|
|
},
|
|
|
|
async getCity() {
|
|
let city = await getparameter(
|
|
{
|
|
number: "city",
|
|
},
|
|
false
|
|
);
|
|
for (let i = 0; i < city.detail.length; i++) {
|
|
let area = await getparameter(
|
|
{
|
|
pid: city.detail[i].id,
|
|
},
|
|
false
|
|
);
|
|
city.detail[i].children = area.detail;
|
|
|
|
for (let j = 0; j < area.detail.length; j++) {
|
|
let street = await getparameter(
|
|
{
|
|
pid: area.detail[j].id,
|
|
},
|
|
false
|
|
);
|
|
area.detail[j].children = street.detail;
|
|
}
|
|
}
|
|
|
|
this.cities = city.detail;
|
|
},
|
|
|
|
editor(row) {
|
|
this.$refs["addCustomer"].id = row.id;
|
|
this.$refs["addCustomer"].type = "editor";
|
|
this.$refs["addCustomer"].isShow = true;
|
|
},
|
|
destroy(row) {
|
|
destroy(row.id).then((res) => {
|
|
this.$successMessage("destroy", "客户");
|
|
this.getCustomers();
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getDisabilityLevel();
|
|
this.getLevelTypes();
|
|
this.getCustomers();
|
|
this.getCity();
|
|
this.getAccounts();
|
|
this.getTypes();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .ivu-table-header thead tr th {
|
|
text-align: center !important;
|
|
}
|
|
</style>
|