@weitutech/by-components-v3

npm 安装

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

npm install @weitutech/by-components

引入

import ByComponentsV3 from "@weitutech/by-components-v3/dist/by-component-v3"
import "@weitutech/by-components-v3/dist/by-component-v3.css"

npm 发布

第一次发布
npm login

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


出现功能修改后，需更新package的版本号

清除缓存
npm cache clean --force

发布之前一定要打包npm run build 在进行发布

发布
npm publish --access public

注意事项

本地开发时可采用

1. 书写在scr/App.vue中、在打包测试使用npm link方式
2. npm link 方式关联依赖，package 入口配置为 src/main.js

npm link

组件库中运行 npm link
项目中运行 npm link @weitutech/by-components-v3
然后组件库运行打包命令

关于新组件开发

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

组件文档构建

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

组件文档·Github Pages

表单 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 setup>
import { ref } from "vue"

const searchQuery = ref({
  // 对应formConfig对象中formItems中的每个field
})

const formConfig = ref({
  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: "default",
  // 对应表单单独的显隐权限 可设置isHidden来控制
  formItems: [
    // 输入框
    {
      id: 1, // 作为可选的唯一标识，如果field有重复可以设置id作为唯一标识
      field: "input",
      type: "input",
      label: "输入框",
      placeholder: "请输入",
      labelWidth: "70px",
      isHidden: false, // 是否隐藏 false || true
      attrs: {
        // 其他选项配置、参考Element的输入框配置
      }
    },
    // 密码输入框
    {
      field: "password",
      type: "password",
      label: "密码输入框",
      placeholder: "请输入密码",
      labelWidth: "70px",
      attrs: {
        // 其他选项配置、参考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" }
      ],
      attrs: {
        // 其他配置、参考Element的选择器配置
      },
      colLayout: {
        xs: 24,
        sm: 8,
        md: 8,
        lg: 4,
        xl: 4
      }
    },
    // 日期选择器
    {
      field: "datepicker",
      type: "datepicker",
      label: "日期选择器",
      placeholder: "请选择日期",
      labelWidth: "70px",
      attrs: {
        // 其他选项配置、参考Element的配置
      }
    },
    // 级联
    {
      field: "cascader",
      type: "cascader",
      label: "级联",
      placeholder: "请选择",
      labelWidth: "70px",
      options: [], // 于Element保持一致
      attrs: {
        // 其他选项配置、参考Element的配置
      }
    },
    // 开关
    {
      field: "switch",
      type: "switch",
      label: "开关",
      labelWidth: "70px",
      attrs: {
        // 其他选项配置、参考Element的配置
      }
    },
    // 单选框
    {
      field: "radioGroup",
      type: "radioGroup",
      label: "单选框",
      labelWidth: "70px",
      attrs: {
        // 其他选项配置、参考Element的配置
      },
      cGOptions: {
        type: "button", // "button" || "checkbox"
        options: [] // 按照label、value的键值对传入
      }
    },
    // 多选框
    {
      field: "checkboxGroup",
      type: "checkboxGroup",
      label: "多选框",
      labelWidth: "70px",
      attrs: {
        // 其他选项配置、参考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",
    },
})
// 查询
const handleQueryClick = () => {}
</script>

表格 by-table

vxe-table 文档

通用配置

<template>
  <by-table
    ref="BTableRef"
    name="table"
    :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 setup>
import { ref } from "vue"
/**
  * @see https://vxetable.cn/v4/#/grid/api
  * @description 其他配置想看vxe-table文档（除 pagerConfig 和 copyFields 外）
  * @param { false | Object } pagerConfig 分页配置、如果不想设置分页的话则设置false值即可、如果为对象的话则只接受pageSize、currentPage、total字段
  * @param { Array } copyFields 需要用户点击单元格复制的字段标识数组集合
  */
const gridOptions = ref({
  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,  // 回显用的接口
    infoMethodParams: {}, // 回显用的接口参数
    submitMethod: setCustomTableList, // 保存用的接口
    submitMethodParams: {}, // 保存用的接口参数
    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: []
})

// 多选回调
const handleCheckboxChange = (records) => {
  console.log(records, "records")
},
// 排序回调
const handleSortChange = (context) => {
  this.searchQuery.order = `${context.field} ${context.order}`
  // 以下执行列表接口.....
},
// 分页回调
const handlePageChange = ({ page, limit }) => {
  this.gridOptions.pagerConfig.currentPage = page
  this.gridOptions.pagerConfig.pageSize = limit
  // 以下执行列表接口.....
}
</script>

自定义列支持多级表头

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

<script setup>
import { ref } from "vue"
const gridOptions = ref({
  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 }
  ],
})
// setColumn 返回只有一级的表头
const 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>