更新问题归档表单

zrch-risk-client-39/src/views/project/problemArchive/StProblemCheckArchiveList.vue

@@ -4,9 +4,19 @@
     <BasicTable @register="registerTable" :rowSelection="rowSelection">
       <!--插槽:table标题-->
       <template #tableTitle>
-          <a-button type="primary" v-auth="'problem:st_problem_check_archive:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
-          <a-button  type="primary" v-auth="'problem:st_problem_check_archive:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-          <j-upload-button type="primary" v-auth="'problem:st_problem_check_archive:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
+        <a-button type="primary" v-auth="'problem:st_problem_check_archive:add'" @click="handleAdd" preIcon="ant-design:plus-outlined">
+          新增</a-button
+        >
+        <a-button type="primary" v-auth="'problem:st_problem_check_archive:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls">
+          导出</a-button
+        >
+        <j-upload-button
+          type="primary"
+          v-auth="'problem:st_problem_check_archive:importExcel'"
+          preIcon="ant-design:import-outlined"
+          @click="onImportXls"
+          >导入</j-upload-button
+        >
 
         <a-dropdown v-if="selectedRowKeys.length > 0">
           <template #overlay>
@@ -17,38 +27,41 @@
               </a-menu-item>
             </a-menu>
           </template>
-              <a-button v-auth="'problem:st_problem_check_archive:deleteBatch'">批量操作
-                <Icon icon="mdi:chevron-down"></Icon>
-              </a-button>
+          <a-button v-auth="'problem:st_problem_check_archive:deleteBatch'">批量操作 </a-button>
         </a-dropdown>
         <!-- 高级查询 -->
         <super-query :config="superQueryConfig" @search="handleSuperQuery" />
       </template>
       <!--操作栏-->
       <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
+        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
       </template>
       <!--字段回显插槽-->
-      <template v-slot:bodyCell="{ column, record, index, text }">
-      </template>
+      <template #bodyCell="{ column, record, index, text }"> </template>
     </BasicTable>
     <!-- 表单区域 -->
     <StProblemCheckArchiveModal @register="registerModal" @success="handleSuccess"></StProblemCheckArchiveModal>
     <!-- 审批记录 -->
     <BpmPictureModal @register="registerBpmModal" />
-    <FlowHistoryDrawer  @register="refFlowHistoryDrawer"/>
+    <FlowHistoryDrawer @register="refFlowHistoryDrawer" />
+    <!-- 整改计划详情弹窗 -->
+    <RectifyPlanModal v-model="rectifyPlanModalVisible" :formData="rectifyPlanData" title="整改计划详情" />
+    <!-- 执行情况详情弹窗 -->
+    <ExecutionDetailModal v-model="executionDetailModalVisible" :formData="executionDetailData" title="执行情况详情" />
   </div>
 </template>
 
 <script lang="ts" name="problem-stProblemCheckArchive" setup>
-  import {ref, reactive, computed, unref} from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
-  import {useModal} from '/@/components/Modal';
-  import { useListPage } from '/@/hooks/system/useListPage'
-  import StProblemCheckArchiveModal from './components/StProblemCheckArchiveModal.vue'
-  import {columns, searchFormSchema, superQuerySchema} from './StProblemCheckArchive.data';
-  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './StProblemCheckArchive.api';
-  import FlowHistoryDrawer from '../../common/FlowHistoryDrawer.vue'
+  import { reactive, computed, ref, unref, h } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import StProblemCheckArchiveModal from './components/StProblemCheckArchiveModal.vue';
+  import RectifyPlanModal from './components/RectifyPlanModal.vue';
+  import ExecutionDetailModal from './components/ExecutionDetailModal.vue';
+  import { columns, searchFormSchema, superQuerySchema } from './StProblemCheckArchive.data';
+  import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './StProblemCheckArchive.api';
+  import FlowHistoryDrawer from '../../common/FlowHistoryDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
   import { getDateByPicker } from '/@/utils';
   //日期个性化选择
@@ -58,27 +71,86 @@
   const [refFlowHistoryDrawer, { openDrawer }] = useDrawer();
 
   const queryParam = reactive<any>({});
-  const [registerModal, {openModal}] = useModal();
+  const [registerModal, { openModal }] = useModal();
+
+  // 整改计划弹窗状态
+  const rectifyPlanModalVisible = ref(false);
+  const rectifyPlanData = ref({});
+
+  // 执行情况弹窗状态
+  const executionDetailModalVisible = ref(false);
+  const executionDetailData = ref({});
+
+  // 查看详情方法
+  function handleViewDetail(record, type) {
+    console.log('查看详情:', type, record);
+    if (type === 'rectifyPlan') {
+      // 打开整改计划弹窗
+      rectifyPlanData.value = record;
+      rectifyPlanModalVisible.value = true;
+    } else if (type === 'execRemark') {
+      // 打开执行情况弹窗
+      executionDetailData.value = record;
+      executionDetailModalVisible.value = true;
+    }
+  }
+
+  // 复制列配置并修改customRender
+  const customColumns = computed(() => {
+    const cols = [...columns];
+    const rectifyPlanCol = cols.find((col) => col.dataIndex === 'rectifyPlan');
+    const execRemarkCol = cols.find((col) => col.dataIndex === 'execRemark');
+
+    if (rectifyPlanCol) {
+      rectifyPlanCol.customRender = ({ record }) => {
+        return {
+          children: h(
+            'a-button',
+            {
+              type: 'link',
+              onClick: () => handleViewDetail(record, 'rectifyPlan'),
+            },
+            '查看详情'
+          ),
+        };
+      };
+    }
 
-  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
-      tableProps:{
+    if (execRemarkCol) {
+      execRemarkCol.customRender = ({ record }) => {
+        return {
+          children: h(
+            'a-button',
+            {
+              type: 'link',
+              onClick: () => handleViewDetail(record, 'execRemark'),
+            },
+            '查看详情'
+          ),
+        };
+      };
+    }
+
+    return cols;
+  });
+
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    tableProps: {
       title: '问题归档',
       api: list,
-           columns,
-           canResize:true,
+      columns: customColumns.value,
+      canResize: true,
       formConfig: {
         //labelWidth: 120,
         schemas: searchFormSchema,
-              autoSubmitOnEnter:true,
-              showAdvancedButton:true,
-              fieldMapToNumber: [
-              ],
-              fieldMapToTime: [
-              ],
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+        fieldMapToNumber: [],
+        fieldMapToTime: [],
       },
       actionColumn: {
         width: 120,
-               fixed:'right'
+        fixed: 'right',
       },
       beforeFetch: (params) => {
         if (params && fieldPickers) {
@@ -92,17 +164,17 @@
       },
     },
     exportConfig: {
-          name:"问题归档",
+      name: '问题归档',
       url: getExportUrl,
       params: queryParam,
     },
     importConfig: {
       url: getImportUrl,
-          success: handleSuccess
+      success: handleSuccess,
     },
-  })
+  });
 
-  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
+  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
   const superQueryConfig = reactive(superQuerySchema);
   function handleSuperQuery(params) {
     Object.keys(params).map((k) => {
@@ -133,11 +205,11 @@
   }
 
   async function handleDelete(record) {
-     await deleteOne({id: record.id}, handleSuccess);
+    await deleteOne({ id: record.id }, handleSuccess);
   }
 
   async function batchHandleDelete() {
-     await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
+    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
   }
 
   function handleSuccess() {
@@ -145,55 +217,46 @@
   }
 
   function handleShowHistory(record) {
-    openDrawer(true,{
+    openDrawer(true, {
       procInsId: record.procInsId,
       dataId: record.id,
       deployId: record.deployId,
     });
   }
 
-
-  function getTableAction(record){
+  function getTableAction(record) {
     return [
-         {
-           label: '编辑',
-           onClick: handleEdit.bind(null, record),
-           auth: 'problem:st_problem_check_archive:edit'
-         },
       {
         label: '查看流程',
         onClick: handleShowHistory.bind(null, record),
-          
-         }
-       ]
+      },
+    ];
   }
 
-  function getDropDownAction(record){
+  function getDropDownAction(record) {
     let dropDownAction = [
       {
-           label: '详情',
-           onClick: handleDetail.bind(null, record),
-         }, {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+        auth: 'problem:st_problem_check_archive:edit',
+      },
+      {
         label: '删除',
         popConfirm: {
           title: '是否确认删除',
           confirm: handleDelete.bind(null, record),
           placement: 'topLeft',
         },
-           auth: 'problem:st_problem_check_archive:delete'
+        auth: 'problem:st_problem_check_archive:delete',
       },
-    
     ];
     return dropDownAction;
   }
-
- 
-
-
 </script>
 
 <style lang="less" scoped>
-  :deep(.ant-picker),:deep(.ant-input-number){
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
     width: 100%;
   }
 </style>

zrch-risk-client-39/src/views/project/problemArchive/components/ExecutionDetailModal.vue

+<template>
+  <a-modal :open="modelValue" :title="title" :width="600" :footer="null" @cancel="handleCancel" @update:open="handleOpenChange">
+    <div class="modal-content">
+      <div class="form-item">
+        <div class="form-label">执行部门:</div>
+        <div class="form-value">{{ formData.execDepCode || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">负责人:</div>
+        <div class="form-value">{{ formData.execUserId || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">实际开始日期:</div>
+        <div class="form-value">{{ formData.execStartDate || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">实际完成日期:</div>
+        <div class="form-value">{{ formData.execEndDate || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">整改落实情况:</div>
+        <div class="form-value">{{ formData.execRemark || '-' }}</div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="modal-footer">
+        <a-button type="primary" @click="handleCancel">关闭</a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  // 定义组件props
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+    title: {
+      type: String,
+      default: '执行情况详情',
+    },
+  });
+
+  // 定义事件
+  const emit = defineEmits(['update:modelValue', 'cancel']);
+
+  // 处理modal打开状态变化
+  const handleOpenChange = (newVal) => {
+    emit('update:modelValue', newVal);
+  };
+
+  // 关闭弹窗
+  const handleCancel = () => {
+    emit('update:modelValue', false);
+    emit('cancel');
+  };
+</script>
+
+<style scoped lang="less">
+  .modal-content {
+    padding: 0 20px;
+  }
+
+  .form-item {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .form-label {
+    width: 120px;
+    font-weight: 500;
+    color: #333;
+    margin-right: 16px;
+    text-align: right;
+    padding-top: 6px;
+  }
+
+  .form-value {
+    flex: 1;
+    color: #666;
+    line-height: 1.5;
+    word-break: break-word;
+  }
+
+  .modal-footer {
+    text-align: center;
+    margin-top: 24px;
+  }
+</style>

zrch-risk-client-39/src/views/project/problemArchive/components/RectifyPlanModal.vue

+<template>
+  <a-modal :open="modelValue" :title="title" :width="600" :footer="null" @cancel="handleCancel" @update:open="handleOpenChange">
+    <div class="modal-content">
+      <div class="form-item">
+        <div class="form-label">成因分析:</div>
+        <div class="form-value">{{ formData.causeAnalysis || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">整改方案:</div>
+        <div class="form-value">{{ formData.rectifyPlan || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">整改周期:</div>
+        <div class="form-value">{{ formData.rectifyCycle || '-' }} 天</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">计划开始日期:</div>
+        <div class="form-value">{{ formData.planStartDate || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">计划结束日期:</div>
+        <div class="form-value">{{ formData.planEndDate || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">负责部门:</div>
+        <div class="form-value">{{ formData.headDepCode || '-' }}</div>
+      </div>
+      <div class="form-item">
+        <div class="form-label">负责人:</div>
+        <div class="form-value">{{ formData.headUserId || '-' }}</div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="modal-footer">
+        <a-button type="primary" @click="handleCancel">关闭</a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  // 定义组件props
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+    title: {
+      type: String,
+      default: '整改计划详情',
+    },
+  });
+
+  // 定义事件
+  const emit = defineEmits(['update:modelValue', 'cancel']);
+
+  // 处理modal打开状态变化
+  const handleOpenChange = (newVal) => {
+    emit('update:modelValue', newVal);
+  };
+
+  // 关闭弹窗
+  const handleCancel = () => {
+    emit('update:modelValue', false);
+    emit('cancel');
+  };
+</script>
+
+<style scoped lang="less">
+  .modal-content {
+    padding: 0 20px;
+  }
+
+  .form-item {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .form-label {
+    width: 120px;
+    font-weight: 500;
+    color: #333;
+    margin-right: 16px;
+    text-align: right;
+    padding-top: 6px;
+  }
+
+  .form-value {
+    flex: 1;
+    color: #666;
+    line-height: 1.5;
+    word-break: break-word;
+  }
+
+  .modal-footer {
+    text-align: center;
+    margin-top: 24px;
+  }
+</style>

zrch-risk-client-39/src/views/project/problemCheck/StProblemCheck.data.ts

@@ -47,7 +47,6 @@ export const columns: BasicColumn[] = [
     dataIndex: 'problemDes',
     resizable: true,
     ifShow: false,
-   
   },
   {
     title: '风险等级',
@@ -185,12 +184,11 @@ export const formSchema: FormSchema[] = [
   {
     label: '问题描述',
     field: 'problemDes',
-    component: 'JEditor',
+    component: 'InputTextArea',
     required: true,
     componentProps: {
-      showCount: true,
       maxlength: 512,
-      height: 220,
+      rows: 3,
     },
   },
   {