year-edit.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586
  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. <table class="table_register mt20" style="width: 100%;">
  174. <tr>
  175. <th colspan="4" class="th_title">研发项目情况表
  176. </th>
  177. </tr>
  178. <tr>
  179. <td colspan="4">
  180. <el-table v-loading="tableLoading" :data="list" border>
  181. <el-table-column label="项目名称" prop="projectName" align="center"></el-table-column>
  182. <el-table-column label="项目起止时间" align="center">
  183. <template slot-scope="scope">
  184. <span>{{scope.row.projectStartDate}} - {{scope.row.projectEndDate}}</span>
  185. </template>
  186. </el-table-column>
  187. <el-table-column label="研发人员数" prop="techPersons" align="center" class-name="small-padding fixed-width pd5"/>
  188. </el-table>
  189. </td>
  190. </tr>
  191. </table>
  192. <template v-if="type == 'year' || type == 'update'">
  193. <el-row :gutter="40" v-if="!disabledVisible">
  194. <el-col :span="24">
  195. <el-form-item style="width:100%;text-align: center;" label-width="0px" class="mt20">
  196. <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="submitForm" style="width: 100px;">保存</el-button>
  197. <el-button size="medium" type="primary" style="width: 100px;" @click="cancel">取消</el-button>
  198. </el-form-item>
  199. </el-col>
  200. </el-row>
  201. </template>
  202. </el-form>
  203. <audit-project v-if="auditVisible" ref="auditProject" @refreshData="getList()"></audit-project>
  204. </div>
  205. </template>
  206. <script>
  207. import { editProjectApi,getProjectInfoApi,synTechApi,draftApi,yearApi,devProjectApi,getYearDataApi,yearUpdateApi,listProjectApi,getYearApi } from "@/api/enterprise/project/project"
  208. import { techScopeOptions,yesOrNoOptions,businessIndustryOptions,booleanOptions } from "@/utils/dataFormat"
  209. import FileUpload from '@/components/FileUpload'
  210. import { listEntUserApi } from "@/api/ent/ent"
  211. import { validAmount,validNumber,validPercentage} from '@/utils/validate'
  212. import AuditProject from "./audit.vue"
  213. export default {
  214. name: "First",
  215. components: {
  216. FileUpload,
  217. AuditProject
  218. },
  219. props: {
  220. type: {
  221. type: String
  222. },
  223. info: {
  224. type: Object,
  225. default: function () {
  226. return {}
  227. }
  228. },
  229. },
  230. computed: {
  231. userType() {
  232. return this.$store.state.user.userType
  233. },
  234. tempVariable() {
  235. if(this.form.techInvest && this.form.sales) {
  236. let invest = this.form.techInvest
  237. let sales = this.form.sales
  238. return {invest, sales}
  239. }
  240. },
  241. roleTypeFlag() {
  242. let roleType = this.$store.state.user.userType
  243. return ['ENT_ADMIN_TECH', 'ENT_ADMIN_FIN', 'ENT_TECH', 'ENT_FIN'].includes(roleType) //判断是否为技术负责人,财务负责人
  244. }
  245. },
  246. data() {
  247. return {
  248. oper: this.$route.query.oper || "",
  249. auditVisible: false,
  250. year: this.$route.query.year || "",
  251. yearVisible: false,
  252. options: businessIndustryOptions,
  253. tableLoading: false,
  254. disabledVisible: false,
  255. entId: "",
  256. serviceDate: [],
  257. provinceName: "",
  258. cityName: "",
  259. districtName: "",
  260. codeUrl: "",
  261. techScopeOptions: techScopeOptions,
  262. yesOrNoOptions: yesOrNoOptions,
  263. booleanOptions: booleanOptions,
  264. provinceDataList: [],
  265. cityDataList: [],
  266. districtDataList: [],
  267. yearsOptions: [],
  268. list: [],
  269. form: {
  270. projectYear: "",
  271. techScopeArray: [],
  272. licenseTime: "",
  273. projectTime: "",
  274. id: undefined,
  275. projectOwner: 2,
  276. techStartDate: "",
  277. techEndDate: "",
  278. projectStartDate: "",
  279. projectEndDate: "",
  280. industryArray: [],
  281. industry: "",
  282. address: "",
  283. linkName: "",
  284. linkPhone: "",
  285. sales: "",
  286. techPersons: "",
  287. innovateFlag: false,
  288. totoalPersons: "",
  289. techFlag: false,
  290. techInvest: undefined,
  291. entName: "",
  292. address: "",
  293. linkMobile: ""
  294. },
  295. rules: {
  296. projectYear: [
  297. { required: true, trigger: "change", message: "请选择申办加计年度"}
  298. ],
  299. totoalPersons: [
  300. { required: true, trigger: "blur", message: "请输入职工总人数" },
  301. { validator: validNumber, trigger: 'blur'}
  302. ],
  303. sales: [
  304. { required: true, trigger: "blur", message: "请输入年度企业销售收入(万元)" },
  305. { validator: validAmount, trigger: 'blur'}
  306. ],
  307. techPersons: [
  308. { required: true, trigger: "blur", message: "请输入研发人数" },
  309. { validator: validNumber, trigger: 'blur'}
  310. ],
  311. techInvest: [
  312. { required: true, trigger: "blur", message: "请输入年度研发投入(万元)" },
  313. { validator: validAmount, trigger: 'blur'}
  314. ],
  315. // techRate: [
  316. // { required: true, trigger: "blur", message: "请输入占销售收入比例(%)" },
  317. // { validator: validPercentage, trigger: 'blur'}
  318. // ],
  319. industry: [
  320. { required: true, trigger: "blur", message: "请选择企业所属行业" }
  321. ],
  322. innovateFlag: [
  323. { required: true, trigger: "[blur,change]", message: "请选择国家自主创新示范区企业" }
  324. ],
  325. overYearFlag: [
  326. { required: true, trigger: "change", message: "请选择是否跨年" }
  327. ],
  328. smallFlag: [
  329. { required: true, trigger: "[blur,change]", message: "请选择是否科技型中小企业" }
  330. ],
  331. techFlag: [
  332. { required: true, trigger: "[blur,change]", message: "请选择是否高新技术企业" }
  333. ],
  334. // techLicense: [
  335. // { required: true, trigger: "change", message: "请上传高新企业证书" }
  336. // ],
  337. // licenseTime: [
  338. // { required: true, trigger: "change", message: "请选择证书有效期限" }
  339. // ]
  340. },
  341. loading: false,
  342. captchaOnOff: true
  343. };
  344. },
  345. mounted() {
  346. let laydate = window.laydate;
  347. laydate.render({
  348. elem: '#inputUI', // 输入框的id属性,用来绑定到dom
  349. type: 'date',
  350. range: true,
  351. done: (value) => {
  352. this.form.projectTime = value; // 将选中的值赋给组件中的变量
  353. }
  354. });
  355. },
  356. created() {
  357. this.$nextTick(() => {
  358. this.$refs.form.clearValidate()
  359. })
  360. this.form.id = this.$route.query.id || undefined;
  361. this.entId = this.$route.query.entId || undefined;
  362. this.getYears()
  363. //添加年度信息 获取企业信息
  364. //如果是财务、科技
  365. if(this.roleTypeFlag) {
  366. this.disabledVisible = true
  367. this.yearVisible = true
  368. }else {
  369. this.disabledVisible = false
  370. this.yearVisible = false
  371. }
  372. if(this.type == 'view') {
  373. this.disabledVisible = true
  374. this.yearVisible = true
  375. }
  376. //获取年度信息
  377. if(this.type == 'year') {
  378. // this.getEntData()
  379. let years= new Date().getFullYear();
  380. this.handleYear(years)
  381. }
  382. if(this.type == 'update') {
  383. this.yearVisible = true
  384. }
  385. if(this.year) {
  386. this.handleYear(this.year)
  387. }
  388. },
  389. methods: {
  390. handleAudit(type) {
  391. this.auditVisible = true
  392. this.$nextTick(() => {
  393. this.$refs.auditProject.init(row.id)
  394. })
  395. },
  396. //获取四个年度
  397. getYears(){
  398. let optionsArray = new Array();
  399. let years= new Date().getFullYear();
  400. if(this.type == 'year') {
  401. this.form.projectYear = years
  402. this.handleYear(years)
  403. }
  404. for(var i=years;i>=years-3;i--){
  405. let anOption = {};
  406. anOption.dictValue=i;
  407. anOption.dictLabel=i;
  408. optionsArray.push(anOption);
  409. }
  410. this.yearsOptions = optionsArray;
  411. },
  412. getLayDate(){
  413. let _self = this
  414. laydate.render({
  415. elem: '#licenseTime', // 输入框的id属性,用来绑定到dom
  416. type: 'date',
  417. range: true,
  418. done: (value) => {
  419. _self.form.licenseTime = value; // 将选中的值赋给组件中的变量
  420. }
  421. })
  422. },
  423. getEntData(e) {
  424. listEntUserApi().then(res => {
  425. this.form = {}
  426. if(res.code == 200) {
  427. if(e) {
  428. this.form.projectYear = e
  429. }else {
  430. this.form.projectYear = new Date().getFullYear()
  431. }
  432. let techScope = []
  433. this.$set(this.form, 'techScopeArray', techScope)
  434. this.$set(this.form, 'entName', res.data.entName)
  435. this.$set(this.form, 'linkName', res.data.linkName)
  436. this.$set(this.form, 'linkPhone', res.data.linkPhone)
  437. this.$set(this.form, 'linkMobile', res.data.linkMobile)
  438. this.$set(this.form, 'address', res.data.address)
  439. // this.form.entName = res.data.entName
  440. // this.form.linkName = res.data.linkName
  441. // this.form.linkPhone = res.data.linkPhone
  442. // this.form.linkMobile = res.data.linkMobile
  443. // this.form.address = res.data.address
  444. // this.form = res.data
  445. }
  446. })
  447. },
  448. //获取申办加计年度信息
  449. handleYear(e) {
  450. getYearApi(e).then(res => {
  451. if(res.data) {
  452. this.form = res.data
  453. this.form.fileName = '高新证书'
  454. if(this.form.techStartDate && this.form.techEndDate) {
  455. this.form.licenseTime = this.form.techStartDate + ' 至 ' + this.form.techEndDate
  456. }
  457. if(this.form.techScope) {
  458. let techScope = this.form.techScope.split(',') || []
  459. this.$set(this.form, 'techScopeArray', techScope)
  460. }
  461. if(this.form.industry) {
  462. let industryArray = this.form.industry.split(',') || [];
  463. this.$set(this.form, 'industryArray', industryArray);
  464. }
  465. }else {
  466. this.getEntData(e)
  467. }
  468. })
  469. },
  470. //根据企业id获取年度信息
  471. getYearData(projectYear) {
  472. getYearDataApi(projectYear, this.entId).then(res => {
  473. // this.form = res.data
  474. this.form = Object.assign({}, this.form, res.data)
  475. this.$set(this.form, 'projectYear', res.data.projectYear)
  476. this.form.fileName = '高新证书'
  477. if(this.form.techStartDate && this.form.techEndDate) {
  478. this.form.licenseTime = this.form.techStartDate + ' 至 ' + this.form.techEndDate
  479. }
  480. if(this.form.techScope) {
  481. let techScope = this.form.techScope.split(',') || []
  482. this.$set(this.form, 'techScopeArray', techScope)
  483. }
  484. if(this.form.industry) {
  485. let industryArray = this.form.industry.split(',') || [];
  486. this.$set(this.form, 'industryArray', industryArray);
  487. }
  488. })
  489. },
  490. getList(year) {
  491. this.tableLoading = true;
  492. let params = {
  493. year: year,
  494. entId: this.entId
  495. }
  496. listProjectApi(params).then(response => {
  497. this.list = response.data.records;
  498. this.total = response.data.total;
  499. this.tableLoading = false;
  500. });
  501. },
  502. handleSuccess(file) {
  503. this.$refs.techLicenseUpload.clearValidate()
  504. this.form.techLicense = file.url;
  505. this.form.fileName = file.name;
  506. },
  507. cancel() {
  508. this.$store.dispatch("tagsView/delView", this.$route); // 关闭当前tab
  509. this.$router.go(-1);
  510. },
  511. submitForm() {
  512. this.$refs.form.validate(valid => {
  513. if(valid) {
  514. this.loading = true
  515. if(this.form.techScopeArray && this.form.techScopeArray.length > 0) {
  516. this.form.techScope = this.form.techScopeArray.join(',')
  517. }
  518. this.form.industry = this.form.industryArray.join(',')
  519. if(this.form.projectTime) {
  520. this.form.projectStartDate = this.form.projectTime.split('至')[0].trim()
  521. this.form.projectEndDate = this.form.projectTime.split('至')[1].trim()
  522. }else {
  523. this.form.projectStartDate = ""
  524. this.form.projectEndDate = ""
  525. }
  526. if(this.form.licenseTime) {
  527. this.form.techStartDate = this.form.licenseTime.split('至')[0].trim()
  528. this.form.techEndDate = this.form.licenseTime.split('至')[1].trim()
  529. }else{
  530. this.form.techStartDate = ""
  531. this.form.techEndDate = ""
  532. }
  533. if(this.type == 'year') {
  534. yearApi(this.form).then(res => {
  535. this.$alert('企业加计年度企业基本信息保存成功', '提示', {
  536. confirmButtonText: '确定',
  537. callback: action => {
  538. this.loading = false
  539. // this.$store.dispatch("tagsView/delView", this.$route);
  540. this.$router.go(-1);
  541. }
  542. })
  543. })
  544. } else {
  545. yearUpdateApi(this.form).then(res => {
  546. this.$alert('企业加计年度企业基本信息保存成功', '提示', {
  547. confirmButtonText: '确定',
  548. callback: action => {
  549. this.loading = false
  550. // this.$store.dispatch("tagsView/delView", this.$route);
  551. this.$router.go(-1);
  552. }
  553. })
  554. })
  555. }
  556. }
  557. })
  558. }
  559. },
  560. watch: {
  561. 'tempVariable'(val) {
  562. if(val) {
  563. if(val.invest && val.sales) {
  564. this.form.techRate = ((val.invest / val.sales)*100).toFixed(2)
  565. }
  566. }
  567. },
  568. info: {
  569. immediate: true,
  570. handler (obj) {
  571. if(obj.projectYear) {
  572. this.getYearData(obj.projectYear)
  573. this.getList(obj.projectYear)
  574. }
  575. }
  576. }
  577. }
  578. };
  579. </script>