View Design

旧前端框架，即GisPlugin

官网组件地址

组件

• gis-table
• gis-form
• gis-modal
• gis-process
• gis-tree
• gis-tab
• gis-list
• gis-report

使用

main.js 引用

// gisPlugin 插件库
import GisPlugin from '@/core/plugins'
import '@/core/plugins/index.less'


Vue.use(GisPlugin, {
  form: {
    border: true,
    span: 12
  },
  table: {
    border: true,
    stripe: true,
    showPage: true,
    showSearch: true,
    showButton: true,
    button: {
      isGroup: false
    }
  },
  modal: {
    // title: 'modal'
  },
  upload: {
    formatExp: 'fileType',
    uploadUrl: '/gisBoot/files/fileUpload',
    fetchUrl: '/files/getFilesByBizId',
    showUrl: '/files/fileDownload',
    downloadByIdUrl: '/files/fileDownload',
    downloadByPathUrl: '/files/fileDownloadByPath',
    deleteFile: '/files/delByIds'
  }
})

使用示例

• table

<gis-table ref="gisTable" :column="tableColumns" :searchRule="searchRule" height="auto" v-on="listener"
      :buttons="buttons" :fetchName="apiLogManage.getByCondition" v-model="data" />

• form

<gis-form ref="gisForm" style="height: auto" :rule="rule" :mode="mode" :config="{poptip: true}" v-model="formData"
      autoable :portName="apiLogManage.get" :param="param" />

• modal

this.$gisModal({
  title: "请谨慎进行此操作！",
  content: "您确认要彻底清空删除所有数据?",
  loading: true,
  buttons: [
    {
      title: "确定",
      type: "primary",
      event: () => {
        this.postRequest(apiLogManage.deleteAll).then(res => {
          if (res.success) {
            this.$gisModalRemove();
            this.$Message.success("清空日志成功");
            this.$refs.gisTable.handleRefresh();
          }
        });
      }
    },
    {
      title: "取消",
      close: true
    }
  ]
});