123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313 |
- <style scoped lang="scss">
- ::v-deep.ant-form-item {
- margin-bottom: 10px !important;
- }
- .flex-main {
- display: flex;
- margin-bottom: 10px;
- p {
- color: black;
- font-weight: 600;
- overflow: hidden; //超出的文本隐藏
- text-overflow: ellipsis; //溢出用省略号显示
- white-space: nowrap; //溢出不换行
- }
- }
- .config-check {
- width: 100%;
- display: flex;
- .config-check-one {
- width: 250px;
- height: 125px;
- border: 1px solid #f2f2f2;
- padding: 20px;
- display: flex;
- margin-right: 15px;
- border-radius: 10px;
- cursor: pointer;
- .config-check-one-left {
- width: 70%;
- height: 100%;
- }
- .config-check-one-right {
- width: 30%;
- height: 100%;
- position: relative;
- }
- }
- .config-check-active {
- border-color: rgb(38, 122, 251) !important;
- }
- }
- ::v-deep .check-else .vue-treeselect__control {
- line-height: 20px !important;
- }
- ::v-deep .check-else .ant-form-item-control {
- height: auto !important;
- line-height: 20px !important;
- }
- </style>
- <template>
- <div ref="questionnaireBox" class="new-batch config-new-batch">
- <div class="chartBox">
- <a-row :gutter="20">
- <a-col :sm="24" style="margin-bottom: 20px; z-index: 10" id="container">
- <a-card class="search-box step-jump">
- <a-form layout="horizontal" v-bind="formItemLayout" :form="formProject">
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="项目名称">
- <span v-if="createTypeData.projectName">{{ createTypeData.projectName }}</span>
- <span v-else>-</span>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item v-bind="tailFormItemLayout">
- <a-button type="primary" @click="handleOkDownLoad" :loading="downLoading">导出渠道号模板</a-button>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="操作系统">
- <a-radio-group
- button-style="solid"
- v-decorator="[
- 'plam_os',
- {
- rules: [{ required: true, message: '是否关联单品必选' }],
- initialValue: 1
- }
- ]"
- >
- <a-radio-button :value="1">安卓</a-radio-button>
- <a-radio-button :value="0" disabled>IOS</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="上传图标">
- <uploadFile
- :value.sync="fileUrl"
- :multiple="false"
- :fileCount="1"
- uploadType="image"
- @overUpload="overUpload"
- :size="100"
- ></uploadFile>
- <p class="upload-txt-rules">
- 文件格式:支持上传png/jpg/jpeg图片,尺寸450*450,小于100KB
- </p>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="16">
- <a-col :span="16">
- <a-form-item label="上传文件" class="require-class fileUpload" id="fileUpload">
- <a-upload
- name="file"
- :multiple="false"
- :headers="tokenHeader"
- :file-list="fileList"
- :showUploadList="false"
- :beforeUpload="beforeUpload"
- @change="handleChange"
- style="margin-right: 20px"
- >
- <a-button :disabled="fileUrl == ''">
- <a-icon type="upload" />
- {{ loadDisabled ? '上传中,请稍后' : '文件上传' }}
- </a-button>
- </a-upload>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- </a-col>
- </a-row>
- </div>
- <div style="width:100%;display:flex; justify-content: flex-end;">
- <a-button type="default" style="margin-right: 15px" @click="goBack">取消</a-button>
- <a-button type="primary" style="margin-right: 15px" @click="saveHandler" :loading="saveLoading"
- >确定</a-button
- >
- </div>
- </div>
- </template>
- <script>
- // import EditableCell from './editablCell'
- // import lookPreviewVue from './lookPreview.vue'
- import Treeselect from '../../components/treeSelectProject.vue'
- import treeSelectAccount from '../../components/treeSelectAccount.vue'
- import selectTable from '@/views/modules/material/comment/selectTable.vue'
- import selectTableProject from '@/views/modules/Statistics/components/selectPagination.vue'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
- import { mapGetters } from 'vuex'
- import uploadFile from '../../components/uploadFile.vue'
- import Vue from 'vue'
- import { ACCESS_TOKEN } from '@/store/mutation-types'
- import $ from 'jquery'
- const fileSuffix = ['xlsx', 'xls', 'zip']
- function tqFun(qcArr1) {
- var tempArr = []
- function bbFun(qcArr) {
- for (var i = 0; i < qcArr.length; i++) {
- if (qcArr[i] instanceof Array) {
- bbFun(qcArr[i])
- } else {
- tempArr.push(qcArr[i])
- }
- }
- return tempArr
- }
- return bbFun(qcArr1)
- }
- export default {
- name: 'GlobalHeader',
- components: {
- Treeselect,
- treeSelectAccount,
- selectTable,
- selectTableProject,
- uploadFile
- },
- data() {
- return {
- formProject: this.$form.createForm(this), //选择项目表单
- saveLoading: false,
- mode: 1,
- productId: '',
- projectId: '',
- downLoading:false,
- formItemLayout: {
- labelCol: { span: 6 },
- wrapperCol: { span: 16 }
- },
- tailFormItemLayout: {
- wrapperCol: {
- sm: {
- span: 16,
- offset: 6
- }
- }
- },
- createTypeData: { createType: '1', projectId: null, projectName: null },
- loadDisabled: false,
- fileUrl: '',
- tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
- fileList: [],
- dataFile: null
- }
- },
- computed: {},
- watch: {},
- mounted() {
- this.$nextTick(() => {
- this.createTypeData = JSON.parse(localStorage.getItem('channelInfo'))
- })
- },
- filters: {},
- methods: {
- ...mapGetters(['userInfo']),
- saveHandler() {
- if (!!this.fileUrl) {
- this.saveLoading = true
- if (this.dataFile) {
- let formData = new FormData()
- formData.append('file', this.dataFile)
- formData.append('imageUrl', this.fileUrl)
- postAction('/channel/importChannelExcel', formData).then(res => {
- this.saveLoading = false
- if (res.code === 200) {
- this.$message.success(res.message)
- localStorage.removeItem('channelInfo')
- this.$router.replace('/autoLaunch/channelAdmin')
- this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')
- this.$bus.$emit(
- 'remove',
- '/autoLaunch/createChannelIndex?accountId=' + this.$route.query.accountId
- )
- } else {
- this.$message.error(res.message)
- }
- })
- } else {
- this.saveLoading = false
- this.$message.error('请上传文件')
- }
- return
- }else{
- this.$message.error('请上传文件')
- }
- },
- goBack() {
- localStorage.removeItem('channelInfo')
- this.$router.replace('/autoLaunch/channelAdmin')
- this.$bus.$emit('remove', '/autoLaunch/createChannelIndex')
- this.$bus.$emit('remove', '/autoLaunch/createChannelIndex?accountId=' + this.$route.query.accountId)
- },
- //获取表单的某一个属性值
- getFormData(className) {
- return this.formProject.getFieldValue(className)
- },
- handleOkDownLoad() {
- this.downLoading = true
- let params = {}
- params.productId = this.createTypeData.productId
- params.projectId = this.createTypeData.projectId
- params.userId = this.userInfo().id
- downFile('/channel/exportChannelTemplate', params).then(res => {
- let blob = new Blob([res], {
- type: 'application/vnd.openxmlformats-officedocument.spre1adsheetml.sheet'
- })
- let downloadElement = document.createElement('a')
- let href = window.URL.createObjectURL(blob) //创建下载的链接
- downloadElement.href = href
- downloadElement.download = '渠道号模板.xlsx' //下载后文件名
- document.body.appendChild(downloadElement)
- downloadElement.click() //点击下载
- document.body.removeChild(downloadElement) //下载完成移除元素
- window.URL.revokeObjectURL(href) //释放掉blob对象
- this.downLoading = false
- })
- },
- overUpload(file) {},
- handleChange() {
- this.loadDisabled = false
- this.$message.success('文件导入成功')
- },
- beforeUpload(file) {
- this.dataFile = $('.fileUpload')
- .eq(0)
- .find('input')[0].files[0]
- this.loadDisabled = true
- const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
- const fileName = file.name
- const fileStrArr = fileName.split('.')
- const suffix = fileStrArr[fileStrArr.length - 1]
- let result = fileSuffix.some(item => {
- return item === suffix
- })
- if (!result) {
- this.$message.error('不支持该文件类型')
- this.loadDisabled = false
- return Promise.reject()
- }
- }
- }
- }
- </script>
|