scriptFile.vue 13 KB

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