添加节点删除信息/搭建样式编辑框架/开始节点添加正常事件

ruoyi-ui/src/views/system/bpmnPro/components/Panel/index.vue

@@ -155,13 +155,13 @@ export default {
       //   this.renderComponents.push(ElementExecutionListeners);
       // isAsynchronous(element) &&
       // this.renderComponents.push(ElementAsyncContinuations);
-      isStartInitializable(element) &&
-        this.renderComponents.push(ElementStartInitiator);
+      // isStartInitializable(element) &&
+      //   this.renderComponents.push(ElementStartInitiator);
       // this.renderComponents.push(ElementExtensionField);
       // 添加执行表单
       isTaskOrUserTask(element) &&
         this.renderComponents.push(ElementExecuteForm);
-      isTaskOrUserTask(element) &&
+      (isStartInitializable(element) || isTaskOrUserTask(element)) &&
         this.renderComponents.push(ElementNormalTask);
       !isProcess(element) && this.renderComponents.push(ElementUnusualTasks); //可处理异常
       isUserTask(element) && this.renderComponents.push(ElementExecuteUser);

ruoyi-ui/src/views/system/bpmnPro/components/Toolbar/tools/Save.vue

@@ -127,11 +127,8 @@ export default {
       let xmlPro = await this.getProcess("xml");
       var xmlObj = this.xmlStr2XmlObj(xmlPro);
 
-      // let nodeMsg = this.saveNodeMsg(xmlObj);
-      // return;
-
       // 生成节点顺序
-      getNodeSequence(xmlObj);
+      // getNodeSequence(xmlObj);
       // return;
       formData.startEventType =
         xmlObj

ruoyi-ui/src/views/system/bpmnPro/components/bo-utils/getNodeMsg.js

@@ -59,19 +59,20 @@ export function getNodeMsg(xmlObj) {
       updateBy: '',  //修改者
       remark: '',    //节点描述
     }
+    nodeObj.nodeType = node.localName;
+    if (nodeObj.nodeType == "sequenceFlow") return;
     let nodeExceptionList = getNodeException(node, nodeObj)
     let bpmNodeHandleUser = getBpmNodeHandleUser(node, nodeObj)
     bpmNodeScriptRelevanceList = [...bpmNodeScriptRelevanceList, ...nodeExceptionList];//获取节点脚本数据
     bpmNodeHandleUserList = [...bpmNodeHandleUserList, ...bpmNodeHandleUser]
-    console.dir(node);
     attributeArray.forEach(attr => {
       let tempAttr = prefix + ':' + attr
       nodeObj[attr] = node.attributes[tempAttr]?.nodeValue || ''
     });
     nodeObj.nodeKey = node.id;
-    nodeObj.nodeType = node.localName;
+    nodeObj.nodeName = node.getAttribute('name');
     bpmNodeHandleUser.length && (nodeObj.nodeRolePermission = node.getAttribute(`${prefix}:virtuallyRole`));
-    if (nodeObj.nodeType == "sequenceFlow") return;
+
     bpmProcessConfigurationList.push(nodeObj)
   })
   return {
@@ -82,7 +83,6 @@ export function getNodeMsg(xmlObj) {
 }
 
 function getNodeException(node, nodeObj) {
-  console.dir(node);
   let prefix = getProcessEngine();
   let res = []
   let { children } = node;
@@ -148,7 +148,7 @@ function getBpmNodeHandleUser(node, nodeObj) {
 
 
 export function filterNodeMsg(oldMsg, newMsg) {
-  let keys = ['bpmProcessConfigurationList', 'bpmNodeScriptRelevanceList', 'bpmNodeHandleUserList']
+  let keys = ['bpmProcessConfigurationList', 'bpmNodeScriptRelevanceList', 'bpmNodeHandleUserList', 'removeNodeIds']
   newMsg[keys[0]].forEach(item => {
     let sameNode = oldMsg[keys[0]].find((oldItem) => oldItem.nodeKey == item.nodeKey)
     if (sameNode) {
@@ -168,5 +168,11 @@ export function filterNodeMsg(oldMsg, newMsg) {
     }
   })
 
+  newMsg[keys[3]] = oldMsg[keys[0]].filter(item => {
+    return !newMsg[keys[0]].find(sc => {
+      return sc.id == item.id
+    })
+  }).map(item => item.id)
+
   return newMsg;
 }

ruoyi-ui/src/views/tableMange/components/StyleFormPanel.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="style-wrap">
+    <el-button
+      type="primary"
+      class="inline-large-button mb10"
+      icon="el-icon-plus"
+      size="mini"
+      @click="addDataDialog"
+    >
+      添加样式
+    </el-button>
+    <!-- 样式表格 -->
+    <el-table :data="[]" style="width: 100%">
+      <el-table-column label="序号" type="index" width="50"> </el-table-column>
+      <el-table-column prop="styleName" label="样式名" width="100">
+      </el-table-column>
+      <el-table-column prop="styleDescription" label="描述" width="100">
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-dropdown>
+            <el-button type="warning" plain size="small">
+              处理<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="() => {}"
+                  >修改
+                </el-button>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="() => {}"
+                  >删除
+                </el-button>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog title="编辑样式" :visible.sync="dialogShow" width="50%">
+      <el-form
+        ref="styleFormDataRef"
+        :model="styleFormData"
+        label-width="100px"
+      >
+        <el-form-item label="样式名">
+          <el-input v-model="styleFormData.styleName"></el-input>
+        </el-form-item>
+        <el-form-item label="样式描述">
+          <el-input
+            type="textarea"
+            v-model="styleFormData.styleDescription"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="样式类型">
+          <el-radio-group v-model="styleFormData.styleType" size="small">
+            <el-radio-button :label="0">行样式</el-radio-button>
+            <el-radio-button :label="1">字段样式</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <template v-if="styleFormData.styleType == 0">
+          <el-form-item label="字体颜色">
+            <input
+              type="color"
+              :value="styleFormData.rowBgColor"
+              @input="selectColors($event, 'rowBgColor')"
+            />
+          </el-form-item>
+        </template>
+        <template v-else>
+          <el-form-item label="文本样式">
+            <el-radio-group v-model="styleFormData.fieldStyleType" size="small">
+              <el-radio-button :label="0">普通文本</el-radio-button>
+              <el-radio-button :label="1">标签</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <template v-if="styleFormData.fieldStyleType == 0">
+            <el-form-item label="字体颜色">
+              <input
+                type="color"
+                :value="styleFormData.fontColor"
+                @input="selectColors($event, 'fontColor')"
+              />
+            </el-form-item>
+          </template>
+          <template v-else>
+            <el-form-item label="标签样式">
+              <el-switch
+                v-model="styleFormData.isTagFullBg"
+                active-text="背景填充"
+                inactive-text="仅文字"
+              >
+              </el-switch>
+            </el-form-item>
+            <el-form-item label="标签类型">
+              <!-- <input
+                type="color"
+                :value="styleFormData.tagColor"
+                @input="selectColors($event, 'tagColor')"
+              /> -->
+              <el-select v-model="styleFormData.tagType">
+                <el-option
+                  v-for="(item, index) in tagTypeList"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+
+              <el-tag
+                class="ml10"
+                size="normal"
+                :type="styleFormData.tagType"
+                :effect="styleFormData.isTagFullBg ? 'dark' : 'light'"
+                >标签一</el-tag
+              >
+            </el-form-item>
+          </template>
+        </template>
+        <div class="condition-table-wrap">
+          <span class="table-title">条件编辑</span>
+          <el-table :data="conditionTableData" style="width: 100%">
+            <el-table-column label="序号" type="index" width="50">
+            </el-table-column>
+            <el-table-column prop="tableKey" label="表名" width="150">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.tableKey" placeholder="请选择">
+                  <el-option
+                    v-for="item in []"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="fieldName" label="字段名" width="150">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.fieldName" placeholder="请选择">
+                  <el-option
+                    v-for="item in []"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="condition" label="条件" width="100">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.condition" placeholder="请选择">
+                  <el-option
+                    v-for="item in conditionList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="flagValue" label="参照值" width="100">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.flagValue"
+                  @input="
+                    scope.row.flagValue = scope.row.flagValue.replace(
+                      /^(0+)|[^\d]+/g,
+                      ''
+                    )
+                  "
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="() => {}"
+                  >删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button
+            type="primary"
+            class="inline-large-button mb10"
+            icon="el-icon-plus"
+            size="mini"
+            style="width: 100%"
+            @click="addDataDialog"
+          >
+            添加条件
+          </el-button>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StyleFormPanel",
+  props: [],
+  components: {},
+  data() {
+    return {
+      dialogShow: false,
+
+      // 表格样式数据
+      styleTableData: [],
+      styleFormData: {
+        styleName: "",
+        styleDescription: "",
+        styleType: 0, //0:行样式  1:字段样式
+        tableKey: "",
+        styleCode: "",
+        styleCondtion: "",
+        rowBgColor: "", //行背景色
+        fieldStyleType: 0, //字段样式类型 0:普通文本  1:标签
+        fontColor: "", //字体颜色
+        isTagFullBg: false, //tag背景色是否填满
+        tagType: "",
+
+        // styleCondtionObj: {
+        //   styleField: "", //样式生效字段
+        //   styleCondtionField: "", //样式条件依赖字段
+        //   styleCondtionList: [], //条件列表
+        // },
+      },
+      conditionTableData: [
+        {
+          tableKey: "",
+          fieldName: "",
+          condition: 1, //1:> 2:< 3:= 4:>= 5:<=
+          flagValue: 0,
+        },
+      ],
+      conditionList: [
+        {
+          value: 1,
+          label: ">",
+        },
+        {
+          value: 2,
+          label: "<",
+        },
+        {
+          value: 3,
+          label: "=",
+        },
+        {
+          value: 4,
+          label: ">=",
+        },
+        {
+          value: 5,
+          label: "<=",
+        },
+      ],
+      tagTypeList: [
+        {
+          value: "",
+          label: "默认",
+        },
+        {
+          value: "success",
+          label: "成功",
+        },
+        {
+          value: "info",
+          label: "普通",
+        },
+        {
+          value: "warning",
+          label: "警告",
+        },
+        {
+          value: "danger",
+          label: "危险",
+        },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    // 添加一条样式数据回调
+    addDataDialog() {
+      this.dialogShow = true;
+    },
+
+    // 颜色改变回调
+    selectColors(event, tempField) {
+      console.log(tempField);
+      this.styleFormData[tempField] = event.target.value;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.style-wrap {
+  .condition-table-wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .table-title {
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/tableMange/index.vue

@@ -403,6 +403,9 @@
               </el-table-column>
             </el-table>
           </el-tab-pane>
+          <el-tab-pane label="样式编辑" name="styleEdit">
+            <StyleFormPanel />
+          </el-tab-pane>
         </el-tabs>
       </el-col>
     </el-row>
@@ -696,11 +699,13 @@ import Sortable from "sortablejs";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { v4 as uuidv4 } from "uuid";
+
+import StyleFormPanel from "./components/StyleFormPanel.vue";
 export default {
   name: "tableMange",
   dicts: ["sys_time_format", "table_statistic_type"],
   props: [],
-  components: { Queryfrom, Treeselect },
+  components: { Queryfrom, Treeselect, StyleFormPanel },
   data() {
     return {
       staictitle: "添加统计数据字段",
@@ -1730,7 +1735,7 @@ export default {
     },
     // tab切换
     tabhandleClick() {
-      this.menudata = this.activeName === "datacount" ? true : false;
+      this.menudata = this.activeName != "menuedit" ? true : false;
     },
     // 添加数据字段对话框
     async addDataDialog() {