ocpview-plus 0.0.1

package/src/components/masterplate/editgridcard.vue

@@ -0,0 +1,222 @@
+<template>
+<Card ref="card"  :bordered="false" :padding="0" dis-hover>
+        <template v-if="myConfig.modetype === '1'">
+            <p  v-if="showTitle" @click="toggle" style="cursor:pointer;" >
+            <Row type="flex" justify="start" align="middle" style="margin-top:14px;margin-bottom:14px">
+            <Icon custom='iconfont icon-custom-pack' color="#f3b352" v-show="showGrid" size="14" />
+                <Icon  v-show="!showGrid" color="#f3b352" custom='iconfont icon-custom-spread' size="14"/> <span style="margin-left:10px;font-size: 14px;font-weight:bold" v-text="myConfig.title" />
+            </Row>
+            </p>
+            <Divider style="margin-left:24px;margin-top:0px;margin-bottom:10px;"/>
+        </template>
+        <template v-if="myConfig.modetype === '2'">
+            <div v-if="showTitle" style="margin-bottom:10px;">
+                <span class="efuture-title-verticalline"/><span style="font-size: 14px;font-weight:bold" v-text="myConfig.title" />
+            </div>
+        </template>
+        <div :style="divStyle">
+            <div v-if="$slots.header">
+                <slot name="header"></slot>
+            </div>
+            <Row v-else v-show="showGrid" type="flex" justify="start"  align="middle" :gutter="0"  style="margin-bottom: 10px;">
+                <Col v-if="showAddBtn">
+                    <Button  :style="btnStyle" customIcon="iconfont icon-custom-rowadd3"  type="text"  :disabled="myConfig.readOnly" @click="addRow" >添加</Button>
+                </Col>
+                <Col v-if="showAddBtn && showDelBatchBtn">
+                    <Divider  type="vertical"  style="margin: 0 6px 0 6px;"/>
+                </Col>
+                <Col v-if="showDelBatchBtn">
+                    <Button  :style="btnStyle" customIcon="iconfont icon-custom-rowdel3"  type="text" :disabled="myConfig.readOnly" @click="delBatchRow">删除</Button>
+                </Col>
+            </Row>
+            <Row v-show="showGrid" >
+                <Table ref="table"  :row-class-name="rowClassName" :loading="loading" :size="myConfig.tableSize"  :stripe="myConfig.showStripe"  :border="myConfig.showBorder" :height="tableHeight" :maxHeight="tableMaxHeight" :show-header="myConfig.showHeader" @on-selection-change="OnSelectionChange" :columns="tableColumns"  :data="data" @on-column-width-resize="onColumnWidthResize" @on-row-click="rowClick" :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="config.cellClassName">
+                            <ControlBox v-if="editIndex === index && editKey=== config.key"  :ref="'cell_'+ index + '_' + config.key"  :autofocus="true" :config="getCellConfig(index,config)"  :valueData="getCurRow(index)" @inputValue="input" :editIndex="index" @doAction="doAction"></ControlBox>
+                            <ShowText v-else  :label="formatValue(index,config)"  :contentAlign="config.contentAlign"  :class="IsCellError(index,config)" :config="config" :rowIndex="index"></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>
+            <p  v-show="showGrid && showEffectValue" @click="toggleEffect" style="cursor:pointer;background-color:#FFF2DE;height:36px;line-height:36px;border: 1px solid #F3B352;margin-top: 10px;" >
+              <Icon custom='iconfont icon-custom-help' size="20" style="margin-left: 10px;" color="#D5882E" />  <span style="margin-left: 4px;color:#D5882E">参考数据</span>    
+            </p>    
+            <Row v-show="showGrid && showEffectValue && showEffectGrid"  class="efuture-effect-grid" style="margin-top: 10px;">
+                <Table  ref="effect_table"  :row-class-name="rowClassName" :loading="loading" :size="myConfig.tableSize"  :border="myConfig.showBorder" :stripe="myConfig.showStripe"  :maxHeight="tableMaxHeight"   :columns="tableColumns"  :data="curlEffectData" @on-column-width-resize="onColumnWidthResize" >
+                    <template  v-for="config in soltTableColumns" v-slot:[config.key]="{ row, index }" :key="'show_effect' + config.key">          
+                        <ShowText :label="effectFormatValue(index,config,row)" :contentAlign="config.contentAlign" :class="config.cellClassName" :config="config" :rowIndex="index"></ShowText>
+                    </template>
+                </Table>
+            </Row>  
+        </div>
+        <Modal v-if="!editRowFlag"  v-model="showEditRowForm"  width="90%" title="编辑" @on-ok="editRow">
+            <div>
+                <ExpandRow ref="rowForm"  :config="myConfig" :dictData="dictData" />
+            </div>
+        </Modal>
+</Card>
+</template>
+<script>
+import { resolveComponent } from 'vue';
+import Base from '@/components/grid/editgridbase.vue';
+export default {
+    name: 'meditgridcard',
+    extends: Base,
+    data () {
+        return {
+            myConfig:{
+                title:'',
+                modetype:'1',
+                operFixedFlag:false,
+                showCheckBox:true,
+                showPage:false,
+                showAppendixCol:false,
+                appedixLable:'附件'
+            },
+            btnStyle:'padding-left:0px;padding-right:0px',
+            divStyle:'padding-left:24px',
+            showAddBtn:true,
+            showDelBatchBtn:true,
+            showGrid:true,
+            showTitle:true,
+            showEffectValue:false,
+            showEffectGrid:true,
+            actionAppendixConfig:{
+                label:'附件',
+                key:'actionappendix',
+                align: 'center',
+                fixed: 'right',
+                render:this.actionAppendixRender,
+                width:45
+            },
+            curlEffectData:[],
+            effectData:[]
+
+        };
+    },
+    methods: {
+        customInit2() {
+            if (this.myConfig.showTitle !== undefined) {
+                this.showTitle = this.myConfig.showTitle;
+            }
+            this.myConfig.items.forEach(el => {
+                if (el.resizable  === undefined) {
+                    el.resizable  = true;
+                }
+                if (!el.width && !el.minWidth) {
+                    el.minWidth = 60;
+                }
+            }); 
+            if (this.myConfig.showAppendixCol) {
+                this.actionAppendixConfig.label = this.myConfig.appedixLable;
+                this.myConfig.items.push(this.actionAppendixConfig);
+            }
+
+            if (this.myConfig.showEffectValue !== undefined) {
+                this.showEffectValue = this.myConfig.showEffectValue;
+            }
+            if (this.showEffectValue) {
+                this.myConfig.dynamicHeight = true;
+            }
+            if (this.myConfig.modetype === '1') {
+                this.btnStyle = 'padding-left:0px;padding-right:0px';
+                this.divStyle = 'padding-left:24px';
+            } else {
+                this.btnStyle = '';
+                this.divStyle = 'padding-left:2px';
+            }
+        },
+        toggle () {
+            this.showGrid = !this.showGrid;
+        },
+        toggleEffect () {
+            this.showEffectGrid = !this.showEffectGrid;
+        },
+        setShowEffectGrid(value) {
+            this.showEffectGrid = value;
+        },
+        setShowGrid(value) {
+            this.showGrid = value;
+        },
+        rowClick(e) {
+            if (this.showEffectValue) {
+                this.curlEffectData = [];
+                let key = '';
+                if (this.myConfig.effectKey) {
+                    key = this.myConfig.effectKey;
+                }
+                if (key) {
+                    let index = this.effectData.findIndex(el => e[key] === el[key]);
+                    if (index > -1) {
+                        this.curlEffectData.push(this.$Method.copy(this.effectData[index]));
+                    }
+                }
+            }
+        },
+        setEffectData(obj) {
+            this.effectData = [];
+            this.effectData = this.$Method.copy(obj);
+            this.curlEffectData = [];
+            if (this.myConfig.showEffectValue) {
+                if (obj.length === 0) {
+                   this.showEffectValue = false;
+                } else {
+                   this.showEffectValue = true;
+                }
+            }
+        },
+        actionAppendixRender(h, params) {
+            return h('div', [
+                            h(resolveComponent('Button'), {
+                                type: 'text',
+                                size: 'small',
+                                customIcon:'iconfont icon-custom-anniu-fujian',
+                                onClick:(e) =>{
+                                    let tmp = {};
+                                    tmp.rowinfo = params;
+                                    tmp.name = 'actionappendix';
+                                    tmp.readOnly = this.myConfig.readOnly;
+                                    this.$emit('doAction',tmp);
+                                }
+                            })
+            ]);
+        },
+        effectFormatValue(index, column) {
+            let value = '';
+            let row = this.$Method.copy(this.curlEffectData[index]);
+            if (column.name) {
+                value = row[column.name];
+            }
+            let config = column;
+            let valueFormat = this.$Method.formatValue(value, row, config);
+            let obj = {};
+            obj.value = value;
+            obj.row = row;
+            obj.config = config;
+            obj.valueFormat = valueFormat;
+            if (column.formatValue) {
+                return column.formatValue(obj);
+            } else if (this.myConfig.formatValue) {
+                return this.myConfig.formatValue(obj);
+            } else {
+                return valueFormat;
+            }
+        },
+    },
+    mounted() {
+        if (this.$refs.card && this.$refs.card.$el) {
+            this.$refs.card.$el.onmouseleave = () => {
+               // this.handleOut();
+            };
+        }
+    }
+};
+</script>

package/src/components/masterplate/editgridcard2.vue

@@ -0,0 +1,109 @@
+<template>
+<Card ref="card"  :bordered="false" :padding="0" dis-hover>
+    <Row  style="margin-top: 10px;">
+        <Table ref="table"  :row-class-name="rowClassName" :loading="loading" :size="myConfig.tableSize"  :stripe="myConfig.showStripe"  :border="myConfig.showBorder"  :height="tableHeight" :maxHeight="tableMaxHeight" :show-header="myConfig.showHeader" @on-selection-change="OnSelectionChange" :columns="tableColumns"  :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="config.cellClassName">
+                    <ControlBox v-if="editIndex === index && editKey=== config.key"   :autofocus="true" :config="getCellConfig(index,config)"  :valueData="getCurRow(index)" @inputValue="input" :editIndex="index" @doAction="doAction"></ControlBox>
+                    <ShowText v-else :label="formatValue(index,config)"  :contentAlign="config.contentAlign"  :class="IsCellError(index,config)" :config="config" :rowIndex="index"></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>
+    <Modal v-if="!editRowFlag"  v-model="showEditRowForm"  width="90%" title="编辑" @on-ok="editRow">
+        <div>
+           <ExpandRow ref="rowForm"  :config="myConfig" :dictData="dictData"/>
+        </div>
+    </Modal>
+</Card>
+</template>
+<script>
+import { resolveComponent } from 'vue';
+import Base from '@/components/grid/editgridbase.vue';
+export default {
+    name: 'meditgridcard2',
+    extends: Base,
+    data () {
+        return {
+            myConfig:{
+                title:'',
+                modetype:'1',
+                operFixedFlag:false,
+                showCheckBox:true,
+                showPage:false,
+                showAppendixCol:false,
+                appedixLable:'附件'
+            },
+            showAddBtn:true,
+            showDelBatchBtn:true,
+            showGrid:true,
+            showTitle:true,
+            actionAppendixConfig:{
+                label:'附件',
+                key:'actionappendix',
+                align: 'center',
+                render:this.actionAppendixRender,
+                fixed:'right'
+            }
+
+        };
+    },
+    methods: {
+        customInit2() {
+            if (this.myConfig.showTitle !== undefined) {
+                this.showTitle = this.myConfig.showTitle;
+            }
+            this.myConfig.items.forEach(el => {
+                if (el.resizable  === undefined) {
+                    el.resizable  = true;
+                }
+                if (!el.width && !el.minWidth) {
+                    el.minWidth = 60;
+                }
+            }); 
+            if (this.myConfig.showAppendixCol) {
+                this.actionAppendixConfig.label = this.myConfig.appedixLable;
+                this.myConfig.items.push(this.actionAppendixConfig);
+            }
+
+            
+        },
+        toggle () {
+            this.showGrid = !this.showGrid;
+        },
+        setShowGrid(value) {
+            this.showGrid = value;
+        },
+        actionAppendixRender(h, params) {
+            return h('div', [
+                            h(resolveComponent('Button'), {
+                                type: 'text',
+                                size: 'small',
+                                customIcon:'iconfont icon-custom-anniu-fujian',
+                                onClick:(e) =>{
+                                    let tmp = {};
+                                    tmp.rowinfo = params;
+                                    tmp.name = 'actionappendix';
+                                    tmp.readOnly = this.readOnly;
+                                    this.$emit('doAction',val);
+                                }
+                            })
+            ]);
+        }
+    },
+    mounted() {
+        if (this.$refs.card && this.$refs.card.$el) {
+            this.$refs.card.$el.onmouseleave = () => {
+               // this.handleOut();
+            };
+        }
+    }
+};
+</script>

package/src/components/masterplate/formcard.vue

@@ -0,0 +1,106 @@
+<template>
+    <Card :bordered="false" :padding="0" dis-hover>
+        <template v-if="myConfig.modetype === '1'">
+            <p @click="toggle" style="cursor:pointer;" >
+                <Row type="flex" justify="start" align="middle" style="margin-top:14px;margin-bottom:14px">
+                    <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" />
+                </Row>
+            </p>
+            <Divider style="margin-left:24px;margin-top:0px;margin-bottom:10px;"/>
+        </template>
+        <template v-if="myConfig.modetype === '2'">
+            <div style="margin-bottom:10px;">
+                <span class="efuture-title-verticalline" /> <span style="font-size: 14px;font-weight:bold" v-text="myConfig.title" />
+            </div>
+        </template>
+        <Form ref="form" class="efuture-tip-form" v-show="showForm" :model="form" :rules="formRules" :label-position="myConfig.labelPosition" :label-width="myConfig.labelWidth" :inline="myConfig.inline" :id="myConfig.name" @submit.enter.prevent>
+            <Row type="flex" justify="start">
+                <template  v-for="(item,index) in items" :key="'form_'+index">
+                <Col v-if="item.status" :span="initFormItemCol(index)" v-show="item.visible !== false" class="efuture-form" >
+                    <FormItem v-if="item.type !== 'Divider' && item.status && item.visible !== false"  :prop="item.name||item.sname"  :style="getFormItemStyle(item)" :show-message="false">
+                        <template #label>
+                            <ShowText :style="getLableStyle"  :contentAlign="myConfig.labelPosition" :label="item.label"  :config="item"></ShowText>
+                        </template>
+                        <template v-if="!showEffectValue || !item.showEffectValue">
+                            <ControlBox :ref="item.name||item.sname"  :valueData="form" :config="item" @inputValue="input"   @doAction="doAction" ></ControlBox>
+                        </template>
+                        <template v-else>
+                                <Poptip trigger="hover" style="width:100%"  placement="top">
+                                    <ControlBox :ref="item.name||item.sname"  :valueData="form" :config="item" @inputValue="input"   @doAction="doAction" ></ControlBox>
+                                    <template #content>
+                                        <ControlBox  :ref="'effect_' + item.name||item.sname"  style="width:100%" :valueData="effectForm" :config="effectConfig(item)"  ></ControlBox>
+                                    </template>    
+                                </Poptip>
+                        </template>     
+                    </FormItem>
+                    <ControlBox  v-if="item.type === 'Divider'"  :ref="item.dividerName"  :style="getDividerStyle" :config="item"></ControlBox>
+                </Col>
+                </template>
+            </Row>
+        </Form>
+    </Card>
+</template>
+
+<script>
+import Base from '@/components/form/formbox.vue';
+export default {
+    name:'mformcard',
+    extends: Base,
+    data () {
+        return {
+            myConfig:{
+                title:'',
+                modetype:'1',
+                labelPosition: "right",
+            },
+            showForm:true,
+            editFlag:false,
+            showTitle:false,
+            showEffectValue:false,
+            effectForm:{}
+        };
+    },
+    methods:{
+        customInit() {
+            if (this.myConfig.showEffectValue !== undefined) {
+                this.showEffectValue = this.myConfig.showEffectValue;
+            }
+            this.myConfig.items.forEach(el => {
+                if (el.showEffectValue === undefined) {
+                    if (this.myConfig.showEffectValue) {
+                        el.showEffectValue = this.myConfig.showEffectValue;
+                    }
+                }
+            })
+        },
+        toggle () {
+          this.showForm = !this.showForm;
+        },
+        setShowForm(value) {
+            this.showForm = value;
+        },
+        effectConfig(item) {
+            let config = this.$Method.copy(item);
+            config.readOnly = true;
+            return config;
+        },
+        setEffectData(obj) {
+            this.effectForm = Object.assign({}, {}, obj);
+        },
+        getLableStyle() {
+            if (this.myConfig.modetype === '1') {
+                return 'padding-left:10px';
+            }
+            return '';
+        },
+        getDividerStyle() {
+            if (this.myConfig.modetype === '1') {
+                return 'margin-left:32px;';
+            }
+            return '';
+        }
+    }
+};
+</script>

package/src/components/masterplate/formcardgroupbox.vue

@@ -0,0 +1,168 @@
+<template>
+<div>
+    <div v-for="(item) in myConfig.items"  :id="item.divId"  :key="item.divId"   v-show="headList[item.name]">
+        <Formcard   :ref="item.name"   :config="item" :dictData="dictData"  @doAction="doAction" >
+        </Formcard>
+    </div>
+</div>
+</template>
+
+<script>
+import Formcard from './formcard.vue';
+export default {
+    name:'mformcardgroupbox',
+    data () {
+        return {
+            myConfig:{
+                title:''
+            },
+            showForm:true,
+            headList:{}
+        };
+    },
+    components:{Formcard},
+    created () {
+        this.init();
+    },
+    props:{
+        config: {
+            type:Object,
+            default:null
+        },
+        dictData: {
+            type: Object,
+            default:null
+        }
+    },
+    methods:{
+        init (){
+            this.showForm = {};
+            this.headList = {};
+            this.myConfig = Object.assign({},this.myConfig,this.config);
+            if (this.myConfig.items) {
+                this.myConfig.items.forEach((el, index) => {
+                    if (!el.name) {
+                        el.name = 'form_' + index;
+                       
+                    }
+                    if (!el.labelWidth) {
+                        el.labelWidth = 100;
+                    }
+                    this.headList[el.name] = true;
+                });
+            }
+        },
+        getData () {
+            let obj = {};
+            this.myConfig.items.forEach((el,index) => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    if (index === 0) {
+                        Object.assign(obj, this.$refs[el.name][0].getData());
+                    } else {
+                        let data = this.$refs[el.name][0].getData();
+                        if (el.items) {
+                            el.items.forEach(el2 => {
+                                if (el2.name) {
+                                    obj[el2.name] = data[el2.name];
+                                }
+                                if (el2.sname) {
+                                    obj[el2.sname] = data[el2.sname];
+                                }
+                                if (el2.ename) {
+                                    obj[el2.ename] = data[el2.ename];
+                                }
+                                if (el2.textName) {
+                                    obj[el2.textName] = data[el2.textName];
+                                }
+                            });
+                        } 
+                    }
+                }
+            });
+            return obj;
+
+        },
+        setData (data) {
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].setData(data);
+                }
+            });
+        },
+        setEffectData(data) {
+             this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].setEffectData(data);
+                }
+            });
+        },
+        isChange () {
+            let flag = false;
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    if (!flag) {
+                        flag = this.$refs[el.name][0].isChange();
+                    } else {
+                        return true;
+                    }
+                   
+                }
+            });
+            return flag;
+        },
+        getForm(name) {
+            if (this.$refs[name] && this.$refs[name][0]) {
+                return this.$refs[name][0];
+            } else {
+                return null;
+            }
+        },
+        clearData () {
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].clearData();
+                   
+                }
+            });
+        },
+        setFormReadOnly (value) {
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    this.$refs[el.name][0].setFormReadOnly(value);
+                   
+                }
+            });
+        },
+        checkValidate() {
+            let flag = false;
+            this.myConfig.items.forEach(el => {
+                if (this.$refs[el.name] && this.$refs[el.name][0]) {
+                    if (this.headList[el.name]) {
+                        this.$refs[el.name][0].checkValidate();
+                        if (this.$refs[el.name][0].isError()) {
+                            flag = true;
+                            return true;
+                        }
+                    }
+
+                }
+            });
+            return flag;
+        },
+        doAction(obj) {
+            this.$emit('doAction', obj);
+        },
+        setShowForm(value, name) {
+            if (this.$refs[name] && this.$refs[name][0]) {
+                this.$refs[name][0].setShowForm(value)
+            }
+        },
+        setVisible(name,value) {
+            let obj = {};
+            obj[name] = value;
+            this.headList = Object.assign({},this.headList,obj);
+        }
+    }
+
+};
+</script>