打印框架加载数据集

auto-imports.d.ts

@@ -4,5 +4,5 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
 }

src/api/ApiUrlConstant.ts

@@ -6,4 +6,6 @@ export default class ApiUrlConstant {
 
     public static readonly previewTemplateUrl: string = ApiUrlConstant.BASIC_PATH + '/com/galaxis/wms/print/PrintServer@preview'
 
+    public static readonly getPrintTemplateParamListUrl: string = ApiUrlConstant.BASIC_PATH + '/com/galaxis/wms/print/PrintTemplateParamManager@getPrintTemplateParam'
+
 }

src/api/PrintTemplateParamApi.ts

@@ -0,0 +1,16 @@
+import CommonApi from '@/api/CommonApi'
+import ApiUrlConstant from "@/api/ApiUrlConstant";
+import System from '@/utils/system'
+
+export default class PrintTemplateParamApi {
+
+    public static async getPrintTemplateParamList(printTemplateId: string): Promise<any> {
+        const params = {print_template_id: printTemplateId};
+        const printTemplateParamResult = await CommonApi.request(ApiUrlConstant.getPrintTemplateParamListUrl, params);
+        if (printTemplateParamResult && printTemplateParamResult.success) {
+            return printTemplateParamResult.data;
+        }
+        System.alert("获取打印参数异常, 请稍后再试...")
+        return null;
+    }
+}

src/api/index.ts

@@ -1,54 +1,7 @@
-import {request} from "@/utils/request";
-import ApiUrlConstant from "@/api/ApiUrlConstant";
+import CommonApi from "@/api/CommonApi";
+import PrintTemplateParamApi from "@/api/PrintTemplateParamApi";
 
-export default class Api {
-
-    private static getContextPath() {
-        return '';
-    }
-
-    private static request<T = any>(url: string, args: any = {}): Promise<T> {
-        return request.invoke(Api.getContextPath() + url, [args], {
-            headers: {
-                'Accept': 'application/json, */*',
-                'Content-Type': 'application/json',
-                'cache': 'default',
-                'x-ajax': 'true'
-            }
-        })
-    }
-
-    private static invoke<T = any>(url: string, args: any = {}, config?: any): Promise<T> {
-        return request.invoke(Api.getContextPath() + url, [args], config)
-    }
-
-    /**
-     * 获取资源信息
-     * @param resourceId
-     */
-    public static async getResourceById(resourceId) {
-        const params = {pageCode: resourceId};
-        return Api.request(ApiUrlConstant.getResourceByIdUrl, params);
-    }
-
-    /**
-     * 预览模板
-     * @param templateJson
-     * @param templateParams
-     * @param callback
-     */
-    public static async previewTemplate(templateJson, templateParams, callback) {
-        console.log('templateJson >>>', templateJson)
-        const params = {templateJson, ...templateParams}
-        return Api.invoke(ApiUrlConstant.previewTemplateUrl, params, {
-            headers: {
-                'Accept': 'application/json, */*',
-                'Content-Type': 'application/json',
-                'cache': 'default',
-                'x-ajax': 'true'
-            },
-            'responseType': 'blob',
-            afterResponse: callback
-        });
-    }
+export {
+    CommonApi,
+    PrintTemplateParamApi
 }

src/components/YvanPrintDataSource.vue

@@ -11,8 +11,29 @@
                   :data-code="element.code"
                   draggable="true">
                 <div class="yvan-print-datasource__button">
-                  <i :class="element.icon" v-if="element?.icon"/>
-                  <span> {{ element.name }}</span>
+                  <div>
+                    <i :class="element.icon" v-if="element?.icon"/>
+                    <span>{{ element.name }}</span>
+                  </div>
+                  <div style="font-size: 10px;">{{ element.code }}</div>
+                </div>
+              </div>
+            </el-space>
+          </div>
+        </el-collapse-item>
+
+        <el-collapse-item v-for="dataSource in dataSources" :title="dataSource.paramName" :name="dataSource.paramKey">
+          <div class="yvan-print-datasource__collapse_item">
+            <el-space wrap @dragstart="handleDragStartForFunction">
+              <div
+                  v-for="field in dataSource.fields"
+                  :key="field.field"
+                  :data-code="field.field"
+                  draggable="true">
+                <div class="yvan-print-datasource__button">
+                  <!--<i :class="element.icon" v-if="element?.icon"/>-->
+                  <div> {{ field.fieldLabel }}</div>
+                  <div style="font-size: 10px;">{{ field.field }}</div>
                 </div>
               </div>
             </el-space>
@@ -49,7 +70,7 @@ export default {
   },
   computed: {
     ...mapState(globalStore, {
-      // isNightMode: (state) => state.nightMode.isNightMode
+      dataSources: (state) => state.dataSources
     }),
     asideStyle() {
       return this.showRight ? 'width: 300px' : 'width: 65px'
@@ -59,6 +80,7 @@ export default {
     handleDragStartForFunction(e) {
       e.dataTransfer.setData(Constant.DATASOURCE_DRAG_KEY, e.target.dataset.code)
     },
+
   },
   mounted() {
 

src/components/YvanPrintDesigner.vue

@@ -49,8 +49,8 @@
 </template>
 
 <script>
-import Api from '@/api'
-import System from  '@/utils/system'
+import {CommonApi} from '@/api'
+import System from '@/utils/system'
 import {mapState, mapActions} from "pinia";
 import {globalStore, modeStore} from "@/store";
 import YvanPrintContainer from "@/components/yvan-ui/YvanPrintContainer.vue";
@@ -185,23 +185,31 @@ export default {
 
     },
     exportJSON() {
-      let eleA = document.createElement('a')
-      eleA.download = `${this.pageConfig.title + "_" + Date.now()}.json`
-      eleA.style.display = 'none'
-      const saveData = this.getTemplateJSON()
-      const blob = new Blob([JSON.stringify(saveData)])
-      eleA.href = URL.createObjectURL(blob)
-      document.body.appendChild(eleA)
-      eleA.click()
-      document.body.removeChild(eleA)
-      // window['system'].toast('导出成功！', 'success')
+      const loadingId = System.loading();
+      try {
+        let eleA = document.createElement('a')
+        eleA.download = `${this.pageConfig.title + "_" + Date.now()}.json`
+        eleA.style.display = 'none'
+        const saveData = this.getTemplateJSON()
+        const blob = new Blob([JSON.stringify(saveData)])
+        eleA.href = URL.createObjectURL(blob)
+        document.body.appendChild(eleA)
+        eleA.click()
+        document.body.removeChild(eleA)
+        System.alert('导出成功！', 'success')
+      } catch (e) {
+        System.alert('导出失败！', 'error')
+      } finally {
+        System.unloading(loadingId);
+      }
     },
     uploadTemplate() {
 
     },
     previewTemplate() {
       const saveData = this.getTemplateJSON();
-      Api.previewTemplate(JSON.stringify(saveData), {}, (res) => {
+      const loadingId = System.loading();
+      CommonApi.previewTemplate(JSON.stringify(saveData), {}, (res) => {
         if (res.status === 200) {
           let URL = window.URL || window.webkitURL;
           const url = URL.createObjectURL(res.data);
@@ -209,7 +217,9 @@ export default {
           return;
         }
         System.toast("打印模板预览异常, 请稍后再试")
-      }).finally();
+      }).finally(() => {
+        System.unloading(loadingId);
+      });
     },
     getTemplateJSON() {
       const saveData = {

src/components/config/globalConfig.ts

@@ -334,7 +334,7 @@ export const functionList = [
     },
     {
         icon: 'fa fa-calendar-check-o',
-        code: 'time',
+        code: 'currentTime',
         name: '当前时间',
         component: 'YvanRichText',
         propValue: '',

src/initialize.ts

@@ -1,15 +1,37 @@
+import {globalStore} from "@/store";
+import {PrintTemplateParamApi} from "@/api";
 import * as Icons from '@ant-design/icons-vue';
 import ElementUtils from "@/utils/ElementUtils";
-import BusinessDesignExtractor from "@/utils/BusinessDesignExtractor";
 
 export default {
-    install: (app, options) => {
+    install: async (app, options) => {
         for (const i in Icons) {
             app.component(i, Icons[i])
         }
         ElementUtils.initElementBandCode();
-        BusinessDesignExtractor.getComponentVJson('314300107333828791').then((vjson) => {
-            console.log('vjson >>>', vjson)
-        });
+        const printTemplateParamList = await PrintTemplateParamApi.getPrintTemplateParamList('178746772213465144');
+        console.log('printTemplateParamList >> ', printTemplateParamList)
+        for (let printTemplateParam of printTemplateParamList) {
+            const datasource = {
+                paramId: printTemplateParam.print_template_param_id,
+                paramName: printTemplateParam.param_name,
+                paramKey: printTemplateParam.param_key,
+                paramType: printTemplateParam.param_type,
+                paramValue: printTemplateParam.param_value,
+                fields: []
+            }
+            const paramFields = JSON.parse(printTemplateParam.param_detail)
+            for (let field of paramFields) {
+                datasource.fields.push({
+                    field: field.field,
+                    fieldLabel: field.field_label,
+                    fieldDict: field.field_dict,
+                    formatter: field.formatter,
+                    expression: field.expression
+                })
+            }
+            globalStore().addDataSource(datasource);
+        }
+        console.log('datasource >> ', globalStore().dataSources)
     }
 }

src/store/global.ts

@@ -53,7 +53,7 @@ export const globalStore = defineStore('global', {
             componentData: [],
             elementBands: new Map(),
             elementBandCodes: [],
-            dataSource: [],
+            dataSources: [],
             dataset: {},
             curComponent: null,
             curTableCell: null,
@@ -106,7 +106,6 @@ export const globalStore = defineStore('global', {
         setPageSize({pageWidth, pageHeight}) {
             this.pageConfig.pageWidth = pageWidth
             this.pageConfig.pageHeight = pageHeight
-            // console.log('w, h', pageWidth, pageHeight)
             ruleStore().setRect({pageWidth, pageHeight})
             ruleStore().setReDrawRuler()
         },
@@ -193,12 +192,12 @@ export const globalStore = defineStore('global', {
             }
         },
 
-        setDataSource(state, dataSource) {
-            state.dataSource = dataSource
+        addDataSource(dataSource) {
+          this.dataSources.push(dataSource);
         },
 
-        setDataSet(state, dataSet) {
-            state.dataSet = dataSet
+        setDataSet(dataset) {
+            this.dataset = dataset
         },
 
         setCurTableSettingId(state, id) {

src/utils/BusinessDesignExtractor.ts

@@ -1,40 +1,40 @@
-import Api from "@/api";
-import lodash from 'lodash';
-
-export default class BusinessDesignExtractor {
-
-    private static readonly BUSINESS_DESIGN_BASIC_PATH: string = '/node_modules/wms-ui-pc/src/pages/';
-
-    private static readonly BUSINESS_DESIGN_SUFFIX: string = '.design.js';
-
-    /**
-     * 通过动态import design.js 可以获取vjson, 解析vjson数据aggrid column列表, 获取表格字段&数据源
-     * @param menuId
-     */
-    public static async getComponentVJson(menuId) {
-        const resource = await Api.getResourceById(menuId)
-        if (!resource || !resource?.data) {
-            return {};
-        }
-        const design = await import(BusinessDesignExtractor.getDesignJsPath(resource?.data?.menu_url));
-        if (!design) {
-            return {};
-        }
-        if (lodash.isFunction(design?.default?.data)) {
-            return design.default.data().vjson || {};
-        }
-        return {};
-    }
-
-    private static getDesignJsPath(designPath) {
-        return BusinessDesignExtractor.BUSINESS_DESIGN_BASIC_PATH + designPath + BusinessDesignExtractor.BUSINESS_DESIGN_SUFFIX;
-    }
-
-    private static extractColumn(){
-
-    }
-
-    private static extractDatasource(){
-
-    }
-}
+// import {CommonApi} from "@/api";
+// import lodash from 'lodash';
+//
+// export default class BusinessDesignExtractor {
+//
+//     private static readonly BUSINESS_DESIGN_BASIC_PATH: string = '/node_modules/wms-ui-pc/src/pages/';
+//
+//     private static readonly BUSINESS_DESIGN_SUFFIX: string = '.design.js';
+//
+//     /**
+//      * 通过动态import design.js 可以获取vjson, 解析vjson数据aggrid column列表, 获取表格字段&数据源
+//      * @param menuId
+//      */
+//     public static async getComponentVJson(menuId) {
+//         const resource = await CommonApi.getResourceById(menuId)
+//         if (!resource || !resource?.data) {
+//             return {};
+//         }
+//         const design = await import(BusinessDesignExtractor.getDesignJsPath(resource?.data?.menu_url));
+//         if (!design) {
+//             return {};
+//         }
+//         if (lodash.isFunction(design?.default?.data)) {
+//             return design.default.data().vjson || {};
+//         }
+//         return {};
+//     }
+//
+//     private static getDesignJsPath(designPath) {
+//         return BusinessDesignExtractor.BUSINESS_DESIGN_BASIC_PATH + designPath + BusinessDesignExtractor.BUSINESS_DESIGN_SUFFIX;
+//     }
+//
+//     private static extractColumn(){
+//
+//     }
+//
+//     private static extractDatasource(){
+//
+//     }
+// }

src/utils/ElementUtils.ts

@@ -30,6 +30,7 @@ export default class ElementUtils {
             return;
         }
         for (let index in elementBands) {
+            // const elementBand = elementBands[index];
             globalStore().setElementBandCode({
                 elementBandIdx: index,
                 elementBandCode: Constant.NONE

src/utils/system.ts

@@ -1,13 +1,17 @@
 import {h} from "vue";
 import {nanoid} from "nanoid";
-import {ElIcon} from "element-plus";
 import * as FaIcon from '@vicons/fa';
+import {ElIcon} from "element-plus";
+import {ElLoading} from 'element-plus'
+import {ElMessage} from 'element-plus'
 import Constant from '@/utils/constant'
 import Toast from "@/components/yvan-ui/yvan-print-toast"
 import Dialog from "@/components/yvan-ui/yvan-print-dialog"
 
 class System {
 
+    private loadingStack = new Map();
+
     public getUuid(length = 8) {
         return nanoid(length)
     }
@@ -31,6 +35,35 @@ class System {
         return () => h(ElIcon, null, {default: () => h(FaIcon[iconName])});
     }
 
+    public loading(): string {
+        const loadingId = nanoid();
+        this.loadingStack.set(loadingId, ElLoading.service({
+            lock: true,
+            text: '加载中...',
+            background: 'rgba(0, 0, 0, 0.7)',
+        }))
+        return loadingId;
+    }
+
+    public unloading(loadingId: string): void {
+        if (!loadingId) {
+            return;
+        }
+        const loading = this.loadingStack.get(loadingId)
+        if (loading !== undefined) {
+            loading.close();
+        }
+    }
+
+    public alert(message: string = '', type: "" | "success" | "warning" | "error" | "info" = 'info', duration: number = 3000): void {
+        ElMessage({
+            grouping: true,
+            message: message,
+            type: type,
+            duration: duration
+        })
+    }
+
     /**
      * 打开对话框
      * @param fileUrl       转向网页的地址;