UserModal.vue 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098
  1. <template>
  2. <a-modal
  3. :title="title"
  4. width="95%"
  5. :closable="true"
  6. @cancel="close"
  7. @ok="handleSubmit"
  8. :visible="visible"
  9. >
  10. <template slot="title">
  11. <div style="width: 100%;">
  12. <span>{{ title }}</span>
  13. <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
  14. <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
  15. </span>
  16. </div>
  17. </template>
  18. <a-spin :spinning="confirmLoading">
  19. <a-form :form="form" >
  20. <a-form-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol" >
  21. <a-input placeholder="请输入工号" v-decorator="['workNo', validatorRules.workNo]" @blur="changeWorkNo" />
  22. </a-form-item>
  23. <a-form-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
  24. <a-input placeholder="请输入用户姓名" v-decorator="['realname', validatorRules.realname]" />
  25. </a-form-item>
  26. <a-form-item label="英文名" :labelCol="labelCol" :wrapperCol="wrapperCol">
  27. <a-input placeholder="请输入英文名" v-decorator="['nenName',validatorRules.nenName]" />
  28. </a-form-item>
  29. <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
  30. <a-select v-decorator="['sex', validatorRules.sex]" placeholder="请选择性别">
  31. <a-select-option :value="1">男</a-select-option>
  32. <a-select-option :value="2">女</a-select-option>
  33. </a-select>
  34. </a-form-item>
  35. <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
  36. <a-date-picker
  37. style="width: 100%"
  38. placeholder="请选择生日"
  39. v-decorator="['birthday',{ initialValue: !model.birthday ? null : moment(model.birthday, dateFormat),rules: [{ required: true, message: '请选择生日日期' }] }]"
  40. />
  41. </a-form-item>
  42. <a-form-item label="婚否" :labelCol="labelCol" :wrapperCol="wrapperCol">
  43. <a-select v-decorator="['nmarriage', validatorRules.nmarriage]" placeholder="请选择性别">
  44. <a-select-option value="1">是</a-select-option>
  45. <a-select-option value="0">否</a-select-option>
  46. </a-select>
  47. </a-form-item>
  48. <a-form-item label="户口" :labelCol="labelCol" :wrapperCol="wrapperCol">
  49. <j-dict-select-tag
  50. v-decorator="['nregistered',validatorRules.nregistered]"
  51. placeholder="请选择户口"
  52. :triggerChange="true"
  53. dictCode="registered-residence"
  54. />
  55. </a-form-item>
  56. <a-form-item label="户口所在地" :labelCol="labelCol" :wrapperCol="wrapperCol">
  57. <a-input placeholder="请输入" v-decorator="['nregisteredAddr', validatorRules.nregisteredAddr]" />
  58. <!-- <a-input placeholder="请输入户口所在地" v-decorator="['nregisteredAddr', validatorRules.nregisteredAddr]" /> -->
  59. </a-form-item>
  60. <a-form-item label="政治面貌" :labelCol="labelCol" :wrapperCol="wrapperCol">
  61. <j-dict-select-tag
  62. v-decorator="['noutlook', validatorRules.noutlook]"
  63. placeholder="请选择政治面貌"
  64. :triggerChange="true"
  65. dictCode="political-outlook"
  66. />
  67. </a-form-item>
  68. <a-form-item label="所学专业" :labelCol="labelCol" :wrapperCol="wrapperCol">
  69. <a-input placeholder="请输入所学专业" v-decorator="['nmajor', validatorRules.nmajor]" />
  70. </a-form-item>
  71. <a-form-item label="学历" :labelCol="labelCol" :wrapperCol="wrapperCol">
  72. <j-dict-select-tag
  73. v-decorator="['neducation',validatorRules.neducation]"
  74. placeholder="请选择学历"
  75. :triggerChange="true"
  76. dictCode="education"
  77. />
  78. </a-form-item>
  79. <a-form-item label="毕业时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
  80. <a-date-picker
  81. style="width: 100%"
  82. placeholder="请选择毕业时间"
  83. v-decorator="['nGraduationTime', { initialValue: !model.nGraduationTime ? null : moment(model.nGraduationTime, dateFormat),rules: [{ required: true, message: '请选择毕业时间' }] }]"
  84. />
  85. </a-form-item>
  86. <!--部门分配-->
  87. <a-form-item label="公司部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
  88. <a-input-search
  89. placeholder="点击右侧按钮选择公司和部门"
  90. v-model="checkedDepartNameString"
  91. disabled
  92. @search="onSearch"
  93. >
  94. <a-button slot="enterButton" icon="search">选择</a-button>
  95. </a-input-search>
  96. </a-form-item>
  97. <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
  98. <j-select-position placeholder="请选择职务" :multiple="false" v-decorator="['post', validatorRules.post]" />
  99. </a-form-item>
  100. <a-form-item label="入司日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
  101. <a-date-picker
  102. style="width: 100%"
  103. placeholder="请选择入司日期"
  104. v-decorator="['nInductionTime', { initialValue: !model.nInductionTime ? null : moment(model.nInductionTime, dateFormat) ,rules: [{ required: true, message: '请选择入司日期' }] }]"
  105. />
  106. </a-form-item>
  107. <a-form-item label="离职日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
  108. <a-date-picker
  109. style="width: 100%"
  110. placeholder="请选择离职日期"
  111. v-decorator="['syResignationTime', { initialValue: !model.syResignationTime ? null : moment(model.syResignationTime, dateFormat)}]"
  112. />
  113. </a-form-item>
  114. <a-form-item label="家庭电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
  115. <a-input placeholder="请输入家庭电话" v-decorator="['telephone', validatorRules.telephone]" />
  116. </a-form-item>
  117. <a-form-item label="公司座机" :labelCol="labelCol" :wrapperCol="wrapperCol">
  118. <a-input placeholder="请输入公司座机" v-decorator="['ncompanyPhone', {}]" />
  119. </a-form-item>
  120. <a-form-item label="公司内线" :labelCol="labelCol" :wrapperCol="wrapperCol">
  121. <a-input placeholder="请输入公司内线" v-decorator="['ncompanyLine', {}]" />
  122. </a-form-item>
  123. <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
  124. <a-input placeholder="请输入邮箱" v-decorator="['email', validatorRules.email]" />
  125. </a-form-item>
  126. <a-form-item label="工资卡号" :labelCol="labelCol" :wrapperCol="wrapperCol">
  127. <a-input placeholder="请输入工资卡号" v-decorator="['ncardNo', validatorRules.ncardNo]" />
  128. </a-form-item>
  129. <a-form-item label="虚拟网号" :labelCol="labelCol" :wrapperCol="wrapperCol">
  130. <a-input placeholder="请输入虚拟网号" v-decorator="['nvirtualNo', {}]" />
  131. </a-form-item>
  132. <a-form-item label="转正日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
  133. <a-date-picker
  134. style="width: 100%"
  135. placeholder="请选择转正日期"
  136. disabled='true'
  137. v-decorator="['nBecomeTime', { initialValue: !model.nBecomeTime ? null : moment(model.nBecomeTime, dateFormat)}]"
  138. />
  139. </a-form-item>
  140. <a-form-item label="社保申报日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
  141. <a-date-picker
  142. style="width: 100%"
  143. placeholder="请选择社保申报日期"
  144. v-decorator="['nsocialTime', { initialValue: !model.nsocialTime ? null : moment(model.nsocialTime, dateFormat) }]"
  145. />
  146. </a-form-item>
  147. <a-form-item label="社保断缴日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
  148. <a-date-picker
  149. style="width: 100%"
  150. placeholder="社保断缴日期"
  151. v-decorator="['sySecurityOutTime', { initialValue: !model.sySecurityOutTime ? null : moment(model.sySecurityOutTime, dateFormat) }]"
  152. />
  153. </a-form-item>
  154. <a-form-item label="公积金申报日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
  155. <a-date-picker
  156. style="width: 100%"
  157. placeholder="请选择公积金申报日期"
  158. v-decorator="['nfundTime', { initialValue: !model.nfundTime ? null : moment(model.nfundTime, dateFormat) }]"
  159. />
  160. </a-form-item>
  161. <a-form-item label="公积金断缴日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
  162. <a-date-picker
  163. style="width: 100%"
  164. placeholder="公积金断缴日期"
  165. v-decorator="['syFundOutTime', { initialValue: !model.syFundOutTime ? null : moment(model.syFundOutTime, dateFormat) }]"
  166. />
  167. </a-form-item>
  168. <a-form-item label="公积金基数" :labelCol="labelCol" :wrapperCol="wrapperCol">
  169. <a-input placeholder="请输入公积金基数" v-decorator="['nfundBase', {}]" />
  170. </a-form-item>
  171. <a-form-item label="社保基数" :labelCol="labelCol" :wrapperCol="wrapperCol">
  172. <a-input placeholder="请输入社保基数" v-decorator="['nsocialBase',{}]" />
  173. </a-form-item>
  174. <a-form-item label="年假" :labelCol="labelCol" :wrapperCol="wrapperCol">
  175. <a-input placeholder="请输入年假" v-decorator="['nannualNum', {}]" />
  176. </a-form-item>
  177. <a-form-item label="已请年假" :labelCol="labelCol" :wrapperCol="wrapperCol">
  178. <a-input placeholder="请输入输入已请年假" v-decorator="['nannualOldNum', {}]" />
  179. </a-form-item>
  180. <a-form-item label="剩余年假" :labelCol="labelCol" :wrapperCol="wrapperCol">
  181. <a-input placeholder="请输入剩余年假" v-decorator="['nannualNowNum', {}]" />
  182. </a-form-item>
  183. <a-form-item label="民族" :labelCol="labelCol" :wrapperCol="wrapperCol">
  184. <j-dict-select-tag
  185. v-decorator="['nnation', validatorRules.nnation]"
  186. placeholder="请选择民族"
  187. :triggerChange="true"
  188. dictCode="nation"
  189. />
  190. </a-form-item>
  191. <a-form-item label="籍贯" :labelCol="labelCol" :wrapperCol="wrapperCol">
  192. <a-input placeholder="请输入籍贯" v-decorator="['nnativePlace', validatorRules.nnativePlace]" />
  193. </a-form-item>
  194. <a-form-item label="身份证号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
  195. <a-input placeholder="请输入身份证号码" v-decorator="['nidNo', validatorRules.nidNo]" />
  196. </a-form-item>
  197. <a-form-item label="家庭住址" :labelCol="labelCol" :wrapperCol="wrapperCol">
  198. <a-input placeholder="请输入家庭住址" v-decorator="['nhomeAddress', {}]" />
  199. </a-form-item>
  200. <a-form-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
  201. <a-input
  202. placeholder="请输入手机号码"
  203. :disabled="isDisabledAuth('user:form:phone')"
  204. v-decorator="['phone', validatorRules.phone]"
  205. />
  206. </a-form-item>
  207. <!-- <a-form-item label="对本企业要求" :labelCol="labelCol" :wrapperCol="wrapperCol">
  208. <a-input placeholder="请输入" v-decorator="['nrequirement', {}]" />
  209. </a-form-item> -->
  210. <!-- <a-form-item label="希望待遇" :labelCol="labelCol" :wrapperCol="wrapperCol">
  211. <a-input placeholder="请输入希望待遇" v-decorator="['nhopeFor',{}]" />
  212. </a-form-item>
  213. <a-form-item label="与原单位关系" :labelCol="labelCol" :wrapperCol="wrapperCol">
  214. <a-input placeholder="请输入" v-decorator="['nrelationshipFor', {}]" />
  215. </a-form-item> -->
  216. <a-form-item label="人员类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
  217. <j-dict-select-tag
  218. v-decorator="['npersonnelType',validatorRules.npersonnelType]"
  219. placeholder="请选择人员类型"
  220. :triggerChange="true"
  221. dictCode="personnel-status"
  222. />
  223. </a-form-item>
  224. <a-form-item label="雇佣状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
  225. <j-dict-select-tag
  226. v-decorator="['syHireType',{rules: [{ required: true, message: '请选择雇佣状态' }] }]"
  227. placeholder="请选择雇佣状态"
  228. :triggerChange="true"
  229. dictCode="employment-status"
  230. />
  231. </a-form-item>
  232. <a-form-item label="所属公司" :labelCol="labelCol" :wrapperCol="wrapperCol">
  233. <j-dict-select-tag
  234. v-decorator="['belongingCompany', validatorRules.belongingCompany]"
  235. placeholder="请选择所属公司"
  236. :triggerChange="true"
  237. dictCode="affiliated-company"
  238. />
  239. </a-form-item>
  240. <a-form-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol">
  241. <a-input placeholder="请输入" v-decorator="['licenseCar', {}]" />
  242. </a-form-item>
  243. <!-- update--begin--autor:wangshuai-----date:20200108------for:新增身份和负责部门------ -->
  244. <a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
  245. <a-radio-group v-model="identity" @change="identityChange">
  246. <a-radio value="1">普通用户</a-radio>
  247. <a-radio value="2">上级</a-radio>
  248. </a-radio-group>
  249. </a-form-item>
  250. <a-form-item label="负责部门" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="departIdShow == true">
  251. <a-select
  252. mode="multiple"
  253. style="width: 100%"
  254. placeholder="请选择负责部门"
  255. v-model="departIds"
  256. optionFilterProp="children"
  257. :getPopupContainer="target => target.parentNode"
  258. :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
  259. >
  260. <a-select-option v-for="item in resultDepartOptions" :key="item.key" :value="item.key">{{
  261. item.title
  262. }}</a-select-option>
  263. </a-select>
  264. </a-form-item>
  265. <a-form-item label="是否OA用户" :labelCol="labelCol" :wrapperCol="wrapperCol">
  266. <a-radio-group v-model="ifOa" @change="changeOa">
  267. <a-radio value="1">是</a-radio>
  268. <a-radio value="0">否</a-radio>
  269. </a-radio-group>
  270. </a-form-item>
  271. <!-- update--end--autor:wangshuai-----date:20200108------for:新增身份和负责部门------ -->
  272. <a-form-item label="工作流引擎" :labelCol="labelCol" :wrapperCol="wrapperCol">
  273. <j-dict-select-tag
  274. v-decorator="['activitiSync', {}]"
  275. placeholder="请选择是否同步工作流引擎"
  276. :type="'radio'"
  277. :triggerChange="true"
  278. dictCode="activiti_sync"
  279. />
  280. </a-form-item>
  281. <a-form-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
  282. <j-image-upload class="avatar-uploader" text="上传" v-model="fileList"></j-image-upload>
  283. </a-form-item>
  284. <a-form-item label="工作简历" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume">
  285. <a-input type="textarea" placeholder="请输入" v-decorator="['nresume', {}]" />
  286. </a-form-item>
  287. <a-form-item label="家庭成员" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume">
  288. <a-input type="textarea" placeholder="请输入" v-decorator="['nmemberOfFamily', {}]" />
  289. </a-form-item>
  290. <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" class="nresume">
  291. <a-input type="textarea" placeholder="请输入" v-decorator="['nremarks', {}]" />
  292. </a-form-item>
  293. <a-divider>IT维护</a-divider>
  294. <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol" :validateOnRuleChange="true">
  295. <a-input
  296. placeholder="请输入用户账号"
  297. v-decorator="['username', validatorRules.username]"
  298. :readOnly="!!model.username"
  299. autocomplete="off"
  300. />
  301. </a-form-item>
  302. <template v-if="!model.id">
  303. <a-form-item label="登陆密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
  304. <a-input type="password" placeholder="请输入登陆密码" v-decorator="['password', validatorRules.password]" autocomplete="new-password" @blur="changePssword"/>
  305. </a-form-item>
  306. <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
  307. <a-input
  308. type="password"
  309. @blur="handleConfirmBlur"
  310. placeholder="请重新输入登陆密码"
  311. v-decorator="['confirmpassword', validatorRules.confirmpassword]"
  312. />
  313. </a-form-item>
  314. </template>
  315. <a-form-item label="角色分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!roleDisabled">
  316. <a-select
  317. mode="multiple"
  318. style="width: 100%"
  319. placeholder="请选择用户角色"
  320. optionFilterProp="children"
  321. v-model="selectedRole"
  322. >
  323. <a-select-option v-for="(role, roleindex) in roleList" :key="roleindex.toString()" :value="role.id">
  324. {{ role.roleName }}
  325. </a-select-option>
  326. </a-select>
  327. </a-form-item>
  328. </a-form>
  329. </a-spin>
  330. <depart-window ref="departWindow" @ok="modalFormOk"></depart-window>
  331. <!-- <div class="drawer-bootom-button" v-show="!disableSubmit">
  332. <a-button style="margin-right: .8rem" @click="handleCancel">取消</a-button>
  333. <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
  334. </div> -->
  335. </a-modal>
  336. </template>
  337. <script>
  338. import pick from 'lodash.pick'
  339. import moment from 'moment'
  340. import Vue from 'vue'
  341. // 引入搜索部门弹出框的组件
  342. import departWindow from './DepartWindow'
  343. import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
  344. import { ACCESS_TOKEN } from '@/store/mutation-types'
  345. import { getAction } from '@/api/manage'
  346. import { addUser, editUser, queryUserRole, queryall, duplicateCheck } from '@/api/api'
  347. import { disabledAuthFilter } from '@/utils/authFilter'
  348. import JImageUpload from '../../../components/jeecg/JImageUpload'
  349. export default {
  350. name: 'UserModal',
  351. components: {
  352. JImageUpload,
  353. departWindow,
  354. JSelectPosition
  355. },
  356. data () {
  357. return {
  358. departDisabled: false, // 是否是我的部门调用该页面
  359. roleDisabled: false, // 是否是角色维护调用该页面
  360. modalWidth: 800,
  361. drawerWidth: 700,
  362. modaltoggleFlag: true,
  363. confirmDirty: false,
  364. selectedDepartKeys: [], // 保存用户选择部门id
  365. checkedDepartKeys: [],
  366. checkedDepartNames: [], // 保存部门的名称 =>title
  367. checkedDepartNameString: '', // 保存部门的名称 =>title
  368. resultDepartOptions: [],
  369. userId: '', // 保存用户id
  370. disableSubmit: false,
  371. userDepartModel: { userId: '', departIdList: [] }, // 保存SysUserDepart的用户部门中间表数据需要的对象
  372. dateFormat: 'YYYY-MM-DD',
  373. validatorRules: {
  374. username: {
  375. rules: [
  376. {
  377. required: true,
  378. message: '请输入用户账号!'
  379. },
  380. {
  381. validator: this.validateUsername
  382. }
  383. ]
  384. },
  385. password: {
  386. rules: [
  387. {
  388. required: false,
  389. message: '请输入密码!'
  390. // pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
  391. // message: '密码由8位数字、大小写字母和特殊符号组成!'
  392. },
  393. {
  394. validator: this.validateToNextPassword
  395. }
  396. ],
  397. initialValue:'123456'
  398. },
  399. confirmpassword: {
  400. rules: [
  401. {
  402. required: false,
  403. message: '请重新输入登陆密码!'
  404. },
  405. {
  406. validator: this.compareToFirstPassword
  407. }
  408. ]
  409. },
  410. realname: { rules: [{ required: true, message: '请输入用户名称!' }] },
  411. belongingCompany: { rules: [{ required: true, message: '请选择所属公司!' }] },
  412. phone: { rules: [{ validator: this.validatePhone },{ required: true, message: '请输入手机号码!' }] },
  413. email: {
  414. rules: [
  415. {
  416. // validator: this.validateEmail
  417. }
  418. ]
  419. },
  420. roles: {},
  421. // sex:{initialValue:((!this.model.sex)?"": (this.model.sex+""))}
  422. workNo: {
  423. rules: [{ required: true, message: '请输入工号' }, { validator: this.validateWorkNo }]
  424. },
  425. telephone: {
  426. // rules: [{ required: true, message: '请输入座机' },{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }]
  427. rules: [{ required: true, message: '请输入家庭电话' }]
  428. },
  429. nenName:{
  430. rules: [{ required: true, message: '请输入英文名' }]
  431. },
  432. sex:{
  433. rules: [{ required: true, message: '请选择性别' }]
  434. },
  435. nidNo:{
  436. rules: [{ required: true, message: '输入身份证号码' }]
  437. },
  438. nmarriage:{
  439. rules: [{ required: true, message: '请选择婚否' }]
  440. },
  441. nregisteredAddr:{
  442. rules: [{ required: true, message: '请输入户口所在地' }]
  443. },
  444. nmajor:{
  445. rules: [{ required: true, message: '请输入所学专业' }]
  446. },
  447. noutlook:{
  448. rules: [{ required: true, message: '请选择政治面貌' }]
  449. },
  450. neducation:{
  451. rules: [{ required: true, message: '请选择政学历' }]
  452. },
  453. nregistered:{
  454. rules: [{ required: true, message: '请选择户口' }]
  455. },
  456. post:{
  457. rules: [{ required: true, message: '请选择职位' }]
  458. },
  459. ncardNo:{
  460. rules: [{ required: true, message: '请输入工资卡号' }]
  461. },
  462. nnation:{
  463. rules: [{ required: true, message: '请选择民族' }]
  464. },
  465. nnativePlace:{
  466. rules: [{ required: true, message: '请输入籍贯' }]
  467. },
  468. npersonnelType:{
  469. rules: [{ required: true, message: '请选择人员类型' }]
  470. },
  471. checkedDepartNameString:{
  472. rules: [{ required: true, message: '请选择部门!' }]
  473. }
  474. },
  475. departIdShow: false,
  476. departIds: [], // 负责部门id
  477. title: '操作',
  478. visible: false,
  479. model: {},
  480. roleList: [],
  481. selectedRole: [],
  482. labelCol: {
  483. xs: { span: 24 },
  484. sm: { span: 5 }
  485. },
  486. wrapperCol: {
  487. xs: { span: 24 },
  488. sm: { span: 16 }
  489. },
  490. uploadLoading: false,
  491. confirmLoading: false,
  492. headers: {},
  493. form: this.$form.createForm(this),
  494. picUrl: '',
  495. url: {
  496. fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
  497. imgerver: window._CONFIG['staticDomainURL'],
  498. userWithDepart: '/sys/user/userDepartList', // 引入为指定用户查看部门信息需要的url
  499. userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
  500. syncUserByUserName: '/process/extActProcess/doSyncUserByUserName' // 同步用户到工作流
  501. },
  502. identity: '1',
  503. ifOa:'0',
  504. fileList: [],
  505. orgObject: {
  506. pkOrg: '', // 选中的公司id
  507. pkOrgName: '' // 选中的公司名称
  508. },
  509. userObject: {} // 用户信息
  510. }
  511. },
  512. created () {
  513. const token = Vue.ls.get(ACCESS_TOKEN)
  514. this.headers = { 'X-Access-Token': token }
  515. },
  516. computed: {
  517. uploadAction: function () {
  518. return this.url.fileUpload
  519. }
  520. },
  521. methods: {
  522. isDisabledAuth (code) {
  523. return disabledAuthFilter(code)
  524. },
  525. // 窗口最大化切换
  526. toggleScreen () {
  527. if (this.modaltoggleFlag) {
  528. this.modalWidth = window.innerWidth
  529. } else {
  530. this.modalWidth = 800
  531. }
  532. this.modaltoggleFlag = !this.modaltoggleFlag
  533. },
  534. initialRoleList () {
  535. queryall().then(res => {
  536. if (res.success) {
  537. this.roleList = res.result
  538. } else {
  539. console.log(res.message)
  540. }
  541. })
  542. },
  543. loadUserRoles (userid) {
  544. queryUserRole({ userid: userid }).then(res => {
  545. if (res.success) {
  546. this.selectedRole = res.result
  547. } else {
  548. console.log(res.message)
  549. }
  550. })
  551. },
  552. refresh () {
  553. this.selectedDepartKeys = []
  554. this.checkedDepartKeys = []
  555. this.checkedDepartNames = []
  556. this.checkedDepartNameString = ''
  557. this.userId = ''
  558. this.resultDepartOptions = []
  559. this.departId = []
  560. this.departIdShow = false
  561. },
  562. add () {
  563. this.picUrl = ''
  564. this.refresh()
  565. this.edit({ activitiSync: '1' })
  566. },
  567. edit (record) {
  568. this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
  569. let that = this
  570. that.initialRoleList()
  571. that.checkedDepartNameString = ''
  572. that.form.resetFields()
  573. if (record.hasOwnProperty('id')) {
  574. that.loadUserRoles(record.id)
  575. setTimeout(() => {
  576. this.fileList = record.avatar
  577. this.ifOa = record.ifOa
  578. }, 5)
  579. }
  580. that.userId = record.id
  581. // 修改赋值公司id
  582. this.orgObject.pkOrg = record.pkOrg
  583. this.orgObject.pkOrgName = record.pkOrgName
  584. this.userObject = record
  585. that.visible = true
  586. that.model = Object.assign({}, record)
  587. that.$nextTick(() => {
  588. that.form.setFieldsValue(
  589. pick(
  590. this.model,
  591. 'username',
  592. 'sex',
  593. 'realname',
  594. 'email',
  595. 'phone',
  596. 'activitiSync',
  597. 'workNo',
  598. 'telephone',
  599. 'post',
  600. 'nenName',
  601. 'nmarriage',
  602. 'nregistered',
  603. 'noutlook',
  604. 'nmajor',
  605. 'neducation',
  606. 'ngraduationTime',
  607. 'ninductionTime',
  608. 'ncompanyPhone',
  609. 'ncompanyLine',
  610. 'ncardNo',
  611. 'nvirtualNo',
  612. 'nBecomeTime',
  613. 'nsocialTime',
  614. 'nfundTime',
  615. 'nfundBase',
  616. 'nsocialBase',
  617. 'nannualNum',
  618. 'nannualOldNum',
  619. 'nannualNowNum',
  620. 'nnation',
  621. 'nnativePlace',
  622. 'nidNo',
  623. 'nhomeAddress',
  624. 'nrequirement',
  625. 'nhopeFor',
  626. 'nregisteredAddr',
  627. 'nrelationshipFor',
  628. 'npersonnelType',
  629. 'nregisteredAddr',
  630. 'ifOa','belongingCompany',
  631. 'syHireType',
  632. 'syResignationTime',
  633. 'syFundOutTime',
  634. 'sySecurityOutTime'
  635. )
  636. )
  637. })
  638. // 身份为上级显示负责部门,否则不显示
  639. if (this.model.identity == '2') {
  640. this.identity = '2'
  641. this.departIdShow = true
  642. } else {
  643. this.identity = '1'
  644. this.departIdShow = false
  645. }
  646. // 调用查询用户对应的部门信息的方法
  647. that.checkedDepartKeys = []
  648. that.loadCheckedDeparts()
  649. },
  650. //
  651. loadCheckedDeparts () {
  652. let that = this
  653. if (!that.userId) {
  654. return
  655. }
  656. getAction(that.url.userWithDepart, { userId: that.userId }).then(res => {
  657. that.checkedDepartNames = []
  658. if (res.success) {
  659. var depart = []
  660. var departId = []
  661. for (let i = 0; i < res.result.length; i++) {
  662. that.checkedDepartNames.push(res.result[i].title)
  663. this.checkedDepartNameString = this.checkedDepartNames.join(',')
  664. that.checkedDepartKeys.push(res.result[i].key)
  665. // 新增负责部门选择下拉框
  666. depart.push({
  667. key: res.result[i].key,
  668. title: res.result[i].title
  669. })
  670. departId.push(res.result[i].key)
  671. }
  672. that.resultDepartOptions = depart
  673. // 判断部门id是否存在,不存在择直接默认当前所在部门
  674. if (this.model.departIds) {
  675. this.departIds = this.model.departIds.split(',')
  676. } else {
  677. this.departIds = departId
  678. }
  679. that.userDepartModel.departIdList = that.checkedDepartKeys
  680. } else {
  681. console.log(res.message)
  682. }
  683. })
  684. },
  685. close () {
  686. console.log('?????')
  687. this.$emit('close')
  688. this.visible = false
  689. this.ifOa ='0'
  690. this.disableSubmit = false
  691. this.selectedRole = []
  692. this.userDepartModel = { userId: '', departIdList: [] }
  693. this.checkedDepartNames = []
  694. this.checkedDepartNameString = ''
  695. this.checkedDepartKeys = []
  696. this.selectedDepartKeys = []
  697. this.resultDepartOptions = []
  698. this.departIds = []
  699. this.departIdShow = false
  700. this.identity = '1'
  701. this.fileList = []
  702. this.orgObject = []
  703. this.userObject = {}
  704. this.validatorRules.username.rules[0].required = false
  705. this.validatorRules.confirmpassword.rules[0].required = false
  706. },
  707. moment,
  708. handleSubmit () {
  709. if(!this.orgObject.pkOrg){
  710. this.$message.warning("请选择公司");
  711. return
  712. }
  713. const that = this
  714. // 触发表单验证
  715. this.form.validateFields((err, values) => {
  716. if (!err) {
  717. that.confirmLoading = true
  718. if (!values.birthday) {
  719. values.birthday = ''
  720. } else {
  721. values.birthday = values.birthday.format(this.dateFormat)
  722. }
  723. let formData = Object.assign(this.model, values)
  724. // 获取公司信息
  725. formData.pkOrg = this.orgObject.pkOrg
  726. formData.pkOrgName = this.orgObject.pkOrgName
  727. formData.avatar = that.fileList
  728. formData.ifOa = this.ifOa
  729. formData.selectedroles = this.selectedRole.length > 0 ? this.selectedRole.join(',') : ''
  730. formData.selecteddeparts =
  731. this.userDepartModel.departIdList.length > 0 ? this.userDepartModel.departIdList.join(',') : ''
  732. formData.identity = this.identity
  733. // 如果是上级择传入departIds,否则为空
  734. if (this.identity === '2') {
  735. formData.departIds = this.departIds.join(',')
  736. } else {
  737. formData.departIds = ''
  738. }
  739. // that.addDepartsToUser(that,formData); // 调用根据当前用户添加部门信息的方法
  740. let obj
  741. if (!this.model.id) {
  742. formData.id = this.userId
  743. obj = addUser(formData)
  744. } else {
  745. obj = editUser(formData)
  746. }
  747. obj
  748. .then(res => {
  749. if (res.success) {
  750. that.$message.success(res.message)
  751. that.$emit('ok')
  752. } else {
  753. that.$message.warning(res.message)
  754. }
  755. })
  756. .finally(() => {
  757. that.confirmLoading = false
  758. that.checkedDepartNames = []
  759. that.userDepartModel.departIdList = { userId: '', departIdList: [] }
  760. that.close()
  761. })
  762. }
  763. })
  764. },
  765. handleCancel () {
  766. this.close()
  767. },
  768. validateToNextPassword (rule, value, callback) {
  769. const form = this.form
  770. const confirmpassword = form.getFieldValue('confirmpassword')
  771. if (value && confirmpassword && value !== confirmpassword) {
  772. callback('两次输入的密码不一样!')
  773. }
  774. if (value && this.confirmDirty) {
  775. form.validateFields(['confirm'], { force: true })
  776. }
  777. callback()
  778. },
  779. compareToFirstPassword (rule, value, callback) {
  780. const form = this.form
  781. if (value && value !== form.getFieldValue('password')) {
  782. callback('两次输入的密码不一样!')
  783. } else {
  784. callback()
  785. }
  786. },
  787. validatePhone (rule, value, callback) {
  788. if (!value) {
  789. callback()
  790. } else {
  791. // update-begin--Author:kangxiaolin Date:20190826 for:[05] 手机号不支持199号码段--------------------
  792. if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
  793. // update-end--Author:kangxiaolin Date:20190826 for:[05] 手机号不支持199号码段--------------------
  794. var params = {
  795. tableName: 'sys_user',
  796. fieldName: 'phone',
  797. fieldVal: value,
  798. dataId: this.userId
  799. }
  800. duplicateCheck(params).then(res => {
  801. if (res.success) {
  802. callback()
  803. } else {
  804. callback('手机号已存在!')
  805. }
  806. })
  807. } else {
  808. callback('请输入正确格式的手机号码!')
  809. }
  810. }
  811. },
  812. validateEmail (rule, value, callback) {
  813. if (!value) {
  814. callback()
  815. } else {
  816. if (
  817. new RegExp(
  818. /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  819. ).test(value)
  820. ) {
  821. var params = {
  822. tableName: 'sys_user',
  823. fieldName: 'email',
  824. fieldVal: value,
  825. dataId: this.userId
  826. }
  827. duplicateCheck(params).then(res => {
  828. console.log(res)
  829. if (res.success) {
  830. callback()
  831. } else {
  832. callback('邮箱已存在!')
  833. }
  834. })
  835. } else {
  836. callback('请输入正确格式的邮箱!')
  837. }
  838. }
  839. },
  840. validateUsername (rule, value, callback) {
  841. var params = {
  842. tableName: 'sys_user',
  843. fieldName: 'username',
  844. fieldVal: value,
  845. dataId: this.userId
  846. }
  847. duplicateCheck(params).then(res => {
  848. if (res.success) {
  849. callback()
  850. } else {
  851. callback('用户名已存在!')
  852. }
  853. })
  854. },
  855. validateWorkNo (rule, value, callback) {
  856. var params = {
  857. tableName: 'sys_user',
  858. fieldName: 'work_no',
  859. fieldVal: value,
  860. dataId: this.userId
  861. }
  862. duplicateCheck(params).then(res => {
  863. if (res.success) {
  864. callback()
  865. } else {
  866. callback('工号已存在!')
  867. }
  868. })
  869. },
  870. handleConfirmBlur (e) {
  871. const value = e.target.value
  872. this.confirmDirty = this.confirmDirty || !!value
  873. },
  874. normFile (e) {
  875. console.log('Upload event:', e)
  876. if (Array.isArray(e)) {
  877. return e
  878. }
  879. return e && e.fileList
  880. },
  881. beforeUpload: function (file) {
  882. var fileType = file.type
  883. if (fileType.indexOf('image') < 0) {
  884. this.$message.warning('请上传图片')
  885. return false
  886. }
  887. // TODO 验证文件大小
  888. },
  889. handleChange (info) {
  890. this.picUrl = ''
  891. if (info.file.status === 'uploading') {
  892. this.uploadLoading = true
  893. return
  894. }
  895. if (info.file.status === 'done') {
  896. var response = info.file.response
  897. this.uploadLoading = false
  898. console.log(response)
  899. if (response.success) {
  900. this.model.avatar = response.message
  901. this.picUrl = 'Has no pic url yet'
  902. } else {
  903. this.$message.warning(response.message)
  904. }
  905. }
  906. },
  907. // 搜索用户对应的部门API
  908. onSearch () {
  909. this.$refs.departWindow.add(this.checkedDepartKeys, this.userId, this.userObject)
  910. },
  911. // 获取用户对应部门弹出框提交给返回的数据
  912. modalFormOk (formData) {
  913. this.orgObject = formData.orgObject // 公司信息
  914. // 没有选择则直接退出
  915. if (!formData.departIdList || formData.departIdList.length == 0) {
  916. return
  917. }
  918. this.checkedDepartNames = []
  919. this.selectedDepartKeys = []
  920. this.checkedDepartNameString = ''
  921. this.userId = formData.userId
  922. this.userDepartModel.userId = formData.userId
  923. this.departIds = []
  924. this.resultDepartOptions = []
  925. var depart = []
  926. for (let i = 0; i < formData.departIdList.length; i++) {
  927. this.selectedDepartKeys.push(formData.departIdList[i].key)
  928. this.checkedDepartNames.push(formData.departIdList[i].title)
  929. this.checkedDepartNameString = this.checkedDepartNames.join(',')
  930. // 新增部门选择,如果上面部门选择后不为空直接付给负责部门
  931. depart.push({
  932. key: formData.departIdList[i].key,
  933. title: formData.departIdList[i].title
  934. })
  935. this.departIds.push(formData.departIdList[i].key)
  936. }
  937. this.resultDepartOptions = depart
  938. this.userDepartModel.departIdList = this.selectedDepartKeys
  939. this.checkedDepartKeys = this.selectedDepartKeys // 更新当前的选择keys
  940. },
  941. // 根据屏幕变化,设置抽屉尺寸
  942. resetScreenSize () {
  943. let screenWidth = document.body.clientWidth
  944. if (screenWidth < 500) {
  945. this.drawerWidth = screenWidth
  946. } else {
  947. this.drawerWidth = 700
  948. }
  949. },
  950. identityChange (e) {
  951. if (e.target.value === '1') {
  952. this.departIdShow = false
  953. } else {
  954. this.departIdShow = true
  955. }
  956. },
  957. changeOa(e){
  958. if(e.target.value !== '1'){
  959. var text =this.form.getFieldValue('workNo')
  960. var text1 =this.form.getFieldValue('username')
  961. if(text1==''||!text1){
  962. this.form.setFieldsValue({username:text})
  963. }
  964. }
  965. },
  966. changeWorkNo(e){
  967. var that = this
  968. setTimeout(function(){
  969. var text1 =that.form.getFieldValue('workNo')
  970. var text =that.form.getFieldValue('username')
  971. if((text==''||!text)&& that.ifOa =='0'){
  972. that.form.setFieldsValue({username:''})
  973. that.form.setFieldsValue({username:text1})
  974. }
  975. },0)
  976. },
  977. changePssword(){
  978. this.validatorRules.confirmpassword.rules[0].required = true
  979. }
  980. }
  981. }
  982. </script>
  983. <style scoped lang="less">
  984. .avatar-uploader > .ant-upload {
  985. width: 104px;
  986. height: 104px;
  987. }
  988. .ant-upload-select-picture-card i {
  989. font-size: 49px;
  990. color: #999;
  991. }
  992. .ant-upload-select-picture-card .ant-upload-text {
  993. margin-top: 8px;
  994. color: #666;
  995. }
  996. .ant-table-tbody .ant-table-row td {
  997. padding-top: 10px;
  998. padding-bottom: 10px;
  999. }
  1000. .drawer-bootom-button {
  1001. position: absolute;
  1002. bottom: 0;
  1003. width: 100%;
  1004. border-top: 1px solid #e8e8e8;
  1005. padding: 10px 16px;
  1006. text-align: right;
  1007. left: 0;
  1008. background: #fff;
  1009. border-radius: 0 0 2px 2px;
  1010. }
  1011. /deep/.ant-form-item{
  1012. width: 31%;
  1013. }
  1014. /deep/.ant-form{
  1015. display: flex;
  1016. width: 100%;
  1017. flex-wrap: wrap;
  1018. }
  1019. .nresume{
  1020. width: 100% !important;
  1021. }
  1022. /deep/ .nresume .ant-form-item-label{
  1023. width: 8% !important;
  1024. }
  1025. /deep/ .nresume .ant-form-item-control-wrapper{
  1026. width: 84% !important;
  1027. }
  1028. /deep/ .nresume .ant-input{
  1029. height: 100px !important;
  1030. }
  1031. /deep/ .ant-col-sm-5{
  1032. width: 27%;
  1033. }
  1034. </style>