- <template>
- <!-- 巡查计划管理 -->
- <div class="publicContainer">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
- <el-form-item label="计划名称:" prop="planName">
- <el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable style="width: 180px" />
- </el-form-item>
-
- <el-form-item label="项目名称:" prop="projectCodes">
- <el-select clearable v-model="queryParams.projectCodes" style="width: 180px" placeholder="请选择项目名称">
- <el-option v-for="proj in projectTList" :key="proj.projectNo" :label="proj.projectName" :value="proj.projectNo" />
- </el-select>
- </el-form-item>
-
- <el-form-item label="计划状态:" prop="status">
- <el-select clearable v-model="queryParams.status" style="width: 180px" placeholder="请选择计划状态">
- <el-option v-for="item in WaterDate" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
-
- <el-form-item label="计划日期" prop="publishTime">
- <el-date-picker
- style="width: 380px"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- v-model="AllData.publishTime"
- type="daterange"
- range-separator="至"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- />
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
-
- <!-- 按钮区域 -->
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
- </el-col>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
- </el-row>
-
- <!-- 表格 -->
- <el-table :data="dataList" v-loading="loading" :max-height="580">
- <el-table-column type="index" width="55" label="序号" />
- <el-table-column label="巡查计划名称" prop="planName" width="140" />
- <el-table-column label="巡查计划状态" prop="status" width="150">
- <template #default="scope">
- <span>
- {{ scope.row.status == '0' ? '未激活' : scope.row.status == '1' ? '已激活' : '' }}
- </span>
- </template>
- </el-table-column>
- <el-table-column label="项目名称" prop="projectCodes" width="400">
- <template #default="scope">
- <p v-for="item in scope.row.projectList">{{ item.projectName }}</p>
- </template>
- </el-table-column>
- <el-table-column label="巡查人员" prop="planUserIds">
- <template #default="scope">
- <p v-for="item in scope.row.taskUserList">{{ item.userName }}</p>
- </template>
- </el-table-column>
- <el-table-column label="巡查类型" prop="patrolType">
- <template #default="scope">
- <dict-tag :options="patrol_type" :value="String(scope.row.patrolType)" />
- </template>
- </el-table-column>
- <!-- <el-table-column label="巡查公里数(km)" prop="num" /> -->
- <el-table-column label="计划开始时间" prop="startDate" width="180" />
- <el-table-column label="计划结束时间" prop="endDate" width="180" />
- <el-table-column label="任务频率" prop="patrolFrequencyContent" width="200">
- <!-- <template #default="scope">
- <span>
- {{ scope.row.patrolFrequencyType == 'for_week' ? '周' : scope.row.patrolFrequencyType == 'for_day' ? '日' : '' }}
- </span>
- </template> -->
- </el-table-column>
- <el-table-column label="创建时间" prop="createTime" width="180" />
- <el-table-column label="备注" prop="remark" width="180" />
- <el-table-column label="操作" width="280" fixed="right">
- <template #default="scope">
- <el-button link icon="View" type="success" v-if="scope.row.status == '0'" @click="handleActive(scope.row, 'view')">
- 激活
- </el-button>
- <el-button link icon="View" type="primary" @click="handleDetail(scope.row, 'view')">详情</el-button>
- <el-button link type="warning" icon="Edit" v-if="scope.row.status == '0'" @click="handleUpdate(scope.row, 'view')">
- 修改
- </el-button>
- <el-button link type="danger" icon="Delete" v-if="scope.row.status == '0'" @click="handleDelete(scope.row, 'view')">
- 删除
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页 -->
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
- <!-- 新增弹窗 -->
- <el-dialog :title="title" v-model="open" width="800px" append-to-body :close-on-click-modal="false">
- <el-form ref="roleRef" :model="form" :rules="rules" label-width="130px" :disabled="multiple">
- <el-row :gutter="20">
- <el-col :span="24">
- <el-form-item label="巡查计划名称:" prop="planName">
- <el-input v-model="form.planName" placeholder="请输入巡查计划名称" clearable style="width: 100%" />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="项目名称:" prop="projectList">
- <el-select clearable v-model="form.projectList" style="width: 100%" placeholder="请选择项目名称" multiple>
- <el-option v-for="proj in projectTList" :key="proj.projectNo" :label="proj.projectName" :value="proj.projectNo" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="巡查计划类型:" prop="patrolType">
- <el-select clearable v-model="form.patrolType" style="width: 100%" placeholder="请选择巡查计划类型">
- <el-option v-for="item in patrol_type" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="巡查频率:" prop="patrolFrequencyType">
- <el-select v-model="form.patrolFrequencyType" placeholder="请选择巡查频率" clearable style="width: 100%">
- <el-option v-for="dict in Xcfrequency" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="巡查频率(周):" prop="patrolWeekDay" v-if="form.patrolFrequencyType == 'for_week'">
- <el-select v-model="form.patrolWeekDay" placeholder="请选择巡查频率(周)" clearable style="width: 100%" multiple>
- <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="20">
- <el-col :span="12">
- <el-form-item label="巡查人员:" prop="patrolUserList">
- <el-select v-model="form.patrolUserList" placeholder="请选择巡查人员" clearable style="width: 100%" multiple>
- <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="计划日期" prop="reportTime1">
- <el-date-picker
- style="width: 380px"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- v-model="form.reportTime1"
- type="daterange"
- range-separator="至"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row :gutter="20">
- <el-col :span="24">
- <el-form-item label="备注" prop="remark">
- <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm" v-show="!multiple">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
- <script setup name="Inspectionplan">
- import { patrolPlanpage, activation, patrolPlanedit, patrolPlanadd, patrolPlandelete } from '@/api/longoPeration/Inspectionplana';
- import { listUser } from '@/api/system/user';
- import { getProjectInfoList } from '@/api/preassess/targetManage';
- import axios from 'axios';
- const { proxy } = getCurrentInstance();
- const { patrol_type } = proxy.useDict('patrol_type'); // 巡查类型的字典
- console.log(patrol_type);
- const open = ref(false);
- const multiple = ref(false);
- const showSearch = ref(true);
- const projectTList = ref([]);
- const Xcfrequency = ref([
- { value: 'for_day', label: '天' },
- { value: 'for_week', label: '周' },
- ]);
- const WaterDate = ref([
- { value: '1', label: '已激活' },
- { value: '0', label: '未激活' },
- ]);
- const weekList = ref([
- { value: '1', label: '周日' },
- { value: '2', label: '周一' },
- { value: '3', label: '周二' },
- { value: '4', label: '周三' },
- { value: '5', label: '周四' },
- { value: '6', label: '周五' },
- { value: '7', label: '周六' },
- ]);
- const userList = ref([]);
- const loading = ref(true);
- const total = ref(1);
- const title = ref('');
- const dataList = ref([]);
- const AllData = reactive({
- id: '',
- caseid: '',
- caseidone: '',
- publishTime: [],
- form: {},
- formDate: {},
- caseFormDate: { id: '' },
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- planName: '',
- status: '',
- startTime: '',
- endTime: '',
- },
- rules: {
- planName: [{ required: true, message: '请输入巡查计划名称', trigger: 'blur' }],
- projectList: [{ required: true, message: '请选择项目名称', trigger: 'blur' }],
- patrolType: [{ required: true, message: '请选择巡查计划类型', trigger: 'blur' }],
- patrolUserList: [{ required: true, message: '请选择巡查人员', trigger: 'blur' }],
- reportTime1: [{ required: true, message: '请选择计划日期', trigger: 'blur' }],
- eventDescription: [{ required: true, message: '请输入', trigger: 'blur' }],
- patrolWeekDay: [{ required: true, message: '请选择巡查频率(周)', trigger: 'blur' }],
- },
- });
- const { queryParams, form, rules } = toRefs(AllData);
-
- //搜索
- function handleQuery() {
- // console.log('123', AllData.publishTime);
- if (AllData.publishTime) {
- queryParams.value.startTime = AllData.publishTime[0];
- queryParams.value.endTime = AllData.publishTime[1];
- } else {
- queryParams.value.startTime = '';
- queryParams.value.endTime = '';
- }
- getList();
- }
- //重置
- function resetQuery() {
- AllData.publishTime = [];
- proxy.resetForm('queryRef');
- handleQuery();
- }
- // 新增
- function handleAdd() {
- title.value = '新增巡查计划';
- open.value = true;
- form.value = {};
- multiple.value = false;
- form.value.patrolFrequencyType = Xcfrequency.value[0].value;
- }
- // 新增中取消事件
- function cancel() {
- open.value = false;
- proxy.resetForm('roleRef');
- }
- //搜索人员列表
- function getUserList() {
- listUser().then(res => {
- userList.value = res.data || [];
- userList.value.map(item => {
- item.userId = String(item.userId);
- });
- });
- }
- /** 搜索列表 */
- const getList = async () => {
- loading.value = true;
- if (AllData.publishTime) {
- queryParams.value.startTime = AllData.publishTime[0];
- queryParams.value.endTime = AllData.publishTime[1];
- }
- let res = await patrolPlanpage(queryParams.value);
- dataList.value = res.data;
- console.log(dataList.value, 'dataList.value');
- total.value = res.total;
- loading.value = false;
- };
-
- //查看详情操作
- function handleDetail(row) {
- open.value = true;
- multiple.value = true;
- title.value = '查看巡查计划';
- form.value = { ...row };
- // 做详情回显判断
- form.value.patrolUserList = row.taskUserList.map(item => {
- return item.userName;
- });
- form.value.projectList = row.projectList.map(item => {
- return item.projectName;
- });
- form.value.reportTime1 = [form.value.startDate, form.value.endDate];
- form.value.patrolWeekDay = row.patrolFrequencyList ? row.patrolFrequencyList.split(',') : [];
- }
- // 修改按钮操作
- function handleUpdate(row) {
- open.value = true;
- title.value = '修改巡查计划';
- multiple.value = false;
- form.value = { ...row };
- // console.log(form.value, 'form.value form.value ');
- // 做修改回显判断
- form.value.patrolUserList = row.planUserIds ? row.planUserIds.split(',') : [];
- form.value.patrolUserList.forEach(element => {
- element = element.userId;
- });
- form.value.projectList = row.projectCodes ? row.projectCodes.split(',') : [];
- form.value.patrolWeekDay = row.patrolFrequencyList ? row.patrolFrequencyList.split(',') : [];
- form.value.reportTime1 = [form.value.startDate, form.value.endDate];
- }
- // 激活
- function handleActive(row) {
- // console.log(row.id, '1');
- activation(row.id).then(res => {
- if (res.code == 200) {
- proxy.$modal.msgSuccess('激活成功');
- getList();
- } else {
- proxy.$modal.msgError('激活失败');
- getList();
- }
- });
- }
- // 项目接口
- async function projectTypeListM() {
- let { data } = await getProjectInfoList();
- projectTList.value = data;
- }
-
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs['roleRef'].validate(valid => {
- if (valid) {
- // 处理时间传参
- form.value.startDate = form.value.reportTime1[0];
- form.value.endDate = form.value.reportTime1[1];
- // 处理项目传参
- // form.value.projectList = form.value.projectList.map(obj => {
- // // console.log(projectTList.value, 'projectTList.value');
- // let nameXm = '';
- // projectTList.value.forEach(item => {
- // if (item.projectNo == obj) {
- // nameXm = item.projectName;
- // // console.log(item.projectName, 'item');
- // }
- // });
- // // console.log(obj, 'obj');
- // return { projectNo: obj, projectName: nameXm };
- // });
- // 处理人员传参
- // form.value.patrolUserList = form.value.patrolUserList.map(item => {
- // // console.log(item, 'item');
- // return { userId: item };
- // });
- form.value.basicInfoId = '1686274734091489284';
- // console.log(form.value, 'form.value');
- if (title.value == '修改巡查计划') {
- patrolPlanedit(form.value).then(response => {
- proxy.$modal.msgSuccess('修改成功');
- open.value = false;
- getList();
- });
- } else {
- if (form.value.id) delete form.value.id;
- patrolPlanadd(form.value).then(response => {
- proxy.$modal.msgSuccess('新增成功');
- open.value = false;
- getList();
- });
- }
- }
- });
- }
-
- /** 删除按钮操作 */
- function handleDelete(row) {
- const postIds = row.id;
- proxy.$modal
- .confirm('是否确认删除该数据项?')
- .then(function () {
- return patrolPlandelete(postIds);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess('删除成功');
- })
- .catch(() => {});
- }
- onMounted(() => {
- getList();
- projectTypeListM();
- getUserList();
- });
- </script>
- <style scoped lang="scss">
- .dituclass {
- width: 100%;
- height: 300px;
- // background: red;
- margin-bottom: 10px;
- border: 1px solid #004565;
- }
- :deep(.el-range-editor.is-disabled input) {
- background-color: #004565 !important;
- color: var(--el-disabled-text-color);
- cursor: not-allowed;
- }
- </style>