love-donation-portal/src/views/job/recruitment-detail.vue

<style scoped>
.user-panel {
  margin: 10px auto;
}
</style>
<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="title"
    :modal-append-to-body="false"
    style="text-align: left"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <div class="user-panel" v-loading="loading">
        <el-form
            ref="form"
            :model="formModel"
            :rules="ruleValidate"
            :label-width="'100px'"
        >
        <el-row>
            <el-col :span="12">
              <el-form-item label="企业" prop="companyId">
                <el-select-tree
                  :props="companyProps"
                  :options="companyResult"
                  v-model="formModel.companyId"
                  style="width:300px;"
                  size="mediumn"
                ></el-select-tree>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招聘地区" prop="area">
                <el-select-tree
                  :props="areaProps"
                  :options="areaResult"
                  v-model="formModel.area"
                  style="width:300px;"
                  size="mediumn"
                ></el-select-tree>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
              <el-form-item label="岗位" prop="title">
                  <el-input
                      v-model="formModel.title"
                      placeholder="请输入岗位"
                      style="width: 300px"
                  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位分类" prop="workCategoryId">
                <el-select-tree
                  :props="workCategoryProps"
                  :options="workCategoryResult"
                  v-model="formModel.workCategoryId"
                  style="width:300px;"
                  size="mediumn"
                ></el-select-tree>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="招聘人数" prop="positionNumber">
                    <el-input
                        v-model="formModel.positionNumber"
                        placeholder="请输入招聘人数"
                        style="width: 300px"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作年限" prop="workYear">
                <el-select v-model="formModel.workYear" filterable placeholder="请选择工作年限" style="width: 300px">
                  <el-option v-for="workYear in workYearResult" :key="workYear.value" :label="workYear.name" :value="workYear.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="学历要求" prop="education">
                    <el-select
                    v-model="formModel.education"
                    filterable
                    placeholder="请选择学历要求"
                    style="width: 300px"
                    >
                    <el-option
                        v-for="education in educationResult"
                        :key="education.value"
                        :label="education.name"
                        :value="education.id"
                    ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="性别要求" prop="positionSex">
                    <el-select
                    v-model="formModel.positionSex"
                    filterable
                    placeholder="请选择性别要求"
                    style="width: 300px"
                    >
                    <el-option
                        v-for="positionSex in positionSexResult"
                        :key="positionSex.value"
                        :label="positionSex.name"
                        :value="positionSex.id"
                    ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
              <el-form-item label="薪资" prop="wageType">
                <el-select v-model="formModel.wageType" filterable placeholder="请选择薪资" style="width:300px">
                  <el-option v-for="wageType in wageTypeResult" :key="wageType.value" :label="wageType.name" :value="wageType.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="address">
                <el-input
                    v-model="formModel.address"
                    placeholder="请输入地址"
                    style="width: 300px"
                ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="岗位描述" prop="positionMessage">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="formModel.positionMessage"
                        placeholder="请输入岗位描述"
                        style="width: 300px"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="任职要求" prop="requirements">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="formModel.requirements"
                        placeholder="请输入任职要求"
                        style="width: 300px"
                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Constant from "@/constant";
import recruitmentApi from "@/api/job/recruitment";
import dataDictionaryApi from "@/api/sys/dataDictionary";
import cityApi from "@/api/base/city";
import companyApi from "@/api/base/company";
import workCategoryApi from "@/api/job/workCategory";
import SelectTree from "@/components/SelectTree";

export default {
  props: ["businessKey", "title"],
  data() {
    return {
      formModel: {},
      ruleValidate: {
        wageType: [{ required: true, message: "薪资不能为空", trigger: "blur" }],
        workCategoryId: [{ required: true, message: "岗位分类不能为空", trigger: "blur" }],
        companyId: [{ required: true, message: "企业不能为空", trigger: "blur" }],
        title: [{ required: true, message: "岗位不能为空", trigger: "blur" }],
        area: [{ required: true, message: "招聘地区不能为空", trigger: "blur"}],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        positionMessage: [{ required: true, message: "职位描述不能为空", trigger: "blur" }],
        requirements: [{ required: true, message: "任职要求不能为空", trigger: "blur" }],
        positionNumber: [{ required: true, message: "求职人数不能为空", trigger: "blur" }],
        workYear: [{ required: true, message: "工作年限不能为空", trigger: "blur" }],
        education: [{ required: true, message: "学历要求不能为空", trigger: "blur" }],
        positionSex: [{ required: true, message: "性别要求不能为空", trigger: "blur" }],
        contactPerson: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
        tel: [{ required: true, message: "联系方式不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态(关闭,开启等)不能为空", trigger: "blur" }],
      },
      showDialog: true,
      loading: false,
      submitting: false,
      educationResult: [],
      positionSexResult: [],
      areaResult: [],
      companyResult: [],
      wageTypeResult: [],
      workYearResult: [],
      workCategoryResult: [],
      areaProps: {
        value: "id",
        label: "cityName"
      },
      companyProps: {
        value: "id",
        label: "name"
      },
      workCategoryProps: {
        value: "id",
        label: "name"
      },
    };
  },
  created() {
    dataDictionaryApi
    .findByCatalogName({
      catalogName: "学历",
    })
    .then((response) => {
      var jsonData = response.data;
      this.educationResult = jsonData.data;
    });

    dataDictionaryApi
    .findByCatalogName({
      catalogName: "性别",
    })
    .then((response) => {
      var jsonData = response.data;
      this.positionSexResult = jsonData.data;
    });

    dataDictionaryApi
    .findByCatalogName({
      catalogName: "月薪范围",
    })
    .then((response) => {
      var jsonData = response.data;
      this.wageTypeResult = jsonData.data;
    });

    dataDictionaryApi
    .findByCatalogName({
      catalogName: "工作经验",
    })
    .then((response) => {
      var jsonData = response.data;
      this.workYearResult = jsonData.data;
    });

    cityApi.list().then(response=>{
      var jsonData = response.data;

      if(jsonData.result){
        this.areaResult = jsonData.data;
      }
      else{
        this.$message.error(jsonData.message + "");
      }
    });

    companyApi.list().then(response=>{
      var jsonData = response.data;

      if(jsonData.result){
        this.companyResult = jsonData.data;
      }
      else{
        this.$message.error(jsonData.message + "");
      }
    });

    workCategoryApi.listSelectTree().then(response=>{
      var jsonData = response.data;

      if(jsonData.result){
        this.workCategoryResult = jsonData.data;
      }
      else{
        this.$message.error(jsonData.message + "");
      }
    });
  },
  methods: {
    closeDialog() {
      this.$emit("close", false);
    },
    handleSubmit() {
      var self = this;

      this.$refs["form"].validate((valid) => {
        if (valid) {
          (function () {
            var id = self.formModel.id;

            if (id == null || id.length == 0) {
              return recruitmentApi.add(self.formModel);
            } else {
              return recruitmentApi.update(self.formModel);
            }
          })().then(function (response) {
            var jsonData = response.data;

            if (jsonData.result) {
              self.$message({
                message: "保存成功!",
                type: "success",
              });

              self.$emit("close", true);
            } else {
              self.$message({
                message: jsonData.message + "",
                type: "warning",
              });

              self.$emit("close", false);
            }
          });
        }
      });
    },
  },
  mounted: function () {
    var self = this;

    (function () {
      if (self.businessKey.length == 0) {
        return recruitmentApi.create();
      } else {
        return recruitmentApi.edit(self.businessKey);
      }
    })()
      .then((response) => {
        var jsonData = response.data;
        self.loading = false;

        if (jsonData.result) {
          self.formModel = jsonData.data;
        } else {
          self.$message.error(jsonData.message + "");
        }
      })
      .catch((error) => {
        self.$message.error(error + "");
      });
  },
  components: {
    "el-select-tree": SelectTree
  },
};
</script>