vue2-client 0.1.1 → 1.0.0

package/src/components/Criteria/CriteriaPaged.vue

@@ -1,50 +0,0 @@
-<template>
-  <div id="CriteriaPaged">
-    <slot name="criteria"></slot>
-    <slot name="list"></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    model: {
-      type: Object,
-      default: null
-    }
-  },
-  methods: {
-    loadPage (pageNo, pageSize) {
-      console.log(pageNo, pageSize)
-      this.model.loadPage(pageNo, pageSize)
-    },
-    search (args) {
-      this.model.search(args.condition, args.model)
-    },
-    getTableScroll (extraHeight) {
-      console.log('extraHeight', extraHeight)
-        //  默认底部分页64 + 边距10 + padding 6
-      if (!extraHeight) {
-        extraHeight = 88
-      } else {
-        const tFooter = document.getElementById('CriteriaPaged') ? document.getElementById('CriteriaPaged').getElementsByClassName('ant-table-footer')[0] : null
-        // footer 模块有 54
-        extraHeight = 88 + tFooter.offsetHeight
-      }
-      const tHeader = document.getElementById('CriteriaPaged') ? document.getElementById('CriteriaPaged').getElementsByClassName('ant-table-thead')[0] : null
-      // 表格内容距离顶部的距离
-      let tHeaderBottom = 0
-      if (tHeader) {
-        tHeaderBottom = tHeader.getBoundingClientRect().bottom
-      }
-      // 窗体高度-表格内容顶部的高度-表格内容底部的高度
-      // let height = document.body.clientHeight - tHeaderBottom - extraHeight
-      return `calc(100vh - ${tHeaderBottom + extraHeight}px)`
-    }
-  }
-}
-</script>
-<style lang="less">
-  #CriteriaPaged {
-  }
-</style>

package/src/components/Criteria/index.js

@@ -1,7 +0,0 @@
-import Criteria from './Criteria'
-import CriteriaPaged from './CriteriaPaged'
-
-export {
-  Criteria,
-  CriteriaPaged
-}

package/src/components/Criteria/index.md

@@ -1,120 +0,0 @@
-# CriteriaPaged 通用查询界面
-# Criteria 查询条件收集组件
-
-## 何时使用
-需要自动收集用户输入的查询条件, 查询并展示
-
-
-引用方式：
-
-```text
-组件已全局注册, 直接使用
-<criteria-paged>
-<criteria>
-```
-
-
-
-## 代码演示
-
-```vue
-<criteria-paged :model="model" ref="criteriaPaged">
-  <template #criteria>
-    <criteria ref="criteria" @condition-changed="$refs.criteriaPaged.search">
-      <template #condition1="{ model }">
-        <a-form-model-item label="客户编号">
-          <a-input v-model="model.f_userinfo_code" variable="f_userinfo_code" condition="f_userinfo_code = '{}'"/>
-        </a-form-model-item>
-      </template>
-      <template #condition2="{ model }">
-        <a-form-item label="用户状态">
-          <a-select v-model="model.f_state" placeholder="请选择" variable="status" condition="f_state = '{}'">
-            <a-select-option value="">全部</a-select-option>
-            <a-select-option value="正常">正常</a-select-option>
-            <a-select-option value="销户">销户</a-select-option>
-          </a-select>
-        </a-form-item>
-      </template>
-      <template #conditionMore="{ model }">
-        <a-col :sm="24" :md="12" :xl="6">
-          <a-form-model-item label="开始日期">
-            <a-date-picker format="YYYY-MM-DD HH:mm:ss" :show-time="true"/>
-          </a-form-model-item>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="6">
-          <a-form-model-item label="结束日期">
-            <a-date-picker format="YYYY-MM-DD HH:mm:ss" :show-time="true"/>
-          </a-form-model-item>
-        </a-col>
-      </template>
-      <template #button>
-      </template>
-    </criteria>
-  </template>
-  <template #list>
-  </template>
-</criteria-paged>
-<script>
-  import PagedList from '@/vue2-client/plugins/PagedList'
-
-  export default {
-    name: '',
-    data () {
-      return {
-        model: new PagedList('rs/sql/filemanage_getUserfies', 20, { orderitem: 'f_userinfo_id DESC' }),
-      }
-    }
-  }
-</script>
-```
-## 当需要查查询之前做一些事情时, 不在调用criteria-paged组件中的查询方法, 自定义方法调用
-```vue
-<criteria-paged :model="model" ref="criteriaPaged">
-  <template #criteria>
-    <criteria ref="criteria" @condition-changed="selfSearch">
-    </criteria>
-  </template>
-</criteria-paged>
-
-<script>
-  import PagedList from '@/vue2-client/plugins/PagedList'
-
-  export default {
-    name: '',
-    data () {
-      return {
-        model: new PagedList('rs/sql/filemanage_getUserfies', 20, { orderitem: 'f_userinfo_id DESC' }),
-      }
-    },
-    methods: {
-      selfSearch (args) {
-        // 执行之前的事情
-        this.model.search(args.condition, args.model)
-      }
-    }
-  }
-</script>
-```
-
-
-## solt
-
-| 名称   | 说明                     |
-| ------ | ----------------------- |
-| condition1 | 筛选列表1 |
-| condition2 | 筛选列表2 |
-| conditionMore | 详细筛选列表 |
-| button | 按钮列表 |
-| list | 数据表格展示 |
-
-## API
-
-参数 | 说明 | 类型 | 默认值
-|----|------|-----|------
-|model | 查询对象) | PagedList(src/vue2-client/plugins/PagedList.js) | null
-
-## 事件
-
-| 名称   | 说明                       | 类型   | 默认值 |
-| ------ | -------------------------- | ------ | ------ |
-| condition-changed | 当点击 `查询按钮` 时触发 | Object | -      |

package/src/components/DataGrid/DataGrid.vue

@@ -1,206 +0,0 @@
-<template>
-  <div>
-    <a-table
-      table-layout="auto"
-      size="default"
-      :columns="columns"
-      :data-source="data.rows"
-      :pagination="pagination"
-      row-key="nanoid"
-      :scroll="scroll"
-      :components="components"
-      :loading="data.state === '查询'"
-      :bordered="bordered"
-      :scrollToFirstRowOnChange="true"
-      @change="onChange">
-      <!--      :customRow="handleClickRow"-->
-      <!--    >-->
-      <template
-        v-for="column in columns"
-        :slot="column.scopedSlots?column.scopedSlots.customRender:''"
-        slot-scope="text,row,index">
-        <slot :name="column.scopedSlots?column.scopedSlots.customRender:''" v-bind="{text,row,index}"></slot>
-      </template>
-      <template slot="footer">
-        <slot name="footer" >
-        </slot>
-      </template>
-    </a-table>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'TableList',
-  components: {},
-  props: {
-    // 行数据 配置行
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    // 数据源 用来展示的数据
-    data: {
-      type: Object,
-      default: () => {
-      }
-    },
-    // 控制滚动 {x:100,y:100} 空为不滚动 可以写一个{x:100}
-    // 也可用于指定滚动区域的宽和高，可以设置为像素值，百分比，true 和 'max-content'
-    // scroll: {
-    //   type: Object,
-    //   default: () => {
-    //   }
-    // },
-    // 是否有边框
-    bordered: {
-      type: Boolean,
-      default: false
-    },
-    // 是否可拉伸单元格
-    resizable: {
-      type: Boolean,
-      default: false
-    },
-    // 是否可以改变pageSize
-    showSizeChanger: {
-      type: Boolean,
-      default: true
-    },
-    // 是否可以跳转到某页
-    showQuickJumper: {
-      type: Boolean,
-      default: true
-    },
-    // 跳转下拉框中的数据
-    pageSizeOptions: {
-      type: Array,
-      default: () => ['10', '20', '50', '100']
-    },
-    // 分页组件所在位置 'top' | 'bottom' | 'both'
-    position: {
-      type: String,
-      default: 'bottom'
-    }
-  },
-  mounted () {
-    console.log('看看高度', this.$parent.getTableScroll(!!this.$slots['footer']))
-   this.scroll = { y: this.$parent.getTableScroll(!!this.$slots['footer']) }
-  },
-  data () {
-    return {
-      scroll: {}
-    }
-  },
-  filters: {},
-  computed: {
-    pagination () {
-      return {
-        current: this.data.pageIndex, // 当前页数
-        position: this.position,
-        total: this.data.count, // 总页数
-        pageSize: this.data.pageSize, // 每页中显示数据
-        showSizeChanger: this.showSizeChanger, // 是否可以改变pagesize
-        showQuickJumper: this.showQuickJumper, // 是否可以跳转到某页
-        pageSizeOptions: this.pageSizeOptions, // 每页中显示的数据
-        showTotal: total => `共有 ${this.data.count} 条数据,共计${Math.ceil(this.data.count / this.data.pageSize)}页`,
-        onChange: (current, pageSize) => this.$parent.loadPage(current, pageSize || this.data.pageSize),
-        onShowSizeChange: (current, pageSize) => this.$parent.loadPage(current, pageSize)
-      }
-    },
-    components () {
-      // Table有边框才有此功能
-      if (this.bordered && this.resizable) {
-        return {
-          header: {
-            cell: (h, props, children) => {
-              const { key, ...restProps } = props
-              const col = this.columns.find(col => {
-                const k = col.dataIndex || col.key
-                return k === key
-              })
-              if (!col || !col.width) {
-                return h('th', { ...restProps }, [...children])
-              }
-              const dragProps = {
-                key: col.dataIndex || col.key,
-                class: 'table-draggable-handle',
-                attrs: {
-                  w: 10,
-                  x: col.width,
-                  z: 1,
-                  axis: 'x',
-                  draggable: true,
-                  transform: 'none',
-                  resizable: false
-                },
-                on: {
-                  dragging: (x, y) => {
-                    col.width = Math.max(x, 90)
-                  }
-                }
-              }
-              const drag = h('vue-draggable-resizable', { ...dragProps })
-              return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
-            }
-          }
-        }
-      } else {
-        return {}
-      }
-    }
-  },
-  methods: {
-    onChange (pagination, filters, sorter) {
-      this.$emit('sort-change', sorter)
-    }
-    // handleClickRow (record, index) {
-    //   return {
-    //     on: {
-    //       click: (e) => {
-    //         let tr = e.target.parentNode // 拿到tr标签
-    //         if (tr.nodeName !== 'TR') {
-    //           tr = tr.parentNode
-    //         }
-    //         // 给所有tr标签设置颜色
-    //         for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
-    //           tr.parentNode.childNodes[i].style.backgroundColor = 'white'
-    //         }
-    //         // 单独设置被选中的标签颜色
-    //         tr.style.backgroundColor = '#E9F8FF'
-    //       }
-    //     }
-    //   }
-    // }
-  },
-  watch: {}
-}
-</script>
-<style lang='less'>
-// 实现可伸缩列样式
-.resize-table-th {
-  position: relative;
-
-  .table-draggable-handle {
-    transform: none !important;
-    position: absolute;
-    height: 100% !important;
-    bottom: 0;
-    left: auto !important;
-    right: -5px;
-    cursor: col-resize;
-    touch-action: none;
-    border: 0;
-  }
-
-  //.table-draggable-handle {
-  //  height: 100% !important;
-  //  bottom: 0;
-  //  left: auto !important;
-  //  right: -5px;
-  //  cursor: col-resize;
-  //  touch-action: none;
-  //}
-}
-</style>

package/src/components/DataGrid/index.js

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

package/src/components/DataGrid/index.md

@@ -1,195 +0,0 @@
-# DataGrid 组件
-
-对 antdv 进行封装的 表格展示组件
-
-## 何时使用
-
-引用方式：
-
-```javascript
-import DataGrid from '@/vue2-client/components/DataGrid'
-
-export default {
-    components: {
-      DataGrid
-    }
-}
-```
-
-## 代码演示
-```vue
-<data-grid :data="model" :columns="columns">
-</data-grid>
-```
-## API
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-data | 将要展示的数据(必传) | Array | []
-columns | DataGrid会根据Json内容生成列 | Json | {}
-bordered | 是否显示表格边框 | Boolean | false
-resizable | 是否可拉伸单元格 需要bordered 为true才会生效 | Boolean | false
-showSizeChanger | 是否可以改变页面行数 | Boolean | true
-showQuickJumper | 是否可以跳转到某页 | Boolean | true
-pageSizeOptions | 跳转到某页的下拉框数据 | Array | ['10', '20', '50', '100']
-position | 分页小组件位置 | String('top' , 'bottom' , 'both') | bottom
-load-page(当前页数，当前页面行数) | 选择页数回调方法 | emit |  
-page-size(当前页数，当前页面行数) | 选择页面行数回调方法 | emit |  
-page-size(当前页数，当前页面行数) | 选择页面行数回调方法 | emit |
-sort-change() | 选择字段排序方式触发方法 |  |  
-
-
-## columns用法参考
-具体用法参考 [AntdV 官方文档](https://www.antdv.com/components/table-cn/#Column) 中 columns描述
-```vue
-<template>
-  <a-card :bordered="false">
-    <criteria-paged :model="model">
-      <template #criteria>
-      </template>
-      <template #list>
-        <data-grid :data="model" :columns="columns" :scroll="scroll" @sort-change="sort">
-          <!--这里传的对象为 {text,row,index} -->
-          <span
-            slot="f_meter_style"
-            slot-scope="data"
-            @click="logData(data)"
-            style="color: red">点击提示{{ data.text }}</span>
-          <!--可以通过解构的方式取到里面 的属性 如  slot-scope="{text}"/v-slot:f_table_state="{text}" 获取到的为单独的text属性 -->
-          <template v-slot:f_table_state="{text}">
-            <a-tag
-              :color="text === '正常' ? 'green' : 'geekblue'"
-              @click="if(text==='正常'){$message.success('恭喜表具正常！')}else{$message.info('已经换表不用！')}">
-              {{ text }}
-            </a-tag>
-          </template>
-        </data-grid>
-      </template>
-    </criteria-paged>
-  </a-card>
-</template>
-
-<script>
-
-export default {
-  name: 'fileInformation',
-  components: { CriteriaPaged, Criteria, DataGrid },
-  data () {
-    return {
-      model: new PagedList('rs/sql/filemanage_getmergeuser', 20, { orderitem: 'f_userinfo_code DESC' }),
-      scroll: {},
-      defaultOrder: 'f_userinfo_code DESC',
-      columns: [
-        {
-          title: '用户名称😁',
-          dataIndex: 'f_user_name',
-          width: 150,
-          // 设置宽度属性后 会以固定宽度呈现  超出页面宽度会挤在一起
-          fixed: 'left'
-          // 但是设置了fixed属性后 这一列不会被挤在一块会常在左边  table设置滚动后 参数为 :scroll="{ x: 1500, y: 300 }" 可单独设置 x y
-          // 总宽度超过设定的范围表格会可以滚动 默认不滚动 滚动只会影响没有fixed的列
-        },
-        {
-          title: '用户编号',
-          dataIndex: 'f_userinfo_code',
-          width: 150,
-          // 排序开关
-          sorter: true
-        },
-        {
-          title: '气表品牌',
-          dataIndex: 'f_meter_brand',
-          // customRender 第一种写法 总共三个参数 分别是 text(当前列数据).row(当前行数据).index(当前下标)
-          customRender: (text, row, index) => {
-            if (index === 0) {
-              text += '我是第一行'
-            }
-            return <span>{text + 'aaa'}</span>
-          },
-          width: 150
-        },
-        {
-          title: '气表型号',
-          dataIndex: 'f_meter_style',
-          // customRender 第二种写法  在data-grid中间添加solt名为 customRender值的template
-          scopedSlots: { customRender: 'f_meter_style' },
-          width: 150
-        },
-        {
-          title: '表具状态',
-          dataIndex: 'f_table_state',
-          scopedSlots: { customRender: 'f_table_state' },
-          width: 150
-        },
-        {
-          title: '表号',
-          dataIndex: 'f_meternumber',
-          width: 150
-        },
-        {
-          title: '用户状态',
-          dataIndex: 'f_user_state',
-          width: 150
-        },
-        {
-          title: '用户地址',
-          dataIndex: 'f_address',
-          width: 500
-        },
-        {
-          title: '操作',
-          fixed: 'right',
-          // 这一列常在右边
-          customRender: (text, row, index) => {
-            return <a-popover title='这里是标题' trigger='click'>
-              <a slot='content'>这里是提示</a>
-              <a-button type='primary'>
-                操作
-              </a-button>
-            </a-popover>
-          },
-          width: 100
-        }
-      ]
-    }
-  },
-  methods: {
-    // {"column":{"title":"用户编号","dataIndex":"f_userinfo_code",
-    // "width":150,"sorter":true},"order":"ascend","field":"f_userinfo_code","columnKey":"f_userinfo_code"}
-    sort (sorter) {
-      if (sorter.order) {
-        this.model.paramSource.orderitem = sorter.field + (sorter.order === 'ascend' ? ' asc' : ' desc')
-      } else {
-        this.model.paramSource.orderitem = this.defaultOrder
-      }
-    },
-    search () {
-      this.$refs.criteria.search()
-    },
-    logData (obj) {
-      this.$message.info(obj.text)
-    },
-    async selfSearch (args) {
-      this.loading = true
-      await this.model.search(args.condition, args.model)
-      this.scroll = { x: '100%' }
-      this.loading = false
-    }
-  }
-}
-</script>
-```
-## 合计字段用法参考
-
-```vue
-
-<data-grid :data='model' :columns='columns' @sort-change='sort'>
-// 中间内容自己根据样式修改   不需要合计行的直接删除这个template即可
-  <template v-slot:footer>
-    合计：
-    <a-tag>
-      表上余额合计
-    </a-tag>
-    {{ model.sums.f_balance_amount }}
-  </template>
-</data-grid>
-```