MES7.0 开发文档
2025-02-06
目录

AppModal

# 一、简介

AppModal 是基于 Vxe Table - <vxe-modal /> (opens new window)封装的弹窗组件。

# 二、效果

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

# 三、代码示例

# 单个表单

showForm () {
  const modalOption = {
    title: 'form 单个表单',
    type: 'form',
    width: 800,
    // editType: 'add',
    // saveUrl: 'mock/common/save',
    okText: '选择',
    cancelText: '关闭',
    formList: [
      {
        columns: [
          {
            title: '编码',
            dataIndex: 'code',
            xtype: 'textfield'
            // allowBlank: false
          },
          {
            title: '名称',
            dataIndex: 'name',
            xtype: 'textfield'
            // allowBlank: false
          }
        ]
      }
    ],
    ok: ({ that, modalOption, modalRefs, data }) => {
      // console.log(that, modalOption, modalRefs, data)
    }
  }
  this.$appModal.show(modalOption)
}
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

# 折叠表单

showCollapseForm () {
  const modalOption = {
    title: 'collapseForm 折叠表单',
    type: 'collapseForm',
    width: 800,
    // saveUrl: '/mock/common/save',
    formList: [
      {
        title: '折叠标题一',
        name: 'form1',
        columns: [
          {
            title: '编码',
            dataIndex: 'code1',
            xtype: 'textfield',
            allowBlank: false
          },
          {
            title: '名称',
            dataIndex: 'name1',
            xtype: 'textfield',
            allowBlank: false
          }
        ]
      },
      {
        title: '折叠标题二',
        name: 'form2',
        columns: [
          {
            title: '编码',
            dataIndex: 'code2',
            xtype: 'textfield',
            allowBlank: false
          },
          {
            title: '名称',
            dataIndex: 'name2',
            xtype: 'textfield',
            allowBlank: false
          }
        ]
      },
      {
        title: '折叠标题三',
        name: 'form3',
        columns: [
          {
            title: '编码',
            dataIndex: 'code3',
            xtype: 'textfield',
            allowBlank: false
          },
          {
            title: '名称',
            dataIndex: 'name3',
            xtype: 'textfield',
            allowBlank: false
          }
        ]
      }
    ],
    ok: ({ that, modalOption, modalRefs, data }) => {
      console.log(that, modalOption, modalRefs, data)
    }
  }
  this.$appModal.show(modalOption)
}
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

# 分组表单

showGroupForm () {
  const modalOption = {
    title: 'groupForm 分组表单',
    type: 'groupForm',
    width: 800,
    // saveUrl: 'mock/common/save',
    formList: [
      {
        title: '分组标题一',
        name: 'form1',
        columns: [
          {
            title: '编码',
            dataIndex: 'code1',
            xtype: 'textfield',
            allowBlank: false
          },
          {
            title: '名称',
            dataIndex: 'name1',
            xtype: 'textfield',
            allowBlank: false
          }
        ]
      },
      {
        title: '分组标题二',
        name: 'form2',
        columns: [
          {
            title: '编码',
            dataIndex: 'code2',
            xtype: 'textfield',
            allowBlank: false
          },
          {
            title: '名称',
            dataIndex: 'name2',
            xtype: 'textfield',
            allowBlank: false
          }
        ]
      },
      {
        title: '分组标题三',
        name: 'form3',
        columns: [
          {
            title: '编码',
            dataIndex: 'code3',
            xtype: 'textfield',
            allowBlank: false
          },
          {
            title: '名称',
            dataIndex: 'name3',
            xtype: 'textfield',
            allowBlank: false
          }
        ]
      }
    ],
    ok: ({ that, modalOption, modalRefs, data }) => {
      console.log(that, modalOption, modalRefs, data)
    }
  }
  this.$appModal.show(modalOption)
}
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

# 单个表格

showGrid () {
  const modalOption = {
    title: 'grid 单个表格',
    type: 'grid',
    isEditGrid: true,
    autoRetrieve: false,
    // fullscreen: true,
    isCheckBoxModel: true,
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
        xtype: 'textfield',
        align: 'left',
        sortable: true,
        allowBlank: false,
        width: 100
      },
      {
        title: '地址',
        dataIndex: 'address',
        xtype: 'textfield',
        align: 'left',
        sortable: true,
        allowBlank: false,
        width: 150
      }
    ],
    tbar: [
      {
        text: '增加',
        iconCls: 'add'
      },
      {
        text: '删除',
        iconCls: 'del'
      }
    ],
    ok: ({ that, modalOption, modalRefs, data }) => {
      console.log(that, modalOption, modalRefs, data)
    }
  }
  this.$appModal.show(modalOption)
}
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

# 多个表格

showMoreGrid () {
  const modalOption = {
    title: 'moreGrid 多个表格',
    type: 'moreGrid',
    gridList: [
      {
        isEditGrid: true,
        autoRetrieve: false,
        height: 300,
        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 100
          },
          {
            title: '地址',
            dataIndex: 'address',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 150
          }
        ],
        tbar: [
          {
            text: '增加',
            iconCls: 'add'
          }
        ]
      },
      {
        isEditGrid: true,
        autoRetrieve: false,
        height: 300,
        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 100
          },
          {
            title: '地址',
            dataIndex: 'address',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 150
          }
        ],
        tbar: [
          {
            text: '增加',
            iconCls: 'add'
          }
        ]
      },
      {
        isEditGrid: true,
        autoRetrieve: false,
        height: 300,
        columns: [
          {
            title: '姓名',
            dataIndex: 'name',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 100
          },
          {
            title: '地址',
            dataIndex: 'address',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 150
          }
        ],
        tbar: [
          {
            text: '增加',
            iconCls: 'add'
          }
        ]
      }
    ],
    ok: ({ that, modalOption, modalRefs, data }) => {
      console.log(that, modalOption, modalRefs, data)
    }
  }
  this.$appModal.show(modalOption)
}
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

# 上表单下表格

showFormGrid () {
  const modalOption = {
    title: 'formgrid 表单+表格',
    type: 'formgrid',
    saveUrl: '/mock/common/save',
    mainGrid: {
      columns: [
        {
          title: '编码',
          dataIndex: 'code',
          xtype: 'textfield',
          allowBlank: false
        },
        {
          title: '名称',
          dataIndex: 'name',
          xtype: 'textfield',
          allowBlank: false
        }
      ]
    },
    gridList: [
      {
        title: '表格一',
        name: 'grid1',
        isEditGrid: true,
        height: 300,
        autoRetrieve: false,
        columns: [
          {
            title: '姓名1',
            dataIndex: 'name1',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 100
          },
          {
            title: '地址1',
            dataIndex: 'address1',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 150
          }
        ],
        tbar: [
          {
            text: '增加',
            iconCls: 'add'
          }
        ]
      }
    ],
    ok: ({ that, modalOption, modalRefs, data }) => {
      console.log(that, modalOption, modalRefs, data)
    }
  }
  this.$appModal.show(modalOption)
}
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# 自定义表格

# 新增/编辑

showCustomGrid () {
  const modalOption = {
    title: '自定义表格配置',
    fullscreen: true,
    footer: null,
    params: {
      tableId: 'custom_grid',
      valueId: 'DeterminantTable'
      // valueId: 'EditorTable'
    },
    component: () => import('@/components/Application/common/grid/CustomGrid/config/index.vue')
  }
  this.$appModal.show(modalOption)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 预览行列式表

showCustomGridPreview () {
  const params = {
    customTableId: '435696641097728',
    tableId: 'custom_grid',
    valueId: 'DeterminantTable'
  }
  this.$http.get('/pbd/syscustomtable/find', { params }).then((res) => {
    const modalOption = {
      title: '预览自定义表格',
      fullscreen: true,
      // footer: null,
      params: {
        tableInfo: res.data.tableInfo,
        tableRows: res.data.tableRows,
        tableColumns: res.data.tableColumns
      },
      component: () => import('@/components/Application/common/grid/CustomGrid/preview/index.vue'),
      ok: ({ that, modalOption }) => {
        const data = that.$refs.component.buildSaveData()
        console.log(data)
      }
    }
    this.$appModal.show(modalOption)
  })
}
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

# 预览特殊记录表

showCustomGridPreview () {
  const params = {
    customTableId: '435707142332416',
    tableId: 'custom_grid',
    valueId: 'EditorTable'
  }
  this.$http.get('/pbd/syscustomtable/find', { params }).then((res) => {
    const modalOption = {
      title: '预览自定义表格',
      fullscreen: true,
      // footer: null,
      params: {
        tableInfo: res.data.tableInfo,
        tableRows: res.data.tableRows,
        tableColumns: res.data.tableColumns
      },
      component: () => import('@/components/Application/common/grid/CustomGrid/preview/index.vue'),
      ok: ({ that, modalOption }) => {
        const data = that.$refs.component.buildSaveData()
        console.log(data)
      }
    }
    this.$appModal.show(modalOption)
  })
}
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

# 文件上传

# 普通上传 废弃,依然可用，与分组上传一致

showUpload () {
  const modalOption = {
    title: '文件上传',
    type: 'upload',
    tableId: 'app_upload_test',
    valueId: 'id',
    dataSource: { id: 'upload' },
    multiple: false
  }
  this.$appModal.show(modalOption)
}
1
2
3
4
5
6
7
8
9
10
11

# 分组上传 - 上传+列表

showGroupUpload () {
  const modalOption = {
    title: '分组文件上传',
    type: 'groupUpload',
    multiple: false,
    tableId: 'app_upload_test',
    valueId: 'id',
    group: [{ name: '视频' }, { name: '音频' }, { name: '图片' }, { name: '文档' }],
    dataSource: { id: 'allFileType' }
  }
  this.$appModal.show(modalOption)
}
1
2
3
4
5
6
7
8
9
10
11
12

# 分组上传 - 上传+列表

showGroupUpload () {
  const modalOption = {
    title: '分组文件上传',
    type: 'groupUpload',
    onlyUpload: true,
    multiple: false,
    tableId: 'app_upload_test',
    valueId: 'id',
    group: [{ name: '视频' }, { name: '音频' }, { name: '图片' }, { name: '文档' }],
    dataSource: { id: 'allFileType' }
  }
  this.$appModal.show(modalOption)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 文件预览

# 单个文件预览

showPreviewFile () {
  this.$appModal.show({
    title: '单个文件预览',
    height: 600,
    footer: null,
    bodyStyle: { padding: '0' },
    params: {
      fileData: this.fileList[0]
    },
    component: () => import('@/components/Application/common/grid/AppModal/AppPreview.vue')
  })
}
1
2
3
4
5
6
7
8
9
10
11
12

# 文件列表预览

showPreviewFiles () {
  this.$appModal.show({
    title: '文件列表预览',
    height: 600,
    footer: null,
    bodyStyle: { padding: '0' },
    params: {
      fileData: this.fileList
    },
    component: () => import('@/components/Application/common/grid/AppModal/AppFileList.vue')
  })
}
1
2
3
4
5
6
7
8
9
10
11
12

# 分组列表预览

showGroupUploadPreview () {
  const modalOption = {
    title: '分组文件预览',
    type: 'groupUpload',
    allowUpload: false,
    multiple: false,
    tableId: 'app_upload_test',
    valueId: 'id',
    group: [{ name: '视频' }, { name: '音频' }, { name: '图片' }, { name: '文档' }],
    dataSource: { id: 'allFileType' }
  }
  this.$appModal.show(modalOption)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 穿梭框

showTransfer () {
  const dataSource = [
    { id: '1', key: '1', name: '1', age: 12, checked: false },
    { id: '2', key: '2', name: '2', age: 12, checked: false },
    { id: '3', key: '3', name: '3', age: 12, checked: false },
    { id: '4', key: '4', name: '4', age: 12, checked: false },
    { id: '5', key: '5', name: '5', age: 12, checked: false }
  ]
  const modalOption = {
    title: `穿梭框测试`,
    type: 'transfer',
    width: 900,
    height: 600,
    titles: ['未分配', '已分配'],
    dataSource: dataSource,
    targetKeys: dataSource.filter((item) => item.checked).map((item) => item.id),
    isCheckBoxModel: true,
    // gridSql: 'select * from test',
    columns: [
      {
        dataIndex: 'name',
        title: '姓名'
      },
      {
        dataIndex: 'age',
        title: '年龄'
      }
    ],
    ok: ({ that, modalOption }) => {
      this.$set(modalOption, 'okLoading', true)
      const userList = modalOption.dataSource
        .filter((item) => modalOption.targetKeys.includes(item.id))
        .map((item) => {
          return { id: item.id, name: item.name }
        })
      console.log(userList)
      this.$set(modalOption, 'okLoading', false)
    }
  }
  this.$appModal.show(modalOption)
}
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

# 代码编辑器

showMonaco () {
  this.$appModal.show({
    title: '代码编辑器',
    theme: 'vs',
    lineNumbers: 'off',
    readOnly: true,
    language: 'sql',
    footer: false,
    type: 'monaco',
    width: 800,
    value: 'select * from table'
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# JSON 编辑器

showJson () {
  const jsonObj = { code: '编码', name: '名称' }
  this.$appModal.show({
    title: 'JSON 编辑器',
    type: 'editor',
    footer: null,
    jsonResult: JSON.stringify(jsonObj)
  })
}
1
2
3
4
5
6
7
8
9

# iframe 弹窗

showFrame () {
  this.$appModal.show({
    title: 'Frame 弹窗',
    height: 600,
    footer: null,
    bodyStyle: { padding: '0' },
    params: {
      src: 'http://www.baidu.com'
    },
    component: () => import('@/components/Application/common/grid/AppModal/AppFrame.vue')
  })
}
1
2
3
4
5
6
7
8
9
10
11
12

# 人员选择

<template>
  <div :style="{ backgroundColor: 'white', padding: '16px' }">
    <h3>选择 部门/角色/部门角色/员工</h3>
    <a-space>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal('dept', false)">选择部门</a-button>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal('dept', true)">选择部门(含员工)</a-button>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal('role', false)">选择角色</a-button>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal('role', true)">选择角色(含员工)</a-button>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal('rolegroup', false)">选择部门角色组</a-button>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal('rolegroup', true)">选择部门角色组(含员工)</a-button>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal('employee')">选择员工</a-button>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal(null, false)">弹窗内选择</a-button>
      <a-button type="primary" size="small" @click="showSelectEmployeeModal(null, true)">弹窗内选择(含员工)</a-button>
    </a-space>
  </div>
</template>
<script>
export default {
  methods: {
    showSelectEmployeeModal (queryBy, queryEmployee) {
      const modalOption = {
        title: '选择',
        params: {
          queryBy,
          queryEmployee
        },
        component: () => import('@/components/Application/common/grid/AppModal/AppChoose.vue'),
        ok: ({ that, modalOption }) => {
          const saveData = that.$refs.component.buildSaveData()
          console.log(saveData)
        }
      }
      this.$appModal.show(modalOption)
    }
  }
}
</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
BasicForm

←

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