KFormDesign添加下拉框绑定动态数据组件

ruoyi-ui/src/api/bussiness/bpmExcuteProcess.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询流程执行任务表列表
+export function listProcess(query) {
+  return request({
+    url: '/system/process/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询流程执行任务表详细
+export function getProcess(id) {
+  return request({
+    url: '/system/process/' + id,
+    method: 'get'
+  })
+}
+
+// 新增流程执行任务表
+export function addProcess(data) {
+  return request({
+    url: '/system/process',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改流程执行任务表
+export function updateProcess(data) {
+  return request({
+    url: '/system/process',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除流程执行任务表
+export function delProcess(id) {
+  return request({
+    url: '/system/process/' + id,
+    method: 'delete'
+  })
+}

ruoyi-ui/src/components/kFormDesign/OptionsEdit.vue

@@ -0,0 +1,498 @@
+<template>
+  <div class="option-edit-wrap">
+    <el-button
+      type="info"
+      size="default"
+      icon="el-icon-edit"
+      @click="editHandler"
+    >
+    </el-button>
+    <el-dialog
+      title="设置下拉选项数据"
+      :visible.sync="isShow"
+      width="50%"
+      :before-close="cancleHandler"
+    >
+      <el-form
+        ref="formDataRef"
+        :model="formData"
+        :rules="rules"
+        label-width="140px"
+      >
+        <el-row type="flex" style="flex-wrap: wrap">
+          <el-col :span="12">
+            <el-form-item label="选项数据名" prop="dynamicName">
+              <el-input
+                v-model="formData.dynamicName"
+                placeholder="请输入动态数据名"
+                size="normal"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="表名" prop="tableName">
+              <el-select
+                class="mr10"
+                v-model="formData.tableName"
+                placeholder="请选择表名"
+                clearable
+                filterable
+                @change="
+                  (value) => {
+                    getFieldOptions(value);
+                  }
+                "
+              >
+                <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>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="描述字段(label)" prop="optLabelData">
+              <el-select
+                v-model="formData.optLabelData"
+                placeholder="请选择字段"
+                clearable
+                filterable
+              >
+                <el-option
+                  v-for="item in 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>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="值字段(value)" prop="optValueData">
+              <el-select
+                v-model="formData.optValueData"
+                placeholder="请选择字段"
+                clearable
+                filterable
+              >
+                <el-option
+                  v-for="item in 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>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <div class="filter-table-wrap">
+              <span class="title">添加数据过滤条件</span>
+              <el-table :data="filterTableData" 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="
+                        (value) => {
+                          getFieldOptions(value, 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 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="flagValue" label="参照值" width="100">
+                  <template slot-scope="scope">
+                    <el-button
+                      type="info"
+                      size="small"
+                      icon="el-icon-edit"
+                      @click="editFlagHandler(scope.row, scope.$index)"
+                    >
+                    </el-button>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作">
+                  <template slot-scope="scope">
+                    <el-button
+                      size="mini"
+                      type="danger"
+                      icon="el-icon-delete"
+                      @click="deleteFilterItem(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="addFilterHandler"
+              >
+                添加条件
+              </el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <template #footer>
+        <span>
+          <el-button @click="cancleHandler">取消</el-button>
+          <el-button type="primary" @click="conformHandler">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <el-dialog title="编辑参照值" :visible.sync="flagShow" width="30%">
+      <el-form
+        :model="flagFormData"
+        ref="flagFormDataRef"
+        :rules="rules"
+        label-width="100px"
+        :inline="false"
+        size="normal"
+      >
+        <el-form-item label="参照类型">
+          <el-select
+            v-model="flagFormData.flagType"
+            placeholder="请选择参照类型"
+            filterable
+          >
+            <el-option
+              v-for="item in flagTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          prop="flagValue"
+          v-show="flagFormData.flagType == 0"
+          label="自定义值"
+        >
+          <el-input v-model="flagFormData.flagValue"></el-input>
+        </el-form-item>
+        <el-form-item
+          prop="tableField"
+          v-show="flagFormData.flagType == 1"
+          label="关联表格字段"
+        >
+          <el-select
+            class="mr10"
+            v-model="flagFormData.tableField.tableName"
+            placeholder="请选择表名"
+            clearable
+            filterable
+            @change="
+              (value) => {
+                getFieldOptions(value, flagFormData.tableField);
+              }
+            "
+          >
+            <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>
+          <el-select
+            v-model="flagFormData.tableField.fieldName"
+            placeholder="请选择字段"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in flagFormData.tableField.fieldOptions"
+              :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>
+        </el-form-item>
+        <el-form-item
+          v-show="flagFormData.flagType == 2"
+          label="固定值"
+          size="normal"
+        >
+          <el-select
+            v-model="flagFormData.flagValue"
+            placeholder="请选择固定值"
+            filterable
+          >
+            <el-option
+              v-for="item in constFlagList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <span>
+          <el-button @click="flagShow = false">取消</el-button>
+          <el-button type="primary" @click="flagConfirm">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getFormName, getListName } from "@/api/dragform/form.js";
+import { mapState } from "vuex";
+import getOptionsSqlString from "@/utils/sqlString";
+export default {
+  name: "OptionsEdit",
+  props: ["options", "selectItem"],
+  components: {},
+  data() {
+    return {
+      isShow: false,
+      flagShow: false,
+      flagEditIndex: "",
+      formData: {
+        dynamicName: "", //英文字符串
+        tableName: "",
+        optLabelData: "",
+        optValueData: "",
+      },
+      filterTableData: [
+        {
+          fieldName: "",
+          flagValue: "",
+          fieldOptions: [],
+          flagFormData: {
+            flagType: 0,
+            tableField: {
+              tableName: "",
+              fieldName: "",
+              fieldOptions: [],
+            },
+            flagValue: "",
+          },
+        },
+      ],
+
+      flagFormData: {
+        flagType: 0,
+        tableField: {
+          tableName: "",
+          fieldName: "",
+          fieldOptions: [],
+        },
+        flagValue: "",
+      },
+      flagTypeList: [
+        {
+          value: 0,
+          label: "自定义",
+        },
+        // {
+        //   value: 1,
+        //   label: "关联其他字段",
+        // },
+        {
+          value: 2,
+          label: "固定值",
+        },
+      ],
+      tableList: [],
+      fieldList: [],
+      rules: {},
+      constFlagList: [
+        {
+          value: "#{USERID}",
+          label: "当前用户相关数据",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+    }),
+  },
+  methods: {
+    // 重置条件表单数据
+    resetFlagFormData() {
+      Object.assign(this.flagFormData, {
+        flagType: 0,
+        tableField: {
+          tableName: "",
+          fieldName: "",
+          fieldOptions: [],
+        },
+        flagValue: "",
+      });
+    },
+    // 开始编辑回调
+    async editHandler() {
+      await this.getAllTable();
+      this.isShow = true;
+    },
+    // 弹窗取消回调
+    cancleHandler() {
+      this.isShow = false;
+    },
+    // 弹窗确认回调
+    conformHandler() {
+      console.log(this.formData, this.filterTableData);
+      let sql = getOptionsSqlString(this.formData, this.filterTableData);
+      let sqlData = {};
+      sqlData[this.formData.dynamicName] = sql;
+      this.$emit("setDynamicKey", this.formData.dynamicName, sqlData);
+
+      console.log(sql);
+      this.isShow = false;
+    },
+    // 获取所有表格
+    async getAllTable() {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+      };
+      let res = await getFormName(data);
+
+      this.tableList = res.data;
+    },
+    async getFieldOptions(value, tempData) {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: value,
+      };
+      try {
+        let res = await getListName(data);
+        if (tempData) {
+          tempData.fieldOptions = res;
+        } else {
+          this.fieldList = res;
+        }
+      } catch (error) {
+        this.$message.error("网络异常,请稍后再试");
+      }
+    },
+    // 删除一条筛选条件
+    deleteFilterItem(index) {
+      this.filterTableData.splice(index, 1);
+    },
+    // 新增一条筛选条件
+    addFilterHandler() {
+      this.filterTableData.push({
+        // tableName: "",
+        fieldName: "",
+        flagValue: "",
+        fieldOptions: [],
+        flagFormData: {
+          flagType: 0,
+          tableField: {
+            tableName: "",
+            fieldName: "",
+            fieldOptions: [],
+          },
+          flagValue: "",
+        },
+      });
+    },
+    // 编辑参照回调
+    editFlagHandler(row, index) {
+      this.flagEditIndex = index;
+      this.flagFormData = JSON.parse(JSON.stringify(row.flagFormData));
+      this.flagShow = true;
+    },
+    // 确认参照回调
+    flagConfirm() {
+      this.filterTableData[this.flagEditIndex].flagFormData = JSON.parse(
+        JSON.stringify(this.flagFormData)
+      );
+      this.flagShow = false;
+    },
+  },
+  async mounted() {
+    console.log(this.options, this.selectItem);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.filter-table-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

ruoyi-ui/src/utils/sqlString.js

@@ -0,0 +1,45 @@
+
+export default function getOptionsSqlString(baseData, conditions) {
+  let res = {}
+  let { dynamicName, tableName, optLabelData, optValueData } = baseData
+  // res[baseData.dynamicName] = ''
+  let sqlString = 'SELECT '   //起始
+  let labelValueStr = tableName + '.' + optLabelData + ' AS `label`,' + tableName + '.' + optValueData + ' AS `value`,' + tableName + '.* FROM '      //查询字段
+  let allTable = []
+  allTable.push(tableName);
+  conditions.forEach(item => {
+    if (item.flagFormData.flagType == 1) {
+      allTable.push(item.flagFormData.tableField.tableName)
+    }
+  })
+  let set = new Set(allTable);
+  allTable = [...set];
+  console.log(allTable);
+  let tableNickNameStr = ''    //表格别名
+  allTable.forEach(item => {
+    tableNickNameStr += `${item} AS ${item} `
+  })
+  tableNickNameStr += 'WHERE '
+  // 拼接条件
+  let conditionArr = [];
+  conditions.forEach(condition => {
+    switch (condition.flagFormData.flagType) {
+      case 0://自定义
+        conditionArr.push(`${tableName}.${condition.fieldName} = ${condition.flagFormData.flagValue}`)
+        break;
+      case 1://关联其他字段
+        conditionArr.push(`${tableName}.${condition.fieldName} = #{${condition.flagFormData.tableField.tableName}.${condition.flagFormData.tableField.fieldName}}`)
+        break;
+      case 2://固定值
+        conditionArr.push(`${tableName}.${condition.fieldName} = ${condition.flagFormData.flagValue}`)
+        break;
+      default:
+        break;
+    }
+  })
+  let conditionStr = conditionArr.join(' AND ') //条件sql
+
+  return sqlString + labelValueStr + tableNickNameStr + conditionStr
+
+
+}

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

@@ -336,10 +336,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="绑定节点" prop="btnScriptKey">
+              <el-form-item label="绑定脚本" prop="btnScriptKey">
                 <el-select
                   v-model="btnGroupFormData.btnScriptKey"
-                  placeholder="请选择执行节点"
+                  placeholder="请选择绑定节点"
                   clearable
                   filterable
                 >
@@ -500,7 +500,6 @@ 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";
-import { node } from "@/components/updateModule/k-form-design/lib/k-form-design.common";
 
 export default {
   name: "ExcuteBtnMange",

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

@@ -77,12 +77,25 @@ export default {
       //
       var editorHtmlJson =
         codeHtmlFront + JSON.stringify(jsonData) + codeHtmlLast;
+      let { list } = jsonData;
+      let needSqlArr = ["select", "treeSelect", "cascader"];
+      let selectArr = list.filter((item) => {
+        return needSqlArr.includes(item.type) && item.options.dynamic;
+      });
+      let formSQL = {};
+      selectArr.forEach((item) => {
+        // formSQL = {
+        //   ...formSQL,
+        //   ...item.options.sqlData,
+        // };
+        Object.assign(formSQL, item.options.sqlData);
+      });
+
       let {
         formName,
         nickFormName,
         mainTableName,
         formDescription,
-        formSQL,
         formNodeId,
       } = jsonData.config;
       if (!this.fid) {
@@ -112,7 +125,7 @@ export default {
           fId: this.fid,
           dfTableName: mainTableName,
           dfNotes: formDescription,
-          dfFormSql: formSQL,
+          dfFormSql: JSON.stringify(formSQL),
           dfNodeId: formNodeId,
         }).then((res) => {
           console.log(res);

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

@@ -0,0 +1,18 @@
+<template>
+  <div class="app-container">选项数据管理</div>
+</template>
+
+<script>
+export default {
+  name: "SelectOptionsMange",
+  props: [],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -244,8 +244,10 @@
       <k-form-build
         class="formBuild"
         ref="addFromRef"
+        :dynamicData="dynamicData"
         :defaultValue="defaultValue"
         @submit="tempSubBtn"
+        @change="formChangeHandler"
         :value="jsonData"
       />
       <div slot="footer" class="dialog-footer">
@@ -362,6 +364,8 @@ export default {
       dictStyleObj: {},
       // 操作列 按钮数据
       excuteBtnArr: [],
+      // 下拉框动态数据
+      dynamicData: {},
     };
   },
 
@@ -560,6 +564,10 @@ export default {
           this.$message.error("当前表格未绑定表单!");
           return;
         }
+        if (data.dfFormSql) {
+          let dynamicData = JSON.parse(data.dfFormSql);
+          Object.assign(this.dynamicData, dynamicData);
+        }
         this.jsonData = JSON.parse(data.dfVueTemplate);
         this.open = true;
         this.title = "添加信息";
@@ -973,6 +981,11 @@ export default {
           break;
       }
     },
+
+    // k-form-build表单变化回调
+    formChangeHandler(value, label) {
+      console.log(value, label);
+    },
   },
 };
 </script>