year-edit.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513
  1. <template>
  2. <div class="app-container" v-loading="loading">
  3. <el-form ref="form" :model="form" :rules="rules" label-width="180px">
  4. <table class="table_register" style="width: 100%;">
  5. <tr>
  6. <th colspan="4" class="th_title">年度基本信息(<b style="color: red;">年度销售收入、研发投入、职工总人数、研发人员请填写正整数,占销售收入比例为系统自动算出</b>)</th>
  7. </tr>
  8. <tr>
  9. <th>企业名称</th>
  10. <td>
  11. <el-form-item prop="entName" label-width="0">
  12. <el-input v-model="form.entName" type="text" placeholder="请输入企业名称" :disabled="disabledVisible"></el-input>
  13. </el-form-item>
  14. </td>
  15. <th><span style="color: red;">*</span>申办加计年度</th>
  16. <td>
  17. <el-form-item prop="projectYear" label-width="0">
  18. <el-select v-model="form.projectYear" filterable :disabled="yearVisible" @change="handleYear">
  19. <el-option v-for="(item, index) in yearsOptions" :key="index" :value="item.dictValue" :label="item.dictLabel"></el-option>
  20. </el-select>
  21. </el-form-item>
  22. </td>
  23. </tr>
  24. <tr>
  25. <th>通信地址</th>
  26. <td colspan="3">
  27. <el-form-item prop="address" label-width="0">
  28. <el-input v-model="form.address" placeholder="请输入通讯地址" :disabled="disabledVisible"></el-input>
  29. </el-form-item>
  30. </td>
  31. </tr>
  32. <tr>
  33. <th>企业联系人</th>
  34. <td>
  35. <el-form-item prop="linkName" label-width="0">
  36. <el-input v-model="form.linkName" placeholder="请输入企业联系人" :disabled="disabledVisible"></el-input>
  37. </el-form-item>
  38. </td>
  39. <th>联系电话(座机)</th>
  40. <td>
  41. <el-form-item prop="linkPhone" label-width="0">
  42. <el-input v-model="form.linkPhone" type="text" auto-complete="off" placeholder="请输入联系电话(座机)" :disabled="disabledVisible">
  43. </el-input>
  44. </el-form-item>
  45. </td>
  46. </tr>
  47. <tr>
  48. <th>联系电话(手机)</th>
  49. <td>
  50. <el-form-item prop="linkMobile" label-width="0">
  51. <el-input v-model="form.linkMobile" type="text" auto-complete="off" placeholder="请输入联系电话(手机)" :disabled="disabledVisible">
  52. </el-input>
  53. </el-form-item>
  54. </td>
  55. <th><span style="color: red;">*</span>职工总人数(人)</th>
  56. <td>
  57. <el-form-item prop="totoalPersons" label-width="0">
  58. <el-input v-model="form.totoalPersons" type="text" auto-complete="off" placeholder="请输入职工总人数" :disabled="disabledVisible">
  59. </el-input>
  60. </el-form-item>
  61. </td>
  62. </tr>
  63. <tr>
  64. <th><span style="color: red;">*</span>年度企业销售收入(万元)</th>
  65. <td>
  66. <el-form-item prop="sales" label-width="0">
  67. <el-input v-model="form.sales" type="text" auto-complete="off" placeholder="请输入年度企业销售收入(万元)" :disabled="disabledVisible">
  68. </el-input>
  69. </el-form-item>
  70. </td>
  71. <th><span style="color: red;">*</span>研发人数(人)</th>
  72. <td>
  73. <el-form-item prop="techPersons" label-width="0">
  74. <el-input v-model="form.techPersons" type="text" auto-complete="off" placeholder="请输入研发人数" :disabled="disabledVisible">
  75. </el-input>
  76. </el-form-item>
  77. </td>
  78. </tr>
  79. <tr>
  80. <th><span style="color: red;">*</span>年度研发投入(万元)</th>
  81. <td>
  82. <el-form-item prop="techInvest" label-width="0">
  83. <el-input v-model="form.techInvest" type="text" auto-complete="off" placeholder="请输入年度研发投入(万元)" :disabled="disabledVisible">
  84. </el-input>
  85. </el-form-item>
  86. </td>
  87. <th>占销售收入比例(%)</th>
  88. <td>
  89. <el-form-item prop="techRate" label-width="0">
  90. <el-input v-model="form.techRate" type="text" auto-complete="off" placeholder="请输入占销售收入比例(%)" disabled>
  91. </el-input>
  92. </el-form-item>
  93. </td>
  94. </tr>
  95. <tr>
  96. <th><span style="color: red;">*</span>企业所属行业</th>
  97. <td>
  98. <el-form-item prop="industryArray" label-width="0">
  99. <el-cascader
  100. v-model="form.industryArray"
  101. :options="options"
  102. :disabled="disabledVisible"></el-cascader>
  103. </el-form-item>
  104. </td>
  105. <th><span style="color: red;">*</span>国家自主创新示范区企业</th>
  106. <td>
  107. <el-form-item prop="innovateFlag" label-width="0">
  108. <el-radio-group v-model="form.innovateFlag" :disabled="disabledVisible">
  109. <el-radio v-for="(item, index) in booleanOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
  110. </el-radio-group>
  111. </el-form-item>
  112. </td>
  113. </tr>
  114. </table>
  115. <table class="table_register mt20" style="width: 100%;">
  116. <tr>
  117. <th colspan="4" class="th_title">科技型中小企业信息</th>
  118. </tr>
  119. <tr>
  120. <th><span style="color: red;">*</span>是否科技型中小企业</th>
  121. <td>
  122. <el-form-item prop="smallFlag" label-width="0">
  123. <el-radio-group v-model="form.smallFlag" :disabled="disabledVisible">
  124. <el-radio v-for="(item, index) in booleanOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
  125. </el-radio-group>
  126. </el-form-item>
  127. </td>
  128. </tr>
  129. </table>
  130. <table class="table_register mt20" style="width: 100%;">
  131. <tr>
  132. <th colspan="4" class="th_title">高新技术企业信息</th>
  133. </tr>
  134. <tr>
  135. <th><span style="color: red;">*</span>是否高新技术企业</th>
  136. <td>
  137. <el-form-item prop="techFlag" label-width="0">
  138. <el-radio-group v-model="form.techFlag" :disabled="disabledVisible">
  139. <el-radio v-for="(item, index) in booleanOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
  140. </el-radio-group>
  141. </el-form-item>
  142. </td>
  143. </tr>
  144. <template v-if="form.techFlag == 1">
  145. <tr>
  146. <th><span style="color: red;">*</span>高新技术企业所属技术领域</th>
  147. <td colspan="3">
  148. <el-form-item prop="techScopeArray" label-width="0">
  149. <el-checkbox-group v-model="form.techScopeArray" :disabled="disabledVisible">
  150. <el-checkbox v-for="(item, index) in techScopeOptions" :label="item.dictLabel" :key="index">{{item.dictLabel}}</el-checkbox>
  151. </el-checkbox-group>
  152. </el-form-item>
  153. </td>
  154. </tr>
  155. <tr>
  156. <th><span style="color: red;">*</span>证书有效期限</th>
  157. <td>
  158. <el-form-item prop="licenseTime" label-width="0">
  159. <el-input @focus="getLayDate" id="licenseTime" v-model="form.licenseTime" clearable></el-input>
  160. </el-form-item>
  161. </td>
  162. </tr>
  163. <tr>
  164. <th><span style="color: red;">*</span>高新证书</th>
  165. <td colspan="3">
  166. <el-form-item prop="techLicense" ref="techLicenseUpload" label-width="0">
  167. <FileUpload :file="{url: form.techLicense, name: form.fileName}" @input="handleSuccess" :disabledVisible="disabledVisible">上传证书</FileUpload>
  168. </el-form-item>
  169. </td>
  170. </tr>
  171. </template>
  172. </table>
  173. <h3 class="toolbar">
  174. <span class="title">研发项目情况表</span>
  175. </h3>
  176. <el-table v-loading="tableLoading" :data="list" border>
  177. <el-table-column label="项目名称" prop="projectName"></el-table-column>
  178. <el-table-column label="项目起止时间" align="center">
  179. <template slot-scope="scope">
  180. <span>{{scope.row.projectStartDate}} - {{scope.row.projectEndDate}}</span>
  181. </template>
  182. </el-table-column>
  183. <el-table-column label="研发人员数" prop="projectName" align="center"/>
  184. </el-table>
  185. <template v-if="type == 'year' || type == 'update'">
  186. <el-row :gutter="40" v-if="!disabledVisible">
  187. <el-col :span="24">
  188. <el-form-item style="width:100%;text-align: center;" label-width="0px" class="mt20">
  189. <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="submitForm" style="width: 100px;">保存</el-button>
  190. <el-button size="medium" type="primary" style="width: 100px;" @click="cancel">取消</el-button>
  191. </el-form-item>
  192. </el-col>
  193. </el-row>
  194. </template>
  195. </el-form>
  196. </div>
  197. </template>
  198. <script>
  199. import { editProjectApi,getProjectInfoApi,synTechApi,draftApi,yearApi,devProjectApi,getYearDataApi,yearUpdateApi,listProjectApi,getYearApi } from "@/api/enterprise/project/project"
  200. import { techScopeOptions,yesOrNoOptions,businessIndustryOptions,booleanOptions } from "@/utils/dataFormat"
  201. import FileUpload from '@/components/FileUpload'
  202. import { listEntUserApi } from "@/api/ent/ent"
  203. import { validAmount,validNumber,validPercentage} from '@/utils/validate'
  204. export default {
  205. name: "First",
  206. components: {
  207. FileUpload
  208. },
  209. props: {
  210. type: {
  211. type: String
  212. },
  213. info: {
  214. type: Object,
  215. default: function () {
  216. return {}
  217. }
  218. },
  219. },
  220. computed: {
  221. userType() {
  222. return this.$store.state.user.userType
  223. },
  224. tempVariable() {
  225. if(this.form.techInvest && this.form.sales) {
  226. let invest = this.form.techInvest
  227. let sales = this.form.sales
  228. return {invest, sales}
  229. }
  230. },
  231. roleTypeFlag() {
  232. let roleType = this.$store.state.user.userType
  233. return ['ENT_ADMIN_TECH', 'ENT_ADMIN_FIN', 'ENT_TECH', 'ENT_FIN'].includes(roleType) //判断是否为技术负责人,财务负责人
  234. }
  235. },
  236. data() {
  237. return {
  238. yearVisible: false,
  239. options: businessIndustryOptions,
  240. tableLoading: false,
  241. disabledVisible: false,
  242. entId: "",
  243. serviceDate: [],
  244. provinceName: "",
  245. cityName: "",
  246. districtName: "",
  247. codeUrl: "",
  248. techScopeOptions: techScopeOptions,
  249. yesOrNoOptions: yesOrNoOptions,
  250. booleanOptions: booleanOptions,
  251. provinceDataList: [],
  252. cityDataList: [],
  253. districtDataList: [],
  254. yearsOptions: [],
  255. list: [],
  256. form: {
  257. projectYear: "",
  258. techScopeArray: [],
  259. licenseTime: "",
  260. projectTime: "",
  261. id: undefined,
  262. projectOwner: 2,
  263. techStartDate: "",
  264. techEndDate: "",
  265. projectStartDate: "",
  266. projectEndDate: "",
  267. industryArray: [],
  268. industry: "",
  269. entName: "",
  270. address: "",
  271. linkName: "",
  272. linkPhone: "",
  273. sales: "",
  274. techPersons: "",
  275. innovateFlag: false,
  276. totoalPersons: "",
  277. techFlag: false,
  278. techInvest: undefined
  279. },
  280. rules: {
  281. totoalPersons: [
  282. { required: true, trigger: "blur", message: "请输入职工总人数" },
  283. { validator: validNumber, trigger: 'blur'}
  284. ],
  285. sales: [
  286. { required: true, trigger: "blur", message: "请输入年度企业销售收入(万元)" },
  287. { validator: validAmount, trigger: 'blur'}
  288. ],
  289. techPersons: [
  290. { required: true, trigger: "blur", message: "请输入研发人数" },
  291. { validator: validNumber, trigger: 'blur'}
  292. ],
  293. techInvest: [
  294. { required: true, trigger: "blur", message: "请输入年度研发投入(万元)" },
  295. { validator: validAmount, trigger: 'blur'}
  296. ],
  297. techRate: [
  298. { required: true, trigger: "blur", message: "请输入占销售收入比例(%)" },
  299. { validator: validPercentage, trigger: 'blur'}
  300. ],
  301. industry: [
  302. { required: true, trigger: "blur", message: "请选择企业所属行业" }
  303. ],
  304. innovateFlag: [
  305. { required: true, trigger: "[blur,change]", message: "请选择国家自主创新示范区企业" }
  306. ],
  307. overYearFlag: [
  308. { required: true, trigger: "change", message: "请选择是否跨年" }
  309. ],
  310. smallFlag: [
  311. { required: true, trigger: "[blur,change]", message: "请选择是否科技型中小企业" }
  312. ],
  313. techFlag: [
  314. { required: true, trigger: "[blur,change]", message: "请选择是否高新技术企业" }
  315. ],
  316. // techLicense: [
  317. // { required: true, trigger: "change", message: "请上传高新企业证书" }
  318. // ],
  319. // licenseTime: [
  320. // { required: true, trigger: "change", message: "请选择证书有效期限" }
  321. // ]
  322. },
  323. loading: false,
  324. captchaOnOff: true
  325. };
  326. },
  327. mounted() {
  328. let laydate = window.laydate;
  329. laydate.render({
  330. elem: '#inputUI', // 输入框的id属性,用来绑定到dom
  331. type: 'date',
  332. range: true,
  333. done: (value) => {
  334. this.form.projectTime = value; // 将选中的值赋给组件中的变量
  335. }
  336. });
  337. },
  338. created() {
  339. this.$nextTick(() => {
  340. this.$refs.form.clearValidate()
  341. })
  342. this.form.id = this.$route.query.id || undefined;
  343. this.entId = this.$route.query.entId || undefined;
  344. this.getYears()
  345. //添加年度信息 获取企业信息
  346. //如果是财务、科技
  347. if(this.roleTypeFlag) {
  348. this.disabledVisible = true
  349. this.yearVisible = true
  350. }else {
  351. this.disabledVisible = false
  352. this.yearVisible = false
  353. }
  354. if(this.type == 'view') {
  355. this.disabledVisible = true
  356. this.yearVisible = true
  357. }
  358. if(this.type == 'year') {
  359. this.getEntData()
  360. }
  361. if(this.type == 'update') {
  362. this.yearVisible = true
  363. }
  364. },
  365. methods: {
  366. getYears(){
  367. let optionsArray = new Array();
  368. let years= new Date().getFullYear();
  369. for(var i=years-3;i<=years;i++){
  370. let anOption = {};
  371. anOption.dictValue=i;
  372. anOption.dictLabel=i;
  373. optionsArray.push(anOption);
  374. }
  375. this.yearsOptions = optionsArray;
  376. },
  377. getLayDate(){
  378. let _self = this
  379. laydate.render({
  380. elem: '#licenseTime', // 输入框的id属性,用来绑定到dom
  381. type: 'date',
  382. range: true,
  383. done: (value) => {
  384. _self.form.licenseTime = value; // 将选中的值赋给组件中的变量
  385. }
  386. })
  387. },
  388. getEntData() {
  389. listEntUserApi().then(res => {
  390. if(res.code == 200) {
  391. this.form.entName = res.data.entName
  392. this.form.linkName = res.data.linkName
  393. this.form.linkPhone = res.data.linkPhone
  394. this.form.linkMobile = res.data.linkMobile
  395. this.form.techFlag = res.data.techFlag
  396. this.form.address = res.data.address
  397. }
  398. })
  399. },
  400. getYearData(projectYear) {
  401. getYearDataApi(projectYear, this.entId).then(res => {
  402. this.form = res.data
  403. this.form.fileName = '高新证书'
  404. if(this.form.techScope) {
  405. let techScope = this.form.techScope.split(',') || []
  406. this.$set(this.form, 'techScopeArray', techScope)
  407. }
  408. if(this.form.industry) {
  409. let industryArray = this.form.industry.split(',') || [];
  410. this.$set(this.form, 'industryArray', industryArray);
  411. }
  412. })
  413. },
  414. handleYear(e) {
  415. getYearApi(e).then(res => {
  416. if(res.data) {
  417. this.form = res.data
  418. this.form.fileName = '高新证书'
  419. if(this.form.techScope) {
  420. let techScope = this.form.techScope.split(',') || []
  421. this.$set(this.form, 'techScopeArray', techScope)
  422. }
  423. if(this.form.industry) {
  424. let industryArray = this.form.industry.split(',') || [];
  425. this.$set(this.form, 'industryArray', industryArray);
  426. }
  427. }
  428. })
  429. },
  430. getList(year) {
  431. this.tableLoading = true;
  432. let params = {
  433. year: year,
  434. entId: this.entId
  435. }
  436. listProjectApi(params).then(response => {
  437. this.list = response.data.records;
  438. this.total = response.data.total;
  439. this.tableLoading = false;
  440. });
  441. },
  442. handleSuccess(file) {
  443. this.$refs.techLicenseUpload.clearValidate()
  444. this.form.techLicense = file.url;
  445. this.form.fileName = file.name;
  446. },
  447. cancel() {
  448. this.$store.dispatch("tagsView/delView", this.$route); // 关闭当前tab
  449. this.$router.go(-1);
  450. },
  451. submitForm() {
  452. this.$refs.form.validate(valid => {
  453. if(valid) {
  454. this.loading = true
  455. if(this.form.techScopeArray && this.form.techScopeArray.length > 0) {
  456. this.form.techScope = this.form.techScopeArray.join(',')
  457. }
  458. this.form.industry = this.form.industryArray.join(',')
  459. if(this.form.projectTime) {
  460. this.form.projectStartDate = this.form.projectTime.split('至')[0].trim()
  461. this.form.projectEndDate = this.form.projectTime.split('至')[1].trim()
  462. }else {
  463. this.form.projectStartDate = ""
  464. this.form.projectEndDate = ""
  465. }
  466. if(this.form.licenseTime) {
  467. this.form.techStartDate = this.form.licenseTime.split('至')[0].trim()
  468. this.form.techEndDate = this.form.licenseTime.split('至')[1].trim()
  469. }else{
  470. this.form.techStartDate = ""
  471. this.form.techEndDate = ""
  472. }
  473. if(this.type == 'year') {
  474. yearApi(this.form).then(res => {
  475. this.loading = false
  476. this.$store.dispatch("tagsView/delView", this.$route);
  477. this.$router.go(-1);
  478. })
  479. } else {
  480. yearUpdateApi(this.form).then(res => {
  481. this.loading = false
  482. this.$store.dispatch("tagsView/delView", this.$route);
  483. this.$router.go(-1);
  484. })
  485. }
  486. }
  487. })
  488. }
  489. },
  490. watch: {
  491. 'tempVariable'(val) {
  492. if(val.invest && val.sales) {
  493. this.form.techRate = ((val.invest / val.sales)*100).toFixed(2)
  494. }
  495. },
  496. info: {
  497. immediate: true,
  498. handler (obj) {
  499. if(obj.projectYear) {
  500. this.getYearData(obj.projectYear)
  501. this.getList(obj.projectYear)
  502. }
  503. }
  504. },
  505. }
  506. };
  507. </script>