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

<template>
  <StatisticsTemplate
    title="产品统计"
    :list="state.modelCount"
  />
  <a-card style="margin-top: 20px;" >
    <a-row justify="space-between" >
      <a-col>
        <a-input-search
          v-model:value="state.queryParams.modelLabel"
          placeholder="请输入产品模型名称"
          enter-button
          @search="getModel"
        />
      </a-col>
      <a-col>
        <a-space>
          <a-button type="primary" @click="openModel('add')" >
            新增
            <template #icon>
              <plus-outlined />
            </template>
          </a-button>
        </a-space>
      </a-col>
    </a-row>

    <a-table
      style="margin-top: 10px;"
      :columns="columns"
      :dataSource="state.dataSource"
      :pagination="state.queryParams"
      :loading="state.loading"
      @change="change"
    >
    <template #name="{ text }">
      <a @click="goDetailPage(text)" >{{ text }}</a>
    </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'id'" >
          <a  @click="goDetailPage(record.id)">{{record.id}}</a>
        </template>
        <template v-if="column.key === 'transportType'" >
          <a-tag  >{{record.transportType}}</a-tag>
        </template>
        <template v-if="column.key === 'payloadType'" >
          <a-tag  color="blue">{{record.payloadType}}</a-tag>
        </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="goDetailPage(record.id)" >查看</a>
                <a-popconfirm
                  title="确实要删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="confirmDel(record.id)"
                >
                  <a href="#">删除</a>
                </a-popconfirm>
            </a-space>
          </template>
        </template>
    </a-table>
  </a-card>

  <a-modal
    :title="modalTitle"
    :visible="state.visible"
    ok-text="确定"
    cancel-text="取消"
    @cancel="closeModel"
    @ok="ok"
  >
   <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
    <a-form-item label="任务名称" v-bind="validateInfos.modelLabel">
      <a-input v-model:value="modelRef.modelLabel"  />
    </a-form-item>
    <a-form-item label="协议类型" v-bind="validateInfos.transportType">
      <a-select v-model:value="modelRef.transportType" >
        <a-select-option :value="item.port" v-for="item in state.transport" :key="item.port" >{{item.port}}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="数据格式" v-bind="validateInfos.payloadType">
      <a-select v-model:value="modelRef.payloadType" >
        <a-select-option :value="item" v-for="item in state.payloadType" :key="item" >{{item}}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="设备类型" >
      <a-input v-model:value="modelRef.deviceType"  />
    </a-form-item>
    <a-form-item label="厂商描述">
      <a-textarea  v-model:value="modelRef.modelDescription" />
    </a-form-item>
   </a-form>
  </a-modal>
</template>

<script lang="ts" setup >
import { CommonController, ModelController } from '@/controller/index'
import { onMounted, reactive } from 'vue'
import { computed } from '@vue/reactivity'
import { Form } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import StatisticsTemplate from '@/components/StatisticsTemplate/index.vue'

const columns = [
  {
    title: '产品模型名称',
    dataIndex: 'modelLabel',
    key: 'modelLabel'
  },
  {
    title: '产品模型id',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '传输协议',
    dataIndex: 'transportType',
    key: 'transportType'
  },
  {
    title: '数据格式',
    dataIndex: 'payloadType',
    key: 'payloadType'
  },
  {
    title: '设备类型',
    dataIndex: 'deviceType',
    key: 'deviceType'
  },
  {
    title: '模型描述',
    dataIndex: 'modelDescription',
    key: 'modelDescription'
  },
  {
    title: '操作',
    key: 'action'
  }
]

const state = reactive<{
  dataSource: IOT.API.MODEL.ModelDot[],
  [key: string]: any
}>({
  loading: false,
  opraState: 'add',
  visible: false,
  dataSource: [],
  queryParams: {
    page: 1,
    pageSize: 10,
    total: 0,
    modelLabel: ''
  },
  payloadType: ['JSON', '二进制流'],
  modelCount: []
})

const modalTitle = computed(() => state.opraState === 'add' ? '新增产品模型' : '编辑产品模型')

const useForm = Form.useForm

const router = useRouter()

const modelRef = reactive({
  modelLabel: '',
  transportType: '',
  payloadType: '',
  deviceType: '',
  modelDescription: ''
})

const rulesRef = reactive({
  modelLabel: [{ required: true, message: '请填写标题' }],
  transportType: [{ required: true, message: '请选择协议' }],
  payloadType: [{ required: true, message: '请填写数据格式' }]
})

const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)

// 获取统计
const getModelCount = async () => {
  const { data } = await ModelController.count()
  state.modelCount = Object.keys(data).map(key => {
    const item = ModelController.forwardStatisticMap.get(key)
    return {
      ...item,
      value: data[key]
    }
  })
}

const change = ({ current }) => {
  state.queryParams.page = current
  getModel()
  console.log('page:', current)
}

const ok = () => {
  validate().then(async () => {
    await opraModel()
    state.visible = false
    getModel()
  })
}

const goDetailPage = (id: string) => {
  router.push({ path: '/product/detail', query: { id } })
}

const confirmDel = async (id: string) => {
  await ModelController.del(id)
  getModel()
}

const openModel = (opraState: 'add' | 'update') => {
  state.opraState = opraState
  state.visible = true
}

const opraModel = async () => {
  console.log('opraModel')

  if (state.opraState === 'add') {
    await ModelController.post(modelRef)
  }
}

const closeModel = () => {
  state.visible = false
}

const getModel = async () => {
  state.loading = true
  const { data, sum } = await ModelController.page(state.queryParams)
  state.loading = false
  state.dataSource = data
  state.queryParams.total = sum
}

onMounted(async () => {
  getModel()
  state.transport = await CommonController.getTransport()
  getModelCount()
})
</script>

<style></style>