high-comp-annual-report.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <template>
  2. <basic-container v-loading="loading">
  3. <div class="btn-wrap">
  4. <el-button type="primary" icon="el-icon-edit" @click="handleSaveBtn">保存</el-button>
  5. </div>
  6. <div class="doc-page">
  7. <h3 class="page-title" style="margin: 24px 0 16px">{{ pageTitle }}</h3>
  8. <div style="display: flex; margin: 12px 0;">
  9. <year-month-select v-model="year" :showMonth="false" style="margin: 0 15px 0 0;"></year-month-select>
  10. <el-button
  11. type="primary"
  12. size="small"
  13. @click="handleReady"
  14. >
  15. 读取数据
  16. </el-button>
  17. <el-button
  18. type="warning"
  19. size="small"
  20. plain
  21. icon="el-icon-download"
  22. @click="handleExport"
  23. >
  24. 导出
  25. </el-button>
  26. </div>
  27. <table>
  28. <tbody>
  29. <tr>
  30. <td width="70%">一、本年度获得的知识产权数</td>
  31. <td>
  32. <div style="display: flex; align-items: center;">
  33. <div style="width: 100%; text-align: right;">{{ formData.d1 }}</div>
  34. <span style="padding: 0 5px;">件</span>
  35. </div>
  36. </td>
  37. </tr>
  38. <tr>
  39. <td width="70%">当年获得发明专利数</td>
  40. <td>
  41. <div style="display: flex; align-items: center;">
  42. <div style="width: 100%; text-align: right;">{{ formData.d2 }}</div>
  43. <span style="padding: 0 5px;">件</span>
  44. </div>
  45. </td>
  46. </tr>
  47. <tr>
  48. <td width="70%" style="padding-left: 30px;">其中:国防专利</td>
  49. <td>
  50. <div style="display: flex; align-items: center;">
  51. <div style="width: 100%; text-align: right;">{{ formData.d3 }}</div>
  52. <span style="padding: 0 5px;">件</span>
  53. </div>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td width="70%">当年获得植物新品种</td>
  58. <td>
  59. <div style="display: flex; align-items: center;">
  60. <div style="width: 100%; text-align: right;">{{ formData.d4 }}</div>
  61. <span style="padding: 0 5px;">件</span>
  62. </div>
  63. </td>
  64. </tr>
  65. <tr>
  66. <td width="70%">当年获得国家级农作物品种</td>
  67. <td>
  68. <div style="display: flex; align-items: center;">
  69. <div style="width: 100%; text-align: right;">{{ formData.d5 }}</div>
  70. <span style="padding: 0 5px;">件</span>
  71. </div>
  72. </td>
  73. </tr>
  74. <tr>
  75. <td width="70%">当年获得国家新药</td>
  76. <td>
  77. <div style="display: flex; align-items: center;">
  78. <div style="width: 100%; text-align: right;">{{ formData.d6 }}</div>
  79. <span style="padding: 0 5px;">件</span>
  80. </div>
  81. </td>
  82. </tr>
  83. <tr>
  84. <td width="70%">当年获得国家一级中药保护品种</td>
  85. <td>
  86. <div style="display: flex; align-items: center;">
  87. <div style="width: 100%; text-align: right;">{{ formData.d7 }}</div>
  88. <span style="padding: 0 5px;">件</span>
  89. </div>
  90. </td>
  91. </tr>
  92. <tr>
  93. <td width="70%">当年获得集成电路布图设计专有权</td>
  94. <td>
  95. <div style="display: flex; align-items: center;">
  96. <div style="width: 100%; text-align: right;">{{ formData.d8 }}</div>
  97. <span style="padding: 0 5px;">件</span>
  98. </div>
  99. </td>
  100. </tr>
  101. <tr>
  102. <td width="70%">当年获得实用新型专利</td>
  103. <td>
  104. <div style="display: flex; align-items: center;">
  105. <div style="width: 100%; text-align: right;">{{ formData.d9 }}</div>
  106. <span style="padding: 0 5px;">件</span>
  107. </div>
  108. </td>
  109. </tr>
  110. <tr>
  111. <td width="70%">当年获得外观设计专利</td>
  112. <td>
  113. <div style="display: flex; align-items: center;">
  114. <div style="width: 100%; text-align: right;">{{ formData.d10 }}</div>
  115. <span style="padding: 0 5px;">件</span>
  116. </div>
  117. </td>
  118. </tr>
  119. <tr>
  120. <td width="70%">当年获得软件著作权</td>
  121. <td>
  122. <div style="display: flex; align-items: center;">
  123. <div style="width: 100%; text-align: right;">{{ formData.d11 }}</div>
  124. <span style="padding: 0 5px;">件</span>
  125. </div>
  126. </td>
  127. </tr>
  128. <tr>
  129. <td width="70%">二、本年度人员情况</td>
  130. <td>
  131. </td>
  132. </tr>
  133. <tr>
  134. <td width="70%">职工总数</td>
  135. <td>
  136. <div style="display: flex; align-items: center;">
  137. <input type="number" v-model="formData.d13" style="width: 100%; text-align: right;" />
  138. <span style="padding: 0 5px;">人</span>
  139. </div>
  140. </td>
  141. </tr>
  142. <tr>
  143. <td width="70%">科技人员数</td>
  144. <td>
  145. <div style="display: flex; align-items: center;">
  146. <div style="width: 100%; text-align: right;">{{ formData.d14 }}</div>
  147. <span style="padding: 0 5px;">人</span>
  148. </div>
  149. </td>
  150. </tr>
  151. <tr>
  152. <td width="70%">新增就业人员数</td>
  153. <td>
  154. <div style="display: flex; align-items: center;">
  155. <input type="number" v-model="formData.d15" style="width: 100%; text-align: right;" />
  156. <span style="padding: 0 5px;">人</span>
  157. </div>
  158. </td>
  159. </tr>
  160. <tr>
  161. <td width="70%" style="padding-left: 30px;">其中:吸纳高校应届毕业生人数</td>
  162. <td>
  163. <div style="display: flex; align-items: center;">
  164. <input type="number" v-model="formData.d16" style="width: 100%; text-align: right;" />
  165. <span style="padding: 0 5px;">人</span>
  166. </div>
  167. </td>
  168. </tr>
  169. </tbody>
  170. </table>
  171. </div>
  172. </basic-container>
  173. </template>
  174. <script>
  175. import { getList, update } from "@/api/externalReports/highCompAnnualReport";
  176. import moment from "moment";
  177. import yearMonthSelect from "@/components/year-month-select";
  178. import { exportBlob } from "@/api/common";
  179. import { getToken } from "@/util/auth";
  180. import { downloadXls } from "@/util/util";
  181. import { mapGetters } from "vuex";
  182. export default {
  183. components: {
  184. yearMonthSelect,
  185. },
  186. data() {
  187. return {
  188. loading: false,
  189. isLoad: false,
  190. confirmLoading: false,
  191. year: "",
  192. formData: {},
  193. };
  194. },
  195. computed: {
  196. ...mapGetters(['tag']),
  197. pageTitle() {
  198. let yearCN = this.year ? moment(this.year).format('yyyy年') : '';
  199. return `${yearCN}${this.tag.label}`
  200. }
  201. },
  202. methods: {
  203. handleReady() {
  204. this.getData();
  205. },
  206. getData() {
  207. this.loading = true;
  208. getList({ year: this.year }).then(({ data }) => {
  209. this.loading = false;
  210. if (data.code == 200) {
  211. this.isLoad = true;
  212. this.formData = data.data;
  213. }
  214. }).catch(() => {
  215. this.loading = false;
  216. });
  217. },
  218. handleSaveBtn() {
  219. if (!this.isLoad) {
  220. this.$message.error("请读取页面数据,再保存!");
  221. return;
  222. }
  223. this.confirmLoading = true;
  224. let params = {
  225. yearAndMonth: this.year,
  226. d13: this.formData.d13,
  227. d15: this.formData.d15,
  228. d16: this.formData.d16,
  229. };
  230. update(params).then(({ data }) => {
  231. this.confirmLoading = false;
  232. if (data.code == 200) {
  233. this.$message.success('保存成功!');
  234. this.getData();
  235. }
  236. }).catch(err => {
  237. this.confirmLoading = false;
  238. });
  239. },
  240. handleExport() {
  241. this.$message.warning('功能建设中...');
  242. // exportBlob(
  243. // `/api/kd-scientific/gxjsqyyhqkjmxb/export?${
  244. // this.website.tokenHeader
  245. // }=${getToken()}`,
  246. // { year: this.year }
  247. // ).then((res) => {
  248. // downloadXls(
  249. // res.data,
  250. // `${this.pageTitle}.xlsx`
  251. // );
  252. // });
  253. },
  254. },
  255. };
  256. </script>
  257. <style lang="scss" scoped>
  258. .btn-wrap {
  259. position: fixed;
  260. right: 90px;
  261. bottom: 60px;
  262. ::v-deep .el-button {
  263. width: 86px;
  264. height: 86px;
  265. text-align: left;
  266. border-radius: 100%;
  267. font-weight: 600;
  268. box-shadow: 0 0 12px #888;
  269. box-sizing: border-box;
  270. }
  271. }
  272. .page-title {
  273. text-align: center;
  274. font-size: 24px;
  275. }
  276. .doc-page {
  277. width: 800px;
  278. margin: 30px auto;
  279. }
  280. table {
  281. width: 100%;
  282. border: 1px solid #333;
  283. }
  284. .doc-label {
  285. text-align: center;
  286. padding: 6px;
  287. color: #777;
  288. font-size: 14px;
  289. width: 15%;
  290. }
  291. .doc-input {
  292. text-align: center;
  293. color: #333;
  294. width: 35%;
  295. }
  296. .el-input__inner {
  297. border: none;
  298. }
  299. tr td {
  300. border: 1px solid #333;
  301. padding: 9px 3px;
  302. font-size: 14px;
  303. color: #666;
  304. }
  305. </style>