风险防控详情页

src/views/inspectionWork/riskManagement.vue

@@ -50,7 +50,8 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-text  class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
-          <el-text  class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
+          <el-text  class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
+          <el-text  class="common-btn-text-primary" @click="handlefinal">完结任务</el-text>
           <el-text  class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
         </template>
       </el-table-column>
@@ -109,6 +110,7 @@ import { useRouter } from 'vue-router';
 import { getPlanDetail, getPlanList, updateReport, deletePlan, addReport } from '@/api/riskPrevention/planManage';
 import { addDateRange2 } from '@/utils/ruoyi';
 import { to } from 'await-to-js';
+import  { ElMessageBox } from 'element-plus';
 
 const router = useRouter();
 const demoFormRef = ref(null);
@@ -123,8 +125,9 @@ const total = ref(0);
 const selectedRow = ref<PlanVO | null>(null);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { mm_event_type, plan_type } = toRefs<any>(proxy?.useDict('plan_type', 'mm_event_type'));
-
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+
+
 const planForm = reactive<PlanForm>({
   page: 1,
   pageSize: 10,
@@ -143,14 +146,21 @@ let form = ref({
   fileList: []
 });
 
-const rules = reactive({
-  planName: [{ required: true, message: '预案名称不能为空', trigger: 'blur' }],
-  planType: [{ required: true, message: '预案类型不能为空', trigger: 'blur' }],
-  document: [{ required: true, message: '发文字号不能为空', trigger: 'blur' }],
-  event_type: [{ required: true, message: '对应事件类型不能为空', trigger: 'blur' }],
-  organizingUnit: [{ required: true, message: '编制单位不能为空', trigger: 'blur' }],
-  publishDate: [{ required: true, message: '发布日期不能为空', trigger: 'blur' }]
-});
+const handlefinal = () => {
+  ElMessageBox.confirm('确定要完结任务吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 用户点击“确定”时的逻辑
+    console.log('任务已完结');
+    // 可以在这里添加更多完结任务的逻辑
+  }).catch(() => {
+    // 用户点击“取消”时的逻辑
+    console.log('任务未完结');
+  });
+};
+
 
 const planTypeSelection = ref([]);
 
@@ -161,16 +171,17 @@ const dialog = reactive({
 
 const getList = async () => {
   loading.value = true;
-  const res = await getPlanList(addDateRange2(planForm, dateRange.value));
+  const res = await getPlanList(addDateRange2(planForm, dateRange.value));  //调用预案列表的接口
   loading.value = false;
   demoList.value = res.data;
   total.value = res.total;
 };
+// 搜索功能
 const handleQuery = () => {
   planForm.page = 1;
   getList();
 };
-
+//重置功能
 const resetQuery = () => {
   planForm.page = 1;
   planForm.planType = '';
@@ -198,7 +209,7 @@ const handleUpdate = async (row: PlanVO) => {
     const res = await getPlanDetail(row.planId);
     form.value = res.data;
     dialog.visible = true;
-    dialog.title = '修改预案';
+    dialog.title = '修改任务';
   }
 };
 
@@ -214,17 +225,17 @@ const handleDelete = async (row) => {
 
 const handleView = (row: PlanVO) => {
   router.push({
-    path: '/riskPrevention/planManage/planList',
+    path: '/inspectionWork/riskdetails',
     query: { planId: row.planId }
   });
 };
-
+// 提交表单按钮
 const submitForm = () => {
   demoFormRef.value?.validate(async (valid) => {
     if (valid) {
       try {
         buttonLoading.value = true;
-        form.value.planId ? await updateReport(form.value) : await addReport(form.value);
+        form.value.planId ? await updateReport(form.value) : await addReport(form.value); //根据 form.value.planId 是否存在，调用 updateReport 或 addReport 方法
         proxy?.$modal.msgSuccess(form.value.planId ? '修改成功' : '新增成功');
         dialog.visible = false;
         getList();
@@ -234,7 +245,7 @@ const submitForm = () => {
     }
   });
 };
-
+// 重置表单数据和表单验证状态
 const resetForm = () => {
   form.value = {
     planId: '',
@@ -245,7 +256,7 @@ const resetForm = () => {
     publishDate: '',
     event_type: ''
   };
-  demoFormRef.value?.resetFields();
+  demoFormRef.value?.resetFields();  // 重置表单的验证状态
 };
 
 const cancel = () => {
@@ -253,6 +264,7 @@ const cancel = () => {
   dialog.visible = false;
 };
 
+
 onMounted(() => {
   getList();
   getDicts('mm_event_type').then((res) => {

src/views/inspectionWork/riskdetails.vue

@@ -0,0 +1,253 @@
+<!--任务详情页-->
+<template>
+  <div class="app-container p-2">
+    <el-row :gutter="20">
+      <!-- 基础信息 -->
+      <el-col :lg="30" :xs="24" style="">
+        <el-form-item>
+          <div class="back-btn" @click="goBack">
+            <el-icon><Back /></el-icon>
+            返回上一级
+          </div>
+        </el-form-item>
+        <el-row :span="24" :gutter="10">
+          <el-col :span="20" label="预案名称">
+            <h2 key="planName" style="font-weight: bolder">{{ detailData.planName }}</h2>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" @click="planUpdate()"> 编辑 </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" @click="handlefinal"> 完结任务 </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" @click="handleDelete"> 删除 </el-button>
+          </el-col>
+        </el-row>
+        <div class="line" style="background: #e7e7e7; width: auto; height: 0.6px; position: relative"></div>
+        <h3>基础信息</h3>
+        <el-card style="margin-top: 10px" shadow="hover">
+          <el-descriptions title="">
+            <el-descriptions-item key="planId" label="任务编号：">{{ detailData.planId }}</el-descriptions-item>
+            <el-descriptions-item key="planType" label="风险源类型：">
+              <dict-tag :options="plan_type" :value="detailData.planType" style="display: inline-block" />
+            </el-descriptions-item>
+            <el-descriptions-item key="publishDate" label="创建时间：">{{ detailData.publishDate }}</el-descriptions-item>
+            <el-descriptions-item key="organizingUnit" label="创建人：">{{ detailData.organizingUnit }}</el-descriptions-item>
+            <el-descriptions-item key="publishDate" label="排查时间范围：">{{ detailData.publishDate }}</el-descriptions-item>
+            <el-descriptions-item key="publishDate" label="排查周期：">{{ detailData.publishDate }}</el-descriptions-item>
+            <el-descriptions-item key="publishDate" label="排查范围：">{{ detailData.publishDate }}</el-descriptions-item>
+            <el-descriptions-item key="event_type" label="任务状态：">
+              <dict-tag :options="mm_event_type" :value="detailData.event_type" style="display: inline-block" />
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+        <h3>子任务记录</h3>
+        <el-table :data="tableData" style="width: 100%; margin-top: 20px">
+          <el-table-column prop="riskSourceType" label="风险源类型" width="150">
+            <template #default="scope">
+              <dict-tag :options="plan_type" :value="scope.row.riskSourceType" style="display: inline-block" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="requiredCheckTime" label="要求排查时间" width="150"></el-table-column>
+          <el-table-column prop="checkCycle" label="排查周期" width="150"></el-table-column>
+          <el-table-column prop="checkRange" label="排查范围" width="150"></el-table-column>
+          <el-table-column prop="executionDate" label="执行日期" width="150"></el-table-column>
+          <el-table-column prop="completed" label="已完成" width="100"></el-table-column>
+            <template #default="scope">
+              <span @click="handleClick(scope.row.completed, 'completed')">{{ scope.row.completed }}</span>
+            </template>
+          <el-table-column prop="uncompleted" label="未完成" width="100"></el-table-column>
+            <template #default="scope">
+              <span @click="handleClick(scope.row.uncompleted, 'uncompleted')">{{ scope.row.uncompleted }}</span>
+            </template>
+          <el-table-column label="操作" width="150">
+            <template #default="scope">
+              <el-button size="small" @click="handleresult(scope.$index, scope.row)">巡查结果</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+      </el-col>
+    </el-row>
+    <!-- 修改弹窗 -->
+    <el-dialog v-model="visible" title="修改任务" width="500px" append-to-body>
+      <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="风险源类型：" prop="planName">
+          <el-input v-model="form.planName" placeholder="请选择风险源排查类型" />
+        </el-form-item>
+        <el-form-item label="排查时间范围：" prop="publishDate">
+          <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="排查周期：" prop="organizingUnit">
+          <el-checkbox-group v-model="form.organizingUnit">
+            <el-checkbox label="选项1">每年</el-checkbox>
+            <el-checkbox label="选项2">每月</el-checkbox>
+            <el-checkbox label="选项3">每周</el-checkbox>
+            <el-checkbox label="选项4">每天</el-checkbox>
+            <el-checkbox label="选项4">一次</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="排查范围：" prop="organizingUnit">
+          <el-checkbox-group v-model="form.organizingUnit">
+            <el-checkbox label="选项1">市级</el-checkbox>
+            <el-checkbox label="选项2">区县级</el-checkbox>
+            <el-checkbox label="选项3">镇街级</el-checkbox>
+            <el-checkbox label="选项4">村居量</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="planList" lang="ts">
+import { to } from 'await-to-js';
+import { deletePlan, getPlanDetail, updateReport } from '@/api/riskPrevention/planManage';
+import  { ElMessageBox } from 'element-plus';
+const router = useRouter();
+
+const goBack = () => {
+  proxy?.$tab.closePage();
+};
+
+
+const route = useRoute();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { mm_event_type, plan_type } = toRefs<any>(proxy?.useDict('plan_type', 'mm_event_type'));
+
+//已完成/未完成的页面跳转
+const handleClick = (value: number, type: string) => {
+  if (type === 'completed') {
+    router.push({
+      name: 'CompletedDetails', // 替换为实际的路由名称
+      params: { value }
+    });
+  } else if (type === 'uncompleted') {
+    router.push({
+      name: 'UncompletedDetails', // 替换为实际的路由名称
+      params: { value }
+    });
+  }
+};
+
+// 预案编辑
+let detailData = ref({
+  planId: '',
+  planName: '',
+  planType: '',
+  publishDate: '',
+  organizingUnit: '',
+  document: '',
+  event_type: '',
+  fileList: []
+});
+let planId = ref();
+let visible = ref(false);
+const demoFormRef = ref(null);
+const buttonLoading = ref(false);
+let form = ref({
+  planId: '',
+  planName: '',
+  planType: '',
+  document: '',
+  organizingUnit: '',
+  publishDate: '',
+  event_type: '',
+  fileList: []
+});
+const rules = reactive({
+  planName: [{ required: true, message: '预案名称不能为空', trigger: 'blur' }],
+  planType: [{ required: true, message: '预案类型不能为空', trigger: 'blur' }],
+  document: [{ required: true, message: '发文字号不能为空', trigger: 'blur' }],
+  event_type: [{ required: true, message: '对应事件类型不能为空', trigger: 'blur' }],
+  organizingUnit: [{ required: true, message: '编制单位不能为空', trigger: 'blur' }],
+  publishDate: [{ required: true, message: '发布日期不能为空', trigger: 'blur' }]
+});
+/** 修改按钮操作 */
+const planUpdate = async () => {
+  resetForm();
+  const res = await getPlanDetail(planId.value);
+  form.value = res.data;
+  visible.value = true;
+};
+
+const handlefinal = () => {
+  ElMessageBox.confirm('确定要完结任务吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 用户点击“确定”时的逻辑
+    console.log('任务已完结');
+    // 可以在这里添加更多完结任务的逻辑
+  }).catch(() => {
+    // 用户点击“取消”时的逻辑
+    console.log('任务未完结');
+  });
+};
+
+const resetForm = () => {
+  form.value = {
+    planId: '',
+    planName: '',
+    planType: '',
+    document: '',
+    organizingUnit: '',
+    publishDate: '',
+    event_type: '',
+    fileList: []
+  };
+  demoFormRef.value?.resetFields();
+};
+/** 删除按钮操作 */
+const handleDelete = async () => {
+  const [err] = await to(proxy?.$modal.confirm('是否确认删除该条预案？') as any);
+  if (!err) {
+    await deletePlan([detailData.value.planId]);
+    proxy?.$modal.msgSuccess('删除成功');
+    router.go(-1);
+  }
+};
+const cancel = () => {
+  resetForm();
+  visible.value = false;
+};
+
+/** 提交修改 */
+const submitForm = () => {
+  demoFormRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        buttonLoading.value = true;
+        await updateReport(form.value);
+        proxy?.$modal.msgSuccess('修改成功');
+        visible.value = false;
+        getPlanDetail(planId.value).then((res) => {
+          detailData.value = res.data;
+        });
+      } finally {
+        buttonLoading.value = false;
+      }
+    }
+  });
+};
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+
+
+onMounted(() => {
+  planId.value = route.query.planId;
+  getPlanDetail(planId.value).then((res) => {
+    detailData.value = res.data;
+  });
+});
+</script>
+
+<style lang="scss" scoped></style>