@opentiny/vue-docs 1.0.0

package/resources/pc/demo/grid/methods/toggle-row-expansion.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <tiny-button @click="click">toggleRowExpansion</tiny-button>
+    <tiny-grid :data="tableData" ref="grid" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column type="expand" title="操作" width="60">
+        <template #default>
+          <tiny-grid :data="tableData">
+            <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+            <tiny-grid-column field="createdDate" title="创建日期" sortable></tiny-grid-column>
+            <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
+          </tiny-grid>
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+      <tiny-grid-column field="createdDate" :editor="{ component: 'input', autoselect: true }" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" :editor="{ component: 'input', autoselect: true }" title="城市"></tiny-grid-column>
+      <tiny-grid-column field="boole" title="布尔值" align="center" format-text="boole" :editor="checkboxEdit"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  data() {
+    const tableData = [
+      {
+        id: '1',
+        name: 'GFD科技YX公司',
+        city: '福州',
+        employees: 800,
+        createdDate: '2014-04-30 00:56:00',
+        boole: false
+      },
+      {
+        id: '2',
+        name: 'WWW科技YX公司',
+        city: '深圳',
+        employees: 300,
+        createdDate: '2016-07-08 12:36:22',
+        boole: true
+      },
+      {
+        id: '3',
+        name: 'RFV有限责任公司',
+        city: '中山',
+        employees: 1300,
+        createdDate: '2014-02-14 14:14:14',
+        boole: false
+      },
+      {
+        id: '4',
+        name: 'TGB科技YX公司',
+        city: '龙岩',
+        employees: 360,
+        createdDate: '2013-01-13 13:13:13',
+        boole: true
+      },
+      {
+        id: '5',
+        name: 'YHN科技YX公司',
+        city: '韶关',
+        employees: 810,
+        createdDate: '2012-12-12 12:12:12',
+        boole: true
+      }
+    ]
+    return {
+      tableData
+    }
+  },
+  methods: {
+    click() {
+      this.$refs.grid.toggleRowExpansion(this.tableData[1])
+    },
+    checkboxEdit(h, { row, column }) {
+      return (
+        <input
+          type="checkbox"
+          checked={row.boole}
+          onChange={(event) => {
+            row[column.property] = event.target.checked
+          }}
+        />
+      )
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/methods/toggle-row-selection.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <tiny-button @click="click">toggleRowSelection</tiny-button>
+    <tiny-grid
+      :data="tableData"
+      ref="grid"
+      highlight-current-row
+      border
+      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    >
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+      <tiny-grid-column field="createdDate" :editor="{ component: 'input', autoselect: true }" title="创建日期"></tiny-grid-column>
+      <tiny-grid-column field="city" :editor="{ component: 'input', autoselect: true }" title="城市"></tiny-grid-column>
+      <tiny-grid-column field="boole" title="布尔值" align="center" format-text="boole" :editor="checkboxEdit"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  data() {
+    const tableData = [
+      {
+        id: '1',
+        name: 'GFD科技YX公司',
+        city: '福州',
+        employees: 800,
+        createdDate: '2014-04-30 00:56:00',
+        boole: false
+      },
+      {
+        id: '2',
+        name: 'WWW科技YX公司',
+        city: '深圳',
+        employees: 300,
+        createdDate: '2016-07-08 12:36:22',
+        boole: true
+      },
+      {
+        id: '3',
+        name: 'RFV有限责任公司',
+        city: '中山',
+        employees: 1300,
+        createdDate: '2014-02-14 14:14:14',
+        boole: false
+      },
+      {
+        id: '4',
+        name: 'TGB科技YX公司',
+        city: '龙岩',
+        employees: 360,
+        createdDate: '2013-01-13 13:13:13',
+        boole: true
+      },
+      {
+        id: '5',
+        name: 'YHN科技YX公司',
+        city: '韶关',
+        employees: 810,
+        createdDate: '2012-12-12 12:12:12',
+        boole: true
+      },
+      {
+        id: '6',
+        name: 'WSX科技YX公司',
+        city: '黄冈',
+        employees: 800,
+        createdDate: '2011-11-11 11:11:11',
+        boole: true
+      },
+      {
+        id: '7',
+        name: 'KBG物业YX公司',
+        city: '赤壁',
+        employees: 400,
+        createdDate: '2016-04-30 23:56:00',
+        boole: false
+      },
+      {
+        id: '8',
+        name: '深圳市福德宝网络技术YX公司',
+        boole: true,
+        city: '厦门',
+        createdDate: '2016-06-03 13:53:25',
+        employees: 540
+      }
+    ]
+    return {
+      tableData
+    }
+  },
+  methods: {
+    click() {
+      this.$refs.grid.toggleRowSelection(this.tableData[1])
+    },
+    checkboxEdit(h, { row, column }) {
+      return (
+        <input
+          type="checkbox"
+          checked={row.boole}
+          onChange={(event) => {
+            row[column.property] = event.target.checked
+          }}
+        />
+      )
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/methods/toggle-tree-expansion.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <tiny-button @click="click">toggleTreeExpansion</tiny-button>
+    <tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }">
+      <tiny-grid-column type="selection" width="100" tree-node></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  data() {
+    const tableData = [
+      {
+        id: '1',
+        pid: '0',
+        name: 'GFD科技YX公司',
+        area: '华东区',
+        employees: '800',
+        children: [
+          {
+            id: '15',
+            pid: '1',
+            name: 'GFD科技股份有限子公司',
+            area: '华东区',
+            employees: '700'
+          }
+        ]
+      },
+      {
+        id: '2',
+        pid: '0',
+        name: 'WWWW科技YX公司',
+        area: '华南区',
+        employees: '500',
+        children: [
+          {
+            id: '22',
+            pid: '2',
+            name: 'WWWW科技股份有限子公司',
+            area: '华南区',
+            employees: '720'
+          }
+        ]
+      },
+      {
+        id: '4',
+        pid: '0',
+        name: 'TGBYX公司',
+        area: '华南区',
+        employees: '360',
+        children: [
+          {
+            id: '3',
+            pid: '4',
+            name: 'RFV有限责任公司',
+            area: '华南区',
+            employees: '300'
+          },
+          {
+            id: '5',
+            pid: '4',
+            name: 'YHN科技YX公司',
+            area: '华南区',
+            employees: '810',
+            children: [
+              {
+                id: '6',
+                pid: '5',
+                name: 'WSX科技YX公司',
+                area: '华南区',
+                employees: '800'
+              },
+              {
+                id: '9',
+                pid: '5',
+                name: 'UJM有限责任公司',
+                area: '华南区',
+                employees: '750'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        id: '7',
+        pid: '0',
+        name: '康康物业YX公司',
+        area: '华南区',
+        employees: '400',
+        children: [
+          {
+            id: '8',
+            pid: '7',
+            name: '深圳市福德宝网络技术YX公司',
+            area: '华南区',
+            employees: '540'
+          },
+          {
+            id: '10',
+            pid: '7',
+            name: 'IK有限责任公司',
+            area: '华南区',
+            employees: '400',
+            children: [
+              {
+                id: '23',
+                pid: '10',
+                name: 'IK有限责任股份YX公司',
+                area: '华南区',
+                employees: '455'
+              }
+            ]
+          }
+        ]
+      }
+    ]
+    return {
+      tableData
+    }
+  },
+  methods: {
+    click() {
+      this.$refs.grid.toggleTreeExpansion(this.tableData[1])
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/mouse-config.vue

@@ -0,0 +1,72 @@
+<template>
+  <tiny-grid :data="tableData" :edit-config="{}" :mouse-config="mouseConfigData">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+    <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      mouseConfigData: {
+        checked: true,
+        selected: true // 是否开启左键选中功能 默认为false
+      },
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技YX公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGBYX公司',
+          area: '华北区',
+          address: '梅州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技YX公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '6',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/news/async-colunm-render.vue

@@ -0,0 +1,189 @@
+<template>
+  <tiny-grid
+    :fetch-data="fetchData"
+    is-async-column
+    :pager="pagerConfig"
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+  >
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+    <tiny-grid-column
+      field="city"
+      title="所在城市"
+      :format-config="{
+        async: true,
+        data: options,
+        type: 'enum',
+        label: 'text',
+        value: 'value'
+      }"
+      :editor="{
+        component: Select,
+        attrs: { textField: 'text', clearable: true }
+      }"
+    ></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数量"></tiny-grid-column>
+    <tiny-grid-column field="createdDate" title="成立时间"></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script lang="jsx">
+// TEXTFIELD  FORMAT-CONFIG  LABLE  VALUE  ASYNC:true  type:enun
+import { Grid, GridColumn, Pager, Select } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      Select,
+      options: [],
+      pagerConfig: {
+        component: Pager,
+        attrs: {
+          currentPage: 1,
+          pageSize: 5,
+          pageSizes: [5, 10],
+          total: 0,
+          layout: 'total, prev, pager, next, jumper, sizes'
+        }
+      },
+      fetchData: {
+        api: this.getData
+      },
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          city: 'FZ',
+          employees: 800,
+          createdDate: '2014-04-30 00:56:00',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWW科技YX公司',
+          city: 'SZ',
+          employees: 300,
+          createdDate: '2016-07-08 12:36:22',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          city: 'ZS',
+          employees: 1300,
+          createdDate: '2014-02-14 14:14:14',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGB科技YX公司',
+          city: 'LY',
+          employees: 360,
+          createdDate: '2013-01-13 13:13:13',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技YX公司',
+          city: 'SG',
+          employees: 810,
+          createdDate: '2012-12-12 12:12:12',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '6',
+          name: 'WSX科技YX公司',
+          city: 'HG',
+          employees: 800,
+          createdDate: '2011-11-11 11:11:11',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '7',
+          name: 'KBG物业YX公司',
+          city: 'CB',
+          employees: 400,
+          createdDate: '2016-04-30 23:56:00',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '8',
+          name: '深圳市福德宝网络技术YX公司',
+          city: 'XM',
+          createdDate: '2016-06-03 13:53:25',
+          employees: 540,
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.fetchMethod().then((d) => (this.options = d))
+  },
+  methods: {
+    getData({ page }) {
+      let curPage = page.currentPage
+      let pageSize = page.pageSize
+      let offset = (curPage - 1) * pageSize
+
+      return new Promise((resolve) => {
+        resolve({
+          result: this.tableData.slice(offset, offset + pageSize),
+          page: { total: this.tableData.length }
+        })
+      })
+    },
+    fetchMethod() {
+      const randomFN = () => {
+        return [
+          {
+            text: '福州',
+            value: 'FZ'
+          },
+          {
+            text: '龙岩',
+            value: 'LY'
+          },
+          {
+            text: '深圳',
+            value: 'SZ'
+          },
+          {
+            text: '赤壁',
+            value: 'CB'
+          },
+          {
+            text: '中山',
+            value: 'ZS'
+          },
+          {
+            text: '韶关',
+            value: 'SG'
+          },
+          {
+            text: '黄冈',
+            value: 'HG'
+          },
+          {
+            text: '厦门',
+            value: 'XM'
+          }
+        ]
+      }
+
+      return new Promise((resolve) => {
+        // 模拟发起请求，500毫秒后生效
+        setTimeout(() => {
+          resolve(randomFN())
+          // 模拟请求完成
+        }, 500)
+      })
+    }
+  }
+}
+</script>