feat: ota page add permission control

@@ -81,7 +81,13 @@
 </script>
 
 <template>
-  <BasicModal title="包管理" destroy-on-close @register="registerModal" @ok="handleSubmit">
+  <BasicModal
+    title="包管理"
+    destroy-on-close
+    :ok-button-props="{ loading }"
+    @register="registerModal"
+    @ok="handleSubmit"
+  >
     <BasicForm @register="registerForm" class="package-manage-form" />
   </BasicModal>
 </template>

@@ -15,6 +15,8 @@
   } from '/@/api/ota';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useDownload } from '../hook/useDownload';
+  import { Authority } from '/@/components/Authority';
+  import { OtaPermissionKey } from '../config/config';
   // import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';
 
   const emit = defineEmits(['register', 'update:list']);
@@ -143,7 +145,9 @@
         class="absolute right-0 bottom-0 w-full border-t bg-light-50 border-t-gray-100 py-2 px-4 text-right"
       >
         <Button class="mr-2" @click="closeDrawer">取消</Button>
-        <Button type="primary" :loading="loading" @click="handleSubmit">保存</Button>
+        <Authority :value="OtaPermissionKey.UPDATE">
+          <Button type="primary" :loading="loading" @click="handleSubmit">保存</Button>
+        </Authority>
       </div>
     </template>
     <!-- <DeviceDetailDrawer @register="registerTBDrawer" /> -->

@@ -8,6 +8,13 @@ export interface ModalPassRecord {
   record?: Recordable;
 }
 
+export enum OtaPermissionKey {
+  CREATE = 'api:operation:ota:post',
+  UPDATE = 'api:operation:ota:update',
+  DELETE = 'api:operation:ota:delete',
+  DOWNLOAD = 'api:operation:ota:download',
+}
+
 export const columns: BasicColumn[] = [
   {
     title: '创建时间',

@@ -45,14 +45,29 @@ export enum ALG {
   MURMUR3_128 = 'MURMUR3128',
 }
 
+const getVersionTag = (title: string, version: string) => {
+  return `${title ?? ''} ${version ?? ''}`;
+};
+
 export const formSchema: FormSchema[] = [
   {
     field: PackageField.TITLE,
     label: '标题',
     component: 'Input',
     rules: [{ required: true, message: '标题为必填项' }],
-    componentProps: {
-      placeholder: '请输入标题',
+    componentProps: ({ formActionType, formModel }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        placeholder: '请输入标题',
+        onChange: (value: Event) => {
+          setFieldsValue({
+            [PackageField.VERSION_TAG]: getVersionTag(
+              (value.target as HTMLInputElement).value,
+              formModel[PackageField.VERSION]
+            ),
+          });
+        },
+      };
     },
   },
   {
@@ -60,8 +75,19 @@ export const formSchema: FormSchema[] = [
     label: '版本',
     component: 'Input',
     rules: [{ required: true, message: '版本为必填项' }],
-    componentProps: {
-      placeholder: '请输入版本',
+    componentProps: ({ formActionType, formModel }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        placeholder: '请输入版本',
+        onChange: (value: Event) => {
+          setFieldsValue({
+            [PackageField.VERSION_TAG]: getVersionTag(
+              formModel[PackageField.TITLE],
+              (value.target as HTMLInputElement).value
+            ),
+          });
+        },
+      };
     },
   },
   {

 <script lang="ts" setup>
   import { Button } from 'ant-design-vue';
-  import { columns, ModalPassRecord, searchFormSchema } from './config/config';
+  import { columns, ModalPassRecord, OtaPermissionKey, searchFormSchema } from './config/config';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import PackageDetailModal from './components/PackageDetailModal.vue';
@@ -13,6 +13,7 @@
   import { useDownload } from './hook/useDownload';
   import { computed } from 'vue';
   import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
+  import { Authority } from '/@/components/Authority';
 
   const [register, { reload, getSelectRowKeys, getRowSelection, setSelectedRowKeys }] = useTable({
     columns,
@@ -102,10 +103,14 @@
   <PageWrapper dense contentFullHeight contentClass="flex flex-col">
     <BasicTable @register="register" @row-click="handleOpenDetailDrawer" class="ota-list">
       <template #toolbar>
-        <Button @click="handleCreatePackage" type="primary">新增包</Button>
-        <Button @click="handleBatchDelete" :disabled="canDelete" type="primary" danger>
-          批量删除
-        </Button>
+        <Authority :value="OtaPermissionKey.CREATE">
+          <Button @click="handleCreatePackage" type="primary">新增包</Button>
+        </Authority>
+        <Authority :value="OtaPermissionKey.DELETE">
+          <Button @click="handleBatchDelete" :disabled="canDelete" type="primary" danger>
+            批量删除
+          </Button>
+        </Authority>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -114,12 +119,14 @@
             {
               label: '下载',
               icon: 'ant-design:download-outlined',
+              auth: OtaPermissionKey.DOWNLOAD,
               onClick: downloadFile.bind(null, record),
             },
             {
               label: '删除',
               icon: 'ant-design:delete-outlined',
               color: 'error',
+              auth: OtaPermissionKey.DELETE,
               popConfirm: {
                 title: '是否确认删除',
                 confirm: deletePackage.bind(null, record),

@@ -17,7 +17,7 @@
     :row-props="{
       gutter: 10,
     }"
-    layout="inline"
+    layout="horizontal"
     :label-col="{ span: 0 }"
   />
 </template>

@@ -39,7 +39,7 @@
       :row-props="{
         gutter: 10,
       }"
-      layout="inline"
+      layout="horizontal"
       :label-col="{ span: 0 }"
     />
   </div>

+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicForm, FormActionType } from '/@/components/Form';
+  import { mapFormSchema } from '../../config/basicConfiguration';
+
+  const formEl = ref<Nullable<FormActionType>>();
+
+  const setFormEl = (el: any) => {
+    formEl.value = el;
+  };
+
+  const getFieldsValue = () => {
+    return unref(formEl)!.getFieldsValue();
+  };
+
+  const validate = async () => {
+    await unref(formEl)!.validate();
+  };
+
+  const setFieldsValue = async (record: Recordable) => {
+    await unref(formEl)!.setFieldsValue(record);
+  };
+
+  const clearValidate = async (name?: string | string[]) => {
+    await unref(formEl)!.clearValidate(name);
+  };
+  defineExpose({
+    formActionType: { getFieldsValue, validate, setFieldsValue, clearValidate },
+  });
+</script>
+
+<template>
+  <div class="w-full flex-1">
+    <BasicForm
+      :ref="(el) => setFormEl(el)"
+      :schemas="mapFormSchema"
+      class="w-full flex-1 data-source-form"
+      :show-action-button-group="false"
+      :row-props="{
+        gutter: 10,
+      }"
+      layout="horizontal"
+      :label-col="{ span: 0 }"
+    />
+  </div>
+</template>

@@ -2,10 +2,12 @@ import { Component } from 'vue';
 import { FrontComponent } from '../../../const/const';
 import BasicDataSourceForm from './BasicDataSourceForm.vue';
 import ControlDataSourceForm from './ControlDataSourceForm.vue';
+import MapDataSourceForm from './MapDataSourceForm.vue';
 
 const dataSourceComponentMap = new Map<FrontComponent, Component>();
 
 dataSourceComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, ControlDataSourceForm);
+dataSourceComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK, MapDataSourceForm);
 
 export const getDataSourceComponent = (frontId: FrontComponent) => {
   if (dataSourceComponentMap.has(frontId)) return dataSourceComponentMap.get(frontId)!;

@@ -25,6 +25,8 @@ export enum DataSourceField {
   ATTRIBUTE_RENAME = 'attributeRename',
   DEVICE_NAME = 'deviceName',
   DEVICE_RENAME = 'deviceRename',
+  LONGITUDE_ATTRIBUTE = 'longitudeAttribute',
+  LATITUDE_ATTRIBUTE = 'latitudeAttribute',
 }
 
 export const basicSchema: FormSchema[] = [
@@ -238,3 +240,214 @@ export const controlFormSchema: FormSchema[] = [
     },
   },
 ];
+
+export const mapFormSchema: FormSchema[] = [
+  {
+    field: DataSourceField.IS_GATEWAY_DEVICE,
+    component: 'Switch',
+    label: '是否是网关设备',
+    show: false,
+  },
+  {
+    field: DataSourceField.DEVICE_NAME,
+    component: 'Input',
+    label: '设备名',
+    show: false,
+  },
+  {
+    field: DataSourceField.ORIGINATION_ID,
+    component: 'ApiTreeSelect',
+    label: '组织',
+    colProps: { span: 8 },
+    rules: [{ required: true, message: '组织为必填项' }],
+    componentProps({ formActionType }) {
+      const { setFieldsValue } = formActionType;
+      return {
+        placeholder: '请选择组织',
+        api: async () => {
+          const data = await getOrganizationList();
+          copyTransFun(data as any as any[]);
+          return data;
+        },
+        onChange() {
+          setFieldsValue({
+            [DataSourceField.DEVICE_ID]: null,
+            [DataSourceField.LATITUDE_ATTRIBUTE]: null,
+            [DataSourceField.LONGITUDE_ATTRIBUTE]: null,
+            [DataSourceField.SLAVE_DEVICE_ID]: null,
+            [DataSourceField.IS_GATEWAY_DEVICE]: false,
+          });
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: DataSourceField.DEVICE_ID,
+    component: 'ApiSelect',
+    label: '设备',
+    colProps: { span: 8 },
+    rules: [{ required: true, message: '设备名称为必填项' }],
+    componentProps({ formModel, formActionType }) {
+      const { setFieldsValue } = formActionType;
+      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+      return {
+        api: async () => {
+          if (organizationId) {
+            try {
+              const data = await getAllDeviceByOrg(organizationId);
+              if (data)
+                return data.map((item) => ({
+                  label: item.name,
+                  value: item.id,
+                  deviceType: item.deviceType,
+                }));
+            } catch (error) {}
+          }
+          return [];
+        },
+        onChange(_value, record: Record<'value' | 'label' | 'deviceType', string>) {
+          setFieldsValue({
+            [DataSourceField.LONGITUDE_ATTRIBUTE]: null,
+            [DataSourceField.LATITUDE_ATTRIBUTE]: null,
+            [DataSourceField.IS_GATEWAY_DEVICE]: record?.deviceType === 'GATEWAY',
+            [DataSourceField.SLAVE_DEVICE_ID]: null,
+            [DataSourceField.DEVICE_NAME]: record?.label,
+          });
+        },
+        placeholder: '请选择设备',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: DataSourceField.SLAVE_DEVICE_ID,
+    label: '网关子设备',
+    component: 'ApiSelect',
+    colProps: { span: 8 },
+    rules: [{ required: true, message: '网关子设备为必填项' }],
+    ifShow({ model }) {
+      return model[DataSourceField.IS_GATEWAY_DEVICE];
+    },
+    dynamicRules({ model }) {
+      return [{ required: model[DataSourceField.IS_GATEWAY_DEVICE], message: '请选择网关子设备' }];
+    },
+    componentProps({ formModel, formActionType }) {
+      const { setFieldsValue } = formActionType;
+      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+      const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
+      const deviceId = formModel[DataSourceField.DEVICE_ID];
+      return {
+        api: async () => {
+          if (organizationId && isGatewayDevice) {
+            try {
+              const data = await getGatewaySlaveDevice({ organizationId, masterId: deviceId });
+              if (data)
+                return data.map((item) => ({
+                  label: item.name,
+                  value: item.id,
+                  deviceType: item.deviceType,
+                }));
+            } catch (error) {}
+          }
+          return [];
+        },
+        onChange(_value, record: Record<'value' | 'label' | 'deviceType', string>) {
+          setFieldsValue({
+            [DataSourceField.LATITUDE_ATTRIBUTE]: null,
+            [DataSourceField.LONGITUDE_ATTRIBUTE]: null,
+            [DataSourceField.DEVICE_NAME]: record?.label,
+          });
+        },
+        placeholder: '请选择网关子设备',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: DataSourceField.LONGITUDE_ATTRIBUTE,
+    component: 'ApiSelect',
+    label: '经度属性',
+    colProps: { span: 8 },
+    rules: [{ required: true, message: '属性为必填项' }],
+    componentProps({ formModel, formActionType }) {
+      const { updateSchema, setFieldsValue } = formActionType;
+      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+      const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
+      const deviceId = formModel[DataSourceField.DEVICE_ID];
+      const slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
+
+      let attrs: Record<'label' | 'value', string>[] = [];
+      return {
+        api: async () => {
+          if (organizationId && deviceId) {
+            try {
+              if (isGatewayDevice && slaveDeviceId) {
+                return (attrs = await getDeviceAttribute(slaveDeviceId));
+              }
+              if (!isGatewayDevice) {
+                return (attrs = await getDeviceAttribute(deviceId));
+              }
+            } catch (error) {}
+          }
+          return [];
+        },
+        placeholder: '请选择经度属性',
+        getPopupContainer: () => document.body,
+        onChange: (value: string) => {
+          if (!value) return;
+          setFieldsValue({ [DataSourceField.LATITUDE_ATTRIBUTE]: null });
+          updateSchema({
+            field: DataSourceField.LATITUDE_ATTRIBUTE,
+            componentProps: {
+              options: attrs.filter((item) => item.value !== value),
+            },
+          });
+        },
+      };
+    },
+  },
+  {
+    field: DataSourceField.LATITUDE_ATTRIBUTE,
+    component: 'ApiSelect',
+    label: '纬度属性',
+    colProps: { span: 8 },
+    rules: [{ required: true, message: '属性为必填项' }],
+    componentProps({ formModel, formActionType }) {
+      const { updateSchema, setFieldsValue } = formActionType;
+      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+      const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
+      const deviceId = formModel[DataSourceField.DEVICE_ID];
+      const slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
+      let attrs: Record<'label' | 'value', string>[] = [];
+
+      return {
+        api: async () => {
+          if (organizationId && deviceId) {
+            try {
+              if (isGatewayDevice && slaveDeviceId) {
+                return (attrs = await getDeviceAttribute(slaveDeviceId));
+              }
+              if (!isGatewayDevice) {
+                return (attrs = await getDeviceAttribute(deviceId));
+              }
+            } catch (error) {}
+          }
+          return [];
+        },
+        onChange: (value: string) => {
+          if (!value) return;
+          setFieldsValue({ [DataSourceField.LONGITUDE_ATTRIBUTE]: null });
+          updateSchema({
+            field: DataSourceField.LATITUDE_ATTRIBUTE,
+            componentProps: {
+              options: attrs.filter((item) => item.value !== value),
+            },
+          });
+        },
+        placeholder: '请输入纬度属性',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+];