TechBasic.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  1. <template>
  2. <div class="app-container" v-loading="loading">
  3. <el-form ref="form" :model="form" :rules="rules" label-width="180px">
  4. <h3 class="toolbar">
  5. <span class="title">项目基本信息</span>
  6. </h3>
  7. <el-row :gutter="40">
  8. <el-col :span="12">
  9. <el-form-item label="项目名称" prop="projectName">
  10. <el-input v-model="form.projectName" type="text" placeholder="请输入项目名称" :disabled="disabledVisible"></el-input>
  11. </el-form-item>
  12. </el-col>
  13. <el-col :span="12">
  14. <el-form-item label="企业名称" prop="entName">
  15. <el-input v-model="form.entName" type="text" placeholder="请输入企业名称" disabled></el-input>
  16. </el-form-item>
  17. </el-col>
  18. <el-col :span="12">
  19. <el-form-item label="通讯地址" prop="address">
  20. <el-input v-model="form.address" placeholder="请输入通讯地址" :disabled="disabledVisible"></el-input>
  21. </el-form-item>
  22. </el-col>
  23. <el-col :span="12">
  24. <el-form-item label="企业联系人" prop="linkName">
  25. <el-input v-model="form.linkName" placeholder="请输入企业联系人" :disabled="disabledVisible"></el-input>
  26. </el-form-item>
  27. </el-col>
  28. <el-col :span="12">
  29. <el-form-item label="联系电话(座机)" prop="linkPhone">
  30. <el-input v-model="form.linkPhone" type="text" auto-complete="off" placeholder="请输入联系电话(座机)" :disabled="disabledVisible">
  31. </el-input>
  32. </el-form-item>
  33. </el-col>
  34. <el-col :span="12">
  35. <el-form-item label="联系电话(手机)" prop="linkMobile">
  36. <el-input v-model="form.linkMobile" type="text" auto-complete="off" placeholder="请输入联系电话(手机)" :disabled="disabledVisible">
  37. </el-input>
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="12">
  41. <el-form-item label="职工总人数(人)" prop="totoalPersons">
  42. <el-input v-model="form.totoalPersons" type="text" auto-complete="off" placeholder="请输入职工总人数" :disabled="disabledVisible">
  43. </el-input>
  44. </el-form-item>
  45. </el-col>
  46. <el-col :span="12">
  47. <el-form-item label="年度企业销售收入(万元)" prop="sales">
  48. <el-input v-model="form.sales" type="text" auto-complete="off" placeholder="请输入年度企业销售收入(万元)" :disabled="disabledVisible">
  49. <template slot="append">万元</template>
  50. </el-input>
  51. </el-form-item>
  52. </el-col>
  53. <el-col :span="12">
  54. <el-form-item label="研发人数" prop="techPersons">
  55. <el-input v-model="form.techPersons" type="text" auto-complete="off" placeholder="请输入研发人数" :disabled="disabledVisible">
  56. </el-input>
  57. </el-form-item>
  58. </el-col>
  59. <el-col :span="12">
  60. <el-form-item label="年度研发投入(万元)" prop="techInvest">
  61. <el-input v-model="form.techInvest" type="text" auto-complete="off" placeholder="请输入年度研发投入(万元)" :disabled="disabledVisible">
  62. <template slot="append">万元</template>
  63. </el-input>
  64. </el-form-item>
  65. </el-col>
  66. <el-col :span="12">
  67. <el-form-item label="占销售收入比例(%)" prop="techRate">
  68. <el-input v-model="form.techRate" type="text" auto-complete="off" placeholder="请输入占销售收入比例(%)" disabled>
  69. </el-input>
  70. </el-form-item>
  71. </el-col>
  72. <el-col :span="12">
  73. <el-form-item label="企业所属行业" prop="industryArray">
  74. <el-cascader
  75. v-model="form.industryArray"
  76. :options="options"
  77. :disabled="disabledVisible" style="width: 310px;"></el-cascader>
  78. </el-form-item>
  79. </el-col>
  80. <el-col :span="12">
  81. <el-form-item label="国家自主创新示范区企业" prop="innovateFlag">
  82. <el-radio-group v-model="form.innovateFlag" :disabled="disabledVisible">
  83. <el-radio v-for="(item, index) in yesOrNoOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
  84. </el-radio-group>
  85. </el-form-item>
  86. </el-col>
  87. </el-row>
  88. <h3 class="toolbar">
  89. <span class="title">项目是否跨年</span>
  90. </h3>
  91. <el-row :gutter="40">
  92. <el-col :span="12">
  93. <el-form-item label="是否跨年" prop="overYearFlag">
  94. <el-radio-group v-model="form.overYearFlag" :disabled="disabledVisible">
  95. <el-radio v-for="(item, index) in yesOrNoOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
  96. </el-radio-group>
  97. </el-form-item>
  98. </el-col>
  99. <el-col :span="12">
  100. <el-form-item label="项目时间段" prop="projectTime">
  101. <el-date-picker v-model="form.projectTime" placeholder="选择日期" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="disabledVisible"></el-date-picker>
  102. </el-form-item>
  103. </el-col>
  104. </el-row>
  105. <h3 class="toolbar">
  106. <span class="title">科技型中小企业信息</span>
  107. </h3>
  108. <el-row :gutter="40">
  109. <el-col :span="12">
  110. <el-form-item label="是否科技型中小企业" prop="smallFlag">
  111. <el-radio-group v-model="form.smallFlag" :disabled="disabledVisible">
  112. <el-radio v-for="(item, index) in yesOrNoOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
  113. </el-radio-group>
  114. </el-form-item>
  115. </el-col>
  116. </el-row>
  117. <h3 class="toolbar">
  118. <span class="title">高新技术企业信息</span>
  119. </h3>
  120. <el-row :gutter="40">
  121. <el-col :span="12">
  122. <el-form-item label="是否高新技术企业" prop="techFlag">
  123. <el-radio-group v-model="form.techFlag" :disabled="disabledVisible">
  124. <el-radio v-for="(item, index) in yesOrNoOptions" :key="index" :label="item.dictValue">{{item.dictLabel}}</el-radio>
  125. </el-radio-group>
  126. </el-form-item>
  127. </el-col>
  128. <template v-if="form.techFlag == 1">
  129. <el-col :span="24">
  130. <el-form-item label="高新技术企业所属技术领域" prop="techScopeArray">
  131. <el-checkbox-group v-model="form.techScopeArray" :disabled="disabledVisible">
  132. <el-checkbox v-for="(item, index) in techScopeOptions" :label="item.dictLabel" :key="index">{{item.dictLabel}}</el-checkbox>
  133. </el-checkbox-group>
  134. </el-form-item>
  135. </el-col>
  136. <el-col :span="24">
  137. <el-form-item label="证书有效期限" prop="lisenceTime">
  138. <el-date-picker v-model="form.lisenceTime" placeholder="选择日期" type="daterange" value-format="yyyy-MM" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled="disabledVisible"></el-date-picker>
  139. </el-form-item>
  140. </el-col>
  141. <el-col :span="24">
  142. <el-form-item label="高新证书" prop="techLicense" ref="techLicenseUpload">
  143. <FileUpload :file="{url: form.techLicense, name: form.fileName}" @input="handleSuccess" :disabledVisible="disabledVisible">上传证书</FileUpload>
  144. </el-form-item>
  145. </el-col>
  146. </template>
  147. </el-row>
  148. <template v-if="userType == 'ENT_TECH' || userType == 'ENT_ADMIN_TECH'">
  149. <el-row :gutter="40">
  150. <el-col :span="24">
  151. <el-form-item style="width:100%;text-align: center;" label-width="0px">
  152. <el-button @click="synSubmit" size="medium" type="primary">同步企业填报</el-button>
  153. <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="submitForm" style="width: 100px;">技术保存</el-button>
  154. <el-button size="medium" type="primary" style="width: 100px;" @click="cancel">取消</el-button>
  155. <el-button size="medium" type="primary" @click="submitDraft">保存草稿</el-button>
  156. </el-form-item>
  157. </el-col>
  158. </el-row>
  159. </template>
  160. </el-form>
  161. </div>
  162. </template>
  163. <script>
  164. import { editProjectApi,getProjectInfoApi,synTechApi,draftApi } from "@/api/enterprise/project/project"
  165. import { techScopeOptions,yesOrNoOptions,businessIndustryOptions } from "@/utils/dataFormat"
  166. import FileUpload from '@/components/FileUpload'
  167. import { listEntUserApi } from "@/api/ent/ent"
  168. import { validAmount,validNumber,validPercentage} from '@/utils/validate'
  169. export default {
  170. name: "First",
  171. components: {
  172. FileUpload
  173. },
  174. computed: {
  175. userType() {
  176. return this.$store.state.user.userType
  177. },
  178. tempVariable() {
  179. let invest = this.form.techInvest
  180. let sales = this.form.sales
  181. return {invest, sales}
  182. }
  183. },
  184. data() {
  185. return {
  186. options: businessIndustryOptions,
  187. disabledVisible: false,
  188. adminId: undefined,
  189. techId: undefined,
  190. finId: undefined,
  191. serviceDate: [],
  192. provinceName: '',
  193. cityName: '',
  194. districtName: '',
  195. codeUrl: "",
  196. techScopeOptions: techScopeOptions,
  197. yesOrNoOptions: yesOrNoOptions,
  198. provinceDataList: [],
  199. cityDataList: [],
  200. districtDataList: [],
  201. form: {
  202. techScopeArray: ['电子信息'],
  203. lisenceTime: [],
  204. projectTime: [],
  205. id: undefined,
  206. entId: undefined,
  207. projectOwner: 2,
  208. techStartDate: '',
  209. techEndDate: '',
  210. projectStartDate: '',
  211. projectEndDate: '',
  212. industryArray: [],
  213. industry: ''
  214. },
  215. rules: {
  216. userName: [
  217. { required: true, trigger: "blur", message: "请输入您的账号" },
  218. { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
  219. ],
  220. password: [
  221. { required: true, trigger: "blur", message: "请输入您的密码" },
  222. { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
  223. ],
  224. address: [
  225. { required: true, trigger: "blur", message: "请输入通讯地址" },
  226. { max: 100, message: '不超过100字符', trigger: 'blur' }
  227. ],
  228. linkName: [
  229. { required: true, trigger: "blur", message: "请输入企业联系人" },
  230. { max: 100, message: '不超过100字符', trigger: 'blur' }
  231. ],
  232. linkPhone: [
  233. { required: true, trigger: "blur", message: "请输入联系电话(座机)" },
  234. // { max: 11, message: '请输入正确的电话格式', trigger: 'blur' }
  235. ],
  236. linkMobile: [
  237. { required: true, trigger: "blur", message: "请输入手机号" },
  238. {
  239. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  240. message: "请输入正确的手机号码",
  241. trigger: "blur"
  242. }
  243. ],
  244. totoalPersons: [
  245. { required: true, trigger: "blur", message: "请输入职工总人数" },
  246. { validator: validNumber, trigger: 'blur'}
  247. ],
  248. sales: [
  249. { required: true, trigger: "blur", message: "请输入年度企业销售收入(万元)" },
  250. { validator: validAmount, trigger: 'blur'}
  251. ],
  252. techPersons: [
  253. { required: true, trigger: "blur", message: "请输入研发人数" },
  254. { validator: validNumber, trigger: 'blur'}
  255. ],
  256. techInvest: [
  257. { required: true, trigger: "blur", message: "请输入年度研发投入(万元)" },
  258. { validator: validAmount, trigger: 'blur'}
  259. ],
  260. techRate: [
  261. { required: true, trigger: "blur", message: "请输入占销售收入比例(%)" },
  262. { validator: validPercentage, trigger: 'blur'}
  263. ],
  264. industry: [
  265. { required: true, trigger: "blur", message: "请选择企业所属行业" }
  266. ],
  267. innovateFlag: [
  268. { required: true, trigger: "[blur,change]", message: "请选择国家自主创新示范区企业" }
  269. ],
  270. overYearFlag: [
  271. { required: true, trigger: "change", message: "请选择是否跨年" }
  272. ],
  273. smallFlag: [
  274. { required: true, trigger: "[blur,change]", message: "请选择是否科技型中小企业" }
  275. ],
  276. techFlag: [
  277. { required: true, trigger: "[blur,change]", message: "请选择是否高新技术企业" }
  278. ],
  279. techLicense: [
  280. { required: true, trigger: "change", message: "请上传高新企业证书" }
  281. ],
  282. lisenceTime: [
  283. { required: true, trigger: "change", message: "请选择证书有效期限" }
  284. ]
  285. },
  286. loading: false,
  287. captchaOnOff: true
  288. };
  289. },
  290. created() {
  291. this.$nextTick(() => {
  292. this.$refs.form.clearValidate()
  293. })
  294. this.form.id = this.$route.query.id || undefined;
  295. this.form.entId = this.$route.query.entId || undefined;
  296. if(this.userType == 'ENT_TECH' || this.userType == 'ENT_ADMIN_TECH') {
  297. this.disabledVisible = false
  298. }else {
  299. this.disabledVisible = true
  300. }
  301. if(this.form.id) {
  302. this.getData().then(res => {
  303. this.getEntData()
  304. })
  305. }
  306. },
  307. methods: {
  308. synSubmit() {
  309. this.loading = true
  310. synTechApi(this.adminId).then(res => {
  311. this.loading = false
  312. if(res.code == 200) {
  313. this.$message.success('已同步完成');
  314. this.getData()
  315. }
  316. })
  317. },
  318. async getEntData() {
  319. listEntUserApi().then(res => {
  320. if(!this.form.entName) {
  321. this.form.entName = res.data.entName
  322. }
  323. if(!this.form.linkName) {
  324. this.form.linkName = res.data.linkName
  325. }
  326. if(!this.form.linkPhone) {
  327. this.form.linkPhone = res.data.linkPhone
  328. }
  329. if(!this.form.linkMobile) {
  330. this.form.linkMobile = res.data.linkMobile
  331. }
  332. if(!this.form.techFlag) {
  333. this.form.techFlag = res.data.techFlag
  334. }
  335. })
  336. },
  337. async getData() {
  338. getProjectInfoApi(this.form.id).then(res => {
  339. let obj = res.data.techProject || {}
  340. this.form = obj || {}
  341. this.adminId = res.data.entProject.id
  342. this.form.fileName = '高新证书'
  343. let arr = ['电子信息']
  344. this.$set(this.form, 'techScopeArray', arr)
  345. if(obj.techScope) {
  346. this.form.techScopeArray = obj.techScope.split(',') || ['电子信息']
  347. }
  348. if(this.form.industry) {
  349. let industryArray = this.form.industry.split(',') || [];
  350. this.$set(this.form, 'industryArray', industryArray);
  351. }
  352. if(obj.projectStartDate) {
  353. this.form.projectTime = []
  354. this.form.projectTime[0] = obj.projectStartDate
  355. this.form.projectTime[1] = obj.projectEndDate
  356. }
  357. if(obj.techStartDate) {
  358. this.form.lisenceTime = []
  359. this.form.lisenceTime[0] = obj.techStartDate
  360. this.form.lisenceTime[1] = obj.techEndDate
  361. }
  362. if(obj.techFlag == 1) {
  363. this.techVisible = true
  364. }
  365. })
  366. },
  367. handleSuccess(file) {
  368. this.$refs.techLicenseUpload.clearValidate()
  369. this.form.techLicense = file.url;
  370. this.form.fileName = file.name;
  371. },
  372. cancel() {
  373. this.$store.dispatch("tagsView/delView", this.$route); // 关闭当前tab
  374. this.$router.go(-1);
  375. },
  376. submitForm() {
  377. this.$refs.form.validate(valid => {
  378. if(valid) {
  379. this.loading = true
  380. this.form.techScope = this.form.techScopeArray.join(',')
  381. this.form.industry = this.form.industryArray.join(',')
  382. editProjectApi(this.form).then(res => {
  383. this.loading = false
  384. this.$store.dispatch("tagsView/delView", this.$route);
  385. this.$router.go(-1);
  386. })
  387. }
  388. })
  389. },
  390. submitDraft() {
  391. this.loading = true
  392. if(this.form.techScopeArray.length > 0) {
  393. this.form.techScope = this.form.techScopeArray.join(',')
  394. }
  395. if(this.form.industryArray.length > 0) {
  396. this.form.industry = this.form.industryArray.join(',')
  397. }
  398. draftApi(this.form).then(res => {
  399. this.loading = false
  400. this.$store.dispatch("tagsView/delView", this.$route);
  401. this.$router.go(-1);
  402. })
  403. }
  404. },
  405. watch: {
  406. 'entProjectList': {
  407. immediate: true,
  408. handler (val) {
  409. this.form.entProjectList = this.entProjectList || {}
  410. }
  411. },
  412. 'form.projectTime'(val) {
  413. if(this.projectTime) {
  414. this.form.projectStartDate = this.form.projectTime[0]
  415. this.form.projectEndDate = this.form.projectTime[1]
  416. }else {
  417. this.form.projectStartDate = ''
  418. this.form.projectEndDate = ''
  419. }
  420. },
  421. 'form.lisenceTime'(val) {
  422. if(this.form.lisenceTime) {
  423. this.form.techStartDate = this.form.lisenceTime[0]
  424. this.form.techEndDate = this.form.lisenceTime[1]
  425. }else {
  426. this.form.techStartDate = ''
  427. this.form.techEndDate = ''
  428. }
  429. },
  430. 'tempVariable'(val) {
  431. if(val.invest && val.sales) {
  432. this.form.techRate = ((val.invest / val.sales)*100).toFixed(2)
  433. }
  434. }
  435. }
  436. };
  437. </script>