358 lines
9.0 KiB
Vue
358 lines
9.0 KiB
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> |