moduleView.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <div class="module-view"
  3. :style="{height:attrs.calculateH?'100%':'auto'}"
  4. v-loading="load"
  5. :ref="viewID"
  6. element-loading-text="拼命加载中"
  7. element-loading-spinner="el-icon-loading"
  8. element-loading-background="rgba(0, 0, 0, 0.5)"
  9. >
  10. <transition name="el-zoom-in-top">
  11. <div class="search" v-if="searchConfig" v-show="!hideSearch">
  12. <by-form :propConfig="searchConfig" :ref="searchID"></by-form>
  13. <div class="search-btn">
  14. <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>
  15. <el-button size="small" icon="el-icon-refresh" @click="resert">重置</el-button>
  16. </div>
  17. </div>
  18. </transition>
  19. <div class="tool-box" v-if="toolConfig">
  20. <by-tool :propConfig="toolConfig" :ref="toolID" @clickHandle="clickHandle" />
  21. </div>
  22. <div class="module-main" v-if="tableConfig">
  23. <slot name="left"></slot>
  24. <div class="table">
  25. <by-table :propConfig="tableConfig" :ref="tableID" @pagination="paginationChange" @detail="detail" @onChangeRow="onChangeRow" />
  26. </div>
  27. </div>
  28. <transition name="el-zoom-in-center" v-if="modalConfig">
  29. <div class="view-modal" v-show="modalShow">
  30. <div class="tool-box" v-if="modalConfig.tool">
  31. <by-tool :propConfig="modalConfig.tool" @clickHandle="modalHandle" ref="toolForm" />
  32. </div>
  33. <div class="view-form">
  34. <by-form :propConfig="modalConfig.form" :ref="formID"></by-form>
  35. </div>
  36. </div>
  37. </transition>
  38. </div>
  39. </template>
  40. <script lang="ts">
  41. import { Component, Prop, Vue, Watch,Mixins } from "vue-property-decorator";
  42. import ModuleViewHandle from '@/benyun/compVue/ModuleViewHandle'
  43. interface Page{
  44. pageNo?:number,
  45. pageSize?:number,
  46. total?:number
  47. }
  48. @Component
  49. export default class ModuleView extends ModuleViewHandle {
  50. modalShow=false;
  51. get attrs(){
  52. return this.config.attr ? this.config.attr : {};
  53. }
  54. //搜索配置
  55. get searchConfig(){
  56. return this.config?.search ? this.config.search : null;
  57. }
  58. //工具栏配置
  59. get toolConfig(){
  60. return this.config?.tool ? this.config.tool : null
  61. }
  62. //表格配置
  63. get tableConfig(){
  64. return this.config?.table ? this.config.table : null
  65. }
  66. //弹窗
  67. get modalConfig(){
  68. return this.config.modal ? this.config.modal : null
  69. }
  70. calculateCount=0;
  71. created(){
  72. if(this.propConfig){
  73. this.setConfig(this.propConfig)
  74. }
  75. }
  76. mounted(){
  77. // this.getList()
  78. this.$nextTick(()=>{
  79. if(this.attrs.calculateH){
  80. this.initTable();
  81. }
  82. })
  83. }
  84. //设置表格配置
  85. setTableConfig(config:any){
  86. if(this.$refs[this.tableID]){
  87. (this.$refs[this.tableID] as any).setConfig(config)
  88. }
  89. }
  90. initTable(){
  91. if(!this.$refs[this.tableID]){
  92. this.calculateCount ++;
  93. if(this.calculateCount > 5){
  94. return
  95. }
  96. setTimeout(()=>{
  97. this.initTable()
  98. },500)
  99. return
  100. }
  101. let fHeight = 0;
  102. let tHeight = 0;
  103. let vHeight = (this as any).$el.offsetHeight;
  104. if(this.$refs[this.searchID] && !this.hideSearch){
  105. fHeight = (this.$refs[this.searchID] as any).$el.offsetHeight + 32 + 8;
  106. }
  107. if(this.$refs[this.toolID]){
  108. tHeight = (this.$refs[this.toolID] as any).$el.offsetHeight + 16;
  109. }
  110. if(this.config.table && vHeight > 0){
  111. const h = vHeight - 32 - fHeight - tHeight - 48;
  112. this.config.table.attr.height = h;
  113. if(this.$refs[this.tableID]){
  114. (this.$refs[this.tableID] as any).recalculate();
  115. }
  116. }
  117. }
  118. search(){
  119. (this.$refs[this.tableID] as any).setPage({pageNo:1,total:0});
  120. this.$emit('search');
  121. // this.searchHandle()
  122. }
  123. detail(row:any){
  124. this.$emit('detail',row);
  125. if(this.$refs[this.formID]){
  126. (this.$refs[this.formID] as any).setValue(row);
  127. this.modalShow = true;
  128. }
  129. }
  130. //清除搜索条件
  131. clearSearch(){
  132. (this.$refs[this.searchID] as any).clearValue();
  133. }
  134. resert(){
  135. this.resertHandle()
  136. }
  137. clickHandle(e:string){
  138. if(e == 'onAdd'){
  139. this.modalShow = true;
  140. }
  141. if((this as any)[e]){
  142. (this as any)[e]()
  143. }else{
  144. this.$emit('clickHandle',e)
  145. }
  146. if(e == 'toggleSearch'&&this.attrs.calculateH){
  147. this.calculateCount=0;
  148. setTimeout(()=>{
  149. this.initTable()
  150. },100)
  151. }
  152. }
  153. //弹窗工具栏
  154. modalHandle(e:string){
  155. if(e == 'onReturn'){
  156. this.modalShow = false;
  157. (this.$refs[this.formID] as any).clearValue();
  158. }else{
  159. this.$emit('modalHandle',e)
  160. }
  161. }
  162. closeModal(){
  163. this.modalShow=false;
  164. }
  165. getSelectData(){
  166. let data:Array<any>=[];
  167. if(this.$refs[this.tableID]){
  168. data=(this.$refs[this.tableID] as any).getSelectData()
  169. }
  170. return data;
  171. }
  172. //清除选中表格
  173. clearCheckboxRow(){
  174. if(this.$refs[this.tableID]){
  175. (this.$refs[this.tableID] as any).clearCheckboxRow()
  176. }
  177. }
  178. //设置表格数据
  179. setTableValue(data:Array<any>){
  180. if(this.$refs[this.tableID]){
  181. (this.$refs[this.tableID] as any).setValue(data)
  182. }
  183. }
  184. getPage(){
  185. let p = {};
  186. if(this.$refs[this.tableID]){
  187. p=(this.$refs[this.tableID] as any).getPage()
  188. }
  189. return p;
  190. }
  191. setPage(page:Page){
  192. if(this.$refs[this.tableID]){
  193. (this.$refs[this.tableID] as any).setPage(page)
  194. }
  195. }
  196. //分页的变化
  197. paginationChange(page:any){
  198. this.$emit('pagination',page)
  199. // this.getList();
  200. }
  201. getFormValidate(callBack:Function){
  202. (this.$refs[this.formID] as any).validate().then(()=>{
  203. callBack()
  204. })
  205. }
  206. getFormValue(){
  207. if(this.$refs[this.formID]){
  208. (this.$refs[this.formID] as any)
  209. return (this.$refs[this.formID] as any).getValue();
  210. }
  211. return null
  212. }
  213. initFormTool(){
  214. if(this.$refs.toolForm){
  215. (this.$refs.toolForm as any).initTools();
  216. }
  217. }
  218. onChangeRow(row:any){
  219. this.$emit('onChangeRow',row);
  220. }
  221. }
  222. </script>
  223. <style lang="scss" scoped>
  224. .module-view{
  225. width: 100%;
  226. box-sizing: border-box;
  227. padding: 16px;
  228. position: relative;
  229. .view-modal{
  230. height: 100%;
  231. width: 100%;
  232. position: absolute;
  233. left: 0;
  234. top: 0;
  235. box-sizing: border-box;
  236. padding: 16px;
  237. background-color: #FFF;
  238. z-index: 999;
  239. .view-form{
  240. width: 100%;
  241. height: calc(100% - 48px);
  242. overflow-y: auto;
  243. }
  244. }
  245. .search{
  246. width: 100%;
  247. padding-bottom: 8px;
  248. .search-btn{
  249. width: 100%;
  250. display: flex;
  251. justify-content: flex-end;
  252. }
  253. }
  254. .tool-box{
  255. width: 100%;
  256. padding-bottom:16px;
  257. }
  258. .module-main{
  259. width: 100%;
  260. display: flex;
  261. .table{
  262. width: 100%;
  263. }
  264. }
  265. }
  266. </style>