client-base-v5/src/workflow/ApprovedWorkflow.vue

<template>
  <a-row type="flex" justify="space-between">
    <a-col>
      <a-input-search
        v-model:value="searchParams.condition"
        :placeholder="$t('lang.NeedApproveWorkflow.describe1')"
        enter-button="搜索"
        allow-clear
        style="width: 300px"
        @search="queryDatas"
      />
    </a-col>
    <a-col>
      <WorkflowType @get-type="getTypeNo" />
      <WorkflowSearch :function-type="3" @get-search-params="searchWorkflow" />
    </a-col>
  </a-row>
  <a-table
    sticky
    bordered
    :pagination="false"
    :columns="approveColumns"
    :data-source="approveDatas"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'title'">
        <span v-if="record.category != 'CurdWindow'">
          {{ record.name }}
        </span>
        <span v-else>
          {{ record.title }}
        </span>
      </template>
      <template v-if="column.key === 'description'">
        <span
          v-if="record.category != 'CurdWindow'"
          style="white-space: pre-line"
        >{{ record.description }}</span>
        <span v-else style="white-space: pre-line">{{ record.content }}</span>
      </template>
      <template v-if="column.key === 'documentStatus'">
        <a-tag v-if="record.documentStatus === '已完成'" color="success">
          已完成
        </a-tag>
        <a-tag v-if="record.documentStatus === '进行中'" color="processing">
          进行中
        </a-tag>
      </template>
      <template v-if="column.key === 'operation'">
        <a-button type="link" @click="selectTaskInfo(record)">
          {{ $t("lang.NeedApproveWorkflow.viewTasks") }}
        </a-button>
      </template>
    </template>
    <template v-if="approveDatas.length > 0 && isShowMore" #footer>
      <div style="text-align: center">
        <a-button type="link" @click="loadMore">加载更多</a-button>
      </div>
    </template>
  </a-table>
  <Loading v-if="isLoading" />
  <CustomerTask
    ref="customerTask"
    :task-id="selectedTaskId"
    @closed="() => searchDatas"
  />
</template>

<script setup>
import { ref, reactive, defineEmits, onMounted } from 'vue';
import Common from '../common/Common';
import WorkflowType from './WorkflowType.vue';
import WorkflowSearch from './WorkflowSearch.vue';
import { ajaxApi } from '../api/workflow/workflow.js';
import { message } from 'ant-design-vue';
import { approvedColumns } from './configData.js';
import TaskOpenUtil from './TaskOpenUtil.js';
import WindowService from '../common/WindowService.js';
import CustomerTask from './CustomerTask.vue';
import { Notify } from 'pc-component-v3';

const emit = defineEmits(['refreshStasticCount']);
const customerTask = ref(null);
const selectedTaskId = ref(null);
const isLoading = ref(false);
const isShowMore = ref(true);
const approveDatas = ref([]);
const approveColumns = ref(approvedColumns);
const searchParams = ref({});
const filterParams = ref({});
const pager = reactive({
  start: 0,
  length: 10,
});

onMounted(() => {
  searchDatas(true);
});

// 查询条件时从0开始
const queryDatas = () => {
  pager.start = 0;
  isShowMore.value = true;
  searchDatas(true);
};

// 加载更多时push
const loadMore = () => {
  pager.start += 10;
  searchDatas();
};

// 查询
const searchDatas = isSearch => {
  const params = { ...searchParams.value, ...filterParams.value, ...pager };
  searchApprove(params, isSearch);
};

// 获取类型no
const getTypeNo = windowNo => {
  pager.start = 0;
  isShowMore.value = true;
  searchParams.value.windowNo = windowNo;
  searchDatas(true);
};

// 通过高级查询搜索
const searchWorkflow = value => {
  pager.start = 0;
  isShowMore.value = true;
  filterParams.value = value;
  searchDatas(true);
};

// 查询数据API
const searchApprove = (params, isSearch) => {
  isLoading.value = true;
  const url = 'api/WorkflowResource/approved';
  ajaxApi(url, params).then(
    success => {
      if (success.errorCode === 0) {
        if (success.datas && success.datas.length > 0) {
          const allDatas = JSON.parse(JSON.stringify(approveDatas.value));
          success.datas.forEach(item => {
            item.content = parseContent(item.content);
            if (!isSearch) {
              allDatas.push(item);
            }
          });
          const ids = new Set(allDatas.map(item => item.id));
          approveDatas.value = allDatas.filter(item => ids.has(item.id));
          if (isSearch) {
            approveDatas.value = success.datas;
          }
        } else {
          if (!isSearch) {
            message.info('没有更多数据了。');
            isShowMore.value = false;
            isLoading.value = false;
            return;
          }
          approveDatas.value = [];
        }
      } else {
        message.warning(success.errorMessage);
      }
      isLoading.value = false;
    },
    error => {
      isLoading.value = false;
      Common.processException(error);
    },
  );
};

// 选择了taskInfo
const selectTaskInfo = taskInfo => {
  TaskOpenUtil.openHistoryTask(taskInfo).then(
    successData => {
      if (successData.type === 'newWindow') {
        WindowService.open(successData.url, '已处理的', function () {
          searchDatas();
          emit('refreshStasticCount');
        });
      } else if (successData.type === 'customerTask') {
        // 打开自定义的界面
        selectedTaskId.value = taskInfo.id;
        customerTask.value.show();
        searchDatas();
        emit('refreshStasticCount');
      }
    },
    errorData => {
      if (errorData != null) {
        Notify.error(errorData.title, errorData.message, false);
      }
    },
  );
};

// 处理content json
const parseContent = content => {
  const x = content;
  try {
    let content = JSON.parse(x);
    let parentForm = '';
    if (content != null && content.parentForm != null) {
      content.parentForm.forEach(item => {
        parentForm = parentForm + item.title + ':' + item.content + '，\n';
      });
      return parentForm;
    } else {
      return null;
    }
    // eslint-disable-next-line no-empty
  } catch (e) {}
};
</script>

<style scoped>
.ant-table-wrapper {
  margin-top: 8px;
}
</style>