汇总账单

src/views/workOrder/settleAccountsManagement/summaryBill/index.vue

@@ -1,21 +1,21 @@
 <template>
 	<div class="page">
-		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="120"
-		  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
-		  :operation="operation">
-		  <!--  :exportList="exportList" -->
-		  <div slot="moreSearch">
-		    <el-radio-group v-model="status" size="mini" @change="changeType">
-		    	<el-radio-button label="">全部</el-radio-button>
-				<el-radio-button label="NO">待发放</el-radio-button>
-				<el-radio-button label="YES">已发放</el-radio-button>
-				<el-radio-button label="NOT">驳回</el-radio-button>
-		    </el-radio-group>
-		    <br><br>
-		  </div>
+		<template-page v-show="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
+			:table-events="tableEvents" :operationColumnWidth="120" :options-evens-group="optionsEvensGroup"
+			:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()">
+			<!--  :exportList="exportList" -->
+			<div slot="moreSearch">
+				<el-radio-group v-model="status" size="mini" @change="changeType">
+					<el-radio-button label="">全部</el-radio-button>
+					<el-radio-button label="NO">待发放</el-radio-button>
+					<el-radio-button label="YES">已发放</el-radio-button>
+					<el-radio-button label="NOT">驳回</el-radio-button>
+				</el-radio-group>
+				<br><br>
+			</div>
 		</template-page>
 		<div class="detail" v-if="formDialog">
-			<detailList :id="id" @back="backList" :title="'汇总账单明细-'+id"></detailList>
+			<detailList :id="id" @back="backList" :title="'汇总账单明细-' + id"></detailList>
 		</div>
 	</div>
 </template>
@@ -26,210 +26,222 @@ import import_mixin from '@/components/template/import_mixin.js'
 import ImageUpload from '@/components/file-upload'
 import detailList from './detailList.vue'
 import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
-import { listPageV2,pageExport, cancel, confirm } from "@/api/workOrder/summaryBill";
+import { listPageV2, pageExport, cancel, confirm } from "@/api/workOrder/summaryBill";
+import operation_mixin from '@/components/template/operation_mixin.js'
 export default {
-  components: { TemplatePage, ImageUpload, detailList },
-  mixins: [import_mixin],
-  data() {
-    return {
-      // 事件组合
-      optionsEvensGroup: [
-	  	[
-	  		[
-	  			{
-	  				name: '驳回',
-	  				click: this.cancelMore
-	  			}
-	  		],
-	  	],
-		[
-			[
-				{
-					name: '发放',
-					click: this.confirmMore
-				}
-			]
-		]
-	  ],
-      // 表格属性
-      tableAttributes: {
-        // 启用勾选列
-        selectColumn: true,
-		selectable: this.selectable
-      },
-      // 表格事件
-      tableEvents: {
-        'selection-change': this.selectionChange
-      },
-      // 勾选选中行
-      recordSelected: [],
-      /** 表单变量 */
-      formDialogType: 0,
-      formDialogTitles: ["汇总"],
-      formDialog: false,
-	  type: JSON.parse(localStorage.getItem('greemall_user')).type, //type=1商户, type=0网点
-      formData: {
-		companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
-		month: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1)>9?(new Date().getMonth() + 1):('0'+(new Date().getMonth() + 1))),
-		createdTime: [],
-		starDate: '',
-		endDate: '',
-      },
-	  status: '',
-	  id: ''
-    }
-  },
-  computed: {
-    // 更多参数
-    moreParameters() {
-      return []
-    },
-    formItems() {
-		return [{
-			md: 24,
-			isShow: true,
-			name: 'el-input',
-			attributes: { placeholder: '请输入', disabled: true },
-			formItemAttributes: {
-			label: '所属商户',
-			prop: 'companyName',
-			rules: [...required]
+	components: { TemplatePage, ImageUpload, detailList },
+	mixins: [import_mixin, operation_mixin],
+	data() {
+		return {
+			// 表格属性
+			tableAttributes: {
+				// 启用勾选列
+				selectColumn: true,
+				selectable: this.selectable
 			},
-		}, {
-			md: 24,
-			isShow: true,
-			name: 'el-input',
-			attributes: { placeholder: '请输入', disabled: true },
-			formItemAttributes: {
-			label: '月份',
-			prop: 'month',
-			rules: [...required]
-			}
-		}, {
-			md: 24,
-			isShow: true,
-			name: 'slot-component',
-			attributes: { placeholder: '请选择',},
-			formItemAttributes: {
-			label: '创建结算单时间',
-			prop: 'createdTime',
-			rules: [...required]
+			// 表格事件
+			tableEvents: {
+				'selection-change': this.selectionChange
 			},
-			render: (h, { props, onInput }) => {
-				var { value } = props
-				return (
-					<el-date-picker
-						v-model={this.formData.createdTime}
-						type="daterange"
-						range-separator="至"
-						start-placeholder="开始日期"
-						end-placeholder="结束日期"
-						onChange={e=>{
-							this.formData.starDate = e[0]
-							this.formData.endDate = e[1]
-						}}>
-				    </el-date-picker>
-				)
-			}
-		}]
-    }
-  },
-  methods: {
-	// 切换状态
-	changeType(val) {
-	  this.$refs.pageRef.refreshList()
-	},
-	backList() {
-		this.id = ''
-		this.formDialog = false;
-		this.$refs.pageRef.refreshList()
-	},
-	selectable(row, index) {
-	  return ["NO"].includes(Object.entries(row.selectMapData.status).find(([key, val]) => val == row.status)?.[0])
-	},
-    // 列表请求函数
-    getList(p,cb) {
-		try {
-			var pam = JSON.parse(JSON.stringify(p))
-			pam.params.push({'param': 'a.status', "compare": "=", "value": this.status})
-			cb && cb(pam)
-			return listPageV2(pam)
-		} catch (error) {
-			console.log(error)
-		}
-    },
-    // 列表导出函数
-    exportList: pageExport,
-    // 表格列解析渲染数据更改
-    columnParsing(item, defaultData) {
-		return defaultData
-    },
-    // 监听勾选变化
-    selectionChange(data) {
-      this.recordSelected = data
-    },
-    // 表格操作列
-    operation(h, { row, index, column }) {
-		return (
-			<div class='operation-btns'>
-				<el-button type="text" onClick={() => {
-					this.id = row.id
-					this.formDialog = true
-				}}>明细</el-button>
-				{row.status == 'NO'?<el-button type="text" onClick={() => {
-					this.confirm([row.id])
-				}}>发放</el-button>:null}
-				{row.status == 'NO'?<el-button type="text" onClick={() => {
-					this.cancel([row.id])
-				}}>驳回</el-button>:null}
-			</div>
-		)
-    },
-	cancelMore(){
-		if(this.recordSelected.length == 0){
-			return this.$message.warning('请至少勾选一条数据！');
+			// 勾选选中行
+			recordSelected: [],
+			/** 表单变量 */
+			formDialogType: 0,
+			formDialogTitles: ["汇总"],
+			formDialog: false,
+			type: JSON.parse(localStorage.getItem('greemall_user')).type, //type=1商户, type=0网点
+			formData: {
+				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+				month: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1) > 9 ? (new Date().getMonth() + 1) : ('0' + (new Date().getMonth() + 1))),
+				createdTime: [],
+				starDate: '',
+				endDate: '',
+			},
+			status: '',
+			id: ''
 		}
-		this.cancel(this.recordSelected.map(item=>{return item.id}))
 	},
-    cancel(ids) {
-		this.$confirm('请确认是否驳回选中的数据, 是否继续?', '提示', {
-			confirmButtonText: '确定',
-			cancelButtonText: '取消',
-			type: 'warning'
-		}).then(() => {
-			cancel(ids).then(res => {
-				this.$message({ type: 'success', message: `驳回成功!` })
-				this.$refs.pageRef.refreshList()
-			})
-		});
-    },
-	confirmMore(){
-		if(this.recordSelected.length == 0){
-			return this.$message.warning('请至少勾选一条数据！');
+	computed: {
+		// 事件组合
+		optionsEvensGroup() {
+			return [
+				[
+					[
+						this.optionsEvensAuth("rejectPl", {
+							click: this.cancelMore
+						})
+					],
+					[
+						this.optionsEvensAuth("issuePl", {
+							click: this.confirmMore
+						})
+					]
+				]
+			]
+		},
+		// 更多参数
+		moreParameters() {
+			return []
+		},
+		formItems() {
+			return [{
+				md: 24,
+				isShow: true,
+				name: 'el-input',
+				attributes: { placeholder: '请输入', disabled: true },
+				formItemAttributes: {
+					label: '所属商户',
+					prop: 'companyName',
+					rules: [...required]
+				},
+			}, {
+				md: 24,
+				isShow: true,
+				name: 'el-input',
+				attributes: { placeholder: '请输入', disabled: true },
+				formItemAttributes: {
+					label: '月份',
+					prop: 'month',
+					rules: [...required]
+				}
+			}, {
+				md: 24,
+				isShow: true,
+				name: 'slot-component',
+				attributes: { placeholder: '请选择', },
+				formItemAttributes: {
+					label: '创建结算单时间',
+					prop: 'createdTime',
+					rules: [...required]
+				},
+				render: (h, { props, onInput }) => {
+					var { value } = props
+					return (
+						<el-date-picker
+							v-model={this.formData.createdTime}
+							type="daterange"
+							range-separator="至"
+							start-placeholder="开始日期"
+							end-placeholder="结束日期"
+							onChange={e => {
+								this.formData.starDate = e[0]
+								this.formData.endDate = e[1]
+							}}>
+						</el-date-picker>
+					)
+				}
+			}]
 		}
-		this.confirm(this.recordSelected.map(item=>{return item.id}))
 	},
-	confirm(ids){
-		this.$confirm('请确认是否发放选中的数据, 是否继续?', '提示', {
-			confirmButtonText: '确定',
-			cancelButtonText: '取消',
-			type: 'warning'
-		}).then(() => {
-			confirm(ids).then(res => {
-				this.$message({ type: 'success', message: `发放成功!` })
-				this.$refs.pageRef.refreshList()
+	methods: {
+		// 切换状态
+		changeType(val) {
+			this.$refs.pageRef.refreshList()
+		},
+		backList() {
+			this.id = ''
+			this.formDialog = false;
+			this.$refs.pageRef.refreshList()
+		},
+		selectable(row, index) {
+			return ["NO"].includes(Object.entries(row.selectMapData.status).find(([key, val]) => val == row.status)?.[0])
+		},
+		// 列表请求函数
+		getList(p, cb) {
+			try {
+				var pam = JSON.parse(JSON.stringify(p))
+				pam.params.push({ 'param': 'a.status', "compare": "=", "value": this.status })
+				cb && cb(pam)
+				return listPageV2(pam)
+			} catch (error) {
+				console.log(error)
+			}
+		},
+		// 列表导出函数
+		exportList: pageExport,
+		// 表格列解析渲染数据更改
+		columnParsing(item, defaultData) {
+			return defaultData
+		},
+		// 监听勾选变化
+		selectionChange(data) {
+			this.recordSelected = data
+		},
+
+		operation() {
+			return this.operationBtn({
+				detail: {
+					click: ({ row, index, column }) => {
+						this.id = row.id
+						this.formDialog = true
+					}
+				},
+				issue: {
+					conditions: ({ row, index, column }) => {
+						return row.status == 'NO'
+					},
+					click: ({ row, index, column }) => {
+						this.confirm([row.id])
+					}
+				},
+				reject: {
+					conditions: ({ row, index, column }) => {
+						return row.status == 'NO'
+					},
+					click: ({ row, index, column }) => {
+						this.cancel([row.id])
+					}
+				},
 			})
-		});
+		},
+
+
+		cancelMore() {
+			if (this.recordSelected.length == 0) {
+				return this.$message.warning('请至少勾选一条数据！');
+			}
+			this.cancel(this.recordSelected.map(item => { return item.id }))
+		},
+		cancel(ids) {
+			this.$confirm('请确认是否驳回选中的数据, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				cancel(ids).then(res => {
+					this.$message({ type: 'success', message: `驳回成功!` })
+					this.$refs.pageRef.refreshList()
+				})
+			});
+		},
+		confirmMore() {
+			if (this.recordSelected.length == 0) {
+				return this.$message.warning('请至少勾选一条数据！');
+			}
+			this.confirm(this.recordSelected.map(item => { return item.id }))
+		},
+		confirm(ids) {
+			this.$confirm('请确认是否发放选中的数据, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				confirm(ids).then(res => {
+					this.$message({ type: 'success', message: `发放成功!` })
+					this.$refs.pageRef.refreshList()
+				})
+			});
+		}
 	}
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-	.tab{
-		padding: 20px 20px 0 20px;
-	}
-	.page{
-		height: 100%;
-	}
+.tab {
+	padding: 20px 20px 0 20px;
+}
+
+.page {
+	height: 100%;
+}
 </style>