<!doctype html>
<html>
	<head>
		<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
		<title>流程节点人员配置</title>
		<script src="../../../js/vue/vue.js"></script>
		<script src="../../../js/vue/element-ui/lib/index.js"></script>
		<script src="../../../js/myelement.js?v=20220615"></script>
		<script src="../../../js/vue/page.js?v=20220615"></script>
		
		<link href="../../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
		<link href="../../../css/myelement.css?v=20220425" rel="stylesheet">
		<link href="../../../css/iconfont.css" rel="stylesheet">
		<link href="../../../css/page.css?v=20220425" rel="stylesheet">
		<link href="//at.alicdn.com/t/font_2374495_13ltsxm2eor.css" rel="stylesheet">
	</head>
	
	<body>
		<div id="vbody">
			<div id="page_root">
				<div class="topbar">
					<span>{{title}}</span>
					
					<div style="float: right; margin-right: 24px;">
						<el-button-group style="margin-left: 3px;">
							<el-button :disabled="!(filterObj.type && filterObj.name)" @click="addEmp">添加人员</el-button>
							<el-button :disabled="!selectedrow.id" @click="upEmp">修改</el-button>
							<el-button :disabled="!selectedrow.id" @click="delEmp">删除</el-button>
						</el-button-group>
					</div>
				</div>
			
				<div class="topbar-line">
					<div class="query-icon">
						<i class="iconfont icon-query"></i>
					</div>
					<div class="query-bar">
					</div>
				</div>
			
				<div class="versionNo">
					<h-table
						v-if="isRefresh"
						ref="table1"
						:table-fields="tableFields" 
						:table-data="tableData" 
						:is-edit-table-data="isEditTableData"
						:pagesize="pagesize"
						:pagenum="pagenum"
						:total="total"
						:table-height="tableHeight"
						:is-highlight-row="true"
						v-on:get-data="getData"
						v-on:edit-data="editData"
						v-on:del-data="delData"
						v-on:row-click="rowClick"
					>
					</h-table>
				</div>
				
				<el-dialog :title="dialog_type =='add' ? '添加人员' : '人员调整'" :visible.sync="dialog_nodeEmp" v-if="dialog_nodeEmp" width="900px">
					<h-form
						ref="form1"
						:form-attr="formAttr"
						:table-fields="formFields"
						:form-data="formData"
						v-on:show-popup="showPopup"
						v-on:visible-change="cellVisibleChange2"
					>
					</h-form>
					
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialog_nodeEmp = false" type="txt">取 消</el-button>
						<el-button type="primary" @click="saveNodeEmp":icon="buttonsconfig.save.icon">{{buttonsconfig.save.name}}</el-button>
					</div>
				</el-dialog>
				
			</div>
			
			<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 100vh;">
				<div class="spinner">
				  <div class="cube1"></div>
				  <div class="cube2"></div>
				</div>
			</div>
		</div>	
		
		<script type="text/javascript">
			var initlized = false;
			
			new ListVue({
				el: "#vbody",
				data: {
					pageAttr: {
						heightType: "page"
					},
					dataname: "actApproveField",
					filterFieldsName: "nodeEmpConfig_",
					title: "流程节点人员配置",
					actFields: [],
					
					dialog_type: "",
					dialog_nodeEmp: false,
					tableHeight:400,
					formAttr: {
						istitle: false,
						//title: "商业备案编辑",
						columnnumber: 1,
						labelwidth: "200px",
						labelposition: "right",
						size: "medium",
						border: "10px solid #c6c6c600"
					},
					formData: {},
					formFields: [],
					defaultFormFields: [
						{isshow: "T", field: "emp_name", name: "审批人员", required: true, type: "popup",labelwidth: "120px"},
					],
				},
				created() {
					
				},
				
				mounted() {
					var me = this;
					
					this.initData();
					this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
						hideLoading();
					});
				},
				
				methods:{
					initData() {
						if (initlized) { return; }
						initlized = true;
						
						//this.onQuery();
					},
					onInitFilter: function() {
						
						//清空
						this.filterObj = {};
						this.tableFields = [];
						this.tableData = [];
						this.pagesize = 10;
						this.pagenum= 1;
						this.total= 0;
						
					},
					onServerInitData(data) {
						var me = this.data;
						
						me.filterFields = [
							{isshow: "T", field: "type", name: "流程", fieldtype: "", type: "select", isrefresh:true, options: [], props:{value: "type", label: "name", checkStrictly: true}},
							{isshow: "T", field: "name", name: "节点", fieldtype: "", type: "select", isrefresh:true, options: [], props:{value: "id", label: "name", checkStrictly: true}},
						];
								
						if(me.filterFields.length > 0) {
							for(var i=0; i < me.filterFields.length; i++) {
								let fieldObj_ = me.filterFields[i];
								
								me.filterFieldsObj[fieldObj_.field] = fieldObj_;
							}
						}	
					},
					
					doOnQuery() {
						if(this.filterObj.type && this.filterObj.name) {
							this.onQuery();
						}
					},
					
					doQuery() {
						let me = this;
						let param_ = {
							isClientMode: false,
							dataname: "actApproveField",
							filter: "type = '" + this.filterObj.type +"' and role_id = '"+this.filterObj.name+"'",
							orderby:"level,order_no "
						}
						Server.call("root/data/getEntitySet", param_, function(result) {
							var tableFields_ = [];
							me.actFields = result.data.entityset;
							for(var i=0;i<result.data.entityset.length;i++){
								var tableFields_1 = {};
								tableFields_1.type = result.data.entityset[i].field_type;
								tableFields_1.name = result.data.entityset[i].remark;
								tableFields_1.dataname = result.data.entityset[i].link_data_name;
								tableFields_1.isshow = "T";
								if (tableFields_1.type == 'input') {
									tableFields_1.value = result.data.entityset[i].link_field;
									tableFields_1.field = result.data.entityset[i].display_field
								} else{
									tableFields_1.field = "field" + result.data.entityset[i].order_no;//result.data.entityset[i].display_field;
									tableFields_1.value = result.data.entityset[i].link_field;
									tableFields_1.label = result.data.entityset[i].display_field;
								}
								
								tableFields_.push(tableFields_1)
							}
							var tableFields_2 = {
								isshow:"T",
								field :"emp_name",
								name :"审批人名称"
							};
							var tableFields_3 = {
								isshow:"T",
								field :"emp_code",
								name :"审批人编码"
							};
							tableFields_.push(tableFields_3)
							tableFields_.push(tableFields_2)
							me.tableFields = tableFields_;
							me.setFormFields();
							me.getTableFieldsFormatterjson();
							me.doGetData();
							
						});
					},
					
					doGetData() {
						var me = this;
						this.selectedrow = {};
						let param = {
							role_id:me.filterObj.name,
							type:me.filterObj.type,
							page: {
								no: me.pagenum,
								pagesize: me.pagesize
							},
						}
						
						Server.call("root/api/getActApproveEmp", param, function(result1) {
							me.total = 0;
							me.total = result1.data.page.recordcount; 
							var tableData_ = result1.data.entityset
							for(var i=0;i<result1.data.entityset.length;i++){
								for(var j=0;j<me.tableFields.length;j++){
									var name_ = me.tableFields[j].field
									
									tableData_[i][name_] = result1.data.entityset[i][name_];
								}
							}
							me.tableData = tableData_;
							me.tableDataAfter()
						});
					},
					
					
					cellVisibleChange1 (obj) {
						var me = this;
						
						if (obj.field == "type") {
							let param_ = {
								isClientMode: false,
								dataname: "actKeyMapping",
								filter: "editable = 1",
							}
							Server.call("root/data/getEntitySet", param_, function(result) {
								obj.options = result.data.entityset;
							
							});
						}
						else if (obj.field == "name") {
							if(!this.filterObj.type){
								Root.message({
									type: 'warning',
									message: '请先选择流程'
								});  
								return ;
							}
							let param_ = {
								isClientMode: false,
								dataname: "getActRole",
								filter: "act_approve_emp.type = '" + this.filterObj.type +"'",
							}
							Server.call("root/data/getEntitySet", param_, function(result) {
								obj.options = result.data.entityset;
							});
						}
					},
					
					setFormFields() {
						var formFields_ = clone(this.defaultFormFields);
						this.actFields.map(e=>{
							var formField_ = {};
							if (e.field_type == "select") {
								formField_ = {
									isshow: "T", 
									field: "field" + e.order_no, 
									name: e.remark,
									isrefresh: true,
									
									type: "select", 
									options: [], 
									dataname: e.link_data_name,
									props: {value: e.link_field, label: e.display_field, checkStrictly: true}
								}
							}
							else if (e.field_type == "popup") {
								formField_ = {
									isshow: "T", 
									field: e.display_field, 
									name: e.remark,
									
									type: "popup", 
									options: [], 
									dataname: e.dataname
								}
							}
							
							formFields_.push(formField_);
						})
						
						this.formFields = clone(formFields_);
						
						this.getFormFieldsOptions();
					},
					
					addEmp() {
						this.dialog_type = "add";
						this.formData = {};
						
						this.dialog_nodeEmp = true;
					},
					upEmp() {
						this.dialog_type = "up";
						this.formData = clone(this.selectedrow);
						
						this.dialog_nodeEmp = true;
						
					},
					delEmp() {
						var me = this;
						var row = this.selectedrow;
						Root.confirm('确定删除' + this.selectedrow.emp_name + '吗?', '删除提示', {
						  confirmButtonText: '删除',
						  cancelButtonText: '取消',
						  type: 'warning'
						}).then(() => {
							let param = {
								id: row.id,
								isClientMode: false,
								dataname: "actApproveEmp",
							}
							Server.call("root/data/deleteEntity", param, function(result) {
								console.log(result);
								Root.message({
									type: 'success',
									message: '删除成功!'
								});
								me.doGetData();
							});
						}).catch(() => {
							Root.message({
								type: 'info',
								message: '已取消删除'
							});          
						});
					},
					saveNodeEmp() {
						var me = this;
						var row_ = {
							type: this.filterObj.type,
							role_id: this.filterObj.name,
							emp_code: this.formData.emp_code,
						}
						if (this.formData.id) {
							row_.id = this.formData.id
						}
						
						for (var filter_ in this.formData) {
							if (filter_.indexOf("field") != -1 && this.formData[filter_]) {
								row_[filter_] = this.formData[filter_];
							}
						}
						
						//校验是否重复
						var filter_ = "";
						for (var k in row_) {
							if(k != "id") {
								if (!filter_) {
									filter_ = k + "='" + row_[k] + "'";
								}
								else {
									filter_ += " and " + k + "='" + row_[k] + "'";
								}
							}
							else {
								filter_ += " and " + k + "<>'" + row_[k] + "'";
							}
						}
						let param_table = {
							isClientMode: false,
							dataname: "actApproveEmp",
							filter: filter_
						}
						Server.call("root/data/getEntitySet", param_table, function(result) {
							console.log(result);
							if (result.data && result.data.entityset && result.data.entityset.length > 0) {
								Root.message({
									type: 'warning',
									message: '已存在该数据'
								});  
								return
							}
							else {
								//保存数据
								let params = clone(row_);
								params.dataName = "actApproveEmp";
								Server.call("root/data/saveEntity", params, function(result) {
									Root.message({
										type: 'success',
										message: '修改成功'
									});  
									me.dialog_nodeEmp = false;
									me.doGetData();
								});
							}
						})
						// Server.call("root/data/getEntitySet", param_, function(result) {
						// 	if (result.data && result.data.entityset && result.data.entityset.length > 0) {
						// 		Root.message({
						// 			type: 'warning',
						// 			message: '已存在该数据'
						// 		});  
						// 		return
						// 	}
						// 	else {
						// 		//保存数据
						// 		let params = clone(row_);
						// 		params.dataName = "actApproveEmp";
						// 		/* getUrl(me, "data/saveEntity", params, results => {
						// 			var aa = "";
									
									
						// 		}); */
						// 	}
						// });
					},
					
					showPopup(filter) {
						var me = this;
						var fieldObj_ = filter.obj;
						var formData_part_ = clone(me.formData);
						var field_ = fieldObj_.field;
						
						if (field_ == "emp_name") {
							Root.showPopup({
								url: "../md/customer/popup/employee_list.html",
								width: 800,
								height: 550,
								callback: function(result, callback) {
									formData_part_[field_] = result.row.md_description;
									formData_part_.emp_code = result.row.md_code;
									//formData_part_.business_operate_id = result.row.id;
									me.formData = formData_part_;
									if (callback) {
										callback();
									}
								}
							});
						}
					},
					
					cellVisibleChange2(obj) {
						let options_ = [];
					   
					   let param_ = {
					   	isClientMode: false,
					   	filter: "1=1",
					   }
					   Server.call("root/data/getEntitySet/"+ obj.dataname, param_, function(result){
					   	options_ = result.data.entityset;
					   	obj.options = options_;
					   });
					},
					
					getFormFieldsOptions() {
						this.formFields.map(obj=>{
							if (obj.type == "select") {
								let options_ = [];
								
								let param_ = {
									isClientMode: false,
									filter: "1=1",
								}
								Server.call("root/data/getEntitySet/"+ obj.dataname, param_, function(result){
									options_ = result.data.entityset;
									obj.options = options_;
								});
							}
						})
					},
					
					getTableFieldsFormatterjson() {
						var me = this;
						var tableFields_ = clone(this.tableFields);
						tableFields_.map(obj=>{
							if (obj.type == "select") {
								let param_ = {
									isClientMode: false,
									filter: "1=1",
								}
								Server.call("root/data/getEntitySet/"+ obj.dataname, param_, function(result){
									var options_ = result.data.entityset;
									
									var map_ = {};
									options_.map(e=>{
										map_[e[obj.value]] = e[obj.label];
									});
									
									obj.formatterjson = map_;
									me.tableFields = clone(tableFields_);
								});
							}
						})
					},
				
				}
			});
		</script>
		<style>
		   .el-select__tags{
		     max-height: 28px;
		     overflow: hidden;
			}
		  </style>
	</body>
</html>