@weitutech/by-components

npm 安装

安装时切换淘宝源比较快
npm config set registry https://registry.npmmirror.com/

npm install @weitutech/by-components

引入

由于对 vxeTable 进行了再次处理，所以需要复制 plugin 文件夹到项目中 并手动引入 vxeTable
plugin 目录可从组件库中复制到项目

import '@/plugin/vxeTable.js';
import '@weitutech/by-components/lib/index.css'
import BYComponents from '@weitutech/by-components'
Vue.use(BYComponents)

npm 发布

第一次发布
npm login

发布时需要确保npm的源是官方 npm
npm config set registry https://registry.npmjs.org/


出现功能修改后，需更新package的版本号
清除缓存
npm cache clean --force
发布
npm publish --access public

注意事项

1. 组件开发中 css 样式单独放在 style 目录下, 整体打包成一个 css 样式引入
2. 打包后会在 lib 目录下生成 js 和 css 文件
3. 本地开发时可采用 npm link 方式关联依赖，package 入口配置为 src/index.js

npm link

组件库中运行 npm link
项目中运行 npm link @weitutech/by-components

💡 提示
本地link调试时，需要把组件库的package.json中的main字段改为src/index.js（"main": "src/index.js"）
如需link调试样式， 宿主工程main.js中要 import '@weitutech/by-components/src/style/index.scss' //TODO:注意：调试样式link , 调试完需注释 调试完成后，切记改回 "main": "lib/by-components.umd.js", 如果组件库更新，宿主项目没有同步更新， 尝试重新编译组件库npm run build, 且清除宿主项目缓存rm -rf node_modules/.cache

组件文档构建

npm run docs:dev
npm run docs:build
文档部署到Github Pages: npm run docs:deploy

组件文档·Github Pages

关于新组件开发

1. 采用 by 为前缀命名方式
2. 避免过度耦合，考虑不同项目的复用性，尽量避免组件内调取接口

表单 by-page-search

<template>
  <by-page-search
      ref="pageSearchRef"
      v-model="searchQuery"
      :search-form-config="formConfig"
      @queryBtnClick="handleQueryClick"
      @change="handleChangePageSearch"
    >
      <template #custom>
        我是外部自定义内容
      </template>
    </by-page-search>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: {
        // 对应formConfig对象中formItems中的每个field
      },
      formConfig: {
        labelWidth: "80px",
        itemStyle: {
          padding: "0px 0px"
        },
        // 需要折叠的字段、不分顺序、写在里面的字段都会被隐藏 --- 仅在isFlexible = true 才可用
        flexible: {
          // 这里模拟写一些
          foldField: ["area_id", "department_id", "team_id", "user_id", "favourite_id", "category_id", "brand_id"]
        },
        // 是否开启折叠功能
        isFlexible: true,
        colLayout: {
          xs: 24,
          sm: 12,
          md: 12,
          lg: 6,
          xl: 4
        },
        elSize: "mini",
        // 对应表单单独的显隐权限 可设置isHidden来控制
        formItems: [
          // 输入框
          {
            id: 1, // 作为可选的唯一标识，如果field有重复可以设置id作为唯一标识
            field: "input",
            type: "input",
            label: "输入框",
            placeholder: "请输入",
            labelWidth: "70px",
            isHidden: false, // 是否隐藏 false || true
            otherOptions: {
              // 其他选项配置、参考Element的输入框配置
            }
          },
          // 密码输入框
          {
            field: "password",
            type: "password",
            label: "密码输入框",
            placeholder: "请输入密码",
            labelWidth: "70px",
            otherOptions: {
              // 其他选项配置、参考Element的输入框配置
            }
          },
          // 选择器
          {
            field: "select",
            type: "select",
            label: "选择器",
            placeholder: "请选择",
            labelWidth: "100px",
            mode: "", // 可选  "group" || false 默认 不传不用配置  group为分组模式
            options: [
              // 必须按照label、value的键值对传入
              { label: "全选", value: undefined },
              { label: "选项一", value: "one" },
              { label: "选项二", value: "two" }
            ],
            otherOptions: {
              // 其他配置、参考Element的选择器配置
            },
            colLayout: {
              xs: 24,
              sm: 8,
              md: 8,
              lg: 4,
              xl: 4
            }
          },
          // 日期选择器
          {
            field: "datepicker",
            type: "datepicker",
            label: "日期选择器",
            placeholder: "请选择日期",
            labelWidth: "70px",
            otherOptions: {
              // 其他选项配置、参考Element的配置
            }
          },
          // 级联
          {
            field: "cascader",
            type: "cascader",
            label: "级联",
            placeholder: "请选择",
            labelWidth: "70px",
            options: [], // 于Element保持一致
            otherOptions: {
              // 其他选项配置、参考Element的配置
            }
          },
          // 开关
          {
            field: "switch",
            type: "switch",
            label: "开关",
            labelWidth: "70px",
            otherOptions: {
              // 其他选项配置、参考Element的配置
            }
          },
          // 单选框
          {
            field: "radioGroup",
            type: "radioGroup",
            label: "单选框",
            labelWidth: "70px",
            otherOptions: {
              // 其他选项配置、参考Element的配置
            },
            cGOptions: {
              type: "button", // "button" || "checkbox"
              options: [] // 按照label、value的键值对传入
            }
          },
          // 多选框
          {
            field: "checkboxGroup",
            type: "checkboxGroup",
            label: "多选框",
            labelWidth: "70px",
            otherOptions: {
              // 其他选项配置、参考Element的配置
            },
            cGOptions: {
              type: "button", // "button" || "checkbox"
              options: [] // 按照label、value的键值对传入
            }
          },
          // 文本类型
          {
            field: "text",
            type: "text",
            label: "文本类型",
            labelWidth: "70px",
            defaultValue: "需要显示的文本"
          },
          // 数字范围输入框
          {
            field: "pairNumberInput",
            type: "pairNumberInput",
            label: "数字范围输入框",
            labelWidth: "70px",
            earliestPlaceholder: "前面输入框的Placeholder",
            latestPlaceholder: "后面输入框的Placeholder"
          },
          {
            field: "custom",
            type: "custom",
            label: "自定义",
            labelWidth: "70px",
          },
      }
    }
  },
  methods: {
    // 查询
    handleQueryClick() {},
    /**
     * @describe 表单回调、以下对推广人员四级和标签于推广账户组件交互是进行一些传参的改变、逻辑依据原老组件需要的参数进行复制处理
     * @param { Object } value 为对象字段名和所赋予的值
     */
    handleChangePageSearch({ field, value }) {
      if (["area_id", "department_id", "team_id", "user_id", "favourite_id"].includes(field)) {
        if (field === "area_id") {
          this.formConfig.formItems.forEach(item => {
            if (item.field === "department_id" || item.field === "team_id" || item.field === "user_id") {
              item.otherOptions.areaId = value
            }
          })
        } else if (field === "department_id") {
          this.formConfig.formItems.forEach(item => {
            if (item.field === "team_id" || item.field === "user_id") {
              item.otherOptions.departmentId = value
            }
          })
        } else if (field === "team_id") {
          this.formConfig.formItems.forEach(item => {
            if (item.field === "user_id") {
              item.otherOptions.teamId = value
            }
          })
        } else if (field === "user_id") {
          this.formConfig.formItems.forEach(item => {
            if (item.field === "favourite_id" || item.field === "advertiser_id") {
              item.otherOptions.userId = value
            }
          })
        } else if (field === "favourite_id") {
          if (value.length) {
            this.formConfig.formItems.forEach(item => {
              if (item.field === "advertiser_id") {
                item.otherOptions.options.favouriteId = value
                item.isHidden = false
              }
            })
          } else {
            this.formConfig.formItems.forEach(item => {
              if (item.field === "advertiser_id") {
                console.log(item, "item")
                item.otherOptions.options.favouriteId = []
                item.isHidden = true
              }
            })
          }
        }
      }
    }
  }
}
</script>

自定义时间选择器'customDatePicker'特别说明

自定义时间选择器同时支持时间段方式绑定值 和 单独时间方式绑定值

// 时间段方式绑定值
{
  type: 'customDatePicker',
  field: 'report_time',
  label: '报表时间'
}

// 单独时间方式绑定值
{
  type: 'customDatePicker',
  field: 'report_time',  // 仍然保留原来的字段，保证兼容性
  startTimeField: 'start_time',  // 新增开始时间字段
  endTimeField: 'end_time',  // 新增结束时间字段
  label: '报表时间'
}

表格 by-table

vxe-table 文档

通用配置

<template>
  <by-table
    ref="BTableRef"
    :grid-options="gridOptions"
    @checkbox-change="({records}) => handleCheckboxChange(records)"
    @checkbox-all="({records}) => handleCheckboxChange(records)"
    @page-change="handlePageChange"
    @sort-change="handleSortChange"
  >
    <template #switch="{ row }">
      <el-switch
        v-if="row.id"
        size="mini"
        :value="row.opt_status==='ENABLE'"
      />
    </template>
    <template #status_text="{ row }">
      <span class="text_pointer_primary">{{ row.status_text }}</span>
    </template>
    <template #operate>
      <el-button type="text">编辑</el-button>
      <el-button style="color:red" type="text">删除</el-button>
    </template>
  </by-table>
</template>

<script>
export default {
  data() {
    return {
      /**
       * @see https://vxetable.cn/v3.8/#/grid/api
       * @description 其他配置想看vxe-table文档（除 pagerConfig 和 copyFields 外）
       * @param { false | Object } pagerConfig 分页配置、如果不想设置分页的话则设置false值即可、如果为对象的话则只接受pageSize、currentPage、total字段
       * @param { Array } copyFields 需要用户点击单元格复制的字段标识数组集合
       */
      gridOptions: {
        height: 700,
        pagerConfig: {
          // 默认每页大小
          pageSize: 15,
          // 当前页码
          currentPage: 1,
          // 总条数
          total: 25
        },
        checkboxConfig: {
          checkMethod: ({ row }) => {
            return !!row.id
          },
          visibleMethod: ({ row }) => {
            return !!row.id
          }
        },
        seqConfig: {
          seqMethod: ({ row, rowIndex }) => {
            return row.id ? rowIndex : "汇总"
          }
        },
        copyFields: ["status_text"],
        // 默认显示的排序
        sortConfig: {
          defaultSort: {
            // 默认消耗倒序
            field: "cost", order: "desc"
          }
        },

        customColumnConfig: { // 自定义列
          showCustomColumn: true, // 是否显示自定义列
          infoMethod: getCustomTableList,  // 回显用的接口
          submitMethod: setCustomTableList, // 保存用的接口
          slots: ["source_material_count"] // 需要使用插槽的字段集合
        },
        columns: [
          { type: "checkbox", width: 50, fixed: "left" },
          { type: "seq", width: 50, fixed: "left", title: "序号" },
          { field: "switch", title: "开关", width: 70, fixed: "left", slots: { default: "switch" }},
          { field: "status_text", title: "状态", width: 70, fixed: "left", slots: { default: "status_text" }},
          { field: "cost", title: "消耗", width: 70 },
          { field: "operate", title: "操作", width: 70, fixed: "left", slots: { default: "operate" }}
        ],
        data: []
      }
    }
  },
  methods: {
    // 多选回调
    handleCheckboxChange(records) {
      console.log(records, "records")
    },
    // 排序回调
    handleSortChange(context) {
      this.searchQuery.order = `${context.field} ${context.order}`
      // 以下执行列表接口.....
    },
    // 分页回调
    handlePageChange({ page, limit }) {
      this.gridOptions.pagerConfig.currentPage = page
      this.gridOptions.pagerConfig.pageSize = limit
      // 以下执行列表接口.....
    }
  }
}
</script>

自定义列支持多级表头

<template>
  <by-table
    :grid-options="gridOptions"
    @setColumn="handleSetColumn"
    @setGroupColumn="handleSetColumn"
  >
  </by-table>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        border: true,
        stripe: true,
        resizable: true,
        height: 500,
        // 非自定义列的情况下的多级表头配置方式
        columns: [
          { type: 'seq', width: 50 },
          {
            title: '基本信息',
            children: [
              { field: 'name', title: 'Name' },
              {
                title: '其他信息',
                children: [
                  { field: 'nickname', title: 'Nickname' },
                  { field: 'age', title: 'Age', sortable: true }
                ]
              },
              { field: 'sex', title: 'Sex' }
            ]
          },
          { field: 'address', title: 'Address', sortable: true, showOverflow: true }
        ],
      }
    }
  },
  methods: {
   // setColumn 返回只有一级的表头
   // setGroupColumn 返回多级表头数据
   handleSetColumn(columns) {
      this.gridOptions.columns = [
        { type: "checkbox", width: 50, fixed: "left" },
        { type: "seq", width: 50, fixed: "left", title: "序号" },
        ...columns,
        { title: "操作", width: 80, fixed: "right", slots: { default: "operate" }}
      ]
    },
  }
}
</script>