提交代码

3 years ago · 9680bc46f8
parent 223a97a609
commit 9680bc46f8
61 changed files with 29899 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
 > 1%
 last 2 versions
 not dead
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,17 @@
 module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
 }
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
 # Default ignored files
 /shelf/
 /workspace.xml
 # Editor-based HTTP Client requests
 /httpRequests/
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@ -0,0 +1,6 @@
 <component name="InspectionProjectProfileManager">
  <profile version="1.0">
    <option name="myName" value="Project Default" />
    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
  </profile>
 </component>
--- a/.idea/inspectionProfiles/profiles_settings.xml
+++ b/.idea/inspectionProfiles/profiles_settings.xml
@ -0,0 +1,5 @@
 <component name="InspectionProjectProfileManager">
  <settings>
    <option name="PROJECT_PROFILE" />
  </settings>
 </component>
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@ -0,0 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="WebPackConfiguration">
    <option name="mode" value="DISABLED" />
  </component>
 </project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@ -0,0 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="ProjectModuleManager">
    <modules>
      <module fileurl="file://$PROJECT_DIR$/.idea/sch.iml" filepath="$PROJECT_DIR$/.idea/sch.iml" />
    </modules>
  </component>
 </project>
--- a/.idea/sch.iml
+++ b/.idea/sch.iml
@ -0,0 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$">
      <excludeFolder url="file://$MODULE_DIR$/temp" />
      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
      <excludeFolder url="file://$MODULE_DIR$/tmp" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
 </module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="VcsDirectoryMappings">
    <mapping directory="$PROJECT_DIR$" vcs="Git" />
  </component>
 </project>
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,45 @@
 {
  "name": "mange",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "drag-tree-table": "^2.1.0",
    "element-ui": "^2.13.2",
    "global": "^4.4.0",
    "lib-flexible": "^0.3.2",
    "moment": "^2.27.0",
    "normalize.css": "^8.0.1",
    "sortable.js": "^0.3.0",
    "vue": "^2.6.11",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.2.0",
    "vue-video-player": "^5.0.2",
    "vuedraggable": "^2.24.1",
    "vuex": "^3.4.0",
    "wangeditor": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-plugin-router": "^4.4.0",
    "@vue/cli-plugin-vuex": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "node-sass": "^6.0.1",
    "postcss-loader": "^4.0.4",
    "postcss-px2rem": "^0.3.0",
    "sass-loader": "^12.3.0",
    "vue-template-compiler": "^2.6.11"
  }
 }
--- a/public/2.png
+++ b/public/2.png
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="./2.png">
    <title>后台管理系统</title>
    <!-- <link rel="stylesheet" href="../src/assets/fonts/font.css"> -->
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,21 @@
 <template>
  <div id="app">
    <router-view/>
  </div>
 </template>
 <style lang="less">
 #nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
 }
 </style>
--- a/src/apis/request.js
+++ b/src/apis/request.js
@ -0,0 +1,283 @@
 import axios from 'axios';
 //基础地址
 // axios.defaults.baseURL='http://139.9.247.137/msdw';
 // axios.defaults.baseURL='https://www.feifanhitech.com/msdw';
 // axios.defaults.baseURL='http://www.zxyicloud.com/msdw';
 axios.defaults.baseURL='http://47.107.237.129/msdw';
 //token为登录时，账号密码正确，服务端res中的数据
 //joggle为上传文件地址
 // export  const joggle='https://www.feifanhitech.com/msdw/aliyun/uploadFiles';
 // export  const joggle='http://www.zxyicloud.com/msdw/aliyun/uploadFiles';
 export  const joggle='http://47.107.237.129/msdw/aliyun/uploadFiles';
 axios.interceptors.request.use((req)=>{
    // console.log('请求拦截器拦截的数据：req',req)
    const token = sessionStorage.getItem('token');
    if(token){//给所有需要token的接口统一在请求头上添加token
        req.headers.token = token;
    }
    return req;
 });
 //获取栏目信息，未被删除的
 export function allColumn(){
    return axios.get('/column/column'
    ).then(res=>{
        return res.data.data
    });
 }
 //修改栏目信息
 export function editColumn(parms){
    return axios.post('/column/column/modify',parms
    ).then(res=>{
        return res.data.data
    });
 }
 //新增栏目信息
 export function addColumn(parms){
    return axios.put('/column/column',parms
    ).then(res=>{
        return res.data.data
    });
 }
 //删除栏目信息
 export function deleteColumn(parms){
    return axios.delete('/column/carouse/'+parms,
    ).then(res=>{
        return res.data.data
    });
 }
 //根据一个或多个id查找栏目数据
 export function returnColumn(parms){
    return axios.get('/column/'+parms,
    ).then(res=>{
        return res.data.data
    });
 }
 //更新栏目排序
 export function sortColumn(parms){
    return axios.post('/column/sorting',parms
    ).then(res=>{
        return res.data
    });
 }
 /*上传文件
 // export function uploadimg(parms){
 //     return axios.post('/upload/uploadImage',parms
 //     ).then(res=>{
 //         return res.data.data
 //     });
 // }
 */
 //查看该栏目下的文章详情
 export function getColumnarticle(parms,pangNum){
    return axios.get('/column/column/'+parms+'?pangNum='+pangNum,
    ).then(res=>{
        return res.data.data
    });
 }
 //该id栏目下的所有文章，管理系统
 export function getColumnallarticle(params){
    return axios.get('/column/column/all/'+params,
    ).then(res=>{
        return res.data.data
    });
 }
 //修改文章
 export function keepOreder(parms){
    return axios.put('/article/article',parms
    ).then(res=>{
        return res.data.data
    });
 }
 //删除二级栏目文章
 export function deleteArticle(parms){
    return axios.delete('/article/article/'+parms
    ).then(res=>{
        return res.data.data
    });
 }
 //修改文章
 export function editArticle(parms){
    return axios.put('/article/article',parms
    ).then(res=>{
        return res.data
    });
 }
 //新增文章
 export function addArticle(parms){
    return axios.post('/article/articles',
        parms
    ).then(res=>{
        return res.data
    });
 }
 //获取主页上各部分id，根据id查询各部分的详情
 export function getHomecolumn(){
    return axios.get('/homepage/getAllPage'
    ).then(res=>{
        return res.data.data
    });
 }
 //根据id查找图片
 export function getHomebanner(parms){
    return axios.get('/img/images/'+parms
    ).then(res=>{
        return res.data.data
    });
 }
 //新增图片信息
 export function postHomebanner(parms){
    return axios.post('/img/images',parms
    ).then(res=>{
        return res.data.data
    });
 }
 //根据传入id查询轮播图信息
 export function getHomecarouse(parms){
    return axios.get('/carouse/carouse/'+parms
    ).then(res=>{
        return res.data.data
    });
 }
 //增加轮播图
 export function addHomecarouse(parms){
    return axios.put('/carouse/carouses',parms
    ).then(res=>{
        return res.data.data
    });
 }
 //删除carouse
 export function deleteHomecarouse(parms){
    return axios.delete('/carouse/carouses/'+parms
    ).then(res=>{
        return res.data
    });
 }
 //轮播图排序接口
 export function Homecarousesort(parms){
    return axios.post('/carouse/sorting',parms
    ).then(res=>{
        return res.data
    });
 }
 //修改轮播图信息
 export function Homecarouseedit(parms){
    return axios.post('/carouse/modify',parms
    ).then(res=>{
        return res.data
    });
 }
 //根据id查找链接
 export function getHomelinks(parms){
    return axios.get('/link/'+parms
    ).then(res=>{
        return res.data.data
    });
 }
 //修改链接
 export function editHomelinks(parms){
    return axios.post('/link',parms
    ).then(res=>{
        return res.data.data
    });
 }
 //根据id查找标题
 export function getHomeheadline(parms){
    return axios.get('/headline/'+parms
    ).then(res=>{
        return res.data.data
    });
 }
 //新增一个标题
 export function addHomeheadline(parms){
    return axios.put('/headline/headlines',parms
    ).then(res=>{
        return res.data.data
    });
 }
 //获取所有未被删除的分类
 export function getHomeclassify(){
    return axios.get('/classify/classifies'
    ).then(res=>{
        return res.data.data
    });
 }
 //添加分类
 export function addHomeclassify(parms){
    return axios.post('/classify/classifies/add',parms
    ).then(res=>{
        return res.data.data
    });
 }
 //获取所有友情链接，未被删除的is——show
 export function getHomefriendlink(){
    return axios.get('/friendshipLink/getAll'
    ).then(res=>{
        return res.data.data
    });
 }
 //新增一条友情链接
 export function addHomefriendlink(params){
    return axios.put('/friendshipLink/addOne',params
    ).then(res=>{
        return res.data
    });
 }
 //修改多条友情链接
 export function modifyHomefriendlink(params){
    return axios.post('/friendshipLink/modify',params
    ).then(res=>{
        return res.data
    });
 }
 //修改分类信息
 export function modifyHomeclassify(params){
    return axios.post('/classify/classify',params
    ).then(res=>{
        return res.data
    });
 }
 //新增一个主页
 export function addHomepage(params){
    return axios.put('/homepage/homepage',params
    ).then(res=>{
        return res.data
    });
 }
 //管理员登录接口
 export function login(params){
    return axios.post('/admin/login',
        params
    ).then(res=>{
        return res.data.data
    });
 }
 //管理员修改密码
 export function adminChangepwd(params){
    return axios.post('/admin/change',
        params
    ).then(res=>{
        return res.data
    });
 }
 //获取所有友情链接分类以及子级信息
 export function getHomelink(){
    return axios.get('/friendshipLink/friendshipLinkGet/all'
    ).then(res=>{
        return res.data.data
    });
 }
 //删除友情链接，删除未传入的
 export function deleteHomelink(params){
    return axios.delete('/friendshipLink/deleteFriend/'+params,
    ).then(res=>{
        return res.data.data
    });
 }
 //删除分类，传入的不删
 export function deleteHomeclassify(params){
    return axios.delete('/classify/classifies/'+params,
    ).then(res=>{
        return res.data.data
    });
 }
--- a/src/assets/images/12.png
+++ b/src/assets/images/12.png
--- a/src/assets/images/2.png
+++ b/src/assets/images/2.png
--- a/src/assets/images/btn_close_hover.png
+++ b/src/assets/images/btn_close_hover.png
--- a/src/assets/images/btn_notvisule_n.png
+++ b/src/assets/images/btn_notvisule_n.png
--- a/src/assets/images/btn_pic_1.png
+++ b/src/assets/images/btn_pic_1.png
--- a/src/assets/images/btn_pic_2.png
+++ b/src/assets/images/btn_pic_2.png
--- a/src/assets/images/btn_pic_3.png
+++ b/src/assets/images/btn_pic_3.png
--- a/src/assets/images/btn_pic_4.png
+++ b/src/assets/images/btn_pic_4.png
--- a/src/assets/images/btn_visule_n.png
+++ b/src/assets/images/btn_visule_n.png
--- a/src/assets/images/icon.png
+++ b/src/assets/images/icon.png
--- a/src/assets/images/icon_link.png
+++ b/src/assets/images/icon_link.png
--- a/src/assets/images/icon_list.png
+++ b/src/assets/images/icon_list.png
--- a/src/assets/images/icon_msg_.png
+++ b/src/assets/images/icon_msg_.png
--- a/src/assets/images/icon_submenu_black.png
+++ b/src/assets/images/icon_submenu_black.png
--- a/src/assets/images/icon_submenu_blue.png
+++ b/src/assets/images/icon_submenu_blue.png
--- a/src/assets/images/icon_submenu_white.png
+++ b/src/assets/images/icon_submenu_white.png
--- a/src/assets/images/leftbar_icon_home_blue.png
+++ b/src/assets/images/leftbar_icon_home_blue.png
--- a/src/assets/images/leftbar_icon_home_white.png
+++ b/src/assets/images/leftbar_icon_home_white.png
--- a/src/assets/images/leftbar_icon_index_blue.png
+++ b/src/assets/images/leftbar_icon_index_blue.png
--- a/src/assets/images/leftbar_icon_index_white.png
+++ b/src/assets/images/leftbar_icon_index_white.png
--- a/src/assets/images/leftbar_icon_messages_blue.png
+++ b/src/assets/images/leftbar_icon_messages_blue.png
--- a/src/assets/images/leftbar_icon_messages_white.png
+++ b/src/assets/images/leftbar_icon_messages_white.png
--- a/src/assets/images/login.jpg
+++ b/src/assets/images/login.jpg
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/university.jpg
+++ b/src/assets/images/university.jpg
--- a/src/assets/images/无数据.png
+++ b/src/assets/images/无数据.png
--- a/src/assets/images/隐藏.png
+++ b/src/assets/images/隐藏.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/styles/common.less
+++ b/src/assets/styles/common.less
@ -0,0 +1,18 @@
 html,body,#app{
    height: 100%;
 }
 #app{
    text-align: left;
    font-family: 'Source Han Sans CN';
 }
 p,h3{
    margin: 0;
    padding: 0;
 }
 img{
    vertical-align: middle;
 }
 .container{
    width: 1200px;
    margin: 0 auto;
 }
--- a/src/components/Childmenu.vue
+++ b/src/components/Childmenu.vue
@ -0,0 +1,82 @@
 <template>
  <div class="menu-tree">
    <label v-for="list in dataList" :key="list.id">
      <!-- 如果栏目深度不等于零，则迭代组件child进行显示，否则只显示一项 -->
      <el-submenu :index="list.id" v-if="list.children.length != 0">
        <template slot="title">
           <img src="../assets/images/icon_submenu_blue.png" v-if="$route.params.id==list.id" alt="">
           <img src="../assets/images/icon_submenu_black.png" v-else alt="" >  
           <span :class="{acitive:$route.params.id==list.id}">{{ list.columnName }}</span>
        </template>
        <label>
          <Child :dataList="list.children"></Child>
        </label>
      </el-submenu>
      <!-- 最深的栏目项目 -->
      <el-menu-item v-else :index="list.id" @click="getColumnmessage(list.id)">
       <img src="../assets/images/icon_submenu_blue.png" v-if="$route.params.id==list.id" alt="">
       <img src="../assets/images/icon_submenu_black.png" v-else alt="" ><span slot="title">{{ list.columnName }}</span>
      </el-menu-item>
    </label>
  </div>
 </template>
 <script>
 import { getColumnarticle } from "@/apis/request.js";
 import { returnColumn } from "@/apis/request.js";
 export default {
  name: "Child",
  props: ["dataList"],//父传子获取
  data() {
    return {
      id: 12,
    };
  },
  methods: {
    getColumnmessage(id) {
      this.id = id;
        this.$store.state.columnid = id;
          localStorage.setItem('columnid',id)
          this.$router.push({
        path:
         '/home/contentmange/' + id,
      });
          returnColumn(id).then(res=>{
         this.$store.state.styleType=res[0].styleType;
            localStorage.setItem(
                    "style",
                    res[0].styleType
                  );
      })
      getColumnarticle(id,1).then((res) => {
        this.$store.state.article = res.list;
         this.$store.state.total=res.total
      });
      console.log(id);
    },
  },
 };
 </script>
 <style lang="less" scoped>
 .el-menu-item{
 font-family: 'Source Han Sans CN';
 }
 .el-submenu__title{
  font-family:'Source Han Sans CN' ;
 }
 img{
  // margin-top: 2px;
  // display: inline-block;
  margin-right: 4px;
  margin-bottom: -3px;
 }
 .acitive{
  color: #409EFF;
 }
 </style>
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@ -0,0 +1,96 @@
 <template>
  <div class="left-menu">
    <ul>
      <li
        @click="link('/home/homemange')"
        :class="{ active: $route.path.indexOf('/home/homemange')>-1   ? true : false }">
       <img  src="../assets/images/leftbar_icon_home_white.png" alt="" v-if="$route.path.indexOf('/home/homemange')>-1">
        <img  src="../assets/images/leftbar_icon_home_blue.png" alt="" v-else>  
         首页管理
      </li>
      <li
        @click="link('/home/columnmange')"
        :class="{ active: $route.path.indexOf('/home/columnmange')>-1 ? true : false }"
      >
        <img  src="../assets/images/leftbar_icon_index_white.png" alt="" v-if="$route.path.indexOf('/home/columnmange')>-1">
       <img  src="../assets/images/leftbar_icon_index_blue.png" alt="" v-else>
       栏目管理
      </li>
      <li
        @click="link('/home/contentmange/')"
        :class="{
          active: address.indexOf('/home/contentmange/') > -1 ? true : false,
        }"
      >   <img  src="../assets/images/leftbar_icon_messages_white.png" alt="" v-if="$route.path.indexOf('/home/contentmange/')>-1">
          <img  src="../assets/images/leftbar_icon_messages_blue.png" alt="" v-else>
          内容管理
      </li>
    </ul>
  </div>
 </template>
 <script>
 import { allColumn } from "@/apis/request.js";//导入所有栏目名
 export default {
  data() {
    return {
      address: "/home/homemange",
    };
  },
  methods: {
    link(a) {
      if (a == "/home/contentmange/") {//如果页面是内容管理，
        allColumn().then((res) => {
          console.log("res=>",res)
          this.listData = res;//内容管理二级栏目所有数据
          this.$store.state.styleType = res[0].styleType;//资源样式，文本/样式
          this.$store.state.columnid = res[0].id;//栏目id
          // console.log(this.$store.state.columnid)
          this.$router.push(a + this.$store.state.columnid);//二级栏目
        });
      } else {
        this.$router.push(a);
      }
      this.address = a;
    },
  },
  // created() {
  //   console.log(this.$route,666);
  //   this.address =this.$route.path;
  // },
 };
 </script>
 <style lang="less">
 .left-menu {
  // color: #000;
  height: 100%;
  ul {
    padding: 0px;
    margin: 0px;
  }
  li {
    list-style: none;
    width: 200px;
    line-height: 80px;
    background: #fff;
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 20px;
  }
  li:hover {
    background: rgb(150, 211, 235);
    color: #fff;
  }
  .active {
    background: rgb(150, 211, 235);
    color: #fff;
  }
 }
 </style>
--- a/src/components/Topbar.vue
+++ b/src/components/Topbar.vue
@ -0,0 +1,257 @@
 <template>
  <div class="home-top-bar">
    <div class="top">
      <p class="webmange">网站管理后台</p>
      <div class="change">
        <img src="../assets/images/university.jpg" class="avatar" />
        <span class="name">{{name}}</span>
        <el-dropdown @command="handleCommand">
          <i class="el-icon-arrow-down el-icon--right"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="password"
              ><i class="el-icon-edit-outline"></i>修改密码</el-dropdown-item
            >
            <el-dropdown-item command="loginout"
              ><i class="el-icon-switch-button"></i>退出系统</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="30%" >
      <span class="title_password">更改登录密码</span>
      <!-- 表单  -->
      <el-form
        :model="changeForm"
        :rules="rules"
        ref="changeForm"
        label-width="90px"
      >
        <el-form-item label=" 旧设密码" prop="oldPassword">
          <el-input
            type="password"
            v-model="changeForm.oldPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新设密码" prop="newPassword">
          <el-input
            show-password
            type="password"
            v-model="changeForm.newPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            show-password
            type="password"
            v-model="changeForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <div class="forget">忘记密码?</div>
        <div class="bottom">
          <el-button type="info" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="submitForm()">确 认</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
 </template>
 <script>
 import { adminChangepwd } from "@/apis/request.js";
 export default {
  data() {
    const accountAddComp = this;
    // 自定义的密码验证规则 // field,value,callback
    const validatePass = (rules, value, callback) => {
      if (value === "") {
        // 为空进去
        callback(new Error("密码不能为空！"));
      } else if (!/^[0-9|a-z|A-Z]+/.test(value)) {
        // 验证失败
        callback(new Error("密码必须为数组或字母！"));
      } else if (value != accountAddComp.changeForm.checkPass) {
        // 密码和确认密码验证
        callback(new Error("两次密码不一致！"));
      } else {
        callback();
      }
    };
    // 自定义的确认密码验证规则
    const validatePass2 = function(rules, value, callback) {
      if (value === "") {
        // 为空进去
        callback(new Error("确认密码不能为空！"));
      } else if (!/^[0-9|a-z|A-Z]+/.test(value)) {
        // 验证失败
        callback(new Error("确认密码必须为数组或字母！"));
      } else if (value != accountAddComp.changeForm.newPassword) {
        // 密码和确认密码验证
        callback(new Error("两次密码不一致！"));
      } else {
        callback();
      }
    };
    return {
      name:"",
      changeForm: {
        oldPassword: "", // 初始化表单数据
        newPassword: "",
        checkPass: "",
      },
      // 验证规则
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧设密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          //  validator: 自定义的验证函数
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      dialogVisible: false,
      formLabelWidth: "90px",
    };
  },
  methods: {
    handleCommand(command) {
      if (command === "password") {
        this.dialogVisible = true;
      } else if (command === "loginout") {
        this.$message({
          type: "success",
          message: "下次再来玩丫,我会想你的~~",
          duration: 1000,
          onClose: () => {
         localStorage.removeItem("flag");
            this.$router.replace("/login");
          },
        });
      }
    },
    submitForm() {
      let that = this;
      this.$refs.changeForm.validate((valid) => {
        if (valid) {
          adminChangepwd({
            oldPwd: that.changeForm.oldPassword,
            newPwd: that.changeForm.newPassword,
          }).then((res) => {
            if (res.message == "修改成功") {
              this.$message({
                type: "success",
                message: "修改密码成功",
                duration: 2000,
                onClose: () => {
                  that.$router.replace("/login");
                },
              });
            } else {
                this.$message({
                type: "error",
                message: "修改密码失败,请检查密码",
                duration: 2000,
              });
            }
          });
          console.log(sessionStorage.getItem("token"), 6);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.changeForm.resetFields();
    },
  },
  computed: {},
  created(){
     this.name=localStorage.getItem('username')
  }
 };
 </script>
 <style lang="less">
 .home-top-bar {
  width: 1300px;
  margin: 0 auto;
  height: 80px;
  line-height: 80px;
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #242424;
    margin-right: 16px;
  }
  .name {
    color: white;
  }
  p {
    font-size: 24px;
    color: #fff;
  }
  .el-icon-arrow-down {
    color: blanchedalmond;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body {
    padding-top: 16px;
  }
  .el-input__inner {
    width: 80%;
    font-family: sans-serif;
  }
  .forget {
    width: 94%;
    margin: 0 auto;
    text-align: right;
  }
  .forget:hover {
    color: skyblue;
    cursor: pointer;
  }
  .bottom {
    display: flex;
    justify-content: center;
  }
 }
 .home-top-bar > .top {
  height: 100%;
  display: flex;
  justify-content: space-between;
 }
 .home-top-bar > .top > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 .name,
 .el-dropdown {
  line-height: 60px;
 }
 .title_password {
  display: block;
  width: 94%;
  margin: 0 auto;
  color: rgb(20, 146, 196);
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid rgb(20, 146, 196);
  padding-bottom: 16px;
  margin-bottom: 16px;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,30 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 // 样式初始化
 import 'normalize.css'
 //element ui样式
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 //视频播放器
 import VideoPlayer from 'vue-video-player'
 import  'video.js/dist/video-js.css'
 import 'vue-video-player/src/custom-theme.css'
 import '@/assets/styles/common.less'
 // 富文本编辑器
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 //引入rem与px的适配文件
 import 'lib-flexible/flexible.js'
 Vue.use(VideoPlayer)
 Vue.use(ElementUI);
 Vue.config.productionTip = false
 new Vue({
  router,
  store,
  render: h => h(App)
 }).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,95 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Home from "../views/Home.vue";
 Vue.use(VueRouter);
 const routes = [
  {
    path: "/",
    //redirect:'/login',
    redirect: {
      name: "login",
    },
  },
  {
    path: "/login",
    name: "login",
    component: () =>
      import( "../views/Login.vue"),
  },
  {
    path: "/home",
    name: "home",
    component: Home,
    redirect: {
      name: "homemange",
    },
    meta: { ispass: true },
    children: [
      {
        // 账号添加
        path: "columnmange", // 相对地址,自定带上父级地址
        name: "columnmange",
        component: () =>
      import( "../views/column/Demo.vue"),
        meta: { ispass: true },
      },
      {
        path: "homemange", // 相对地址,自定带上父级地址
        name: "homemange",
        component: () =>
          import(
            "../views/home/Homemange.vue"
          ),
        meta: { ispass: true },
      },
      {
        path: "contentmange/:id", // 相对地址,自定带上父级地址
        name: "contentmange",
        component: () =>
          import(
             "../views/content/Contentmange.vue"
          ),
        meta: { ispass: true },
      },
      {
        path: "addtitle", // 相对地址,自定带上父级地址
        name: "addtitle",
        component: () =>
          import("../views/title/Addtitle.vue"),
        meta: { ispass: true },
      },
      {
        path: "editphoto", // 相对地址,自定带上父级地址
        name: "editphoto",
        component: () =>
          import(
            "../views/title/Editphoto.vue"
          ),
        meta: { ispass: true },
      },
    ],
  },
  {
    path: "*",
    redirect: "/",
  },
 ];
 const router = new VueRouter({
  routes,
 });
 router.beforeEach((to, from, next) => {
  if (to.meta.ispass === true) {
    const token = sessionStorage.getItem("token");
    if (token) {
      next();
    } else {
      next("/");
    }
  } else {
    next();
  }
 });
 export default router;
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,21 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 export default new Vuex.Store({
  state: {
    article:[],
    editid:{ bgImgUrl:"",title: "", createTime: "", description: "", textContent: null },//栏目所要编辑的行id
    columnid:0,
    total:0,
    flag:1
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
 })
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,63 @@
 <template>
  <div id="ply">
 <el-container>
  <el-header height="80px"><Topbar/></el-header>
  <el-container id="box">
    <LeftMenu  v-if="!fun"/>
    <el-main>
    <router-view/>
    </el-main>
  </el-container>
 </el-container>
  </div>
 </template>
 <script>
 // @ is an alias to /src
 import LeftMenu from '@/components/LeftMenu.vue'
 import Topbar from '@/components/Topbar.vue'
 export default {
  name: 'Home',
  data(){
    return{
       title:["/home/addtitle","/home/editphoto"]
    }
  },
  components: {
    // HelloWorld
    LeftMenu,
    Topbar
  },
  computed:{
      fun(){
         return this.title.includes(this.$route.path)
      }
  }
 }
 </script>
 <style lang="less" scoped>
 #ply{
  background: #f8f8f8;
 }
 #ply,.el-container,.el-header{
  padding:0 ;
 }
 .el-container .el-main{
  margin-left: 20px;
  padding: 50px;
  overflow: visible;
 background: #fff;
 }
 .el-header{
  background: #333;
 }
 #box{
  width: 1300px;
  margin:  0 auto;
  margin-top: 20px;
 }
 </style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -0,0 +1,253 @@
 <template>
  <div class="ply" @keyup.enter="submitForm">
    <div class="topbar">
      <div class="container ">
        <span>网站管理后台</span><span class="regist" @click="go()">返回</span>
      </div>
    </div>
    <div class="form container">
      <div class="welcome">
        <p>欢&nbsp;迎&nbsp;来&nbsp;到</p>
        <p>网&nbsp;站&nbsp;后&nbsp;台</p>
        <p>管&nbsp;理&nbsp;系&nbsp;统&nbsp;平&nbsp;台</p>
      </div>
      <div id="box">
        <div class="title">
          <p>欢迎登录</p>
        </div>
        <!-- element ui表单数据 -->
        <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginFormId"
          label-width="70px"
          class="demo-ruleForm"
        >
          <p class="user">用户名</p>
          <el-form-item prop="username">
            <el-input
              clearable
              type="text"
              v-model="loginForm.username"
              placeholder="用户名"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <p class="password">密码</p>
          <!-- 表单验证，其prop是必备属性，且必须写再el-form-item中 -->
          <!-- 显示密码 show-password -->
          <el-form-item prop="password">
            <el-input
              placeholder="密码"
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item class="bottom">
            <!-- 勾选框 -->
            <el-checkbox v-model="loginForm.checked">下次自动登录</el-checkbox>
            <a class="right">忘记密码?</a>
          </el-form-item>
          <el-form-item>
            <input
              type="button"
              name=""
              id="btn"
              value="登录"
              @click="submitForm()"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
 </template>
 <script>
 import { login } from "@/apis/request.js";//登录接口
 export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        checked: true,
      },
      rules: {//数据检索
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //返回即回到前端地址
    go(){
      this.$router.push("")
    },
    submitForm() {//登录
      var that = this;
      if (that.loginForm.checked == true) {//当选择记住密码时，获取用户名和密码，并存储至本地
        localStorage.setItem("username", that.loginForm.username);
        localStorage.setItem("pwd", that.loginForm.password);
        localStorage.setItem("flag", true);//有用户名和密码，则设置flag为true
      }
      if (that.loginForm.checked == false) {//如果为未选中记住密码，则移除本地用户名和密码与flag
        localStorage.removeItem("username");
        localStorage.removeItem("pwd");
        localStorage.removeItem("flag");
      }
      this.$refs.loginFormId.validate((valid) => {//
        if (valid) {//数据校验，如果有数据，则处理login接口，如果没有数据，则弹出消息，输入用户名或者密码
          login({
            adminName: that.loginForm.username,
            adminPwd: that.loginForm.password,
          }).then((res) => {
            if (res.token) {//如果验证通过，则弹出消息，并跳转，如果错误，则弹出消息错误
              sessionStorage.setItem("token", res.token);
              this.$message({//弹出消息提示
                showClose: true,//显示关闭按钮
                message: "登陆成功",//消息文字
                type: "success",//主题
                duration: 1000,//弹出1秒
                onClose: () => {
                  this.$router.replace("/home/homemange");//编程式跳转，关闭当前页面并跳转至下一个页面
                },
              });
            } else {
              this.$message({
                showClose: true,
                message: "用户名或者密码输入错误",
                type: "error",
              });
            }
          });
        } else {
          this.$message({
            showClose: true,
            message: "请输入用户名或者密码",
            type: "error",
          });
        }
      });
    },
  },
  created(){
   if(localStorage.getItem('username')){//如果本地缓存有数据，则获取用户名和密码
     this.loginForm.username=localStorage.getItem('username')
   }
   if(localStorage.getItem('pwd')){
     this.loginForm.password=localStorage.getItem('pwd')
   }
  },
  mounted() {
    if(localStorage.getItem('flag')){//如果本地存储flag为true，则自动登录
      this.submitForm()
    }
    sessionStorage.removeItem("token");
  },
 };
 </script>
 <style lang="less" scoped>//scoped表示此样式只作用域本组件
 .ply {
  height: 100%;
  opacity: 1;
  background: url('../assets/images/login.jpg');
  // font-family: "Source Han Serif CN";
  .container {
    width: 1200px;
    margin: 0 auto;
  }
  .topbar {
    font-size: 24px;
    height: 60px;
    background: #333;
    color: #fff;
    line-height: 60px;
    div {
      display: flex;
      justify-content: space-between;
      .regist {
        font-size: 16px;
      }
    }
  }
  #box {
    padding-right: 50px;
    padding-top: 70px;
    padding-bottom: 28px;
    width: 490px;
    background: white;
    font-family: "Source Han Serif CN";
    margin: 0;
    p {
      font-size: 24px;
      text-indent: 70px;
    }
    .title {
      margin-bottom: 50px;
    }
    .password,
    .user {
      margin-top: 30px;
      font-size: 14px;
      font-family: "Source Han Serif CN";
      margin-bottom: 10px;
    }
    .el-form {
      width: 490px;
    }
    .el-input {
      font-family: sans-serif;
    }
  }
  .form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    .welcome {
      color: #fff;
      p{
        font-size: 54px;
        margin-bottom: 8px;
      }
      // .introduce {
      //   font-size: 16px;
      //   margin-top: 20px;
      // }
    }
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  .bottom .right {
    float: right;
    cursor: pointer;
  }
  #btn {
    width: 420px;
    border: 0;
    height: 46px;
    background: #333;
    color: #fff;
    margin-top: 60px;
    border-radius: 10px;
    outline: none;
  }
  #btn:hover {
    background: rgb(109, 103, 103);
    cursor: pointer;
  }
 }
 </style>
--- a/src/views/column/Demo.vue
+++ b/src/views/column/Demo.vue
@ -0,0 +1,865 @@
 <template>
  <div class="column">
    <div class="top">
      <span class="title">
        <img src="../../assets/images/leftbar_icon_index_blue.png" alt="" />栏目管理</span>
      <div>
        <!-- <span @click="returndata()">添加栏目</span> -->
        <el-button size="mini" @click="handleAdd()">添加栏目</el-button>
      </div>
    </div>
    <div class="addcolumn">
      <p>栏目列表</p>
    </div>
    <div class="mange">
      <div class="titlehead">
        <span class="lanmu">栏目</span>
        <span class="show">显示</span>
        <span class="action">操作</span>
      </div>
      <!-- element ui树形控件 -->
     <!-- data:展示数据
     node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
     default-expand-all：是否默认展开所有节点
     expand-on-click-node：是否在点击节点的时候展开或者收缩节点
     draggable：是否开启节点拖拽功能
     allow-drag：判断节点能否被拓展 -->
      <el-tree
        :data="tableData"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        draggable
        :allow-drag="allowDrag"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="name">
            <img
              v-if="data.columnName == '首页'"
              src="../../assets/images/leftbar_icon_home_blue.png"
              alt=""
            />
            <img
              v-if="data.level == 1 && data.columnName != '首页'"
              src="../../assets/images/icon_list.png"
              alt=""
            />
            <img
              class="pho"
              v-if="data.level != 1 && data.children.length == 0"
              src="../../assets/images/icon_submenu_white.png"
              alt=""
            />
            {{ node.label }}</span
          >
          <span class="fixed">
            <img
              v-if="data.isShow == 0"
              src="../../assets/images/btn_visule_n.png"
              alt=""
              width="20px"
              @click="handlehidden(data)"
            />
            <img
              v-if="data.isShow == 1"
              src="../../assets/images/btn_notvisule_n.png"
              alt=""
              width="20px"
              @click="handlehidden(data)"
            />
          </span>
          <span class="handle">
            <!-- 修改栏目 -->
            <i class="el-icon-edit-outline" @click="handleEdit(data)"></i>
            <!-- 新增栏目 -->
            <i class="el-icon-plus" @click="handleAdd(data)"></i>
            <!-- 删除栏目 -->
            <i class="el-icon-delete" @click="handleDelete(data)"></i>
          </span>
        </span>
      </el-tree>
    </div>
    <!-- 对话框 -->
    <el-dialog
      title="添加栏目"
      :visible.sync="dialogaddFormVisible"
      width="50%"
    >
      <el-form :model="addform" :rules="rules" ref="addform">
        <el-form-item
          label="栏目名称"
          :label-width="formLabelWidth"
          prop="columnName"
        >
          <el-input v-model="addform.columnName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="栏目英文" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="addform.english"></el-input>
        </el-form-item>
        <el-form-item
          label="栏目banner"
          :label-width="formLabelWidth"
          prop="bgImgUrl"
        >
          <el-upload
            class="avatar-uploader"
            :action="joggle"
            :show-file-list="false"
            :on-success="handleAvatarSuccessadd"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="addform.bgImgUrl"
              :src="addform.bgImgUrl"
              class="avatar"
              width="200px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="展示类型" :label-width="formLabelWidth">
          <el-radio-group v-model="addform.showType">
            <el-radio :label="0">
              <img src="../../assets/images/btn_pic_1.png" alt="" />
              <span class="showtitle">图片列表</span>
            </el-radio>
            <el-radio :label="1">
              <img src="../../assets/images/btn_pic_2.png" alt="" />
              <span class="showtitle">新闻列表</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="详情样式" :label-width="formLabelWidth">
          <el-radio-group v-model="addform.styleType">
            <el-radio :label="0">
              <img src="../../assets/images/12.png" alt="" />
              <span class="showtitle">视频详情</span>
            </el-radio>
            <el-radio :label="1">
              <img src="../../assets/images/btn_pic_4.png" alt="" />
              <span class="showtitle">富文本</span>
            </el-radio>
            <el-radio :label="2">
              <img src="../../assets/images/icon_link.png" alt="" />
              <span class="showtitle">链接</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="设置上级"
          :label-width="formLabelWidth"
          prop="parentId"
        >
        <!-- cascader级联选择器 -->
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="addform.parentId"
            @change="handleChange"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="打开方式" :label-width="formLabelWidth">
          <el-radio-group v-model="addform.openMethod">
            <el-radio :label="0">当前窗口</el-radio>
            <el-radio :label="1">新窗口</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaddFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addForm()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改栏目"
      :visible.sync="dialogeditFormVisible"
      width="50%"
    >
    <!-- lable：指定节点标签为节点对象的某个属性 -->
      <el-form :model="editform">
        <el-form-item
          label="栏目名称"
          :label-width="formLabelWidth"
          v-if="this.editid != 66"
        >
          <el-input v-model="editform.columnName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="栏目英文" :label-width="formLabelWidth">
          <el-input v-model="editform.english" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="栏目banner" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="joggle"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="editform.bgImgUrl"
              :src="editform.bgImgUrl"
              class="avatar"
              width="200px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="展示类型" :label-width="formLabelWidth">
          <el-radio-group v-model="editform.showType">
            <el-radio :label="0">
              <img src="../../assets/images/btn_pic_1.png" alt="" />
              <span class="showtitle">图片列表</span>
            </el-radio>
            <el-radio :label="1">
              <img src="../../assets/images/btn_pic_2.png" alt="" />
              <span class="showtitle">新闻列表</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="详情样式" :label-width="formLabelWidth">
          <el-radio-group v-model="editform.styleType">
            <el-radio :label="0">
              <img src="../../assets/images/12.png" alt="" />
              <span class="showtitle">视频详情</span>
            </el-radio>
            <el-radio :label="1">
              <img src="../../assets/images/btn_pic_4.png" alt="" />
              <span class="showtitle">富文本</span>
            </el-radio>
            <el-radio :label="2">
              <img src="../../assets/images/icon_link.png" alt="" />
              <span class="showtitle">链接</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设置上级" :label-width="formLabelWidth">
          <el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="options"
            v-model="editform.parentId"
            @change="handleChange"
            :clearable="true"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="打开方式" :label-width="formLabelWidth">
          <el-radio-group v-model="editform.openMethod">
            <el-radio :label="0">当前窗口</el-radio>
            <el-radio :label="1">新窗口</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogeditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
 </template>
 <script>
 import { allColumn } from "@/apis/request.js";
 import { editColumn } from "@/apis/request.js";
 import { addColumn } from "@/apis/request.js";
 import { deleteColumn } from "@/apis/request.js";
 import { returnColumn } from "@/apis/request.js";
 import { joggle } from "@/apis/request.js";
 import { sortColumn } from "@/apis/request.js";
 export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
              children: [
                {
                  id: 11,
                  label: "三级 3-2-1",
                },
                {
                  id: 12,
                  label: "三级 3-2-2",
                },
                {
                  id: 13,
                  label: "三级 3-2-3",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "columnName",
      },
      joggle,
      editid: 1,
      deleteid: 1,
      options: [],
      selectedOptions: [],
      defaultParams: {
        label: "columnName",
        value: "id",
        children: "children",
      },
      tableData: [
        {
          id: 1,
          date: "首页管理",
          name: "",
          hidden: "no",
        },
        {
          id: 3,
          date: " 项目介绍",
          hidden: "no",
          children: [
            {
              id: 31,
              date: "项目1",
              hidden: "no",
            },
            {
              id: 32,
              date: "项目1-1",
              hidden: "no",
            },
          ],
        },
        {
          id: 2,
          date: "产品",
          hidden: "no",
          children: [
            {
              id: 21,
              date: "介绍",
              hidden: "no",
              children: [
                {
                  id: 211,
                  date: "项目1",
                  hidden: "no",
                },
                {
                  id: 212,
                  date: "项目1-1",
                  hidden: "no",
                },
              ],
            },
            {
              id: 22,
              date: "咨询",
              hidden: "no",
            },
          ],
        },
      ],
      value: [],
      addform: {
        columnName: "",
        english: null,
        bgImgUrl: null,
        showType: 0,
        styleType: 0,
        openMethod: 0,
        parentId: [],
      },
      editform: {
        columnName: "",
        english: "",
        bgImgUrl: null,
        showType: 0,
        styleType: 0,
        openMethod: 0,
        parentId: [0],
      },
      //编辑与新增框是否可见
      dialogaddFormVisible: false,
      dialogeditFormVisible: false,
      formLabelWidth: "110px",
      rules: {
        columnName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        bgImgUrl: [
          { required: true, message: "请选择banner", trigger: "blur" },
        ],
        parentId: [{ required: true, message: "请选择上级", trigger: "blur" }],
      },
    };
  },
  methods: {
    allowDrag(res) {
      console.log(res);
      if (res.data.columnName == "首页") {
        return false;
      } else {
        return true;
      }
    },
    handleAvatarSuccess(res) {
      this.editform.bgImgUrl = res.data.fileUrl;
      console.log(this.editform.bgImgUrl);
    },
    handleAvatarSuccessadd(res) {
      // this.addform.bgImgUrl = res.imgUrl;
      this.addform.bgImgUrl = res.data.fileUrl;
      console.log(res);
    },
    handleChange(value) {
      console.log(value, 0);
    },
    //通过isshow控制栏目的显示与隐藏
    handlehidden(row) {
      if (row.isShow == 0) {
        editColumn({
          id: row.id,
          isShow: 1,
        }).then((res) => {
          console.log(res, 666);
          allColumn().then((res) => {
            console.log(res);
            this.tableData = res;
          });
        });
      } else {
        editColumn({
          id: row.id,
          isShow: 0,
        }).then((res) => {
          console.log(res);
          allColumn().then((res) => {
            console.log(res);
            this.tableData = res;
          });
        });
      }
    },
    handleEdit(row) {
      this.dialogeditFormVisible = true;
      this.editid = row.id;
      console.log(row, 0);
      returnColumn(row.id).then((res) => {
        var a = [];
        a.push(res[0].parentId);
        this.editform.columnName = res[0].columnName;
        this.editform.english = res[0].english;
        this.editform.bgImgUrl = res[0].bgImgUrl;
        this.editform.showType = res[0].showType;
        this.editform.styleType = res[0].styleType;
        this.editform.parentId = a;
        this.editform.openMethod = res[0].openMethod;
        console.log(res, 6);
      });
      console.log(row);
    },
    handleAdd(row) {
      console.log(row, 66);
      this.dialogaddFormVisible = true;
      if (row) {
        this.addform = {
          columnName: null,
          english: null,
          bgImgUrl: null,
          showType: 0,
          styleType: 0,
          openMethod: 0,
          parentId: row.id,
        };
      } else {
        this.addform = {
          columnName: null,
          english: null,
          bgImgUrl: null,
          showType: 0,
          styleType: 0,
          openMethod: 0,
          parentId: [],
        };
      }
    },
    handleDelete(row) {
      console.log(row);
      if (row.columnName == "首页") {
        this.$message({
          message: "警告!首页不可删掉",
          type: "warning",
          duration: 1000,
        });
        return false;
      }
      this.deleteid = row.id;
      this.open();
    },
    addForm() {
      this.$refs["addform"].validate((valid) => {
        if (valid) {
          this.addform.id = this.editid;
          if (typeof this.addform.parentId == "object") {
            var index = this.addform.parentId.length - 1;
            this.addform.parentId = this.addform.parentId[index];
          }
          addColumn(this.addform).then((res) => {
            if (res == 0) {
              this.$message.error("请完善栏目必填信息");
            } else {
              this.common();
              this.dialogaddFormVisible = false;
            }
            console.log(res);
          });
          console.log(this.addform, 666);
        } else {
          return false;
        }
      });
    },
    editForm() {
      this.editform.id = this.editid;
      if (this.editform.parentId.length == 0) {
        this.editform.parentId = 0;
      } else {
        var index = this.editform.parentId.length - 1;
        this.editform.parentId = this.editform.parentId[index];
      }
      editColumn(this.editform).then((res) => {
        console.log(res);
        this.common();
      });
      this.dialogeditFormVisible = false;
      // console.log(this.editform,'ply');
    },
    open() {
      this.$confirm("此操作将永久删除该栏目, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteColumn(this.deleteid).then((res) => {
            console.log(res);
            this.common();
          });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    returndata() {
      this.dialogFormVisible = true;
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            id: 32,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
        ]);
      }, 1000);
    },
    append(data) {
      console.log(data, "ply");
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    common() {
      allColumn().then((res) => {
        console.log(res, "呸");
        //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
        //JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
        this.tableData = JSON.parse(JSON.stringify(res));
        this.options = this.getTreeData(JSON.parse(JSON.stringify(res)));
        this.options.push({
          id: 0,
          columnName: "无",
          children: [],
        });
        console.log(this.options, 1);
      });
    },
    handleDragEnd(draggingNode, dropNode, dropType) {
      console.log("tree drag end: ", dropNode && dropNode.label, dropType, 6);
    },
    TreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length >= 1) {
          // children若为空数组，则将children设为undefined
          for (var j = 0; j < data[i].children.length; j++) {
            data[i].children[j].parentId = data[i].id;
            if (data[i].children[j].children.length >= 1) {
              this.TreeData(data[i].children[j].children);
            }
          }
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          data[i].children = [];
        }
      }
      return data;
    },
    handleDrop(draggingNode, dropNode, dropType) {
      if (dropType == "after") {
        draggingNode.data.level = dropNode.data.level;
      }
      if (dropType == "before") {
        draggingNode.data.level = dropNode.data.level;
      }
      if (dropType == "inner") {
        draggingNode.data.level = dropNode.data.level + 1;
      }
      console.log("tree drop: ", draggingNode, dropNode, dropType);
      sortColumn(this.tableData).then();
    },
  },
  mounted() {
    this.common();
    // this.rowDrop()
    // this.columnDrop()
  },
 };
 </script>
 <style lang="less">
 .column {
  height: 100%;
  .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 30px;
    .el-button {
      margin-top: 16px;
    }
  }
  .title {
    margin-top: 18px;
    font-size: 20px;
    img {
      margin-right: 10px;
    }
  }
  .addcolumn {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    color: #000;
  }
  i {
    font-size: 20px;
    margin-right: 10px;
  }
  .el-table {
    font-size: 16px;
    color: #333;
  }
  .el-input__inner {
    width: 350px;
  }
  .el-dialog__header {
    text-align: center;
  }
  .el-dialog__header .el-dialog__title {
    border-bottom: 1px solid skyblue;
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 0px 0px 10px 0px;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
  .el-table .has-gutter th div {
    font-size: 18px;
    color: #fff;
    background: #68b6c9;
    height: 40px;
  }
  .el-table td {
    // font-size: 16px;
    color: #333;
  }
  .el-table th > .cell {
    line-height: 40px;
    vertical-align: top;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding-right: 8px;
  }
  .name {
    //   flex-basis: 200px;
    flex: 1;
  }
  .el-tree-node__content {
    position: relative;
    height: 36px;
  }
  .fixed {
    position: absolute;
    left: 546px;
  }
  .titlehead {
    color: white;
    font-size: 18px;
    position: relative;
    width: 100%;
    height: 50px;
    background: skyblue;
    line-height: 50px;
    span {
      position: absolute;
    }
    .lanmu {
      left: 18px;
    }
    .show {
      left: 540px;
    }
    .action {
      left: 860px;
    }
  }
  .handle {
    width: 173px;
    display: flex;
    justify-content: space-between;
  }
  .pho {
    margin-left: -13px;
  }
  .showtitle {
    margin-left: 10px;
  }
 }
 </style>
--- a/src/views/content/Contentmange.vue
+++ b/src/views/content/Contentmange.vue
@ -0,0 +1,454 @@
 <template>
  <div class="content">
    <div class="top">
      <span class="title">
          <img  src="../../assets/images/leftbar_icon_messages_blue.png" alt="">
        内容管理</span>
        <!-- 顶部按钮 -->
      <div>
        <el-button size="mini" @click="keepOrder()">保存排序</el-button>
        <el-button size="mini" @click="addtitle()">新增文章</el-button>
        <el-button size="mini" @click="toggleSelection()">批量删除</el-button>
      </div>
    </div>
    <!-- 二级栏目主体内容 -->
    <el-container>
      <el-aside width="210px">
        <!-- 二级栏目左侧导航栏 -->
        <el-menu
          :default-active="this.$route.params.id"
          unique-opened
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <Child :dataList="listData"></Child>
        </el-menu>
      </el-aside>
      <el-main>
        <el-table
          ref="multipleTable"
          :data="tablelist"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          align="center"
        >
        <!-- 二级内容表格列 -->
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="编号" width="60" align="center">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column label="标题" width="120" align="center">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column label="排序值" width="100" align="center">
            <template slot-scope="scope">
              <el-input-number
                step-strictly
                v-model="scope.row.sort"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="日期" width="120" align="center">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <el-table-column label="状态" width="120" align="center">
            <template slot-scope="scope"
              ><el-switch
                :active-value="0"
                :inactive-value="1"
                v-model="scope.row.isShow"
                @change="text(scope.row)"
              >
              </el-switch
            ></template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="
                  open();
                  handleDelete(scope.$index, scope.row);
                "
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 表单页 -->
        <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="6"
      background
      layout="prev, pager, next"
      :total="this.$store.state.total"
    >
        </el-pagination>
      </el-main>
    </el-container>
  </div>
 </template>
 <script>
 import Child from "@/components/Childmenu.vue";
 import { allColumn } from "@/apis/request.js";
 import { deleteArticle } from "@/apis/request.js";
 import { editArticle } from "@/apis/request.js";
 import { getColumnarticle } from "@/apis/request.js";
 import { returnColumn } from "@/apis/request.js";
 import moment from "moment";
 //  import { keepOreder } from "@/apis/request.js";
 export default {
  data() {
    return {
      currentPage: 1,//页码
      total: 12,
      deleteid: [],
      id: 0,
      styleType: 0,
      value1: 0,
      listData: [
        {
          name: "钠管设备",
          id: "1",
          level: 1,
          child: [
            {
              name: "系统默认组",
              id: "2",
              flag: true,
            },
            {
              name: "设备一组",
              id: "3",
              child: [
                {
                  name: "一组A小组",
                  id: "4",
                  child: [
                    {
                      name: "一组A小组的成员1",
                      id: "5",
                    },
                    {
                      name: "一组A小组的成员2",
                      id: "6",
                      child: [
                        {
                          name: "一组A小组的成员何总",
                          id: "7",
                        },
                        {
                          name: "一组A小组的成员曾",
                          id: "8",
                        },
                        {
                          name: "一组A小组的成员飘总",
                          id: "9",
                        },
                      ],
                    },
                  ],
                },
                {
                  name: "一组B小组",
                  id: "10",
                },
              ],
            },
            {
              name: "设备二组",
              id: "11",
            },
          ],
        },
      ],
      multipleSelection: [],
    };
  },
  components: {
    Child,
    // Ue
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.querystock();
    },
    querystock() {
        getColumnarticle(this.$store.state.columnid,this.currentPage).then((res) => {
        this.$store.state.article = res.list;
        this.total=res.total;
      });
    },
    toggleSelection() {
      this.open();
    },
    text(row) {//获取整行数据，并更改样式，传给后台进行存储
      this.$store.state.editid = row;
      var form = { ...this.$store.state.editid };
      var date = moment(form.createTime).format("YYYY-MM-DD");
      form.createTime = date;
      var arr = [];
      arr.push(form);
      editArticle(arr).then((res) => {
        console.log(res);
      });
    },
    handleSelectionChange(val) {//选择栏目id，并放入数组中进行存储
      this.deleteid = val.map((res) => {
        return res.id;
      });
      console.log(this.deleteid);
    },
    handleEdit(index, row) {//编辑栏目
      this.$store.state.editid = row;
      localStorage.setItem('row', JSON.stringify(row) )
      console.log( this.$store.state.editid,0);
      this.$router.push("/home/editphoto");
    },
    handleDelete(index, row) {//删除栏目
      console.log(index, row);
      this.deleteid = row.id;
    },
    addtitle() {//新增文章
      this.$router.push("/home/addtitle");
    },
    open() {//删除文章，弹出确认框
      // const a=this;
      this.$confirm("此操作将永久删除该栏目内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
          deleteArticle(this.deleteid).then((res) => {//确认删除
            if (res == 1) {
              //个人建议，别直接更改state，异步处理用dispatch方法，再action内用delete方法进行删除，这样就可以使用devtool进行实时检测了
              getColumnarticle(this.$store.state.columnid,this.currentPage).then((res) => {//删除成功，更新state值
                this.$store.state.article = res.list;
                this.$store.state.total = res.total;
                console.log( this.$store.state.article,'ply')
              });
            }
          });
        })
        .catch(() => {//取消删除
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 1000,
          });
        });
    },
    keepOrder() {//保持排序
      editArticle(this.tablelist).then((res) => {//参数为所有栏目信息，成功返回值为排序成功
       if(res.message=="修改成功"){
            getColumnarticle(this.$route.params.id,this.currentPage).then((res) => {//基于排序值排序后的所有值,更改栏目内容信息
            this.$store.state.article = res.list;
             this.$store.state.total = res.total;
            //  console.log( res,66)
      });
              this.$message({
                showClose: true,
                message: "修改排序成功",
                type: "success",
                duration: 1000,
              });
       }
       else{
            this.$message({
                showClose: true,
                message: "修改排序失败",
                type: "error",
                duration: 1000,
              });
       }
      });
    },
    handleOpen(key,keyPath) {//打开二级栏目
    console.log(keyPath,66)
      this.$store.state.columnid = key;
      localStorage.setItem('columnid',key)
      console.log(this.$store.state.columnid);
            this.$router.push({
        path:'/home/contentmange/' + key,
      });
      returnColumn(key).then((res) => {
        this.$store.state.styleType = res[0].styleType;
         localStorage.setItem("style",res[0].styleType);
      });
      getColumnarticle(key,1).then((res) => {//获得二级栏目信息
        // console.log(res, 1);
        this.$store.state.article = res.list;
         this.$store.state.total=res.total;
            console.log( res,66)
      });
    },
    handleClose(key, keyPath) {//关闭二级栏目
      console.log(key, keyPath);
      this.$store.state.columnid = key;
       localStorage.setItem('columnid',key)
            this.$router.push({
        path:
         '/home/contentmange/' + key,
      });
      returnColumn(key).then((res) => {
        this.$store.state.style = res[0].styleType;
           localStorage.setItem(
                    "styleType",
                    res[0].styleType
                  );
      });
      getColumnarticle(key,1).then((res) => {
        this.$store.state.article = res.list;
         this.$store.state.total=res.total;
         console.log( res,66)
      });
    },
  },
  computed: {//定义的时候是方法，用起来像属性
    tablelist() {
      if (this.$store.state.article.length != 0) {
        return this.$store.state.article;
      } else {
        return "";
      }
    },
  },
  created() {//钩子函数，页面创建后
    this.$store.state.columnid = this.$route.params.id;
    localStorage.setItem('columnid',this.$route.params.id)//存储栏目id，统一本地存储和state
    returnColumn(this.$route.params.id).then((res) => {
        this.$store.state.styleType = res[0].styleType;
            localStorage.setItem(
                    "style",
                    res[0].styleType
                  );
      });
    allColumn().then((res) => {//获取所有二级栏目信息
      this.listData = res;
      getColumnarticle(this.$route.params.id,1).then((res) => {
        console.log("res",res)
        this.$store.state.article = res.list;//栏目内容信息
         this.$store.state.total=res.total; //栏目总数      
      });
    });
  },
 };
 </script>
 <style lang="less">
 .content {
  height: 100%;
  .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding-bottom: 30px;
    .el-button {
      margin-top: 16px;
    }
  }
  .title {
    margin-top: 18px;
    font-size: 20px;
    img{
      margin-right: 10px;
    }
  }
  .el-icon-tickets {
    font-size: 20px;
    margin-right: 10px;
  }
  .el-container {
    height: 90%;
    margin-top: 20px;
    // width: 800px;
    .el-main {
      margin-left: 0px;
      padding: 0px;
    }
    .el-aside {
      border-right: 1px solid #e6e6e6;
      .el-menu {
        border-right: 0px;
        .el-menu-item {
          font-size: 16px;
        }
        .el-submenu {
          .el-submenu__title {
            span {
              font-size: 16px;
            }
          }
        }
      }
    }
    .el-table td,
    .el-table .has-gutter th div {
      text-align: center;
    }
    .el-table .has-gutter th div {
      font-size: 18px;
      color: #fff;
      background: #68b6c9;
      height: 40px;
      line-height: 40px;
      font-weight: normal;
    }
  }
  .el-menu-item * {
    vertical-align: inherit;
  }
  .el-submenu__title * {
    vertical-align: inherit;
  }
  .el-table th > .cell {
    line-height: 40px;
    vertical-align: top;
  }
  .el-input {
    width: 100px;
  }
  .el-input-number {
    width: 100px;
  }
  .el-pagination{
    width: 180px;
   margin-left: 520px;
   margin-top: 20px;
  }
  .el-menu-vertical-demo .el-submenu.is-opened>.el-submenu__title {
  color:#409EFF;
 }
 .el-menu-vertical-demo .el-submenu .el-submenu__title{
  color: #303133;
 }
 }
 </style>
--- a/src/views/home/Homemange.vue
+++ b/src/views/home/Homemange.vue
--- a/src/views/title/Addtitle.vue
+++ b/src/views/title/Addtitle.vue
@ -0,0 +1,763 @@
 <template>
  <div>
    <div class="photocontent" v-if="show == 1">
      <div class="top">
        <span class="title"><i class="el-icon-tickets"></i>新增文章</span>
        <div>
          <span @click="back()">&lt;&emsp;返回</span>
        </div>
      </div>
      <div class="contentbottom">
        <el-form :model="photoForm" :rules="rules" ref="photoForm">
          <el-form-item
            label="封面图"
            :label-width="formLabelWidth"
            prop="bgImgUrl"
          >
            <el-upload
              class="avatar-uploader"
              :action="joggle"
              :show-file-list="false"
              :on-success="handlePhotoSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="photoForm.bgImgUrl"
                :src="photoForm.bgImgUrl"
                class="avatar"
                width="200px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- <img id="preview" :src="imageUrl" width="250px" height="60px"/>
          <a href="javascript:;" class="file gradient">
          <input id="pop_file" type="file" accept=".jpg,.jpeg,.png" v-on:change="uploadFile($event)" name="fileTrans" ref="file" value="" />选择文件</a> -->
          </el-form-item>
          <el-form-item
            label="文章标题"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input v-model="photoForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-col>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="photoForm.createTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item
            label="来源"
            :label-width="formLabelWidth"
            prop="description"
          >
            <el-input
              v-model="photoForm.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- <quill-editor v-model="form.content" ref="myQuillEditor" style="height: 300px;" :options="editorOption">
      </quill-editor> -->
          <!-- <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>  -->
          <el-form-item
            label="文章内容"
            :label-width="formLabelWidth"
            prop="textContent"
          >
            <quill-editor
              ref="text"
              v-model="photoForm.textContent"
              class="myQuillEditor"
              :options="editorOption"
            />
          </el-form-item>
          <div class="footer">
            <el-button type="primary" @click="photoAdd('photoForm')"
              >确认</el-button
            >
            <el-button type="info" @click="cancel()">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="photocontent" v-else-if="show== 0">
      <div class="top">
        <span class="title"><i class="el-icon-tickets"></i>新增文章</span>
        <div>
          <span @click="back()">&lt;&emsp;返回</span>
        </div>
      </div>
      <div class="contentbottom">
        <el-form :model="videoForm" :rules="rules" ref="videoForm">
          <el-form-item
            label="封面图"
            :label-width="formLabelWidth"
            prop="bgImgUrl"
          >
            <el-upload
              class="avatar-uploader"
              :action="joggle"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="videoForm.bgImgUrl"
                :src="videoForm.bgImgUrl"
                class="avatar"
                width="200px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="文章标题"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input v-model="videoForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-col>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="videoForm.createTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item
            label="来源"
            :label-width="formLabelWidth"
            prop="description"
          >
            <el-input
              v-model="videoForm.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="视频"
            :label-width="formLabelWidth"
            prop="videoUrl"
          >
            <el-upload
              class="avatar-uploader"
              :action="joggle"
              v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
              v-bind:on-progress="uploadVideoProcess"
              v-bind:on-success="handleVideoSuccess"
              v-bind:before-upload="beforeUploadVideo"
              v-bind:show-file-list="false"
            >
              <video
                v-if="videoForm.videoUrl != '' && !videoFlag"
                v-bind:src="videoForm.videoUrl"
                class="avatar video-avatar"
                controls="controls"
              >
                您的浏览器不支持视频播放
              </video>
              <i
                v-else-if="videoForm.videoUrl == '' && !videoFlag"
                class="el-icon-plus avatar-uploader-icon"
              ></i>
              <el-progress
                v-if="videoFlag == true"
                type="circle"
                v-bind:percentage="videoUploadPercent"
                style="margin-top:7px;"
              ></el-progress>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="文章内容"
            :label-width="formLabelWidth"
            prop="textContent"
          >
            <quill-editor
              ref="text"
              v-model="videoForm.textContent"
              class="myQuillEditor"
              :options="editorOption"
            />
          </el-form-item>
          <div class="footer">
            <el-button type="primary" @click="videoAdd('videoForm')"
              >确认</el-button
            >
            <el-button type="info" @click="cancel()">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="photocontent" v-if="show== 2">
      <div class="top">
        <span class="title"><i class="el-icon-tickets"></i>新增文章</span>
        <div>
          <span @click="back()">&lt;&emsp;返回</span>
        </div>
      </div>
      <div class="contentbottom">
        <el-form :model="linkForm" :rules="rules" ref="linkForm">
          <el-form-item
            label="封面图"
            :label-width="formLabelWidth"
            prop="bgImgUrl"
          >
            <el-upload
              class="avatar-uploader"
              :action="joggle"
              :show-file-list="false"
              :on-success="handleLinkSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="linkForm.bgImgUrl"
                :src="linkForm.bgImgUrl"
                class="avatar"
                width="200px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-col>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="linkForm.createTime"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item
            label="连接类型"
            :label-width="formLabelWidth"
            prop="linkType"
          >
            <el-radio-group v-model="linkForm.linkType">
              <el-radio :label="0">站内链接</el-radio>
              <el-radio :label="1">站外链接</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="value"
            label="站内链接"
            :label-width="formLabelWidth"
            v-if="linkForm.linkType == 0"
          >
            <el-cascader
              :change-on-select="true"
              :props="defaultParams"
              :options="options"
              v-model="value"
              @change="handleChange"
              :clearable="true"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="文章"
            :label-width="formLabelWidth"
            v-if="linkForm.linkType == 0"
            prop="linkArticleId"
          >
            <el-select v-model="linkForm.linkArticleId" placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="linkUrl"
            label="站外链接"
            :label-width="formLabelWidth"
            v-if="linkForm.linkType == 1"
          >
            <el-input
              v-model="linkForm.linkUrl"
              placeholder="请输入链接"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="文章标题"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input v-model="linkForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <div class="footer">
            <el-button type="primary" @click="linkAdd('linkForm')"
              >确认</el-button
            >
            <el-button type="info" @click="cancel()">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <el-upload class="avatar-uploader"
               action="http://47.107.237.129/msdw/aliyun/uploadFiles"
               name="img"
               :headers="headerObj"
               :show-file-list="false"
               :on-success="uploadSuccess"
               :on-error="uploadError"
               :before-upload="beforeAvatarUpload"> </el-upload>
  </div>
 </template>
 <script>
 // import { editArticle } from "@/apis/request.js";
 import { quillEditor } from "vue-quill-editor";
 import { allColumn } from "@/apis/request.js";
 import moment from "moment";
 import { getColumnarticle } from "@/apis/request.js";
 import { addArticle } from "@/apis/request.js";
 import { getColumnallarticle } from "@/apis/request.js";
 import { joggle } from "@/apis/request.js";
 export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      rules: {
        bgImgUrl: [
          { required: true, message: "请上传图片", trigger: "change" },
        ],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        textContent: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入来源", trigger: "blur" },
        ],
        videoUrl: [{ required: true, message: "请上传视频", trigger: "blur" }],
        linkType: [
          { required: true, message: "请选择链接类型", trigger: "blur" },
        ],
        value: [{ required: true, message: "请选择站内链接", trigger: "blur" }],
        linkArticleId: [
          { required: true, message: "请选择链接文章", trigger: "blur" },
        ],
        linkUrl: [
          { required: true, message: "请输入站外链接", trigger: "blur" },
        ],
      },
      joggle,
      defaultParams: {
        label: "columnName",
        value: "id",
        children: "children",
      },
      value: "",
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      option: [],
      photoForm: {
        bgImgUrl: "",
        title: "",
        createTime: "",
        description: "",
        textContent: null,
      },
      videoForm: {
        videoUrl: "",
        bgImgUrl: "",
        title: "",
        createTime: "",
        description: "",
        textContent: null,
      },
      linkForm: {
        bgImgUrl: "",
        createTime: "2020-08-20",
        linkType: 0,
        linkUrl: "",
        linkColumnId: 0,
        columnId: "",
        title: "",
        linkArticleId: "",
      },
      formLabelWidth: "90px",
      editorOption: {
        scrollingContainer: '#editorcontainer',
        placeholder: '',
        // or 'bubble'
        theme: 'snow',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black', border: 'none', color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },toolbar: {
            // 工具栏
            container: 'toolbarOptions.toolbarOptions',
            handlers: { 'image': function (value) { if (value) {
              // upload点击上传事件
                document.querySelector('.avatar-uploader input').click()
            } else {
              this.quill.format('image', false)
            }
            }
            }
          }
        }
      },
      isClear: false,
      headerObj:{}
    };
  },
  methods: {
    uploadError(){
    },
    uploadSuccess(res) {
      var dt = res.result
      let quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (dt.meta.status === this.GLB.IMAGE_ADD_SUCCESS && dt.url !== null) {
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片 dt.url为服务器返回的图片地址
        quill.insertEmbed(length, 'image', this.glAPI + dt.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        this.$message.error('图片插入失败')
      }// loading加载隐藏
      this.quillUpdateImg = false
    },
    handleChange(value) {
      let index = value.length - 1;
      let id = value[index];
      this.linkForm.linkColumnId = value[index];
      getColumnallarticle(id).then((res) => {
        this.option = res.map((res) => {
          return {
            value: res.id,
            label: res.title,
          };
        });
        console.log(res, 1);
      });
    },
    beforeAvatarUpload(file) {
      console.log(file);
      const isJPG = file.type === "image/jpeg" || "image/jpg" || "image/png";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式错误!");
      }
      if (!isLt1M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
    common() {
      allColumn().then((res) => {
        this.options = this.getTreeData(res);
      });
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("上传视频格式错误!");
        return false;
      }
      if (!fileSize) {
        this.$message.error("上传视频大小不能超过 50MB!");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.videoForm.videoUrl = res.data.fileUrl;
    },
    change(val) {
      console.log(val);
    },
    submit() {
      console.log(this.$refs.text.value);
    },
    handlePhotoSuccess(res) {
      // this.photoForm.bgImgUrl = res.imgUrl;
      this.photoForm.bgImgUrl = res.data.fileUrl;
    },
    handleAvatarSuccess(res) {
      // this.videoForm.bgImgUrl = res.imgUrl;
      this.videoForm.bgImgUrl = res.data.fileUrl;
    },
    handleLinkSuccess(res) {
      // this.linkForm.bgImgUrl = res.imgUrl;
      this.linkForm.bgImgUrl = res.data.fileUrl;
    },
    back() {
         let a=localStorage.getItem('columnid')
      this.$router.push("/home/contentmange/" + a);
      return false;
    },
    photoAdd(formName) {
         let a=localStorage.getItem('columnid')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var form = { ...this.photoForm };
          var date = moment(form.createTime).format("YYYY-MM-DD");
          form.createTime = date;
          form.columnId = a;
          addArticle(form).then((res) => {
            console.log(res);
            getColumnarticle(a, 1).then((res) => {
              this.$store.state.article = res;
              this.$router.push(
                "/home/contentmange/" + a
              );
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    videoAdd(formName) {
         let a=localStorage.getItem('columnid')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var form = { ...this.videoForm };
          var date = moment(form.createTime).format("YYYY-MM-DD");
          form.createTime = date;
          form.columnId = a;
          addArticle(form).then((res) => {
            console.log(res);
            getColumnarticle(a, 1).then((res) => {
              this.$store.state.article = res;
              this.$router.push(
                "/home/contentmange/" + a
              );
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    linkAdd(formName) {
         let a=localStorage.getItem('columnid')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var form = { ...this.linkForm };
          var date = moment(form.createTime).format("YYYY-MM-DD");
          form.createTime = date;
          form.columnId = a;
          addArticle(form).then((res) => {
            console.log(res);
            getColumnarticle(a, 1).then((res) => {
              this.$store.state.article = res;
              this.$router.push(
                "/home/contentmange/" + a
              );
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancel() {
      let a=localStorage.getItem('columnid')
      this.$router.push("/home/contentmange/" + a);
    },
  },
  computed: {
    show() {
      if (localStorage.getItem("style")) {
        return localStorage.getItem("style");
      }
      else{
        return ''
      }
    },
  },
  mounted() {
    var date = new Date();
    date = moment(date).format("YYYY-MM-DD");
    this.linkForm.createTime = date;
    this.photoForm.createTime = date;
    this.videoForm.createTime = date;
    this.common();
  },
 };
 </script>
 <style lang="less">
 .photocontent {
  height: 100%;
  .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    height: 50px;
    line-height: 50px;
    div {
      span {
        color: skyblue;
      }
      span:hover {
        cursor: pointer;
      }
    }
  }
  .contentbottom {
    margin-top: 20px;
    .el-input__inner {
      width: 350px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    height: 178px;
    display: block;
  }
  .video-avatar {
    height: 200px;
  }
  .ql-container {
    height: 300px;
  }
  .footer {
    width: 200px;
    margin: 40px auto;
  }
 }
 </style>
--- a/src/views/title/Editphoto.vue
+++ b/src/views/title/Editphoto.vue
@ -0,0 +1,744 @@
 <template>
  <div>
    <div class="photocontent" v-if="show == 1">
      <div class="top">
        <span class="title"
          ><i class="el-icon-tickets"></i>图文样式内容编辑</span
        >
        <div>
          <span @click="back()">&lt;&emsp;返回</span>
        </div>
      </div>
      <div class="contentbottom">
        <el-form :model="photoForm">
          <el-form-item label="封面图" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="joggle"
              :show-file-list="false"
              :on-success="handlePhotoSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="photoForm.bgImgUrl"
                :src="photoForm.bgImgUrl"
                class="avatar"
                width="200px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="photoForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-col>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="photoForm.createTime"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="来源" :label-width="formLabelWidth">
            <el-input
              v-model="photoForm.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章内容" :label-width="formLabelWidth">
            <!-- 富文本编辑器 -->
            <quill-editor
              ref="text"
              v-model="photoForm.textContent"
              class="myQuillEditor"
              :options="editorOption"
            />
            <el-upload class="avatar-uploaders"
                       action="http://47.107.237.129/msdw/aliyun/uploadFiles"
                       name="img"
                       :headers="headerObj"
                       :show-file-list="false"
                       :on-success="uploadSuccess"
                       :on-error="uploadError"
                       :before-upload="beforeAvatarUpload"> </el-upload>
          </el-form-item>
          <div class="footer">
            <el-button type="primary" @click="photoEdit()">确认</el-button>
            <el-button type="info" @click="cancel()">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="photocontent" v-else-if="show == 0">
      <div class="top">
        <span class="title"
          ><i class="el-icon-tickets"></i>视频样式内容编辑</span
        >
        <div>
          <span @click="back()">&lt;&emsp;返回</span>
          <!-- <a href="" >&lt;&emsp;返回1</a>  -->
        </div>
      </div>
      <div class="contentbottom">
        <el-form :model="videoForm">
          <el-form-item label="封面图" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="joggle"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="videoForm.bgImgUrl"
                :src="videoForm.bgImgUrl"
                class="avatar"
                width="200px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="videoForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-col>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="videoForm.createTime"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="来源" :label-width="formLabelWidth">
            <el-input
              v-model="videoForm.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="视频" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="joggle"
              v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
              v-bind:on-progress="uploadVideoProcess"
              v-bind:on-success="handleVideoSuccess"
              v-bind:before-upload="beforeUploadVideo"
              v-bind:show-file-list="false"
            >
              <video
                v-if="videoForm.videoUrl != '' && !videoFlag"
                v-bind:src="videoForm.videoUrl"
                class="avatar video-avatar"
                controls="controls"
              >
                您的浏览器不支持视频播放
              </video>
              <i
                v-else-if="videoForm.videoUrl == '' && !videoFlag"
                class="el-icon-plus avatar-uploader-icon"
              ></i>
              <el-progress
                v-if="videoFlag == true"
                type="circle"
                v-bind:percentage="videoUploadPercent"
                style="margin-top: 7px"
              ></el-progress>
            </el-upload>
          </el-form-item>
          <el-form-item label="文章内容" :label-width="formLabelWidth">
            <quill-editor
              ref="text"
              v-model="videoForm.textContent"
              class="myQuillEditor"
              :options="editorOption"
            />
            <el-upload class="avatar-uploaders"
                       action="http://47.107.237.129/msdw/aliyun/uploadFiles"
                       name="img"
                       :headers="headerObj"
                       :show-file-list="false"
                       :on-success="uploadSuccess"
                       :on-error="uploadError"
                       :before-upload="beforeAvatarUpload"> </el-upload>
          </el-form-item>
          <div class="footer">
            <el-button type="primary" @click="videoEdit()">确认</el-button>
            <el-button type="info" @click="cancel()">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="photocontent" v-if="show == 2">
      <div class="top">
        <span class="title"><i class="el-icon-tickets"></i>链接内容编辑</span>
        <div>
          <span @click="back()">&lt;&emsp;返回</span>
        </div>
      </div>
      <div class="contentbottom">
        <el-form :model="linkForm">
          <el-form-item label="封面图" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="joggle"
              :show-file-list="false"
              :on-success="handleLinkSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="linkForm.bgImgUrl"
                :src="linkForm.bgImgUrl"
                class="avatar"
                width="200px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-col>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="linkForm.createTime"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item
            label="连接类型"
            :label-width="formLabelWidth"
            prop="linkType"
          >
            <el-radio-group v-model="linkForm.linkType">
              <el-radio :label="0">站内链接</el-radio>
              <el-radio :label="1">站外链接</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="in"
            label="站内链接"
            :label-width="formLabelWidth"
            v-if="linkForm.linkType == 0"
          >
            <el-cascader
              :change-on-select="true"
              :props="defaultParams"
              :options="options"
              v-model="linkForm.linkColumnId"
              @change="handleChange"
              :clearable="true"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="文章"
            :label-width="formLabelWidth"
            v-if="linkForm.linkType == 0"
          >
            <el-select v-model="linkForm.linkArticleId" placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="out"
            label="站外链接"
            :label-width="formLabelWidth"
            v-if="linkForm.linkType == 1"
          >
            <el-input
              v-model="linkForm.linkUrl"
              placeholder="请输入链接"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="linkForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <div class="footer">
            <el-button type="primary" @click="linkEdit()">确认</el-button>
            <el-button type="info" @click="cancel()">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
 </template>
 <script>
 import { editArticle } from "@/apis/request.js";
 import { quillEditor } from "vue-quill-editor";
 import { allColumn } from "@/apis/request.js";
 import moment from "moment";
 import { joggle } from "@/apis/request.js";
 import { getColumnallarticle } from "@/apis/request.js";
 import { getColumnarticle } from "@/apis/request.js";
 export default {
  components: {
    quillEditor,
  },
  data() {
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'], // toggled buttons
      ['blockquote', 'code-block'],
      [{ header: 1 }, { header: 2 }], // custom button values
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
      [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
      [{ direction: 'rtl' }], // text direction
      [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
      [{ font: [] }],
      [{ align: [] }],
      ['link', 'image', 'video'],
      ['clean'] // remove formatting button
  ]
    return {
      joggle,
      defaultParams: {
        label: "columnName",
        value: "id",
        children: "children",
      },
      value: "",
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      option: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      photoForm: {
        bgImgUrl: "",
        title: "",
        createTime: "",
        description: "",
        textContent: null,
      },
      videoForm: {
        videoUrl: "",
        bgImgUrl: "",
        title: "",
        createTime: "",
        description: "",
        textContent: null,
      },
      linkForm: {
        bgImgUrl: "",
        createTime: "2020-08-20",
        linkType: 0,
        linkUrl: "",
        linkColumnId: 0,
        title: "",
        linkArticleId: "",
      },
      formLabelWidth: "90px",
      editorOption: {
        imageResize: {
          displayStyles: {
            backgroundColor: 'black', border: 'none', color: 'white'
          },
          modules: ['Resize', 'DisplaySize', 'Toolbar']
        },toolbar: {
          // 工具栏
          container: toolbarOptions.toolbarOptions,
          handlers: { 'image': function (value) {
            if (value) {
              // upload点击上传事件
              document.querySelector('.avatar-uploaders input').click()
            } else {
              this.quill.format('image', false)
            }
          }}
        }
      },
      isClear: false,
      headerObj:{
      },
    };
  },
  methods: {
    uploadError(){
      console.log('====')
    },
    uploadSuccess(res) {
      console.log(res)
      var dt = res.result
      let quill = this.$refs.quillEditor.quill
      // 如果上传成功
      if (dt.meta.status === this.GLB.IMAGE_ADD_SUCCESS && dt.url !== null) {
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片 dt.url为服务器返回的图片地址
        quill.insertEmbed(length, 'image', this.glAPI + dt.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        this.$message.error('图片插入失败')
      }// loading加载隐藏
      this.quillUpdateImg = false
    },
    handleChange(value) {
      let index = value.length - 1;
      let id = value[index];
      this.linkForm.linkColumnId = value[index];
      console.log(id, value, 1);
      getColumnallarticle(id).then((res) => {
        this.option = res.map((res) => {
          return {
            value: res.id,
            label: res.title,
          };
        });
        console.log(res, 666);
      });
    },
    common() {
      allColumn().then((res) => {
        this.options = this.getTreeData(res);
        if (this.linkForm.linkColumnId) {
          getColumnallarticle(this.linkForm.linkColumnId).then((res) => {
            this.option = res.map((res) => {
              return {
                value: res.id,
                label: res.title,
              };
            });
            console.log(res, 0);
          });
        }
      });
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("上传视频格式错误!");
        return false;
      }
      if (!fileSize) {
        this.$message.error("上传视频大小不能超过 50MB!");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    beforeAvatarUpload(file) {
      console.log(file);
      const isJPG = file.type === "image/jpeg" || "image/jpg" || "image/png";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式错误!");
      }
      if (!isLt1M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
    //上传成功回调
    handleVideoSuccess(res) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.videoForm.videoUrl = res.data.fileUrl;
    },
    change(val) {
      console.log(val);
    },
    submit() {
      console.log(this.$refs.text.value);
    },
    handlePhotoSuccess(res) {
      this.photoForm.bgImgUrl = res.data.fileUrl;
    },
    handleAvatarSuccess(res) {
      this.videoForm.bgImgUrl = res.data.fileUrl;
      console.log(res);
    },
    handleLinkSuccess(res) {
      this.linkForm.bgImgUrl = res.data.fileUrl;
    },
    back() {
      let a = localStorage.getItem("columnid");
      this.$router.push("/home/contentmange/" + a);
      return false;
    },
    photoEdit() {
      let a = localStorage.getItem("columnid");
      let editid = JSON.parse(localStorage.getItem("row"));
      var form = { ...editid, ...this.photoForm };
      var date = moment(form.createTime).format("YYYY-MM-DD");
      form.createTime = date;
      var arr = [];
      arr.push(form);
      console.log(arr);
      editArticle(arr).then((res) => {
        console.log(res);
        getColumnarticle(a, 1).then((res) => {
          this.$store.state.article = res;
          this.$router.push("/home/contentmange/" + a);
        });
      });
    },
    videoEdit() {
      let a = localStorage.getItem("columnid");
      let editid = JSON.parse(localStorage.getItem("row"));
      var form = { editid, ...this.videoForm };
      var date = moment(form.createTime).format("YYYY-MM-DD");
      form.createTime = date;
      var arr = [];
      arr.push(form);
      console.log(arr);
      editArticle(arr).then((res) => {
        console.log(res);
        getColumnarticle(a, 1).then((res) => {
          this.$store.state.article = res;
          this.$router.push("/home/contentmange/" + a);
        });
      });
    },
    linkEdit() {
      let a = localStorage.getItem("columnid");
      let editid = JSON.parse(localStorage.getItem("row"));
      var form = { ...editid, ...this.linkForm };
      var date = moment(form.createTime).format("YYYY-MM-DD");
      form.createTime = date;
      var arr = [];
      arr.push(form);
      console.log(arr, 9);
      editArticle(arr).then((res) => {
        console.log(res);
        getColumnarticle(a, 1).then((res) => {
          this.$store.state.article = res;
          this.$router.push("/home/contentmange/" + a);
        });
      });
    },
    cancel() {
      let a = localStorage.getItem("columnid");
      this.$router.push("/home/contentmange/" + a);
    },
  },
  computed: {
    show() {
      if (localStorage.getItem("style")) {
        return localStorage.getItem("style");
      } else {
        return "";
      }
    },
  },
  mounted() {
    let editid = JSON.parse(localStorage.getItem("row"));
    if (localStorage.getItem("style") == 1) {
      this.photoForm.bgImgUrl = editid.bgImgUrl;
      this.photoForm.title = editid.title;
      this.photoForm.createTime = editid.createTime;
      this.photoForm.description = editid.description;
      this.photoForm.textContent = editid.textContent;
    }
    if (localStorage.getItem("style") == 0) {
      this.videoForm.bgImgUrl = editid.bgImgUrl;
      this.videoForm.title = editid.title;
      this.videoForm.videoUrl = editid.videoUrl;
      this.videoForm.createTime = editid.createTime;
      this.videoForm.description = editid.description;
      this.videoForm.textContent = editid.textContent;
    }
    if (localStorage.getItem("style") == 2) {
      this.linkForm.bgImgUrl = editid.bgImgUrl;
      this.linkForm.title = editid.title;
      this.linkForm.createTime = editid.createTime;
      this.linkForm.description = editid.description;
      this.linkForm.linkType = editid.linkType;
      this.linkForm.linkUrl = editid.linkUrl;
      this.linkForm.linkColumnId = editid.linkColumnId;
      this.linkForm.linkArticleId = editid.linkArticleId;
    }
    this.common();
  },
 };
 </script>
 <style lang="less">
 .photocontent {
  height: 100%;
  .top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    height: 50px;
    line-height: 50px;
    div {
      span {
        color: skyblue;
      }
      span:hover {
        cursor: pointer;
      }
    }
  }
  .contentbottom {
    margin-top: 20px;
    .el-input__inner {
      width: 350px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    height: 178px;
    display: block;
  }
  .video-avatar {
    height: 200px;
  }
  .ql-container {
    height: 300px;
  }
  .footer {
    width: 200px;
    margin: 0 auto;
  }
 }
 </style>
--- a/start.bat
+++ b/start.bat
@ -0,0 +1 @@
 yarn serve
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,20 @@
 module.exports = {
    //基本路径
  publicPath: "./",
  outputDir: "dist", 
  //放置静态资源目录
  assetsDir: "static",
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [require('postcss-px2rem')({
                    remUnit: 54
                })]
            }
        }
    }
 }
--- a/yarn.lock
+++ b/yarn.lock