ocpview-plus 0.0.1

package/src/components/grid/editgridcard.vue

@@ -0,0 +1,193 @@
+<template>
+<Card ref="card" :padding="0"  :bordered="myConfig.bordered" :dis-hover="myConfig.disHover" :headClass="headClass" :extraClass="extraClass" >
+    <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="showBtn && myConfig.readOnly && myConfig.addBtnType === '3' && !btnReadOnly"  href="#" @click.prevent="editGrid">{{myConfig.editBtnName}} </a>
+    <span   v-if="showBtn && myConfig.readOnly && myConfig.addBtnType === '3' && btnReadOnly">{{myConfig.editBtnName}} </span>
+    <a   v-if="showBtn && !myConfig.readOnly && myConfig.addBtnType === '3'"  href="#" @click.prevent="cancelGrid">{{myConfig.cancelBtnName}} </a>
+    <a   v-if="showBtn && myConfig.addBtnType === '3' && !btnReadOnly" style="margin-left: 10px;"  href="#" @click.prevent="addRow">{{myConfig.addBtnName}} </a>
+    <span  v-if="showBtn && myConfig.addBtnType === '3' && btnReadOnly" style="margin-left: 10px;" >{{myConfig.addBtnName}}</span>
+    <a   v-if="showBtn && !myConfig.readOnly && myConfig.addBtnType === '1'"  href="#" @click.prevent="addRow">{{myConfig.addBtnName}} </a>
+     </template>
+    <div  v-show="showGrid" :style="cardStyle" >
+    <Row>
+    <Table ref="table" :loading="loading" :size="myConfig.tableSize"   :row-class-name="rowClassName" :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :maxHeight="tableMaxHeight" :show-header="myConfig.showHeader" :columns="tableColumns" @on-selection-change="OnSelectionChange" :data="data" @on-column-width-resize="onColumnWidthResize" :show-summary="myConfig.showSummary"  :summary-method="handleSummary">
+         <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ index }" :key="'show_' + config.key">
+            <div @click="EditCell(index,config)" class="ivu-table-cell">
+                <ControlBox v-if="editIndex === index && editKey=== config.key"  :config="getCellConfig(index,config)" :autofocus="true" :valueData="getCurRow(index)" @inputValue="input" :editIndex="index" @doAction="doAction"></ControlBox>
+                <ShowText v-else style="display:inline-block;" :label="formatValue(index,config)"  :contentAlign="config.contentAlign"  :class="IsCellError(index,config)" ></ShowText>
+            </div>
+         </template>
+    </Table>
+    <div  ref="page" v-if="myConfig.showPage" style="background:#eee;padding-top:5px;width:100%" >
+        <Card :bordered="false" :padding="0" :dis-hover="true" style="border-radius:0px">
+            <Row  type="flex" justify="end" style="padding:5px;padding-right:10px">
+                <Page  :total="myConfig.pageConfig.total_results"  :size="myConfig.pageSize"  :current="myConfig.pageConfig.page_no" :page-size="myConfig.pageConfig.page_size" :page-size-opts="myConfig.pageConfig.pageSizeList"  @on-page-size-change="changePageSize" @on-change="changePage"  :show-total="myConfig.pageShowTotal" :show-elevator="myConfig.pageShowElevator" :show-sizer="myConfig.pageShowSizer"></Page>
+            </Row>
+        </Card>
+    </div>
+    </Row>
+    <Row v-if="showBtn && !myConfig.readOnly && myConfig.addBtnType === '2'"  type="flex" justify="center" style="margin-top: 10px;margin-bottom:10px;" >
+      <Button type="default" style="background-color:#f8f8f9"  @click="addRow" long>{{myConfig.addBtnName}}</Button>
+    </Row>
+</div>
+</Card>
+</template>
+<script>
+import Base from './editgridbase.vue';
+export default {
+    name: 'editgridcard',
+    extends: Base,
+    data () {
+        return {
+            myConfig:{
+                addBtnType:'2',
+                hide:true,
+                titleType:1,
+                bordered:true,   
+                disHover:false,
+                operFixedFlag:false
+            },
+            btnReadOnly:false,
+            showBtn:true,
+            cardPadding:0,
+            cardStyle:'',
+            showGrid:true,
+            showTitle:true,
+            editFlag:false,
+            pStyle:'',
+            iconStyle:'',
+            showDelRow:true,
+            rowAction:[],
+            delRowAction:[{
+                iconcls: 'row',
+                icon:'ios-trash',
+                name: 'delRow',
+                text: '删除',
+                size:'20',
+                type:'text'
+            }],
+        };
+    },
+    computed: {
+        titleClass () {
+            return `efuture-title-font-${this.myConfig.titleType}`;
+        },
+        headClass () {
+            if (!this.showGrid) {
+                return `efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title-nobottom';
+            } else {
+                return `efuture-card-head-title-${this.myConfig.titleType}`;
+            }
+         
+        },
+        extraClass () {
+            return `efuture-card-extra-title-${this.myConfig.titleType}`;
+        }
+    },
+    methods: {
+        customInit2() {
+            if (this.myConfig.hide) {
+                this.pStyle = 'cursor:pointer';
+                this.iconStyle = 'transform: rotate(90deg)';
+            } 
+            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;
+                }  
+            } else {
+                if (this.config.hide === undefined) {
+                    this.myConfig.hide = true;
+                }
+                if (this.config.bordered === undefined) {
+                    this.myConfig.bordered = true;
+                }
+                if (this.config.disHover === undefined) {
+                    this.myConfig.disHover = false;
+                }   
+            }
+            if (this.myConfig.showTitle !== undefined) {
+                this.showTitle = this.myConfig.showTitle;
+            }
+            if (this.myConfig.showBtn !== undefined) {
+                this.showBtn = this.myConfig.showBtn;
+            }
+            if (this.myConfig.showAddBtn !== undefined) {
+                this.showBtn = this.myConfig.showAddBtn;
+            }
+            this.myToolConfig.icon = true;
+            this.setTitleStyle();
+        },
+        toggle () {
+            if (this.myConfig.hide) {
+                this.showGrid = !this.showGrid;
+                this.setTitleStyle();
+            }
+        },
+        setShowGrid(value) {
+            this.showGrid = value;
+            this.setTitleStyle();
+        },
+        setTitleStyle () {
+            if (this.showGrid) {
+                this.iconStyle = 'transform: rotate(90deg)';
+                this.cardPadding =  5 * Number(this.myConfig.titleType);
+                this.cardStyle = 'padding-left:'+this.cardPadding+'px;padding-right:'+this.cardPadding+'px;padding-bottom: 10px;';
+            } else {
+                this.iconStyle = '';
+                this.cardPadding  = 0;
+                this.cardStyle = '';
+            }
+        },
+        editGrid() {
+            if (this.checkIsEdit()) {
+                this.setReadOnly(false);
+                let obj = {};
+                obj.name = 'editGrid';
+                obj.gridname = this.myConfig.name;
+                this.$emit('doAction', obj);
+            }
+        },
+        cancelGrid() {
+            this.setData(this.initData);
+            this.setReadOnly(true);
+            let obj = {};
+            obj.name = 'cancelGrid';
+            obj.gridname = this.myConfig.name;
+            this.$emit('doAction', obj);
+        },
+        checkIsEdit() {
+            let flag = true;
+            if (this.myConfig.editObjectBefore) {
+                flag = this.myConfig.editObjectBefore(this.myConfig.name);
+            }
+            return flag;
+        },
+        setBtnType(value) {
+            let obj = {};
+            obj.addBtnType = value;
+            this.setPro(obj);
+        },
+        setBtnReadOnly(value) {
+            this.btnReadOnly = value;
+        }
+    },
+    mounted() {
+        if (this.$refs.card && this.$refs.card.$el) {
+            this.$refs.card.$el.onmouseleave = () => {
+                this.handleOut();
+            };
+        }
+    }
+};
+</script>

package/src/components/grid/expandrow.vue

@@ -0,0 +1,137 @@
+<template> 
+<div  :style="style">
+    <Form ref="form" :model="form" :rules="formRules" :label-width="myConfig.labelWidth" :inline="myConfig.inline" :id="myConfig.name" @keydown.enter.prevent ="keyDownEvent">
+        <Row type="flex" justify="start">
+            <Col v-for="(item,index) in items"  :key="'form_' + index" :span="initFormItemCol(index)" v-show="item.visible !== false" :style="{height:item.height}" >
+                <FormItem  :label="item.label" :prop="item.name||item.sname"  style="width: 100%;" :show-message="false">
+                    <template #label>
+                    <span v-if="item.required === true" style="color:#348eed;">{{item.label}}</span>
+                    <span v-else>{{item.label}}</span>
+                    </template>
+                    <div @click="EditCell(item)" style="width: 100%;height:100%" >
+                        <ControlBox v-if="editKey=== item.name"   :config="item"  :valueData="form"  @inputValue="input" style="width:100%" :editIndex="editIndex" ></ControlBox>
+                        <ShowText v-else style="display:inline-block;height:32px;line-height:32px" :label="formatValue(form[item.name],form,item)" contentAlign="left" ></ShowText>
+                    </div>
+                </FormItem>
+            </Col>
+        </Row>
+    </Form>
+</div>
+</template>
+<script>
+    import Base from '@/components/form/baseform.vue';
+    export default {
+        extends: Base,
+        data (){
+            return {
+                editIndex: -1,
+                editKey:''
+            };
+        },
+        created () {
+            this.init();
+        },
+        props: {
+            valueData: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            vstyle:{
+                type:String,
+                default:''
+            },
+            showRowAction:{
+                type: Boolean,
+                default:false
+            }
+        },
+        methods:{
+            customInit() {
+                this.form = Object.assign({},this.form,this.valueData);
+                this.style = this.vstyle;
+            },
+            keyDownEvent() {
+                this.cancelCellEditing();
+            },
+            formatValue(value , row, column) {
+                return this.$Method.formatValue(value ,row, column);
+            },
+
+            EditCell(config) {
+                if (config.readOnly) {
+                    this.editKey = '';
+                    this.cancelCellEditing();
+                    return;
+                }
+                if (this.showRowAction) {
+                    this.cancelCellEditing();
+                    return;
+                }
+                if (this.editKey === config.name) {
+                    return;
+                } 
+                if (this.config.cellbeginedit) {
+                    let rowinfo = {};
+                    rowinfo.index = this.editIndex;
+                    rowinfo.column = config;
+                    rowinfo.row = this.valueData;
+                    if (this.config.cellbeginedit) {
+                        if (!this.config.cellbeginedit(rowinfo)) {
+                            this.cancelCellEditing();
+                            return;
+                        } else {
+                            this.editKey = config.name;
+                        }
+                    }
+                } else {
+                    this.editKey = config.name;
+                }  
+            },
+            addRowInfo(obj,column) {
+                obj.rowinfo = {};
+                obj.rowinfo.column = column;
+                obj.rowinfo.index = this.editIndex;
+                obj.rowinfo.row = this.valueData;
+                obj.rowinfo.gridObject = this.config.getGridObject();
+                obj.rowinfo.formObject = this;
+            },
+            valueChanged(obj) {
+                const column = this.config.items.find(el => {return el.name === obj.name;});
+                this.addRowInfo(obj,column);
+                return column.valueChanged(obj);
+            },
+            searchBefore(obj) {
+                const column = this.config.items.find(el => {return el.name === obj.config.name;});
+                this.addRowInfo(obj,column);
+                return column.searchBefore(obj);
+            },
+            setDataBefore(obj,that) {
+                const column = this.config.items.find(el => {return el.name === that.myConfig.name;}) ;
+                let temp = {};
+                temp.data = obj;
+                this.addRowInfo(temp,column);
+                return column.setDataBefore(temp, that);
+            },
+            setEditIndex(value) {
+                this.editIndex = value;
+            },
+            getEditIndex() {
+                return this.editIndex;
+            },
+            cancelCellEditing() {
+                this.editKey = ''; 
+            }
+        },
+        watch:{
+            valueData: {
+                handler(data) {
+                    this.form = Object.assign({},this.form,data);
+                },
+                deep: true,
+                immediate: true,
+            }
+        }
+    };
+</script>

package/src/components/grid/index.js

@@ -0,0 +1,6 @@
+import ExpandRow from './expandrow.vue';
+import ViewGridBase from './viewgridbase.vue';
+import ViewGrid from './viewgrid.vue';
+import EditGrid from './editgrid.vue';
+import EditGridCard from './editgridcard.vue';
+export {ExpandRow,EditGrid,ViewGridBase,ViewGrid,EditGridCard};

package/src/components/grid/viewgrid.vue

@@ -0,0 +1,122 @@
+<template>
+<div>
+    <div ref="head">
+    <div v-if="$slots.header" :style="myConfig.headStyle">
+        <slot name="header"></slot>
+    </div>
+    <div v-else :style="myConfig.headStyle">
+        <div v-if="showCondition">
+            <Row v-if="myConfig.gridType === 'billGrid'" :gutter="4">
+                <Col span='18'>
+                    <ConditionBox ref="condition" :config="myConfig"  @conditionAction="conditionAction"  :dictData="dictData" modelType="billSearch"></ConditionBox>
+                </Col>
+                <Col span='6'>
+                    <Row type="flex" justify="end" :gutter="8">
+                        <Col>
+                            <Toolbar :config="myToolConfig"  @doAction="doBatchAction" tooltype="batch" :moduleMethod="globalConfig.moduleMethod" ></Toolbar>
+                        </Col>
+                        <Col v-if="showHelpBtn">
+                            <a  href="#" @click.prevent="openHelp">
+                                <Tooltip content="帮助中心" placement="left">
+                                    <CommonIcon   size="32" color="#2d8cf0" type="md-help-circle" />
+                                </Tooltip>
+                            </a>
+                        </Col>
+                        <Col v-if="modulecode">
+                            <Tooltip :content="modulecode" placement="left">
+                                <CommonIcon size="32" color="#2d8cf0" type="ios-information-circle-outline" />
+                            </Tooltip>
+                        </Col>
+                    </Row>
+                </Col>
+            </Row>
+            <Row v-else>
+                <Col span='24'>
+                    <ConditionBox  ref="condition" :config="myConfig"  @conditionAction="conditionAction"  :dictData="dictData" :isPop="isPop"></ConditionBox>
+                </Col>
+            </Row>
+        </div>
+    </div>
+    </div>
+    <template v-if="!myConfig.multiSelectGrid">
+        <Table ref="table"  :row-class-name="myConfig.rowClassName" :loading="loading"  :show-summary="myConfig.showSummary"  :summary-method="handleSummary"  :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="tableColumns"  :data="tempData" @on-sort-change="sortChagne"  @on-current-change="onCurrentChange" :highlight-row="myConfig.highLightRow" @on-row-dblclick="dbclick"  @on-select="onSelect" @on-select-cancel="onSelectCancel" @on-selection-change="OnSelectionChange" @on-row-click="click"  @on-column-width-resize="onColumnWidthResize">
+        <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ index }" :key="'show_' + config.key">          
+               <ShowText :label="formatValue(index,config)"  :contentAlign="config.contentAlign" :rowIndex="index" ></ShowText>
+         </template>
+        </Table>
+         <div v-if="$slots.footer">
+            <slot name="footer"></slot>
+        </div>
+        <div ref="page" name="page">
+        <div  v-if="myConfig.showPage"  style="background:#eee;padding-top:5px;" >
+            <Card :bordered="false" :padding="0" :dis-hover="true" style="border-radius:0px">
+                 <Row  type="flex" justify="end" style="padding:5px;padding-right:10px">
+                     <Page v-model="culPage" :total="myConfig.pageConfig.total_results"  :size="myConfig.pageSize"  :current="myConfig.pageConfig.page_no" :page-size="myConfig.pageConfig.page_size" :page-size-opts="myConfig.pageConfig.pageSizeList"  @on-page-size-change="changePageSize" @on-change="changePage"  :show-total="myConfig.pageShowTotal" :show-elevator="myConfig.pageShowElevator" :show-sizer="myConfig.pageShowSizer"></Page>
+                </Row>
+            </Card>
+        </div>
+        </div>
+    </template>
+    <template v-else>
+        <Row type="flex" justify="center" align="middle" >
+            <Col :span="gridCol">
+                <Card :padding="0" :bordered="false">
+                    <template #title>
+                     <span  v-text="myConfig.gridTitle"></span>
+                    </template>
+                    <Table ref="table"  :row-class-name="myConfig.rowClassName"  :show-summary="myConfig.showSummary" :summary-method="handleSummary"  :loading="loading" :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="tableColumns"  :data="tempData" @on-sort-change="sortChagne"  @on-current-change="onCurrentChange" :highlight-row="myConfig.highLightRow" @on-row-dblclick="dbclick"  @on-select="onSelect" @on-select-cancel="onSelectCancel" @on-selection-change="OnSelectionChange" @on-row-click="click" @on-column-width-resize="onColumnWidthResize">
+                         <template   v-for="config in soltTableColumns" v-slot:[config.key]="{ index }" :key="'show_' + config.key">  
+                            <ShowText  :label="formatValue(index,config)"  :contentAlign="config.contentAlign" :rowIndex="index"></ShowText>
+                         </template>
+                    </Table>
+                </Card>
+            </Col>
+            <Col span= '2'>
+                  <Row  type="flex" justify="center" align="middle" style="padding:5px;" >
+                        <Tooltip content="删除" placement="left">
+                           <Button type="primary" size="small"  icon="ios-arrow-back" :disabled="!rightActive" @click="moveToLeft"></Button>
+                        </Tooltip>
+                  </Row>
+                  <Row  type="flex" justify="center" align="middle" style="padding:5px;" >
+                       <Tooltip content="添加" placement="right">
+                            <Button type="primary" size="small"  icon="ios-arrow-forward" :disabled="!leftActive" @click="moveToRight"></Button>
+                        </Tooltip>
+                  </Row>
+            </Col>
+            <Col :span="multiGridCol">
+                <Card :padding="0" :bordered="false">
+                     <template #title>
+                     <span v-text="myConfig.multiGridTitle"></span>
+                     </template>
+                     <Table ref="multiSelectTable"  :row-class-name="myConfig.rowClassName"  :size="myConfig.tableSize"  :stripe="myConfig.showStripe" :border="myConfig.showBorder" :height="tableHeight" :max-height="tableMaxHeight" :show-header="myConfig.showHeader" :columns="multiTableColumns"  :data="tempMultiSelectData" :highlight-row="myConfig.highLightRow" @on-selection-change="OnMultiSelectionChange">
+                         <template   v-for="config in multiSoltTableColumns" v-slot:[config.key]="{ index }" :key="'show_' + config.key">  
+                            <ShowText  :label="formatMulValue(index,config)"  :contentAlign="config.contentAlign" ></ShowText>
+                         </template>
+                     </Table>
+                </Card>
+            </Col>
+        </Row>
+         <div ref="page" name="page">
+         <div v-if="$slots.footer">
+                <slot name="footer"></slot>
+        </div>
+        <div  v-if="myConfig.showPage" ref="page" style="background:#eee;padding-top:5px;">
+            <Card :bordered="false" :padding="0" :dis-hover="true"  style="border-radius:0px">
+                 <Row  type="flex" justify="start" style="padding:5px;padding-right:10px">
+                     <Page  v-model="culPage" :total="myConfig.pageConfig.total_results"  :size="myConfig.pageSize"  :current="myConfig.pageConfig.page_no" :page-size="myConfig.pageConfig.page_size" :page-size-opts="myConfig.pageConfig.pageSizeList"  @on-page-size-change="changePageSize" @on-change="changePage"  :show-total="myConfig.pageShowTotal" :show-elevator="myConfig.pageShowElevator" :show-sizer="myConfig.pageShowSizer"></Page>
+                </Row>
+            </Card>
+        </div>
+        </div>
+    </template> 
+</div>
+</template>
+<script>
+import Base from './viewgridbase.vue';
+export default {
+    name: 'viewgrid',
+    extends: Base,
+    mounted () {  
+    }
+};
+</script>