1

src/components/Form/form.vue

@@ -1,278 +1,290 @@
<template>
	<div>
		<el-row :gutter="40">
			<template v-for="(item, k) in fields">
				<el-col v-if="!item.isHide" :span="(item.span||1)/columnNum * 24" :key="k">
					<el-form-item  :label="item.label" :prop="item.id">
						<slot v-if="$scopedSlots[item.id]" :name="item.id" :config="item" />
						<template v-else>
							<el-input v-bind="item" v-if="item.type=='text'||item.type=='number'||item.type=='digit'" v-model="form[item.id]" :placeholder="item.placeholder" clearable/>
							<el-input
								v-bind="item"
								v-if="item.type=='textarea'"
								v-model="form[item.id]">
							</el-input>
							<el-date-picker
								v-else-if="item.type=='daterange'||item.type=='monthrange'"
								v-model="form[item.id]"
								:start-placeholder="item.label+ '起'"
								:end-placeholder="item.label+ '至'"
								align="right"
								unlink-panels
								:value-format="item.format||(item.type=='monthrange'? 'yyyy-MM' : 'yyyy-MM-dd' )"
								range-separator="至"
								:picker-options="item.pickerOptions || pickerOptions"
								v-bind="item"
								>
							</el-date-picker>
							<el-date-picker
								v-bind="item"
								clearable
								v-else-if="item.type=='date'||item.type=='year'||item.type=='month'||item.type=='week'||item.type=='dates'||item.type=='datetime'"
								v-model="form[item.id]"
								:value-format="item.format||(item.type=='year'? 'yyyy' : item.type=='month'? 'yyyy-MM' : item.type=='datetime'? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd' )"
								>
							</el-date-picker>
							<el-select 
								v-else-if="item.type=='select'"
								v-model="form[item.id]"
								clearable 
								v-bind="item"
								@change="onSelChange($event, item)"
								v-on="item.evts"
								>
								<el-option
									v-for="opt in item.optionList"
									:key="opt.value"
									:label="opt.label"
									:value="opt.value">
								</el-option>
							</el-select>
							<Upload
								:configs="item"
								v-else-if="item.type=='photo'"
								v-model="form[item.id]">
							</Upload>
							<el-image v-else-if="item.type=='image'" style="width: 100px; height: 100px" :src="form[item.id]" :preview-src-list="[item.srcList]"></el-image>
							<template v-else-if="item.type=='radio'">
								<el-radio 
									v-for="opt in item.optionList" 
									:key="opt.value" 
									v-model="form[item.id]" 
									@change="onSelChange($event, item)"
									:label="opt.value">{{opt.label}}</el-radio>
							</template>
							<template v-else-if="item.type=='checkbox'">
								<el-checkbox-group 
									@change="onCheckboxChange($event, item)"
									v-model="form[item.id]">
									<el-checkbox 
										v-for="opt in item.optionList" 
										:key="opt.value" 
										:label="opt.value">
										{{opt.label}}
									</el-checkbox>
								</el-checkbox-group>
							</template>
							<div v-else-if="item.type=='inputNumber'">
								<el-input-number  v-model="form[item.id]" :controls-position="item.controlsPosition||''" v-bind="item.elmentCfg" :placeholder="item.placeholder" :min="item.min||0" :max="item.max"></el-input-number>
								<span v-if="item.afterText" class="ml5">{{item.afterText}}</span>
							</div>
							<template v-else-if="item.type=='richtext'">
								<QuillEditor 
									ref="formQuillTextEditor"
									v-model="form[item.id]" 
									@blur="onEditorBlur($event, item)"
									@focus="onEditorFocus($event, item)"
									@ready="onEditorReady($event, item)"  
									@change="onEditorChange($event, item)">
								</QuillEditor>
							</template>
							<div v-else-if="item.type=='label'"  >
								{{form[item.id]}}
							</div>
						</template>
					</el-form-item>
					<slot v-if="$scopedSlots[item.id+'_tips']" :name="item.id+'_tips'" :config="item" />
				</el-col>
			</template>
		</el-row>
	</div>
  <div>
    <el-row :gutter="40">
      <template v-for="(item, k) in fields">
        <el-col v-if="!item.isHide" :span="((item.span || 1) / columnNum) * 24" :key="k">
          <el-form-item :label="item.label" :prop="item.id">
            <slot v-if="$scopedSlots[item.id]" :name="item.id" :config="item" />
            <template v-else>
              <el-input
                v-bind="item"
                v-if="item.type == 'text' || item.type == 'number' || item.type == 'digit'"
                v-model="form[item.id]"
                :placeholder="item.placeholder"
                clearable
                show-word-limit />
              <el-input v-bind="item" v-if="item.type == 'textarea'" v-model="form[item.id]"></el-input>
              <el-date-picker
                v-else-if="item.type == 'daterange' || item.type == 'monthrange'"
                v-model="form[item.id]"
                :start-placeholder="item.label + '起'"
                :end-placeholder="item.label + '至'"
                align="right"
                unlink-panels
                :value-format="item.format || (item.type == 'monthrange' ? 'yyyy-MM' : 'yyyy-MM-dd')"
                range-separator="至"
                :picker-options="item.pickerOptions || pickerOptions"
                v-bind="item"></el-date-picker>
              <el-date-picker
                v-bind="item"
                clearable
                v-else-if="
                  item.type == 'date' ||
                  item.type == 'year' ||
                  item.type == 'month' ||
                  item.type == 'week' ||
                  item.type == 'dates' ||
                  item.type == 'datetime'
                "
                v-model="form[item.id]"
                :value-format="
                  item.format ||
                  (item.type == 'year'
                    ? 'yyyy'
                    : item.type == 'month'
                    ? 'yyyy-MM'
                    : item.type == 'datetime'
                    ? 'yyyy-MM-dd HH:mm:ss'
                    : 'yyyy-MM-dd')
                "></el-date-picker>
              <el-select
                v-else-if="item.type == 'select'"
                v-model="form[item.id]"
                clearable
                v-bind="item"
                @change="onSelChange($event, item)"
                v-on="item.evts">
                <el-option
                  v-for="opt in item.optionList"
                  :key="opt.value"
                  :label="opt.label"
                  :value="opt.value"></el-option>
              </el-select>
              <Upload :configs="item" v-else-if="item.type == 'photo'" v-model="form[item.id]"></Upload>
              <el-image
                v-else-if="item.type == 'image'"
                style="width: 100px; height: 100px"
                :src="form[item.id]"
                :preview-src-list="[item.srcList]"></el-image>
              <template v-else-if="item.type == 'radio'">
                <el-radio
                  v-for="opt in item.optionList"
                  :key="opt.value"
                  v-model="form[item.id]"
                  @change="onSelChange($event, item)"
                  :label="opt.value">
                  {{ opt.label }}
                </el-radio>
              </template>
              <template v-else-if="item.type == 'checkbox'">
                <el-checkbox-group @change="onCheckboxChange($event, item)" v-model="form[item.id]">
                  <el-checkbox v-for="opt in item.optionList" :key="opt.value" :label="opt.value">
                    {{ opt.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
              <div v-else-if="item.type == 'inputNumber'">
                <el-input-number
                  v-model="form[item.id]"
                  :controls-position="item.controlsPosition || ''"
                  v-bind="item.elmentCfg"
                  :placeholder="item.placeholder"
                  :min="item.min || 0"
                  :max="item.max"></el-input-number>
                <span v-if="item.afterText" class="ml5">{{ item.afterText }}</span>
              </div>
              <template v-else-if="item.type == 'richtext'">
                <QuillEditor
                  ref="formQuillTextEditor"
                  v-model="form[item.id]"
                  @blur="onEditorBlur($event, item)"
                  @focus="onEditorFocus($event, item)"
                  @ready="onEditorReady($event, item)"
                  @change="onEditorChange($event, item)"></QuillEditor>
              </template>
              <div v-else-if="item.type == 'label'">
                {{ form[item.id] }}
              </div>
            </template>
          </el-form-item>
          <slot v-if="$scopedSlots[item.id + '_tips']" :name="item.id + '_tips'" :config="item" />
        </el-col>
      </template>
    </el-row>
  </div>
</template>
<script>
import QuillEditor from '../QuillEditor'
import Upload from './Upload'
import {pickerOptions} from '../js/common'
import { pickerOptions } from '../js/common'
import Tools from '../../utils/tool'
export default {
	props: {
		fields: {},
		columnNum: {},
		form: {},
	},
	components:{
		Upload,
		QuillEditor
	},
	computed:{
		
	},
	data(){
		return {
			rows: "",
			pickerOptions,
		}
	},
	created(){
		this.fields.forEach((v, i) => {
			this.loadDict(v)
		});
	},
	mounted() {
		
	},
	methods: {
		loadDict(item){
			if(!item.optionListLoadConfig){
				return
			}
			if(!Tools.dictLoad){
				return
			}
			Tools.dictLoad(item.optionListLoadConfig).then(res=>{
				item.optionList = res
			})
		},
		onSelChange(value, item){
			if(item.multiple){
				if(item.valueName.length < value.length){
					var exist = _.find(item.optionList, (v)=>{
						return v.value == value[value.length - 1]
					})
					item.valueName.push(exist.label)
				} else {
					if(value.length == 0){
						item.valueName = []
					} else {
						_.each(item._value_bak, (v, i)=>{
							if(value.indexOf(v) === -1){
								item.valueName.splice(i, 1)
							}
						})
					}
				}
				item._value_bak = _.assign([], value)
			} 
			
			if(item.onChange){
				if(item.multiple){
					item.onChange(value, item.valueName)
				} else {
					var exist = _.filter(item.optionList, (v)=>{
						return v.value == value
					})
					item.onChange(exist)
				}
			}
		},
		onCheckboxChange(values, item){
			if(item.onChange){
				var exist = []
				values.forEach(m=>{
					exist = exist.concat(_.filter(item.optionList, (v)=>{
						return v.value == m
					})) 
				})
				item.onChange(exist)
			}
		},
  props: {
    fields: {},
    columnNum: {},
    form: {}
  },
  components: {
    Upload,
    QuillEditor
  },
  computed: {},
  data() {
    return {
      rows: '',
      pickerOptions
    }
  },
  created() {
    this.fields.forEach((v, i) => {
      this.loadDict(v)
    })
  },
  mounted() {},
  methods: {
    loadDict(item) {
      if (!item.optionListLoadConfig) {
        return
      }
      if (!Tools.dictLoad) {
        return
      }
      Tools.dictLoad(item.optionListLoadConfig).then(res => {
        item.optionList = res
      })
    },
    onSelChange(value, item) {
      if (item.multiple) {
        if (item.valueName.length < value.length) {
          var exist = _.find(item.optionList, v => {
            return v.value == value[value.length - 1]
          })
          item.valueName.push(exist.label)
        } else {
          if (value.length == 0) {
            item.valueName = []
          } else {
            _.each(item._value_bak, (v, i) => {
              if (value.indexOf(v) === -1) {
                item.valueName.splice(i, 1)
              }
            })
          }
        }
        item._value_bak = _.assign([], value)
      }
		//富文本编辑  新增 start
		// resetEditorOption(editorOption){
		// 	if(editorOption){
		// 		return editorOption
		// 	}
		// 	return defaultEditorOption
		// },
		onEditorBlur(editor, item) {
          	this.$emit('onEditorBlur', {editor, item})
		},
		onEditorFocus(editor, item) {
			this.$emit('onEditorFocus', {editor, item})
		},
		onEditorReady(editor, item) {
			this.$emit('onEditorReady', {editor, item})
		},
		onEditorChange({editor, html, text}, item) {
			this.$emit('onEditorChange', {editor, html, text, item})
        },
        // newEditorbeforeupload(file){                       
        //     var $uptypes = ["image/jpg", "image/png",'image/jpeg'];
        //     const isJPG = $uptypes.indexOf(file.type) > -1;
        //     const isLt3M = file.size / 1024 / 1024 < 3;
        //     this.uploadLoading = this.$loading({
        //         background: 'rgba(0, 0, 0, 0.2)',
        //         text: '上传中'
        //     })
        //     if (!isJPG) {
        //         this.uploadLoading.close()
        //         this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        //     }
        //     if (!isLt3M) {
        //         this.uploadLoading.close()
        //         this.$message.error("上传头像图片大小不能超过 3MB!");
        //     }
        //     return isJPG && isLt3M;  
                                                              
        // },
        // newEditorSuccess(res, file, fileList){
		// 	var vm = this
        //     if(res.status==200){ 
        //         var image = Tools.formatImgUrl(res.obj.fullUri),
        //             addImgRange = this.$refs.formQuillTextEditor.quill.getSelection()
        //         var length = addImgRange.index,quill = vm.$refs.formQuillTextEditor.quill
        //             quill.insertEmbed(addImgRange != null?length:0, 'image',image)
        //             quill.setSelection(length + 1);
        //     }else{ 
        //         vm.$message.error("图片上传失败！"); 
        //     }
        //     if (this.uploadLoading) {
        //         this.uploadLoading.close()
        //     }
		// },
		// addQuillTitle () {
		// 	const oToolBar = document.querySelector('.ql-toolbar')
		// 	const aButton = oToolBar.querySelectorAll('button')
		// 	const aSelect = oToolBar.querySelectorAll('select')
		// 	aButton.forEach(function (item) {
		// 		if (item.className === 'ql-script') {
		// 		item.value === 'sub' ? (item.title = '下标') : (item.title = '上标')
		// 		} else if (item.className === 'ql-indent') {
		// 		item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进')
		// 		} else {
		// 		item.title = titleConfig[item.classList[0]]
		// 		}
		// 	})
		// 	aSelect.forEach(function (item) {
		// 		item.parentNode.title = titleConfig[item.classList[0]]
		// 	})
		// },
		//富文本编辑  新增  end
	}
      if (item.onChange) {
        if (item.multiple) {
          item.onChange(value, item.valueName)
        } else {
          var exist = _.filter(item.optionList, v => {
            return v.value == value
          })
          item.onChange(exist)
        }
      }
    },
    onCheckboxChange(values, item) {
      if (item.onChange) {
        var exist = []
        values.forEach(m => {
          exist = exist.concat(
            _.filter(item.optionList, v => {
              return v.value == m
            })
          )
        })
        item.onChange(exist)
      }
    },
    //富文本编辑  新增 start
    // resetEditorOption(editorOption){
    // 	if(editorOption){
    // 		return editorOption
    // 	}
    // 	return defaultEditorOption
    // },
    onEditorBlur(editor, item) {
      this.$emit('onEditorBlur', { editor, item })
    },
    onEditorFocus(editor, item) {
      this.$emit('onEditorFocus', { editor, item })
    },
    onEditorReady(editor, item) {
      this.$emit('onEditorReady', { editor, item })
    },
    onEditorChange({ editor, html, text }, item) {
      this.$emit('onEditorChange', { editor, html, text, item })
    }
    // newEditorbeforeupload(file){
    //     var $uptypes = ["image/jpg", "image/png",'image/jpeg'];
    //     const isJPG = $uptypes.indexOf(file.type) > -1;
    //     const isLt3M = file.size / 1024 / 1024 < 3;
    //     this.uploadLoading = this.$loading({
    //         background: 'rgba(0, 0, 0, 0.2)',
    //         text: '上传中'
    //     })
    //     if (!isJPG) {
    //         this.uploadLoading.close()
    //         this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
    //     }
    //     if (!isLt3M) {
    //         this.uploadLoading.close()
    //         this.$message.error("上传头像图片大小不能超过 3MB!");
    //     }
    //     return isJPG && isLt3M;
    // },
    // newEditorSuccess(res, file, fileList){
    // 	var vm = this
    //     if(res.status==200){
    //         var image = Tools.formatImgUrl(res.obj.fullUri),
    //             addImgRange = this.$refs.formQuillTextEditor.quill.getSelection()
    //         var length = addImgRange.index,quill = vm.$refs.formQuillTextEditor.quill
    //             quill.insertEmbed(addImgRange != null?length:0, 'image',image)
    //             quill.setSelection(length + 1);
    //     }else{
    //         vm.$message.error("图片上传失败！");
    //     }
    //     if (this.uploadLoading) {
    //         this.uploadLoading.close()
    //     }
    // },
    // addQuillTitle () {
    // 	const oToolBar = document.querySelector('.ql-toolbar')
    // 	const aButton = oToolBar.querySelectorAll('button')
    // 	const aSelect = oToolBar.querySelectorAll('select')
    // 	aButton.forEach(function (item) {
    // 		if (item.className === 'ql-script') {
    // 		item.value === 'sub' ? (item.title = '下标') : (item.title = '上标')
    // 		} else if (item.className === 'ql-indent') {
    // 		item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进')
    // 		} else {
    // 		item.title = titleConfig[item.classList[0]]
    // 		}
    // 	})
    // 	aSelect.forEach(function (item) {
    // 		item.parentNode.title = titleConfig[item.classList[0]]
    // 	})
    // },
    //富文本编辑  新增  end
  }
}
</script>
<style scoped lang="scss">
.form-com{
	.el-form-item{
		width: auto;
		/deep/ .el-form-item__content{
			text-align: left;
		}
		/deep/ .ql-editor{
			min-height: 150px;
		}
	}
.form-com {
  .el-form-item {
    width: auto;
    /deep/ .el-form-item__content {
      text-align: left;
    }
    /deep/ .ql-editor {
      min-height: 150px;
    }
  }
}
</style>

src/components/TablePage/index.vue

@@ -1,346 +1,371 @@
<template>
	<div class="table-page-com">
		<template v-if="inited">
		<div class="search-bar" v-if="showSearchBar">
			<el-form :inline="true">
				<template v-for="(item, i) in configs.columns">
					<el-form-item :label="item.showLabel===false? '' : item.label" :key="i" v-if="item.isSearch" :class="{'radioGroup-item':item.type=='radioGroup'}">
						<slot v-if="$scopedSlots[item.id+'Search']" :name="item.id+'Search'"/>
						<template v-else>
							<el-input v-if="item.type=='text'" v-model="searchForm[item.id]" :placeholder="item.placeholder||item.label" clearable/>
							<el-date-picker
								:key="i"
								v-else-if="item.type=='daterange'"
								v-model="searchForm[item.id]"
								:start-placeholder="item.label+ '起'"
								:end-placeholder="item.label+ '至'"
								type="daterange"
								align="right"
								unlink-panels
								value-format="yyyy-MM-dd"
								range-separator="至"
								:picker-options="pickerOptions">
							</el-date-picker>
							<el-date-picker
								clearable
								:key="i"
								v-else-if="item.type=='date'"
								v-model="searchForm[item.id]"
								value-format="yyyy-MM-dd"
								type="date"
								:placeholder="item.label">
							</el-date-picker>
							<el-date-picker
								:key="i"
								v-else-if="item.type=='datetimerange'"
								v-model="searchForm[item.id]"
								:start-placeholder="'开始时间'"
								:end-placeholder="'结束时间'"
								type="datetimerange"
								align="right"
								unlink-panels
								value-format="yyyy-MM-dd HH:mm:ss"
								range-separator="至"
								:picker-options="pickerOptions"
								:default-time="['00:00:00', '23:59:59']">
							</el-date-picker>
							<el-select 
								v-else-if="item.type=='select'"
								:key="i"
								:placeholder="item.label"
								v-model="searchForm[item.id]"
								:filterable="item.filterable"
								:clearable="item.clearable===false? false : true"  >
								<el-option
									v-for="item in item.optionList"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
							<el-radio-group v-else-if="item.type=='radioGroup'" v-model="searchForm[item.id]">
								<el-radio-button v-for="item in item.optionList" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
							</el-radio-group>
							<el-cascader
								v-else-if="item.type=='cascader'"
								clearable
								:props="item.cascaderProps || cascaderProps"
								v-model="searchForm[item.id]"
								:options="item.optionList">
							</el-cascader>	
						</template>
					</el-form-item>
				</template>
				<el-form-item class="mb22">
					<el-button v-if="showSearchButton" type="primary" icon="el-icon-search" @click="page=1;emitLoad()">查询</el-button>
					<el-button @click="$emit('onAdd')" v-if="configs.showAddButton" type="success" icon="el-icon-circle-plus-outline">新增</el-button>
					<slot name="topBanner" :data="searchForm"></slot>
				</el-form-item>
			</el-form>
		</div>
  <div class="table-page-com">
    <template v-if="inited">
      <div class="search-bar" v-if="showSearchBar">
        <el-form :inline="true">
          <template v-for="(item, i) in configs.columns">
            <el-form-item
              :label="item.showLabel === false ? '' : item.label"
              :key="i"
              v-if="item.isSearch"
              :class="{ 'radioGroup-item': item.type == 'radioGroup' }">
              <slot v-if="$scopedSlots[item.id + 'Search']" :name="item.id + 'Search'" />
              <template v-else>
                <el-input
                  v-if="item.type == 'text'"
                  v-model="searchForm[item.id]"
                  :placeholder="item.placeholder || item.label"
                  clearable />
                <el-date-picker
                  :key="i"
                  v-else-if="item.type == 'daterange'"
                  v-model="searchForm[item.id]"
                  :start-placeholder="item.label + '起'"
                  :end-placeholder="item.label + '至'"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  :picker-options="pickerOptions"></el-date-picker>
                <el-date-picker
                  clearable
                  :key="i"
                  v-else-if="item.type == 'date'"
                  v-model="searchForm[item.id]"
                  value-format="yyyy-MM-dd"
                  type="date"
                  :placeholder="item.label"></el-date-picker>
                <el-date-picker
                  :key="i"
                  v-else-if="item.type == 'datetimerange'"
                  v-model="searchForm[item.id]"
                  :start-placeholder="'开始时间'"
                  :end-placeholder="'结束时间'"
                  type="datetimerange"
                  align="right"
                  unlink-panels
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  :picker-options="pickerOptions"
                  :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                <el-select
                  v-else-if="item.type == 'select'"
                  :key="i"
                  :placeholder="item.label"
                  v-model="searchForm[item.id]"
                  :filterable="item.filterable == true ? true : false"
                  :filterable="item.filterable"
                  :clearable="item.clearable === false ? false : true">
                  <el-option
                    v-for="item in item.optionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
                <el-radio-group v-else-if="item.type == 'radioGroup'" v-model="searchForm[item.id]">
                  <el-radio-button v-for="item in item.optionList" :label="item.value" :key="item.value">
                    {{ item.label }}
                  </el-radio-button>
                </el-radio-group>
                <el-cascader
                  v-else-if="item.type == 'cascader'"
                  clearable
                  :props="item.cascaderProps || cascaderProps"
                  v-model="searchForm[item.id]"
                  :options="item.optionList"></el-cascader>
              </template>
            </el-form-item>
          </template>
          <el-form-item class="mb22">
            <el-button
              v-if="showSearchButton"
              type="primary"
              icon="el-icon-search"
              @click="
                page = 1
                emitLoad()
              ">
              查询
            </el-button>
            <el-button
              @click="$emit('onAdd')"
              v-if="configs.showAddButton"
              type="success"
              icon="el-icon-circle-plus-outline">
              新增
            </el-button>
            <slot name="topBanner" :data="searchForm"></slot>
          </el-form-item>
        </el-form>
      </div>
		<div class="box-flex-1 table-content" style="position:relative">
			<div style="position:absolute;height:100%;width:100%">
				<el-table ref="table" v-on="$listeners" v-bind="$attrs" v-loading="loading" header-row-class-name="cus-table-header" :border="$attrs.border!==false? true : false" :height="$attrs.height===false? '' :  ($attrs.height||'100%')" style="width: 100%; ">
					<el-table-column
						v-if="configs.selection"
						type="selection"
						align="center"
						width="55">
					</el-table-column>
					<el-table-column
						v-else-if="configs.showSort!==false"
						type="index"
						label="序号"
						align="center"
						width="50">
					</el-table-column>
					<el-table-column
						v-if="configs.expand"
						type="expand">
						<template slot-scope="props">
							<slot name="expandColumn" :data="props" />
						</template>
					</el-table-column>
      <div class="box-flex-1 table-content" style="position: relative">
        <div style="position: absolute; height: 100%; width: 100%">
          <el-table
            ref="table"
            v-on="$listeners"
            v-bind="$attrs"
            v-loading="loading"
            header-row-class-name="cus-table-header"
            :border="$attrs.border !== false ? true : false"
            :height="$attrs.height === false ? '' : $attrs.height || '100%'"
            style="width: 100%">
            <el-table-column v-if="configs.selection" type="selection" align="center" width="55"></el-table-column>
            <el-table-column
              v-else-if="configs.showSort !== false"
              type="index"
              label="序号"
              align="center"
              width="50"></el-table-column>
            <el-table-column v-if="configs.expand" type="expand">
              <template slot-scope="props">
                <slot name="expandColumn" :data="props" />
              </template>
            </el-table-column>
					<template v-for="(item, i) in configs.columns">
						<el-table-column 
							v-if="item.isHide!==true" 
							:key="i" 
							:prop="item.id" 
							v-bind="resetBind(item) "
							:label="item.label" 
							:width="item.width||''" 
							:align="item.align || 'left'" 
							>
							<template  slot-scope="scope">
								<slot v-if="$scopedSlots[item.id]" :name="item.id" :row="scope.row" />
								<span v-else>{{scope.row[item.id]}}</span>
							</template>
						</el-table-column>
					</template>
            <template v-for="(item, i) in configs.columns">
              <el-table-column
                v-if="item.isHide !== true"
                :key="i"
                :prop="item.id"
                v-bind="resetBind(item)"
                :label="item.label"
                :width="item.width || ''"
                :align="item.align || 'left'">
                <template slot-scope="scope">
                  <slot v-if="$scopedSlots[item.id]" :name="item.id" :row="scope.row" />
                  <span v-else>{{ scope.row[item.id] }}</span>
                </template>
              </el-table-column>
            </template>
					
					<el-table-column v-if="$scopedSlots['operateColumn']" :fixed="configs.operateColumnFix||false" :width="configs.operateColumnWidth||''" label="操作" :align="configs.operateColumnAlign||'center'">
						<template slot-scope="scope">
							<slot name="operateColumn" :row="scope.row" />
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
            <el-table-column
              v-if="$scopedSlots['operateColumn']"
              :fixed="configs.operateColumnFix || false"
              :width="configs.operateColumnWidth || ''"
              label="操作"
              :align="configs.operateColumnAlign || 'center'">
              <template slot-scope="scope">
                <slot name="operateColumn" :row="scope.row" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
		<!-- 分页 -->
		<div class="bot-pagination" v-if="configs.pagination!==false">
			<div class="bot-pagination-left">
				<slot name="bot-pagination-left" ></slot>
			</div>
			<el-pagination
				:current-page="page"
				:page-sizes="[20, 50, 100, 150, 200]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount"
				:pager-count="configs.pagerCount||7"
				class="pagination"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
		</template>
	</div>
      <!-- 分页 -->
      <div class="bot-pagination" v-if="configs.pagination !== false">
        <div class="bot-pagination-left">
          <slot name="bot-pagination-left"></slot>
        </div>
        <el-pagination
          :current-page="page"
          :page-sizes="[20, 50, 100, 150, 200]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          :pager-count="configs.pagerCount || 7"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </template>
  </div>
</template>
<script>
import Tools from '../../utils/tool'
import _ from 'lodash'
export default {
	name: 'CustomTable',
	props: ['totalCount', 'configs', 'loading', 'pagerCount'],
	data(){
		return {
			pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
			size: 50,
			page: 1,
			searchForm: "",
			inited: true,
			cascaderProps: {
                children: 'childList',
                value: "id",
				label: "name",
				checkStrictly: true
            },
		}
	},
	computed:{
		showSearchBar(){
			var res = _.filter(this.configs.columns, (item)=>{
				return item.isSearch
			})
			return this.showSearchButton || this.configs.showAddButton
		},
		showSearchButton(){
			var res = _.filter(this.configs.columns, (item)=>{
				return item.isSearch
			})
			return res.length>0
		}
	},
	watch: {
		totalCount: {
			handler(n){
				if(n){
					this.$nextTick(v=>{
						this.$refs.table&&this.$refs.table.doLayout()
					})
				}
			},
		},
		searchForm: {
			handler(n){
				this.$emit('getSearchForm', n)
			},
			deep: true
		},
	},
	created(){
		var searchForm = {}
		this.configs.columns.forEach(v => {
			if(v.isSearch){
				searchForm[v.id] = v.value || ""
				this.loadDict(v)
			}
		});
		this.searchForm = searchForm
	},
	mounted() {
		if(this.configs.immediate !== false){
			this.emitLoad()
		}
	},
	methods: {
		loadDict(item){
			if(!item.optionListLoadConfig){
				return
			}
			if(!Tools.dictLoad){
				return
			}
			Tools.dictLoad(item.optionListLoadConfig).then(res=>{
				item.optionList = res
				if(item.autocomplete && item.optionList && item.optionList.length){
					this.searchForm[item.id] = item.optionList[0].value
				}
				this.$emit('dictLoaded', item)
			})
		},
		emitLoad(){
			this.$emit('onLoad', {
				size: this.size, 
				page: this.page,
				searchForm: this.searchForm
			})
		},
		handleSizeChange(val) {
            this.size = val
			this.page = 1
			this.emitLoad()
        },
        handleCurrentChange(val) {
			this.page = val
			this.emitLoad()
		},
		refresh(force){
			if(force){
				this.page = 1
			}
			this.emitLoad()
		},
		setSearchValue(key, value){
			this.searchForm[key] = value
		},
		setOptions(configs, key, options){
			configs.columns.forEach(v=>{
				if(v.id == key){
					v.optionList = options
				}
			})
		},
		resetBind(item){
			var tmp = _.assign({}, item)
			delete tmp['type']
			return tmp
		}
	}
  name: 'CustomTable',
  props: ['totalCount', 'configs', 'loading', 'pagerCount'],
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      size: 50,
      page: 1,
      searchForm: '',
      inited: true,
      cascaderProps: {
        children: 'childList',
        value: 'id',
        label: 'name',
        checkStrictly: true
      }
    }
  },
  computed: {
    showSearchBar() {
      var res = _.filter(this.configs.columns, item => {
        return item.isSearch
      })
      return this.showSearchButton || this.configs.showAddButton
    },
    showSearchButton() {
      var res = _.filter(this.configs.columns, item => {
        return item.isSearch
      })
      return res.length > 0
    }
  },
  watch: {
    totalCount: {
      handler(n) {
        if (n) {
          this.$nextTick(v => {
            this.$refs.table && this.$refs.table.doLayout()
          })
        }
      }
    },
    searchForm: {
      handler(n) {
        this.$emit('getSearchForm', n)
      },
      deep: true
    }
  },
  created() {
    var searchForm = {}
    this.configs.columns.forEach(v => {
      if (v.isSearch) {
        searchForm[v.id] = v.value || ''
        this.loadDict(v)
      }
    })
    this.searchForm = searchForm
  },
  mounted() {
    if (this.configs.immediate !== false) {
      this.emitLoad()
    }
  },
  methods: {
    loadDict(item) {
      if (!item.optionListLoadConfig) {
        return
      }
      if (!Tools.dictLoad) {
        return
      }
      Tools.dictLoad(item.optionListLoadConfig).then(res => {
        item.optionList = res
        if (item.autocomplete && item.optionList && item.optionList.length) {
          this.searchForm[item.id] = item.optionList[0].value
        }
        this.$emit('dictLoaded', item)
      })
    },
    emitLoad() {
      this.$emit('onLoad', {
        size: this.size,
        page: this.page,
        searchForm: this.searchForm
      })
    },
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      this.emitLoad()
    },
    handleCurrentChange(val) {
      this.page = val
      this.emitLoad()
    },
    refresh(force) {
      if (force) {
        this.page = 1
      }
      this.emitLoad()
    },
    setSearchValue(key, value) {
      this.searchForm[key] = value
    },
    setOptions(configs, key, options) {
      configs.columns.forEach(v => {
        if (v.id == key) {
          v.optionList = options
        }
      })
    },
    resetBind(item) {
      var tmp = _.assign({}, item)
      delete tmp['type']
      return tmp
    }
  }
}
</script>
<style scoped lang="scss">
.table-page-com{
	display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 100%;
	.table-content{
		-webkit-box-flex: 1;
		
	}
    .bot-pagination{
		height: 50px;
		.pagination {
            float: right;
            margin-top: 11px;
			padding: 0;
        }
		.bot-pagination-left{
			float: left;
			margin-top: 12px;
		}
	}
	.el-form-item{
		width: auto;
		margin-right: 24px;
	}
	.mb22{
		margin-bottom: 22px;
	}
.table-page-com {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: 100%;
  .table-content {
    -webkit-box-flex: 1;
  }
  .bot-pagination {
    height: 50px;
    .pagination {
      float: right;
      margin-top: 11px;
      padding: 0;
    }
    .bot-pagination-left {
      float: left;
      margin-top: 12px;
    }
  }
  .el-form-item {
    width: auto;
    margin-right: 24px;
  }
  .mb22 {
    margin-bottom: 22px;
  }
}
</style>
<style lang="scss">
.table-page-com{
	.radioGroup-item{
		display: block;
	}
	.cus-table-header{
		th.el-table__cell{
			background-color: #F0F2F5;
		}
		
	}
.table-page-com {
  .radioGroup-item {
    display: block;
  }
  .cus-table-header {
    th.el-table__cell {
      background-color: #f0f2f5;
    }
  }
}
</style>