Merge pull request '修改文档搜索框显示不下自动换行' (#11) from zjl into develop

Reviewed-on: #11

package-lock.json

@@ -8,7 +8,7 @@
       "name": "code-brick-wd",
       "version": "0.1.0",
       "dependencies": {
-        "code-brick-zj": "^0.1.0",
+        "code-brick-zj": "^1.0.2",
         "core-js": "^3.8.3",
         "element-ui": "^2.15.12",
         "vue": "^2.6.14",
@@ -4007,9 +4007,9 @@
       }
     },
     "node_modules/code-brick-zj": {
-      "version": "0.1.0",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-1.1.0.tgz",
-      "integrity": "sha512-vEymEN/28lEJP3045DCE/7143SXjdNyNmWZuy3/NcIUP/e9YOjhm46itzjNWCjJZCI6vWvQkCD1EfmA4hPknuw=="
+      "integrity": "sha512-J6S5ILHdweYMiEfpLuU8EvgQNEJ4EMAvjBAbLRtpGOBtXNX4U7z+IB9jDu2FE1TdkOaKJUpVLubgZwxkGzXNaA=="
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
@@ -14473,9 +14473,9 @@
       }
     },
     "code-brick-zj": {
-      "version": "0.1.0",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-1.1.0.tgz",
-      "integrity": "sha512-vEymEN/28lEJP3045DCE/7143SXjdNyNmWZuy3/NcIUP/e9YOjhm46itzjNWCjJZCI6vWvQkCD1EfmA4hPknuw=="
+      "integrity": "sha512-J6S5ILHdweYMiEfpLuU8EvgQNEJ4EMAvjBAbLRtpGOBtXNX4U7z+IB9jDu2FE1TdkOaKJUpVLubgZwxkGzXNaA=="
     },
     "color-convert": {
       "version": "1.9.3",

package.json

@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "code-brick-zj": "^0.1.0",
+    "code-brick-zj": "^1.0.2",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.12",
     "vue": "^2.6.14",

src/views/home/introduce.vue

@@ -3,9 +3,45 @@
     <p>
       组件包目前封装常用的四个组件:表格，搜索区域，分页，对话框。包npm地址为：https://www.npmjs.com/package/code-brick-zj。
     </p>
-    <p>文档当前使用的组件包的版本为：0.1.0</p>
+    <p>文档当前使用的组件包的版本为：1.1.0</p>
     <div class="block">
       <el-timeline>
+        <el-timeline-item timestamp="2024/4/10" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>搜索栏：去除展开收起的样式，变成显示不下自动换行</h4>
+            <p>组件版本号为：1.1.0</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/11/28" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>
+              searchBar：select增加属性collapseTags将选中值按文字的形式展示
+              multipleLimit来设置多选时用户最多可以选择的项目数
+              placeholder有值显示，无值默认显示label
+            </h4>
+            <p>组件版本号为：1.0.5</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/11/24" placement="top">
+          <el-card>
+            <h4>增加/修改</h4>
+            <h4>
+              表格：增加表格操作列按钮的tooltip样式，
+              设置showTip的值即可对当前按钮开启tooptip并显示showTip中的值
+            </h4>
+            <h4>时间选择器：修改了默认的width尺寸</h4>
+            <p>组件版本号为：1.0.3</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="2023/2/28" placement="top">
+          <el-card>
+            <h4>修改</h4>
+            <h4>搜索栏：增加展开收起的样式" 1.1.0 "版本开始废弃</h4>
+            <p>组件版本号为：1.0.2</p>
+          </el-card>
+        </el-timeline-item>
         <el-timeline-item timestamp="2023/2/28" placement="top">
           <el-card>
             <h4>新增</h4>

src/views/searchBar/searchBar.vue

@@ -2,6 +2,10 @@
   <div class="search-bar">
     <div class="demo-box">
       <h3>input输入框(size默认small高度是32px)</h3>
+      <p>
+        部分业务需要输入框必填， 可以设置required的值为true来显示红星，
+        判断逻辑还是得在js中写，required只是样式上显示红星
+      </p>
       <div style="height: 50px">
         <SearchBar :formConfigs="formConfig1" />
       </div>
@@ -22,7 +26,8 @@
                         type: 'input',
                         label: '姓名',
                         placeholder: 'width不传默认200px',
-                        param: 'xm1'
+                        param: 'xm1',
+                        required: true
                       },
                       {
                         type: 'input',
@@ -59,6 +64,9 @@
       <h3>
         select下拉框(选项默认是id和name,可以通过labelField，valueField去改取值的key)
       </h3>
+      <p>
+        可以通过multiple:true来开启多选，collapseTags:true来将选中值按文字的形式展示，multipleLimit来设置多选时用户最多可以选择的项目数
+      </p>
       <div style="height: 50px">
         <SearchBar
           :formConfigs="formConfig2"
@@ -118,10 +126,16 @@
                         label: '性别',
                         selectOptions: [
                           { id: 1, name: '男(可多选)' },
-                          { id: 2, name: '女' }
+                          { id: 2, name: '女' },
+                          { id: 3, name: '未知1' },
+                          { id: 4, name: '保密' },
+                          { id: 5, name: '保密2' }
                         ],
+                        placeholder: '多选',
                         param: 'xb4',
-                        multiple: true
+                        multiple: true,
+                        collapseTags: true,
+                        multipleLimit: 3
                       },
                       {
                         type: 'select',
@@ -145,7 +159,7 @@
     </div>
     <div class="demo-box">
       <h3>Cascader 级联选择器</h3>
-      <div style="height: 120px">
+      <div>
         <SearchBar
           :formConfigs="formConfig22"
           @headBtnClick="headBtnClickCascader"
@@ -153,7 +167,7 @@
       </div>
       <el-collapse>
         <el-collapse-item title="显示代码">
-          <div class="description"></div>
+          <div class="description">搜索条件过多的，显示不下自动换行</div>
           <div>
             <pre>
               &lt;<span>template</span>&gt;
@@ -1140,7 +1154,8 @@ export default {
           type: 'input',
           label: '姓名',
           placeholder: 'width不传默认200px',
-          param: 'xm1'
+          param: 'xm1',
+          required: true
         },
         {
           type: 'input',
@@ -1202,10 +1217,16 @@ export default {
           label: '性别',
           selectOptions: [
             { id: 1, name: '男(可多选)' },
-            { id: 2, name: '女' }
+            { id: 2, name: '女' },
+            { id: 3, name: '未知1' },
+            { id: 4, name: '保密' },
+            { id: 5, name: '保密2' }
           ],
+          placeholder: '多选',
           param: 'xb4',
-          multiple: true
+          multiple: true,
+          collapseTags: true,
+          multipleLimit: 3
         },
         {
           type: 'select',

src/views/table/singleHead.vue

@@ -519,6 +519,11 @@
         详情--detail 编辑---edit
         删除---delete,以上三个是显示图标，其他按钮显示中文字字，图标按上述传，自动加载图标。
       </p>
+      <p>
+        showTip:默认是禁用的，如部分按钮文字过长，需缩短文字，又怕意思不清，
+        可以加showTip来显示，具体样式见 开始 按钮。
+        showParam:是控制按钮能否被点击，可以根据表格中的字段，按规则来控制按钮。
+      </p>
       <base-table :table-props="tableProps" :table-data="tableData">
         <method-btn
           v-if="tableBtn.length"
@@ -612,6 +617,7 @@
                 {
                   type: 'start',
                   btnName: '开始',
+                  showTip: '开始生产',
                   showParam: {
                     type: '&',
                     data: [
@@ -883,6 +889,7 @@ const tableBtn = [
   {
     type: 'start',
     btnName: '开始',
+    showTip: '开始生产',
     showParam: {
       type: '&',
       data: [