添加样式表单数据校验/修改流程图部分label内容/暂存样式代码级自定义进度

ruoyi-ui/src/api/system/btn.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询格绑定的自定义按钮列表
+export function listBtn(query) {
+  return request({
+    url: '/system/btn/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询格绑定的自定义按钮详细
+export function getBtn(id) {
+  return request({
+    url: '/system/btn/' + id,
+    method: 'get'
+  })
+}
+
+// 新增格绑定的自定义按钮
+export function addBtn(data) {
+  return request({
+    url: '/system/btn',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改格绑定的自定义按钮
+export function updateBtn(data) {
+  return request({
+    url: '/system/btn',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除格绑定的自定义按钮
+export function delBtn(id) {
+  return request({
+    url: '/system/btn/' + id,
+    method: 'delete'
+  })
+}

ruoyi-ui/src/api/system/style.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询动态格样式模板列表
+export function listStyle(query) {
+  return request({
+    url: '/system/style/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询动态格样式模板详细
+export function getStyle(id) {
+  return request({
+    url: '/system/style/' + id,
+    method: 'get'
+  })
+}
+
+// 新增动态格样式模板
+export function addStyle(data) {
+  return request({
+    url: '/system/style',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改动态格样式模板
+export function updateStyle(data) {
+  return request({
+    url: '/system/style',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除动态格样式模板
+export function delStyle(id) {
+  return request({
+    url: '/system/style/' + id,
+    method: 'delete'
+  })
+}

ruoyi-ui/src/utils/other.js

@@ -34,4 +34,17 @@ export function inputDisableComplete() {
   for (var i = 0; i < inputs.length; i++) {
     inputs[i].setAttribute('autocomplete', 'off');
   }
+}
+
+/**
+ *获取字典值的对应label
+ *
+ * @param {字典值} value
+ * @param {字典数据} [dictLsit=[]]
+ * @return {*} 
+ */
+export function getDictLabel(value, dictLsit = []) {
+      return dictLsit.find((item) => {
+        return item.value == value;
+      })?.label;
 }

ruoyi-ui/src/views/bpmprocess/scriptManage.vue

@@ -258,7 +258,6 @@ import {
 import uuid from "@/utils/bpmn/uuid";
 import Editor from "vue2-ace-editor";
 import * as monaco from "monaco-editor";
-import * as actions from "monaco-editor/esm/vs/platform/actions/common/actions";
 
 export default {
   name: "Script",

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

@@ -1,7 +1,7 @@
 <template>
   <el-collapse-item name="element-normal-task">
     <template #title>
-      <collapse-title title="执行任务">
+      <collapse-title title="正常节点">
         <lucide-icon name="File" />
       </collapse-title>
     </template>

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

@@ -1,7 +1,7 @@
 <template>
   <el-collapse-item name="element-unusual-tasks">
     <template #title>
-      <collapse-title title="管道节点">
+      <collapse-title title="异常节点">
         <lucide-icon name="FileX2" />
       </collapse-title>
       <number-tag :value="listeners.length" margin-left="12px" />

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

@@ -52,40 +52,40 @@
         ref="styleFormDataRef"
         :model="styleFormData"
         label-width="100px"
+        :rules="styleFormRules"
       >
-        <el-form-item label="样式名">
+        <el-form-item label="样式名" prop="styleName">
           <el-input v-model="styleFormData.styleName"></el-input>
         </el-form-item>
-        <el-form-item label="样式描述">
+        <el-form-item label="样式描述" prop="styleDescription">
           <el-input
             type="textarea"
             v-model="styleFormData.styleDescription"
           ></el-input>
         </el-form-item>
-        <el-form-item label="样式类型">
+        <el-form-item label="样式类型" prop="styleType">
           <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-button :label="2">字典样式</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <template v-if="styleFormData.styleType == 0">
-          <el-form-item label="背景颜色">
+        <div v-show="styleFormData.styleType == 0">
+          <el-form-item label="背景颜色" prop="rowBgColor">
             <input
               type="color"
               :value="styleFormData.rowBgColor"
               @input="selectColors($event, 'rowBgColor')"
             />
           </el-form-item>
-        </template>
-        <template v-else-if="styleFormData.styleType == 1">
-          <el-form-item label="样式生效字段">
+        </div>
+        <div v-show="styleFormData.styleType == 1">
+          <el-form-item label="样式生效字段" prop="styleTable">
             <el-col :span="10">
               <el-select
                 v-model="styleFormData.styleTable"
                 value-key=""
                 placeholder="请选择表"
-                clearable
                 filterable
               >
                 <el-option
@@ -106,7 +106,6 @@
                 v-model="styleFormData.styleField"
                 value-key=""
                 placeholder="请选择字段"
-                clearable
                 filterable
               >
                 <el-option
@@ -172,9 +171,9 @@
               >
             </el-form-item>
           </template>
-        </template>
-        <template v-else>
-          <el-form-item label="字典生效字段" size="normal">
+        </div>
+        <div v-show="styleFormData.styleType == 2">
+          <el-form-item label="字典生效字段" size="normal" prop="styleTable">
             <el-col :span="10">
               <el-select
                 v-model="styleFormData.styleTable"
@@ -233,8 +232,8 @@
               </el-option>
             </el-select>
           </el-form-item>
-        </template>
-        <div v-if="styleFormData.styleType != 2" class="condition-table-wrap">
+        </div>
+        <div v-show="styleFormData.styleType != 2" class="condition-table-wrap">
           <span class="table-title">条件编辑</span>
           <el-table :data="conditionTableData" style="width: 100%">
             <el-table-column label="序号" type="index" width="50">
@@ -380,6 +379,14 @@ export default {
         tagType: "",
         conditionTableStr: "",
       },
+      styleFormRules: {
+        styleName: [
+          { required: true, message: "请输入样式名", trigger: "blur" },
+        ],
+        styleTable: [
+          { validator: this.styleFieldValidator, trigger: "change" },
+        ],
+      },
       conditionTableData: [
         // {
         //   tableName: "",
@@ -526,6 +533,12 @@ export default {
     saveStyleFormHandler() {
       this.$refs.styleFormDataRef.validate((valid) => {
         if (valid) {
+          // 校验样式生效条件的表格数据
+          let validateRes = this.validateCondition();
+          if (!validateRes.flag) {
+            this.$message.error(validateRes.msg);
+            return;
+          }
           let tempConditionTableData = this.conditionTableData.map((item) => ({
             tableName: item.tableName,
             fieldName: item.fieldName,
@@ -640,6 +653,36 @@ export default {
         });
       return res;
     },
+
+    // 样式生效字段的表格验证
+    styleFieldValidator(rule, value, callBack) {
+      if (this.styleFormData.styleType == 0) return callBack();
+      let { styleTable, styleField } = this.styleFormData;
+      if (!styleTable) return callBack(new Error("请选择表格"));
+      if (!styleField) return callBack(new Error("请选择字段"));
+      callBack();
+    },
+
+    // 校验样式生效条件
+    validateCondition() {
+      let { styleType } = this.styleFormData;
+      if (styleType == 2) return { flag: true };
+      let res = {
+        flag: true,
+      };
+      try {
+        this.conditionTableData.forEach((item) => {
+          if (!item.tableName || !item.fieldName) {
+            res.flag = false;
+            res.msg = "请完善表格数据(表格名/字段名)";
+            throw new Error("validate error");
+          }
+        });
+      } catch (error) {
+        if (error != "validate error") console.log(error);
+      }
+      return res;
+    },
   },
   async mounted() {
     let res = await listType(this.addDateRange({ isEnablePaging: false }, []));

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

@@ -0,0 +1,465 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="样式key" prop="styleKey">
+        <el-input
+          v-model="queryParams.styleKey"
+          placeholder="请输入样式key"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="样式名称" prop="styleName">
+        <el-input
+          v-model="queryParams.styleName"
+          placeholder="请输入样式名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="样式描述" prop="styleDescription">
+        <el-input
+          v-model="queryParams.styleDescription"
+          placeholder="请输入样式描述"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建者ID" prop="createById">
+        <el-input
+          v-model="queryParams.createById"
+          placeholder="请输入创建者ID"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="更新者ID" prop="updateById">
+        <el-input
+          v-model="queryParams.updateById"
+          placeholder="请输入更新者ID"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:style:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:style:edit']"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:style:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:style:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      stripe
+      :data="styleList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="编号" align="center" prop="id" />
+      <!-- <el-table-column label="样式key" align="center" prop="styleKey" /> -->
+      <el-table-column label="样式名称" align="center" prop="styleName" />
+      <el-table-column label="样式类型" align="center" prop="styleType">
+        <template slot-scope="scope">
+          {{ theGetDictLabel(scope.row.styleType, dict.type.table_style_type) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="样式代码" align="center" prop="styleCode" /> -->
+      <el-table-column
+        label="样式描述"
+        align="center"
+        prop="styleDescription"
+      />
+      <!-- <el-table-column label="样式状态" align="center" prop="styleStatus" /> -->
+      <!-- <el-table-column label="创建者ID" align="center" prop="createById" />
+      <el-table-column label="更新者ID" align="center" prop="updateById" /> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:style:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:style:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改动态格样式模板对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <!-- <el-form-item label="样式key" prop="styleKey">
+          <el-input v-model="form.styleKey" placeholder="请输入样式key" />
+        </el-form-item> -->
+        <el-form-item label="样式名称" prop="styleName">
+          <el-input v-model="form.styleName" placeholder="请输入样式名称" />
+        </el-form-item>
+        <el-form-item label="样式类型" prop="styleType">
+          <el-select
+            v-model="form.styleType"
+            placeholder="请选择样式类型"
+            filterable
+          >
+            <el-option
+              v-for="item in dict.type.table_style_type"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="样式代码" prop="styleCode">
+          <el-input
+            v-model="form.styleCode"
+            type="textarea"
+            placeholder="请输入内容"
+          />
+          <!-- <el-button icon="el-icon-edit" @click="drawerOpenHandler"></el-button> -->
+        </el-form-item>
+        <el-form-item label="样式描述" prop="styleDescription">
+          <el-input
+            v-model="form.styleDescription"
+            placeholder="请输入样式描述"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="删除标志" prop="delFlag">
+          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
+        </el-form-item>
+        <el-form-item label="创建者ID" prop="createById">
+          <el-input v-model="form.createById" placeholder="请输入创建者ID" />
+        </el-form-item>
+        <el-form-item label="更新者ID" prop="updateById">
+          <el-input v-model="form.updateById" placeholder="请输入更新者ID" />
+        </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>
+    <el-drawer
+      :visible.sync="drawer"
+      direction="rtl"
+      :before-close="drawerHandleClose"
+      :with-header="false"
+    >
+      <div ref="container" class="monaco-container"></div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import {
+  listStyle,
+  getStyle,
+  delStyle,
+  addStyle,
+  updateStyle,
+} from "@/api/system/style";
+import { getDictLabel } from "@/utils/other";
+import * as monaco from "monaco-editor";
+
+export default {
+  name: "StyleMange",
+  dicts: ["table_style_type"],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 动态格样式模板表格数据
+      styleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        styleKey: null,
+        styleName: null,
+        styleType: null,
+        styleCode: null,
+        styleDescription: null,
+        styleStatus: null,
+        createById: null,
+        updateById: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        styleName: [
+          { required: true, message: "请输入样式名", trigger: "blur" },
+        ],
+        styleType: [
+          { required: true, message: "请选择样式类型", trigger: "change" },
+        ],
+        styleCode: [
+          { required: true, message: "请输入样式代码", trigger: "blur" },
+        ],
+        styleDescription: [
+          { required: true, message: "请输入样式样式描述", trigger: "blur" },
+        ],
+      },
+      // 代码编辑器
+      monacoEditor: null,
+      drawer: false,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询动态格样式模板列表 */
+    getList() {
+      this.loading = true;
+      listStyle(this.queryParams).then((response) => {
+        this.styleList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        styleKey: null,
+        styleName: null,
+        styleType: null,
+        styleCode: null,
+        styleDescription: null,
+        styleStatus: null,
+        delFlag: null,
+        createBy: null,
+        createById: null,
+        createTime: null,
+        updateBy: null,
+        updateById: null,
+        updateTime: 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.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加动态格样式模板";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      getStyle(id).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改动态格样式模板";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateStyle(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addStyle(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal
+        .confirm('是否确认删除动态格样式模板编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delStyle(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/style/export",
+        {
+          ...this.queryParams,
+        },
+        `style_${new Date().getTime()}.xlsx`
+      );
+    },
+    theGetDictLabel(value, dictList) {
+      return getDictLabel(value, dictList);
+    },
+    // 抽屉打开回调
+    drawerOpenHandler() {
+      this.monacoEditor?.dispose();
+      this.drawer = true;
+      this.$nextTick(() => {
+        this.monacoEditor = monaco.editor.create(this.$refs.container, {
+          value: this.form.styleCode,
+          language: "css",
+          theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
+          contextmenu: false, // 禁用右键菜单
+          editorOptions: this.editorOptions, // 同codes
+        });
+      });
+    },
+    // 抽屉关闭前回调
+    drawerHandleClose(done) {
+      this.$confirm("即将关闭编辑器,是否保存代码?")
+        .then(
+          (val) => {
+            this.form.styleCode = this.monacoEditor?.getValue();
+            // this.drawer = false;
+            done();
+          },
+          (res) => {
+            // this.drawer = false;
+            done();
+          }
+        )
+        .catch(() => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monaco-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

ruoyi-ui/src/views/tablelist/commonTable/listInfo.vue

@@ -804,7 +804,7 @@ export default {
         let judgeRes = this.determineCondition(item.styleCondtion, row);
         if (judgeRes) {
           let styleCode = JSON.parse(item.styleCode);
-          return `background-color:${styleCode.rowBgColor}`;
+          return `background-color:${styleCode.rowBgColor};`;
         }
       }
     },
@@ -844,7 +844,7 @@ export default {
       let res = await this.setDictStyleData();
       console.log(res);
       this.dictStyleObj = res;
-      console.log(JSON.parse(JSON.stringify(this.dictStyleObj)));
+      // console.log(JSON.parse(JSON.stringify(this.dictStyleObj)));
       tableList.forEach((row) => {
         // if (!row.styleFieldObj) row.styleFieldObj = {};
         for (let i = 0; i < fieldConditionList.length; i++) {