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

<template>
  <div class="card-edit">
    <a-form :model="dataModel" autocomplete="off" @finish="onFinish">
      <a-divider orientation="left">求职人员信息管理</a-divider>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="姓名"
            :label-col="{ span: 6 }"
            name="name"
            :rules="[{ required: true, message: '请输入姓名!' }]"
          >
            <a-input v-model:value="dataModel.name" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="身份证号码"
            :label-col="{ span: 6 }"
            name="identityNumber"
            :rules="[{ required: true, message: '请输入身份证号码!' }]"
          >
            <a-input v-model:value="dataModel.identityNumber" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="性别" :label-col="{span:6}" name="sex"
                       :rules="[{ required: true, message: '请选择性别!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.sex"
              :options="genderList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="民族"
            :label-col="{ span: 6 }"
            name="nation"
            :rules="[{ required: true, message: '请输入民族!' }]"
          >
            <a-input v-model:value="dataModel.nation" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="政治面貌" :label-col="{span:6}" name="politicsStatusID"
                       :rules="[{ required: true, message: '请选择政治面貌!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.politicsStatusID"
              :options="politicsStatusList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="出生地"
            :label-col="{ span: 6 }"
            name="birthplace"
            :rules="[{ required: true, message: '请输入出生地!' }]"
          >
            <a-input v-model:value="dataModel.birthplace" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="出生日期"
            :label-col="{ span: 6 }"
            name="birthDay"
            :rules="[{ required: true, message: '请输入出生日期!' }]"
          >
            <a-date-picker
              v-model:value="dataModel.birthDay"
              picker="date"
              value-format="YYYY-MM-DD"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="户口性质" :label-col="{span:6}" name="familyNatureID"
                       :rules="[{ required: true, message: '请选择户口性质!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.familyNatureID"
              :options="familyNatureList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="文化程度" :label-col="{span:6}" name="cultureRank"
                       :rules="[{ required: true, message: '请选择文化程度!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.cultureRank"
              :options="cultureList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="健康状况" :label-col="{span:6}" name="healthID"
                       :rules="[{ required: true, message: '请选择健康状况!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.healthID"
              :options="healthList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="血型"
            :label-col="{ span: 6 }"
            name="bloodTypeID"
            :rules="[{ required: true, message: '请输入血型!' }]"
          >
            <a-select
              ref="select"
              v-model:value="dataModel.bloodTypeID"
              :options="bloodTypeList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="身高"
            :label-col="{ span: 6 }"
            name="height"
            :rules="[{ required: false, message: '请输入身高!' }]"
          >
            <a-input v-model:value="dataModel.height" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="视力"
            :label-col="{ span: 6 }"
            name="vision"
            :rules="[{ required: false, message: '请输入视力!' }]"
          >
            <a-input v-model:value="dataModel.vision" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="体重"
            :label-col="{ span: 6 }"
            name="weight"
            :rules="[{ required: false, message: '请输入体重!' }]"
          >
            <a-input v-model:value="dataModel.weight" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="婚姻状况" :label-col="{span:6}" name="maritalStatusID"
                       :rules="[{ required: true, message: '请选择婚姻状况!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.maritalStatusID"
              :options="maritalStatusList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="省份" :label-col="{span:6}" name="provinceCode"
                       :rules="[{ required: true, message: '请选择省份!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.provinceCode"
              :options="provinceList"
              :field-names="{ label: 'name', value: 'code' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="市/县" :label-col="{span:6}" name="regionCode"
                       :rules="[{ required: true, message: '请选择市/县!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.regionCode"
              :options="regionList"
              :field-names="{ label: 'name', value: 'code' }"
              :allow-clear="true"
              @change="regionChange"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="镇街" :label-col="{span:6}" name="streetCode"
                       :rules="[{ required: true, message: '请选择镇街!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.streetCode"
              :options="streetList"
              :field-names="{ label: 'name', value: 'code' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="联系人"
            :label-col="{ span: 6 }"
            name="userName"
            :rules="[{ required: true, message: '请输入联系人!' }]"
          >
            <a-input v-model:value="dataModel.userName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="联系电话"
            :label-col="{ span: 6 }"
            name="userMobile"
            :rules="[{ required: true, message: '请输入联系电话!' }]"
          >
            <a-input v-model:value="dataModel.userMobile" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="地址"
            :label-col="{ span: 6 }"
            name="address"
            :rules="[{ required: true, message: '请输入地址!' }]"
          >
            <a-input v-model:value="dataModel.address" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item
            label="家庭住址"
            :label-col="{ span: 6 }"
            name="familyAddress"
            :rules="[{ required: true, message: '请输入家庭住址!' }]"
          >
            <a-input v-model:value="dataModel.familyAddress" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="邮政编码"
            :label-col="{ span: 6 }"
            name="postalCode"
            :rules="[{ required: false, message: '请输入邮政编码!' }]"
          >
            <a-input v-model:value="dataModel.postalCode" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="电子邮箱"
            :label-col="{ span: 6 }"
            name="email"
            :rules="[{ required: true, message: '请输入电子邮箱!' }]"
          >
            <a-input v-model:value="dataModel.email" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="所属驿站" :label-col="{span:6}" name="siteID"
                       :rules="[{ required: true, message: '请选择所属驿站!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.siteID"
              :options="siteList"
              :field-names="{ label: 'siteName', value: 'siteID' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="就业状态" :label-col="{span:6}" name="jobStatusID"
                       :rules="[{ required: true, message: '请选择就业状态!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.jobStatusID"
              :options="jobStatusList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="重点人员类别" :label-col="{span:6}" name="keyPersonTypeID"
                       :rules="[{ required: true, message: '请选择重点人员类别!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.keyPersonTypeID"
              :options="keyPersonTypeList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="11">
          <a-form-item
            label=" 兴趣爱好"
            :label-col="{ span: 4 }"
            name="hobby"
            :rules="[{ required: false, message: '请输入兴趣爱好!' }]"
          >
<!--            <a-input v-model:value="dataModel.hobby" placeholder=""/>-->
            <a-textarea v-model:value="dataModel.hobby" placeholder="兴趣爱好" :rows="2" style="margin-left: 8px;"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: right; margin-top: 20px; margin-right: 20px">
          <Space>
            <a-button @click="addEducation">
              <template #icon>
                <plus-circle-outlined/>
              </template>
              新增
            </a-button>
          </Space>
        </a-col>
      </a-row>
      <a-divider orientation="left">教育经历</a-divider>
      <a-row>
        <a-col style="margin-bottom: 20px;">
          <a-table :columns="educationColumns" :data-source="educationData" :pagination="false"
                   bordered>
            <template #bodyCell="{ column ,index}">
              <template v-if="column.key === 'schoolName'">
                <div>
                  <a-input
                    v-model:value="educationData[index][column.key]" style="width: 200px"
                  />
                </div>
              </template>
              <template v-if="column.key === 'cultureRank'">
                <div>
                  <a-select
                    ref="select"
                    v-model:value="educationData[index][column.key]"
                    :options="cultureList"
                    :field-names="{ label: 'name', value: 'value' }"
                    :allow-clear="true" style="width: 200px"
                  >
                  </a-select>
                </div>
              </template>
              <template v-if="column.key === 'schoolTime'">
                <div>
                  <a-date-picker
                    v-model:value="educationData[index][column.key]"
                    picker="date"
                    value-format="YYYY-MM-DD"
                  />
                </div>
              </template>
              <template v-if="column.key === 'overTime'">
                <div>
                  <a-date-picker
                    v-model:value="educationData[index][column.key]"
                    picker="date"
                    value-format="YYYY-MM-DD"
                  />
                </div>
              </template>
              <template v-if="column.key === 'major'">
                <div>
                  <a-input
                    v-model:value="educationData[index][column.key]" style="width: 200px"
                  />
                </div>
              </template>
              <template v-if="column.key === 'educationOperation'">
                <a-button type="link" size="small" @click="deleteEducation(index)">删除</a-button>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: right; margin-top: 20px; margin-right: 20px">
          <Space>
            <a-button @click="addExperience">
              <template #icon>
                <plus-circle-outlined/>
              </template>
              新增
            </a-button>
          </Space>
        </a-col>
      </a-row>
      <a-divider orientation="left">工作经历</a-divider>
      <a-row>
        <a-col style="margin-bottom: 20px;">
          <a-table :columns="experienceColumns" :data-source="experienceData" :pagination="false"
                   bordered>
            <template #bodyCell="{ column ,index}">
              <template v-if="column.key === 'startTime'">
                <div>
                  <a-date-picker
                    v-model:value="experienceData[index][column.key]"
                    picker="date"
                    value-format="YYYY-MM-DD"
                  />
                </div>
              </template>
              <template v-if="column.key === 'endTime'">
                <div>
                  <a-date-picker
                    v-model:value="experienceData[index][column.key]"
                    picker="date"
                    value-format="YYYY-MM-DD"
                  />
                </div>
              </template>
              <template v-if="column.key === 'workAddress'">
                <div>
                  <a-input
                    v-model:value="experienceData[index][column.key]" style="width: 200px"
                  />
                </div>
              </template>
              <template v-if="column.key === 'duties'">
                <div>
                  <a-input
                    v-model:value="experienceData[index][column.key]" style="width: 200px"
                  />
                </div>
              </template>
              <template v-if="column.key === 'experienceOperation'">
                <a-button type="link" size="small" @click="deleteExperience(index)">删除</a-button>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>
      <a-divider orientation="left">其他</a-divider>
      <a-row>
        <a-col class="table-bottom-a1">
          <a-form-item :label-col="{span:8}" label="" name="personalSkills">
            <a-textarea v-model:value="dataModel.personalSkills" placeholder="个人技能" :rows="4"/>
          </a-form-item>
        </a-col>
      </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 {useRouter} from 'vue-router';
import type {SelectProps, TableColumnsType} from 'ant-design-vue';
import {useTabsViewStore} from '@/store/modules/tabsView';
import BUploadFile from '@/components/file/uploadFile.vue';
import {get} from "@/api/common";
import {save, getEducationList, getDataById, getExperienceList} from '@/api/jobUserManager/jobuser'

interface FormState {
  dataModel: any;
}

export default defineComponent(
  {
    components: {BUploadFile},
    setup() {
      const formState = reactive<FormState>({dataModel: {}});
      const formTableState = reactive({loading: false});
      const searchParams = reactive({
        pageIndex: 1,
        pageSize: 99
      });
      // const router = useRouter();
      const siteuserList = ref([]);
      const provinceList = ref<SelectProps['options']>([{name: '广东省', code: '440000000000000'}]);
      const siteList = ref<SelectProps['options']>();
      const genderList = ref<SelectProps['options']>();
      const keyPersonTypeList = ref<SelectProps['options']>();
      const jobStatusList = ref<SelectProps['options']>();
      const maritalStatusList = ref<SelectProps['options']>();
      const healthList = ref<SelectProps['options']>();
      const bloodTypeList = ref<SelectProps['options']>();
      const cultureList = ref<SelectProps['options']>();
      const politicsStatusList = ref<SelectProps['options']>();
      const regionList = ref<SelectProps['options']>();
      const streetList = ref<SelectProps['options']>();
      const familyNatureList = ref<SelectProps['options']>();
      // const fullpath = router.currentRoute.value.fullPath;
      const tabsViewStore = useTabsViewStore();
      const isEdit = true;

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

      get('/companyService/company/getSiteList', {}).then(data => {
        siteList.value = data;
      })

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'Gender'}).then(data => {
        genderList.value = data;
      });

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'KeyPersonType'}).then(data => {
        keyPersonTypeList.value = data;
      });

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'JobStatus'}).then(data => {
        jobStatusList.value = data;
      });

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'MaritalStatus'}).then(data => {
        maritalStatusList.value = data;
      });

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'BloodType'}).then(data => {
        bloodTypeList.value = data;
      });

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'Health'}).then(data => {
        healthList.value = data;
      });

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

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'PoliticsStatus'}).then(data => {
        politicsStatusList.value = data;
      });

      get('system/area/getCityList', {}).then(data => {
        regionList.value = data;
      });

      get('system/dictionary/getDictionaryItemByCodeList', {code: 'FamilyNature'}).then(data => {
        familyNatureList.value = data;
      });



      const changeCity = () => {
        if (formState.dataModel.regionCode) {
          get('system/area/getAreaList', {code: formState.dataModel.regionCode}).then(data => {
            streetList.value = data;
            // formState.dataModel.streetCode = "";
          })
        }
      }

      const regionChange =async function(){
        formState.dataModel.streetCode = null;
        changeCity();
      }

      const educationColumns: TableColumnsType = [
        {
          title: '序号',
          align: "center",
          key: 'educationID',
          width: 120,
          customRender: item => `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`
        },
        {
          title: '学校名',
          dataIndex: 'schoolName',
          key: 'schoolName',
          align: "center",
          width: 120
        },
        {
          title: '文化程度',
          dataIndex: 'cultureRank',
          key: 'cultureRank',
          align: "center",
          width: 120
        },
        {
          title: '就读时间',
          dataIndex: 'schoolTime',
          key: 'schoolTime',
          align: "center",
          width: 120
        },
        {
          title: '毕业时间',
          dataIndex: 'overTime',
          key: 'overTime',
          align: "center",
          width: 120
        },
        {
          title: '专业',
          dataIndex: 'major',
          key: 'major',
          align: "center",
          width: 120
        },
        {title: '操作', key: 'educationOperation', fixed: 'right', width: 120, align: "center"},
      ]

      const educationData = ref([]);
      const loadEducation = (id: any) => {
        getEducationList(id).then(data => {
          if (data)
            educationData.value = data;
        });
      }
      const addEducation = () => {
        (educationData.value as any[]).push({
          schoolName: '',
          cultureRank: null,
          schoolTime: null,
          overTime: null,
          major: ''
        });
      }
      const deleteEducation = (record) => {
        (educationData.value as any[]).splice(record, 1);
      }

      const experienceColumns: TableColumnsType = [
        {
          title: '序号',
          align: "center",
          key: 'experienceID',
          width: 120,
          customRender: item => `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          key: 'startTime',
          align: "center",
          width: 120
        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          key: 'endTime',
          align: "center",
          width: 120
        },
        {
          title: '工作单位',
          dataIndex: 'workAddress',
          key: 'workAddress',
          align: "center",
          width: 120
        },
        {
          title: '职务',
          dataIndex: 'duties',
          key: 'duties',
          align: "center",
          width: 120
        },
        {title: '操作', key: 'experienceOperation', fixed: 'right', width: 120, align: "center"},
      ]
      const experienceData = ref([]);
      const loadExperienceData = (id: any) => {
        getExperienceList(id).then(data => {
          if (data) {
            experienceData.value = data;
          }
        })
      }
      const deleteExperience = (record) => {
        (experienceData.value as any[]).splice(record, 1);
      }
      const addExperience = () => {
        (experienceData.value as any[]).push({
          startTime: null,
          endTime: null,
          workAddress: null,
          duties: null,
        });
      }


      const onAdd = () => {
        tabsViewStore.addTabByPath('', null);
      };
      const onDel = () => {

      };
      const onClose = (reload: any) => {
        tabsViewStore.closeCurrentTabByPath('/jobusermgr/jobseeker/add');
        tabsViewStore.closeCurrentTabByPath('/jobusermgr/jobseeker/edit');
        // router.push({name: '/taskAndLog/dotask/index'});
        tabsViewStore.openTab('/jobusermgr/jobseeker/index', {reload: reload});
      };

      const onFinish = () => {
        formState.dataModel.jobEducation = educationData.value;
        formState.dataModel.jobExperience = experienceData.value;
        save(formState.dataModel).then(result => {
          if (result) {
            onClose(1)
          }
        });
      }

      const loadData = (id: any) => {
        getDataById(id).then(data => {
          formState.dataModel = data
          if (formState.dataModel.regionCode) {
            changeCity();
          }
        });
      };

      return {
        ...toRefs(formState),
        isEdit,
        loadData,
        onClose,
        onFinish,
        onAdd,
        onDel,
        siteList,
        addEducation,
        deleteEducation,
        educationColumns,
        maritalStatusList,
        formState,
        formTableState,
        setFileList,
        regionList,
        educationData,
        streetList,
        familyNatureList,
        siteuserList,
        cultureList,
        genderList,
        loadEducation,
        healthList,
        keyPersonTypeList,
        politicsStatusList,
        changeCity,
        regionChange,
        jobStatusList,
        experienceData,
        provinceList,
        bloodTypeList,
        loadExperienceData,
        deleteExperience,
        addExperience,
        experienceColumns
      }
    },
    created() {
      const id = history.state.params?.id;
      this.loadData(id);
      if(id){
        this.loadEducation(id);
        this.loadExperienceData(id);
      }
    }
  })
</script>