@opentiny/vue-docs 1.0.3 → 1.0.4

package/resources/pc/demo/grid/grid_Example/gridEdit/custom-edit.vue

@@ -0,0 +1,116 @@
+<template>
+  <tiny-grid ref="grid" :data="tableData" seq-serial show-overflow="ellipsis">
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称" :renderer="renderInput('name')">
+      <template #header="{ column }">
+        <i class="tiny-icon tiny-grid-required-icon"></i>
+        <span>{{ column.title }}</span>
+      </template>
+    </tiny-grid-column>
+    <tiny-grid-column field="area" title="区域" :renderer="renderSelect('area')"></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址" :renderer="renderInput('address')"></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" :renderer="renderInput('introduction')"></tiny-grid-column>
+    <tiny-grid-column title="操作" width="200" align="center">
+      <template #default="{ row }">
+        <template v-if="row.editing">
+          <tiny-button size="mini" @click="row.editing = false"> 保存 </tiny-button>
+          <tiny-button size="mini" @click="row.editing = false"> 取消 </tiny-button>
+        </template>
+        <template v-else>
+          <tiny-button size="mini" @click="row.editing = true"> 编辑 </tiny-button>
+        </template>
+      </template>
+    </tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn, Input, Select, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn,
+    TinyButton: Button
+  },
+  methods: {
+    renderInput(field) {
+      return (h, { row }) =>
+        row.editing
+          ? h(Input, {
+              props: { modelValue: row[field] },
+              on: { 'update:modelValue': (value) => (row[field] = value) }
+            })
+          : h('span', row[field])
+    },
+    renderSelect(field) {
+      return (h, { row }) =>
+        row.editing
+          ? h(Select, {
+              props: { modelValue: row[field], options: this.options, textField: 'label', valueField: 'value' },
+              on: { 'update:modelValue': (value) => (row[field] = value) }
+            })
+          : h('span', row[field])
+    }
+  },
+  data() {
+    return {
+      options: [
+        { label: '华北区', value: '华北区' },
+        { label: '华东区', value: '华东区' },
+        { label: '华南区', value: '华南区' }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          editing: true
+        },
+        {
+          id: '2',
+          name: 'WWWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          editing: true
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          editing: false
+        },
+        {
+          id: '4',
+          name: 'TGB有限公司',
+          area: '华北区',
+          address: '梅州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          editing: false
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          editing: false
+        },
+        {
+          id: '6',
+          name: '康康物业有限公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
+          editing: false
+        }
+      ]
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/grid_Example/gridEdit/editor-bg.vue

@@ -0,0 +1,93 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    seq-serial
+    show-overflow="ellipsis"
+    :edit-config="{ activeMethod }"
+    :cell-class-name="cellClassName"
+  >
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称" :editor="{ component: 'input' }"></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      options: [
+        { label: '华北区', value: '华北区' },
+        { label: '华东区', value: '华东区' },
+        { label: '华南区', value: '华南区' }
+      ],
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGB有限公司',
+          area: '华北区',
+          address: '梅州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '6',
+          name: '康康物业有限公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  },
+  methods: {
+    activeMethod({ row, column }) {
+      return column.property !== 'name' && row.id !== '3'
+    },
+    cellClassName({ row, column }) {
+      return this.activeMethod({ row, column }) ? '' : 'disable-cell-edit'
+    }
+  }
+}
+</script>
+
+<style>
+.disable-cell-edit {
+  background-color: #e8ebef;
+}
+</style>

package/resources/pc/demo/grid/grid_Example/gridValid/asterisk-method.vue

@@ -0,0 +1,100 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    :tooltip-config="{ appendToBody: false, placement: 'right' }"
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    :edit-rules="validRules"
+    :valid-config="{ asteriskMethod }"
+  >
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称" :editor="{ component: 'input' }"></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+const validRules = {
+  name: [
+    { required: true, message: '名称必填' },
+    { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
+  ],
+  area: {
+    type: 'string',
+    required: true,
+    validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
+    message: '区域格式不正确'
+  },
+  address: {
+    type: 'string',
+    validator: (rule, value) =>
+      new Promise((resolve, reject) => {
+        if (!value) {
+          reject(new Error('地址不能为空'))
+        } else if (value.length > 10) {
+          reject(new Error('地址过长'))
+        } else {
+          resolve()
+        }
+      })
+  }
+}
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  methods: {
+    asteriskMethod({ column }) {
+      // name 列不显示必填星号
+      return column.property !== 'name'
+    }
+  },
+  data() {
+    return {
+      validRules,
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGB科技有限公司',
+          area: '华东区',
+          address: '龙岩',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/grid_Example/gridValid/bubbling.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="demo-body">
+    <div class="demo-container">
+      <div class="placeholder"></div>
+      <tiny-grid
+        :data="tableData"
+        :tooltip-config="{ appendToBody: true, placement: 'right', popperOptions: { bubbling: true } }"
+        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+        :edit-rules="validRules"
+        :valid-config="validConfig"
+      >
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column field="name" title="名称" :editor="{ component: 'input' }"></tiny-grid-column>
+        <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
+        <tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
+        <tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
+      </tiny-grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+const validRules = {
+  name: [
+    { required: true, message: '名称必填' },
+    { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
+  ],
+  area: {
+    type: 'string',
+    required: true,
+    validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
+    message: '区域格式不正确'
+  },
+  address: {
+    type: 'string',
+    validator: (rule, value) =>
+      new Promise((resolve, reject) => {
+        if (!value) {
+          reject(new Error('地址不能为空'))
+        } else if (value.length > 10) {
+          reject(new Error('地址过长'))
+        } else {
+          resolve()
+        }
+      })
+  }
+}
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  methods: {
+    asteriskMethod({ column }) {
+      // name 列不显示必填星号
+      return column.property !== 'name'
+    }
+  },
+  data() {
+    return {
+      validRules,
+      validConfig: {
+        asteriskMethod: this.asteriskMethod
+      },
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGB科技有限公司',
+          area: '华东区',
+          address: '龙岩',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-body {
+  height: 400px;
+  overflow: scroll;
+  background: #e5edbc;
+}
+.demo-body > .demo-container {
+  height: 3000px;
+}
+.placeholder {
+  height: 300px;
+}
+</style>

package/resources/pc/demo/grid/grid_Example/gridValid/editing-isvalidalways-validation.spec.js

@@ -7,15 +7,14 @@ test('隐藏列编辑时校验', async ({ page }) => {
     .getByRole('row', {
       name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
     })
-    .getByRole('cell')
-    .nth(1)
-    .click()
+    .getByRole('textbox')
+    .clear()
   await page
     .getByRole('row', {
       name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
     })
     .getByRole('textbox')
-    .fill('')
+    .fill('GF')
 
-  await expect(page.getByRole('tooltip', { name: '名称必填' })).toBeVisible()
+  await expect(page.getByRole('tooltip', { name: '名称长度在 3 到 50 个字符' })).toBeVisible()
 })

package/resources/pc/demo/grid/grid_Example/gridValid/select-validation.spec.js

@@ -9,7 +9,8 @@ test('选中时校验', async ({ page }) => {
       name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
     })
     .getByRole('textbox')
-    .fill('')
+    .clear()
+  await page.waitForTimeout(200)
   await page
     .getByRole('row', {
       name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'

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

@@ -0,0 +1,221 @@
+<template>
+  <tiny-grid v-bind="op"></tiny-grid>
+</template>
+
+<script>
+import { Grid } from '@opentiny/vue'
+
+const tableData = [
+  {
+    id: '1',
+    transDate: '2014-04-30',
+    a01: 0,
+    a02: 0,
+    a03: 0,
+    a04: 0,
+    a05: 0,
+    a06: 0,
+    a07: 0,
+    a08: 0,
+    a09: 0,
+    a10: 0,
+    a11: 0,
+    a12: 0,
+    a13: 0,
+    a14: 0
+  }
+]
+
+export default {
+  components: {
+    TinyGrid: Grid
+  },
+  data() {
+    return {
+      op: {
+        columns: [
+          {
+            type: 'index',
+            width: 60
+          },
+          {
+            type: 'selection',
+            width: 60
+          },
+          {
+            field: 'transDate',
+            title: '交易日期'
+          },
+          {
+            title: '支付机构业务系统中已反映的入金业务',
+            children: [
+              {
+                title: '备付金账户已入金金额',
+                children: [
+                  {
+                    title: '本期系统反映，本期入金',
+                    children: [
+                      {
+                        title: '业务系统中贷记客户账户金额',
+                        children: [
+                          {
+                            field: 'a01',
+                            title: 'A01'
+                          }
+                        ]
+                      },
+                      {
+                        title: '手续费收入（支出）',
+                        children: [
+                          {
+                            field: 'a02',
+                            title: 'A02'
+                          }
+                        ]
+                      },
+                      {
+                        title: '其他',
+                        children: [
+                          {
+                            field: 'a03',
+                            title: 'A03'
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    title: '前期系统反映，本期入金',
+                    children: [
+                      {
+                        title: '业务系统中贷记客户账户金额',
+                        children: [
+                          {
+                            field: 'a04',
+                            title: 'A04'
+                          }
+                        ]
+                      },
+                      {
+                        title: '手续费收入（支出）',
+                        children: [
+                          {
+                            field: 'a05',
+                            title: 'A05'
+                          }
+                        ]
+                      },
+                      {
+                        title: '其他',
+                        children: [
+                          {
+                            field: 'a06',
+                            title: 'A06'
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                title: '应收入金业务金额',
+                children: [
+                  {
+                    title: '本期业务系统中已贷记客户账户金额',
+                    children: [
+                      {
+                        field: 'a07',
+                        title: 'A07'
+                      }
+                    ]
+                  },
+                  {
+                    title: '本期手续费收入（支出）',
+                    children: [
+                      {
+                        field: 'a08',
+                        title: 'A08'
+                      }
+                    ]
+                  },
+                  {
+                    title: '其他',
+                    children: [
+                      {
+                        field: 'a09',
+                        title: 'A09'
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            title: '支付机构业务系统中未反映但备付金账户已收到款项',
+            children: [
+              {
+                title: '本期收到的金额',
+                children: [
+                  {
+                    field: 'a10',
+                    title: 'A10'
+                  }
+                ]
+              },
+              {
+                title: '当期处理',
+                children: [
+                  {
+                    title: '补入账',
+                    children: [
+                      {
+                        title: '业务系统中贷记客户账户金额',
+                        children: [
+                          {
+                            field: 'a11',
+                            title: 'A11'
+                          }
+                        ]
+                      },
+                      {
+                        title: '手续费收入（支出）',
+                        children: [
+                          {
+                            field: 'a12',
+                            title: 'A12'
+                          }
+                        ]
+                      },
+                      {
+                        title: '其他',
+                        children: [
+                          {
+                            field: 'a13',
+                            title: 'A13'
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    title: '退回',
+                    children: [
+                      {
+                        field: 'a14',
+                        title: 'A14'
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        data: tableData
+      }
+    }
+  }
+}
+</script>

package/resources/pc/demo/grid/methods/set-selection.spec.js

@@ -5,5 +5,5 @@ test('手动选中指定行', async ({ page }) => {
   await page.goto('http://localhost:7130/pc/grid-operation-column/methods-set-selection')
   await page.getByRole('button', { name: 'setSelection' }).click()
 
-  await expect(page.getByRole('row', { name: '5 810 2012-12-12 12:12:12 韶关' }).locator('span svg')).toBeVisible()
+  await expect(page.getByRole('row', { name: '5 810 2012-12-12 12:12:12 韶关' }).getByRole('img').first()).toBeVisible()
 })