d2-crud-plus树形菜单

80 阅读 0 评论 53 点赞

我是靠谱客的博主落后招牌，最近开发中收集的这篇文章主要介绍d2-crud-plus树形菜单，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、api.js

import { request } from '@/api/service'
const apiPrefix = '接口地址'
export function GetList (query) {
  return request({
    url: apiPrefix + '/list',
    method: 'get',
    params: query
  }).then(ret => {
    ret.data = ret.data ? ret.data : {}
    ret.data.current = ret.result.current
    ret.data.size = ret.result.size
    ret.data.total = ret.result.total
    ret.data.records = ret.result.records
    return ret
  })
}
export function AddObj (obj) {
  return request({
    url: apiPrefix + '/add',
    method: 'post',
    data: obj
  })
}

export function UpdateObj (obj) {
  console.log(obj)
  return request({
    url: apiPrefix + '/edit',
    method: 'put',
    data: obj
  })
}

export function DelObj (id) {
  return request({
    url: apiPrefix + '/delete',
    method: 'delete',
    params: { id }
  })
}

export function GetObj (id) {
  return request({
    url: apiPrefix + '/queryById',
    method: 'get',
    params: { id }
  })
}

export function BatchDel (ids) {
  return request({
    url: apiPrefix +'/deleteBatch',
    method: 'delete',
    data: { ids }
  })
}

二、crud.js

import { request } from '@/api/service'
export const crudOptions = (vm) => {
  return {
    rowHandle: {
      width: 230,
      edit: {show:true,text: '编辑'},
      view: {show:true,text: '查看'},
      remove: {show:true,text: '删除'}
    },
    options:{
      height: '100%'
    },
    columns: [
      {
       title: '基本标识',
       key: 'id',
       width: 50,
       sortable: false,
       show:true,
       type: 'int',
       form: {
         disabled: true
       }
     },
     {
       title: '大赛ID',
       key: 'cid',
       width: 150,
       sortable: false,
       type: 'select',
       search: {
         disabled: true
       },
       form: {
          disabled: false,
       },
        dict: { url: '树形菜单接口地址', value: 'id', label: 'title' },
      },
     {
       title: '题目标题',
       key: 'title',
       width: 150,
       sortable: false,
       type: 'string',
      search: {
         disabled: false
       },
       form: {
         disabled: false
       },
     },
     {
       title: '题目图片',
       key: 'img',
       width: 100,
       sortable: false,
       type: 'image-uploader',
      search: {
         disabled: true
       },
       form: {
        component: {
            props: {
              btnSize: 'small', // type=file-uploader时按钮的大小
              btnName: '选择文件',// type=file-uploader时按钮文字
              accept: '', // 接受的文件后缀类型
              suffix: '', //url后缀，用于图片样式处理，需要到对象存储平台配置样式
              type: 'cos', // 当前使用哪种存储后端【cos/qiniu/alioss/form】
              elProps: { // 与el-uploader配置一致
                limit: 1 // 限制上传文件数量
              },
              uploader: {
                type: 'form', //与上方type作用一致，配置一个即可
                custom: {}, //自定义参数，可以在获取token、sts时传入不同的参数给后端
              }
            }
          }
        },
     },
       {
          title: '题目内容',
          key: 'content',
           width: 100,
          sortable: false,
          type: 'string',
          show:false,
          search: {
            disabled: true
          },
          form: {
            disabled: false
          },
       },
       {
          title: '题目要求',
          key: 'demand',
           width: 100,
          sortable: false,
          type: 'text-area',
          show:false,
          search: {
            disabled: true
          },
          form: {
            disabled: false
          },
       },

       {
          title: '时长/分钟',
          key: 'lengths',
           width: 100,
          sortable: false,
          type: 'int',
          show:false,
          search: {
            disabled: true
          },
          form: {
            disabled: false,
            rules: [{ pattern: /^d+$/, message: '必须为整数' }],
          },
       },
       {
          title: '材料要求',
          key: 'material',
           width: 100,
          sortable: false,
          type: 'string',
          show:false,
          search: {
            disabled: true
          },
          form: {
            disabled: false
          },
       },
       {
          title: '作品尺寸',
          key: 'sizes',
           width: 100,
          sortable: false,
          type: 'string',
          show:false,
          search: {
            disabled: true
          },
          form: {
            disabled: false
          },
       },
       {
         title: '专业组别',
         width: 150,
         key: 'typeId',
         type: 'tree-selector',
         dict: { url: '树形菜单接口地址', isTree: true, value: 'id', label: 'label' },
         form: {
           component: {
             span: 24,
             props: { multiple: false, clearable: true }
           },
           rules: [{ required: false, message: '请选择' }],//required: true必填
         }
       },
       {
         title: '详细组别',
         width: 150,
         key: 'majorId',
         type: 'tree-selector',
         dict: { url: '树形菜单接口地址',isTree: true, value: 'id', label: 'label' },
         form: {
           component: {
             span: 24,
             props: { multiple: false, clearable: true }
           },
           rules: [{ required: false, message: '请选择' }]
         }
       },

      {
        title: '题库类型',
        key: 'category',
        width:80,
        sortable: false,
        type: 'select',
        search: {
          disabled: true
        },
        form: {
          disabled: false,
        },
        dict: {
          data: [
            { value: 0, label: '正式题库' },
            { value: 1, label: '测试题库' }]
        }
      },
    ]
  }
}

三、index.vue

<template>
  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
    <template slot="header">标题</template>
    <d2-crud-x
        ref="d2Crud"
        v-bind="_crudProps"
        v-on="_crudListeners">
      <div slot="header">
        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"  />
        <el-button-group>
          <el-button size="small" type="primary"  @click="addRow"><i class="el-icon-plus"/>新增</el-button>
        </el-button-group>
      <!--  <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners" :columns="null"/> -->
      </div>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import {crudOptions} from './crud'
import {d2CrudPlus} from 'd2-crud-plus'
import * as api from './api'

export default {
  name: 'TbCircle',
  mixins: [d2CrudPlus.crud],
  data() {
    return {
      dialogVisible: false,
      form:{
        id:'',
        createPerson:''
      }
    }
  },
  methods: {
    getCrudOptions() {
      return crudOptions(this)
    },
    pageRequest(query) {
      return api.GetList(query)
    },
    addRequest(row) {
      return api.AddObj(row)
    },
    updateRequest(row) {
      return api.UpdateObj(row)
    },
    delRequest(row) {
      return api.DelObj(row.id)
    },
    batchDelRequest(ids) {
      return api.BatchDel(ids)
    },
    infoRequest(row) {
      return api.GetObj(row.id)
    },
    setCreatePerson({index, row}) {
      this.dialogVisible = true;
    }
  }
}
</script>

四、接口返回数据格式

[
  {
    "id": 1,
    "label": "一年级",
    "children": [
      {
        "id": 9,
        "label": "y语文",
        "children": null
      },
      {
        "id": 10,
        "label": "数学",
        "children": null
      },
      {
        "id": 11,
        "label": "音乐",
        "children": null
      },
      {
        "id": 12,
        "label": "画画",
        "children": null
      }
    ]
  },
  {
    "id": 3,
    "label": "二年级",
    "children": [
      {
        "id": 6,
        "label": "写字",
        "children": null
      },
      {
        "id": 7,
        "label": "语文",
        "children": null
      },
      {
        "id": 8,
        "label": "数学",
        "children": null
      }
    ]
  },
  {
    "id": 2,
    "label": "三年级",
    "children": [
      {
        "id": 4,
        "label": "数学",
        "children": null
      },
      {
        "id": 5,
        "label": "语文",
        "children": null
      }
    ]
  }
]