zfire-newmall-admin/src/views/mallManagement/activityOrder/index.vue

<template>
	<div class="page">
		<template-page v-if="!formDialog" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes"
			:table-events="tableEvents" :operationColumnWidth="80" :options-evens-group="optionsEvensGroup"
			:moreParameters="moreParameters" :column-parsing="columnParsing" :operation="operation()">
			<div slot="moreSearch">
				<el-radio-group v-model="status" size="mini" @change="changeType">
					<el-radio-button label="ING">继续跟进</el-radio-button>
					<el-radio-button label="END">无需跟进</el-radio-button>
					<el-radio-button label="">全部</el-radio-button>
				</el-radio-group>
				<br><br>
			</div>
		</template-page>
		<div class="detail" v-if="formDialog">
			<detail :id="id" :activeId="activeId" @back="backList" :formType="formDialogType" :title="'活动单' + formDialogTitles[formDialogType]"></detail>
		</div>
		<!-- 批量跟进 -->
		<el-dialog title="批量跟进" :visible.sync="isShow" width="50%" :close-on-click-modal="false" :modal-append-to-body="false" @close="formData = {status: 'END',remark: ''}">
			<el-form ref="formData" :model="formData" label-width="110px" size="small" label-position="left">
				<el-row :gutter="20" justify="start">
					<el-col :span="24">
						<el-form-item label="最新跟进结果" prop="status" :required="true">
							<el-radio-group v-model="formData.status">
							    <el-radio label="ING">继续跟进</el-radio>
							    <el-radio label="END">无需跟进</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注" prop="remark" :rules="[{ required: true, message: `请输入备注内容`, trigger: 'blur' }]">
							<el-input type="textarea" :rows="3" v-model="formData.remark" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="footer">
				<el-button size="mini" @click="isShow = false">取消</el-button>
				<el-button size="mini" @click="formConfirm()" type="primary">确定</el-button>
			</div>
		</el-dialog>
		<!-- 导出 -->
		<el-dialog title="选择导出日期" :visible.sync="isShowDate" width="50%" :close-on-click-modal="false" :modal-append-to-body="false" @close="formData1.date = []">
			<el-form ref="formData1" :model="formData1" label-width="110px" size="small" label-position="left">
				<el-row :gutter="20" justify="start">
					<el-col :span="24">
						<el-form-item label="提交日期范围" prop="date" :rules="[{ required: true, message: `请选择日期`, trigger: 'change' }]">
							<el-date-picker
							      v-model="formData1.date"
							      type="daterange"
								  value-format="yyyy-MM-dd"
							      range-separator="至"
							      start-placeholder="开始日期"
							      end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="footer">
				<el-button size="mini" @click="isShowDate = false">取消</el-button>
				<el-button size="mini" @click="formConfirm1()" type="primary">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import detail from './detail.vue'
import import_mixin from '@/components/template/import_mixin.js'
import ImageUpload from '@/components/file-upload'
import { downloadFiles } from '@/utils/util'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2, pageExport, getDetail, add, follow } from "@/api/activityOrder";
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
	components: { TemplatePage, ImageUpload, detail },
	mixins: [import_mixin, operation_mixin],
	data() {
		return {
			// 表格属性
			tableAttributes: {
				// 启用勾选列
				selectColumn: true,
				selectable: this.selectable
			},
			// 表格事件
			tableEvents: {
				'selection-change': this.selectionChange
			},
			// 勾选选中行
			recordSelected: [],
			/** 表单变量 */
			formDialogType: 0,
			formDialogTitles: ["新增", "跟进", "详情"],
			formDialog: false,
			status: 'ING',
			id: '',
			activeId: '',
			promotion_questionnaire_id: '',
			isShow: false,
			isShowDate: false,
			formData: {
				status: 'END',
				remark: ''
			},
			formData1: {
				date: []
			}
		}
	},
	computed: {
		// 事件组合
		optionsEvensGroup() {
			return [
				[
					[
						this.optionsEvensAuth("add", {
							click: this.addData
						}),
					]
				],
				[
					[
						this.optionsEvensAuth("followUpMore", {
							click: this.followMore
						}),
					]
				],
				[
					[
						this.optionsEvensAuth("exp", {
							click: this.openDate
						}),
					]
				],
			]
		},
		// 更多参数
		moreParameters() {
			return []
		},
		formItems() { },
	},
	created(){
		if(this.pageType == 'detail'){
			this.activeId = this.pageCode
			this.formDialog = true
		}
	},
	methods: {
		// 切换状态
		changeType(val) {
			this.$refs.pageRef.refreshList()
		},
		backList() {
			this.id = ''
			this.formDialog = false;
			this.$refs?.pageRef?.refreshList()
		},
		// 列表请求函数
		getList(p, cb) {
			try {
				var pam = JSON.parse(JSON.stringify(p))
				pam.params.push({ "param": "a.status", "compare": "=", "value": this.status },{ "param": "a.promotion_questionnaire_id", "compare": "=", "value": this.pageCode?this.pageCode:'' })
				cb && cb(pam)
				return listPageV2(pam)
			} catch (error) {
				console.log(error)
			}
		},
		// 列表导出函数
		// exportList: pageExport,
		// 表格列解析渲染数据更改
		columnParsing(item, defaultData) {
			if (item.jname === 'startTime') {
				defaultData.render = (h, { row, index, column }) => {
					return (
						<div style="padding:0 6px;cursor: pointer;">
							{row.startTime.substring(0,10)}
						</div>
					)
				}
			}
			if (item.jname === 'endTime') {
				defaultData.render = (h, { row, index, column }) => {
					return (
						<div style="padding:0 6px;cursor: pointer;">
							{row.endTime.substring(0,10)}
						</div>
					)
				}
			}
			return defaultData
		},
		selectable(row, index) {
			return ["ING"].includes(Object.entries(row.selectMapData.status).find(([key, val]) => val == row.status)?.[0])
		},
		// 监听勾选变化
		selectionChange(data) {
			this.recordSelected = data
		},
		openDate(){
			this.isShowDate = true
		},
		operation() {
			return this.operationBtn({
				followUp: {
					conditions: ({ row, index, column }) => {
						return row.status == 'ING'
					},
					click: ({ row, index, column }) => {
						this.id = row.promotionActivityId
						this.formDialogType = 1
						this.openForm()
					}
				},
				detail: {
					click: ({ row, index, column }) => {
						this.id = row.promotionActivityId
						this.formDialogType = 2
						this.openForm()
					}
				}
			})
		},

		addData() {
			this.formDialogType = 0
			this.openForm()
		},
		openForm() {
			this.formDialog = true;
		},
		followMore() {
			if (this.recordSelected.length == 0) {
				return this.$message.warning('请至少勾选一条数据！');
			}
			this.isShow = true
		},
		formConfirm() {
			let ids = this.recordSelected.map(item => { return item.promotionActivityId })
			this.$refs.formData.validate((valid, invalidFields, errLabels) => {
				if (valid) {
					this.$confirm('请确认是否批量跟进选中的数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						follow({
							ids,
							status: this.formData.status,
							remark: this.formData.remark
						}).then(res => {
							this.isShow = false
							this.$refs?.formData?.resetFields()
							this.$message({ type: 'success', message: '批量跟进成功！' })
							this.$refs.pageRef.refreshList()
						})
					});
				}
			})	
		},
		//确认导出
		formConfirm1() {
			this.$refs.formData1.validate((valid, invalidFields, errLabels) => {
				if (valid) {
					downloadFiles('promotion/activity/export',{statDate: this.formData1.date[0] + ' 00:00:00',endDate: this.formData1.date[1] + ' 23:59:59'});
					this.isShowDate = false
				}
			})	
		},
	}
}
</script>

<style lang="scss" scoped>
.page {
	height: 100%;
}

.tab {
	padding: 20px 20px 0 20px;
}

.importResultList {
	.item {
		font-size: 16px;
		margin-bottom: 10px;
	}
}
.footer{
	display: flex;
	justify-content: flex-end;
}
</style>