婷林物语

项目整理

思路整理: 所有皆可以通过配置的形式来实现,

表单 

formList = [
  {
    type: 'Input',
    label: '标签',
    prop: 'inputfdjif'
  },
  {
    type: 'other',
    label: 'ejfwi',
    prop: 'ejfwi'
  },
  {
    type: 'Autocomplete',
    label: '自动填写',
    prop: 'name',
    hidden: () => {
      return this.formData['select'] == '22'
    },
    list: [
      { name: '231', id: '1' },
      { name: '232', id: '2' },
      { name: '233', id: '3' },
      { name: '234', id: '4' }
    ],
    bind: {
      clearable: false,
      onSelect: this.handleSelect
    }
  },
  {
    type: '自定义',
    label: '级联选择',
    prop: 'cascader',
    list: [
      {
        value: 'guide',
        label: 'Guide',
        children: [
          {
            value: 'disciplines',
            label: 'Disciplines',
            children: [
              {
                value: 'consistency',
                label: 'Consistency'
              },
              {
                value: 'feedback',
                label: 'Feedback'
              },
              {
                value: 'efficiency',
                label: 'Efficiency'
              },
              {
                value: 'controllability',
                label: 'Controllability'
              }
            ]
          }
        ]
      }
    ],
    bind: {
      clearable: true,
      onClose: this.handleSelect
    }
  },
  {
    type: 'Checkbox',
    label: '复选框',
    prop: 'fewf',
    list: [
      { name: '21', id: '11', disabled: true },
      { name: '22', id: '22', disabled: false },
      { name: '23', id: '33', disabled: true },
      { name: '24', id: '44', disabled: false }
    ],
    bind: {
      clearable: true,
      onChange: this.handleSelect
    }
  },
  {
    type: 'Select',
    label: '单选框',
    prop: 'select',
    list: [
      { name: '21', id: '11', disabled: true },
      { name: '22', id: '22', disabled: false },
      { name: '23', id: '33', disabled: true },
      { name: '24', id: '44', disabled: false }
    ],
    bind: {
      clearable: true,
      onChange: this.handleSelect
    }
  },
  {
    type: 'Button',
    label: '按钮',
    prop: 'btn',
    bind: {
      onClick: this.handleClick,
      text: '111'
    }
  }
]
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
106
107
108

发请求 

this.$http({
  api: getSelectDictListBatch,
  form: { c: 1111 },
  beforeSubmit: (form) => {
    form.zdl = true
    form.test = []
  },
  handleAction: (res, form) => {}
})
1
2
3
4
5
6
7
8
9

创建页面规范

一个文件夹, 里面有 mixins 文件夹用于存放 mixin 数据, data 里面的文件在用作 mixin 的时候前缀带名称

列表 

    <base-list :listApi="listApi" :formList="dataFormList" :column="dataColumn"></base-list>

    listApi: getListApi,

      dataFormList: [
      {
        type: "Input",
        label: "角色名称",
        prop: "inputfdjif",
        // span: 12,
      },
      {
        type: "Input",
        label: "权限字符",
        prop: "inputfdji",
      },

      {
        type: "Select",
        label: "状态",
        prop: "name",
        list: [
          { name: "是", id: "1" },
          { name: "否", id: "2" },
        ],
      },
    ],
    dataColumn: [
      {
        prop: "a",
        label: "A",
      },
      {
        prop: "b",
        label: "B",
        childrenArr: [
          {
            prop: "111",
            label: "111",
          },
          {
            prop: "222",
            label: "222",
          },
        ],
      },
      {
        prop: "c",
        label: "c",
      },
    ],
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

导航 nav 

<base-nav>
  <BaseForm ref="base-form" :formList="dataFormList" :formData="dataFormData"> </BaseForm>
</base-nav>
1
2
3

图标 

;<base-icon id="财务管理_bread" width="40" height="40"></base-icon>

import '@/icons/财务管理_bread.svg'
1
2
3

vue3 搭建项目

把所有的配置全部抽离出来, 更加灵活 base-form 需要考虑的功能, 对于里面的

  1. 自定义 custom
  2. 插槽的方式 slot,
  3. 具体的 ui 组件 input

所需要的技术

vue3 + ts + pinia + elementui-plus + custom-css + sass + prettier

组件

  1. BaseForm 表单组件
    • 对于不同的标签通过 component 进行渲染出来
    • 对于标签里面的其他元素, 先预设起, 通过 vif 来控制
    • 对于有嵌套的情况, 循环 children 进行渲染, 提交的时候要进行子组件的验证, children 里面的结构和外面的要保持一致
    • 对于根据条件控制显示和隐藏的情况, 监听配置数组, 配置数组发生改变之后, 来重新渲染, 要注意 form-item 的 key 必须要保持唯一, 且不随数组的顺序发生改变
  2. BaseTable 表格组件
  3. BaseList 列表组件
  4. BaseIcon svg 图标组件