addJob.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <div v-loading="loading">
  3. <el-form
  4. ref="form"
  5. :rules="formRules"
  6. :model="formData"
  7. class="form"
  8. label-width="100px"
  9. >
  10. <el-row :gutter="10">
  11. <el-col :span="12">
  12. <el-form-item label="职位名称" prop="jobName">
  13. <el-input
  14. v-model="formData.jobName"
  15. maxlength="100"
  16. placeholder="请输入职位名称"
  17. clearable
  18. ></el-input>
  19. </el-form-item>
  20. </el-col>
  21. <el-col :span="12">
  22. <el-form-item label="工作地点" prop="jobLocation">
  23. <el-input
  24. v-model="formData.jobLocation"
  25. maxlength="100"
  26. placeholder="请输入工作地点"
  27. clearable
  28. ></el-input>
  29. </el-form-item>
  30. </el-col>
  31. <el-col :span="12">
  32. <el-form-item label="薪资" prop="salary">
  33. <el-input
  34. v-model="formData.salary"
  35. maxlength="100"
  36. placeholder="请输入薪资"
  37. clearable
  38. ></el-input>
  39. </el-form-item>
  40. </el-col>
  41. <el-col :span="12">
  42. <el-form-item label="资历" prop="seniority">
  43. <el-input
  44. v-model="formData.seniority"
  45. maxlength="100"
  46. placeholder="请输入资历"
  47. clearable
  48. ></el-input>
  49. </el-form-item>
  50. </el-col>
  51. <el-col :span="12">
  52. <el-form-item label="福利" prop="benefit">
  53. <el-select
  54. style="width: 100%"
  55. v-model="formData.benefit"
  56. placeholder="请选择福利"
  57. multiple
  58. clearable
  59. >
  60. <el-option
  61. v-for="dict in benefitOptions"
  62. :key="dict.value"
  63. :label="dict.label"
  64. :value="dict.label"
  65. />
  66. </el-select>
  67. </el-form-item>
  68. </el-col>
  69. <el-col :span="12">
  70. <el-form-item label="招聘状态" prop="status">
  71. <el-select
  72. style="width: 100%"
  73. v-model="formData.status"
  74. placeholder="请选择招聘状态"
  75. clearable
  76. >
  77. <!-- <el-option
  78. v-for="dict in dict.type.sys_job_group"
  79. :key="dict.value"
  80. :label="dict.label"
  81. :value="dict.value"
  82. /> -->
  83. <el-option
  84. v-for="dict in statusOptions"
  85. :key="dict.value"
  86. :label="dict.label"
  87. :value="dict.value"
  88. />
  89. </el-select>
  90. </el-form-item>
  91. </el-col>
  92. <el-col :span="24">
  93. <el-form-item label="岗位要求" prop="jobRequire">
  94. <el-input
  95. v-model="formData.jobRequire"
  96. type="textarea"
  97. :rows="4"
  98. placeholder="请输入岗位要求"
  99. ></el-input>
  100. </el-form-item>
  101. </el-col>
  102. <el-col :span="24">
  103. <el-form-item label="工作职责" prop="jobDuty">
  104. <el-input
  105. v-model="formData.jobDuty"
  106. type="textarea"
  107. :rows="4"
  108. placeholder="请输入工作职责"
  109. ></el-input>
  110. </el-form-item>
  111. </el-col>
  112. <el-col :span="24">
  113. <el-form-item label="备注">
  114. <el-input
  115. v-model="formData.remark"
  116. type="textarea"
  117. placeholder="请输入备注"
  118. ></el-input>
  119. </el-form-item>
  120. </el-col>
  121. <el-col :span="24" style="text-align: right">
  122. <el-button type="primary" @click="handleConfirm">确 定</el-button>
  123. <el-button @click="handleCancel">取 消</el-button>
  124. </el-col>
  125. </el-row>
  126. </el-form>
  127. </div>
  128. </template>
  129. <script>
  130. export default {
  131. dicts: [],
  132. props: {
  133. infoData: {
  134. type: Object,
  135. default: () => {},
  136. },
  137. loading: {
  138. type: Boolean,
  139. default: false,
  140. },
  141. },
  142. data() {
  143. return {
  144. formData: {
  145. jobName: "",
  146. jobLocation: "",
  147. salary: "",
  148. seniority: "",
  149. jobRequire: "",
  150. jobDuty: "",
  151. benefit: [],
  152. status: "",
  153. remark: "",
  154. },
  155. benefitOptions: [
  156. { value: "1", label: "六险一金" },
  157. { value: "2", label: "双休" },
  158. { value: "3", label: "年终奖" },
  159. { value: "4", label: "调薪" },
  160. { value: "5", label: "带薪年假" },
  161. { value: "6", label: "节日礼品" },
  162. { value: "7", label: "体检" },
  163. { value: "8", label: "下午茶" },
  164. { value: "9", label: "团建活动" },
  165. ],
  166. statusOptions: [
  167. { value: "0", label: "招聘中" },
  168. { value: "1", label: "招聘结束" },
  169. ],
  170. formRules: {
  171. jobName: [
  172. { required: true, message: "请输入职位名称", trigger: "blur" },
  173. ],
  174. jobLocation: [
  175. { required: true, message: "请输入工作地点", trigger: "blur" },
  176. ],
  177. salary: [{ required: true, message: "请输入薪资", trigger: "blur" }],
  178. seniority: [{ required: true, message: "请输入资历", trigger: "blur" }],
  179. // benefit: [
  180. // {
  181. // type: "array",
  182. // required: true,
  183. // message: "请至少选择一个福利",
  184. // trigger: "change",
  185. // },
  186. // ],
  187. benefit: [{ required: true, message: "请选择福利", trigger: "change" }],
  188. status: [
  189. { required: true, message: "请选择招聘状态", trigger: "change" },
  190. ],
  191. jobRequire: [
  192. { required: true, message: "请填写岗位要求", trigger: "blur" },
  193. ],
  194. jobDuty: [
  195. { required: true, message: "请填写工作职责", trigger: "blur" },
  196. ],
  197. },
  198. };
  199. },
  200. watch: {
  201. infoData: {
  202. handler(newVal) {
  203. if (newVal) {
  204. this.formData = {
  205. hireInfoId: newVal.hireInfoId || "",
  206. jobName: newVal.jobName || "",
  207. jobLocation: newVal.jobLocation || "",
  208. salary: newVal.salary || "",
  209. seniority: newVal.seniority || "",
  210. jobRequire: newVal.jobRequire || "",
  211. jobDuty: newVal.jobDuty || "",
  212. benefit: newVal.benefit ? newVal.benefit.split(",") : [],
  213. status: newVal.status || "",
  214. remark: newVal.remark || "",
  215. };
  216. this.$nextTick(() => {
  217. this.$refs.form && this.$refs.form.clearValidate();
  218. });
  219. }
  220. },
  221. immediate: true,
  222. },
  223. },
  224. created() {},
  225. methods: {
  226. handleConfirm() {
  227. let benefit = this.formData.benefit.join();
  228. let obj = {
  229. ...this.formData,
  230. benefit,
  231. };
  232. this.$refs["form"].validate((valid) => {
  233. if (valid) {
  234. this.$emit("save", obj);
  235. } else {
  236. this.$message.warning("表单校验不通过,请检查");
  237. }
  238. });
  239. },
  240. handleCancel() {
  241. this.formData = {
  242. jobName: "",
  243. jobLocation: "",
  244. salary: "",
  245. seniority: "",
  246. jobRequire: "",
  247. jobDuty: "",
  248. benefit: [],
  249. status: "",
  250. remark: "",
  251. };
  252. this.$refs.form.clearValidate();
  253. this.$emit("cancel");
  254. },
  255. },
  256. };
  257. </script>