页面设置

src/api/index.js

@@ -51,4 +51,9 @@ export default {
   searchAllBySite: `iasf/sysNavigationStyle/searchAllBySite`,
   updateStyle: `iasf/sysNavigationStyle/update`,
   saveStyle: `iasf/sysNavigationStyle/save`,
+  findPage: `iasf/sysColumnLongPage/findById`,
+  getRedisPage: `iasf/sysColumnLongPage/getRedisCache`,
+  savePage: `iasf/sysColumnLongPage/save`,
+  saveRedisPage: `iasf/sysColumnLongPage/saveTheCache`,
+  updatePage: `iasf/sysColumnLongPage/update`,
 }

src/components/modules/banner.vue

@@ -0,0 +1,189 @@
+<template>
+  <!-- banner -->
+  <div>
+    <el-dialog title="Banner模块管理" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close">
+      <template v-if="data.type === 'banner'">
+        <el-table class="module-table" :data="data.list" header-align="center" row-key="id">
+          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+          <el-table-column label="图片" min-width="140">
+            <template slot-scope="scope">
+              <el-upload
+                class="uploader"
+                accept=".jpg,.png,.jpeg"
+                :on-success="res => uploadSuccess(res, scope.row)"
+                :show-file-list="false"
+                :action="api.upload">
+                  <img v-if="scope.row.pic" :src="scope.row.pic" class="avatar">
+                  <div class="uploader-default" v-else>
+                    <i class="el-icon-plus"></i>
+                    <p>上传图片</p>
+                  </div>
+                  <div slot="tip" class="el-upload__tip">
+                    <p>只支持.jpg,.png格式</p>
+                  </div>
+              </el-upload>
+            </template>
+          </el-table-column>
+          <el-table-column label="链接" min-width="140">
+            <template slot-scope="scope">
+              <div class="link-wrap">
+                <span>{{ scope.row.link.linkName }}</span>
+                <el-button class="set-link" type="primary" size="mini" @click="toLink(scope.row, scope.$index)">设置链接</el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="100">
+            <template slot-scope="scope">
+              <div class="flex a-center">
+                <el-switch
+                  v-model="scope.row.isEnable"
+                  :active-value="1"
+                  :inactive-value="0">
+                </el-switch>
+                <i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="plus">
+          <i class="el-icon-circle-plus-outline"></i>
+        </div>
+      </template>
+      <el-form v-else-if="data.type === 'form'" ref="form" :model="data.form" :rules="rules" label-width="80px">
+        <el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
+          <el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入" maxlength="30"></el-input>
+          <el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" maxlength="50"></el-input>
+          <el-upload
+            v-if="item.type === 'upload'"
+            class="uploader"
+            accept=".jpg,.png,.jpeg"
+            :on-success="res => uploadSuccess(res, data.form)"
+            :show-file-list="false"
+            :action="api.upload">
+              <img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
+              <div class="uploader-default" v-else>
+                <i class="el-icon-plus"></i>
+                <p>上传图片</p>
+              </div>
+              <div slot="tip" class="el-upload__tip">
+                <p>只支持.jpg,.png格式</p>
+              </div>
+          </el-upload>
+          <div v-if="item.type === 'link'" class="flex">
+            <el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
+            <el-button @click="toLink(data.form)">设置链接</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="$emit('update:visible', false)">取消</el-button>
+        <el-button type="primary" @click="moduleSubmit">确定</el-button>
+      </span>
+    </el-dialog>
+    <Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
+  </div>
+</template>
+
+<script>
+import Link from '@/components/modules/link'
+export default {
+  props: ['data', 'visible'],
+  components: {
+    Link
+  },
+  data() {
+    return {
+      rules: {},
+      linkVisible: false,
+      linkForm: {},
+      curIndex: 0
+    };
+  },
+  watch: {
+    visible(open) {
+      // 每次打开的时候处理参数
+      open && this.handleForm()
+    }
+  },
+  mounted() {
+    this.handleForm()
+  },
+  methods: {
+    // 处理form表单参数
+    handleForm() {
+      if (this.data.type === 'form') {
+        const { forms } = this.data
+        forms.map(e => {
+          if (e.required) {
+            this.rules[e.prop] = [
+              {
+                required: true,
+                message: `请${e.type === 'input' ? '输入' : '选择'}${e.label}`,
+                trigger: e.type === 'input' ? 'blur' : 'change'
+              }
+            ]
+          }
+        })
+      }
+        console.log("🚀 ~ file: banner.vue ~ line 114 ~ handleForm ~ forms", this.data, this.rules)
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    // 上传成功
+    uploadSuccess(res, row) {
+      console.log("🚀 ~ file: index.vue ~ line 238 ~ uploadSuccess ~ res, row", res, row)
+      // let url = this.form.columnBanner
+      // url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
+      this.$set(row, 'pic', res.url)
+      // row.pic = res.url
+    },
+    // 删除行（通用）
+    delRow(list, i) {
+      this.$confirm('确定要删除吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        list.splice(i, 1)
+      }).catch(() => {})
+    },
+    // 模块设置提交
+    moduleSubmit() {
+      
+    },
+    // 展示链接设置
+    toLink(row, i = 0) {
+      console.log("🚀 ~ file: index.vue ~ line 399 ~ toLink ~ row, i", row, i)
+      this.linkVisible = true
+      this.curIndex = i
+      this.linkForm = row.link
+    },
+    // 链接设置提交
+    linkSubmit() {
+      // return console.log(3, this.$refs.link.data)
+      const el = this.$refs.link
+      const { data, links, article, otherLink, otherArticle } = el
+      let linkEle = null
+      if (data.connectionType !== 2) {
+        if (data.connectionType === 1) {
+          linkEle = el.$refs.links
+          if (!links.length) return util.errorMsg('请选择站内链接')
+          data.linkAddress = links.join()
+          if (article) data.linkAddress += '-' + article
+        }
+        if (data.connectionType === 3) {
+          linkEle = el.$refs.otherLink
+          if (!otherLink.length) return util.errorMsg('请选择栏目')
+          data.linkAddress = otherLink.join()
+          if (otherArticle) data.linkAddress += '-' + otherArticle
+        }
+      }
+      data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
+      this.data.list[this.curIndex].link = data
+      this.linkVisible = false
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/components/modules/form1.vue

@@ -0,0 +1,96 @@
+<template>
+  <!-- 表单 -->
+  <div>
+    <el-dialog title="编辑" :visible.sync="data.visible" width="600px" custom-class="module" :close-on-click-modal="false">
+      <el-form ref="form" :model="data.form" :rules="rules" label-width="80px">
+        <el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
+          <el-input v-if="item.type === 'input'" v-model="data.form[i]" placeholder="请输入" maxlength="30"></el-input>
+          <el-input v-if="item.type === 'textarea'" v-model="data.form[i]" type="textarea" placeholder="请输入" maxlength="50"></el-input>
+          
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="$emit('close')">取消</el-button>
+        <el-button type="primary" @click="moduleSubmit">确定</el-button>
+      </span>
+    </el-dialog>
+    <Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
+  </div>
+</template>
+
+<script>
+import Link from '@/components/modules/link'
+export default {
+  props: {
+    data: {
+      required: true
+    },
+    // diaVisible: {
+    //   type: Boolean,
+    //   required: true
+    // }
+  },
+  components: {
+    Link
+  },
+  data() {
+    return {
+      rules: {
+        groupName: [
+          { required: true, message: "请输入名称", trigger: "blur" }
+        ]
+      },
+      linkVisible: false,
+      linkForm: {},
+      curIndex: 0
+    };
+  },
+  methods: {
+    // 上传成功
+    uploadSuccess(res, row) {
+      console.log("🚀 ~ file: index.vue ~ line 238 ~ uploadSuccess ~ res, row", res, row)
+      // let url = this.form.columnBanner
+      // url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
+      row.banner = res.url
+    },
+    // 模块设置提交
+    moduleSubmit() {
+      
+    },
+    // 展示链接设置
+    toLink(row, i) {
+      console.log("🚀 ~ file: index.vue ~ line 399 ~ toLink ~ row, i", row, i)
+      this.linkVisible = true
+      this.curIndex = i
+      this.linkForm = row.link
+    },
+    // 链接设置提交
+    linkSubmit() {
+      // return console.log(3, this.$refs.link.data)
+      const el = this.$refs.link
+      const { data, links, article, otherLink, otherArticle } = el
+      let linkEle = null
+      if (data.connectionType !== 2) {
+        if (data.connectionType === 1) {
+          linkEle = el.$refs.links
+          if (!links.length) return util.errorMsg('请选择站内链接')
+          data.linkAddress = links.join()
+          if (article) data.linkAddress += '-' + article
+        }
+        if (data.connectionType === 3) {
+          linkEle = el.$refs.otherLink
+          if (!otherLink.length) return util.errorMsg('请选择栏目')
+          data.linkAddress = otherLink.join()
+          if (otherArticle) data.linkAddress += '-' + otherArticle
+        }
+      }
+      data.linkName = data.connectionType === 1 ? linkEle.getCheckedNodes()[0].pathLabels.join('/') : data.linkAddress
+      this.data.list[this.curIndex].link = data
+      this.linkVisible = false
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/components/modules/link.vue

@@ -0,0 +1,180 @@
+<template>
+  <!-- 设置链接 -->
+  <div>
+    <el-dialog title="设置链接地址" :visible.sync="diaVisible" width="500px" :close-on-click-modal="false">
+      <el-form :model="data" class="model" label-width="120px">
+        <el-form-item prop="connectionType" label="连接类型">
+          <el-radio-group v-model="data.connectionType">
+            <!-- <el-radio :label="0">无</el-radio> -->
+            <el-radio :label="1">站内链接</el-radio>
+            <el-radio :label="2">站外链接</el-radio>
+            <el-radio :label="3">其他站点链接</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <template v-if="data.connectionType === 1">
+          <el-form-item label="站内链接">
+            <el-cascader
+              ref="links"
+              v-model="links"
+              :options="columns"
+              :props="columnProps"
+              clearable
+              @change="getArticle"></el-cascader>
+          </el-form-item>
+          <el-form-item label="文章">
+            <el-select v-model="article">
+              <el-option
+                v-for="item in articles"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+        <el-form-item v-show="data.connectionType === 2" prop="linkAddress" label="站外链接">
+          <el-input
+            placeholder="请输入站外链接"
+            v-model.trim="data.linkAddress"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <template v-if="data.connectionType === 3">
+          <el-form-item prop="siteSelection" label="站点选择">
+            <el-select v-model="data.siteSelection">
+              <el-option
+                v-for="item in sites"
+                :key="item.id"
+                :label="item.siteName"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="栏目">
+            <el-cascader
+              ref="otherLink"
+              v-model="otherLink"
+              :options="columns"
+              :props="columnProps"
+              clearable
+              @change="getArticle"></el-cascader>
+          </el-form-item>
+          <el-form-item label="文章">
+            <el-select v-model="otherArticle">
+              <el-option
+                v-for="item in articles"
+                :key="item.id"
+                :label="item.title"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+        <el-form-item prop="isOpen" label="新窗口打开">
+          <el-switch
+            v-model="data.isOpen"
+            :active-value="1"
+            :inactive-value="0">
+          </el-switch>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="$emit('update:diaVisible', false)">取消</el-button>
+        <el-button type="primary" @click="linkSubmit">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      required: true
+    },
+    diaVisible: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      site: this.$store.state.content.site,
+      sites: [],
+      columns: [],
+      articles: [],
+      columnProps: {
+        checkStrictly: true,
+        value: 'id',
+        label: 'columnName'
+      },
+      links: [],
+      article: '',
+      otherLink: [],
+      otherArticle: '',
+    };
+  },
+  mounted() {
+    this.getList()
+    this.getSite()
+  },
+  methods: {
+    // 栏目列表
+    getList() {
+      this.$post(this.api.listWithTree, {
+        siteId: this.site.id,
+        columnName: '',
+        templateId: '',
+        typeId	: '',
+        isSort: 0
+      }).then(({ data }) => {
+        this.columns = data
+        if (this.isEdit) {
+          this.getData()
+          this.handleId(data)
+        } else {
+          this.loaded = true
+        }
+      }).catch(err => {})
+    },
+    // 给当前栏目加上disabled禁止选中
+    handleId(list) {
+      list.forEach(e => {
+        if (this.isEdit && e.id == this.id) e.disabled = true 
+        e.children.length ? this.handleId(e.children) : delete e.children
+      })
+    },
+    // 文章列表
+    getArticle() {
+      // 站内链接/其他站点链接
+      const id = this.data.connectionType === 1 ? this.links[this.links.length - 1] : this.otherLink[this.otherLink.length - 1]
+      this.$post(this.api.queryArticle, {
+        siteId: this.site.id,
+        columnIds: [id],
+        pageNum: 1,
+        pageSize: 1000,
+        title: ''
+      }).then(({ data }) => {
+        this.articles = data.records.filter(e => e.isRelease) // 只显示已发布的文章
+      }).catch(err => {})
+    },
+    // 获取站点列表
+    getSite() {
+      this.$post(this.api.site, {
+        page: 1,
+        limit: 1000,
+        siteName: ''
+      }).then(({ data }) => {
+        this.sites = data.records
+      }).catch(e => {})
+    },
+    // 链接设置提交
+    linkSubmit() {
+      this.$emit('linkSubmit')
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/components/org-tree/index.js

@@ -1,8 +0,0 @@
-import Tree from './src/tree.vue';
-
-/* istanbul ignore next */
-Tree.install = function(Vue) {
-  Vue.component(Tree.name, Tree);
-};
-
-export default Tree;

src/components/org-tree/src/model/node.js

@@ -1,486 +0,0 @@
-import objectAssign from 'element-ui/src/utils/merge';
-import { markNodeData, NODE_KEY } from './util';
-import { arrayFindIndex } from 'element-ui/src/utils/util';
-
-export const getChildState = node => {
-  let all = true;
-  let none = true;
-  let allWithoutDisable = true;
-  for (let i = 0, j = node.length; i < j; i++) {
-    const n = node[i];
-    if (n.checked !== true || n.indeterminate) {
-      all = false;
-      if (!n.disabled) {
-        allWithoutDisable = false;
-      }
-    }
-    if (n.checked !== false || n.indeterminate) {
-      none = false;
-    }
-  }
-
-  return { all, none, allWithoutDisable, half: !all && !none };
-};
-
-const reInitChecked = function(node) {
-  if (node.childNodes.length === 0) return;
-
-  const {all, none, half} = getChildState(node.childNodes);
-  if (all) {
-    node.checked = true;
-    node.indeterminate = false;
-  } else if (half) {
-    node.checked = false;
-    node.indeterminate = true;
-  } else if (none) {
-    node.checked = false;
-    node.indeterminate = false;
-  }
-
-  const parent = node.parent;
-  if (!parent || parent.level === 0) return;
-
-  if (!node.store.checkStrictly) {
-    reInitChecked(parent);
-  }
-};
-
-const getPropertyFromData = function(node, prop) {
-  const props = node.store.props;
-  const data = node.data || {};
-  const config = props[prop];
-
-  if (typeof config === 'function') {
-    return config(data, node);
-  } else if (typeof config === 'string') {
-    return data[config];
-  } else if (typeof config === 'undefined') {
-    const dataProp = data[prop];
-    return dataProp === undefined ? '' : dataProp;
-  }
-};
-
-let nodeIdSeed = 0;
-
-export default class Node {
-  constructor(options) {
-    this.id = nodeIdSeed++;
-    this.text = null;
-    this.checked = false;
-    this.indeterminate = false;
-    this.data = null;
-    this.expanded = false;
-    this.parent = null;
-    this.visible = true;
-    this.isCurrent = false;
-
-    for (let name in options) {
-      if (options.hasOwnProperty(name)) {
-        this[name] = options[name];
-      }
-    }
-
-    // internal
-    this.level = 0;
-    this.loaded = false;
-    this.childNodes = [];
-    this.loading = false;
-
-    if (this.parent) {
-      this.level = this.parent.level + 1;
-    }
-
-    const store = this.store;
-    if (!store) {
-      throw new Error('[Node]store is required!');
-    }
-    store.registerNode(this);
-
-    const props = store.props;
-    if (props && typeof props.isLeaf !== 'undefined') {
-      const isLeaf = getPropertyFromData(this, 'isLeaf');
-      if (typeof isLeaf === 'boolean') {
-        this.isLeafByUser = isLeaf;
-      }
-    }
-
-    if (store.lazy !== true && this.data) {
-      this.setData(this.data);
-
-      if (store.defaultExpandAll) {
-        this.expanded = true;
-      }
-    } else if (this.level > 0 && store.lazy && store.defaultExpandAll) {
-      this.expand();
-    }
-    if (!Array.isArray(this.data)) {
-      markNodeData(this, this.data);
-    }
-    if (!this.data) return;
-    const defaultExpandedKeys = store.defaultExpandedKeys;
-    const key = store.key;
-    if (key && defaultExpandedKeys && defaultExpandedKeys.indexOf(this.key) !== -1) {
-      this.expand(null, store.autoExpandParent);
-    }
-
-    if (key && store.currentNodeKey !== undefined && this.key === store.currentNodeKey) {
-      store.currentNode = this;
-      store.currentNode.isCurrent = true;
-    }
-
-    if (store.lazy) {
-      store._initDefaultCheckedNode(this);
-    }
-
-    this.updateLeafState();
-  }
-
-  setData(data) {
-    if (!Array.isArray(data)) {
-      markNodeData(this, data);
-    }
-
-    this.data = data;
-    this.childNodes = [];
-
-    let children;
-    if (this.level === 0 && this.data instanceof Array) {
-      children = this.data;
-    } else {
-      children = getPropertyFromData(this, 'children') || [];
-    }
-
-    for (let i = 0, j = children.length; i < j; i++) {
-      this.insertChild({ data: children[i] });
-    }
-  }
-
-  get label() {
-    return getPropertyFromData(this, 'label');
-  }
-
-  get key() {
-    const nodeKey = this.store.key;
-    if (this.data) return this.data[nodeKey];
-    return null;
-  }
-
-  get disabled() {
-    return getPropertyFromData(this, 'disabled');
-  }
-
-  get nextSibling() {
-    const parent = this.parent;
-    if (parent) {
-      const index = parent.childNodes.indexOf(this);
-      if (index > -1) {
-        return parent.childNodes[index + 1];
-      }
-    }
-    return null;
-  }
-
-  get previousSibling() {
-    const parent = this.parent;
-    if (parent) {
-      const index = parent.childNodes.indexOf(this);
-      if (index > -1) {
-        return index > 0 ? parent.childNodes[index - 1] : null;
-      }
-    }
-    return null;
-  }
-
-  contains(target, deep = true) {
-    const walk = function(parent) {
-      const children = parent.childNodes || [];
-      let result = false;
-      for (let i = 0, j = children.length; i < j; i++) {
-        const child = children[i];
-        if (child === target || (deep && walk(child))) {
-          result = true;
-          break;
-        }
-      }
-      return result;
-    };
-
-    return walk(this);
-  }
-
-  remove() {
-    const parent = this.parent;
-    if (parent) {
-      parent.removeChild(this);
-    }
-  }
-
-  insertChild(child, index, batch) {
-    if (!child) throw new Error('insertChild error: child is required.');
-
-    if (!(child instanceof Node)) {
-      if (!batch) {
-        const children = this.getChildren(true);
-        if (children.indexOf(child.data) === -1) {
-          if (typeof index === 'undefined' || index < 0) {
-            children.push(child.data);
-          } else {
-            children.splice(index, 0, child.data);
-          }
-        }
-      }
-      objectAssign(child, {
-        parent: this,
-        store: this.store
-      });
-      child = new Node(child);
-    }
-
-    child.level = this.level + 1;
-
-    if (typeof index === 'undefined' || index < 0) {
-      this.childNodes.push(child);
-    } else {
-      this.childNodes.splice(index, 0, child);
-    }
-
-    this.updateLeafState();
-  }
-
-  insertBefore(child, ref) {
-    let index;
-    if (ref) {
-      index = this.childNodes.indexOf(ref);
-    }
-    this.insertChild(child, index);
-  }
-
-  insertAfter(child, ref) {
-    let index;
-    if (ref) {
-      index = this.childNodes.indexOf(ref);
-      if (index !== -1) index += 1;
-    }
-    this.insertChild(child, index);
-  }
-
-  removeChild(child) {
-    const children = this.getChildren() || [];
-    const dataIndex = children.indexOf(child.data);
-    if (dataIndex > -1) {
-      children.splice(dataIndex, 1);
-    }
-
-    const index = this.childNodes.indexOf(child);
-
-    if (index > -1) {
-      this.store && this.store.deregisterNode(child);
-      child.parent = null;
-      this.childNodes.splice(index, 1);
-    }
-
-    this.updateLeafState();
-  }
-
-  removeChildByData(data) {
-    let targetNode = null;
-
-    for (let i = 0; i < this.childNodes.length; i++) {
-      if (this.childNodes[i].data === data) {
-        targetNode = this.childNodes[i];
-        break;
-      }
-    }
-
-    if (targetNode) {
-      this.removeChild(targetNode);
-    }
-  }
-
-  expand(callback, expandParent) {
-    const done = () => {
-      if (expandParent) {
-        let parent = this.parent;
-        while (parent.level > 0) {
-          parent.expanded = true;
-          parent = parent.parent;
-        }
-      }
-      this.expanded = true;
-      if (callback) callback();
-    };
-
-    if (this.shouldLoadData()) {
-      this.loadData((data) => {
-        if (data instanceof Array) {
-          if (this.checked) {
-            this.setChecked(true, true);
-          } else if (!this.store.checkStrictly) {
-            reInitChecked(this);
-          }
-          done();
-        }
-      });
-    } else {
-      done();
-    }
-  }
-
-  doCreateChildren(array, defaultProps = {}) {
-    array.forEach((item) => {
-      this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true);
-    });
-  }
-
-  collapse() {
-    this.expanded = false;
-  }
-
-  shouldLoadData() {
-    return this.store.lazy === true && this.store.load && !this.loaded;
-  }
-
-  updateLeafState() {
-    if (this.store.lazy === true && this.loaded !== true && typeof this.isLeafByUser !== 'undefined') {
-      this.isLeaf = this.isLeafByUser;
-      return;
-    }
-    const childNodes = this.childNodes;
-    if (!this.store.lazy || (this.store.lazy === true && this.loaded === true)) {
-      // this.isLeaf = !childNodes || childNodes.length === 0;
-      this.isLeaf = this.isLeafByUser;
-      return;
-    }
-    this.isLeaf = false;
-  }
-
-  setChecked(value, deep, recursion, passValue) {
-    this.indeterminate = value === 'half';
-    this.checked = value === true;
-
-    if (this.store.checkStrictly) return;
-
-    if (!(this.shouldLoadData() && !this.store.checkDescendants)) {
-      let { all, allWithoutDisable } = getChildState(this.childNodes);
-
-      if (!this.isLeaf && (!all && allWithoutDisable)) {
-        this.checked = false;
-        value = false;
-      }
-
-      const handleDescendants = () => {
-        if (deep) {
-          const childNodes = this.childNodes;
-          for (let i = 0, j = childNodes.length; i < j; i++) {
-            const child = childNodes[i];
-            passValue = passValue || value !== false;
-            const isCheck = child.disabled ? child.checked : passValue;
-            child.setChecked(isCheck, deep, true, passValue);
-          }
-          const { half, all } = getChildState(childNodes);
-          if (!all) {
-            this.checked = all;
-            this.indeterminate = half;
-          }
-        }
-      };
-
-      if (this.shouldLoadData()) {
-        // Only work on lazy load data.
-        this.loadData(() => {
-          handleDescendants();
-          reInitChecked(this);
-        }, {
-          checked: value !== false
-        });
-        return;
-      } else {
-        handleDescendants();
-      }
-    }
-
-    const parent = this.parent;
-    if (!parent || parent.level === 0) return;
-
-    if (!recursion) {
-      reInitChecked(parent);
-    }
-  }
-
-  getChildren(forceInit = false) { // this is data
-    if (this.level === 0) return this.data;
-    const data = this.data;
-    if (!data) return null;
-
-    const props = this.store.props;
-    let children = 'children';
-    if (props) {
-      children = props.children || 'children';
-    }
-
-    if (data[children] === undefined) {
-      data[children] = null;
-    }
-
-    if (forceInit && !data[children]) {
-      data[children] = [];
-    }
-
-    return data[children];
-  }
-
-  updateChildren() {
-    const newData = this.getChildren() || [];
-    const oldData = this.childNodes.map((node) => node.data);
-
-    const newDataMap = {};
-    const newNodes = [];
-
-    newData.forEach((item, index) => {
-      const key = item[NODE_KEY];
-      const isNodeExists = !!key && arrayFindIndex(oldData, data => data[NODE_KEY] === key) >= 0;
-      if (isNodeExists) {
-        newDataMap[key] = { index, data: item };
-      } else {
-        newNodes.push({ index, data: item });
-      }
-    });
-
-    if (!this.store.lazy) {
-      oldData.forEach((item) => {
-        if (!newDataMap[item[NODE_KEY]]) this.removeChildByData(item);
-      });
-    }
-
-    newNodes.forEach(({ index, data }) => {
-      this.insertChild({ data }, index);
-    });
-
-    this.updateLeafState();
-  }
-
-  loadData(callback, defaultProps = {}) {
-    if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) {
-      this.loading = true;
-
-      const resolve = (children) => {
-        this.loaded = true;
-        this.loading = false;
-        this.childNodes = [];
-
-        this.doCreateChildren(children, defaultProps);
-
-        this.updateLeafState();
-        if (callback) {
-          callback.call(this, children);
-        }
-      };
-
-      this.store.load(this, resolve);
-    } else {
-      if (callback) {
-        callback.call(this);
-      }
-    }
-  }
-}

src/components/org-tree/src/model/tree-store.js

@@ -1,340 +0,0 @@
-import Node from './node';
-import { getNodeKey } from './util';
-
-export default class TreeStore {
-  constructor(options) {
-    this.currentNode = null;
-    this.currentNodeKey = null;
-
-    for (let option in options) {
-      if (options.hasOwnProperty(option)) {
-        this[option] = options[option];
-      }
-    }
-
-    this.nodesMap = {};
-
-    this.root = new Node({
-      data: this.data,
-      store: this
-    });
-
-    if (this.lazy && this.load) {
-      const loadFn = this.load;
-      loadFn(this.root, (data) => {
-        this.root.doCreateChildren(data);
-        this._initDefaultCheckedNodes();
-      });
-    } else {
-      this._initDefaultCheckedNodes();
-    }
-  }
-
-  filter(value) {
-    const filterNodeMethod = this.filterNodeMethod;
-    const lazy = this.lazy;
-    const traverse = function(node) {
-      const childNodes = node.root ? node.root.childNodes : node.childNodes;
-
-      childNodes.forEach((child) => {
-        child.visible = filterNodeMethod.call(child, value, child.data, child);
-
-        traverse(child);
-      });
-
-      if (!node.visible && childNodes.length) {
-        let allHidden = true;
-        allHidden = !childNodes.some(child => child.visible);
-
-        if (node.root) {
-          node.root.visible = allHidden === false;
-        } else {
-          node.visible = allHidden === false;
-        }
-      }
-      if (!value) return;
-
-      if (node.visible && !node.isLeaf && !lazy) node.expand();
-    };
-
-    traverse(this);
-  }
-
-  setData(newVal) {
-    const instanceChanged = newVal !== this.root.data;
-    if (instanceChanged) {
-      this.root.setData(newVal);
-      this._initDefaultCheckedNodes();
-    } else {
-      this.root.updateChildren();
-    }
-  }
-
-  getNode(data) {
-    if (data instanceof Node) return data;
-    const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);
-    return this.nodesMap[key] || null;
-  }
-
-  insertBefore(data, refData) {
-    const refNode = this.getNode(refData);
-    refNode.parent.insertBefore({ data }, refNode);
-  }
-
-  insertAfter(data, refData) {
-    const refNode = this.getNode(refData);
-    refNode.parent.insertAfter({ data }, refNode);
-  }
-
-  remove(data) {
-    const node = this.getNode(data);
-
-    if (node && node.parent) {
-      if (node === this.currentNode) {
-        this.currentNode = null;
-      }
-      node.parent.removeChild(node);
-    }
-  }
-
-  append(data, parentData) {
-    const parentNode = parentData ? this.getNode(parentData) : this.root;
-
-    if (parentNode) {
-      parentNode.insertChild({ data });
-    }
-  }
-
-  _initDefaultCheckedNodes() {
-    const defaultCheckedKeys = this.defaultCheckedKeys || [];
-    const nodesMap = this.nodesMap;
-
-    defaultCheckedKeys.forEach((checkedKey) => {
-      const node = nodesMap[checkedKey];
-
-      if (node) {
-        node.setChecked(true, !this.checkStrictly);
-      }
-    });
-  }
-
-  _initDefaultCheckedNode(node) {
-    const defaultCheckedKeys = this.defaultCheckedKeys || [];
-
-    if (defaultCheckedKeys.indexOf(node.key) !== -1) {
-      node.setChecked(true, !this.checkStrictly);
-    }
-  }
-
-  setDefaultCheckedKey(newVal) {
-    if (newVal !== this.defaultCheckedKeys) {
-      this.defaultCheckedKeys = newVal;
-      this._initDefaultCheckedNodes();
-    }
-  }
-
-  registerNode(node) {
-    const key = this.key;
-    if (!key || !node || !node.data) return;
-
-    const nodeKey = node.key;
-    if (nodeKey !== undefined) this.nodesMap[node.key] = node;
-  }
-
-  deregisterNode(node) {
-    const key = this.key;
-    if (!key || !node || !node.data) return;
-
-    node.childNodes.forEach(child => {
-      this.deregisterNode(child);
-    });
-
-    delete this.nodesMap[node.key];
-  }
-
-  getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
-    const checkedNodes = [];
-    const traverse = function(node) {
-      const childNodes = node.root ? node.root.childNodes : node.childNodes;
-
-      childNodes.forEach((child) => {
-        if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) {
-          checkedNodes.push(child.data);
-        }
-
-        traverse(child);
-      });
-    };
-
-    traverse(this);
-
-    return checkedNodes;
-  }
-
-  getCheckedKeys(leafOnly = false) {
-    return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]);
-  }
-
-  getHalfCheckedNodes() {
-    const nodes = [];
-    const traverse = function(node) {
-      const childNodes = node.root ? node.root.childNodes : node.childNodes;
-
-      childNodes.forEach((child) => {
-        if (child.indeterminate) {
-          nodes.push(child.data);
-        }
-
-        traverse(child);
-      });
-    };
-
-    traverse(this);
-
-    return nodes;
-  }
-
-  getHalfCheckedKeys() {
-    return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);
-  }
-
-  _getAllNodes() {
-    const allNodes = [];
-    const nodesMap = this.nodesMap;
-    for (let nodeKey in nodesMap) {
-      if (nodesMap.hasOwnProperty(nodeKey)) {
-        allNodes.push(nodesMap[nodeKey]);
-      }
-    }
-
-    return allNodes;
-  }
-
-  updateChildren(key, data) {
-    const node = this.nodesMap[key];
-    if (!node) return;
-    const childNodes = node.childNodes;
-    for (let i = childNodes.length - 1; i >= 0; i--) {
-      const child = childNodes[i];
-      this.remove(child.data);
-    }
-    for (let i = 0, j = data.length; i < j; i++) {
-      const child = data[i];
-      this.append(child, node.data);
-    }
-  }
-
-  _setCheckedKeys(key, leafOnly = false, checkedKeys) {
-    const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
-    const cache = Object.create(null);
-    const keys = Object.keys(checkedKeys);
-    allNodes.forEach(node => node.setChecked(false, false));
-    for (let i = 0, j = allNodes.length; i < j; i++) {
-      const node = allNodes[i];
-      const nodeKey = node.data[key].toString();
-      let checked = keys.indexOf(nodeKey) > -1;
-      if (!checked) {
-        if (node.checked && !cache[nodeKey]) {
-          node.setChecked(false, false);
-        }
-        continue;
-      }
-
-      let parent = node.parent;
-      while (parent && parent.level > 0) {
-        cache[parent.data[key]] = true;
-        parent = parent.parent;
-      }
-
-      if (node.isLeaf || this.checkStrictly) {
-        node.setChecked(true, false);
-        continue;
-      }
-      node.setChecked(true, true);
-
-      if (leafOnly) {
-        node.setChecked(false, false);
-        const traverse = function(node) {
-          const childNodes = node.childNodes;
-          childNodes.forEach((child) => {
-            if (!child.isLeaf) {
-              child.setChecked(false, false);
-            }
-            traverse(child);
-          });
-        };
-        traverse(node);
-      }
-    }
-  }
-
-  setCheckedNodes(array, leafOnly = false) {
-    const key = this.key;
-    const checkedKeys = {};
-    array.forEach((item) => {
-      checkedKeys[(item || {})[key]] = true;
-    });
-
-    this._setCheckedKeys(key, leafOnly, checkedKeys);
-  }
-
-  setCheckedKeys(keys, leafOnly = false) {
-    this.defaultCheckedKeys = keys;
-    const key = this.key;
-    const checkedKeys = {};
-    keys.forEach((key) => {
-      checkedKeys[key] = true;
-    });
-
-    this._setCheckedKeys(key, leafOnly, checkedKeys);
-  }
-
-  setDefaultExpandedKeys(keys) {
-    keys = keys || [];
-    this.defaultExpandedKeys = keys;
-
-    keys.forEach((key) => {
-      const node = this.getNode(key);
-      if (node) node.expand(null, this.autoExpandParent);
-    });
-  }
-
-  setChecked(data, checked, deep) {
-    const node = this.getNode(data);
-
-    if (node) {
-      node.setChecked(!!checked, deep);
-    }
-  }
-
-  getCurrentNode() {
-    return this.currentNode;
-  }
-
-  setCurrentNode(currentNode) {
-    const prevCurrentNode = this.currentNode;
-    if (prevCurrentNode) {
-      prevCurrentNode.isCurrent = false;
-    }
-    this.currentNode = currentNode;
-    this.currentNode.isCurrent = true;
-  }
-
-  setUserCurrentNode(node) {
-    const key = node[this.key];
-    const currNode = this.nodesMap[key];
-    this.setCurrentNode(currNode);
-  }
-
-  setCurrentNodeKey(key) {
-    if (key === null || key === undefined) {
-      this.currentNode && (this.currentNode.isCurrent = false);
-      this.currentNode = null;
-      return;
-    }
-    const node = this.getNode(key);
-    if (node) {
-      this.setCurrentNode(node);
-    }
-  }
-};

src/components/org-tree/src/model/util.js

@@ -1,27 +0,0 @@
-export const NODE_KEY = '$treeNodeId';
-
-export const markNodeData = function(node, data) {
-  if (!data || data[NODE_KEY]) return;
-  Object.defineProperty(data, NODE_KEY, {
-    value: node.id,
-    enumerable: false,
-    configurable: false,
-    writable: false
-  });
-};
-
-export const getNodeKey = function(key, data) {
-  if (!key) return data[NODE_KEY];
-  return data[key];
-};
-
-export const findNearestComponent = (element, componentName) => {
-  let target = element;
-  while (target && target.tagName !== 'BODY') {
-    if (target.__vue__ && target.__vue__.$options.name === componentName) {
-      return target.__vue__;
-    }
-    target = target.parentNode;
-  }
-  return null;
-};

src/components/org-tree/src/tree-node.vue

@@ -1,279 +0,0 @@
-<template>
-  <div
-    class="el-tree-node"
-    @click.stop="handleClick"
-    @contextmenu="($event) => this.handleContextMenu($event)"
-    v-show="node.visible"
-    :class="{
-      'is-expanded': expanded,
-      'is-current': node.isCurrent,
-      'is-hidden': !node.visible,
-      'is-focusable': !node.disabled,
-      'is-checked': !node.disabled && node.checked
-    }"
-    role="treeitem"
-    tabindex="-1"
-    :aria-expanded="expanded"
-    :aria-disabled="node.disabled"
-    :aria-checked="node.checked"
-    :draggable="tree.draggable"
-    @dragstart.stop="handleDragStart"
-    @dragover.stop="handleDragOver"
-    @dragend.stop="handleDragEnd"
-    @drop.stop="handleDrop"
-    ref="node"
-  >
-    <div class="el-tree-node__content"
-      :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
-      <span
-        @click.stop="handleExpandIconClick"
-        :class="[
-          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
-          'el-tree-node__expand-icon',
-          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
-        ]"
-      >
-      </span>
-      <el-checkbox
-        v-if="showCheckbox"
-        v-model="node.checked"
-        :indeterminate="node.indeterminate"
-        :disabled="!!node.disabled"
-        @click.native.stop
-        @change="handleCheckChange"
-      >
-      </el-checkbox>
-      <span
-        v-if="node.loading"
-        class="el-tree-node__loading-icon el-icon-loading">
-      </span>
-      <node-content :node="node"></node-content>
-    </div>
-    <el-collapse-transition>
-      <div
-        class="el-tree-node__children"
-        v-if="!renderAfterExpand || childNodeRendered"
-        v-show="expanded"
-        role="group"
-        :aria-expanded="expanded"
-      >
-        <el-tree-node
-          :render-content="renderContent"
-          v-for="child in node.childNodes"
-          :render-after-expand="renderAfterExpand"
-          :show-checkbox="showCheckbox"
-          :key="getNodeKey(child)"
-          :node="child"
-          @node-expand="handleChildNodeExpand">
-        </el-tree-node>
-      </div>
-    </el-collapse-transition>
-  </div>
-</template>
-
-<script type="text/jsx">
-  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
-  import ElCheckbox from 'element-ui/packages/checkbox';
-  import emitter from 'element-ui/src/mixins/emitter';
-  import { getNodeKey } from './model/util';
-
-  export default {
-    name: 'ElTreeNode',
-
-    componentName: 'ElTreeNode',
-
-    mixins: [emitter],
-
-    props: {
-      node: {
-        default() {
-          return {};
-        }
-      },
-      props: {},
-      renderContent: Function,
-      renderAfterExpand: {
-        type: Boolean,
-        default: true
-      },
-      showCheckbox: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    components: {
-      ElCollapseTransition,
-      ElCheckbox,
-      NodeContent: {
-        props: {
-          node: {
-            required: true
-          }
-        },
-        render(h) {
-          const parent = this.$parent;
-          const tree = parent.tree;
-          const node = this.node;
-          const { data, store } = node;
-          return (
-            parent.renderContent
-              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
-              : tree.$scopedSlots.default
-                ? tree.$scopedSlots.default({ node, data })
-                : <span class="el-tree-node__label">{ node.label }</span>
-          );
-        }
-      }
-    },
-
-    data() {
-      return {
-        tree: null,
-        expanded: false,
-        childNodeRendered: false,
-        oldChecked: null,
-        oldIndeterminate: null
-      };
-    },
-
-    watch: {
-      'node.indeterminate'(val) {
-        this.handleSelectChange(this.node.checked, val);
-      },
-
-      'node.checked'(val) {
-        this.handleSelectChange(val, this.node.indeterminate);
-      },
-
-      'node.expanded'(val) {
-        this.$nextTick(() => this.expanded = val);
-        if (val) {
-          this.childNodeRendered = true;
-        }
-      }
-    },
-
-    methods: {
-      getNodeKey(node) {
-        return getNodeKey(this.tree.nodeKey, node.data);
-      },
-
-      handleSelectChange(checked, indeterminate) {
-        if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
-          this.tree.$emit('check-change', this.node.data, checked, indeterminate);
-        }
-        this.oldChecked = checked;
-        this.indeterminate = indeterminate;
-      },
-
-      handleClick() {
-        const store = this.tree.store;
-        store.setCurrentNode(this.node);
-        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
-        this.tree.currentNode = this;
-        if (this.tree.expandOnClickNode) {
-          this.handleExpandIconClick();
-        }
-        if (this.tree.checkOnClickNode && !this.node.disabled) {
-          this.handleCheckChange(null, {
-            target: { checked: !this.node.checked }
-          });
-        }
-        this.tree.$emit('node-click', this.node.data, this.node, this);
-      },
-
-      handleContextMenu(event) {
-        if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
-          event.stopPropagation();
-          event.preventDefault();
-        }
-        this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
-      },
-
-      handleExpandIconClick() {
-        if (this.node.isLeaf) return;
-        if (this.expanded) {
-          this.tree.$emit('node-collapse', this.node.data, this.node, this);
-          this.node.collapse();
-        } else {
-          this.node.expand();
-          this.$emit('node-expand', this.node.data, this.node, this);
-        }
-      },
-
-      handleCheckChange(value, ev) {
-        this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
-        this.$nextTick(() => {
-          const store = this.tree.store;
-          this.tree.$emit('check', this.node.data, {
-            checkedNodes: store.getCheckedNodes(),
-            checkedKeys: store.getCheckedKeys(),
-            halfCheckedNodes: store.getHalfCheckedNodes(),
-            halfCheckedKeys: store.getHalfCheckedKeys(),
-          });
-        });
-      },
-
-      handleChildNodeExpand(nodeData, node, instance) {
-        this.broadcast('ElTreeNode', 'tree-node-expand', node);
-        this.tree.$emit('node-expand', nodeData, node, instance);
-      },
-
-      handleDragStart(event) {
-        if (!this.tree.draggable) return;
-        this.tree.$emit('tree-node-drag-start', event, this);
-      },
-
-      handleDragOver(event) {
-        if (!this.tree.draggable) return;
-        this.tree.$emit('tree-node-drag-over', event, this);
-        event.preventDefault();
-      },
-
-      handleDrop(event) {
-        event.preventDefault();
-      },
-
-      handleDragEnd(event) {
-        if (!this.tree.draggable) return;
-        this.tree.$emit('tree-node-drag-end', event, this);
-      }
-    },
-
-    created() {
-      const parent = this.$parent;
-
-      if (parent.isTree) {
-        this.tree = parent;
-      } else {
-        this.tree = parent.tree;
-      }
-
-      const tree = this.tree;
-      if (!tree) {
-        console.warn('Can not find node\'s tree.');
-      }
-
-      const props = tree.props || {};
-      const childrenKey = props['children'] || 'children';
-
-      this.$watch(`node.data.${childrenKey}`, () => {
-        this.node.updateChildren();
-      });
-
-      if (this.node.expanded) {
-        this.expanded = true;
-        this.childNodeRendered = true;
-      }
-
-      if(this.tree.accordion) {
-        this.$on('tree-node-expand', node => {
-          if(this.node !== node) {
-            this.node.collapse();
-          }
-        });
-      }
-    }
-  };
-</script>

src/components/org-tree/src/tree.vue

@@ -1,496 +0,0 @@
-<template>
-  <div
-    class="el-tree"
-    :class="{
-      'el-tree--highlight-current': highlightCurrent,
-      'is-dragging': !!dragState.draggingNode,
-      'is-drop-not-allow': !dragState.allowDrop,
-      'is-drop-inner': dragState.dropType === 'inner'
-    }"
-    role="tree"
-  >
-    <el-tree-node
-      v-for="child in root.childNodes"
-      :node="child"
-      :props="props"
-      :render-after-expand="renderAfterExpand"
-      :show-checkbox="showCheckbox"
-      :key="getNodeKey(child)"
-      :render-content="renderContent"
-      @node-expand="handleNodeExpand">
-    </el-tree-node>
-    <div class="el-tree__empty-block" v-if="isEmpty">
-      <span class="el-tree__empty-text">{{ emptyText }}</span>
-    </div>
-    <div
-      v-show="dragState.showDropIndicator"
-      class="el-tree__drop-indicator"
-      ref="dropIndicator">
-    </div>
-  </div>
-</template>
-
-<script>
-  import TreeStore from './model/tree-store';
-  import { getNodeKey, findNearestComponent } from './model/util';
-  import ElTreeNode from './tree-node.vue';
-  import {t} from 'element-ui/src/locale';
-  import emitter from 'element-ui/src/mixins/emitter';
-  import { addClass, removeClass } from 'element-ui/src/utils/dom';
-
-  export default {
-    name: 'ElTree',
-
-    mixins: [emitter],
-
-    components: {
-      ElTreeNode
-    },
-
-    data() {
-      return {
-        store: null,
-        root: null,
-        currentNode: null,
-        treeItems: null,
-        checkboxItems: [],
-        dragState: {
-          showDropIndicator: false,
-          draggingNode: null,
-          dropNode: null,
-          allowDrop: true
-        }
-      };
-    },
-
-    props: {
-      data: {
-        type: Array
-      },
-      emptyText: {
-        type: String,
-        default() {
-          return t('el.tree.emptyText');
-        }
-      },
-      renderAfterExpand: {
-        type: Boolean,
-        default: true
-      },
-      nodeKey: String,
-      checkStrictly: Boolean,
-      defaultExpandAll: Boolean,
-      expandOnClickNode: {
-        type: Boolean,
-        default: true
-      },
-      checkOnClickNode: Boolean,
-      checkDescendants: {
-        type: Boolean,
-        default: false
-      },
-      autoExpandParent: {
-        type: Boolean,
-        default: true
-      },
-      defaultCheckedKeys: Array,
-      defaultExpandedKeys: Array,
-      currentNodeKey: [String, Number],
-      renderContent: Function,
-      showCheckbox: {
-        type: Boolean,
-        default: false
-      },
-      draggable: {
-        type: Boolean,
-        default: false
-      },
-      allowDrag: Function,
-      allowDrop: Function,
-      props: {
-        default() {
-          return {
-            children: 'children',
-            label: 'label',
-            disabled: 'disabled'
-          };
-        }
-      },
-      lazy: {
-        type: Boolean,
-        default: false
-      },
-      highlightCurrent: Boolean,
-      load: Function,
-      filterNodeMethod: Function,
-      accordion: Boolean,
-      indent: {
-        type: Number,
-        default: 18
-      },
-      iconClass: String
-    },
-
-    computed: {
-      children: {
-        set(value) {
-          this.data = value;
-        },
-        get() {
-          return this.data;
-        }
-      },
-
-      treeItemArray() {
-        return Array.prototype.slice.call(this.treeItems);
-      },
-
-      isEmpty() {
-        const { childNodes } = this.root;
-        return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);
-      }
-    },
-
-    watch: {
-      defaultCheckedKeys(newVal) {
-        this.store.setDefaultCheckedKey(newVal);
-      },
-
-      defaultExpandedKeys(newVal) {
-        this.store.defaultExpandedKeys = newVal;
-        this.store.setDefaultExpandedKeys(newVal);
-      },
-
-      data(newVal) {
-        this.store.setData(newVal);
-      },
-
-      checkboxItems(val) {
-        Array.prototype.forEach.call(val, (checkbox) => {
-          checkbox.setAttribute('tabindex', -1);
-        });
-      },
-
-      checkStrictly(newVal) {
-        this.store.checkStrictly = newVal;
-      }
-    },
-
-    methods: {
-      filter(value) {
-        if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
-        this.store.filter(value);
-      },
-
-      getNodeKey(node) {
-        return getNodeKey(this.nodeKey, node.data);
-      },
-
-      getNodePath(data) {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath');
-        const node = this.store.getNode(data);
-        if (!node) return [];
-        const path = [node.data];
-        let parent = node.parent;
-        while (parent && parent !== this.root) {
-          path.push(parent.data);
-          parent = parent.parent;
-        }
-        return path.reverse();
-      },
-
-      getCheckedNodes(leafOnly, includeHalfChecked) {
-        return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
-      },
-
-      getCheckedKeys(leafOnly) {
-        return this.store.getCheckedKeys(leafOnly);
-      },
-
-      getCurrentNode() {
-        const currentNode = this.store.getCurrentNode();
-        return currentNode ? currentNode.data : null;
-      },
-
-      getCurrentKey() {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey');
-        const currentNode = this.getCurrentNode();
-        return currentNode ? currentNode[this.nodeKey] : null;
-      },
-
-      setCheckedNodes(nodes, leafOnly) {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
-        this.store.setCheckedNodes(nodes, leafOnly);
-      },
-
-      setCheckedKeys(keys, leafOnly) {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
-        this.store.setCheckedKeys(keys, leafOnly);
-      },
-
-      setChecked(data, checked, deep) {
-        this.store.setChecked(data, checked, deep);
-      },
-
-      getHalfCheckedNodes() {
-        return this.store.getHalfCheckedNodes();
-      },
-
-      getHalfCheckedKeys() {
-        return this.store.getHalfCheckedKeys();
-      },
-
-      setCurrentNode(node) {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
-        this.store.setUserCurrentNode(node);
-      },
-
-      setCurrentKey(key) {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
-        this.store.setCurrentNodeKey(key);
-      },
-
-      getNode(data) {
-        return this.store.getNode(data);
-      },
-
-      remove(data) {
-        this.store.remove(data);
-      },
-
-      append(data, parentNode) {
-        this.store.append(data, parentNode);
-      },
-
-      insertBefore(data, refNode) {
-        this.store.insertBefore(data, refNode);
-      },
-
-      insertAfter(data, refNode) {
-        this.store.insertAfter(data, refNode);
-      },
-
-      handleNodeExpand(nodeData, node, instance) {
-        this.broadcast('ElTreeNode', 'tree-node-expand', node);
-        this.$emit('node-expand', nodeData, node, instance);
-      },
-
-      updateKeyChildren(key, data) {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
-        this.store.updateChildren(key, data);
-      },
-
-      initTabIndex() {
-        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
-        this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
-        const checkedItem = this.$el.querySelectorAll('.is-checked[role=treeitem]');
-        if (checkedItem.length) {
-          checkedItem[0].setAttribute('tabindex', 0);
-          return;
-        }
-        this.treeItems[0] && this.treeItems[0].setAttribute('tabindex', 0);
-      },
-
-      handleKeydown(ev) {
-        const currentItem = ev.target;
-        if (currentItem.className.indexOf('el-tree-node') === -1) return;
-        const keyCode = ev.keyCode;
-        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
-        const currentIndex = this.treeItemArray.indexOf(currentItem);
-        let nextIndex;
-        if ([38, 40].indexOf(keyCode) > -1) { // up、down
-          ev.preventDefault();
-          if (keyCode === 38) { // up
-            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
-          } else {
-            nextIndex = (currentIndex < this.treeItemArray.length - 1) ? currentIndex + 1 : 0;
-          }
-          this.treeItemArray[nextIndex].focus(); // 选中
-        }
-        if ([37, 39].indexOf(keyCode) > -1) { // left、right 展开
-          ev.preventDefault();
-          currentItem.click(); // 选中
-        }
-        const hasInput = currentItem.querySelector('[type="checkbox"]');
-        if ([13, 32].indexOf(keyCode) > -1 && hasInput) { // space enter选中checkbox
-          ev.preventDefault();
-          hasInput.click();
-        }
-      }
-    },
-
-    created() {
-      this.isTree = true;
-
-      this.store = new TreeStore({
-        key: this.nodeKey,
-        data: this.data,
-        lazy: this.lazy,
-        props: this.props,
-        load: this.load,
-        currentNodeKey: this.currentNodeKey,
-        checkStrictly: this.checkStrictly,
-        checkDescendants: this.checkDescendants,
-        defaultCheckedKeys: this.defaultCheckedKeys,
-        defaultExpandedKeys: this.defaultExpandedKeys,
-        autoExpandParent: this.autoExpandParent,
-        defaultExpandAll: this.defaultExpandAll,
-        filterNodeMethod: this.filterNodeMethod
-      });
-
-      this.root = this.store.root;
-
-      let dragState = this.dragState;
-      this.$on('tree-node-drag-start', (event, treeNode) => {
-        if (typeof this.allowDrag === 'function' && !this.allowDrag(treeNode.node)) {
-          event.preventDefault();
-          return false;
-        }
-        event.dataTransfer.effectAllowed = 'move';
-
-        // wrap in try catch to address IE's error when first param is 'text/plain'
-        try {
-          // setData is required for draggable to work in FireFox
-          // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox
-          event.dataTransfer.setData('text/plain', '');
-        } catch (e) {}
-        dragState.draggingNode = treeNode;
-        this.$emit('node-drag-start', treeNode.node, event);
-      });
-
-      this.$on('tree-node-drag-over', (event, treeNode) => {
-        const dropNode = findNearestComponent(event.target, 'ElTreeNode');
-        const oldDropNode = dragState.dropNode;
-        if (oldDropNode && oldDropNode !== dropNode) {
-          removeClass(oldDropNode.$el, 'is-drop-inner');
-        }
-        const draggingNode = dragState.draggingNode;
-        if (!draggingNode || !dropNode) return;
-
-        let dropPrev = true;
-        let dropInner = true;
-        let dropNext = true;
-        let userAllowDropInner = true;
-        if (typeof this.allowDrop === 'function') {
-          dropPrev = this.allowDrop(draggingNode.node, dropNode.node, 'prev');
-          userAllowDropInner = dropInner = this.allowDrop(draggingNode.node, dropNode.node, 'inner');
-          dropNext = this.allowDrop(draggingNode.node, dropNode.node, 'next');
-        }
-        event.dataTransfer.dropEffect = dropInner ? 'move' : 'none';
-        if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
-          if (oldDropNode) {
-            this.$emit('node-drag-leave', draggingNode.node, oldDropNode.node, event);
-          }
-          this.$emit('node-drag-enter', draggingNode.node, dropNode.node, event);
-        }
-
-        if (dropPrev || dropInner || dropNext) {
-          dragState.dropNode = dropNode;
-        }
-
-        if (dropNode.node.nextSibling === draggingNode.node) {
-          dropNext = false;
-        }
-        if (dropNode.node.previousSibling === draggingNode.node) {
-          dropPrev = false;
-        }
-        if (dropNode.node.contains(draggingNode.node, false)) {
-          dropInner = false;
-        }
-        if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
-          dropPrev = false;
-          dropInner = false;
-          dropNext = false;
-        }
-
-        const targetPosition = dropNode.$el.getBoundingClientRect();
-        const treePosition = this.$el.getBoundingClientRect();
-
-        let dropType;
-        const prevPercent = dropPrev ? (dropInner ? 0.25 : (dropNext ? 0.45 : 1)) : -1;
-        const nextPercent = dropNext ? (dropInner ? 0.75 : (dropPrev ? 0.55 : 0)) : 1;
-
-        let indicatorTop = -9999;
-        const distance = event.clientY - targetPosition.top;
-        if (distance < targetPosition.height * prevPercent) {
-          dropType = 'before';
-        } else if (distance > targetPosition.height * nextPercent) {
-          dropType = 'after';
-        } else if (dropInner) {
-          dropType = 'inner';
-        } else {
-          dropType = 'none';
-        }
-
-        const iconPosition = dropNode.$el.querySelector('.el-tree-node__expand-icon').getBoundingClientRect();
-        const dropIndicator = this.$refs.dropIndicator;
-        if (dropType === 'before') {
-          indicatorTop = iconPosition.top - treePosition.top;
-        } else if (dropType === 'after') {
-          indicatorTop = iconPosition.bottom - treePosition.top;
-        }
-        dropIndicator.style.top = indicatorTop + 'px';
-        dropIndicator.style.left = (iconPosition.right - treePosition.left) + 'px';
-
-        if (dropType === 'inner') {
-          addClass(dropNode.$el, 'is-drop-inner');
-        } else {
-          removeClass(dropNode.$el, 'is-drop-inner');
-        }
-
-        dragState.showDropIndicator = dropType === 'before' || dropType === 'after';
-        dragState.allowDrop = dragState.showDropIndicator || userAllowDropInner;
-        dragState.dropType = dropType;
-        this.$emit('node-drag-over', draggingNode.node, dropNode.node, event);
-      });
-
-      this.$on('tree-node-drag-end', (event) => {
-        const { draggingNode, dropType, dropNode } = dragState;
-        event.preventDefault();
-        event.dataTransfer.dropEffect = 'move';
-
-        if (draggingNode && dropNode) {
-          const draggingNodeCopy = { data: draggingNode.node.data };
-          if (dropType !== 'none') {
-            draggingNode.node.remove();
-          }
-          if (dropType === 'before') {
-            dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
-          } else if (dropType === 'after') {
-            dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
-          } else if (dropType === 'inner') {
-            dropNode.node.insertChild(draggingNodeCopy);
-          }
-          if (dropType !== 'none') {
-            this.store.registerNode(draggingNodeCopy);
-          }
-
-          removeClass(dropNode.$el, 'is-drop-inner');
-
-          this.$emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event);
-          if (dropType !== 'none') {
-            this.$emit('node-drop', draggingNode.node, dropNode.node, dropType, event);
-          }
-        }
-        if (draggingNode && !dropNode) {
-          this.$emit('node-drag-end', draggingNode.node, null, dropType, event);
-        }
-
-        dragState.showDropIndicator = false;
-        dragState.draggingNode = null;
-        dragState.dropNode = null;
-        dragState.allowDrop = true;
-      });
-    },
-
-    mounted() {
-      this.initTabIndex();
-      this.$el.addEventListener('keydown', this.handleKeydown);
-    },
-
-    updated() {
-      this.treeItems = this.$el.querySelectorAll('[role=treeitem]');
-      this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
-    }
-  };
-</script>

src/layouts/navbar/index.vue

@@ -150,10 +150,10 @@ export default {
             index: 'content',
             title: '内容管理',
             subs: [
-              {
+              // {
-                index: '/page',
+              //   index: '/page',
-                title: '页面管理'
+              //   title: '页面管理'
-              },
+              // },
               {
                 index: '/column',
                 title: '栏目管理'
@@ -181,7 +181,7 @@ export default {
         this.collapse = !!this.sites[0].subs.find(e => path.includes(e.index))
         // 刷新菜单
         if ((!ori && this.sites[0].subs.find(e => from.path.includes(e.index))) || path === '/site/list') {
-          this.siteActive = '/page'
+          this.siteActive = '/column'
           this.colRefresh = false
           this.$nextTick(() => {
             this.colRefresh = true

src/pages/column/list/index.vue

@@ -53,11 +53,13 @@
         </template>
       </el-table-column>
       <el-table-column v-if="settings[6].show" prop="id" label="ID" min-width="80"></el-table-column>
-      <el-table-column v-if="settings[7].show" label="操作" width="170">
+      <el-table-column v-if="settings[7].show" label="操作" width="240">
         <template slot-scope="scope">
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'" type="text" @click="edit(scope.row, 'add')">新增下级</el-button>
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text" @click="edit(scope.row, 'edit')">编辑</el-button>
           <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" type="text" @click="del(scope.row)">删除</el-button>
+          <el-button type="text" @click="preview(scope.row)">预览</el-button>
+          <el-button v-if="scope.row.typeId == 3" type="text" @click="page(scope.row)">页面设置</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -133,8 +135,9 @@
 </template>
 
 <script>
+import Setting from '@/setting'
 import ColumnConst from '@/const/column'
-import util from "@/libs/util";
+import util from '@/libs/util'
 export default {
     data() {
         return {
@@ -270,6 +273,14 @@ export default {
       switchOff(val, row) {
         this.$post(this.api.updateColumn, row).then(res => {}).catch((res) => {})
       },
+      // 预览
+      preview(row) {
+        window.open(`http://192.168.31.${Setting.isDev ? 126 : 136}:8095/#/channel?id=` + row.id)
+      },
+      // 页面管理
+      page(row) {
+        this.$router.push(`page?id=${row.id}`)
+      },
       // 批量删除
       batchDel() {
         const list = this.multipleSelection

src/pages/column/page/index.vue

@@ -0,0 +1,692 @@
+<template>
+  <div class="wrap">
+    <div class="actions">
+      <el-button type="primary" @click="preview">预览</el-button>
+      <el-button @click="save(0)">保存为草稿</el-button>
+      <el-button type="primary" @click="save(1)">发布</el-button>
+      <el-button @click="$router.back()">放弃编辑</el-button>
+    </div>
+
+    <div class="relative">
+      <img width="100%" height="500" src="@/assets/images/channel/channel-bg.png" alt="">
+      <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
+    </div>
+    
+    <div class="block">
+      <div class="inner">
+        <div class="c-wrap">
+          <h2 class="b-title">OUR FACILITIES</h2>
+          <p class="intro">IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.</p>
+          <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
+        </div>
+        <ul class="card">
+          <li>
+            <img width="100%" src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+            </div>
+            <div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div>
+          </li>
+          <li>
+            <img width="100%" src="@/assets/images/channel/channel2.png" alt="">
+            <div class="texts">
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+            </div>
+            <div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block news-block">
+      <div class="inner">
+        <div class="c-wrap">
+          <h2 class="b-title">Latest information</h2>
+          <p class="intro">Keep up with what happen with IASF</p>
+          <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
+        </div>
+        <ul class="news">
+          <li>
+            <img src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <div class="cover" @click="toSet(5)">点击更换标题与描述</div>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">Light Chasers' Home at IASF</h2>
+        <p class="intro">Keep up with what happen with IASF</p>
+        <ul class="people">
+          <li>
+            <img class="pic" src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+            </div>
+          </li>
+          <li>
+            <div class="texts">
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+            </div>
+            <img class="pic" src="@/assets/images/channel/channel2.png" alt="">
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="about">
+      <div class="inner">
+        <img src="@/assets/images/channel/about.png" alt="">
+        <div class="line"></div>
+        <div class="text">ABOUT</div>
+        <div class="des">
+          <p>The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.…</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="block" style="padding-bottom: 0">
+      <div class="inner">
+        <h2 class="glance">IASF at a glance</h2>
+        <ul class="stat">
+          <li>
+            <p class="num">2020</p>
+            <p class="text">The year IASF was founded</p>
+          </li>
+          <li>
+            <p class="num">2</p>
+            <p class="text">Facility projects</p>
+          </li>
+          <li>
+            <p class="num">240</p>
+            <p class="text">Employees</p>
+          </li>
+          <li>
+            <p class="num">10</p>
+            <p class="text">Academicians</p>
+          </li>
+          <li>
+            <p class="num">45%</p>
+            <p class="text">Hold doctorates or the highest degree in their field</p>
+          </li>
+          <li>
+            <p class="num">$32B+</p>
+            <p class="text">Facility construction need-based grant aid provided </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <Banner :data.sync="modules[curModule]" :visible.sync="diaVisible" />
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Banner from '@/components/modules/banner'
+export default {
+  data() {
+    return {
+      site: this.$store.state.content.site,
+      id: +this.$route.query.id,
+      modules: [
+        {
+          type: 'banner',
+          list: [
+            {
+              pic: '',
+              link: {
+                linkName: '无',
+                connectionType: 1,
+                linkAddress	: '',
+                isOpen: 1
+              },
+              isEnable: 1
+            }
+          ]
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: '',
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              linkAddress	: '',
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: '',
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              linkAddress	: '',
+            },
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '概述'
+            }
+          ],
+          form: {
+            title: '',
+            des: ''
+          }
+        },
+        {
+          type: 'form',
+          forms: [
+            {
+              type: 'upload',
+              prop: 'pic',
+              label: '图片',
+              required: true
+            },
+            {
+              type: 'input',
+              prop: 'title',
+              label: '标题',
+              required: true
+            },
+            {
+              type: 'link',
+              prop: 'link',
+              label: '链接'
+            },
+            {
+              type: 'textarea',
+              prop: 'des',
+              label: '描述'
+            }
+          ],
+          form: {
+            pic: '',
+            title: '',
+            link: {
+              linkName: '无',
+              connectionType: 1,
+              linkAddress	: '',
+            },
+            des: ''
+          }
+        },
+      ],
+      diaVisible: false,
+      curModule: 0
+    }
+  },
+  components: {
+    Banner,
+  },
+  watch: {
+    '$route'() {
+      this.id = this.$route.query.id
+      // this.getInfo()
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    // 展开模块设置
+    toSet(i) {
+      this.curModule = i
+      this.diaVisible = true
+    },
+    // 处理预览和保存的json
+    handleJson() {
+      const list = JSON.parse(JSON.stringify(this.modules))
+      list.map(e => {
+        if (e.type === 'form') delete e.forms
+      })
+      return JSON.stringify(list)
+    },
+    // 预览
+    preview() {
+      this.$post(this.api.saveRedisPage, {
+        columnId: this.id,
+        json: this.handleJson()
+      }).then(({ data }) => {
+        
+      }).catch(err => {})
+    },
+    // 保存
+    save(state) {
+      this.$post(this.api.savePage, {
+        columnId: this.id,
+        state,
+        sort: 1,
+        jsonBeforeEditing: this.handleJson(),
+        theEditedJson: this.handleJson(),
+      }).then(({ data }) => {
+        
+      }).catch(err => {})
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.actions {
+  margin-bottom: 20px;
+  text-align: right;
+}
+.c-wrap {
+  position: relative;
+}
+.block {
+  padding: 118px 0;
+  .b-title {
+    position: relative;
+    margin-bottom: 50px;
+    font-size: 50px;
+    line-height: 59px;
+    text-align: center;
+    color: #1F1F1F;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 70px;
+      left: 50%;
+      width: 136px;
+      height: 4px;
+      transform: translateX(-50%);
+      background: #1583FF;
+    }
+  }
+  .intro {
+    margin-bottom: 80px;
+    font-size: 30px;
+    text-align: center;
+    color: #5B5B5E;
+    line-height: 40px;
+  }
+  .card {
+    display: flex;
+    justify-content: space-between;
+    li {
+      position: relative;
+      width: 660px;
+    }
+    .texts {
+      padding-left: 22px;
+      margin-top: 60px;
+      border-left: 2px solid #DFE4E9;
+    }
+    h6 {
+      margin-bottom: 25px;
+      font-size: 24px;
+      color: #333;
+    }
+    .des {
+      font-size: 18px;
+      color: #222;
+      line-height: 30px;
+    }
+    .arrow {
+      cursor: pointer;
+    }
+  }
+
+  &.news-block {
+    background: url(../../../assets/images/channel/info-bg.png) 0 0/100% 100% no-repeat;
+  }
+  .news {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      display: inline-flex;
+      width: 686px;
+      padding: 34px;
+      margin-bottom: 28px;
+      background-color: #fff;
+      &:nth-child(odd) {
+        margin-right: 28px;
+      }
+    }
+    img {
+      width: 237px;
+      height: 167px;
+    }
+    .texts {
+      margin-left: 34px;
+    }
+    h6 {
+      font-size: 18px;
+      color: #0648A8;
+    }
+    .des {
+      margin: 14px 0;
+      font-size: 16px;
+      color: #333;
+      line-height: 22px;
+    }
+    .meta {
+      font-size: 16px;
+      color: #999;
+    }
+  }
+
+  .people {
+    li {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 126px;
+    }
+    .pic {
+      width: 660px;
+      height: 465px;
+    }
+    .texts {
+      width: 680px;
+      padding-top: 150px;
+    }
+    h6 {
+      font-size: 40px;
+    }
+    .des {
+      font-size: 18px;
+      color: #020202;
+      line-height: 30px;
+    }
+  }
+  
+  .glance {
+    padding-bottom: 50px;
+    font-size: 45px;
+    border-bottom: 1px solid #DEDEDE;
+  }
+  .stat {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin-top: 60px;
+    li {
+      width: 30%;
+      margin-bottom: 50px;
+    }
+    .num {
+      margin-bottom: 10px;
+      font-size: 60px;
+      font-weight: 800;
+      color: #035CE1;
+      line-height: 49px;
+    }
+    .text {
+      font-size: 24px;
+    }
+  }
+}
+.inner {
+  width: 1400px;
+  margin: 0 auto;
+}
+.about {
+  padding: 77px 0 198px;
+  background: url(../../../assets/images/channel/about-bg.png) 0 0/100% 100% no-repeat;
+  .line {
+    display: flex;
+    align-items: center;
+    margin: 50px 0 30px;
+    width: 88px;
+    height: 6px;
+    background-color: #fff;
+    &:after {
+      content: '';
+      width: 6px;
+      height: 6px;
+    }
+  }
+  .text {
+    font-size: 30px;
+    color: #fff;
+  }
+  .des {
+    padding: 38px 60px;
+    margin-top: 84px;
+    font-size: 30px;
+    color: #fff;
+    line-height: 42px;
+    text-align: center;
+    background: rgba(111, 69, 36, .56);
+    border-radius: 17px;
+  }
+}
+.cover {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  background-color: rgba(0, 0, 0, .5);
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(0, 0, 0, .7);
+  }
+}
+/deep/.module {
+  .el-table.module-table td {
+    .cell {
+      padding-top: 10px;
+    }
+    .link-wrap {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .set-link {
+      margin-left: 10px;
+    }
+    .del {
+      margin-left: 5px;
+      font-size: 18px;
+      color: #333;
+      cursor: pointer;
+    }
+  }
+  .plus {
+    margin-top: 10px;
+    font-size: 20px;
+    text-align: center;
+    color: $main-color;
+    cursor: pointer;
+  }
+}
+$avatar-width: 140px;
+$avatar-height: 80px;
+/deep/ .uploader {
+  .el-upload {
+    position: relative;
+    width: $avatar-width;
+    border: 1px dashed #d9d9d9;
+    border-radius: 2px;
+    cursor: pointer;
+    overflow: hidden;
+    &:hover {
+      border-color: #409EFF;
+    }
+    .uploader-default {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: $avatar-width !important;
+      height: $avatar-height;
+      text-align: center;
+      background: rgba(0, 0, 0, 0.04);
+      i {
+        font-size: 20px;
+        font-weight: bold;
+        color: #8c939d;
+      }
+      p {
+        margin-top: 10px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 1;
+      }
+    }
+    .avatar {
+      display: block;
+      width: $avatar-width;
+      height: $avatar-height;
+    }
+  }
+  .el-upload__tip {
+    margin-top: 0;
+    p {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 1;
+      &:first-child {
+        margin-bottom: 5px;
+      }
+    }
+  }
+}
+</style>

src/pages/page/add/index.vue

@@ -1,610 +1,397 @@
 <template>
-  <div class="page">
+  <div class="wrap">
-    <p class="page-name mb">栏目</p>
+    <div class="actions">
-    <el-form :model="form" :rules="rules" class="input-form model" label-width="120px">
+      <el-button type="primary">预览</el-button>
-      <div class="item-line">
+      <el-button>保存为草稿</el-button>
-        <el-form-item prop="columnName" label="栏目名称">
+      <el-button type="primary">发布</el-button>
-          <el-input
+      <el-button @click="$router.back()">放弃编辑</el-button>
-            placeholder="请输入栏目名称"
+    </div>
-            v-model.trim="form.columnName"
+
-            clearable
+    <div class="relative">
-            maxlength="15"
+      <img width="100%" height="500" src="@/assets/images/channel/channel-bg.png" alt="">
-            @change="nameChange"
+      <div class="cover" @click="toSet">点击更换banner与链接</div>
-          ></el-input>
+    </div>
-        </el-form-item>
+    
-        <el-form-item prop="fatherId" label="设置上级">
+    <div class="block">
-          <el-cascader
+      <div class="inner">
-            v-model="form.fatherId"
+        <h2 class="b-title">OUR FACILITIES</h2>
-            :options="columns"
+        <p class="intro">IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.</p>
-            :props="columnProps"
+        <ul class="card">
-            clearable></el-cascader>
+          <li>
-        </el-form-item>
+            <img width="100%" src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+            </div>
+          </li>
+          <li>
+            <img width="100%" src="@/assets/images/channel/channel2.png" alt="">
+            <div class="texts">
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
+            </div>
+          </li>
+        </ul>
       </div>
-      <div class="item-line">
+    </div>
-        <el-form-item prop="typeId" label="栏目类型">
+    
-          <el-select v-model="form.typeId">
+    <div class="block news-block">
-            <el-option
+      <div class="inner">
-              v-for="item in types"
+        <h2 class="b-title">Latest information</h2>
-              :key="item.id"
+        <p class="intro">Keep up with what happen with IASF</p>
-              :label="item.name"
+        <ul class="news">
-              :value="item.id">
+          <li>
-            </el-option>
+            <img src="@/assets/images/channel/channel1.png" alt="">
-          </el-select>
+            <div class="texts">
-        </el-form-item>
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
-        <el-form-item prop="pageSize" label="分页条数">
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
-          <el-input-number v-model="form.pageSize" :min="0" class="auto"></el-input-number>
+              <span class="meta">2022.08.12</span>
-        </el-form-item>
+            </div>
-        <el-form-item prop="menuVisible" label="导航菜单可见">
+          </li>
-          <el-switch
+          <li>
-            v-model="form.menuVisible"
+            <img src="@/assets/images/channel/channel1.png" alt="">
-            :active-value="0"
+            <div class="texts">
-            :inactive-value="1">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
-          </el-switch>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
-        </el-form-item>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/channel/channel1.png" alt="">
+            <div class="texts">
+              <h6>2022 New Year Message from President Sun Dongbai</h6>
+              <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
+              <span class="meta">2022.08.12</span>
+            </div>
+          </li>
+        </ul>
       </div>
-      <div class="line"></div>
+    </div>
-      <template v-if="form.typeId === 1 || form.typeId === 4">
+    
-        <el-form-item prop="columnBanner" label="栏目Banner">
+    <div class="block">
-          <el-upload
+      <div class="inner">
-            class="avatar-uploader avatar-uploader-lg"
+        <h2 class="b-title">Light Chasers' Home at IASF</h2>
-            accept=".jpg,.png,.jpeg,.gif"
+        <p class="intro">Keep up with what happen with IASF</p>
-            :before-upload="beforeUpload"
+        <ul class="people">
-            :on-remove="handleRemove"
+          <li>
-            :on-error="uploadError"
+            <img class="pic" src="@/assets/images/channel/channel1.png" alt="">
-            :on-success="uploadSuccess"
+            <div class="texts">
-            :show-file-list="false"
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
-            :action="this.api.upload"
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
-            :data="{
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
-              quote: form.columnName,
-              site: site.siteName,
-              uploader: userName
-            }"
-          >
-            <img v-if="form.columnBanner" :src="form.columnBanner" class="avatar-lg">
-            <div class="uploader-default" v-else>
-              <img class="plus" src="@/assets/images/plus.png" alt="">
-              <p>点击上传</p>
             </div>
-            <div slot="tip" class="el-upload__tip">
+          </li>
-              <p>请上传1920x500PX，1M以内的jpg，bmp，png格式</p>
+          <li>
+            <div class="texts">
+              <h6>Shenzhen Innovation Lightsource Facility </h6>
+              <p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
+              <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
             </div>
-          </el-upload>
+            <img class="pic" src="@/assets/images/channel/channel2.png" alt="">
-        </el-form-item>
+          </li>
-        <el-form-item prop="templateId" label="栏目模板">
+        </ul>
-          <el-select v-model="form.templateId">
+      </div>
-            <el-option
+    </div>
-              v-for="item in templates"
+
-              :key="item.id"
+    <div class="about">
-              :label="item.name"
+      <div class="inner">
-              :value="item.id">
+        <img src="@/assets/images/channel/about.png" alt="">
-            </el-option>
+        <div class="line"></div>
-          </el-select>
+        <div class="text">ABOUT</div>
-        </el-form-item>
+        <div class="des">
-        <el-form-item prop="listStyleId" label="列表样式">
+          <p>The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.…</p>
-          <ul class="styles">
+        </div>
-            <li v-for="(item, i) in listStyle" :key="i" @click="form.listStyleId = item.id">
+      </div>
-              <div class="review">
-                <img :src="require('@/assets/images/list' + item.id + '.png')" alt="">
-              </div>
-              <el-radio v-model="form.listStyleId" :label="item.id">{{ item.name }}</el-radio>
-            </li>
-          </ul>
-        </el-form-item>
-        <el-form-item prop="detailStyle" label="详情样式">
-          <ul class="styles">
-            <li v-for="(item, i) in detailStyle" :key="i" @click="form.detailStyle = item.id">
-              <div class="review">
-                <img :src="require('@/assets/images/article' + item.id + '.png')" alt="">
-              </div>
-              <el-radio v-model="form.detailStyle" :label="item.id">{{ item.name }}</el-radio>
-            </li>
-          </ul>
-        </el-form-item>
-      </template>
-      <template v-if="form.typeId === 2">
-        <el-form-item prop="connectionType" label="连接类型">
-          <el-radio-group v-model="form.connectionType">
-            <el-radio :label="1">站内链接</el-radio>
-            <el-radio :label="2">站外链接</el-radio>
-            <el-radio :label="3">其他站点链接</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <template v-if="form.connectionType === 1">
-          <el-form-item label="站内链接">
-            <el-cascader
-              v-model="links"
-              :options="columns"
-              :props="columnProps"
-              clearable
-              @change="getArticle"></el-cascader>
-          </el-form-item>
-          <el-form-item label="文章">
-            <el-select v-model="article">
-              <el-option
-                v-for="item in articles"
-                :key="item.id"
-                :label="item.title"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </template>
-        <el-form-item v-show="form.connectionType === 2" prop="linkAddress" label="站外链接">
-          <el-input
-            placeholder="请输入站外链接"
-            v-model.trim="form.linkAddress"
-            clearable
-          ></el-input>
-        </el-form-item>
-        <template v-if="form.connectionType === 3">
-          <el-form-item prop="siteSelection" label="站点选择">
-            <el-select v-model="form.siteSelection">
-              <el-option
-                v-for="item in sites"
-                :key="item.id"
-                :label="item.siteName"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="栏目">
-            <el-cascader
-              v-model="otherLink"
-              :options="columns"
-              :props="columnProps"
-              clearable
-              @change="getArticle"></el-cascader>
-          </el-form-item>
-          <el-form-item label="文章">
-            <el-select v-model="otherArticle">
-              <el-option
-                v-for="item in articles"
-                :key="item.id"
-                :label="item.title"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </template>
-        <el-form-item prop="isOpen" label="新窗口打开">
-          <el-switch
-            v-model="form.isOpen"
-            :active-value="1"
-            :inactive-value="0">
-          </el-switch>
-        </el-form-item>
-      </template>
-      <template v-if="form.typeId === 3">
-        <el-form-item prop="templateId" label="栏目模板">
-          <el-select v-model="form.templateId">
-            <el-option
-                v-for="item in templates"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="listStyleId" label="列表样式">
-          <ul class="styles">
-            <li>
-              <div class="review">
-                <img src="@/assets/images/list1.png" alt="">
-              </div>
-              <el-radio v-model="form.listStyleId" :label="1">图片列表</el-radio>
-            </li>
-            <li>
-              <div class="review">
-                <img src="@/assets/images/list2.png" alt="">
-              </div>
-              <el-radio v-model="form.listStyleId" :label="2">新闻列表</el-radio>
-            </li>
-            <li>
-              <div class="review">
-                <img src="@/assets/images/list2.png" alt="">
-              </div>
-              <el-radio v-model="form.listStyleId" :label="3">出版物列表</el-radio>
-            </li>
-          </ul>
-        </el-form-item>
-      </template>
-      <el-form-item v-show="form.typeId === 4" prop="showWithDetails" label="只有一篇文章时，以详情方式展示">
-        <el-switch
-          v-model="form.showWithDetails"
-          :active-value="1"
-          :inactive-value="0">
-        </el-switch>
-      </el-form-item>
-    </el-form>
-    <div class="btns">
-      <el-button type="primary" @click="submit(0)">确定</el-button>
-      <el-button @click="$router.back()">取消</el-button>
     </div>
+
+    <div class="block" style="padding-bottom: 0">
+      <div class="inner">
+        <h2 class="glance">IASF at a glance</h2>
+        <ul class="stat">
+          <li>
+            <p class="num">2020</p>
+            <p class="text">The year IASF was founded</p>
+          </li>
+          <li>
+            <p class="num">2</p>
+            <p class="text">Facility projects</p>
+          </li>
+          <li>
+            <p class="num">240</p>
+            <p class="text">Employees</p>
+          </li>
+          <li>
+            <p class="num">10</p>
+            <p class="text">Academicians</p>
+          </li>
+          <li>
+            <p class="num">45%</p>
+            <p class="text">Hold doctorates or the highest degree in their field</p>
+          </li>
+          <li>
+            <p class="num">$32B+</p>
+            <p class="text">Facility construction need-based grant aid provided </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <el-dialog title="Banner模块管理" :visible.sync="moduleVisible" width="600px" :close-on-click-modal="false">
+      
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="moduleVisible = false">取消</el-button>
+        <el-button type="primary" @click="moduleSubmit">确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
+
 <script>
-import util from "@/libs/util";
+import Setting from '@/setting'
-import ColumnConst from '@/const/column'
+import Util from '@/libs/util'
-import { mapState } from 'vuex'
 export default {
-    data() {
+  data() {
-        return {
+    return {
-          site: this.$store.state.content.site,
+      id: this.$route.query.id,
-          isEdit: this.$route.query.type === 'edit',
+      form: {},
-          nameRepeat: false,
+      moduleVisible: false
-          listStyle: ColumnConst.listStyle,
+    }
-          detailStyle: ColumnConst.detailStyle,
+  },
-          types: ColumnConst.types,
+  watch: {
-          templates: ColumnConst.templates,
+    '$route'() {
-          sites: [],
+      this.id = this.$route.query.id
-          columns: [],
+      // this.getInfo()
-          articles: [],
+    }
-          columnProps: {
+  },
-            checkStrictly: true,
+  mounted() {
-            value: 'id',
+    
-            label: 'columnName'
+  },
-          },
+  methods: {
-          links: [],
+    // 获取文章详情
-          article: '',
+    getInfo() {
-          otherLink: [],
+      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
-          otherArticle: '',
+        this.form = data
-          form: {
+        this.columnId = data.columnId
-            siteId: this.$store.state.content.site.id,
+      }).catch(err => {})
-            id: this.$route.query.id || '',
-            founderId: this.$store.state.user.userId,
-            editorId: this.$store.state.user.userId,
-            fatherId: +this.$route.query.id || 0,
-            level: this.$route.query.level || 1,
-            columnName: '',
-            typeId: 1,
-            pageSize: 10,
-            menuVisible: 0,
-            columnBanner: '',
-            templateId: 1,
-            listStyleId: 1,
-            detailStyle: 1,
-            connectionType: 1,
-            linkAddress	: '',
-            showWithDetails: 0,
-            siteSelection: 1,
-            status: 1,
-            sort: 1,
-            isOpen: 1
-          },
-          rules: {
-            columnName: [
-              { required: true, message: '请输入栏目名称', trigger: 'blur' }
-            ],
-            typeId: [
-              { required: true, message: '请选择栏目类型', trigger: 'change' }
-            ],
-            pageSize: [
-              { required: true, message: '请输入分页条数', trigger: 'blur' }
-            ],
-            templateId: [
-              { required: true, message: '请输入栏目名称', trigger: 'blur' }
-            ],
-            listStyleId: [
-              { required: true, message: '请选择栏目模板', trigger: 'change' }
-            ],
-            detailStyle: [
-              { required: true, message: '请选择详情样式', trigger: 'change' }
-            ],
-            connectionType: [
-              { required: true, message: '请选择连接类型', trigger: 'blur' }
-            ],
-          },
-          submiting: false, // 新增编辑防抖标识
-          updateTime: 0
-        };
-    },
-    computed: {
-      ...mapState('user', [
-        'userName'
-      ])
-    },
-    mounted() {
-      this.$store.commit('user/setCrumbs', [
-        {
-          name: '站点管理',
-          route: '/site'
-        },
-        {
-          name: '内容管理'
-        },
-        {
-          name: '栏目管理',
-          route: '/column'
-        },
-        {
-          name: this.$route.query.type === 'edit' ? '编辑' : '新增'
-        }
-      ])
-      this.getList()
-      this.getSite()
-    },
-    watch: {
-      // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
-      form: {
-        handler(val){
-          this.updateTime++
-        },
-        deep:true
-      },
     },
-    // 页面离开的时候如果没有保存则提示
+    // 展开模块设置
-    beforeRouteLeave(to, from, next) {
+    toSet() {
-      if (this.submiting) {
+      this.moduleVisible = true
-        next()
-      } else {
-        const { id } = this.form
-        const { updateTime } = this
-        // 更改了信息才需要提示
-        if ((!id && updateTime) || (id && updateTime > 1)) {
-          this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', {
-            type: 'warning'
-          }).then(() => {
-            this.submit(next)
-          }).catch(() => {
-            next()
-          })
-        } else {
-          next()
-        }
-      }
-    console.log("🚀 ~ file: index.vue ~ line 336 ~ beforeRouteLeave ~ to", to, this.updateTime)
     },
-    methods: {
+    // 模块设置提交
-      // 栏目列表
+    moduleSubmit() {
-      getList() {
+      
-        this.$post(this.api.listWithTree, {
-          siteId: this.site.id,
-          columnName: '',
-          templateId: '',
-          typeId	: '',
-        }).then(({ data }) => {
-          this.columns = data
-          this.isEdit && this.getData()
-        }).catch(err => {})
-      },
-      // 文章列表
-      getArticle() {
-        // 站内链接/其他站点链接
-        const id = this.form.connectionType === 1 ? this.links[this.links.length - 1] : this.otherLink[this.otherLink.length - 1]
-        this.$post(this.api.queryArticle, {
-          siteId: this.site.id,
-          columnIds: [id],
-          pageNum: 1,
-          pageSize: 1000,
-          title: ''
-        }).then(({ data }) => {
-          this.articles = data.records.filter(e => e.isRelease) // 只显示已发布的文章
-        }).catch(err => {})
-      },
-      // 获取详情
-      getData() {
-        this.$post(`${this.api.findColumn}?id=${this.form.id}`).then(({ data }) => {
-          this.form = data
-          if (data.typeId === 2) {
-            let link = data.linkAddress
-            if (link) {
-              link = link.split(',').map(e => +e)
-              const article = +link.splice(link.length - 1, 1) // 获取文章id（文章id是附在linkAddress最后面的id）
-              // 获取文章
-              this.$post(this.api.queryArticle, {
-                siteId: this.site.id,
-                columnIds: [link[link.length - 1]], // 截取走最后面的文章id，最后一个id就是栏目id
-                pageNum: 1,
-                pageSize: 1000,
-                title: ''
-              }).then(res => {
-                this.articles = res.data.records
-                // 站内链接/其他站点链接
-                if (data.connectionType === 1) {
-                  this.links = link
-                  this.form.linkAddress = ''
-                  this.article = article
-                } else if (data.connectionType === 3) {
-                  this.otherLink = link
-                  this.form.linkAddress = ''
-                  this.otherArticle = article
-                }
-              }).catch(err => {})
-            }
-          }
-        }).catch(err => {})
-      },
-      // 获取站点列表
-      getSite() {
-        this.$post(this.api.site, {
-          page: 1,
-          limit: 1000,
-          siteName: ''
-        }).then(({ data }) => {
-          this.sites = data.records
-        }).catch(e => {})
-      },
-      // 栏目名称判重
-      nameChange(){
-        const { columnName, level, id } = this.form
-        if (columnName && columnName !== this.originalName) {
-          this.$post(this.api.sameLevelJudgment, {
-            siteId: this.site.id,
-            columnName,
-            level: +level,
-            id: +id || ''
-          }).then(res => {
-            this.nameRepeat = false
-          }).catch(res => {
-            this.nameRepeat = true
-          })
-        }else{
-          this.nameRepeat = false
-        }
-      },
-      // 导入前的钩子
-      beforeUpload(file) {
-        const { size, name } = file
-        const ext = name.substring(name.lastIndexOf('.') + 1)
-        if (!util.isImg(ext)) {
-          this.$message.error('请上传图片！')
-          return false
-        }
-        if (size / 1024 / 1024 > 1) {
-          this.$message.error('请上传1M以内的图片！')
-          return false
-        }
-      },
-      uploadError(err, file, fileList) {
-        this.$message({
-          message: "上传出错，请重试！",
-          type: "error",
-          center: true
-        })
-      },
-      handleRemove(file, fileList) {
-        this.form.columnBanner = ''
-      },
-      uploadSuccess(res) {
-        let url = this.form.columnBanner
-        url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
-        this.form.columnBanner = res.url
-      },
-      // 预览
-      preview() {
-
-      },
-      // 提交
-      submit(next) {
-        if (this.submiting) return false
-        const { form } = this
-        if (!form.columnName) return util.errorMsg('请填写栏目名称')
-        if (this.nameRepeat) return util.errorMsg('同级下已存在重复栏目!')
-        if (!form.pageSize) return util.errorMsg('请填写分页条数')
-        if (typeof form.fatherId	=== 'object') form.fatherId	= form.fatherId[form.fatherId.length - 1] // 选择了上级后结果会是数组，直接取最后一个id
-        if (form.typeId === 2 && form.connectionType !== 2) {
-          const { links, article, otherLink, otherArticle } = this
-          if (form.connectionType === 1) {
-            if (!links.length) return util.errorMsg('请选择站内链接')
-            if (!article) return util.errorMsg('请选择文章')
-            form.linkAddress = links.join() + ',' + article
-          }
-          if (form.connectionType === 3) {
-            if (!otherLink.length) return util.errorMsg('请选择栏目')
-            if (!otherArticle) return util.errorMsg('请选择文章')
-            form.linkAddress = otherLink.join() + ',' + otherArticle
-          }
-        }
-        this.submiting = true
-        if (this.isEdit) {
-          delete form.children
-          form.editorId = +this.$store.state.user.userId
-          this.$post(this.api.updateColumn, form).then(res => {
-            util.successMsg("修改成功")
-            next ? next() : this.$router.back()
-          }).catch(err => {
-            this.submiting = false
-          })
-        } else {
-          this.$post(this.api.saveColumn, form).then(res => {
-            util.successMsg("创建成功")
-            next ? next() : this.$router.back()
-          }).catch(err => {
-            this.submiting = false
-          })
-        }
-      }
     }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-$upload-width: 220px;
+.actions {
-$upload-height: 102px;
+  margin-bottom: 20px;
-$upload-lg-height: 102px;
+  text-align: right;
-/deep/ .avatar-uploader {
+}
-  .el-upload {
+.block {
+  padding: 118px 0;
+  .b-title {
     position: relative;
-    width: $upload-width;
+    margin-bottom: 50px;
-    height: $upload-height;
+    font-size: 50px;
-    border: 1px solid #DCDEE0;
+    line-height: 59px;
-    border-radius: 2px;
+    text-align: center;
-    cursor: pointer;
+    color: #1F1F1F;
-    overflow: hidden;
+    &:after {
-    .uploader-default {
+      content: '';
-      display: flex;
+      position: absolute;
-      height: $upload-height;
+      top: 70px;
-      flex-direction: column;
+      left: 50%;
-      justify-content: center;
+      width: 136px;
-      align-items: center;
+      height: 4px;
-      text-align: center;
+      transform: translateX(-50%);
-      background: #FAFAFA;
+      background: #1583FF;
-      p {
+    }
-        margin-top: 10px;
+  }
-        font-size: 14px;
+  .intro {
-        color: #333;
+    margin-bottom: 80px;
-        line-height: 20px;
+    font-size: 30px;
-      }
+    text-align: center;
+    color: #5B5B5E;
+    line-height: 40px;
+  }
+  .card {
+    display: flex;
+    justify-content: space-between;
+    li {
+      width: 660px;
+    }
+    .texts {
+      padding-left: 22px;
+      margin-top: 60px;
+      border-left: 2px solid #DFE4E9;
+    }
+    h6 {
+      margin-bottom: 25px;
+      font-size: 24px;
+      color: #333;
+    }
+    .des {
+      font-size: 18px;
+      color: #222;
+      line-height: 30px;
+    }
+    .arrow {
+      cursor: pointer;
     }
   }
-  &.avatar-uploader-lg {
-    .el-upload {
-      width: 100%;
-      max-width: 820px;
-      height: $upload-lg-height;
 
-      .uploader-default {
+  &.news-block {
-        height: $upload-lg-height;
+    background: url(../../../assets/images/channel/info-bg.png) 0 0/100% 100% no-repeat;
+  }
+  .news {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      display: inline-flex;
+      width: 686px;
+      padding: 34px;
+      margin-bottom: 28px;
+      background-color: #fff;
+      &:nth-child(odd) {
+        margin-right: 28px;
       }
     }
+    img {
+      width: 237px;
+      height: 167px;
+    }
+    .texts {
+      margin-left: 34px;
+    }
+    h6 {
+      font-size: 18px;
+      color: #0648A8;
+    }
+    .des {
+      margin: 14px 0;
+      font-size: 16px;
+      color: #333;
+      line-height: 22px;
+    }
+    .meta {
+      font-size: 16px;
+      color: #999;
+    }
   }
-  .avatar {
+
-    display: block;
+  .people {
-    width: $upload-width;
+    li {
-    height: $upload-height;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 126px;
+    }
+    .pic {
+      width: 660px;
+      height: 465px;
+    }
+    .texts {
+      width: 680px;
+      padding-top: 150px;
+    }
+    h6 {
+      font-size: 40px;
+    }
+    .des {
+      font-size: 18px;
+      color: #020202;
+      line-height: 30px;
+    }
   }
-  .avatar-lg {
+  
-    display: block;
+  .glance {
-    width: 100%;
+    padding-bottom: 50px;
-    height: $upload-lg-height;
+    font-size: 45px;
+    border-bottom: 1px solid #DEDEDE;
   }
-  .el-upload__tip {
+  .stat {
-    margin-top: 0;
+    display: flex;
-    p {
+    justify-content: space-around;
-      font-size: 12px;
+    flex-wrap: wrap;
-      color: #333;
+    margin-top: 60px;
+    li {
+      width: 30%;
+      margin-bottom: 50px;
+    }
+    .num {
+      margin-bottom: 10px;
+      font-size: 60px;
+      font-weight: 800;
+      color: #035CE1;
+      line-height: 49px;
+    }
+    .text {
+      font-size: 24px;
     }
   }
 }
-.style-wrap {
+.inner {
-  display: flex;
+  width: 1400px;
-  margin-top: 10px;
+  margin: 0 auto;
-  .label {
-    margin-right: 30px;
-  }
 }
-.styles {
+.about {
-  display: inline-flex;
+  padding: 77px 0 198px;
-  li {
+  background: url(../../../assets/images/channel/about-bg.png) 0 0/100% 100% no-repeat;
-    margin-right: 20px;
+  .line {
-    text-align: center;
-    cursor: pointer;
-    &:hover .review {
-      border-color: #2962FF;
-    }
-  }
-  .review {
     display: flex;
-    justify-content: center;
     align-items: center;
-    width: 170px;
+    margin: 50px 0 30px;
-    height: 112px;
+    width: 88px;
-    margin-bottom: 10px;
+    height: 6px;
-    border: 1px solid #DCDEE0;
+    background-color: #fff;
-    border-radius: 2px;
+    &:after {
+      content: '';
+      width: 6px;
+      height: 6px;
+    }
+  }
+  .text {
+    font-size: 30px;
+    color: #fff;
+  }
+  .des {
+    padding: 38px 60px;
+    margin-top: 84px;
+    font-size: 30px;
+    color: #fff;
+    line-height: 42px;
+    text-align: center;
+    background: rgba(111, 69, 36, .56);
+    border-radius: 17px;
   }
 }
-/deep/.input-form .auto .el-input {
+.cover {
-  width: 119px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  background-color: rgba(0, 0, 0, .5);
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(0, 0, 0, .7);
+  }
 }
 </style>

src/pages/page/list/index.vue

@@ -43,7 +43,7 @@
       <el-table-column v-if="settings[6].show" label="操作" width="170" align="center">
         <template slot-scope="scope">
           <el-button v-auth="'/site/list:' + site.siteName + ':内容管理:页面管理:预览'" type="text" @click="preview(scope.row)">预览</el-button>
-          <el-button v-auth="'/site/list:' + site.siteName + ':内容管理:页面管理:编辑'" type="text" @click="start(scope.row)">编辑</el-button>
+          <el-button v-auth="'/site/list:' + site.siteName + ':内容管理:页面管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button>
           <el-button v-auth="'/site/list:' + site.siteName + ':内容管理:页面管理:删除'" type="text" @click="start(scope.row)">删除</el-button>
         </template>
       </el-table-column>

src/pages/site/list/index.vue

@@ -104,7 +104,7 @@ export default {
       // 内容管理
       content(row) {
         this.setSite(row)
-        this.$router.push(`/page`)
+        this.$router.push(`/column`)
       },
     }
 };

src/router/modules/column.js

@@ -24,6 +24,12 @@ export default {
             path: `add`,
             component: () => import('@/pages/column/add/index.vue'),
             meta: { title: '添加栏目' }
+        },
+        {
+            name: `${pre}page`,
+            path: `page`,
+            component: () => import('@/pages/column/page/index.vue'),
+            meta: { title: '页面管理' }
         }
     ]
 }