parent
ef4fcaa691
commit
3e93145e0b
@ -0,0 +1,389 @@
|
||||
<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
|
||||
collapse-tags
|
||||
v-model="select.product_type_id"
|
||||
size="small"
|
||||
style="min-width: 200px; 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="(total = 0),(select.page = 1), getCustomers()"
|
||||
>查询</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>
|
||||
</template>
|
||||
</xy-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, destroy, save } 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, getBirth, getAgeByIdcard } from "@/utils";
|
||||
import { getAuthAreas, getAuthTypes } from "@/utils/auth";
|
||||
|
||||
export default {
|
||||
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>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
width: "180",
|
||||
customFn: (row) => {
|
||||
let getColor = () => {
|
||||
if (row.near_age == 2) {
|
||||
return "rgb(232,102,33)";
|
||||
}
|
||||
if (row.near_age == 1) {
|
||||
return "yellow";
|
||||
}
|
||||
};
|
||||
return <span style={{ color: getColor() }}>{row.name}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
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: {
|
||||
save,
|
||||
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() {
|
||||
this.types = getAuthTypes(this);
|
||||
this.select.product_type_id = this.types.map((item) => item.id);
|
||||
},
|
||||
|
||||
async getCity() {
|
||||
let authAreaIds = getAuthAreas(this).map((item) => item.id);
|
||||
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
|
||||
);
|
||||
let resArea = [];
|
||||
area?.detail.forEach((item) => {
|
||||
if (authAreaIds.indexOf(item.id) !== -1) {
|
||||
resArea.push(item);
|
||||
}
|
||||
});
|
||||
city.detail[i].children = resArea;
|
||||
|
||||
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();
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getDisabilityLevel();
|
||||
this.getLevelTypes();
|
||||
this.getCity();
|
||||
this.getAccounts();
|
||||
},
|
||||
async mounted() {
|
||||
await this.getTypes();
|
||||
await this.getCustomers();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .ivu-table-header thead tr th {
|
||||
text-align: center !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue