xiaodou-ai-admin/src/pages/Iot/task/manage.vue

<template>
<a-card>
  <a-row justify="space-between" >
    <a-col span="12" >
      <a-form layout="inline" >
          <a-form-item label="任务名称" >
            <a-input v-model:value="queryParamsState.taskLabel" placeholder="请输入任务名称"/>
          </a-form-item>
          <a-form-item  label='任务状态' >
            <a-select
              style="width: 170px"
              v-model:value="queryParamsState.status"
              @change="changeStatus"
            >
              <a-select-option
                v-for="item in statusList"
                :key="item.key"
                :value="item.key"
              >
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-item >
          <a-form-item>
            <a-button type="primary" @click="getTaskPage">搜索</a-button>
          </a-form-item>
      </a-form>
    </a-col>
    <a-col span="12" >
      <a-space>
        <a-button type="primary" >新增任务</a-button>
      </a-space>
    </a-col>
  </a-row>

  <a-table
    style="margin-top: 20px;"
    :columns="columns"
    :data-source="state.dataSource"
    :loading="state.loading"
    :pagination="queryParamsState"
    @change="changePage"
  >
  <template #bodyCell="{column, record}">
        <template v-if="column.key === 'action'" >
          <a-space>
            <a >编辑</a>
            <a >删除</a>
          </a-space>
        </template>
      </template>
  </a-table>

  <modal-pro
    :label="modalTitle"
    :visible="state.visible"
    @cancel="state.visible = false"
    @ok="ok"
  >

  </modal-pro>
</a-card>
</template>
<script lang='ts' setup >
import { TaskController } from '@/controller/iot/task'
import { computed, onMounted, reactive } from 'vue'
import { Form } from 'ant-design-vue'

const columns = [
  {
    title: '任务名称',
    dataIndex: 'taskLabel',
    key: 'taskLabel'
  },
  {
    title: '任务配置',
    dataIndex: 'taskConfig',
    key: 'taskConfig'
  },
  {
    title: '任务状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '任务描述',
    dataIndex: 'taskDescription',
    key: 'taskDescription'
  },
  {
    title: 'corn',
    dataIndex: 'cornDescr',
    key: 'cornDescr'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const useForm = Form.useForm

const statusList = [
  { key: true, label: '开启' },
  { key: false, label: '关闭' },
  { key: true, label: '' }
]

const queryParamsState = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  taskLabel: '',
  status: ''
})

const modalTitle = computed(() => state.opraState === 'add' ? '新增标题' : '编辑标题')

const state = reactive({
  dataSource: [],
  loading: false,
  opraState: 'add',
  visible: false
})

const modalRef = reactive({

})

const { resetFields, validate, validateInfos } = useForm(modalRef, reactive({

}))

const ok = () => {

}

const changeStatus = (value) => {
  queryParamsState.status = value
}

const getTaskPage = async () => {
  state.loading = true
  const { data, sum } = await TaskController.page(queryParamsState)
  state.loading = false
  state.dataSource = data
  queryParamsState.total = sum
}

const changePage = ({ current }) => {
  queryParamsState.page = current
  getTaskPage()
}

onMounted(() => {
  getTaskPage()
})

</script>
<style lang='less' scoped >
</style>