Commit 891cfcce authored by zhanglw's avatar zhanglw

客户列表管理

parent dca51e5b
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
}, },
size: { size: {
type: String, type: String,
default: 'small' default: 'mini'
}, },
rangeSeparator: { rangeSeparator: {
type: String, type: String,
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device!=='mobile'">
<el-tooltip content="全屏缩放" effect="dark" placement="bottom"> <el-tooltip content="全屏" effect="dark" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
......
<template> <template>
<div style="padding:30px;"> <div class="app-container">
<el-alert :closable="false" title="预留" type="success" /> <!--工具栏-->
<div class="head-container">
<el-input v-model="query.username" clearable placeholder="请输入用户名" style="width:150px;" />
<el-select v-model="query.area" clearable placeholder="请选择地区" style="width: 120px">
<el-option v-for="item in dict.area_province" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input v-model="query.username" clearable placeholder="请输入企业名称" style="width:150px;" />
<el-input v-model="query.username" clearable placeholder="请输入联系人" style="width:150px;" />
<el-input v-model="query.username" clearable placeholder="请输入联系电话" style="width:150px;" />
<el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
<el-option v-for="item in dict.custom_status" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<date-range-picker v-model="query.createTime" startPlaceholder="开始日期(注册)" style="width: 280px" />
<el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div>
<div class="toolbar">
<div>
<el-button type="primary" icon="el-icon-circle-plus-outline">添加客户</el-button>
</div>
<div style="text-align: right">
<el-button type="danger" icon="el-icon-help" @click="batchOperate(0)">批量锁定</el-button>
<el-button type="success" icon="el-icon-finished" @click="batchOperate(1)">批量激活</el-button>
</div>
</div>
<!-- 表格 -->
<div class="content">
<el-table id="dataTable" ref="dataTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:auto;min-height: 70vh" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="username" label="用户名" />
<el-table-column prop="area" label="区域" />
<el-table-column prop="xxx" label="企业名称" />
<el-table-column prop="xxx" label="联系人" />
<el-table-column prop="xxx" label="联系电话" />
<el-table-column label="状态" width="100">
<template slot-scope="scope">
<div>{{ dict.label.custom_status[scope.row.status] }}</div>
</template>
</el-table-column>
<el-table-column label="锁定/激活" align="center" width="100">
<template slot-scope="scope">
<el-switch v-model="scope.row.enabled" :disabled="scope.row.status>2" active-color="#409EFF" inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled)" />
</template>
</el-table-column>
<el-table-column prop="xxx" label="注册时间" align="center" width="100" />
<el-table-column prop="xxx" label="操作" align="center" width="200">
<template slot-scope="scope">
<el-tooltip content="编辑"><el-button round plain type="primary" icon="el-icon-edit-outline" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="查看"><el-button round plain icon="el-icon-view" @click="toEdit(scope.row)" /></el-tooltip>
<el-tooltip content="审核"><el-button round plain type="danger" icon="el-icon-s-check" @click="toEdit(scope.row)" /></el-tooltip>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
</div> </div>
</template> </template>
<script>
import DateRangePicker from '@/components/DateRangePicker'
export default {
components: { DateRangePicker },
dicts: ['user_status', 'custom_status', 'area_province'],
data() {
return {
loading: false,
page: 1,
pageSize: 20,
total: 0,
query: {},
tableData: [],
currentTime: '',
multipleSelection: []
}
},
mounted() {
this.currentTimeFn()
this.$nextTick(() => {
this.loadData()
})
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val
},
loadData() {
var sort = 'id,desc'
var param = { ...this.query }
param.page = this.page
param.pageSize = this.pageSize
param.sort = sort
this.tableData = [
{ username: '张三', area: '火星', status: 1, enabled: true, xxx: '2023-05-09' },
{ username: '李四', area: '地球', status: 3, enabled: false, xxx: '2023-05-09' }
]
this.total = 2
},
batchOperate(opt) {
if (!this.multipleSelection.length) {
return this.$message({
message: '未选取数据',
type: 'info'
})
}
if (opt) {
console.log('启用', this.multipleSelection)
} else {
console.log('启用', this.multipleSelection)
}
},
changeEnabled(data, val) {
this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
}).catch(() => {
data.enabled = !data.enabled
})
},
toEdit(item) {
},
toSearch() {
this.page = 1
this.loadData()
},
clearLimit() {
this.query = {}
this.currentTimeFn()
this.loadData()
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.pageSize = e
this.loadData()
},
currentTimeFn() {
var date = new Date()
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
if (month >= 1 && month <= 9) {
month = '0' + month
}
if (day >= 0 && day <= 9) {
day = '0' + day
}
this.currentTime = year + '-' + month + '-' + day
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.toolbar {
display: flex;
justify-content: space-between;
}
.content {
margin-top: 15px;
overflow: auto;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment