TechBasic.vue 14 KB

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