250 lines
7.4 KiB
Vue
250 lines
7.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="main">
|
|||
|
|
<!-- Session.set('roleName', 'operate'); -->
|
|||
|
|
<el-form class="el_form" style="width: 100%; display: flex; justify-content: space-between">
|
|||
|
|
<!-- <ZButton style="margin-left: 10px" @btnClick="showAddDialog" v-if="Session.get('roleName') != 'operate'">
|
|||
|
|
<img :src="iconPlus" class="btn_icon" />
|
|||
|
|
<span style="margin-left: 5px; font-size: 14px">创建</span>
|
|||
|
|
</ZButton> -->
|
|||
|
|
|
|||
|
|
<div style="display: flex">
|
|||
|
|
<el-form-item label="手机号" class="el_form_item">
|
|||
|
|
<el-input v-model="queryFrom.phone" placeholder="请输入手机号" @change="getData"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="企业名称" class="el_form_item" style="margin-left: 20px">
|
|||
|
|
<el-select-v2 :options="companySelectList" v-model="queryFrom.companyName" filterable size="large" @change="getData"> </el-select-v2>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="负责人" class="el_form_item" style="margin-left: 20px" v-if="Session.get('roleName') != 'operate'">
|
|||
|
|
<el-select v-model="queryFrom.optId" @change="getData">
|
|||
|
|
<el-option :value="item.id" :label="item.name" v-for="(item, index) in fenUserList" :key="index"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="账号状态" class="el_form_item" style="margin-left: 20px">
|
|||
|
|
<el-select v-model="queryFrom.status" placeholder="全部" @change="getData">
|
|||
|
|
<el-option label="全部" :value="null"></el-option>
|
|||
|
|
<el-option label="启用" value="0"></el-option>
|
|||
|
|
<el-option label="禁用" value="1"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- <el-button type="primary" style="margin-right: 10px" @click="showAddDialog">创建</el-button> -->
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<table-components
|
|||
|
|
:tableLoading="tableLoading"
|
|||
|
|
:tableData="tableData"
|
|||
|
|
:defaultCurrentPage="defaultCurrentPage"
|
|||
|
|
class="table"
|
|||
|
|
@currentChange="currentChange"
|
|||
|
|
@sizeChange="sizeChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="companyName" label="企业名称" align="left" />
|
|||
|
|
<el-table-column prop="phone" label="手机号" align="left" />
|
|||
|
|
<!-- <el-table-column prop="username" label="账号名称" align="left" /> -->
|
|||
|
|
<el-table-column prop="optName" label="负责人" align="left" />
|
|||
|
|
<el-table-column prop="createTime" label="创建时间" align="left" />
|
|||
|
|
<el-table-column prop="updateTime" label="更新时间" align="left" />
|
|||
|
|
<el-table-column prop="status" label="账号状态" align="left">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<div class="r_point" :style="{ color: scope.row.status == 0 ? '#34A353' : '#FE566B' }">
|
|||
|
|
<div class="point" :style="{ backgroundColor: scope.row.status == 0 ? '#34A353' : '#FE566B' }"></div>
|
|||
|
|
<text v-if="scope.row.status == 0">启用</text>
|
|||
|
|
<text v-if="scope.row.status == 1">停用</text>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" align="left" fixed="right">
|
|||
|
|
<template v-slot="scope">
|
|||
|
|
<el-button type="text" @click="showAddDialog(scope.row)">编辑</el-button>
|
|||
|
|
<el-button type="text" v-if="scope.row.status == 0" @click="doFenCompanyStatusFn(scope.row, 1)">禁用</el-button>
|
|||
|
|
<el-button type="text" v-if="scope.row.status == 1" @click="doFenCompanyStatusFn(scope.row, 0)">启用</el-button>
|
|||
|
|
|
|||
|
|
<el-button type="text" @click="openRestPwd(scope.row)" v-if="Session.get('roleName') != 'operate'">重置密码</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</table-components>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<AddDialog ref="addDialog" @handleClose="addDialogClose"></AddDialog>
|
|||
|
|
<ZNotification :show="messageShow" :data="dialogData" @handleClose="messageShow = false"></ZNotification>
|
|||
|
|
<RestPwdDialog ref="restPwdDialog" :type="0" @handleClose="configDialogClose"></RestPwdDialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts" name="loginIndex">
|
|||
|
|
import { onMounted, reactive, ref, onUnmounted } from 'vue';
|
|||
|
|
import { ElMessage } from 'element-plus';
|
|||
|
|
import { NextLoading } from '/@/utils/loading';
|
|||
|
|
import TableComponents from '/@/components/tableComponents/index.vue';
|
|||
|
|
import AddDialog from './enterpriseDialog/addDialog.vue';
|
|||
|
|
import { useRoute, useRouter } from 'vue-router';
|
|||
|
|
import { getFenCompanyPage, getFenCompanyList, getFenUserList, doFenCompanyStatus } from '/@/api/api';
|
|||
|
|
import ZButton from '/@/components/ZButton/index.vue';
|
|||
|
|
import iconPlus from '/@/assets/images/icon_plus.png';
|
|||
|
|
import ZNotification from '/@/components/ZNotification/index.vue';
|
|||
|
|
import { Session } from '/@/utils/storage';
|
|||
|
|
import RestPwdDialog from '/@/components/dialog/restPwdDialog.vue';
|
|||
|
|
|
|||
|
|
const router = useRouter();
|
|||
|
|
const defaultCurrentPage = ref(1);
|
|||
|
|
const queryFrom = ref({});
|
|||
|
|
const addDialog = ref(null);
|
|||
|
|
const tableLoading = ref(false);
|
|||
|
|
const tableData = reactive({
|
|||
|
|
data: [],
|
|||
|
|
total: 0,
|
|||
|
|
page: 1,
|
|||
|
|
size: 20,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 显示添加账号
|
|||
|
|
function showAddDialog(item) {
|
|||
|
|
if (addDialog.value) addDialog.value.showModal(item);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页码数量改变
|
|||
|
|
function sizeChange(size) {
|
|||
|
|
tableData.size = size;
|
|||
|
|
getData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 翻页
|
|||
|
|
function currentChange(page) {
|
|||
|
|
tableData.page = page;
|
|||
|
|
defaultCurrentPage.value = page;
|
|||
|
|
getData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const companySelectList = ref([]);
|
|||
|
|
// 获取企业信息表中所有的企业
|
|||
|
|
async function getFenCompanySelectListFn() {
|
|||
|
|
let { code, data } = await getFenCompanyList({});
|
|||
|
|
if (code == 200) {
|
|||
|
|
companySelectList.value.push({
|
|||
|
|
value: null,
|
|||
|
|
label: '全部',
|
|||
|
|
});
|
|||
|
|
// companySelectList.value = data
|
|||
|
|
data.forEach((item) => {
|
|||
|
|
companySelectList.value.push({
|
|||
|
|
value: item.companyName,
|
|||
|
|
label: item.companyName,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const fenUserList = ref([]);
|
|||
|
|
// 获取负责人列表
|
|||
|
|
async function getFenUserListFn() {
|
|||
|
|
let { code, data } = await getFenUserList({});
|
|||
|
|
if (code == 200) {
|
|||
|
|
fenUserList.value = data;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function getData() {
|
|||
|
|
tableLoading.value = true;
|
|||
|
|
let { code, data } = await getFenCompanyPage({
|
|||
|
|
...queryFrom.value,
|
|||
|
|
page: tableData.page,
|
|||
|
|
size: tableData.size,
|
|||
|
|
}).catch((e) => {
|
|||
|
|
tableLoading.value = false;
|
|||
|
|
});
|
|||
|
|
if (code == 200) {
|
|||
|
|
tableData.data = data.list;
|
|||
|
|
tableData.total = data.total;
|
|||
|
|
tableLoading.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addDialogClose() {
|
|||
|
|
getData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 分中心-企业管理-启用/禁用企业
|
|||
|
|
* @param item
|
|||
|
|
* @param status 0-启用；1-停用
|
|||
|
|
*/
|
|||
|
|
async function doFenCompanyStatusFn(item, status) {
|
|||
|
|
tableLoading.value = true;
|
|||
|
|
let { code } = await doFenCompanyStatus({
|
|||
|
|
id: item.id,
|
|||
|
|
status,
|
|||
|
|
}).catch((e) => {
|
|||
|
|
tableLoading.value = false;
|
|||
|
|
});
|
|||
|
|
tableLoading.value = false;
|
|||
|
|
if (code == 200) {
|
|||
|
|
ElMessage.success('操作成功');
|
|||
|
|
getData();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function configDialogClose() {
|
|||
|
|
getData();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const restPwdDialog = ref(null);
|
|||
|
|
function openRestPwd(item) {
|
|||
|
|
restPwdDialog.value.showModal(item);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面加载时
|
|||
|
|
onMounted(() => {
|
|||
|
|
NextLoading.done();
|
|||
|
|
getData();
|
|||
|
|
// 获取所有企业
|
|||
|
|
getFenCompanySelectListFn();
|
|||
|
|
// 获取负责人
|
|||
|
|
getFenUserListFn();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@import url('/@/theme/page/page.scss');
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
width: 100%;
|
|||
|
|
min-width: 1400px;
|
|||
|
|
min-height: calc(100vh - 56px);
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background: url('/@/assets/images/bk_charts.png') no-repeat center 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main {
|
|||
|
|
width: 1400px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border: 2px solid #ffffff;
|
|||
|
|
box-shadow: 0 12px 32px -2px rgba(206, 208, 211, 0.8);
|
|||
|
|
border-radius: 0 4px 4px 4px;
|
|||
|
|
padding: 0 24px 24px;
|
|||
|
|
margin: 24px auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.r_point {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 5px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.point {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_icon {
|
|||
|
|
width: 15px;
|
|||
|
|
height: 15px;
|
|||
|
|
}
|
|||
|
|
</style>
|