tarsier-vue-tools对象管理组件

2021-07-09 by uino 22 tarsier-vue 研发

ps:不配置 urls 的情况下依赖于公共组件服务中台接口

使用方法一(全局注册方式)

注册

// index.js
import { CI, CIStore } from "uino-tarsier-vue-lib";
Vue.component('CI', CI)
store.registerModule('CIStore', CIStore)

使用方法

// *.vue:
<template>
  <CI />
</template>
<script>
  export default {
    data() {
      return {};
    }
  }
</script>

使用方法二(局部注册方式)

注册方法

  1. 组件的store需要注册到全局的vuexstore中并命名TraversalStore
  2. 传入参数urls对象,默认配置为/tarsier-comm/permission的后台地址
// store.js:
import { CIStore } from 'uino-tarsier-vue-lib';
export default new Vuex.Store({
  state:{},
  modules:{
    CIStore
  }
});
</script>

使用方法

// *.vue:
<template>
  <CI />
</template>

<script>
  import { CI } from  'uino-tarsier-vue-lib';
  export default {
    components: {
      CI
    },
    data() {
      return {};
    }
  }
</script>

参数配置说明

urls (type: Object)

接口配置地址

  • // 前缀

  • PRE: /tarsier-comm/cmdb

  • // 更新领域

  • DIR_SAVE: '/dir/saveOrUpdateDir',

  • // 删除领域

  • DIR_DEL: '/dir/removeDirById',

  • // 获取默认图标地址(分类)

  • DEF_ICON: '/ciClass/getDefaultIcon',

  • // 获取分类信息(左侧树菜单)

  • DIR_TREE: '/ciClass/getClassTree',

  • // 根据 id 获取分类信息

  • CLASS_INFO: '/ciClass/queryById',

  • // 保存 分类信息

  • CLASS_SAVE: '/ciClass/saveOrUpdate',

  • // 删除 分类

  • CLASS_DEL: '/ciClass/removeById',

  • // 分类属性导入地址

  • CLASS_ATTRS_IMPORT: '/ciClass/importClassAttr',

  • // 下载分类属性模板地址

  • CLASS_ATTRS_TPL: '/ciClass/exportClassAttrExcel',

  • // 根据 id 获取分类信息

  • CI_LIST: '/ci/queryPageByIndex',

  • // 导入ci地址

  • CI_IMPORT: '/ci/importCi',

  • // 根据 id 删除 ci

  • CI_REMOVE: '/ci/removeByIds',

  • // 根据 分类id 清除ci

  • CI_CLEAR: '/ci/removeByClassId',

  • // 保存 ci 信息

  • CI_SAVE: '/ci/saveOrUpdate',

  • // 导出地址

  • EXPORT_URL: '/ci/exportCi',

  • // 导出属性

  • EXPORT_ATTRS: '/ciClass/exportClassAttrExcel',

  • // 批量导入地址

  • IMPORT_BATCH: '/ci/importCiExcelBatch',

  • // 批量导入保存地址

  • IMPORT_BATCH_SAVE: '/ci/importCiByClassBatch',

  • // 批量导入模板地址

  • BATCH_TPL: '/ciClass/exportImportClassBatchExcel',

  • // 置顶领域

  • DIR_STICK: '/topData/top'

majorOnlyeOne (type: Boolean)

是否只有一个业务主键,默认值 false

majorNum (type: Number)

业务主键属性,默认值 0 当设置数量后,勾选业务主键到达其设置的数值后业务主键列的复选框将disabled

slots (type: Array)

自定义插入列名字

columns (type: Array)

自定义插入列定义,与 Table 组件的 columns 格式一致

自定义插入列 Demo

// *.vue:
<template>
  <CI :slots="slots" :columns="columns">
    <template v-slot:audit="{ row }">
      <Checkbox v-if="row.edit" v-model="row.isAudit" :true-value="1" :false-value="0"></Checkbox>
      <span v-else>{{ row.isAudit === 1 ? '是' : '-' }}</span>
    </template>
  </CI>
</template>

<script>
  import { CI } from  'uino-tarsier-vue-lib';
  export default {
    components: {
      CI
    },
    data() {
      return {
        slots: ['audit'], // slots 名字
        // 列设置
        columns: [
          {
            title: '审计',
            key: 'isAudit',
            resizable: true,
            slot: 'audit',
            index: 3 // 此属性为需要列位置
          }
        ]
      };
    }
  }
</script>