@weitutech/by-components-v3 1.0.0 → 1.0.7

package/README.md

@@ -1,39 +1,396 @@
-# vue3-comps
+# @weitutech/by-components-v3
 
-This template should help get you started developing with Vue 3 in Vite.
+### 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/
 
-## Recommended IDE Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+出现功能修改后，需更新package的版本号
+清除缓存
+npm cache clean --force
+发布
+npm publish --access public
+```
+
+### 注意事项
+
+1. 本地开发时可采用 npm link 方式关联依赖，package 入口配置为 src/main.js
 
-## Type Support for `.vue` Imports in TS
+### npm link
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+```
+组件库中运行 npm link
+项目中运行 npm link @weitutech/by-components-v3
+```
 
-## Customize configuration
+### 关于新组件开发
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+1. 采用 by 为前缀命名方式
+2. 避免过度耦合，考虑不同项目的复用性，尽量避免组件内调取接口
 
-## Project Setup
+### 表单 by-page-search
 
-```sh
-npm install
 ```
+<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"
 
-### Compile and Hot-Reload for Development
+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>
 
-```sh
-npm run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+### 表格 by-table
+
+[vxe-table 文档](https://vxetable.cn/#/start/install)
 
-```sh
-npm run build
+###### 通用配置
 ```
+<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 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"
+    }
+  },
 
-### Lint with [ESLint](https://eslint.org/)
+  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: []
+})
 
-```sh
-npm run lint
+// 多选回调
+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"
+    @setGroupColumn="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 返回只有一级的表头
+// setGroupColumn 返回多级表头数据
+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>
+```