'设备页面开发'

@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
 
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-VITE_PROXY = [["/api","http://192.168.10.129:8082/api"],["/upload","http://192.168.10.122:3300/upload"]]
+VITE_PROXY = [["/api","http://192.168.10.120:8082/api"],["/upload","http://192.168.10.120:3300/upload"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 
 # Delete console

+export function useChildrenIdsRemoveParentId(str, arr) {
+  const index = arr.indexOf(str);
+  arr.splice(index, 1);
+  return arr;
+}

@@ -3,11 +3,11 @@
     <OrganizationIdTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
     <BasicTable @register="registerTable" :searchInfo="searchInfo" class="w-3/4 xl:w-4/5">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreateOrEdit"> 新增联系人 </a-button>
+        <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增联系人 </a-button>
         <a-button
           type="primary"
           color="error"
-          @click="handleDeleteOrBatchDelete"
+          @click="handleDeleteOrBatchDelete(null)"
           :disabled="hasBatchDelete"
         >
           批量删除
@@ -46,7 +46,6 @@
   import { useDrawer } from '/@/components/Drawer';
   import ContactDrawer from './ContactDrawer.vue';
   import OrganizationIdTree from '../../common/OrganizationIdTree.vue';
-  import { Modal } from 'ant-design-vue';
   import { getAlarmContact, deleteAlarmContact } from '/@/api/alarm/contact/alarmContact';
   import { searchFormSchema, columns } from './config.data';
   export default defineComponent({
@@ -121,15 +120,11 @@
           }
         } else {
           try {
-            await Modal.confirm({
-              title: '警告',
-              content: '是否删除勾选的信息?',
-            });
             await deleteAlarmContact(selectedRowIds.value);
             createMessage.success('批量删除联系人成功');
             handleSuccess();
           } catch (e) {
-            createMessage.info('取消删除');
+            createMessage.info('删除失败');
           }
         }
       };

-<template>
-  <BasicDrawer
-    v-bind="$attrs"
-    @register="registerDrawer"
-    showFooter
-    :title="getTitle"
-    width="500px"
-    @ok="handleSubmit"
-  >
-    <BasicForm @register="registerForm">
-      <template #iconSelect>
-        <Upload
-          name="avatar"
-          list-type="picture-card"
-          class="avatar-uploader"
-          :show-upload-list="false"
-          :customRequest="customUpload"
-          :before-upload="beforeUpload"
-        >
-          <img v-if="devicePic" :src="devicePic" alt="avatar" />
-          <div v-else>
-            <loading-outlined v-if="loading" />
-            <plus-outlined v-else />
-            <div class="ant-upload-text">图片上传</div>
-          </div>
-        </Upload>
-      </template>
-    </BasicForm>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './device.data';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-
-  import { saveOrEditMessageConfig } from '/@/api/message/config';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { upload } from '/@/api/oss/ossFileUploader';
-  import { message, Upload } from 'ant-design-vue';
-  import { FileItem } from '/@/components/Upload/src/typing';
-  import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
-
-  export default defineComponent({
-    name: 'DeviceDrawer',
-    components: { BasicDrawer, BasicForm, Upload, PlusOutlined, LoadingOutlined },
-    emits: ['success', 'register'],
-    setup(_, { emit }) {
-      const isUpdate = ref(true);
-
-      const devicePic = ref('');
-      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
-        labelWidth: 80,
-        schemas: formSchema,
-        showActionButtonGroup: false,
-      });
-
-      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-        await resetFields();
-        setDrawerProps({ confirmLoading: false });
-        isUpdate.value = !!data?.isUpdate;
-        if (unref(isUpdate)) {
-          const config = data.record.config;
-          for (const key in config) {
-            Reflect.set(data.record, key + '', config[key]);
-          }
-          await setFieldsValue({
-            ...data.record,
-          });
-        }
-      });
-
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
-
-      async function handleSubmit() {
-        try {
-          const values = await validate();
-          const { createMessage } = useMessage();
-          setDrawerProps({ confirmLoading: true });
-          let config = {};
-          if (values.messageType === 'PHONE_MESSAGE') {
-            config = {
-              accessKeyId: values.accessKeyId,
-              accessKeySecret: values.accessKeySecret,
-            };
-          } else if (values.messageType === 'EMAIL_MESSAGE') {
-            config = {
-              host: values.host,
-              port: values.port,
-              username: values.username,
-              password: values.password,
-            };
-          }
-          Reflect.set(values, 'config', config);
-          let saveMessage = '添加成功';
-          let updateMessage = '修改成功';
-          await saveOrEditMessageConfig(values, unref(isUpdate));
-          closeDrawer();
-          emit('success');
-          createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
-        } finally {
-          setDrawerProps({ confirmLoading: false });
-        }
-      }
-      async function customUpload({ file }) {
-        if (beforeUpload(file)) {
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await upload(formData);
-          if (response.fileStaticUri) {
-            devicePic.value = response.fileStaticUri;
-          }
-        }
-      }
-
-      const beforeUpload = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          message.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 2;
-        if (!isLt2M) {
-          message.error('图片大小不能超过2MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
-      return {
-        registerDrawer,
-        registerForm,
-        getTitle,
-        handleSubmit,
-        beforeUpload,
-        customUpload,
-        devicePic,
-      };
-    },
-  });
-</script>
-<style>
-  .ant-upload-select-picture-card i {
-    font-size: 32px;
-    color: #999;
-  }
-</style>

@@ -3,14 +3,14 @@
     v-bind="$attrs"
     width="55rem"
     @register="register"
-    :title=getTitle
+    :title="getTitle"
     @visible-change="handleVisibleChange"
+    @cancel="handleCancel"
   >
     <div class="step-form-form">
       <a-steps :current="current">
         <a-step title="填写设备信息" />
-        <a-step title="确认转账信息" />
-        <a-step title="完成" />
+        <a-step title="添加设备凭证" />
       </a-steps>
     </div>
     <div class="mt-5">
@@ -21,68 +21,35 @@
         v-show="current === 1"
         v-if="initStep2"
       />
-      <DeviceStep3 v-show="current === 2" @redo="handleRedo" v-if="initStep3" />
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-import {defineComponent, ref, nextTick, computed, unref, reactive, toRefs} from 'vue';
+  import { defineComponent, ref, nextTick, computed, unref, reactive, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
-  import DeviceStep1 from "/@/views/device/step/DeviceStep1.vue";
-  import DeviceStep2 from "/@/views/device/step/DeviceStep2.vue";
-  import DeviceStep3 from "/@/views/device/step/DeviceStep3.vue";
-  import { Steps } from "ant-design-vue";
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Input',
-      label: '字段1',
-      colProps: {
-        span: 24,
-      },
-      defaultValue: '111',
-    },
-    {
-      field: 'field2',
-      component: 'Input',
-      label: '字段2',
-      colProps: {
-        span: 24,
-      },
-    },
-  ];
+  import DeviceStep1 from '/@/views/device/step/DeviceStep1.vue';
+  import DeviceStep2 from '/@/views/device/step/DeviceStep2.vue';
+  import { Steps } from 'ant-design-vue';
   export default defineComponent({
-    name:'DeviceModal',
-    components: { BasicModal, BasicForm, DeviceStep1, DeviceStep2, DeviceStep3,
+    name: 'DeviceModal',
+    components: {
+      BasicModal,
+      DeviceStep1,
+      DeviceStep2,
       [Steps.name]: Steps,
-      [Steps.Step.name]: Steps.Step, },
+      [Steps.Step.name]: Steps.Step,
+    },
     props: {
       userData: { type: Object },
     },
     setup(props) {
       const state = reactive({
         initStep2: false,
-        initStep3: false,
       });
       const current = ref(0);
       const isUpdate = ref(true);
       const modelRef = ref({});
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
-      const [
-        registerForm,
-        {
-          // setFieldsValue,
-          // setProps
-        },
-      ] = useForm({
-        labelWidth: 120,
-        schemas,
-        showActionButtonGroup: false,
-        actionColOptions: {
-          span: 24,
-        },
-      });
 
       const [register] = useModalInner((data) => {
         isUpdate.value = !!data?.isUpdate;
@@ -99,15 +66,15 @@ import {defineComponent, ref, nextTick, computed, unref, reactive, toRefs} from
       }
       function handleStep2Next(step2Values: any) {
         current.value++;
-        state.initStep3 = true;
         console.log(step2Values);
       }
       function handleRedo() {
         current.value = 0;
-        state.initSetp2 = false;
-        state.initSetp3 = false;
+        state.initStep2 = false;
+      }
+      function handleCancel() {
+        console.log('关闭了弹框');
       }
-
 
       function onDataReceive(data) {
         console.log('Data Received', data);
@@ -129,8 +96,19 @@ import {defineComponent, ref, nextTick, computed, unref, reactive, toRefs} from
         v && props.userData && nextTick(() => onDataReceive(props.userData));
       }
 
-      return { register, schemas, registerForm, model: modelRef, getTitle,handleVisibleChange,
-        current, ...toRefs(state), handleStepPrev, handleStep1Next, handleStep2Next, handleRedo};
+      return {
+        register,
+        model: modelRef,
+        getTitle,
+        handleVisibleChange,
+        current,
+        ...toRefs(state),
+        handleStepPrev,
+        handleStep1Next,
+        handleStep2Next,
+        handleCancel,
+        handleRedo,
+      };
     },
   });
 </script>

 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import {findDictItemByCode} from "/@/api/system/dict";
-import {DeviceTypeEnum,DeviceState} from "/@/api/device/model/deviceModel";
+import { findDictItemByCode } from '/@/api/system/dict';
+import { DeviceTypeEnum, DeviceState } from '/@/api/device/model/deviceModel';
 export const columns: BasicColumn[] = [
   {
     title: '设备名称',
@@ -12,7 +12,7 @@ export const columns: BasicColumn[] = [
     title: '设备类型',
     dataIndex: 'deviceType',
     width: 100,
-    slots:{customRender:'deviceType'},
+    slots: { customRender: 'deviceType' },
   },
   {
     title: '设备配置',
@@ -29,7 +29,7 @@ export const columns: BasicColumn[] = [
   {
     title: '标签',
     dataIndex: 'label',
-    width: 180
+    width: 180,
   },
   {
     title: '状态',
@@ -80,7 +80,6 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
-
 export const formSchema: FormSchema[] = [
   {
     field: 'icon',
@@ -92,10 +91,10 @@ export const formSchema: FormSchema[] = [
     field: 'name',
     label: '设备名称',
     required: true,
-    component:'Input',
-    componentProps:{
-      maxLength:30
-    }
+    component: 'Input',
+    componentProps: {
+      maxLength: 30,
+    },
   },
   {
     field: 'deviceType',
@@ -103,25 +102,25 @@ export const formSchema: FormSchema[] = [
     required: true,
     component: 'ApiSelect',
     componentProps: {
-      api:findDictItemByCode,
-      params:{
-        dictCode:"device_type"
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'device_type',
       },
-      labelField:'itemText',
-      valueField:'itemValue',
+      labelField: 'itemText',
+      valueField: 'itemValue',
     },
   },
   {
     field: 'label',
     label: '设备标签',
-    component:'Input',
-    componentProps:{
-      maxLength:255
-    }
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+    },
   },
   {
     label: '备注',
     field: 'remark',
     component: 'InputTextArea',
-  }
+  },
 ];

@@ -16,9 +16,9 @@
       <template #deviceType="{ record }">
         <Tag color="success" class="ml-2">
           {{
-            record.deviceType == DeviceTypeEnum.GATEWAY
+            record.deviceType === DeviceTypeEnum.GATEWAY
               ? '网关设备'
-              : record.deviceType == DeviceTypeEnum.DIRECT_CONNECTION
+              : record.deviceType === DeviceTypeEnum.DIRECT_CONNECTION
               ? '直连设备'
               : '网关子设备'
           }}
@@ -65,7 +65,7 @@
         />
       </template>
     </BasicTable>
-    <ConfigDrawer @register="registerDrawer" @success="handleSuccess" />
+    <!-- <ConfigDrawer @register="registerDrawer" @success="handleSuccess" /> -->
     <DeviceModal @register="registerModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
@@ -73,11 +73,10 @@
   import { defineComponent, reactive } from 'vue';
   import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useDrawer } from '/@/components/Drawer';
-  import ConfigDrawer from './DeviceDrawer.vue';
+  // import { useDrawer } from '/@/components/Drawer';
+  // import ConfigDrawer from './DeviceDrawer.vue';
   import { columns, searchFormSchema } from './device.data';
   import { Tag } from 'ant-design-vue';
-  import { CodeEditor } from '/@/components/CodeEditor';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { deleteDevice, devicePage } from '/@/api/device/deviceManager';
   import { PageEnum } from '/@/enums/pageEnum';
@@ -91,16 +90,15 @@
     name: 'DeviceManagement',
     components: {
       BasicTable,
-      ConfigDrawer,
+      // ConfigDrawer,
       PageWrapper,
       TableAction,
       OrganizationIdTree,
-      CodeEditor,
       Tag,
       DeviceModal,
     },
     setup() {
-      const [registerDrawer, { openDrawer }] = useDrawer();
+      // const [registerDrawer, { openDrawer }] = useDrawer();
       const { createMessage } = useMessage();
       const go = useGo();
       const searchInfo = reactive<Recordable>({});
@@ -128,18 +126,15 @@
       });
 
       function handleCreate() {
-        // openDrawer(true, {
-        //   isUpdate: false,
-        // });
         openModal(true, {
           isUpdate: false,
         });
       }
 
       function handleEdit(record: Recordable) {
-        openDrawer(true, {
-          record,
+        openModal(true, {
           isUpdate: true,
+          record,
         });
       }
 
@@ -163,7 +158,7 @@
       }
       return {
         registerTable,
-        registerDrawer,
+        // registerDrawer,
         handleCreate,
         handleEdit,
         handleDelete,

@@ -20,7 +20,7 @@
           </Upload>
         </template>
         <template #devicePosition>
-          <Input>
+          <Input disabled v-model:value="positionState.address">
             <template #addonAfter>
               <EnvironmentTwoTone @click="selectPosition" />
             </template>
@@ -28,27 +28,34 @@
         </template>
       </BasicForm>
     </div>
-    <modal v-model:visible="visible" title="设备位置" @ok="handleOk">
+    <Modal v-model:visible="visible" title="设备位置" @ok="handleOk" width="800px">
       <div>
-        <a-input-group>
-          <a-row :gutter="8" class="flex">
-            <a-col :span="6" class="flex"> 经度<a-input /> </a-col>
-            <a-col :span="6" class="flex"> 纬度<a-input /> </a-col>
+        <a-form :label-col="labelCol">
+          <a-row :gutter="20">
+            <a-col :span="8">
+              <a-form-item label="经度">
+                <Input type="input" v-model:value="positionState.lng" disabled />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="纬度">
+                <Input type="input" v-model:value="positionState.lat" disabled />
+              </a-form-item>
+            </a-col>
           </a-row>
-        </a-input-group>
-        <div ref="wrapRef" style="height: 300px; width: 90%" class=""> </div>
+        </a-form>
+        <div ref="wrapRef" style="height: 300px; width: 90%" class="ml-6"></div>
       </div>
-    </modal>
-    >
+    </Modal>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, onMounted, nextTick, unref, getCurrentInstance } from 'vue';
+  import { defineComponent, ref, nextTick, unref, reactive } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from './data';
   import { useScript } from '/@/hooks/web/useScript';
   import { ScrollActionType } from '/@/components/Container/index';
-  import { Input, Divider, Upload, message, Modal, Col, Row } from 'ant-design-vue';
+  import { Input, Divider, Upload, message, Modal, Form, Row, Col } from 'ant-design-vue';
   import { EnvironmentTwoTone, LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
   import { upload } from '/@/api/oss/ossFileUploader';
   import { FileItem } from '/@/components/Upload/src/typing';
@@ -64,24 +71,19 @@
       // LoadingOutlined,
       PlusOutlined,
       Modal,
-      [Col.name]: Col,
+      [Form.name]: Form,
+      [Form.Item.name]: Form.Item,
       [Row.name]: Row,
-    },
-    props: {
-      width: {
-        type: String,
-        default: '300px',
-      },
-      height: {
-        type: String,
-        default: '300px',
-      },
+      [Col.name]: Col,
     },
     emits: ['next'],
     setup(_, { emit }) {
-      const { proxy } = getCurrentInstance();
-      console.log(proxy);
       const devicePic = ref('');
+      const positionState = reactive({
+        lng: '',
+        lat: '',
+        address: '',
+      });
       const [register, { validate }] = useForm({
         labelWidth: 100,
         schemas: step1Schemas,
@@ -97,10 +99,15 @@
 
       async function customSubmitFunc() {
         try {
-          const values = await validate();
+          let values = await validate();
+          values = { devicePic: devicePic.value, ...positionState, ...values };
+          delete values.icon;
+          delete values.devicePosition;
           emit('next', values);
+          // 获取输入的数据
         } catch (error) {}
       }
+      // 图片上传
       async function customUpload({ file }) {
         if (beforeUpload(file)) {
           const formData = new FormData();
@@ -111,7 +118,6 @@
           }
         }
       }
-
       const beforeUpload = (file: FileItem) => {
         const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
         if (!isJpgOrPng) {
@@ -123,12 +129,15 @@
         }
         return isJpgOrPng && isLt2M;
       };
+
+      // 地图的弹框
       const visible = ref(false);
       const selectPosition = () => {
         visible.value = true;
         initMap();
       };
 
+      // 地图
       const BAI_DU_MAP_URL =
         'https://api.map.baidu.com/getscript?v=3.0&ak=7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa';
       const wrapRef = ref<HTMLDivElement | null>(null);
@@ -139,16 +148,31 @@
         await nextTick();
         const wrapEl = unref(wrapRef);
         const BMap = (window as any).BMap;
-        console.log(wrapRef, '----------------------------');
         if (!wrapEl) return;
         const map = new BMap.Map(wrapEl);
-        const point = new BMap.Point(116.14282, 35.19515);
+        map.addEventListener('click', () => {
+          const { lat, lng } = map.he;
+          positionState.lat = lat + '';
+          positionState.lng = lng + '';
+          let gc = new BMap.Geocoder();
+          let newPoint = new BMap.Point(lng, lat);
+          gc.getLocation(newPoint, (rs) => {
+            let addComp = rs.addressComponents;
+            //获取详细的地址，精确到街道的名称
+            let addrname = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
+            positionState.address = addrname;
+          });
+        });
+        const point = new BMap.Point(104.04813399999999, 30.54348986021446);
         map.centerAndZoom(point, 15);
         map.enableScrollWheelZoom(true);
       }
-      const handleOk = () => {};
-
+      // 确定选择的位置
+      const handleOk = () => {
+        visible.value = false;
+      };
       return {
+        positionState,
         register,
         beforeUpload,
         customUpload,
@@ -158,6 +182,7 @@
         scrollRef,
         handleOk,
         wrapRef,
+        labelCol: { style: { width: '40px' } },
       };
     },
   });

 <template>
   <div class="step2">
-    <a-alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
-    <a-descriptions :column="1" class="mt-5">
-      <a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
-      <a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
-      <a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
-      <a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
-    </a-descriptions>
-    <a-divider />
-    <BasicForm @register="register" />
+    <div><input type="checkbox" v-model="isCreaentials" @click="checked" /> 添加凭证 </div>
+
+    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-if="isCreaentials">
+      <a-form-item label="凭据类型">
+        <a-select
+          v-model:value="creaentialsType"
+          style="width: 200px"
+          @change="handleChange"
+          placeholder="请选择凭据类型"
+          :options="options"
+        />
+      </a-form-item>
+      <div v-if="creaentialsType === 'Access token'">
+        <a-form-item label="访问令牌">
+          <a-input type="input" style="width: 200px" v-model:value="token" />
+        </a-form-item>
+      </div>
+      <div v-else-if="creaentialsType === 'X.509'">
+        <a-form-item label="RSA公钥">
+          <a-input type="input" style="width: 200px" v-model:value="publicKey" />
+        </a-form-item>
+      </div>
+      <div v-else>
+        <a-form-item label="客户端ID">
+          <a-input type="input" style="width: 200px" v-model:value="clientId" />
+        </a-form-item>
+        <a-form-item label="用户名">
+          <a-input type="input" style="width: 200px" v-model:value="username" />
+        </a-form-item>
+        <a-form-item label="密码">
+          <a-input type="password" style="width: 200px" v-model:value="password" />
+        </a-form-item>
+      </div>
+    </a-form>
+
+    <div class="flex justify-start">
+      <a-button class="mr-5" @click="prevStep">上一步</a-button>
+    </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { step2Schemas } from './data';
-  import { Alert, Divider, Descriptions } from 'ant-design-vue';
+  import { defineComponent, reactive, ref, toRefs } from 'vue';
 
+  import { Input, Form, Select, Button, SelectProps } from 'ant-design-vue';
   export default defineComponent({
     components: {
-      BasicForm,
-      [Alert.name]: Alert,
-      [Divider.name]: Divider,
-      [Descriptions.name]: Descriptions,
-      [Descriptions.Item.name]: Descriptions.Item,
+      [Form.name]: Form,
+      [Form.Item.name]: Form.Item,
+      [Input.name]: Input,
+      [Select.name]: Select,
+      [Button.name]: Button,
     },
-    emits: ['next', 'prev'],
+    emits: ['prev'],
     setup(_, { emit }) {
-      const [register, { validate, setProps }] = useForm({
-        labelWidth: 80,
-        schemas: step2Schemas,
-        actionColOptions: {
-          span: 14,
+      const isCreaentials = ref(false);
+      const creaentialsType = ref('Access token');
+      const creaentialsPassword = reactive({
+        token: '',
+        publicKey: '',
+        clientId: '',
+        username: '',
+        password: '',
+      });
+      const options = ref<SelectProps['options']>([
+        {
+          value: 'Access token',
+          label: 'Access token',
         },
-        resetButtonOptions: {
-          text: '上一步',
+
+        {
+          value: 'X.509',
+          label: 'X.509',
         },
-        submitButtonOptions: {
-          text: '提交',
+        {
+          value: 'MQTT Basic',
+          label: 'MQTT Basic',
         },
-        resetFunc: customResetFunc,
-        submitFunc: customSubmitFunc,
-      });
-
-      async function customResetFunc() {
+      ]);
+      const checked = () => {
+        isCreaentials.value = !isCreaentials.value;
+      };
+      const prevStep = () => {
         emit('prev');
-      }
-
-      async function customSubmitFunc() {
-        try {
-          const values = await validate();
-          setProps({
-            submitButtonOptions: {
-              loading: true,
-            },
-          });
-          setTimeout(() => {
-            setProps({
-              submitButtonOptions: {
-                loading: false,
-              },
-            });
-            emit('next', values);
-          }, 1500);
-        } catch (error) {}
-      }
-
-      return { register };
+      };
+      // 切换凭证类型时，重置字段
+      const handleChange = (value) => {
+        if (value === 'Access token') {
+          creaentialsPassword.token = '';
+        } else if (value === 'X.509') {
+          creaentialsPassword.publicKey = '';
+        } else {
+          creaentialsPassword.clientId = '';
+          creaentialsPassword.username = '';
+          creaentialsPassword.password = '';
+        }
+      };
+      return {
+        ...toRefs(creaentialsPassword),
+        creaentialsType,
+        isCreaentials,
+        options,
+        handleChange,
+        prevStep,
+        checked,
+        labelCol: { style: { width: '150px' } },
+        wrapperCol: { span: 18 },
+      };
     },
   });
 </script>
 <style lang="less" scoped>
   .step2 {
-    width: 450px;
+    width: 500px;
     margin: 0 auto;
   }
 </style>

-<template>
-  <div class="step3">
-    <a-result status="success" title="操作成功" sub-title="预计两小时内到账">
-      <template #extra>
-        <a-button type="primary" @click="redo"> 再转一笔 </a-button>
-        <a-button> 查看账单 </a-button>
-      </template>
-    </a-result>
-    <div class="desc-wrap">
-      <a-descriptions :column="1" class="mt-5">
-        <a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
-        <a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
-        <a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
-        <a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
-      </a-descriptions>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Result, Descriptions } from 'ant-design-vue';
-  export default defineComponent({
-    components: {
-      [Result.name]: Result,
-      [Descriptions.name]: Descriptions,
-      [Descriptions.Item.name]: Descriptions.Item,
-    },
-    emits: ['redo'],
-    setup(_, { emit }) {
-      return {
-        redo: () => {
-          emit('redo');
-        },
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .step3 {
-    width: 600px;
-    margin: 0 auto;
-  }
-
-  .desc-wrap {
-    padding: 24px 40px;
-    margin-top: 24px;
-    background-color: @background-color-light;
-  }
-</style>

@@ -20,7 +20,6 @@
         v-show="current === 1"
         v-if="initSetp2"
       />
-      <Step3 v-show="current === 2" @redo="handleRedo" v-if="initSetp3" />
     </div>
   </PageWrapper>
 </template>
@@ -28,7 +27,6 @@
   import { defineComponent, ref, reactive, toRefs } from 'vue';
   import Step1 from './DeviceStep1.vue';
   import Step2 from './DeviceStep2.vue';
-  import Step3 from './DeviceStep3.vue';
   import { PageWrapper } from '/@/components/Page';
   import { Steps } from 'ant-design-vue';
 
@@ -37,17 +35,16 @@
     components: {
       Step1,
       Step2,
-      Step3,
+
       PageWrapper,
       [Steps.name]: Steps,
       [Steps.Step.name]: Steps.Step,
     },
     setup() {
-      const current = ref(0);
+      const current = ref(1);
 
       const state = reactive({
         initSetp2: false,
-        initSetp3: false,
       });
 
       function handleStep1Next(step1Values: any) {
@@ -62,14 +59,12 @@
 
       function handleStep2Next(step2Values: any) {
         current.value++;
-        state.initSetp3 = true;
         console.log(step2Values);
       }
 
       function handleRedo() {
         current.value = 0;
         state.initSetp2 = false;
-        state.initSetp3 = false;
       }
 
       return {

@@ -51,13 +51,3 @@ export const step1Schemas: FormSchema[] = [
     component: 'InputTextArea',
   },
 ];
-
-export const step2Schemas: FormSchema[] = [
-  {
-    field: 'pwd',
-    component: 'InputPassword',
-    label: '支付密码',
-    required: true,
-    defaultValue: '123456',
-  },
-];

@@ -10,10 +10,11 @@
     <BasicForm @register="registerForm">
       <template #menu="{ model, field }">
         <BasicTree
+          ref="tree"
           v-model:value="model[field]"
           :treeData="treeData"
           :replaceFields="{ title: 'menuName' }"
-          :checked-keys="roleMenus"
+          :checkedKeys="roleMenus"
           checkable
           toolbar
           title="菜单分配"
@@ -23,11 +24,16 @@
     </BasicForm>
   </BasicDrawer>
 </template>
+
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+  import { defineComponent, ref, computed, unref, getCurrentInstance } from 'vue';
+
   import { BasicForm, useForm } from '/@/components/Form/index';
+
   import { formSchema } from './role.data';
+
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
   import { BasicTree, TreeItem } from '/@/components/Tree';
 
   const { t } = useI18n(); //加载国际化
@@ -35,68 +41,129 @@
   // import { getMenuList } from '/@/api/demo/system';
 
   // 加载菜单数据
+
   import { getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
+
   import { useI18n } from '/@/hooks/web/useI18n';
+
   import { RouteItem } from '/@/api/sys/model/menuModel';
+
   import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
+  import { useChildrenIdsRemoveParentId } from '/@/hooks/web/useChildrenIdsRemoveParentId';
   export default defineComponent({
     name: 'RoleDrawer',
+
     components: { BasicDrawer, BasicForm, BasicTree },
+
     emits: ['success', 'register'],
+
     setup(_, { emit }) {
+      const { proxy } = getCurrentInstance();
+
       const isUpdate = ref<boolean>(true);
+
       const treeData = ref<TreeItem[]>([]);
+
       const roleMenus = ref<string[]>([]);
+
       const allCheckedKeys = ref<string[]>();
+
       const roleHalfCheckedKeys = ref<string[]>([]);
+
       const roleId = ref<string>('');
+
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 90,
+
         schemas: formSchema,
+
         showActionButtonGroup: false,
       });
 
       function processChildren(items: RouteItem[]) {
         items.map((item) => {
           item.menuName = t(item.meta.title);
+
           item.icon = item.meta.icon;
+
           item.key = item.id;
+
           if (item.children) {
             processChildren(item.children);
           }
         });
       }
 
+      /**
+
+       * 根据角色id获取所有的菜单ids----里面包含父级id---会造成回显数据时
+
+       * 存在父级id则默认勾选所有子级id
+
+       */
+
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         resetFields();
+
         roleId.value = '';
+
         setDrawerProps({ confirmLoading: false });
+
         // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+
         if (unref(treeData).length === 0) {
           // 获取全部的菜单
+
           const menuListModel = await getMenuList();
+
           processChildren(menuListModel);
+
           let treeValues: TreeItem[] = [];
+
           menuListModel.map((item) => {
             const data = {
               menuName: t(item.meta.title),
+
               icon: item.meta.icon,
+
               key: item.id,
+
               children: item.children as any as TreeItem[],
             };
+
             treeValues.push(data);
           });
+
           treeData.value = treeValues;
         }
-        if (data.record) {
-          // 通过角色id去获取角色对应的菜单的ids
-          roleMenus.value = await getMenusIdsByRoleId(data.record.id);
-          console.log(roleMenus.value, 'roleMenus.value');
-          // TODO: 角色回显问题：待解决
-          roleId.value = data.record.id;
-        }
-        isUpdate.value = !!data?.isUpdate;
+
         if (unref(isUpdate)) {
+          if (data.record) {
+            // // 通过角色id去获取角色对应的菜单的ids
+
+            roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+
+            console.log(roleMenus.value);
+
+            console.log(treeData.value);
+
+            treeData.value.map((m) => {
+              roleMenus.value.map((m1) => {
+                if (m.key === m1) {
+                  useChildrenIdsRemoveParentId(m1, roleMenus.value);
+                }
+              });
+            });
+
+            console.log(roleMenus.value);
+
+            proxy.$refs.tree.setCheckedKeys(roleMenus.value);
+
+            // console.log(roleMenus.value, 'roleMenus.value');
+
+            roleId.value = data.record.id;
+          }
+
           setFieldsValue({
             ...data.record,
           });
@@ -108,38 +175,59 @@
       async function handleSubmit() {
         try {
           const values = await validate();
+
           setDrawerProps({ confirmLoading: true });
+
           const req = {
             id: roleId.value,
+
             name: values.name,
+
             remark: values.remark,
+
             status: values.status,
+
             menu: allCheckedKeys.value as string[],
           };
+
           saveOrUpdateRoleInfoWithMenu(req).then(() => {
             closeDrawer();
+
             emit('success');
           });
         } finally {
           setDrawerProps({ confirmLoading: false });
         }
       }
+
       // Tree check事件
+
       const handleCheckClick = (checkedKeys: string[], { halfCheckedKeys }) => {
         allCheckedKeys.value = [...checkedKeys, ...halfCheckedKeys];
+
         // 父节点
+
         roleHalfCheckedKeys.value = halfCheckedKeys;
       };
 
       return {
         allCheckedKeys,
+
         registerDrawer,
+
         registerForm,
+
         getTitle,
+
         handleSubmit,
+
         treeData,
+
         roleMenus,
+
         handleCheckClick,
+
+        useChildrenIdsRemoveParentId,
       };
     },
   });