123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258 |
- <template>
- <div v-loading="loading">
- <el-form
- ref="form"
- :rules="formRules"
- :model="formData"
- class="form"
- label-width="100px"
- >
- <el-row :gutter="10">
- <el-col :span="12">
- <el-form-item label="职位名称" prop="jobName">
- <el-input
- v-model="formData.jobName"
- maxlength="100"
- placeholder="请输入职位名称"
- clearable
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="工作地点" prop="jobLocation">
- <el-input
- v-model="formData.jobLocation"
- maxlength="100"
- placeholder="请输入工作地点"
- clearable
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="薪资" prop="salary">
- <el-input
- v-model="formData.salary"
- maxlength="100"
- placeholder="请输入薪资"
- clearable
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="资历" prop="seniority">
- <el-input
- v-model="formData.seniority"
- maxlength="100"
- placeholder="请输入资历"
- clearable
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="福利" prop="benefit">
- <el-select
- style="width: 100%"
- v-model="formData.benefit"
- placeholder="请选择福利"
- multiple
- clearable
- >
- <el-option
- v-for="dict in benefitOptions"
- :key="dict.value"
- :label="dict.label"
- :value="dict.label"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="招聘状态" prop="status">
- <el-select
- style="width: 100%"
- v-model="formData.status"
- placeholder="请选择招聘状态"
- clearable
- >
- <!-- <el-option
- v-for="dict in dict.type.sys_job_group"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- /> -->
- <el-option
- v-for="dict in statusOptions"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="岗位要求" prop="jobRequire">
- <el-input
- v-model="formData.jobRequire"
- type="textarea"
- :rows="4"
- placeholder="请输入岗位要求"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="工作职责" prop="jobDuty">
- <el-input
- v-model="formData.jobDuty"
- type="textarea"
- :rows="4"
- placeholder="请输入工作职责"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="备注">
- <el-input
- v-model="formData.remark"
- type="textarea"
- placeholder="请输入备注"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="24" style="text-align: right">
- <el-button type="primary" @click="handleConfirm">确 定</el-button>
- <el-button @click="handleCancel">取 消</el-button>
- </el-col>
- </el-row>
- </el-form>
- </div>
- </template>
- <script>
- export default {
- dicts: [],
- props: {
- infoData: {
- type: Object,
- default: () => {},
- },
- loading: {
- type: Boolean,
- default: false,
- },
- },
- data() {
- return {
- formData: {
- jobName: "",
- jobLocation: "",
- salary: "",
- seniority: "",
- jobRequire: "",
- jobDuty: "",
- benefit: [],
- status: "",
- remark: "",
- },
- benefitOptions: [
- { value: "1", label: "六险一金" },
- { value: "2", label: "双休" },
- { value: "3", label: "年终奖" },
- { value: "4", label: "调薪" },
- { value: "5", label: "带薪年假" },
- { value: "6", label: "节日礼品" },
- { value: "7", label: "体检" },
- { value: "8", label: "下午茶" },
- { value: "9", label: "团建活动" },
- ],
- statusOptions: [
- { value: "0", label: "招聘中" },
- { value: "1", label: "招聘结束" },
- ],
- formRules: {
- jobName: [
- { required: true, message: "请输入职位名称", trigger: "blur" },
- ],
- jobLocation: [
- { required: true, message: "请输入工作地点", trigger: "blur" },
- ],
- salary: [{ required: true, message: "请输入薪资", trigger: "blur" }],
- seniority: [{ required: true, message: "请输入资历", trigger: "blur" }],
- // benefit: [
- // {
- // type: "array",
- // required: true,
- // message: "请至少选择一个福利",
- // trigger: "change",
- // },
- // ],
- benefit: [{ required: true, message: "请选择福利", trigger: "change" }],
- status: [
- { required: true, message: "请选择招聘状态", trigger: "change" },
- ],
- jobRequire: [
- { required: true, message: "请填写岗位要求", trigger: "blur" },
- ],
- jobDuty: [
- { required: true, message: "请填写工作职责", trigger: "blur" },
- ],
- },
- };
- },
- watch: {
- infoData: {
- handler(newVal) {
- if (newVal) {
- this.formData = {
- hireInfoId: newVal.hireInfoId || "",
- jobName: newVal.jobName || "",
- jobLocation: newVal.jobLocation || "",
- salary: newVal.salary || "",
- seniority: newVal.seniority || "",
- jobRequire: newVal.jobRequire || "",
- jobDuty: newVal.jobDuty || "",
- benefit: newVal.benefit ? newVal.benefit.split(",") : [],
- status: newVal.status || "",
- remark: newVal.remark || "",
- };
- this.$nextTick(() => {
- this.$refs.form && this.$refs.form.clearValidate();
- });
- }
- },
- immediate: true,
- },
- },
- created() {},
- methods: {
- handleConfirm() {
- let benefit = this.formData.benefit.join();
- let obj = {
- ...this.formData,
- benefit,
- };
- this.$refs["form"].validate((valid) => {
- if (valid) {
- this.$emit("save", obj);
- } else {
- this.$message.warning("表单校验不通过,请检查");
- }
- });
- },
- handleCancel() {
- this.formData = {
- jobName: "",
- jobLocation: "",
- salary: "",
- seniority: "",
- jobRequire: "",
- jobDuty: "",
- benefit: [],
- status: "",
- remark: "",
- };
- this.$refs.form.clearValidate();
- this.$emit("cancel");
- },
- },
- };
- </script>
|