• nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(一)


    nbcio-boot项目移植到ruoyi-nbcio项目中,

    今天主要讲formdesigner的移植

    1、把formdesigner的源代码拷贝到component里,并修改成formdesigner,如下:

    2、form下的index.vue修改如下:

    主要是修改新增,修改按钮的路由到新的formdesigner,还有详情的修改,同时引入preview组件。

    1. <script>
    2. import { listForm, getForm, delForm, addForm, updateForm } from "@/api/workflow/form";
    3. import Editor from '@/components/Editor';
    4. import Parser from '@/utils/generator/parser'
    5. import preview from "@/components/formdesigner/components/preview";
    6. export default {
    7. name: "Form",
    8. components: {
    9. Editor,
    10. Parser,
    11. preview
    12. },
    13. data() {
    14. return {
    15. // 遮罩层
    16. loading: true,
    17. // 选中数组
    18. ids: [],
    19. // 非单个禁用
    20. single: true,
    21. // 非多个禁用
    22. multiple: true,
    23. // 显示搜索条件
    24. showSearch: true,
    25. // 总条数
    26. total: 0,
    27. // 流程表单表格数据
    28. formList: [],
    29. // 弹出层标题
    30. title: "",
    31. formConf: {}, // 默认表单数据
    32. formConfOpen: false,
    33. formTitle: "",
    34. // 是否显示弹出层
    35. open: false,
    36. itemList:[],//formdesigner预览显示数据
    37. // 查询参数
    38. queryParams: {
    39. pageNum: 1,
    40. pageSize: 10,
    41. formName: null,
    42. content: null,
    43. },
    44. // 表单参数
    45. form: {},
    46. // 表单校验
    47. rules: {
    48. }
    49. };
    50. },
    51. created() {
    52. this.getList();
    53. },
    54. activated() {
    55. this.getList();
    56. },
    57. methods: {
    58. /** 查询流程表单列表 */
    59. getList() {
    60. this.loading = true;
    61. listForm(this.queryParams).then(response => {
    62. this.formList = response.rows;
    63. this.total = response.total;
    64. this.loading = false;
    65. });
    66. },
    67. // 取消按钮
    68. cancel() {
    69. this.open = false;
    70. this.reset();
    71. },
    72. // 表单重置
    73. reset() {
    74. this.form = {
    75. formId: null,
    76. formName: null,
    77. content: null,
    78. createTime: null,
    79. updateTime: null,
    80. createBy: null,
    81. updateBy: null,
    82. remark: null
    83. };
    84. this.resetForm("form");
    85. },
    86. /** 搜索按钮操作 */
    87. handleQuery() {
    88. this.queryParams.pageNum = 1;
    89. this.getList();
    90. },
    91. /** 重置按钮操作 */
    92. resetQuery() {
    93. this.resetForm("queryForm");
    94. this.handleQuery();
    95. },
    96. // 多选框选中数据
    97. handleSelectionChange(selection) {
    98. this.ids = selection.map(item => item.formId)
    99. this.single = selection.length!==1
    100. this.multiple = !selection.length
    101. },
    102. /** 表单配置信息 */
    103. handleDetail(row){
    104. this.formConfOpen = true;
    105. this.formTitle = "流程表单配置详细";
    106. const content = JSON.parse(row.content);
    107. console.log("handleDetail content=",content);
    108. this.formConf = content.config;
    109. this.itemList = content.list;
    110. },
    111. /** 新增按钮操作 */
    112. handleAdd() {
    113. this.$router.push({ path: '/tool/formdesigner/index', query: {formId: null }})
    114. },
    115. /** 修改按钮操作 */
    116. handleUpdate(row) {
    117. this.$router.push({ path: '/tool/formdesigner/index', query: {formId: row.formId }})
    118. },
    119. /** 提交按钮 */
    120. submitForm() {
    121. this.$refs["form"].validate(valid => {
    122. if (valid) {
    123. if (this.form.formId != null) {
    124. updateForm(this.form).then(response => {
    125. this.$modal.msgSuccess("修改成功");
    126. this.open = false;
    127. this.getList();
    128. });
    129. } else {
    130. addForm(this.form).then(response => {
    131. this.$modal.msgSuccess("新增成功");
    132. this.open = false;
    133. this.getList();
    134. });
    135. }
    136. }
    137. });
    138. },
    139. /** 删除按钮操作 */
    140. handleDelete(row) {
    141. const formIds = row.formId || this.ids;
    142. this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
    143. confirmButtonText: "确定",
    144. cancelButtonText: "取消",
    145. type: "warning"
    146. }).then(function() {
    147. return delForm(formIds);
    148. }).then(() => {
    149. this.getList();
    150. this.$modal.msgSuccess("删除成功");
    151. })
    152. },
    153. /** 导出按钮操作 */
    154. handleExport() {
    155. let _this = this
    156. this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
    157. confirmButtonText: "确定",
    158. cancelButtonText: "取消",
    159. type: "warning"
    160. }).then(function() {
    161. _this.download('/workflow/form/export', {
    162. ..._this.queryParams
    163. }, `form_${new Date().getTime()}.xlsx`)
    164. })
    165. }
    166. }
    167. };
    168. script>
    169. <style lang="scss" scoped>
    170. .test-form {
    171. margin: 15px auto;
    172. width: 800px;
    173. padding: 15px;
    174. }
    175. style>

    3、界面如下:

  • 相关阅读:
    mysql-norebuild的ddl测试
    URL和URI的区别
    QJsonObject经过哪些转换才能发送到UDP端口
    spring boot3.x集成swagger出现Type javax.servlet.http.HttpServletRequest not present
    树上查询SPOJQTREE4
    数据结构-堆排序
    88Q2110 通过C22方式访问C45 phy地址
    Kafka集群一键启动、一键关闭
    llama2-13的训练模型流程咨询
    国家开放大学 训练题
  • 原文地址:https://blog.csdn.net/qq_40032778/article/details/132788027