123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472 |
- <style>
- #wps-iframe {
- height: 100%;
- }
- </style>
- <template>
- <a-card :bordered="false">
- <!-- 查询区域 -->
- <div class="table-page-search-wrapper">
- <a-form layout="inline">
- <a-row :gutter="24">
- <a-col :md="6" :sm="8">
- <selectTable :projectId.sync="queryParam.projectId"></selectTable>
- </a-col>
- <a-col :md="6" :sm="8">
- <a-form-item label="脚本名称">
- <a-input placeholder="请输入脚本名称" v-model="queryParam.name"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="8">
- <a-form-item label="创建人">
- <a-select
- v-model="queryParam.creator"
- showSearch
- allowClear
- placeholder="请选择创建人"
- optionFilterProp="children"
- style="width: 100%"
- :filterOption="true"
- @search="search"
- @focus="getAllUserList"
- >
- <a-select-option
- v-for="appModel in options"
- :key="appModel.userId + new Date().getTime()"
- :value="appModel.userId"
- >
- {{ appModel.realName }}
-   {{ appModel.roleName }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="8">
- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
- <a-button
- type="primary"
- @click="searchReset"
- icon="reload"
- style="margin-left: 8px"
- >重置</a-button>
- </span>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <div style="float:right;margin:0 0 20px 20px">
- <!-- <a-upload
- name="file"
- :multiple="false"
- :action="uploadAction"
- :headers="tokenHeader"
- :showUploadList="false"
- :beforeUpload="beforeUpload"
- @change="handleChange"
- style="margin-right:20px"
- >
- <a-button :disabled="loadingElse">
- <a-icon type="upload" />
- {{loadingElse?'上传中,请稍后':'文件上传'}}
- </a-button>
- </a-upload> -->
- <a-dropdown placement="bottomRight">
- <a-button>新增</a-button>
- <a-menu slot="overlay">
- <a-menu-item>
- <a-icon type="file-word" />
- <span style="text-align: center" @click="creatWps('word')">文字文档</span>
- </a-menu-item>
- <a-menu-item>
- <a-icon type="file-excel" />
- <span style="text-align: center" @click="creatWps('excel')">表格文档</span>
- </a-menu-item>
- <a-menu-item>
- <a-icon type="file-ppt" />
- <span style="text-align: center" @click="creatWps('ppt')">演示文档</span>
- </a-menu-item>
- </a-menu>
- </a-dropdown>
- </div>
- <div style="clear:both"></div>
- <div>
- <a-table
- ref="table"
- size="middle"
- bordered
- rowKey="name"
- :columns="columns"
- :dataSource="dataSource"
- :pagination="ipagination"
- :loading="loading"
- @change="handleTableChange"
- >
- <span slot="modifyTime" slot-scope="text">{{text|getDate}}</span>
- <span slot="size" slot-scope="text">{{text|sizeShow}}</span>
- <span slot="projectId_dictText" slot-scope="text">{{text?text:'-'}}</span>
- <span slot="action" slot-scope="text, record">
- <a @click="getViewUrlDbPath(record)">编辑</a>
- <a-divider type="vertical" />
- <a @click="bindProject(record)">项目绑定</a>
- <a-divider type="vertical" />
- <a @click="downLoad(record)">下载</a>
- <a-divider type="vertical" />
- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
- <a>删除</a>
- </a-popconfirm>
- </span>
- </a-table>
- </div>
- <div id="show"></div>
- <a-modal
- :maskClosable="false"
- :title="type=='add'?'脚本新建':'脚本编辑'"
- v-model="visibleBind"
- :width="1200"
- :footer="null"
- >
- <iframe :src="src" frameborder="0" style="width:100%;height:600px" v-if="type=='add'"></iframe>
- <div id="showWps" style="height:600px" v-show="type=='edit'"></div>
- </a-modal>
- <a-modal :maskClosable="false" title="绑定项目" v-model="visibleProject" @ok="handleOk">
- <span>项目选择:</span>
- <a-select
- v-model="projectId"
- showSearch
- style="width:300px"
- optionFilterProp="children"
- :filterOption="filterOption"
- >
- <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
- {{ item.projectName }} {{
- item.mediaId == "1" ? '头条' :item.mediaId == "2"? '快手':item.mediaId == "3"?'头条内广':'快手内广'
- }} {{ item.advertiserName }}
- </a-select-option>
- </a-select>
- </a-modal>
- <!-- table区域-end -->
- <!-- 表单区域 -->
- <wpsFile-modal ref="modalForm" @ok="modalFormOk"></wpsFile-modal>
- </a-card>
- </template>
- <script>
- import { getAction, postAction, postFile, deleteAction, putAction } from '@/api/manage'
- import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
- import WpsFileModal from './modules/WpsFileModal'
- import { mapGetters } from 'vuex'
- import { JeecgListMixin } from '@/mixins/JeecgListMixin'
- import qs from 'qs'
- const fileSuffix = [
- 'xls',
- 'xlt',
- 'et',
- 'xlsx',
- 'xltx',
- 'csv',
- 'xlsm',
- 'xltm',
- 'doc',
- 'dot',
- 'wps',
- 'wpt',
- 'docx',
- 'dotx',
- 'docm',
- 'dotm',
- 'ppt',
- 'pptx',
- 'pptm',
- 'ppsx',
- 'ppsm',
- 'pps',
- 'potx',
- 'potm',
- 'dpt',
- 'dps',
- 'pdf',
- ]
- export default {
- name: 'WpsFileList',
- mixins: [JeecgListMixin],
- components: {
- WpsFileModal,
- selectTable,
- },
- data() {
- return {
- description: 'wps文件管理页面',
- dataElse: [],
- projectId: '',
- visibleProject: false,
- // 表头
- visibleBind: false,
- wpsType: 'word',
- type: 'add',
- uploadAction: 'http://api.tjyourong.com.cn/jeecg-boot/ctop/wpsFile/uploadFile',
- columns: [
- {
- title: '文件名称',
- align: 'center',
- dataIndex: 'name',
- },
- {
- title: '文件大小(KB)',
- align: 'center',
- dataIndex: 'size',
- scopedSlots: {
- customRender: 'size',
- },
- },
- {
- title: '绑定项目',
- align: 'center',
- dataIndex: 'projectId_dictText',
- scopedSlots: {
- customRender: 'projectId_dictText',
- },
- },
- {
- title: '创建人',
- align: 'center',
- dataIndex: 'creator_dictText',
- },
- {
- title: '发布时间',
- align: 'center',
- dataIndex: 'modifyTime',
- scopedSlots: {
- customRender: 'modifyTime',
- },
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: {
- customRender: 'action',
- },
- },
- ],
- url: {
- list: '/ctop/wpsFile/list',
- delete: '/ctop/wpsFile/delete',
- deleteBatch: '/ctop/wpsFile/deleteBatch',
- exportXlsUrl: 'ctop/wpsFile/exportXls',
- importExcelUrl: 'ctop/wpsFile/importExcel',
- },
- src: '',
- loadingElse: false,
- fileId: '',
- loadingOk: false,
- options: [],
- }
- },
- computed: {
- importExcelUrl: function () {
- return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
- },
- },
- watch: {
- visibleBind(n, o) {
- if (!n) {
- this.src = ''
- this.loadData(1)
- }
- },
- },
- filters: {
- getDate(value) {
- let date = new Date(value)
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- return y + '-' + MM + '-' + d
- },
- sizeShow(value) {
- return (value / 1024).toFixed(2)
- },
- },
- mounted() {
- this.getParticipateList()
- // getAction('/sys/user/getAllUserList', '').then((res) => {
- // if (res.success) {
- // this.options = res.result
- // }
- // })
- },
- methods: {
- search(value) {
- this.options = []
- if (value != '') {
- // this.options = this.list.filter(item => {
- // var data = item.realName + ' ' + item.roleName
- // return data.toLowerCase().indexOf(value.toLowerCase()) > -1
- // })
- // this.options = [...this.options]
- this.getAllUserList(value)
- } else {
- this.getAllUserList()
- }
- },
- getAllUserList(value) {
- getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: value }).then((res) => {
- if (res.success) {
- this.options = res.result.list
- }
- })
- },
- downLoad(item) {
- let downloadElement = document.createElement('a')
- downloadElement.href = item.downloadUrl
- downloadElement.download = item.name //下载后文件名
- document.body.appendChild(downloadElement)
- downloadElement.click() //点击下载
- document.body.removeChild(downloadElement) //下载完成移除元素
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- getParticipateList() {
- getAction('/ctop/projectMember/participateList', {
- userId: this.userInfo().id,
- }).then((res) => {
- if (res.code == 0) {
- this.dataElse = res.result
- }
- })
- },
- beforeUpload(file) {
- this.loadingElse = 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.loadingElse = false
- return false
- }
- if (size > 10) {
- this.$message.error('文件不能大于10MB')
- this.loadingElse = false
- return false
- }
- },
- handleChange(info) {
- if (info.file.status !== 'uploading') {
- console.log(info.file, info.fileList)
- }
- if (info.file.status === 'done') {
- this.$message.success(`${info.file.name} 上传成功`)
- this.loadingElse = false
- this.loadData(1)
- } else if (info.file.status === 'error') {
- this.$message.error(`${info.file.name} file upload failed.`)
- this.loadingElse = false
- }
- },
- handleOk(e) {
- this.loadingOk = true
- var params = qs.stringify({
- projectId: this.projectId,
- fileId: this.fileId,
- })
- postAction('/ctop/wpsFile/bindProject', params).then((res) => {
- if (res.success) {
- this.visibleProject = false
- this.projectId = ''
- this.loadingOk = false
- this.loadData()
- } else {
- this.$message.error('绑定失败')
- this.loadingOk = false
- }
- })
- },
- creatWps(type) {
- console.log(type)
- this.visibleBind = true
- this.wpsType = type
- this.type = 'add'
- getAction('/ctop/wpsFile/createTemplateFile', {
- template: type,
- }).then((res) => {
- console.log(res)
- if (res.code == 200) {
- this.src = res.msg
- console.log(this.src)
- } else {
- this.$message.error('请求错误!')
- }
- })
- // getCreateFilePath({
- // template: type
- // }).then(res => {
- // console.log(res)
- // // if (res.data.data){
- // this.src = res.data.msg;
- // // }else {
- // // this.showErrMeg('请求错误!');
- // // }
- // }).catch(() => {
- // this.showErrMeg('请求错误!');
- // });
- },
- bindProject(item) {
- this.visibleProject = true
- this.projectId = ''
- this.fileId = item.id
- // this.getParticipateList()
- },
- getViewUrlDbPath(item) {
- // this.loading = true;
- const params = {
- fileId: item.id,
- userId: item.creator,
- }
- getAction('/v1/api/file/getViewUrlDbPath', params).then((res) => {
- console.log(res)
- if (res.data) {
- let r = res.data
- this.visibleBind = true
- // this.src = r.wpsUrl;
- this.type = 'edit'
- this.openWps(r.wpsUrl, r.token)
- } else {
- this.$message.error('请求错误')
- }
- })
- },
- openWps(url, token) {
- this.$nextTick(() => {
- let _this = this
- const wps = _this.wps.config({
- mode: 'simple',
- mount: document.querySelector('#showWps'),
- wpsUrl: url,
- })
- wps.setToken({
- token: token,
- })
- let app = wps.Application
- })
- },
- },
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less';
- </style>
|