feat(oa-project-flow) add

ruoyi-ui/src/views/flowable/oa-project-flow.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="app-container">
+
+    <!-- 添加或修改流程表单对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="所属项目">
+          <el-select v-model="form.projectId"
+                     clearable
+                     filterable
+                     placeholder="请选择">
+            <el-option
+              v-for="(item,index) in projectList"
+              :key="index"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目问题">
+          <el-input type="textarea" v-model="form.issue"/>
+        </el-form-item>
+        <el-form-item label="解决方案">
+          <el-input type="textarea" v-model="form.solution"/>
+        </el-form-item>
+        <el-form-item label="工作记录">
+          <el-input type="textarea" v-model="form.workRecord"/>
+        </el-form-item>
+        <el-form-item label="图片上传" prop="remark">
+          <el-upload
+            class="upload-demo"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :file-list="fileList">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="文件上传" prop="remark">
+          <el-upload
+            class="upload-demo"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            multiple
+            :limit="3"
+            :file-list="fileList">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {listForm, getForm, delForm, addForm, updateForm, exportForm} from "@/api/flowable/form";
+import Editor from '@/components/Editor';
+import Parser from '@/components/parser/Parser'
+
+export default {
+  name: "Form",
+  components: {
+    Editor,
+    Parser
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 流程表单表格数据
+      formList: [],
+      // 弹出层标题
+      title: "",
+      formConf: {}, // 默认表单数据
+      formConfOpen: false,
+      formTitle: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        formName: null,
+        formContent: null,
+      },
+      fileList: [{
+        name: 'food.jpeg',
+        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+      }, {
+        name: 'food2.jpeg',
+        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+      }],
+      // 表单参数
+      form: {
+        projectId: 0,
+        workRecord: '',
+        issue: '',
+        solution: '',
+      },
+      projectList: [],
+      // 表单校验
+      rules: {}
+    };
+  },
+  methods: {
+    init() {
+      this.open = true
+    },
+    /** 查询流程表单列表 */
+    getList() {
+      this.loading = true;
+      listForm(this.queryParams).then(response => {
+        this.formList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        formId: null,
+        formName: null,
+        formContent: null,
+        createTime: null,
+        updateTime: null,
+        createBy: null,
+        updateBy: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.formId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 表单配置信息 */
+    handleDetail(row) {
+      this.formConfOpen = true;
+      this.formTitle = "流程表单配置详细";
+      this.formConf = JSON.parse(row.formContent)
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      // this.reset();
+      // this.open = true;
+      // this.title = "添加流程表单";
+      this.$router.push({path: '/tool/build/index', query: {formId: null}})
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      // this.reset();
+      // const formId = row.formId || this.ids
+      // getForm(formId).then(response => {
+      //   this.form = response.data;
+      //   this.open = true;
+      //   this.title = "修改流程表单";
+      // });
+      this.$router.push({path: '/tool/build/index', query: {formId: row.formId}})
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.formId != null) {
+            updateForm(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addForm(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const formIds = row.formId || this.ids;
+      this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return delForm(formIds);
+      }).then(() => {
+        this.getList();
+        this.msgSuccess("删除成功");
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return exportForm(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.test-form {
+  margin: 15px auto;
+  width: 800px;
+  padding: 15px;
+}
+</style>

ruoyi-ui/src/views/index.vue

@@ -4,46 +4,11 @@
       <el-col :xs="24" :sm="24" :md="12" :lg="14">
         <el-card class="update-log">
           <div slot="header" class="clearfix">
-            <span>联系信息</span>
+            <el-button  @click="handleAddOaProject">发起项目申请流程</el-button>
-          </div>
-          <div class="body">
-            <p>
-              <i class="el-icon-user-solid"></i> QQ群：
-              <a href="https://jq.qq.com/?_wv=1027&k=2zE87c2G" target="_blank"
-              > 782924350</a
-              >
-            </p>
-            <p>
-              <i class="el-icon-chat-dot-round"></i> 微信：<a
-            >Almost-2y</a
-            >
-            </p>
-            <p style="color: #f54a4a;font-size:16px">
-              <i class="el-icon-bell"></i> 说明：<a
-            >承接各种小型项目，有需求可联系我。微信：Almost-2y / QQ: 846249920</a
-            >
-            </p>
           </div>
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="10">
-        <el-card class="update-log">
-          <div slot="header" class="clearfix">
-            <span>捐赠支持</span>
-          </div>
-          <div class="body">
-            <img
-              src="https://oscimg.oschina.net/oscnet/up-88f17f916de7a895cf2a84d2ce769e9b2ca.JPEG"
-              alt="donate"
-              width="100%"
-            />
-            <span style="display: inline-block; height: 30px; line-height: 30px"
-            >可以请作者喝杯咖啡以示鼓励！</span
-            >
-          </div>
-        </el-card>
-      </el-col>
     </el-row>
     <el-divider />
     <el-row :gutter="20">
@@ -72,10 +37,12 @@
       </el-col>
 
     </el-row>
+    <oa-project-flow ref="oaProjectFlow"></oa-project-flow>
   </div>
 </template>
 
 <script>
+import oaProjectFlow from "./flowable/oa-project-flow"
 export default {
   name: "index",
   data() {
@@ -84,10 +51,16 @@ export default {
       version: "3.4.0",
     };
   },
+  components: {
+    oaProjectFlow
+  },
   methods: {
     goTarget(href) {
       window.open(href, "_blank");
     },
+    handleAddOaProject() {
+      this.$refs.oaProjectFlow.init()
+    }
   },
 };
 </script>

ruoyi-ui/src/views/tool/build/index.vue

@@ -227,6 +227,7 @@ export default {
         formContent: null,
         remark: null
       },
+
       // 表单校验
       rules: {}
     }
@@ -333,6 +334,7 @@ export default {
       const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
       if (i > -1) this.$set(this.drawingList, i, component)
     },
+
     fetchData(component) {
       const { dataType, method, url } = component.__config__
       if (dataType === 'dynamic' && method && url) {