123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <template>
- <div class="bill-module-box">
- <div class="bill-module-form" v-if="searchConfig" v-show="!hideSearch">
- <by-form :propConfig="searchConfig" ref="search" />
- <div class="search-btn">
- <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
- <el-button size="mini" icon="el-icon-refresh" @click="resert">重置</el-button>
- </div>
- </div>
- <div class="bill-tool" v-if="toolConfig">
- <by-tool :propConfig="toolConfig" ref="tool" @clickHandle="clickHandle" />
- </div>
- <div class="table" v-if="tableConfig">
- <by-table :propConfig="tableConfig" ref="table" v-on="$listeners" />
- </div>
- </div>
- </template>
- <script lang="ts">
- import { Component, Prop, Vue, Watch } from "vue-property-decorator";
- @Component
- export default class BillModule extends Vue {
- config:any={}
- hideSearch = false
- @Prop()
- propConfig:any
- get searchConfig(){
- return this.config?.search ? this.config.search : null
- }
- get toolConfig(){
- return this.config?.tool ? this.config.tool : null
- }
- get tableConfig(){
- return this.config?.table ? this.config.table : null
- }
- created(){
- if(this.propConfig){
- this.setConfig(this.propConfig)
- }
- }
- setConfig(c:any){
- this.config = c?c:{}
- }
- getConfig(){
- return (this as any).$lodash.cloneDeep(this.config)
- }
- //工具栏按钮点击操作
- clickHandle(n:string){
- if(n == 'toggleSearch'){
- this.hideSearch = !this.hideSearch
- }else{
- this.$emit('clickHandle',n)
- }
- }
- //获取搜索值
- getSearchValue(){
- let value:any = {}
- if(this.$refs.search){
- value = (this.$refs.search as any).getValue()
- }
- return value
- }
- //获取表格数据
- getTableValue(){
- let data:Array<any>=[];
- if(this.$refs.table){
- data = (this.$refs.table as any).getValue();
- }
- return data;
- }
- //获取已选中表格数据
- getSelectTable(){
- let data:Array<any>=[];
- if(this.$refs.table){
- data = (this.$refs.table as any).getSelectData();
- }
- return data;
- }
- search(){
- this.$emit('search',this.getSearchValue());
- }
- //清除搜索条件
- clearSearch(){
- (this.$refs.search as any).clearValue();
- }
- resert(){
- if(this.$refs.search){
- (this.$refs.search as any).setValue({})
- }
- this.$emit('resert');
- }
- //设置表格数据
- setTableValue(data:Array<any>){
- if(this.$refs.table){
- (this.$refs.table as any).setValue(data)
- }
- }
- setPage(page:any){
- if(this.$refs.table){
- (this.$refs.table as any).setPage(page)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .bill-module-box{
- width: 100%;
- .bill-tool{
- width: 100%;
- padding-bottom: 16px;
- }
- .bill-module-form{
- padding-bottom: 8px;
- .search-btn{
- width: 100%;
- display: flex;
- justify-content: flex-end;
- }
- }
-
- }
- </style>
|