var sp2component = {
		template:`
		<div>
			<div style="display: flex;">
				<el-input v-model="contract_id_v" placeholder="合同号" clearable style="width: 100px;" @change="input_change"></el-input>
				<!--<el-input v-model="supplier_v" placeholder="供应商" clearable style="width: 100px;" @change="input_change"></el-input> -->
				<el-input v-model="contract_name_v" placeholder="合同名称" clearable style="width: 120px;" @change="input_change"></el-input>
				<el-input v-model="rdm_v" placeholder="RDM" clearable style="width: 100px;" @change="input_change"></el-input>
				<el-input v-model="buyer_v" placeholder="采购人员" clearable style="width: 120px;" @change="input_change"></el-input>
				
				<el-checkbox style="margin: 0px;" v-model="checked" @change="if_fin_cahnge" border>已处理</el-checkbox>

				<el-button id ="bt_serach" plain type="primary" icon="el-icon-search" @click="get_ma_plan()" style="padding-left: 10px;padding-right: 10px;">搜索</el-button>
				
				<el-button id ="bt_add" v-if='level==1' plain type="primary" icon="el-icon-circle-check" @click="mul_update_pp_plan_num()" style="margin-left: 0px;padding-left: 10px;padding-right: 10px;">批量审批</el-button>
			</div>
			
			<div>
				<el-progress v-if="if_show_process1" :percentage="percent_len1" ></el-progress>
			</div>
			
			<div >
				<div class="span">
					<el-table
					    :data="tableData"
					    style="width: 100%;font-size:14px"
					    :height="tHeight"
						:row-class-name="tableRowClassName"
						@selection-change="handleSelectionChange"
						border
						:row-style="selectedRowStyle"
						@cell-dblclick="celldblclick_1"
						:header-cell-style="tableHeaderColor"
						>
						
						<el-table-column
						  type="selection"
						  width="30"
						  >
						</el-table-column>
						
						<el-table-column
						  prop="id"
						  label="序号"
						  width="60"
						  >
						</el-table-column>
						
						<el-table-column
						  prop="contract_id"
						  label="合同号"
						  width="120"
						  :show-overflow-tooltip="true">
						</el-table-column>
						
						// <el-table-column
						//   prop="supplier"
						//   label="供应商名称"
						//   width="120"
						//   :show-overflow-tooltip="true">
						// </el-table-column>
						
						<el-table-column
						  prop="contract_name"
						  label="正式合同"
						  width="160"
						  :show-overflow-tooltip="true">
						  <template slot-scope="scope">
							<el-button style="margin-right: 10px;" size="medium" type="text" @click="down_file_22(scope.row)" >{{scope.row.contract_name}}</el-button>
						  </template>
						</el-table-column>
						
						<el-table-column
						  prop="contract_name"
						  label="合同操作"
						   width="160"
						  :show-overflow-tooltip="true">
						  <template slot-scope="scope">
							  <el-upload
								v-if='scope.row.if_modify'
								class="upload-demo"
								ref="upload"
								action="/pp/upload_sp_2_file"
								:on-change="handleChange_file"
								:file-list="fileList_1"
								:show-file-list="false"
								:on-success="upload_file_success"
								:on-error="upload_file_error"
								:data="upload_param_2(scope.row)">
								<el-button v-show='scope.row.contract_name==""' slot="trigger" size="medium" type="success" >上传</el-button>
								<el-button size="medium" type="success"  @click="del_contract_file(scope.row)">删除</el-button>
								</el-upload>
						  </template>
						</el-table-column>
						
						<el-table-column
						 
						  label="RDM"
						  width="100"
						  :show-overflow-tooltip="true">
						  <template slot-scope="scope">
						  <div v-for="(item, index) in scope.row.rdm.split(/[,， ]+/)" :key="index">                      
                             <el-button :style="scope.row.redmine_color" @click="to_redmine_1(item)" type="text" size="medium">{{item}}</el-button>
                           </div>
							
						  </template>
						</el-table-column>
						
						<el-table-column
						  prop="state"
						  label="审批状态"
						 width="100"
						 :show-overflow-tooltip="true">
						</el-table-column>
						
						<!--<el-table-column
						  prop="amount"
						  label="合同金额"
						 width="100"
						 :show-overflow-tooltip="true">
						</el-table-column>-->
						
						<el-table-column
						  prop="amount_1"
						  label="审批金额"
						 width="100"
						 :show-overflow-tooltip="true">
						 <template slot-scope="scope">
							<div style="float: right;">{{convert(scope.row.amount_1)}}</div>
						 </template>
						</el-table-column>
						
						<el-table-column
						  prop="warehouse_entry_number"
						  label="入库单号"
						 width="100"
						 :show-overflow-tooltip="true">
						</el-table-column>
						<el-table-column
						  prop="buyer"
						  label="采购人员"
						 width="100"
						 :show-overflow-tooltip="true">
						</el-table-column>
						
						<el-table-column
					      prop="state_1"
						  label="付款审批"
						 width="100"
						 :show-overflow-tooltip="true">
						 
						</el-table-column>
						
						<el-table-column
						      label="操作"
						      width="100">
						      <template slot-scope="scope">
								  <el-button  v-if='level==1' class="t_hover_button"  @click="show_update_dialog(scope.row)" type="text" size="medium" >修改</el-button>
								  <!--<el-button style="margin-left: 3px;margin-right: 0px;"  @click="remove_ma_plan(scope.row)" type="text" size="medium" >删除</el-button>
									-->
							  </template>
						    </el-table-column>
					  </el-table>
				</div>
				<div class="block">
				    <span class="demonstration"></span>
				    <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="currentPage"
					  :page-sizes="[50,100, 200, 300]"
				      :page-size="pagesize"
					  :total="recordTotal"
				      layout="total, sizes, prev, pager, next, jumper"
				      >
				    </el-pagination>
				  </div>
			</div>
			
			<el-dialog
			 title="付款申请审批"
			 :visible.sync="updatedialogVisible_ex"
			 :lock-scroll ="false"
			 width="70%">
			 <el-form ref="authform_ex" :model="form" :rules="rules" label-width="160px" :inline="false" class="demo-form-inline" size="medium">
				  <el-row :gutter="10">
					  <el-col :span="8">
						  <el-form-item label="合同号" prop="contract_id" >
						  <el-input v-model="form.contract_id" :disabled="true" ></el-input>
						  </el-form-item>
					  </el-col>
					  <el-col :span="8">
							<el-form-item label="供应商名称" prop="supplier">
							<el-input v-model="form.supplier" :disabled="true"></el-input>
							</el-form-item>
					  </el-col>
					  <el-col :span="8">
							<el-form-item label="合同" prop="contract_name">
							<el-input v-model="form.contract_name" :disabled="true"></el-input>
							</el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <el-col :span="8">
						  <el-form-item label="RDM" prop="rdm" >
						  <el-input v-model="form.rdm" :disabled="true" ></el-input>
						  </el-form-item>
					  </el-col>
					  <el-col :span="8">
							<el-form-item label="审批状态" prop="state">
							<el-input v-model="form.state" :disabled="true"></el-input>
							</el-form-item>
					  </el-col>
					  <el-col :span="8" >
							<el-form-item label="合同金额" prop="amount">
							<el-input v-model="form.amount" :disabled="true"></el-input>
							</el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <el-col :span="8" >
						<el-form-item label="审批金额" prop="amount_1">
						<el-input v-model="form.amount_1" :disabled="true"></el-input>
						</el-form-item>
					  </el-col>
					  <el-col :span="8" >
							<el-form-item label="入库单号" prop="warehouse_entry_number">
							<el-input v-model="form.warehouse_entry_number" :disabled="true"></el-input>
							</el-form-item>
					  </el-col>
					  <el-col :span="8" >
							<el-form-item label="采购人员" prop="buyer">
							<el-input v-model="form.buyer" :disabled="true"></el-input>
							</el-form-item>
					  </el-col>
				  </el-row>
				  
				  <el-row :gutter="10">
					  <el-col :span="8" >
							<el-form-item label="付款审批" prop="state_1">
							<!--<el-input v-model="form.state_1" :disabled="false" ></el-input>
							-->
							<el-select clearable v-model="form.state_1" placeholder="审批状态" style="width: 160px;" @change="input_change">
								<el-option label="批准" value="批准"></el-option>
								<el-option label="拒绝" value="拒绝"></el-option>
							
							</el-select>
							</el-form-item>
					  </el-col>
				  </el-row>
			 </el-form>
			 <span slot="footer" class="dialog-footer">
			 <el-button @click="updatedialogVisible_ex = false">取 消</el-button>
			 <el-button id ="bt_ok" plain type="primary" @click="update_ma_ex();">确 定</el-button>
			 </span>
			</el-dialog>
			
		</div>
		`,
	data(){
		// 获取当前屏幕的分辨率
		let screenW = window.screen.width;
		let screenH = window.innerHeight;
		console.log("screen width:",screenW);
		console.log("screen height:",screenH);
	  return {
		tHeight:screenH-40-232,
		tHeight_1:screenH-80-34,
		tableData: Array(0),
		tableData1: Array(0),
		currentPage: 1,
		pagesize:50,
		pagecnt:1,
		recordTotal:0,
		
		checked:false,
		
		contract_id_v:'',
		supplier_v:'',
		contract_name_v:'',
		rdm_v:'',
		buyer_v:'',
		
		bt_v:'',
		et_v:'',
		msid_v:'',
		pname_v:'',
		supplier_v:'',
		state_v:'',
		
		rid_v:'',
		repairer_v:'',
		rs_v:'',
		regional_head_v:'',
		ms_v:'',
		asc_v:'',
		
		updatedialogVisible_ex:false,
		form: {
			id:0,
			contract_id:0,
			supplier:'',
			contract_name:'',
			rdm:'',
			state:'',
			amount:'',
			amount_1:'',
			warehouse_entry_number:'',
			buyer:'',
			state_1:'',
			task_ids:'',
		},
		rules: {
			product_id: [
			    { required: true, message: '六合编号不可为空', trigger: 'blur' }
			],
		},
		
		options: [],
		
		importdialogVisible:false,
		fileTemp: null,
		fileListUpload: [],
		importTableData: [],
		
		multipleSelection: [],

		if_show_processed:true,
		
		if_del_show:false,
		if_del:false,
		
		p_id_options:[],
		
		loading: false,
		percent_len:0,
		if_show_process:false,
		interval:'',
		
		if_show_process1:false,
		percent_len1:0,
		
		ma_users:[],
		disabled:false,
		
		if_do:true,
		rs_data:[],
		
		show_child:false,
		pre_id:0,
		child_data:[],
		
		row:'',
		dialogVisible:false,
		
		addplanVisible_1:false,
		maxid:-1,
		planform: {
			id:0,
			payment_month:'',
			payment:'',
			payment_user:'',
		},
		plan_op_type:0,
		
		if_paid_all:false,
		
		buyer_data:[],
		
		warning_dialogVisible:false,
		warning_data:[],
		warning_checked:false,
		
		more_query_v:'',
		
		fileList_1:'',
		
		level:0,
	  }
	},
	mounted() {
		var op_user = localStorage.getItem("online_user");
		this.$data.level = localStorage.getItem("level");
		
		this.get_ma_plan();
		this.get_buyer();
	},
	methods: {
		convert(amount){
					let numStr = (amount.replaceAll(",","").trim() * 1).toFixed(2);
					let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
					return thousandSeparated;
				},
		del_contract_file(row){
			var _this = this;
			 
			 var objs;
			 axios.post('/pp/del_contract_ex_file', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				data: row,
			})
			.then(function (response) {
				
				let r = response.data.r;
				let s = ""
				let errType = ""
				if (r == 0) {
					errType = "success"
				} else{
					errType = "error"
				}
				
				if (r ==0) {
					s = "删除成功！";
				} else{
					s = "删除失败！";
				}
				
				_this.$message({
					message: s,
					type: errType,
					duration: 1500
				});
				
				_this.get_ma_plan();;
			})
			.catch(function (error) {
			  console.log(error);
			});
		},
		
		upload_param_2(row){
			console.log("---")
			return {
				id:row.id,
				file_type:"1"
			}
		},
		upload_file_error(response, file, fileList){
			this.$message({
				message: "上传失败",
				type: "error",
				duration: 1500
			});
		},
		upload_file_success(response, file, fileList){
			this.$message({
				message: "上传成功",
				type: "success",
				duration: 1500
			});
			this.get_ma_plan();
		},
		
		handleChange_file(file, fileList) {
			console.log(file);
		    this.fileList_1 = fileList.slice(-1);
		},
		
		down_file_22(row){
			var downUrl = '/pp/download_sp_2_file'+"?id="+row.id;
			downloadUrl(row.contract_name,downUrl);
			return;
			
			var index = row.contract_name.lastIndexOf(".")
			
			if(row.contract_name.slice(index) == ".pdf"){
				var downUrl = '/file/'+'sp_1/'+row.contract_name;
				window.open(downUrl, '_blank');
			}else{
				var downUrl = '/pp/download_sp_1_file'+"?id="+row.contract_name;
				downloadUrl(row.contract_name,downUrl);
			}
		},
		
		more_query_select(value){
			console.log(value);
			console.log(this.$data.more_query_v);
			if (value=="采购人员"){
				
			} else{
				this.$data.buyer_v = ''
			}
			
			console.log("更多查询",value)
			this.get_ma_plan();
		},
		
		down_qs_files(row){
			var downUrl = '/pp/download_ds_file'+"?id="+row.qs;
			downloadUrl(row.qs,downUrl);
		},
		
		get_buyer(){
			var _this = this;
			var objs;
			axios.post('/pp/getUsers', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				index: 1,
				count: 1000
			  })
			  .then(function (response) {
				console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				for(var i =0; i< objs.length; ++i){
					if(objs[i].if_buyer ==1){
						var obj ={
							value: objs[i].username,
							label: objs[i].username,
						}
						
						_this.$data.buyer_data.push(obj);
					}
				}
			  })
			  .catch(function (error) {
				console.log(error);
			  });
		
		},
		
		tableHeaderColor({ row, column, rowIndex, columnIndex }) {
			return;
			console.log(column);
			if (rowIndex === 0 && column.label == "RDM") {
				return 'background-color: #FAD355; ';//绿色
			} else if (rowIndex === 0 && column.label =="六合编号") {
				return 'background-color: #FAD355; ';//橙色
			} else if (rowIndex === 0 && column.label =="名称") {
				return 'background-color: #BACEFD; ';//橙色
			} else if (rowIndex === 0 && column.label =="规格") {
				return 'background-color: #BACEFD; ';//橙色
			} else if (rowIndex === 0 && column.label =="单位") {
				return 'background-color: #BACEFD; ';//橙色
			} else if (rowIndex === 0 && column.label =="数量") {
				return 'background-color: #FAD355; ';//橙色
			} else if (rowIndex === 0 && column.label =="单价") {
				return 'background-color: #BACEFD; ';//橙色
			} else if (rowIndex === 0 && column.label =="付款方式") {
				return 'background-color: #BACEFD; ';//橙色
			} else if (rowIndex === 0 && column.label =="交付日期") {
				return 'background-color: #FAD355; ';//橙色
			} else if (rowIndex === 0 && column.label =="采购周期") {
				return 'background-color: #BACEFD; ';//橙色
			} else {
				return 'background: #ffffff;';
			}
		},
		
		mul_update_pp_plan_num(){
			
			if(this.$data.multipleSelection.length ==0){
				this.$message({
					message: "请选择计划",
					type: "warning",
					duration: 1500
				});
				return;
			}
			
			var _this = this;
			 
			 var objs;
			 axios.post('/pp/mul_sp_2', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				data: _this.$data.multipleSelection,
			})
			.then(function (response) {
				
				let r = response.data.r;
				let s = ""
				let errType = ""
				if (r == 0) {
					errType = "success"
				} else{
					errType = "error"
				}
				
				if (r ==0) {
					s = "修改成功！";
				} else{
					s = "修改失败！";
				}
				
				_this.$message({
					message: s,
					type: errType,
					duration: 1500
				});
				
				_this.get_ma_plan();
			})
			.catch(function (error) {
			  console.log(error);
			});
		},
		
		celldblclick_1(row, column, cell, event){
			this.show_update_dialog(row);
		},
		to_redmine_1(rdm){
			let id = parseInt(rdm);
			if (id<10000){
				return;
			}
			url = encodeURI("http://123.54.1.214:10010/redmine/issues/"+rdm);
			window.open(url, "");
		},
		to_redmine(row){
			if(row.mt!=""){
				url = encodeURI(row.buy_record);
				window.open(url, "");
			}
		},
		input_change(value) {
			console.log(value);
			this.get_ma_plan();
		},
		
		if_fin_cahnge(val){
			if(val){
				this.$data.if_do=false;
			}else{
				this.$data.if_do=true;
			}
			
			this.get_ma_plan();
		},
		selectedRowStyle({ row, rowIndex }) {
			
			for(var i=0; i< this.$data.multipleSelection.length;i++){
				if(this.$data.multipleSelection[i].id == row.id){
					let styleJson ={
						"background":"#134857",
						"color":"#FFFFFF",
					};
					return styleJson;
				}
			}
		},
		
		handleSelectionChange(val) {
			console.log("已选择");
			console.log(val);
			this.multipleSelection = val;
		},
		
		tableRowClassName({row, rowIndex}) {
				return;
				
				if (row.cti != undefined && row.cti.length>0){
					return 'child-row'; 
				}else{
					/*var n = rowIndex%2;
					if (n == 1) {
						return 'success-row';
					}*/
				}
				return '';
		},
		
		show_update_dialog(row){
			  
			  this.$data.form = {
				id:row.id,
				contract_id:row.contract_id,
				supplier:row.supplier,
				contract_name:row.contract_name,
				rdm:row.rdm,
				state:row.state,
				amount:row.amount,
				amount_1:row.amount_1,
				warehouse_entry_number:row.warehouse_entry_number,
				buyer:row.buyer,
				state_1:row.state_1,
				task_ids:row.task_ids,
			  };
			  
			console.log(this.$data.form)
			  
			//this.get_ma_user();
			
			var op_user = localStorage.getItem("online_user");
			var level = localStorage.getItem("level");
			var did = localStorage.getItem("did");
			if(level==1){
				this.$data.disabled=false;
			}else{
				this.$data.disabled =true;
			}
			console.log(level,this.$data.disabled);
			this.$data.updatedialogVisible_ex = true;
		  },
		  
		
		update_ma_ex(){
			  this.$refs['authform_ex'].validate((valid) => {
				if (valid) {
					var _this = this;
					axios.post('/pp/update_sp_2', {
						opuser:localStorage.getItem("online_user"),
						opuser_uuid:localStorage.getItem("uuid"),
						data:_this.form,
					})
					.then(function (response) {
						
						let r = response.data.r;
						let s = ""
						let errType = ""
						if (r == 0) {
							errType = "success"
							s = "修改成功！";
						} else{
							errType = "error"
							s = "修改失败！";
						}
						_this.$message({
							message: s,
							type: errType,
							duration: 1500
						});
						//更新页面
						
						if(r==0){
							_this.get_ma_plan();
							_this.$data.updatedialogVisible_ex = false;
						}
					})
					.catch(function (error) {
					  console.log(error);
					});
				}
			  });
		  },
		remove_ma_plan(row){
			
			   this.$confirm('此操作将永久删除, 是否继续?', '提示', {
			            confirmButtonText: '确定',
			            cancelButtonText: '取消',
			            type: 'warning'
			          }).then(() => {
			            var _this = this;
			            axios.post('/pp/remove_ma_plan', {
			            	opuser:localStorage.getItem("online_user"),
			            	opuser_uuid:localStorage.getItem("uuid"),
			            	id:row.id
			            })
			            .then(function (response) {
			            	
			            	let r = response.data.r;
			            	let s = ""
			            	let errType = ""
			            	if (r == 0) {
			            		errType = "success"
								s = "删除成功！";
								
								if (row.flag!="2"){
									_this.get_ma_plan();
								} else if (row.flag=="2"){
									var arr1 = new Array();   //创建一个空数组
									for(var i = 0; i < _this.$data.child_data.length;++i){
										arr1.push(_this.$data.child_data[i].id);
									}
									_this.get_single_pp(arr1);
									_this.get_ma_plan();
								}
								
			            	} else if(r==1){
								errType = "warning"
								s = "有子任务，请先删除子任务再删除主任务！";
							} else{
			            		errType = "error"
								s = "删除失败！";
			            	}
			            	_this.$message({
			            		message: s,
			            		type: errType,
			            		duration: 1500
			            	});
			            })
			            .catch(function (error) {
			              console.log(error);
			            });
			          }).catch(() => {
			          });
		  },
		  
		get_ma_plan(){
			
			document.getElementById("bt_serach").blur();
			
			var _this = this;
			var objs;
			axios.post('/pp/get_sp_2', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				index: this.$data.currentPage,
				count: this.$data.pagesize,
				contract_id:parseInt(this.$data.contract_id_v),
				supplier:this.$data.supplier_v,
				contract_name:this.$data.contract_name_v,
				rdm:this.$data.rdm_v,
				buyer:this.$data.buyer_v,
				if_done:this.$data.checked,
			  })
			  .then(function (response) {
				console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
				//_this.$data.pagecnt = response.data.pagecnt;
			  })
			  .catch(function (error) {
				console.log(error);
			  });
		},
		  
		handleSizeChange(val) {
			  //console.log(`每页 ${val} 条`);
			  this.$data.pagesize = val;
			  
			  this.get_ma_plan();
		},
		
		handleCurrentChange(val) {
		  //console.log(`当前页: ${val}`);
		  this.$data.currentPage = val;
		  
		  this.get_ma_plan();
		},
		
	  }
	}