feat: 第三方集成新增菜单

* feat: 第三方集成新增菜单

src/api/system/menu.ts

@@ -21,5 +21,3 @@ export const saveMenuInfo_api = (data: object) => server.patch(`/menu`, data);
 export const addMenuInfo_api = (data: object) => server.post(`/menu`, data);
 // 删除菜单信息
 export const delMenuInfo_api = (id: string) => server.remove(`/menu/${id}`);
-//查询集成菜单
-export const queryApp = (data:any) => server.post('/application/_query/no-paging',data)

src/views/account/Center/components/StationMessage/index.vue

@@ -60,7 +60,6 @@ const queryTypeList = () => {
             if (!user.other.tabKey) {
                 user.other.tabKey = arr?.[0]?.provider;
             }
-
             tabs.value = arr;
         }
     });
@@ -70,6 +69,17 @@ watchEffect(() => {
     if (router.params.value?.other?.tabKey) {
         user.other.tabKey = router.params.value?.other?.tabKey
     }
+    if(router.params?.value.row){
+        if(['device-transparent-codec'].includes(router.params?.value.row.topicProvider)){
+            user.other.tabKey = 'system-business'
+        }
+        if(['system-event'].includes(router.params?.value.row.topicProvider)){
+            user.other.tabKey = 'system-monitor'
+        }
+        if(['workflow-task-cc','workflow-task-todo','workflow-task-reject', 'workflow-process-finish', 'workflow-process-repealed','workflow-task-transfer-todo'].includes(router.params?.value.row.topicProvider)){
+            user.other.tabKey =  'workflow-notification'
+        }
+    }
 });
 
 onMounted(() => {

src/views/system/Apply/componenets/ThirdMenu.vue

@@ -1,150 +1,458 @@
 <template>
   <j-modal
-      :confirmLoading="loading"
       class="edit-dialog-container"
       title="集成菜单"
       visible
-      width="600px"
+      width="800px"
       @cancel="cancel"
-      @ok="handleOk"
+      @ok="cancel"
   >
-    <p>
+  <div style="display: flex;">
-      当前集成菜单
+    <div class="menuList" >
-    </p>
+        菜单列表
+      <div class="content">
+        <PermissionButton
+          type="link"
+          :hasPermission="`${permission}:add`"
+          @click="addMenu"
+        >
+            + 新增菜单
+        </PermissionButton>
+        <div class="treeContainer">
             <j-tree 
-        v-if="menuTree.length"
+              :fieldNames="{
-        v-model:checkedKeys="menuState.checkedMenu"
+                    title:'name',
-        v-model:expandedKeys="menuState.expandedKeys"
+                    key:'id',
-        :fieldNames="{ key: 'code', title: 'name' }"
+                    children:'children'
-        :height="300"
+              }"
-        :tree-data="menuTree"
+              :treeData="treeData"
-        checkable
+          >
-    />
+              <template #title="data">
-    <j-empty
+                <div class="tree-item">
-      v-else
+                    <div class="title">
-    />
+                      <j-ellipsis>{{ data.name }}</j-ellipsis>
+                    </div>
+                    <div class="menuControls">
+                        <PermissionButton
+                            v-if="data.options?.owner"
+                            type="link"
+                            :hasPermission="`${permission}:update`"
+                            tooltip="编辑"
+                            @click="()=>editMenu(data)"
+                          >
+                          <AIcon type="EditOutlined" />
+                        </PermissionButton>
+                        <PermissionButton
+                          type="link"
+                          :hasPermission="`${permission}:add`"
+                          :tooltip="{ title: data.level >= 3 ? '仅支持3级菜单' :   '新增子菜单' }"
+                          :disabled="data.level >= 3 || data.options?.LowCode"
+                          @click="()=>addChildrenMenu(data)"
+                        >
+                        <AIcon type="PlusCircleOutlined" />
+                      </PermissionButton>
+                      <PermissionButton
+                          v-if="data.options?.owner"
+                          type="link"
+                          :hasPermission="`${permission}:delete`"
+                          tooltip="删除"
+                          :popConfirm="{
+                            title: `是否删除该菜单`,
+                            onConfirm: () => deleteMenu(data),
+                          }"
+                        >
+                        <AIcon type="DeleteOutlined" />
+                      </PermissionButton>
+                    </div>
+                </div>
+              </template>
+          </j-tree>
+        </div>
+      </div>
+    </div>
+    <div class="configuration" v-if="showControls">
+      菜单配置
+      <div class="content">
+        <div class="saveBtn">
+          <PermissionButton type="primary" :hasPermission="`${permission}:${ editType === 'add' ? 'add' : 'update'
+                }`" :loading='saveLoading' @click="saveMenu">
+                保存
+          </PermissionButton>
+        </div>
+        <j-form ref="basicFormRef" :model="formData" class="basic-form" layout="vertical">
+                <div class="row" style="display: flex">
+                    <j-form-item ref="uploadIcon" label="菜单图标" name="icon" :rules="[
+                        {
+                            required: true,
+                            message: '请上传图标',
+                            trigger: 'change',
+                        },
+                    ]" style="flex: 0 0 186px">
+                        <div class="icon-upload has-icon" v-if="formData.icon">
+                            <AIcon :type="formData.icon" style="font-size: 90px" />
+                            <span class="mark" @click="dialogVisible = true">点击修改</span>
+                        </div>
+
+                        <div v-else @click="dialogVisible = true" class="icon-upload no-icon">
+                            <span>
+                                <AIcon type="PlusOutlined" style="font-size: 30px" />
+                                <p>点击选择图标</p>
+                            </span>
+                        </div>
+                    </j-form-item>
+                        <j-row>
+                          <j-col :span="24">
+                              <j-form-item label="名称" name="name" :rules="[
+                                  {
+                                      required: true,
+                                      message: '请输入名称',
+                                      trigger: 'change',
+                                  },
+                                  {
+                                      max: 64,
+                                      message: '最多可输入64个字符',
+                                      trigger: 'change',
+                                  },
+                              ]">
+                                  <j-input v-model:value="formData.name" placeholder="请输入名称" />
+                              </j-form-item>
+                            </j-col>
+                            <j-col :span="24">
+                              <j-form-item label="编码" name="code" :rules="[
+                                  {
+                                      required: true,
+                                      message: '请输入编码',
+                                      trigger: 'change',
+                                  },
+                                  {
+                                      max: 64,
+                                      message: '最多可输入64个字符',
+                                      trigger: 'change',
+                                  },
+                                  {
+                                      validator: checkCode,
+                                      trigger: 'blur',
+                                  },
+                              ]">
+                                  <j-input v-model:value="formData.code" placeholder="请输入编码" />
+                              </j-form-item>
+                            </j-col>
+                       
+                           
+                       <!-- <j-col :span="12">
+                            <j-form-item label="排序" name="sortIndex" :rules="[
+                                {
+                                    pattern: /^[0-9]*[1-9][0-9]*$/,
+                                    message: '请输入大于0的整数',
+                                },
+                            ]">
+                                <j-input-number v-model:value="formData.sortIndex" placeholder="请输入排序"
+                                    style="width: 100%" />
+                            </j-form-item>
+                        </j-col> -->
+                      </j-row>
+                </div>
+                <j-form-item label="页面地址" name="url" :rules="[
+                                {
+                                    required: true,
+                                    message: '请输入页面地址',
+                                },
+                                { max: 128, message: '最多可输入128字符' },
+                                { pattern: /^\//, message: '请正确填写地址，以/开头' },
+                            ]">
+                                <j-input v-model:value="formData.url" placeholder="请输入页面地址" />
+                </j-form-item>
+                <!-- <j-form-item label="说明" name="describe">
+                    <j-textarea v-model:value="formData.describe" :rows="4" show-count :maxlength="200"
+                        placeholder="请输入说明" />
+                </j-form-item> -->
+            </j-form>
+      </div>
+    </div>
+  </div>
+  <ChooseIconDialog v-if="dialogVisible" v-model:visible="dialogVisible" :icon="formData.icon"
+            @confirm="(typeStr: string) => choseIcon(typeStr)" />
   </j-modal>
 </template>
 
-<script name="ThirdMenu" setup>
+<script name="ThirdMenu" setup lang="ts">
-import {getMenuTree_api, queryOwnThree} from '@/api/system/menu';
+import { getMenuTree_api , validCode_api , addMenuInfo_api ,saveMenuInfo_api , getMenuInfo_api , delMenuInfo_api} from '@/api/system/menu'
+import { USER_CENTER_MENU_CODE,messageSubscribe } from '@/utils/consts'
+import ChooseIconDialog from '../../Menu/components/ChooseIconDialog.vue'
+import { Rule } from 'ant-design-vue/lib/form';
 import { onlyMessage } from '@/utils/comm';
-import { useMenuStore } from '@/store/menu';
-import { useRequest } from '@/hook'
-import {filterTree, getCheckByTree} from "@/views/system/Apply/componenets/util";
-import {
-  saveOwnerMenu_api,
-  updateApp_api,
-} from '@/api/system/apply';
-
 const props = defineProps({
-  mode: {
-    type: String,
-    default: 'add'
-  },
   data: {
     type: Object,
     default: () => ({})
   }
 })
-
+const emit = defineEmits(['cancel'])
-const menuStory = useMenuStore();
+const permission = 'system/Menu';
-const loading = ref(false)
+const basicFormRef = ref()
-const emit = defineEmits(['ok', 'cancel']);
+const treeData = ref([])
-const menuState = reactive({
+const formData = ref<any>({
-  checkedMenu: [],
+  icon:'',
-  expandedKeys: [],
+  name:'',
-  menuTree: ''
+  code:'',
+  url:'',
+  sortIndex:0
 })
-
+const sourceCode = ref()
-const menuTree = computed(() => {
+const dialogVisible = ref(false)
-  try {
+const uploadIcon = ref()
-    return JSON.parse(menuState.menuTree || '[]')
+const showControls = ref(false)
-  } catch (e) {
+const editType = ref()
-    return []
+const saveLoading = ref(false)
-  }
+const rootMenuTotal = ref<Number>(0)
-})
+const queryParams = {
-
+  sorts: [{ name: 'sortIndex', order: 'asc' }],
-useRequest(queryOwnThree,
+  paging: false,
-    {
-      defaultParams: { terms: [{ column: 'owner', termType: 'isnull', value: 0 }]},
-      onSuccess(res) {
-        menuState.menuTree = JSON.stringify(res.result)
-        return res
-      }
-    }
-)
-
-const { run } = useRequest(getMenuTree_api, {
-  immediate: false,
-  onSuccess(res) {
-    menuState.checkedMenu = getCheckByTree(res.result)
-    return res
-  }
-}) // 获取应用绑定的菜单
-
-const cancel = () => {
-  if (props.mode === 'add') {
-    menuStory.jumpPage('system/Apply/Save', {}, { id: props.data?.id })
-  }
-  emit('cancel')
-}
-
-const handleOk = async () => {
-  if (!menuState.checkedMenu.length) {
-    onlyMessage('请勾选配置菜单', 'warning')
-    return
-  }
-  const id = props.data.id
-  const cloneData = JSON.parse(menuState.menuTree)
-  const filterData = filterTree(cloneData, menuState.checkedMenu)
-
-  loading.value = true
-
-  try {
-    const resp = await saveOwnerMenu_api('iot', id, filterData)
-    await updateApp_api(id, {
-      ...props.data,
-      integrationModes: props.data?.integrationModes?.map((item) => item?.value || item),
-      page: {
-        ...props.data?.page,
-        configuration: {
-          checkedSystem: props.data?.page?.configuration?.checkedSystem
-        }
-      }
-    })
-
-    if (resp.success) {
-      // 保存集成菜单
-      onlyMessage('操作成功');
-      emit('ok')
-    }
-    loading.value = false
-  } catch (e) {
-    console.log(e)
-    loading.value = false
-  }
-}
-
-const getBindMenuData = () => {
-  const id = props.data.id
-
-  run({
   terms: [
                 {
-        column: 'appId',
+                    terms: [
-        value: id,
+                        {
+                            column: 'owner',
+                            termType: 'eq',
+                            value: 'iot',
+                        },
+                        {
+                            column: 'owner',
+                            termType: 'isnull',
+                            value: '1',
+                            type: 'or',
                         },
                     ],
+                },
+                {
+                terms:[
+                    {
+                        terms:[
+                            {
+                                value:"%show\":true%",
+                                termType:"like",
+                                column:"options",
+                                type:'and'
+                            },
+                            {
+                            value:"%owner\"%",
+                            termType:"nlike",
+                            column:"options",
+                            type:"and"
+                            }
+                        ]
+                    },
+                    {
+                    terms:[
+                        {
+                            value:`%owner\":\"${props.data.id}%`,
+                            termType:"like",
+                            column:"options"
+                        }
+                    ],
+                    type:"or"
+                }
+                ]
+            }
+            ],
+}
+const addChildrenMenu = (data:any) =>{
+  basicFormRef.value?.clearValidate()
+  initFormData()
+  showControls.value = true
+  editType.value = 'add'
+  formData.value.parentId = data?.id
+  formData.value.url = data?.url
+  formData.value.sortIndex = data?.children?.length + 1|| 0;
+}
+const addMenu = () =>{
+  initFormData()
+  formData.value.sortIndex = rootMenuTotal.value
+  showControls.value = true
+  editType.value = 'add'
+}
+const editMenu = (data:any) =>{
+  basicFormRef.value?.clearValidate()
+  initFormData()
+  showControls.value = true
+  editType.value = 'edit'
+  getMenuInfo_api(data.id).then((res:any)=>{
+      formData.value = res.result
+      sourceCode.value = res.result?.code
   })
 }
-
+const deleteMenu = (data:any) =>{
-if (props.data?.id) {
+  delMenuInfo_api(data.id).then((resp: any) => {
-  getBindMenuData()
+            if (resp.status === 200) {
+                onlyMessage('操作成功');
+                queryMenu();
             }
-
+        });
+}
+const initFormData = () =>{
+  formData.value = {
+    icon:'',
+    name:'',
+    code:'',
+    url:'',
+  }
+}
+const choseIcon = (typeStr: string) => {
+    formData.value.icon = typeStr;
+    uploadIcon.value?.clearValidate();
+}
+const saveMenu = () =>{
+  basicFormRef.value.validate().then(()=>{
+    const api = editType.value === 'add' ? addMenuInfo_api : saveMenuInfo_api
+    saveLoading.value = true
+    const params ={
+      ...formData.value,
+      owner: 'iot',
+      options: { show: true ,owner:props.data?.id },
+    } 
+    api(params).then((res)=>{
+      if(res.status === 200){
+        onlyMessage('操作成功')
+        queryMenu()
+      }else{
+        onlyMessage('操作失败')
+      }
+    }).finally(() => (saveLoading.value = false));
+  })
+}
+const checkCode = async (_rule: Rule, value: string): Promise<any> => {
+        if (!value) return Promise.reject('');
+        else if (value.length > 64) return Promise.reject('最多可输入64个字符');
+        // 编辑时不校验原本的编码
+        else if (editType.value = 'edit' && value === sourceCode.value)
+            return Promise.resolve('');
+        else {
+            const resp: any = await validCode_api({
+                code: value,
+                owner: 'iot',
+            });
+            if (resp.result.passed) return Promise.resolve();
+            else return Promise.reject('该编码重复');
+        }
+}
+const cancel = () =>{
+  emit('cancel')
+}
+const queryMenu = () =>{
+  getMenuTree_api(queryParams).then((res:any)=>{
+    treeData.value = res.result?.filter((item: { code: string }) => ![USER_CENTER_MENU_CODE,messageSubscribe].includes(item.code))
+    const lastItem = res.result[res.result.length - 1];
+    rootMenuTotal.value = lastItem ? lastItem.sortIndex + 1 : 1;
+  })
+}
+onMounted(()=>{
+  queryMenu()
+})
 </script>
 
-<style scoped>
+<style  lang="less" scoped>
+.menuList{
+  width: 35%;
+  margin-right: 20px;
+}
+.configuration{
+  width: 60%;
+}
+.content{
+  border: .3px solid rgb(220, 220, 220);
+  position: relative;
+  .saveBtn{
+    position: absolute;
+    right: 20px;
+    top: 10px;
+  }
+  .basic-form{
+    height: 432px;
+    padding: 32px 20px;
+    :deep(.ant-form-item-control-input-content) {
+                    .icon-upload {
+                        width: 160px;
+                        height: 150px;
+                        border: 1px dashed #d9d9d9;
+                        font-size: 14px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        text-align: center;
+                        cursor: pointer;
+                        transition: 0.5s;
 
+                        &:hover {
+                            border-color: #415ed1;
+                        }
+                    }
+
+                    .has-icon {
+                        position: relative;
+                        text-align: center;
+
+                        .mark {
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            display: none;
+                            background-color: rgba(0, 0, 0, 0.35);
+                            color: #fff;
+                            width: 100%;
+                            height: 100%;
+                            font-size: 16px;
+                            align-items: center;
+                            justify-content: center;
+                        }
+
+                        &:hover .mark {
+                            display: flex;
+                        }
+                    }
+
+                    .no-icon {
+                        background-color: rgba(0, 0, 0, 0.06);
+                    }
+                }
+  }
+  .treeContainer{
+    height: 400px;
+    overflow-y: auto;
+  }
+  .tree-item{
+    display: flex;
+    position: relative;
+    align-items: stretch;
+    justify-content: space-around;
+    .title {
+                flex: 1;
+                min-width: 80px;
+                margin-right: 80px;
+            }
+    .menuControls {
+      position: absolute;
+      right: 10px;
+      display: none;
+      font-size: 14px;
+      :deep(.ant-btn-link) {
+            padding: 0 4px;
+            height: 24px;
+          }
+      }
+  }
+}
+
+  :deep(.ant-tree-treenode) {
+        width: 100%;
+        .ant-tree-node-content-wrapper {
+            flex: 1 1 auto;
+          }
+          .ant-tree-title {
+                &:hover {
+                    .menuControls{
+                        display: block;
+                    }
+                }
+            }
+  }
 </style>

src/views/system/Department/components/LeftTree.vue

@@ -255,7 +255,6 @@ init();
             width: 100%;
         }
     }
-
     :deep(.ant-tree-treenode) {
         width: 100%;
         .ant-tree-node-content-wrapper {
@@ -278,7 +277,7 @@ init();
       flex: 1 1 auto;
       .department-tree-item-content {
         display: flex;
-        align-items: center;
+        align-items: stretch;
 
         .title {
                 flex: 1;

src/views/system/Menu/Detail/BasicInfo.vue

@@ -83,12 +83,6 @@
                                     style="width: 100%" />
                             </j-form-item>
                         </j-col>
-                        <j-col :span="12" v-if="!isChildren">
-                            <j-form-item label="所属应用" name="appId">
-                                <j-select v-model:value="form.data.appId" :options="appOptions" :allowClear="!routeParams.id"
-                                    placeholder="请选择所属应用" style="width: 100%"  @change="selectApp"/>
-                            </j-form-item>
-                        </j-col>
                     </j-row>
                 </div>
 
@@ -98,7 +92,7 @@
                 </j-form-item>
             </j-form>
         </div>
-        <div class="card" v-if="!form.data.appId && !isChildren">
+        <div class="card" v-if="!form.data.appId">
             <h3>权限配置</h3>
             <j-form ref="permissFormRef" :model="form.data" class="basic-form permiss-form">
                 <j-form-item name="accessSupport" required v-if="isNoCommunity">
@@ -172,12 +166,11 @@ import {
     saveMenuInfo_api,
     addMenuInfo_api,
     validCode_api,
-    queryApp
 } from '@/api/system/menu';
 import { Rule } from 'ant-design-vue/lib/form';
 import { isNoCommunity } from '@/utils/utils';
 import { onlyMessage } from '@/utils/comm';
-import { applicationInfo } from '@/api/bind';
+
 
 const permission = 'system/Menu';
 // 路由
@@ -189,7 +182,6 @@ const routeParams = {
     url: route.query.basePath,
     parentId: route.query.pid,
 };
-const isChildren = route.query?.isChildren
 // 表单
 const basicFormRef = ref<FormInstance>();
 const permissFormRef = ref<FormInstance>();
@@ -207,8 +199,6 @@ const form = reactive({
         accessSupport: 'unsupported',
         assetType: undefined,
         indirectMenus: [],
-        appId: '',
-        application:'',
         ...routeParams,
     } as formType,
     treeData: [], // 关联菜单
@@ -290,9 +280,6 @@ const form = reactive({
                                     : '间接控制',
                     },
                 };
-                if(params?.isChildren){
-                    delete params.isChildren
-                }
                 api(params)
                     .then((resp: any) => {
                         if (resp.status === 200) {
@@ -320,32 +307,9 @@ const choseIcon = (typeStr: string) => {
     form.data.icon = typeStr;
     uploadIcon.value?.clearValidate();
 }
-
-const selectApp = (value:string,options:any) =>{
-    form.data.application = options?.label
-}
 // 弹窗
 const dialogVisible = ref(false);
 
-onMounted(() => {
-    queryApp({
-        terms: [
-            {
-                "column": "integrationModes",
-                "termType": "in$any",
-                "value": "page"
-            }
-        ],
-        paging: false
-    }).then((res:any)=>{   
-       appOptions.value  = res.result?.map((i:any)=>{
-            return {
-                label:i.name,
-                value:i.id
-            }
-        })
-    })
-})
 type formType = {
     id?: string;
     name: string;
@@ -359,8 +323,6 @@ type formType = {
     assetType: string | undefined;
     indirectMenus: any[];
     parentId?: string;
-    appId:string,
-    application:string
 };
 
 type assetType = {

src/views/system/Menu/index.vue

@@ -239,7 +239,7 @@ const table = reactive({
         router.push(
             `/system/Menu/detail/:id?pid=${row.id}&basePath=${
                 row.url || ''
-            }&sortIndex=${sortIndex + 1}&isChildren=${true}`,
+            }&sortIndex=${sortIndex + 1}`,
         );
 
     },

src/views/system/Relationship/index.vue

@@ -107,6 +107,7 @@ const columns = [
         ellipsis: true,
         fixed: 'left',
         search: {
+            rename:'objectType',
             type: 'select',
             options: async () =>{
                const res:any = await getObjectList_api()