MES7.0 开发文档
2025-01-10
目录

AppInput

# 一、简介

AppInput 是基于 Ant Design Vue (opens new window) 封装的组件，提供了多种输入类型组件。

# 二、效果

http://210.12.53.106:8888/outer/test/AppInput (opens new window)

# 三、代码示例

提示

仅介绍最简单的使用方式

# 文本输入框 - textfield

<template>
  <app-input :value.sync="textfield" :columns="textfieldColumns" />
</template>

<script>
export default {
  data () {
    textfield: undefined,
    textfieldColumns: { xtype: 'textfield' }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

testfield API

# 密码输入框 - password

<template>
  <app-input :value.sync="password" :columns="passwordColumns" />
</template>

<script>
export default {
  data () {
    password: undefined,
    passwordColumns: { xtype: 'password' }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

password API

# 多行文本框 - textareafield

<template>
  <app-input :value.sync="textareafield" :columns="textareafieldColumns" />
</template>

<script>
export default {
  data () {
    textareafield: undefined,
    textareafieldColumns: { xtype: 'textareafield' }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

textareafield API

# 数值输入框 - numberfield

<template>
  <app-input :value.sync="numberfield" :columns="numberfieldColumns" />
</template>

<script>
export default {
  data () {
    numberfield: undefined,
    numberfieldColumns: { xtype: 'numberfield' }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

numberfield API

# 评分选择 - ratefield

<template>
  <app-input :value.sync="ratefield" :columns="ratefieldColumns" />
</template>

<script>
export default {
  data () {
    ratefield: undefined,
    ratefieldColumns: { xtype: 'ratefield' }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

ratefield API

# 复选框 - checkbox

<template>
  <app-input :value.sync="checkbox" :columns="checkboxColumns" />
</template>

<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    checkbox: undefined,
    checkboxColumns: { xtype: 'checkbox' }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

checkbox API

# 复选框组 - checkboxgroup

<template>
  <!-- 自定义选项 -->
  <app-input :value.sync="checkboxgroup" :columns="checkboxgroupColumns" />

  <!-- 带请求地址 -->
  <app-input :value.sync="checkboxgroupFindUrl" :columns="checkboxgroupFindUrlColumns" />
</template>

<script>
export default {
  data () {
    checkboxgroup: undefined,
    checkboxgroupColumns: {
      xtype: 'checkboxgroup',
      options: [
        { label: 'html', value: 'html' },
        { label: 'css', value: 'css' },
        { label: 'javascript', value: 'javascript' }
      ]
    },
    checkboxgroupFindUrl: undefined,
    checkboxgroupFindUrlColumns: {
      xtype: 'checkboxgroup',
      storeConfig: {
        findUrl: '/master/secclass/list',
        code: 'secclass',
        name: 'secclassName'
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

checkboxgroup API

# 复选框组 - checkboxgroupfield

<template>
  <app-input :value.sync="checkboxgroupfield" :columns="checkboxgroupfieldColumns" />
</template>

<script>
export default {
  data () {
    checkboxgroupfield: { html: 1, css: '0', javascript: true },
    checkboxgroupfieldColumns: {
      xtype: 'checkboxgroupfield',
      options: [
        { title: 'html', field: 'html' },
        { title: 'css', field: 'css', onData: '1', offData: '0' },
        { title: 'javascript', field: 'javascript', onData: true, offData: false }
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

checkboxgroupfield API

# 开关 - switchfield

<template>
  <app-input :value.sync="switchfield" :columns="switchfieldColumns" />
</template>

<script>
export default {
  data () {
    switchfield: undefined,
    switchfieldColumns: { xtype: 'switchfield' }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

switchfield API

# 单选框 - radiogroup

<template>
  <!-- 自定义选项 -->
  <app-input :value.sync="radiogroup" :columns="radiogroupColumns" />

  <!-- 带请求地址 -->
  <app-input :value.sync="radiogroupFindUrl" :columns="radiogroupFindUrlColumns" />
</template>

<script>
export default {
  data () {
    radiogroup: undefined,
    radiogroupColumns: {
      xtype: 'radiogroup',
      options: [
        { label: 'Html', value: 'html' },
        { label: 'CSS', value: 'css', disabled: false },
        { label: 'JavaScript', value: 'javascript', disabled: true }
      ]
    },
    radiogroupFindUrl: undefined,
    radiogroupFindUrlColumns: {
      xtype: 'radiogroup',
      storeConfig: {
        findUrl: '/master/secclass/list',
        code: 'secclass',
        name: 'secclassName'
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

radiogroup API

# 下拉框 - combobox

<template>
  <!-- 自定义选项 -->
  <app-input :value.sync="comboboxOption" :columns="comboboxOptionColumns" />

  <!-- 带请求地址 -->
  <app-input :value.sync="comboboxFindUrl" :columns="comboboxFindUrlColumns" />
</template>

<script>
export default {
  data () {
    comboboxOption: undefined,
    comboboxOptionColumns: {
      xtype: 'combobox',
      storeConfig: [
        { code: 0, name: '男' },
        { code: 1, name: '女', disable: false }
      ]
    },
    comboboxFindUrl: undefined,
    comboboxFindUrlColumns: {
      xtype: 'combobox',
      storeConfig: {
        findUrl: '/master/secclass/list',
        code: 'secclass',
        name: 'secclassName'
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

combobox API

# 下拉表格 - dropdownbox

<template>
  <!-- 自定义行数据 -->
  <app-input :value.sync="dropdownboxOption" :columns="dropdownboxOptionColumns" />

  <!-- 带请求地址 -->
  <app-input :value.sync="dropdownboxFindUrl" :columns="dropdownboxFindUrlColumns" />
</template>

<script>
export default {
  data () {
    dropdownboxOption: undefined,
    dropdownboxOptionColumns: {
      xtype: 'dropdownbox',
      storeConfig: {
        isPage: false,
        columns: [
          { field: 'label', title: '字段名' },
          { field: 'value', title: '字段值' }
        ]
      },
      dataResult: [
        { label: 'html', value: 'html' },
        { label: 'css', value: 'css' },
        { label: 'javascript', value: 'javascript' },
      ],
      displayField: 'value',
      valueField: 'value',
    },
    dropdownboxFindUrl: undefined,
    dropdownboxFindUrlColumns: {
      xtype: 'dropdownbox',
      storeConfig: {
        findUrl: '/mrp/mrpprojectplan/find',
        columns: [
          { field: 'projectNo', title: '项目号' },
          { field: 'projectDesc', title: '项目名称' },
          { field: 'description', title: '物料说明' }
        ]
      },
      defaultValue: '1',
      displayField: 'projectNo',
      valueField: 'projectNo',
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

dropdownbox API

提示

当 storeConfig 中，配置了 findUrl 后，dropdownbox 将会变为弹窗表格

# 图标选择 - iconselect

<template>
  <app-input :value.sync="iconselect" :columns="iconselectColumns" />
</template>

<script>
export default {
  data () {
    iconselect: undefined,
    iconselectColumns: { xtype: 'iconselect' }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

iconselect API

# 树选择 - treeselect

<template>
  <app-input :value.sync="treeselect" :columns="treeselectColumns" />
</template>

<script>
export default {
  data () {
    treeselect: undefined,
    treeselectColumns: {
      xtype: 'treeselect',
      storeConfig: {
        findUrl: '/mock/tree/list'
      },
      displayField: 'title',
      valueField: 'id'
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

treeselect API

# 日期选择 - datefield

<template>
  <app-input :value.sync="datefield" :columns="datefieldColumns" />
</template>

<script>
export default {
  data () {
    datefield: undefined,
    datefieldColumns: { xtype: 'datefield' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

datefield API

# 日期范围 - daterange

<template>
  <app-input :value.sync="daterange" :columns="daterangeColumns" />
</template>

<script>
export default {
  data () {
    daterange: undefined,
    daterangeColumns: { xtype: 'daterange' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

daterange API

# 日期时间选择 - datetimefield

<template>
  <app-input :value.sync="datetimefield" :columns="datetimefieldColumns" />
</template>

<script>
export default {
  data () {
    datetimefield: undefined,
    datetimefieldColumns: { xtype: 'datetimefield' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

datetimefield API

# 日期时间范围 - datetimerange

<template>
  <app-input :value.sync="datetimerange" :columns="datetimerangeColumns" />
</template>

<script>
export default {
  data () {
    datetimerange: undefined,
    datetimerangeColumns: { xtype: 'datetimerange' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

datetimerange API

# 月份选择 - monthfield

<template>
  <app-input :value.sync="monthfield" :columns="monthfieldColumns" />
</template>

<script>
export default {
  data () {
    monthfield: undefined,
    monthfieldColumns: { xtype: 'monthfield' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

monthfield API

# 星期选择 - weekfield

<template>
  <app-input :value.sync="weekfield" :columns="weekfieldColumns" />
</template>

<script>
export default {
  data () {
    weekfield: undefined,
    weekfieldColumns: { xtype: 'weekfield' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

weekfield API

# 时间选择 - timefield

<template>
  <app-input :value.sync="timefield" :columns="timefieldColumns" />
</template>

<script>
export default {
  data () {
    timefield: undefined,
    timefieldColumns: { xtype: 'timefield' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

timefield API

# cron 表达式 - cronbox

<template>
  <app-input :value.sync="cronbox" :columns="cronboxColumns" />
</template>

<script>
export default {
  data () {
    cronbox: undefined,
    cronboxColumns: { xtype: 'cronbox' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

cronbox API

# 滑块进度条 - progressfield

<template>
  <app-input :value.sync="progressfield" :columns="progressfieldColumns" />
</template>

<script>
export default {
  data () {
    progressfield: undefined,
    progressfieldColumns: { xtype: 'progressfield' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

progressfield API

# 计数器 - counter

<template>
  <app-input :value.sync="counter" :columns="counterColumns" />
</template>

<script>
export default {
  data () {
    counter: undefined,
    counterColumns: { xtype: 'counter' },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

counter API

TopDown
AppFind

← AppFind→

Theme by Vdoing | Copyright © 2023-2025 北京嘉禾云网科技有限公司