creatApplication.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  1. <template>
  2. <div>
  3. <a-modal
  4. title="添加应用"
  5. :visible="application"
  6. @ok="handleOk"
  7. :confirmLoading="confirmLoading"
  8. @cancel="handleCancel"
  9. width="800px"
  10. >
  11. <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
  12. <a-form :form="form">
  13. <selectTable :projectId.sync="projectId" ref="selectTable" :requireCheck="true"></selectTable>
  14. <a-form-item
  15. label="设备类型"
  16. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  17. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  18. >
  19. <a-radio-group v-model="appType" @change="changePlatform">
  20. <a-radio-button value="android">安卓</a-radio-button>
  21. <a-radio-button value="ios">IOS</a-radio-button>
  22. </a-radio-group>
  23. </a-form-item>
  24. <!-- <a-form-item v-if="appType == 'android'"> -->
  25. <a-form-item
  26. label="推广类型"
  27. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  28. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  29. >
  30. <a-radio-group v-model="platform" @change="changeShowUploadType">
  31. <a-radio value="1">应用下载</a-radio>
  32. <a-radio value="2">网页游戏</a-radio>
  33. </a-radio-group>
  34. </a-form-item>
  35. <a-form-item
  36. label="上传应用"
  37. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  38. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  39. >
  40. <a-radio-group v-model="uploadType" @change="changeShowUpload">
  41. <a-radio-button value="1">本地上传</a-radio-button>
  42. <a-radio-button value="2">填写链接</a-radio-button>
  43. </a-radio-group>
  44. </a-form-item>
  45. <a-form-item
  46. label="上传文件"
  47. v-if="uploadType == '1'"
  48. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  49. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  50. >
  51. <!-- <a-upload name="file" :file-list="fileList" :before-upload="beforeUpload" @change="handleChange">
  52. <a-button><a-icon type="upload" />文件上传</a-button>
  53. </a-upload> -->
  54. <a-upload
  55. name="file"
  56. :multiple="false"
  57. :action="uploadAction"
  58. :headers="tokenHeader"
  59. :file-list="fileList"
  60. :showUploadList="false"
  61. :beforeUpload="beforeUpload"
  62. @change="handleChange"
  63. style="margin-right: 20px"
  64. >
  65. <a-button :disabled="(!projectId && !fileUrl) || loadDisabled">
  66. <a-icon type="upload" />
  67. {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
  68. </a-button>
  69. </a-upload>
  70. <a @click="downLoadFile">文件格式下载</a>
  71. </a-form-item>
  72. <a-form-item
  73. v-if="uploadType == '2'"
  74. label="下载链接"
  75. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  76. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  77. >
  78. <a-input
  79. placeholder="请填写应用链接"
  80. v-decorator="[
  81. 'url',
  82. {
  83. rules: [{ required: true, validator: handleConfirmValue }],
  84. },
  85. ]"
  86. />
  87. </a-form-item>
  88. <a-form-item
  89. label="应用包名"
  90. v-if="uploadType == '2'"
  91. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  92. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  93. >
  94. <a-input
  95. v-decorator="[
  96. 'packageName',
  97. {
  98. rules: [{ required: true, message: '请填写正确的应用包名称' }],
  99. },
  100. ]"
  101. placeholder="请填写包名称,如com.smile.gifmaker"
  102. />
  103. </a-form-item>
  104. <a-form-item
  105. label="应用名称"
  106. v-if="uploadType == '2'"
  107. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  108. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  109. >
  110. <a-input
  111. v-decorator="[
  112. 'appName',
  113. {
  114. rules: [{ required: true, message: '请填写应用名称' }],
  115. },
  116. ]"
  117. placeholder="请填写应用名称"
  118. />
  119. </a-form-item>
  120. <a-form-item
  121. label="上传图标"
  122. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  123. :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
  124. >
  125. <uploadFile
  126. :value.sync="fileUrl"
  127. :multiple="false"
  128. :fileCount="1"
  129. uploadType="image"
  130. @overUpload="overUpload"
  131. :size="100"
  132. ></uploadFile>
  133. </a-form-item>
  134. <a-form-item
  135. label="应用标记"
  136. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  137. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  138. v-if="uploadType == '2'"
  139. >
  140. <a-input
  141. v-decorator="[
  142. 'appVersion',
  143. {
  144. rules: [{ required: true, message: '请填写应用标记' }, { validator: checkAppVersion }],
  145. },
  146. ]"
  147. placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66"
  148. />
  149. </a-form-item>
  150. <!-- <a-form-item>
  151. <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
  152. <a-button htmlType="submit" type="primary">提交</a-button>
  153. <a-button style="margin-left: 8px">保存</a-button>
  154. </a-form-item>
  155. </a-form-item> -->
  156. <a-form-item
  157. label="隐私政策是否接入"
  158. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  159. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  160. v-if="uploadType == '2'"
  161. >
  162. <a-radio-group
  163. v-decorator="[
  164. 'useSdk',
  165. {
  166. rules: [{ required: true }],
  167. initialValue: '0',
  168. },
  169. ]"
  170. >
  171. <a-radio value="0">未接入</a-radio>
  172. <a-radio value="1">已接入</a-radio>
  173. </a-radio-group>
  174. </a-form-item>
  175. <a-form-item
  176. label="监测链接"
  177. :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
  178. :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
  179. v-if="uploadType == '2'"
  180. >
  181. <a-input
  182. v-decorator="[
  183. 'trackUrl',
  184. {
  185. rules: [{ required: true, message: '请填写监测链接' }, { validator: handleConfirmValue }],
  186. },
  187. ]"
  188. placeholder="请填写监测链接"
  189. />
  190. </a-form-item>
  191. </a-form>
  192. </a-card>
  193. </a-modal>
  194. </div>
  195. </template>
  196. <script>
  197. import Vue from 'vue'
  198. import { ACCESS_TOKEN } from '@/store/mutation-types'
  199. import { deleteAction, postAction, getAction, downFilePost, downFile } from '@/api/manage'
  200. import uploadFile from '@/components/uploadFile.vue'
  201. import { mapActions, mapGetters } from 'vuex'
  202. import BMF from 'browser-md5-file'
  203. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
  204. const fileSuffix = ['xlsx', 'xls', 'zip']
  205. export default {
  206. name: 'BaseForm',
  207. components: {
  208. uploadFile,
  209. selectTable,
  210. },
  211. data() {
  212. return {
  213. loadDisabled: false,
  214. projectId: '',
  215. accountId: '',
  216. fileList: [],
  217. fileUrl: '',
  218. accountList: {},
  219. appType: 'android', //设备类型
  220. platform: '1', //应用类型 : 1 Android 应用下载,2: Android 网页游戏,3: iOS 应用下载, 4:iOS 网页游戏
  221. uploadType: '1', //上传类型 1 本地上传 2 填写链接
  222. appVersion: '', //应用标记
  223. appName: '', // 应用名称
  224. packageName: '', //应用包名
  225. file: '', // 上传文件
  226. imageUrl: '', // 上传图标链接链接
  227. downloadUrl: '', //下载链接
  228. showUploadFile: true,
  229. showDownLoad: false,
  230. showUpload: true,
  231. showAndroid: true,
  232. showIOS: false,
  233. customDomain: '',
  234. acceptVideo: '/*.apk,/*.png,/*.jpg,/*.jpeg,/*.mp4',
  235. accessKeyId: 'LTAIbNbqWzSOklQV',
  236. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  237. region: 'oss-cn-beijing',
  238. bucket: 'ctop-media',
  239. form: this.$form.createForm(this),
  240. url: {
  241. insertTemplateUrl: '/kuaishouAppPackage/fillInLink',
  242. userAllocationList: '/ctop/userAllocation/list',
  243. },
  244. application: false,
  245. confirmLoading: false,
  246. imageToken: '',
  247. uploadAction: '/kuaishouAppPackage/importAppExcel',
  248. tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
  249. }
  250. },
  251. methods: {
  252. checkAppVersion(rule, value, callback) {
  253. if (value != '') {
  254. let params = {}
  255. params.projectId = this.projectId
  256. params.appVersion = value
  257. getAction('/kuaishouAppPackage/checkAppVersion', params).then((res) => {
  258. if (res.success) {
  259. callback()
  260. } else {
  261. callback(res.message)
  262. }
  263. })
  264. }
  265. },
  266. overUpload(file) {
  267. console.log(file)
  268. },
  269. downLoadFile() {
  270. downFile('/kuaishouAppPackage/exportAppTemplate').then((res) => {
  271. let blob = new Blob([res], {
  272. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  273. })
  274. let downloadElement = document.createElement('a')
  275. let href = window.URL.createObjectURL(blob) //创建下载的链接
  276. downloadElement.href = href
  277. downloadElement.download = '应用模板' //下载后文件名
  278. document.body.appendChild(downloadElement)
  279. downloadElement.click() //点击下载
  280. document.body.removeChild(downloadElement) //下载完成移除元素
  281. window.URL.revokeObjectURL(href) //释放掉blob对象
  282. })
  283. },
  284. handleChange(info) {
  285. console.log(info)
  286. let fileList = [...info.fileList]
  287. // 1. Limit the number of uploaded files
  288. // Only to show two recent uploaded files, and old ones will be replaced by the new
  289. fileList = fileList.slice(-2)
  290. // 2. read from response and show file link
  291. fileList = fileList.map((file) => {
  292. if (file.response) {
  293. // Component will show file.url as link
  294. file.url = file.response.url
  295. }
  296. return file
  297. })
  298. if (fileList.length > 0) {
  299. this.fileList = [
  300. {
  301. ...fileList[fileList.length - 1],
  302. },
  303. ]
  304. } else {
  305. this.fileList = []
  306. }
  307. // this.loadDisabled = false
  308. // this.$message.success('文件导入成功,异步创建中,请稍后查看...')
  309. if (info.file.status !== 'uploading') {
  310. console.log(info.file, info.fileList)
  311. }
  312. if (info.file.status === 'done') {
  313. this.loadDisabled = false
  314. if (info.file.response.code == 0) {
  315. this.$message.success(info.file.response.message)
  316. } else {
  317. this.$message.error(info.file.response.message)
  318. }
  319. } else if (info.file.status === 'error') {
  320. this.$message.error(`${info.file.name}上传失败`)
  321. this.loadDisabled = false
  322. }
  323. // console.log(this.form)
  324. },
  325. beforeUpload(file) {
  326. // this.cosUpload(file)
  327. if (process.env.NODE_ENV == 'development') {
  328. this.uploadAction = `/jeecg-boot/kuaishouAppPackage/importAppExcel?projectId=${this.projectId}&platform=${
  329. this.appType == 'ios' ? +this.platform + 2 : +this.platform
  330. }&imageUrl=${this.fileUrl}`
  331. } else if (process.env.NODE_ENV == 'debug') {
  332. } else if (process.env.NODE_ENV == 'production') {
  333. this.uploadAction = `${this.axios.defaults.baseURL}/kuaishouAppPackage/importAppExcel?projectId=${
  334. this.projectId
  335. }&platform=${this.appType == 'ios' ? +this.platform + 2 : +this.platform}&imageUrl=${this.fileUrl}`
  336. }
  337. this.loadDisabled = true
  338. const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
  339. const fileName = file.name
  340. const fileStrArr = fileName.split('.')
  341. const suffix = fileStrArr[fileStrArr.length - 1]
  342. let result = fileSuffix.some((item) => {
  343. return item === suffix
  344. })
  345. if (!result) {
  346. this.$message.error('不支持该文件类型')
  347. this.loadDisabled = false
  348. return false
  349. }
  350. },
  351. cosUpload(file) {
  352. let that = this
  353. let date = new Date()
  354. let y = date.getFullYear()
  355. let MM = date.getMonth() + 1
  356. MM = MM < 10 ? '0' + MM : MM
  357. let d = date.getDate()
  358. d = d < 10 ? '0' + d : d
  359. let timeElse = new Date().getTime()
  360. let arr = file.name.split('.')
  361. let str = ''
  362. for (let i = 0; i < arr.length; i++) {
  363. if (i === arr.length - 1) {
  364. } else {
  365. if (i === arr.length - 2) {
  366. str += arr[i]
  367. } else {
  368. str += arr[i] + '.'
  369. }
  370. }
  371. }
  372. cos.putObject(
  373. {
  374. Bucket: 'media-1301855440',
  375. Region: 'ap-chongqing',
  376. // 存储桶所在地域,必须字段
  377. Key: that.appType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
  378. StorageClass: 'STANDARD',
  379. Body: file, // 上传文件对象
  380. },
  381. function (err, data) {
  382. if (err) {
  383. that.$message.error('上传失败!!!' + err)
  384. return
  385. }
  386. that.loadingElse = false
  387. that.fileList.push({
  388. uid: file.name,
  389. name: file.name,
  390. status: 'done',
  391. url: '//' + data.Location,
  392. })
  393. if (that.fileList.length > 1) {
  394. that.fileList = that.fileList.slice(-1)
  395. }
  396. const isZip = file.type.includes('zip') || file.type.includes('text')
  397. const fileOvesize = file.size > 1024 * 1024 * 1024
  398. if (!isZip) {
  399. that.$message.error('只能上传zip格式的文件或者txt文件')
  400. return
  401. }
  402. if (fileOvesize) {
  403. that.$message.error('文件大小不能超过1G')
  404. return
  405. }
  406. that.handleMd5(file)
  407. }
  408. )
  409. },
  410. handleMd5(file) {
  411. let bmf = new BMF()
  412. let that = this
  413. return new Promise(function (resolve, reject) {
  414. bmf.md5(file, (err, md5) => {
  415. // getAction('kuaishouPopulationPackage/checkPopulationPackage', { signature: md5 })
  416. // .then((result) => {
  417. // if (result.code === 200) {
  418. that.personNameDisabled = false
  419. that.personResourceDisabled = false
  420. resolve()
  421. // } else if (result.code === 201) {
  422. // that.$message.error(result.message)
  423. // that.personForm.name = result.result.orientationName
  424. // that.personForm.resource = result.result.type
  425. // that.personNameDisabled = true
  426. // that.personResourceDisabled = true
  427. // reject()
  428. // }
  429. // })
  430. // .catch((error) => {
  431. // console.log(error, 'eeee')
  432. // reject()
  433. // })
  434. })
  435. })
  436. },
  437. handleOk() {
  438. this.handleSubmit()
  439. },
  440. handleCancel() {
  441. this.form.resetFields()
  442. this.imageUrl = ''
  443. this.file = ''
  444. this.platform = '1'
  445. this.application = false
  446. },
  447. showApplication() {
  448. this.application = true
  449. },
  450. handleConfirmValue(rule, value, callback) {
  451. if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
  452. callback()
  453. } else {
  454. callback('链接不能为空且开头为http://或https://')
  455. }
  456. },
  457. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  458. changePlatform() {
  459. this.form.resetFields()
  460. if (this.appType == 'android') {
  461. this.showAndroid = true
  462. this.showIOS = false
  463. this.platform = '1'
  464. } else {
  465. this.showAndroid = false
  466. this.showIOS = true
  467. this.showDownLoad = true
  468. this.platform = '1'
  469. }
  470. },
  471. changeShowUpload() {
  472. this.form.resetFields()
  473. if (this.uploadType == '1') {
  474. this.showUploadFile = true
  475. this.showDownLoad = false
  476. } else {
  477. this.showUploadFile = false
  478. this.showDownLoad = true
  479. }
  480. },
  481. changeShowUploadType() {
  482. this.form.resetFields()
  483. if (this.platform == '2') {
  484. this.showUpload = false
  485. this.showUploadFile = false
  486. this.showDownLoad = true
  487. this.uploadType = '1'
  488. } else {
  489. this.showUpload = true
  490. this.showUploadFile = true
  491. this.showDownLoad = false
  492. }
  493. },
  494. handleSubmit() {
  495. // console.log('设备类型:' + this.appType)
  496. // console.log('应用类型:' + this.platform)
  497. // console.log('上传类型:' + this.uploadType)
  498. // console.log('应用标记:' + this.appVersion)
  499. // console.log('应用名称:' + this.appName)
  500. // console.log('包名称:' + this.packageName)
  501. // console.log('文件地址:' + this.file)
  502. // console.log('图片地址:' + this.imageUrl)
  503. // e.preventDefault()
  504. this.form.validateFields((err, values) => {
  505. console.log('Received values of form: ', values)
  506. if (!err) {
  507. let params = {}
  508. params.projectId = this.projectId
  509. if (this.uploadType == '1') {
  510. this.url.insertTemplateUrl = '/kuaishouAppPackage/importAppExcel'
  511. params.platform = this.appType == 'ios' ? +this.platform + 2 : +this.platform
  512. params.imageUrl = this.fileUrl
  513. } else {
  514. this.url.insertTemplateUrl = '/kuaishouAppPackage/fillInLink'
  515. params = { ...values }
  516. params.projectId = this.projectId
  517. params.appIconUrl = this.fileUrl
  518. params.platform = this.appType == 'ios' ? +this.platform + 2 : +this.platform
  519. }
  520. // if (this.appType == 'android') {
  521. // if (this.imageUrl != '') {
  522. // params.imageUrl = this.imageUrl
  523. // }
  524. // if (this.platform == '2') {
  525. // params.url = values.downloadUrl
  526. // } else {
  527. // if (this.uploadType == '1') {
  528. // if (this.file != '') {
  529. // params.file = this.file
  530. // }
  531. // } else if (this.uploadType == '2') {
  532. // params.url = values.downloadUrl
  533. // }
  534. // }
  535. // params.platform = this.platform
  536. // params.uploadType = values.uploadType
  537. // params.appType = 'android'
  538. // params.packageName = values.packageName
  539. // params.appName = values.appName
  540. // params.appVersion = values.appVersion
  541. // params.loginId = this.userInfo().id
  542. // } else {
  543. // params.appType = 'ios'
  544. // params.platform = this.platform
  545. // params.uploadType = '2'
  546. // params.url = values.downloadUrl
  547. // params.appName = values.appName
  548. // params.appVersion = values.appVersion
  549. // params.loginId = this.userInfo().id
  550. // }
  551. console.log(params)
  552. postAction(this.url.insertTemplateUrl, params).then((res) => {
  553. console.log(res)
  554. if (res.success) {
  555. this.$message.success('创建成功')
  556. this.handleCancel()
  557. } else {
  558. this.$message.error(res.message)
  559. }
  560. })
  561. }
  562. })
  563. },
  564. onChange(value) {
  565. console.log(value)
  566. },
  567. },
  568. created: function () {
  569. let params = {}
  570. params.pageSize = '1000'
  571. params.mediaId = '2'
  572. params.userId = this.userInfo().id
  573. getAction(this.url.userAllocationList, params).then((res) => {
  574. if (res.success) {
  575. this.accountList = res.result.records
  576. }
  577. })
  578. },
  579. }
  580. </script>