操作按钮管理基本功能实现/流程编辑正常节点绑定校验

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

@@ -1,11 +1,13 @@
 import request from '@/utils/request'
 
 // 查询格绑定的自定义按钮列表
+// btnParentId：0 
 export function listBtn(query) {
   return request({
     url: '/system/btn/list',
     method: 'get',
-    params: query
+    params: query,
+    baseURL:process.env.VUE_APP_BASE_API3
   })
 }
 
@@ -13,7 +15,8 @@ export function listBtn(query) {
 export function getBtn(id) {
   return request({
     url: '/system/btn/' + id,
-    method: 'get'
+    method: 'get',
+    baseURL:process.env.VUE_APP_BASE_API3
   })
 }
 
@@ -22,7 +25,8 @@ export function addBtn(data) {
   return request({
     url: '/system/btn',
     method: 'post',
-    data: data
+    data: data,
+    baseURL:process.env.VUE_APP_BASE_API3
   })
 }
 
@@ -31,7 +35,8 @@ export function updateBtn(data) {
   return request({
     url: '/system/btn',
     method: 'put',
-    data: data
+    data: data,
+    baseURL:process.env.VUE_APP_BASE_API3
   })
 }
 
@@ -39,6 +44,7 @@ export function updateBtn(data) {
 export function delBtn(id) {
   return request({
     url: '/system/btn/' + id,
-    method: 'delete'
+    method: 'delete',
+    baseURL:process.env.VUE_APP_BASE_API3
   })
 }

ruoyi-ui/src/utils/bpmn/formDataValidate.js

@@ -1,6 +1,7 @@
 import { customTranslate } from "@packages/additional-modules/Translate";
 
 export function formDataValidate(obj) {
+  console.log(obj);
   let res = {
     flag: true
   };

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

@@ -15,7 +15,11 @@ import xml from "highlight.js/lib/languages/xml";
 import { getProcessEngine } from "@packages/bpmn-utils/BpmnDesignerUtils";
 import EventEmitter from "@utils/EventEmitter";
 import { formDataValidate } from "@utils/formDataValidate";
-import { getNodeMsg, filterNodeMsg } from "@packages/bo-utils/getNodeMsg";
+import {
+  getNodeMsg,
+  filterNodeMsg,
+  validateNode,
+} from "@packages/bo-utils/getNodeMsg";
 import getNodeSequence from "@/utils/bpmn/getNodeSequence";
 
 import moment from "moment";
@@ -126,6 +130,12 @@ export default {
       // 获取xml标签内容标签内容
       let xmlPro = await this.getProcess("xml");
       var xmlObj = this.xmlStr2XmlObj(xmlPro);
+      let validateNodeRes = validateNode(xmlObj);
+      console.log(validateNodeRes);
+      if (!validateNodeRes.flag) {
+        this.$message.error(validateNodeRes.msg);
+        return;
+      }
 
       // 生成节点顺序
       // getNodeSequence(xmlObj);

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

@@ -35,7 +35,6 @@ export function getNodeMsg(xmlObj) {
   // let moddle = getModeler.getModdle();
   // console.log(moddle);
   // return;
-  console.dir(xmlObj);
   let prefix = getProcessEngine();
   let { attributes, childNodes } = xmlObj
     .getElementsByTagName("bpmn:process")[0];
@@ -175,4 +174,58 @@ export function filterNodeMsg(oldMsg, newMsg) {
   }).map(item => item.id)
 
   return newMsg;
+}
+
+
+// 遍历节点黑名单(无用节点)  localName
+const blackArr = [
+  "definitions",
+  "process",
+  "startEvent",
+  "outgoing",
+  // "task",
+  "incoming",
+  "outgoing",
+  "sequenceFlow",
+  "endEvent",
+  "incoming",
+  "sequenceFlow",
+  "BPMNDiagram",
+  "BPMNPlane",
+  "BPMNShape",
+  "Bounds",
+  "BPMNLabel",
+  "Bounds",
+  "BPMNShape",
+  "Bounds",
+  "BPMNLabel",
+  "BPMNShape",
+  "Bounds",
+  "BPMNLabel",
+  "Bounds",
+  "BPMNEdge",
+  "waypoint",
+  "waypoint",
+  "BPMNEdge",
+  "waypoint",
+  "waypoint"
+]
+
+/**
+ * 校验节点数据
+ * @param {xml对象} xmlObj 
+ */
+export function validateNode(xmlObj) {
+  let preFix = getProcessEngine()
+  console.dir(xmlObj);
+  let res = { flag: true }, nodeList = xmlObj.all;
+  for (let index = 0; index < nodeList.length; index++) {
+    const element = nodeList[index];
+    if (blackArr.some(item => item == element.localName)) continue
+    if (!element.getAttribute(`${preFix}:NormalScriptKey`)) {
+      res.flag = false;
+      res.msg = `${element.localName}必须绑定正常节点`
+    }
+  }
+  return res
 }

ruoyi-ui/src/views/system/excuteBtnMange/index.vue

@@ -0,0 +1,830 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
+      <el-form-item label="按钮组名" prop="btnGroupName">
+        <el-input
+          v-model="queryParams.btnGroupName"
+          placeholder="请输入菜单名称"
+          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:menu:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+          >展开/折叠</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="btnList"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column
+        prop="btnGroupName"
+        label="按钮组名称"
+        :show-overflow-tooltip="true"
+        width="160"
+        align="center"
+      ></el-table-column>
+      <el-table-column prop="btnIcon" label="图标" align="center" width="100">
+        <template v-if="scope.row.btnIcon" slot-scope="scope">
+          <svg-icon :icon-class="scope.row.btnIcon" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="btnName"
+        label="按钮文字"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="btnSort"
+        label="排序"
+        align="center"
+        width="60"
+      ></el-table-column>
+      <el-table-column
+        prop="btnHasPermi"
+        label="权限标识"
+        :show-overflow-tooltip="true"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <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="handleUpdate(scope.row)"
+                  v-hasPermi="['system:menu:edit']"
+                  >修改</el-button
+                ></el-dropdown-item
+              >
+              <el-dropdown-item
+                ><el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-plus"
+                  @click="handleAdd(scope.row)"
+                  v-hasPermi="['system:menu:add']"
+                  >新增</el-button
+                ></el-dropdown-item
+              >
+              <el-dropdown-item
+                ><el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['system:menu:remove']"
+                  >删除</el-button
+                ></el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:menu:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:menu:add']"
+          >新增</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:menu:remove']"
+          >删除</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+      <el-form
+        ref="btnGroupFormRef"
+        :model="btnGroupFormData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-row type="flex" style="flex-wrap: wrap">
+          <el-col :span="12">
+            <el-form-item label="上级按钮" prop="btnParentId">
+              <treeselect
+                v-model="btnGroupFormData.btnParentId"
+                :options="menuOptions"
+                :normalizer="normalizer"
+                :show-count="true"
+                placeholder="选择上级按钮"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="btnGroupFormData.btnParentId == 0">
+            <el-form-item label="按钮组名" prop="btnGroupName">
+              <el-input
+                v-model="btnGroupFormData.btnGroupName"
+                placeholder=""
+                size="normal"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="按钮名" prop="btnName">
+              <el-input
+                v-model="btnGroupFormData.btnName"
+                placeholder=""
+                size="normal"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="按钮图标" prop="btnIcon">
+              <el-popover
+                placement="bottom-start"
+                width="460"
+                trigger="click"
+                @show="$refs['iconSelect'].reset()"
+              >
+                <IconSelect
+                  ref="iconSelect"
+                  @selected="selected"
+                  :active-icon="btnGroupFormData.icon"
+                />
+                <el-input
+                  slot="reference"
+                  v-model="btnGroupFormData.icon"
+                  placeholder="点击选择图标"
+                  readonly
+                >
+                  <svg-icon
+                    v-if="btnGroupFormData.btnIcon"
+                    slot="prefix"
+                    :icon-class="btnGroupFormData.btnIcon"
+                    style="width: 25px"
+                  />
+                  <i
+                    v-else
+                    slot="prefix"
+                    class="el-icon-search el-input__icon"
+                  />
+                </el-input>
+              </el-popover>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="排序" prop="btnSort">
+              <el-input-number
+                v-model="btnGroupFormData.btnSort"
+                controls-position="right"
+                :min="0"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="权限标识" prop="btnIcon">
+              <el-input
+                v-model="btnGroupFormData.btnHasPermi"
+                placeholder="请输入权限标识"
+                maxlength="100"
+              />
+              <span slot="label">
+                <el-tooltip
+                  content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
+                  placement="top"
+                >
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+                权限字符
+              </span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="按钮类型" prop="btnType">
+              <el-select
+                v-model="btnGroupFormData.btnType"
+                placeholder="请选择按钮类型"
+                filterable
+              >
+                <el-option
+                  v-for="item in btnTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <div v-show="btnGroupFormData.btnType != 6">
+            <el-col :span="12">
+              <el-form-item label="绑定表单" prop="btnFormKey">
+                <el-select
+                  v-model="btnGroupFormData.btnFormKey"
+                  placeholder="请选择表单"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in formOptions"
+                    :key="item.fId"
+                    :label="item.dfName"
+                    :value="item.fId"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="执行流程" prop="btnTableKey">
+                <el-select
+                  v-model="btnGroupFormData.btnTableKey"
+                  placeholder="请选择执行流程"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in []"
+                    :key="item.fId"
+                    :label="item.dfName"
+                    :value="item.fId"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="绑定表格" prop="btnTableKey">
+                <el-select
+                  v-model="btnGroupFormData.btnTableKey"
+                  placeholder="请选择表格"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in tableOptions"
+                    :key="item.fId"
+                    :label="item.dfName"
+                    :value="item.fId"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="绑定节点" prop="btnScriptKey">
+                <el-select
+                  v-model="btnGroupFormData.btnScriptKey"
+                  placeholder="请选择执行节点"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in scriptOptions"
+                    :key="item.fId"
+                    :label="item.dfName"
+                    :value="item.fId"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col
+              :span="24"
+              v-show="
+                btnGroupFormData.btnType == 3 || btnGroupFormData.btnType == 7
+              "
+            >
+              <el-form-item label="跳转路由" prop="btnParams">
+                <el-input
+                  v-model="btnGroupFormData.btnParams"
+                  placeholder="请输入跳转的路由地址"
+                  size="normal"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </div>
+
+          <!-- <el-col :span="24">
+            <div class="btn-show-condition">
+              <span class="table-title">条件编辑</span>
+              <el-table :data="conditionBtnData" style="width: 100%">
+                <el-table-column label="序号" type="index" width="50">
+                </el-table-column>
+                <el-table-column prop="tableName" label="表名" width="150">
+                  <template slot-scope="scope">
+                    <el-select
+                      v-model="scope.row.tableName"
+                      @change="conditionTableChange(scope.row)"
+                      placeholder="请选择"
+                    >
+                      <el-option
+                        v-for="item in tableList"
+                        :key="item.tableName"
+                        :label="item.tableComment"
+                        :value="item.tableName"
+                      >
+                        <span style="float: left">{{ item.tableComment }}</span>
+                        <span
+                          style="float: right; color: #8492a6; font-size: 13px"
+                          >{{ item.tableName }}</span
+                        >
+                      </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 scope.row.fieldList"
+                        :key="item.fieldName"
+                        :label="item.fieldDescription"
+                        :value="item.fieldName"
+                      >
+                        <span style="float: left">{{
+                          item.fieldDescription
+                        }}</span>
+                        <span
+                          style="float: right; color: #8492a6; font-size: 13px"
+                          >{{ item.fieldName }}</span
+                        >
+                      </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="deleteConditionItem(scope.$index)"
+                      >删除
+                    </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="addConditionHandler"
+              >
+                添加条件
+              </el-button>
+            </div>
+          </el-col> -->
+        </el-row>
+      </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 {
+  listMenu,
+  getMenu,
+  delMenu,
+  addMenu,
+  updateMenu,
+} from "@/api/system/menu";
+import { listBtn, addBtn, getBtn, updateBtn, delBtn } from "@/api/system/btn";
+import { listForm } from "@/api/dragform/form";
+import { listProcess } from "@/api/bpmprocess/process";
+import { listTable } from "@/api/dragform/tableList";
+import { listScript } from "@/api/bpmprocess/process";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import IconSelect from "@/components/IconSelect";
+import { v4 as uuidv4 } from "uuid";
+
+export default {
+  name: "ExcuteBtnMange",
+  dicts: ["sys_show_hide", "sys_normal_disable"],
+  components: { Treeselect, IconSelect },
+  data() {
+    return {
+      // 记录编辑状态
+      editType: true, //true:新增   false:修改
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 菜单表格树数据
+      btnList: [],
+      // 菜单树选项
+      menuOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部折叠
+      isExpandAll: false,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        btnParentId: 0,
+        btnGroupName: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 分页数据
+      total: 0,
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        menuName: [
+          { required: true, message: "菜单名称不能为空", trigger: "blur" },
+        ],
+        orderNum: [
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" },
+        ],
+        path: [
+          { required: true, message: "路由地址不能为空", trigger: "blur" },
+        ],
+      },
+      // 按钮组表单数据
+      btnGroupFormData: {
+        btnGroupName: "", //按钮组名
+        btnParentId: "", //父节点id
+        btnName: "", //按钮显示的文字
+        btnIcon: "", //按钮图标
+        btnType: 6, //0:操作按钮，1，其他，2表单，3内链，4流程，5脚本, 6,目录, 7:外链
+        btnFormKey: "", //表单唯一标识
+        btnProcessKey: "", //流程唯一标识
+        btnTableKey: "", //表格唯一标识
+        btnScriptKey: "", //脚本唯一标识
+        btnShowCondition: "", //按钮显示条件
+        btnParams: "", //操作参数
+        btnHasPermi: "", //权限字符
+        btnSort: 0, //按钮顺序
+        btnKey: "",
+      },
+      conditionBtnData: [],
+      btnTypeOptions: [
+        // {
+        //   value: 0,
+        //   label: "操作按钮",
+        // },
+        // {
+        //   value: 1,
+        //   label: "其它",
+        // },
+        // {
+        //   value: 2,
+        //   label: "表单",
+        // },
+        // {
+        //   value: 3,
+        //   label: "内链",
+        // },
+        // {
+        //   value: 4,
+        //   label: "流程",
+        // },
+        // {
+        //   value: 5,
+        //   label: "脚本",
+        // },
+        {
+          value: "6",
+          label: "目录",
+        },
+        {
+          value: "7",
+          label: "外链",
+        },
+        {
+          value: "3",
+          label: "内链",
+        },
+        {
+          value: "8",
+          label: "修改",
+        },
+        {
+          value: "9",
+          label: "删除",
+        },
+      ],
+      formOptions: [],
+      tableOptions: [],
+      processOptions: [],
+      scriptOptions: [],
+    };
+  },
+  created() {
+    this.getList();
+    this.initFormSubData();
+  },
+  methods: {
+    // 选择图标
+    selected(name) {
+      this.btnGroupFormData.btnIcon = name;
+    },
+    /** 查询菜单列表 */
+    getList() {
+      this.loading = true;
+
+      listBtn(this.queryParams).then((response) => {
+        this.btnList = response.rows;
+        console.log("btnList", this.btnList);
+        this.loading = false;
+      });
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.btnGroupName,
+        children: node.children,
+      };
+    },
+    /** 查询菜单下拉树结构 */
+    getTreeselect() {
+      listBtn({ ...this.queryParams, isEnablePaging: false }).then(
+        (response) => {
+          this.menuOptions = [];
+          const btnTemp = { id: 0, btnGroupName: "新建按钮组", children: [] };
+          btnTemp.children.push(...response.rows);
+
+          this.menuOptions.push(btnTemp);
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.btnGroupFormData = {
+        btnGroupName: "", //按钮组名
+        btnParentId: "", //父节点id
+        btnName: "", //按钮显示的文字
+        btnIcon: "", //按钮图标
+        btnType: "6", //0:操作按钮，1，其他，2表单，3跳转，4流程，5脚本
+        btnFormKey: "", //表单唯一标识
+        btnProcessKey: "", //流程唯一标识
+        btnTableKey: "", //表格唯一标识
+        btnScriptKey: "", //脚本唯一标识
+        btnShowCondition: "", //按钮显示条件
+        btnParams: "", //操作参数
+        btnHasPermi: "", //权限字符
+        btnSort: 0, //按钮顺序
+        btnKey: "",
+      };
+      this.resetForm("btnGroupFormRef");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.getTreeselect();
+
+      this.editType = row ? true : false;
+      if (row != null && row.id) {
+        this.btnGroupFormData.btnParentId = row.id;
+      } else {
+        this.btnGroupFormData.btnParentId = 0;
+      }
+      this.open = true;
+      this.title = "添加按钮组";
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      this.editType = false;
+      getBtn(row.id).then((response) => {
+        this.btnGroupFormData = response.data;
+        this.open = true;
+        this.title = "修改菜单";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["btnGroupFormRef"].validate(async (valid) => {
+        if (valid) {
+          if (this.editType) {
+            // 新增按钮组
+            this.btnGroupFormData.btnKey = uuidv4();
+            let res = await addBtn(this.btnGroupFormData);
+            if (res.code == 200) {
+              this.$message.success("添加成功");
+            } else {
+              this.$message.error("网络异常,请稍后添加");
+            }
+          } else {
+            // 修改按钮组
+            let res = await updateBtn(this.btnGroupFormData);
+            if (res.code == 200) {
+              this.$message.success("修改成功");
+            } else {
+              this.$message.error("网络异常,请稍后修改");
+            }
+          }
+
+          this.getList();
+          this.open = false;
+        }
+      });
+    },
+    // 更新路由
+    reloadRouter() {
+      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
+        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal
+        .confirm('是否确认删除名称为"' + row.btnGroupName + '"的数据项？')
+        .then(function () {
+          return delBtn(row.id);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    // 初始化表单辅助数据
+    async initFormSubData() {
+      try {
+        //获取表单选项数据
+        let formRes = await listForm({ isEnablePaging: false });
+        if (formRes.code == 200) {
+          this.formOptions = formRes.rows;
+        } else {
+          this.$message.error("网络异常请稍后再试");
+        }
+        // 获取流程选项数据
+        let processRes = await listProcess({ isEnablePaging: false });
+        if (processRes.code == 200) {
+          this.processOptions = processRes.rows;
+        } else {
+          this.$message.error("网络异常请稍后再试");
+        }
+        // 获取表格选项数据
+        let TableRes = await listTable({ isEnablePaging: false });
+        if (TableRes.code == 200) {
+          this.tableOptions = TableRes.rows;
+        } else {
+          this.$message.error("网络异常请稍后再试");
+        }
+        // 获取脚本选项数据
+        let scriptRes = await listScript({ isEnablePaging: false });
+        if (scriptRes.code == 200) {
+          this.scriptOptions = scriptRes.rows;
+        } else {
+          this.$message.error("网络异常请稍后再试");
+        }
+      } catch (error) {}
+    },
+    // 添加按钮条件
+    addConditionHandler() {
+      this.conditionBtnData.push({
+        tableName: "",
+        fieldName: "",
+        condition: 1, //1:> 2:< 3:= 4:>= 5:<=
+        flagValue: 0,
+        fieldList: [],
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss" scoped>
+/* #app .sidebar-container .submenu-title-noDropdown:hover, #app .sidebar-container .el-submenu__title:hover {
+    background-color: rgba(0, 0, 0, 0.06) !important;
+}  */
+.submenu-title-noDropdown:hover {
+  background-color: linear-gradient(to right, blue, rgb(69, 118, 225));
+}
+</style>

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

@@ -273,6 +273,21 @@
                     ></el-option>
                   </el-select>
                 </el-form-item>
+                <el-form-item label="操作列按钮" prop="btnGroupList">
+                  <el-select
+                    v-model="formData.btnGroupList"
+                    placeholder="请选择按钮组"
+                    clearable
+                    multiple
+                  >
+                    <el-option
+                      v-for="val in btnGroupOptions"
+                      :key="val.btnKey"
+                      :label="val.btnGroupName"
+                      :value="val.btnKey"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
                 <el-form-item label="排序依赖字段">
                   <el-select
                     v-model="formData.orderByColumn"
@@ -703,7 +718,7 @@ 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 { listBtn } from "@/api/system/btn";
 import StyleFormPanel from "./components/StyleFormPanel.vue";
 export default {
   name: "tableMange",
@@ -807,6 +822,7 @@ export default {
         orderByColumn: "",
         isAsc: false,
         primaryKey: "",
+        btnGroupList: [],
       },
       rules: {
         menuName: [
@@ -860,6 +876,9 @@ export default {
 
       // 样式编辑tab数据
       dragTableStyleList: [],
+
+      //操作列按钮组数据
+      btnGroupOptions: [],
     };
   },
   computed: {
@@ -1638,6 +1657,9 @@ export default {
               data.menuId = this.menuId;
               data.sqlKey = this.editData.sqlKey;
               data.tableKey = this.editData.tableKey;
+              data.dragTableBtnRelevanceList = this.getBtnMapList(
+                data.tableKey
+              );
               res = await editTable(data);
               this.dragTableStatisticList.forEach((item) => {
                 item.tableKey = this.editData.tableKey;
@@ -1651,6 +1673,9 @@ export default {
               });
             } else {
               data.menuId = result.data;
+              data.dragTableBtnRelevanceList = this.getBtnMapList(
+                data.tableKey
+              );
               res = await addDragTable(data);
 
               this.dragTableStatisticList.forEach((item) => {
@@ -1694,6 +1719,15 @@ export default {
         }
       });
     },
+    getBtnMapList(tableKey) {
+      let res = this.formData.btnGroupList.map((item) => {
+        return {
+          tableKey,
+          btnKey: item,
+        };
+      });
+      return res;
+    },
     // 修改表格回显数据
     async initTableData(tId) {
       let res = await getTableInfo(tId);
@@ -1710,6 +1744,7 @@ export default {
           isAsc,
           primaryKey,
           menuName,
+          btnGroupList,
         } = echoData.formData;
         Object.assign(this.formData, {
           menuName,
@@ -1718,6 +1753,7 @@ export default {
           orderByColumn,
           isAsc,
           primaryKey,
+          btnGroupList,
         });
         this.formData.routePath = this.getParentMenuId(
           res.data.menuId,
@@ -1841,11 +1877,18 @@ export default {
     getTableCommont(tableName, tableList) {
       return tableList.find((item) => item.tableName == tableName).tableComment;
     },
+
+    // 获取按钮组数据
+    async getBtnList() {
+      let res = await listBtn({ isEnablePaging: false, btnParentId: 0 });
+      this.btnGroupOptions = res.rows;
+    },
   },
   created() {},
   async mounted() {
     this.getAllTable();
     this.initDragTable();
+    this.getBtnList();
     await this.getMenuList();
     if (this.$route.query.tId) {
       this.tId = this.$route.query.tId;