第二版修改

src/router/wokes.js

@@ -32,5 +32,13 @@ export default [
   {
     path: '/frame/wokes/resource',
     component: () => import('../views/wokes/content/resource.vue')
+  },
+  {
+    path: '/frame/wokes/column',
+    component: () => import('../views/wokes/content/column.vue')
+  },
+  {
+    path: '/frame/wokes/journal',
+    component: () => import('../views/wokes/content/journal.vue')
   }
 ]

src/store/index.js

@@ -14,6 +14,8 @@ import content from './wokes/content'
 import files from './wokes/files'
 import links from './wokes/links'
 import banner from './wokes/banner'
+import column from './wokes/column'
+import journal from './wokes/journal'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
@@ -33,6 +35,10 @@ export default new Vuex.Store({
       result: [
         { value: '成功', title: '成功' },
         { value: '失败', title: '失败' }
+      ],
+      journalStatus: [
+        { value: '0', title: '正常' },
+        { value: '1', title: '停用' }
       ]
     }
   },
@@ -59,6 +65,8 @@ export default new Vuex.Store({
     content,
     files,
     links,
-    banner
+    banner,
+    column,
+    journal
   }
 })

src/store/wokes/column.js

@@ -0,0 +1,46 @@
+import axios from '@lib/plug/axios.js'
+const api = {
+  columnCreate: '/api/column/create',
+  columnUpdate: '/api/column/update',
+  columnDelete: '/api/column/delete',
+  columnQuery: '/api/column/query'
+}
+const state = () => ({
+  Total: 0,
+  columnList: []
+})
+
+const actions = {
+  async columnCreate ({ commit }, payload) {
+    const res = await axios.post(api.columnCreate, payload)
+    return res
+  },
+  async columnUpdate ({ commit }, payload) {
+    const res = await axios.post(api.columnUpdate, { ...payload, id: payload._id })
+    return res
+  },
+  async columnDelete ({ commit }, { id }) {
+    const res = await axios.delete(`${api.columnDelete}/${id}`)
+    return res
+  },
+  async columnQuery ({ commit }, { filter, paging } = {}) {
+    const res = await axios.get(api.columnQuery, { ...filter, skip: paging.page, limit: paging.size })
+    commit('columnQuery', res)
+    return res
+  }
+}
+
+const mutations = {
+  columnQuery (state, payload) {
+    state.columnList = payload.data
+    state.Total = payload.total
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  modules: {}
+}

src/store/wokes/journal.js

@@ -0,0 +1,93 @@
+import axios from '@lib/plug/axios.js'
+const api = {
+  catalogueCreate: '/api/catalogue/create',
+  catalogueUpdate: '/api/catalogue/update',
+  catalogueDelete: '/api/catalogue/delete',
+  catalogueQuery: '/api/catalogue/query',
+  catalogueFetch: '/api/catalogue/fetch',
+  dictQuery: '/api/code/dictionary/query',
+  journalQuery: '/api/journal/intact/query',
+  userQuery: '/api/reader/user/query'
+}
+const state = () => ({
+  Total: 0,
+  catalogueList: [],
+  journalList: [],
+  dict: {},
+  userList: [],
+  userTotal: 0
+})
+
+const actions = {
+  async userQuery ({ commit }, { filter, paging } = {}) {
+    const res = await axios.get(api.userQuery, { ...filter, skip: paging.page, limit: paging.size })
+    commit('userQuery', res)
+    return res
+  },
+  async catalogueCreate ({ commit }, payload) {
+    const res = await axios.post(api.catalogueCreate, payload)
+    return res
+  },
+  async catalogueUpdate ({ commit }, payload) {
+    const res = await axios.post(api.catalogueUpdate, { ...payload, id: payload._id })
+    return res
+  },
+  async catalogueDelete ({ commit }, { id }) {
+    const res = await axios.delete(`${api.catalogueDelete}/${id}`)
+    return res
+  },
+  async catalogueQuery ({ commit }, { filter, paging } = {}) {
+    const res = await axios.get(api.catalogueQuery, { ...filter, skip: paging.page, limit: paging.size })
+    commit('catalogueQuery', res)
+    return res
+  },
+  async catalogueFetch ({ commit }, payload) {
+    const res = await axios.get(api.catalogueFetch, payload)
+    return res
+  },
+  async statusQuery ({ commit }) {
+    const res = await axios.get(api.dictQuery, { parentCode: 'journalStatus' })
+    commit('statusQuery', res)
+    return res
+  },
+  async columnQuery ({ commit }) {
+    const res = await axios.get(api.dictQuery, { parentCode: 'journalcolumn' })
+    commit('columnQuery', res)
+    return res
+  },
+  async journalQuery ({ commit }, payload) {
+    const res = await axios.get(api.journalQuery, payload)
+    commit('journalQuery', res)
+    return res
+  }
+}
+
+const mutations = {
+  catalogueQuery (state, payload) {
+    state.catalogueList = payload.data
+    state.Total = payload.total
+  },
+  statusQuery (state, payload) {
+    state.dict.journalStatus = payload.data
+  },
+  columnQuery (state, payload) {
+    state.dict.journalcolumn = payload.data
+  },
+  journalQuery (state, payload) {
+    payload.data = payload.data.map(e => ({ ...e, code: e._id }))
+    state.dict.journalQuery = payload.data
+    state.journalList = payload.data
+  },
+  userQuery (state, payload) {
+    state.userList = payload.data.map(e => e.userList[0])
+    state.userTotal = payload.total
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations,
+  modules: {}
+}

src/views/wokes/configuration/webconfig.vue

@@ -22,6 +22,9 @@
               <img v-if="imageUrl" :src="imageUrl" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
+            <el-switch v-if="item.name == 'isshow'" @change="swchage" v-model="configurationdata[item.name]" active-color="#13ce66" inactive-color="#ff4949" :active-value="true" :inactive-value="false"></el-switch>
+            <!-- 富文本 -->
+            <editor-bar v-if="item.name == 'isname'" v-model="configurationdata[item.name]" @change="editorChage" :isClear="false"></editor-bar>
           </template>
         </naf-form>
       </div>
@@ -31,12 +34,14 @@
 
 <script>
 import nafForm from '@naf/data/form'
+import editorBar from '@naf/data/editoritem'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState, mapActions } = createNamespacedHelpers('webconfig')
 const token = sessionStorage.getItem('token')
 export default {
   components: {
-    nafForm
+    nafForm,
+    editorBar
   },
   data () {
     return {
@@ -52,7 +57,9 @@ export default {
         { name: 'address', title: '地址', size: 'medium' },
         { name: 'mail', title: '邮箱', size: 'medium' },
         { name: 'postcode', title: '邮编', size: 'medium' },
-        { name: 'record', title: '备案号', size: 'medium' }
+        { name: 'record', title: '备案号', size: 'medium' },
+        { name: 'isshow', title: '是否显示飘窗', slots: 'field' },
+        { name: 'isname', title: '飘窗文字', slots: 'field' }
       ],
       rules: {
         name: [
@@ -103,6 +110,14 @@ export default {
         }
       }
     },
+    // 开关改变钩子
+    swchage (e) {
+      this.$refs.ruleForm.formChage('isshow', Boolean(e))
+    },
+    // f富文本改变钩子
+    editorChage (e) {
+      this.$refs.ruleForm.formChage('isname', e)
+    },
     // 文件上传成功时的钩子
     handleAvatarSuccess (res, file) {
       this.is_data = { ...this.$refs.ruleForm.form }
@@ -132,7 +147,6 @@ export default {
     const res = await this.configurationquery()
     // eslint-disable-next-line eqeqeq
     if (res.errcode == 0) {
-      console.log(this.configurationdata)
       this.imageUrl = this.configurationdata.path
       this.$refs.ruleForm.reset()
     }

src/views/wokes/content/column.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="box">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>栏目管理</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="addcolumn">添加栏目</el-button>
+      </div>
+      <div class="main">
+        <!-- <filterList ref="filterList" :tableData="columnList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList> -->
+        <naf-grid class="grid" ref="grid" @edit="filtereEdit" @delete="filterDelete" :data="columnList" :meta="filed" :total="Total" @query="filterQuery"></naf-grid>
+      </div>
+    </el-card>
+    <el-card class="box-dj" v-if="visibleSync">
+      <div slot="header" class="clearfix">
+        <span>{{ isNew ? '修改文章' : '添加文章' }}</span>
+        <span class="close" @click="close">x</span>
+      </div>
+      <div class="main">
+        <naf-form v-if="visibleSync" ref="ruleForm" @save="formSave" :meta="formfiled" :rules="formrules" :data="formdata" :close="true" @close="close"></naf-form>
+       </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import nafGrid from '@naf/data/tables/naf-grid'
+import nafForm from '@naf/data/form'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState, mapActions } = createNamespacedHelpers('column')
+export default {
+  components: {
+    nafGrid,
+    nafForm
+  },
+  data () {
+    return {
+      title: '',
+      isNew: true,
+      visibleSync: false,
+      filed: [
+        { name: 'name', title: '名称', filter: true },
+        { name: 'code', title: '编码', filter: true }
+      ],
+      formdata: {},
+      formfiled: [
+        { name: 'name', title: '名称' },
+        { name: 'code', title: '编码' }
+      ],
+      formrules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入编码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapState(['columnList', 'Total'])
+  },
+  async mounted () {
+    await this.filterQuery()
+  },
+  methods: {
+    ...mapActions(['columnQuery', 'columnCreate', 'columnUpdate', 'columnDelete', 'columnQuery', 'queryBind', 'batchUnBind', 'batchBind']),
+    // 关闭弹窗
+    close () {
+      this.visibleSync = false
+    },
+    // 添加
+    addcolumn () {
+      this.formdata = {}
+      this.isNew = true
+      this.visibleSync = true
+    },
+    // 修改
+    filtereEdit (e) {
+      this.formdata = e
+      this.isNew = false
+      this.visibleSync = true
+    },
+    // 删除
+    async filterDelete (e) {
+      this.$confirm('请确认删除', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const res = await this.columnDelete({ id: e?._id })
+        // eslint-disable-next-line eqeqeq
+        if (res.errcode == 0) {
+          this.$message.success('操作成功')
+          this.filterQuery()
+          this.$refs.grid.resetpage(-1)
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    // 查询
+    async filterQuery ({ filter = {}, paging = { page: 0, size: 10 } } = {}) {
+      await this.columnQuery({ filter, paging })
+    },
+    // 表单保存
+    async formSave (e) {
+      let res
+      if (!this.isNew) {
+        // 修改
+        res = await this.columnUpdate(e)
+      } else {
+        // 添加
+        res = await this.columnCreate(e)
+      }
+      // eslint-disable-next-line eqeqeq
+      if (res.errcode == 0) {
+        this.$message.success('操作成功')
+        this.$refs.grid.resetpage(-1)
+        this.filterQuery()
+        this.visibleSync = false
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .box-card {
+    height: 100%;
+    .el-card__body {
+      height: 100%;
+    }
+  }
+  .clearfix {
+    position: relative;
+    .close {
+      position: absolute;
+      right: 10px;
+      top: 0;
+      cursor: pointer;
+    }
+  }
+  .box-dj {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    /deep/ .el-card__body {
+      height: 90%;
+      overflow-y: auto;
+      width: 100%;
+      .main {
+        width: 60%;
+        margin: 0 auto;
+        margin-bottom: 4em;
+      }
+    }
+  }
+}
+
+</style>

src/views/wokes/content/content.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="main">
         <el-tree
-          :data="menuList"
+          :data="columnList"
           default-expand-all
           :props="defaultProps"
           @node-click="treeClick"
@@ -56,9 +56,9 @@
               placeholder="选择日期">
             </el-date-picker>
             <!-- 菜单选择 -->
-            <el-select v-if="item.name == 'menus'" v-model="form[item.name]" placeholder="请选择绑定菜单">
+            <el-select multiple v-if="item.name == 'columns'" v-model="form[item.name]" placeholder="请选择绑定栏目">
               <el-option
-                v-for="item in menuList"
+                v-for="item in columnList"
                 :key="item._id"
                 :label="item.name"
                 :value="item.code">
@@ -101,7 +101,7 @@ import editorBar from '@naf/data/editoritem'
 import { createNamespacedHelpers, mapMutations } from 'vuex'
 const token = sessionStorage.getItem('token')
 const { mapState, mapActions } = createNamespacedHelpers('content')
-const { mapState: cmenusmapState, mapActions: menusmapActions } = createNamespacedHelpers('wokesmenu')
+const { mapState: columnmapState, mapActions: columnmapActions } = createNamespacedHelpers('column')
 export default {
   components: {
     nafGrid,
@@ -127,7 +127,7 @@ export default {
         { name: 'thumbnail', title: '缩略图', slots: 'field' },
         { name: 'title', title: '标题' },
         { name: 'date', title: '发表日期', slots: 'field' },
-        { name: 'menus', title: '绑定菜单', slots: 'field' },
+        { name: 'columns', title: '绑定栏目', slots: 'field' },
         { name: 'term', title: '文章期目', slots: 'end' },
         { name: 'sort', title: '排序', placeholder: '请输入数字 0 - 100' },
         { name: 'annex', title: '附件', slots: 'field' },
@@ -167,10 +167,11 @@ export default {
   },
   methods: {
     ...mapActions(['contentquery', 'contentcreate', 'contentupdate', 'contentdelete', 'contentdetails']),
-    ...menusmapActions(['menuquery']),
+    ...columnmapActions(['columnQuery']),
     ...mapMutations(['setcolumns']),
     // 点击树
     treeClick (data) {
+      console.log(data, 'data')
       this.is_title = data.name
       this.data = data
       this.query()
@@ -214,7 +215,7 @@ export default {
     },
     // 查询
     async query ({ filter = {}, paging = {} } = {}) {
-      filter.code = this.data.code
+      filter.columns = this.data.code
       await this.contentquery({ filter, paging })
     },
     // 保存按钮
@@ -303,19 +304,19 @@ export default {
     }
   },
   async mounted () {
-    const res = await this.menuquery({ filter: { type: 0 } })
+    const res = await await this.columnQuery({ paging: { page: 0, size: 100 } })
     // eslint-disable-next-line eqeqeq
     if (res.errcode == 0) {
       this.is_title = res.data[0].name
       this.$refs.deeptree.setCurrentKey(res.data[0].code)
       this.data = res.data[0]
       this.query()
-      this.setcolumns(this.menuList)
+      this.setcolumns(this.columnList)
     }
   },
   computed: {
     ...mapState(['total', 'contentList', 'contentItem']),
-    ...cmenusmapState(['menuList']),
+    ...columnmapState(['columnList']),
     isNew () {
       return Boolean(this.is_data && this.is_data._id)
     }

src/views/wokes/content/journal.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="box">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>期刊目录</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="addcatalogue">添加期刊</el-button>
+      </div>
+      <div class="main">
+        <naf-grid class="grid" ref="grid" @edit="filtereEdit" @delete="filterDelete" :data="catalogueList" :meta="filed" :total="Total" @query="filterQuery"></naf-grid>
+      </div>
+    </el-card>
+    <el-card class="box-dj" v-if="visibleSync">
+      <div slot="header" class="clearfix">
+        <span>{{ isNew ? '修改期刊' : '添加期刊' }}</span>
+        <span class="close" @click="close">x</span>
+      </div>
+      <div class="main">
+        <naf-form ref="ruleForm" @save="formSave" :meta="formfiled" :rules="formrules" :data="formdata" :close="true" @close="close">
+          <template v-slot:field="{ form, item }">
+            <!-- 选择日期 -->
+            <el-date-picker
+              value-format="yyyy-MM-dd"
+              v-model="form[item.name]"
+              v-if="item.name == 'date'"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>
+            <!-- 绑定栏目 -->
+            <el-select multiple v-if="item.name == 'bind'" v-model="form[item.name]" placeholder="请选择绑定栏目">
+              <el-option
+                v-for="item in columnList"
+                :key="item._id"
+                :label="item.name"
+                :value="item.code">
+              </el-option>
+            </el-select>
+            <!-- 附件上传 -->
+            <el-upload
+              v-if="item.name == 'url'"
+              :headers="myHeaders"
+              class="upload-demo"
+              action="/api/files/upload"
+              :on-success="handleAnnexSuccess"
+              :data="{ type: 'pdf' }"
+              :on-remove="handleRemove"
+              :before-upload="beforeFilesUpload"
+              :limit="1"
+              :on-exceed="handleExceed"
+              :file-list="fileList">
+              <el-button size="small" type="primary">PDF上传</el-button>
+            </el-upload>
+          </template>
+        </naf-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import nafGrid from '@naf/data/tables/naf-grid'
+import nafForm from '@naf/data/form'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState, mapActions } = createNamespacedHelpers('journal')
+const { mapState: columnmapState, mapActions: columnmapActions } = createNamespacedHelpers('column')
+const token = sessionStorage.getItem('token')
+export default {
+  components: {
+    nafGrid,
+    nafForm
+  },
+  data () {
+    return {
+      isNew: false,
+      isClear: false,
+      info: {},
+      lookUser: false,
+      fileList: [],
+      myHeaders: { Authorization: `Bearer ${token}` },
+      title: '',
+      visibleSync: false,
+      filed: [
+        { name: 'name', title: '标题', filter: true },
+        { name: 'date', title: '时间' },
+        { name: 'url', title: '文件路径' }
+      ],
+      formdata: {},
+      formfiled: [
+        { name: 'name', title: '标题' },
+        { name: 'describe', title: '描述' },
+        { name: 'status', title: '状态', formatter: 'journalStatus' },
+        { name: 'date', title: '时间', slots: 'field' },
+        { name: 'bind', title: '绑定栏目', slots: 'field' },
+        { name: 'url', title: 'PDF上传', slots: 'field' }
+      ],
+      formrules: {
+        name: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ],
+        describe: [
+          { required: true, message: '请输入描述', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', trigger: 'chage' }
+        ],
+        date: [
+          { required: true, message: '请输入时间', trigger: 'blur' }
+        ],
+        column: [
+          { required: true, message: '请输选择栏目', trigger: 'chage' }
+        ],
+        bind: [
+          { required: true, message: '请输选择栏目', trigger: 'chage' }
+        ],
+        url: [
+          { required: true, message: '请输选择PDF', trigger: 'chage' }
+        ],
+        content: [
+          { required: true, message: '请输输入内容', trigger: 'blur' }
+        ]
+      },
+      operation: [
+        { name: 'user', label: '读者', icon: 'el-icon-user' },
+        { name: 'edit', label: '修改', icon: 'el-icon-edit' },
+        { name: 'delete', label: '删除', icon: 'el-icon-delete' }
+      ],
+      userfiled: [
+        { name: 'name', label: '名称' },
+        { name: 'phone', label: '手机号' }
+      ]
+    }
+  },
+  computed: {
+    ...mapState(['catalogueList', 'Total', 'journalList', 'userList', 'userTotal']),
+    ...columnmapState(['columnList'])
+  },
+  async created () {
+    await this.columnQuery({ paging: { page: 0, size: 100 } })
+    await this.filterQuery()
+  },
+  methods: {
+    ...mapActions(['catalogueQuery', 'catalogueCreate', 'catalogueUpdate', 'catalogueDelete', 'catalogueFetch', 'journalQuery', 'userQuery']),
+    ...columnmapActions(['columnQuery']),
+    // 关闭弹窗
+    close () {
+      this.visibleSync = false
+      this.fileList = []
+    },
+    // 添加
+    addcatalogue () {
+      this.formdata = {}
+      this.title = '添加期刊'
+      this.visibleSync = true
+      this.isNew = false
+    },
+    // 修改
+    async filtereEdit (e) {
+      this.formdata = e
+      this.fileList.push({ name: e.filename, url: e.url })
+      this.title = '修改期刊'
+      this.visibleSync = true
+      this.isNew = true
+    },
+    // 删除
+    async filterDelete (e) {
+      this.$confirm('请确认删除', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const res = await this.catalogueDelete({ id: e?._id })
+        // eslint-disable-next-line eqeqeq
+        if (res.errcode == 0) {
+          this.$message.success('操作成功')
+          this.filterQuery()
+          this.$refs.grid.resetpage(-1)
+        }
+      }).catch((err) => {
+        console.log(err)
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    // 查询
+    async filterQuery ({ filter = {}, paging = { page: 0, size: 10 } } = {}) {
+      await this.catalogueQuery({ filter, paging })
+    },
+    // 表单保存
+    async formSave (e) {
+      console.log(e, 'eee')
+      let res
+      if (this.isNew) {
+        // 修改
+        res = await this.catalogueUpdate(e)
+      } else {
+        // 添加
+        res = await this.catalogueCreate(e)
+      }
+      // eslint-disable-next-line eqeqeq
+      if (res.errcode == 0) {
+        this.$message.success('操作成功')
+        this.filterQuery()
+        this.$refs.grid.resetpage(-1)
+        this.visibleSync = false
+        this.fileList = []
+      }
+    },
+    // 富文本改变
+    editChage (e) {
+      this.$refs.formData.setForm('content', e)
+    },
+    // 附件上传
+    handleAnnexSuccess (res, file) {
+      this.$refs.ruleForm.formChage('filename', res.data.name)
+      this.$refs.ruleForm.formChage('url', res.data.path)
+      this.fileList.push({ name: res.data.name, url: res.data.path })
+    },
+    // 删除附件列表
+    handleRemove (file, fileList) {
+      this.$refs.ruleForm.formChage('filename', null)
+      this.$refs.ruleForm.formChage('url', null)
+      delete this.fileList[0]
+    },
+    beforeFilesUpload (file) {
+      const isType = file.type === 'application/pdf'
+      // const isLt2M = file.size / 1024 / 1024 < 5
+      if (!isType) {
+        this.$message.error('请上传正确格式')
+      }
+      // if (!isLt2M) {
+      //   this.$message.error('上传图片大小不能超过 5MB!')
+      // }
+      return isType
+    },
+    // 文件超出个数限制时的钩子
+    handleExceed (files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .box-card {
+    height: 100%;
+    .el-card__body {
+      height: 100%;
+    }
+  }
+}
+.el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.el-upload:hover {
+  border-color: #409EFF;
+}
+.clearfix {
+  position: relative;
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    cursor: pointer;
+  }
+}
+.box-dj {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 999;
+  /deep/ .el-card__body {
+    height: 90%;
+    overflow-y: auto;
+    width: 100%;
+    .main {
+      width: 60%;
+      margin: 0 auto;
+      margin-bottom: 4em;
+    }
+  }
+}
+.avatar-uploader {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 150px;
+  height: 150px;
+  line-height: 150px;
+  text-align: center;
+}
+</style>

src/views/wokes/content/menu.vue

@@ -27,6 +27,16 @@
                 </el-option>
               </el-select>
             </el-form-item>
+            <el-form-item :label="item.title" v-if="item.name == 'column' && form.type == '0'" :prop="item.name">
+              <el-select v-model="form[item.name]" placeholder="请选择栏目" multiple>
+                <el-option
+                  v-for="item in columnList"
+                  :key="item._id"
+                  :label="item.name"
+                  :value="item._id">
+                </el-option>
+              </el-select>
+            </el-form-item>
           </template>
         </naf-form>
       </template>
@@ -41,6 +51,7 @@ import nafForm from '@naf/data/form'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState, mapActions } = createNamespacedHelpers('wokesmenu')
 const { mapState: pagesmapState, mapActions: pagesmapActions } = createNamespacedHelpers('pages')
+const { mapState: columnmapState, mapActions: columnmapActions } = createNamespacedHelpers('column')
 export default {
   components: {
     nafGrid,
@@ -66,6 +77,7 @@ export default {
         { name: 'type', title: '类型', formatter: 'type', disabled: false },
         { name: 'uri', title: '访问地址', slots: 'end' },
         { name: 'pages', title: '绑定单页', slots: 'end' },
+        { name: 'column', title: '绑定栏目', slots: 'end' },
         { name: 'en', title: '英文缩写' },
         { name: 'sort', title: '排序', placeholder: '请输入数字 0 - 100' }
       ],
@@ -91,6 +103,9 @@ export default {
         pages: [
           { required: true, message: '请选择单页', trigger: 'blur' }
         ],
+        column: [
+          { required: true, message: '请选择栏目', trigger: 'blur' }
+        ],
         sort: [
           { required: true, message: '请输入排序', trigger: 'blur' }
         ]
@@ -100,6 +115,7 @@ export default {
   methods: {
     ...mapActions(['menuquery', 'menucreate', 'menuupdate', 'menudelete']),
     ...pagesmapActions(['pagequery']),
+    ...columnmapActions(['columnQuery']),
     // 添加
     adduser () {
       this.is_data = {}
@@ -173,10 +189,12 @@ export default {
   async mounted () {
     this.query()
     await this.pagequery()
+    await this.columnQuery({ paging: { page: 0, size: 100 } })
   },
   computed: {
     ...mapState(['total', 'menuList']),
     ...pagesmapState(['pageList']),
+    ...columnmapState(['columnList']),
     isNew () {
       return Boolean(this.is_data && this.is_data._id)
     }