csi-financial-front/src/views/pages/business/jianguan/personnel.vue

<template>
	<div class="container">
		<div class="main">
			<el-form class="el_form" style="width: 100%; display: flex; justify-content: space-between">
				<ZButton @btnClick="showAddDialog">
					<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-input v-model="queryFrom.nickname" placeholder="请输入姓名" @change="getData"></el-input>
					</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="1"></el-option>
							<el-option label="启用" value="0"></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" class="table" @currentChange="currentChange" @sizeChange="sizeChange">
				<el-table-column prop="nickname" label="姓名" align="left" />
				<el-table-column prop="phone" 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="doFenUserStatusFn(scope.row, 1)">禁用</el-button>
						<el-button type="text" v-if="scope.row.status == 1" @click="doFenUserStatusFn(scope.row, 0)">启用</el-button>

						<el-button type="text" @click="openRestPwd(scope.row)">重置密码</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" :intoType="1" @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 './personneDialog/addDialog.vue';
import { useRoute, useRouter } from 'vue-router';
import { getUserPage, doUserStatus } 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 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;
	getData();
}

const restPwdDialog = ref(null);
function openRestPwd(item) {
	restPwdDialog.value.showModal(item);
}

async function getData() {
	tableLoading.value = true;
	let { code, data } = await getUserPage({
		...queryFrom.value,
		type: 1,
		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;
	}
}

/**
 *  分中心-企业管理-启用/禁用企业
 * @param item
 * @param status 0-启用；1-停用
 */
async function doFenUserStatusFn(item, status) {
	tableLoading.value = true;
	let { code } = await doUserStatus({
		id: item.id,
		status,
	}).catch((e) => {
		tableLoading.value = false;
	});
	tableLoading.value = false;
	if (code == 200) {
		ElMessage.success('操作成功');
		getData();
	}
}

function addDialogClose() {
	getData();
}

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getData();
});
</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;
	background: url('/@/assets/images/bk_charts1.png') #f5f7fd no-repeat center 0;
	background-size: 100% auto;
}

.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>