love-donation-portal/src/views/base/recruitInformationInfo-detail.vue

<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="false"
      style="text-align: left;"
      @close="closeDialog"
      :close-on-click-modal="false"
      width="900px"
    >
      <div class="user-panel" v-loading="loading">
        <el-form
          ref="form"
          :model="formModel"
          :rules="ruleValidate"
          :label-width="'100px'"
          :inline="true"
        >
          <el-form-item label="选择企业" prop="enterpriseId">
            <el-select
            filterable 
            v-model="formModel.enterpriseId"
            placeholder="请选择"
            style="width: 300px"
            clearable
          >
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="行业" prop="industry">
            <el-select v-model="formModel.industry" filterable placeholder="请选择" style="width: 300px" clearable>
            <el-option
                  v-for="result in intendedIndustriesList"
                  :key="result.id"
                  :label="result.name"
                  :value="result.value"
                ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位名称" prop="positionName">
            <el-input v-model="formModel.positionName" placeholder="请输入职位名称" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="结算方式" prop="settlementMethod">
            <el-select v-model="formModel.settlementMethod" @change="handChange"  style="width: 300px" filterable placeholder="请选择" clearable>
            <el-option
                  v-for="result in methodList"
                  :key="result.id"
                  :label="result.name"
                  :value="result.value"
                ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="薪资待遇" prop="salary">
            <el-input v-model="formModel.salary" placeholder="请输入薪资待遇" style="width: 300px">
              <template slot="append">{{unit}}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="招聘人数" prop="recruitingNumbers">
            <el-input-number v-model="formModel.recruitingNumbers" :min="0" label="招聘人数"  style="width: 300px"></el-input-number>
          </el-form-item>
          <el-form-item label="年龄要求" prop="ageRequirement">
            <el-input v-model="formModel.ageRequirement" placeholder="请输入年龄要求" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="工作描述" prop="desc">
            <el-input
              style="width: 710px"
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="formModel.desc">
            </el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="formModel.contacts" placeholder="请输入联系人" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="contactsPhone">
            <el-input v-model="formModel.contactsPhone" placeholder="请输入联系电话" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="工作地区" prop="workArea">
            <el-input v-model="formModel.workArea" placeholder="请输入工作地区" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="formModel.address" placeholder="请输入详细地址" style="width: 300px"></el-input>
          </el-form-item>
        </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 recruitInformationInfoApi from "@/api/base/recruitInformationInfo";
  import dataDictionaryApi from "@/api/sys/dataDictionary";
  import enterpriseInfoApi from "@/api/base/enterpriseInfo";
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
          showPwd: true,
          ruleValidate: {
              enterpriseId: [
                { required: true, message: "请选择企业", trigger: "blur" },
              ],
              industry: [
                { required: true, message: "行业不能为空", trigger: "blur" },
              ],
              positionName: [
                { required: true, message: "职位名称不能为空", trigger: "blur" },
              ],
              salary: [
                { required: true, message: "薪资待遇不能为空", trigger: "blur" },
              ],
              settlementMethod: [
                { required: true, message: "结算方式不能为空", trigger: "blur" },
              ],
              recruitingNumbers: [
                { required: true, message: "招聘人数不能为空", trigger: "blur" },
              ],
              desc: [
                { required: true, message: "工作描述不能为空", trigger: "blur" },
              ],
              contacts: [
                { required: true, message: "联系人不能为空", trigger: "blur" },
              ],
              contactsPhone: [
                { required: true, message: "联系电话不能为空", trigger: "blur" },
              ],
              workArea: [
                { required: true, message: "工作地区不能为空", trigger: "blur" },
              ],
              address: [
                { required: true, message: "详细地址不能为空", trigger: "blur" },
              ],
          },
          roleList: [],
          formModel: {},
          showDialog: true,
          loading: false,
          submitting: false,
          intendedIndustriesList:[],
          methodList:[],
          enterpriseList:[],
          unit:"",
      };
    },
    created() {
        var self = this;
        dataDictionaryApi.findByCatalogName({catalogName: "意向行业",})
        .then((response) => {
            var jsonData = response.data;
            self.intendedIndustriesList = jsonData.data;
        });

        dataDictionaryApi.findByCatalogName({catalogName: "结算方式",})
        .then((response) => {
            var jsonData = response.data;
            self.methodList = jsonData.data;
        });

        enterpriseInfoApi.list().then(function (response) {
        var jsonData = response.data;
        if (jsonData.result) {
            if (jsonData.data != null && jsonData.data != "") {
                self.enterpriseList = jsonData.data;
            }
        }
        });
    },
    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 recruitInformationInfoApi.add(self.formModel);
              } else {
                return recruitInformationInfoApi.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);
              }
            });
          }
        });
      },
      handChange(val){
        if(val=="1"){
          this.unit="元/日"
        }
        else if(val=="2"){
          this.unit="元/周"
        }
        else if(val=="3"){
          this.unit="元/月"
        }
      }
    },
    async mounted() {
      var self = this;
      self.loading = true;
  
      (function () {
        if (self.businessKey != null && self.businessKey.length > 0) {
          return recruitInformationInfoApi.edit(self.businessKey);
        } else {
          return recruitInformationInfoApi.create();
        }
      })()
        .then((response) => {
          var jsonData = response.data;
  
          if (jsonData.result) {
            self.formModel = jsonData.data;

            let licenseImage = self.formModel.licenseImage;
            if (licenseImage != null) {
                self.fileUrl = licenseImage 
            }

            self.showModal = true;
          } else {
            self.$message.error(jsonData.message + "");
          }
  
          self.loading = false;
        })
        .catch((error) => {
          self.$message.error(error + "");
          self.loading = false;
        });
    },
    components: {
    },
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  </style>