菜单管理

src/styles/app/element.scss

@@ -207,3 +207,27 @@
     color: #a9abb2;
     cursor: not-allowed;
 }
+
+//数字输入框
+.el-input-number[block] {
+    width: 100%;
+}
+
+//表单自定义label
+.hc-form-item-label {
+    position: relative;
+    display: flex;
+    align-items: center;
+    .title-content {
+        position: relative;
+        flex: 1;
+        .text {
+            font-size: 13px;
+            color: #9a9a9a;
+        }
+    }
+    .right-content {
+        position: relative;
+        margin-left: 24px;
+    }
+}

src/views/system/menu.vue

@@ -70,7 +70,86 @@
                     </el-col>
                     <el-col :span="8">
                         <el-form-item label="上级菜单：">
-                            <el-tree-select v-model="formModel.parentId" placeholder="选择上级菜单" clearable :data="levelMenu" filterable check-strictly block :render-after-expand="false" />
+                            <el-tree-select
+                                v-model="formModel.parentId" placeholder="选择上级菜单"
+                                :data="levelMenu" :props="levelMenuProps" clearable filterable check-strictly block :render-after-expand="false"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="菜单类型：" prop="category">
+                            <el-radio-group v-model="formModel.category">
+                                <el-radio :label="1">菜单</el-radio>
+                                <el-radio :label="2">按钮</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col v-if="formModel.category === 2" :span="8">
+                        <el-form-item label="按钮是否显示：" prop="isShowButton">
+                            <el-radio-group v-model="formModel.isShowButton">
+                                <el-radio :label="2">否</el-radio>
+                                <el-radio :label="1">是</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col v-if="formModel.category === 1" :span="8">
+                        <el-form-item label="是否外层：" prop="isLayout">
+                            <el-radio-group v-model="formModel.isLayout">
+                                <el-radio :label="1">否</el-radio>
+                                <el-radio :label="2">是</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="新窗口：" prop="isOpen">
+                            <el-radio-group v-model="formModel.isOpen">
+                                <el-radio :label="1">否</el-radio>
+                                <el-radio :label="2">是</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="菜单排序：" prop="sort">
+                            <el-input-number v-model="formModel.sort" :min="1" block controls-position="right" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="16">
+                        <el-form-item label="按钮提示语：">
+                            <el-input v-model="formModel.textInfo" clearable :disabled="formModel.category === 1" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="菜单备注：">
+                            <el-input v-model="formModel.remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item>
+                            <template #label>
+                                <div class="hc-form-item-label">
+                                    <div class="title-content">
+                                        <span class="title">菜单备注：</span>
+                                        <span content="text">(只能上传MP4格式，且不能用QQ录屏，推荐使用win10自带录屏录制，文件大小限制50兆)</span>
+                                    </div>
+                                    <div class="right-content">
+                                        <el-link type="warning" @click="formModel.videoUrl = ''">清除</el-link>
+                                    </div>
+                                </div>
+                            </template>
+                            <hc-form-upload :src="formModel.videoUrl" :num="1" @upload="videoUpload" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="文档信息：">
+                            <template #label>
+                                <div class="hc-form-item-label">
+                                    <div class="title-content">文档信息：</div>
+                                    <div class="right-content">
+                                        <el-link type="warning" @click="formModel.excelUrl = ''">清除</el-link>
+                                    </div>
+                                </div>
+                            </template>
+                            <hc-form-upload :src="formModel.excelUrl" :num="1" @upload="excelUpload" />
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -79,14 +158,18 @@
 
         <!-- 图标选择 -->
         <hc-menu-icon v-model="isIconShow" @finish="menuIconFinish" />
+
+        <!-- 上传文件 -->
+        <hc-upload-file ref="uploadRef" :echo-params="uploadParams" :options="uploadOptions" @success="uploadSuccess" />
     </hc-new-card>
 </template>
 
 <script setup>
-import { onActivated, ref } from 'vue'
+import { nextTick, onActivated, ref } from 'vue'
 import { getArrValue } from 'js-fast-way'
 import { getClinetAll } from '~api/other'
 import mainApi from '~api/system/menu'
+import { getHeader } from 'hc-vue3-ui'
 
 //激活
 onActivated(() => {
@@ -160,6 +243,10 @@ const tableCheckChange = (rows) => {
 }
 
 //上级菜单
+const levelMenuProps = {
+    label: 'title',
+}
+
 const levelMenu = ref([])
 const getLevelMenuData = async () => {
     const { data } = await mainApi.getMenuTree()
@@ -199,10 +286,56 @@ const menuIconFinish = (icon) => {
 
 //新增菜单
 const addClick = () => {
-    formModel.value = {}
+    formModel.value = {
+        category: 1, isOpen: 1, isLayout: 1, isShowButton: 1,
+        sort: 1, sysId: null, parentId: null,
+    }
     isDialogShow.value = true
 }
 
+//上传文件
+const uploadRef = ref(null)
+const uploadParams = ref({})
+const uploadOptions = ref({
+    url: '/api/blade-resource/oss/endpoint/put-file2',
+    headers: getHeader(),
+    multiple: false,
+})
+
+//上传视频
+const videoUpload = () => {
+    uploadParams.value = { type: '视频文件' }
+    uploadOptions.value.accept = 'video/mp4'
+    uploadOptions.value.accept_tip = '只能上传MP4格式，且不能用QQ录屏，推荐使用win10自带录屏录制，文件大小限制50兆'
+    uploadOptions.value.size = 50
+    nextTick(() => {
+        uploadRef.value?.selectFile()
+    })
+}
+
+//上传文档
+const excelUpload = () => {
+    uploadParams.value = { type: '文档文件' }
+    uploadOptions.value.accept = null
+    uploadOptions.value.accept_tip = null
+    uploadOptions.value.size = null
+    nextTick(() => {
+        uploadRef.value?.selectFile()
+    })
+}
+
+// 文件上传成功的回调
+const uploadSuccess = ({ echoParams, resData }) => {
+    if (echoParams.type === '视频文件') {
+        formModel.value.videoUrl = resData
+    } else if (echoParams.type === '文档文件') {
+        formModel.value.excelUrl = resData
+    }
+    //关闭弹窗
+    uploadRef.value?.setModalShow(false)
+}
+
+
 //关闭弹窗
 const dialogClose = () => {
     isDialogShow.value = false