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.
338 lines
9.6 KiB
338 lines
9.6 KiB
<template>
|
|
<div>
|
|
|
|
<div>
|
|
<div ref="lxHeader">
|
|
<lx-header icon="md-apps" :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
|
<div slot="content">
|
|
<div class="searchwrap" style="display: flex;align-items: center;">
|
|
<div>
|
|
<el-input v-model="select.name" placeholder="First Name"></el-input>
|
|
</div>
|
|
<div>
|
|
<el-input v-model="select.last_name" placeholder="Last Name"></el-input>
|
|
</div>
|
|
<div>
|
|
<el-input v-model="select.email" placeholder="Email"></el-input>
|
|
</div>
|
|
<div>
|
|
<el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDate"
|
|
v-model="dateRange" type="datetimerange" range-separator="To" start-placeholder="Start Date"
|
|
end-placeholder="End Date">
|
|
</el-date-picker>
|
|
</div>
|
|
|
|
<div>
|
|
<el-button type="primary" size="small" @click="select.page=1,getList()">search</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" size="small" @click="resetSearch">reset</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" size="small" @click="editCustomer('add')">add</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" size="small" @click="exportExcel">export</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" size="small" @click="importTable">import</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</lx-header>
|
|
</div>
|
|
</div>
|
|
<xy-table :list="list" :total="total" @pageIndexChange="pageIndexChange" @pageSizeChange="pageSizeChange"
|
|
:table-item="table_item">
|
|
<template v-slot:btns>
|
|
<el-table-column align='center' fixed="right" label="Operate" width="180" header-align="center">
|
|
<template slot-scope="scope">
|
|
<!-- <el-button type="primary" size="small" @click="showCustomer(scope.row.id)">orders</el-button> -->
|
|
<el-button type="primary" size="small" @click="editCustomer('editor',scope.row.id)">edit</el-button>
|
|
<!-- <el-button type="primary" size="small" @click="editCustomer('editor',scope.row.id)">edit</el-button> -->
|
|
<el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
|
|
@confirm="deleteList(scope.row.id)" title="Are you sure to delete it?">
|
|
<el-button type="danger" size="small" slot="reference">delete</el-button>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</xy-table>
|
|
<show-customer ref="showCustomer" @refresh="getList"></show-customer>
|
|
<addCustomer ref="addCustomer" @refresh="getList"></addCustomer>
|
|
<imports ref="imports" @refresh="getList"></imports>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import showCustomer from './components/showCustomer.vue';
|
|
import addCustomer from './components/addCustomer.vue';
|
|
import imports from "./components/imports.vue"
|
|
import {
|
|
index,
|
|
destroy
|
|
} from "@/api/customer";
|
|
import {
|
|
download
|
|
} from "@/utils/downloadRequest";
|
|
export default {
|
|
components: {
|
|
showCustomer,
|
|
addCustomer,
|
|
imports
|
|
},
|
|
data() {
|
|
return {
|
|
select: {
|
|
name: '',
|
|
last_name: '',
|
|
email: '',
|
|
page: 1,
|
|
page_size: 10,
|
|
},
|
|
dateRange: [],
|
|
range: '',
|
|
total: 0,
|
|
list: [],
|
|
table_item: [{
|
|
type: 'index',
|
|
width: 50,
|
|
fixed: 'left',
|
|
export:false,
|
|
}, {
|
|
prop: 'first_name',
|
|
label: 'First Name',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
}, {
|
|
prop: 'last_name',
|
|
label: 'Last Name',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
{
|
|
prop: 'origination',
|
|
label: 'Organization',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
{
|
|
prop: 'email',
|
|
label: 'Email',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
{
|
|
prop: 'mobile',
|
|
label: 'Phone',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
|
|
{
|
|
prop: 'country',
|
|
label: 'Country/Region',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
{
|
|
prop: 'shipping_region',
|
|
label: 'States/Province',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
{
|
|
prop: 'shipping_address',
|
|
label: 'Shipping Address',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
{
|
|
prop: 'shipping_city',
|
|
label: 'Shipping City',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
{
|
|
prop: 'shipping_postal',
|
|
label: 'Shipping Zip/Postal Code',
|
|
align: 'left',
|
|
width: 240,
|
|
export:true,
|
|
},
|
|
// {
|
|
// prop: 'billing_address',
|
|
// label: 'Billing Address',
|
|
// align: 'left',
|
|
// width: 240
|
|
// },
|
|
// {
|
|
// prop: 'billing_region',
|
|
// label: 'Billing States/Province',
|
|
// align: 'left',
|
|
// width: 240
|
|
// },
|
|
// {
|
|
// prop: 'billing_city',
|
|
// label: 'Billing City',
|
|
// align: 'left',
|
|
// width: 240
|
|
// },
|
|
// {
|
|
// prop: 'billing_postal',
|
|
// label: 'Billing Zip/Postal Code',
|
|
// align: 'left',
|
|
// width: 240
|
|
// },
|
|
{
|
|
prop: 'created_at',
|
|
label: 'Created At',
|
|
align: 'left',
|
|
width: 240
|
|
}
|
|
]
|
|
|
|
}
|
|
},
|
|
created() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
importTable(row) {
|
|
this.$refs.imports.headers = this.table_item
|
|
this.$refs.imports.show()
|
|
},
|
|
showCustomer(id) {
|
|
this.$refs.showCustomer.id = id
|
|
this.$refs.showCustomer.isShow = true
|
|
},
|
|
pageIndexChange(e) {
|
|
this.select.page = e
|
|
this.getList()
|
|
},
|
|
pageSizeChange(e) {
|
|
this.select.page_size = e
|
|
this.select.page = 1
|
|
this.getList()
|
|
},
|
|
resetSearch() {
|
|
this.select.page = 1
|
|
this.select.name = ''
|
|
this.select.last_name = ''
|
|
this.select.email = ''
|
|
this.range = ''
|
|
this.dateRange = ''
|
|
this.getList()
|
|
},
|
|
changeDate(e) {
|
|
if (e) {
|
|
console.log("e", e)
|
|
this.range = e.join(",") + ''
|
|
} else {
|
|
this.range = ''
|
|
}
|
|
},
|
|
async getList() {
|
|
const res = await index({
|
|
...this.select,
|
|
filter: [{
|
|
key: 'first_name',
|
|
op: 'eq',
|
|
value: this.select.name
|
|
}, {
|
|
key: 'last_name',
|
|
op: 'eq',
|
|
value: this.select.last_name
|
|
}, {
|
|
key: 'email',
|
|
op: 'like',
|
|
value: this.select.email
|
|
}, {
|
|
key: 'created_at',
|
|
op: 'range',
|
|
value: this.range ? this.range : ''
|
|
}]
|
|
})
|
|
this.list = res.data
|
|
this.total = res.total
|
|
},
|
|
exportExcel() {
|
|
if (this.total>5000 && !this.range) {
|
|
this.$Message.warning('Select a time period to export')
|
|
return
|
|
}
|
|
let _export = {}
|
|
this.table_item.map(item => {
|
|
if (item.type === 'index') {
|
|
|
|
} else {
|
|
_export[item.prop] = item.label
|
|
}
|
|
})
|
|
download(
|
|
'/api/admin/user/index',
|
|
'get', {
|
|
export_fields: _export,
|
|
...this.select,
|
|
filter: [{
|
|
key: 'first_name',
|
|
op: 'eq',
|
|
value: this.select.name
|
|
}, {
|
|
key: 'last_name',
|
|
op: 'eq',
|
|
value: this.select.last_name
|
|
}, {
|
|
key: 'email',
|
|
op: 'like',
|
|
value: this.select.email
|
|
}, {
|
|
key: 'created_at',
|
|
op: 'range',
|
|
value: this.range ? this.range : ''
|
|
}],
|
|
is_export: 1,
|
|
page: 1,
|
|
page_size: 999
|
|
},
|
|
`Customer List.xlsx`)
|
|
},
|
|
editCustomer(type, id) {
|
|
if (type == 'editor') {
|
|
this.$refs.addCustomer.id = id
|
|
}
|
|
this.$refs.addCustomer.categoryList = this.categoryList
|
|
this.$refs.addCustomer.type = type
|
|
this.$refs.addCustomer.isShow = true
|
|
},
|
|
deleteList(id) {
|
|
var that = this;
|
|
destroy({
|
|
id: id
|
|
}).then(response => {
|
|
this.$Message.success('Success');
|
|
this.getList()
|
|
}).catch(error => {
|
|
console.log(error)
|
|
reject(error)
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|