业务表单

zkqy-ui/package.json

@@ -101,6 +101,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-demi": "^0.14.10",
+    "vue-i18n": "^7.3.2",
     "vue-json-excel": "^0.3.0",
     "vue-meta": "2.4.0",
     "vue-print-nb": "^1.7.5",
@@ -112,8 +113,7 @@
     "vuex": "3.6.0",
     "vuex-persistedstate": "^4.1.0",
     "webpack": "^4.46.0",
-    "xml2js": "^0.6.2",
-    "vue-i18n": "7.3.2"
+    "xml2js": "^0.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

zkqy-ui/src/api/businessFlow/vuePage.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 查询流程定义列表
+export function getByVueKey(query) {
+  return request({
+    url: '/system/SysBusinessFlowVuePage/getByVueKey',
+    method: 'get',
+    params: query,
+    baseURL: process.env.VUE_APP_BASE_API
+  })
+}

zkqy-ui/src/components/BusinessFlow/DynamicComponentWrapper.vue

@@ -0,0 +1,141 @@
+<template>
+    <div ref="display"></div>
+</template>
+<script>
+import Vue from 'vue';
+import { randomStr } from '@/utils/random_str'
+  export default {
+    name: 'DynamicComponentWrapper',
+    props: {
+      code: {
+        type: String,
+        default: ''
+      },
+      rowData: {
+        type: Object,
+        default: () => {}
+      },
+      vueKey: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        component: null,
+        id: randomStr(),
+        html: '',
+        js: '',
+        css: ''
+      }
+    },
+    watch: {
+        code () {
+            this.destroyCode();
+            this.renderCode();
+            }
+    },
+    created() {
+        console.log("this.code", this.code)
+        console.log("this.rowData", this.rowData)
+        console.log("this.vueKey", this.vueKey)
+        console.log("window.process", process)
+        this.splitCode();
+    },
+    mounted () {
+      this.renderCode();
+    },
+    beforeDestroy () {
+        this.destroyCode();
+    },
+    methods: {
+        renderCode () {
+            this.splitCode();
+    
+            if (this.html !== '' && this.js !== '') {
+                // 在创建组件前注入 process 对象
+                const originalProcess = window.process;
+                window.process = {
+                    env: {
+                        VUE_APP_TITLE: process.env.VUE_APP_TITLE,
+                        VUE_APP_BASE_API: process.env.VUE_APP_BASE_API,
+                        VUE_APP_BASE_API1: process.env.VUE_APP_BASE_API1,
+                        NODE_ENV: process.env.NODE_ENV
+                    }
+                };
+                
+                const parseStrToFunc = new Function(this.js)();
+                parseStrToFunc.template = this.html;
+                
+                // 在组件创建前注入 process 对象和 $http
+                parseStrToFunc.beforeCreate = function() {
+                    this.$options.process = window.process;
+                    // 注入 $http 方法
+                    this.$http = this.$root.$http;
+                    // 注入 $message 方法
+                    this.$message = this.$root.$message;
+                };
+                
+                const Component = Vue.extend(parseStrToFunc);
+                const propsData = {};
+                if (parseStrToFunc.props && parseStrToFunc.props.vueKey) {
+                    propsData.vueKey = this.vueKey;
+                }
+                if (parseStrToFunc.props && parseStrToFunc.props.rowData) {
+                    propsData.rowData = this.rowData;
+                }
+                this.component = new Component({
+                    propsData
+                }).$mount();
+    
+                // 恢复原来的 process 对象
+                window.process = originalProcess;
+    
+                this.$refs.display.appendChild(this.component.$el);
+                if (this.css !== '') {
+                    const style = document.createElement('style');
+                    style.type = 'text/css';
+                    style.id = this.id;
+                    style.innerHTML = this.css;
+                    document.getElementsByTagName('head')[0].appendChild(style);
+                }
+            }
+            
+              // 打印最终使用的 Vue 页面代码
+            console.log('=== 最终使用的 Vue 页面代码 ===');
+            console.log('Template:', this.html);
+            console.log('Script:', this.js);
+            console.log('Style:', this.css);
+            console.log('===========================');
+        },
+        getSource (source, type) {
+            const regex = new RegExp(`<${type}[^>]*>`);
+            let openingTag = source.match(regex);
+        
+            if (!openingTag) return '';
+            else openingTag = openingTag[0];
+        
+            return source.slice(source.indexOf(openingTag) + openingTag.length, source.lastIndexOf(`</${type}>`));
+        },
+        splitCode () {
+            const script = this.getSource(this.code, 'script').replace(/export default/, 'return ');
+            const style = this.getSource(this.code, 'style');
+            const template = '<div id="app-dynamic-component-wrapper">' + this.getSource(this.code, 'template') + '</div>';
+        
+            this.js = script;
+            this.css = style;
+            this.html = template;
+        },
+        destroyCode () {
+        const $target = document.getElementById(this.id);
+        if ($target) $target.parentNode.removeChild($target);
+    
+        if (this.component) {
+                this.$refs.display.removeChild(this.component.$el);
+                this.component.$destroy();
+                this.component = null;
+            }
+        }
+    },
+}
+</script>

zkqy-ui/src/utils/random_str.js

@@ -0,0 +1,10 @@
+// 从指定的 a-zA-Z0-9 中随机生成 32 位的字符串
+export  function randomStr(len = 32) {
+    const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+    const maxPos = $chars.length;
+    let str = '';
+    for (let i = 0; i < len; i++) {
+      str += $chars.charAt(Math.floor(Math.random() * maxPos));
+    }
+    return str;
+  }

zkqy-ui/src/views/businessFlow/jumpPage.vue

@@ -0,0 +1,47 @@
+<!-- display.vue -->
+<template>
+    <div class="app-container">
+        <dynamic-component-wrapper   v-if="vueCode" :code="vueCode" :rowData="rowData" :vueKey="vueKey"/>
+    </div>
+</template>
+
+<script>
+import DynamicComponentWrapper from '@/components/BusinessFlow/DynamicComponentWrapper.vue'
+
+export default {
+      name: 'jumpPage',
+      components: {
+        DynamicComponentWrapper
+      },
+      data () {
+          return {
+          //总数据, 如果在工具端的操作按钮配置条件参数，rowData会有值, vueData是绑定的页面的参数
+          jumpPageData: {},
+          //渲染的页面
+          vueCode: '',
+          //渲染的页面的key--执行脚本需要的参数
+          vueKey: '',
+          //跳转来源值--上一个页面的数据
+          rowData: {},
+          html: '',
+          js: '',
+          css: ''
+          }
+      },
+      created() {
+          // 在组件创建时获取路由参数
+          this.jumpPageData = this.$route.query.jumpPageData;
+          console.log("jumpPageData", this.jumpPageData)
+          if(this.jumpPageData){
+              const vueCodeStr = decodeURIComponent(this.jumpPageData?.vueData?.vueCode)
+              this.vueCode = vueCodeStr;
+              this.vueKey = this.jumpPageData?.vueData?.vueKey;
+              this.rowData = this.jumpPageData?.rowData;
+          }
+        //   console.log("this.vueCode", this.vueCode)
+        //   console.log("this.vueKey", this.vueKey)
+        //   console.log("this.rowData", this.rowData)   
+      }
+  }
+ 
+</script>

zkqy-ui/src/views/login.vue

@@ -315,7 +315,7 @@ export default {
             // uri:"?client_id=mestools&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.128.171:8066/oauth/callback",//实验室
             // uri:"?client_id=mestools&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.2.135:8066/oauth/callback",//铨一
             // uri:"?client_id=mestools&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.3.17:8066/oauth/callback",//化纤
-             uri:"?client_id=hmc&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.10.8:8066/oauth/callback",//hmc
+             uri:"?client_id=hmc&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.10.103:8066/oauth/callback",//hmc
              //uri:"?client_id=hmc&scope=basic&response_type=code&state=AB1357&redirect_uri=http://192.168.110.182:8066/oauth/callback",//lth
             ...this.loginForm,
             tenantID: this.tenantId,

zkqy-ui/src/views/orderMange/planTable/fankuang.vue

@@ -247,7 +247,6 @@
             <span v-else>{{ scope.row.currentLotNumber }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="number" :label="$t('planTable.quantity')" header-align="center" align="center">
         <!-- 新增筒重、箱重、管色字段 -->
         <el-table-column
           prop="tubeweight"
@@ -322,7 +321,7 @@
           </template>
         </el-table-column>
         <!-- 新增筒重、箱重、管色字段 -->
-        <el-table-column prop="number" label="数量" header-align="center" align="center">
+        <el-table-column prop="number" :label="$t('planTable.quantity')" header-align="center" align="center">
           <template v-slot:default="scope">
             <el-input v-if="scope.row.isEditing" v-model="scope.row.number" :placeholder="$t('planTable.inputQuantity')" @blur.stop.prevent="handleInputBlur(scope.row)">></el-input>
             <span v-else>{{ scope.row.number }}</span>

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

@@ -191,6 +191,7 @@ import {
   getStatisticList,
 } from "@/api/tablelist/commonTable";
 import { listData } from "@/api/system/tenant/data";
+import { getByVueKey } from "@/api/businessFlow/vuePage";
 import { getToken } from "@/utils/auth";
 import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
 import { camelCase, toUnderline } from "@/utils";
@@ -463,7 +464,7 @@ export default {
           this.excuteBtnArr = res.data.resultMap.button?.filter(
             (item) => item.btnGroupType == "right"
           );
-          // console.log('[========excuteBtnArr==============]',this.excuteBtnArr)
+          console.log('[========excuteBtnArr==============]',this.excuteBtnArr)
           this.topBtnArr =
             res.data.resultMap.button?.filter(
               (item) => item.btnGroupType == "top"
@@ -1089,6 +1090,65 @@ export default {
       console.log(this.times);
       return;
     },
+    // 按钮跳转方法
+    async handleBtnJump(row, btnData) {
+      // console.log("[按钮跳转]", row, btnData);
+      let data = {
+            basicMap: {
+              tableName: this.tableName,
+              // btnKey: btnData.btnKey,
+              btnKey: this.currentBtnData.btnKey,
+            },
+            conditionMap: {},
+            commMap: {},
+            btnParametersMap: {},
+          };
+          if (this.currentBtnData.btnParams) {
+            let conditionData =
+              JSON.parse(this.currentBtnData.btnParams).conditionData || [];
+            // let
+            let commonData =
+              JSON.parse(this.currentBtnData.btnParams).commonFieldData || [];
+
+            conditionData.forEach((item) => {
+              data.conditionMap[item.fieldName.split(".")[1]] = item.fieldValue
+                ? item.fieldValue
+                : this.currentRow[camelCase(item.fieldName.replace(".", "_"))];
+            });
+            commonData.forEach((item) => {
+              data.btnParametersMap[item.fieldName.split(".")[1]] =
+                item.fieldValue
+                  ? item.fieldValue
+                  : this.currentRow[
+                  camelCase(item.fieldName.replace(".", "_"))
+                  ];
+            });
+          }
+          data.basicMap.btnType = this.currentBtnData.btnType;
+          data.basicMap.visible = true;
+      // 现在 data.conditionMap 包含了与 noNeedHandler 相同的条件映射
+      console.log("data:", data);
+
+      // 继续处理业务逻辑
+      let vueKey = btnData?.btnBusinessFlowVueKey;
+      if (vueKey) {
+        getByVueKey({vueKey}).then((res) => {
+          if(res.code===200){
+            console.log("res", res)
+            let jumpPageData = {
+              vueData:res?.data,
+              rowData: data?.conditionMap  // 使用构建好的 conditionMap
+          }
+          this.$router.push({
+            path: '/processMange/businessFlow/jumpPage',  // 跳转路径
+            query: {
+              jumpPageData,
+            }
+          });
+          }
+        })
+      }
+    },
     // 将表单组数据转换成符合单个表单的数据格式
     transformDataFormat(data) {
       this.FormNameList = [];
@@ -1961,8 +2021,9 @@ export default {
     },
     // 操作列回调
     excuteHandler(btnData, row) {
-      // console.log("btnData, row", btnData, row);
       let { btnType, btnParams, btnFormType } = btnData;
+      console.log("[操作列回调---btnType, btnParams, btnFormType]", btnType, btnParams, btnFormType, row);
+
       this.formType = btnFormType;
       this.currentBtnData = btnData;
       this.currentRow = JSON.parse(JSON.stringify(row));
@@ -1971,7 +2032,8 @@ export default {
         btnFormType == "noNeed" &&
         btnType != "UPDATE" &&
         btnType != "INNERLINK" &&
-        btnType != "OUTLINK"
+        btnType != "OUTLINK" &&
+        btnType != "BUSINESSSCRIPTPAGE"  // 跳转页面
       ) {
         this.noNeedHandler(btnData, row);
         return;
@@ -1980,7 +2042,7 @@ export default {
         this.times = 1; //重置请求次数
         this.formListShow = false;
       }
-
+      console.log("[操作列回调---btnType]", btnType);
       switch (btnType) {
         case "INNERLINK": //内链
           this.routerHandler(btnData, btnType);
@@ -2012,6 +2074,9 @@ export default {
         case "CALCULATE":
           this.handleCalculate(row, btnData);
           break;
+        case "BUSINESSSCRIPTPAGE":
+          this.handleBtnJump(row, btnData);
+          break;
         default:
           break;
       }

zkqy-ui/vue.config.js

@@ -43,7 +43,7 @@ module.exports = {
         // target: `http://192.168.2.135:8066`, //铨一开发
         // target: `http://192.168.3.17:8066`, //化纤服务器
         // target: `http://192.168.110.182:8066`, //lth
-         target: `http://192.168.10.8:8066`, //hmc
+         target: `http://192.168.10.103:8066`, //hmc
         // target: `http://175.27.169.173:8066`,//公网服务器
         changeOrigin: true,
         pathRewrite: {
@@ -75,7 +75,9 @@ module.exports = {
       alias: {
         '@': resolve('src'),
         '@packages': resolve('src/views/system/bpmnPro/components'),
-        '@utils': resolve('src/utils/bpmn')
+        '@utils': resolve('src/utils/bpmn'),
+         // 带编译器的 Vue 版本
+        'vue$': 'vue/dist/vue.esm.js'
       }
     },
     plugins: [