EmploymentSite/vue/src/views/jobUserManager/jobhunt/edit.vue

<template>
  <div class="card-edit" :visible="formState.loading">
    <a-form :model="dataModel" autocomplete="off" @finish="onFinish" >
      <a-divider orientation="left">求职意向信息</a-divider>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="姓名"  name="jobUserID" :label-col="{span:8}"  :rules="[{ required: true, message: '请输选择求职人员!' }]">
            <label v-if="opCategory==3">{{dataModel.name}}</label>
            <a-select ref="select" show-search optionFilterProp="label"  v-model:value="dataModel.jobUserID" >
              <a-select-option v-for="item in jobUserList" :label="item.text" :value="item.value"
                               :key="item.value">
                <span>{{ item.text }}</span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      <a-col :span="8">
        <a-form-item label="求职岗位"  name="professionName" :label-col="{span:7}" :rules="[{ required: true,message:'请选择求职岗位！' }]">
          <!-- <label v-if="opCategory==3">{{dataModel.postID}}</label> -->
          <a-cascader :load-data="loadLevelProfessionList" v-model:value="dataModel.professionName"
                      :options="firstProfessionList" change-on-select>
          </a-cascader>
        </a-form-item>
      </a-col>
        <a-col :span="9">
          <a-form-item label="月薪要求" name="salary" style="overflow: hidden;line-height: 35px;height: 35px;" :label-col="{span:7}">
            <label style="color:red;float: left;position:relative;right:80px;line-height: 35px;" >*</label>
            <a-form-item name="minSalary" :rules="[{ required: true, message: '请输入最低月薪!' }]"  style="float:left;">
              <a-input-number :controls="false" :min="0" name="minSalary" v-model:value="dataModel.minSalary"
                              style="min-width: 145px;max-width: 150px;" placeholder="" @change="salaryChange"/>
            </a-form-item>
            <label style="margin-right:10px;margin-left:10px;float: left;">-</label>
            <a-form-item name="maxSalary"  :rules="[{ required: true, message: '请输入最高月薪!' }]" style="float: left;" >
              <a-input-number :controls="false" :min="dataModel.minSalary" name="maxSalary"
                              v-model:value="dataModel.maxSalary"
                              style="min-width: 145px;max-width: 150px;" placeholder="" @change="salaryChange"/>
            </a-form-item>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="工作年限"  name="workYear" :label-col="{span:8}" :rules="[{ required: true, message: '请输入工作年限!' }]">
<!--            <label v-if="opCategory==3">{{dataModel.workYear}}</label>-->
            <a-input type="number" v-model:value="dataModel.workYear" placeholder="" />
          </a-form-item>
        </a-col>
        <a-col :span="8" >
          <a-form-item label="求职类型" name="jobHuntType" :label-col="{span:7}" :rules="[{ required: true, message: '请选择求职类型!' }]">
            <label v-if="opCategory==3">{{dataModel.jobHuntType}}</label>
            <a-select  ref="select"  v-model:value="dataModel.jobHuntType" :options="jobHuntTypeList"
                       :field-names="{label:'name',value:'value'}"   :allow-clear="true"  >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="9">

          <a-form-item label="人才类型"  name="jobUserType" :label-col="{span:7}" :rules="[{ required: true, message: '请选择人才类型!' }]">
            <label v-if="opCategory==3">{{dataModel.jobUserType }}</label>
            <a-select  ref="select"  v-model:value="dataModel.jobUserType" :options="jobUserTypeList"
                       :field-names="{label:'name',value:'value'}"  :allow-clear="true"  >
            </a-select>
          </a-form-item>
        </a-col>

      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="希望工作地区"  name="areaWork" :label-col="{span:8}" :rules="[{ required: true, message: '请输入工作地区!' }]">
<!--            <label v-if="opCategory==3">{{dataModel.areaWork}}</label>-->
<!--            <a-input v-model:value="dataModel.areaWork" placeholder=""/>-->
            <a-select
              ref="select"
              v-model:value="dataModel.areaWork"
              :options="regionList"
              :field-names="{ label: 'name', value: 'name' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="可到职日期"  name="inDate" :label-col="{span:7}" :rules="[{ required: true, message: '请输入工作地区!' }]">
            <label v-if="opCategory==3">{{dataModel.inDate}}</label>
            <a-date-picker v-model:value="dataModel.inDate"  picker="date" value-format="YYYY-MM-DD"  />
          </a-form-item>
        </a-col>
        <a-col :span="9">

        </a-col>
      </a-row>
      <a-divider orientation="left">其他信息</a-divider>
      <a-row>
        <a-textarea name="otherDemand" :auto-size="{ minRows: 4, maxRows: 10 }"  v-model:value="dataModel.otherDemand" :disabled="opCategory==3"
                    placeholder="其他信息"  />
      </a-row>
      <a-form-item class="buttom-btns">
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs, watch} from "vue";
import {useTabsViewStore} from "@/store/modules/tabsView";
import {getJobHuntByID, saveJobHuntCopy} from "@/api/jobUserManager/jobhunt"
import {getJobUserDataList} from "@/api/jobUserManager/jobuser";
import {getSysDictionaryList} from '@/api/system/dictionary';
import BUploadFile from "@/components/file/uploadFile.vue";
import {CascaderProps, message, SelectProps} from "ant-design-vue";
import {get} from "@/api/common";

interface jobHuntModel {
  dataModel: any;
}
export default defineComponent({
  name:'JobHuntEditForm',
  components: {BUploadFile},
  props: {
    loadData: {
      type: Function,
      default: null
    }
  },
  setup() {
    const title = ref();
    const opCategory = ref<any>();
    const tabsViewStore = useTabsViewStore();
    const isAllowCommit = ref<boolean>(true);
    const formData = reactive<jobHuntModel>({dataModel:{}});
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false
    });
    const firstProfessionList = ref<CascaderProps['options']>([]);
    const jobUserList = ref<SelectProps['options']>();
    const jobWorkTypeList =  ref<SelectProps['options']>();
    const jobHuntTypeList =  ref<SelectProps['options']>();
    const jobUserTypeList =  ref<SelectProps['options']>();
    const regionList = ref<SelectProps['options']>();

    const getWorkAreas = async function(){
      const result :any = await get('system/area/getCityList',{});
      regionList.value = result;
    }

    const getFirstProfessionList = () => {
      get("profession/getFirstProfessionList", null).then(data=>{
        firstProfessionList.value = (data as any[]).map((x) => {
          return {
            label: x.name,
            value: x.code,
            isLeaf: false,
            tag: 'firstLevel'
          }
        });
      });
    }
    const loadLevelProfessionList = (selectedOptions) => {
      let targetOption = selectedOptions[selectedOptions.length - 1];
      if (targetOption) {
        if (targetOption.tag == 'firstLevel') {
          get("profession/getListByParentProfessionID",{parentProfessionID:targetOption.value}).then(data => {
            targetOption.loading = false;
            targetOption.children = (data as any[]).map((x) => {
              return {
                label: x.name,
                value: x.code,
                isLeaf: false,
                tag: 'secondLevel'
              };
            });
          });
          formData.dataModel.hasProfession = false;
        } else if (targetOption.tag == "secondLevel") {
          get("profession/getListByParentProfessionID",{parentProfessionID:targetOption.value}).then(data => {
            targetOption.loading = false;
            targetOption.children = (data as any[]).map((x) => {
              return {
                label: x.name,
                value: x.code,
                isLeaf: true,
                tag: 'thirdLevel'
              };
            });
          });
          formData.dataModel.hasProfession = false;
        }
      }
    };
    watch(() => formData.dataModel.professionName, (selectedValues) => {
      if (selectedValues && selectedValues.length == 3) {
        formData.dataModel.professionID = selectedValues[2];
        formData.dataModel.hasProfession = true;
      }
    });
    const getJobUserList = async function() {
      const jobUserResult :any = await getJobUserDataList();
      jobUserList.value = jobUserResult;
      /*console.log('jobUserResult',jobUserResult);*/
    }

    const getJobWorkTypeList = async function(){
      const data :any = await getSysDictionaryList("JobWorkType");
      jobWorkTypeList.value = data;
      /*console.log('jobWorkTypeList',jobWorkTypeList.value);*/
    }
    const getJobHuntTypeList = async function(){
      const data :any = await getSysDictionaryList("JobHuntType");
      jobHuntTypeList.value = data;
      // console.log('jobHuntTypeList',jobHuntTypeList.value);
    }
    const getJobUserTypeList = async function(){
      const data :any = await getSysDictionaryList("JobUserType");
      jobUserTypeList.value = data;
      // console.log('jobUserTypeList',jobUserTypeList.value);
    }

    const loadData = (id: string) => {
      formState.loading = true;
      getWorkAreas();
      getFirstProfessionList();
      getJobUserTypeList();
      getJobHuntTypeList();
      getJobWorkTypeList();
      getJobHuntByID(id).then((result: any) => {
        formData.dataModel = result;
        formData.dataModel.hasProfession = true;
      });
      formState.loading = false;
    };

    const onClose = (reload: any) => {
      tabsViewStore.closeCurrentTabByPath('/jobusermgr/jobhunt/add');
      tabsViewStore.closeCurrentTabByPath('/jobusermgr/jobhunt/edit');
      tabsViewStore.openTab('/jobusermgr/jobhunt/index', {reload: reload});
    };

    const onFinish = () => {
      isAllowCommit.value = true;
      if(formData.dataModel.minSalary!=""&&formData.dataModel.maxSalary!=""){
        if(formData.dataModel.minSalary>formData.dataModel.maxSalary){
          message.error("最低月薪不能大于最高月薪!");
          isAllowCommit.value = false;
        }
      }

      if(!formData.dataModel.hasProfession){
        message.error("请选择完整的岗位信息!");
        isAllowCommit.value = false;
      }
      if (isAllowCommit.value){
        formData.dataModel.professionName=null;
        //console.log("当前意向信息",formData.dataModel);
        saveJobHuntCopy(formData.dataModel).then(result => {
          if (result) {
            onClose(1);
          }
        });
      }
    };

    function salaryChange() {
      if (formData.dataModel.maxSalary < formData.dataModel.minSalary) {
        formData.dataModel.maxSalary = formData.dataModel.minSalary
      }
    }

    return {
      ...toRefs(formData),
      loadData,
      onClose,
      onFinish,
      getJobUserList,
      loadLevelProfessionList,
      title,
      formState,
      opCategory,
      regionList,
      firstProfessionList,
      jobUserList,
      jobUserTypeList,
      jobHuntTypeList,
      jobWorkTypeList,
      isAllowCommit,
      salaryChange
    };
  },
  created() {
    this.getJobUserList();
    const id = history.state.params?.id;
    this.loadData(id);
  },
})
</script>