vue项目中一些常见组件的封装（搜索栏，表格，分页，模态框，表单）
在项目中，我们经常见到一些这样的界面
即搜索栏，表格，分页。
当我们点击新建按钮时，就会出现一个弹框，类似于这样的界面
这样的界面在项目中，经常会做，于是封装成公用的组件最为合适，目录结构如下：
pagination文件夹下index.vue内容如下：
1 <template> 2 <div class="pagination"> 3 <el-pagination 4 @size-change="handleSizeChange" 5 @current-change="handleCurrentChange" 6 :current-page.sync="pager.currentPage" 7 :page-sizes="pager.pageSizes" 8 :page-size="pager.pageSize" 9 :pager-count="5" 10 layout="total, sizes, prev, pager, next, jumper" 11 :total="pager.total" 12 ></el-pagination> 13 </div> 14 </template> 15 16 <script> 17 /*import { mapMutations} from 'vuex'*/ 18 export default { 19 name: "pagination", 20 data() { 21 return { 22 /* pager: { 23 currentPage: 1, 24 pageSize: 10, 25 total: null, 26 pageSizes: [5, 10, 50, 100] 27 }*/ 28 }; 29 }, 30 props:{ 31 pager:{ 32 type:Object, 33 default(){ 34 return { 35 currentPage: 1, 36 pageSize: 10, 37 total: null, 38 pageSizes: [5, 10, 50, 100] 39 } 40 } 41 } 42 }, 43 created() {}, 44 mounted() {}, 45 methods: { 46 /*...mapMutations([ 47 'SET_PAGE', 48 ]),*/ 49 handleSizeChange(val) { 50 if (this.pager.total == null) { 51 this.pager.total == null; 52 this.pager.pageSize = val; 53 return; 54 } 55 this.pager.pageSize = val; 56 this.pager.currentPage = 1; 57 //this.SET_PAGE(this.pager) 58 this.$emit("change", this.pager); 59 }, 60 handleCurrentChange(val) { 61 if (this.pager.total == null) { 62 this.pager.total == null; 63 this.pager.currentPage = 1; 64 return; 65 } 66 this.pager.currentPage = val; 67 // this.SET_PAGE(this.pager) 68 this.$emit("change", this.pager); 69 } 70 } 71 }; 72 </script> 73 <style scoped> 74 .pagination { 75 /* position: absolute; 76 bottom: 15px; 77 right:20px; */ 78 margin-top:10px; 79 display: flex; 80 justify-content: center; 81 } 82 </style>
publicForm文件夹下index.vue内容如下：
1 <template> 2 <el-form 3 :inline="true" 4 :model="ruleForm" 5 :rules="rules" 6 ref="ruleForm" 7 label-width="150px" 8 class="demo-ruleForm" 9 size="mini" 10 > 11 <template v-for="(item,index) in formconfig"> 12 <el-form-item v-if="!item.show" :label="`${item.label} :`" :prop="item.prop" :label-width="item.labelWidth" 13 :style="{width:item.formWidth}"> 14 <el-input 15 v-if="item.type=='text'" 16 :disabled="item.disabled" 17 v-model="ruleForm[item.prop]" 18 :placeholder="item.placeholder||''" 19 :style="{width:item.width}" 20 @focus="callback(item,index,$event)" 21 @clear="clear(item,index)" 22 clearable 23 > 24 <i 25 v-if="item.icon" 26 class="el-input__icon" 27 :class="{'el-icon-edit':item.icon}" 28 :slot="item.event=='focus'?'prefix':'suffix'" 29 @click="handleIconClick(item,index)"> 30 </i> 31 </el-input> 32 <!-- <el-button v-if="item.type=='text'&&item.button" @click="buttonEvent">{{item.button}}</el-button> --> 33 34 <el-autocomplete 35 v-if="item.type=='autocomplete'" 36 :disabled="item.disabled" 37 v-model="ruleForm[item.prop]" 38 :placeholder="item.placeholder||'请输入或选择内容'" 39 :style="{width:item.width}" 40 clearable 41 :fetch-suggestions="querySearch" 42 @focus="setAutocompleteArr(item,index)" 43 @select="havedSelect" 44 ></el-autocomplete> 45 <el-input-number 46 v-if="item.type=='number'" 47 v-model="ruleForm[item.prop]" 48 :disabled="item.disabled" 49 controls-position="right" 50 :step="item.step||1" 51 :min="item.min||1" 52 :max="item.max||100" 53 :style="{width:item.width}" 54 ></el-input-number> 55 <el-input 56 v-if="item.type=='textarea'" 57 type="textarea" 58 :disabled="item.disabled" 59 :rows="item.row" 60 v-model="ruleForm[item.prop]" 61 :placeholder="item.placeholder||''" 62 :style="{width:item.width}" 63 ></el-input> 64 <el-select 65 v-if="item.type=='select'" 66 :disabled="item.disabled" 67 v-model="ruleForm[item.prop]" 68 :placeholder="item.placeholder||'请选择'" 69 :style="{width:item.width}" 70 @change="changedata(index,item)" 71 filterable 72 :multiple="item.multiple" 73 :collapse-tags="item.collapseTags" 74 clearable 75 > 76 <el-option 77 v-for="item1 in item.list" 78 :key="item1.value" 79 :label="item1.label" 80 :value="item1.value" 81 :disabled="item1.disabled" 82 ></el-option> 83 </el-select> 84 <template v-if="item.type=='selectMonth'"> 85 <el-select 86 clearable 87 :style="{width:item.width||'148px'}" 88 v-model.trim="ruleForm[item.prop][0]" 89 :placeholder="item.placeholder||'请选择'" 90 size="mini" 91 @change="changedata(index,item,'start')" 92 > 93 <el-option 94 v-for="item1 in item.list||formatMonth" 95 :key="item1.value" 96 :label="item1.name" 97 :value="item1.value" 98 ></el-option> 99 </el-select> 100 <label for="" style="fontSize:12px;color:#7B7F83">{{item.go||""}}</label> 101 <el-select 102 clearable 103 :style="{width:item.width||'148px'}" 104 v-model.trim="ruleForm[item.prop][1]" 105 :placeholder="item.placeholder||'请选择'" 106 size="mini" 107 @change="changedata(index,item,'end')" 108 > 109 <el-option 110 v-for="item1 in item.list1||formatMonth" 111 :key="item1.paraCode" 112 :label="item1.paraKey" 113 :value="item1.paraCode" 114 ></el-option> 115 </el-select> 116 </template> 117 <el-select 118 clearable 119 v-if="item.type=='selectYear'" 120 v-model="ruleForm[item.prop]" 121 :placeholder="item.placeholder||'请选择'" 122 :style="{width:item.width}" 123 > 124 <el-option 125 v-for="item1 in formatYear" 126 :key="item1.paraCode" 127 :label="item1.paraKey" 128 :value="item1.paraCode" 129 ></el-option> 130 </el-select> 131 <el-cascader 132 v-if="item.type=='cascader'" 133 :options="item.options" 134 :props="item.props" 135 :disabled="item.disabled" 136 v-model="ruleForm[item.prop]" 137 clearable 138 change-on-select 139 :show-all-levels="false" 140 :style="{width:item.width}" 141 ></el-cascader> 142 <el-radio-group 143 v-if="item.type=='radio'" 144 :disabled="item.disabled" 145 v-model="ruleForm[item.prop]" 146 :placeholder="item.placeholder||''" 147 @change="changedata(index,item)" 148 > 149 <template v-for="item1 in item.list"> 150 <el-radio :label="item1.prop">{{item1.label}}</el-radio> 151 </template> 152 </el-radio-group> 153 <el-date-picker 154 clearable 155 :value-format="'yyyy-MM-dd'" 156 :disabled="item.disabled" 157 v-if="item.type=='date'" 158 v-model="ruleForm[item.prop]" 159 align="right" 160 :type="item.type" 161 placeholder="选择日期" 162 :style="{width:item.width}" 163 ></el-date-picker> 164 <el-date-picker 165 clearable 166 :value-format="'yyyy-MM-dd HH:mm:ss'" 167 :disabled="item.disabled" 168 v-if="item.type=='datetime'" 169 v-model="ruleForm[item.prop]" 170 align="right" 171 :type="item.type" 172 placeholder="选择日期" 173 :style="{width:item.width}" 174 ></el-date-picker> 175 <el-date-picker 176 clearable 177 value-format="yyyy-MM-dd" 178 :disabled="item.disabled" 179 v-if="item.type=='daterange'" 180 v-model="ruleForm[item.prop]" 181 align="right" 182 range-separator="至" 183 :type="item.type" 184 placeholder="选择日期" 185 :style="{width:item.width}" 186 ></el-date-picker> 187 <el-date-picker 188 clearable 189 value-format="yyyy-MM-dd HH:mm:ss" 190 :disabled="item.disabled" 191 v-if="item.type=='datetimerange'" 192 v-model="ruleForm[item.prop]" 193 align="right" 194 range-separator="至" 195 :type="item.type" 196 placeholder="选择日期" 197 :style="{width:item.width}" 198 ></el-date-picker> 199 <el-date-picker 200 clearable 201 :disabled="item.disabled" 202 v-if="item.type=='year'" 203 v-model="ruleForm[item.prop]" 204 align="right" 205 :type="item.type" 206 placeholder="选择年" 207 :style="{width:item.width}" 208 ></el-date-picker> 209 <el-time-picker 210 clearable 211 :value-format="item.format||'HH:mm:ss'" 212 :disabled="item.disabled" 213 v-if="item.type=='time'" 214 v-model="ruleForm[item.prop]" 215 align="right" 216 placeholder="选择时间" 217 :style="{width:item.width}" 218 ></el-time-picker> 219 <el-date-picker 220 clearable 221 :disabled="item.disabled" 222 v-if="item.type=='month'" 223 v-model="ruleForm[item.prop]" 224 align="right" 225 :type="item.type" 226 placeholder="选择月" 227 :style="{width:item.width}" 228 ></el-date-picker> 229 230 </el-form-item> 231 </template> 232 </el-form> 233 </template> 234 <script> 235 236 export default { 237 props: { 238 formconfig: { //表单配置数据 239 type: Array 240 }, 241 ruleForm: { //表单显示数据 242 type: Object 243 }, 244 rules: { // 表单验证 245 type: Object 246 } 247 }, 248 mounted() { 249 // this.changedata() 250 this.initSlectData() 251 }, 252 watch: {}, 253 data() { 254 return { 255 // input类型为autocomplete时动态过滤的数组 256 restaurants: [], 257 formItemIndex: 0, 258 } 259 }, 260 computed: { 261 formatMonth() { 262 return [ 263 { 264 paraCode: "01", 265 paraKey: "一月" 266 }, 267 { 268 paraCode: "02", 269 paraKey: "二月" 270 }, 271 { 272 paraCode: "03", 273 paraKey: "三月" 274 }, 275 { 276 paraCode: "04", 277 paraKey: "四月" 278 }, 279 { 280 paraCode: "05", 281 paraKey: "五月" 282 }, 283 { 284 paraCode: "06", 285 paraKey: "六月" 286 }, 287 { 288 paraCode: "07", 289 paraKey: "七月" 290 }, 291 { 292 paraCode: "08", 293 paraKey: "八月" 294 }, 295 { 296 paraCode: "09", 297 paraKey: "九月" 298 }, 299 { 300 paraCode: "10", 301 paraKey: "十月" 302 }, 303 { 304 paraCode: "11", 305 paraKey: "十一月" 306 }, 307 { 308 paraCode: "12", 309 paraKey: "十二月" 310 } 311 ] 312 }, 313 formatYear() { 314 var dateList = []; 315 for (var i = 0; i < 7; i++) { 316 dateList.push(new Date().getFullYear() + i - 5); 317 } 318 var select = []; 319 dateList.forEach(item => { 320 var obj = { 321 paraCode: item, 322 paraKey: item 323 }; 324 select.push(obj); 325 }); 326 return select.reverse(); 327 } 328 }, 329 methods: { 330 setAutocompleteArr(val, index) { // 动态设定数组 331 this.restaurants = val.list; 332 this.formItemIndex = index; 333 }, 334 havedSelect(val) { // 当选择是下拉中的数据时,可触发的事件 335 // 解决从下面选中触发必填验证 336 this.$refs.ruleForm.clearValidate(this.formconfig[this.formItemIndex].prop) 337 this.$emit('autoCompleteSelected', val) 338 }, 339 querySearch(queryString, cb) { // 输入时的过滤方法 340 var restaurants = this.restaurants; 341 var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; 342 // 调用 callback 返回建议列表的数据 343 cb(results); 344 }, 345 createFilter(queryString) { // 自定义过滤 346 return (restaurant) => { 347 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); 348 }; 349 }, 350 initSlectData() { 351 for (let i = 0; i < this.formconfig.length; i++) { 352 if ((this.formconfig[i].type == "select" || this.formconfig[i].type == "checkbox") && this.formconfig[i].code) { 353 /*this.$util.dictory.getItemsByDicKey.call(this,this.formconfig[i].code,(items)=>{ 354 this.formconfig[i].list=items 355 })*/ 356 } 357 } 358 }, 359 handleIconClick(item, i) { 360 if (this.formconfig[i].icon == true) { 361 if (this.formconfig[i].event == 'focus') { 362 this.formconfig[i].event = '' 363 } else { 364 this.formconfig[i].event = 'focus' 365 } 366 this.$emit('handleIconClick', {item, i}) 367 } else { 368 } 369 }, 370 clear(item, index) { 371 if (item.event == 'focus') { 372 for (let p in item) { 373 console.log(this.ruleForm[item[p]]) 374 if (this.ruleForm[item[p]]) { 375 this.ruleForm[item[p]] = '' 376 } 377 } 378 this.$emit('clear', {item, index}) 379 } 380 }, 381 callback(item, index, e) { 382 if (item.event == 'focus') { 383 e.target.blur() 384 this.$emit("callback", {item, index}) 385 } else { 386 return false 387 } 388 }, 389 buttonEvent(item) { 390 this.$emit('buttonEvent', item) 391 }, 392 changedata(ind, item, state) { 393 if ((item.type == "selectMonth" || item.type == "select" || item.type == "radio") && item.event == "change") { 394 this.$emit("selectChange", {item, ind, state}); 395 } 396 // 每个条件框数据发生变化都会执行该方法 397 // this.formconfig.forEach((item, index) => { 398 // if(item.type=='select'&&item.event=='change'){ 399 // this.$emit('selectChange',{item,index}) 400 // } 401 // }); 402 }, 403 submitForm() { 404 //表单验证事件 父组件调用 405 this.$refs.ruleForm.validate(valid => { 406 if (valid) { 407 this.$emit("saveForm", this.ruleForm); 408 } else { 409 // console.log("error submit!!"); 410 return false; 411 } 412 }); 413 }, 414 resetForm() { //重置表格数据 415 this.$refs.ruleForm.resetFields(); 416 }, 417 418 } 419 }; 420 </script> 421 <style scoped> 422 >>> .el-input .el-input__inner { 423 border-radius: 0px; 424 } 425 426 >>> .el-input { 427 width: 100%; 428 } 429 430 >>> .el-select, .el-input--mini { 431 /* width:300px;*/ 432 } 433 434 >>> .el-input-number--mini { 435 /*width:300px;*/ 436 } 437 438 >>> .el-date-editor.el-input, .el-date-editor.el-input__inner { 439 /* width:300px;*/ 440 border-radius: 0px; 441 } 442 443 >>> .el-input.is-disabled .el-input__inner { 444 background-color: #f5f7fa; 445 } 446 447 .el-form--inline .el-form-item { 448 margin-right: 0px; 449 width: 50%; 450 } 451 452 i.el-input__icon.el-icon-edit { 453 color: rgba(255, 163, 82, 1); 454 cursor: pointer; 455 font-size: 16px; 456 } 457 458 i.el-input__icon { 459 height: auto 460 } 461 </style>
publicModel文件夹下index.vue内容如下：
1 <template> 2 <div class="dialogBox"> 3 <el-dialog 4 :title="publiconfig.title" 5 :visible.sync="publiconfig.show" 6 :width="publiconfig.width" 7 :before-close="handleClose" 8 :close-on-click-modal='false' 9 :close-on-press-escape='false' 10 :show-close='true' 11 custom-class="dialogStyle"> 12 <div class="public-model-content" :style="{height:publiconfig.height}" > 13 <slot name="public-model-content"> 14 15 </slot> 16 </div> 17 <span slot="footer" class="dialog-footer"> 18 <slot name="model-footer"> 19 20 </slot> 21 </span> 22 </el-dialog> 23 </div> 24 25 </template> 26 <script> 27 export default { 28 props:{ 29 publiconfig:{ 30 type:Object, 31 } 32 }, 33 data(){ 34 return { 35 } 36 }, 37 mounted(){ 38 console.log('publiconfig') 39 console.log(this.publiconfig) 40 }, 41 methods:{ 42 handleClose(){ 43 this.publiconfig.show=false 44 } 45 } 46 } 47 </script> 48 <style > 49 >>>.dialogBox .el-dialog__wrapper .el-dialog .el-dialog__header{ 50 height:24px; 51 border-bottom: 1px solid #0000FF; 52 } 53 >>>.el-dialog__body{ 54 padding:10px 20px; 55 } 56 .public-model-content{ 57 width:100%; 58 height:350px; 59 overflow: auto; 60 61 } 62 .dialogStyle .el-dialog__header{ 63 padding: 10px 20px 10px !important; 64 background:rgb(50, 56, 68) !important; 65 text-align: center; 66 67 } 68 .dialogStyle .el-dialog__header .el-dialog__title{ 69 color:#fff 70 71 } 72 .dialogStyle .el-dialog__header .el-dialog__headerbtn{ 73 top: 10px !important; 74 } 75 76 /* >>> .el-dialog__wrapper .el-dialog .el-dialog__header{ 77 padding: 10px 20px 10px !important; 78 background: red; 79 }*/ 80 /*>>> .el-dialog .el-dialog__header .el-dialog__headerbtn { 81 position: absolute; 82 top: 10px !important; 83 right: 20px; 84 padding: 0; 85 background: 0 0; 86 border: none; 87 outline: 0; 88 cursor: pointer; 89 font-size: 16px; 90 }*/ 91 92 93 94 </style>
search文件夹下index.vue内容如下：
1 <template> 2 <div class="searchBarBox" > 3 <!-- <div class="searchTitle" style="height: 30px;line-height: 30px; margin-left: 20px;font-size: 16px">查询条件</div> --> 4 <el-collapse-transition> 5 <div v-if="searchshow" > 6 <!-- <p>查询列表</p> --> 7 <el-form :inline="true" :model="copysearch" class="demo-form-inline" 8 > 9 <template v-for="(item,index) in search" > 10 <el-form-item :label="item.name+':'"> 11 <el-input 12 v-model.trim="item.value" 13 :key="item.key" 14 :disabled="item.disabled" 15 :placeholder="item.placeholder||''" 16 v-if="item.type=='text'" 17 :style="{width:item.width}" 18 @change="changedata(index,item)" 19 @focus="showmodel(item,index,$event)" 20 @clear="clear(item,index)" 21 clearable 22 ></el-input> 23 <el-checkbox-group 24 v-model.trim="item.value" 25 v-if="item.type=='checkbox'" 26 :disabled="item.disabled" 27 @change="changedata(index,item)" 28 > 29 <el-checkbox 30 v-for="item1 in item.list" 31 :key="item1.paraCode" 32 :label="item1.paraCode" 33 :value="item1.paraCode" 34 >{{item1.paraKey}}</el-checkbox> 35 </el-checkbox-group> 36 <el-radio-group 37 v-if="item.type=='radio'" 38 v-model="item.value" 39 :disabled="item.disabled" 40 @change="changedata(index,item)" 41 > 42 <template v-for="item1 in item.list||radioList"> 43 <el-radio :label="item1.paraCode">{{item1.paraKey}}</el-radio> 44 </template> 45 </el-radio-group> 46 <el-date-picker 47 clearable 48 class="dateR" 49 v-if="item.type=='daterange'" 50 v-model.trim="item.value" 51 value-format="yyyy-MM-dd" 52 :disabled="item.disabled" 53 type="daterange" 54 unlink-panels 55 @change="changedata(index,item)" 56 range-separator="至" 57 start-placeholder="开始日期" 58 end-placeholder="结束日期" 59 ></el-date-picker> 60 <el-date-picker 61 clearable 62 v-if="item.type=='monthrange'" 63 style="width:200px !important" 64 v-model.trim="item.value" 65 value-format="yyyy-MM" 66 :disabled="item.disabled" 67 type="monthrange" 68 unlink-panels 69 @change="changedata(index,item)" 70 range-separator="至" 71 start-placeholder="开始月份" 72 end-placeholder="结束月份"> 73 </el-date-picker> 74 <el-date-picker 75 clearable 76 value-format="yyyy-MM-dd" 77 v-if="item.type=='date'" 78 :disabled="item.disabled" 79 v-model.trim="item.value" 80 align="right" 81 :type="item.type" 82 placeholder="选择日期" 83 @change="changedata(index,item)" 84 ></el-date-picker> 85 <el-date-picker 86 clearable 87 88 value-format="yyyy" 89 :disabled="item.disabled" 90 v-if="item.type=='year'" 91 v-model.trim="item.value" 92 align="right" 93 :type="item.type" 94 placeholder="选择年份" 95 @change="changedata(index,item)" 96 ></el-date-picker> 97 <el-date-picker 98 clearable 99 value-format="yyyy-MM" 100 v-if="item.type=='month'" 101 :disabled="item.disabled" 102 v-model.trim="item.value" 103 align="right" 104 :type="item.type" 105 placeholder="选择月份" 106 @change="changedata(index,item)" 107 ></el-date-picker> 108 109 <el-select 110 clearable 111 v-if="item.type=='select'" 112 :disabled="item.disabled" 113 :multiple="item.multiple" 114 :filterable="item.filterable" 115 :collapse-tags="item.collapseTags" 116 v-model.trim="item.value" 117 :placeholder="item.placeholder||'请选择'" 118 @change="changedata(index,item,item.list.filter((msg)=>{return msg.paraCode==item.value}))" 119 > 120 <el-option 121 v-for="item1 in item.list" 122 :key="item1.paraCode" 123 :label="item1.paraKey" 124 :value="item1.paraCode" 125 ></el-option> 126 </el-select> 127 <el-select 128 clearable 129 v-if="item.type=='selectYear'" 130 :disabled="item.disabled" 131 v-model.trim="item.value" 132 :placeholder="item.placeholder||'请选择'" 133 @change="changedata(index,item)" 134 > 135 <el-option 136 v-for="item1 in formatYear" 137 :key="item1.paraCode" 138 :label="item1.paraKey" 139 :value="item1.paraCode" 140 ></el-option> 141 </el-select> 142 <el-select 143 clearable 144 :style="{width:item.width||'90px'}" 145 v-if="item.type=='selectMonth'" 146 v-model.trim="item.value[0]" 147 :placeholder="item.placeholder||'请选择'" 148 @change="changedata(index,item)" 149 :disabled="item.disabled" 150 > 151 <el-option 152 v-for="item1 in item.list||formatMonth" 153 :key="item1.paraCode" 154 :label="item1.paraKey" 155 :value="item1.paraCode" 156 ></el-option> 157 </el-select> 158 <template v-if="item.type=='selectMonthRange'"> 159 <el-select 160 clearable 161 :style="{width:item.width||'90px'}" 162 v-if="item.type=='selectMonthRange'" 163 v-model.trim="item.value[0]" 164 :placeholder="item.placeholder||'请选择'" 165 @change="changedata(index,item)" 166 :disabled="item.disabled" 167 > 168 <el-option 169 v-for="item1 in item.list1||formatMonth" 170 :key="item1.paraCode" 171 :label="item1.paraKey" 172 :value="item1.paraCode" 173 ></el-option> 174 </el-select> 175 <label for="" style="fontSize:12px;color:#7B7F83">{{item.go||"至"}}</label> 176 <el-select 177 clearable 178 :style="{width:item.width||'90px'}" 179 v-if="item.type=='selectMonthRange'" 180 v-model.trim="item.value[1]" 181 :placeholder="item.placeholder||'请选择'" 182 @change="changedata(index,item)" 183 :disabled="item.disabled" 184 > 185 <el-option 186 v-for="item1 in item.list1||formatMonth" 187 :key="item1.paraCode" 188 :label="item1.paraKey" 189 :value="item1.paraCode" 190 ></el-option> 191 </el-select> 192 </template> 193 </el-form-item> 194 </template> 195 <template v-if="init"> 196 <el-form-item> 197 <el-button class="btn" type="primary" @click="searchdata(1)" size="small">查询</el-button> 198 <el-button class="btn" type="primary" @click="reset()" size="small">重置</el-button> 199 <slot name="behind"></slot> 200 </el-form-item> 201 </template> 202 <template v-else="init==false" > 203 <el-form-item> 204 <slot name='initConfig'></slot> 205 </el-form-item> 206 </template> 207 </el-form> 208 </div> 209 </el-collapse-transition> 210 <!-- <span :class="{'toggle-login':!searchshow}" v-if="isSearch" > 211 <i :class="{'el-icon-arrow-up':searchshow,'el-icon-arrow-down':!searchshow}" :title="buttonTitle" @click="toggle"></i> 212 </span> --> 213 </div> 214 </template> 215 <script> 216 //import {mapMutations} from "vuex" 217 export default { 218 data() { 219 return { 220 width:"97px", 221 searchshow:true //搜索条件显示隐藏 222 }; 223 }, 224 props: { 225 isSearch:{ //是否有显示隐藏按钮 226 type:Boolean, 227 default:()=>{ 228 return true 229 } 230 }, 231 search: { 232 type: Array, 233 required: true 234 }, 235 copysearch: { 236 type: Object 237 }, 238 init:{ 239 type:Boolean, 240 default:()=>{ 241 return true 242 } 243 } 244 }, 245 mounted() { 246 this.changedata("all"); 247 this.initSlectData() 248 if(this.init){ 249 this.searchdata() 250 } 251 }, 252 computed: { 253 radioList(){ 254 return[ 255 { 256 paraCode: "01", 257 paraKey: "是" 258 }, 259 { 260 paraCode: "02", 261 paraKey: "否" 262 }, 263 ] 264 }, 265 buttonTitle(){ 266 if(this.searchshow){ 267 return '隐藏' 268 }else{ 269 return '展开' 270 } 271 }, 272 formatMonth(){ 273 return [ 274 { 275 paraCode: "01", 276 paraKey: "一月" 277 }, 278 { 279 paraCode: "02", 280 paraKey: "二月" 281 }, 282 { 283 paraCode: "03", 284 paraKey: "三月" 285 }, 286 { 287 paraCode: "04", 288 paraKey: "四月" 289 }, 290 { 291 paraCode: "05", 292 paraKey: "五月" 293 }, 294 { 295 paraCode: "06", 296 paraKey: "六月" 297 }, 298 { 299 paraCode: "07", 300 paraKey: "七月" 301 }, 302 { 303 paraCode: "08", 304 paraKey: "八月" 305 }, 306 { 307 paraCode: "09", 308 paraKey: "九月" 309 }, 310 { 311 paraCode: "10", 312 paraKey: "十月" 313 }, 314 { 315 paraCode: "11", 316 paraKey: "十一月" 317 }, 318 { 319 paraCode: "12", 320 paraKey: "十二月" 321 } 322 ] 323 }, 324 formatYear() { 325 var dateList = []; 326 for (var i = 0; i < 7; i++) { 327 dateList.push(new Date().getFullYear() + i - 5); 328 } 329 var select = []; 330 dateList.forEach(item => { 331 var obj = { 332 paraCode: item, 333 paraKey: item 334 }; 335 select.push(obj); 336 }); 337 return select.reverse(); 338 } 339 }, 340 methods: { 341 /* ...mapMutations([ 342 "SET_PAGE" 343 ]),*/ 344 toggle(){ 345 this.searchshow=!this.searchshow 346 this.$emit('switch',this.searchshow) 347 }, 348 initSlectData(){ 349 for(let i=0;i<this.search.length;i++){ 350 if((this.search[i].type=="select"||this.search[i].type=="checkbox")&&this.search[i].code){ 351 /* this.$util.dictory.getItemsByDicKey.call(this,this.search[i].code,(items)=>{ 352 this.search[i].list=items 353 })*/ 354 } 355 } 356 }, 357 showmodel(item,index,e) { 358 if (item.event == "focus") { 359 e.target.blur() 360 // input输入框 获取焦点父组件传递callback时间 361 // input 类型是text ,event 是focus才会执行 362 this.$emit("callback", { item, index }); 363 } 364 }, 365 changedata(ind,item,val) { 366 // 每个条件框数据发生变化都会执行该方法 367 this.search.forEach((item, index) => { 368 if (index == ind || ind == "all") { 369 if(item.event!=="focus"){ 370 this.$set(this.copysearch, item.key, item.value); 371 } 372 } 373 }); 374 if(item&&item.type=="daterange"&&item.value==null){ 375 item.value=[] 376 this.$set(this.copysearch,item.key,[]) 377 } 378 if (ind !== "all"&&(item.type == "select"||item.type=='radio') && item.event == "change") { 379 this.$emit("selectChange", {item,ind}, val); 380 }else{ 381 } 382 }, 383 clear(item,index){ 384 if(item.event=='focus'){ 385 for(let p in item){ 386 console.log(this.copysearch[item[p]]) 387 if(this.copysearch[item[p]]){ 388 this.copysearch[item[p]]='' 389 } 390 } 391 this.$emit('clear',{item,index}) 392 } 393 }, 394 searchdata(key) { 395 // 点击查询按钮 396 /* this.SET_PAGE({ 397 currentPage: 1, 398 pageSize: 10, 399 total: null, 400 pageSizes: [5, 10, 50, 100] 401 })*/ 402 this.$emit("searchdata", this.copysearch,key); 403 }, 404 reset() { 405 // 重置条件框数据 406 this.search.forEach(item => { 407 if(item.multiple){ 408 item.value = []; 409 }else{ 410 item.value =''; 411 } 412 }); 413 for (let p in this.copysearch) { 414 this.copysearch[p] = ""; 415 } 416 this.$emit("reset"); 417 } 418 } 419 }; 420 </script> 421 <style scoped> 422 .issearch{ 423 display: block; 424 } 425 div.searchBarBox{ 426 position: relative; 427 } 428 .searchBarBox>span{ 429 width: 100%; 430 position: absolute; 431 text-align: center; 432 bottom:0px; 433 height:20px; 434 line-height: 20px; 435 z-index: 99; 436 } 437 .searchBarBox .toggle-login{ 438 bottom:-20px; 439 } 440 .searchBarBox>span i{ 441 cursor: pointer; 442 border-radius: 2px; 443 height:16px; 444 width:40px; 445 line-height: 16px; 446 background: #FC8317; 447 448 } 449 >>>.el-input__icon{ 450 width:14px 451 } 452 >>>.el-date-editor .el-range__icon{ 453 font-size: 12px; 454 } 455 >>>.el-select,.el-input{ 456 /* width:200px;*/ 457 height: 40px !important; 458 line-height: 40px ; 459 } 460 >>>.el-radio-group{ 461 /* min-width: 200px;*/ 462 } 463 .btn{ 464 background: #36618a; 465 color: #fff; 466 } 467 468 >>> .el-input--suffix .el-input__inner { 469 height: 40px; 470 } 471 472 .el-input__inner{ 473 height: 34px!important; 474 line-height: 34px; 475 } 476 </style>
table文件夹下index.vue内容如下:
1 <template> 2 <div class="tl-rl" id="tableBox"> 3 <template :table="table"> 4 <el-table 5 v-loading="table.loading" 6 element-loading-text="拼命加载中" 7 element-loading-spinner="el-icon-loading" 8 element-loading-background="rgba(0, 0, 0, 0.8)" 9 :show-summary="table.hasShowSummary" 10 :summary-method="table.getSummaries" 11 ref="TlRlTable" 12 :height="table.height" 13 :data="table.data" 14 tooltip-effect="dark" 15 :border="table.border" 16 style="width: 100%" 17 max-height="529px" 18 :row-class-name="rowClassName" 19 :span-method="objectSpanMethod" 20 header-row-class-name="thClassName" 21 @selection-change="handleSelectionChange" 22 @row-click="rowClick" 23 row-class-name="singleDoubleStyle" 24 > 25 <el-table-column 26 v-if="table.hasSelect" 27 align="center" 28 type="selection" 29 width="55"> 30 </el-table-column> 31 <!--序号列--> 32 <el-table-column 33 v-if="!table.hasOrder" 34 type="index" 35 align="center" 36 width="55" 37 label="序"> 38 </el-table-column> 39 <el-table-column type="expand" v-if="table.hasExpand" align="center"> 40 <template slot-scope="props"> 41 <el-form label-position="left" inline class="demo-table-expand"> 42 <el-form-item :label="item.label" v-for="item in table.expands" :key="item.id"> 43 <span>{{ props.row[item.prop] }}</span> 44 </el-form-item> 45 </el-form> 46 </template> 47 </el-table-column> 48 <template v-for="item in table.tr"> 49 <el-table-column 50 v-if="item.show !== false && item.show === 'template'" 51 :label="item.label" 52 :class-name="item.className ? item.className : ''" 53 :key="item.id" 54 :width="item.width ? item.width : ''" 55 :min-width="item.minWidth ? item.minWidth : ''" > 56 <template slot-scope="scope"> 57 <slot :name="item.prop" :obj="scope"></slot> 58 </template> 59 </el-table-column> 60 <el-table-column 61 v-else-if="item.show !== false && item.show !== 'template'" 62 :label="item.label" 63 :prop="item.prop" 64 :key="item.id" 65 :class-name="item.className ? item.className : ''" 66 :width="item.width ? item.width : ''" 67 :min-width="item.minWidth ? item.minWidth : ''" > 68 <el-table-column 69 v-show="item.children" 70 v-for='item1 in item.children' 71 :label="item1.label" 72 :prop="item1.prop" 73 :class-name="item1.className ? item1.className : ''" 74 :key="item1.id" 75 :width="item1.width ? item1.width : ''" 76 :min-width="item1.minWidth ? item1.minWidth : ''" > 77 <el-table-column 78 v-show="item1.children" 79 v-for='item2 in item1.children' 80 :label="item2.label" 81 :prop="item2.prop" 82 :key="item2.id" 83 :class-name="item2.className ? item2.className : ''" 84 :width="item2.width ? item2.width : ''" 85 :min-width="item2.minWidth ? item2.minWidth : ''" > 86 </el-table-column> 87 </el-table-column> 88 </el-table-column> 89 </template> 90 <el-table-column 91 column-key="operation" 92 :label="table.operation.label" 93 :width="table.operation.width ? table.operation.width : ''" 94 :min-width="table.operation.minWidth ? table.operation.minWidth : ''" 95 :class-name="table.operation.className" 96 v-if="table.hasOperation" 97 align="center"> 98 <template slot-scope="scope"> 99 <!--操作栏改为自定义操作栏--> 100 <slot :name="table.operation.label" :obj="scope"> 101 102 </slot> 103 <!-- <el-button 104 v-if="item.show !== false && item.show === 'template'" 105 v-for="item in table.operation.data" 106 :class="item.classname ? item.classname : ''" 107 :key="item.id" 108 :size="item.size" 109 :icon="item.icon" 110 :type="item.type" 111 :plain="item.plain" 112 @click.stop="handleOperation(scope.$index, scope.row, item.id)">{{ item.label }}</el-button> 113 --> 114 </template> 115 116 </el-table-column> 117 118 </el-table> 119 </template> 120 </div> 121 </template> 122 123 <script> 124 export default { 125 name: 'recordlist', 126 props: { 127 table: { 128 type: Object, 129 default() { 130 return { 131 hasMergeRowOrColumn: false, // 是否合并单元格 132 loading: false, // 加载中动画 133 hasShowSummary: false, // 是否显示表位合计行 134 border: false, // 是否带有纵向边框，默认为false 135 hasOrder:false, // 是否需要显示序列 默认fslae 显示 136 hasSelect: false, // 有无选中功能 137 hasOperation: false, // 有无操作功能 138 hasExpand: false, // 有无展开行功能 139 tr: [ // 表头数据 —— className:列的class名 140 { 141 id: '1', 142 label: 'label', 143 prop: 'prop', 144 className: 'classname', 145 minWidth: '80', 146 show: true // show有三种值：false隐藏当前列，true常规表格列，’template‘自定义表格列 147 // <template slot-scope="props" slot="example"> 148 // <a class="list-a" target="_blank" :href="'/#/bombscreen?mobile=' + props.obj.row.mobile">{{ props.obj.row.username }}</a> 149 // </template> 150 } 151 ], 152 data: [], // 表格数据 —— 如需添加行class，处理数据时则需要传入class名， class需为数组 153 operation: { // 操作功能 154 label: '操作', // 操作列的行首文字 155 width: '200', // 操作列的宽度 156 className: '', // 操作列的class名 157 data: [ // 如果每一行的操作列的数据都是一样的，可以把操作数据定义在data 里面。但是如果每一列的操作列根据具体情况来定义的话 需要在模板里面自定义操作类别 158 { 159 label: '编辑', // 按钮文字 160 Fun: 'handleSubmit', // 点击按钮后触发的父组件事件 161 size: 'mini', // 按钮大小 162 id: '1', // 按钮循环组件的key值 163 classname: 'show', // 按钮的类名 164 icon :'el-icon-delete', // 按钮的图标 165 type:"primary", //按钮的类型 primary / success / warning / danger / info / text，如果设置为text 那么一定是plain:false 166 plain:true //是否朴素按钮 167 168 } 169 ] 170 }, 171 expands: [ // 展开行数据 172 { 173 id: '1', 174 label: 'label', 175 prop: 'prop' 176 } 177 ], 178 getSummaries(param) { // 自定义表位合计行数据 179 // *** 此函数传入param参数 180 console.log(param); 181 // *** 最后返回一个数组，合计行会显示数组中的内容 182 return [] 183 } 184 } 185 } 186 }, 187 sendmethod:{ 188 type:Function, 189 required:false 190 }, 191 }, 192 methods: { 193 handleSelectionChange(val) { 194 this.$emit('onHandleSelectionChange', val); 195 }, 196 handleOperation(a, b, id) { 197 const data = this.table.operation.data; 198 for (let i = 0; i < data.length; i++) { 199 if (id === data[i].id) { 200 this.$emit(data[i].Fun, a, b); 201 } 202 } 203 }, 204 objectSpanMethod({ row, column, rowIndex, columnIndex }) { 205 if (!this.table.hasMergeRowOrColumn) { 206 return 207 } else { 208 //this.$emit('onMergeRowOrColumn', { row, column, rowIndex, columnIndex }); 209 return this.sendmethod({ row, column, rowIndex, columnIndex }) //通过父组件传递方法的形式来达到单元格的合并 210 } 211 }, 212 // 点击某一行时触发的函数 213 // *** 按下左键然后移动鼠标到其它列放开左键，会有报错 -- 优化：添加点击行参数， 214 rowClick(Row, Event, Column) { 215 if (!Column || Column.type === 'selection' || Column.columnKey === 'operation' || Column.type === 'expand') { 216 return 217 } 218 const data = { 219 row: Row, 220 event: Event, 221 column: Column 222 }; 223 this.$emit('onRowClick', data) 224 }, 225 // 行类名的回调函数 226 // 在表格数据中添加class字段即为表格行类名，配合css可对表格行中的自定义标签进行样式优化 227 rowClassName(rowdata) { 228 const data = this.table.data; 229 let className = data[rowdata.rowIndex].class ? data[rowdata.rowIndex].class : ''; 230 if (className.length === 0) { 231 return 232 } 233 className = className.join(' '); 234 return className 235 } 236 } 237 } 238 </script> 239 <style scoped> 240 >>> .el-table th { 241 text-align: center !important; 242 } 243 >>> .el-table td, .el-table th{ 244 text-align: center !important; 245 } 246 247 248 249 250 >>>.el-table th { 251 text-align: center; 252 font-size: 12px; 253 color: #323232; 254 font-weight: normal; 255 background: #bbb; 256 font-family:'SourceHanSansCN-Normal'; 257 } 258 259 >>>.el-table td{ 260 padding: 8px 0 !important; 261 } 262 >>>.el-table th{ 263 padding: 10px 0 !important; 264 } 265 table tr:nth-child(odd){background:#fff;} 266 table tr:nth-child(even){background:#f1f1f1;} 267 268 /*table, thead, tbody, tfoot, tr, th, td, caption, col, colgroup { 269 text-align: inherit; 270 line-height: inherit; 271 font-size: 100%; 272 border-bottom: 1px solid #eee !important; 273 }*/ 274 /*.el-table--border td, .el-table--border th：*/ 275 /* >>>.el-table__header thead { 276 border-top: 1px solid #ccc; 277 border-bottom: 1px solid #ccc; 278 border-left: 1px solid #eee !important; 279 box-sizing: border-box; 280 }*/ 281 </style> 282 <style> 283 .el-table th ,.el-table td{ 284 text-align: center; 285 } 286 #tableBox tbody tr:last-child td{ 287 border-right: 1px solid #EBEEF5; 288 border-bottom: 1px solid #EBEEF5; 289 } 290 291 /* #tableBox .el-table{ 292 border-left: 1px solid #EBEEF5; 293 }*/ 294 #tableBox .thClassName th:nth-child(1){ 295 border-left: 1px solid #EBEEF5; 296 } 297 #tableBox .el-table__row td:nth-child(1){ 298 border-left: 1px solid #EBEEF5; 299 } 300 #tableBox .el-table__row td:nth-child(1){ 301 border-left: 1px solid #EBEEF5; 302 } 303 </style>
index.js中内容如下：
1 import './css/index.css' 2 import publicForm from './publicForm' 3 import publicModel from "./publicModel" 4 import searchPage from "./search"; 5 import simpleTable from "./table"; /*table 组件*/ 6 import pagination from "./pagination"; 7 8 9 10 export default { 11 install: Vue => { 12 Vue.component("public-form", publicForm); // 表单 13 Vue.component("public-model", publicModel); // 弹出层 14 Vue.component("search-page", searchPage); // 条件查询 15 Vue.component("simple-table", simpleTable); // 表格 16 Vue.component("pagination", pagination); //分页 17 } 18 };
在main.js中还需要引入以下代码：
import eleCommon from '../src/common' //上述的index.js Vue.use(eleCommon) //使用自定义组件库
在父组件的引用方式如下：
父组件projectRenting.vue内容如下：这里就不过j多讲解了，有一定vue基础的应该都能看得懂，可能封装的不够全面，也可以提建议啊，共同努力！
1 <template> 2 <div class="loanAll"> 3 <search-page :search="search" :init="true" :copysearch="copysearch" @selectChange="searchSelectChange" @searchdata="getdata"> 4 </search-page> 5 <div class="tableBox"> 6 <div class="btnBox" style="margin-bottom: 10px"> 7 <el-button class="btn" type="primary" @click="addBtn('add')">新建</el-button> 8 <el-button class="btn" type="primary" @click="editBtn('edit')">修改</el-button> 9 <el-button class="btn" type="primary" @click="delBtn">删除</el-button> 10 <el-button class="btn" type="primary" @click="submitBtn">提交</el-button> 11 </div> 12 <simple-table ref="multipleTable" :table="dataTable" @onHandleSelectionChange="handleSelectionChange"> 13 <template slot-scope="props" slot="rentCode"> 14 <span style="color:rgb(4, 51, 255);cursor:pointer;" @click="handelRenting(props.obj.row.rentCode)">{{props.obj.row.rentCode}}</span> 15 </template> 16 <template slot-scope="props" slot="status"> 17 <span>{{statusArr[props.obj.row.status]}}</span> 18 </template> 19 <template slot-scope="props" slot="approve"> 20 <p @click="handelCheck(props.obj.row.rentCode)" 21 style="text-align: center;cursor: pointer;color: blue;font-weight: bold;">查看</p> 22 </template> 23 </simple-table> 24 <pagination :pager="pager" @change="getPageData"></pagination> 25 </div> 26 <!--新建--> 27 <public-model :publiconfig="publiconfigAdd"> 28 <template slot="public-model-content"> 29 <public-form ref="form" :formconfig="formconfigAdd" :ruleForm="ruleFormAdd" :rules="rulesAdd" 30 @selectChange="selectChange" @saveForm="saveForm"></public-form> 31 </template> 32 <template slot="model-footer"> 33 <el-button class="btn" type="primary" @click="saveBtn('save')">保 存</el-button> 34 <el-button class="btn" type="primary" @click="saveBtn('submit')">提 交</el-button> 35 <el-button class="btn" @click="publiconfigAdd.show =false">取 消</el-button> 36 </template> 37 </public-model> 38 <!--修改，查看--> 39 <public-model :publiconfig="publiconfigEdit"> 40 <template slot="public-model-content"> 41 <public-form ref="form2" :formconfig="formconfigEdit" :ruleForm="ruleFormEdit" :rules="rulesEdit" 42 @selectChange="selectChange" @saveForm="saveForm2"></public-form> 43 </template> 44 <template slot="model-footer" v-if="publiconfigEdit.title == '修改租房单'"> 45 <el-button class="btn" type="primary" @click="saveBtnEdit('edit')">{{publiconfigEdit.title}}保 存</el-button> 46 <el-button class="btn" type="primary" @click="saveBtnEdit('submit')">提 交</el-button> 47 <el-button class="btn" @click="publiconfigEdit.show =false">取 消</el-button> 48 </template> 49 </public-model> 50 <!--查看审批历史--> 51 <public-model :publiconfig="publiconfigCheck"> 52 <template slot="public-model-content"> 53 <simple-table :table="dataTable2"> 54 </simple-table> 55 </template> 56 </public-model> 57 </div> 58 </template> 59 60 <script> 61 import {COMMON_API_PATH} from '../../../resource' 62 import {formatDate,attrChange,attrChange2} from "../../../tool/common"; 63 export default { 64 name: "project-renting", 65 data() { 66 var validateHousePersonnel = (rule, value, callback) => { 67 if (!value) { 68 callback(new Error('请输入')); 69 } else if (!new RegExp("^[0-9][0-9]*$").test(value)) { 70 callback(new Error('请输入大于或等于0的整数')); 71 } else { 72 callback(); 73 } 74 }; 75 //校验日期，付款时间不能超过合同期限 76 var validateDate = (rule, value, callback) => { 77 if (!value) { 78 callback(new Error('请输入')); 79 }else if(rule.field == 'paymentTime' && parseInt(value[0].split("-").join(""))>parseInt(this.ruleFormAdd.contractTerm[1].split("-").join(""))){ 80 callback(new Error('付款时间不能超过合同期限')); 81 }else if(rule.field == 'contractTerm' && parseInt(value[1].split("-").join(""))<parseInt(this.ruleFormAdd.paymentTime[0].split("-").join(""))){ 82 callback(new Error('合同期限应该在付款时间之前')); 83 }else{ 84 callback(); 85 } 86 }; 87 return { 88 copysearch: {}, 89 search: [ 90 { 91 name: "合同期限", 92 key: "contractTerm", 93 value: "", 94 type: "daterange", 95 }, 96 { 97 name: "项目名称", 98 key: "projectName", 99 value: "", 100 type: "select", 101 event:'change', 102 list: [] 103 }, 104 { 105 name: "项目编号", 106 key: "projectCode", 107 value: "", 108 type: "text", 109 disabled:true 110 }, 111 112 ], 113 dataTable: { 114 hasSelect: true, //是否有复选框 115 tableShow: false, //是否显示表格 116 hasOrder: false, //是否显示序号列 117 height: "450px", 118 tr: [ 119 // 表头数据 120 { 121 label: "租房申请单号", 122 prop: "rentCode", 123 minWidth: '160', 124 show: "template" 125 }, 126 { 127 label: "项目名称", 128 prop: "projectName", 129 minWidth: '100' 130 }, 131 { 132 label: "项目编号", 133 prop: "projectCode", 134 minWidth: '100' 135 }, 136 { 137 label: "项目经理", 138 prop: "pm", 139 minWidth: '100' 140 }, 141 { 142 label: "负责人", 143 prop: "principal", 144 minWidth: '100' 145 }, 146 { 147 label: "借款人", 148 prop: "borrower", 149 minWidth: '100' 150 }, 151 { 152 label: "地区", 153 prop: "city", 154 minWidth: '100' 155 }, 156 { 157 label: "面积", 158 prop: "houseType", 159 minWidth: '100' 160 }, 161 { 162 label: "租房地址", 163 prop: "houseAddress", 164 minWidth: '150' 165 }, 166 { 167 label: "项目人员", 168 prop: "projectCode", 169 minWidth: '100' 170 }, 171 { 172 label: "合同期限", 173 prop: "projectCode", 174 minWidth: '200' 175 }, 176 { 177 label: "单据状态", 178 prop: "status", 179 minWidth: '150', 180 show: "template" 181 }, 182 { 183 label: "审批明细", 184 prop: "approve", 185 minWidth: '100', 186 show: "template" 187 } 188 ], 189 data: [], 190 border: true, 191 hasOperation: false, 192 operation: { 193 label: "操作", 194 width: "160", 195 className: "", 196 data: [] 197 } 198 }, 199 statusArr: ['保存', '审批中', '驳回', '等待行政确认', '行政审批完成','销假申请中','撤销'], 200 pager: { 201 currentPage: 1, 202 pageSize: 10, 203 total: null, 204 pageSizes: [5, 10, 50, 100] 205 }, 206 publiconfigAdd: { 207 title: "新建租房单", 208 show: false, 209 width:'960px', 210 height: '400px' 211 }, 212 formconfigAdd: [ 213 { 214 label: "项目名称", 215 prop: "projectName", 216 type: "select", 217 value: "", 218 list: [], 219 event:'change', 220 formWidth: 'auto', 221 labelWidth:"120px" 222 }, 223 { 224 label: "项目编号", 225 prop: "projectCode", 226 type: "text", 227 value: "", 228 disabled: true, 229 formWidth: 'auto', 230 labelWidth:"120px" 231 }, 232 { 233 label: "项目经理", 234 prop: "pm", 235 type: "text", 236 value: "", 237 disabled: true, 238 formWidth: 'auto', 239 labelWidth:"120px" 240 }, 241 { 242 label: "借款人", 243 prop: "borrower", 244 type: "text", 245 value: "", 246 formWidth: 'auto', 247 labelWidth:"120px" 248 }, 249 { 250 label: "负责人", 251 prop: "pm", 252 type: "text", 253 value: "", 254 disabled: true, 255 formWidth: 'auto', 256 labelWidth:"120px" 257 }, 258 { 259 label: "城市", 260 prop: "city", 261 type: "text", 262 value: "", 263 formWidth: 'auto', 264 labelWidth:"120px" 265 }, 266 { 267 label: "户型", 268 prop: "houseType", 269 type: "textarea", 270 value: "", 271 formWidth: '100%', 272 width:'770px', 273 labelWidth:"120px" 274 }, 275 { 276 label: "租房地址", 277 prop: "houseAddress", 278 type: "textarea", 279 value: "", 280 formWidth: '100%', 281 width:'770px', 282 labelWidth:"120px" 283 }, 284 { 285 label: "可入住人员(人数)", 286 prop: "housePersonnel", 287 type: "number", 288 value: "", 289 min:0, 290 max:100000000, 291 formWidth: '100%', 292 width:'770px', 293 labelWidth:"120px" 294 }, 295 { 296 label: "合同期限", 297 prop: "contractTerm", 298 type: "daterange", 299 value: "", 300 formWidth: '100%', 301 width:'770px', 302 labelWidth:"120px" 303 }, 304 { 305 label: "押金", 306 prop: "deposit", 307 type: "number", 308 value: "", 309 min:0, 310 max:100000000, 311 formWidth: 'auto', 312 labelWidth:"120px" 313 }, 314 { 315 label: "月租", 316 prop: "monthlyRent", 317 type: "number", 318 value: "", 319 min:0, 320 max:100000000, 321 formWidth: 'auto', 322 labelWidth:"120px" 323 }, 324 { 325 label: "付款周期", 326 prop: "paymentCycle", 327 type: "select", 328 value: "", 329 list: [ 330 {label:'季付',value:'季付'}, 331 {label:'月付',value:'月付'}, 332 {label:'半年付',value:'半年付'} 333 ], 334 formWidth: 'auto', 335 labelWidth:"120px" 336 }, 337 { 338 label: "其他费用明细", 339 prop: "otherFee", 340 type: "number", 341 value: "", 342 min:0, 343 max:100000000, 344 formWidth: '100%', 345 width:'770px', 346 labelWidth:"120px" 347 }, 348 { 349 label: "预估年成本", 350 prop: "annualCost", 351 type: "number", 352 value: "", 353 min:0, 354 max:100000000, 355 formWidth: '100%', 356 width:'770px', 357 labelWidth:"120px" 358 }, 359 { 360 label: "申请宿舍物品", 361 prop: "dormitoryItems", 362 type: "textarea", 363 value: "", 364 formWidth: '100%', 365 width:'770px', 366 labelWidth:"120px" 367 }, 368 { 369 label: "付款时间", 370 prop: "paymentTime", 371 type: "daterange", 372 value: "", 373 formWidth: '100%', 374 width:'770px', 375 labelWidth:"120px" 376 } 377 ], 378 ruleFormAdd: {}, 379 rulesAdd: { 380 projectName: [ 381 {required: true, message: '请输入', trigger: ['blur', 'change']} 382 ], 383 borrower: [ 384 {required: true, message: '请输入', trigger: ['blur', 'change']} 385 ], 386 city: [ 387 {required: true, message: '请输入', trigger: ['blur', 'change']} 388 ], 389 houseType: [ 390 {required: true, message: '请输入', trigger: ['blur', 'change']} 391 ], 392 housePersonnel: [ 393 {validator:validateHousePersonnel, trigger: ['blur', 'change']} 394 ], 395 houseAddress: [ 396 {required: true, message: '请输入', trigger: ['blur', 'change']} 397 ], 398 contractTerm: [ 399 {required: true, message: '请输入', trigger: ['blur', 'change']}, 400 {validator:validateDate, trigger: ['blur', 'change']} 401 ], 402 deposit: [ 403 {required: true, message: '请输入', trigger: ['blur', 'change']} 404 ], 405 monthlyRent: [ 406 {required: true, message: '请输入', trigger: ['blur', 'change']} 407 ], 408 paymentTime: [ 409 {required: true, message: '请输入', trigger: ['blur', 'change']}, 410 {validator:validateDate, trigger: ['blur', 'change']} 411 ] 412 }, 413 publiconfigEdit: { 414 title: "修改租房单", 415 show: false, 416 width:'960px', 417 height: '400px' 418 }, 419 formconfigEdit: [ 420 { 421 label: "项目名称", 422 prop: "projectName", 423 type: "select", 424 value: "", 425 list: [], 426 event:'change', 427 formWidth: 'auto', 428 labelWidth:"120px" 429 }, 430 { 431 label: "项目编号", 432 prop: "projectCode", 433 type: "text", 434 value: "", 435 disabled: true, 436 formWidth: 'auto', 437 labelWidth:"120px" 438 }, 439 { 440 label: "项目经理", 441 prop: "pm", 442 type: "text", 443 value: "", 444 disabled: true, 445 formWidth: 'auto', 446 labelWidth:"120px" 447 }, 448 { 449 label: "借款人", 450 prop: "borrower", 451 type: "text", 452 value: "", 453 formWidth: 'auto', 454 labelWidth:"120px" 455 }, 456 { 457 label: "负责人", 458 prop: "pm", 459 type: "text", 460 value: "", 461 disabled: true, 462 formWidth: 'auto', 463 labelWidth:"120px" 464 }, 465 { 466 label: "城市", 467 prop: "city", 468 type: "text", 469 value: "", 470 formWidth: 'auto', 471 labelWidth:"120px" 472 }, 473 { 474 label: "户型", 475 prop: "houseType", 476 type: "textarea", 477 value: "", 478 formWidth: '100%', 479 width:'770px', 480 labelWidth:"120px" 481 }, 482 { 483 label: "租房地址", 484 prop: "houseAddress", 485 type: "textarea", 486 value: "", 487 formWidth: '100%', 488 width:'770px', 489 labelWidth:"120px" 490 }, 491 { 492 label: "可入住人员(人数)", 493 prop: "housePersonnel", 494 type: "number", 495 value: "", 496 min:0, 497 max:100000000, 498 formWidth: '100%', 499 width:'770px', 500 labelWidth:"120px" 501 }, 502 { 503 label: "合同期限", 504 prop: "contractTerm", 505 type: "daterange", 506 value: "", 507 formWidth: '100%', 508 width:'770px', 509 labelWidth:"120px" 510 }, 511 { 512 label: "押金", 513 prop: "deposit", 514 type: "number", 515 value: "", 516 min:0, 517 max:100000000, 518 formWidth: 'auto', 519 labelWidth:"120px" 520 }, 521 { 522 label: "月租", 523 prop: "monthlyRent", 524 type: "number", 525 value: "", 526 min:0, 527 max:100000000, 528 formWidth: 'auto', 529 labelWidth:"120px" 530 }, 531 { 532 label: "付款周期", 533 prop: "paymentCycle", 534 type: "select", 535 value: "", 536 list: [ 537 {label:'季付',value:'季付'}, 538 {label:'月付',value:'月付'}, 539 {label:'半年付',value:'半年付'} 540 ], 541 formWidth: 'auto', 542 labelWidth:"120px" 543 }, 544 { 545 label: "其他费用明细", 546 prop: "otherFee", 547 type: "number", 548 value: "", 549 min:0, 550 max:100000000, 551 formWidth: '100%', 552 width:'770px', 553 labelWidth:"120px" 554 }, 555 { 556 label: "预估年成本", 557 prop: "annualCost", 558 type: "number", 559 value: "", 560 min:0, 561 max:100000000, 562 formWidth: '100%', 563 width:'770px', 564 labelWidth:"120px" 565 }, 566 { 567 label: "申请宿舍物品", 568 prop: "dormitoryItems", 569 type: "textarea", 570 value: "", 571 formWidth: '100%', 572 width:'770px', 573 labelWidth:"120px" 574 }, 575 { 576 label: "付款时间", 577 prop: "paymentTime", 578 type: "daterange", 579 value: "", 580 formWidth: '100%', 581 width:'770px', 582 labelWidth:"120px" 583 } 584 ], 585 ruleFormEdit:{}, 586 rulesEdit: { 587 projectName: [ 588 {required: true, message: '请输入', trigger: ['blur', 'change']} 589 ], 590 borrower: [ 591 {required: true, message: '请输入', trigger: ['blur', 'change']} 592 ], 593 city: [ 594 {required: true, message: '请输入', trigger: ['blur', 'change']} 595 ], 596 houseType: [ 597 {required: true, message: '请输入', trigger: ['blur', 'change']} 598 ], 599 housePersonnel: [ 600 {validator:validateHousePersonnel, trigger: ['blur', 'change']} 601 ], 602 houseAddress: [ 603 {required: true, message: '请输入', trigger: ['blur', 'change']} 604 ], 605 contractTerm: [ 606 {required: true, message: '请输入', trigger: ['blur', 'change']}, 607 {validator:validateDate, trigger: ['blur', 'change']} 608 ], 609 deposit: [ 610 {required: true, message: '请输入', trigger: ['blur', 'change']} 611 ], 612 monthlyRent: [ 613 {required: true, message: '请输入', trigger: ['blur', 'change']} 614 ], 615 paymentTime: [ 616 {required: true, message: '请输入', trigger: ['blur', 'change']}, 617 {validator:validateDate, trigger: ['blur', 'change']} 618 ] 619 }, 620 userProject: {}, 621 clickedBtn:'save', 622 isAddFlag:'add', 623 seetableData: [ 624 //审批查看弹框数据 625 ], 626 multipleSelection: [], 627 selectId: "", 628 publiconfigCheck:{ 629 title: "审批明细", 630 show: false, 631 height: '200px' 632 }, 633 dataTable2: { 634 hasSelect: false, //是否有复选框 635 tableShow: false, //是否显示表格 636 hasOrder: true, //是否显示序号列 637 height: "200px", 638 tr: [ 639 // 表头数据 640 { 641 label: "审批人", 642 prop:"approvalName", 643 minWidth: '100', 644 }, 645 { 646 label: "审批建议", 647 prop: "approvalOpinion", 648 minWidth: '100' 649 }, 650 { 651 label: "驳回理由", 652 prop: "rejectReason", 653 minWidth: '100' 654 }, 655 { 656 label: "审批时间", 657 prop: "approvalDate", 658 minWidth: '100' 659 } 660 ], 661 data: [], 662 border: true, 663 hasOperation: false, 664 operation: { 665 label: "操作", 666 width: "160", 667 className: "", 668 data: [] 669 } 670 } 671 672 } 673 }, 674 mounted() { 675 this.getUserProject(); 676 this.getTableDatas(); 677 }, 678 components: { 679 }, 680 methods: { 681 //搜索栏下拉框改变时 682 searchSelectChange(obj,val) { 683 this.search[2].value = val[0].paraCode; 684 this.$set(this.copysearch,'projectCode', val[0].paraCode); 685 this.$set(this.copysearch,'projectName', val[0].paraKey); 686 }, 687 //弹框中下拉改变时 688 selectChange(obj){ 689 console.log('接受到的值') 690 console.log(obj); 691 if(this.isAddFlag == 'add'){ 692 let selectedProjectCode = this.ruleFormAdd[obj.item.prop]; 693 this.userProject.projectList.forEach((perProject) => { 694 if(perProject.projectCode == selectedProjectCode){ 695 this.ruleFormAdd.projectName = perProject.projectName; 696 this.ruleFormAdd.projectCode = perProject.projectCode; 697 this.ruleFormAdd.pm = perProject.pm; 698 this.ruleFormAdd.principal = perProject.pm; 699 } 700 }) 701 }else if(this.isAddFlag == 'edit'){ 702 let selectedProjectCode = this.ruleFormEdit[obj.item.prop]; 703 this.userProject.projectList.forEach((perProject) => { 704 if(perProject.projectCode == selectedProjectCode){ 705 this.ruleFormEdit.projectName = perProject.projectName; 706 this.ruleFormEdit.projectCode = perProject.projectCode; 707 this.ruleFormEdit.pm = perProject.pm; 708 this.ruleFormEdit.principal = perProject.pm; 709 } 710 }) 711 } 712 713 714 715 }, 716 // 获取工号 717 getUserNum() { 718 return sessionStorage.getItem("RJ"); 719 }, 720 721 // 获取用户所有的项目信息 722 getUserProject() { 723 let self = this; 724 let userNum = this.getUserNum(); 725 self.$http 726 .get(`${COMMON_API_PATH}/userInfo/${userNum}`) 727 .then(function (res) { 728 let _data = res.data.userInfo; 729 self.userProject = _data; 730 //设置搜索栏项目名称 731 this.search[1].list = attrChange(this.userProject.projectList,'projectCode','projectName'); 732 }); 733 }, 734 735 /*查询*/ 736 getdata(val) { 737 console.log("查询"); 738 console.log(val); 739 this.copysearch = val; 740 this.getTableDatas() 741 742 }, 743 getPageData(val) { 744 console.log("分页") 745 this.pager = val 746 this.getTableDatas() 747 748 }, 749 // 获取table 数据 750 getTableDatas() { 751 const {contractTerm} = this.copysearch 752 const _contractTerm = contractTerm && contractTerm.length ? contractTerm : [] 753 let s=` 00:00:00` 754 let d=` 23:59:59` 755 if(_contractTerm.length>0){ 756 _contractTerm[0]= `${_contractTerm[0]}${s}` 757 _contractTerm[1]= `${_contractTerm[1]}${d}` 758 759 } 760 let postParam = { 761 "employeeNumber": this.userProject.employeeNumber, 762 "contractEndDate": _contractTerm[1] || '', 763 "projectCode": this.copysearch.projectCode, 764 "projectName": this.copysearch.projectName, 765 "contractStartDate": _contractTerm[0] || '', 766 pageNumber: this.pager.currentPage, 767 pageSize: this.pager.pageSize, 768 }; 769 770 this.$http.post(`${COMMON_API_PATH}/rentAccount/queryAllByNumber`, postParam) 771 .then(function (res) { 772 if (res.data.statusCode == 1) { 773 this.pager.total=res.data.item.total; 774 this.dataTable.data= res.data.item.list; 775 } else { 776 this.$message({ 777 message: '请求失败', 778 type: 'error' 779 }); 780 } 781 }); 782 783 }, 784 785 /*新建*/ 786 addBtn(val) { 787 this.isAddFlag = val; 788 this.ruleFormAdd = {}; 789 this.formconfigAdd[0].list = attrChange2(this.userProject.projectList,'projectCode','projectName'); 790 this.publiconfigAdd.show = true; 791 }, 792 793 /*新建保存*/ 794 saveBtn(val) { 795 this.clickedBtn = val; 796 this.$refs.form.submitForm() 797 }, 798 799 saveForm(val) { 800 console.log(val) 801 let {contractTerm} = val; 802 const _contractTerm = contractTerm && contractTerm.length ? contractTerm : [] 803 let s=` 00:00:00` 804 let d=` 23:59:59` 805 if(_contractTerm.length>0){ 806 _contractTerm[0]= `${_contractTerm[0]}${s}` 807 _contractTerm[1]= `${_contractTerm[1]}${d}` 808 } 809 let {paymentTime} = val; 810 const _paymentTime = paymentTime && paymentTime.length ? paymentTime : [] 811 let {annualCost,borrower,city,deposit,dormitoryItems,houseAddress, 812 housePersonnel,houseType,monthlyRent,otherFee,paymentCycle, 813 pm,principal,projectCode,projectName} = val; 814 let postParam = { 815 annualCost,borrower,city,deposit,dormitoryItems,houseAddress, 816 housePersonnel,houseType,monthlyRent,otherFee,paymentCycle, 817 pm,principal,projectCode,projectName, 818 "contractEndDate": _contractTerm[1] || '', 819 "contractStartDate": _contractTerm[0] || '', 820 "employeeNumber": this.getUserNum(), 821 "paymentTime": `${_paymentTime[0]}~${_paymentTime[1]}` || '', 822 "rentCode":Math.random()*1000+'', 823 "status": 0, 824 }; 825 this.$http.post(`${COMMON_API_PATH}/rentAccount/addRentAccount`, postParam) 826 .then(response => { 827 if (response.data.statusCode == 1) { 828 if(this.clickedBtn == 'save'){ 829 this.$message({ 830 message: '添加成功', 831 type: 'success' 832 }); 833 this.publiconfigAdd.show = false; 834 this.getTableDatas(); 835 }else if(this.clickedBtn == 'submit'){ 836 this.$http.post(`${COMMON_API_PATH}/rentAccount/submitRentAccount`,[postParam.rentCode]) 837 .then((res) => { 838 if(res.data.statusCode == 1){ 839 this.$message({ 840 message: '提交成功', 841 type: 'success' 842 }); 843 this.publiconfigAdd.show = false; 844 this.getTableDatas(); 845 } 846 847 }).catch((error) => { 848 849 }) 850 851 } 852 853 } 854 855 }) 856 .catch(error => { 857 }) 858 }, 859 860 //修改保存 861 saveBtnEdit(val){ 862 this.clickedBtn = val; 863 this.$refs.form2.submitForm(); 864 }, 865 866 saveForm2(val) { 867 console.log(val); 868 let {contractTerm} = val; 869 const _contractTerm = contractTerm && contractTerm.length ? contractTerm : [] 870 let s=` 00:00:00` 871 let d=` 23:59:59` 872 if(_contractTerm.length>0){ 873 _contractTerm[0]= `${_contractTerm[0]}${s}` 874 _contractTerm[1]= `${_contractTerm[1]}${d}` 875 } 876 let {paymentTime} = val; 877 const _paymentTime = paymentTime && paymentTime.length ? paymentTime : [] 878 let {annualCost,borrower,city,deposit,dormitoryItems,houseAddress, 879 housePersonnel,houseType,monthlyRent,otherFee,paymentCycle, 880 pm,principal,projectCode,projectName,rentCode,status,employeeNumber} = val; 881 let postParam = { 882 annualCost,borrower,city,deposit,dormitoryItems,houseAddress, 883 housePersonnel,houseType,monthlyRent,otherFee,paymentCycle, 884 pm,principal,projectCode,projectName,rentCode,status,employeeNumber, 885 "contractEndDate": _contractTerm[1] || '', 886 "contractStartDate": _contractTerm[0] || '', 887 "paymentTime": `${_paymentTime[0]}~${_paymentTime[1]}` || '', 888 }; 889 this.$http.post(`${COMMON_API_PATH}/rentAccount/updateRentAccount`, this.ruleFormEdit) 890 .then(response => { 891 if (response.data.statusCode == 1) { 892 if(this.clickedBtn == 'edit'){ 893 this.$message({ 894 message: '修改成功', 895 type: 'success' 896 }); 897 this.publiconfigEdit.show = false; 898 this.getTableDatas(); 899 }else if(this.clickedBtn == 'submit'){ 900 this.$http.post(`${COMMON_API_PATH}/rentAccount/submitRentAccount`,[postParam.rentCode]) 901 .then((res) => { 902 if(res.data.statusCode == 1){ 903 this.$message({ 904 message: '提交成功', 905 type: 'success' 906 }); 907 this.publiconfigEdit.show = false; 908 this.getTableDatas(); 909 } 910 911 }).catch((error) => { 912 913 }) 914 915 } 916 917 } 918 919 }) 920 .catch(error => { 921 }) 922 }, 923 924 // 编辑 925 editBtn(val) { 926 // 只有保存的和驳回的可编辑 927 let self = this; 928 self.isAddFlag = val; 929 let count = self.multipleSelection.length; 930 if (count !== 1) { 931 return self.$message({ 932 message: '请选择一项进行修改', 933 type: 'warning', 934 }) 935 } 936 console.log(self.multipleSelection[0]) 937 if (self.multipleSelection[0].status!==0 && self.multipleSelection[0].status !== 2) { 938 return self.$message({ 939 message: '审批中的单据不能修改', 940 type: 'warning', 941 }) 942 } 943 this.selectId = self.multipleSelection[0].rentCode; 944 this.formconfigEdit[0].list = attrChange2(this.userProject.projectList,'projectCode','projectName'); 945 this.checkRenting(this.selectId); 946 this.publiconfigEdit.show = true; 947 }, 948 949 handelRenting(val) { 950 this.publiconfigEdit.show = true; 951 this.publiconfigEdit.title = "查看租房单"; 952 this.formconfigEdit.forEach((item, index) => { 953 this.$set(item, 'disabled', true); 954 }); 955 this.checkRenting(val) 956 }, 957 //查看详情 958 checkRenting(param) { 959 this.$http 960 .post(`${COMMON_API_PATH}/rentAccount/queryByCode`, param) 961 .then(function (res) { 962 console.log("查看详情"); 963 if(res.data.statusCode == 1){ 964 let item = res.data.item; 965 this.$set(this.ruleFormEdit, 'annualCost', item.annualCost); 966 this.$set(this.ruleFormEdit, 'borrower', item.borrower); 967 this.$set(this.ruleFormEdit, 'city', item.city); 968 this.$set(this.ruleFormEdit, 'deposit', item.deposit); 969 this.$set(this.ruleFormEdit, 'dormitoryItems', item.dormitoryItems); 970 this.$set(this.ruleFormEdit, 'houseAddress', item.houseAddress); 971 this.$set(this.ruleFormEdit, 'housePersonnel', item.housePersonnel); 972 this.$set(this.ruleFormEdit, 'houseType', item.houseType); 973 this.$set(this.ruleFormEdit, 'monthlyRent', item.monthlyRent); 974 this.$set(this.ruleFormEdit, 'otherFee', item.otherFee); 975 this.$set(this.ruleFormEdit, 'paymentCycle', item.paymentCycle); 976 this.$set(this.ruleFormEdit, 'pm', item.pm); 977 this.$set(this.ruleFormEdit, 'principal', item.principal); 978 this.$set(this.ruleFormEdit, 'projectCode', item.projectCode); 979 this.$set(this.ruleFormEdit, 'projectName', item.projectName); 980 this.$set(this.ruleFormEdit, 'contractStartDate', item.contractStartDate); 981 this.$set(this.ruleFormEdit, 'contractEndDate', item.contractEndDate); 982 this.$set(this.ruleFormEdit, 'contractTerm', [item.contractStartDate,item.contractEndDate]); 983 this.$set(this.ruleFormEdit, 'employeeNumber', item.employeeNumber); 984 this.$set(this.ruleFormEdit, 'paymentTime', item.paymentTime.split('~')); 985 this.$set(this.ruleFormEdit, 'status', item.status); 986 this.$set(this.ruleFormEdit, 'rentCode', item.rentCode); 987 } 988 }); 989 }, 990 991 // 删除 992 delBtn() { 993 let self = this; 994 let count = self.multipleSelection.length; 995 if (count == 0) { 996 return self.$message({ 997 message: '请勾选您要删除的选项', 998 type: 'warning', 999 }) 1000 } 1001 let ids = [] 1002 self.multipleSelection.forEach((item, index) => { 1003 if (item.status ==2 || item.status == 0) { 1004 ids.push(item.rentCode) 1005 } else { 1006 return self.$message({ 1007 message: '已提交的单据不能删除', 1008 type: 'warning', 1009 }) 1010 } 1011 }) 1012 if (ids.length == 0) return; 1013 let params = ids 1014 this.$confirm('此操作将删除该请假单, 是否继续?', '提示', { 1015 confirmButtonText: '确定', 1016 cancelButtonText: '取消', 1017 type: 'warning', 1018 center: true 1019 }).then(() => { 1020 this.sureDel(params) 1021 }).catch(() => { 1022 this.$message({ 1023 type: 'info', 1024 message: '已取消删除' 1025 }); 1026 }); 1027 }, 1028 1029 sureDel(params) { 1030 this.$http.post(`${COMMON_API_PATH}/rentAccount/deleteRentAccount`, params) 1031 .then(function (res) { 1032 // console.log(res) 1033 if (res.data.statusCode == 1) { 1034 this.$message({ 1035 message: '删除成功', 1036 type: 'success' 1037 }); 1038 this.getTableDatas(); 1039 } else { 1040 this.$message({ 1041 message: '删除失败' + res.data.massage, 1042 type: 'error' 1043 }); 1044 } 1045 1046 }); 1047 }, 1048 1049 // 提交 1050 submitBtn() { 1051 let self = this 1052 let count = self.multipleSelection.length; 1053 if (count == 0) { 1054 return self.$message({ 1055 message: '请勾选您要提交的选项', 1056 type: 'warning', 1057 }) 1058 }; 1059 let ids = [] 1060 for(let i=0;i< self.multipleSelection.length;i++) { 1061 let item = self.multipleSelection[i] 1062 if (item.status !== 0 && item.status !== 2) { 1063 return this.$message({ 1064 message: '已提交的不能修改', 1065 type: 'warning' 1066 }); 1067 } 1068 if (item.status==2) { 1069 return this.$message({ 1070 message: '驳回的请先修改再提交', 1071 type: 'warning' 1072 }); 1073 } 1074 ids.push(item.rentCode); 1075 } 1076 if (ids.length == 0) return 1077 let params = ids 1078 this.$http 1079 .post(`${COMMON_API_PATH}/rentAccount/submitRentAccount`, params) 1080 .then(function (res) { 1081 if (res.data.statusCode == 1) { 1082 this.$message({ 1083 message: '提交成功', 1084 type: 'success' 1085 }); 1086 this.getTableDatas(); 1087 this.$refs.multipleTable.clearSelection() 1088 1089 } else { 1090 this.$message({ 1091 message: res.data.massage, 1092 type: 'error' 1093 }); 1094 } 1095 }); 1096 }, 1097 1098 handleSelectionChange(val) { 1099 this.multipleSelection = val; 1100 }, 1101 1102 //查看审批历史 1103 handelCheck(val){ 1104 this.publiconfigCheck.show=true 1105 let params={ 1106 payBackCode:val 1107 }; 1108 this.$http 1109 .post(`${COMMON_API_PATH}/payBackRecord/getDetailsApproval`, params) 1110 .then((res) => { 1111 this.dataTable2.data=res.data.item; 1112 }); 1113 } 1114 } 1115 } 1116 </script> 1117 <style scoped> 1118 .loanAll { 1119 padding: 20px; 1120 } 1121 1122 .btn { 1123 background: #36618a; 1124 color: #fff; 1125 } 1126 </style>
