目前支持简历的编辑,导出,模块化,顺序调整,导出样式选择,完成进度等功能,已经完全可以满足简历编辑的基本需求
github地址:GitHub - bllon/jianli-tools: 简历助手前端项目
(求给star,具体后端项目部署可私信我)
一.项目架构
前端:vue+element-ui
后端:go+gin
部署:docker,nginx,mysql
二.项目的基本演示
1.首页
2.简历编辑页
各个模块都是单独的vue组件,可扩展,动态渲染
编辑页组件代码:
<template><div class="edit"><el-row :gutter="20" style="margin:0;"><el-col :span="12" :offset="6" style="padding-left:0;padding-right:0;"><div class="title"><h4>简历助手工具</h4></div><div class="content"><!-- 动态加载简历组件模块 --><component v-for="(app,index) in modules" :key="index" :is="app.module" v-show="app.show" v-bind:ref="app.ref" v-bind="app.data"></component></div></el-col><el-col :span="5" :offset="1" style="padding-left:0;padding-right:0;position:relation;"><div class="oprate-box"><el-progress type="dashboard" :percentage="completion_progress" :color="progress_colors" :width="60"></el-progress><div class="module_list"><div class="module" v-for="(app,index) in modules" :key="index" draggable="true"@dragstart="handleDragStart($event, index)"@dragover.prevent="handleDragOver($event, index)"@dragenter="handleDragEnter($event, index)"@dragend="handleDragEnd($event, index)"><el-checkbox v-model="app.show" :disabled="app.module == 'BaseInfo' || app.module == 'PersonalIntroduction' || app.module == 'JobIntension'"></el-checkbox><span class="module_name">{{app.label}}</span><div v-if="app.module == 'BaseInfo' || app.module == 'PersonalIntroduction' || app.module == 'JobIntension'" class="mengceng"></div></div></div><div class="save"><el-button v-if="this.id != undefined" type="danger" size="small" @click="beforeDel()">删除</el-button><el-button v-if="this.id != undefined" type="success" size="small" @click="dialogFormVisible = true">导出</el-button><el-button type="primary" size="small" @click="beforeSave()">保存</el-button></div></div></el-col></el-row><el-dialog title="导出简历" @close="handleClose" :visible.sync="dialogFormVisible" style="text-align:left;"><el-form :model="exportForm" ref="exportForm"><el-form-item label="文件类型"><el-radio-group v-model="exportForm.file_type"><el-radio label="doc"></el-radio><el-radio label="pdf"></el-radio></el-radio-group></el-form-item><el-form-item label="选择样式"><div class="style_list"><el-radio-group v-model="exportForm.style_index"><div class="style_one" v-for="(item,index) in style_list" :key="index"><div class="demo-image__preview"><el-image style="width: 100px; height: 120px":src="item.src" :preview-src-list="srcList"></el-image></div><div class="style_check"><slot></slot> <el-radio :label="index"><span></span></el-radio></div></div><div class="style_one"><div class="my_style"><el-color-pickerv-model="my_style_color":predefine="predefineColors"></el-color-picker></div><div class="style_check"><slot></slot> <el-radio label="-1"><span style="font-size:12px;font-weight:500;">自定义</span></el-radio></div></div></el-radio-group></div></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button size="small" @click="dialogFormVisible = false">取 消</el-button><el-button size="small" type="primary" @click="beforeExport()">导出</el-button></div></el-dialog></div>
</template>
3.简历导出
三.自定义模板(模板市场)
左侧是可添加的表单组件,中间是当前编辑的模板,右侧是模板对应的属性和信息(支持删除,编辑,换位)
编辑属性:
四.项目的后续迭代(画饼!!)
1.用户积分
2.应用市场
。。。