xps-web-v5/src/views/job/job_class/index.vue

<script lang="ts" setup name="GroupCatIndex">
import { ElMessage, ElMessageBox } from 'element-plus'
import JobComponent from './components/JobClass.vue'
import { deleteJobClassById, getJobClassByList } from '@/api/system/jobClassApi'

const state = reactive({
  loading: false,
  // 表格是否自适应高度
  tableAutoHeight: false,
  // 搜索
  search: {
    keywords: '',
  },
  // 列表数据
  dataList: [],
})

const jobRef = ref()

const getData = async () => {
  state.loading = true
  const { data } = await getJobClassByList(state.search)
  state.dataList = data
  state.loading = false
}

onMounted(() => {
  getData()
})

function onJobAdd() {
  jobRef.value.showAddModel()
}

function onJobClassEdit(row: any) {
  const jobClassId = row.jobClassId
  jobRef.value.showEditModel(jobClassId)
}

function onJobClassDel(row: any) {
  const { jobClassId, jobClassTitle } = row
  ElMessageBox.confirm(`确认删除「${jobClassTitle}」吗？`, '确认信息').then(async () => {
    const { msg } = await deleteJobClassById(jobClassId)
    ElMessage.success(msg)
    await getData()
  }).catch(() => {})
}
</script>

<template>
  <div :class="{ 'absolute-container': state.tableAutoHeight }">
    <page-header title="系统作业">
      <template #content>
        <div>
          系统支持设定定时器作业
        </div>
      </template>

      <el-button-group>
        <el-button type="primary" size="large" @click="onJobAdd">
          <template #icon>
            <el-icon>
              <svg-icon name="ep:plus" />
            </el-icon>
          </template>
          新增
        </el-button>
      </el-button-group>
    </page-header>

    <page-main>
      <el-table v-loading="state.loading" class="list-table" :data="state.dataList" border stripe highlight-current-row height="100%">
        <el-table-column type="index" label="序号" width="60" header-align="center" align="center" />

        <el-table-column label="类名称" align="center">
          <template #default="scope">
            <span>{{ scope.row.jobClassTitle }}</span>
          </template>
        </el-table-column>

        <el-table-column label="JOB Class" align="center" width="300">
          <template #default="scope">
            <span>{{ scope.row.jobClass }}</span>
          </template>
        </el-table-column>

        <el-table-column label="说明" header-align="left" align="left">
          <template #default="scope">
            <span>{{ scope.row.jobClassDesc }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" plain @click="onJobClassEdit(scope.row)">
              编辑
            </el-button>
            <el-button v-if="!scope.row.isFixed" type="danger" size="small" plain @click="onJobClassDel(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </page-main>
    <JobComponent ref="jobRef" @success="getData" />
  </div>
</template>

<style lang="scss" scoped>
.absolute-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header {
    margin-bottom: 0;
  }

  .page-main {
    // 让 page-main 的高度自适应
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .search-container {
      margin-bottom: 0;
    }
  }
}
</style>