zfire-newmall-admin/src/views/workOrder/settleAccountsManagement/settleAccountsOrder/index.vue

<template>
	<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
		:operationColumnWidth="80" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
		:column-parsing="columnParsing" :operation="operation()" :exportList="exportList">
		<div slot="moreSearch">
			<el-radio-group v-model="poolStatus" 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-group>
			<br><br>
		</div>
		<el-dialog title="" width="600px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
			:show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
			<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
				<zj-form-module :title="formDialogTitles[formDialogType]" label-width="120px" :showPackUp="false"
					:form-data="formData" :form-items="formItems" :disabled="formDialogType == 2">
				</zj-form-module>
			</zj-form-container>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click="formCancel">取 消</el-button>
				<el-button size="mini" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">提交</el-button>
			</div>
		</el-dialog>
	</template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2, pageExport, pool } from "@/api/workOrder/settleAccountsOrder";
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
	components: { TemplatePage, ImageUpload },
	mixins: [import_mixin, operation_mixin],
	data() {
		return {
			// 表格属性
			tableAttributes: {
				// 启用勾选列
				selectColumn: false
			},
			// 表格事件
			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: '',
			},
			poolStatus: ''
		}
	},
	computed: {
		// 事件组合
		optionsEvensGroup() {
			return [
				[
					[
						this.optionsEvensAuth("collect", {
							click: this.poolData
						})
					]
				]
			]
		},
		// 更多参数
		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="至"
							value-format="yyyy-MM-dd"
							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()
		},
		// 列表请求函数
		getList(p, cb) {
			try {
				var pam = JSON.parse(JSON.stringify(p))
				pam.params.push({ 'param': 'a.pool_status', "compare": "=", "value": this.poolStatus })
				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 }) => {
						if (row.settleOrderType == 'EXAMINE') {
							this.$router.push({
								name: "rewardsPunishmentsOrder",
								query: {
									id: row.examineProjectId
								}
							})
						} else {
							this.$router.push({
								name: "workOrderPool",
								query: {
									id: row.orderBaseId,
									activeName: "SettleAccounts",
								}
							})
						}
					}
				}
			})
		},

		poolData() {
			this.formDialogType = 0
			this.openForm()
		},
		openForm() {
			this.formDialog = true;
		},
		formCancel() {
			this.$refs.formRef.$refs.inlineForm.clearValidate()
			this.$data.formData = this.$options.data().formData
			this.formDialog = false
		},
		formConfirm() {
			this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
				if (valid) {
					pool({
						starDate: this.formData.starDate + ' 00:00:00',
						endDate: this.formData.endDate + ' 23:59:59',
						month: this.formData.month
					}).then(res => {
						this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
						this.formCancel()
						this.$refs.pageRef.refreshList()
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tab {
	padding: 20px 20px 0 20px;
}
</style>