ocpview-pro 0.1.29 → 0.1.30

package/package.json

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

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>