antissoft / antissoft.dati.admin

<template>
	<div style="padding: 10px">
		<div class="seetingsDiv" style="">
			<div class="flex" style="margin-top: 10px">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="关键字">
						<el-input placeholder="输入关键字搜索" v-model="query.keyword"></el-input>
					</el-form-item>

					<el-form-item label="最高学历">
						<el-select v-model="query.xueli" placeholder="最高学历">
							<el-option label="大专" value="dazhuan"></el-option>
							<el-option label="本科" value="benke"></el-option>
							<el-option label="博士" value="boshi"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="性别">
						<el-select v-model="query.sex" placeholder="性别">
							<el-option label="男" value="1"></el-option>
							<el-option label="女" value="0"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<div class="flex align-center" style="margin-top: 10px">
				<el-button type="success" @click="search">搜索</el-button>
				<el-button size="mini" @click="handleshare()" type="primary">批量入库</el-button>
				<el-button size="mini" @click="handleAdd()" type="primary">新增一行</el-button>
				<el-upload class="upload-demo" ref="uploader" action="/api//UserInfo/ResumeIdentification" multiple
					:headers="{
            Authorization: Authorization,
          }" :limit="100" :show-file-list="false" :on-exceed="handleExceed" :on-success="handleSuccess">
					<el-button size="small" type="primary">上传简历</el-button>
				</el-upload>
			</div>
		</div>
		<div class="main-box">
			<el-table ref="mytable" :data="table_data" style="width: 100%;height:calc(100vh - 260px)" border
				@selection-change="handleSelectionChange">
				<el-table-column v-if="radio" type="index" width="50"></el-table-column>
				<el-table-column v-if="selection" type="selection" width="55"></el-table-column>
				<el-table-column align="center" v-for="(item, index, key) in table_columns" :width="item.width"
					:item="item" :key="key" :index="index" :label="item.label">
					<template slot-scope="scope">
						<el-input v-if="scope.row.edit" size="small" v-model="scope.row[item.prop]"
							:placeholder="'请输入' + item.label">
						</el-input>
						<span v-if="!scope.row.edit">{{ scope.row[item.prop] }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="300" fixed="right">
					<template slot-scope="scope">
						<!-- 全局控制的编辑 -->
						<div v-if="is_edit && scope.row.add == undefined" style="display: inline-block">
							<!-- 编辑 -->
							<el-button size="mini" v-if="!scope.row.edit" @click="handleEdit(scope.$index, scope.row)"
								type="primary">编辑
							</el-button>
							<!-- 保存 -->
							<el-button size="mini" type="success" :plain="true" v-if="scope.row.edit"
								@click="handleSave(scope.$index, scope.row)">保存</el-button>
							<el-button size="mini" :plain="true" v-if="scope.row.edit"
								@click="handleCancelSave(scope.$index, scope.row)">取消</el-button>
						</div>
						<!-- 添加控制 -->
						<div v-if="scope.row.add != undefined && scope.row.add" style="display: inline-block">
							<!-- 保存 -->
							<el-button size="mini" type="success" :plain="true" v-if="scope.row.edit"
								@click="handleSave(scope.$index, scope.row)">保存</el-button>
						</div>
						<!-- 全局控制删除 -->
						<el-button size="mini" v-if="is_delete && scope.row.add == undefined" :plain="true"
							type="warning" style="margin-left: 10px" @click="handleshare(scope.$index, scope.row)">确认入库
						</el-button>
						<el-button size="mini" v-if="is_delete && scope.row.add == undefined" :plain="true"
							type="danger" style="margin-left: 10px" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

		</div>
		<el-dialog
		  title="编辑信息"
		  :visible.sync="dialogVisible"
		  width="80%"
		  :before-close="handleClose"
		  :close-on-click-modal="false">
		  <div  style="height:fit-content;overflow-y:auto;">
			  <div class="el-col-14" v-if="currentFilePath"   >
				  				<iframe style="width: 100%; height:auto;min-height:800px;"
				  					v-if="currentFilePath  && currentFilePath.indexOf('.pdf') !=-1" :src="
				    BASE_ROOT_DOMAIN + '/pdf/web/viewer.html?file=' + BASE_ROOT_DOMAIN +currentFilePath
				  " frameborder="0"></iframe>
				  				<el-image v-else :src=" BASE_ROOT_DOMAIN +currentFilePath" :fit="'cover	'">
				  
				  				</el-image>
			  </div>
			  <div class="el-col-10" >
				  <el-form ref="form" :model="form" label-width="80px">
				    <el-form-item label="姓名">
				      <el-input v-model="form.FullName"></el-input>
				    </el-form-item>
				    <el-form-item label="手机号码">
				         <el-input v-model="form.PhoneNumber"></el-input>
				    </el-form-item>
				    <el-form-item label="出生日期">
				      <el-col :span="11">
				        <el-date-picker type="date" placeholder="选择日期" v-model="form.DateBirth" style="width: 100%;"></el-date-picker>
				      </el-col>
				    </el-form-item>
				    <el-form-item label="性别">
				      <el-radio-group v-model="form.Gender">
				        <el-radio label="男" name="type">男</el-radio>
				        <el-radio label="女" name="type">女</el-radio>
				      </el-radio-group>
				    </el-form-item>
					<el-form-item label="毕业学校">
					  <el-input v-model="form.GraduationSchool"></el-input>
					</el-form-item>
				   <el-form-item label="专业">
				     <el-input v-model="form.GraduationMajor"></el-input>
				   </el-form-item>
				   <el-form-item label="最高学历">
				     <el-input v-model="form.Education"></el-input>
				   </el-form-item>
				    <el-form-item label="城市">
				      <el-input v-model="form.IntendedCity"></el-input>
				    </el-form-item>
				  </el-form>
			  </div>
		  </div>
		
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="handleSave(1, form)">确 定</el-button>
		  </span>
		</el-dialog>
		<div class="page-box">
			<el-pagination background layout="prev, pager, next" :total="queryResult.totalCount">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		UserInfo_BatchToUser,
		UserInfo_Delete,
		UserInfo_Update,
		UserInfo_List,
	} from "@/api/user";
import { formatTime } from '@/utils/util'
	export default {
		data() {
			return {
				currentFilePath: "",
				queryResult: {},
				queryModel: {
					pageIndex: 1,
					pageSize: 10,
				},
				query: {},
				new_date_json: {}, //数据结构
				multipleSelection: [], //复选框，数据
				is_edit: true, //是否可编辑
				is_delete: true, //是否可删除
				selection: true, //是否需要复选框
				radio: false, //单选变色
				space_color: true, //隔行变色
				//表头信息
				table_columns: [{
						prop: "FullName",
						label: "姓名",
						width: "150",
					},
					{
						prop: "PhoneNumber",
						label: "手机号",
						width: "150",
					},
					{
						prop: "DateBirth",
						label: "出生日期",
						width: "180",
					},
					{
						prop: "Gender",
						label: "性别",
						width: "80",
					},
					{
						prop: "GraduationSchool",
						label: "毕业学校",
						width: "200",
					},
					{
						prop: "GraduationMajor",
						label: "专业",
						width: "200",
					},
					{
						prop: "Education",
						label: "最高学历",
						width: "",
					},
					{
						prop: "IntendedCity",
						label: "城市",
						width: "150",
					},
				],
				//表格数据
				table_data: [],
				dialogVisible:false,
				form:{},
			};
		},
		methods: {
			handleExceed() {},
			handleSuccess(res) {
				this.$refs.uploader.clearFiles();
				this.search();
			},
			search() {
				this.queryModel.pageIndex = 1;
				this.getList();
			},
			getList() {
				UserInfo_List(this.queryModel).then((res) => {
					this.queryResult = res.data;
					if (res.data.data && res.data.data.length) {
						res.data.data = res.data.data.map((t) => {
							t.DataJsonObj = JSON.parse(t.DataJson);
							return t;
						});
					}
					this.table_data = res.data.data.map(t => {
						t.DateBirth = formatTime(t.DateBirth,'yyyy-MM-dd');
						return t;
					});
				});
			},
			//隔行变色
			tableRowClassName() {
				//选取DOM节点
				var trs = this.$refs.mytable.$el
					.getElementsByTagName("tbody")[0]
					.getElementsByTagName("tr");
				for (var i in trs) {
					if (i % 2 == 0) {
						//当隔行变色未true时改变颜色
						if (this.space_color) {
							trs[i].style.backgroundColor = "#f0f9eb";
						} else {
							trs[i].style.backgroundColor = "";
						}
					}
				}
			},

			//多选框
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log("selection:", this.multipleSelection);
			},

			//编辑
			handleEdit(index, row) {
				this.dialogVisible = true;
				if (row.ViewPath) {
					this.currentFilePath = row.ViewPath;
				} else {
					this.currentFilePath = '';
				}
				this.form=row;
			},
			//删除
			handleDelete(index, row) {
				console.log(index, row);

				this.table_data.splice(index, 1);
				UserInfo_Delete(row.id);
				this.$message({
					message: "删除成功！",
					type: "success",
				});
			},

			handleshare(index, row) {
				if (!row) {
					this.table_data = [];
				} else {
					console.log(index, row);  
				}
				UserInfo_BatchToUser(row.id).then(res => {
					var msg = [];
					var data = res.data.data || {};
					 if(data)
					 {
						if(data.success >0){
							msg.push('成功'+data.success+'个');
						}
						if(data.error >0){
							msg.push('失败'+data.error+'个');
						}
						if(data.has >0){
							msg.push('已存在'+data.has+'个');
						}
					 }
					 if(msg.length <1) 	this.table_data.splice(index, 1);
					 else 
							this.$message({
							message: msg.join('\r\n'),
							type: "info",
						});
				});
			},

			//保存
			handleSave(index, row) {
				UserInfo_Update(this.form);
				this.$forceUpdate();
				this.$message({
					message: "保存成功！",
					type: "success",
				});
				this.dialogVisible = false;
			},
			handleCancelSave(index, row) {
				delete this.table_data[index].edit;
				if (this.currentFilePath == row.ViewPath) {
					this.currentFilePath = '';
				}
				this.table_data.push(this.table_data.pop());
			},
			handleAdd() {
				var addDataJson = {};
				for (var key in this.new_date_json) {
					if (key === "edit") {
						delete addDataJson[key];
					} else if (key === "add") {
						delete addDataJson[key];
					} else {
						addDataJson[key] = "";
					}
				}
				addDataJson.edit = true;
				addDataJson.add = true;
				this.table_data.push(addDataJson);
			},
			//初始化编辑属性
			initEditAttribute() {
				var self = this;
				var edit = self.edit;
			},
			initAddDataJson(dataArray) {
				//新增时，初始化数据结构
				var dataJson = dataArray;
				var newDateJson = {};
				for (var key in dataJson) {
					if (key === "edit") {
						newDateJson[key] = "true";
					} else {
						newDateJson[key] = "";
					}
				}
				newDateJson["add"] = true;
				this.new_date_json = newDateJson;
			},
		},
		created() {
			this.getList();
		},
		mounted: function() {
			this.initEditAttribute();
			//确保方法在页面渲染后调用
			this.$nextTick(function() {
				/////方法
				this.tableRowClassName();
			});
		},
		watch: {
			space_color: function() {
				//监听数据变化
				this.$nextTick(function() {
					/////方法
					this.tableRowClassName();
				});
			},
			table_data: function() {
				//监听数据变化f
				this.$nextTick(function() {
					/////方法
					this.tableRowClassName();
				});
			},
		},
	};
</script>
<style scoped>
	/deep/.el-table__body-wrapper {
		height: 92% !important;
	}
</style>
<style lang="scss" scoped>
	.main-box {
		display: flex;
	}
	.doc-view {
		margin-left: 10px;
		width: 100%;
		flex: 1;
		overflow: hidden;
	}
	.el-table__expanded-cell {
		padding: 10px;
	}
	.demo-table-expand {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		padding: 20px;
		border-radius: 10px;
	}
	.demo-table-expand .el-form-item {
		margin-bottom: 10px !important;
		min-width: 20%;
		max-width: 50%;
	}
	.demo-form-inline {
		display: flex;
		align-items: center;
	}
	.el-form--inline .el-form-item {
		display: flex;
		align-items: center;
		margin-bottom: 0;
	}
	.aligin-center {
		align-items: center;
	}
	.seetingsDiv {
		display: flex;
		align-items: center;
		width: 100%;
		height: auto;
		padding: 30px;
		background: #efefef;
		/* line-height: 60px; */
		border-radius: 5px;
		box-shadow: 0 0 5px #cdcdcd;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	.seetingsDiv button {
		height: 40px;
		background-color: #304156;
		border: 0px;
		margin-left: 10px;
		box-shadow: 0 0 5px #cdcdcd;
		float: none;
		margin-right: 10px;
		margin-top: 0;
	}
</style>