feat: 对接设备绑定，绑定数据获取的接口及逻辑，对接项目状态修改的操作等

src/api/projects/index.ts

@@ -2,8 +2,11 @@ import { get, del, post, put } from '/@/utils/request';
 
 export default {
   list: (params: object) => get('/projects/list', params),
+  getProjectResourcesByCode: (params: object) => get('/projects/getProjectResourcesByCode', params),
   detail: (code: string) => get('/projects/getByCode', { code }),
   del: (ids: number[]) => del('/projects/del', { ids }),
+  bindResources: (data: object) => post('/projects/bindResources', data),
   add: (data: object) => post('/projects/add', data),
   edit: (data: object) => put('/projects/edit', data),
+  editStatus: (data: object) => put('/projects/editStatus', data),
 }

src/hooks/useCommon.ts

@@ -44,7 +44,7 @@ export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
     tableData.value = [];
     loading.value = true;
     params.total = 0;
-    let res = await api(params).finally(() => loading.value = false)
+    const res = await api(params).finally(() => loading.value = false)
     // console.log(res)
     tableData.value = (resKey ? (res[resKey]) : (res)) || [];
     params.total = res.total;

src/views/iot/projects/detail/device.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tab-content">
-    <div class="subtitle">网关 <el-button type="primary" size="small" @click="addDevice()">添加网关</el-button></div>
+    <div class="subtitle"><span></span> <el-button type="primary" size="small" @click="addDevice()">添加网关</el-button></div>
     <el-table :data="tableData" style="width: 100%" v-loading="loading">
       <el-table-column type="index" label="序号" width="60" align="center" />
       <el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
@@ -18,26 +18,6 @@
       </el-table-column>
     </el-table>
     <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
-    <el-divider></el-divider>
-    <div class="subtitle">设备 <el-button type="primary" size="small">添加设备</el-button></div>
-    <el-table :data="tableData" style="width: 100%" v-loading="loading">
-      <el-table-column type="index" label="序号" width="60" align="center" />
-      <el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="projectName" label="大屏名称" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="remarks" label="描述" show-overflow-tooltip></el-table-column>
-      <el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
-      <el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center"></el-table-column>
-      <el-table-column label="操作" width="200" align="center">
-        <template #default="scope">
-          <!-- <el-button size="small" text type="primary" @click="preview(scope.row)">预览</el-button>
-          <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
-          <el-button size="small" text type="warning" @click="edit(scope.row)">设计大屏</el-button>
-          <el-button size="small" text type="info" v-auth="'del'" @click="onDel(scope.row)">删除</el-button> -->
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
-
     <el-dialog title="添加网关" v-model="isShowDialog" width="400">
       <el-form>
         <el-form-item label="产品">
@@ -45,54 +25,75 @@
             <el-option v-for="item in productList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item label="设备">
+        <el-form-item label="设备" style="margin-bottom: 0;">
           <el-select v-model="form.resourcesTypes" filterable placeholder="选择设备" :clearable="false" style="width: 100%">
             <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
       </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel">取 消</el-button>
+          <el-button type="primary" @click="onSubmit">确 定</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
-import api from '/@/api/device';
+import deviceApi from '/@/api/device';
+import api from '/@/api/projects';
 import { useSearch } from '/@/hooks/useCommon';
 import { useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
 const route = useRoute();
 
 const isShowDialog = ref(false)
 const productList = ref<any[]>([])
 const deviceList = ref<any[]>([])
 
+const projectsCode = route.params.id
+
 const form = reactive({
   productKey: '',
-  projectsCode: route.params.id,
+  projectsCode,
   resourcesKey: '1',
   resourcesTypes: '',
 })
 
-const { params, tableData, getList, loading } = useSearch<any[]>(api.product.getList, 'data', { pageSize: 5, status: 1 });
+const { params, tableData, getList, loading } = useSearch<any[]>(api.getProjectResourcesByCode, '', { projectsCode });
 
 getList();
 getProducts();
 
-
 function getProducts() {
-  api.product.getList({ pageSize: 500, status: 1 }).then((res: any) => {
-    productList.value = (res?.product || []).map(item => ({ label: item.name, value: item.key }))
+  deviceApi.product.getList({ pageSize: 500, status: 1 }).then((res: any) => {
+    productList.value = (res?.product || []).map((item: any) => ({ label: item.name, value: item.key }))
+  })
+}
+
+function onCancel() {
+  isShowDialog.value = false
+}
+
+function onSubmit() {
+  api.bindResources(form).then((res: any) => {
+    getList()
+    isShowDialog.value = false
+    ElMessage.success('添加成功')
   })
 }
 
-function addDevice(type: string) {
+function addDevice() {
   isShowDialog.value = true
 }
 
 function getDivices(productKey: string) {
   form.resourcesTypes = ''
-  api.device.allList({ productKey }).then((res: any) => {
-    deviceList.value = (res?.device || []).map(item => ({ label: item.name, value: item.key }))
+  deviceApi.device.allList({ productKey }).then((res: any) => {
+    deviceList.value = (res?.device || []).map((item: any) => ({ label: item.name, value: item.id }))
   })
 }
 

src/views/iot/projects/list/index.vue

@@ -54,13 +54,14 @@
         <el-table-column prop="customName" label="关键客户" min-width="100" align="center"></el-table-column>
         <el-table-column prop="repairCompany" label="维修公司" min-width="100" align="center"></el-table-column>
         <el-table-column prop="updatedAt" label="更新时间" width="165" align="center"></el-table-column>
-        <el-table-column label="操作" width="140" align="center">
-          <template #default="scope">
-            <!-- <el-button size="small" text type="info" @click="edit(scope.row)">组态设计</el-button>
-            <el-button size="small" text type="info" @click="edit(scope.row)">运行组态</el-button> -->
-            <el-button size="small" text style="margin-left: 0;" type="primary" @click="$router.push('/iotmanager/projects/list/' + scope.row.code)">详情</el-button>
-            <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
-            <el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>
+        <el-table-column label="操作" width="160" align="center" fixed="right">
+          <template #default="{ row }">
+            <!-- <el-button size="small" text type="info" @click="edit(row)">组态设计</el-button>
+            <el-button size="small" text type="info" @click="edit(row)">运行组态</el-button> -->
+            <el-button size="small" text style="margin-left: 0;" type="primary" @click="$router.push('/iotmanager/projects/list/' + row.code)">详情</el-button>
+            <el-button size="small" text type="warning" v-auth="'xxx'" @click="addOrEdit(row)">编辑</el-button>
+            <el-button size="small" text type="primary" v-auth="'xxx'" @click="editStatus(row)">{{ row.status ? '禁用' : '启用' }}</el-button>
+            <el-button size="small" text type="danger" v-auth="'xxx'" @click="del(row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -77,6 +78,7 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 import getOrigin from '/@/utils/origin'
 import EditForm from './edit-dialog.vue';
 import { ref } from 'vue';
+import { status } from 'nprogress';
 
 const editFormRef = ref();
 const ids = ref<number[]>([]);
@@ -90,9 +92,7 @@ function getTokenUrl(url: string) {
   return getOrigin(tokenUrl + url)
 }
 
-const addOrEdit = async (row?: any) => {
-  // const url = getTokenUrl('#/editor/new');
-  // window.open(url);
+const addOrEdit = (row?: any) => {
   if (row) {
     editFormRef.value.open(row);
     return;
@@ -100,6 +100,12 @@ const addOrEdit = async (row?: any) => {
     editFormRef.value.open();
   }
 };
+const editStatus = (row: any) => {
+  api.editStatus({ id: row.id, status: row.status ? 0 : 1 }).then(() => {
+    ElMessage.success('操作成功')
+    getList()
+  })
+};
 
 // 多选框选中数据
 const handleSelectionChange = (selections: any[]) => {