ocpview-plus 1.3.15 → 1.3.17

package/src/components/form/formbox.vue

@@ -1,29 +1,29 @@
-<template> 
-<div>
-    <Form ref="form" :model="form" :rules="formRules" :label-position="myConfig.labelPosition" :label-width="myConfig.labelWidth" :inline="myConfig.inline" :id="myConfig.name" @submit.enter.prevent>
-        <Row type="flex" justify="start">
-            <template v-for="(item,index) in items"  :key="'form'+index">
-            <Col v-if="item.status" :span="initFormItemCol(index)" v-show="item.visible !== false" >
-                <FormItem v-if="item.type !== 'Divider' && item.status && item.visible !== false" :label="item.label" :prop="item.name||item.sname"  :style="getFormItemStyle(item)" :show-message="false">
-                    <ControlBox  :ref="item.name||item.sname"  :valueData="form" :config="item" @inputValue="input"   @doAction="doAction" ></ControlBox>
-                </FormItem>
-                <ControlBox  v-if="item.type === 'Divider'" :ref="item.dividerName" :config="item"></ControlBox>
-            </Col>
-            </template>
-        </Row>
-    </Form>
-</div>
-</template>
-<script>
-    import Base from './baseform.vue';
-    export default {
-        name: 'FormBox',
-        extends: Base,
-        created () {
-            this.init();
-        },
-        methods:{
-            
-        }
-    };
+<template> 
+<div>
+    <Form ref="form" :model="form" :rules="formRules" :label-position="myConfig.labelPosition" :label-width="myConfig.labelWidth" :inline="myConfig.inline" :id="myConfig.name" @submit.enter.prevent>
+        <Row type="flex" justify="start">
+            <template v-for="(item,index) in items"  :key="'form'+index">
+            <Col v-if="item.status" :span="initFormItemCol(index)" v-show="item.visible !== false" >
+                <FormItem v-if="item.type !== 'Divider' && item.status && item.visible !== false" :label="item.label" :prop="item.name||item.sname"  :style="getFormItemStyle(item)" :show-message="false">
+                    <ControlBox  :ref="item.name||item.sname"  :valueData="form" :config="item" @inputValue="input"   @doAction="doAction" ></ControlBox>
+                </FormItem>
+                <ControlBox  v-if="item.type === 'Divider'" :ref="item.dividerName" :config="item"></ControlBox>
+            </Col>
+            </template>
+        </Row>
+    </Form>
+</div>
+</template>
+<script>
+    import Base from './baseform.vue';
+    export default {
+        name: 'FormBox',
+        extends: Base,
+        created () {
+            this.init();
+        },
+        methods:{
+            
+        }
+    };
 </script>

package/src/components/form/formcardbox.vue

@@ -1,268 +1,268 @@
-<template>
-  <Card
-    :padding="0"
-    :bordered="myConfig.bordered"
-    :dis-hover="myConfig.disHover"
-    :class="cardClass"
-  >
-    <template #title>
-    <p v-if="showTitle" :style="pStyle" @click="toggle">
-      <span :class="titleClass" v-text="myConfig.title" />
-      <Icon
-        v-if="myConfig.hide"
-        class="efuture-title-icon"
-        :style="iconStyle"
-        type="ios-arrow-forward"
-      />
-    </p>
-    </template>
-    <template #extra>
-    <div v-if="$slots.btn">
-      <slot name="btn"></slot>
-    </div>
-    <div v-else>
-      <a
-        v-if="showBtn && editFlag && !btnReadOnly"
-        href="#"
-        @click.prevent="editForm"
-      >{{myConfig.editBtnText}}</a>
-      <span v-if="showBtn && editFlag && btnReadOnly">{{myConfig.editBtnText}}</span>
-      <a
-        v-if="showBtn && !editFlag && saveFlag"
-        style="margin-left: 10px;"
-        href="#"
-        @click.prevent="saveForm"
-      >{{myConfig.saveBtnText}}</a>
-      <a
-        v-if="showBtn && !editFlag"
-        style="margin-left: 10px;"
-        href="#"
-        @click.prevent="cancelForm"
-      >{{myConfig.cancelBtnText}}</a>
-    </div>
-    </template>
-    <div v-show="showForm" :style="myConfig.divStyle">
-      <Form
-        ref="form"
-        :model="form"
-        :rules="formRules"
-        :label-position="myConfig.labelPosition"
-        :label-width="myConfig.labelWidth"
-        :inline="myConfig.inline"
-        :id="myConfig.name"
-        @submit.enter.prevent
-      >
-        <Row type="flex" justify="start">
-          <template  v-for="(item,index) in items" :key="'form_' + index">
-          <Col
-            v-if="item.status"
-            :span="initFormItemCol(index)"
-            v-show="item.visible !== false"
-          >
-            <FormItem
-              v-if="item.type !== 'Divider' && item.status && item.visible !== false"
-              :label="item.label"
-              :prop="item.name||item.sname"
-              :style="getFormItemStyle(item)"
-              :show-message="false"
-            >
-              <ControlBox
-                :ref="item.name||item.sname"
-                :valueData="form"
-                :config="item"
-                @inputValue="input"
-                @doAction="doAction"
-              ></ControlBox>
-            </FormItem>
-            <ControlBox v-if="item.type === 'Divider'" :ref="item.dividerName"  :config="item"></ControlBox>
-          </Col>
-          </template>
-        </Row>
-      </Form>
-    </div>
-  </Card>
-</template>
-<script>
-import Base from './baseform.vue';
-export default {
-    name: 'FormCardBox',
-    extends: Base,
-    data() {
-        return {
-            myConfig: {
-                hide: true,
-                titleType: 1,
-                editBtnText: '编辑',
-                saveBtnText: '保存',
-                cancelBtnText: '放弃',
-                showBtn: true,
-                bordered: true,
-                disHover: false,
-                showSubSpecialStyle: false,
-                divStyle: 'padding:16px',
-            },
-            btnReadOnly: false,
-            showBtn: true,
-            showForm: true,
-            showTitle: true,
-            editFlag: false,
-            saveFlag: false,
-            cancelFlag: false,
-            pStyle: '',
-            iconStyle: '',
-        };
-    },
-    created() {
-        this.init();
-    },
-    computed: {
-        cardClass() {
-             if (this.myConfig.showSubSpecialStyle) {
-                return (`efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title' +  ` efuture-card-extra-title-${this.myConfig.titleType}`);
-            } else {
-                if (!this.showForm) {
-                    return ( `efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title-nobottom' +  ` efuture-card-extra-title-${this.myConfig.titleType}`);
-                } else {
-                    return `efuture-card-head-title-${this.myConfig.titleType}` + ` efuture-card-extra-title-${this.myConfig.titleType}`;
-                }
-            }
-        },
-        titleClass() {
-            return `efuture-title-font-${this.myConfig.titleType}`;
-        },
-    },
-    methods: {
-    
-        customInit() {
-            if (this.myConfig.hide) {
-                this.pStyle = 'cursor:pointer';
-                this.iconStyle = 'transform: rotate(90deg)';
-            }
-            if (!this.myConfig.title) {
-                if (this.myConfig.titleType !== 1) {
-                    this.showTitle = true;
-                } else {
-                    this.showTitle = false;
-                }
-            }
-
-            if (this.myConfig.readOnly !== undefined) {
-                this.readOnly = this.myConfig.readOnly;
-            }
-            if (this.myConfig.titleType !== 1) {
-                if (this.config.hide === undefined) {
-                    this.myConfig.hide = false;
-                }
-                if (this.config.bordered === undefined) {
-                    this.myConfig.bordered = false;
-                }
-                if (this.config.disHover === undefined) {
-                    this.myConfig.disHover = true;
-                }
-            }
-            this.showBtn = this.myConfig.showBtn;
-            if (this.myConfig.cancelBtn !== undefined) {
-                this.cancelFlag = this.myConfig.cancelBtn;
-            }
-     // let _this = this;
-     // document.addEventListener("keydown", _this.watchEnter);  
-        },
-        setFormReadOnly(value) {
-            this.editFlag = value;
-            if (!this.myConfig.items || this.myConfig.items.length === 0) {
-                return false;
-            }
-            let self = this;
-            this.myConfig.items.forEach(el => {
-                let name = '';
-                if (el.name) {
-                    name = el.name;
-                } else if (el.sname) {
-                    name = el.sname;
-                }
-                if (!value) {
-                    if (this.myConfig.cellbeginedit) {
-                        let obj = {};
-                        obj.name = name;
-                        obj.form = this.$Method.copy(this.form);
-                        obj.formObject = self;
-                        let flag = this.myConfig.cellbeginedit(obj);
-                        if (flag) {
-                            this.setReadOnly(name, value);
-                        } else {
-                            this.setReadOnly(name, !value);
-                        }
-                    } else {
-                        this.setReadOnly(name, value);
-                    }
-                } else {
-                    this.setReadOnly(name, value);
-                }
-            });
-        },
-        editForm() {
-            let flag = true;
-            if (this.myConfig.editObjectBefore) {
-                flag = this.myConfig.editObjectBefore(this.myConfig.name);
-            }
-            if (flag) {
-                this.setFormReadOnly(false);
-                let obj = {};
-                obj.name = 'editForm';
-                obj.formname = this.myConfig.name;
-                this.$emit('doAction', obj);
-            }
-        },
-        cancelForm() {
-            this.setData(this.oldForm);
-            this.setFormReadOnly(true);
-            let obj = {};
-            obj.name = 'cancelForm';
-            obj.formname = this.myConfig.name;
-            this.$emit('doAction', obj);
-        },
-        saveForm() {
-            this.checkValidate();
-            if (this.errorFlag) {
-                return false;
-            }
-            this.setFormReadOnly(true);
-            let obj = {};
-            obj.name = 'saveForm';
-            obj.formname = this.myConfig.name;
-            obj.para = this.getData();
-            this.$emit('doAction', obj);
-        },
-        toggle() {
-            if (this.myConfig.hide) {
-                this.showForm = !this.showForm;
-                this.setTitleStyle();
-                this.$nextTick(() => {
-                    this.$emit('on-open-change',this.showForm);
-                });
-        
-            }
-        },
-        setShowForm(value) {
-            this.showForm = value;
-            this.setTitleStyle();
-        },
-        setTitleStyle() {
-            if (this.showForm) {
-                this.iconStyle = 'transform: rotate(90deg)';
-            } else {
-                this.iconStyle = '';
-            }
-        },
-        isEdit() {
-            return this.editFlag;
-        },
-        setShowBtn(value) {
-            this.showBtn = value;
-        },
-        setBtnReadOnly(value) {
-            this.btnReadOnly = value;
-        },
-    },
-};
+<template>
+  <Card
+    :padding="0"
+    :bordered="myConfig.bordered"
+    :dis-hover="myConfig.disHover"
+    :class="cardClass"
+  >
+    <template #title>
+    <p v-if="showTitle" :style="pStyle" @click="toggle">
+      <span :class="titleClass" v-text="myConfig.title" />
+      <Icon
+        v-if="myConfig.hide"
+        class="efuture-title-icon"
+        :style="iconStyle"
+        type="ios-arrow-forward"
+      />
+    </p>
+    </template>
+    <template #extra>
+    <div v-if="$slots.btn">
+      <slot name="btn"></slot>
+    </div>
+    <div v-else>
+      <a
+        v-if="showBtn && editFlag && !btnReadOnly"
+        href="#"
+        @click.prevent="editForm"
+      >{{myConfig.editBtnText}}</a>
+      <span v-if="showBtn && editFlag && btnReadOnly">{{myConfig.editBtnText}}</span>
+      <a
+        v-if="showBtn && !editFlag && saveFlag"
+        style="margin-left: 10px;"
+        href="#"
+        @click.prevent="saveForm"
+      >{{myConfig.saveBtnText}}</a>
+      <a
+        v-if="showBtn && !editFlag"
+        style="margin-left: 10px;"
+        href="#"
+        @click.prevent="cancelForm"
+      >{{myConfig.cancelBtnText}}</a>
+    </div>
+    </template>
+    <div v-show="showForm" :style="myConfig.divStyle">
+      <Form
+        ref="form"
+        :model="form"
+        :rules="formRules"
+        :label-position="myConfig.labelPosition"
+        :label-width="myConfig.labelWidth"
+        :inline="myConfig.inline"
+        :id="myConfig.name"
+        @submit.enter.prevent
+      >
+        <Row type="flex" justify="start">
+          <template  v-for="(item,index) in items" :key="'form_' + index">
+          <Col
+            v-if="item.status"
+            :span="initFormItemCol(index)"
+            v-show="item.visible !== false"
+          >
+            <FormItem
+              v-if="item.type !== 'Divider' && item.status && item.visible !== false"
+              :label="item.label"
+              :prop="item.name||item.sname"
+              :style="getFormItemStyle(item)"
+              :show-message="false"
+            >
+              <ControlBox
+                :ref="item.name||item.sname"
+                :valueData="form"
+                :config="item"
+                @inputValue="input"
+                @doAction="doAction"
+              ></ControlBox>
+            </FormItem>
+            <ControlBox v-if="item.type === 'Divider'" :ref="item.dividerName"  :config="item"></ControlBox>
+          </Col>
+          </template>
+        </Row>
+      </Form>
+    </div>
+  </Card>
+</template>
+<script>
+import Base from './baseform.vue';
+export default {
+    name: 'FormCardBox',
+    extends: Base,
+    data() {
+        return {
+            myConfig: {
+                hide: true,
+                titleType: 1,
+                editBtnText: '编辑',
+                saveBtnText: '保存',
+                cancelBtnText: '放弃',
+                showBtn: true,
+                bordered: true,
+                disHover: false,
+                showSubSpecialStyle: false,
+                divStyle: 'padding:16px',
+            },
+            btnReadOnly: false,
+            showBtn: true,
+            showForm: true,
+            showTitle: true,
+            editFlag: false,
+            saveFlag: false,
+            cancelFlag: false,
+            pStyle: '',
+            iconStyle: '',
+        };
+    },
+    created() {
+        this.init();
+    },
+    computed: {
+        cardClass() {
+             if (this.myConfig.showSubSpecialStyle) {
+                return (`efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title' +  ` efuture-card-extra-title-${this.myConfig.titleType}`);
+            } else {
+                if (!this.showForm) {
+                    return ( `efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title-nobottom' +  ` efuture-card-extra-title-${this.myConfig.titleType}`);
+                } else {
+                    return `efuture-card-head-title-${this.myConfig.titleType}` + ` efuture-card-extra-title-${this.myConfig.titleType}`;
+                }
+            }
+        },
+        titleClass() {
+            return `efuture-title-font-${this.myConfig.titleType}`;
+        },
+    },
+    methods: {
+    
+        customInit() {
+            if (this.myConfig.hide) {
+                this.pStyle = 'cursor:pointer';
+                this.iconStyle = 'transform: rotate(90deg)';
+            }
+            if (!this.myConfig.title) {
+                if (this.myConfig.titleType !== 1) {
+                    this.showTitle = true;
+                } else {
+                    this.showTitle = false;
+                }
+            }
+
+            if (this.myConfig.readOnly !== undefined) {
+                this.readOnly = this.myConfig.readOnly;
+            }
+            if (this.myConfig.titleType !== 1) {
+                if (this.config.hide === undefined) {
+                    this.myConfig.hide = false;
+                }
+                if (this.config.bordered === undefined) {
+                    this.myConfig.bordered = false;
+                }
+                if (this.config.disHover === undefined) {
+                    this.myConfig.disHover = true;
+                }
+            }
+            this.showBtn = this.myConfig.showBtn;
+            if (this.myConfig.cancelBtn !== undefined) {
+                this.cancelFlag = this.myConfig.cancelBtn;
+            }
+     // let _this = this;
+     // document.addEventListener("keydown", _this.watchEnter);  
+        },
+        setFormReadOnly(value) {
+            this.editFlag = value;
+            if (!this.myConfig.items || this.myConfig.items.length === 0) {
+                return false;
+            }
+            let self = this;
+            this.myConfig.items.forEach(el => {
+                let name = '';
+                if (el.name) {
+                    name = el.name;
+                } else if (el.sname) {
+                    name = el.sname;
+                }
+                if (!value) {
+                    if (this.myConfig.cellbeginedit) {
+                        let obj = {};
+                        obj.name = name;
+                        obj.form = this.$Method.copy(this.form);
+                        obj.formObject = self;
+                        let flag = this.myConfig.cellbeginedit(obj);
+                        if (flag) {
+                            this.setReadOnly(name, value);
+                        } else {
+                            this.setReadOnly(name, !value);
+                        }
+                    } else {
+                        this.setReadOnly(name, value);
+                    }
+                } else {
+                    this.setReadOnly(name, value);
+                }
+            });
+        },
+        editForm() {
+            let flag = true;
+            if (this.myConfig.editObjectBefore) {
+                flag = this.myConfig.editObjectBefore(this.myConfig.name);
+            }
+            if (flag) {
+                this.setFormReadOnly(false);
+                let obj = {};
+                obj.name = 'editForm';
+                obj.formname = this.myConfig.name;
+                this.$emit('doAction', obj);
+            }
+        },
+        cancelForm() {
+            this.setData(this.oldForm);
+            this.setFormReadOnly(true);
+            let obj = {};
+            obj.name = 'cancelForm';
+            obj.formname = this.myConfig.name;
+            this.$emit('doAction', obj);
+        },
+        saveForm() {
+            this.checkValidate();
+            if (this.errorFlag) {
+                return false;
+            }
+            this.setFormReadOnly(true);
+            let obj = {};
+            obj.name = 'saveForm';
+            obj.formname = this.myConfig.name;
+            obj.para = this.getData();
+            this.$emit('doAction', obj);
+        },
+        toggle() {
+            if (this.myConfig.hide) {
+                this.showForm = !this.showForm;
+                this.setTitleStyle();
+                this.$nextTick(() => {
+                    this.$emit('on-open-change',this.showForm);
+                });
+        
+            }
+        },
+        setShowForm(value) {
+            this.showForm = value;
+            this.setTitleStyle();
+        },
+        setTitleStyle() {
+            if (this.showForm) {
+                this.iconStyle = 'transform: rotate(90deg)';
+            } else {
+                this.iconStyle = '';
+            }
+        },
+        isEdit() {
+            return this.editFlag;
+        },
+        setShowBtn(value) {
+            this.showBtn = value;
+        },
+        setBtnReadOnly(value) {
+            this.btnReadOnly = value;
+        },
+    },
+};
 </script>