<template>
|
<el-row ref="searchRef">
|
<el-col>
|
<el-form :inline="true" :model="formSearch">
|
<el-form-item label="省/市/区/镇" prop="_locations">
|
<el-cascader
|
v-model="formSearch._locations"
|
:options="locations"
|
placeholder="省/市/区/镇"
|
:props="props"
|
style="width: 280px"
|
/>
|
</el-form-item>
|
<el-form-item label="场景名称" prop="searchText">
|
<el-input
|
clearable
|
v-model="formSearch.searchText"
|
placeholder="输入搜索场景名称"
|
/>
|
</el-form-item>
|
<el-form-item label="用户类型" prop="scensetypeid">
|
<el-select
|
v-model="formSearch.scensetypeid"
|
placeholder="用户类型"
|
style="width: 75px"
|
>
|
<el-option
|
v-for="s in sceneTypes"
|
:key="s.value"
|
:label="s.label"
|
:value="s.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="上线状态" prop="online">
|
<el-select
|
v-model="formSearch.online"
|
placeholder="全部"
|
style="width: 75px"
|
>
|
<el-option
|
v-for="s in onlineStatus"
|
:key="s.value"
|
:label="s.label"
|
:value="s.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button icon="Search" type="primary" @click="onSearch"
|
>查询</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-row>
|
<el-table
|
:data="tableData"
|
v-loading="loading"
|
table-layout="fixed"
|
:row-class-name="tableRowClassName"
|
:height="tableHeight"
|
>
|
<el-table-column prop="realname" label="公司" align="center">
|
<template #default="scope">
|
<el-tooltip
|
effect="dark"
|
:content="scope.row.realname"
|
placement="top-start"
|
:show-after="500"
|
>
|
{{ scope.row.realname }}
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column prop="telephone" label="电话" align="center" />
|
<el-table-column
|
prop="extension1"
|
label="区县"
|
width="120"
|
align="center"
|
/>
|
<el-table-column prop="usertype" label="类型" align="center" />
|
<el-table-column prop="departmentname" label="名称">
|
<template #default="scope">
|
<el-tooltip
|
effect="dark"
|
:content="scope.row.departmentname"
|
placement="top-start"
|
:show-after="500"
|
>
|
{{ scope.row.departmentname }}
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="140">
|
<template #header>
|
<el-button icon="DocumentAdd" type="success" @click="drawer = true"
|
>新增用户</el-button
|
>
|
</template>
|
<template #default="scope">
|
<el-button
|
:loading="scope.row.loading1"
|
type="default"
|
size="small"
|
@click="editRow(scope)"
|
>编辑</el-button
|
>
|
<el-button
|
:loading="scope.row.loading2"
|
:type="scope.row.extension1 != '0' ? 'danger' : 'primary'"
|
size="small"
|
@click="itemActive(scope)"
|
>{{ scope.row.extension1 != '0' ? '下线' : '上线' }}</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-pagination
|
ref="paginationRef"
|
class="el-pagination"
|
v-model:current-page="currentPage"
|
v-model:page-size="pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
:background="true"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
/>
|
|
<CompUserInfoAddDrawer v-model:drawer="drawer"></CompUserInfoAddDrawer>
|
</template>
|
|
<script>
|
import { enumScene_1 } from '@/enum/scene';
|
import { enumLocation } from '@/enum/location';
|
import { enumOnlineStatus } from '@/enum/onlineStatus';
|
import userApi from '@/api/fytz/userApi';
|
import { useLoadingStore } from '@/stores/loadingStore';
|
import { mapStores } from 'pinia';
|
import { useMessageBoxTip } from '@/composables/messageBox';
|
import CompUserInfoAddDrawer from './components/CompUserInfoAddDrawer.vue';
|
|
export default {
|
components: {
|
CompUserInfoAddDrawer,
|
},
|
data() {
|
return {
|
locations: enumLocation(),
|
sceneTypes: enumScene_1(),
|
onlineStatus: enumOnlineStatus(),
|
formSearch: {
|
_locations: [],
|
searchText: '',
|
scensetypeid: '',
|
online: '',
|
},
|
|
props: {
|
checkStrictly: true,
|
},
|
|
tableData: [],
|
tableHeight: '500',
|
loading: false,
|
|
currentPage: 1,
|
pageSize: 20,
|
total: 0,
|
|
drawer: false,
|
};
|
},
|
watch: {
|
currentPage(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onSearch();
|
}
|
},
|
pageSize(nValue, oValue) {
|
if (nValue != oValue) {
|
this.onSearch();
|
}
|
},
|
},
|
computed: {
|
...mapStores(useLoadingStore),
|
},
|
methods: {
|
onSearch() {
|
this.loading = true;
|
const f = this.formSearch;
|
const area = {};
|
// 行政区划
|
f._locations.length > 0
|
? ([area.provinceCode, area.provinceName] = f._locations[0])
|
: ([area.provinceCode, area.provinceName] = [null, null]);
|
if (area.provinceCode == '0')
|
[area.provinceCode, area.provinceName] = [null, null];
|
f._locations.length > 1
|
? (area.citycode = f._locations[1][0])
|
: (area.citycode = null);
|
f._locations.length > 2
|
? ([area.districtCode, area.districtName] = f._locations[2])
|
: ([area.districtCode, area.districtName] = [null, null]);
|
f._locations.length > 3
|
? (area.towncode = f._locations[3][0])
|
: (area.towncode = null);
|
// 场景类型
|
area.scensetypeid = f.scensetypeid;
|
if (area.scensetypeid == '0') area.scensetypeid = null;
|
// 上下线状态
|
area.online = f.online;
|
// 关键字
|
area.searchText = f.searchText;
|
|
userApi
|
.fetchUser('00EQQVnE9QFvbkQr', this.currentPage, this.pageSize, area)
|
.then((res) => {
|
if (res) {
|
this.tableData = res.data;
|
this.currentPage = res.headers.currentPage;
|
console.log(res.headers);
|
this.total = parseInt(res.headers.totalPage) * this.pageSize;
|
}
|
})
|
.finally(() => {
|
this.loading = false;
|
});
|
},
|
calcTableHeight() {
|
const h1 = this.$refs.searchRef.$el.offsetHeight;
|
const h2 = this.$refs.paginationRef.$el.offsetHeight;
|
// return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
|
return `calc(100vh - ${h1}px - ${h2}px - 60px - var(--el-main-padding) * 2)`;
|
},
|
editRow(scope) {
|
scope.row.loading1 = true;
|
this.loadingStore.loadingStatus.push(() => (scope.row.loading1 = false));
|
this.$router.push(`userEdit/${scope.row.guid}`);
|
},
|
itemActive(scope) {
|
const rb = {};
|
rb.guid = scope.row.guid;
|
rb.extension1 = scope.row.extension1 != '0' ? '0' : '1';
|
const msg = scope.row.extension1 != '0' ? '下线' : '上线';
|
useMessageBoxTip({
|
confirmMsg: `确认${msg}该场景？`,
|
confirmTitle: msg,
|
onConfirm: () => {
|
scope.row.loading2 = true;
|
userApi
|
.updateScene(rb)
|
.then((res) => {
|
if (res == 1) {
|
scope.row.extension1 = rb.extension1;
|
}
|
})
|
.finally(() => {
|
scope.row.loading2 = false;
|
});
|
},
|
});
|
},
|
tableRowClassName({ row }) {
|
return row.extension1 != '0' ? 'online-row' : 'offline-row';
|
},
|
},
|
mounted() {
|
this.formSearch.scensetypeid = this.sceneTypes[0].value;
|
this.formSearch._locations = [this.locations[0].value];
|
this.formSearch.online = this.onlineStatus[0].value;
|
this.tableHeight = this.calcTableHeight();
|
this.onSearch();
|
},
|
};
|
</script>
|
<style>
|
.el-table .offline-row {
|
background-color: var(--el-disabled-bg-color);
|
color: var(--el-disabled-text-color);
|
}
|
.el-table .cell {
|
white-space: nowrap;
|
color: var(--el-disabled-text-color);
|
}
|
.el-pagination {
|
background-color: var(--el-color-white);
|
padding-top: 20px;
|
border-top: 1px solid rgba(0, 0, 0, 0.096);
|
/* margin-top: 2px; */
|
}
|
</style>
|
