scriptFile.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. <style>
  2. #wps-iframe {
  3. height: 100%;
  4. }
  5. </style>
  6. <template>
  7. <a-card :bordered="false">
  8. <!-- 查询区域 -->
  9. <div class="table-page-search-wrapper">
  10. <a-form layout="inline">
  11. <a-row :gutter="24">
  12. <a-col :md="6" :sm="8">
  13. <selectTable :projectId.sync="queryParam.projectId"></selectTable>
  14. </a-col>
  15. <a-col :md="6" :sm="8">
  16. <a-form-item label="脚本名称">
  17. <a-input placeholder="请输入脚本名称" v-model="queryParam.name"></a-input>
  18. </a-form-item>
  19. </a-col>
  20. <a-col :md="6" :sm="8">
  21. <a-form-item label="创建人">
  22. <a-select
  23. v-model="queryParam.creator"
  24. showSearch
  25. allowClear
  26. placeholder="请选择创建人"
  27. optionFilterProp="children"
  28. style="width: 100%"
  29. :filterOption="true"
  30. @search="search"
  31. @focus="getAllUserList"
  32. >
  33. <a-select-option
  34. v-for="appModel in options"
  35. :key="appModel.userId + new Date().getTime()"
  36. :value="appModel.userId"
  37. >
  38. {{ appModel.realName }}
  39. &#12288;&#12288;{{ appModel.roleName }}
  40. </a-select-option>
  41. </a-select>
  42. </a-form-item>
  43. </a-col>
  44. <a-col :md="6" :sm="8">
  45. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  46. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  47. <a-button
  48. type="primary"
  49. @click="searchReset"
  50. icon="reload"
  51. style="margin-left: 8px"
  52. >重置</a-button>
  53. </span>
  54. </a-col>
  55. </a-row>
  56. </a-form>
  57. </div>
  58. <div style="float:right;margin:0 0 20px 20px">
  59. <!-- <a-upload
  60. name="file"
  61. :multiple="false"
  62. :action="uploadAction"
  63. :headers="tokenHeader"
  64. :showUploadList="false"
  65. :beforeUpload="beforeUpload"
  66. @change="handleChange"
  67. style="margin-right:20px"
  68. >
  69. <a-button :disabled="loadingElse">
  70. <a-icon type="upload" />
  71. {{loadingElse?'上传中,请稍后':'文件上传'}}
  72. </a-button>
  73. </a-upload> -->
  74. <!-- <a-dropdown placement="bottomRight">
  75. <a-button>新增</a-button>
  76. <a-menu slot="overlay">
  77. <a-menu-item>
  78. <a-icon type="file-word" />
  79. <span style="text-align: center" @click="creatWps('word')">文字文档</span>
  80. </a-menu-item>
  81. <a-menu-item>
  82. <a-icon type="file-excel" />
  83. <span style="text-align: center" @click="creatWps('excel')">表格文档</span>
  84. </a-menu-item>
  85. <a-menu-item>
  86. <a-icon type="file-ppt" />
  87. <span style="text-align: center" @click="creatWps('ppt')">演示文档</span>
  88. </a-menu-item>
  89. </a-menu>
  90. </a-dropdown> -->
  91. </div>
  92. <div style="clear:both"></div>
  93. <div>
  94. <a-table
  95. ref="table"
  96. size="middle"
  97. bordered
  98. rowKey="id"
  99. :columns="columns"
  100. :dataSource="dataSource"
  101. :pagination="ipagination"
  102. :loading="loading"
  103. @change="handleTableChange"
  104. >
  105. <span slot="createTime" slot-scope="text">{{text}}</span>
  106. <span slot="size" slot-scope="text">{{text|sizeShow}}</span>
  107. <span slot="projectId_dictText" slot-scope="text">{{text?text:'-'}}</span>
  108. <span slot="action" slot-scope="text, record">
  109. <a @click="getViewUrlDbPath(record)">预览</a>
  110. <a-divider type="vertical" />
  111. <!-- <a @click="bindProject(record)">项目绑定</a>
  112. <a-divider type="vertical" /> -->
  113. <a @click="downLoad(record)">下载</a>
  114. <!-- <a-divider type="vertical" /> -->
  115. <!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  116. <a>删除</a>
  117. </a-popconfirm> -->
  118. </span>
  119. </a-table>
  120. </div>
  121. <div id="show"></div>
  122. <a-modal
  123. :maskClosable="false"
  124. :title="type=='add'?'脚本新建':'脚本编辑'"
  125. v-model="visibleBind"
  126. :width="1200"
  127. :footer="null"
  128. >
  129. <iframe :src="src" frameborder="0" style="width:100%;height:600px" v-if="type=='add'"></iframe>
  130. <div id="showWps" style="height:600px" v-show="type=='edit'"></div>
  131. </a-modal>
  132. <a-modal :maskClosable="false" title="绑定项目" v-model="visibleProject" @ok="handleOk">
  133. <span>项目选择:</span>
  134. <a-select
  135. v-model="projectId"
  136. showSearch
  137. style="width:300px"
  138. optionFilterProp="children"
  139. :filterOption="filterOption"
  140. >
  141. <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
  142. {{ item.projectName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
  143. item.mediaId == "1" ? '头条' :item.mediaId == "2"? '快手':item.mediaId == "3"?'头条内广':'快手内广'
  144. }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.advertiserName }}
  145. </a-select-option>
  146. </a-select>
  147. </a-modal>
  148. <!-- table区域-end -->
  149. <!-- 表单区域 -->
  150. <wpsFile-modal ref="modalForm" @ok="modalFormOk"></wpsFile-modal>
  151. </a-card>
  152. </template>
  153. <script>
  154. import { getAction, postAction, postFile, deleteAction, putAction } from '@/api/manage'
  155. import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
  156. import WpsFileModal from './modules/WpsFileModal'
  157. import { mapGetters } from 'vuex'
  158. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  159. import qs from 'qs'
  160. const fileSuffix = [
  161. 'xls',
  162. 'xlt',
  163. 'et',
  164. 'xlsx',
  165. 'xltx',
  166. 'csv',
  167. 'xlsm',
  168. 'xltm',
  169. 'doc',
  170. 'dot',
  171. 'wps',
  172. 'wpt',
  173. 'docx',
  174. 'dotx',
  175. 'docm',
  176. 'dotm',
  177. 'ppt',
  178. 'pptx',
  179. 'pptm',
  180. 'ppsx',
  181. 'ppsm',
  182. 'pps',
  183. 'potx',
  184. 'potm',
  185. 'dpt',
  186. 'dps',
  187. 'pdf',
  188. ]
  189. export default {
  190. name: 'WpsFileList',
  191. mixins: [JeecgListMixin],
  192. components: {
  193. WpsFileModal,
  194. selectTable,
  195. },
  196. data() {
  197. return {
  198. description: 'wps文件管理页面',
  199. dataElse: [],
  200. projectId: '',
  201. visibleProject: false,
  202. // 表头
  203. visibleBind: false,
  204. wpsType: 'word',
  205. type: 'add',
  206. uploadAction: 'http://api.tjyourong.com.cn/jeecg-boot/ctop/wpsFile/uploadFile',
  207. columns: [
  208. {
  209. title: '文件名称',
  210. align: 'center',
  211. dataIndex: 'name',
  212. },
  213. {
  214. title: '文件大小(KB)',
  215. align: 'center',
  216. dataIndex: 'size',
  217. scopedSlots: {
  218. customRender: 'size',
  219. },
  220. },
  221. {
  222. title: '物料名称',
  223. align: 'center',
  224. dataIndex: 'materialName',
  225. scopedSlots: {
  226. customRender: 'materialName',
  227. },
  228. },
  229. {
  230. title: '绑定项目',
  231. align: 'center',
  232. dataIndex: 'projectName',
  233. scopedSlots: {
  234. customRender: 'projectName',
  235. },
  236. },
  237. {
  238. title: '创建人',
  239. align: 'center',
  240. dataIndex: 'creatorName',
  241. },
  242. {
  243. title: '发布时间',
  244. align: 'center',
  245. dataIndex: 'createTime',
  246. scopedSlots: {
  247. customRender: 'createTime',
  248. },
  249. },
  250. {
  251. title: '操作',
  252. dataIndex: 'action',
  253. align: 'center',
  254. scopedSlots: {
  255. customRender: 'action',
  256. },
  257. },
  258. ],
  259. url: {
  260. list: '/platformScript/list',
  261. delete: '/ctop/wpsFile/delete',
  262. deleteBatch: '/ctop/wpsFile/deleteBatch',
  263. exportXlsUrl: 'ctop/wpsFile/exportXls',
  264. importExcelUrl: 'ctop/wpsFile/importExcel',
  265. },
  266. src: '',
  267. loadingElse: false,
  268. fileId: '',
  269. loadingOk: false,
  270. options: [],
  271. }
  272. },
  273. computed: {
  274. importExcelUrl: function () {
  275. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
  276. },
  277. },
  278. watch: {
  279. visibleBind(n, o) {
  280. if (!n) {
  281. this.src = ''
  282. this.loadData(1)
  283. }
  284. },
  285. },
  286. filters: {
  287. getDate(value) {
  288. let date = new Date(value)
  289. let y = date.getFullYear()
  290. let MM = date.getMonth() + 1
  291. MM = MM < 10 ? '0' + MM : MM
  292. let d = date.getDate()
  293. d = d < 10 ? '0' + d : d
  294. return y + '-' + MM + '-' + d
  295. },
  296. sizeShow(value) {
  297. return (value / 1024).toFixed(2)
  298. },
  299. },
  300. mounted() {
  301. this.getParticipateList()
  302. // getAction('/sys/user/getAllUserList', '').then((res) => {
  303. // if (res.success) {
  304. // this.options = res.result
  305. // }
  306. // })
  307. },
  308. methods: {
  309. search(value) {
  310. this.options = []
  311. if (value != '') {
  312. // this.options = this.list.filter(item => {
  313. // var data = item.realName + ' ' + item.roleName
  314. // return data.toLowerCase().indexOf(value.toLowerCase()) > -1
  315. // })
  316. // this.options = [...this.options]
  317. this.getAllUserList(value)
  318. } else {
  319. this.getAllUserList()
  320. }
  321. },
  322. getAllUserList(value) {
  323. getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: value }).then((res) => {
  324. if (res.success) {
  325. this.options = res.result.list
  326. }
  327. })
  328. },
  329. downLoad(item) {
  330. let downloadElement = document.createElement('a')
  331. downloadElement.href = item.downloadUrl
  332. downloadElement.download = item.name //下载后文件名
  333. document.body.appendChild(downloadElement)
  334. downloadElement.click() //点击下载
  335. document.body.removeChild(downloadElement) //下载完成移除元素
  336. },
  337. filterOption(input, option) {
  338. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  339. },
  340. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  341. getParticipateList() {
  342. getAction('/ctop/projectMember/participateList', {
  343. userId: this.userInfo().id,
  344. }).then((res) => {
  345. if (res.code == 0) {
  346. this.dataElse = res.result
  347. }
  348. })
  349. },
  350. beforeUpload(file) {
  351. this.loadingElse = true
  352. const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
  353. const fileName = file.name
  354. const fileStrArr = fileName.split('.')
  355. const suffix = fileStrArr[fileStrArr.length - 1]
  356. let result = fileSuffix.some((item) => {
  357. return item === suffix
  358. })
  359. if (!result) {
  360. this.$message.error('不支持该文件类型')
  361. this.loadingElse = false
  362. return false
  363. }
  364. if (size > 10) {
  365. this.$message.error('文件不能大于10MB')
  366. this.loadingElse = false
  367. return false
  368. }
  369. },
  370. handleChange(info) {
  371. if (info.file.status !== 'uploading') {
  372. console.log(info.file, info.fileList)
  373. }
  374. if (info.file.status === 'done') {
  375. this.$message.success(`${info.file.name} 上传成功`)
  376. this.loadingElse = false
  377. this.loadData(1)
  378. } else if (info.file.status === 'error') {
  379. this.$message.error(`${info.file.name} file upload failed.`)
  380. this.loadingElse = false
  381. }
  382. },
  383. handleOk(e) {
  384. this.loadingOk = true
  385. var params = qs.stringify({
  386. projectId: this.projectId,
  387. fileId: this.fileId,
  388. })
  389. postAction('/ctop/wpsFile/bindProject', params).then((res) => {
  390. if (res.success) {
  391. this.visibleProject = false
  392. this.projectId = ''
  393. this.loadingOk = false
  394. this.loadData()
  395. } else {
  396. this.$message.error('绑定失败')
  397. this.loadingOk = false
  398. }
  399. })
  400. },
  401. creatWps(type) {
  402. console.log(type)
  403. this.visibleBind = true
  404. this.wpsType = type
  405. this.type = 'add'
  406. getAction('/ctop/wpsFile/createTemplateFile', {
  407. template: type,
  408. }).then((res) => {
  409. console.log(res)
  410. if (res.code == 200) {
  411. this.src = res.msg
  412. console.log(this.src)
  413. } else {
  414. this.$message.error('请求错误!')
  415. }
  416. })
  417. // getCreateFilePath({
  418. // template: type
  419. // }).then(res => {
  420. // console.log(res)
  421. // // if (res.data.data){
  422. // this.src = res.data.msg;
  423. // // }else {
  424. // // this.showErrMeg('请求错误!');
  425. // // }
  426. // }).catch(() => {
  427. // this.showErrMeg('请求错误!');
  428. // });
  429. },
  430. bindProject(item) {
  431. this.visibleProject = true
  432. this.projectId = ''
  433. this.fileId = item.id
  434. // this.getParticipateList()
  435. },
  436. getViewUrlDbPath(item) {
  437. // this.loading = true;
  438. const params = {
  439. fileId: item.id,
  440. userId: item.creator,
  441. }
  442. getAction('/v1/api/file/getPlatformScriptViewUrlDbPath', params).then((res) => {
  443. console.log(res)
  444. if (res.data) {
  445. let r = res.data
  446. this.visibleBind = true
  447. // this.src = r.wpsUrl;
  448. this.type = 'edit'
  449. this.openWps(r.wpsUrl, r.token)
  450. } else {
  451. this.$message.error('请求错误')
  452. }
  453. })
  454. },
  455. openWps(url, token) {
  456. this.$nextTick(() => {
  457. let _this = this
  458. const wps = _this.wps.config({
  459. mode: 'simple',
  460. mount: document.querySelector('#showWps'),
  461. wpsUrl: url,
  462. })
  463. wps.setToken({
  464. token: token,
  465. })
  466. let app = wps.Application
  467. })
  468. },
  469. },
  470. }
  471. </script>
  472. <style scoped>
  473. @import '~@assets/less/common.less';
  474. </style>