<template>
|
<div class="table-card" ref="tableCard" :bordered="false">
|
<!-- 操作按钮区域 -->
|
<div class="table-operator">
|
<a-form class="query-form" layout="inline" :form="queryParam" @keyup.enter.native="searchQuery">
|
<a-form-item label="来源地区">
|
<a-input style="width: 150px" placeholder="请输入" v-model="queryParam.licensePlace" />
|
</a-form-item>
|
<a-form-item label="自定义标签">
|
<a-select style="width: 180px" allowClear v-model="queryParam.labelName" placeholder="请选择">
|
<a-select-option v-for="(item, index) in filterTagOptions" :key="index" :value="item">
|
{{ item }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item label="累计加油量">
|
<a-input
|
onkeyup="this.value=this.value.replace(/\D/g,'')"
|
style="width: 150px"
|
placeholder="最少加油量"
|
v-model="queryParam.oilSumLeft"
|
/>
|
-
|
<a-input
|
onkeyup="this.value=this.value.replace(/\D/g,'')"
|
style="width: 150px"
|
placeholder="最大加油量"
|
v-model="queryParam.oilSumRight"
|
/>
|
</a-form-item>
|
<a-form-item label="累计加油次数">
|
<a-input
|
onkeyup="this.value=this.value.replace(/\D/g,'')"
|
style="width: 150px"
|
placeholder="最少加油次数"
|
v-model="queryParam.oilCountLeft"
|
/>
|
-
|
<a-input
|
onkeyup="this.value=this.value.replace(/\D/g,'')"
|
style="width: 150px"
|
placeholder="最大加油次数"
|
v-model="queryParam.oilCountRight"
|
/>
|
</a-form-item>
|
<a-form-item label="客户类型">
|
<a-select
|
style="width: 180px"
|
v-model="queryParam.clientType"
|
placeholder="请选择"
|
allowClear
|
>
|
<a-select-option v-for="item in clientTypeOptions" :key="item.id" :value="item.id">
|
{{ item.clientName }}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
<!-- <a-select style="width: 180px" allowClear v-model="queryParam.clientType" placeholder="请选择客户类型">
|
<a-select-option :value="1"> 普通客户 </a-select-option>
|
<a-select-option :value="2"> 潜在客户 </a-select-option>
|
<a-select-option :value="3"> 忠实客户 </a-select-option>
|
</a-select> -->
|
</a-form-item>
|
<a-form-item label="车型">
|
<j-dict-select-tag
|
style="width: 150px"
|
v-model="queryParam.modelId"
|
placeholder="请选择"
|
dictCode="t_sys_car_model,model_name,id"
|
/>
|
</a-form-item>
|
<a-form-item label="车牌">
|
<a-input style="width: 150px" placeholder="请输入车牌" v-model="queryParam.licenseNum" />
|
</a-form-item>
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button @click="makeTag('all')" type="primary">批量打标签</a-button>
|
<a-button @click="handleExportXls('CarInfo')" type="primary" icon="download">导出</a-button>
|
</a-form>
|
<!-- <a-button type="primary" icon="download" @click="handleExportXls('CarInfo')">导出</a-button> -->
|
</div>
|
|
<!-- table区域-begin -->
|
<div>
|
<split-pane :min-percent="10" :default-percent="17" split="vertical">
|
<template slot="paneL">
|
<div class="organ_tree_ct">
|
<organ-tree height="67vh" ref="orgTree" @on-tree-node-select="onTreeNodeSelect"></organ-tree>
|
</div>
|
</template>
|
<template slot="paneR">
|
<a-table
|
class="infoTable"
|
ref="table"
|
size="middle"
|
rowKey="licenseNum"
|
:columns="columns"
|
:dataSource="dataSource"
|
:pagination="ipagination"
|
:loading="loading"
|
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
@change="handleTableChange"
|
>
|
<span slot="action" slot-scope="text, record">
|
<a @click="makeTag(record)">打标签</a>
|
<a-divider type="vertical" />
|
<a @click="handleDetail(record)">详情</a>
|
</span>
|
</a-table>
|
</template>
|
</split-pane>
|
</div>
|
<!-- table区域-end -->
|
<j-modal title="打标签" :width="600" :destroyOnClose="true" :visible="makeTagVisible" @ok="makeTagOk" @cancel="makeTagVisible = false">
|
<div v-show="showSelectTag">
|
<a-tag v-for="(item, index) in readyTagList" closable @close="delSlectTag(item)" :key="index" color="#108ee9">
|
{{ item }}
|
</a-tag>
|
</div>
|
<div style="margin-top: 20px">
|
<div v-for="item in tagList" :key="item.id" style="display: flex; margin-top: 8px">
|
<div>{{ item.labelType }}：</div>
|
<a-tag
|
@click="selectTag(subItem, item)"
|
v-for="(subItem, subIndex) in item.labelName.split(',')"
|
:key="subIndex"
|
:color="selectTagList.includes(subItem) ? '#108ee9' : 'blue'"
|
>
|
{{ subItem }}
|
</a-tag>
|
</div>
|
</div>
|
</j-modal>
|
<!-- 详情弹窗 -->
|
<car-info-detail :orgCode="this.queryParam.orgCode" ref="modalDetail"></car-info-detail>
|
</div>
|
</template>
|
|
<script>
|
import OrganTree from '../tools/OrganTree'
|
import { JeecgListMixin } from '@tievd/cube-block/lib/mixins/JeecgListMixin'
|
import splitPane from 'vue-splitpane'
|
import { getAction, postAction } from '@tievd/cube-block/lib/api/manage'
|
import CarInfoDetail from './components/CarInfoDetail.vue'
|
export default {
|
name: 'CarInfoList',
|
|
mixins: [JeecgListMixin],
|
|
components: {
|
CarInfoDetail,
|
OrganTree,
|
splitPane,
|
},
|
|
data() {
|
return {
|
filterTagOptions: [], //自定义标签筛选
|
makeTagVisible: false, //打标签弹窗
|
selectRecord: {}, //选择的表格行
|
readyTagList: [], //选择的行的标签数组
|
selectTagList: [],
|
showSelectTag: false,
|
description: 'CarInfo列表',
|
queryParam: {},
|
tagList: [], //所有标签集合
|
clientTypeOptions: [], //客户类型列表
|
// 表头
|
columns: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1
|
},
|
},
|
{
|
title: '车牌号',
|
align: 'center',
|
dataIndex: 'licenseNum',
|
},
|
{
|
title: '车型',
|
align: 'center',
|
dataIndex: 'modelName',
|
},
|
// {
|
// title: '颜色',
|
// align: 'center',
|
// dataIndex: 'color',
|
// },
|
{
|
title: '来源地区',
|
align: 'center',
|
dataIndex: 'licensePlace',
|
},
|
{
|
title: '客户类型',
|
align: 'center',
|
dataIndex: 'clientType_dictText',
|
},
|
{
|
title: '自定义标签',
|
align: 'center',
|
dataIndex: 'labelName',
|
},
|
{
|
title: '累计出现次数',
|
align: 'center',
|
dataIndex: 'appearCount',
|
},
|
{
|
title: '累计加油次数',
|
align: 'center',
|
dataIndex: 'oilCount',
|
},
|
{
|
title: '累计加油量(升)',
|
align: 'center',
|
dataIndex: 'oilSum',
|
},
|
{
|
title: '最近出现时间',
|
align: 'center',
|
dataIndex: 'updateTime',
|
},
|
{
|
title: '建档时间',
|
align: 'center',
|
dataIndex: 'createTime',
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 150,
|
align: 'center',
|
scopedSlots: { customRender: 'action' },
|
},
|
],
|
// 列定义
|
url: {
|
list: '/jyz/carInfo/pageCarAllInfo',
|
delete: '/jyz/carInfo/delete',
|
deleteBatch: '/jyz/carInfo/deleteBatch',
|
exportXlsUrl: '/jyz/carInfo/exportXls',
|
},
|
}
|
},
|
|
methods: {
|
// 获取客户类型列表
|
getClientTypeOptions() {
|
getAction('/jyz/client/listClientType').then((res) => {
|
if (res.code === 200) {
|
this.clientTypeOptions = res.result
|
}
|
})
|
},
|
delSlectTag(item) {
|
console.log(item)
|
let index = this.selectTagList.findIndex((el) => el == item)
|
this.selectTagList.splice(index, 1)
|
},
|
handleDetail(data) {
|
this.$refs.modalDetail.show(data)
|
},
|
//打开打标签弹窗
|
makeTag(data) {
|
if (data == 'all') {
|
this.showSelectTag = false
|
} else {
|
this.showSelectTag = true
|
this.selectRecord = data
|
this.readyTagList = data.labelName ? data.labelName.split(',') : []
|
this.selectTagList = data.labelName ? data.labelName.split(',') : []
|
}
|
this.makeTagVisible = true
|
this.getTagInfo()
|
},
|
//打标签弹窗确认
|
makeTagOk(data) {
|
let arr = this.showSelectTag ? [this.selectRecord.licenseNum] : this.selectedRowKeys
|
if (arr.length==0) {
|
this.$message.error("请先选择车辆");
|
return;
|
}
|
postAction('/jyz/labelCar/add', {
|
licenseNums: arr,
|
labelNames: this.selectTagList,
|
}).then((res) => {
|
this.$message.success('操作成功')
|
this.selectTagList = []
|
this.makeTagVisible = false
|
this.selectRecord = {} //选择的表格行
|
this.readyTagList = [] //选择的行的标签数组
|
this.selectTagList = []
|
this.tagList = []
|
this.loadData()
|
})
|
},
|
//打标签弹窗选择标签
|
selectTag(subItem, item) {
|
let arr = item.labelName.split(',')
|
if (this.selectTagList.includes(subItem)) {
|
this.selectTagList = this.selectTagList.filter((el) => el != subItem)
|
} else {
|
//同一类型单选操作
|
this.selectTagList = this.selectTagList.filter((el) => {
|
return arr.indexOf(el) == -1
|
})
|
this.selectTagList.push(subItem)
|
}
|
},
|
//获取所有标签
|
getTagInfo(getOption) {
|
getAction('/jyz/label/list', {
|
pageNo: 1,
|
pageSize: 100,
|
}).then((res) => {
|
this.tagList = res.result.records
|
if (getOption) {
|
var str = ''
|
this.tagList.map((el, index) => {
|
str += el.labelName + (index != this.tagList.length - 1 ? ',' : '')
|
})
|
this.filterTagOptions = str.split(',')
|
}
|
this.$forceUpdate()
|
})
|
},
|
|
onTreeNodeSelect(id, node) {
|
this.queryParam.orgCode = node.node.dataRef.orgCode
|
this.loadData()
|
},
|
// 获取客户类型列表
|
getClientTypeOptions() {
|
getAction('/jyz/client/listClientType').then((res) => {
|
if (res.code === 200) {
|
this.clientTypeOptions = res.result
|
}
|
})
|
},
|
},
|
|
created() {
|
this.getTagInfo(true)
|
this.getClientTypeOptions()
|
},
|
}
|
</script>
|
<style scoped lang="less">
|
@import '~@assets/less/common.less';
|
.organ_tree_ct {
|
height: 76vh;
|
}
|
</style>
|
