ソースを参照

k-form-design

lph 1 年間 前
コミット
d4d46b5fb4

+ 49 - 0
zkqy-ui/src/api/system/formGroup.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+// 查询动态表单组列表
+export function listFormGroup(query) {
+  return request({
+    url: '/system/formGroup/list',
+    method: 'get',
+    params: query,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 查询动态表单组详细
+export function getFormGroup(id) {
+  return request({
+    url: '/system/formGroup/' + id,
+    method: 'get',
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 新增动态表单组
+export function addFormGroup(data) {
+  return request({
+    url: '/system/formGroup',
+    method: 'post',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 修改动态表单组
+export function updateFormGroup(data) {
+  return request({
+    url: '/system/formGroup',
+    method: 'put',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 删除动态表单组
+export function delFormGroup(id) {
+  return request({
+    url: '/system/formGroup/' + id,
+    method: 'delete',
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}

+ 18 - 0
zkqy-ui/src/router/index.js

@@ -73,6 +73,24 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/formGroupMange',
+    component: Layout,
+    hidden: true,
+    name: 'formGroupMange',
+    meta: {
+      title: "表单组编辑",
+      icon: "form",
+      noCache: false,
+      link: null
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/system/formGroupMange/index'),
+      }
+    ]
+  },
   {
     path: '/progressShow',
     component: Layout,

+ 12 - 11
zkqy-ui/src/views/dragform/index.vue

@@ -441,19 +441,20 @@ export default {
       this.loading = true;
       let tempSelection = JSON.parse(JSON.stringify(this.selection));
       listForm(this.queryParams).then((response) => {
-        response.rows = response.rows.filter(
-          (item) => !tempSelection.find((val) => val.fId == item.fId)
-        );
-        this.formList = [...tempSelection, ...response.rows];
+        // response.rows = response.rows.filter(
+        //   (item) => !tempSelection.find((val) => val.fId == item.fId)
+        // );
+        // this.formList = [...tempSelection, ...response.rows];
+        this.formList = response.rows;
         this.total = response.total;
         this.loading = false;
-        if (tempSelection.length) {
-          this.$nextTick(() => {
-            tempSelection.forEach((item) => {
-              this.$refs.tableRef.toggleRowSelection(item);
-            });
-          });
-        }
+        // if (tempSelection.length) {
+        //   this.$nextTick(() => {
+        //     tempSelection.forEach((item) => {
+        //       this.$refs.tableRef.toggleRowSelection(item);
+        //     });
+        //   });
+        // }
       });
     },
     // 取消按钮

+ 629 - 0
zkqy-ui/src/views/system/formGroupMange/index.vue

@@ -0,0 +1,629 @@
+<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-width="100px" label="动态组名称" prop="FGName">
+        <el-input
+          v-model="queryParams.FGName"
+          placeholder="请输入动态组名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="当前表单组中所绑定的表单" prop="formKeys">
+        <el-input
+          v-model="queryParams.formKeys"
+          placeholder="请输入当前表单组中所绑定的表单"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item> -->
+      <el-form-item label="主表名称" prop="mainTable">
+        <el-input
+          v-model="queryParams.mainTable"
+          placeholder="请输入表单组主表名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="更新人编号" prop="updateById">
+        <el-input
+          v-model="queryParams.updateById"
+          placeholder="请输入更新人编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item> -->
+      <!-- <el-form-item label="创建人编号" prop="createById">
+        <el-input
+          v-model="queryParams.createById"
+          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:formGroup: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:formGroup: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:formGroup: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:formGroup:export']"
+          >导出</el-button
+        >
+      </el-col> -->
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="formGroupList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="动态组名称" align="center" prop="FGName" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="当前表单组中所绑定的表单"
+        align="center"
+        prop="formKeys"
+      />
+      <el-table-column label="表单组主表名称" align="center" prop="mainTable" />
+      <el-table-column
+        label="各个表单之间的关系"
+        align="center"
+        prop="relationJson"
+      />
+      <el-table-column label="回显数据sql" align="center" prop="showDataSql" />
+      <el-table-column label="更新人编号" align="center" prop="updateById" />
+      <el-table-column label="创建人编号" align="center" prop="createById" />
+      <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:formGroup:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:formGroup: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="isEdit ? '修改表单组' : '新增表单组'"
+      :visible.sync="isShow"
+    >
+      <el-form
+        :model="groupForm"
+        ref="groupFormRef"
+        :rules="rules"
+        label-width="80px"
+        :inline="true"
+        size="normal"
+      >
+        <el-form-item prop="FGName" label="组名称:">
+          <el-input v-model="groupForm.FGName"></el-input>
+        </el-form-item>
+        <el-form-item prop="groupDesc" label="组描述:">
+          <el-input v-model="groupForm.groupDesc"></el-input>
+        </el-form-item>
+        <el-form-item prop="mainFormName" label="主表单:">
+          <el-select
+            v-model="groupForm.mainFormName"
+            placeholder="请选择主表单"
+            clearable
+            filterable
+            @change="mainFormChange"
+          >
+            <el-option
+              v-for="item in formOptionList"
+              :key="item.formKey"
+              :label="item.dfName"
+              :value="item.formKey"
+            >
+              <span class="discribe" style="float: left">{{
+                item.dfName
+              }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.formKey
+              }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="mainFormItem" label="主表单项:">
+          <el-select
+            v-model="groupForm.mainFormItem"
+            placeholder="请选择表单项"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in groupForm.mainFormItemOptions"
+              :key="item.model"
+              :label="item.label"
+              :value="item.tableName + '.' + item.model"
+            >
+              <span class="discribe" style="float: left">{{ item.label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.tableName + "." + item.model
+              }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <el-divider content-position="center">从表单数据</el-divider>
+      <el-table :data="subFormList" border stripe>
+        <el-table-column type="index" width="50" />
+        <el-table-column prop="formKey" label="从表单">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.formKey"
+              placeholder="请选择表单"
+              clearable
+              filterable
+              @change="subFormChangeHandler(scope.row)"
+            >
+              <el-option
+                v-for="item in formOptionList"
+                :key="item.formKey"
+                :label="item.dfName"
+                :value="item.formKey"
+              >
+                <span class="discribe" style="float: left">{{
+                  item.dfName
+                }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.formKey
+                }}</span>
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="formItem" label="表单项">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.formItem"
+              placeholder="请选择表单项"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in scope.row.formItemList"
+                :key="item.model"
+                :label="item.label"
+                :value="item.tableName + '.' + item.model"
+              >
+                <span class="discribe" style="float: left">{{
+                  item.label
+                }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.tableName + "." + item.model
+                }}</span>
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="mainFormItem" label="依赖的主表单项:">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.relateMainItem"
+              placeholder="请选择表单项"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in groupForm.mainFormItemOptions"
+                :key="item.model"
+                :label="item.label"
+                :value="item.tableName + '.' + item.model"
+              >
+                <span class="discribe" style="float: left">{{
+                  item.label
+                }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.tableName + "." + item.model
+                }}</span>
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="small"
+              @click="handleDelete(scope.$index, scope.row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button
+        class="mt10"
+        icon="el-icon-plus"
+        type="success"
+        size="mini"
+        @click="addOne"
+      >
+        新增
+      </el-button>
+
+      <template #footer>
+        <span>
+          <el-button @click="cancelHandler">取消</el-button>
+          <el-button type="primary" @click="confirmHandler">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listForm } from "@/api/dragform/form";
+import { getFormItems } from "@packages/bo-utils/getFormItems";
+import {
+  listFormGroup,
+  getFormGroup,
+  delFormGroup,
+  addFormGroup,
+  updateFormGroup,
+} from "@/api/system/formGroup";
+export default {
+  name: "formRelateMange",
+  props: [],
+  components: {},
+  data() {
+    return {
+      // 弹窗相关数据
+      isEdit: false, // 是否编辑
+      isShow: false,
+      groupForm: {
+        FGName: "", //组名称
+        groupDesc: "", //组描述
+        mainFormName: "", //主表单
+        mainFormItem: "", //主表单项
+        mainFormTable: "", //主表单对应表格
+        mainFormItemOptions: [], //主表单项选项
+      },
+      subFormList: [
+        {
+          formKey: "", //从表单
+          dfTableName: "", //从表名
+          formItemList: [], //从表单项列表
+          formItem: "", //从表单项
+          relateMainItem: "", //依赖的主表单项
+        },
+      ],
+      formOptionList: [],
+
+      // 模板参数
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 动态表单组表格数据
+      formGroupList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        FGName: null,
+        formKeys: null,
+        mainTable: null,
+        relationJson: null,
+        showDataSql: null,
+        updateById: null,
+        createById: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+    };
+  },
+  computed: {},
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    // 新增表单组回调
+    async addHandler() {
+      await this.getFormList();
+      this.isShow = true;
+    },
+    // 取消回调
+    cancelHandler() {
+      this.isShow = false;
+    },
+    // 确认回调
+    confirmHandler() {
+      this.isShow = false;
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          let { FGName, groupDesc, mainFormName, mainFormItem, mainFormTable } =
+            this.groupForm;
+          let mainTable = mainFormTable + ":" + mainFormName;
+          let payLoad = {
+            FGName,
+            remark: groupDesc,
+            formKeys,
+            mainTable,
+            relationJson: "",
+            showDataSql: "",
+          };
+        }
+      });
+    },
+    // 获取所有表单数据
+    async getFormList() {
+      let queryParams = { isEnablePaging: false };
+      try {
+        let res = await listForm(queryParams);
+        if (res.code == 200) {
+          this.formOptionList = res.rows;
+          console.log(this.formOptionList);
+        } else {
+          throw Error("获取表单列表失败");
+        }
+      } catch (error) {
+        this.$message.error("网络异常,获取表单列表失败");
+      }
+    },
+    // 主表单变化回调
+    mainFormChange(formKey) {
+      let targetForm = this.getFormJson(formKey);
+      if (targetForm) {
+        this.groupForm.mainFormItemOptions = getFormItems(
+          targetForm.dfVueTemplate
+        );
+        console.log(this.groupForm.mainFormItemOptions);
+      }
+    },
+    // 获取fId对应的表单JSON数据
+    getFormJson(formKey) {
+      if (!formKey) return false;
+      return this.formOptionList.find((item) => item.formKey === formKey);
+    },
+    // 字表单变化回调
+    subFormChangeHandler(row) {
+      if (!row.formKey) {
+        Object.assign(row, {
+          dfTableName: "",
+          formItemList: [],
+          formItem: "",
+        });
+      } else {
+        let targetForm = this.getFormJson(row.formKey);
+        if (targetForm) {
+          row.formItemList = getFormItems(targetForm.dfVueTemplate);
+        }
+      }
+    },
+    //删除从表单
+    handleDelete(index) {
+      this.subFormList.splice(index, 1);
+    },
+    // 新增从表单
+    addOne() {
+      this.subFormList.push({
+        formKey: "", //从表单
+        dfTableName: "", //从表名
+        formItemList: [], //从表单项列表
+        formItem: "", //从表单项
+        relateMainItem: "", //依赖的主表单项
+      });
+    },
+
+    //模板方法
+    /** 查询动态表单组列表 */
+    getList() {
+      this.loading = true;
+      listFormGroup(this.queryParams).then((response) => {
+        this.formGroupList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        FGName: null,
+        remark: null,
+        formKeys: null,
+        mainTable: null,
+        relationJson: null,
+        showDataSql: null,
+        updateTime: null,
+        updateBy: null,
+        updateById: null,
+        createTime: null,
+        createById: null,
+        createBy: null,
+        delFlag: 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;
+      getFormGroup(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) {
+            updateFormGroup(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addFormGroup(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 delFormGroup(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/formGroup/export",
+        {
+          ...this.queryParams,
+        },
+        `formGroup_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

+ 1 - 1
zkqy-ui/src/views/system/tenant/index.vue

@@ -201,7 +201,7 @@
                 <el-button
                   size="mini"
                   type="text"
-                  icon="el-icon-s-custom"
+                  icon="el-icon-s-open"
                   @click="openLoginConfig(scope.row)"
                   v-hasPermi="['system:tenant:remove']"
                   >配置登录页

+ 2 - 2
zkqy-ui/vue.config.js

@@ -37,8 +37,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://192.168.110.76:8080`,
-        target: `http://62.234.61.92:8080`,
+        target: `http://192.168.110.59:8080`,
+        // target: `http://62.234.61.92:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''