#

zhou zhou

1 天以前 4259deb19122a4807d50c99ed4a95405ebe4a47c

 rsf-design/src/views/manager/task/modules/task-detail-drawer.vue

@@ -5,70 +5,127 @@
    size="85%"
    @update:model-value="handleVisibleChange"
  >
    <div class="flex h-full flex-col gap-4">
      <div class="grid gap-4 xl:grid-cols-[1.45fr_1fr]">
        <ElCard shadow="never" class="border border-[var(--el-border-color-lighter)]">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="font-medium text-[var(--art-text-gray-900)]">{{ t('pages.task.detail.baseInfo') }}</span>
              <ElTag size="small" effect="plain" type="primary">
                {{ detail.taskCode || '--' }}
              </ElTag>
    <ElScrollbar class="h-full">
      <div class="flex min-h-full min-w-0 flex-col gap-4 pr-2">
        <div class="grid shrink-0 gap-4 xl:grid-cols-[1.45fr_1fr]">
          <ElCard
            shadow="never"
            class="task-detail-card border border-[var(--el-border-color-lighter)]"
          >
            <template #header>
              <div class="flex items-center justify-between">
                <span class="font-medium text-[var(--art-text-gray-900)]">{{
                  t('pages.task.detail.baseInfo')
                }}</span>
                <ElTag size="small" effect="plain" type="primary">
                  {{ detail.taskCode || '--' }}
                </ElTag>
              </div>
            </template>

            <ElDescriptions :column="2" border size="small" class="compact-descriptions">
              <ElDescriptionsItem :label="t('pages.task.detail.taskId')">{{
                detail.taskId ?? '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.taskStatus')">{{
                detail.taskStatusLabel || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.taskType')">{{
                detail.taskTypeLabel || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.warehType')">{{
                detail.warehTypeLabel || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.priority')">{{
                detail.sort ?? '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.status')">{{
                detail.statusText || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.robotCode')">{{
                detail.robotCode || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.createBy')">{{
                detail.createByText || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.createTime')">{{
                detail.createTimeText || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.updateBy')">{{
                detail.updateByText || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.updateTime')">{{
                detail.updateTimeText || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.memo')" :span="2">{{
                detail.memo || '--'
              }}</ElDescriptionsItem>
            </ElDescriptions>
          </ElCard>

          <ElCard
            shadow="never"
            class="task-detail-card border border-[var(--el-border-color-lighter)]"
          >
            <template #header>
              <div class="flex items-center justify-between">
                <span class="font-medium text-[var(--art-text-gray-900)]">{{
                  t('pages.task.detail.pathInfo')
                }}</span>
                <ElButton text type="primary" @click="$emit('flow-step')">{{
                  t('pages.task.detail.flowStep')
                }}</ElButton>
              </div>
            </template>

            <ElDescriptions :column="1" border size="small" class="compact-descriptions">
              <ElDescriptionsItem :label="t('pages.task.detail.orgLoc')">{{
                detail.orgLoc || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.orgSite')">{{
                detail.orgSiteLabel || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.targLoc')">{{
                detail.targLoc || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.targSite')">{{
                detail.targSiteLabel || '--'
              }}</ElDescriptionsItem>
              <ElDescriptionsItem :label="t('pages.task.detail.barcode')">{{
                detail.barcode || '--'
              }}</ElDescriptionsItem>
            </ElDescriptions>
          </ElCard>
        </div>

        <div class="shrink-0 flex items-center justify-between">
          <div>
            <div class="text-sm font-medium text-[var(--art-text-gray-900)]">{{
              t('pages.task.detail.items')
            }}</div>
            <div class="mt-1 text-xs text-[var(--art-text-gray-500)]">
              {{ t('pages.task.detail.itemsHint') }}
            </div>
          </template>

          <ElDescriptions :column="2" border>
            <ElDescriptionsItem :label="t('pages.task.detail.taskStatus')">{{ detail.taskStatusLabel || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.taskType')">{{ detail.taskTypeLabel || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.warehType')">{{ detail.warehTypeLabel || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.priority')">{{ detail.sort ?? '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.status')">{{ detail.statusText || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.robotCode')">{{ detail.robotCode || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.createTime')">{{ detail.createTimeText || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.updateTime')">{{ detail.updateTimeText || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.memo')" :span="2">{{ detail.memo || '--' }}</ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>

        <ElCard shadow="never" class="border border-[var(--el-border-color-lighter)]">
          <template #header>
            <div class="flex items-center justify-between">
              <span class="font-medium text-[var(--art-text-gray-900)]">{{ t('pages.task.detail.pathInfo') }}</span>
              <ElButton text type="primary" @click="$emit('flow-step')">{{ t('pages.task.detail.flowStep') }}</ElButton>
            </div>
          </template>

          <ElDescriptions :column="1" border>
            <ElDescriptionsItem :label="t('pages.task.detail.orgLoc')">{{ detail.orgLoc || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.orgSite')">{{ detail.orgSiteLabel || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.targLoc')">{{ detail.targLoc || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.targSite')">{{ detail.targSiteLabel || '--' }}</ElDescriptionsItem>
            <ElDescriptionsItem :label="t('pages.task.detail.barcode')">{{ detail.barcode || '--' }}</ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>
      </div>

      <div class="flex items-center justify-between">
        <div>
          <div class="text-sm font-medium text-[var(--art-text-gray-900)]">{{ t('pages.task.detail.items') }}</div>
          <div class="mt-1 text-xs text-[var(--art-text-gray-500)]">
            {{ t('pages.task.detail.itemsHint') }}
          </div>
          <div class="flex items-center gap-2">
            <ElButton :loading="loading" @click="$emit('refresh')">{{
              t('common.actions.refresh')
            }}</ElButton>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <ElButton :loading="loading" @click="$emit('refresh')">{{ t('common.actions.refresh') }}</ElButton>

        <div class="min-w-0">
          <ArtTable
            :loading="loading"
            :data="data"
            :columns="columns"
            :pagination="pagination"
            @pagination:size-change="$emit('size-change', $event)"
            @pagination:current-change="$emit('current-change', $event)"
          />
        </div>
      </div>

      <ArtTable
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination="pagination"
        @pagination:size-change="$emit('size-change', $event)"
        @pagination:current-change="$emit('current-change', $event)"
      />
    </div>
    </ElScrollbar>
  </ElDrawer>
</template>

@@ -86,9 +143,31 @@
    pagination: { type: Object, default: () => ({ current: 1, size: 20, total: 0 }) }
  })

  const emit = defineEmits(['update:visible', 'refresh', 'size-change', 'current-change', 'flow-step'])
  const emit = defineEmits([
    'update:visible',
    'refresh',
    'size-change',
    'current-change',
    'flow-step'
  ])

  function handleVisibleChange(visible) {
    emit('update:visible', visible)
  }
</script>

<style scoped>
  :deep(.task-detail-card .el-card__header) {
    padding: 12px 16px;
  }

  :deep(.task-detail-card .el-card__body) {
    padding: 12px 16px 16px;
  }

  :deep(.compact-descriptions .el-descriptions__label.el-descriptions__cell),
  :deep(.compact-descriptions .el-descriptions__content.el-descriptions__cell) {
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>