jk-temporary-workers-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="location">
            <el-input placeholder="经纬度" style="width: 300px" v-model="formModel.location">
                <i slot="append" icon="el-icon-search" class="el-icon-map-location my-font"
                @click="handleLocation(formModel.location)"></i>
            </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-item label="图片">
              <el-upload
                name="photoFile"
                :action="uploadUrl"
                :headers="headers"
                :data="uploadData"
                list-type="picture-card"
                :on-success="handlePictureCardPreview"
                :on-remove="handleRemove"
                :limit='5'
                :file-list="fileList"
              >
                <i class="el-icon-plus"></i>
                <div
                  class="el-upload__tip"
                  slot="tip"
                  style="font-weight: bold"
                >
                  建议尺寸大小为192*128,大小不超过2M,图片不超过5张
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="formModel.dialogImageUrl" alt="" />
              </el-dialog>
            </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
      :visible.sync="showMapDialog"
      title="地图选点"
      :modal-append-to-body="true"
      :append-to-body="true"
      style="text-align: left"
      width="60%"
      top="5vh"
      :close-on-click-modal="false"
    >
      <el-amap
        ref="stationMap"
        vid="stationMap"
        :amap-manager="amapManager"
        :center="pointPosition"
        :zoom="zoom"
        :events="events"
        class="amap-demo"
        :plugin="plugins"
        style="width: 100%; height: 500px"
      >
        <el-amap-marker
          vid="amapDemo"
          :position="pointPosition"
        ></el-amap-marker>

        <!--站点入口-->
        <el-amap-marker
          vid="amapDemo"
          :position="pointPosition"
        ></el-amap-marker>
      </el-amap>
      <span slot="footer" class="dialog-footer">
        <div style="position: absolute; left: 20px; bottom: 20px">
          <el-input
            placeholder="当前经纬度"
            v-model="selectedRow.location"
            style="width: 400px"
          >
            <template slot="prepend">经纬度</template>
            <!-- <el-button slot="append" icon="el-icon-search" @click="handleRegeo"
              >定位</el-button
            > -->
          </el-input>
        </div>
        <el-button @click="showMapDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSelectPoint()">确 定</el-button>
      </span>
    </el-dialog>
    </el-dialog>
  </template>
  <script>
  import Constant from "@/constant";
  import { getToken } from "@/utils/auth"; // get token from cookie
  import recruitInformationInfoApi from "@/api/base/recruitInformationInfo";
  import dataDictionaryApi from "@/api/sys/dataDictionary";
  import enterpriseInfoApi from "@/api/base/enterpriseInfo";
  import AMap from "vue-amap";

  let amapManager = new AMap.AMapManager();
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
          plugins: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType"],
          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: {},
          dialogVisible: false,
          showDialog: true,
          loading: false,
          submitting: false,
          intendedIndustriesList:[],
          methodList:[],
          enterpriseList:[],
          stationSubInfoList: [],
          selectedRow: {},
          unit:"",
          //上传地址
          fileList:[],
          uploadUrl: Constant.serverUrl + "/uploadPicture",
          uploadData: {
              subFolder: "recruitInformationInfo",
          },
          fileUrl: "",
          headers: {
              Authorization: getToken(),
          },
          head_portraitUrl: "",
          fileList1: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
          pointPosition: [112.240222, 30.337053],
          amapManager,
          zoom: 12,
          mapRuler: {},
          ranging: false,
          showMapDialog:false,
          events: {
            init: (map) => {
              //const ruler = new window.AMap.RangingTool(map);
              //this.mapRuler = ruler
            },
            click: (e) => {
              if (!this.ranging) {
                var pt = e.lnglat; //点击选择新地址为中心点
                console.log(pt);

                this.pointPosition = [pt.lng, pt.lat];
                this.selectedRow.location = pt.lng + "," + pt.lat;
              }
            }
          },
      };
    },
    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;

              self.formModel.fileList = self.fileList;

              //alert(JSON.stringify(self.fileList))
  
              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="元/月"
        }
      },
      //老师风采-图片上传--移除
      handleRemove(file) {
        var self = this;
        console.log(file.response);
        //alert(JSON.stringify(file))
        self.fileList.forEach(function(item, index) {
            if(item["name"]==file.name){
              self.fileList.splice(index,1);
            }
        })
      },
      //老师风采--图片上传数组
      handlePictureCardPreview(res,file) {
        console.log(file);
        //alert(JSON.stringify(file))
        var obj = {};
        obj["name"]=file.name;
        obj["url"]=res.data;
        this.fileList.push(obj);
        //alert(JSON.stringify(this.fileArr))
        // this.formModel.dialogImageUrl.push(file.data);
        // alert(JSON.stringify(this.formModel.dialogImageUrl))
        this.dialogVisible = false;
      },

      enitPictureCardPreview(data) {
        this.formModel.dialogImageUrl = data;
        this.dialogVisible = false;
      },

      handleLocation(location) {
        this.showMapDialog = true;

        if (location != null && location.length > 0) {
            var arr = location.split(",");

            this.pointPosition = arr;
        }
      },
      handleSelectPoint() {
        this.formModel.location =
          this.pointPosition[0] + "," + this.pointPosition[1];
        this.showMapDialog = false;
      },
    },
    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 fileList = jsonData.data.fileList;
            
            self.fileList = fileList;

            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;
  }
  .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: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>