Merge branch 'dev' of https://cloud.wodcloud.com/git/apaas/apaas-system-ui into dev

src/assets/css/index.css

@@ -1513,6 +1513,11 @@ border-radius:8px;
   font-weight: bold;
   margin-bottom: 20px;
 }
+.header_info {
+  font-size: 14px;
+	color: #404a62;
+  padding-left: 20px;
+}
 .name_btn {
   color: #3759be;
   cursor: pointer;
@@ -1527,3 +1532,11 @@ border-radius:8px;
   font-size: 14px;
   color: #404a62;
 }
+.icon_eye {
+  font-size: 12px; 
+  color: #a9b1c7; 
+  margin-right: 8px;
+  vertical-align: baseline;
+  cursor: pointer;
+}
+

src/bg-ui/bg-table-btns-more.vue

@@ -38,6 +38,7 @@ export default {
       }
     },
     clickAction({ callback }) {
+      this.$parent.hideBox()
       typeof callback === "function" && callback();
     },
     getName({ name }) {

src/bg-ui/bg-table-btns.vue

@@ -53,6 +53,9 @@ export default {
     },
   },
   methods: {
+    hideBox() {
+      this.showMore = false
+    },
     isDisabled({ disabled }) {
       if (typeof disabled === "function") {
         return disabled();

src/bg-ui/bg-upload-image.vue

@@ -59,7 +59,7 @@ export default {
     },
     action: {
       type: String,
-      default: "/apaas/static/image/upload",
+      default: "/apaas/common/file/upload",
     },
     autoUpload: {
       type: Boolean,

src/bg-ui/index.scss

@@ -2045,6 +2045,7 @@ a {
   background-color: #2b4695;
   cursor: pointer;
   user-select: none;
+  transition: all .3s;
 
   > .label {
     font-size: 12px;

src/page/main/config/dict/index.vue

@@ -56,7 +56,7 @@
             </template>
           </bg-filter-group>
           <div class="table_container">
-            <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true" :select="true">
+            <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
               <template v-slot:updated_time="{ row }">
                 {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
               </template>
@@ -521,20 +521,20 @@ const moveRow = (row,type) => {
       sort: row.sort
     }
   ]
-  // axios
-  //   .put(``,[...params])
-  //   .then((res) => {
-  //     if (res.data.code == 200) {
-  //       ElMessage.success(res.data.data)
-  //       state.tableRows = []
-  //       changePage(1)
-  //     }else {
-  //       ElMessage.error(res.data.data)
-  //     }
-  //   })
-  //   .catch((err) => {
-  //     console.log(err)
-  //   })
+  axios
+    .put(`/apaas/system/v5/dictionary/sort`,[...params])
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success(res.data.data)
+        state.tableRows = []
+        changePage(1)
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    })
+    .catch((err) => {
+      console.log(err)
+    })
 }
 
 onBeforeMount(() => {

src/page/main/develop/account/add/contact-form.vue

@@ -7,16 +7,16 @@
     ref="contactRef"
     style="max-width: 66%"
   >
-    <el-form-item label="联系人姓名" prop="contact_user">
-      <el-input v-model="contactForm.contact_user" />
+    <el-form-item label="联系人姓名" prop="contact_name">
+      <el-input v-model="contactForm.contact_name" />
     </el-form-item>
-    <el-form-item label="联系人手机号" prop="phone">
-      <el-input v-model="contactForm.phone" />
+    <el-form-item label="联系人手机号" prop="contact_phone">
+      <el-input v-model="contactForm.contact_phone" />
     </el-form-item>
-    <el-form-item label="联系人邮箱">
-      <el-input v-model="contactForm.email"/>
+    <el-form-item label="联系人邮箱" prop="contact_email">
+      <el-input v-model="contactForm.contact_email"/>
     </el-form-item>
-     <el-form-item label="备注">
+     <el-form-item label="备注" prop="remark">
       <el-input type="textarea" :rows="3" v-model="contactForm.remark" />
     </el-form-item>
   </el-form>
@@ -26,18 +26,30 @@
 import { reactive, ref, onMounted } from 'vue'
 
 const contactForm = reactive({
-  contact_user: '',
-  phone: '',
-  email: '',
+  contact_name: '',
+  contact_phone: '',
+  contact_email: '',
   remark: '',
 })
 
+const checkPhone = (rule, value, callback) => {
+      var phone_ruler = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
+      setTimeout(() => {
+        if (!phone_ruler.test(value)&&value.length!==0) {
+          callback(new Error("请输入正确的手机号码"));
+        } else {
+          callback();
+        }
+      });
+    };
+
 const contactFormRules = reactive({
-  contact_user: [
+  contact_name: [
     { required: true, message: '请输入联系人姓名', trigger: 'blur' },
   ],
-  phone: [
+  contact_phone: [
     { required: true, message: '请输入联系人手机号', trigger: 'blur' },
+    { validator: checkPhone, trigger: 'blur' },
   ],
 })
 const contactRef = ref(null)

src/page/main/develop/account/add/index.vue

@@ -4,7 +4,7 @@
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
                 <el-breadcrumb-item :to="{ path: '/develop/account' }"> 系统账号管理 </el-breadcrumb-item>
-                <el-breadcrumb-item> {{ route.query.type === "0" ? '新建' : '编辑'}} </el-breadcrumb-item>
+                <el-breadcrumb-item> {{ route.query.id ? '编辑' : '新建'}} </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="page_content flex_cloumn">
@@ -44,14 +44,17 @@
                      
                 </div>
                 <div class="content_main">
-                    <systemForm v-show="step === 1" ref="systemFormRef" @action="getSystemFormData"></systemForm>
+                    <systemForm v-show="step === 1" ref="systemFormRef" :form-type="route.query.id ? true : false" :id="route.query.id" @action="getSystemFormData"></systemForm>
                     <contactForm v-show="step === 2" ref="contactFormRef" @action="getContactFormData"></contactForm>
                     <div class="process_end" v-show="step === 3">
                         <div>
-                            <div><img src="@/assets/imgs/img_data-complete.png" alt=""></div>
-                            <div class="font_bold">业务系统新增成功</div>
+                            <div>
+                                <img v-if="successFlag" src="@/assets/imgs/img_data-complete.png" alt="">
+                                <img v-else src="@/assets/imgs/img_data-fail.png" alt="">
+                            </div>
+                            <div class="font_bold">{{route.query.id ? (successFlag ? '业务系统编辑成功' : '业务系统编辑失败') : (successFlag ? '业务系统新建成功' : '业务系统新建失败')}}</div>
                             <el-button  @click="cancel">返回列表</el-button>
-                            <el-button type="primary" @click="continueCreate">继续创建</el-button>
+                            <el-button v-if="!route.query.id" type="primary" @click="continueCreate">继续创建</el-button>
                         </div>
                             
                     </div>
@@ -78,30 +81,35 @@
 import { useRoute, useRouter } from 'vue-router';
 import systemForm from './system-form.vue';
 import contactForm from './contact-form.vue';
-import { reactive, ref,onBeforeMount,toRefs,computed, onBeforeUnmount, onMounted  } from 'vue';
-
+import { reactive, ref,onBeforeMount,toRefs,computed, onBeforeUnmount, onMounted, getCurrentInstance  } from 'vue';
+import CryptoJS from "crypto-js"; 
+const { proxy } = getCurrentInstance()
+const { $axios,$message } = proxy
 const route = useRoute();
 const router = useRouter();
 const step = ref(1);
 const systemFormRef = ref(null);
 const contactFormRef = ref(null);
 const formData = reactive({
-  org: '',
-  code: '',
-  name: '',
-  desc: '',
+  organization_id: '',
+  business_code: '',
+  business_name: '',
+  business_desc: '',
   logo: '',
-  role: '',
-  account: '',
+  system_role_id: '',
+  system_account: '',
   password: '',
-  url: '',
-  firm_name: '',
-  is_use: '',
-  contact_user: '',
-  phone: '',
-  email: '',
+  confirm_password: '',
+  access_address: '',
+  develop_id: '',
+  state: 1,
+
+  contact_name: '',
+  contact_phone: '',
+  contact_email: '',
   remark: '',
 }); //业务系统表单+联系人表单
+const successFlag = ref(false)
 
 // 下一步
 const nextStep = () => {
@@ -118,10 +126,62 @@ const getSystemFormData = (data) => {
 }
 //联系人表单检验触发事件 data为null 校验失败 
 const getContactFormData = (data) => {
+
     if(data) {
         formData.value = Object.assign(formData,data);
-        console.log(formData);
+        if(route.query.id) {
+            console.log(formData)
+            let params = {
+                id: parseInt(route.query.id),
+                business_name: formData.value.business_name,
+                system_account: formData.value.system_account,
+                contact_email: formData.value.contact_email,
+                contact_phone: formData.value.contact_phone,
+                contact_name: formData.value.contact_name,
+                logo: formData.value.logo && formData.value.logo.length > 0 ? formData.value.logo[0].url : '',
+                state: formData.value.state,
+                business_desc: formData.value.business_desc,
+                develop_id: formData.value.develop_id,
+                access_address: formData.value.access_address,
+                remark: formData.value.remark
+            }
+            $axios.post(`/apaas/system/v5/user/update`,params)
+                .then((res) => {
+                if (res.data.code == 200) {
+                    successFlag.value = true;
                     step.value = 3;
+                }else {
+                    $message.error(res.data.msg)
+                }
+            })
+        }else {
+            let params = {
+                organization_id: formData.value.organization_id,
+                system_role_id: "ab98a936-9046-455b-aba3-4c73671024d0",
+                logo: formData.value.logo && formData.value.logo.length > 0 ? formData.value.logo[0].url : '',
+                password: CryptoJS.AES.encrypt(formData.value.password,"swuE9cmCZQwrkYRV").toString(),
+                business_code: formData.value.business_code,
+                business_name: formData.value.business_name,
+                business_desc: formData.value.business_desc,
+                system_account: formData.value.system_account,
+                access_address: formData.value.access_address,
+                develop_id: formData.value.develop_id,
+                state: formData.value.state,
+                contact_name: formData.value.contact_name,
+                contact_phone: formData.value.contact_phone,
+                contact_email: formData.value.contact_email,
+                remark: formData.value.remark,
+            }
+            $axios.put(`/apaas/system/v5/user/create`,params)
+                .then((res) => {
+                if (res.data.code == 200) {
+                    successFlag.value = true;
+                    step.value = 3;
+                }else {
+                    $message.error(res.data.msg)
+                }
+            })
+        }
     }
 }
 //上一步
@@ -137,42 +197,54 @@ const continueCreate = () => {
     systemFormRef.value.clearForm();
     contactFormRef.value.clearForm();
     step.value = 1;
+    successFlag = false;
 }
 //取消
 const cancel = () => {
     router.go(-1);
 }
 
-onBeforeUnmount(()=>{
-    
-})
-onMounted(() => {
-    if(route.query.type === "1") {
-        setTimeout(()=> {
+const getDetail = () => {
+    $axios.get(`/apaas/system/v5/user/detail/${route.query.id}`)
+        .then((res) => {
+            if (res.data.code == 200) {
+                const form = res.data.data;
                 systemFormRef.value.setForm({
-                org: 'a',
-                code: 'b',
-                name: 'b',
-                desc: 'b',
-                logo: ['b'],
-                role: 'b',
-                account: 'b',
-                password: 'b',
-                confirm_password: 'b',
-                url: 'b',
-                firm_name: 'b',
-                is_use: 'b',
+                    organization_id: form.organization_id,
+                    system_role_id: form.system_role_id,
+                    logo: [{url:form.logo}],
+                    business_code: form.business_code,
+                    business_name: form.business_name,
+                    business_desc: form.business_desc,
+                    system_account: form.system_account,
+                    access_address: form.access_address,
+                    develop_id: form.develop_id,
+                    state: form.state,
+                    appid: form.app_id,
+                    appsecret: form.app_secret
                     
                 })
+
             contactFormRef.value.setForm({
-                contact_user: 'c',
-                phone: 'c',
-                email: 'c',
-                remark: 'c',
+                contact_name: form.contact_name,
+                contact_phone: form.contact_phone,
+                contact_email: form.contact_email,
+                remark: form.remark,
             })
-        },500)
+            }else {
+                $message.error(res.data.msg)
             }
-})
+        })
+    }
+
+    onBeforeUnmount(()=>{
+       
+    })
+    onMounted(() => {
+        if(route.query.id) {
+            getDetail()
+        }
+    })
 
 </script>
 

src/page/main/develop/account/add/system-form.vue

@@ -7,63 +7,94 @@
     ref="systemRef"
     style="max-width: 66%"
   >
-    <el-form-item label="所属机构" prop="org">
-      <el-input v-model="systemForm.org" />
+    <el-form-item label="所属机构" prop="organization_id">
+      <el-tree-select v-model="systemForm.organization_id" :data="orgData" :props="treeProps" :render-after-expand="false" :disabled="formType" style="width: 100%;"/>
     </el-form-item>
-    <el-form-item label="业务系统编码" prop="code">
-      <el-input v-model="systemForm.code" />
+    <el-form-item label="业务系统编码" prop="business_code">
+      <el-input v-model="systemForm.business_code" :disabled="formType"/>
     </el-form-item>
-    <el-form-item label="业务系统名称" prop="name">
-      <el-input v-model="systemForm.name" />
+    <el-form-item label="业务系统名称" prop="business_name">
+      <el-input v-model="systemForm.business_name" />
+    </el-form-item>
+    <el-form-item label="AppId" prop="appid" v-if="formType">
+      <el-input v-model="systemForm.appid" :disabled="formType" style="width: 80%;"/>
+      <span class="pl-1"><el-button type="primary" @click="copyText(systemForm.appid)">复制</el-button></span>
+    </el-form-item>
+    <el-form-item label="AppSecret" prop="appsecret" v-if="formType">
+      <el-input v-model="systemForm.appsecret" :disabled="formType" style="width: 80%;"/>
+      <span class="pl-1"><el-button type="primary" @click="copyText(systemForm.appsecret)">复制</el-button></span>
+      <span class="pl-1"><el-button type="primary">重置</el-button></span>
     </el-form-item>
     <el-form-item label="系统LOGO" prop="logo">
        <bg-upload-image v-model="systemForm.logo" :showTips="true" :limit="1" :fileSize="500" :fileSizeUnit="'KB'" listType="picture-card" :accept="['.jpg','.jpeg','.png']" customTips="请选择图片上传：大小120 * 120像素支持jpg、png等格式，图片需小于500KB"></bg-upload-image>
     </el-form-item>
-     <el-form-item label="业务系统概述" prop="desc">
-      <el-input type="textarea" :rows="3" v-model="systemForm.desc" />
+     <el-form-item label="业务系统概述" prop="business_desc">
+      <el-input type="textarea" :rows="3" v-model="systemForm.business_desc" />
     </el-form-item>
-     <el-form-item label="角色" prop="role">
-      <el-input v-model="systemForm.role" />
+     <el-form-item label="角色" prop="system_role_id" v-if="!formType">
+      <el-input v-model="systemForm.system_role_id" />
     </el-form-item>
-     <el-form-item label="账号" prop="account">
-      <el-input v-model="systemForm.account" />
+     <el-form-item label="账号" prop="system_account">
+      <el-input v-model="systemForm.system_account" />
     </el-form-item>
-     <el-form-item label="密码" prop="password">
-      <el-input type="password" v-model="systemForm.password" />
+     <el-form-item label="密码" prop="password" v-if="!formType">
+      <el-input :type="password_eye ? 'text' : 'password'" v-model="systemForm.password" >
+        <template #suffix>
+          <bg-icon @click="password_eye = !password_eye" class="icon_eye"  icon="#bg-ic-eye"></bg-icon>
+        </template>
+      </el-input>
     </el-form-item>
-     <el-form-item label="确认密码" prop="confirm_password">
-      <el-input type="password" v-model="systemForm.confirm_password" />
+     <el-form-item label="确认密码" prop="confirm_password" v-if="!formType">
+      <el-input :type="confirm_eye ? 'text' : 'password'" v-model="systemForm.confirm_password" >
+        <template #suffix>
+            <bg-icon @click="confirm_eye = !confirm_eye" class="icon_eye"  icon="#bg-ic-eye"></bg-icon>
+        </template>
+      </el-input>
     </el-form-item>
-     <el-form-item label="访问地址" prop="url">
-      <el-input v-model="systemForm.url" />
+     <el-form-item label="访问地址" prop="access_address">
+      <el-input v-model="systemForm.access_address" />
     </el-form-item>
-    <el-form-item label="开发厂商名称" prop="firm_name">
-      <el-input v-model="systemForm.firm_name" />
+    <el-form-item label="开发厂商名称" prop="develop_id">
+      <el-input v-model="systemForm.develop_id" />
     </el-form-item>
-    <el-form-item label="是否启用" prop="is_use">
-      <bg-switch :labels="['否','是']" :values="[0,1]" v-model="systemForm.is_use"></bg-switch>
+    <el-form-item label="是否启用" prop="state">
+      <bg-switch :labels="['否','是']" :values="[0,1]" v-model="systemForm.state"></bg-switch>
     </el-form-item>
   </el-form>
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from 'vue'
-
+import { reactive, ref, onBeforeMount, onMounted, getCurrentInstance, computed } from 'vue'
+const { proxy } = getCurrentInstance()
+const { $axios,$message } = proxy
+const props = defineProps({
+  formType: {
+    type: Boolean,
+    default: false, //false 新建 true 编辑
+  },
+  id: {
+    type: String,
+    default: '', 
+  }
+});
 const systemForm = reactive({
-  org: '',
-  code: '',
-  name: '',
-  desc: '',
-  logo: '',
-  role: '',
-  account: '',
+  organization_id: '',
+  business_code: '',
+  business_name: '',
+  business_desc: '',
+  logo: [],
+  system_role_id: '',
+  system_account: '',
   password: '',
   confirm_password: '',
-  url: '',
-  firm_name: '',
-  is_use: 1,
- 
+  access_address: '',
+  develop_id: '',
+  state: 1,
+  appid: '',
+  appsecret: ''
 })
+const password_eye = ref(false)
+const confirm_eye = ref(false);
 
 const validatePass = (rule, value, callback) => {
   if (value !== systemForm.password) {
@@ -72,22 +103,60 @@ const validatePass = (rule, value, callback) => {
     callback()
   }
 }
+const validateBusinessName = (rule, value, callback) => {
+  let params = null;
+   if (props.id){
+     params = {id: parseInt(props.id),business_name: value,organization_id: systemForm.organization_id}
+   }else {
+     params = {business_name: value,organization_id: systemForm.organization_id}
+   }
+
+  $axios.post(`/apaas/system/v5/user/check/business`,params)
+     .then((res) => {
+      if (res.data.code == 200) {
+            callback()
+      }else {
+          callback(new Error(res.data.data))
+      }
+     })
+}
+
+const validateSystemAccount = (rule, value, callback) => {
+  let params = null;
+   if (props.id){
+     params = {id: parseInt(props.id),system_account: value,}
+   }else {
+     params = {system_account: value}
+   }
+
+  $axios.post(`/apaas/system/v5/user/check/account`,params)
+     .then((res) => {
+      if (res.data.code == 200) {
+            callback()
+      }else {
+          callback(new Error(res.data.data))
+      }
+     })
+}
 
 const formRules = reactive({
-  org: [
+  organization_id: [
     { required: true, message: '请选择组织机构', trigger: 'blur' },
   ],
-  name: [
+  business_name: [
     { required: true, message: '请输入业务系统名称', trigger: 'blur' },
+    { validator: validateBusinessName, trigger: 'blur' },
   ],
-  role: [
+  system_role_id: [
     { required: true, message: '请选择角色', trigger: 'blur' },
   ],
-  account: [
+  system_account: [
     { required: true, message: '请输入账号', trigger: 'blur' },
+    { validator: validateSystemAccount, trigger: 'blur' },
   ],
   password: [
     { required: true, message: '请输入密码', trigger: 'blur' },
+    {min: 8,message: '密码长度不得低于8位',trigger: 'blur'}
   ],
   confirm_password: [
     { required: true, message: '请确认密码', trigger: 'blur' },
@@ -120,6 +189,38 @@ const setForm = (data) => {
   systemForm.value = Object.assign(systemForm, data);
 }
 
+const orgData = ref([])
+const treeProps = {
+  label: 'name',
+  children: 'Child',
+  value: 'organization_id'
+}
+const getOrgTree = () => {
+  $axios.get(`/apaas/system/v5/org/tree`)
+     .then((res) => {
+     if (res.data.code == 200) {
+         orgData.value = res.data.data || [];
+     }else {
+         $message.error(res.data.msg)
+     }
+     })
+}
+
+const copyText = (data) => {
+  navigator.clipboard.writeText(data).then(
+        function () {
+          
+        },
+        function () {
+          
+        }
+      );
+}
+
+onBeforeMount(() =>{
+  getOrgTree()
+})
+
 onMounted(() => {
 
 })

src/page/main/develop/menu/index.vue

@@ -25,6 +25,7 @@
                 :highlight-current="true"
                 node-key="menu_id"
                 ref="menuTree"
+                :filter-node-method="filterNode"
               >
                 <template #default="{ node, data }">
                   <div class="custom-tree-node" pointer-events="none">
@@ -74,7 +75,7 @@
       <div class="flex_right">
         <div class="main_container">
           <div class="base-info bg-scroll">
-            <menuForm ref="menuFormRef" :data="menuFormData" @action="getMenuFormData"></menuForm>
+            <menuForm ref="menuFormRef" :data="menuFormData"></menuForm>
           </div>
           <div class="base-btn">
             <el-button  type="primary" @click="saveMenu(menuFormRef,addType)">
@@ -89,51 +90,61 @@
 
 <script setup>
 import { Search } from '@element-plus/icons-vue'
-import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount } from 'vue'
+import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount, watch } from 'vue'
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus'
 import axios from '../../../../request/http.js'
 import menuForm from './menu-form.vue'
 const router = useRouter();
 
-const menuTree = ref(null)
-const treeAction = ref(null)
-const menuFormRef = ref(null)
+const menuTree = ref(null) // 树形
+const treeAction = ref(null) // 树形操作弹出框
+const menuFormRef = ref(null) // 右侧表单
 const acTop = ref('');
 const acLeft = ref('');
 const acBottom = ref('');
-const actionFlag = ref(false)
+const actionFlag = ref(false) // 弹出框状态标识
 
 const state = reactive({
-  data: [],
-  search: "",
-  selectData:null,
-  selectParentData:null,
+  data: [], // 树形数据
+  search: "", // 树形搜索
+  selectData:null, // 当前选中的节点
+  selectParentData:null, // 当前选中节点的父节点
   treeAction,
   menuTree,
   bottomGap:30,//弹窗吸底高度
   defaultProps: {
     children: 'Child',
     label: 'menu_name',
-  },
-  actionDataIndex: 0,
-  menuFormData: null,
+  }, // 树形配置
+  actionDataIndex: 0, // 当前选中节点在本级的位置，用来判断是否可以上下移动
+  menuFormData: null, // 菜单数据
   addType: 1, // 1-新增本级 2-新增下级
-  newMenuId: 0,
+  newMenuId: 0, // 新增菜单时用来指定menu_id，达到选中效果
+  timer: null, // 定时器
 })
 
 const moveIndex = computed({
   get: () => {  
     let index = 0
     if(state.selectData) {
-      console.log(state.selectData)
       findIndex(state.selectData.menu_id,state.data)
       index = state.actionDataIndex
     }
     
     return index
   }
-})
+}) // 计算上下移动
+
+watch(() => state.search,(n,o) => {
+  if (state.timer) {
+    clearTimeout(state.timer);
+  }
+  state.timer = setTimeout(() => {
+    state.menuTree.filter(n)
+  }, 500);
+}) // 树形搜索值
+
 const getMenuTree = () => {
   axios
     .get(`/apaas/system/v5/menu/tree`)
@@ -155,11 +166,11 @@ const getMenuTree = () => {
       }
     })
 } // 获取菜单树
+
 const findIndex= (code,arr) => {
   arr.forEach((e,i) => {
     if (e.menu_id == code) {
       state.actionDataIndex = i
-      console.log(e,i)
     }else {
       if (e.Child && e.Child.length > 0) {
         findIndex(code,e.Child)
@@ -174,7 +185,6 @@ const showAction = (e, data,node) => {
   acBottom.value = ''
   const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
   var allHeight = document.body.scrollHeight
-  console.log(rect, data,node);
   
   actionFlag.value = true;
   state.selectData = data
@@ -200,7 +210,6 @@ const showAction = (e, data,node) => {
   })
 } // 树形操作框
 
-
 const handleNodeClick = (data) => {
   if (state.selectData && state.selectData.menu_id == data.menu_id) {
     return
@@ -210,10 +219,16 @@ const handleNodeClick = (data) => {
   closeAction()
 } // 菜单树节点点击
 
+const filterNode = (val,data) => {
+  if (!val) {
+    return true
+  }
+  return data.menu_name.includes(val)
+} // 树形筛选
+
 const fileAction = (val,data,parent,disabled=false) => {
-  if (val == 1) {
+  if (val == 1) { // 新建本级菜单
     state.addType = 1
-    console.log("新建本级", data ,parent,disabled)
     let newChild = {
       menu_name: "新菜单",
       menu_id: 'new' + state.newMenuId,
@@ -227,9 +242,8 @@ const fileAction = (val,data,parent,disabled=false) => {
     state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);
       handleNodeClick(newChild);
     state.newMenuId++
-  }else if (val == 2) {
+  }else if (val == 2) { // 新建下级菜单
     state.addType = 2
-    console.log("新建下级",data,parent,disabled)
     let newChild = {
       menu_name: "新菜单",
       menu_id: 'new' + state.newMenuId,
@@ -244,9 +258,7 @@ const fileAction = (val,data,parent,disabled=false) => {
       handleNodeClick(newChild);
     state.selectParentData = data
     state.newMenuId++
-    test()
-  }else if (val == 3) {
-    console.log("删除",data,parent,disabled)
+  }else if (val == 3) { // 删除菜单
     axios
       .delete(`/apaas/system/v5/menu/${data.id}`)
       .then((res) => {
@@ -258,20 +270,44 @@ const fileAction = (val,data,parent,disabled=false) => {
           ElMessage.error(res.data.data)
         }
       })
-    test()
-  }else if (val == 4) {
-    console.log("上移",data,parent,disabled)
-    test()
+  }else if (val == 4) { // 菜单上移
     if (disabled) {
       return
     }
-    test()
+    let nextObj = null
+    if (parent) {
+      parent.Child.forEach((e,i)=> {
+        if (data.id == e.id) {
+          nextObj = parent.Child[i-1]
+        }
+      })
     }else {
-    console.log("下移",data,parent,disabled)
+      state.data.forEach((e,i) => {
+        if (data.id == e.id) {
+          nextObj = state.data[i-1]
+        }
+      })
+    }
+    changeSort(data,nextObj)
+  }else { // 菜单下移
     if (disabled) {
       return
     }
-    test()
+    let nextObj = null
+    if (parent) {
+      parent.Child.forEach((e,i)=> {
+        if (data.id == e.id) {
+          nextObj = parent.Child[i+1]
+        }
+      })
+    }else {
+      state.data.forEach((e,i) => {
+        if (data.id == e.id) {
+          nextObj = state.data[i+1]
+        }
+      })
+    }
+    changeSort(data,nextObj)
   }
   if (menuFormRef) {
     nextTick().then(() => {
@@ -281,22 +317,37 @@ const fileAction = (val,data,parent,disabled=false) => {
         }
       })
     })
-  }
+  } // 清除表单验证
 } // 各种操作按钮
 
-const test = () => {
-  console.log("执行了")
-}
+const changeSort = (data,nextObj) => {
+  let params = [
+    {
+      id: data.id,
+      sort: nextObj.sort
+    },
+    {
+      id: nextObj.id,
+      sort: data.sort
+    }
+  ]
+  axios
+    .put(`/apaas/system/v5/menu/sort`,params)
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success(res.data.data)
+        getMenuTree()
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    })
+} // 菜单上下移
 
 const closeAction = () => {
   actionFlag.value = false;
 } // 点击其他地方，菜单操作框关闭
 
-const getMenuFormData = (date) => {
-
-}
 const saveMenu = (el,type) => {
-  console.log(el,type)
   let params = {
     menu_name: el.menuForm.menu_name,
     menu_type: el.menuForm.menu_type,
@@ -322,24 +373,25 @@ const saveMenu = (el,type) => {
     }else { // 新增下级
       params.p_menu_id = state.selectParentData.menu_id
     }
-    console.log(123)
+    
     axios
       .post(`/apaas/system/v5/menu/add`,params)
       .then((res) => {
         if (res.data.code == 200) {
           ElMessage.success(res.data.data)
+          state.selectData = null
           getMenuTree()
         }else {
           ElMessage.error(res.data.data)
         }
       })
   }
-}
+} // 保存按钮，新增或编辑菜单
+
 onBeforeMount(()=>{
   window.addEventListener("click", closeAction)
   window.addEventListener("scroll", closeAction,true)
   getMenuTree()
-  
 })
 
 onBeforeUnmount(()=>{
@@ -360,24 +412,45 @@ const {
 </script>
 
 <style scoped>
+
+.flex_left {
+  background-color: #fff;
+  height: calc(100% - 16px);
+  width: 320px;
+  box-shadow: 0px 1px 4px 0px 
+		rgba(0, 7, 101, 0.15);
+	border-radius: 6px;
+  margin-right: 10px;
+  overflow: hidden;
+}
+.flex_right {
+  background-color: #fff;
+  height: calc(100% - 16px);
+  flex: 1;
+  box-shadow: 0px 1px 4px 0px 
+		rgba(0, 7, 101, 0.15);
+	border-radius: 6px;
+  overflow: hidden;
+}
+
 .tree_content {
-overflow: hidden;
-height: calc(100% - 4px);
-position: relative;
+  overflow: hidden;
+  height: calc(100% - 4px);
+  position: relative;
 }
 .search {
-padding: 16px 16px 10px;
+  padding: 16px 16px 10px;
 }
 .tree {
-overflow: auto;
-height: calc(100% - 65px);
+  overflow: auto;
+  height: calc(100% - 65px);
 }
-.tree :deep().el-tree-node .el-tree-node__content {
-  padding: 0 16px!important;
+.tree :deep().el-tree-node>.el-tree-node__content {
+  /* padding: 0 16px!important; */
 } 
 .tree :deep() .el-tree-node>.el-tree-node__children {
-overflow: unset;
-padding-left: 16px;
+  overflow: unset;
+  /* padding-left: 16px; */
 }
 
 .tree-action-box {
@@ -393,6 +466,17 @@ padding-left: 16px;
 .tree .el-tree-node__content:hover .tree-action-box {
   display: inline-block;
 }
+.tree .el-tree {
+  position: static!important;
+}
+.tree .el-tree :deep().el-tree-node__content{
+  height: 36px!important;
+}
+.tree .el-tree :deep().el-tree-node__content:hover {
+  background-image: linear-gradient(90deg, 
+		rgba(255, 255, 255, 0.05) 83%, 
+		rgba(0, 0, 0, 0.05) 86%);
+}
 .tree-more {
   font-size: 12px;
   color: #3759be;

src/page/main/develop/menu/menu-form.vue

@@ -23,7 +23,7 @@
         <el-option
           v-for="item in groupList"
           :key="item.dict_id"
-          :label="item.name"
+          :label="item.dict_name"
           :value="item.dict_id"
         />
       </el-select>
@@ -78,7 +78,7 @@
           </el-input>
         </div>
         <div class="icon_content bg-scroll">
-          <div class="icon_item" v-for="(e,i) in iconArr" :key="i+100" @click="changeIcon(e)">
+          <div class="icon_item" v-for="(e,i) in showIconArr" :key="i+100" @click="changeIcon(e)">
             <span> 
               <bg-icon
                 class="selectBgIcon"
@@ -106,7 +106,7 @@ const props = defineProps({
   data: {
     type: Object,
     default: null,
-  }
+  },
 })
 const state = reactive({
   menuRef,
@@ -133,83 +133,85 @@ const state = reactive({
     ]
   },
   groupList: [],
-  iconFlag: false,
-  icon_search: "",
-  iconArr: [],
+  iconFlag: false, // 图标盒子
+  icon_search: "", // 图标筛选
+  iconArr: [], // 所有的图标
+  showIconArr: [], // 展示的图标
+  timer: null,
 })
 
-
-
-const emit = defineEmits(['action'])
-
-const submitForm = async () => {
-  if (!state.menuRef) return
-  await state.menuRef.validate((valid, fields) => {
-    if (valid) {
-      emit('action', state.menuForm)
-    } else {
-      emit('action',null)
-    }
-  })
-}
-
 const getGroupList = () => {
   axios
-    .get(`/apaas/system/v5/dictionary/list?state=1&id=5`)
+    .get(`/apaas/system/v5/menu/group/dict`)
     .then((res) => {
       if (res.data.code == 200) {
         state.groupList = res.data.data || []
-        console.log(state.groupList)
       }else {
         ElMessage.error(res.data.data)
       }
     }).catch((err) => {
       console.log(err)
     })
-}
+} // 获取分组数据
 const openIconbox = () => {
   state.iconFlag = !state.iconFlag
-}
+  state.icon_search = ""
+  searchIcon()
+} // 打开/关闭图标盒子
 const searchIcon = () => {
+  if (state.timer) {
+    clearTimeout(state.timer);
+  }
+  state.timer = setTimeout(() => {
+    let iconList = []
+    if (state.icon_search == "") {
+      state.showIconArr = state.iconArr
+    }else {
+      state.iconArr.map(e => {
+        if (e.name.indexOf(state.icon_search) !== -1) {
+          iconList.push(e)
+        }
+      })
+      state.showIconArr = iconList
+    }
+  },500)
+} // 图标筛选
 
-}
-const clearForm = () => {
-  if (!state.menuRef) return
-  state.menuRef.resetFields()
-} 
 const setForm = (data) => {
   state.menuForm = Object.assign(state.menuForm, data);
-}
+} // 表单赋值
+
 const clearIcon = () => {
   state.menuForm.menu_logo = ""
-}
+} // 清除选中的图标
+
 const changeIcon = (e) => {
-  console.log(e)
   state.menuForm.menu_logo = e.icon
   state.iconFlag = false
-}
+  state.icon_search = ""
+  searchIcon()
+} // 选中图标
 onMounted(() => {
+  // 处理图标数据
   allIconArr.forEach(e => {
     state.iconArr.push({
       icon: e,
       name: e.replace("bg-ic-","")
     })
   })
+  state.showIconArr = state.iconArr
+  getGroupList()
 })
 const {
   menuForm,
   formRules,
   groupList,
   iconFlag,
-  iconArr
+  showIconArr,
+  icon_search,
 } = toRefs(state)
 
-onMounted(() => {
-  getGroupList()
-})
-
-
-defineExpose({ submitForm, clearForm, setForm , menuForm, menuRef })
+defineExpose({ setForm , menuForm, menuRef })
 </script>
 
 <style lang="scss" scoped>