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

<template>
  <div class="card-edit" :visible="bodyLoading">
    <a-form :model="formData" autocomplete="off" @finish="onFinish">
      <a-divider orientation="left">基础信息</a-divider>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="招聘会名称" name="name" :label-col="{span:8}"
                       :rules="[{ required: true, message: '请输入招聘会名称!' }]">
            <a-input v-model:value="formData.name" placeholder="请输入招聘会名称"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="主办单位" name="zbUnit" :label-col="{span:7}"
                       :rules="[{ required: true,message:'请输入主办单位！' }]">
            <a-input v-model:value="formData.zbUnit" placeholder="请输入主办单位"/>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item label="承办单位" name="cbUnit"
                       :label-col="{span:7}" :rules="[{ required: true,message:'请输入主办单位！' }]">
            <a-input v-model:value="formData.cbUnit" placeholder="请输入主办单位"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="招聘会地址" name="address" :label-col="{span:8}"
                       :rules="[{ required: true, message: '请输入招聘会地址!' }]">
            <a-input v-model:value="formData.address" placeholder="请输入招聘会地址"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="企业数量" name="companyCount" :label-col="{span:7}"
                       :rules="[{ required: true,message:'请输入企业数量！' }]">
            <a-input-number :min="1" v-model:value="formData.companyCount" placeholder="请输入企业数量"
                            style="width: 100%" :controls="false"/>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item label="招聘会时间" name="jobFairDate"
                       :label-col="{span:7}" :rules="[{ required: true,message:'请选择招聘会时间！' }]">
            <a-range-picker v-model:value="formData.jobFairDate" :placeholder="['开始日期', '结束日期']"
                            format="YYYY-MM-DD"
                            @change="onJobFairDateChange"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="联系人" name="userName" :label-col="{span:8}"
                       :rules="[{ required: true, message: '请输入联系人!' }]">
            <a-input v-model:value="formData.userName" placeholder="请输入联系人"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="联系电话" name="userMrobile" :label-col="{span:7}"
                       :rules="[{ required: true,message:'请输入联系电话！' }]">
            <a-input v-model:value="formData.userMrobile" placeholder="请输入联系电话"/>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item label="所属县区" name="regionCode" style="overflow: hidden;line-height: 35px;height: 35px;"
                       :label-col="{span:7}" :rules="[{ required: true,message:'请选择所属县区！' }]">
            <a-select
              ref="select"
              v-model:value="formData.regionCode"
              :options="regionList"
              :field-names="{ label: 'name', value: 'code' }"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="摊位数" name="boothCount" :label-col="{span:8}"
                       :rules="[{ required: true, message: '请输入摊位数!' }]">
            <a-input-number :min="1" v-model:value="formData.boothCount" placeholder="请输入企业数量"
                            style="width: 100%" :controls="false"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="展位总数" name="displayCount" :label-col="{span:7}"
                       :rules="[{ required: true,message:'请输入展位总数！' }]">
            <a-input-number :min="1" v-model:value="formData.displayCount" placeholder="请输入企业数量"
                            style="width: 100%" :controls="false"/>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item label="是否制作海报" name="isMake"
                       :label-col="{span:7}" :rules="[{ required: true,message:'请选择确定是否制作海报！' }]">
            <a-select
              ref="select"
              v-model:value="formData.isMake"
            >
              <a-select-option :value="true">是</a-select-option>
              <a-select-option :value="false">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="招聘会经度" name="longitude" :label-col="{span:8}">
            <a-input v-model:value="formData.longitude" placeholder="请输入经度"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="招聘会纬度" name="latitude" :label-col="{span:7}">
            <a-input v-model:value="formData.longitude" placeholder="请输入纬度"/>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item label="乘车路线" name="carLine" style="overflow: hidden;line-height: 35px;height: 35px;"
                       :label-col="{span:7}">
            <a-input v-model:value="formData.carLine" placeholder="请输入乘车路线"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col class="table-bottom-a1" span="24">
          <a-form-item :label-col="{span:24}" name="jobFariDesc" label="招聘会描述">
            <a-textarea v-model:value="formData.jobFariDesc" placeholder="请输入招聘会描述" :rows="4"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider orientation="left">其他</a-divider>
      <b-upload-file :fileRefId="formData.jobfairsID" :readonly="false" :multiple="true"
                     :setFileList="setFileList"
                     :accept="'.pdf,.png,.jpg,.jpeg,.xls,.xlsx,.doc,.docx,.txt,.ppt,.pptx'"></b-upload-file>
      <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 setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {getJobFairById, saveJobFari} from "@/api/jobUserManager/jobFair";
import {message, type SelectProps} from "ant-design-vue";
import {getRegionCodeList} from "@/api/system/area/index";
import {useTabsViewStore} from "@/store/modules/tabsView";
import {useRouter} from "vue-router";
import dayjs from "dayjs";
import BUploadFile from "@/components/file/uploadFile.vue";

const tabsViewStore = useTabsViewStore();
const router = useRouter();
const fullPath = router.currentRoute.value.fullPath;

const formData = reactive({
  jobfairsID: "",
  name: "",
  zbUnit: "",
  cbUnit: "",
  address: "",
  companyCount: "",
  displayCount: "",
  startTime: "",
  endTime: "",
  userName: "",
  userMrobile: "",
  regionCode: "",
  boothCount: "",
  isMake: "",
  longitude: "",
  latitude: "",
  carLine: "",
  jobFariDesc: "",
  jobFairDate: new Array<any>()
})
const bodyLoading = ref(false);
const regionList = ref<SelectProps['options']>();
const fileList = ref([]);
const isAllowCommit = ref<boolean>(false);

// 加载数据
async function loadData(jobFairId: string) {
  bodyLoading.value = true;
  await getRegionList()
  await getJobFairById(jobFairId).then((result) => {
    Object.keys(result).forEach((key) => {
      formData[key] = result[key];
    })
    formData.jobFairDate = [];
    if (result.startTime) {
      formData.jobFairDate.push(dayjs(result.startTime, 'YYYY-MM-DD'));
    }
    if (result.endTime) {
      formData.jobFairDate.push(dayjs(result.endTime, 'YYYY-MM-DD'));
    }
  }).finally(() => {
    bodyLoading.value = false;
  })
}

const mobileValidate = () => {
  isAllowCommit.value = true;
  const mobileReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
  const landlineReg = /[0-9]{3,4}[-][0-9]{8}/;
  if (!mobileReg.test(formData.userMrobile) && !landlineReg.test(formData.userMrobile)) {
    message.error("输入的联系电话有误!");
    isAllowCommit.value = false;
  }
}

// 提交
function onFinish() {
  isAllowCommit.value = true;

  if (!formData.startTime || !formData.endTime) {
    message.error("请选择完整的开始与结束时间!");
    return;
  }

  if (formData.userMrobile) {
    mobileValidate()
  }
  if (isAllowCommit.value) {
    saveJobFari(formData).then(() => {
      onClose(1)
    })
  }
}

// 取消
function onClose(reload: any) {
  tabsViewStore.closeCurrentTabByPath('/jobFairs/add');
  tabsViewStore.closeCurrentTabByPath('/jobFairs/edit');
  tabsViewStore.openTab('/jobFairs/index', {reload: reload});
}

const getRegionList = async function () {
  regionList.value = await getRegionCodeList();
}

const onJobFairDateChange = (dateString: any) => {
  formData.jobFairDate = dateString;
  formData.startTime = dateString ? dateString[0].format("YYYY-MM-DD") : '';
  formData.endTime = dateString ? dateString[1].format("YYYY-MM-DD") : '';
}

const setFileList = (files: any) => {
  fileList.value = files;
};

onMounted(() => {
  const id = history.state.params?.id;
  loadData(id)
})
</script>

<script lang="ts">
export default {
  name: 'JobFairsEdit'
}
</script>

<style scoped>

</style>