EmploymentSite/vue/src/views/companyService/post/edit.vue

<template>
  <div class="card-edit">
    <a-form :model="dataModel" autocomplete="off" @finish="onFinish">
      <h1>岗位基础信息</h1>
      <a-row justify="start" :gutter="24" >
        <a-col flex="800px">
          <a-form-item label="企业名称" :label-col="{ span: 3}"
                       name="companyID" :rules="[{ required: true, message: '请选择关联企业!' }]" >
            <a-select :disabled="isEdit" ref="select" show-search optionFilterProp="label" v-model:value="dataModel.companyID" >
              <a-select-option v-for="item in companyList" :label="item.companyName" :value="item.companyID"
                               :key="item.companyID">
                <span>{{ item.companyName }}</span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="start">
        <a-col flex="520px">
          <a-form-item label="岗位名称" :label-col="{ span: 5 }"
                       name="professionName"  :rules="[{ required: true, message: '请选择岗位名称!' }]" >
            <a-cascader :load-data="loadLevelProfessionList" v-model:value="dataModel.professionName"
                        :options="firstProfessionList" change-on-select>
            </a-cascader>
          </a-form-item>
        </a-col>
        <a-col flex="340px">
          <a-form-item label="招聘人数" :label-col="{ span: 8}"
                       name="recruitCount" :rules="[{ required: true, message: '请输入招聘人数!' }]" >
            <a-input v-model:value="dataModel.recruitCount" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col flex="280px">
          <a-form-item label="招聘日期" :label-col="{ span: 9 }"
                       name="startTime" :rules="[{ required: true, message: '请输入招聘开始时间' }]"  >
            <a-date-picker  v-model:value="dataModel.startTime" picker="date" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <label style="margin:5px;">至</label>
        <a-col flex="170px">
          <a-form-item name="endTime" :rules="[{ required: true, message: '请输入招聘结束时间' }]" >
            <a-date-picker v-model:value="dataModel.endTime" picker="date" value-format="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="start">
        <a-col  flex="1330px">
          <a-form-item label="招聘地点" :label-col="{span:2}" name="jobPlace"
                       :rules="[{ required: true, message: '请输入招聘地点' }]" >
            <a-textarea v-model:value="dataModel.jobPlace" placeholder="" :rows="4"/>
          </a-form-item>
        </a-col>
      </a-row>
      <h1>岗位其他信息</h1>
      <a-row justify="start">
        <a-col flex="300px" >
          <a-form-item
            label="岗位月薪(元)"
            name="minSalary"
            :label-col="{span:9}"
            :rules="[{ required: false, message: '请输入金额!' }]"
          >
            <a-input v-model:value="dataModel.minSalary" placeholder="请输入金额"/>
          </a-form-item>
        </a-col>
        <label style="margin:5px 8px 5px 8px;">至</label>
        <a-col flex="200px">
          <a-form-item
            :label-col="{ span: 6 }"
            name="maxSalary"
            :rules="[{ required: false, message: '请输入金额' }]"
          >
            <a-input v-model:value="dataModel.maxSalary" placeholder="请输入金额"/>
          </a-form-item>
        </a-col>
        <a-col flex="400px">
          <a-form-item
            label="是否有试用期"
            :label-col="{ span: 9 }"
            name="isTrail"
            :rules="[{ required: false, message: '请选择是否试用期!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.isTrail"
              :options="trialStatusList"
              :field-names="{ label: 'name', value: 'value' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col flex="400px" >
          <a-form-item
            label="试用期(月)"
            :label-col="{ span: 7 }"
            name="trailMonths"
            :rules="[{ required: false, message: '请选择试用期时长!' }]"
          >
            <a-input v-model:value="dataModel.trailMonths" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="start">
        <a-col flex="300px">
          <a-form-item
            label="试用期月薪(元)"
            name="trailMaxSalary"
            :label-col="{span:9}"
            :rules="[{ required: false, message: '请输入金额!' }]"
          >
            <a-input v-model:value="dataModel.trailMaxSalary" placeholder="请输入金额"/>
          </a-form-item>
        </a-col>
        <label style="margin:5px 8px 5px 8px;">至</label>
        <a-col flex="200px">
          <a-form-item
            :label-col="{ span: 6 }"
            name="trailMinSalary"
            :rules="[{ required: false, message: '请输入金额' }]"
          >
            <a-input v-model:value="dataModel.trailMinSalary" placeholder="请输入金额"/>
          </a-form-item>
        </a-col>
        <a-col flex="400px">
          <a-form-item
            label="工作年限要求"
            :label-col="{ span: 9 }"
            name="workYear"
            :rules="[{ required: false, message: '请选择工作年限!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.workYear"
              :options="WorkYearTypeList"
              :field-names="{ label: 'name', value: 'value' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col flex="400px">
          <a-form-item
            label="学历要求"
            :label-col="{ span: 7 }"
            name="cultureRank"
            :rules="[{ required: false, message: '请选择试用期时长!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.cultureRank"
              :options="cultureLevelList"
              :field-names="{ label: 'name', value: 'value' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="start">
        <a-col flex="1330px">
          <a-form-item :label-col="{span:2}" name="welfare" label="福利待遇">
            <a-textarea v-model:value="dataModel.welfare" placeholder="" :rows="4"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row justify="start">
        <a-col flex="1330px">
          <a-form-item :label-col="{span:2}" name="postDesc" label="其他要求">
            <a-textarea v-model:value="dataModel.postDesc" placeholder="" :rows="4"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row >
        <a-col flex="1330px">
          <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-col>
      </a-row>

    </a-form>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, toRefs, watch} from 'vue';
import {useRouter} from 'vue-router';
import {savePost, getPostByID} from '@/api/companyService/post';
import type {CascaderProps,SelectProps} from 'ant-design-vue';
import {useTabsViewStore} from '@/store/modules/tabsView';
import BUploadFile from '@/components/file/uploadFile.vue';
import {get} from '@/api/common';
import {message} from "ant-design-vue";

interface postModel {
  dataModel: any;
}


export default defineComponent(
  {
    name: 'PostEdit',
    components: {BUploadFile},
    setup() {
      const postCompany = reactive<postModel>({dataModel:{}});
      const router = useRouter();

      const fullpath = router.currentRoute.value.fullPath;
      const tabsViewStore = useTabsViewStore();
      const isEdit = ref<boolean>(false);

      const cultureLevelList = ref<SelectProps['options']>();
      const WorkYearTypeList = ref<SelectProps['options']>();
      const companyList = ref<SelectProps['options']>();
      const postStatusList = [{name: '启用', value: 1}, {name: '停用', value: 0}];
      const trialStatusList = [{name: '是', value: true}, {name: '否', value: false}];
      const firstProfessionList = ref<CascaderProps['options']>([]);

      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'
                };
              });
            });
            postCompany.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'
                };
              });
            });
            postCompany.dataModel.hasProfession = false;
          }

        }
      };

      watch(() => postCompany.dataModel.professionName, (selectedValues) => {
        console.log("dd",selectedValues);
        if (selectedValues && selectedValues.length == 3) {
          postCompany.dataModel.professionID = selectedValues[2];
          postCompany.dataModel.hasProfession = true;
        } else {
          postCompany.dataModel.professionID = '';
          postCompany.dataModel.hasProfession = false;
        }
      });

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'CultureLevel'}).then(result => {
        cultureLevelList.value = result;
      });

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'WorkYearType'}).then(result => {
        WorkYearTypeList.value = result;
      });

      get('companyService/company/getList', {pageIndex: 1, pageSize: 9999}).then(result => {
        companyList.value = result.list;
      })

      const onClose = () => {
        tabsViewStore.closeCurrentTabByPath('/companyService/post/add');
        tabsViewStore.closeCurrentTabByPath('/companyService/post/edit');
        router.push({name: '/companyService/post/index'});
      };

      const onFinish = () => {
        if(!postCompany.dataModel.hasProfession){
          message.error("请选择完整的岗位信息！")
        }else{
          postCompany.dataModel.professionName=null;
          console.log("当前岗位信息",postCompany.dataModel);
          savePost(postCompany.dataModel).then((result) => {
            if (result) {
              tabsViewStore.closeCurrentTab(fullpath);
              tabsViewStore.addTabByPath('/companyService/post/index', {reload: 1});
            }
          });
        }

      }


      const loadData = (id: any) => {
        isEdit.value = id != null;
        getFirstProfessionList();
        getPostByID(id).then(result => {
          console.log(result);
          postCompany.dataModel = result;
        })
      };

      return {
        ...toRefs(postCompany),
        loadData,
        onClose,
        onFinish,
        loadLevelProfessionList,
        firstProfessionList,
        companyList,
        postStatusList,
        trialStatusList,
        cultureLevelList,
        WorkYearTypeList,
        postCompany,
        isEdit
      }
    },
    created() {
      const id = history.state.params?.id;
      if (id) this.isEdit = true;
      this.loadData(id);
    }
  })
</script>

<style>
h1 {
  font-size: 18px;
  font-weight: bold;
  color: rgb(24, 144, 255);
  margin-bottom: 10px;
}
</style>