ocpview-plus 0.0.1

package/src/components/masterplate/formdetailtwo.vue

@@ -0,0 +1,356 @@
+<template>
+    <Card  :padding="0" style="padding-left:20px;padding-right:20px" dis-hover>
+        <p  @click="toggle" style="cursor:pointer;margin-top: 14px;margin-bottom:14px;" >
+            <template v-if="!isAdd"> 
+                <Row  type="flex" :gutter="0"  align="middle">
+                    <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:16px;font-size: 14px;font-weight:bold" v-text="title" />
+                    </Col>
+                    <Col span="6"  v-show="showForm" >
+                        <Row   type="flex" justify="end"  align="middle" :gutter="0">
+                            <Col>
+                                <Button  style="float:right" size="small"  customIcon="iconfont icon-custom-recallcard"  type="text"  :disabled="btnReadOnly" @click.stop="resetRow" >撤消</Button>
+                            </Col>
+                            <Col >
+                                <Divider  type="vertical"  style="margin: 0 15px 0 15px;float:right"/>
+                            </Col>
+                            <Col>
+                                <Button style="float:right" size="small" customIcon="iconfont icon-custom-delcard" type="text" :disabled="btnReadOnly" @click.stop="delBatchRow">删除</Button>
+                            </Col>
+                        </Row>
+                    </Col>
+                </Row>               
+                <Divider  type="vertical"  style="margin: 0 15px 0 15px;float:right"/>
+            </template>
+             <template v-else> 
+                 <Badge status="processing" text="新增项" />
+             </template>
+        </p>
+        <Divider v-show="showForm" style="margin-top:0px;margin-bottom:10px;"/>
+        <div  v-show="showForm" style="padding-left:10px">
+            <Formcard ref="form" :key="myConfig.name" :config="myConfig" :dictData="dictData"   @doAction="doAction"/>
+            <Divider v-show="showChildrenGrid" style="margin-bottom:10px;margin-top: 10px;"/>
+            <EditGridCard v-show="showChildrenGrid" ref="grid"  :config="gridConfig" :dictData="dictData" >
+                <template #header>
+                <Row  type="flex" justify="start"  align="middle" :gutter="0"  style="margin-bottom: 10px;">
+                    <Col v-if="showAddBtn">
+                        <Button customIcon="iconfont icon-custom-rowadd"  type="text" size="small" :disabled="btnReadOnly" @click="addRow" >添加</Button>
+                    </Col>
+                    <Col v-if="showAddBtn && showDelBatchBtn">
+                        <Divider  type="vertical"  style="margin: 0 15px 0 15px;height: 20px"/>
+                    </Col>
+                    <Col v-if="showDelBatchBtn">
+                        <Button customIcon="iconfont icon-custom-rowdel" size="small" type="text" :disabled="btnReadOnly" @click="delRow">删除</Button>
+                    </Col>
+                </Row>
+                </template>
+            </EditGridCard>
+            <Row v-if="isAdd" type="flex" justify="end" align="middle" style="margin-top: 10px;margin-bottom: 10px;" :gutter="16">
+                <Col>
+                    <Button  style="width:84px"  @click="cancel">取消</Button>
+                </Col>
+                <Col>
+                    <Button style="width:84px" type="info" @click="save">确认</Button>
+                </Col>
+            </Row>
+        </div>
+    </Card>
+</template>
+
+<script>
+import Formcard from './formcard.vue';
+import EditGridCard from './editgridcard.vue';
+export default {
+    name:'mformdetail',
+    components:{Formcard,EditGridCard},
+    data () {
+        return {
+            editFlag:false,
+            showChildrenGrid:false,
+            gridConfig:{},
+            myConfig:{},
+            readOnly:false,
+            btnReadOnly:false,
+            showAddBtn:true,
+            showDelBatchBtn:true,
+            showForm:true
+        };
+    },
+    props:{
+        config:{
+            type:Object,
+            default:null
+        },
+        valueData:{
+            type:Object,
+            default () {
+                return {};
+            }
+        },
+        dictData: {
+            type: Object,
+            default:null
+        },
+        index:{
+            type:String,
+            default:''
+        },
+        curlIndex:{
+            type:[String,Number],
+            default:''
+        },
+        isAdd:{
+            type:Boolean,
+            default:false
+        }
+    },
+    created () {
+        this.init();
+    },
+    computed: {
+        title() {
+            let title = '标题';
+            if (this.config.titleName) {
+                if (this.valueData[this.config.titleName]) {
+                    title = this.valueData[this.config.titleName];
+                }
+            }
+            let titlePrefix = '#';
+            if (this.config.titlePrefix) {
+                titlePrefix = this.config.titlePrefix;
+            }
+            let resultTitle = titlePrefix + (Number(this.index)+1)  + '    ' + title;
+            return resultTitle;
+        }
+    },
+    methods:{
+        init () {
+            this.myConfig = Object.assign({},this.myConfig, this.config.formConfig);
+            if (this.config.showEffectValue !== undefined) {
+                 this.myConfig.showEffectValue = this.config.showEffectValue;
+            }
+            this.myConfig.modetype = '3';
+            if (this.config.gridConfig !== undefined && this.config.gridConfig.items && this.config.gridConfig.items.length > 0) {
+                Object.assign(this.gridConfig, this.config.gridConfig);
+                this.gridConfig.showCheckBox = true;
+                if (this.config.showEffectValue !== undefined) {
+                    this.gridConfig.showEffectValue = this.config.showEffectValue;
+                }
+                this.gridConfig.modetype = '3';
+                if (this.gridConfig.showAddBtn !== undefined) {
+                    this.showAddBtn = this.gridConfig.showAddBtn;
+                }
+                 if (this.gridConfig.showDelBatchBtn !== undefined) {
+                    this.showDelBatchBtn = this.gridConfig.showDelBatchBtn;
+                }
+                this.gridConfig.addRowBefore = this.addRowBefore;
+                this.gridConfig.delRowBefore = this.delRowBefore;
+                this.showChildrenGrid = true;
+                if (this.gridConfig.height === undefined) {
+                    this.gridConfig.height = 200;
+                }
+            } else {
+                this.showChildrenGrid = false;
+            }
+        },
+        toggle () {
+          this.showForm = !this.showForm;
+        },
+        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.curlIndex = this.curlIndex;
+            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.curlIndex = this.curlIndex;
+            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.curlIndex = this.curlIndex;
+            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.readOnly = value;
+            this.btnReadOnly = 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);
+        },
+        setEffectData(data) {
+            if (this.$refs.form) {
+                this.$refs.form.setEffectData(data);
+            }
+            if (this.showChildrenGrid && this.$refs.grid) {
+                let gridData = [];
+                if (data[this.config.gridName]) {
+                    gridData = data[this.config.gridName];
+                }
+                this.$refs.grid.setEffectData(gridData);
+            }
+        },
+        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);
+            }
+        },
+        setShowForm(value) {
+            this.showForm = value;
+        },
+        setBtnReadOnly(value) {
+            this.btnReadOnly = value;
+        },
+        addRow () {
+            this.$refs.grid.addRow();
+        },
+        delRow() {
+            this.$refs.grid.delBatchRow();
+        },
+        delBatchRow() {
+            let obj = {};
+            obj.name = 'delRowData'
+            obj.para = {};
+            obj.para.curlIndex = this.curlIndex;
+            this.$emit('doAction', obj);
+        },
+        resetRow() {
+            this.customSetData(this.valueData);
+        },
+        doAction(obj) {
+            this.$emit('doAction', obj);
+        }
+    },
+    mounted () {
+        this.$nextTick(()=> {
+            this.customSetData(this.valueData);
+        });       
+    }
+};
+</script>

package/src/components/masterplate/gridcolset.vue

@@ -0,0 +1,227 @@
+<template>
+<Card  :bordered="false" :padding="0" style="padding-top:14px;padding-left:16px;padding-right:16px;padding-bottom:14px" dis-hover>
+    <Row type="flex" justify="start" align="middle">
+        <Col span='18'>
+         <span>显示这些字段</span>
+        </Col>
+        <Col span='6'>
+            <Row  type="flex" justify="end" align="middle" >
+                <Col>
+                <p  style="cursor:pointer" @click.stop="close">
+                    <Icon type="ios-close" size="24" />
+                </p>
+                </Col>
+             </Row>   
+        </Col>
+     </Row>     
+    <Card :padding="0" dis-hover style="width:330px;margin-top:20px;">
+        <template #title>
+        <p  style="margin-top: 3px;margin-bottom: 3px;margin-left: 8px;margin-right: 10px;">
+          <span style="font-size:14px">已选择字段: </span><span style="color:#AF292E;font-size:14px">{{num}}个</span>
+        </p>
+        </template>
+        
+        <div style="max-height:400px;overflow-y:auto;overflow-x:hidden;margin:14px 16px">
+        <VueDraggable v-model="data" @start="drag = true"  :options="{animation:300}" @end="drag = false">
+                <Card  v-for="(tmp,index) in data" :key="tmp.name + '_col_' + index " :padding="0" :bordered="false"   dis-hover style="padding-top:6px;padding-bottom:6px">
+                    <Row type="flex" justify="start" align="middle"  :gutter="0" class="gridcelrow">
+                        <Col>
+                            <Icon custom="iconfont icon-custom-sort"  class="colset" color="#A8ABB2" size="22" />
+                        </Col>
+                        <Col span="17" style="padding-left:14px;">
+                            <Checkbox v-model="form[tmp.name]" @on-change="countNum"><span style="padding-left:14px;">{{tmp.label}}</span></Checkbox>
+                        </Col>
+                        <Col >
+                        <Tooltip  placement="left">
+                            <template #content>
+                            <div>
+                                <span style="font-size:12px"> 冻结列 </span>
+                            </div>
+                             </template>
+                            <p  @click.stop="doFixed(tmp.name)" style="padding-right:14px;">
+                                <Icon v-if="formFixed[tmp.name]" custom="iconfont icon-custom-fixed"   color="#AF292E"  size="22" />
+                                <Icon v-else class="colset" custom="iconfont icon-custom-fixed"  size="22" color="#A8ABB2" />
+                            </p> 
+                         </Tooltip>
+                        </Col>
+                        <Col>
+                        <Tooltip  placement="left">
+                            <template #content>
+                            <div>
+                                <span style="font-size:12px"> 置顶 </span>
+                            </div>
+                             </template>
+                            <p   @click.stop="doStick(index)">
+                                <Icon custom='iconfont icon-custom-stick' class="colset" color="#A8ABB2" size="22" />
+                            </p>   
+                         </Tooltip>
+                        </Col>
+                    </Row>
+                </Card>
+        </VueDraggable>
+        </div>
+    </Card>
+     <Row style="margin-top:14px" type="flex" justify="end" align="middle" :gutter="10" >
+         <Col>
+           <Button  @click="reset" >重置</Button>
+           </Col>
+            <Col>
+           <Button type="info" @click="ok" >确定</Button>
+           </Col>
+     </Row>    
+</Card>   
+</template>
+
+<script>
+import {VueDraggable} from 'vue-draggable-plus';
+export default {
+    name:'gridcolset',
+    components:{
+            VueDraggable
+        },
+    data () {
+        return {
+            myConfig:{
+            },
+            defaultData:[],
+            moreFlag:false,
+            btnItems:[],
+            num:0,
+            form:{},
+            data:[],
+            formFixed:{}
+        };
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        }
+    },
+    created () {
+        this.init();
+    },
+    methods: {
+        init () {
+            this.myConfig =  Object.assign({},this.myConfig, this.config);
+            this.initData = [];
+            this.initform ={};
+            this.initFixed ={};
+            this.num = 0;
+            this.myConfig.items.forEach(el => {
+                if (el.visible !== false && el.key !== 'actionbtn') {
+                    let tmp = {};
+                    tmp.label = el.label;
+                    if (el.name) {
+                        tmp.name = el.name;
+                    } else {
+                        if (el.sname) {
+                            tmp.name = el.sname;
+                        }
+                    }
+                    this.initData.push(tmp);
+                    this.initform[tmp.name] = true;
+                    this.initFixed[tmp.name] = false;
+                    this.num++;
+                }
+            });
+            this.data = this.$Method.copy(this.initData);
+            this.form = this.$Method.copy(this.initform);
+            this.formFixed = this.$Method.copy(this.initFixed);
+         
+        },
+        reset() {
+            this.data = this.$Method.copy(this.initData);
+            this.$nextTick(() => {
+                Object.assign(this.form,this.initform);
+                Object.assign(this.formFixed,this.initFixed);
+                this.ok();
+            })
+        },
+        ok () {
+            let tmp = [];
+            this.data.forEach(el => {
+                let obj = {};
+                obj.name = el.name;
+                obj.visible = true;
+                obj.visible = this.form[obj.name];
+                if (obj.visible) {
+                    obj.fixed =this.formFixed[obj.name];
+                } else {
+                     obj.fixed = false;
+                }
+                tmp.push(obj);
+            });
+            let temp = {};
+            temp.name = 'saveGridCol';
+            temp.para = tmp;
+            this.$emit('doAction',temp);
+        },
+        close() {
+            let temp = {};
+            temp.name = 'closeGridCol';
+            this.$emit('doAction',temp);
+        },
+        doStick(index) {
+            let data = this.$Method.copy(this.data);
+            this.data = this.swapArrData(0,index,data);
+        },
+        swapArrData  (index1,index2,arr) {
+            const temp = arr.splice(index2, 1, arr[index1]);
+            arr[index1] = temp[0];
+            return arr;
+        },
+        setData(data) {
+            let tmp = [];
+            let form = {};
+            let formFixed = {};
+            let num = 0;
+            data.forEach(el => {
+                let config = this.initData.find(el2 => el.name === el2.name);
+                if (config) {
+                    tmp.push(config);
+                    form[el.name] = el.visible;
+                    formFixed[el.name] = el.fixed;
+                    if (el.visible) {
+                        num++;
+                    } else {
+                        formFixed[el.name] = false;
+                    }
+                }
+            });
+            this.form = form;
+            this.formFixed = formFixed;
+            this.data = tmp;
+            this.num = num;
+        },
+        countNum() {
+            this.$nextTick(() => {
+                let num = 0;
+                let initFixed = {};
+                for(let tmp in this.form) {
+                    if (this.form[tmp]) {
+                        num++;
+                    } else {
+                        if (this.formFixed[tmp]){
+                            initFixed[tmp] = false;
+                        }
+                    }
+                }
+                Object.assign(this.formFixed, initFixed);
+                this.num = num;
+            });
+        },
+        doFixed(name) {
+            let obj = {};
+            obj[name] = !this.formFixed[name];
+            this.formFixed = Object.assign({},this.formFixed,obj);
+        }
+    }
+
+};
+</script>
+<style scoped>
+ .colset:hover {
+     color: #606266 !important;
+ }
+</style>

package/src/components/masterplate/index.js

@@ -0,0 +1,23 @@
+import PageCustom from './page.vue';
+import SimpleViewGrid from './simpleviewgrid.vue';
+import SimpleTree from './simpletree.vue';
+import RowBtnToolbar from './rowbtntoolbar.vue';
+import DetailBtnToolbar from './detailbtntoolbar.vue';
+import BillTemplate from './layouttemplate.vue';
+import mListDetails from './listdetails.vue';
+import mLeftListRightDetails from './leftlistrightdetails.vue';
+import mLeftTreeRightDetails from './lefttreerightdetails.vue';
+import mLeftListRightList from './leftlistrightlist.vue';
+import mBillSingleGrid from './billsinglegrid.vue';
+import mReportBill from './report.vue';
+import mLevelReport from './levelreport.vue';
+import mBirtReport from './birtreport.vue';
+import mAppendixBoxs from './appendix.vue';
+import ListBtnToolbar from './listbtntoolbar.vue';
+import PromptMessages from './promptmessage.vue';
+import BillOperLog from './operlog.vue';
+import mFormCardBox from './formcard.vue';
+import mEditGridCard from './editgridcard.vue';
+import mBillAsyncImport from './billasyncimport.vue';
+import mBillImport from './billimport.vue';
+export {RowBtnToolbar,PageCustom,SimpleViewGrid,DetailBtnToolbar,BillTemplate,SimpleTree,mListDetails,mLeftListRightDetails,mLeftTreeRightDetails,mLeftListRightList,mBillSingleGrid,mReportBill,mLevelReport,mBirtReport,ListBtnToolbar,mAppendixBoxs,PromptMessages,BillOperLog,mFormCardBox,mEditGridCard,mBillImport,mBillAsyncImport};

package/src/components/masterplate/layouttemplate.vue

@@ -0,0 +1,33 @@
+<template>
+<div>
+   <component ref="layout" :is="uiLayoutType" :config="uiconfig" :dictData="globalConfig.dictData" :moduleMethod="globalConfig.userModuleMethod"  @doAction="doAction" />
+   <Modal title="附件" v-model="showDetailAppendix" :width="appendixCurrentWidth" :footer-hide="true">
+        <AppendixBoxs v-if="detalAppendixFlag" ref="detailappendix" :config="billDetailAppendixConfig"  @doAction="doAction"/>
+    </Modal>
+    <Modal title="模版打印" v-model="showPrintMode" :width="appendixCurrentWidth" :footer-hide="true" :fullscreen="true">
+         <iframe ref="iframetemplate" v-if="printModeReset" :src="printModeUrl"  width="100%"  height="100%" allowtransparency="true" frameborder="0"  ></iframe>
+    </Modal>
+    <BillAsyncImport v-if="importReset" ref="billAsyncImport"  :config="billAsyncImportConfig"  />
+    <BillImport v-if="importReset" ref="billImport" :config="billImportConfig"> </BillImport>
+</div>
+</template>
+
+<script>
+import Base from './base.vue';
+import AppendixBoxs from './appendix.vue';
+import BillAsyncImport from './billasyncimport.vue';
+import BillImport from './billimport.vue';
+export default {
+    name:'BillTemplate',
+    extends: Base,
+    components:{AppendixBoxs,BillAsyncImport,BillImport},
+    computed: {
+        uiLayoutType () {
+            return 'm' + this.uiconfig.layoutType;
+        },
+        appendixCurrentWidth () {
+            return this.$Store.state.app.clientWidth * 0.8;
+        },
+    },
+};
+</script>