accept-form.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. <template>
  2. <div class="doc-page" v-loading="loading">
  3. <h3 class="page-title" style="margin: 24px 0 16px;">科德集团</h3>
  4. <h3 class="page-title" style="margin: 24px 0 16px;">研发项目验收资料</h3>
  5. <div class="project-basic-info">
  6. <div class="info-row">{{ `研发项目名称:${ selProject.xmmc || '' }` }}</div>
  7. <div class="info-row">{{ `项目负责人:${ selProject.xmfzrxm || '' }` }}</div>
  8. <div class="info-row">{{ `项目申请单位:${ selProject.xmsqdw || '' }` }}</div>
  9. <div class="info-row">{{ `项目执行期:${ getXmDateRange || '' }` }}</div>
  10. <div class="info-row">
  11. <span>填报时间:</span>
  12. <span><el-date-picker v-model="formData.tbsj" value-format="yyyy-MM-dd" /></span>
  13. </div>
  14. </div>
  15. <table style="margin-top: 20px;">
  16. <tbody>
  17. <tr>
  18. <td class="doc-label">研发项目名称</td>
  19. <td class="doc-input">
  20. <project-select
  21. v-model="currProjectId"
  22. @change="handleProjectChange"
  23. ></project-select>
  24. </td>
  25. <td class="doc-label">项目申请单位</td>
  26. <td class="doc-input">{{ selProject.xmsqdw }}</td>
  27. </tr>
  28. <tr>
  29. <td class="doc-label">项目负责人</td>
  30. <td class="doc-input">{{ selProject.xmfzrxm }} </td>
  31. <td class="doc-label">研究类型</td>
  32. <td class="doc-input">{{ selProject.yjlx }}</td>
  33. </tr>
  34. <tr>
  35. <td class="doc-label">研发开始时间</td>
  36. <td class="doc-input">{{ selProject.xmkssj }} </td>
  37. <td class="doc-label">研发结束时间</td>
  38. <td class="doc-input">{{ selProject.xmjssj }}</td>
  39. </tr>
  40. <tr>
  41. <td class="doc-label">项目来源</td>
  42. <td class="doc-input">{{ selProject.xmly }} </td>
  43. <td class="doc-label">项目开展形式</td>
  44. <td class="doc-input">{{ selProject.xmkzxs }}</td>
  45. </tr>
  46. <tr>
  47. <td class="doc-label">预期成果形式</td>
  48. <td class="doc-input">{{ selProject.yqcgxs }} </td>
  49. <td class="doc-label">项目技术经济目标</td>
  50. <td class="doc-input">{{ selProject.xmjsjjmb }}</td>
  51. </tr>
  52. </tbody>
  53. </table>
  54. <avue-form v-model="formData" :option="option" style="margin-top: 30px; padding: 0;">
  55. <template slot="ysbgLabel">
  56. <label>验收报告</label>
  57. <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
  58. </template>
  59. <template slot="jsbgLabel">
  60. <label>技术报告</label>
  61. <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
  62. </template>
  63. <template slot="cgbgLabel">
  64. <label>成果报告</label>
  65. <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
  66. </template>
  67. <template slot="xybgLabel">
  68. <label>效益报告</label>
  69. <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
  70. </template>
  71. <template slot="yspwLabel">
  72. <label>验收批文</label>
  73. <el-link type="primary" style="position: absolute; left: 220px; z-index: 1;">下载模板</el-link>
  74. </template>
  75. </avue-form>
  76. <p class="tip">注:可一次上传多个相关文件(文档、表格、图片等)。 支持格式:DOC, PDF, Excel, PNG, JPG, PPT 等。 请确保文件内容清晰有效。</p>
  77. <div class="btn-wrap" style="text-align: center; margin-top: 30px;">
  78. <el-button type="primary" style="width: 160px;" @click="handleSaveBtn">保存</el-button>
  79. </div>
  80. </div>
  81. </template>
  82. <script>
  83. import projectSelect from "@/components/project-select";
  84. import { save, getDetail } from "@/api/projectManage/accept";
  85. import moment from "moment";
  86. export default {
  87. components: {
  88. projectSelect
  89. },
  90. props: {
  91. projectId: [String, Number]
  92. },
  93. data() {
  94. return {
  95. formData: {},
  96. loading: false,
  97. projectList: [],
  98. selProject: {},
  99. currProjectId: '',
  100. loading: false
  101. };
  102. },
  103. computed: {
  104. getXmDateRange() {
  105. if (this.selProject.xmkssj && this.selProject.xmjssj) {
  106. let xmkssj = moment(this.selProject.xmkssj).format('yyyy年MM月DD日');
  107. let xmjssj = moment(this.selProject.xmjssj).format('yyyy年MM月DD日')
  108. return `${xmkssj}至${xmjssj}`;
  109. }
  110. return `年 月 日至 年 月 日`;
  111. },
  112. option() {
  113. return {
  114. menuBtn: false,
  115. labelWidth: 75,
  116. column: [
  117. {
  118. label: "验收报告",
  119. prop: "ysbg",
  120. type: "upload",
  121. multiple: true,
  122. span: 24,
  123. dataType: "object",
  124. propsHttp: {
  125. url: "link",
  126. name: "originalName",
  127. res: "data",
  128. },
  129. action: '/api/kd-resource/oss/endpoint/put-file',
  130. uploadPreview: (file, column, done) => {
  131. window.open(file.url, "_blank");
  132. return;
  133. },
  134. disabled: !this.currProjectId
  135. },
  136. {
  137. label: "技术报告",
  138. prop: "jsbg",
  139. type: "upload",
  140. multiple: true,
  141. span: 24,
  142. dataType: "object",
  143. propsHttp: {
  144. url: "link",
  145. name: "originalName",
  146. res: "data",
  147. },
  148. action: '/api/kd-resource/oss/endpoint/put-file',
  149. uploadPreview: (file, column, done) => {
  150. window.open(file.url, "_blank");
  151. return;
  152. },
  153. disabled: !this.currProjectId
  154. },
  155. {
  156. label: "成果报告",
  157. prop: "cgbg",
  158. type: "upload",
  159. multiple: true,
  160. span: 24,
  161. dataType: "object",
  162. propsHttp: {
  163. url: "link",
  164. name: "originalName",
  165. res: "data",
  166. },
  167. action: '/api/kd-resource/oss/endpoint/put-file',
  168. uploadPreview: (file, column, done) => {
  169. window.open(file.url, "_blank");
  170. return;
  171. },
  172. disabled: !this.currProjectId
  173. },
  174. {
  175. label: "效益报告",
  176. prop: "xybg",
  177. type: "upload",
  178. multiple: true,
  179. span: 24,
  180. dataType: "object",
  181. propsHttp: {
  182. url: "link",
  183. name: "originalName",
  184. res: "data",
  185. },
  186. action: '/api/kd-resource/oss/endpoint/put-file',
  187. uploadPreview: (file, column, done) => {
  188. window.open(file.url, "_blank");
  189. return;
  190. },
  191. disabled: !this.currProjectId
  192. },
  193. {
  194. label: "验收批文",
  195. prop: "yspw",
  196. type: "upload",
  197. multiple: true,
  198. span: 24,
  199. dataType: "object",
  200. action: '/api/kd-resource/oss/endpoint/put-file',
  201. uploadPreview: (file, column, done) => {
  202. window.open(file.url, "_blank");
  203. return;
  204. },
  205. propsHttp: {
  206. url: "link",
  207. name: "originalName",
  208. res: "data",
  209. },
  210. disabled: !this.currProjectId
  211. },
  212. ],
  213. }
  214. }
  215. },
  216. watch: {
  217. currProjectId() {
  218. this.getImplementDetail();
  219. }
  220. },
  221. mounted() {
  222. this.currProjectId = this.projectId || '';
  223. },
  224. methods: {
  225. getImplementDetail() {
  226. this.loading = true;
  227. getDetail({ xmId: this.currProjectId, yearAndMonth: this.yearAndMonth }).then(({ data }) => {
  228. this.loading = false;
  229. if (data.code == 200 && data.data && Object.keys(data.data).length) {
  230. this.formData = {
  231. id: data.data.id,
  232. xmId: data.data.xmId,
  233. tbsj: data.data.tbsj,
  234. ysbg: data.data.ysbg ? JSON.parse(data.data.ysbg) : [],
  235. jsbg: data.data.jsbg ? JSON.parse(data.data.jsbg) : [],
  236. cgbg: data.data.cgbg ? JSON.parse(data.data.cgbg) : [],
  237. xybg: data.data.xybg ? JSON.parse(data.data.xybg) : [],
  238. yspw: data.data.yspw ? JSON.parse(data.data.yspw) : [],
  239. };
  240. } else {
  241. this.formData = {
  242. tbsj: '',
  243. ysbg: [],
  244. jsbg: [],
  245. cgbg: [],
  246. xybg: [],
  247. yspw: [],
  248. };
  249. }
  250. }).catch(() => {
  251. this.loading = false;
  252. });
  253. },
  254. handleProjectChange(data) {
  255. this.selProject = data;
  256. },
  257. validForm() {
  258. let errorText = '';
  259. if (!this.formData.tbsj) {
  260. errorText = '请选择填报时间';
  261. } else if (!this.currProjectId) {
  262. errorText = '请选择填报的项目';
  263. }
  264. return errorText;
  265. },
  266. handleSaveBtn() {
  267. let errorText = this.validForm();
  268. if (errorText) {
  269. this.$message.error(errorText+'!');
  270. return;
  271. }
  272. const params = { ...this.formData, xmId: this.currProjectId };
  273. params.ysbg = JSON.stringify(params.ysbg);
  274. params.jsbg = JSON.stringify(params.jsbg);
  275. params.cgbg = JSON.stringify(params.cgbg);
  276. params.xybg = JSON.stringify(params.xybg);
  277. params.yspw = JSON.stringify(params.yspw);
  278. this.saveData(params);
  279. },
  280. saveData(params) {
  281. save(params).then(({ data }) => {
  282. if (data.code == 200) {
  283. this.$message.success('保存成功!');
  284. }
  285. });
  286. }
  287. },
  288. };
  289. </script>
  290. <style lang="scss" scoped>
  291. .page-title {
  292. text-align: center;
  293. font-size: 24px;
  294. }
  295. .project-basic-info .info-row {
  296. line-height: 26px;
  297. color: #666;
  298. }
  299. .doc-page {
  300. width: 800px;
  301. margin: 30px auto;
  302. }
  303. table {
  304. width: 100%;
  305. border: 1px solid #333;
  306. }
  307. .doc-label {
  308. text-align: center;
  309. padding: 6px;
  310. color: #777;
  311. font-size: 14px;
  312. width: 15%;
  313. }
  314. .doc-input {
  315. text-align: center;
  316. color: #333;
  317. width: 35%;
  318. }
  319. .el-input__inner {
  320. border: none;
  321. }
  322. tr td {
  323. border: 1px solid #333;
  324. }
  325. .tip {
  326. position: relative;
  327. top: 0;
  328. color: red;
  329. padding-left: 75px;
  330. margin-top: 0;
  331. font-size: 12px;
  332. }
  333. </style>