修改冀北问题

src/views/pqs/cockpit/setUp/components/popup.vue

@@ -1,29 +1,29 @@
 <template>
     <div class="pd10">
         <el-card>
-            <el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
-                <el-form-item label="页面名称:" prop="pageName">
+            <el-form ref="formRef" inline :rules="rules" :model="form" label-width="auto" class="form-four">
+                <el-form-item label="页面名称" prop="pageName">
                     <el-input
+                        style="width: 100%"
                         maxlength="32"
                         show-word-limit
                         v-model.trim="form.pageName"
                         placeholder="请输入页面名称"
                     ></el-input>
                 </el-form-item>
-
-                <el-form-item label="页面排序:" prop="sort">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit-number
-                        v-model.trim.number="form.sort"
-                        :min="0"
-                        :step="1"
-                        step-strictly
-                        style="width: 100%"
-                    />
+                <el-form-item label="图标">
+                    <IconSelector v-model.trim="form.icon" style="width: 80%" placeholder="请选择图标" />
                 </el-form-item>
+                <el-form-item label="页面排序" prop="sort">
+                    <el-input-number style="width: 100%" v-model.trim="form.sort" :min="0" :max="10000" :step="1" />
+                </el-form-item>
+                <!-- <el-form-item label="绑定页面">
+                    <el-select v-model="form.pagePath" filterable placeholder="请选择绑定页面" style="width: 100%" clearable>
+                        <el-option v-for="item in pageList" :key="item.path" :label="item.name" :value="item.path" />
+                    </el-select>
+                </el-form-item> -->
 
-                <el-form-item label="备注:" class="top">
+                <el-form-item label="备注" class="top">
                     <el-input
                         maxlength="300"
                         show-word-limit
@@ -87,6 +87,7 @@
                         <template #item="{ item }">
                             <div class="imgBox">
                                 <div class="textName">{{ item.name }}</div>
+
                                 <img
                                     :src="getImg(item.path)"
                                     :style="{
@@ -106,6 +107,7 @@
                                             'px'
                                     }"
                                 />
+
                                 <CloseBold class="remove" @click="removeItem(item.i)" />
                             </div>
                             <!-- <span class="text">{{ `${item?.name}` }}</span>
@@ -118,11 +120,12 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 import BackComponent from '@/components/icon/back/index.vue'
 import { mainHeight } from '@/utils/layout'
 import type { CollapseIconPositionType } from 'element-plus'
+import IconSelector from '@/components/baInput/components/iconSelector.vue'
 import { componentTree } from '@/api/user-boot/user'
 import { GridLayout, GridItem } from 'grid-layout-plus'
 import { throttle } from 'lodash-es'
@@ -130,11 +133,18 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { Tools, CloseBold } from '@element-plus/icons-vue'
 import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
 import html2canvas from 'html2canvas'
+import { useRoute } from 'vue-router'
+import { getMenu } from '@/utils/router'
+// defineOptions({
+//     name: 'cockpit/popup'
+// })
 const { go } = useRouter()
 const { query } = useRoute()
+const router = useRouter()
 const height = mainHeight(108)
 const indicatorHeight = mainHeight(128)
 const rowHeight = ref(0)
+const pageList: any = ref([])
 const GridHeight = ref(0)
 const position = ref<CollapseIconPositionType>('left')
 const form: any = reactive({
@@ -143,7 +153,11 @@ const form: any = reactive({
     containerConfig: [],
     sort: '100',
     id: '',
-    remark: ''
+
+    icon: '',
+    pagePath: '',
+    remark: '',
+    routeName: '/src/views/pqs/cockpit/homePage/index.vue'
 })
 const activeNames = ref([])
 const activeNames1 = ref([])
@@ -167,6 +181,13 @@ const layout: any = ref([
 const treeComponents: any = ref([]) //组件树
 const treeComponentsCopy: any = ref([]) //组件树
 const info = () => {
+    pageList.value = router
+        .getRoutes()
+        .filter(item => item?.meta?.component == '/src/views/pqs/cockpit/homePage/index.vue')
+        .map(item => {
+            return { name: item?.meta?.title, path: item?.meta?.path }
+        })
+
     activeNames.value = []
     activeNames1.value = []
     componentTree().then(res => {
@@ -184,10 +205,14 @@ const info = () => {
         queryById({ id: query.id }).then(res => {
             layout.value = JSON.parse(res.data.containerConfig)
             form.pageName = res.data.pageName
+            form.pagePath = query.path || res.data.pagePath
             form.sort = res.data.sort
             form.remark = res.data.remark
             form.id = res.data.id
+            form.icon = res.data.icon
         })
+    } else {
+        form.pagePath = query.path
     }
 }
 
@@ -286,7 +311,6 @@ const drag = throttle(row => {
 })
 
 function dragEnd(row: any) {
-    console.log('🚀 ~ drag ~ row:', row)
     const parentRect = wrapper.value?.getBoundingClientRect()
 
     if (!parentRect || !gridLayout.value) return
@@ -309,7 +333,7 @@ function dragEnd(row: any) {
         y: dragItem.y,
         w: dragItem.w,
         h: dragItem.h,
-        i: dragItem.i,
+        i: Math.random(), //dragItem.i,
         name: row.name,
         path: row.path,
         icon: row.icon,
@@ -327,18 +351,19 @@ const onSubmit = () => {
     if (layout.value.length == 0) {
         return ElMessage.warning('页面设计不能为空!')
     }
-    const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
-    if (maxValue > 6) {
-        return ElMessage.warning('组件不能超出当前容器!')
-    }
+    // const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
+    // if (maxValue > 6) {
+    //     return ElMessage.warning('组件不能超出当前容器!')
+    // }
 
     formRef.value.validate(async (valid: boolean) => {
         let url = ''
-        await html2canvas(document.querySelector('.GridLayout'), {
-            useCORS: true
-        }).then(canvas => {
-            url = canvas.toDataURL('image/png')
-        })
+        // await html2canvas(document.querySelector('.GridLayout'), {
+        //     useCORS: true
+        // }).then(canvas => {
+        //     url = canvas.toDataURL('image/png')
+        // })
+        form.pagePath = form.pagePath || ''
 
         if (valid) {
             if (form.id == '') {
@@ -346,6 +371,7 @@ const onSubmit = () => {
                     (res: any) => {
                         ElMessage.success('新增页面成功!')
                         go(-1)
+                        getMenu()
                     }
                 )
             } else {
@@ -353,6 +379,7 @@ const onSubmit = () => {
                     (res: any) => {
                         ElMessage.success('修改页面成功!')
                         go(-1)
+                        getMenu()
                     }
                 )
             }
@@ -362,6 +389,7 @@ const onSubmit = () => {
 const getImg = throttle((path: string) => {
     if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
 })
+
 onMounted(() => {
     info()
 
@@ -436,7 +464,9 @@ onBeforeUnmount(() => {
 .vgl-layout {
     background-color: #eee;
 }
-
+:deep(.el-input-group) {
+    width: 90%;
+}
 .remove {
     position: absolute;
     top: 5px;
@@ -462,4 +492,7 @@ onBeforeUnmount(() => {
     background-color: #fff;
     border: 1px solid black;
 }
+:deep(.el-form--inline .el-form-item) {
+    margin-right: 0px;
+}
 </style>