creatApplication.vue 20 KB

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