简历生成工具（类似wps简历助手）

目前支持简历的编辑，导出，模块化，顺序调整，导出样式选择，完成进度等功能，已经完全可以满足简历编辑的基本需求

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-picker
                  v-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.应用市场

。。。