@lambo-design/schema-paging-table 1.0.0-beta.0

package/index.js

@@ -0,0 +1,2 @@
+import LamboSchemaPagingTable from './src/index';
+export default LamboSchemaPagingTable

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@lambo-design/schema-paging-table",
+  "version": "1.0.0-beta.0",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.103",
+    "@lambo-design/paging-table": "^1.0.0-beta.69",
+    "@lambo-design/schema-form": "^1.0.0-beta.20",
+    "@lambo-design/shared": "^1.0.0-beta.92"
+  },
+  "scripts": {}
+}

package/src/index.vue

@@ -0,0 +1,357 @@
+<template>
+  <LamboPagingTable
+    ref="schemaPagingTable"
+    :dataUrl="dataUrl"
+    :columns="tableColumn"
+    :searchParams="tableSearchParams"
+    :transformResponse="transformResponse"
+    @on-row-click="onRowClick"
+    @on-selection-change="onSelectionChange"
+    @on-select="onSelect"
+    @on-select-cancel="onSelectCancel"
+    @on-select-all="onSelectAll"
+    @on-select-all-cancel="onSelectAllCancel">
+    <div slot="search">
+      <LamboSchemaForm :labelWidth="100" ref="lamboSchemaForm" v-model="queryForm" :form-type="'search'" :fieldList="formFields"  @doSearch="doSearch" @reset="onReset"/>
+      <div v-if="rowName" class="tags">
+        <Tag v-for="item in selectTags" :key="item.key" :name="item.key" closable @on-close="tagClose">
+          {{ item.value }}
+        </Tag>
+      </div>
+    </div>
+    <div slot="buttons">
+      <Button
+        v-if="spreadButton.length > 0"
+        v-for="(item,index) in spreadButton"
+        type="primary"
+        :ghost="true"
+        :icon="item.icon"
+        v-permission="item.permission"
+        :key="index"
+        @click="doClick(item)"
+        style="margin-right: 5px">
+        {{ item.name }}
+      </Button>
+      <Dropdown v-if="dropDownButton.length > 0">
+        <Button type="primary" :ghost="true" icon="md-more">
+          更多操作
+          <Icon type="ios-arrow-down"></Icon>
+        </Button>
+        <DropdownMenu slot="list">
+          <DropdownItem
+            v-for="(item,index) in dropDownButton"
+            v-permission="item.permission"
+            :key="index"
+          >
+            <Icon :type="item.icon" style="margin-right: 5px"></Icon>
+            <span @click="doClick(item)">{{ item.name }}</span>
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
+  </LamboPagingTable>
+</template>
+<script>
+import ajax from '@lambo-design/shared/utils/ajax'
+import { operateBtn, operateHref } from '@lambo-design/shared/utils/assist'
+import LamboPagingTable from '@lambo-design/paging-table'
+import LamboSchemaForm from '@lambo-design/schema-form'
+
+export default {
+  components: {
+    LamboSchemaForm,
+    LamboPagingTable,
+  },
+  data() {
+    return {
+      queryForm: null,
+      tableSearchParams: {},
+      selection: [],
+      selectStore: [],
+      selectTags: [],
+      selectRows: [],
+      selectedKeys: [],
+    }
+  },
+  props:{
+    dataUrl:{
+      type: String,
+      required: true,
+      default: ''
+    },
+    columnList:{
+      type: Array,
+      required: true,
+      default(){
+        return []
+      }
+    },
+    rowKey: {
+      type: String,
+      require: false,
+      default: ""
+    },
+    rowName: {
+      type: String,
+      require: false,
+      default: ""
+    },
+    form:{
+      type: Object,
+      required: true,
+      default(){
+        return {}
+      }
+    },
+    formFields:{
+      type: Array,
+      required: true,
+      default(){
+        return []
+      }
+    },
+    buttonList:{
+      type: Array,
+      required: true,
+      default(){
+        return []
+      }
+    },
+  },
+  computed: {
+    tableColumn: function () {
+      let columns = []
+      let self = this
+      self.columnList.forEach((item,index)=>{
+        let obj = item
+        if(obj.hasOwnProperty("enums") && obj.hasOwnProperty("translate") && obj.translate === 'enums'){
+          obj.render = function (h, param) {
+            let state = param.row[obj.key]
+            return h('span', obj.enums[state])
+          }
+        }else if(obj.hasOwnProperty("type") && obj.type === "operate"){
+          obj.render = (h, param) => {
+            return h('div',
+              obj.button.map((item,index)=>{
+                return operateHref(self, h, param.row, item.name, (vm, currentRow) => {
+                  if(item.clickEvent?.type==="route"){
+                    // self.$Message.info(item.clickEvent.name)
+                    let query = item.clickEvent?.route?.keys?.reduce((acc,sourceItem)=>{
+                      return Object.assign(acc,{[sourceItem]:currentRow[sourceItem]})
+                    },{})
+                    this.$router.push({
+                      path: item.clickEvent?.route?.path,
+                      query
+                    })
+                  }else if(item.clickEvent?.type==="request"){
+                    // self.$Message.info(item.clickEvent.name)
+                    let data = item.clickEvent?.request?.keys?.reduce((acc,sourceItem)=>{
+                      return Object.assign(acc,{[sourceItem]:currentRow[sourceItem]})
+                    },{})
+                    let request = {
+                      url:item.clickEvent.request.url,
+                      method:item.clickEvent.request.method,
+                      param:data,
+                    }
+                    let response = item.clickEvent.response
+                    self.fetch(request,response)
+                  }else if(item.clickEvent?.type==="method"){
+                    let args = item.clickEvent?.method?.keys?.reduce((total,current)=>{
+                      return Object.assign(total,{[current]:currentRow[current]})
+                    },{})
+                    self.$emit(item.clickEvent?.method?.name,args)
+                  }else if(item.clickEvent?.type==="modal"){
+                    self.$Message.info(item.clickEvent.name)
+                  }
+                },item.permission)
+              })
+            )
+          }
+        }
+        columns.push(item)
+      })
+      return columns
+    },
+    spreadButton: function () {
+      return this.buttonList.slice(0,3)
+    },
+    dropDownButton: function () {
+      return this.buttonList.slice(3 - this.buttonList.length)
+    },
+  },
+  watch:{
+    form: function(val) {
+      this.queryForm = val
+    }
+  },
+  created() {
+  },
+  methods: {
+    doClick(item){
+      let self = this;
+      if(item.clickEvent?.type==="route"){
+        // self.$Message.info(item.clickEvent.name)
+        let query = item.clickEvent?.route?.keys?.reduce((acc,sourceItem)=>{
+          return Object.assign(acc,{[sourceItem]:param.row[sourceItem]})
+        },{})
+        this.$router.push({
+          path: item.clickEvent?.route?.path,
+          query
+        })
+      }else if(item.clickEvent?.type==="method"){
+        // self.$Message.info(item.clickEvent.name)
+        let param = item.clickEvent?.method?.keys?.reduce((acc,sourceItem)=>{
+          return Object.assign(acc,{[sourceItem]:self.selection[sourceItem]})
+        },{})
+        self.$emit(item.clickEvent?.method?.name,param)
+      }else if(item.clickEvent?.type==="modal"){
+        self.$Message.info(item.clickEvent.name)
+      }
+    },
+    doSearch: function () {
+      this.tableSearchParams = Object.assign({}, this.queryForm)
+    },
+    onReset() {
+      this.doSearch()
+    },
+    fetch: function (request,response) {
+      let self = this
+      let options = {
+        url: request.url,
+        method: request.method,
+        [request.method==='GET'?"params":"data"]:request.param
+      }
+      ajax.request(options).then(function (resp) {
+        // todo 判断返回码
+        self.$Message.success(response.successMsg)
+        self.doSearch()
+      }).catch(function (err) {
+        console.error(err)
+        self.$Message.error(response.errorMsg)
+      })
+    },
+    /**
+     *
+     * @param row
+     * @param index
+     */
+    onRowClick: function (row, index) {
+      this.selectOnChange(row, index);
+    },
+    //单选
+    selectOnChange: function (row, index) {
+      this.selection = Array(index).fill(false);
+      this.selection.splice(index, 1, true);
+      this.selectStore = [row];
+    },
+    //多选
+    onSelectionChange: function (rows) {
+      if (!this.rowKey) {
+        this.selectStore = rows;
+      } else {
+        this.selectStore = rows;
+        if (rows && rows.length > 0) {
+          for (let i = 0; i < rows.length; i++) {
+            let row = rows[i];
+            if (!this.selectTags.some(item => item.key === row[this.rowKey])) {
+              let tagItem = {"key": row[this.rowKey], "value": row[this.rowName]}
+              this.selectTags.push(tagItem);
+            }
+          }
+        }
+      }
+    },
+    onSelect: function (selection, row) {
+      if (this.rowKey) {
+        this.selectRows[row[this.rowKey]] = row;
+      }
+    },
+    onSelectCancel: function (selection, row) {
+      if (this.rowKey) {
+        delete this.selectRows[row[this.rowKey]];
+        const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === row[this.rowKey])
+        if (selectIndex > -1) {
+          this.selectTags.splice(selectIndex, 1);
+        }
+      }
+    },
+    onSelectAll: function (selection) {
+      if (this.rowKey) {
+        for (let item of selection) {
+          this.selectRows[item[this.rowKey]] = item;
+        }
+      }
+    },
+    onSelectAllCancel: function () {
+      if (this.rowKey) {
+        let currentTableData = this.$refs.schemaPagingTable.$data.tableData;
+        for (let i = 0; i < currentTableData.length; i++) {
+          let tempData = currentTableData[i][this.rowKey];
+          delete this.selectRows[tempData];
+          const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === tempData)
+          if (selectIndex > -1) {
+            this.selectTags.splice(selectIndex, 1);
+          }
+        }
+      }
+    },
+    transformResponse: function (resp) {
+      if (this.rowKey) {
+        let self = this;
+        if (resp.code === 1 || resp.code === "000") {
+          let tableData = resp.data.rows;
+          for (let i = 0; i < tableData.length; i++) {
+            if (self.selectRows[tableData[i][self.rowKey]]) {
+              tableData[i]._checked = true;
+            }
+          }
+          resp.data.rows = tableData;
+        }
+      }
+      return resp;
+    },
+    clearSelectData: function () {
+      this.selection = [];//清空已选项
+      this.selectStore = [];//清空已选数据
+      this.selectRows = [];//清空已选数据
+      this.selectTags = [];//清空所选标签
+      this.selectedKeys = [];//清空默认选择
+    },
+    tagClose: function (event, name) {
+      const selectIndex = (this.selectTags || []).findIndex((selectItem) => selectItem.key === name)
+      const dataIndex = (this.$refs.schemaPagingTable.$data.tableData || []).findIndex((selectItem) => selectItem[this.rowKey] === name)
+      if (selectIndex > -1) {
+        this.selectTags.splice(selectIndex, 1);
+        this.selectStore.splice(selectIndex, 1);
+      }
+      delete this.selectRows[name];
+      if (dataIndex > -1) {
+        this.$refs.schemaPagingTable.$refs.tableRef.toggleSelect(dataIndex);
+      }
+    },
+    getSelection(){
+      if (this.selectRows.length > 0 && this.rowKey) {
+        let selectStore = [];
+        for (let item in this.selectRows) {
+          selectStore.push(this.selectRows[item]);
+        }
+        this.selectStore = selectStore;
+      }
+      return this.selectStore
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.lambo-grid-table {
+  /deep/.ivu-form {
+    .ivu-form-item {
+      display: block !important;
+    }
+  }
+}
+.tags {
+  margin: 10px auto;
+}
+</style>
+