web/src/views/my-workbenches/workbenches/my-waits/waits-list.vue

<template>
  <div class="message-list waits-list">
    <div
      v-for="item in tableData"
      :key="item.id"
      class="message-item cursor-pointer"
      @click="editSopFlowHandle(item)"
    >
      <div class="m-head">
        <div class="m-title">
          <span>{{ item.taskName }}</span>
          <t-tag v-if="item.diffTime == 0" theme="success" variant="light"
            >正常</t-tag
          >
          <template v-else>
            <t-tag theme="danger" variant="light">已超时</t-tag>
            <t-tag theme="danger" variant="light"
              >超时时长：{{ item.diffTime <= 30 ? '30天' : '大于30天' }}</t-tag
            >
          </template>
        </div>
        <div class="m-time">{{ timestampFilter(item.flowTime, 'mm') }}</div>
      </div>
      <div class="m-body">
        <div class="m-content">{{ item.typeStr }}</div>
        <t-space class="m-info" :size="5">
          <p>发起人：{{ item.createRealName }}</p>
          <p>服务单元： {{ item.serviceName }} </p>
          <p>客户类型：{{ customerTypeFilter(item.customType) }}</p>
          <p>客户名称：{{ item.customName }}</p>
          <template #separator>
            <t-divider layout="vertical" />
          </template>
        </t-space>
      </div>
    </div>

    <t-pagination
      v-if="pagination.total > 0"
      class="page-pagination"
      v-model="pagination.pageNumber"
      v-model:pageSize="pagination.pageSize"
      :total="pagination.total"
      showJumper
      :showPageSize="false"
      @change="onChange"
    />
    <div class="none-box" v-if="!tableData.length">
      <img src="../../../../assets/none_message.svg" />
      <p>暂无数据</p>
    </div>

    <!-- SopStepDialog -->
    <sop-step-dialog
      v-model:visible="showSopStepDialog"
      :sop="curSopData"
      type="fill"
      @confirm="sopStepConfirm"
    ></sop-step-dialog>
  </div>
</template>

<script setup name="MyTaskList">
import { timestampFilter, customerTypeFilter } from '@/utils/filter';
import SopStepDialog from '@/views/sop/sop-manange/sop-step/sop-step-dialog.vue';

const { tableData, pagination, onChange } = defineProps([
  'tableData',
  'pagination',
  'onChange',
]);

const showSopStepDialog = ref(false);
const curSopData = ref({});
const editSopFlowHandle = (row) => {
  curSopData.value = row;
  showSopStepDialog.value = true;
};
const sopStepConfirm = () => {
  onChange(pagination);
};
</script>