ResourceSharingResourceApply.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. <template>
  2. <div class="autoBox box" style="min-height: 900px;position: relative;">
  3. <div class="crumbs">
  4. <div style="overflow: hidden">
  5. <el-breadcrumb separator-class="el-icon-arrow-right" style="float: left">
  6. <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
  7. <el-breadcrumb-item :to="{ path: 'resourceSharing' }" class="pointer">{{$t('common.ResourceSharing')}}</el-breadcrumb-item>
  8. <el-breadcrumb-item>{{$t('common.resourceApplicationForResearchResources')}}</el-breadcrumb-item>
  9. </el-breadcrumb>
  10. </div>
  11. <div class="content">
  12. <div class="addLanguage">
  13. <span style="font-size: 18px;line-height: 50px;margin-left: 20px;vertical-align: middle;">{{$t('common.resourceApplicationForResearchResources')}}</span>
  14. </div>
  15. <div class="apply">
  16. <div style="width: 100%;padding: 0 250px;box-sizing: border-box">
  17. <el-form ref="form" :model="form" label-width="160px" :rules="formRules">
  18. <el-form-item required :label="$t('common.resourceAttendance')" prop="numberOfVisitors">
  19. <el-input v-model="form.numberOfVisitors" style="width: 40%;" maxlength="10" show-word-limit
  20. :placeholder="$t('common.resourcePleaseEnterTheNumberOfVisitors')">
  21. </el-input>
  22. </el-form-item>
  23. <el-form-item required :label="$t('common.resourceVisitTime')" prop="date">
  24. <el-date-picker
  25. v-model="form.date"
  26. type="datetimerange"
  27. :start-placeholder="$t('common.resourceStartTime')"
  28. :end-placeholder="$t('common.resourceEndTime')"
  29. :default-time="['12:00:00', '08:00:00']"
  30. style="width: 100%">
  31. </el-date-picker>
  32. </el-form-item>
  33. <el-form-item required :label="$t('common.resourceTheContact')" prop="contactsName">
  34. <el-input v-model="form.contactsName" maxlength="100" show-word-limit
  35. :placeholder="$t('common.resourcePleaseEnterYourName')"
  36. ></el-input>
  37. </el-form-item>
  38. <el-form-item required :label="$t('common.resourceToApplyForTheUnit')" prop="affiliatedUnitName">
  39. <el-input v-model="form.affiliatedUnitName" maxlength="100" show-word-limit
  40. :placeholder="$t('common.resourcePleaseEnterTheUnitName')"
  41. ></el-input>
  42. </el-form-item>
  43. <el-form-item required :label="$t('common.resourceContactPhoneNumber')" prop="contactsNumber">
  44. <el-input v-model="form.contactsNumber" maxlength="100" show-word-limit
  45. :placeholder="$t('common.resourcePleaseEnterYourContactInformation')"
  46. ></el-input>
  47. </el-form-item>
  48. <el-form-item required :label="$t('common.resourceEmail')" prop="contactsEmail">
  49. <el-input v-model="form.contactsEmail" maxlength="100" show-word-limit
  50. :placeholder="$t('common.resourcePleaseEnterEmailAddress')"
  51. ></el-input>
  52. </el-form-item>
  53. <el-form-item :label="$t('common.resourceOtherInstructions')">
  54. <el-input
  55. type="textarea"
  56. :placeholder="$t('common.resourcePleaseEnterAdditionalInstructions')"
  57. v-model="form.otherInstructions"
  58. maxlength="5000"
  59. show-word-limit
  60. rows="6"
  61. >
  62. </el-input>
  63. </el-form-item>
  64. <el-form-item :label="$t('common.resourceTheAttachment')">
  65. <el-upload
  66. class="upload-demo"
  67. action="/api/file/upload/attachment?module=BaseResearchApplicationForm"
  68. :before-upload="beforeUpload"
  69. :on-success="handleAvatarSuccessAnnex"
  70. :limit="1"
  71. :headers="myHeaders"
  72. :on-remove="handleRemove"
  73. :file-list="fileList">
  74. <el-button size="small" type="primary">{{$t('common.resourceSelectUploadFile')}}</el-button>
  75. <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 5px;">{{$t('common.resourceHint')}}{{$t('common.resourceUploadPDF')}},{{$t('common.resourceFilesCannotExceed50Mb')}}</div>
  76. </el-upload>
  77. </el-form-item>
  78. <el-form-item style="text-align: center;">
  79. <el-button style="margin-right: 50px;" v-if="flag != false" type="primary" @click="onSubmit">{{$t('common.resourceSubmit')}}</el-button>
  80. <el-button @click="toResourceDetails">{{$t('common.resourceCancel')}}</el-button>
  81. </el-form-item>
  82. </el-form>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </template>
  89. <script>
  90. import Base from "@/views/base/Base";
  91. import {getDicts} from '@/api/dict';
  92. import { formatDate } from "@/utils/formatUtils";
  93. import { saveOrUpdate,getBaseResearchApplications } from "@/api/research/resource/baseResearchApplication";
  94. import { getToken ,resetToken} from '@/utils/auth'
  95. import { searchFiles } from '@/api/file';
  96. export default {
  97. name: "resourceSharingResourceApply",
  98. extends: Base,
  99. data(){
  100. return{
  101. myHeaders: {Authorization: ('Bearer ' +getToken())},
  102. fileList:[],
  103. queryId:'',
  104. flag: "",
  105. form:{
  106. numberOfVisitors:'',
  107. date:'',
  108. dateOfVisitors:'',
  109. contactsName:'',
  110. affiliatedUnitName:'',
  111. contactsNumber:'',
  112. contactsEmail:'',
  113. otherInstructions:'',
  114. file:'',
  115. researchResourcesEntityId:''
  116. },
  117. baseResearchApplication: {
  118. numberOfVisitors:'',
  119. startDateOfVisitors:'',
  120. endDateOfVisitors:'',
  121. contactsName:'',
  122. affiliatedUnitName:'',
  123. contactsNumber:'',
  124. contactsEmail:'',
  125. otherInstructions:'',
  126. file:'',
  127. researchResourcesEntityId:''
  128. },
  129. }
  130. },
  131. mounted() {
  132. if(this.$route.query.key){
  133. this.queryId = this.$route.query.key;
  134. this.flag = this.$route.query.value;
  135. }else if(this.$route.params.key){
  136. this.researchResourcesEntityId = this.$route.params.key.entityId;
  137. this.flag = this.$route.params.key.flag;
  138. }else{
  139. this.toView('resourceSharing',1)
  140. }
  141. this.initData();
  142. },
  143. computed:{
  144. formRules(){
  145. return{
  146. numberOfVisitors: [
  147. {
  148. required: true,
  149. message: this.i18n('resourcePleaseEnterTheNumberOfVisitors'),
  150. trigger: ['change','blur'],
  151. }
  152. ],
  153. date: [
  154. {
  155. required: true,
  156. message: this.$i18n.locale=='zh'?'请输入参观时间':'Please select a visit time',
  157. trigger: ['change','blur'],
  158. }
  159. ],
  160. contactsName: [
  161. {
  162. required: true,
  163. message: this.i18n('resourcePleaseEnterYourName'),
  164. trigger: ['change','blur'],
  165. }
  166. ],
  167. affiliatedUnitName: [
  168. {
  169. required: true,
  170. message: this.i18n('resourcePleaseEnterTheUnitName'),
  171. trigger: ['change','blur'],
  172. }
  173. ],
  174. contactsNumber: [
  175. {
  176. required: true,
  177. message: this.i18n('resourcePleaseEnterYourContactInformation'),
  178. trigger: ['change','blur'],
  179. }
  180. ],
  181. contactsEmail: [
  182. {
  183. required: true,
  184. message: this.i18n('resourcePleaseEnterEmailAddress'),
  185. trigger: ['change','blur'],
  186. }
  187. ],
  188. }
  189. },
  190. },
  191. methods:{
  192. handleRemove(file, fileList) {
  193. // this.files.forEach((i) => {
  194. // if (i == file.uid) {
  195. // var index = this.files.indexOf(i);
  196. // this.files.splice(index, 1);
  197. // }
  198. // })
  199. this.form.reserveTwo = '';
  200. this.form.file = '';
  201. },
  202. searchFiles() {
  203. var _that = this;
  204. var file = {
  205. attachmentBusinessId : _that.form.id,
  206. attachmentBusinessType : "base_research_application_file"
  207. }
  208. _that.fileList = [];
  209. searchFiles(file).then(result => {
  210. result.data.attachmentInfos.forEach((i) => {
  211. var fileTo = {
  212. name : i.attachmentName,
  213. url : i.attachmentSavePath,
  214. uid : i.id
  215. }
  216. _that.fileList.push(fileTo);
  217. })
  218. })
  219. },
  220. initData() {
  221. if (this.queryId) {
  222. let param = {
  223. id : this.queryId
  224. }
  225. getBaseResearchApplications(param).then(result => {
  226. this.form = result.data.baseResearchApplications[0];
  227. this.form.date = [];
  228. this.form.date.push(formatDate( this.form.startDateOfVisitors, "YYYY-MM-DD HH:mm:ss"));
  229. this.form.date.push(formatDate( this.form.endDateOfVisitors, "YYYY-MM-DD HH:mm:ss"));
  230. this.searchFiles();
  231. })
  232. }
  233. },
  234. onSubmit() {
  235. const that = this;
  236. console.log("that.$refs['form']")
  237. console.log(that.$refs['form'])
  238. that.$refs['form'].validate((valid) => {
  239. if (valid) {
  240. let date1 = that.form.date[0];
  241. let date2 = that.form.date[1];
  242. if (!that.form.id) {
  243. date1 = date1.getTime();
  244. date2 = date2.getTime();
  245. that.baseResearchApplication.researchResourcesEntityId = this.$route.params.key.entityId;
  246. that.baseResearchApplication.status = "1";
  247. that.baseResearchApplication.reserveOne = this.$route.params.key.name;
  248. } else {
  249. that.baseResearchApplication.researchResourcesEntityId = that.form.researchResourcesEntityId;
  250. that.baseResearchApplication.status = that.form.status;
  251. that.baseResearchApplication.reserveOne = that.form.reserveOne;
  252. that.baseResearchApplication.id = that.form.id;
  253. }
  254. that.baseResearchApplication.numberOfVisitors = that.form.numberOfVisitors;
  255. that.baseResearchApplication.startDateOfVisitors = date1;
  256. that.baseResearchApplication.endDateOfVisitors = date2;
  257. that.baseResearchApplication.contactsName = that.form.contactsName;
  258. that.baseResearchApplication.affiliatedUnitName = that.form.affiliatedUnitName;
  259. that.baseResearchApplication.contactsNumber = that.form.contactsNumber;
  260. that.baseResearchApplication.contactsEmail = that.form.contactsEmail;
  261. that.baseResearchApplication.otherInstructions = that.form.otherInstructions;
  262. that.baseResearchApplication.file = that.form.file;
  263. that.baseResearchApplication.reserveTwo = that.form.reserveTwo;
  264. let token = getToken();
  265. this.submitHandler((token) => {
  266. saveOrUpdate(JSON.stringify(that.baseResearchApplication), token).then(result => {
  267. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  268. this.$message({
  269. message: '申请成功',
  270. type: "success",
  271. });
  272. } else {
  273. this.$message({
  274. message: 'application approved',
  275. type: "success",
  276. });
  277. }
  278. this.toResourceDetails()
  279. }).catch((error) => {
  280. this.resetToken();
  281. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  282. this.$message({
  283. message: '申请失败',
  284. type: "error",
  285. });
  286. } else {
  287. this.$message({
  288. message: 'application failed',
  289. type: "error",
  290. });
  291. }
  292. this.toResourceDetails()
  293. });
  294. });
  295. } else {
  296. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  297. this.$message({
  298. message: '必填项未填!',
  299. type: 'error'
  300. });
  301. } else {
  302. this.$message({
  303. message: 'The required fields are not filled in!',
  304. type: 'error'
  305. });
  306. }
  307. }
  308. });
  309. },
  310. handleAvatarSuccessAnnex(res, file) {
  311. let attachmentId = res.data.attachmentId;
  312. let path = res.data.path;
  313. this.form.file = path;
  314. this.form.reserveTwo = attachmentId;
  315. },
  316. beforeUpload(file) {
  317. var FileExt = file.name.replace(/.+\./, "");
  318. if (['zip', 'pdf', 'doc', 'docx', 'excel', 'xls', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
  319. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  320. this.$message({
  321. type: 'warning',
  322. message: '请上传zip,pdf,word,excel的附件!'
  323. });
  324. } else {
  325. this.$message({
  326. type: 'warning',
  327. message: 'Please upload the attachment of zip, PDF, word and excel!'
  328. });
  329. }
  330. return false;
  331. }
  332. this.isLt2k = file.size / 1024 / 1024 < 10 ? '1' : '0';
  333. if (this.isLt2k === '0') {
  334. if (this.$i18n.locale.toUpperCase() == 'ZH') {
  335. this.$message({
  336. message: '上传文件大小不能超过10M!',
  337. type: 'error'
  338. });
  339. } else {
  340. this.$message({
  341. message: 'Upload file size cannot exceed 10m!',
  342. type: 'error'
  343. });
  344. }
  345. return false;
  346. }
  347. },
  348. toResourceDetails(item,index){
  349. let params = {
  350. entityId:'',
  351. };
  352. // if(this.$route.params.key){
  353. // params.entityId = this.$route.params.key;
  354. // }
  355. // if(this.form.researchResourcesEntityId){
  356. // params.entityId = this.form.researchResourcesEntityId
  357. // }
  358. this.toView('resourceSharing')
  359. },
  360. toViewQuery(router, json) {
  361. this.$router.push({ name: router, query: {key:json} });
  362. },
  363. toView(router, json) {
  364. this.$router.push({ name: router, params: {key:json} });
  365. },
  366. i18n (data) {
  367. return this.$t('common.'+data);
  368. },
  369. }
  370. }
  371. </script>
  372. <style scoped>
  373. .box {
  374. margin-top: 10px;
  375. background: #fff;
  376. /* height: 500px; */
  377. padding: 20px 0;
  378. }
  379. .crumbs {
  380. margin:0 20px;
  381. }
  382. .content{
  383. width: 100%;
  384. padding: 20px 10px;
  385. box-sizing: border-box;
  386. }
  387. .content .addLanguage{
  388. width: 100%;
  389. height: 50px;
  390. border-bottom: 1px solid #E4E7ED;
  391. }
  392. .content .apply{
  393. margin-top: 15px;
  394. }
  395. </style>