uploadChannel.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <style scoped lang="scss">
  2. ::v-deep.ant-form-item {
  3. margin-bottom: 10px !important;
  4. }
  5. .flex-main {
  6. display: flex;
  7. margin-bottom: 10px;
  8. p {
  9. color: black;
  10. font-weight: 600;
  11. overflow: hidden; //超出的文本隐藏
  12. text-overflow: ellipsis; //溢出用省略号显示
  13. white-space: nowrap; //溢出不换行
  14. }
  15. }
  16. .config-check {
  17. width: 100%;
  18. display: flex;
  19. .config-check-one {
  20. width: 250px;
  21. height: 125px;
  22. border: 1px solid #f2f2f2;
  23. padding: 20px;
  24. display: flex;
  25. margin-right: 15px;
  26. border-radius: 10px;
  27. cursor: pointer;
  28. .config-check-one-left {
  29. width: 70%;
  30. height: 100%;
  31. }
  32. .config-check-one-right {
  33. width: 30%;
  34. height: 100%;
  35. position: relative;
  36. }
  37. }
  38. .config-check-active {
  39. border-color: rgb(38, 122, 251) !important;
  40. }
  41. }
  42. ::v-deep .check-else .vue-treeselect__control {
  43. line-height: 20px !important;
  44. }
  45. ::v-deep .check-else .ant-form-item-control {
  46. height: auto !important;
  47. line-height: 20px !important;
  48. }
  49. </style>
  50. <template>
  51. <div ref="questionnaireBox" class="new-batch config-new-batch">
  52. <div class="chartBox">
  53. <a-row :gutter="20">
  54. <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
  55. <a-card class="search-box step-jump">
  56. <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
  57. <a-row :gutter="16">
  58. <a-col :span="16">
  59. <a-form-item label="项目名称">
  60. <span v-if="createTypeData.projectName">{{ createTypeData.projectName }}</span>
  61. <span v-else>-</span>
  62. </a-form-item>
  63. </a-col>
  64. </a-row>
  65. <a-row :gutter="16">
  66. <a-col :span="16">
  67. <a-form-item v-bind="tailFormItemLayout">
  68. <a-button type="primary" @click="handleOkDownLoad" :loading="downLoading">导出渠道号模板</a-button>
  69. </a-form-item>
  70. </a-col>
  71. </a-row>
  72. <a-row :gutter="16">
  73. <a-col :span="16">
  74. <a-form-item label="操作系统">
  75. <a-radio-group
  76. button-style="solid"
  77. v-decorator="[
  78. 'plam_os',
  79. {
  80. rules: [{ required: true, message: '是否关联单品必选' }],
  81. initialValue: 1
  82. }
  83. ]"
  84. >
  85. <a-radio-button :value="1">安卓</a-radio-button>
  86. <a-radio-button :value="0" disabled>IOS</a-radio-button>
  87. </a-radio-group>
  88. </a-form-item>
  89. </a-col>
  90. </a-row>
  91. <a-row :gutter="16">
  92. <a-col :span="16">
  93. <a-form-item label="上传图标">
  94. <uploadFile
  95. :value.sync="fileUrl"
  96. :multiple="false"
  97. :fileCount="1"
  98. uploadType="image"
  99. @overUpload="overUpload"
  100. :size="100"
  101. ></uploadFile>
  102. <p class="upload-txt-rules">
  103. 文件格式:支持上传png/jpg/jpeg图片,尺寸450*450,小于100KB
  104. </p>
  105. </a-form-item>
  106. </a-col>
  107. </a-row>
  108. <a-row :gutter="16">
  109. <a-col :span="16">
  110. <a-form-item label="上传文件" class="require-class fileUpload" id="fileUpload">
  111. <a-upload
  112. name="file"
  113. :multiple="false"
  114. :headers="tokenHeader"
  115. :file-list="fileList"
  116. :showUploadList="false"
  117. :beforeUpload="beforeUpload"
  118. @change="handleChange"
  119. style="margin-right: 20px"
  120. >
  121. <a-button :disabled="fileUrl == ''">
  122. <a-icon type="upload" />
  123. {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
  124. </a-button>
  125. </a-upload>
  126. </a-form-item>
  127. </a-col>
  128. </a-row>
  129. </a-form>
  130. </a-card>
  131. </a-col>
  132. </a-row>
  133. </div>
  134. <div style="width:100%;display:flex; justify-content: flex-end;">
  135. <a-button type="default" style="margin-right: 15px" @click="goBack">取消</a-button>
  136. <a-button type="primary" style="margin-right: 15px" @click="saveHandler" :loading="saveLoading"
  137. >确定</a-button
  138. >
  139. </div>
  140. </div>
  141. </template>
  142. <script>
  143. // import EditableCell from './editablCell'
  144. // import lookPreviewVue from './lookPreview.vue'
  145. import Treeselect from '../../components/treeSelectProject.vue'
  146. import treeSelectAccount from '../../components/treeSelectAccount.vue'
  147. import selectTable from '@/views/modules/material/comment/selectTable.vue'
  148. import selectTableProject from '@/views/modules/Statistics/components/selectPagination.vue'
  149. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  150. import { mapGetters } from 'vuex'
  151. import uploadFile from '../../components/uploadFile.vue'
  152. import Vue from 'vue'
  153. import { ACCESS_TOKEN } from '@/store/mutation-types'
  154. import $ from 'jquery'
  155. const fileSuffix = ['xlsx', 'xls', 'zip']
  156. function tqFun(qcArr1) {
  157. var tempArr = []
  158. function bbFun(qcArr) {
  159. for (var i = 0; i < qcArr.length; i++) {
  160. if (qcArr[i] instanceof Array) {
  161. bbFun(qcArr[i])
  162. } else {
  163. tempArr.push(qcArr[i])
  164. }
  165. }
  166. return tempArr
  167. }
  168. return bbFun(qcArr1)
  169. }
  170. export default {
  171. name: 'GlobalHeader',
  172. components: {
  173. Treeselect,
  174. treeSelectAccount,
  175. selectTable,
  176. selectTableProject,
  177. uploadFile
  178. },
  179. data() {
  180. return {
  181. formProject: this.$form.createForm(this), //选择项目表单
  182. saveLoading: false,
  183. mode: 1,
  184. productId: '',
  185. projectId: '',
  186. downLoading:false,
  187. formItemLayout: {
  188. labelCol: { span: 6 },
  189. wrapperCol: { span: 16 }
  190. },
  191. tailFormItemLayout: {
  192. wrapperCol: {
  193. sm: {
  194. span: 16,
  195. offset: 6
  196. }
  197. }
  198. },
  199. createTypeData: { createType: '1', projectId: null, projectName: null },
  200. loadDisabled: false,
  201. fileUrl: '',
  202. tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
  203. fileList: [],
  204. dataFile: null
  205. }
  206. },
  207. computed: {},
  208. watch: {},
  209. mounted() {
  210. this.$nextTick(() => {
  211. this.createTypeData = JSON.parse(localStorage.getItem('channelInfo'))
  212. })
  213. },
  214. filters: {},
  215. methods: {
  216. ...mapGetters(['userInfo']),
  217. saveHandler() {
  218. if (!!this.fileUrl) {
  219. this.saveLoading = true
  220. if (this.dataFile) {
  221. let formData = new FormData()
  222. formData.append('file', this.dataFile)
  223. formData.append('imageUrl', this.fileUrl)
  224. postAction('/channel/importChannelExcel', formData).then(res => {
  225. this.saveLoading = false
  226. if (res.code === 200) {
  227. this.$message.success(res.message)
  228. localStorage.removeItem('channelInfo')
  229. this.$router.replace('/autoLaunch/channelAdmin')
  230. this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')
  231. this.$bus.$emit(
  232. 'remove',
  233. '/autoLaunch/createChannelIndex?accountId=' + this.$route.query.accountId
  234. )
  235. } else {
  236. this.$message.error(res.message)
  237. }
  238. })
  239. } else {
  240. this.saveLoading = false
  241. this.$message.error('请上传文件')
  242. }
  243. return
  244. }else{
  245. this.$message.error('请上传文件')
  246. }
  247. },
  248. goBack() {
  249. localStorage.removeItem('channelInfo')
  250. this.$router.replace('/autoLaunch/channelAdmin')
  251. this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')
  252. this.$bus.$emit('remove', '/autoLaunch/createChannelIndex?accountId=' + this.$route.query.accountId)
  253. },
  254. //获取表单的某一个属性值
  255. getFormData(className) {
  256. return this.formProject.getFieldValue(className)
  257. },
  258. handleOkDownLoad() {
  259. this.downLoading = true
  260. let params = {}
  261. params.productId = this.createTypeData.productId
  262. params.projectId = this.createTypeData.projectId
  263. params.userId = this.userInfo().id
  264. downFile('/channel/exportChannelTemplate', params).then(res => {
  265. let blob = new Blob([res], {
  266. type: 'application/vnd.openxmlformats-officedocument.spre1adsheetml.sheet'
  267. })
  268. let downloadElement = document.createElement('a')
  269. let href = window.URL.createObjectURL(blob) //创建下载的链接
  270. downloadElement.href = href
  271. downloadElement.download = '渠道号模板.xlsx' //下载后文件名
  272. document.body.appendChild(downloadElement)
  273. downloadElement.click() //点击下载
  274. document.body.removeChild(downloadElement) //下载完成移除元素
  275. window.URL.revokeObjectURL(href) //释放掉blob对象
  276. this.downLoading = false
  277. })
  278. },
  279. overUpload(file) {},
  280. handleChange() {
  281. this.loadDisabled = false
  282. this.$message.success('文件导入成功')
  283. },
  284. beforeUpload(file) {
  285. this.dataFile = $('.fileUpload')
  286. .eq(0)
  287. .find('input')[0].files[0]
  288. this.loadDisabled = true
  289. const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
  290. const fileName = file.name
  291. const fileStrArr = fileName.split('.')
  292. const suffix = fileStrArr[fileStrArr.length - 1]
  293. let result = fileSuffix.some(item => {
  294. return item === suffix
  295. })
  296. if (!result) {
  297. this.$message.error('不支持该文件类型')
  298. this.loadDisabled = false
  299. return Promise.reject()
  300. }
  301. }
  302. }
  303. }
  304. </script>