common-ui 公共组件库

更新日志

更新流程

1. 切换源到npm官方源https://registry.npmjs.org/
2. npm login
3. 使用npm version patch修改package.json中的版本号
4. npm publish

组件开发流程

1. 将已经开发完成的组件放入全局组件工程src\package内
2. 将组件注册到src\package\index.js文件中

使用方法

npm i @devops-web/cs-multiple-search

全局引入

import Vue from "vue";
import CsMultipleSearch from "@devops-web/cs-multiple-search";
import "@devops-web/cs-multiple-search/lib/cs-multiple-search.css";
Vue.use(CsMultipleSearch);

- no-collect 不需要收藏，默认false

options

- filterable 是否显示搜索按钮
- showCheckAll 是否显示全选按钮
- width 宽度
- value 查询字段名称
- label 查询展示名称
- items 查询条件

<template>
  <cs-multiple-search
    :options="options"
    :collects-method="getCollects"
    :delete-collect-method="onDeleteCollect"
    :add-collect-method="onAddCollect"
    @search="onSearch"
  ></cs-multiple-search>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          label: "需求类型",
          value: "type",
          type: "multiple",
          items: [
            { label: "史诗", value: 0 },
            { label: "特性", value: 1 },
            { label: "用户故事", value: 2 },
          ],
        },
        {
          label: "状态",
          value: "status",
          type: "multiple",
          filterable: true,
          width: 300,
          items: [
            { label: "未开始", value: 0 },
            { label: "开发中", value: 1 },
            { label: "开发完成", value: 2 },
            { label: "测试中", value: 3 },
            { label: "测试完成", value: 4 },
            { label: "已关闭", value: 5 },
            { label: "已关闭", value: 6 },
            { label: "已关闭", value: 7 },
            { label: "已关闭", value: 8 },
          ],
        },
        { label: "创建时间", value: "createTime", type: "daterange" },
        {
          label: "创建人",
          value: "creator",
          type: "multiple",
          showCheckAll: false,
          filterable: true,
          width: 300,
          items() {
            return Promise.resolve([
              { label: "高", value: 0, extra: "中间件中间件中间件" },
              { label: "中", value: 1, extra: "中间件中间件" },
              { label: "低", value: 2, extra: "中间件" },
            ]);
          },
        },
      ],
    };
  },
  methods: {
    onSearch(formData) {
      console.log("--------formData-------->", formData);
    },
    getCollects() {
      // 获取保存的搜索
      return Promise.resolve([
        {
          label: "条件1",
          condition: [
            {
              key: "type",
              value: [0, 1],
            },
          ],
        },
        {
          label: "条件1",
          condition: [
            {
              key: "type",
              value: [0, 1],
            },
          ],
        },
      ]);
    },
    onAddCollect(label, condition) {
      // 保存搜索
      console.log("---------------->", label, condition);
      return Promise.resolve();
    },
    onDeleteCollect(data) {
      //  删除搜索
      console.log("---------------->", data);
      return Promise.resolve();
    },
  },
};
</script>