feat: less配置（bug未解决）

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
     'no-return-assign': 'off',
     'func-call-spacing': 'off',
     '@typescript-eslint/ban-types': 'off',
-    'vue/on-parsing-error': 'off'
+    'vue/on-parsing-error': 'off',
+    'vue/no-unused-vars': 'off'
   }
 }

src/api/iot/model.ts

@@ -1,12 +1,29 @@
 import request from '@/service/request'
 
 /**
- * model api
+ * 此函数根据给定的查询参数检索模型列表。
+ * @param params - “params”参数是一个“IOT.API.QueryPamars”类型的对象，其中包含查询参数，这些参数将与 GET
+ * 请求一起发送到“/model/page”端点。这些查询参数可用于过滤、排序和分页 API 返回的结果。
+ * @returns `getModel` 函数返回一个解析为 `IOT.API.Model` 对象数组的 Promise。 Promise
+ * 由“request”函数返回，该函数使用提供的“params”作为查询参数向“/model/page”端点发出 GET 请求。
  */
-export const opraModel = <T>(params: T) => {
-  return request<IOT.API.Model[]>({
+export const getModel = (params: IOT.API.MODEL.QueryPamars) => {
+  return request<IOT.API.MODEL.Model[]>({
     url: '/model/page',
     method: 'GET',
     params
   })
 }
+
+/**
+ * 函数 delModel 向带有指定 id 参数的 model 端点发送删除请求。
+ * @param {string} id - `id` 参数是一个字符串，表示需要删除的模型的唯一标识符。此函数可能是 API 客户端的一部分，它向 URL 路径中具有指定“id”的服务器端点发送
+ * DELETE 请求以删除相应的模型资源。
+ * @returns `delModel` 函数返回一个解析为布尔值 `true` 的 Promise。
+ */
+export const delModel = (id: string) => {
+  return request<true>({
+    url: `/model/${id}`,
+    method: 'DELETE'
+  })
+}

src/components/TablePro/index.vue

@@ -1,31 +1,88 @@
 <template>
-    <a-table
-      style="width: 100%;"
-      v-bind="{...props}"
-      :data-source="state.data"
-      :loading="state.loading"
-      :pagination="state.pagination.total <= 10 ? false : state.pagination"
-      @change="handleTableChange"
-    >
-    <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'action'">
-        <a-space>
-          <a-row>
-            <a-col v-for="item in column.list" :key="item.name" >
-              <a @click="handleAction(item, record)" >{{item.name}}</a>
+    <a-row>
+      <a-col span="24" >
+        <a-row justify="end">
+            <a-col>
+              <a-space>
+                <a-button type="primary" >
+                  新增
+                  <template #icon>
+                    <plus-outlined />
+                  </template>
+                </a-button>
+                <a-button type="primary" >
+                  导出
+                  <template #icon>
+                    <download-outlined />
+                  </template>
+                </a-button>
+                <!-- 小组件 -->
+
+                <a-tooltip>
+                  <template #title>刷新</template>
+                  <reload-outlined />
+                </a-tooltip>
+                <!--  -->
+              </a-space>
             </a-col>
-          </a-row>
-        </a-space>
-      </template>
-    </template>
-    </a-table>
+        </a-row>
+      </a-col>
+      <a-col span="24">
+        <a-table
+          style="width: 100%;margin-top: 10px;"
+          v-bind="{...props}"
+          :data-source="state.data"
+          :loading="state.loading"
+          :pagination="state.pagination.total <= 10 ? false : state.pagination"
+          @change="handleTableChange"
+        >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <span  v-for="item in column.list" :key="item.name" >
+                <a-popconfirm
+                  title="确实要删除吗？"
+                  ok-text="确定"
+                  cancel-text="取消"
+                  @confirm="confirmDel(item, record)"
+                  v-if="item.use == 'del'"
+                >
+                  <a href="#">删除</a>
+                </a-popconfirm>
+                <a v-else @click="handleAction(item, record)" >{{item.name}}</a>
+              </span>
+            </a-space>
+          </template>
+        </template>
+        </a-table>
+      </a-col>
+    </a-row>
+
+    <!-- 弹窗 -->
+    <model-pro
+      :visible="state.modelVisible"
+    >
+
+    </model-pro>
 </template>
 
 <script lang="ts" setup >
 import { useCopy } from '@/hooks/dom'
 import { ColumnsType } from 'ant-design-vue/lib/vc-table/interface'
 import { TableProps } from 'ant-design-vue/lib/vc-table/Table'
-import { onMounted, reactive, watch } from 'vue'
+import { reactive, watch } from 'vue'
+import { PlusOutlined, DownloadOutlined, ReloadOutlined } from '@ant-design/icons-vue'
+/**
+ * formItemProps
+ * rules 校验
+ * request 需要请求的表单项 分别创建id key value name
+ * type: input select radio check datepick
+ */
+
+/**
+  * pro-able
+  * 'export' | 'add' | search
+*/
 
 export interface ColumnsChildren {
   name: '',
@@ -36,14 +93,13 @@ export interface ColumnsChildren {
 
 export interface TablePropPorps extends TableProps {
   request: (params: any) => any
+  del: (id: string) => void
   params: any,
   columns: ColumnsType & {children: ColumnsChildren}
 }
 
 const props = defineProps<TablePropPorps>()
 
-console.log('table pro props:', props.columns[2])
-
 const state = reactive({
   loading: false,
   data: [],
@@ -52,7 +108,7 @@ const state = reactive({
     total: 0,
     pageSize: 10
   },
-  actionColumn: []
+  modelVisible: false
 })
 
 const handleTableChange = (pag: { pageSize: number; current: number }) => {
@@ -62,7 +118,7 @@ const handleTableChange = (pag: { pageSize: number; current: number }) => {
     current: pag.current
   }
 }
-
+// 请求table 的data
 const request = async () => {
   state.loading = true
   const data = await props.request(props.params)
@@ -70,6 +126,20 @@ const request = async () => {
   console.log('table pro data:', data)
   state.data = data
 }
+
+// 删除对应的table选项
+const confirmDel = async (item: ColumnsChildren, record: any) => {
+  await props.del(record[item.bindKey])
+  request()
+}
+
+const handleAction = (column: ColumnsChildren, record: any) => {
+  switch (column.use) {
+    case 'copy':
+      useCopy(record[column.bindKey])
+  }
+}
+
 watch(
   () => props.request,
   () => request(),
@@ -79,13 +149,6 @@ watch(
   }
 )
 
-const handleAction = (column: ColumnsChildren, record: any) => {
-  switch (column.use) {
-    case 'copy':
-      useCopy(record[column.bindKey])
-  }
-}
-
 </script>
 
 <style>

src/controller/index.ts

@@ -1 +1,2 @@
 export { CommonController } from './common/common'
+export { ModelController } from './iot/model'

src/controller/iot/model.ts

@@ -1,11 +1,12 @@
-import { opraModel } from '@/api/iot/model'
-class ModelController {
+import { delModel, getModel } from '@/api/iot/model'
+import { message } from 'ant-design-vue'
+export class ModelController {
   static list () {
 
   }
 
-  static async page () {
-    const { data } = await opraModel({ page: 1, modelLabel: 1, pageSize: 10 })
+  static async page (params: IOT.API.MODEL.QueryPamars) {
+    const { data } = await getModel(params)
     return data
   }
 
@@ -17,9 +18,10 @@ class ModelController {
 
   }
 
-  static del () {
-
+  static async del (id: string) {
+    const { data } = await delModel(id)
+    if (data) {
+      message.success('删除成功')
+    }
   }
 }
-
-export default ModelController

src/main.ts

@@ -4,7 +4,8 @@ import router from './router'
 import '@/router/before'
 import { createPinia } from 'pinia'
 import antd from 'ant-design-vue'
-import 'ant-design-vue/dist/antd.css'
+// import '~ant-design-vue/dist/antd.less'
+import '@/styles/index.less'
 import UsePro from './utils/UsePro'
 import { assets } from '@/utils/static'
 

src/pages/Iot/dashboard/deviceAccess/index.vue

@@ -41,16 +41,11 @@
 </template>
 
 <script setup lang="ts" >
-import ModelController from '@/controller/iot/model'
 import { CommonController } from '@/controller/index'
 import { useStaticImg } from '@/utils/static'
 
 const staticImg = useStaticImg()
 
-ModelController.page().then(r => {
-  console.log(r)
-})
-
 const columns = [
   {
     title: '接入协议(端口号)',

src/pages/Iot/model/index.vue

@@ -0,0 +1,78 @@
+<template>
+
+  <a-card>
+    <table-pro
+      :request="ModelController.page"
+      :del="ModelController.del"
+      :params="{
+        page: 1,
+        pageSize: 10,
+        modelLabel: 1
+      }"
+      :columns="columns"
+      :pro-able="['add']"
+    />
+  </a-card>
+</template>
+
+<script lang="ts" setup >
+import { CommonController, ModelController } from '@/controller/index'
+
+const columns = [
+  {
+    title: '模型名称',
+    dataIndex: 'modelLabel',
+    key: 'modelLabel',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '此项为必填项'
+        }
+      ],
+      request: async () => {
+        return await CommonController.getTransport()
+      },
+      type: ''
+    }
+  },
+  {
+    title: '传输协议',
+    dataIndex: 'address',
+    key: 'address'
+  },
+  {
+    title: '数据格式',
+    dataIndex: 'payloadType',
+    key: 'payloadType'
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    key: 'deviceType'
+  },
+  {
+    title: '模型描述',
+    dataIndex: 'modelDescription',
+    key: 'modelDescription'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    list: [
+      {
+        name: '复制',
+        use: 'copy',
+        bindKey: 'address'
+      },
+      {
+        name: '删除',
+        use: 'del',
+        bindKey: 'id'
+      }
+    ]
+  }
+]
+</script>
+
+<style></style>

src/router/index.ts

@@ -12,6 +12,11 @@ const routes: Array<ROUTER.RoutesProps> = [
         path: '/dashboard',
         name: '首页',
         component: () => import('@/pages/iot/dashboard/deviceAccess/index.vue')
+      },
+      {
+        path: '/product',
+        name: '产品',
+        component: () => import('@/pages/iot/model/index.vue')
       }
       // {
       //   path: '/deviceAccess',

src/service/request.ts

@@ -1,5 +1,5 @@
 import { message } from 'ant-design-vue'
-import axios, { AxiosInstance } from 'axios'
+import axios, { AxiosInstance, AxiosResponse } from 'axios'
 
 const instance = axios.create({
   baseURL: '/api',
@@ -11,14 +11,14 @@ const instance = axios.create({
  * @param {any} error - `error` 参数是 `any` 类型，这意味着它可以是任何数据类型。它用作 `catchErr` 函数的输入参数。
  * @returns `catchErr` 函数返回一个被拒绝的 Promise，并传递了 `error` 参数作为拒绝的原因。
  */
-const catchErr = (error: any) => {
-  if (error.code === 500) {
-    message.error(error.msg)
-  } else if (error.code === 400) {
+const catchErr = (response: AxiosResponse) => {
+  console.log('发生了错误:', response)
+  const { data } = response
+  if (data.code === 500) {
+    message.error(data.msg)
+  } else if (data.code === 400) {
     message.error('参数出现错误')
   }
-
-  return Promise.reject(error)
 }
 
 instance.interceptors.request.use(config => {
@@ -28,8 +28,9 @@ instance.interceptors.request.use(config => {
 })
 
 instance.interceptors.response.use(function (response) {
+  catchErr(response)
   return response.data
-}, error => catchErr(error))
+}, error => Promise.reject(error))
 
 export default function request <T> (config: any) {
   return instance.request<AxiosInstance, SERVICE.Response<T>>(config)

src/styles/index.less

@@ -0,0 +1,3 @@
+@import '~ant-design-vue/dist/antd.less';
+
+@import '~@/styles/theme.less';

src/styles/theme.less

@@ -0,0 +1,5 @@
+
+
+
+@primary-color: red;
+@border-radius-base: 10px;

src/type/iot.d.ts

@@ -5,23 +5,24 @@ declare namespace IOT {
   // MQTT
   namespace API {
 
-    type QueryPamars = {
-      modelLabel?: string // 模型名称
-      transportType: TransportEnum
-    } & COMMON.QueryParams
+    namespace MODEL {
+      type QueryPamars = {
+        modelLabel?: string // 模型名称
+        transportType: TransportEnum
+      } & Partial<COMMON.QueryParams>
 
-    interface Model {
-      id: string,
-      createAt: string,
-      updateAt: string,
-      deleted: boolean,
-      modelLabel: string,
-      transportType: string,
-      payloadType: string,
-      deviceType: string,
-      modelDescription: string,
-      tenantId: string
+      interface Model {
+        id: string,
+        createAt: string,
+        updateAt: string,
+        deleted: boolean,
+        modelLabel: string,
+        transportType: string,
+        payloadType: string,
+        deviceType: string,
+        modelDescription: string,
+        tenantId: string
+      }
     }
   }
-
 }

vue.config.js

@@ -8,7 +8,35 @@ const proxy = require('./config/proxy.ts')
 console.log(proxy.dev)
 module.exports = defineConfig({
   transpileDependencies: true,
+  css: {
+    loaderOptions: {
+      less: {
+        javascriptEnabled: true
+      }
+    }
+  },
   devServer: {
     proxy: proxy.dev
   }
+  // pluginOptions: {
+  //   module: {
+  //     rules: [
+  //       {
+  //         test: /\.less$/i,
+  //         use: [
+  //           'style-loader',
+  //           'css-loader',
+  //           {
+  //             loader: 'less-loader',
+  //             options: {
+  //               javascriptEnabled: true
+  //             }
+  //           }
+  //         ]
+  //       }
+  //     ]
+  //   }
+
+  // }
+
 })