wms / wms4_global · Files

<template>
  <j-vxe-table
    ref="vTable"
    toolbar
    row-number
    row-selection
    drag-sort
    keep-source
    :height="580"
    :loading="loading"
    :dataSource="dataSource"
    :columns="columns"
    style="margin-top: 8px;"
    @valueChange="handleValueChange"
  >

    <template v-slot:toolbarSuffix>
      <a-button @click="handleTableCheck">表单验证</a-button>
      <a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
        <a-button @click="handleTableGet">获取值</a-button>
      </a-tooltip>
      <a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
        <a-button @click="handleTableSet">设置值</a-button>
      </a-tooltip>
    </template>

    <template v-slot:action="props">
      <a @click="handleCK(props)">查看</a>
      <a-divider type="vertical"/>
      <a-popconfirm :title="$t('button.deletingIt')" @confirm="handleDL(props)">
        <a>{{$t('button.delete')}}</a>
      </a-popconfirm>
    </template>

  </j-vxe-table>
</template>

<script>
import moment from 'moment'
import {pushIfNotExist, randomNumber, randomUUID} from '@/utils/util'
import {JVXETypes} from '@/components/jeecg/JVxeTable'

export default {
  name: 'JVxeDemo1',
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '不可编辑',
          key: 'normal',
          type: JVXETypes.normal,
          width: '180px',
          fixed: 'left',
          defaultValue: 'normal-new',
        },
        {
          title: '单行文本',
          key: 'input',
          type: JVXETypes.input,
          width: '180px',
          defaultValue: '',
          placeholder: '请输入${title}',
          validateRules: [
            {
              required: true, // 必填
              message: '请输入${title}' // 显示的文本
            },
            {
              pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
              message: '${title}必须以字母开头，可包含数字、下划线、横杠'
            },
            {
              unique: true,
              message: '${title}不能重复'
            },
            {
              handler({cellValue, row, column}, callback, target) {
                // cellValue 当前校验的值
                // callback(flag, message) 方法必须执行且只能执行一次
                //          flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
                //          message = 提示的类型，默认使用配置的 message
                // target 行编辑的实例对象
                if (cellValue === 'abc') {
                  callback(false, '${title}不能是abc')  // false = 未通过校验
                } else {
                  callback(true) // true = 通过验证
                }
              },
              message: '${title}默认提示'
            }
          ]
        },
        {
          title: '多行文本',
          key: 'textarea',
          type: JVXETypes.textarea,
          width: '200px',
        },
        {
          title: '数字',
          key: 'number',
          type: JVXETypes.inputNumber,
          width: '80px',
          defaultValue: 32,
          // 【统计列】sum = 求和、average = 平均值
          statistics: ['sum', 'average'],
        },
        {
          title: '下拉框',
          key: 'select',
          type: JVXETypes.select,
          width: '180px',
          // 下拉选项
          options: [
            {title: 'String', value: 'string'},
            {title: 'Integer', value: 'int'},
            {title: 'Double', value: 'double'},
            {title: 'Boolean', value: 'boolean'}
          ],
          allowInput: true,
          placeholder: '请选择'
        },
        {
          title: '下拉框_字典',
          key: 'select_dict',
          type: JVXETypes.select,
          width: '180px',
          options: [],
          dictCode: 'sex',
          placeholder: '请选择',
        },
        {
          title: '下拉框_多选',
          key: 'select_multiple',
          type: JVXETypes.selectMultiple,
          width: '205px',
          options: [
            {title: 'String', value: 'string'},
            {title: 'Integer', value: 'int'},
            {title: 'Double', value: 'double'},
            {title: 'Boolean', value: 'boolean'}
          ],
          defaultValue: ['int', 'boolean'], // 多个默认项
          // defaultValue: 'string,double,int', // 也可使用这种方式
          placeholder: '多选',
        },

        {
          title: '下拉框_搜索',
          key: 'select_search',
          type: JVXETypes.selectSearch,
          width: '180px',
          options: [
            {title: 'String', value: 'string'},
            {title: 'Integer', value: 'int'},
            {title: 'Double', value: 'double'},
            {title: 'Boolean', value: 'boolean'}
          ],
        },
        {
          title: '日期时间',
          key: 'datetime',
          type: JVXETypes.datetime,
          width: '200px',
          defaultValue: '2019-4-30 14:52:22',
          placeholder: '请选择',
        },
        {
          title: '复选框',
          key: 'checkbox',
          type: JVXETypes.checkbox,
          width: '100px',
          customValue: ['Y', 'N'], // true ,false
          defaultChecked: false,
        },
        {
          title: this.$t('system.options'),
          key: 'action',
          type: JVXETypes.slot,
          fixed: 'right',
          minWidth: '100px',
          align: 'center',
          slotName: 'action',
        }
      ],
      dataSource: [],
    }

  },

  created() {
    this.randomPage(0, 20, true)
  },
  methods: {

    handleCK(props) {
      this.$message.success('请在控制台查看输出')
      // 参数介绍：
      // props.value          当前单元格的值
      // props.row            当前行的数据
      // props.rowId          当前行ID
      // props.rowIndex       当前行下标
      // props.column         当前列的配置
      // props.columnIndex    当前列下标
      // props.$table         vxe实例，可以调用vxe内置方法
      // props.target         JVXE实例，可以调用JVXE内置方法
      // props.caseId         JVXE实例唯一ID
      // props.scrolling      是否正在滚动
      // props.triggerChange  触发change事件，用于更改slot的值
      console.log('查看: ', {props})
    },

    handleDL(props) {
      // 调用删除方法
      props.target.removeRows(props.row)
    },

    handleValueChange(event) {
      console.log('handleValueChange.event: ', event)
    },

    /** 表单验证 */
    handleTableCheck() {
      this.$refs.vTable.validateTable().then(errMap => {
        if (errMap) {
          console.log('表单验证未通过：', {errMap})
          this.$message.error('验证未通过，请在控制台查看详细')
        } else {
          this.$message.success('验证通过')
        }
      })
    },

    /** 获取值，忽略表单验证 */
    handleTableGet() {
      const values = this.$refs.vTable.getTableData()
      console.log('获取值:', {values})
      this.$message.success('获取值成功，请看控制台输出')
    },

    /** 模拟加载1000条数据 */
    handleTableSet() {
      this.randomPage(1, 1000, true)
    },

    /* 随机生成数据 */
    randomPage(current, pageSize, loading = false) {
      if (loading) {
        this.loading = true
      }

      let randomDatetime = () => {
        let time = randomNumber(1000, 9999999999999)
        return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
      }

      let limit = (current - 1) * pageSize

      let options = ['string', 'int', 'double', 'boolean']

      let begin = Date.now()
      let values = []
      for (let i = 0; i < pageSize; i++) {
        values.push({
          id: randomUUID(),
          normal: `normal-${(limit + i) + 1}`,
          input: `text-${(limit + i) + 1}`,
          textarea: `textarea-${(limit + i) + 1}`,
          number: randomNumber(0, 233),
          select: options[randomNumber(0, 3)],
          select_dict: randomNumber(1, 2).toString(),
          select_multiple: (() => {
            let length = randomNumber(1, 4)
            let arr = []
            for (let j = 0; j < length; j++) {
              pushIfNotExist(arr, options[randomNumber(0, 3)])
            }
            return arr
          })(),
          select_search: options[randomNumber(0, 3)],
          datetime: randomDatetime(),
          checkbox: ['Y', 'N'][randomNumber(0, 1)]
        })
      }

      this.dataSource = values
      let end = Date.now()
      let diff = end - begin

      if (loading && diff < pageSize) {
        setTimeout(() => {
          this.loading = false
        }, pageSize - diff)
      }

    }
  }
}
</script>

<style scoped>

</style>