vue2-client 1.8.61 → 1.8.63

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
+**1.8.63 -2024-3-4 @江超**
+- 新增`XTree`组件
+- 全局设置字体为`PingFangSC-Regular`
+- 修复全局滚动条的样式问题
+- 优化`XForm`,`XTable`,`XFormTable`的显示效果
+
 **1.8.47 -2024-2-27 @江超**
 - 完成数据检索功能
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.61",
+  "version": "1.8.63",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/public/index.html

@@ -15,7 +15,7 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="popContainer" class="beauty-scroll" style="height: 100vh; overflow-y: scroll">
+    <div id="popContainer" class="beauty-scroll" style="height: 100vh; overflow-y: auto">
       <div id="app"></div>
     </div>
     <!-- require cdn assets js -->

package/src/App.vue

@@ -137,6 +137,9 @@ export default {
 </style>
 <style lang="less">
 @import "./font-style/font.css";
+body {
+  font-family: 'PingFangSC-Regular-woff2', 'Microsoft YaHei UI', serif !important;
+}
 .water-mark-wrap {
   position: absolute;
   width: 100%;

package/src/base-client/components/common/XAddNativeFormOA/XAddNativeFormOA.vue

@@ -122,9 +122,9 @@ export default {
   },
   mounted () {
     this.formItemLoad()
-    if (this.nowStepContent) {
-      this.form = this.nowStepContent
-    }
+    // if (this.nowStepContent) {
+    //   this.form = this.nowStepContent
+    // }
   },
   methods: {
     formItemLoad () {

package/src/base-client/components/common/XForm/XForm.vue

@@ -8,7 +8,7 @@
       layout="inline">
       <a-row :gutter="48">
         <x-form-item
-          v-for="(item, index) in realJsonData.slice(0,6)"
+          v-for="(item, index) in realJsonData.slice(0,3)"
           :key="index"
           :attr="item"
           :form="form"
@@ -27,7 +27,7 @@
         </div>
         <div v-show="advanced">
           <x-form-item
-            v-for="(item, index) in realJsonData.slice(6)"
+            v-for="(item, index) in realJsonData.slice(3)"
             :key="'advanced'+index"
             :attr="item"
             :form="form"
@@ -39,17 +39,22 @@
           <span
             :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
             class="table-page-search-submitButtons">
-            <a-button htmlType="submit" style="margin-left: 8px" type="primary" @click="onSubmit">
+            <a v-if="realJsonData.length > 3" style="margin-left: 8px" @click="toggleAdvanced">
+              <span v-show="!advanced"><a-icon type="eye"/>&nbsp;更多条件</span>
+              <span v-show="advanced"><a-icon type="eye-invisible"/>&nbsp;收起更多</span>
+            </a>
+            <a-divider type="vertical"/>
+            <a-button
+              htmlType="submit"
+              style="margin-left: 8px"
+              type="primary"
+              @click="onSubmit">
               <a-icon :style="iconStyle" type="search"/>查询
             </a-button>
             <a-button style="margin-left: 8px" @click="resetForm">
               <a-icon :style="iconStyle" type="redo" />重置
             </a-button>
             <slot></slot>
-            <a v-if="realJsonData.length > 6" style="margin-left: 8px" @click="toggleAdvanced">
-              <span v-show="!advanced">更多条件<a-icon type="down"/></span>
-              <span v-show="advanced">收起更多<a-icon type="up"/></span>
-            </a>
           </span>
         </a-col>
       </a-row>
@@ -184,6 +189,7 @@ export default {
     },
     toggleVisible () {
       this.visible = !this.visible
+      return this.visible
     },
     resetForm () {
       this.$refs.form.resetFields()
@@ -212,3 +218,5 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+</style>

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -402,7 +402,7 @@ export default {
         const isEmpty = !value || !value.toString()
         // 查询表单点击重置按钮时清空树形选择框选中状态
         if (this.$refs.XTreeSelect && this.attr.type === 'treeSelect' && isEmpty) {
-            this.$refs.xTreeSelect.setValue(undefined)
+          this.$refs.xTreeSelect.setValue(undefined)
         }
       },
       deep: true

package/src/base-client/components/common/XFormTable/XFormTable.vue

@@ -7,6 +7,9 @@
           ref="xAddForm"
           @afterSubmit="onAddOrEditSubmitAfterSubmit"
         />
+        <div v-if="title" class="crud_title">
+          {{ title }}
+        </div>
         <x-form
           ref="xForm"
           style="margin-bottom: 14px;"
@@ -34,9 +37,11 @@
           </template>
           <template slot="rightBtnExpand" slot-scope="{selectedRowKeys, selectedRows}">
             <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-            <a-button @click="toggleIsFormShow">
-              <a-icon :style="iconStyle" type="vertical-align-top"/>
-            </a-button>
+            <a-tooltip title="收起查询条件">
+              <a-button @click="toggleIsFormShow">
+                <a-icon :style="iconStyle" type="vertical-align-top"/>
+              </a-button>
+            </a-tooltip>
           </template>
           <!-- 底部插槽 -->
           <template slot="footer" slot-scope="{selectedRowKeys, selectedRows}">
@@ -335,7 +340,9 @@ export default {
      * 查询表单部分显示/隐藏切换
      */
     toggleIsFormShow () {
-      this.$refs.xForm.toggleVisible()
+      const visible = this.$refs.xForm.toggleVisible()
+      const height = visible ? 'default' : 'calc(100vh - 27rem)'
+      this.$refs.xTable.setScrollYHeight(height)
     },
     /**
      * 选择列事件
@@ -379,5 +386,12 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-
+.crud_title {
+  height: 32px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #000000d9;
+  line-height: 32px;
+  margin-bottom: 12px;
+}
 </style>

package/src/base-client/components/common/XTable/XTable.vue

@@ -39,10 +39,14 @@
         <span :style="{ float: 'right', overflow: 'hidden', marginBottom: '8px' }">
           <a-button-group>
             <slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
-            <a-button @click="refresh(true)">
-              <a-icon :style="iconStyle" type="reload" />
-            </a-button>
-            <table-setting v-if="columnSelectLoaded" v-model="tableColumns" />
+            <a-tooltip title="重新查询">
+              <a-button @click="refresh(true)">
+                <a-icon :style="iconStyle" type="reload" />
+              </a-button>
+            </a-tooltip>
+            <a-tooltip title="列展示/排序">
+              <table-setting v-if="columnSelectLoaded" v-model="tableColumns" />
+            </a-tooltip>
           </a-button-group>
         </span>
       </a-col>
@@ -148,7 +152,7 @@ export default {
       // x滚动条宽度
       scrollXWidth: 1600,
       // y滚动条高度
-      scrollYHeight: 437,
+      scrollYHeight: 'calc(100vh - 31rem)',
       // 表格选择列Key集合
       selectedRowKeys: [],
       // 表格选择Row集合
@@ -256,15 +260,8 @@ export default {
           totalWidth = totalWidth + 180
         }
       }
-      // 设置表格高度
-      // const height = document.documentElement.clientHeight
-      // if (height >= 1070) {
-      //   this.scrollYHeight = 'calc(100vh - 526px)'
-      // } else {
-      //   this.scrollYHeight = 'calc(100vh - 398px)'
-      // }
       // 设置表格高度为固定值
-      this.scrollYHeight = 'calc(100vh - 33rem)'
+      this.setScrollYHeight('default')
       // 横向滚动长度大于所有宽度，才能实现固定表头
       this.scrollXWidth = totalWidth
       // 加载筛选列完成
@@ -332,6 +329,12 @@ export default {
         this.$refs.table.refresh(bool)
       })
     },
+    setScrollYHeight (value) {
+      if (value === 'default') {
+        value = 'calc(100vh - 31rem)'
+      }
+      this.scrollYHeight = value
+    },
     /**
      * 格式化日期
      * @param date 日期字符串
@@ -378,7 +381,8 @@ export default {
             window.open('/res/excel/export/' + value)
           })
         },
-        onCancel () {}
+        onCancel () {
+        }
       })
     },
     // 新增业务
@@ -449,7 +453,8 @@ export default {
             })
           })
         },
-        onCancel () {}
+        onCancel () {
+        }
       })
     },
     // 导入业务
@@ -500,32 +505,11 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.btn-success {
-  color: #ffffff;
-}
-.btn-success:enabled:hover {
-  background-color: #85CE61 !important;
-  border-color: #85CE61 !important;
-}
-.btn-success:enabled {
-  background-color: #67c23a;
-  border-color: #67c23a;
-}
-.btn-success:disabled {
-  color: rgba(0, 0, 0, 0.25);
-}
-.btn-warn {
-  color: #ffffff;
-}
-.btn-warn:enabled:hover {
-  background-color: #ffc833 !important;
-  border-color: #ffc833 !important;
-}
-.btn-warn:enabled {
-  background-color: #ffba00;
-  border-color: #ffba00;
+:deep(.ant-table-thead > tr > th) {
+  font-weight: 600;
 }
-.btn-warn:disabled {
-  color: rgba(0, 0, 0, 0.25);
+:deep(.ant-table-pagination.ant-pagination){
+  margin-bottom: 0;
 }
+:deep(.ant-table td) { white-space: nowrap; }
 </style>

package/src/base-client/components/common/XTree/XTree.vue

@@ -0,0 +1,71 @@
+<script setup>
+const props = defineProps({
+  // 树数据
+  // example: [{ title: '标题', key: '1', children: []}]
+  treeData: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['onSelect'])
+
+function onSelect (keys, e) {
+  emit('onSelect', keys, e)
+}
+</script>
+
+<template>
+  <div class="tree_main">
+    <a-directory-tree
+      :tree-data="props.treeData"
+      @select="onSelect"
+      :default-selected-keys="props.treeData.length > 0 ? props.treeData[0].key : null"
+      :default-expand-all="true"
+    ></a-directory-tree>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tree_main {
+  :deep(.ant-tree li .ant-tree-node-content-wrapper){
+    color: #000000e0;
+  }
+  :deep(.ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle) {
+    color: #0000004d;
+    i {
+      font-size: 16px !important;
+      line-height: 40px;
+    }
+  }
+  :deep(.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper::before, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper::before){
+    height: 40px;
+    border-radius: 6px;
+  }
+  :deep(.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before){
+    background: #e6f7ff;
+  }
+  :deep(.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before){
+    background: #e6f7ff;
+  }
+  :deep(.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-switcher){
+    color: #0000004d;
+  }
+  :deep(.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper.ant-tree-node-selected, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper.ant-tree-node-selected){
+    color: #000000e0;
+  }
+  :deep(.ant-tree li .ant-tree-node-content-wrapper){
+    line-height: 40px;
+    height: 40px;
+  }
+  :deep(.ant-tree li) {
+    padding-left: 4px;
+  }
+  :deep(.ant-tree ul) {
+    padding-left: 10px;
+  }
+  :deep(.ant-tree-icon__customize){
+    display: none;
+  }
+}
+</style>

package/src/base-client/components/common/XTree/index.js

@@ -0,0 +1,3 @@
+import XTree from './XTree'
+
+export default XTree

package/src/base-client/components/common/XTree/index.md

@@ -0,0 +1,36 @@
+# XTree
+
+更美观的树控件
+
+
+## 何时使用
+
+当需要一个美观的树控件时
+
+
+引用方式：
+
+```javascript
+import XTree from '@vue2-client/base-client/components/XTree/XTree'
+
+export default {
+    components: {
+      XTree
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-tree :tree-data="treeData" @onSelect="onSelect"></x-tree>
+```
+
+## API
+
+| 参数        | 说明      | 类型    | 默认值 |
+|-----------|---------|-------|-----|
+| treeData  | 数据集合    | Array | []  |
+| @onSelect | 树节点选择事件 | event | -   |

package/src/components/STable/index.js

@@ -161,7 +161,7 @@ export default {
             current: r.pageNo, // 返回结果中的当前分页数
             total: r.totalCount, // 返回结果中的总记录数
             showSizeChanger: this.showSizeChanger,
-            showTotal: (total, range) => range[0] === range[1] ? `第 ${range[0]} / 共 ${total} 条, 合计 ${r.totalPage} 页` : `第 ${range[0]} ~ ${range[1]} / 共 ${total} 条, 合计 ${r.totalPage} 页`,
+            showTotal: (total, range) => range[0] === range[1] ? `${range[0]} | 共 ${total} 项` : `${range[0]}-${range[1]} | 共 ${total} 项`,
             pageSize: (pagination && pagination.pageSize) || this.localPagination.pageSize
           }) || false
           // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
@@ -258,9 +258,9 @@ export default {
 
       // 绘制 alert 组件
       return (
-        <a-alert showIcon={true} style="margin-bottom: 16px">
+        <a-alert showIcon={true} style="margin-bottom: 8px;font-size: 14px;">
           <template slot="message">
-            <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span>
+            <span style="margin-right: 12px;">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span>
             {needTotalItems}
             {clearItem}
           </template>

package/src/font-style/font.css

@@ -1,6 +1,4 @@
 @font-face {
-  font-family: 'PingFang';
-  src: url('./PingFang.ttf');
-  font-weight: normal;
-  font-style: normal;
+  font-family: 'PingFangSC-Regular-woff2';
+  src: url('./PingFangSC-Regular.woff2') format('woff2');
 }

package/src/theme/default/style.less

@@ -2,14 +2,23 @@
   overflow: hidden;
   filter: invert(80%);
 }
+
+.split-right{
+  &:not(:last-child) {
+    border-right: 1px solid rgba(98, 98, 98, 0.2);
+  }
+}
+.disabled{
+  cursor: not-allowed;
+  color: @disabled-color;
+  pointer-events: none;
+}
+
 .beauty-scroll{
-  //scrollbar-color: @primary-color @primary-2;
-  //scrollbar-width: thin;
   -ms-overflow-style:none;
   position: relative;
   &::-webkit-scrollbar{
     width: 3px;
-    height: 1px;
   }
   &::-webkit-scrollbar-thumb {
     border-radius: 3px;
@@ -21,16 +30,6 @@
     background: @primary-3;
   }
 }
-.split-right{
-  &:not(:last-child) {
-    border-right: 1px solid rgba(98, 98, 98, 0.2);
-  }
-}
-.disabled{
-  cursor: not-allowed;
-  color: @disabled-color;
-  pointer-events: none;
-}
 
 // 美化滚动条
 ::-webkit-scrollbar{
@@ -50,7 +49,7 @@
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
   border-radius: 10px;
-  background: @primary-1;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb:hover {