supervision-test-frontend-repo/src/views/bg/xispeak/BgXiSpeakList.vue

<template>
  <div>
    <BasicTable
      @register="registerTable"
      :rowSelection="rowSelection"
      :expandedRowKeys="expandedRowKeys"
      @expand="handleExpand"
      @fetch-success="onFetchSuccess"
    >
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" v-auth="'bg.xispeak:bg_xi_speak:add'" @click="handleAdd" preIcon="ant-design:plus-outlined">新增</a-button>
        <a-button type="primary" v-auth="'bg.xispeak:bg_xi_speak:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls">导出</a-button>
        <j-upload-button type="primary" v-auth="'bg.xispeak:bg_xi_speak:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls"
          >导入</j-upload-button
        >
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button v-auth="'bg.xispeak:bg_xi_speak:deleteBatch'"
            >批量操作
            <Icon icon="ant-design:down-outlined"></Icon>
          </a-button>
        </a-dropdown>
        <!-- 高级查询 -->
        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
        <div class="table-title-search">
          <j-select-dept v-model:value="searchDeptIds" placeholder="选择牵头部门" allow-clear style="width: 100%" @change="handleDeptSearch" />
        </div>
      </template>

      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }"> </template>
    </BasicTable>

    <BgXiSpeakFeedbackViewModal ref="feedbackViewModalRef" />
    <!-- 表单区域 -->
    <BgXiSpeakModal ref="registerModal" @success="handleSuccess"></BgXiSpeakModal>
    <!-- 审批记录 -->
    <BpmPictureModal @register="registerBpmModal" />
    <FlowScheduleStartModal ref="flowScheduleModalRef" @confirm="handleFlowScheduleConfirm" />
    <FeedbackRightNowModal ref="feedbackRightNowModalRef" @confirm="handleFeedbackRightNowConfirm" />
    <BusinessProcessListModal ref="businessProcessListModalRef" />
  </div>
</template>

<script lang="ts" name="bg.xispeak-bgXiSpeak" setup>
  import { ref, reactive, unref, computed, provide } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { startProcessSchedules } from '/@/api/common/api';
  import { dateUtil } from '/@/utils/dateUtil';

  import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
  import BgXiSpeakModal from './components/BgXiSpeakModal.vue';

  import BusinessProcessListModal from '/src/components/semri/process/BusinessProcessListModal.vue';
  import FlowScheduleStartModal from '/src/components/semri/process/FlowScheduleStartModal.vue';
  import FeedbackRightNowModal from './components/FeedbackRightNowModal.vue';
  import BgXiSpeakFeedbackViewModal from './components/BgXiSpeakFeedbackViewModal.vue';
  import { columns as taskTaskColumns } from '/@/views/taskProcess/TaskTask.data';
  import { columns, superQuerySchema } from './BgXiSpeak.data';
  import {
    list,
    deleteBgXiSpeak,
    batchDeleteBgXiSpeak,
    getExportUrl,
    getImportUrl,
    getChildList,
    getChildListBatch,
    updateLaunchType,
    saveOrUpdateDict,
    withDrawXiSpeak,
    deleteSingleProcess,
    getRootListWithDept,
    bgXiSpeakFeedbackList,
  } from './BgXiSpeak.api';

  const FLOW_CODE = 'dev_bg_xi_speak_001';
  const FLOW_NAME = '习总书记重要讲话指示批示';
  const FLOW_CODE_JBR = 'bg_xi_speak_fb_01';
  const BUSINESS_TABLE_NAME = 'bg_xi_speak';
  const FORM_URL = 'bg/xispeak/components/BgXiSpeakBPMForm';

  const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
  const { createMessage } = useMessage();
  const expandedRowKeys = ref([]);
  const queryParams = ref<any>({});
  const toggleSearchStatus = ref<boolean>(false);
  const registerModal = ref();
  const flowScheduleModalRef = ref();
  const feedbackViewModalRef = ref();
  const feedbackRightNowModalRef = ref();
  const businessProcessListModalRef = ref();
  const currentBusinessId = ref('');
  const pendingFeedbackRightNow = ref(0);
  const processColumns = taskTaskColumns;
  // 是否显示DW领导列表选择
  const showSdwLeaderSelect = computed(() => queryParam.value.needSdwApproval === '1');

  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '习总书记重要讲话指示批示情况',
      api: list,
      columns,
      canResize: false,
      useSearchForm: false,
      isTreeTable: true,
      actionColumn: {
        width: 240,
        fixed: 'right',
      },
      beforeFetch: async (params) => {
        params.hasQuery = 'true';
        return Object.assign(params, queryParam.value);
      },
    },
    exportConfig: {
      name: '习总书记重要讲话指示批示情况',
      url: getExportUrl,
    },
    importConfig: {
      url: getImportUrl,
      success: success,
    },
  });

  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource, setTableData }, { rowSelection, selectedRowKeys }] =
    tableContext;
  const mainId = computed(() => (unref(selectedRowKeys).length > 0 ? unref(selectedRowKeys)[0] : ''));
  provide('mainId', mainId);

  const searchDeptIds = ref([]);
  const isDeptSearching = ref(false);

  async function handleDeptSearch(value) {
    if (!value || (Array.isArray(value) && value.length === 0)) {
      isDeptSearching.value = false;
      reload();
      return;
    }
    const deptIds = Array.isArray(value) ? value.join(',') : value;
    try {
      const res = await getRootListWithDept(deptIds);
      isDeptSearching.value = true;
      const records = res?.records || res || [];
      setTableData(records);
    } catch (e) {
      createMessage.error('按部门查询失败');
    }
  }

  const labelCol = reactive({
    xs: 24,
    sm: 4,
    xl: 6,
    xxl: 4,
  });
  const wrapperCol = reactive({
    xs: 24,
    sm: 20,
  });

  // 高级查询配置
  const superQueryConfig = reactive(superQuerySchema);

  /**
   * 高级查询事件
   */
  function handleSuperQuery(params) {
    Object.keys(params).map((k) => {
      queryParam.value[k] = params[k];
    });
    reload();
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    registerModal.value.disableSubmit = false;
    registerModal.value.add();
  }

  /**
   * 编辑事件
   */
  async function handleEdit(record) {
    registerModal.value.disableSubmit = false;
    registerModal.value.edit(record);
  }

  /**
   * 详情
   */
  async function handleDetail(record) {
    registerModal.value.disableSubmit = true;
    registerModal.value.edit(record);
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteBgXiSpeak({ id: record.id }, success);
  }

  async function handleWithDraw(record) {
    const res = await withDrawXiSpeak({ id: record.id });
    if (res.success) {
      createMessage.success(res.message || '删除流程成功');
      reload();
    } else {
      createMessage.error(res.message || '删除流程失败');
    }
  }

  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    const ids = selectedRowKeys.value.filter((item) => !item.includes('loadChild'));
    await batchDeleteBgXiSpeak({ id: ids }, success);
  }

  /**
   * 成功回调刷新页面
   */
  function success() {
    selectedRowKeys.value = [];
    reload();
  }

  /**
   * 成功回调
   */
  async function handleSuccess({ isUpdate, values, expandedArr, changeParent }) {
    if (isUpdate) {
      if (changeParent) {
        reload();
      } else {
        let data = await list({ id: values.id, pageSize: 1, pageNo: 1, pid: values['pid'] });
        if (data && data.records && data.records.length > 0) {
          updateTableDataRecord(values.id, data.records[0]);
        } else {
          updateTableDataRecord(values.id, values);
        }
      }
    } else {
      if (!values['id'] || !values['pid']) {
        reload();
      } else {
        expandedRowKeys.value = [];
        for (let key of unref(expandedArr)) {
          await expandTreeNode(key);
        }
      }
    }
  }

  /**
   * 树节点展开合并
   */
  async function handleExpand(expanded, record) {
    if (expanded) {
      expandedRowKeys.value.push(record.id);
      if (record.children && record.children.length > 0 && record.children[0].isLoading) {
        let result = await getChildList({ pid: record.id });
        result = result.records ? result.records : result;
        if (result && result.length > 0) {
          record.children = getDataByResult(result);
          await refreshFeedbackCounts(record.children);
          // 触发表格重新渲染
          updateTableDataRecord(record.id, { ...record });
        } else {
          record.children = null;
          record.hasChild = '0';
        }
      }
    } else {
      let keyIndex = expandedRowKeys.value.indexOf(record.id);
      if (keyIndex >= 0) {
        expandedRowKeys.value.splice(keyIndex, 1);
      }
    }
  }

  /**
   * 处理数据集，标记有子节点的记录
   */
  function getDataByResult(result) {
    if (result && result.length > 0) {
      return result.map((item) => {
        if (item['hasChild'] == '1') {
          let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true };
          item.children = [loadChild];
        }
        return item;
      });
    }
  }

  /**
   * 递归收集所有 ID（含子节点）
   */
  function collectAllIds(records) {
    const ids: string[] = [];
    const walk = (list) => {
      if (!list) return;
      for (const item of list) {
        if (item.id) ids.push(item.id);
        if (item.children) walk(item.children);
      }
    };
    walk(records);
    return ids;
  }

  /**
   * 批量查询反馈统计数量并更新到 records 中
   */
  async function refreshFeedbackCounts(records) {
    const ids = collectAllIds(records);
    if (ids.length === 0) return;
    try {
      // 并行加载所有记录的反馈数据
      const results = await Promise.all(
        ids.map((id) =>
          bgXiSpeakFeedbackList({
            mainId: id,
            pageNo: 1,
            pageSize: 9999,
            column: 'createTime',
            order: 'desc',
          }).catch(() => null)
        )
      );
      // 构建 id -> { total, closed } 映射
      const countsMap: Record<string, { total: number; closed: number }> = {};
      ids.forEach((id, index) => {
        const res = results[index];
        const list = Array.isArray(res) ? res : res?.records || [];
        const total = list.length;
        const closed = list.filter((item: any) => item.completionStatus == 1).length;
        countsMap[id] = { total, closed };
      });
      const updateFn = (list) => {
        if (!list) return;
        for (const item of list) {
          const counts = countsMap[item.id];
          if (counts) {
            item.implCount = counts.total;
            item.closedCount = counts.closed;
          }
          if (item.children) updateFn(item.children);
        }
      };
      updateFn(records);
    } catch (e) {
      // 静默处理查询异常
    }
  }

  /**
   * 接口请求成功后回调
   */
  async function onFetchSuccess(result) {
    getDataByResult(result.items) && loadDataByExpandedRows();
    if (result.items && result.items.length > 0) {
      await refreshFeedbackCounts(result.items);
      // 触发表格重新渲染以显示更新后的 implCount / closedCount
      setTableData([...getDataSource()]);
    }
  }

  /**
   * 根据已展开的行查询数据
   */
  async function loadDataByExpandedRows() {
    if (unref(expandedRowKeys).length > 0) {
      const res = await getChildListBatch({ parentIds: unref(expandedRowKeys).join(',') });
      if (res.success && res.result.records.length > 0) {
        let records = res.result.records;
        const listMap = new Map();
        for (let item of records) {
          let pid = item['pid'];
          if (unref(expandedRowKeys).includes(pid)) {
            let mapList = listMap.get(pid);
            if (mapList == null) {
              mapList = [];
            }
            mapList.push(item);
            listMap.set(pid, mapList);
          }
        }
        let childrenMap = listMap;
        let fn = (list) => {
          if (list) {
            list.forEach((data) => {
              if (unref(expandedRowKeys).includes(data.id)) {
                data.children = getDataByResult(childrenMap.get(data.id));
                fn(data.children);
              }
            });
          }
        };
        fn(getDataSource());
      }
    }
  }

  /**
   * 操作表格后处理树节点展开合并
   */
  async function expandTreeNode(key) {
    let record = findTableDataRecord(key);
    if (record) {
      expandedRowKeys.value.push(key);
      let result = await getChildList({ pid: key });
      result = result.records ? result.records : result;
      if (result && result.length > 0) {
        record.children = getDataByResult(result);
      } else {
        record.children = null;
        record.hasChild = '0';
      }
      updateTableDataRecord(key, record);
    }
  }

  /**
   * 添加下级
   */
  function handleAddSub(record) {
    registerModal.value.disableSubmit = false;
    registerModal.value.add(record);
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
        auth: 'bg.xispeak:bg_xi_speak:edit',
      },
    ];
  }

  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    let dropDownAction = [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
      {
        label: '添加下级',
        onClick: handleAddSub.bind(null, { pid: record.id }),
      },
      {
        label: '删除',
        popConfirm: {
          title: '确定删除吗?',
          confirm: handleDelete.bind(null, record),
          placement: 'topLeft',
        },
        auth: 'bg.xispeak:bg_xi_speak:delete',
      },
      // {
      //   label: '审批进度',
      //   onClick: handlePreviewPic.bind(null, record),
      //   ifShow: !!record.bpmStatus && record.bpmStatus !== '1',
      // },
      {
        label: '查询督办流程',
        onClick: handleQueryProcess.bind(null, record),
      },
      {
        label: '删除关联流程',
        popConfirm: {
          title: '确定删除该记录关联的所有运行中流程吗？',
          confirm: handleWithDraw.bind(null, record),
          placement: 'topLeft',
        },
        ifShow: !!record.bpmStatus && record.bpmStatus !== '1',
      },
      {
        label: '查看反馈',
        onClick: handleViewFeedback.bind(null, record),
      },
    ];

    if (record.bpmStatus == '1' || !record.bpmStatus) {
      dropDownAction.push({
        label: '发起落实措施收集流程',
        onClick: handleProcess.bind(null, record),
      });
      dropDownAction.push({
        label: '发起经办人执行反馈流程',
        onClick: handleProcessJbr.bind(null, record),
      });
    }
    if (record.bpmStatus == '2') {
      dropDownAction.push({
        label: '再次发起经办人执行反馈流程',
        onClick: handleProcessJbr.bind(null, record),
      });
    }

    return dropDownAction;
  }

  function splitDeptValue(value) {
    if (Array.isArray(value)) {
      return value.map((item) => String(item || '').trim()).filter(Boolean);
    }
    return String(value || '')
      .split(/[,\uFF0C]/)
      .map((item) => item.trim())
      .filter(Boolean);
  }

  function getImplDeptOptions(record) {
    const deptIds = splitDeptValue(record?.implDept);
    const deptNames = splitDeptValue(record?.implDept_dictText);
    return deptIds.map((deptId, index) => ({
      value: deptId,
      label: deptNames[index] || deptId,
    }));
  }

  function getLeadDeptOptions(record) {
    const deptIds = splitDeptValue(record?.implDept);
    const deptNames = splitDeptValue(record?.implDept_dictText);
    return deptIds.map((deptId, index) => ({
      value: deptId,
      label: deptNames[index] || deptId,
    }));
  }

  function getNextSuperviseCount(value) {
    const count = Number(value || 0);
    return Number.isFinite(count) ? count + 1 : 1;
  }

  function handleProcess(record) {
    feedbackRightNowModalRef.value?.open(record);
  }

  function handleFeedbackRightNowConfirm({ record, feedbackRightNow }) {
    pendingFeedbackRightNow.value = feedbackRightNow;
    flowScheduleModalRef.value?.open({
      title: '发起落实措施收集流程',
      payload: { record },
      deptOptions: getLeadDeptOptions(record),
      showSuoleaderFields: true,
      isNeedAppro: record?.needSdwApproval,
      supDeptleaderid: record?.sdwLeaderList,
    });
  }

  function handleProcessJbr(record) {
    flowScheduleModalRef.value?.open({
      title: '发起落实部门经办人执行反馈流程',
      payload: { record, flowCode: FLOW_CODE_JBR },
      deptOptions: getImplDeptOptions(record),
      showSuoleaderFields: true,
      isNeedAppro: record?.needSdwApproval,
      supDeptleaderid: record?.sdwLeaderList,
    });
  }

  function handleQueryProcess(record) {
    currentBusinessId.value = record.id;
    businessProcessListModalRef.value?.open({
      title: '流程列表',
      businessId: record.id,
      columns: '',
      onDeleteProcess: handleDeleteProcess,
    });
  }

  async function handleDeleteProcess(processRecord, reload) {
    const res = await deleteSingleProcess({ processInstId: processRecord.processInstId });
    if (res.success) {
      createMessage.success(res.message || '删除流程成功');
      await reload();
    } else {
      createMessage.error(res.message || '删除流程失败');
    }
  }

  async function handleFlowScheduleConfirm({ payload, options }) {
    const record = payload?.record || {};
    const flowCode = payload?.flowCode || FLOW_CODE;
    const formatDate = (value, format) => {
      return value ? dateUtil(value).format(format) : undefined;
    };

    const launchType = options.triggerType === 2 ? 1 : 0;

    if (flowCode === FLOW_CODE) {
      await updateLaunchType({ id: record.id, launchType });
    }

    const nextSuperviseCount = getNextSuperviseCount(record.supervisionCount);

    const flowJsonData = {
      ...record,
      isNeedAppro: options.isNeedAppro ?? record.needSdwApproval ?? '',
      supDeptleaderid: options.supDeptleaderid ?? record.sdwLeaderList ?? '',
      supervisionCount: nextSuperviseCount,
      feedback_right_now: flowCode === FLOW_CODE ? pendingFeedbackRightNow.value : undefined,
    };

    if (flowCode === FLOW_CODE_JBR) {
      const selectedDeptIds = options.deptIds || [];
      if (selectedDeptIds.length === 0) {
        createMessage.warning('请选择落实部门');
        return;
      }

      let successCount = 0;
      const total = selectedDeptIds.length;

      for (const deptId of selectedDeptIds) {
        const deptDetail = record.approveInfo?.[deptId];
        const implUserNameList: string[] = deptDetail?.implUserNameList || [];
        const deptHandlerName = implUserNameList.join(',');
        const params = {
          intervalType: options.intervalType,
          startCount: options.startCount,
          taskTask: {
            triggerType: options.triggerType,
            startTime: options.intervalStartTime,
            flowCode: flowCode,
            formUrl: FORM_URL,
            flowName: '落实部门经办人执行反馈流程',
            jsonData: {
              ...flowJsonData,
              currentDeptId: deptId,
            },
            businessTablename: BUSINESS_TABLE_NAME,
            businessId: record.id,
            title: record.speakStatus,
            content: record.implStatus,
            urgencyLevel: record.completionStatus,
            deptId: deptId,
            deptLeaderId: deptDetail?.approverId || '',
            deptHandlerName: deptHandlerName,
            requireFinishDate: formatDate(record.time, 'YYYY-MM-DD'),
            deadline: record.deadline || formatDate(record.time, 'YYYY-MM-DD'),
          },
        };

        try {
          await startProcessSchedules(params);
          successCount++;
          if (successCount === total) {
            await saveOrUpdateDict({ id: record.id, bpmStatus: '2', supervisionCount: nextSuperviseCount, completionStatus: 0 }, true);
            createMessage.success(`成功发起 ${total} 个经办人执行反馈流程`);
            reload();
          }
        } catch (e) {
          createMessage.error(`部门 ${deptId} 流程发起失败`);
        }
      }
      return;
    }

    const params = {
      intervalType: options.intervalType,
      startCount: options.startCount,
      taskTask: {
        triggerType: options.triggerType,
        startTime: options.intervalStartTime,
        flowCode: flowCode,
        formUrl: FORM_URL,
        flowName: FLOW_NAME,
        jsonData: flowJsonData,
        businessTablename: BUSINESS_TABLE_NAME,
        businessId: record.id,
        title: record.speakStatus,
        content: record.implStatus,
        urgencyLevel: record.completionStatus,
        deptId: options.deptId || record.implDept,
        deptLeaderId: record.responsiblePerson,
        requireFinishDate: formatDate(record.time, 'YYYY-MM-DD'),
        deadline: record.deadline || formatDate(record.time, 'YYYY-MM-DD'),
      },
    };

    await startProcessSchedules(params);
    await saveOrUpdateDict({ id: record.id, bpmStatus: '2', supervisionCount: nextSuperviseCount, completionStatus: 0 }, true);
    createMessage.success('发起成功');
    reload();
  }

  async function handlePreviewPic(record) {
    bpmPicModal(true, {
      flowCode: FLOW_CODE,
      dataId: record.id,
    });
  }

  async function handleViewFeedback(record: Recordable) {
    feedbackViewModalRef.value.open(record);
  }

  /**
   * 查询
   */
  function searchQuery() {
    reload();
  }

  /**
   * 重置
   */
  function searchReset() {
    queryParam.value = {};
    selectedRowKeys.value = [];
    reload();
  }

  /**
   * form点击事件(以逗号分割)
   */
  function handleFormJoinChange(key, value) {
    if (typeof value != 'string') {
      queryParam.value[key] = value.join(',');
    }
  }
</script>

<style lang="less" scoped>
  .table-title-search {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    width: 280px;
  }
</style>