xiaodou-ai-admin/src/pages/Iot/model/models.vue

<template>
<a-card>
  <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 @click="openModal(record)" >加入</a>
            <a >详情</a>
            <a >删除</a>
          </a-space>
        </template>
      </template>
  </a-table>
</a-card>

<modal-pro
  label="选择产品"
  :visible="state.visible"
  @cancel="state.visible = false"
  @ok="ok"
>
  <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">

    <a-form-item label="模型名称" v-bind="validateInfos.templateLabel">
      <a-input v-model:value="modelRef.templateLabel"  />
    </a-form-item>

    <a-form-item label="产品" v-bind="validateInfos.templateLabel">
      <a-select v-model:value="modelRef.modelId" >
        <a-select-option
          v-for="item in modelState.dataSource"
          :key="item.id"
          :value="item.id"
        >
          {{item.modelLabel}}
        </a-select-option>
      </a-select>
    </a-form-item>

  </a-form>

</modal-pro>
</template>
<script lang='ts' setup >
import { ModelController } from '@/controller'
import { LeftSquareOutlined } from '@ant-design/icons-vue'
import { onMounted, reactive } from 'vue'
import { Form } from 'ant-design-vue'

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '模型名称',
    dataIndex: 'templateLabel',
    key: 'templateLabel'
  },
  {
    title: '创建时间',
    dataIndex: 'createAt',
    key: 'createAt'
  },
  {
    title: '修改时间',
    dataIndex: 'updateAt',
    key: 'updateAt'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

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

const modelState = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  dataSource: [],
  loading: false
})

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

const modelRef = reactive({
  templateLabel: '',
  modelId: ''
})

const useForm = Form.useForm

const { resetFields, validate, validateInfos } = useForm(modelRef, reactive({
  templateLabel: [{ required: true, message: '请填写模型名称' }],
  modelId: [{ required: true, message: '请选择模型' }]
}))

const openModal = (record) => {
  state.visible = true
  getModel()
}

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

const ok = () => {
  validate().then(async () => {

  })
}

const getModel = async () => {
  modelState.loading = true
  const { data, sum } = await ModelController.list()
  modelState.loading = false
  modelState.dataSource = data
}

const getModelsPage = async () => {
  state.loading = true
  const { data, sum } = await ModelController.modelTemplate(queryParamsState)
  state.loading = false
  state.dataSource = data
  queryParamsState.total = sum
}

onMounted(() => {
  getModelsPage()
})
</script>
<style lang='less' scoped >
</style>