yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/progressInquiry/index.vue

<template>
  <div>
          <!-- :useOnlineHeader="true"
      :showSettingTools="true" -->

    <!-- 进度查询 -->
    <SmartTable
      ref="smartTableRef"
      v-model:pageNo="pagination.pageNo"
      v-model:pagesize="pagination.pageSize"
      v-model:total="pagination.total"
      :columns="columns"
      :data="dataSource"
      :showRefresh="false"
      :tableHeaderSetting="'进度查询'"
      :tableProps="{
        emptyText: '暂无数据',
        rowClassName: getRowClassName
      }"
      :buttons="buttons"
      :loading="tableLoading"
      @on-page-no-change="() => getList()"
      @on-page-size-change="() => getList()"
      @on-search="getList"
      @on-reset="getList"
      v-model:formData="searchInfo"
      @row-dblclick="(row) => showNoticeDetail(row)"
    >
      <template #expandSlot="{ row }">
        <div class="children-item" v-if="row.taskList && row.taskList.length > 0">
          <el-table :data="row.taskList" class="table-children" border>
            <el-table-column prop="progressStatusName" label="当前状态" align="center">
              <template #default="scoped">
                <div>
                  <el-tag type="success" size="mini">
                    {{ scoped.row.progressStatusName }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="contractNo" label="合同/协议编号" align="center">
              <template #default>
                <div>
                  {{ row.contractNo || row.acceptanceNo }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="taskNo" label="任务编号" align="center" />
            <el-table-column prop="entrustUnitName" label="委托单位" align="center" />
            <el-table-column prop="sampleName" label="样品名称" align="center">
              <template #default="scoped">
                <div v-for="(item, index) in scoped.row.sampleInfoList" :key="index">
                  <span>{{ item.sampleName }}</span>
                  <span v-if="index < scoped.row.sampleInfoList.length - 1">,</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sampleReportNo" label="样品编号" align="center">
              <template #default="scoped">
                <div v-for="(item, index) in scoped.row.sampleInfoList" :key="index">
                  <span>{{ item.sampleReportNo }}</span>
                  <span v-if="index < scoped.row.sampleInfoList.length - 1">,</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productBatchNo" label="产品批号" align="center">
              <template #default="scoped">
                 <div v-for="(item, index) in scoped.row.sampleInfoList" :key="index">
                  <span>{{ item.productBatchNo }}</span>
                  <span v-if="index < scoped.row.sampleInfoList.length - 1">,</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="checkType" label="检验类别" align="center">
              <template #default="scoped">
                <div>
                  {{ getCheckTypes.find((x) => x.value == scoped.row.checkType)?.label}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productionUnit" label="生产单位" align="center">
              <template #default="scoped">
                <div v-for="(item, index) in scoped.row.sampleInfoList" :key="index">
                  <span>{{ item.productionUnit }}</span>
                  <span v-if="index < scoped.row.sampleInfoList.length - 1">,</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="inspectionCompletedDate" label="检验完成日期" align="center">
              <template #default="scoped">
                <div>
                  {{
                    scoped.row.inspectionCompletedDate
                      ? dayjs(scoped.row.inspectionCompletedDate).format('YYYY-MM-DD')
                      : '-'
                  }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </SmartTable>

    <!-- 流转记录 -->
    <FunctionalHistory v-if="isShowHistory" v-model="isShowHistory" :id="historyId" />
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, defineAsyncComponent } from 'vue'
import SmartTable from '@/components/SmartTable/SmartTable'
import { Tickets } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getFunctionalList } from '@/api/laboratory/functional'
const FunctionalHistory = defineAsyncComponent(
  () => import('@/views/Functional/components/FunctionalHistory.vue')
)
import dayjs from 'dayjs'
import { useDictStore } from '@/store/modules/dict'
const dictStore = useDictStore()
import { listToTree } from '@/utils/tree'
import { getStandardClassList } from '@/api/laboratory/standard/category'

import { progressInquiryApi } from '@/api/laboratory/progressInquiryService'
import dayJs from 'dayjs'
import download from '@/utils/download'
import { useRouter } from 'vue-router'
const router = useRouter()

import noticeDrawer from './noticeDrawer.vue'

const tableLoading = ref(false)
const dataSource = ref([])
const pagination = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0
})

const noticeDrawerRef = ref<any>(null)
const showDrawer = ref(false) // 打开公告新增、修改弹窗

const searchInfo = ref({})

/** 查询列表 */
const getList = async () => {
  tableLoading.value = true
  try {
    const { pageNo, pageSize } = pagination
    const res = await progressInquiryApi.getBusinessAcceptanceProgressPageList({
      ...searchInfo.value,
      pageNo,
      pageSize
    })
    let { list = [], total } = res
    dataSource.value = list
    pagination.total = total
  } finally {
    tableLoading.value = false
  }
}

// 检验类别
const getCheckTypes = computed(() => dictStore.getDictMap['laboratory_inspection_category'])

const getStatusType = (value) => {
  switch (value) {
    case '15':
      return 'danger'
    case '14':
    case '13':
    case '12':
      return 'warning'
    case '11':
      return 'primary'
    case '10':
      return 'warning'
    default:
      return 'info' // 默认类型
  }
}
const getFunctionalStatusTypes = ref<Array<Record<string, any>>>([
  {
    label: '业务受理',
    value: '业务受理'
  },
  {
    label: '业务审核',
    value: '业务审核'
  },
  {
    label: '技术审核',
    value: '技术审核'
  },
  {
    label: '检验中',
    value: '检验中'
  },
  {
    label: '已办结',
    value: '已办结'
  }
])
const columns = ref([
  {
    type: 'selection',
    width: 55,
    align: 'center',
    label: '',
    prop: ''
  },
  {
    label: '',
    prop: 'expandProp',
    type: 'expand',
    width: 60,
    align: 'center',
    slot: 'expandSlot'
  },
  {
    label: '序号',
    prop: '',
    type: 'index',
    width: 60,
    align: 'center'
  },
  {
    label: '当前状态',
    prop: 'businessStatusList',
    align: 'center',
    search: {
      type: 'select',
      options: getFunctionalStatusTypes.value,
      fieldProps: {
        multiple: true
      }
    },
    render: (row, value) => {
      return row.businessStatus ? (
        <div>
          <el-tag key={row.id} type={getStatusType(row.businessStatus)}>
            {
              (getFunctionalStatusTypes.value || []).find((x) => x.value == row.businessStatus)
                ?.label
            }
          </el-tag>
        </div>
      ) : (
        '-'
      )
    }
  },
  {
    label: '合同/服务单/受理单编号',
    prop: 'contractNo',
    search: {
      type: 'input'
    },
    render: (row, value) => row.contractNo || row.acceptanceNo || '-'
  },
  {
    label: '委托单位',
    prop: 'entrustUnitName',
    search: {
      type: 'input'
    }
  },
  {
    label: '检验类别',
    prop: 'checkType',
    search: {
      type: 'select',
      options: getCheckTypes.value
    },
    render(row, value) {
      return !value
        ? '-'
        : value
            .split(',')
            .map((y) => <div>{getCheckTypes.value.find((x) => x.value === y)?.label}</div>)
    }
  },
  {
    label: '业务类型',
    prop: 'applicationForm',
    search: {
      type: 'treeSelect',
      options: [],
      fieldProps: {
        props: {
          children: 'children',
          label: 'name',
          value: 'id',
          isLeaf: 'leaf',
          emitPath: false
        }
      }
    },
    render(row, value) {
      return row.applicationFormName ? row.applicationFormName : '-'
    }
  },
  {
    label: '受理人',
    prop: 'acceptedByName'
  },
  {
    label: '受理日期',
    prop: 'acceptanceTime',
    search: {
      type: 'daterange'
    },
    render(row, value) {
      return !value ? '-' : dayjs(value).format('YYYY-MM-DD')
    }
  },
  {
    label: '费用',
    prop: 'totalFess',
    width: 130,
    render(row, value) {
      return <span style="color: red;">{value}</span>
    }
  },
  {
    label: '加急',
    prop: 'isUrgent',
    width: 80,
    render(row, value) {
      return (
        <el-tag key={row.id} type={value === '1' ? 'danger' : 'info'}>
          {value === '1' ? '是' : '否'}
        </el-tag>
      )
    }
  }
])
const buttons = ref([
  {
    render() {
      return (
        <el-button type="primary" onClick={() => handleShowHistory()}>
          <el-icon>
            <Tickets />
          </el-icon>
          流转记录
        </el-button>
      )
    }
  }
])

const smartTableRef = ref<any>(null)
const taskListTableRef = ref<any>(null)

/**
 * 查看详情
 */
const showNoticeDetail = async (row: any = {}) => {
  if (row.contractNo || row.acceptanceNo) {
    const result = await getFunctionalList({
      contractNo: row.contractNo ? row.contractNo : row.acceptanceNo
    })
    if (result.list.length) {
      const id = result.list[0].id
      router.push({
        name: 'FunctionalDetail',
        query: {
          id
        }
      })
    } else {
      return ElMessage.warning('暂无相关业务受理信息')
    }
  } else {
    return ElMessage.warning('暂无相关业务受理信息')
  }
}

const historyId = ref('')
const isShowHistory = ref(false)
/**
 * 查看流转记录
 */
const handleShowHistory = () => {
  const selectedRows = smartTableRef.value?.getTableRef().getSelectionRows() || []
  if (!selectedRows.length) {
    ElMessage.warning('请选择数据')
    return
  }
  if (selectedRows.length > 1) {
    ElMessage.warning('只能选择一条数据')
    return
  }
  historyId.value = selectedRows[0].id
  isShowHistory.value = true
}
// 获取标准分类列表
const fetchStandardClassList = async () => {
  const res = await getStandardClassList({})
  columns.value.forEach((item) => {
    if (item.prop === 'applicationForm' && item.search) {
      item.search.options =
        listToTree((res || [])?.map((item) => ({ ...item, pid: item.parentId }))) || []
    }
  })
}
// 为行添加自定义类名
const getRowClassName = ({ row }) => {
  // 如果没有子项目，添加特殊类名
  if (!row.taskList || row.taskList.length === 0) {
    return 'row-no-children'
  }
  return ''
}
onMounted(() => {
  getList()
  fetchStandardClassList()
})
</script>

<style lang="scss" scoped>
// 隐藏没有子项目行的展开图标
:deep(.row-no-children .el-table__expand-column .el-table__expand-icon) {
  visibility: hidden;
}

// 或者完全移除展开列的点击功能
:deep(.row-no-children .el-table__expand-column) {
  cursor: default;
  pointer-events: none;
}

// 确保没有子项目的行不能展开
:deep(.row-no-children .el-table__expand-column .cell) {
  opacity: 0.3;
}

::v-deep(.el-descriptions__label) {
  width: 160px !important;
}

.usuallyContent {
  .mainTitle {
    margin-bottom: 16px;
  }
  &-item {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    .title {
      margin-bottom: 10px;
      width: 100px;
    }
    .title::before {
      position: absolute;
      left: 0;
      content: '*';
      color: red;
    }
  }
}

.mr10 {
  margin-right: 10px;
}

.card {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  &-item {
    width: 24%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background-color: #dbe8f2;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    cursor: pointer;
    .icons {
      background: #4081f1;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 4px;
    }
    .title {
      width: 160px;
    }
  }
}
:deep(.el-table) {
  .el-table__row {
    cursor: pointer;
  }
  .el-table__cell {
    padding: 30px 0 !important;
  }
}
::v-deep .table-children {
  // padding-left: 385px;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  th.el-table__cell {
    background-color: #f0f9eb;
    color: #333; /* 文字颜色 */
  }
}
</style>