最新
This commit is contained in:
lcc
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<el-card shadow="never">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form label-width="77px" class="ele-form-search">
|
||||
<el-row :gutter="15">
|
||||
<el-col :md="6" :sm="12">
|
||||
<el-form-item label="名称:">
|
||||
<el-input
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
v-model="where.title"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="12" :sm="24">
|
||||
<car-model-selector
|
||||
type="brandSeries"
|
||||
v-model="where.selectedCar"
|
||||
:key="componentKey"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12">
|
||||
<div class="ele-form-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
class="ele-btn-icon"
|
||||
@click="reload"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 数据表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:selection.sync="selection"
|
||||
cache-key="syliveActivityTable"
|
||||
>
|
||||
<!-- 表头工具栏 -->
|
||||
<template v-slot:toolbar>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
class="ele-btn-icon"
|
||||
@click="dropClick('edit')"
|
||||
>
|
||||
新建
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
class="ele-btn-icon"
|
||||
@click="removeBatch"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 状态列 -->
|
||||
<template v-slot:title="{ row }">
|
||||
<div class="cell-content">
|
||||
<el-image
|
||||
v-if="row.banner && row.banner[0]"
|
||||
:src="row.banner[0]['url']"
|
||||
class="table-image"
|
||||
/>
|
||||
<span class="table-text">{{ row.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:status="{ row }">
|
||||
<el-switch
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
v-model="row.status"
|
||||
@change="editStatus(row)"
|
||||
/>
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-slot:action="{ row }">
|
||||
<el-dropdown @command="(command) => dropClick(command, row)">
|
||||
<el-link type="primary" :underline="false" icon="el-icon-edit">
|
||||
修改
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</el-link>
|
||||
<template v-slot:dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="edit">产品</el-dropdown-item>
|
||||
<el-dropdown-item command="brokerage">佣金</el-dropdown-item>
|
||||
<el-dropdown-item command="coupon">优惠券</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-popconfirm
|
||||
class="ele-action"
|
||||
title="确定要删除此数据吗？"
|
||||
@confirm="remove(row)"
|
||||
>
|
||||
<template v-slot:reference>
|
||||
<el-link type="danger" :underline="false" icon="el-icon-delete">
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
pageProduct,
|
||||
removeProduct,
|
||||
updateProductStatus
|
||||
} from '@/api/car/product';
|
||||
import CarModelSelector from '@/components/CarSelector/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'receiverClues',
|
||||
components: { CarModelSelector },
|
||||
data() {
|
||||
return {
|
||||
where: {
|
||||
title: '',
|
||||
selectedCar: {
|
||||
brandId: '',
|
||||
seriesId: '',
|
||||
modelId: ''
|
||||
}
|
||||
},
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
columnKey: 'selection',
|
||||
type: 'selection',
|
||||
width: 45,
|
||||
align: 'center',
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'id',
|
||||
label: '编号',
|
||||
minWidth: 40,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'title',
|
||||
label: '客户',
|
||||
slot: 'title',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 150
|
||||
},
|
||||
{
|
||||
prop: 'cityName',
|
||||
label: '状态',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'timeLaunch',
|
||||
label: '来源',
|
||||
sortable: 'custom',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '关注车型',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
resizable: false,
|
||||
slot: 'status',
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
columnKey: 'action',
|
||||
label: '操作',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
resizable: false,
|
||||
slot: 'action'
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
componentKey: 0,
|
||||
// 佣金编辑框
|
||||
showEditBrokerage: false
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/* 下拉按钮点击 */
|
||||
dropClick(command, row) {
|
||||
if (command === 'edit') {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
} else if (command === 'brokerage') {
|
||||
this.current = row;
|
||||
this.showEditBrokerage = true;
|
||||
} else if (command === 'coupon') {
|
||||
const path = '/car/product/coupon';
|
||||
this.$nextTick(() => {
|
||||
this.$router.push({
|
||||
path,
|
||||
query: row ? { id: row.id, title: row.title } : undefined
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 表格数据源 */
|
||||
datasource({ page, limit, where, order }) {
|
||||
return pageProduct({ ...where, ...order, page, limit });
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({ page: 1, where: this.where });
|
||||
},
|
||||
/* 删除 */
|
||||
remove(row) {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeProduct(row.id)
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 批量删除 */
|
||||
removeBatch() {
|
||||
if (!this.selection.length) {
|
||||
this.$message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要删除选中数据吗?', '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
const loading = this.$loading({ lock: true });
|
||||
removeProduct(this.selection.map((d) => d.id))
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/* 更改状态 */
|
||||
editStatus(row) {
|
||||
const loading = this.$loading({ lock: true });
|
||||
updateProductStatus(row.id, row.status)
|
||||
.then((msg) => {
|
||||
loading.close();
|
||||
this.$message.success(msg);
|
||||
this.reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.close();
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {
|
||||
selectedCar: {
|
||||
brandId: null,
|
||||
seriesId: null,
|
||||
modelId: null
|
||||
}
|
||||
};
|
||||
// 更新 key 强制组件重新渲染
|
||||
this.componentKey = Date.now();
|
||||
},
|
||||
handleCarChange(carInfo) {
|
||||
this.where.selectedCar = carInfo;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.cell-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.table-text {
|
||||
/* 文本样式 */
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
/**
|
||||
* 分页查询
|
||||
* @param params 查询条件
|
||||
*/
|
||||
export async function pageClues(params) {
|
||||
const res = await request.get('/receiver/clues/page', {
|
||||
params
|
||||
});
|
||||
if (res.data.code === 0) {
|
||||
return res.data.data;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="ele-body">
|
||||
<el-card shadow="never">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form label-width="77px" class="ele-form-search">
|
||||
<el-row :gutter="15">
|
||||
<el-col :md="6" :sm="12">
|
||||
<el-form-item label="客户:">
|
||||
<el-input
|
||||
placeholder="请输入手机号"
|
||||
clearable
|
||||
v-model="where.title"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
|
||||
<el-form-item label="筛选日期:">
|
||||
<el-date-picker
|
||||
unlink-panels
|
||||
v-model="where.dateRange"
|
||||
range-separator="-"
|
||||
type="daterange"
|
||||
end-placeholder="结束日期"
|
||||
start-placeholder="开始日期"
|
||||
:picker-options="pickerOptions"
|
||||
value-format="yyyy-MM-dd"
|
||||
class="ele-fluid"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="6" :sm="12">
|
||||
<div class="ele-form-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
class="ele-btn-icon"
|
||||
@click="reload"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 数据表格 -->
|
||||
<ele-pro-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:datasource="datasource"
|
||||
:selection.sync="selection"
|
||||
cache-key="receiverCluesTables"
|
||||
>
|
||||
<!-- 表头工具栏 -->
|
||||
<template v-slot:toolbar></template>
|
||||
<!-- 操作列 -->
|
||||
<template v-slot:action="{ row }">
|
||||
<el-link type="primary" :underline="false" @click="goDetail(row)">
|
||||
查看
|
||||
</el-link>
|
||||
</template>
|
||||
</ele-pro-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { pageClues } from '@/api/receiver/clues';
|
||||
|
||||
export default {
|
||||
name: 'receiverClues',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
where: {
|
||||
title: '',
|
||||
selectedCar: {
|
||||
brandId: '',
|
||||
seriesId: '',
|
||||
modelId: ''
|
||||
}
|
||||
},
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{
|
||||
prop: 'id',
|
||||
label: '编号',
|
||||
minWidth: 40,
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
prop: 'mobile',
|
||||
label: '客户',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'statusCn',
|
||||
label: '状态',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'cfrom',
|
||||
label: '来源',
|
||||
align: 'center',
|
||||
showOverflowTooltip: true,
|
||||
minWidth: 80
|
||||
},
|
||||
{
|
||||
prop: 'brandSeries',
|
||||
label: '关注车型',
|
||||
align: 'center',
|
||||
minWidth: 80,
|
||||
resizable: false,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'enTime',
|
||||
label: '日期',
|
||||
align: 'center',
|
||||
minWidth: 80,
|
||||
resizable: false,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
columnKey: 'action',
|
||||
label: '操作',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
resizable: false,
|
||||
slot: 'action'
|
||||
}
|
||||
],
|
||||
// 表格选中数据
|
||||
selection: [],
|
||||
// 当前编辑数据
|
||||
current: null,
|
||||
// 是否显示编辑弹窗
|
||||
showEdit: false,
|
||||
// 日期时间选择器快捷项
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
||||
end.setTime(end.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
// 是否开启响应式布局
|
||||
styleResponsive() {
|
||||
return this.$store.state.theme.styleResponsive;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 下拉按钮点击 */
|
||||
dropClick(command, row) {
|
||||
if (command === 'edit') {
|
||||
this.current = row;
|
||||
this.showEdit = true;
|
||||
} else if (command === 'brokerage') {
|
||||
this.current = row;
|
||||
this.showEditBrokerage = true;
|
||||
} else if (command === 'coupon') {
|
||||
const path = '/car/product/coupon';
|
||||
this.$nextTick(() => {
|
||||
this.$router.push({
|
||||
path,
|
||||
query: row ? { id: row.id, title: row.title } : undefined
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
goDetail(row) {
|
||||
const path = '/receiver/clues/detail';
|
||||
this.$router.push({
|
||||
path,
|
||||
query: row ? { id: row.id, title: row.title } : undefined
|
||||
});
|
||||
},
|
||||
/* 表格数据源 */
|
||||
datasource({ page, limit, where, order }) {
|
||||
return pageClues({ ...where, ...order, page, limit });
|
||||
},
|
||||
/* 刷新表格 */
|
||||
reload() {
|
||||
this.$refs.table.reload({ page: 1, where: this.where });
|
||||
},
|
||||
/* 重置搜索 */
|
||||
reset() {
|
||||
this.where = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user