ocpview-plus 0.0.1

package/src/components/form/formdetailtwo.vue

@@ -0,0 +1,302 @@
+<template>
+    <Card :padding="0">
+        <FormCardBox  ref="form" :config="myConfig" :dictData="dictData" >
+            <template v-if="btnTypeValue === '1'" #btn>
+            <a   v-if="!editFlag && !readOnly" href="#" @click.prevent="edit">编辑</a> 
+            <a  style="margin-left: 10px;"  v-if="!editFlag && !readOnly"  href="#" @click.prevent="del">删除</a> 
+            </template>
+            <template v-else-if="btnTypeValue === '2'" #btn>
+                <a  href="#" @click.prevent="del">删除</a> 
+            </template>
+            <template v-else #btn>
+                <a   v-if="showBtn  && !btnReadOnly" href="#" @click.prevent="editStatic">编辑</a> 
+                <span v-if="showBtn && btnReadOnly" >编辑 </span>
+            </template>
+        </FormCardBox>
+        <div  v-if="showChildrenGrid">
+            <EditGridCard  ref="grid" :config="gridConfig"  :dictData="dictData"></EditGridCard>
+        </div>
+        <Row v-if="btnTypeValue === '1' && editFlag" type="flex" justify="center" align="middle" style="margin-top: 10px;margin-bottom: 10px;" :gutter="16">
+            <Col>
+                 <Button  type="primary" @click="save">录入完成</Button>
+                 <Button  style="margin-left: 20px;" @click="cancel">放弃</Button>
+            </Col>
+        </Row>
+    </Card>
+</template>
+
+<script>
+import FormCardBox from './formcardbox.vue';
+export default {
+    name:'formdetail',
+    components:{
+        FormCardBox
+    },
+    data () {
+        return {
+            editFlag:false,
+            showChildrenGrid:false,
+            girdFlag:false,
+            gridConfig:{},
+            myConfig:{},
+            readOnly:false,
+            showBtn:true,
+            btnReadOnly:false,
+            btnTypeValue:'1'
+        };
+    },
+    props:{
+        config:{
+            type:Object,
+            default:null
+        },
+        valueData:{
+            type:Object,
+            default () {
+                return {};
+            }
+        },
+        dictData: {
+            type: Object,
+            default:null
+        },
+        index:{
+            type:String,
+            default:''
+        },
+        isAdd:{
+            type:Boolean,
+            default:false
+        },
+        btnType:{
+            type:String,
+            default:'1'
+        },
+    },
+    created () {
+        this.init();
+    },
+    methods:{
+        init () {
+            if (this.isAdd) {
+                this.editFlag = true;
+            }
+            this.myConfig = Object.assign({},this.myConfig, this.config.formConfig);
+            this.myConfig.titleType = 2;
+            this.myConfig.showBtn = false;
+            this.myConfig.showSubSpecialStyle = true;
+            if (this.config.gridConfig !== undefined && this.config.gridConfig.items && this.config.gridConfig.items.length > 0) {
+                Object.assign(this.gridConfig, this.config.gridConfig);
+                this.gridConfig.showDelRow = true;
+                this.gridConfig.operFixedFlag = false;
+                this.gridConfig.showCheckBox = false;
+                this.gridConfig.showAddBtn = true;
+                this.gridConfig.showTitle = false;
+                this.gridConfig.addBtnType = '2';
+                this.gridConfig.titleType = 2;
+                this.gridConfig.addRowBefore = this.addRowBefore;
+                this.gridConfig.delRowBefore = this.delRowBefore;
+                this.gridConfig.tableSize = 'small';
+                this.gridConfig.showBorder = false;
+                //this.gridConfig.bordered = true;
+                this.showChildrenGrid = true;
+                if (this.gridConfig.height === undefined) {
+                    this.gridConfig.height = 200;
+                }
+            } else {
+                this.showChildrenGrid = false;
+            }
+            this.btnTypeValue = this.btnType;
+            if (this.myConfig.btnType) {
+                this.btnTypeValue = this.myConfig.btnType;
+            }
+        },
+        addRowBefore(e) {
+            if (this.config.gridConfig.addRowBefore) {
+                e.form = this.$refs.form.getData();
+                return this.config.gridConfig.addRowBefore(e);
+            }
+            return true;
+        },
+        delRowBefore(e) {
+            if (this.config.gridConfig.delRowBefore) {
+                e.form = this.$refs.form.getData();
+                return this.config.gridConfig.delRowBefore(e);
+            }
+            return true; 
+        },
+        edit () {
+            this.editFlag = true;
+            if (this.$refs.form) {
+                this.$refs.form.setFormReadOnly(false);
+            }
+            if (this.$refs.grid) {
+                this.$refs.grid.setReadOnly(false);
+            }
+            let obj = {};
+            obj.name = 'editForm';
+            obj.para = {};
+            obj.para.index = this.index;
+            obj.para.formObject = this.$refs.form;
+            obj.para.form = this.$refs.form.getData();
+            if (this.$refs.grid) {
+                obj.para.gridObject = this.$refs.grid;
+            }
+            this.$emit('doAction', obj);
+        },
+        del () {
+            let obj = {};
+            obj.name = 'delForm';
+            obj.para = {};
+            obj.para.index = this.index;
+            this.$emit('doAction', obj);
+        },
+        checkValidate () {
+            this.$refs.form.checkValidate();
+            if (this.$refs.form.isError()) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+        save () {
+            this.$refs.form.checkValidate();
+            if (this.$refs.form.isError()) {
+                return false;
+            }
+            let obj = {};
+            obj.name = 'saveForm';
+            obj.para = {};
+            obj.para.index = this.index;
+            obj.para.data = this.$refs.form.getData();
+            if (this.showChildrenGrid && this.$refs.grid) {
+                if (this.$refs.grid.checkValidate()) {
+                    return false;
+                }
+                obj.para.data[this.config.gridName] = this.$refs.grid.getChangeData();
+                if (obj.para.data[this.config.gridName].length > 0 && obj.para.data.flag === undefined) {
+                    obj.para.data.flag = 'U';
+                }
+            }
+            if (!this.isAdd) {
+                this.editFlag = false;
+            }
+            this.$emit('doAction', obj);
+        },
+        getChangeData () {
+            let data = this.$refs.form.getData();
+            if (data.flag === undefined) {
+                data.flag = 'U';
+            }
+            if (this.showChildrenGrid && this.$refs.grid) {
+                if (this.$refs.grid.checkValidate()) {
+                    return false;
+                }
+                data[this.config.gridName] = this.$refs.grid.getChangeData();
+                if (data[this.config.gridName].length > 0 && data.flag === undefined) {
+                    data.flag = 'U';
+                }
+            }
+            return data;
+        },
+        cancel () {
+            if (!this.isAdd) {
+                this.editFlag = false;
+            }
+            this.$refs.form.setData(this.valueData);
+            this.$refs.form.setFormReadOnly(true);
+            if (this.showChildrenGrid && this.$refs.grid) {
+                this.$refs.grid.setReadOnly(true);
+                this.$refs.grid.setData(this.valueData[this.config.gridName]);
+            }
+            let obj = {};
+            obj.name = 'cancelForm';
+            this.$emit('doAction', obj);
+        },
+
+        setReadOnly (value) {
+            this.editFlag = !value;
+            this.readOnly = value;
+            this.$refs.form.setFormReadOnly(value);
+            if (this.showChildrenGrid && this.$refs.grid) {
+                this.$refs.grid.setReadOnly(value);
+            }
+        },
+        clearData() {
+            this.$refs.form.clearData();
+            if (this.$refs.grid) {
+                this.$refs.grid.clearData();
+            }
+        },
+        isChange () {
+            let flag = this.$refs.form.isChange();
+            if (!flag) {
+                if (this.showChildrenGrid && this.$refs.grid) {
+                    flag = this.$refs.grid.isChange();
+                }
+            }
+            return flag;
+        },
+        setFormReadOnly(value) {
+            this.readOnly = value;
+        },
+        setData(data) {
+            this.customSetData(data);
+        }, 
+        getData() {
+            let data = this.$refs.form.getData();
+            if (this.showChildrenGrid && this.$refs.grid && this.config.gridName) {
+                data[this.config.gridName] = this.$refs.grid.getData();
+            }
+            return data;
+        },
+        customSetData(data) {
+            if (this.$refs.form) {
+                this.$refs.form.setData(data);
+            }
+            if (this.showChildrenGrid && this.$refs.grid) {
+                let gridData = [];
+                if (data[this.config.gridName]) {
+                    gridData = data[this.config.gridName];
+                }
+                this.$refs.grid.setData(gridData);
+            }
+        },
+        editStatic() {
+            if (this.$parent && this.$parent.$parent && this.$parent.$parent.editDetails) {
+                this.$parent.$parent.editDetails();
+            }
+        },
+        setShowBtn(value) {
+            this.showBtn = value;
+        },
+        setBtnReadOnly(value) {
+            this.btnReadOnly = value;
+        }
+    },
+    mounted () {
+        this.$nextTick(()=> {
+            this.customSetData(this.valueData);
+        });
+        if (this.btnType === '1') {
+            if (this.isAdd) {
+                this.setReadOnly(false);
+            } else {
+                this.setReadOnly(true);
+            }
+        } else if (this.btnType === '2') {
+            this.setReadOnly(false);
+        } else {
+            this.setReadOnly(true);
+        }
+        
+       
+    }
+};
+</script>
+<style lang="less">
+    .head-title-2{
+        padding: 7px 16px;
+        background-color:#f8f8f9
+    }
+</style>

package/src/components/form/index.js

@@ -0,0 +1,8 @@
+import FormDetail from './formdetail.vue';
+import FormBox from './formbox.vue';
+import FormCardBox from './formcardbox.vue';
+import FormCardGroupBox from './formcardgroupbox.vue';
+import DetailsBox from './detailsbox.vue';
+import WorkForm from './workform.vue';
+import BaseForm from './baseform.vue';
+export {FormBox,FormDetail,WorkForm,BaseForm,FormCardBox,FormCardGroupBox,DetailsBox};

package/src/components/form/toolanchor.js

@@ -0,0 +1,46 @@
+export default {
+    name: 'formprobase',
+    data () {
+        return {
+            dafaultRightSpan:2,
+            dafaultLeftSpan:1,
+            rightSpan:2,
+            mainSpan:21,
+            leftSpan:1,
+            rightShowFlag:true,
+            leftShowFlag:true,
+        };
+    },
+    methods:{
+        doShowRight() {
+            this.rightShowFlag = true;
+            this.rightSpan = this.dafaultRightSpan; 
+            this.mainSpan = 24 -this.rightSpan - this.toolSpan;
+        },
+        doHideRight() {
+            this.rightShowFlag = false;
+            this.rightSpan = 0; 
+            this.mainSpan = 24 -this.rightSpan - this.leftSpan;
+        },
+        doShowLeft() {
+            this.leftShowFlag = true;
+            this.leftSpan = this.dafaultLeftSpan; 
+            this.mainSpan = 24 -this.rightSpan - this.leftSpan;
+        },
+        doHideLeft() {
+            this.leftShowFlag = false;
+            this.leftSpan = 0; 
+            this.mainSpan = 24 -this.rightSpan - this.leftSpan;
+        },
+        doAction(para) {
+            this.$emit('doAction', para);
+        },
+        changedStatus(value) {
+            this.$refs.tool.changedStatus(value);
+        },
+        gridChangedStatus(name,value) {
+            this.$refs.tool.gridChangedStatus(name,value);
+        },
+       
+    }
+};

package/src/components/form/workform.vue

@@ -0,0 +1,168 @@
+<script>
+    import toolAnchor from './toolanchor';
+    import comPro from './formcompro';
+    export default {
+        name: 'workform',
+        mixins: [comPro,toolAnchor],
+        data (){
+            return {
+                hackReset:true,
+                toolbarConfig:{},
+                fontplacement:'right',
+            };
+        },
+        created () {
+            this.init();
+        },
+        methods:{
+            init() {
+                if (this.config.toolbar) {
+                    this.toolbarConfig = this.config.toolbar;
+                }
+                if (this.config.toolbar &&  this.config.toolbar.fontplacement) {
+                    this.fontplacement =  this.config.toolbar.fontplacement;
+                }
+                if (this.customInit) {
+                    this.customInit();
+                }
+            },
+            
+            getDetailData(name){
+                if (this.$refs[name] && this.$refs[name].length > 0) {
+                    return this.$refs[name][0].getData();
+                } else {
+                    return [];
+                }     
+            },
+            setDetailData(name,data){
+                if (this.$refs[name] && this.$refs[name].length > 0) {
+                    this.$refs[name][0].setData(data);
+                    if (data && data.length > 0) {
+                        this.showDetail.push(name);
+                    }
+                } 
+            },
+            clearDetailData() {
+                this.showDetail = [];
+                if (this.config.detail) {
+                    this.config.detail.forEach(el => {
+                        if (el.name &&  this.$refs[el.name] && this.$refs[el.name].length > 0) {
+                            this.$refs[el.name][0].clearData();
+                        }
+                    });
+                }   
+            },
+            setAllDetailData(obj) {
+                this.showDetail = [];
+                if (this.config.detail) {
+                    this.config.detail.forEach(el => {
+                        if (el.name && obj[el.name]) {
+                            this.setDetailData(el.name,obj[el.name]);
+                        }
+                    });
+                }  
+            },
+           
+            setDetailReadOnly(value) {
+                if (this.config.detail) {
+                    this.config.detail.forEach(el => {
+                        if (el.name && this.$refs[el.name] && this.$refs[el.name].length > 0) {
+                            this.$refs[el.name][0].setReadOnly(value);
+                        }
+                    });
+                }  
+            },
+            updateRow(name,index,obj){
+                if (this.$refs[name] && this.$refs[name].length > 0) {
+                    this.$refs[name][0].updateRow(index,obj);
+                }     
+            },
+            getAllDetailData() {
+                let obj = {};
+                if (this.config.detail) {
+                    this.config.detail.forEach(el => {
+                        if (el.name) {
+                            obj[el.name] = this.getDetailData(el.name);
+                        }
+                    });
+                }  
+                return obj;
+            },
+            getData(){
+                const form = this.$refs.form.getData();
+                return Object.assign({},form,this.getAllDetailData());
+            },
+            clearData() {
+                //清空主表的数据与检验
+                this.$refs.form.clearData();
+                //清空明细的数据
+                this.clearDetailData();
+
+                if (this.clearCustomData) {
+                    this.clearCustomData();
+                }
+            },
+            setFormReadOnly(value) {
+                //设置主表是否编辑
+                this.$refs.form.setFormReadOnly(value);
+            
+                //设置明细表是否编辑
+                this.setDetailReadOnly(value);
+
+                //进行自定义操作
+                if (this.setCustomFormReadOnly) {
+                    this.setCustomFormReadOnly(value);
+                }
+            },
+            getValue(name) {
+                return this.$refs.form.getValue(name);
+            },
+            setValue(name,value){
+                this.$refs.form.setValue(name,value);
+            },
+            setPro(name,value) {
+                this.$refs.form.setPro(name,value);
+            },
+            getPro(name,pro) {
+                return this.$refs.getPro(name,pro);
+            },
+            setReadOnly(name,value) {
+                this.$refs.form.setReadOnly(name,value);
+                if (this.setCustomReadOnly) {
+                    this.setCustomReadOnly(name,value);
+                }
+            },
+            isError() {
+                return this.$refs.form.isError();
+            },
+            setData(obj){
+                //设定主表的数据
+                this.$refs.form.setData(obj);
+              
+                //设定明细的数据
+                this.setAllDetailData(obj);
+
+                if (this.customSetData) {
+                    this.customSetData(obj);
+                }
+            },
+            checkValidate() {
+                this.$refs.form.checkValidate();
+            },
+            isChange () {
+                return this.$refs.form.isChange();
+            },
+            getChangeData() {
+                let form = this.$refs.form.getData();
+                if (this.config.detail && this.config.detail.length > 0) {
+                    this.config.detail.forEach(el => {
+                        if (this.$refs[el.name] && this.$refs[el.name].length > 0) {
+                            form[el.name] = this.$refs[el.name][0].getChangeData();
+                        }
+                    });
+                }
+                return form;
+            }
+        }
+    };
+</script>