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

<template>
  <div class="card-edit">
    <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"  v-model:value="dataModel.jobUserID" :options="jobUserList"
                       :field-names="{label:'text',value:'value'}"  :allow-clear="true"  >
            </a-select>-->

            <a-select ref="select"   show-search optionFilterProp="label"
                      v-model:value="dataModel.jobUserID"
                      :allow-clear="true">
              <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="workName" :label-col="{span:7}" :rules="[{ required: true, message: '请选择工种类型!' }]">
            <label v-if="opCategory==3">{{dataModel.workName}}</label>
            <a-input  v-model:value="dataModel.workName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <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-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="人才类型"  name="jobUserType" :label-col="{span:8}" :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-col :span="8" >
          <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 type="number" name="minSalary" v-model:value="dataModel.minSalary" style="min-width: 100px;max-width: 115px;"  placeholder="" />
            </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 type="number" name="maxSalary" v-model:value="dataModel.maxSalary" style="min-width: 100px;max-width: 115px;"   placeholder=""/>
            </a-form-item>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item label="求职岗位"  name="postID" :label-col="{span:7}" :rules="[{ required: true, message: '请选择求职岗位!' }]">
            <label v-if="opCategory==3">{{dataModel.postID}}</label>
            <a-select  ref="select"  v-model:value="dataModel.postID" :options="allPostList"
                       :field-names="{label:'postName',value:'postID'}"  :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-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-form-item label="工作年限"  name="workYear" :label-col="{span:7}" :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-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} from "vue";
import {useTabsViewStore} from "@/store/modules/tabsView";
import {getJobHuntByID,saveJobHunt} from "@/api/jobUserManager/jobhunt"
import {getJobUserDataList} from "@/api/jobUserManager/jobuser";
import {getList} from "@/api/companyService/post";
import {getSysDictionaryList} from '@/api/system/dictionary';
import BUploadFile from "@/components/file/uploadFile.vue";
import {message,SelectProps} from "ant-design-vue";

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 allPostList = ref([]);
    const jobUserList = ref<SelectProps['options']>();
    const jobWorkTypeList =  ref<SelectProps['options']>();
    const jobHuntTypeList =  ref<SelectProps['options']>();
    const jobUserTypeList =  ref<SelectProps['options']>();

    const getAllPostList = async function() {
      const allPostResult :any = await getList({pageIndex:1,pageSize:10000});
      allPostList.value = allPostResult.list;
      console.log('allPostResult',allPostResult.list);
    }

    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) => {
      getAllPostList();
      getJobUserTypeList();
      getJobHuntTypeList();
      getJobWorkTypeList();
      getJobHuntByID(id).then((result: any) => {
        formData.dataModel = result;
        console.log('dataModel',formData.dataModel);
      });
    };

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

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

      if (isAllowCommit.value){
        saveJobHunt(formData.dataModel).then(result => {
          if (result) {
            onClose(1);
          }
        });
      }
    };

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