fj-dc-ui/.svn/pristine/0e/0e0a4f7a53d06a726790d89b0f02987287c58c7d.svn-base

<template>
    <div id="singleDataTableManager">
        <div id="searchPanel" style="background-color:rgba(6, 186, 240, 0.08);border:1px dashed blue;border:0px 0px 0px 1px;padding-top:10px;padding-bottom:10px;">
      
            <el-row :gutter="20"  style='padding-left:10px;padding-right:10px;'>
             
                    <el-col :span="20" style="padding-top:1px;">  
                        <el-row :gutter="20"  style='padding-left:10px;padding-right:10px;'>
                           
                            <el-col  style='padding-bottom:10px;' :span="4" v-for="searchItem in mainSearchConfigure"  :key="searchItem.label">  
                        <span style="font-size: small;font-weight: lighter;">{{searchItem.label}}</span>
                                <div style="flex-basis:50%;display:flex;flex-direction:row;justify-content:flex-end;">
                                    <el-input :placeHolder="searchItem.label" v-if="searchItem.type=='text'" v-model="searchDataObject[searchItem.prop]"></el-input>
                                    <el-input :placeHolder="searchItem.label" v-if="searchItem.type=='tree'" @focus="showTrees" v-model="areaTxt"></el-input>
                                    <el-date-picker :placeHolder="searchItem.label" style="width:100%;" v-if="searchItem.type=='date'" v-model="searchDataObject[searchItem.prop]"></el-date-picker>
                                    <el-select-dict :placeHolder="searchItem.label" v-if="searchItem.type=='select'" :dictId="searchItem['refObjValue']" :initialValue="searchDataObject[searchItem.prop]" v-model="searchDataObject[searchItem.prop]"></el-select-dict>
                                </div>
                            </el-col> 
                        </el-row>
                    </el-col>
                    <el-col  style='padding-bottom:10px;' :span="4" > 
                         <el-button  style="float:right;" type="info" plain
                        size="mini"
                        @click="showExpandSearchPanel = !showExpandSearchPanel"
                        v-show="expandSearchConfigue.length > 0"
                        >
                        更多
                        <i class="el-icon-arrow-down el-icon--right" v-show="!showExpandSearchPanel"/>
                        <i class="el-icon-arrow-up el-icon--right" v-show="showExpandSearchPanel"/>
                         </el-button>
                    </el-col> 
        </el-row>
        <el-row :gutter="24"  style='padding-left:10px;padding-right:10px;' v-show="showExpandSearchPanel">
             
                           
                            <el-col  style='padding-bottom:10px;' :span="4" v-for="searchItem in expandSearchConfigue"  v-if="!searchItem.isMain" :key="searchItem.label">  
                        <span style="font-size: small;font-weight: lighter;">{{searchItem.label}}</span>
                                <div style="flex-basis:50%;display:flex;flex-direction:row;justify-content:flex-end;">
                                    <el-input :placeHolder="searchItem.label" v-if="searchItem.type=='text'" v-model="searchDataObject[searchItem.prop]"></el-input>
                                    <el-input :placeHolder="searchItem.label" v-if="searchItem.type=='tree'" @focus="showTrees" v-model="areaTxt"></el-input>
                                    <el-date-picker :placeHolder="searchItem.label" style="width:100%;" v-if="searchItem.type=='date'" v-model="searchDataObject[searchItem.prop]"></el-date-picker>
                                    <el-select-dict :placeHolder="searchItem.label" v-if="searchItem.type=='select'" :dictId="searchItem['refObjValue']" :initialValue="searchDataObject[searchItem.prop]" v-model="searchDataObject[searchItem.prop]"></el-select-dict>
                                </div>
                            </el-col> 
                            
        </el-row>
         <el-row>
                     <el-col :span="24">
                         
                    <el-button v-for="action in outerActions" :key="action.name" type="primary" style="float:right;margin-right:5px;"
                        size="small"
                        @click="handleouterActions(action)">{{action.label}}
                    </el-button>
               </el-col>
        </el-row>
        </div>
        <el-container style="margin-top:10px;">
            <el-main style="padding:5px;">
                <el-table
                    :data="tableData"
                    stripe
                    :height="mainHeight"
                    border
                    style="width: 100%"
                    >
                    <!--数据列配置-->
                    <el-table-column v-for="colmun in tableViewConfigure" :key="colmun.prop" v-if="colmun.isHidden!='1'"
                                     :prop="colmun.prop"
                                     show-overflow-tooltip
                                     header-align="center"
                                     align="center"
                                    
                                     :label="colmun.label"
                                     :min-width="colmun.width">
                        <template slot-scope="scope">
                            {{tableColumnsFormatter(scope.row,scope,scope.$index,colmun)}}
                        </template>
                    </el-table-column>

                    <!--操作列配置-->
                    <el-table-column v-if="innerActions.length > 0"
                                     label="操作"
                                     header-align="center"
                                     align="center"
                                     min-width="180">
                        <template slot-scope="scope">
                            <el-button v-for="action in innerActions" :key="action.name"
                                       size="mini"
                                       @click="handleinnerActions(scope.$index, scope.row,action)">{{action.label}}</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
             <el-footer>
                  <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>
             </el-footer>
        </el-container>
       
       
  
     
    </div>
</template> 

<script>
    /*
        组件名称:simpleDataTable
        组件用途:结合基础组件、查询条件的可配置表格，基于singleDataManager拆分而来。独立用于展示，并且可通过与simpleDataForm组合构成原有的singleDataManager
        依赖组件:
                axios - ajax请求
                @tinymce/tinymce-vue - 富文本编辑
        包含API文件:
                (dictionaryApi - 字典相关的API)
        props:tableViewId:string - 指定管理视图代码 (通过此代码查询接口获得组成页面的所有信息)
              otherParamsObject:object - 额外查询参数(为有额外联查条件要求准备,所有属性均会附加在所有请求中)
        版本记录：
                 0.0.1 (初版) @author:wxcwater @date:2019.06.24
    
    */
    import axios from 'axios';
   
   

    
   
    import request from '../utils/gw_ajax_request.js'
    import {dateFormat} from '../utils/gw_date.js'
    import {getdictItemBydictIdSync} from '../utils/gw_dictionary.js'
    import elSelectDict from './elSelectWithDict.vue'
    import elMultipleSelect from './selectMultiple.vue'
    export default {
        props:['tableViewConfig','tableViewId','dataTitle','otherParamsObject','data'],
        name: 'singleDataTableManager',
        components: {
            'el-select-dict':elSelectDict,
           
            'el-multiple-select': elMultipleSelect,
            
        },
        computed:{

        },
        watch:{
          
            searchDataObject(val){
                console.log(val)
            },
          otherParamsObject:{

              handler(){
                    console.log('otherParamsObject');
                      this.loadData();
                },
                deep:true,
          }
        },
        data () {
            return {
                heightForDialog:window.innerHeight*0.45,
                heightForTable:window.innerHeight-91,
                mainHeight:window.innerHeight-265,
                manageViewConfigure:{},//从后台获得的view整体的配置信息对象
                tableViewConfigure:[],//table表格的数据列配置
                outerActions:[],//脱离于table与form的操作 如刷新、查询等
                innerActions:[],//table表格每行的操作 如 查询 修改 删除
              
                mainSearchConfigure:[],
                expandSearchConfigue:[],
                tableData:[],//单表(视图)实体数据
                showDetailForm:false,//展示详细弹窗 以用于查看、新增、修改
                searchDataObject:{},
               
                formDataObject:{},//表单数据对象(实际持有表单数据的对象)
               
             
                
                idx: -1,
                page:{
                    pageNum: 1,
                    pageSize: 10
                },
                total:0,
                baseUrl:'',
             
               showExpandSearchPanel:false,
           
            }
        },
        mounted:function(){
            let me = this;
            me.getManageViewConfigureInformation();
            console.log(this.otherParamsObject);

        },

        methods:{
           
            getManageViewConfigureInformation:function(){ //获取table的配置信息以初始化组件配置
               
                let _self = this;
                let getConfigType = typeof this.tableViewConfig;
                if(getConfigType == 'object'){//如果props里的tableViewConfig是object认为给的就是配置对象了，还考虑function与promise的类型 后续添加
                    _self.manageViewConfigure =this.tableViewConfig;
                    this.analyseManageViewConfigure();//开始分析解析配置文件
                }
              
               
            },
            analyseManageViewConfigure:function(){//分析配置文件，生成一些基本对象
                let _self = this;
                this.tableViewConfigure = this.manageViewConfigure['fields']
                let fields = [];//fields为组件的数据配置，产生影响的包括table的列与一些查询、排序等的内容
                let actions = [];//actions为组件的操作配置，产生影响的包括一些button等的方法。
                let searchs = [];//searchs 为组件的查询项目配置
                if(this.manageViewConfigure && this.manageViewConfigure.hasOwnProperty('fields')){
                    fields = this.manageViewConfigure['fields'];
                    this.tableViewConfigure = fields;;//存到tableViewConfigure里方便模板使用
                }
                if(this.manageViewConfigure && this.manageViewConfigure.hasOwnProperty('actions')){
                    actions = this.manageViewConfigure['actions'];
                }
                if(this.manageViewConfigure && this.manageViewConfigure.hasOwnProperty('searchs')){
                    searchs = this.manageViewConfigure['searchs'];
                }
                actions.forEach(item => {//对actions进行细分，根据每个action的position属性确定action代表的button是在组件的位置(outer:table外，在查询部分，inner：在table的每行中)
                    if(item.position=='inner'){
                        this.innerActions.push(item);
                    }else if(item.position=='outer'){
                        this.outerActions.push(item);
                    }

                });
                
                searchs.forEach(item => {
                    if(item.hasOwnProperty('isMain') && (item.isMain || item.isMain == '1')){
                        
                            this.mainSearchConfigure.push(searchItem);
                       
                        
                    }else{
                             this.expandSearchConfigue.push(searchItem);
                    }
                });
                let mainSearchLength = this.mainSearchConfigure.length;
                fields.forEach(item => {
                    if(item.hasOwnProperty('isSearchable') && (item.isSearchable || item.isSearchable == '1')){
                        let searchItem = Object.assign({},item);
                        searchItem.isMain = false;
                        if(mainSearchLength==0&&this.mainSearchConfigure.length<4){
                            this.mainSearchConfigure.push(searchItem);
                        }else{
                            this.expandSearchConfigue.push(searchItem);
                        }
                        
                    }
                });


                console.log('拆分结果');
                console.log(this.outerActions);
                console.log(this.innerActions);

                //以上配置的赋值会影响页面绘制，故绘制完再进行实体数据的获取
                this.$nextTick(function(){
                    _self.loadData();//分析完毕后开始获取数据
                });
            },
            loadData:function(){//获取table数据，可由内外部调用，没有什么影响。
                let _self = this;
                let getTableType = typeof _self.data;
                if(getTableType == 'array'){//如果是数组表示是外部直接赋值的数据
                    _self.tableData = _self.data;
                    _self.total = _self.data.length;
                }else if(getTableType == 'string'){//如果是字符串考虑是远端的url
                    let dataUrl = _self.data;
                    let queryParams = Object.assign(_self.searchDataObject,_self.page);//组合查询参数与分页信息
                    if(_self.otherParamsObject) {//考虑组件外业务逻辑会带进来额外的查询参数，将额外查询参数组合进来
                        queryParams = Object.assign(queryParams, this.otherParamsObject);
                    }
                    request({
                        url: dataUrl,
                        method:'POST',//默认为POST
                        params: queryParams
                    }).then((response) => {

                        console.log(response);//打印获取结果

                        _self.tableData = response.data.list ? response.data.list : response.data;
                        _self.total = response.data.total;
                    }).catch(function (err) {
                        console.log(err);
                    });
                }
                
                
            },
             handleinnerActions:function(index,row,innerAction){//处理表格中的点击操作
            
                this.$emit('innerActionClick',{'row':row,'action':innerAction});
                let action = innerAction.action;//获取action的动作类型
                let _self = this;
                // 判断是否为组件内部方法，如果是可以直接调用。考虑通过|操作符对多个动作进行连接。
                if(this.hasOwnProperty(action) && (typeof this[action]) == "function"){
                    //如果有同名内部方法就直接调用，为了是查询等操作可以直接使用loadData等
                    console.log('innerAction调用内部方法');
                    this[action]();
                }else if(action == 'request'){
                    // 如果是request类型的 默认为发送请求类的动作。目前主要是 删除 等。删除完需要同步刷新数据
                    let realUrl = this.analyseUrlTempLateToRealUrl(innerAction.url,row);//如果是restful的会按照模板进行处理,没有就不处理了
                    let queryParams = this.formDataObject;
                    if(this.otherParamsObject) {
                        queryParams= this.otherParamsObject;
                    }
                    let requestType = innerAction.hasOwnProperty('requestType')&&innerAction['requestType'] != ''?innerAction['requestType']:'GET';
                    //获取请求类型，默认是GET
                    request({
                        url: realUrl,
                        method: requestType,
                        params: queryParams,//考虑接口差异，data、params都传递
                        data: queryParams//考虑接口差异，data、params都传递
                    }).then((response) => {
                        _self.loadData();//默认在请求后查询一遍数据。基本行内请求都对数据有操作。
                    })
                }
            },
            handleouterActions:function(outerAction){//处理table外action的操作
                this.$emit("outerButtonClick",outerAction);
                let action = outerAction.action;//获取action的动作类型

                // 判断是否为组件内部方法，如果是可以直接调用。
                if(this.hasOwnProperty(action) && (typeof this[action]) == "function"){
                    //如果有同名内部方法就直接调用，为了是查询等操作可以直接使用loadData等
                    console.log('outerAction调用内部方法');
                    this[action]();
                }else if(action == 'request'){
                    // 如果是request类型的 默认为发送请求类的动作。目前主要可能是导出。
                }
            },





            analyseUrlTempLateToRealUrl:function(urlTemplate,paramsObject){
                let urlTemp = urlTemplate.split('/');
                urlTemp.forEach((element,index) => {
                    if(element.startsWith('{')&&element.endsWith('}')){
                        console.log('换'+paramsObject[element.substring(1,element.length-1)]);
                        urlTemp[index] = paramsObject[element.substring(1,element.length-1)]
                    }
                });
                console.log(urlTemp);
                return this.baseUrl + urlTemp.join('/');
            },
            
            
           
            
            tableColumnsFormatter:function(row, scope, index,colmunObj){//table列表中针对某一列的formatter
                let columnContentType = colmunObj["type"]; //获得type来确定是否需要对值进行处理
                let prop = scope.column.property;//获取配置的prop 用以返回属性
              if(columnContentType == 'select'){
                let formatterResult =  row[prop];
                let dictOptions  =  getdictItemBydictIdSync(colmunObj["refObjValue"]);
                if(dictOptions){
                  let hasDict = false;
                  dictOptions.forEach(element => {
                    if(element['key'] == row[prop]){
                      hasDict = true;
                      formatterResult = element['value'];
                    }
                  });
                }
                return formatterResult;
              }else if(columnContentType == 'selectMultiple'){
                    let formatterResult =  row[prop];
                    let dictOptions  =  getdictItemBydictIdSync(colmunObj["refObjValue"]);
                    if(dictOptions){
                        let hasDict = false;
                        dictOptions.forEach(element => {
                            if(element['key'] == row[prop]){
                                hasDict = true;
                                formatterResult = element['value'];
                            }
                        });
                    }
                    return formatterResult;
                }else if(columnContentType == 'text'){
                    let formatterResult =  row[prop];
                    let dictOptions  =  getdictItemBydictIdSync(colmunObj["refObjValue"]);
                    if(dictOptions){
                        let hasDict = false;
                        dictOptions.forEach(element => {
                            if(row[prop]){
                                if(element['value'] == row[prop].toString()){
                                    hasDict = true;
                                    formatterResult = element['descr'];
                                }
                            }
                        });
                    }
                    return formatterResult;
                    // return row[prop];
                }else if(columnContentType == 'date'){
                    let beFormatter =   row[prop];
                    if(typeof beFormatter == 'date'){
                        return dateFormat(beFormatter,'yyyy-MM-dd');
                    }else{
                        return dateFormat(new Date(beFormatter),'yyyy-MM-dd');
                    }
                    
                }else{
                    return row[prop];
                }
                return row[prop];
            },
            handleCurrentChange:function(val) {
                this.page.pageNum = val;
                this.loadData();
            },
            //3个
           
            
          
          
            handleClose(done){
                this.parentName = ''
                done()
            },
        },
    }
</script>

<style>
    #singleDataTableManager{
        /*height:100%;*/
        width:100%;
        /* margin:-15px; */
    }
    #singleDataTableManager th,#singleDataTableManager .el-table thead tr {
        font-size: 14px;
        background-color: #eef1f6;
        color: #1f2d3d;
    }
    .searchPanel{
        width:100%;
        /* border-bottom: 1px dotted #6161d7; */
        /* padding-bottom:10px; */
        padding-left: 10px;
        margin-top: 10px;
        box-sizing: border-box;
        /* overflow: hidden; */
    }
    .actionPanel{
        width:100%;
    }
    
    #singleDataTableManager .pagination{
        text-align: center;
    }

    #singleDataTableManager .el-select{
        width: 100%;
    }
    .menu_tree .el-tree-node__content .el-tree-node__expand-icon+span::before {
        content: url(../assets/images/place.png);
        margin-right: 6px;
    }
    .menu_tree .el-tree-node__children .el-tree-node__expand-icon+span::before {
        content: url(../assets/images/place.png);
    }
</style>