ocpview-pro 0.1.29 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocpview-pro",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "title": "ocpviewPlus",
   "description": "A high quality Service UI components Library with Vue.js",
   "homepage": "",

package/src/components/masterplate/billdetailform.vue

@@ -10,17 +10,15 @@
     </div>
     <Card  :padding="0" :bordered="false"  style="padding-top:0px;padding-left:16px;padding-right:16px;padding-bottom:14px;"  dis-hover>
         <div :id="headid" :style="style2" @scroll="handleScroll">
-            <div v-for="(item,index) in myConfig.formsConfig.items"  :id="item.divId"  :key="item.divId"   v-show="headVisible[index].visible">
-                <Formcard  :ref="item.name"   :config="item" :dictData="dictData"  @doAction="doAction" >
+            <div v-for="temp in renderItems" :key="temp.el.divId" :id="temp.el.divId" v-show="temp.isHead ? headVisible[temp.index].visible : detailVisible[temp.index].visible" >
+                <Formcard  v-if="temp.isHead" :ref="temp.el.name"   :config="temp.el" :dictData="dictData"  @doAction="doAction" >
                 </Formcard>
-             </div>
-            <div v-for="(temp2,index) in detailConfig.items" :key="temp2.divId" :id="temp2.divId" v-show="detailVisible[index].visible" >
-                <EditGridCardS  v-if="temp2.type === 'EditGridCard'" :ref="temp2.name" :config="temp2" :dictData="dictData" @doAction="doAction"/>
-                <DetailsBoxs  v-if="temp2.type === 'DetailsBox'" :ref="temp2.name"      :config="temp2" :dictData="dictData" @doAction="doAction"/>
-                <FormCardBox  v-if="temp2.type === 'FormCardBox'" :ref="temp2.name"     :config="temp2" :dictData="dictData"/>
-                <AppendixBoxs  v-if="temp2.type === 'AppendixBox'" :ref="temp2.name"   :config="temp2" :modulecode="modulecode" @doAction="doAction"/>
-                <FormCardBox2  v-if="temp2.type === 'FormCardBox2'" :ref="temp2.name"     :config="temp2" :dictData="dictData"/>
-                <AppendixBoxs2 v-if="temp2.type === 'AppendixBox2'" :ref="temp2.name"   :config="temp2" :dictData="dictData" :modulecode="modulecode" @handleSuccessAfter="handleSuccessAfter" @doAction="doAction"/>
+                <EditGridCardS  v-if="!temp.isHead && temp.el.type === 'EditGridCard'" :ref="temp.el.name" :config="temp.el" :dictData="dictData" @doAction="doAction"/>
+                <DetailsBoxs  v-if="!temp.isHead && temp.el.type === 'DetailsBox'" :ref="temp.el.name"      :config="temp.el" :dictData="dictData" @doAction="doAction"/>
+                <FormCardBox  v-if="!temp.isHead && temp.el.type === 'FormCardBox'" :ref="temp.el.name"     :config="temp.el" :dictData="dictData"/>
+                <AppendixBoxs  v-if="!temp.isHead && temp.el.type === 'AppendixBox'" :ref="temp.el.name"   :config="temp.el" :modulecode="modulecode" @doAction="doAction"/>
+                <FormCardBox2  v-if="!temp.isHead && temp.el.type === 'FormCardBox2'" :ref="temp.el.name"     :config="temp.el" :dictData="dictData"/>
+                <AppendixBoxs2 v-if="!temp.isHead && temp.el.type === 'AppendixBox2'" :ref="temp.el.name"   :config="temp.el" :dictData="dictData" :modulecode="modulecode" @handleSuccessAfter="handleSuccessAfter" @doAction="doAction"/>
             </div>
         </div>
     </Card>
@@ -123,7 +121,7 @@ export default {
                 el.modetype = modetype;
                 el.divId = 'headForm_' + this.getRandom() + '_' +  index;
                 this.headVisible.push({refname:el.name,visible:true});
-                this.anchorData.push({id:'#'+el.divId ,name:el.title ? this.$t(el.title) : el.title,visible:true,refname:el.name,isHead:true});
+                this.anchorData.push({id:'#'+el.divId ,name:el.title ? this.$t(el.title) : el.title,visible:true,refname:el.name,isHead:true,sort:el.sort === undefined ? 0 : el.sort});
             });
         }
 
@@ -164,7 +162,7 @@ export default {
                     }
                     el.divId = 'detail_'+ this.getRandom() + '_'+ index;
                     this.detailVisible.push({refname:el.name,visible:true});
-                    this.anchorData.push({id:'#'+ el.divId, name:el.title ? this.$t(el.title) : el.title,refname:el.name,visible:true,isHead:false});
+                    this.anchorData.push({id:'#'+ el.divId, name:el.title ? this.$t(el.title) : el.title,refname:el.name,visible:true,isHead:false,sort:el.sort === undefined ? Number.MAX_SAFE_INTEGER : el.sort});
                 });
             }
         }
@@ -185,7 +183,7 @@ export default {
             tmp.divId = 'detail_'+ this.getRandom() + '_'+ this.detailConfig.items.length;
             this.detailConfig.items.push(tmp);
             this.detailVisible.push({refname:tmp.name,visible:true});
-            this.anchorData.push({id:'#'+ tmp.divId, name:tmp.title ? this.$t(tmp.title) : tmp.title,refname:tmp.name,visible:true});
+            this.anchorData.push({id:'#'+ tmp.divId, name:tmp.title ? this.$t(tmp.title) : tmp.title,refname:tmp.name,visible:true,sort:Number.MAX_SAFE_INTEGER});
         } else if (this.billAppendixConfig.showAppendix2) {
             let tmp = Object.assign({}, {}, this.billAppendixConfig);
             tmp.type = 'AppendixBox2';
@@ -195,14 +193,34 @@ export default {
             tmp.divId = 'detail_'+ this.getRandom() + '_'+ this.detailConfig.items.length;
             this.detailConfig.items.push(tmp);
             this.detailVisible.push({refname:tmp.name,visible:true});
-            this.anchorData.push({id:'#'+ tmp.divId, name:tmp.title ? this.$t(tmp.title) : tmp.title,refname:tmp.name,visible:true});
+            this.anchorData.push({id:'#'+ tmp.divId, name:tmp.title ? this.$t(tmp.title) : tmp.title,refname:tmp.name,visible:true,sort:Number.MAX_SAFE_INTEGER});
         }
 
         if (this.myConfig.showAnchorLink !== undefined) {
             this.showAnchorLink = this.myConfig.showAnchorLink;
         }
+
+        // 锚点导航顺序与混排后的渲染顺序保持一致
+        this.anchorData.sort((a, b) => a.sort - b.sort);
     },
     computed:{
+        renderItems () {
+            // formsConfig.items 与 detailConfig.items 按 sort 升序混排；
+            // 未配置 sort 时 formsConfig 项视为 0、detailConfig 项视为最大值，保持 forms 在前 details 在后的现状
+            let heads = [];
+            let details = [];
+            if (this.myConfig.formsConfig && this.myConfig.formsConfig.items) {
+                heads = this.myConfig.formsConfig.items.map((el, index) => {
+                    return { el: el, index: index, isHead: true, sort: el.sort === undefined ? 0 : el.sort };
+                });
+            }
+            if (this.detailConfig.items) {
+                details = this.detailConfig.items.map((el, index) => {
+                    return { el: el, index: index, isHead: false, sort: el.sort === undefined ? Number.MAX_SAFE_INTEGER : el.sort };
+                });
+            }
+            return heads.concat(details).sort((a, b) => a.sort - b.sort);
+        },
         style2 () {
             let height = this.$Store.state.app.clientHeight;
             if (this.extraHeight) {

package/src/components/masterplate/formcard.vue

@@ -6,13 +6,21 @@
                     <Icon custom='iconfont icon-custom-pack' color="#f3b352" v-show="showForm" size="14" />
                     <Icon  v-show="!showForm" color="#f3b352" custom='iconfont icon-custom-spread' size="14"/>
                     <span style="margin-left:10px;font-size: 14px;font-weight:bold" v-text="myConfig.title ? $t(myConfig.title) : myConfig.title" />
+                    <div v-if="myConfig.titleExtraStatus || myConfig.titleExtraRender" style="margin-left:auto">
+                        <TitleExtra v-if="myConfig.titleExtraStatus" :render="titleExtraStatusRender" :params="getTitleExtraParams()" />
+                        <TitleExtra v-if="myConfig.titleExtraRender" :render="myConfig.titleExtraRender" :params="getTitleExtraParams()" />
+                    </div>
                 </Row>
             </p>
             <Divider style="margin-left:24px;margin-top:0px;margin-bottom:10px;"/>
         </template>
         <template v-if="myConfig.modetype === '2'">
-            <div style="margin-bottom:10px;">
+            <div :style="myConfig.titleExtraStatus || myConfig.titleExtraRender ? 'margin-bottom:10px;display:flex;align-items:center;' : 'margin-bottom:10px;'">
                 <span class="efuture-title-verticalline" /> <span style="font-size: 14px;font-weight:bold" v-text="myConfig.title ? $t(myConfig.title) : myConfig.title" />
+                <div v-if="myConfig.titleExtraStatus || myConfig.titleExtraRender" style="margin-left:auto">
+                    <TitleExtra v-if="myConfig.titleExtraStatus" :render="titleExtraStatusRender" :params="getTitleExtraParams()" />
+                    <TitleExtra v-if="myConfig.titleExtraRender" :render="myConfig.titleExtraRender" :params="getTitleExtraParams()" />
+                </div>
             </div>
         </template>
         <Form ref="form" class="efuture-tip-form" v-show="showForm" :model="form" :rules="formRules" :label-position="myConfig.labelPosition" :label-width="myConfig.labelWidth" :inline="myConfig.inline" :id="myConfig.name" @submit.enter.prevent>
@@ -31,9 +39,9 @@
                                     <ControlBox :ref="item.name||item.sname"  :valueData="form" :config="item" @inputValue="input"   @doAction="doAction" ></ControlBox>
                                     <template #content>
                                         <ControlBox  :ref="'effect_' + item.name||item.sname"  style="width:100%" :valueData="effectForm" :config="effectConfig(item)"  ></ControlBox>
-                                    </template>    
+                                    </template>
                                 </Poptip>
-                        </template>     
+                        </template>
                     </FormItem>
                     <ControlBox  v-if="item.type === 'Divider'"  :ref="item.dividerName"  :style="getDividerStyle" :config="item"></ControlBox>
                 </Col>
@@ -44,9 +52,15 @@
 </template>
 
 <script>
+import { h } from 'vue';
 import Base from '@/components/form/formbox.vue';
+
+// 标题右侧扩展的渲染包装：调用配置的 render 函数（函数式组件，无实例开销）
+const TitleExtra = (props) => props.render(h, props.params);
+
 export default {
     name:'mformcard',
+    components: { TitleExtra },
     extends: Base,
     data () {
         return {
@@ -63,6 +77,39 @@ export default {
         };
     },
     methods:{
+        getTitleExtraParams() {
+            return {
+                form: this.form,
+                dictData: this.dictData,
+                config: this.myConfig
+            };
+        },
+        titleExtraStatusRender(h, params) {
+            let statusConfig = params.config.titleExtraStatus;
+            if (!statusConfig.codeField) {
+                return null;
+            }
+            let status = params.form[statusConfig.codeField];
+            if (status === undefined || status === null || status === '') {
+                return null;
+            }
+            let dicts = statusConfig.dicts;
+            if (!Array.isArray(dicts)) {
+                dicts = statusConfig.dictKey ? (params.dictData && params.dictData[statusConfig.dictKey]) : null;
+            }
+            let codeKey = statusConfig.codeKey || 'code';
+            let nameKey = statusConfig.nameKey || 'name';
+            let tmp = Array.isArray(dicts) ? dicts.find(el => el[codeKey] === status) : null;
+            if (!tmp || !tmp[nameKey]) {
+                // 字典未命中或无字典来源时，降级直接显示状态编码
+                return h('span', String(status));
+            }
+            if (statusConfig.showCode) {
+                // [编码]名称 形式；编码不参与转义，仅对名称做多语言转义，避免拼接后词条匹配失效
+                return h('span', '[' + tmp[codeKey] + ']' + this.$t(tmp[nameKey]));
+            }
+            return h('span', this.$t(tmp[nameKey]));
+        },
         customInit() {
             if (this.myConfig.showEffectValue !== undefined) {
                 this.showEffectValue = this.myConfig.showEffectValue;
@@ -103,4 +150,4 @@ export default {
         }
     }
 };
-</script>
+</script>