apply-form.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651
  1. <template>
  2. <div>
  3. <div v-if="operateType === 'edit'" class="tool-btn" style="width: 800px; margin: 0 auto; text-align: right;">
  4. <el-button type="primary" v-print="'#applyDoc'">打印</el-button>
  5. </div>
  6. <div id="applyDoc" class="apply-form" v-loading="loading">
  7. <h3 class="page-title" style="height: 60px; line-height: 60px; margin: 0;">{{ teantData.tenantName }}</h3>
  8. <h3 class="page-title" style="margin: 5px 0 16px;">{{ getDocTile }}</h3>
  9. <div class="project-basic-info">
  10. <div class="info-row">{{ `研发项目名称:${ formData.xmmc || '' }` }}</div>
  11. <div class="info-row">{{ `项目负责人:${ getXmfzrName || '' }` }}</div>
  12. <div class="info-row">{{ `项目申请单位:${ xmsqdwName }` }}</div>
  13. <div class="info-row">{{ `项目执行期:${ getXmDateRange || '' }` }}</div>
  14. </div>
  15. <!-- 打印强制分页 -->
  16. <div style="page-break-after: always;"></div>
  17. <h3 class="page-title" style="margin: 24px 0 16px;">研发立项申请表</h3>
  18. <table>
  19. <tbody>
  20. <tr>
  21. <td class="doc-label">
  22. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>研发项目名称
  23. </td>
  24. <td class="doc-input">
  25. <el-input v-model="formData.xmmc" placeholder="请输入项目名称" :disabled="isEdit" />
  26. </td>
  27. <td class="doc-label">
  28. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>项目编号
  29. </td>
  30. <td class="doc-input">
  31. <el-input v-model="formData.xmbh" placeholder="请输入项目编号" :disabled="isEdit" />
  32. </td>
  33. </tr>
  34. <tr>
  35. <td class="doc-label">
  36. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>研发开始时间
  37. </td>
  38. <td class="doc-input">
  39. <el-date-picker
  40. v-model="formData.xmkssj"
  41. format="yyyy年MM月dd日"
  42. value-format="yyyy-MM-dd"
  43. placeholder="请选择日期"
  44. style="width: 100%"
  45. :disabled="isEdit"
  46. ></el-date-picker>
  47. </td>
  48. <td class="doc-label">
  49. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>研发结束时间
  50. </td>
  51. <td class="doc-input">
  52. <el-date-picker
  53. v-model="formData.xmjssj"
  54. format="yyyy年MM月dd日"
  55. value-format="yyyy-MM-dd"
  56. placeholder="请选择日期"
  57. style="width: 100%"
  58. :disabled="isEdit"
  59. ></el-date-picker>
  60. </td>
  61. </tr>
  62. <tr>
  63. <td class="doc-label">
  64. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>项目申请单位
  65. </td>
  66. <td colspan="3">
  67. <second-unit-cascader
  68. v-model="formData.xmsqdwid"
  69. :yearAndMonth="yearAndMonth"
  70. style="width: 100%;"
  71. :disabled="isEdit"
  72. @change="handleSecondUnitChange"
  73. >
  74. </second-unit-cascader>
  75. </td>
  76. </tr>
  77. <tr>
  78. <td class="doc-label">
  79. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>项目负责人
  80. </td>
  81. <td class="doc-input">
  82. <person-select v-model="formData.xmfzr" :yearAndMonth="xmStartDateYearAndMonth" valueKey="id" :disabled="isEdit" style="width: 100%" />
  83. </td>
  84. <td class="doc-label">
  85. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>研究类型
  86. </td>
  87. <td class="doc-input">
  88. <avue-select
  89. v-model="formData.yjlx"
  90. placeholder="请选择"
  91. :dic="studyTypeList"
  92. style="width: 100%"
  93. ></avue-select>
  94. </td>
  95. </tr>
  96. <tr>
  97. <td class="doc-label">
  98. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>项目来源
  99. </td>
  100. <td class="doc-input">
  101. <avue-select
  102. v-model="formData.xmly"
  103. placeholder="请选择"
  104. :dic="projectSourceList"
  105. style="width: 100%"
  106. ></avue-select>
  107. </td>
  108. <td class="doc-label">
  109. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>项目开展形式
  110. </td>
  111. <td class="doc-input">
  112. <avue-select
  113. v-model="formData.xmkzxs"
  114. placeholder="请选择"
  115. :dic="implementFormatList"
  116. style="width: 100%"
  117. ></avue-select>
  118. </td>
  119. </tr>
  120. <tr>
  121. <td class="doc-label">
  122. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>预期成果形式
  123. </td>
  124. <td class="doc-input">
  125. <avue-select
  126. multiple
  127. v-model="formData.yqcgxs"
  128. placeholder="请选择"
  129. :dic="expectedOutComeFormList"
  130. style="width: 100%"
  131. ></avue-select>
  132. </td>
  133. <td class="doc-label">
  134. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>项目技术经济目标
  135. </td>
  136. <td class="doc-input">
  137. <avue-select
  138. multiple
  139. v-model="formData.xmjsjjmb"
  140. placeholder="请选择"
  141. :dic="economicObjectivesList"
  142. style="width: 100%"
  143. ></avue-select>
  144. </td>
  145. </tr>
  146. <tr>
  147. <td class="doc-label">
  148. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>项目预算总额(万元)
  149. </td>
  150. <td class="doc-input">
  151. <!-- <el-input-number v-model="formData.xmysze" type="number" :min="0" controls-position="right" :disabled="isEdit" /> -->
  152. {{ getXmysze }}
  153. </td>
  154. <td class="doc-label">
  155. <span style="color: red; padding-right: 3px; font-size: 16px;">*</span>其中
  156. </td>
  157. <td class="doc-input">
  158. <div class="year-list">
  159. <div class="year-list-item" v-for="year of yearList" :key="year" :style="{ height: yearList.length == 1 ? '51px' : '32px', lineHeight: yearList.length == 1 ? '51px' : '32px' }">
  160. <div class="year" >{{ year }}</div>
  161. <div class="year-input">
  162. <input v-model="formData[year]" type="number" @input="handleYearInput" style="padding: 0 6px;" :disabled="isEdit" />
  163. </div>
  164. </div>
  165. </div>
  166. </td>
  167. </tr>
  168. </tbody>
  169. </table>
  170. <avue-form v-model="formData" :option="option" style="margin-top: 30px; padding: 0;">
  171. <template slot="lxpwLabel">
  172. <label>立项批文</label>
  173. <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
  174. </template>
  175. <template slot="lxbgLabel">
  176. <label>立项报告</label>
  177. <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
  178. </template>
  179. <template slot="qtzlLabel">
  180. <label>其他资料</label>
  181. <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
  182. </template>
  183. </avue-form>
  184. <p class="tip">注:可一次上传多个相关文件(文档、表格、图片等)。 支持格式:DOC, PDF, Excel, PNG, JPG, PPT 等。 请确保文件内容清晰有效。</p>
  185. <div class="btn-wrap printHide" style="text-align: center;">
  186. <el-button type="primary" style="width: 160px;" @click="handleSaveBtn">保存</el-button>
  187. </div>
  188. </div>
  189. </div>
  190. </template>
  191. <script>
  192. import secondUnitCascader from "@/components/second-unit-cascader";
  193. import personSelect from "@/components/person-select";
  194. import { getDictionary } from "@/api/system/dictbiz";
  195. import { getList as getTechnicanRosterList } from "@/api/basicResource/technicianRoster";
  196. import { add, update, getDetail } from "@/api/projectManage/projectList";
  197. import moment from "moment";
  198. import { deepClone } from "@/util/util";
  199. import Decimal from "decimal.js";
  200. import { mapGetters } from "vuex";
  201. import { getDetail as getTenantDetail } from '@/api/system/tenant';
  202. export default {
  203. components: {
  204. personSelect,
  205. secondUnitCascader
  206. },
  207. props: {
  208. // add or edit
  209. operateType: String,
  210. projectId: [String, Number]
  211. },
  212. data() {
  213. return {
  214. loading: false,
  215. formData: {},
  216. yearList: [],
  217. // 预算是否超出
  218. budgetIsExceed: false,
  219. // 项目负责人列表
  220. fzrList: [],
  221. // 研究类型数据字典
  222. studyTypeList: [],
  223. // 项目来源列表
  224. projectSourceList: [],
  225. // 开展形式
  226. implementFormatList: [],
  227. // 预期成果形式
  228. expectedOutComeFormList: [],
  229. // 经济目标
  230. economicObjectivesList: [],
  231. xmsqdwName: '',
  232. // 租户信息
  233. teantData: {}
  234. };
  235. },
  236. watch: {
  237. 'formData.xmkssj'(newVal) {
  238. this.yearList = this.getDateRangeYear(newVal, this.formData.xmjssj);
  239. let cMonth = newVal ? moment(newVal).format('yyyyMM') : '';
  240. if (cMonth != this.xmStartDateYearAndMonth) {
  241. this.xmStartDateYearAndMonth = cMonth;
  242. }
  243. },
  244. 'formData.xmjssj'(newVal) {
  245. this.yearList = this.getDateRangeYear(this.formData.xmkssj, newVal);
  246. },
  247. 'formData.xmysze'(newVal) {
  248. this.calcBudgetIsExceed(newVal);
  249. }
  250. },
  251. computed: {
  252. ...mapGetters(["userInfo"]),
  253. isEdit() {
  254. return this.operateType == 'edit';
  255. },
  256. // 获取项目预算总额
  257. getXmysze() {
  258. let total = new Decimal(0);
  259. this.yearList.forEach(year => {
  260. total = total.add (new Decimal(this.formData[year] || 0));
  261. });
  262. return total.toFixed(2);
  263. },
  264. option() {
  265. return {
  266. submitBtn: false,
  267. emptyBtn: false,
  268. submitText: '保存',
  269. menuBtn: false,
  270. column: [
  271. {
  272. label: "立项批文",
  273. prop: "lxpw",
  274. type: "upload",
  275. multiple: true,
  276. span: 24,
  277. disabled: this.isEdit,
  278. dataType: "object",
  279. propsHttp: {
  280. url: "link",
  281. name: "originalName",
  282. res: "data",
  283. },
  284. action: '/api/kd-resource/oss/endpoint/put-file',
  285. uploadPreview: (file, column, done) => {
  286. window.open(file.url, "_blank");
  287. return;
  288. },
  289. // rules: [{
  290. // required: true,
  291. // message: "请上传立项批文"
  292. // }]
  293. },
  294. {
  295. label: "立项报告",
  296. prop: "lxbg",
  297. type: "upload",
  298. multiple: true,
  299. span: 24,
  300. dataType: "object",
  301. propsHttp: {
  302. url: "link",
  303. name: "originalName",
  304. res: "data",
  305. },
  306. action: '/api/kd-resource/oss/endpoint/put-file',
  307. disabled: this.isEdit,
  308. uploadPreview: (file, column, done) => {
  309. window.open(file.url, "_blank");
  310. return;
  311. },
  312. // rules: [{
  313. // required: true,
  314. // message: "请上传立项报告"
  315. // }]
  316. },
  317. {
  318. label: "其他资料",
  319. prop: "qtzl",
  320. type: "upload",
  321. multiple: true,
  322. span: 24,
  323. action: '/api/kd-resource/oss/endpoint/put-file',
  324. disabled: this.isEdit,
  325. uploadPreview: (file, column, done) => {
  326. window.open(file.url, "_blank");
  327. return;
  328. },
  329. dataType: "object",
  330. propsHttp: {
  331. url: "link",
  332. name: "originalName",
  333. res: "data",
  334. },
  335. },
  336. ],
  337. }
  338. },
  339. getDocTile() {
  340. let tit = '研发项目资料';
  341. if (this.formData.xmmc) {
  342. return `${this.formData.xmmc}${tit}`;
  343. }
  344. return tit;
  345. },
  346. getXmfzrName() {
  347. // if (this.formData.xmfzr) {
  348. // let fzrObj = this.fzrList.find(item => item.value == this.formData.xmfzr);
  349. // return fzrObj ? fzrObj.label : "";
  350. // }
  351. return this.formData.xmfzrxm;
  352. },
  353. getXmDateRange() {
  354. if (this.formData.xmkssj && this.formData.xmjssj) {
  355. let xmkssj = moment(this.formData.xmkssj).format('yyyy年MM月DD日');
  356. let xmjssj = moment(this.formData.xmjssj).format('yyyy年MM月DD日')
  357. return `${xmkssj}至${xmjssj}`;
  358. }
  359. return `年 月 日至 年 月 日`;
  360. },
  361. yearAndMonth() {
  362. return !!this.formData.xmkssj ? moment(this.formData.xmkssj).format('yyyy') : '';
  363. }
  364. },
  365. mounted() {
  366. this.getTenantDetailFunc(this.userInfo.tenant_id);
  367. this.getDictList("study_type", "studyTypeList");
  368. this.getDictList("project_source", "projectSourceList");
  369. this.getDictList("implementation_format", "implementFormatList");
  370. this.getDictList("expected_outcome_form", "expectedOutComeFormList");
  371. this.getDictList("economic_objectives", "economicObjectivesList");
  372. if (this.projectId) {
  373. this.getProjectDetail(this.projectId);
  374. }
  375. },
  376. methods: {
  377. // 获取租户详情信息
  378. getTenantDetailFunc(tenantId) {
  379. getTenantDetail(tenantId).then(({ data }) => {
  380. if (data.code == 200) {
  381. this.teantData = data.data;
  382. }
  383. });
  384. },
  385. handleSecondUnitChange(val, nameArr) {
  386. this.xmsqdwName = nameArr.join('/');
  387. },
  388. getProjectDetail(xmId) {
  389. this.loading = true;
  390. getDetail({ id: xmId }).then(({ data }) => {
  391. this.loading = false;
  392. if (data.code == 200) {
  393. let beanData = { ...data.data };
  394. beanData.xmfzr = beanData.xmfzr.toString();
  395. beanData.yqcgxs = beanData.yqcgxs.split(",");
  396. beanData.xmjsjjmb = beanData.xmjsjjmb.split(",");
  397. beanData.lxpw = beanData.lxpw ? JSON.parse(beanData.lxpw) : [];
  398. beanData.lxbg = beanData.lxbg ? JSON.parse(beanData.lxbg) : [];
  399. beanData.qtzl = beanData.qtzl ? JSON.parse(beanData.qtzl) : [];
  400. beanData.xmyszemx = beanData.xmyszemx ? JSON.parse(beanData.xmyszemx) : [];
  401. beanData.xmyszemx.forEach(item => {
  402. beanData[item.year] = item.amount;
  403. });
  404. this.formData = { ...beanData };
  405. }
  406. }).catch(err => {
  407. this.loading = false;
  408. });
  409. },
  410. getDateRangeYear(sDate, eDate) {
  411. let yearArr = [];
  412. if (sDate && eDate) {
  413. let sDateYear = moment(sDate).format('yyyy');
  414. let dDateYear = moment(eDate).format('yyyy');
  415. for (let i=sDateYear; i<=dDateYear; i++) {
  416. yearArr.push(i);
  417. }
  418. }
  419. return yearArr;
  420. },
  421. getDictList(code, toListKey) {
  422. getDictionary({ code }).then((res) => {
  423. this[toListKey] = res.data.data.map((item) => {
  424. return { label: item.dictValue, value: item.dictKey };
  425. });
  426. });
  427. },
  428. handleYearInput(e) {
  429. this.calcBudgetIsExceed(this.formData.xmysze);
  430. },
  431. /**
  432. * 计算是否超出预算
  433. * @param total 预算总额
  434. */
  435. calcBudgetIsExceed(total) {
  436. let yearTotal = 0;
  437. let projectBudget = Number(total || 0);
  438. this.yearList.forEach(year => {
  439. let num = Number(this.formData[year] || 0);
  440. yearTotal += num;
  441. });
  442. if (yearTotal > projectBudget) {
  443. this.budgetIsExceed = true;
  444. } else {
  445. this.budgetIsExceed = false;
  446. }
  447. },
  448. /**
  449. * 获取人员花名册
  450. */
  451. // getTechnicanRosterListFunc(yearAndMonth) {
  452. // if (!yearAndMonth) {
  453. // this.fzrList = [];
  454. // return;
  455. // }
  456. // getTechnicanRosterList(1, 99999, { yearAndMonth }).then(res => {
  457. // if (res.data.success) {
  458. // this.fzrList = res.data.data.records.map(item => {
  459. // return { label: item.name, value: item.id };
  460. // });
  461. // }
  462. // });
  463. // },
  464. validForm() {
  465. let errorText = '';
  466. if (!this.formData.xmmc) {
  467. errorText = '请输入项目名称';
  468. } else if (/技改|技术改造|推广|打样|翻新|产业化|生产线|改造|年产|示范/g.test(this.formData.xmmc)) {
  469. errorText = '研发项目名称,不符合统计部门的命名要求';
  470. } else if (!this.formData.xmbh) {
  471. errorText = '请输入项目编号';
  472. } else if (!this.formData.xmsqdwid || !this.formData.xmsqdwid.length) {
  473. errorText = '请选择项目申请单位';
  474. } else if (!this.formData.xmkssj) {
  475. errorText = '请选择项目开始时间';
  476. } else if (!this.formData.xmjssj) {
  477. errorText = '请选择项目结束时间';
  478. } else if (!this.formData.yjlx) {
  479. errorText = '请选择研究类型'
  480. } else if (!this.formData.xmfzr) {
  481. errorText = '请选择项目负责人';
  482. } else if (!this.formData.xmly) {
  483. errorText = '请选择项目来源';
  484. } else if (!this.formData.xmkzxs) {
  485. errorText = '请选择项目开展形式';
  486. } else if (!this.formData.yqcgxs) {
  487. errorText = '请选择预期成果形式';
  488. } else if (!this.formData.xmjsjjmb) {
  489. errorText = '请选择项目技术经济目标';
  490. }
  491. else {
  492. this.yearList.forEach(year => {
  493. if (this.formData[year] === null || this.formData[year] === undefined || this.formData[year] === '') {
  494. errorText = `${year}年的预算不能为空`;
  495. }
  496. });
  497. }
  498. return errorText;
  499. },
  500. handleSaveBtn() {
  501. if (!this.operateType || this.operateType === 'add') {
  502. let errorText = this.validForm();
  503. if (errorText) {
  504. this.$message.error(errorText+'!');
  505. return;
  506. }
  507. let params = deepClone(this.formData);
  508. params.yqcgxs = params.yqcgxs ? params.yqcgxs.join(',') : '';
  509. params.xmjsjjmb = params.xmjsjjmb ? params.xmjsjjmb.join(',') : '';
  510. params.xmsqdwid = params.xmsqdwid ? params.xmsqdwid[params.xmsqdwid.length - 1] : '';
  511. params.lxbg = JSON.stringify(params.lxbg);
  512. params.lxpw = JSON.stringify(params.lxpw);
  513. params.qtzl = JSON.stringify(params.qtzl);
  514. let yearAmountList = [];
  515. this.yearList.forEach(year => {
  516. yearAmountList.push({ year: Number(year), amount: params[year] || 0 });
  517. delete params[year];
  518. });
  519. params.xmyszemx = JSON.stringify(yearAmountList);
  520. params.xmysze = this.getXmysze;
  521. this.addOrUpdate(params);
  522. } else if (this.operateType === 'edit') {
  523. let params = {
  524. xmId: this.formData.id,
  525. yjlx: this.formData.yjlx,
  526. xmly: this.formData.xmly,
  527. xmkzxs: this.formData.xmkzxs,
  528. yqcgxs: this.formData.yqcgxs.join(','),
  529. xmjsjjmb: this.formData.xmjsjjmb.join(',')
  530. };
  531. this.addOrUpdate(params);
  532. }
  533. },
  534. addOrUpdate(params) {
  535. let func = this.operateType === 'edit' ? update : add;
  536. this.loading = true;
  537. func(params).then(({ data }) => {
  538. this.loading = false;
  539. if (data.code == 200) {
  540. this.$emit('success', data.data);
  541. this.$message.success(this.operateType === 'edit' ? '修改成功!' : '保存成功!');
  542. }
  543. }).catch(err => {
  544. this.loading = false;
  545. });
  546. }
  547. },
  548. };
  549. </script>
  550. <style lang="scss" scoped>
  551. .page-title {
  552. text-align: center;
  553. font-size: 24px;
  554. }
  555. .project-basic-info .info-row {
  556. line-height: 26px;
  557. color: #666;
  558. }
  559. .apply-form {
  560. width: 800px;
  561. margin: 30px auto;
  562. }
  563. table {
  564. width: 100%;
  565. border: 1px solid #333;
  566. }
  567. .doc-label {
  568. width: 100px;
  569. text-align: center;
  570. padding: 6px;
  571. color: #777;
  572. font-size: 14px;
  573. }
  574. .doc-input {
  575. text-align: center;
  576. color: #333;
  577. }
  578. .el-input__inner {
  579. border: none;
  580. }
  581. tr td {
  582. border: 1px solid #333;
  583. }
  584. .year-list {
  585. &-item {
  586. display: flex;
  587. height: 32px;
  588. line-height: 32px;
  589. border-bottom: 1px solid #333;
  590. &:last-child {
  591. border-bottom: 0;
  592. }
  593. .year {
  594. width: 65px;
  595. border-right: 1px solid #333;
  596. }
  597. .year-input {
  598. input {
  599. width: 100%;
  600. height: 30px;
  601. border: 0;
  602. }
  603. }
  604. }
  605. }
  606. .red {
  607. color: red;
  608. }
  609. .tip {
  610. position: relative;
  611. top: 0;
  612. color: red;
  613. padding-left: 90px;
  614. margin-top: 0;
  615. font-size: 12px;
  616. }
  617. </style>