yjhtgl-web/src/views/inspectionWork/riskdetails.vue

<!--任务详情页-->
<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>