mart-admin/src/views/clients/index.vue

<template>
    <div class="system-dept-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-dept-search mb15">
					<el-input size="default" placeholder="请输入用户名称" v-model="state.tableData.param.username" class="ml10" style="max-width: 250px;margin-right: 20px;" clearable> </el-input>
				<el-button @click="getTableData" size="default" type="primary" class="ml10" style="margin-right: 15px;">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button @click="reset" size="default" type="primary" class="ml10"  style="margin-right: 15px;">
					<el-icon>
						<ele-RefreshRight />
					</el-icon>
					重置
				</el-button>
				<el-button @click="pushMessages" size="default" type="primary" class="ml10" :disabled="btnDisabled">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					消息推送
				</el-button>
			</div>
			<el-table 
				:data="state.tableData.data" 
				v-loading="state.tableData.loading" 
				style="width: 100%"  
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" :selectable="selectable" width="100" />
				<el-table-column prop="username" label="账户"  show-overflow-tooltipalign="center"></el-table-column>
				<el-table-column prop="nickName" label="昵称"  show-overflow-tooltip  align="center"></el-table-column>
				<el-table-column prop="phone" label="手机号"  show-overflow-tooltip  align="center"></el-table-column>
				<el-table-column prop="mail" label="邮箱" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column prop="registerTime" label="注册时间" :formatter="dateFormatter" show-overflow-tooltip  align="center"></el-table-column>
				<!-- <el-table-column prop="state" label="状态"  show-overflow-tooltip width="255px" align="center"></el-table-column>		 -->
				<el-table-column label="操作"  align="center">
					<template #default="scope">
						<el-button size="small" text type="primary" :disabled="scope.row.enable?true:false" @click="scope.row.enable=!scope.row.enable">启用</el-button>
						<el-button size="small" text type="primary" :disabled="scope.row.enable?false:true" @click="scope.row.enable=!scope.row.enable">禁用</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 新增或编辑弹窗  -->
			<el-drawer
				v-model="dialog"
				title="消息推送"
				@close="resetForm"
				direction="rtl"
				size="45%"
			>
				<div class="demo-drawer__content">
					<el-form  
						ref="ruleFormRef"
						style="max-width: 85%"
						:model="state.formData"
						:rules="state.rules"
						label-width="100px"
						class="demo-ruleForm"
						:size="formSize"
						:label-position="labelPosition"
						status-icon
						v-loading="state.formData.loading"
					>
						<el-form-item label="用户:" prop="userList">
							<el-select 
								v-model="users" 
								multiple
								placeholder="请选择" 
								clearable
							>
								<el-option 
									v-for="(item,index) in state.formData.userList" 
									:key="index" 
									:label="item.label"
									:value="item.value"
									:selected="true"
								>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="标题:" prop="title">
							<el-input v-model="state.formData.title" />
						</el-form-item>
						<el-form-item label="内容:" prop="content">
							<el-mention
								v-model="state.formData.content"
								type="textarea"
								:options="options"
								placeholder="请输入..."
							/>
						</el-form-item>
					</el-form>
					<div class="demo-drawer__footer">
						<el-button @click="submitForm" :loading="loading" style="margin-right: 30px;" >
							{{ loading ? '推送 ...' : '推送' }}
						</el-button>
						<el-button type="primary" @click="cancelForm">取消</el-button>
					</div>
				</div>
			</el-drawer>
			<!-- 分页器 -->
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="state.tableData.param.current"
				background
				v-model:page-size="state.tableData.param.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="clients">
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElDrawer, ElMessage, ElMessageBox, TableColumnCtx } from 'element-plus';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import type { ComponentSize, FormInstance, FormRules, UploadFile, UploadProps, UploadUserFile } from 'element-plus'
import { baseUrlHost } from '../../api/baseUrlHost';
import { clientsApi } from '/@/api/clients';
import { userApi } from '/@/api/user';

const userapi = userApi();

const options = [
	{
		label: 'Fuphoenixes',
		value: 'Fuphoenixes',
	},
	{
		label: 'kooriookami',
		value: 'kooriookami',
	}
]

const router = useRouter();

// 数据
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			username:'',
			usertype:2,
			current: 1,
			size: 10,
		},
	},
	formData: {
		nickName:'',
		title:'',
		content: '',
		userList:[],
		loading: false
	},
	rules: {
		userList: [
    		{ required: true, message: '请选择用户', trigger: 'blur' }
		],
		title: [
			{ required: true, message: '请输入标题', trigger: 'blur' }
		],
		content: [
			{ required: true, message: '请输入内容', trigger: 'blur' },
		],
	},
});

// #region

// 引入 api 请求接口
const clientApi = clientsApi();

// 获取表格数据
const getTableData = async() => {
	try {
		state.tableData.loading = true;
		let res = await userapi.getUserList(state.tableData.param);
		// console.log(res);
		if(res?.success){
			state.tableData.data = res.data.records.map((item:any) => {
				return {
					...item,
					nickName:item.nickName || '暂无',
					phone: item.phone || '暂无',
					mail: item.mail || '暂无',
				}
			});
			state.tableData.total = res.data.total;
		}else{
			ElMessage.error('客户列表获取失败！');
		}
	} catch (error) {
	} finally {
		state.tableData.loading = false;
	}
};
const btnDisabled = ref(true)
const userList = ref([])

const handleSelectionChange = (val: User[]) => {
	console.log("多选.....", val);
	userList.value = val;
	console.log("多选.....", userList.value.length);
	if (userList.value.length) {
		btnDisabled.value = false;		
		console.log("多选11111", btnDisabled.value);
	} else {
		btnDisabled.value = true;		
		console.log("多选22222", btnDisabled.value);
	}
}

const enable = ref(true);

const switchState = (scope,staus) => {
	console.log("switchState11",scope);
	console.log("switchState22", staus);
	scope = staus;
	
}
// 重置
const reset = () =>{
	state.tableData.param = {
		username: '',
		usertype:2,
		current: 1,
		size: 10,
	}
	getTableData();
}

// 日期格式化
const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
	let date = new Date(row.createtime);
  	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
}

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.size = val;
	getTableData();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.current = val;
	getTableData();
};
// #endregion

// #region
const dialog = ref(false)
const users = ref([])

const formSize = ref<ComponentSize>('large')
const labelPosition = ref<FormProps['labelPosition']>('Left')
const ruleFormRef = ref<FormInstance>()


const pushMessages = async () => {
	console.log("pushMessages", userList.value);
	state.formData.userList = userList.value.map((item) => {
		return {
			value: item.account,
			label: item.account,
		};
	})
	state.formData.userList.forEach((item) => {
		users.value.push(item.value);
	})
	dialog.value = true;
}

const loading = ref(false)

//推送
const submitForm = () => {
	ruleFormRef.value?.validate(async(valid: boolean) => {
		if (valid) {
			console.log("推送推送推送推送");
        }else{
			ElMessage.error('请填写必要信息！');
			loading.value = false;
		}
    });
}

// 表单重置
const resetForm = () => {
	ruleFormRef.value?.resetFields();
	state.formData.userList = [];
	users.value = [];
}

//取消 
const cancelForm = () => {
	dialog.value = false;
	resetForm();
	console.log(state);
	
}
// #endregion

onMounted(() => {
	getTableData();
})

</script>

<style scoped lang="scss">
.system-dept-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
::v-deep .el-drawer .el-drawer__header {
	margin: 15px 0 20px 0!important;
    border-bottom: 0!important;
}
::v-deep .el-drawer__title {
    font-size: 28px!important;
}
::v-deep .el-form-item--large{
    --font-size: 18px;
    margin-bottom: 28px!important;
}

.demo-drawer__footer{
	margin:40px 0 0 125px!important;
}

::v-deep .disabled{
    .el-upload--picture-card{
      display: none;
    }
}

::v-deep .el-textarea__inner{
	min-height: 200px!important;
}
</style>