Initial commit: SmartClean SaaS platform
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
xqzp2026
556
frontend/witcleansystem/src/Page/TaskCenter/UserReportManage.vue
Normal file
556
frontend/witcleansystem/src/Page/TaskCenter/UserReportManage.vue
Normal file
@@ -0,0 +1,556 @@
|
||||
<template>
|
||||
<el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
|
||||
<div class="task-box" v-if="!pageBasicsData.loading">
|
||||
<div ref="topSearchRef">
|
||||
<!-- 顶部功能按钮 -->
|
||||
<qu-button-group
|
||||
:buttonList="[
|
||||
{ cnName: '新建', enName: 'add', theme: 'success', icon: 'plus' },
|
||||
{ cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
|
||||
]"
|
||||
@buttonClick="buttonClick"
|
||||
/>
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-area">
|
||||
<el-form
|
||||
ref="screenFormRef"
|
||||
:model="pageBasicsData.screenForm"
|
||||
inline
|
||||
size="small"
|
||||
>
|
||||
<el-form-item label="所属站点" prop="districtId">
|
||||
<div class="screen-item">
|
||||
<el-select
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
v-model="pageBasicsData.screenForm.districtId"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in pageBasicsData.districtList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="管理人员" prop="userId">
|
||||
<div class="screen-item">
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择管理人员"
|
||||
v-model="pageBasicsData.screenForm.userId"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in pageBasicsData.personSelectList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<div class="screen-item">
|
||||
<el-input
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
v-model="pageBasicsData.screenForm.mobile"
|
||||
></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" round @click="restSearch"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button round icon="Refresh" type="warning" @click="clearScreen"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="main-table">
|
||||
<qu-table
|
||||
:custom="true"
|
||||
:showPage="true"
|
||||
:showIndex="true"
|
||||
:height="pageBasicsData.tableHeight"
|
||||
:tableData="tableData"
|
||||
:tableHeader="tableHeader"
|
||||
:pageProps="pageProps"
|
||||
@pageChange="pageChange"
|
||||
:rowButtons="rowButtons"
|
||||
@rowButtonClick="rowButtonClick"
|
||||
@fetchTableAttr="fetchTableAttr"
|
||||
showOverflowTooltip
|
||||
></qu-table>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
width="600px"
|
||||
v-model="addOrEditRelevant.openDialog"
|
||||
:title="addOrEditRelevant.currentForm.id ? '编辑' : '新建'"
|
||||
@close="closeDialog"
|
||||
>
|
||||
<el-form
|
||||
label-width="130px"
|
||||
ref="addOrEditRef"
|
||||
:model="addOrEditRelevant.currentForm"
|
||||
>
|
||||
<el-form-item
|
||||
label="所属站点"
|
||||
prop="districtId"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择所属站点',
|
||||
trigger: 'change',
|
||||
}"
|
||||
>
|
||||
<el-select
|
||||
style="width: 350px"
|
||||
filterable
|
||||
placeholder="请选择所属站点"
|
||||
:disabled="addOrEditRelevant.currentForm.id ? true : false"
|
||||
v-model="addOrEditRelevant.currentForm.districtId"
|
||||
>
|
||||
<el-option
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in pageBasicsData.districtList"
|
||||
:key="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="管理人员"
|
||||
prop="userIds"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择管理人员',
|
||||
trigger: 'change',
|
||||
}"
|
||||
>
|
||||
<el-input
|
||||
style="width: 350px"
|
||||
placeholder="请选择管理人员"
|
||||
disabled
|
||||
v-model="addOrEditRelevant.currentForm.userIds"
|
||||
v-if="addOrEditRelevant.functionaryList.length <= 0"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
width: 350px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 5px;
|
||||
background-color: #f5f7fa;
|
||||
"
|
||||
v-else
|
||||
>
|
||||
<el-tag
|
||||
style="margin: 5px"
|
||||
v-for="tag in addOrEditRelevant.functionaryList"
|
||||
:key="tag.name"
|
||||
:type="tag.type"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button
|
||||
v-if="!addOrEditRelevant.currentForm.id"
|
||||
type="primary"
|
||||
size="small"
|
||||
round
|
||||
style="margin-left: 5px"
|
||||
@click="goSelectPrincipal"
|
||||
>去选择</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="管理区域"
|
||||
prop="scenes"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请选择管理区域',
|
||||
trigger: 'change',
|
||||
}"
|
||||
>
|
||||
<el-cascader
|
||||
style="width: 350px"
|
||||
ref="sceneRef"
|
||||
placeholder=""
|
||||
v-model="addOrEditRelevant.currentForm.scenes"
|
||||
:options="addOrEditRelevant.scenesOptions"
|
||||
:props="{
|
||||
expandTrigger: 'hover',
|
||||
checkStrictly: false,
|
||||
children: 'childNode',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
multiple: true,
|
||||
}"
|
||||
clearable
|
||||
:show-all-levels="false"
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
@change="taskSceneHandleChange"
|
||||
@focus="
|
||||
() => {
|
||||
if (addOrEditRelevant.scenesOptions.length <= 0) {
|
||||
$message.warning('当前选择的站点暂无管理区域,请重新选择!');
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button style="width: 90px" @click="closeDialog">取消</el-button>
|
||||
<el-button style="width: 90px" type="primary" @click="submit"
|
||||
>提交</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 选择负责人 -->
|
||||
<div v-if="showSelectPrincipal">
|
||||
<el-dialog v-model="showSelectPrincipal" title="选择负责人" fullscreen>
|
||||
<selectPrincipal
|
||||
@closePrincipalDialog="closePrincipalDialog"
|
||||
:districtId="addOrEditRelevant.currentForm.districtId"
|
||||
:selectedPersonnel="addOrEditRelevant.functionaryList"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch, nextTick } from "vue";
|
||||
import templateHooks from "@/Hooks/templateHooks.js";
|
||||
import { userReportService } from "@/ApiService/taskCenterService";
|
||||
import { dropdownService } from "@/ApiService/dropdownService";
|
||||
import selectPrincipal from "@/Components/userReportManage/selectPrincipal.vue";
|
||||
|
||||
//页面基础数据
|
||||
const pageBasicsData = reactive({
|
||||
loading: true, // 页面加载状态
|
||||
tableHeight: 200, //表格高度
|
||||
screenForm: {
|
||||
districtId: "",
|
||||
userId: "",
|
||||
mobile: "",
|
||||
},
|
||||
districtList: [], // 所属站点下拉列表
|
||||
personSelectList: [], // 管理人员下拉
|
||||
});
|
||||
const topSearchRef = ref(); //顶部搜索区域ref
|
||||
const screenFormRef = ref(); //搜索区ref
|
||||
|
||||
// 新建or编辑
|
||||
const addOrEditRelevant = reactive({
|
||||
openDialog: false,
|
||||
currentForm: {
|
||||
districtId: "",
|
||||
userIds: [],
|
||||
scenes:[],
|
||||
serviceAreas: [],
|
||||
},
|
||||
functionaryList: [],
|
||||
scenesOptions: [],
|
||||
});
|
||||
const addOrEditRef = ref();
|
||||
const sceneRef = ref();
|
||||
const showSelectPrincipal = ref(false); //选择人员
|
||||
|
||||
//#region watch定义start
|
||||
// 设置表格高度
|
||||
watch(
|
||||
() => topSearchRef.value,
|
||||
(val) => {
|
||||
let wHeight =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
nextTick(() => {
|
||||
pageBasicsData.tableHeight = wHeight - val.clientHeight - 184;
|
||||
});
|
||||
}
|
||||
);
|
||||
// 站点变化清空其它查询条件
|
||||
watch(
|
||||
() => pageBasicsData.screenForm.districtId,
|
||||
(val) => {
|
||||
if (val) {
|
||||
for (const key in pageBasicsData.screenForm) {
|
||||
if (key !== "districtId") {
|
||||
pageBasicsData.screenForm[key] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
fetchTaskPerson(val);
|
||||
}
|
||||
);
|
||||
// add/edit 站点变化
|
||||
watch(
|
||||
() => addOrEditRelevant.currentForm.districtId,
|
||||
(val) => {
|
||||
if (val && addOrEditRelevant.openDialog) {
|
||||
fetchTaskScene(val);
|
||||
}
|
||||
}
|
||||
);
|
||||
//#endregion watch定义end
|
||||
onMounted(() => {
|
||||
fetchDistricts();
|
||||
buttonsClickFun.data = {
|
||||
edit: () => {
|
||||
if (addOrEditRelevant.currentForm.serviceAreas?.length > 0) {
|
||||
addOrEditRelevant.currentForm.scenes =
|
||||
addOrEditRelevant.currentForm.serviceAreas.map((item) => item.id);
|
||||
}
|
||||
const {
|
||||
mobile,
|
||||
userId: id,
|
||||
userName: name,
|
||||
} = addOrEditRelevant.currentForm;
|
||||
addOrEditRelevant.functionaryList.push({ mobile, id, name });
|
||||
addOrEditRelevant.openDialog = true;
|
||||
},
|
||||
delete: () => {
|
||||
$messageBox
|
||||
.confirm("此操作将永久删除该数据，是否继续？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
center: true,
|
||||
})
|
||||
.then(() => {
|
||||
userReportService
|
||||
.delete({
|
||||
id: addOrEditRelevant.currentForm.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
$message.success(res.data);
|
||||
fetchData();
|
||||
} else {
|
||||
$message.error(res.err);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
};
|
||||
});
|
||||
//#region 函数定义start
|
||||
// 顶部按钮事件
|
||||
const buttonClick = ({ enName }) => {
|
||||
if (enName == "add") {
|
||||
addOrEditRelevant.currentForm.id = "";
|
||||
addOrEditRelevant.currentForm.districtId = "";
|
||||
addOrEditRelevant.openDialog = true;
|
||||
}
|
||||
if (enName == "export") {
|
||||
const { page, rows } = pageProps;
|
||||
userReportService.userReportExport({
|
||||
page,
|
||||
rows,
|
||||
...pageBasicsData.screenForm,
|
||||
});
|
||||
}
|
||||
};
|
||||
// 编辑or新增提交
|
||||
const submit = () => {
|
||||
addOrEditRelevant.currentForm.userIds = addOrEditRelevant.functionaryList.map(
|
||||
(item) => item.id
|
||||
);
|
||||
let requestMethods = addOrEditRelevant.currentForm.id
|
||||
? userReportService.update
|
||||
: userReportService.add;
|
||||
addOrEditRelevant.currentForm.serviceAreas = taskSceneHandleChange();
|
||||
const { id, districtId, userId, serviceAreas, userIds } =
|
||||
addOrEditRelevant.currentForm;
|
||||
addOrEditRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
$messageBox
|
||||
.confirm("您确定要提交么?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
requestMethods({
|
||||
id,
|
||||
districtId,
|
||||
userIds,
|
||||
userId,
|
||||
serviceAreas,
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
fetchData();
|
||||
closeDialog();
|
||||
} else {
|
||||
$message.error(res.err);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
addOrEditRef.value.resetFields();
|
||||
addOrEditRelevant.functionaryList = [];
|
||||
for (const key in addOrEditRelevant.currentForm) {
|
||||
addOrEditRelevant.currentForm[key] = "";
|
||||
}
|
||||
addOrEditRelevant.openDialog = false;
|
||||
};
|
||||
// 选择负责人
|
||||
const goSelectPrincipal = () => {
|
||||
if (!addOrEditRelevant.currentForm.districtId) {
|
||||
$message.warning("清选择站点后再进行选择!");
|
||||
return;
|
||||
}
|
||||
showSelectPrincipal.value = true;
|
||||
};
|
||||
// 关闭负责人弹窗
|
||||
const closePrincipalDialog = (val) => {
|
||||
let list = [];
|
||||
if (val.length) {
|
||||
val.forEach((item) => {
|
||||
list.push({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
mobile: item.mobile,
|
||||
});
|
||||
});
|
||||
addOrEditRelevant.functionaryList = list;
|
||||
} else {
|
||||
addOrEditRelevant.functionaryList = [];
|
||||
}
|
||||
showSelectPrincipal.value = false;
|
||||
};
|
||||
// 任务场景级联事件
|
||||
const taskSceneHandleChange = () => {
|
||||
let checkArr = sceneRef.value.getCheckedNodes();
|
||||
let scenes = [];
|
||||
checkArr.forEach((item) => {
|
||||
scenes.push({
|
||||
gridId: item.data.gridId,
|
||||
id: item.data.id,
|
||||
isscene: item.data.isscene,
|
||||
level: item.data.level,
|
||||
name: item.data.name,
|
||||
sceneId: item.data.sceneId,
|
||||
});
|
||||
});
|
||||
return scenes;
|
||||
};
|
||||
// 获取表格数据
|
||||
const fetchData = () => {
|
||||
const { page, rows, sidx, sord } = pageProps;
|
||||
userReportService
|
||||
.pageList({
|
||||
page,
|
||||
rows,
|
||||
sidx,
|
||||
sord,
|
||||
...pageBasicsData.screenForm,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
pageBasicsData.loading = false;
|
||||
tableData.value = res.data.rows;
|
||||
pageProps.records = res.data.records;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 管理人员下拉
|
||||
const fetchTaskPerson = (id) => {
|
||||
dropdownService.principalList({ districtId: id }).then(async (res) => {
|
||||
pageBasicsData.personSelectList = res.data;
|
||||
});
|
||||
};
|
||||
// 获取任务场景
|
||||
const fetchTaskScene = (id) => {
|
||||
return new Promise(() => {
|
||||
dropdownService.gridSceneTree({ districtId: id }).then(async (res) => {
|
||||
if (res.code == 0) {
|
||||
addOrEditRelevant.scenesOptions = res.data.childNode;
|
||||
} else {
|
||||
$message.error(res.err);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// 获取所属站点
|
||||
const fetchDistricts = () => {
|
||||
dropdownService.getDistrict().then(async (res) => {
|
||||
if (res.code == 0) {
|
||||
pageBasicsData.districtList = res.data;
|
||||
if (pageBasicsData.districtList?.length) {
|
||||
pageBasicsData.screenForm.districtId =
|
||||
pageBasicsData.districtList[0].id;
|
||||
fetchData();
|
||||
} else {
|
||||
$message.error("暂无站点信息,请配置站点!");
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 清空搜索
|
||||
const clearScreen = () => {
|
||||
screenFormRef.value.resetFields();
|
||||
fetchData();
|
||||
};
|
||||
// 自定义表格头
|
||||
const fetchTableAttr = (tableAttr) => {
|
||||
tableHeader.value = tableAttr;
|
||||
};
|
||||
// 表格按钮
|
||||
const rowButtonClick = ({ row, $column }) => {
|
||||
for (let i in row) {
|
||||
addOrEditRelevant.currentForm[i] = row[i];
|
||||
}
|
||||
buttonsClickFun.data[$column.enName]();
|
||||
};
|
||||
const {
|
||||
tableData,
|
||||
rowButtons,
|
||||
pageProps,
|
||||
tableHeader,
|
||||
pageChange,
|
||||
buttonsClickFun,
|
||||
restSearch,
|
||||
$message,
|
||||
$messageBox,
|
||||
$common,
|
||||
} = templateHooks(fetchData);
|
||||
//#endregion 函数定义 end
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
name: "UserReportManage",
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.task-box {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 146px);
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
.search-area {
|
||||
padding: 10px 0 10px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user