ocpview-plus 0.0.1

package/src/components/masterplate/detailbtntoolbar.vue

@@ -0,0 +1,311 @@
+<template>
+   <Row type="flex" :gutter="0" justify="start" align="middle"> 
+        <Col span="14">
+            <Row type="flex" :gutter="0" justify="start" align="middle"> 
+                <Col  v-if="addDataBtnFlag">
+                    <Button  customIcon="iconfont icon-custom-add"  type="primary"  @click="addData" >新增</Button>   
+                </Col>
+                <Col v-if="addDataBtnFlag ">
+                    <Divider  type="vertical" class="dividercommon"/>
+                </Col>
+                <Col v-for="(item,index) in btnItems" :key="'btn_' + index" v-show="!moreFlag || index < myConfig.showNum"  style="margin-right:10px">
+                    <Button :icon="item.icon" :custom-icon="item.customIcon"   @click="action(item.name)" :disabled="!!item.readOnly">{{item.text}}</Button>
+                </Col>
+                <Col v-if="moreFlag">
+                    <Dropdown>
+                        <Button type="info" icon="ios-arrow-down"> </Button>
+                        <template #list>
+                            <DropdownMenu>
+                                    <DropdownItem v-for="(item,index) in btnItems" :key="'btn_' + index"  v-show="index >= myConfig.showNum" :disabled="item.readOnly">
+                                        <Button type="text" :icon="item.icon" :custom-icon="item.customIcon" :size="item.size" @click="action(item.name)" :disabled="!!item.readOnly" >{{item.text}}</Button>
+                                    </DropdownItem>
+                            </DropdownMenu>
+                        </template>
+                    </Dropdown>
+                </Col>
+            </Row>
+        </Col>
+        <Col span="10">
+            <Row type="flex" :gutter="0" justify="end" align="middle"> 
+                <Col v-if="billisworkflow">
+                    <Button customIcon="iconfont icon-custom-flow" type="info" @click="openWorkFlow">工作流</Button>   
+                </Col>
+                <Col v-if="billisworkflow">
+                    <Divider  type="vertical" class="dividercommon"/>
+                </Col>
+                <Col v-if="billapproval">
+                    <Button customIcon="iconfont icon-custom-baopidan" @click="openBillapproval">报批单</Button>   
+                </Col>
+               
+                <Col v-if="billapproval">
+                    <Divider  type="vertical" class="dividercommon"/>
+                </Col>
+                <Col v-if="billoperlog">
+                    <Button customIcon="iconfont icon-custom-baopidan" @click="openBilloperlog">操作日志</Button>   
+                </Col>
+                <Col v-if="billoperlog">
+                    <Divider  type="vertical" class="dividercommon"/>
+                </Col>
+                <Col v-if="printmodel">
+                    <Button customIcon="iconfont icon-custom-print" @click="printBillData">打印</Button>   
+                </Col>
+                <Col v-if="printmodel">
+                    <Divider  type="vertical" class="dividercommon"/>
+                </Col>
+                <Col v-if="showPreNex" style="margin-right:10px">
+                <Button style="padding-left:0px;padding-right:0px" customIcon="iconfont icon-custom-pre" type="text"  @click="preBill">上一单</Button>   
+                </Col>
+                <Col v-if="showPreNex"  >
+                <Button style="padding-left:0px;padding-right:0px" customIcon="iconfont icon-custom-next" type="text"   @click="nextBill" >下一单</Button>   
+                </Col>
+                <Col>
+                    <Divider  type="vertical" class="dividercommon"/>
+                </Col>
+                <Col >
+                    <Button style="padding-left:0px;padding-right:0px" customIcon="iconfont icon-custom-back" type="text"  @click="backData">返回</Button>   
+                </Col>
+            </Row>
+        </Col>
+    </Row>
+</template>
+
+<script>
+export default {
+    name:'mdetailbtntoolbar',
+    data () {
+        return {
+            myConfig:{
+                showNum:5,
+                enablePermissions:true,
+                items:[]
+            },
+            addDataBtnFlag:true,
+            moreFlag:false,
+            showPreNex:true,
+            btnItems:[],
+            apporval:[{
+                name:'submitData',
+                text:'提交'
+            },{
+                name:'revokeData',
+                text:'撤回'
+            },{
+                name:'approveData',
+                text:'审批'
+            }],
+            ignoreModule:['downTemplate'],
+
+            billisworkflow:false,
+            billapproval:false,
+            billoperlog:false,
+            printmodel:false
+        };
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        moduleMethod:{
+            type:Array,
+            default: () => {
+                return [];      
+            }
+        },
+    },
+    created () {
+        this.init();
+    },
+    methods: {
+        init () {
+            this.myConfig =  Object.assign({},this.myConfig, this.config);
+            if (this.myConfig.ignoreModule) {
+                let ignoreModule = this.$Method.copy(this.ignoreModule);
+                let flag = true;
+                this.myConfig.ignoreModule.forEach(el => {
+                    flag = false;
+                    this.ignoreModule.some(el2 => {
+                        if (el2 == el) {
+                            flag = true;
+                            return true;
+                        }
+                    });
+                    if (!flag) {
+                        ignoreModule.push(el);
+                    }
+                });
+            }
+            if (this.myConfig.items && this.myConfig.items.length > 0) {
+                    this.myConfig.items.forEach(el => {
+                        if (el.name !== 'addData') {
+                            let tmp = this.$Method.copy(el);
+                            if (tmp.readOnly === undefined) {
+                                tmp.readOnly = false;
+                            }
+                            if (tmp.icon && tmp.icon.startsWith('custom')) {
+                               tmp.customIcon='iconfont icon-' + tmp.icon;
+                               tmp.icon = null;
+                            }
+                            this.btnItems.push(tmp);
+                        }
+                    });
+
+                    let addIndex2 = this.myConfig.items.findIndex(el => el.name === 'addData');
+                    if (addIndex2 === -1) {
+                        this.addDataBtnFlag = false;
+                    } else {
+                         this.addDataBtnFlag = true;
+                    }
+            }
+
+            if (this.myConfig.billisworkflow && this.myConfig.billisworkflow.startsWith('Y')) {
+                this.billisworkflow = true;
+            }
+
+            if (this.myConfig.billapproval) {
+                this.billapproval = true;
+            }
+
+            if (this.myConfig.billoperlog) {
+                this.billoperlog = true;
+            }
+            if (this.myConfig.showPreNex !== undefined) {
+                this.showPreNex = this.myConfig.showPreNex;
+            }
+            if (this.myConfig.printmodel || this.myConfig.contprintmodel) {
+                this.printmodel = true;
+            }
+            
+            if (this.myConfig.enablePermissions) {
+                if (this.moduleMethod) {
+                    let addIndex = this.moduleMethod.findIndex(el => el.name === 'addData');
+                    if (addIndex === -1) {
+                        this.addDataBtnFlag = false;
+                    } else {
+                        this.addDataBtnFlag = true;
+                    }
+                    let btnItems = [];
+                    if (this.moduleMethod.length > 0) {
+                        this.moduleMethod.forEach(el =>{
+                            let tmp = this.btnItems.find(el2 => el.name === el2.name); 
+                            if (tmp) {
+                                if(this.billisworkflow) {
+                                    if (tmp.name !== 'auditData') {
+                                        btnItems.push(tmp);
+                                    }
+                                } else {
+                                    btnItems.push(tmp);
+                                }
+                            }
+                        });
+                    }
+                    this.ignoreModule.forEach(el => {
+                        let culrtmp = btnItems.find(el3 => el3.name === el);
+                        if (!culrtmp){
+                            let tmp = this.btnItems.find(el2 => el2.name === el);
+                            if (tmp) {
+                                btnItems.push(tmp);
+                            }
+                        }
+                    });
+                    this.btnItems = btnItems;
+                }
+            }
+            if (this.btnItems.length > this.myConfig.showNum){
+                this.moreFlag = true;
+            }
+           
+        },
+        action(name) {
+            let obj = {};
+            obj.name = name;
+            this.$emit('doAction', obj);
+        },
+
+        setAllReadOnly (value) {
+            let btn = this.$Method.copy(this.btnItems);
+            btn.forEach(el => {
+                this.doCommonPro(el.name,'readOnly', value);
+            });
+        },
+        setReadOnly (obj, value) {
+            if (obj) {
+                if (obj instanceof Array) {
+                    obj.forEach(el => {
+                        this.doCommonPro(el,'readOnly', value);
+                    });
+                } else {
+                    this.doCommonPro(obj,'readOnly', value);
+                }
+            }
+        },
+        doCommonPro (btnName, proName, value) {
+            let index = this.btnItems.findIndex(el => el.name === btnName);
+            if (index > -1) {
+                let index2 = this.ignoreModule.findIndex(el2 => el2 === btnName);
+                if (index2 > -1) {
+                    return;
+                }   
+                let pro = {};
+                pro[proName] = value;
+                let temp = Object.assign({},this.btnItems[index], pro);
+                this.btnItems.splice(index,1,temp);
+            }
+        },
+        addData() {
+            this.doBtn('addData');
+        },
+        preBill() {
+            this.doBtn('preBill');
+        },
+        nextBill() {
+            this.doBtn('nextBill');
+        },
+        backData() {
+            this.doBtn('backData');
+        },
+        doBtn(name) {
+            let obj = {};
+            obj.name = name;
+            this.$emit('doAction', obj);
+        },
+        changedStatus(value) {
+            if (this.myConfig.status && this.myConfig.status[value]) {
+                let btn = this.$Method.copy(this.btnItems);
+                btn.forEach(el => {
+                    let tmp = this.myConfig.status[value].find(el2 => el2 === el.name);
+                    if (tmp) {
+                        if (el.readOnly !== false) {
+                            this.doCommonPro(el.name,'readOnly', false);
+                        }
+                    } else {
+                        if (el.readOnly !== true) {
+                            this.doCommonPro(el.name,'readOnly', true);
+                        }
+                    }
+                });
+            }
+        },
+        openWorkFlow() {
+            this.doBtn('openWorkFlow');
+        },
+        openBillapproval() {
+            this.doBtn('openBillapproval');
+        },
+        openBilloperlog() {
+            this.doBtn('openBilloperlog');
+        },
+        printBillData() {
+            this.doBtn('printBillData');
+        }
+            
+    }
+
+};
+</script>
+<style lang="less" scoped>
+        .dividercommon {
+            margin:1px 12px 0 12px;
+            height:32px;
+        }
+</style>

package/src/components/masterplate/detailsbox.vue

@@ -0,0 +1,386 @@
+<template>
+<Card :bordered="false" :padding="0" dis-hover>
+    <p  @click="toggle" style="cursor:pointer;" >
+        <Row  type="flex" :gutter="0"  justify="start" align="middle" style="margin-bottom:14px;margin-top:14px;">
+            <Col span="18">
+            <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" />
+            </Col>
+            <Col  v-show="showForm"  span="6">
+            <Row  type="flex" justify="end" :gutter="0"  align="middle">
+                <Dropdown  placement="bottom-start"  style="float:right">
+                    <Button style="height:21px" type="info">
+                        更多操作
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <template #list>
+                        <DropdownMenu>
+                            <DropdownItem>
+                                <Button  @click.stop="openForm" >全部展开</Button>
+                            </DropdownItem>
+                                <DropdownItem >
+                                <Button   @click.stop="closeForm">全部收起</Button>
+                            </DropdownItem>
+                        </DropdownMenu>
+                    </template>
+                </Dropdown>
+            </Row>
+            </Col>
+        </Row>
+    </p>
+    <Divider style="margin-left:24px;margin-bottom:10px;margin-top: 0px;"/>
+    <div style="margin-left:24px;" v-show="showForm" >
+        <Row style="margin-bottom:10px;">
+            <Button  style="padding-left:0px;padding-right:0px" customIcon="iconfont icon-custom-rowadd3"  type="text"  :disabled="btnReadOnly" @click="add" >添加</Button>
+        </Row>   
+        <FormDetail v-if="showAdd" ref="addform" :config="myConfig" :isAdd="true"   @doAction="newDoAction" :dictData="dictData"/>
+        <FormDetail v-for="(temp,index) in data"  :ref="temp.curlIndex" :key="temp.curlIndex"  :valueData="temp" :curlIndex="temp.curlIndex" :index="index"  :config="myConfig"  @doAction="doAction" :dictData="dictData"/>
+    </div>
+</Card>
+</template>
+
+<script>
+import FormDetail from './formdetailtwo.vue';
+import random from '../../utils/random_str';
+export default {
+    name:'mdetail',
+    components:{
+        FormDetail
+    },
+    data () {
+        return {
+            readOnly:false,
+            showAdd:false,
+            isGrid:false,
+            myConfig:{
+                title:'',
+                titleType:1,
+                addBtnType:'1',
+                hide:true,
+                addBtnName:'新增',
+                editBtnName:'编辑'
+            },
+            showForm:true,
+            editFlag:false,
+            showBtn:true,
+            iconStyle:'',
+            pStyle:'',
+            data:[],
+            delData:[],
+            btnReadOnly:false
+        };
+    },
+    props:{
+        config:{
+            type:Object,
+            default:null
+        },
+        dictData: {
+            type: Object,
+            default:null
+        }
+    },
+    created () {
+        this.init();
+    },
+    computed: {
+    },
+    methods:{
+        init (){
+            this.myConfig = Object.assign({},this.myConfig,this.config);
+            if (this.myConfig.effectKey) {
+               if (this.myConfig.gridConfig) {
+                   if (this.myConfig.gridConfig.effectKey === undefined) {
+                       this.myConfig.gridConfig.effectKey = this.myConfig.effectKey;
+                   }
+               }
+            }
+            delete this.myConfig.formConfig.name;
+            delete this.myConfig.formConfig.title;
+            delete this.myConfig.gridConfig.name;
+            delete this.myConfig.gridConfig.title;
+        },
+        setShowGrid (value) {
+            this.showForm = value;
+        },
+        toggle () {
+            this.showForm = !this.showForm;
+        },
+        getRowObject(index) {
+            if (index < this.date.length) {
+                if (this.$refs[this.date[index].curlIndex] && this.$refs[this.date[index].curlIndex][0]) {
+                    return this.$refs[this.date[index].curlIndex][0];
+                }
+            }
+            return null;
+        },
+        getRandom() {
+            return random(8);
+        },
+        add (obj) {
+            let row = null;
+            if (this.myConfig.addRowBefore) {
+                row = this.myConfig.addRowBefore();
+                if (row === false) {
+                    return;
+                }
+            }
+            if (!row || row === true) {
+                row = {};
+            }
+            if (obj) {
+                row = Object.assign({},row, obj);
+            }
+            if (!this.showForm) {
+                this.showForm = true;
+            } 
+            this.showAdd = false;
+            let self = this;
+            this.$nextTick(() => {
+                this.showAdd  = true;
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        row.flag = 'I';
+                        self.$refs.addform.clearData();
+                        self.$refs.addform.setData(row);
+                        self.$refs.addform.setFormReadOnly(false);
+                    }, 200);
+                });
+            });
+        },
+        newDoAction (obj) {
+            if (this['new' + obj.name]) {
+                this['new' + obj.name](obj);
+            }
+        },
+        newsaveForm (obj) {
+            let flag = true;
+            let temp = obj.para.data;
+            temp.curlIndex = 'formdetail_' + this.getRandom();
+            temp.flag = 'I';
+            if (this.myConfig.newSaveFormBefore) {
+                flag = this.myConfig.newSaveFormBefore(temp);
+            }
+            if (flag) {
+                this.data.push(temp);
+                this.showAdd = false;
+            }
+          
+        },
+        isChange () {
+            let flag = false;
+            if (this.data && this.data.length > 0) {
+                this.data.forEach(el => {
+                    if (!flag) {
+                        if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
+                            flag = this.$refs[el.curlIndex][0].isChange();
+                        }
+                    }
+                });
+            }
+            return flag;
+        },
+        isEdit() {
+            return this.showAdd;
+        },
+        newcancelForm () {
+            this.showAdd = false;
+        },
+        doAction (obj) {
+            if (this[obj.name]) {
+                this[obj.name](obj);
+            }
+        },
+        getData (flag) {
+            let data = [];
+            this.data.forEach(el => {
+                let obj = this.$Method.copy(el);
+                if (!flag) {
+                    delete obj.curlIndex;
+                }
+                data.push(obj);
+            });
+            return data;
+        },
+        setData (data) {
+            this.data = [];
+            this.delData = [];
+            data.forEach(el => {
+                el.curlIndex = 'formdetail_' + this.getRandom();
+            });
+            this.$nextTick(() => {
+                this.data =this.$Method.copy(data);
+            });
+        },
+        setEffectData(data) {
+           this.data.forEach(el => {
+               if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
+                   let tmp = [];
+                   if (this.myConfig.effectKey) {
+                        let tmpIdex = data.findIndex(el2 => el[this.myConfig.effectKey] === el2[this.myConfig.effectKey]);
+                        if (tmpIdex > -1) {
+                            tmp = this.$Method.copy(data[tmpIdex]);
+                        }
+                        this.$refs[el.curlIndex][0].setEffectData(tmp);
+                   }
+               }
+           });
+        }, 
+
+        saveForm (obj) {
+            let index = this.data.findIndex(el => el.curlIndex === obj.para.curlIndex);
+            if (index > -1) {
+                if (this.data[index].flag === undefined) {
+                    obj.para.data.flag = 'U';
+                }
+                this.data.splice(index, 1, obj.para.data);
+            }
+        },
+        delForm (obj) {
+            this.delCommonForm(obj); 
+        },
+        delCommonForm(obj) {
+            let index = this.data.findIndex(el => el.curlIndex === obj.para.curlIndex);
+            let that  = this;
+            if (index > -1) {
+                let form = this.$Method.copy(this.data[index]);
+                if (this.$refs[obj.para.curlIndex] && this.$refs[obj.para.curlIndex][0]) {
+                    form = this.$refs[obj.para.curlIndex][0].getData();
+                }
+                if (this.myConfig.delRowBefore) {
+                    let obj = {};
+                    obj.index = index;
+                    obj.gridObject = that;
+                    obj.form = Object.assign({}, form);
+                    let flag = this.myConfig.delRowBefore(obj);
+                    if (flag === false) {
+                        return;
+                    }
+                }
+                if (form.flag === undefined  || form.flag === 'U') {
+                    form.flag = 'D';
+                    delete form.index;
+                    delete form.curlIndex;
+                    this.delData.push(form);
+                }
+                this.data.splice(index, 1);
+            }
+        },
+        editForm(obj) {
+            this.showAdd = false;
+            if (this.$refs.addform) {
+                this.$refs.addform.clearData(obj);
+            }
+        },
+        setReadOnly(value) {
+            this.readOnly = value;
+            this.$nextTick(() => {
+                this.data.forEach(el => {
+                    if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
+                        this.$refs[el.curlIndex][0].setReadOnly(value);
+                    }
+                });
+            });
+            if (this.readOnly) {
+                this.showAdd = false;
+            }
+            this.setBtnReadOnly(value);
+        },
+        clearData () {
+            this.data = [];
+            this.delData = [];
+            this.showAdd = false;
+            if (this.$refs.addform) {
+                this.$refs.addform.clearData();
+            }
+        },
+        getChangeData() {
+            return this.getCommonChangeData(this.data);
+        },
+        getCommonChangeData(data) {
+            let changeData = [];
+            if (data.length > 0) {
+                data.forEach(el => {
+                    if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
+                        if (this.$refs[el.curlIndex][0].isChange()) {
+                            changeData.push(this.$refs[el.curlIndex][0].getChangeData());
+                        }
+                    } 
+                });
+            }
+            return changeData.concat(this.delData);
+        },
+        editDetails() {
+            if (this.checkIsEdit()) {
+                this.editFlag = true;
+                this.setReadOnly(false);
+            } else {
+                this.editFlag = false;
+                this.setReadOnly(true);
+            }
+        },
+        checkIsEdit() {
+            let flag = true;
+            if (this.myConfig.editObjectBefore) {
+                flag = this.myConfig.editObjectBefore(this.myConfig.name);
+            }
+            return flag;
+        },
+        save () {
+            if (this.checkValidate()){
+                return;
+            }
+            let obj = {};
+            obj.name = 'saveDetails';
+            obj.detailsname = this.myConfig.name;
+            this.editFlag = false;
+            this.$emit('doAction', obj);
+        },
+        delRowData (obj) {
+            this.delForm(obj);
+        },
+        checkValidate () {
+            let flag = false;
+            this.data.some(el => {
+                if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
+                    flag = this.$refs[el.curlIndex][0].checkValidate();
+                    if (flag) {
+                        return true;
+                    }
+                }
+            });
+            if (flag) {
+                this.alert('必填项不允许为空');
+            }
+            return flag;
+        },
+        cancel() {
+            this.editFlag = false;
+            this.delData = [];
+        },
+        setShowBtn(value) {
+            this.showBtn = value;
+        },
+        setBtnReadOnly(value) {
+            this.btnReadOnly = value;
+        },
+        openForm () {
+            this.data.forEach(el => {
+                if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
+                    this.$refs[el.curlIndex][0].setShowForm(true);
+                }
+            });
+        },
+        closeForm() {
+            this.data.forEach(el => {
+                if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
+                    this.$refs[el.curlIndex][0].setShowForm(false);
+                }
+            });
+            this.showAdd = false;
+        },
+    },
+    mounted () {
+    }
+};
+</script>