|
|
|
@ -3,50 +3,67 @@ |
|
|
|
<!-- 搜索区域 --> |
|
|
|
<div class="search-container"> |
|
|
|
<div class="search-form"> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">账号</span> |
|
|
|
<el-input |
|
|
|
v-model="searchForm.dccode" |
|
|
|
placeholder="请输入账号" |
|
|
|
clearable |
|
|
|
style="height: 36px; width: 140px;" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">姓名</span> |
|
|
|
<el-input |
|
|
|
v-model="searchForm.dcname" |
|
|
|
placeholder="请输入姓名" |
|
|
|
clearable |
|
|
|
style="height: 36px; width: 180px;" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">地区</span> |
|
|
|
<el-select |
|
|
|
v-model="searchForm.market" |
|
|
|
placeholder="请选择地区" |
|
|
|
clearable |
|
|
|
filterable |
|
|
|
style="height: 36px; width: 160px;" |
|
|
|
:loading="isRegionLoading" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="region in regionList" |
|
|
|
:key="region.ID" |
|
|
|
:label="region.Name" |
|
|
|
:value="region.ID" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">注册方式</span> |
|
|
|
<el-input |
|
|
|
v-model="searchForm.register_type" |
|
|
|
placeholder="请输入手机号/邮箱" |
|
|
|
clearable |
|
|
|
style="height: 36px; width: 220px;" |
|
|
|
/> |
|
|
|
<div class="search-group"> |
|
|
|
|
|
|
|
<div class="search-group1"> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">账号</span> |
|
|
|
<el-input |
|
|
|
v-model="searchForm.dccode" |
|
|
|
placeholder="请输入账号" |
|
|
|
clearable |
|
|
|
style="height: 36px; width: 140px;" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">姓名</span> |
|
|
|
<el-input |
|
|
|
v-model="searchForm.dcname" |
|
|
|
placeholder="请输入姓名" |
|
|
|
clearable |
|
|
|
style="height: 36px; width: 140px;" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">来源</span> |
|
|
|
<el-select v-model="searchForm.origin_id" placeholder="请选择来源" clearable filterable style="height: 36px; width: 160px" :loading="isOriginLoading"> |
|
|
|
<el-option v-for="origin in originList" :key="origin.origin_id" :label="origin.origin_name" :value="origin.origin_id" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">地区</span> |
|
|
|
<el-select |
|
|
|
v-model="searchForm.market" |
|
|
|
placeholder="请选择地区" |
|
|
|
clearable |
|
|
|
filterable |
|
|
|
style="height: 36px; width: 160px;" |
|
|
|
:loading="isRegionLoading" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="region in regionList" |
|
|
|
:key="region.ID" |
|
|
|
:label="region.Name" |
|
|
|
:value="region.ID" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="search-group2"> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">注册方式</span> |
|
|
|
<el-input |
|
|
|
v-model="searchForm.register_type" |
|
|
|
placeholder="请输入手机号/邮箱" |
|
|
|
clearable |
|
|
|
style="height: 36px; width: 220px;" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="search-item"> |
|
|
|
<span class="form-label">注册时间</span> |
|
|
|
<el-date-picker v-model="searchDate" type="datetimerange" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="button-group"> |
|
|
|
<el-button type="primary" @click="search">搜索</el-button> |
|
|
|
@ -73,15 +90,27 @@ |
|
|
|
{{ (currentPage - 1) * pageSize + scope.$index + 1 }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="jwcode" label="账号" align="center" header-align="center"/> |
|
|
|
<el-table-column prop="jwcode" label="账号" align="center" header-align="center" width="120"/> |
|
|
|
<el-table-column prop="username" label="姓名" align="center" header-align="center" width="150"/> |
|
|
|
<el-table-column prop="country" label="地区" align="center" header-align="center"/> |
|
|
|
<el-table-column prop="dialingCode" label="手机区号" align="center" header-align="center" width="100"/> |
|
|
|
<el-table-column prop="mobiles" label="手机号" align="center" header-align="center"/> |
|
|
|
<el-table-column prop="emails" label="邮箱" align="center" header-align="center" width="200"/> |
|
|
|
<el-table-column prop="regtime" label="注册时间" align="center" header-align="center" sortable="custom" width="180"/> |
|
|
|
<el-table-column prop="expire_time" label="到期时间" align="center" header-align="center" sortable="custom" width="180"/> |
|
|
|
<el-table-column label="操作" width="180" align="center" header-align="center"> |
|
|
|
<el-table-column prop="origin_name" label="来源" align="center" header-align="center" width="200"/> |
|
|
|
<el-table-column prop="country" label="地区" align="center" header-align="center" width="150"/> |
|
|
|
<el-table-column prop="dialingCode" label="手机区号" align="center" header-align="center" width="80"/> |
|
|
|
<el-table-column prop="mobiles" label="手机号" align="center" header-align="center" width="200"/> |
|
|
|
<!-- <el-table-column prop="emails" label="邮箱" align="center" header-align="center" width="200"/> --> |
|
|
|
<el-table-column prop="emails" label="邮箱" align="center" header-align="center" width="150"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-tooltip |
|
|
|
effect="dark" |
|
|
|
:content="scope.row.emails" |
|
|
|
placement="top" |
|
|
|
> |
|
|
|
<span class="ellipsis-text">{{ scope.row.emails }}</span> |
|
|
|
</el-tooltip> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="regtime" label="注册时间" align="center" header-align="center" sortable="custom" width="200"/> |
|
|
|
<el-table-column prop="expire_time" label="到期时间" align="center" header-align="center" sortable="custom" width="200"/> |
|
|
|
<el-table-column label="操作" width="180" align="center" header-align="center" fixed="right"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> |
|
|
|
<el-button type="text" @click="handleLog(scope.row.jwcode)">操作日志</el-button> |
|
|
|
@ -186,7 +215,7 @@ |
|
|
|
<script setup> |
|
|
|
import { ref, reactive, onMounted } from 'vue'; |
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
import { marketListApi, userMListApi, exportMarketApi, exitMApi } from '../../api/userPermissions' |
|
|
|
import { marketListApi, userMListApi, getOriginListApi,exportMarketApi, exitMApi } from '../../api/userPermissions' |
|
|
|
import router from '../../router'; |
|
|
|
|
|
|
|
// token |
|
|
|
@ -196,9 +225,12 @@ const token = localStorage.getItem('token') |
|
|
|
const searchForm = reactive({ |
|
|
|
dccode: '', |
|
|
|
dcname: '', |
|
|
|
origin_id: "", |
|
|
|
market: '', |
|
|
|
register_type: '' |
|
|
|
}); |
|
|
|
const searchDate = ref([]); |
|
|
|
|
|
|
|
|
|
|
|
// 排序参数 |
|
|
|
const sortProp = ref(null); |
|
|
|
@ -217,6 +249,11 @@ const pageSize = ref(10); |
|
|
|
const regionList = ref([]); |
|
|
|
const isRegionLoading = ref(false); |
|
|
|
|
|
|
|
|
|
|
|
// 来源下拉框 |
|
|
|
const originList = ref([]); |
|
|
|
const isOriginLoading = ref(false); |
|
|
|
|
|
|
|
// 弹框显隐控制 |
|
|
|
const dialogVisible = ref(false); |
|
|
|
|
|
|
|
@ -397,6 +434,23 @@ const resetForm = () => { |
|
|
|
operator.value = ''; |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取来源下拉框 |
|
|
|
const fetchOriginList = async () => { |
|
|
|
try { |
|
|
|
isOriginLoading.value = true; |
|
|
|
const data = await getOriginListApi({ |
|
|
|
token: token, |
|
|
|
app_form: "en", |
|
|
|
}); |
|
|
|
originList.value = data.list; |
|
|
|
} catch (error) { |
|
|
|
console.error("获取来源下拉框失败:", error); |
|
|
|
originList.value = []; |
|
|
|
} finally { |
|
|
|
isOriginLoading.value = false; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取地区列表 |
|
|
|
const fetchRegionList = async () => { |
|
|
|
try { |
|
|
|
@ -422,8 +476,11 @@ const fetchTableData = async () => { |
|
|
|
token: token, |
|
|
|
dccode: searchForm.dccode, |
|
|
|
dcname: searchForm.dcname, |
|
|
|
origin_id: searchForm.origin_id, |
|
|
|
market: searchForm.market, |
|
|
|
register_type: searchForm.register_type, |
|
|
|
start_time: searchDate.value && searchDate.value[0] ? searchDate.value[0] : "", |
|
|
|
end_time: searchDate.value && searchDate.value[1] ? searchDate.value[1] : "", |
|
|
|
sort_field: sortProp.value, |
|
|
|
sort_order: sortOrder.value, |
|
|
|
page: currentPage.value, |
|
|
|
@ -443,6 +500,7 @@ const fetchTableData = async () => { |
|
|
|
|
|
|
|
// 组件挂载时:获取地区列表 + 初始化表格数据 |
|
|
|
onMounted(() => { |
|
|
|
fetchOriginList() |
|
|
|
fetchRegionList(); |
|
|
|
fetchTableData(); |
|
|
|
}); |
|
|
|
@ -465,8 +523,11 @@ const exportExcel = async () => { |
|
|
|
token: token, |
|
|
|
dccode: searchForm.dccode, |
|
|
|
dcname: searchForm.dcname, |
|
|
|
origin_id: searchForm.origin_id, |
|
|
|
market: searchForm.market, |
|
|
|
register_type: searchForm.register_type, |
|
|
|
start_time: searchDate.value && searchDate.value[0] ? searchDate.value[0] : "", |
|
|
|
end_time: searchDate.value && searchDate.value[1] ? searchDate.value[1] : "", |
|
|
|
sort_field: sortProp.value, |
|
|
|
sort_order: sortOrder.value |
|
|
|
}; |
|
|
|
@ -487,8 +548,10 @@ const exportList = () => { |
|
|
|
const resetBn = () => { |
|
|
|
searchForm.dccode = ''; |
|
|
|
searchForm.dcname = ''; |
|
|
|
searchForm.origin_id = ''; |
|
|
|
searchForm.market = ''; |
|
|
|
searchForm.register_type = ''; |
|
|
|
searchDate.value = []; |
|
|
|
sortProp.value = null; |
|
|
|
sortOrder.value = null; |
|
|
|
currentPage.value = 1; |
|
|
|
@ -550,16 +613,16 @@ const handleSortChange = (sort) => { |
|
|
|
/* 搜索区域 */ |
|
|
|
.search-container { |
|
|
|
display: flex; |
|
|
|
height: 67px; |
|
|
|
height: auto; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: flex-start; |
|
|
|
gap: 10px; |
|
|
|
gap: 12px; |
|
|
|
align-self: stretch; |
|
|
|
border-radius: 8px; |
|
|
|
background: #FEFAF9; |
|
|
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); |
|
|
|
padding: 0 15px; |
|
|
|
padding: 15px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
@ -569,9 +632,29 @@ const handleSortChange = (sort) => { |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
gap: 15px; |
|
|
|
flex-wrap: nowrap; |
|
|
|
flex-wrap: wrap; |
|
|
|
row-gap: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 搜索组 */ |
|
|
|
.search-group { |
|
|
|
} |
|
|
|
|
|
|
|
.search-group1{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.search-group2{ |
|
|
|
display: flex; |
|
|
|
margin-top: 15px; |
|
|
|
align-items: center; |
|
|
|
gap: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 单个搜索项 */ |
|
|
|
.search-item { |
|
|
|
display: flex; |
|
|
|
@ -609,7 +692,7 @@ const handleSortChange = (sort) => { |
|
|
|
border-radius: 12px !important; |
|
|
|
overflow: hidden !important; |
|
|
|
border: 1px solid #e4e7ed !important; |
|
|
|
min-height: 750px; |
|
|
|
height: 700px; |
|
|
|
} |
|
|
|
|
|
|
|
.table-header { |
|
|
|
@ -634,6 +717,15 @@ const handleSortChange = (sort) => { |
|
|
|
background-color: #fafafa !important; |
|
|
|
} |
|
|
|
|
|
|
|
.ellipsis-text { |
|
|
|
display: inline-block; |
|
|
|
width: 100%; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
|
|
|
|
/* 分页组件样式 */ |
|
|
|
.demo-pagination-block { |
|
|
|
display: flex; |
|
|
|
|