addOrEditHoliiday.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  1. <template>
  2. <el-dialog
  3. :close-on-click-modal="false"
  4. :close-on-press-escape="false"
  5. :title="dialogTitle"
  6. :visible.sync="dialogVisible"
  7. top="50px"
  8. width="50%"
  9. >
  10. <div class="tabsdom">
  11. <el-form ref="elForm" :model="formData" :rules="rules" label-width="165px" size="medium">
  12. <el-form-item label="姓名" prop="name">
  13. <el-input
  14. v-model="formData.truename"
  15. clearable
  16. placeholder="请输入姓名"/>
  17. </el-form-item>
  18. <el-form-item label="入职日期" prop="joinDay">
  19. <el-date-picker
  20. v-model="formData.joinDay"
  21. format="yyyy-MM"
  22. learable
  23. placeholder="请输入入职日期"
  24. type="month"
  25. value-format="yyyy-MM-dd"></el-date-picker>
  26. </el-form-item>
  27. <el-form-item label="入职前已缴纳社保月数" prop="socialHasMonth">
  28. <el-input
  29. v-model="formData.socialHasMonth"
  30. label="描述文字"
  31. type="number"
  32. @change="handleChange"></el-input>
  33. </el-form-item>
  34. <el-form-item label="上传" prop="fileDataIds">
  35. <el-upload
  36. :action="$constant.BASE_URI+'/FileController/upload'"
  37. :file-list="formData.fileUrlList"
  38. :http-request="uploadFile"
  39. :on-preview="handlePictureCardPreview"
  40. :on-remove="handleRemove"
  41. accept=".png, .jpg, .jpeg, .pdf"
  42. class="upload-demo"
  43. :show-file-list="false"
  44. multiple
  45. >
  46. <el-button class="mtmb16 mgauto" size="small" style="margin-top: 0;height: 33px" type="primary">
  47. 上传文件
  48. </el-button>
  49. </el-upload>
  50. <div style="margin:5px 0 5px 0">
  51. <div v-for="item in formData.fileUrlList" style="height: 15px;margin-top:10px;width: 100%">
  52. <a :href="item.url" @click="handlePictureCardPreview(item)">{{ item.name }}</a>
  53. <span class="el-upload-list__item-actions">
  54. <i class="el-icon-delete" @click="handlePictureRemove(item.id,formData.fileUrlList)"/>
  55. </span>
  56. </div>
  57. </div>
  58. </el-form-item>
  59. <el-form-item label="年假核算标准" prop="holidayType">
  60. <el-select
  61. v-model="formData.holidayType"
  62. clearable
  63. disabled
  64. placeholder="由系统自动计算带出">
  65. <el-option
  66. v-for="item in biaozhun"
  67. :label="item.label"
  68. :value="item.value">
  69. </el-option>
  70. </el-select>
  71. </el-form-item>
  72. </el-form>
  73. </div>
  74. <div slot="footer">
  75. <el-button @click="dialogVisible=false">取消</el-button>
  76. <el-button type="primary" @click="handelConfirm">确定</el-button>
  77. </div>
  78. <el-dialog :modal="false" :visible.sync="visible">
  79. <img :src="dialogImageUrl" alt="" width="100%"/>
  80. </el-dialog>
  81. </el-dialog>
  82. </template>
  83. <script>
  84. import {upload} from '@/static/utils/channel'
  85. import Base from '@/views/base/base'
  86. import BaseData from '@/views/base/baseData'
  87. import UserSelect from '@/views/components/UserSelect'
  88. const formData = {
  89. fileUrlList: []
  90. }
  91. export default {
  92. mixins: [Base, BaseData],
  93. components: {
  94. upload, UserSelect
  95. },
  96. props: [],
  97. data() {
  98. return {
  99. dialogImageUrl: '',
  100. visible: false,
  101. disabled: false,
  102. biaozhun: [
  103. {label: '司龄不满一年', value: 3},
  104. {label: '社保满一年不满十年', value: 1},
  105. {label: '社保满十年不满二十年', value: 2},
  106. {label: '社保满二十年', value: 4},
  107. ],
  108. selectList: [],
  109. loading: false,
  110. dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY'],
  111. dialogTitle: '假期额度管理-添加',
  112. dialogVisible: false,
  113. formData: {
  114. fileUrlList: []
  115. },
  116. rules: {
  117. joinDay: [{
  118. required: true,
  119. message: '请输入入职日期',
  120. trigger: 'blur'
  121. }],
  122. socialHasMonth: [{
  123. required: true,
  124. message: '请输入入职前已缴纳社保月数',
  125. trigger: 'blur'
  126. }],
  127. holidayType: [{
  128. required: true,
  129. message: '请输入年假核算标准',
  130. trigger: 'blur'
  131. }],
  132. },
  133. }
  134. },
  135. computed: {},
  136. watch: {
  137. formData: {
  138. deep: true,
  139. handler(val) {
  140. if (this.formData.socialHasMonth && this.formData.joinDay) {
  141. try {
  142. const startDateParams = new Date(this.formData.joinDay).getTime()
  143. const endDateParams = new Date(Date.now()).getTime()
  144. let years = endDateParams - startDateParams
  145. years = years / (1000 * 60 * 60 * 24 * 365)
  146. let socialHasMonth = Number(this.formData.socialHasMonth / 12)
  147. let allWorkYears = Math.floor(years) + Math.floor(socialHasMonth)
  148. console.log(allWorkYears)
  149. // {label: '社保不满一年', value: 3},
  150. // {label: '社保满一年不满十年', value: 1},
  151. // {label: '社保满十年不满二十年', value: 2},
  152. // {label: '社保满二十年', value: 4},
  153. if (years < 1) return this.formData.holidayType = 3
  154. if (allWorkYears < 10 && allWorkYears > 1) {
  155. this.formData.holidayType = 1
  156. } else if (allWorkYears >= 10 && allWorkYears < 20) {
  157. this.formData.holidayType = 2
  158. } else if (allWorkYears >= 20) {
  159. this.formData.holidayType = 4
  160. }
  161. } catch (e) {
  162. console.log(e)
  163. }
  164. }
  165. }
  166. }
  167. },
  168. created() {
  169. },
  170. mounted() {
  171. this.initDict(this.dc_key).then((res) => {
  172. });
  173. },
  174. methods: {
  175. handleChange(e) {
  176. this.$forceUpdate()
  177. },
  178. getItemJson: function (item) {
  179. const _this = this
  180. const json = {
  181. isproject: item.isproject,
  182. custid: item.custid,
  183. custname: item.custname,
  184. bizcode: item.bizcode,
  185. proname: item.proname,
  186. protype: this.dc_map.dc_pro_type[item.protype],
  187. profrom: this.dc_map.dc_pro_from[item.profrom],
  188. // bizstatus: this.dc_map.dc_sign_status[item.signstatus] + ' ' + this.dc_map.dc_enable_status[item.enablestatus],
  189. presales: '¥' + (item.presales == null ? 0 : item.presales).FMoney(2),
  190. chargedname: this.UserMap[item.chargedby],
  191. managedname: this.UserMap[item.managedby],
  192. createdByName: this.UserMap[item.createdby],
  193. signstatus: item.signstatus,
  194. bidstatus: item.bidstatus,
  195. enablestatus: item.enablestatus,
  196. validat: this.$common.transDate(item.validat),
  197. signat: this.$common.transDate(item.signat),
  198. bidat: this.$common.transDate(item.bidat),
  199. endingat: this.$common.transDate(item.endingAt),
  200. notesat: this.$common.transDate(item.notesat),
  201. id: item.id
  202. }
  203. if (this.enableStatus === '2' || this.enableStatus === '3' || item.enablestatus === '2' || item.enableStatus === '3') {
  204. json.bizstatus = this.dc_map.dc_enable_status[item.enablestatus]
  205. } else {
  206. json.bizstatus = this.dc_map.dc_sign_status[item.signstatus]
  207. }
  208. // json.bizstatus = _this.dc_map.dc_val_status[item.validstatus]
  209. return json
  210. },
  211. initOutData: function () {
  212. const _this = this
  213. this.OutData = [[
  214. '项目编号', '项目名称', '客户名称', '项目类型', '来源', '预计销售额(元)',
  215. '销售人员', '立项日期', '签约日期', '招投标日期', '终止或暂停日期', '跟进更新日期', '项目经理', '商机状态']]
  216. const postData = this.getPostData()
  217. this.baseRequest('listAll', postData).then((res) => {
  218. if (res.data) {
  219. res.data.forEach(function (item) {
  220. const jsonMap = _this.getItemJson(item)
  221. const jsonArray = [
  222. jsonMap.bizcode,
  223. jsonMap.proname,
  224. jsonMap.custname,
  225. jsonMap.protype,
  226. jsonMap.profrom,
  227. jsonMap.presales,
  228. jsonMap.chargedname,
  229. jsonMap.validat,
  230. jsonMap.signat,
  231. jsonMap.bidat,
  232. jsonMap.endingat,
  233. jsonMap.notesat,
  234. jsonMap.managedname,
  235. jsonMap.bizstatus
  236. ]
  237. _this.OutData.push(jsonArray)
  238. })
  239. }
  240. }).catch(() => {
  241. })
  242. },
  243. confirmOutput() {
  244. const OutSize = [
  245. {wch: 15}, {wch: 15}, {wch: 15}, {wch: 15}, {wch: 15}, {wch: 15}, {wch: 15},
  246. {wch: 15}, {wch: 15}, {wch: 25}, {wch: 25}, {wch: 15}, {wch: 15}, {wch: 15}]
  247. const fileName = '商机进展导出 ' + new Date().Format('yyyy-MM-dd')
  248. this.$outputXlsxFile(this.OutData, OutSize, fileName)
  249. },
  250. handleDownload(file) {
  251. console.log(file);
  252. },
  253. handleRemove(file, fileList) {
  254. console.log(file, fileList)
  255. var index = this.formData.fileList.indexOf(file);
  256. this.formData.fileList.splice(index, 1);
  257. console.log(this.formData.fileUrlList)
  258. },
  259. handlePreview(file) {
  260. console.log(file);
  261. },
  262. uploadFile: function (param) {
  263. const _this = this
  264. upload(param, true).then((res) => {
  265. _this.formData.fileUrlList.push(res)
  266. console.log(res)
  267. this.$forceUpdate()
  268. })
  269. },
  270. handlePictureRemove(file, fileList) {
  271. // console.log(file, fileList)
  272. var index = fileList.indexOf(file);
  273. fileList.splice(index, 1);
  274. this.$forceUpdate()
  275. },
  276. async setVisible(status, row) {
  277. console.log(row.socialImgAddress)
  278. this.formData = {...row}
  279. this.dialogVisible = status
  280. this.formData.id = row.id
  281. this.formData.truename = row.truename
  282. this.formData.joinDay = row.joinDay
  283. // this.formData.socialHasMonth = !row.socialHasMonth ? 0 : Number(row.socialHasMonth)
  284. this.formData.holidayType = row.holidayType
  285. if (row.socialImgAddress) {
  286. const {data: fileTaoTaoList} = await this.baseRequest2('findFileInfoByIds/' + row.socialImgAddress, '')
  287. this.$nextTick(() => {
  288. this.formData.fileUrlList = fileTaoTaoList.data.map((e) => {
  289. return {
  290. url: this.$constant.BASE_URI + '/FileController/download/' + e.id,
  291. name: e.fileName,
  292. data: e.id,
  293. uid: new Date().getTime()
  294. }
  295. })
  296. console.log(this.formData.fileUrlList)
  297. this.$forceUpdate()
  298. })
  299. } else {
  300. this.formData.fileUrlList = []
  301. }
  302. console.log(this.formData)
  303. this.$forceUpdate()
  304. },
  305. baseRequest1(opUrl, postData) {
  306. return this.$channel.globleRequest(
  307. 'HolidayManagementController',
  308. opUrl,
  309. postData,
  310. 'project task'
  311. )
  312. },
  313. baseRequest2(opUrl, postData) {
  314. return this.$channel.globleRequest(
  315. 'FileZtController',
  316. opUrl,
  317. postData,
  318. 'project task'
  319. )
  320. },
  321. async handelConfirm() {
  322. this.$refs['elForm'].validate(async valid => {
  323. if (!valid) return
  324. this.formData.socialImgAddress = this.formData.fileUrlList.map((e) => {
  325. console.log(e)
  326. return e.data
  327. }).toString()
  328. let formData = {...this.formData}
  329. delete formData.fileUrlList
  330. let {data} = await this.baseRequest1('editInfo', {...formData})
  331. if (data.code == 200) {
  332. this.$message.success('修改成功')
  333. this.dialogVisible = false
  334. this.$emit("getData")
  335. }
  336. })
  337. },
  338. }
  339. }
  340. </script>
  341. <style lang="scss">
  342. .cclist {
  343. .col-input {
  344. padding: 0;
  345. }
  346. }
  347. .pdr10px {
  348. padding-right: 10px;
  349. }
  350. .mgb10px {
  351. margin-bottom: 10px;
  352. }
  353. .mb25 {
  354. margin-bottom: 25px;
  355. }
  356. .pdtopbottom16 {
  357. padding: 0px 16px;
  358. }
  359. .pdtop16px {
  360. padding-top: 16px;
  361. }
  362. .totalApplyTime {
  363. font-size: 16px;
  364. font-family: 微软雅黑;
  365. font-weight: 400;
  366. color: #1890FF;
  367. text-align: right;
  368. margin: 15px 0 15px 0;
  369. width: 100%;
  370. }
  371. .cost_form {
  372. .col-input {
  373. font-weight: 400;
  374. }
  375. .el-form-item__label .moneydetails {
  376. text-align: right;
  377. font-size: 16px;
  378. font-family: 微软雅黑;
  379. padding-right: 10px;
  380. line-height: 40px;
  381. word-break: keep-all;
  382. white-space: nowrap;
  383. color: #606266;
  384. text-rendering: optimizeLegibility;
  385. font-weight: 400;
  386. }
  387. .moneydetails {
  388. text-align: right;
  389. font-size: 16px;
  390. font-family: 微软雅黑;
  391. padding-right: 10px;
  392. word-break: keep-all;
  393. white-space: nowrap;
  394. color: #606266;
  395. text-rendering: optimizeLegibility;
  396. font-weight: 400;
  397. }
  398. .moneydetails:before {
  399. content: "*";
  400. color: #ff4949;
  401. }
  402. }
  403. .txtc {
  404. text-align: center
  405. }
  406. .ml5 {
  407. margin-left: 5px;
  408. }
  409. .eltype {
  410. margin-bottom: 15px;
  411. }
  412. .tabsdom {
  413. .el-input {
  414. width: 100%;
  415. }
  416. .el-tabs__header {
  417. text-align: center !important;
  418. width: 139px !important;
  419. text-align: center !important;
  420. display: block !important;
  421. margin: auto !important;
  422. margin-bottom: 15px !important;
  423. }
  424. .el-tabs__nav-wrap::after {
  425. display: none;
  426. }
  427. //.el-upload {
  428. // width: 100%;
  429. //}
  430. }
  431. .feeMoneyTotal {
  432. width: 100%;
  433. height: 14px;
  434. font-size: 14px;
  435. font-weight: 400;
  436. color: #1890FF;
  437. margin-top: 31px;
  438. margin-bottom: 13px;
  439. }
  440. </style>