yudao-web/src/views/enterpriseinspections/detail.vue

<template>
  <ContentWrap title="任务状况">
    <section class="grid grid-cols-3 grid-rows-2 gap-20px">
      <section class="item">
        <section class="label">任务名称</section>
        <section>
          {{ detailData.taskName }}
        </section>
        <el-button
          type="primary"
          link
          text
          @click="
            push({
              path: `/enterprises/update`,
              query: { id: detailData.enterpriseId }
            })
          "
          >详情
        </el-button>
      </section>
      <section class="item">
        <section class="label">任务类型</section>
        <section>{{ detailData.taskType }} </section>
      </section>
      <section class="item">
        <section class="label">发布部门</section>
        <section>{{ detailData.department }}</section>
      </section>
      <section class="item">
        <section class="label">企业名称</section>
        <section>{{ detailData.enterpriseName }} </section>
        <el-button
          type="primary"
          link
          text
          @click="
            push({
              path: `/enterprises/update`,
              query: { id: detailData.enterpriseId }
            })
          "
          >详情
        </el-button>
      </section>
      <section class="item">
        <section class="label">所属部门</section>
        <section> {{ detailData.taskName }}</section>
      </section>
      <section class="item">
        <section class="label">执法人员</section>
        <section>
          {{ detailData.inspectName }}
        </section>
        <el-button
          type="primary"
          link
          text
          @click="changeUserFun"
          v-if="![1, 3].includes(detailData.inspectionStatus)"
        >
          变更
        </el-button>
      </section>
    </section>
  </ContentWrap>
  <ContentWrap title="执法流程">
    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
      <el-table-column label="执法人员" prop="inspectName" />
      <el-table-column label="协同执法" prop="cooperateWithName" />

      <el-table-column label="进度状态" prop="inspectionStatus">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.INSPECTIONS_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="执法时间" prop="createTime" :formatter="dateFormatter" />
      <el-table-column label="结果反馈" align="center" width="100px">
        <template #default="scope">
          <el-button link v-if="scope.row.status > 1" type="primary" @click="viewDetail(scope.row)">
            详情
          </el-button>
          <span v-if="scope.row.status === 1">-</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <changeUser ref="changeUserRef" @success="getDetail" />
  <EnterpriseInspectionsForm ref="detailRef" />
</template>

<script setup>
import { EnterpriseInspectionsApi } from '@/api/enterpriseinspections'
import { DICT_TYPE } from '@/utils/dict'
import EnterpriseInspectionsForm from './EnterpriseInspectionsForm.vue'
import changeUser from './ChangeUser.vue'

import { dateFormatter } from '@/utils/formatTime'
import { ref } from 'vue'

defineOptions({ name: 'EnterpriseInspections' })
const loading = ref(true) // 列表的加载中
const list = ref() // 列表的数据
const total = ref(0) // 列表的总页数
const queryFormRef = ref()
const detailRef = ref()
const route = useRoute()
const formRef = ref()
const { push } = useRouter()
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  inspectionsId: route.query.id
})
const detailData = ref({
  enterpriseName: undefined,
  taskName: undefined,
  tagList: undefined,
  department: undefined,
  inspectName: undefined,
  cooperateWithName: undefined,
  id: undefined
})
const changeUserRef = ref()

// 变更人员
const changeUserFun = () => {
  changeUserRef.value.open({ id: detailData.value.id, deptId: detailData.value.deptId })
}

const getDetail = async () => {
  detailData.value = await EnterpriseInspectionsApi.getEnterpriseInspections(
    queryParams.inspectionsId
  )
}

const viewDetail = async (row) => {
  unref(detailRef).open(row)
}

const getList = async () => {
  loading.value = true
  try {
    const data = await EnterpriseInspectionsApi.inspectionsLogList(queryParams)
    list.value = data
    total.value = data.total
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getDetail(route.query.id)
  getList(route.query.id)
})
</script>

<style scoped lang="scss">
.item {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #303133;
  font-size: 16px;
  .label {
    color: #606266;
  }
  .el-button {
    font-size: 16px;
    line-height: normal;
  }
}
</style>