十次方项目前端，招聘管理（七）

本文链接： https://blog.csdn.net/Eknaij/article/details/93883465

一、代码生成

使用黑马程序员代码生成器

选中vue2+ElementUI
点击代码生成：
可以在目录下看到

将api目录下生成的文件复制到我们正在开发工程的相应目录中：
在这里插入图片描述
将views\table目录下生成的视图复制到我们正在开发工程的相应目录中：

注：无法复制到Vscode中，请复制到相应的文件夹

二、路由设置

  {
    path: '/recruit',
    component: Layout,
    name: 'recruit',
    meta: { title: '招聘管理', icon: 'example' },
    children: [
      {
        path: 'enterprise',
        name: 'enterprise',
        component: () => import('@/views/table/enterprise'),
        meta: { title: '企业管理', icon: 'table' }
      },
      {
        path: 'recruit',
        name: 'recruit',
        component: () => import('@/views/table/recruit'),
        meta: { title: '招聘信息', icon: 'tree' }
      }
    ]
  }

三、企业管理修改

1.企业简介（文本域）

   <el-form-item label="企业简介"><el-input v-model="pojo.summary" type="textarea" :rows="4"></el-input></el-form-item>

2.是否热门（开关）

<el-form-item label="是否热门">
          <el-switch placeholder="是否热门" on-text="" off-text="" active-value="1" inactive-value="0" v-model="pojo.ishot" ></el-switch>
        </el-form-item>

3.网址输入（复合型输入框）

        <el-form-item label="URL">
          <el-input v-model="pojo.url" placeholder="请输入网址">
            <template slot="prepend">http://</template>
          </el-input>
        </el-form-item>

4.上传LOGO
（1）页面添加上传组件

        <el-form-item label="LOGO">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

action用于定义提交的服务器地址
show-file-list 是否显示已上传文件列表
before-upload 在上传之前被调用，用于判断图片类型和大小
on-success 在上传成功之后被调用，用于获取服务器上的文件名

（2）添加样式：

<style>
.avatar‐uploader .el‐upload {
  border: 1px dashed #d9d9d9;
  border‐radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar‐uploader .el‐upload:hover {
  border‐color: #409EFF;
}
.avatar‐uploader‐icon {
  font‐size: 28px;
  color: #8c939d;
  width: 100x;
  height: 50px;
  line‐height: 50px;
  text‐align: center;
}
.avatar {
  width: 100px;
  height: 50px;
  display: block;
}
</style>

（3）代码：
data添加属性

      imageUrl: ''

methods增加方法

    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.pojo.logo= this.imageUrl
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    }

四、招聘管理修改

任职方式(单选按钮)
修改src/views/table/recruit.vue

        <el-form-item label="任职方式">
          <el-radio v-model="pojo.type" label="1">全职</el-radio>
          <el-radio v-model="pojo.type" label="2">兼职</el-radio>
        </el-form-item>

选择企业(可搜索下拉选择框)
（1）修改src/views/table/recruit.vue 增加变量–企业列表

enterpriseList: []

（2）修改created()

  created() {
    this.fetchData()
    enterprise.getList().then(response => { // 企业列表
      if (response.flag === true) {
        this.enterpriseList = response.data
      }
    })
  },

（3）修改弹出窗口部分，将文本框替换为下拉框

        <el-form-item label="企业ID">
        <el-select v-model="pojo.eid" filterable placeholder="请选择">
          <el-option
          v-for="item in enterpriseList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
          </el-option>
          </el-select>
        </el-form-item>

删除创建日期
创建日期是在后端自动生成的，所以要在弹出窗口中删除控件
状态（开关）
修改src/views/table/recruit.vue

        <el-form-item label="状态">
        <el-switch placeholder="是否热门" on-text="" off-text="" active-value="1" inactive-value="0" v-model="pojo.state" ></el-switch>
        </el-form-item>
``

十次方项目前端，招聘管理（七）

一、代码生成

二、路由设置

三、企业管理修改

四、招聘管理修改

猜你喜欢