ocpview-plus 0.0.1

package/src/components/form/formcardbox.vue

@@ -0,0 +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;
+        },
+    },
+};
+</script>

package/src/components/form/formcardgroupbox.vue

@@ -0,0 +1,252 @@
+<template>
+<Card :padding="0"  style="background:#eee;" :bordered="myConfig.bordered" :dis-hover="myConfig.disHover" :class="cardClass" >
+    <template  v-if="showTitle"  #title>
+    <p :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>
+        <a  v-if="myConfig.showBtn && editFlag" href="#" @click.prevent="editForm">{{myConfig.editBtnText}} </a> 
+        <a  v-if="myConfig.showBtn && !editFlag"  style="margin-left: 10px;" href="#" @click.prevent="saveForm">{{myConfig.saveBtnText}} </a> 
+     </template>
+    <div v-show="showForm" style="padding:0px">
+         <FormCardBox v-for="(item) in myConfig.items"  :ref="item.name" :key="item.name" :config="item" :dictData="dictData" style="margin-bottom: 10px;"  @doAction="doAction"/>
+    </div>
+</Card>  
+</template>
+
+<script>
+import FormCardBox from './formcardbox.vue';
+export default {
+    name:'formcardgroupbox',
+    components:{
+        FormCardBox
+    },
+    data () {
+        return {
+            myConfig:{
+                title:'',
+                titleType:1,
+                hide:true,
+                showBtn:true,
+                editBtnText:'编辑',
+                saveBtnText:'保存',
+            },
+            showForm:true,
+            editFlag:false,
+            showTitle:false,
+            iconStyle:'',
+            pStyle:''
+        };
+    },
+    created () {
+        this.init();
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        dictData: {
+            type: Object,
+            default:null
+        }
+    },
+    computed: {
+        titleClass () {
+            return `efuture-title-font-${this.myConfig.titleType}`;
+        },
+        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}`;
+                }
+            }
+        }
+    },
+    methods:{
+        init (){
+            this.myConfig = Object.assign({},this.myConfig,this.config);
+            if (this.myConfig.items) {
+                this.myConfig.items.forEach((el, index) => {
+                    if (el.showBtn === undefined) {
+                        el.showBtn = false;
+                    }
+                    el.titleType = 2;
+                    if (!el.name) {
+                        el.name = 'form_' + index;
+                    }
+                });
+            }
+            if (this.myConfig.title) {
+                this.showTitle = true;
+            }
+            if (this.myConfig.hide) {
+                this.pStyle = 'cursor:pointer;#e3e5e8';
+                this.iconStyle = 'transform: rotate(90deg)';
+            }    
+        },
+        toggle () {
+            if (this.myConfig.hide) {
+                this.showForm = !this.showForm;
+                this.setTitleStyle();
+            }
+        },
+        setShowForm(value) {
+            this.showForm = value;
+            this.setTitleStyle();
+        },
+        editForm () {
+            this.editFlag = false;
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].setFormReadOnly(false);
+                }
+            });
+            let obj = {};
+            obj.name = 'editForm';
+            this.$emit('doAction', obj);
+        },
+        saveForm () {
+            let flag = false;
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].checkValidate();
+                    if (this.$refs[el.name][0].errorFlag) {
+                        flag = true;
+                    }
+                }
+            });
+            if (!flag) {
+                this.editFlag = true;
+                this.myConfig.items.forEach(el => {
+                    if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                        this.$refs[el.name][0].setFormReadOnly(true);
+                    }
+                });
+                let obj = {};
+                obj.name = 'editForm';
+                obj.para = this.getData();
+                this.$emit('doAction', obj);
+            }
+        },
+        getData () {
+            let obj = {};
+            this.myConfig.items.forEach((el,index) => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    if (index === 0) {
+                        Object.assign(obj, this.$refs[el.name][0].getData());
+                    } else {
+                        let data = this.$refs[el.name][0].getData();
+                        if (el.items) {
+                            el.items.forEach(el2 => {
+                                if (el2.name) {
+                                    obj[el2.name] = data[el2.name];
+                                }
+                                if (el2.sname) {
+                                    obj[el2.sname] = data[el2.sname];
+                                }
+                                if (el2.ename) {
+                                    obj[el2.ename] = data[el2.ename];
+                                }
+                                if (el2.textName) {
+                                    obj[el2.textName] = data[el2.textName];
+                                }
+                            });
+                        } 
+                    }
+                }
+            });
+            return obj;
+
+        },
+        setData (data) {
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].setData(data);
+                }
+            });
+        },
+        setTitleStyle () {
+            if (this.showForm) {
+                this.iconStyle = 'transform: rotate(90deg)';
+            } else {
+                this.iconStyle = '';
+            }
+        },
+        isChange () {
+            let flag = false;
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    if (!flag) {
+                        flag = this.$refs[el.name][0].isChange();
+                    }
+                   
+                }
+            });
+            return flag;
+        },
+        getForm(name) {
+            if (this.$refs[name] && this.$refs[name][0]) {
+                return this.$refs[name][0];
+            } else {
+                return null;
+            }
+        },
+        clearData () {
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].clearData();
+                   
+                }
+            });
+        },
+        setFormReadOnly (value) {
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].setFormReadOnly(value);
+                   
+                }
+            });
+        },
+        checkValidate() {
+            let flag = false;
+            this.editFlag = false;
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].checkValidate();
+                    flag = this.$refs[el.name][0].isError();
+                    if (flag) {
+                        this.editFlag = true;
+                    }
+                }
+            });
+        },
+        setBtnReadOnly(value) {
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].setBtnReadOnly(value);
+                }
+            });
+        },  
+        doAction(obj) {
+            this.$emit('doAction', obj);
+        },
+        isError() {
+            return this.editFlag;
+        },
+        setShowBtn(value) {
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].setShowBtn(value); 
+                }
+            });
+        }
+    }
+
+};
+</script>

package/src/components/form/formcompro.js

@@ -0,0 +1,19 @@
+export default {
+    name: 'formpcompro',
+    data () {
+        return {
+        };
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        dictData: {
+            type: Object,
+            default:null
+        }
+    },
+    methods:{
+    }
+};

package/src/components/form/formdetail.vue

@@ -0,0 +1,129 @@
+<template> 
+<div>
+    <Row type="flex" justify="start" >
+        <Col :span="leftSpan" v-show="leftShowFlag" style="margin-top: 20px">
+            <Affix>
+                <Toolbar ref="tool" :config="toolbarConfig" :fontplacement="fontplacement" @doAction="doAction" :showback="true" :checkBtn="true"></Toolbar>
+            </Affix>
+        </Col>
+        <Col :span="mainSpan">
+            <Row type="flex" justify="start"> 
+                <Col  style="margin-top: 18px;text-align:right;width:2%">
+                    <Affix>
+                        <Poptip v-show="!leftSpan" trigger="hover" placement="right" content="展开功能菜单栏"> 
+                            <CommonIcon type="_right" :size="1" @click="doShowLeft"> </CommonIcon>
+                        </Poptip>
+                        <Poptip v-show="leftSpan" trigger="hover" placement="right" content="收缩功能菜单栏">
+                             <CommonIcon type="_left" :size="1" @click="doHideLeft"> </CommonIcon>
+                        </Poptip>
+                    </Affix>
+                </Col>
+                <Col  style="width:98%">
+                    <Row>
+                    <Card :id="config.name">
+                        <template v-if="config.title !== undefined" #title>
+                        <p  v-if="config.title !== undefined">
+                            {{config.title}}
+                        </p>
+                        </template>    
+                         <FormBox ref="form" :config="config" :dictData="dictData"/>
+                    </Card>
+                    </Row>
+                    <Row style="margin-top: 10px">
+                     <Collapse simple v-model="showDetail">
+                        <Panel v-for="(detail,index) in config.detail" :key="detail.name+index" :id="detail.name" :name="detail.name" >
+                             {{detail.title}}
+                               <template  #content>
+                         <p>
+                              <EditGrid  :ref="detail.name" :config="detail" :dictData="dictData"> </EditGrid>
+                        </p>
+                        </template>
+                        </Panel>
+                    </Collapse>
+                    </Row>
+                </Col>
+            </Row>
+        </Col>
+        <Col :span="rightSpan" v-show="rightShowFlag">
+            <Affix>
+                <Anchor v-if="showAnchor" :affix="false" show-ink>
+                    <AnchorLink v-for="(item,index) in anchor" :key="'anchor_' + index" :href="item.href" :title="item.title"  >
+                        <AnchorLink style="margin-top: 20px;" v-for="(item2,index2) in item.children" :key="'anchor_child_' + index2" :href="item2.href" :title="item2.title"  /> 
+                    </AnchorLink>
+                </Anchor> 
+            </Affix>
+        </Col>
+    </Row>
+</div>
+</template>
+<script>
+    import toolAnchor from './toolanchor';
+    import Base from './workform.vue';
+    export default {
+        name: 'formdetail',
+        mixins: [toolAnchor],
+        extends: Base,
+        data (){
+            return {
+                alonePictureConfig:{
+                    type:'PictureBox',
+                    height:60,
+                    width:95,
+                    icon:'ios-cloud-upload',
+                    iconSize:42,
+                    iconColor:'#3399ff',
+                },  
+                showAlonePicture:false,
+                alonePictureValue:{},
+                hackReset:true,
+                toolbarConfig:{},
+                fontplacement:'right',
+                showAnchor:false,
+                anchor:[],
+                showDetail:[]
+            };
+        },
+       
+        methods:{
+            customInit() {
+                this.addAnchor(this.config.name,this.config.title);
+                this.showDetail = [];
+                if (this.config.detail) {
+                    this.config.detail.forEach(el => {
+                        this.addAnchor(el.name,el.title);
+                    });
+                }
+                if (this.anchor.length > 0) {
+                    this.showAnchor = true;
+                } else {
+                    this.showAnchor = false;
+                }
+            },
+        
+            reset() {
+                this.hackReset = false;
+                this.$nextTick(() => {
+                    this.hackReset = true;
+                });
+            },
+            addAnchor(href,title) {
+                let anchor = {};
+                anchor.href = '#'+href;
+                anchor.title = title;
+                anchor.children = [];
+                if (href && title) {
+                    this.anchor.push(anchor);
+                }
+            },
+            updateItemConfig(name, config) {
+                this.$refs.form.updateItemConfig(name, config);
+            },
+            updateItemsConfig(obj) {
+                this.$refs.form.updateItemsConfig(obj);
+            },
+            setRequired(name,value) {
+                this.$refs.form.setRequired(name, value);
+            }
+        }
+    };
+</script>