# 表单保存说明

表单保存 表单保存
Author songgangyu@expservice.com.cn

# 前端示例

检索 新增
<template>
  <div>
    <ht-form ref="searchFm" ref-form="searchFm" divider="检索分栏" :form-list="searchList">
      <ht-search-bar>
        <ht-button @click="handleSearch()">检索</ht-button>
      </ht-search-bar>
    </ht-form>
    <ht-table
      ref="searchTable"
      ref-table="searchTable"
      :table-head="searchTableHead"
      :table-data="searchTableData"
    >
      <ht-button icon="ht-icon-chuangkou01" @click="handleSave">新增</ht-button>
    </ht-table>
    <div
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :row-data="rowData"
      :operate-type="operateType"
    >
      <ht-dialog
        v-if="dialogVisible"
        title="弹出窗口样例"
        :visible.sync="dialogVisible"
        :row-data="rowData"
        :operate-type="operateType"
      >
        <template slot="footer">
          <ht-button type="primary" confirm="true" @click="handleInsert">保存</ht-button>
        </template>
        <div style="text-align:left">
          <ht-form
            ref="searchEditFm"
            ref-form="searchEditFm"
            divider="基础信息"
            :form-list="searchEditList"
          />
        </div>
      </ht-dialog>
    </div>
  </div>
</template>
<script>
// 实际引入JS
// import { updateShowSearchApply, saveShowSearchApply } from '@/api/oem/cms/orderMng/order';
export default {
  data() {
    return {
      operateType: '', // 操作类型,
      dialogVisible: false, // 编辑页控制显示隐藏
      searchList: [
        {
          type: 'text',
          format: [0, 'isNumberLetter', 100],
          label: '查询条件1',
          field: 'outNo',
          colspan: 2
        },
        {
          type: 'text',
          format: [0, 'isNumberLetter', 50],
          label: '查询条件2',
          field: 'outNo2',
          colspan: 2
        },
        {
          type: 'text',
          format: [0, 'isNumberLetter', 50],
          label: '查询条件3',
          field: 'outNo3',
          colspan: 2
        },
        {
          type: 'text',
          format: [0, 'isNumberLetter', 50],
          label: '查询条件4',
          field: 'outNo4',
          colspan: 2
        }
      ],
      searchTableHead: [
        {
          type: 'action',
          label: '操作',
          content: ['编辑'],
          action: [
            (row, index) => this.handleEdit(row, index)
          ]
        },
        {
          label: '用户账号',
          prop: 'account',
          align: 'right',
          query: true
        },
        {
          label: '用户姓名',
          prop: 'userName',
          query: true
        },
        {
          type: 'tag',
          label: '部门',
          prop: 'dname',
          query: true
        },
        {
          label: '工号',
          prop: 'userSn'
        }
      ],
      searchTableData: {},
      searchEditList: [
        {
          type: 'text',
          format: [1, 'isAny', 30],
          label: '用户账号',
          field: 'account',
          colspan: 2
        },
        {
          type: 'text',
          format: [1, 'isAny', 50],
          label: '用户姓名',
          field: 'userName',
          colspan: 2
        },
        {
          type: 'text',
          format: [1, 'isAny', 50],
          label: '部门',
          field: 'dname',
          colspan: 2
        },
        {
          type: 'text',
          format: [1, 'isAny', 50],
          label: '工号',
          field: 'userSn',
          colspan: 2
        }
      ]
    };
  },
  mounted() {
    // 初始化执行查询
    this.$nextTick(() => {
      this.handleSearch();
    });
  },
  methods: {
    /**
     * @todo: 保存方法
     * @author: songgangyu@scisoft.cn
     * @Date: 2023-05-25 15:17:42
     */
    async handleInsert() {
      try {
        // 修改  update(form的ref, id, js.url)
        if (this.id) {
          const updateData = await this.$crud.update(this.$refs['searchEditFm'], this.id, updateShowSearchApply);
          if (updateData) {
            // 修改回调调用父页面查询(实际需启用)
            // this.$parent.handleSearch();
          }
        } else {
          // 新增  save(form的ref,  js.url)
          const saveData = await this.$crud.save(this.$refs['searchEditFm'], saveShowSearchApply);
          if (saveData)
            // 根据返回值,给form表单赋ID,否则再点保存时,会导致保存重复新增
            this.id = saveData.id;
            // 保存回调调用父页面查询
            // this.$parent.handleSearch();
        }
      } catch (e) {
        this.$notify.message(e, 'error');
      }
    },
    /**
     * @todo: 新增按钮
     * @author: songgangyu@scisoft.cn
     * @Date: 2023-05-25 15:21:54
     */
    handleSave() {
      //
      this.operateType = 'insert';
      this.dialogVisible = true;
      this.rowData = {};
    },
    /**
     * @todo: 编辑按钮
     * @author: songgangyu@scisoft.cn
     * @Date: 2023-05-25 15:22:11
     */
    handleEdit(row) {
      this.operateType = 'update';
      this.dialogVisible = true;
      this.rowData = row;
      // 编辑赋值(正式需要放到created() {}中)
      if (this.rowData.id) {
        this.id = this.rowData.id;
        this.$crud.setEditValue(this.searchEditList, this.rowData);
        this.searchEditList[0].disabled = true;
      }
    },
    /**
     * @todo: 查询赋默认值
     * @author: songgangyu@scisoft.cn
     * @Date: 2023-05-25 15:22:30
     */
    async handleSearch(event) {
      try {
        this.searchTableData = {
          'current': 1,
          'pages': 1,
          'size': 10,
          'total': 7,
          'hitCount': true,
          'searchCount': true,
          'orders': [],
          'optimizeCountSql': true,
          'records':
          [{ 'transHash': {}},
            { 'userSn': '1011', 'userName': '用户01', 'account': '1011', 'dname': '测试', 'rownums': 1, 'id': 1 },
            { 'userSn': '1012', 'userName': '用户02', 'account': '1012', 'dname': '研发', 'rownums': 2, 'id': 2 },
            { 'userSn': '1013', 'userName': '用户03', 'account': '1013', 'dname': '商务', 'rownums': 3, 'id': 3 },
            { 'userSn': '1014', 'userName': '用户04', 'account': '1014', 'dname': '经理', 'rownums': 4, 'id': 4 },
            { 'userSn': '1015', 'userName': '用户05', 'account': '1015', 'dname': '测试', 'rownums': 5, 'id': 5 },
            { 'userSn': '1016', 'userName': '用户06', 'account': '1016', 'dname': '测试', 'rownums': 6, 'id': 6 },
            { 'userSn': '1017', 'userName': '用户07', 'account': '1017', 'dname': '测试', 'rownums': 7, 'id': 7 }
          ] };
      } catch (e) {
        this.$notify.message(e, 'error');
      }
    }
  }
};
</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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
Expand Copy

# 后端示例

  • Controller
  /**Form保存Controller层
   * @remark:
   * @param: param
   * @return: java.util.Map<java.lang.String, java.lang.Object>
   * @author: 宋刚宇
   * @date: 2023/5/30 10:28
   * @version: 1.0.1
   * Modification History:
   * Date       Author       Version          Description
   * -----------------------------------------------------------
   * 2023/5/30    宋刚宇         v1.0.1            init
   */
  @ApiOperation(value = "保存->", notes = "保存")
  @ApiImplicitParams({
      @ApiImplicitParam(name = "params", value = "保存参数", dataTypeClass = Map.class)
  })
  @PostMapping(value = "/save")
  public Map<String, Object> save(@RequestBody Map<String, Object> param)
  {
    return csOemSeBaClaimUserService.save(param);
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  • Service
  /**Form查保存ervice层
   * @remark:
   * @param: param
   * @return: java.util.Map<java.lang.String, java.lang.Object>
   * @author: 宋刚宇
   * @date: 2023/5/30 10:28
   * @version: 1.0.1
   * Modification History:
   * Date       Author       Version          Description
   * -----------------------------------------------------------
   * 2023/5/30    宋刚宇         v1.0.1            init
   */
    Map<String, Object> save(Map<String, Object> param);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • Impl
  /**Form查询Impl层
   * @remark:
   * @param: param
   * @return: java.util.Map<java.lang.String, java.lang.Object>
   * @author: 宋刚宇
   * @date: 2023/5/30 10:29
   * @version: 1.0.1
   * Modification History:
   * Date       Author       Version          Description
   * -----------------------------------------------------------
   * 2023/5/30    宋刚宇         v1.0.1            init
   */
@Override
  public Map<String, Object> save(Map<String, Object> param)
  {
    //解析前台传输的数据赋值到指定PO中
    CsOemSeBaClaimUserPO csOemSeBaClaimUserPO = Map2ObjUtil.toObject(param, CsOemSeBaClaimUserPO.class);
    //判断不为空
    AssertMyUtil.notNull(csOemSeBaClaimUserPO, BizCode.VARIABLE_NOT_NULL, "csOemSeBaClaimUserPO");
    csOemSeBaClaimUserMapper.save(csOemSeBaClaimUserPO);
    return transResultService.transResult(csOemSeBaClaimUserPO.toMaps(), this.getTransDic());
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 版本

  • v1.0.1