taais-web/src/views/taais/homePage/index.vue

<template>
  <div class="home-container">
    <dv-border-box1 ref="borderRef" style="width: 100%; height: 100%; margin: 0 auto">
      <div class="table-box">
        <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listTaskApi" :tool-button="false">
          <template #tableHeader="">
            <el-button type="primary" v-auth="['system:user:add']" :icon="CirclePlus" @click="createTask()"> 创建任务 </el-button>
          </template>
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link icon="View" v-auth="['task:task:query']" @click="viewDetails(scope.row)"> 查看详情 </el-button>
            <el-button type="primary" link :icon="View" @click="openDialog(3, '任务查看', scope.row)">查看</el-button>
          </template>
        </ProTable>
        <!-- <ProTable
          ref="proTable"
          row-key="id"
          :columns="columns"
          :request-api="listTaskApi"
          :request-auto="false"
          :tool-button="false"
        >
          <template #tableHeader="">
            <el-button type="primary" v-auth="['system:user:add']" :icon="CirclePlus" @click="createTask()"> 创建任务 </el-button>
          </template>
          <template #operation="scope">
            <el-button type="primary" link :icon="View" @click="openDialog(3, '任务查看', scope.row)">查看</el-button>
          </template>
        </ProTable> -->
      </div>
    </dv-border-box1>
  </div>
</template>

<script setup lang="tsx" name="homePage">
import { onMounted, reactive, ref } from 'vue'
import { User } from '@/api/interface'
import ProTable from '@/components/ProTable/index.vue'
import FormDialog from '@/components/DialogOld/form.vue'
import { CirclePlus, View } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { addUserApi, updateUserApi, deptTreeSelectApi } from '@/api/modules/system/user'
// import { getTaskApi } from '@/api/modules/taais/task'
import { listTaskApi, getTaskApi } from '@/api/modules/task/task'
import { getDictsApi } from '@/api/modules/system/dictData'
// import taskDataList from '@/assets/mock/taskData.json'
// import { getDictsApi } from '@/api/modules/system/dictData'
onMounted(() => {
  getTreeFilter()
})

// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ deptId: '' })

// 获取 treeFilter 数据
// 当 proTable 的 requestAuto 属性为 false，不会自动请求表格数据，等待 treeFilter 数据回来之后，更改 initParam.departmentId 的值，才会触发请求 proTable 数据
const treeFilterData = ref<any>([])
const getTreeFilter = async () => {
  const { data } = await deptTreeSelectApi()
  treeFilterData.value = data
  initParam.deptId = treeFilterData.value[0].id
}
// 查看详情
const viewDetails = row => {
  router.push({ path: `/task/subtask/`, query: { id: row.id } })
}
// 批量添加用户
const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
// 打开弹框的功能
const openDialog = async (type: number, title: string, row?: any) => {
  let res = getTaskApi(row?.taskId || null)
  // 表单项配置
  const fieldList: Form.FieldItem[] = [
    {
      label: '任务名称',
      placeholder: '请输入任务名称',
      span: 12,
      field: 'taskName',
      rules: [{ required: true, message: '任务名称不能为空' }]
    }
  ]
  const params = {
    title,
    width: 680,
    isEdit: type !== 3,
    fieldList: fieldList,
    model: res,
    api: type == 1 ? addUserApi : updateUserApi,
    getTableList: proTable.value?.getTableList
  }

  formDialogRef.value?.openDialog(params)
}
const router = useRouter()
// 增加任务
const createTask = () => {
  router.push(`/createTask`)
}
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
  // { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'name', label: '任务名称' },
  {
    prop: 'status',
    label: '任务状态',
    tag: true,
    enum: () => getDictsApi('biz_task_status'),
    fieldNames: { label: 'dictLabel', value: 'dictValue' }
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
</script>
<style scoped lang="scss">
@import './index.scss';
</style>