Merge branch 'master' of http://193.200.130.186:3000/chenke/hl-web-admin

src/api/menu.js

@@ -37,17 +37,17 @@ export function roleMenuTreeselect(roleId) {
 // 新增菜单
 export function addMenu(data) {
   return request({
-    url: '/api/v1/menu',
+    url: '/menu/AddMenu',
     method: 'post',
     data: data
   })
 }
 
 // 修改菜单
-export function updateMenu(data, id) {
+export function updateMenu(data ) {
   return request({
-    url: '/api/v1/menu/' + id,
-    method: 'put',
+    url: '/menu/menuEdit',
+    method: 'post',
     data: data
   })
 }
@@ -55,8 +55,8 @@ export function updateMenu(data, id) {
 // 删除菜单
 export function delMenu(data) {
   return request({
-    url: '/api/v1/menu',
-    method: 'delete',
+    url: '/menu/menuDel',
+    method: 'post',
     data: data
   })
 }

src/layout/components/Navbar.vue

@@ -1,8 +1,6 @@
 <template>
   <el-menu class="navbar-header-fixed" mode="horizontal">
-    <div class="name">
-      Hamlet管理端
-    </div>
+    <div class="name">Hamlet管理端</div>
     <div class="top-right">
       <div class="hb-bd">
         <hamburger
@@ -14,9 +12,10 @@
 
       <div class="top-select">
         <div class="go-index">{{ name }}</div>
-        <div class="logout" v-if="this.$store.state.user.token" @click="logout">注销</div>
+        <div class="logout" v-if="this.$store.state.user.token" @click="logout">
+          注销
+        </div>
         <div class="login" v-else @click="$router.push('/login')">登录</div>
-        
       </div>
     </div>
   </el-menu>
@@ -27,38 +26,37 @@ import { mapGetters } from "vuex";
 import Hamburger from "@/components/Hamburger";
 export default {
   components: {
-    Hamburger
+    Hamburger,
   },
   data: () => ({
     mix: false,
     userImage: require("@/assets/user.png"),
-    isMac: process.platform === "darwin"
+    isMac: process.platform === "darwin",
   }),
-  mounted() {
-  },
+  mounted() {},
   methods: {
     toggleSideBar() {
-      console.log('toggle')
+      console.log("toggle");
       this.$store.dispatch("ToggleSideBar");
     },
     logout() {
       this.$store.dispatch("user/FedLogOut").then(() => {
         this.$message({
           message: "退出成功",
-          type: "success"
+          type: "success",
         });
-        this.$router.push('/login')
+        this.$router.push("/login");
       });
     },
   },
   computed: {
-    ...mapGetters(["name", "role", "sidebar"])
+    ...mapGetters(["name", "role", "sidebar"]),
   },
   beforeDestroy() {
     console.log("销毁计时器------------");
     clearInterval(this.timer);
     this.timer = null;
-  }
+  },
 };
 </script>
 
@@ -72,7 +70,7 @@ export default {
   right: 0;
   z-index: 1002;
   height: 36px;
-  -webkit-user-select:none;
+  -webkit-user-select: none;
   -webkit-app-region: drag;
   background-color: #525151;
   border: none !important;
@@ -101,7 +99,7 @@ export default {
     height: 100%;
     justify-content: space-between;
     // padding: 0 5px;
-    color: #BFBDBD;
+    color: #bfbdbd;
     .hb-bd {
       display: flex;
       justify-content: center;
@@ -137,7 +135,7 @@ export default {
         font-family: SourceHanSansSC-regular;
       }
       .tools {
-        color: #BFBDBD;
+        color: #bfbdbd;
         margin-left: 32px;
         padding: 0 8px;
         display: flex;
@@ -147,7 +145,6 @@ export default {
           margin: 0 5px;
           cursor: pointer;
         }
-        
       }
       .select-right ::v-deep .el-dropdown > span {
         font-size: 6px;

src/main.js

@@ -22,6 +22,10 @@ import VueI18n from 'vue-i18n'
 import loadLanguage from './i18n'
 const languages = loadLanguage()
 
+// 获取图片大小
+import getImgWidth from './utils/get-img-width';
+Vue.prototype.$getImgWidth = getImgWidth;
+
 // console.log(process.env.VUE_APP_NAME);
 
 // 创建 i18n

src/styles/scss/index.scss

@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './admin.scss';
 
 body {
   margin: 0;

src/utils/get-img-width.js

@@ -0,0 +1,29 @@
+import { Message } from 'element-ui'
+export default function (file, width, height) {
+    return new Promise(resolve => {
+        let reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function (e) {
+            let txt = e.target.result;
+            let img = document.createElement("img");
+            img.src = txt;
+            img.onload = function () {
+                if (img.width === width && img.height === height) {
+                    resolve(true)
+                } else {
+                    Message({
+                        message: `图片上传失败,宽高错误`,
+                        type: "warning",
+                        duration: 5000
+                    });
+                    resolve(false);
+                }
+            };
+        };
+    })
+}
+// 1. 650   350
+// 1. 650   350
+// 1. 650   350
+// 1. 650   350
+// 1. 650   350

src/views/article/index.vue

@@ -1,84 +1,191 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <el-button class="filter-item el-button el-button--primary el-button--mini" type="primary" icon="el-icon-edit" @click="handleCreate">
-        添加文章
-      </el-button>
+    <el-card class="box-card">
+      <el-row :gutter="20">
+        <!--部门数据-->
+        <el-col :span="4" :xs="24">
+          <div class="head-container">
+            <el-input
+              v-model="deptName"
+              placeholder="请输入分类名称"
+              clearable
+              size="small"
+              prefix-icon="el-icon-search"
+              style="margin-bottom: 20px"
+              :default-expand-all="false"
+            />
+          </div>
+          <div class="head-container">
+            <el-tree
+              ref="tree"
+              :data="categoryOptions"
+              highlight-current
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              @node-click="handleNodeClick"
+            />
           </div>
+        </el-col>
+        <!--用户数据-->
+        <el-col :span="20" :xs="24">
+          <el-form
+            ref="queryForm"
+            :model="listQuery"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="文章标题" prop="title">
+              <el-input
+                v-model="listQuery.title"
+                placeholder="请输入文章标题"
+                clearable
+                size="small"
+                style="width: 160px"
+                @keyup.enter.native="getList"
+              />
+            </el-form-item>
+            <el-form-item label="文章标签" prop="label_name">
+              <el-input
+                v-model="listQuery.label_name"
+                placeholder="请输入文章标签"
+                clearable
+                size="small"
+                style="width: 160px"
+                @keyup.enter.native="getList"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="is_offline">
+              <el-select
+                v-model="listQuery.is_offline"
+                placeholder="文章状态"
+                clearable
+                size="small"
+                style="width: 160px"
+              >
+                <el-option
+                  v-for="dict in statusOptions"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="getList"
+                >搜索</el-button
+              >
+            </el-form-item>
+          </el-form>
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleCreate"
+                >新增</el-button
+              >
+            </el-col>
+          </el-row>
           <el-table
             v-loading="listLoading"
             :data="list"
             border
             fit
             highlight-current-row
-      style="width: 100%;"
+            style="width: 100%"
           >
             <el-table-column label="ID" prop="id" align="center">
-        <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.article_id }}</span>
               </template>
             </el-table-column>
             <el-table-column label="分类" align="center">
-        <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.category_id | getCateName(categoriesJson) }}</span>
               </template>
             </el-table-column>
             <el-table-column label="标题" align="center">
-        <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.title }}</span>
               </template>
             </el-table-column>
             <el-table-column label="封面图" align="center">
-        <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <img :src="row.img" height="100" />
               </template>
             </el-table-column>
             <el-table-column label="外链" align="center">
-        <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.url }}</span>
               </template>
             </el-table-column>
             <el-table-column label="标签详情">
-        <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.label_name | getTagDetail }}</span>
               </template>
             </el-table-column>
             <el-table-column label="创建时间" align="center">
-        <template slot-scope="{row}">
+              <template slot-scope="{ row }">
                 <span>{{ row.create_time }}</span>
               </template>
             </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <el-table-column
+              label="操作"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
               <template slot-scope="scope">
                 <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-edit"
                   @click="handleUpdate(scope.row)"
-              >修改</el-button>
+                  >修改</el-button
+                >
                 <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-delete"
                   @click="handleDelete(scope.row)"
-              >删除</el-button>
+                  >删除</el-button
+                >
               </template>
             </el-table-column>
           </el-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="listQuery.page"
+            :limit.sync="listQuery.limit"
+            @pagination="getList"
+          />
+        </el-col>
+      </el-row>
+    </el-card>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
     <!-- 添加或修改分类对话框 -->
     <el-drawer
       ref="drawer"
       :title="textMap[dialogStatus]"
       :visible.sync="dialogFormVisible"
       direction="rtl"
-          custom-class="drawer"
+      custom-class="demo-drawer"
       size="950px"
     >
-      <div class="drawer__content">
-    <!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen="dialogFullscreen"> -->
-        <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="">
+      <div class="demo-drawer__content" v-if="dialogFormVisible">
+        <el-form
+          ref="dataForm"
+          :model="temp"
+          label-position="left"
+          label-width="70px"
+          style
+        >
           <el-form-item label="类型">
             <treeselect
               v-model="temp.category_id"
@@ -89,14 +196,23 @@
             />
           </el-form-item>
           <template v-if="tagData.length">
-            <el-form-item :label="item.label" v-for="(item,index) in tagData" :key="index">
-              <el-select v-model="chooseTagData[index]" multiple placeholder="请选择" style="width:100%">
+            <el-form-item
+              :label="item.label"
+              v-for="(item, index) in tagData"
+              :key="index"
+            >
+              <el-select
+                v-model="chooseTagData[index]"
+                multiple
+                placeholder="请选择"
+                style="width: 100%"
+              >
                 <el-option
-                  v-for="(sItem,sIndex) in item.value"
+                  v-for="(sItem, sIndex) in item.value"
                   :key="sIndex"
                   :label="sItem"
-                  :value="sItem">
-                </el-option>
+                  :value="sItem"
+                ></el-option>
               </el-select>
             </el-form-item>
           </template>
@@ -104,7 +220,12 @@
             <el-input v-model="temp.title" />
           </el-form-item>
           <el-form-item label="日期" prop="time">
-            <el-date-picker v-model="temp.time" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期"></el-date-picker>
+            <el-date-picker
+              v-model="temp.time"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="date"
+              placeholder="选择日期"
+            ></el-date-picker>
           </el-form-item>
           <el-form-item label="外链" prop="url">
             <el-input v-model="temp.url" />
@@ -113,9 +234,22 @@
             <el-input type="textarea" v-model="temp.description" />
           </el-form-item>
           <el-form-item label="封面" prop="img" required>
-            <img v-if="temp.img" :src="temp.img" class="el-upload el-upload--picture-card" style="float:left">
-            <el-upload ref="sys_app_logo" :on-success="uploadSuccess" :on-error="uploadError"
-            :action="uploadAction" style="float:left" list-type="picture-card" :show-file-list="false">
+            <img
+              v-if="temp.img"
+              :src="temp.img"
+              class="el-upload el-upload--picture-card"
+              style="float: left"
+            />
+            <el-upload
+              ref="sys_app_logo"
+              :on-success="uploadSuccess"
+              :on-error="uploadError"
+              :action="uploadAction"
+              style="float: left"
+              list-type="picture-card"
+              :show-file-list="false"
+              :before-upload="validationImages"
+            >
               <i class="el-icon-plus" />
             </el-upload>
           </el-form-item>
@@ -126,22 +260,32 @@
               :limit="1"
               :on-exceed="handleFileExceed"
               :onSuccess="uploadFileSuccess"
-              :file-list=" temp.script_url ? [JSON.parse(temp.script_url)] : [] "
+              :file-list="temp.script_url ? [JSON.parse(temp.script_url)] : []"
             >
               <el-button size="small" type="primary">点击上传</el-button>
               <!-- <div slot="tip" class="el-upload__tip">
                 只能上传jpg/png文件，且不超过500kb
-              </div> -->
+              </div>-->
             </el-upload>
           </el-form-item>
           <el-form-item label="视频时长" prop="video_time">
-            <el-time-picker v-model="temp.video_time" value-format="HH:mm:ss" type="time" placeholder="选择时间"></el-time-picker>
+            <el-time-picker
+              v-model="temp.video_time"
+              value-format="HH:mm:ss"
+              type="time"
+              placeholder="选择时间"
+            ></el-time-picker>
           </el-form-item>
           <el-form-item label="内容" class="editor-box">
-            <vue-ueditor-wrap v-model="temp.content" :config="ueditorConfig" :destroy="true"  v-if="dialogFormVisible" />
+            <vue-ueditor-wrap
+              v-model="temp.content"
+              :config="ueditorConfig"
+              :destroy="true"
+              v-if="dialogFormVisible"
+            />
           </el-form-item>
         </el-form>
-        <div class="drawer__footer">
+        <div class="demo-drawer__footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="dialogFormVisible = false">取 消</el-button>
         </div>
@@ -151,19 +295,36 @@
 </template>
 
 <script>
-import { validPhone,isEmpty } from '@/utils/validate'
-import { fetchList, createArticle, updateArticle,delArticle, fetchArticleDetails } from '@/api/article'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import VueUeditorWrap from "vue-ueditor-wrap"
-import { listCategory } from '@/api/category'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { validPhone, isEmpty } from "@/utils/validate";
+import {
+  fetchList,
+  createArticle,
+  updateArticle,
+  delArticle,
+  fetchArticleDetails,
+} from "@/api/article";
+import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
+import VueUeditorWrap from "vue-ueditor-wrap";
+import { listCategory } from "@/api/category";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
-  name: 'articleIndex',
+  name: "articleIndex",
   components: { Pagination, Treeselect, VueUeditorWrap },
   data() {
     return {
+      deptName: "",
+      defaultProps: {
+        children: "children",
+        label: "category_name",
+      },
+      // 状态数据字典
+      statusOptions: [
+        { value: 2, label: "上线" },
+        { value: 1, label: "下线" },
+      ],
+      categoryOptionsLeft: undefined,
       tableKey: 0,
       list: null,
       total: 0,
@@ -171,6 +332,10 @@ export default {
       listQuery: {
         page: 1,
         limit: 20,
+        is_offline: 2,
+        title: "",
+        label_name: "",
+        category_id: undefined,
       },
       // accountRules: {
       //   phone: [{ required: true, trigger: 'blur', validator: RulePhone }],
@@ -180,226 +345,281 @@ export default {
         UEDITOR_HOME_URL: "/UEditor/",
         serverUrl: process.env.VUE_APP_BASE_API + "/files/baiduUp",
         initialFrameHeight: 300,
-        scaleEnabled:true
+        scaleEnabled: true,
       },
-      uploadAction: process.env.VUE_APP_BASE_API + '/files/uploadFile',
+      uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
       temp: {
         id: undefined,
         category_id: undefined,
-        title: '',
-        time: '',
-        img: '',
-        script_url: '',
-        content: '',
-        description: '',
-        video_time: ''
+        title: "",
+        time: "",
+        img: "",
+        script_url: "",
+        content: "",
+        description: "",
+        video_time: "",
       },
       dialogFullscreen: true,
       dialogFormVisible: false,
-      dialogStatus: '',
+      dialogStatus: "",
       textMap: {
-        update: 'Edit',
-        create: 'Create'
+        update: "Edit",
+        create: "Create",
       },
       rules: {
-        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
+        title: [
+          { required: true, message: "title is required", trigger: "blur" },
+        ],
       },
       categoryOptions: [],
       // categoriesJson:[],
       downloadLoading: false,
       // tagData:[],
-      chooseTagData:[]
-    }
+      chooseTagData: [],
+      // 是否允许上传
+      validation: false,
+    };
   },
   mounted() {
-    this.getList()
-    this.getTreeselect()
+    this.getList();
+    this.getTreeselect();
   },
   computed: {
     categoriesJson() {
-      var res = this.handleCategory(this.categoryOptions)
-      return res
+      var res = this.handleCategory(this.categoryOptions);
+      return res;
     },
     tagData() {
-      let matchData = null
-      this.categoriesJson.forEach(item=>{
-        if(item.id==this.temp.category_id){
-          matchData = item.label_name
+      let matchData = null;
+      this.categoriesJson.forEach((item) => {
+        if (item.id == this.temp.category_id) {
+          matchData = item.label_name;
         }
-      })
+      });
       return matchData ? JSON.parse(matchData) : [];
-    }
     },
-  watch:{
+  },
+  watch: {
     tagData(newVal) {
       console.log("tagDAta");
       console.log(newVal);
       if (!newVal.length) {
-        this.chooseTagData = []
+        this.chooseTagData = [];
       }
     },
-    chooseTagData(newVal){
+    chooseTagData(newVal) {
       console.log("chooseTagData");
       console.log(newVal);
-    }
+    },
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
+    },
   },
   filters: {
     getCateName(id, categoriesJson) {
-      for (var i=0;i<categoriesJson.length;i++) {
+      for (var i = 0; i < categoriesJson.length; i++) {
         if (id == categoriesJson[i].id) {
-          return categoriesJson[i].name
+          return categoriesJson[i].name;
         }
       }
     },
     getTagDetail(data) {
       if (!data) {
-        return
+        return;
       }
-      let str=''
+      let str = "";
       data = JSON.parse(data);
-      data.forEach(item=>{
+      data.forEach((item) => {
         if (item.value.length) {
-          str += `${item.label}：${item.value.join("、")}；`
+          str += `${item.label}：${item.value.join("、")}；`;
         }
-      })
-      return str
+      });
+      return str;
     },
   },
   methods: {
+    // 验证图片宽高
+    async validationImages(file) {
+      let width = 0;
+      let height = 0;
+      console.log(this.temp);
+      switch (this.temp.category_id) {
+        case 23: //深度解说
+          width = 650;
+          height = 350;
+          break;
+        case 25: //行情分析
+          width = 130;
+          height = 130;
+          break;
+        case 24: //热点追踪
+          width = 130;
+          height = 130;
+          break;
+        case 7: //基础教程
+          width = 380;
+          height = 220;
+          break;
+        case 6: //图文教程
+          width = 380;
+          height = 220;
+          break;
+      }
+      let res = await this.$getImgWidth(file, width, height);
+      this.validation = res;
+      return res;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.listQuery.category_id = data.id;
+      this.getList();
+    },
     handleCategory(array) {
-      var res = []
-      array.forEach((item,index)=>{
-        let obj={}
-        obj.id = item.category_id
-        obj.name = item.category_name
-        obj.label_name = item.label_name
-        res.push(obj)
-        if(item.children) {
-          res.push(...this.handleCategory(item.children))
+      var res = [];
+      array.forEach((item, index) => {
+        let obj = {};
+        obj.id = item.category_id;
+        obj.name = item.category_name;
+        obj.label_name = item.label_name;
+        res.push(obj);
+        if (item.children) {
+          res.push(...this.handleCategory(item.children));
         }
-      })
-      return res
+      });
+      return res;
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.category_name.indexOf(value) !== -1;
     },
-    
     getList() {
-      this.listLoading = true
-      fetchList(this.listQuery).then(response => {
-        this.list = response.data.list
-        this.total = response.data.count
-
+      this.listLoading = true;
+      fetchList(this.listQuery).then((response) => {
+        console.log(response);
+        this.list = response.data.list;
+        this.total = response.data.count;
         // Just to simulate the time of the request
         setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
-      })
+          this.listLoading = false;
+        }, 1.5 * 1000);
+      });
     },
     handleFilter() {
-      this.listQuery.page = 1
-      this.getList()
+      this.listQuery.page = 1;
+      this.getList();
     },
     handleModifyStatus(row, status) {
       this.$message({
-        message: '操作Success',
-        type: 'success'
-      })
-      row.status = status
+        message: "操作Success",
+        type: "success",
+      });
+      row.status = status;
     },
     resetTemp() {
       this.temp = {
         id: undefined,
         category_id: undefined,
-        title: '',
-        time: '',
-        img: '',
-        script_url: '',
-        content: ''
-      }
+        title: "",
+        time: "",
+        img: "",
+        script_url: "",
+        content: "",
+        description: "",
+        video_time: "",
+      };
     },
     submitForm() {
-      let matchData = [...this.tagData]
-      this.chooseTagData.forEach((item,index)=>{
-        matchData[index]['value'] = item
-      })
+      let matchData = [...this.tagData];
+      this.chooseTagData.forEach((item, index) => {
+        matchData[index]["value"] = item;
+      });
       this.temp.label_name = JSON.stringify(matchData);
-      if (this.dialogStatus == 'create') {
-        this.createData()
-      } else if (this.dialogStatus == 'update') {
-        this.updateData()
+      if (this.dialogStatus == "create") {
+        this.createData();
+      } else if (this.dialogStatus == "update") {
+        this.updateData();
       }
     },
     handleCreate() {
-      this.resetTemp()
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
+      this.resetTemp();
+      this.temp.category_id = this.listQuery.category_id;
+      this.dialogStatus = "create";
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     createData() {
       // this.$refs['dataForm'].validate((valid) => {
       //   if (valid) {
       createArticle(this.temp).then(() => {
-            this.dialogFormVisible = false
+        this.dialogFormVisible = false;
         this.$message({
           message: "添加成功",
           type: "success",
           duration: 2 * 1000,
         });
-            this.getList()
-          })
+        this.getList();
+      });
       //   }
       // })
     },
     handleUpdate(row) {
-      let article_id = row.article_id
-      fetchArticleDetails({article_id}).then(res => {
+      let article_id = row.article_id;
+      this.dialogStatus = "update";
+      this.resetTemp();
+      this.dialogFormVisible = true;
+      fetchArticleDetails({ article_id }).then((res) => {
         this.temp = res.data;
         if (this.temp.label_name) {
-          let data = JSON.parse(this.temp.label_name)
-          data.forEach((item,index)=>{
-            this.chooseTagData[index] = item.value
-          })
+          let data = JSON.parse(this.temp.label_name);
+          data.forEach((item, index) => {
+            this.chooseTagData[index] = item.value;
+          });
         }
-        this.dialogStatus = 'update'
-        this.dialogFormVisible = true
+
         this.$nextTick(() => {
-          this.$refs['dataForm'].clearValidate()
-        })
-      })
+          this.$refs["dataForm"].clearValidate();
+        });
+      });
     },
     updateData() {
       // this.$refs['dataForm'].validate((valid) => {
       //   if (valid) {
       updateArticle(this.temp).then(() => {
-            this.dialogFormVisible = false
+        this.dialogFormVisible = false;
         this.$message({
           message: "更新成功",
           type: "success",
           duration: 2 * 1000,
         });
 
-            this.getList()
-          })
+        this.getList();
+      });
       //   }
       // })
     },
-    handleDelete({title,article_id}) {
-      this.$confirm('是否确认删除名称为"' + title + '"的数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(function() {
-        console.log('del')
-        return delArticle({ article_id })
-      }).then((response) => {
+    handleDelete({ title, article_id }) {
+      this.$confirm('是否确认删除名称为"' + title + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          console.log("del");
+          return delArticle({ article_id });
+        })
+        .then((response) => {
           if (response.code === 200) {
             this.$message({
               message: "删除分类成功",
               type: "success",
               duration: 2 * 1000,
             });
-          this.open = false
-          this.getList()
+            this.open = false;
+            this.getList();
           } else {
             this.$message({
               message: "删除分类失败",
@@ -407,11 +627,13 @@ export default {
               duration: 2 * 1000,
             });
           }
-      }).catch(function() {})
+        })
+        .catch(function () {});
     },
     uploadSuccess(response, file) {
-      if (response.state == 'SUCCESS') {
-        this.temp.img = response.url
+      console.log(response);
+      if (response.state == "SUCCESS" && this.validation) {
+        this.temp.img = response.url;
       }
       // const uid = file.uid;
       // const objKeyArr = Object.keys(this.listObj);
@@ -424,12 +646,12 @@ export default {
       // }
     },
     uploadFileSuccess(response, file) {
-      let obj = {}
-      obj.name = response.original
-      obj.url = response.url
-      this.temp.script_url = JSON.stringify(obj)
+      let obj = {};
+      obj.name = response.original;
+      obj.url = response.url;
+      this.temp.script_url = JSON.stringify(obj);
     },
-    handleFileExceed(files, fileList){
+    handleFileExceed(files, fileList) {
       this.$message.warning("只允许上传一个脚本");
     },
     uploadRemove(file) {
@@ -450,45 +672,42 @@ export default {
     },
     /** 查询分类下拉树结构 */
     getTreeselect() {
-      listCategory().then(response => {
-        this.categoryOptions = []
-        this.categoryOptions.push(...response.data)
-      })
+      listCategory().then((response) => {
+        this.categoryOptions = [];
+        this.categoryOptions.push(...response.data);
+      });
     },
     /** 转换分类数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children
+        delete node.children;
       }
       return {
         id: node.category_id,
         label: node.category_name,
-        children: node.children
-      }
+        children: node.children,
+      };
     },
     // 选择类别，获取对应的标签数据
-    chooseCategory(node){
+    chooseCategory(node) {
       this.tagData = node.label_name ? JSON.parse(node.label_name) : [];
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .app-container {
+.app-container {
   .filter-container {
     margin-left: 5px;
     margin-bottom: 6px;
   }
-    ::v-deep  .el-drawer__body{
+  ::v-deep .el-drawer__body {
     padding: 20px;
   }
-    ::v-deep section {
-      overflow-y: scroll;
-    }
   .editor-box {
     ::v-deep .el-form-item__content {
       line-height: 20px;
     }
   }
-  }
+}
 </style>

src/views/menu/index.vue

@@ -22,12 +22,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-form-item>
     </el-form>
 
@@ -36,7 +31,7 @@
       :data="menuList"
       border
       row-key="id"
-          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
       <el-table-column prop="title" label="菜单名称" :show-overflow-tooltip="true" width="180px" />
       <el-table-column prop="icon" label="图标" align="center" width="100px">
@@ -47,7 +42,7 @@
       <el-table-column prop="sort" label="排序" width="60px" />
       <el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true">
         <template slot-scope="scope">
-              <span v-if="scope.row.menuType=='A'">{{ scope.row.path }}</span>
+          <span v-if="scope.row.menuType == 'A'">{{ scope.row.path }}</span>
           <span v-else>{{ scope.row.component }}</span>
         </template>
       </el-table-column>
@@ -58,18 +53,8 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
         <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-plus"
-                @click="handleAdd(scope.row)"
-              >新增</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)">新增</el-button>
           <el-button
             size="mini"
             type="text"
@@ -101,13 +86,13 @@
                     <i class="el-icon-question" />
                   </el-tooltip>
                 </span>
-                    <!-- <treeselect
-                      v-model="form.parentId"
+                <treeselect
+                  v-model="form.fid"
                   :options="menuOptions"
                   :normalizer="normalizer"
                   :show-count="true"
                   placeholder="选择上级菜单"
-                    /> -->
+                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -133,60 +118,26 @@
               </el-form-item>
             </el-col>
 
-                <el-col :span="24">
-                  <el-form-item prop="menuType">
-                    <span slot="label">
-                      菜单类型
-                      <el-tooltip content="包含目录：以及菜单或者菜单组，菜单：具体对应某一个页面，按钮：功能才做按钮；" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-radio-group v-model="form.menuType">
-                      <el-radio label="M">目录</el-radio>
-                      <el-radio label="C">菜单</el-radio>
-                      <el-radio label="F">按钮</el-radio>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="24">
-                  <el-form-item label="菜单图标">
-                    <el-popover
-                      placement="bottom-start"
-                      width="460"
-                      trigger="click"
-                      @show="$refs['iconSelect'].reset()"
-                    >
-                      <IconSelect ref="iconSelect" @selected="selected" />
-                      <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                        <svg-icon
-                          v-if="form.icon"
-                          slot="prefix"
-                          :icon-class="form.icon"
-                          class="el-input__icon"
-                          style="height: 32px;width: 16px;"
-                        />
-                        <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                      </el-input>
-                    </el-popover>
-                  </el-form-item>
-                </el-col>
             <el-col :span="12">
-                  <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" prop="menuName">
+              <el-form-item prop="menu_name">
                 <span slot="label">
                   路由名称
                   <el-tooltip content="需要和页面name保持一致，对应页面即可选择缓存" placement="top">
                     <i class="el-icon-question" />
                   </el-tooltip>
                 </span>
-                    <el-input v-model="form.menuName" placeholder="请输入路由名称" />
+                <el-input v-model="form.menu_name" placeholder="请输入路由名称" />
               </el-form-item>
             </el-col>
 
-                <el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12">
+            <el-col :span="12">
               <el-form-item prop="component">
                 <span slot="label">
                   组件路径
-                      <el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" placement="top">
+                  <el-tooltip
+                    content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；"
+                    placement="top"
+                  >
                     <i class="el-icon-question" />
                   </el-tooltip>
                 </span>
@@ -194,26 +145,14 @@
               </el-form-item>
             </el-col>
 
-                <el-col :span="12">
-                  <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'">
-                    <span slot="label">
-                      是否外链
-                      <el-tooltip content="可以通过iframe打开指定地址" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-radio-group v-model="form.isFrame">
-                      <el-radio label="0">是</el-radio>
-                      <el-radio label="1">否</el-radio>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-
             <el-col :span="12">
               <el-form-item v-if="form.menuType != 'F'" prop="path">
                 <span slot="label">
                   路由地址
-                      <el-tooltip content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name" placement="top">
+                  <el-tooltip
+                    content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name"
+                    placement="top"
+                  >
                     <i class="el-icon-question" />
                   </el-tooltip>
                 </span>
@@ -249,6 +188,85 @@
                 </el-radio-group>
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <span slot="label">
+                  菜单栏状态
+                  <el-tooltip content="需要显示菜单列表的设置为显示，否则设置为隐藏" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-radio-group v-model="form.show_sidebar">
+                  <el-radio
+                    v-for="dict in visibleOptions"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <span slot="label">
+                  标签栏状态
+                  <el-tooltip content="需要显示标签栏的设置为显示，否则设置为隐藏" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-radio-group v-model="form.show_tags">
+                  <el-radio
+                    v-for="dict in showTagsOptions"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <span slot="label">
+                  底部栏状态
+                  <el-tooltip content="需要显示底部工具栏的设置为显示，否则设置为隐藏" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-radio-group v-model="form.show_bottom">
+                  <el-radio
+                    v-for="dict in showBottomOptions"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <span slot="label">
+                  是否隐藏面包屑
+                </span>
+                <el-radio-group v-model="form.hide_breadcrumb">
+                  <el-radio
+                    v-for="dict in hideBreadcrumbOptions"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item>
+                <span slot="label">
+                  参数
+                  <el-tooltip
+                    content="非技术人员请勿修改"
+                    placement="top"
+                  >
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-input v-model="form.params" placeholder="" />
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-form>
         <div class="demo-drawer__footer">
@@ -256,7 +274,6 @@
           <el-button @click="cancel">取 消</el-button>
         </div>
       </div>
-
     </el-drawer>
   </el-card>
 </template>
@@ -264,7 +281,7 @@
 <script>
 import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/menu'
 
-const Treeselect = require('@riophae/vue-treeselect')
+import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import IconSelect from '@/components/IconSelect'
 
@@ -284,7 +301,22 @@ export default {
       // 是否显示弹出层
       open: false,
       // 菜单状态数据字典
-      visibleOptions: [],
+      visibleOptions: [
+        {value: false, label: "隐藏"},
+        {value: true, label: "显示"}
+      ],
+      showBottomOptions: [
+        {value: false, label: "隐藏"},
+        {value: true, label: "显示"}
+      ],
+      showTagsOptions: [
+        {value: false, label: "隐藏"},
+        {value: true, label: "显示"}
+      ],
+      hideBreadcrumbOptions: [
+        {value: false, label: "否"},
+        {value: true, label: "是"}
+      ],
       // 查询参数
       queryParams: {
         title: undefined,
@@ -293,7 +325,22 @@ export default {
       },
       // 表单参数
       form: {
-        apis: [],
+        id: undefined,
+        fid: 0,
+        title: undefined,
+        menu_name: undefined,
+        icon: undefined,
+        menu_type: 'user',
+        component: undefined,
+        path: undefined,
+        sort: 0,
+        visible: '0',
+        no_cache: 1,
+        show_sidebar: 1,
+        show_tags: 1,
+        show_bottom: 1,
+        is_hot: 0,
+        params: undefined
       },
       // 表单校验
       rules: {
@@ -341,19 +388,17 @@ export default {
         delete node.children
       }
       return {
-        id: node.menuId,
+        id: node.id,
         label: node.title,
         children: node.children
       }
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
-      listMenu().then(response => {
       this.menuOptions = []
-        const menu = { menuId: 0, title: '主类目', children: [] }
-        menu.children = response.data
+      const menu = { id: 0, title: '主类目', children: [] }
+      menu.children = this.menuList
       this.menuOptions.push(menu)
-      })
     },
     // 取消按钮
     cancel() {
@@ -363,18 +408,23 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        menuId: undefined,
-        parentId: 0,
-        menuName: undefined,
+        id: undefined,
+        fid: 0,
+        title: undefined,
+        menu_name: undefined,
         icon: undefined,
-        menuType: 'M',
-        apis: [],
+        menu_type: 'user',
+        component: undefined,
+        path: undefined,
         sort: 0,
-        action: this.form.menuType === 'A' ? this.form.action : '',
-        isFrame: '1',
-        visible: '0'
+        visible: '0',
+        no_cache: 1,
+        show_sidebar: 1,
+        show_tags: 1,
+        show_bottom: 1,
+        is_hot: 0,
+        params: undefined
       }
-      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -385,51 +435,57 @@ export default {
       this.reset()
       this.getTreeselect()
       if (row != null) {
-        this.form.parentId = row.menuId
+        this.form.fid = row.id
       }
       this.open = true
       this.title = '添加菜单'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      console.log(row)
       this.reset()
       this.getTreeselect()
-      getMenu(row.menuId).then(response => {
-        this.form = response.data
+      // getMenu(row.menuId).then(response => {
+      this.form = row
       this.open = true
       this.title = '修改菜单'
-      })
-    },
-    setApis(apiArray) {
-      var l = []
-      for (var index = 0; index < apiArray.length; index++) {
-        const element = apiArray[index]
-        l.push(element.id)
-      }
-      this.form.apis = l
+      // })
     },
     /** 提交按钮 */
-    submitForm: function() {
+    submitForm: function () {
+      delete this.form.children
       this.$refs['form'].validate(valid => {
         if (valid) {
-          if (this.form.menuId !== undefined) {
-            updateMenu(this.form, this.form.menuId).then(response => {
+          if (this.form.id !== undefined) {
+            updateMenu(this.form).then(response => {
               if (response.code === 200) {
-                this.msgSuccess(response.msg)
+                this.$message({
+                  message: response.msg,
+                  type: 'success'
+                })
                 this.open = false
                 this.getList()
               } else {
-                this.msgError(response.msg)
+                this.$message({
+                  message: response.msg,
+                  type: 'error'
+                })
               }
             })
           } else {
             addMenu(this.form).then(response => {
               if (response.code === 200) {
-                this.msgSuccess(response.msg)
+                this.$message({
+                  message: response.msg,
+                  type: 'success'
+                })
                 this.open = false
                 this.getList()
               } else {
-                this.msgError(response.msg)
+                this.$message({
+                  message: response.msg,
+                  type: 'error'
+                })
               }
             })
           }
@@ -442,37 +498,42 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(function() {
-        var Ids = (row.menuId && [row.menuId]) || this.ids
-        return delMenu({ 'ids': Ids })
+      }).then(function () {
+        return delMenu({ 'id': row.id })
       }).then((response) => {
         if (response.code === 200) {
-          this.msgSuccess(response.msg)
+          this.$message({
+            message: response.msg,
+            type: 'success'
+          })
           this.open = false
           this.getList()
         } else {
-          this.msgError(response.msg)
+          this.$message({
+            message: response.msg,
+            type: 'error'
+          })
         }
-      }).catch(function() {})
+      }).catch(function () { })
     }
   }
 }
 </script>
 <style lang="css">
-.panel .el-transfer__buttons{
+.panel .el-transfer__buttons {
   width: 150px;
 }
-.panel .el-transfer__buttons .el-button + .el-button{
-  margin-left:0;
+.panel .el-transfer__buttons .el-button + .el-button {
+  margin-left: 0;
 }
-.panel .el-transfer-panel{
+.panel .el-transfer-panel {
   width: 300px;
 }
 
 .el-col {
-padding: 0 5px;
+  padding: 0 5px;
 }
-.el-drawer__header{
-margin-bottom: 0;
+.el-drawer__header {
+  margin-bottom: 0;
 }
 </style>