wp_ajax javascript class

---

(function( $ ) {
	'use strict';
	class SendAjax {
		//constructor for properties
		constructor(title,author) {
			this.title = title;
			this.author = author;

			this.ajaxurl = hr_system.ajaxurl;
			this.departmentform = $("#departmentform");
			this.departmentdelete = $(".btn-delete-department");
			this.staffform = $("#staff_create_form");
			this.moveButton = $("#move_to_former");
			this.editButton = $("#edit_staff");
			this.departmentlist = $("#department-list");
			this.stafflist = $("#staff_list");
			this.formerList = $("#former_data_body");

			this.alert = $(".alert");
			this.events();
		}

		events() {
			this.stafflist.on("click",(e) => {
				const el = e.target;
				if($(el).hasClass('delete')) {
					this.deleteItem(el);
				} 
				if ($(el).hasClass('move')) {
					this.moveStaff(el);
				}
			});
			this.departmentform.on('submit',this.createDepartment.bind(this));
			this.staffform.on('submit',this.createStaff.bind(this));
			this.departmentlist.on('click',(e) => {
				this.deleteItem(e.target);
			});
			this.formerList.on('click',(e) => {

				
				this.deleteItem(e.target);
			});

		}
		//methods 
		//
		createStaff(e) {

			e.preventDefault();  //避免submit带来一瞬间的动作
			let postdata = this.staffform.serialize();
			postdata += "&action=hr_system_admin_request&param=create_staff";

			$.post(this.ajaxurl,postdata,(response) => {
				let data = $.parseJSON(response);

				if (data.status == 1) {
					this.showAlert(data,'success');
					this.staffform.find('input,textarea').val('');
					setTimeout(() => {location.reload();},1000);
				}
			});
		}

		moveStaff(el) {

			//把点击的那行数据插入到wp_hr_system_former_表里，通过wp_ajax 动作。 
			//首先要获取当前行的数据,  用到$wpdb->get_row 
			//$user_data = $wpdb->get_row(“SELECT * FROM wp_users WHERE ID=1”);
			//在staff的模板进行操作
			//把点击得到的数据传送到request里也就是这里的Postdata
			//el是点击的对象，el.target包含了完整的属性
			//传递当前的data-id console.log(el.target.attr('data_id')); 

			let moveId = $(el).attr('data_id');
			let today = new Date();

			let exitDate = today.toDateString();
			let postdata = "action=hr_system_admin_request&param=move_staff&moveid=" + moveId + "&date=" + exitDate;

			$.post(this.ajaxurl,postdata,(response) => {
				let data = $.parseJSON(response);

				if (data.status == 1) {
					setTimeout(() => {location.reload();},1000);

				}
				console.log(response);
			})

			}
		
		createDepartment(e) {

			e.preventDefault();
			let postdata = this.departmentform.serialize();
			postdata += "&action=hr_system_admin_request&param=create_department";
			
			$.post(this.ajaxurl,postdata,(response) => {
				
				let data = $.parseJSON(response);

				if (data.status == 1) {
					this.showAlert(data,'success');
					$("#departmentform").find('input,textarea').val('');

					setTimeout(() => {
						location.reload();
					},1000);
				} else {
					this.showAlert(data,'danger');

				}
			});}

		showAlert(data,className) {
			this.alert.removeClass("d-none");
			this.alert.addClass(` alert-${className}`);
			this.alert.text(data.message);

			setTimeout(() => {
				this.alert.addClass("d-none");
			},3000);

		}

		deleteItem(el) {
			//如果只是 delete 按键的 click 动作 永远只会响应第一个 
			//make sure what we click contains the class delete whici is set by the html 
			
				//获取url 的page部分 从而来根据page slug 来判断数据类型 如何确定当前页面通过不同的页面删除不同的数据？
				const queryString = window.location.search;
				const urlParams = new URLSearchParams(queryString);
				const pages = urlParams.get('page');


			let item_row_id = $(el).attr('data-id');
			let postdata = "action=hr_system_admin_request&param=delete_item&item_id="+item_row_id+"&page="+pages;

			$.post(this.ajaxurl,postdata,(response) => {
				
				let data = $.parseJSON(response);
				if (data.status == 1) {
					if ($(el).hasClass('delete')) {
						$(el).parent().parent().slideUp();
					}
					this.showAlert(data,'success');
				} else {
					console.log("there's something wrong with the request");
				}
			}); 
		}}

	jQuery(document).ready(() => {
		$("#department_list_table").DataTable();
		$("#former_staff_table").DataTable();
		$("#datatable-buttons").DataTable({
			"className": "text-nowrap",
			"scrollX": true,
			lengthChange:!1, //禁止筛选显示条数选框
			buttons:["copy","excel","pdf","colvis"]}).buttons().container().appendTo("#datatable-buttons_wrapper .col-md-6:eq(0)");
		$("#datatable-buttons").DataTable().columns.adjust().draw();
		
		
		new SendAjax;
		});
})( jQuery );

---