main.ftl 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>文章主体</title>
  5. <#include "../../include/head-file.ftl">
  6. </head>
  7. <body>
  8. <div id="main" class="ms-index" v-cloak>
  9. <ms-search ref="search" @search="search" :condition-data="conditionList" :conditions="conditions"></ms-search>
  10. <el-header class="ms-header" height="50px">
  11. <el-col :span="12">
  12. <@shiro.hasPermission name="cms:content:save">
  13. <el-button v-if="leaf==true" type="primary" icon="el-icon-plus" size="mini" @click="save()">新增</el-button>
  14. </@shiro.hasPermission>
  15. <@shiro.hasPermission name="cms:content:del">
  16. <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(selectionList)" :disabled="!selectionList.length">删除</el-button>
  17. </@shiro.hasPermission>
  18. </el-col>
  19. </el-header>
  20. <div class="ms-search">
  21. <el-row>
  22. <el-form :model="form" ref="searchForm" label-width="120px" size="mini">
  23. <el-row>
  24. <el-col :span="8">
  25. <el-form-item label="文章标题" prop="contentTitle">
  26. <el-input v-model="form.contentTitle"
  27. :disabled="false"
  28. :style="{width: '100%'}"
  29. :clearable="true"
  30. placeholder="请输入文章标题">
  31. </el-input>
  32. </el-form-item>
  33. </el-col>
  34. <el-col :span="8">
  35. <el-form-item label="文章类型" prop="contentType">
  36. <el-select v-model="form.contentType"
  37. :style="{width: '100%'}"
  38. :filterable="false"
  39. :disabled="false"
  40. :multiple="true" :clearable="true"
  41. placeholder="请选择文章类型">
  42. <el-option v-for='item in contentTypeOptions' :key="item.dictValue" :value="item.dictValue"
  43. :label="item.dictLabel"></el-option>
  44. </el-select>
  45. </el-form-item>
  46. </el-col>
  47. <el-col :span="8" style="text-align: right;padding-right: 10px;">
  48. <el-button type="primary" icon="el-icon-search" size="mini" @click="form.sqlWhere=null;currentPage=1;list()">查询</el-button>
  49. <el-button @click="rest" icon="el-icon-refresh" size="mini">重置</el-button>
  50. <el-button type="primary" size="mini" @click="$refs.search.open()"><i class="iconfont icon-shaixuan"></i>筛选</el-button>
  51. </el-col>
  52. </el-row>
  53. </el-form>
  54. </el-row>
  55. </div>
  56. <el-main class="ms-container">
  57. <el-table height="calc(100vh - 68px)" v-loading="loading" ref="multipleTable" border :data="dataList" tooltip-effect="dark" @selection-change="handleSelectionChange">
  58. <template slot="empty">
  59. {{emptyText}}
  60. </template>
  61. <el-table-column type="selection" width="40"></el-table-column>
  62. <el-table-column label="编号" width="200" prop="id">
  63. <template slot='header'>编号
  64. <el-popover placement="top-start" title="提示" trigger="hover" >
  65. 标签:<a href="http://doc.mingsoft.net/mcms/biao-qian/wen-zhang-lie-biao-ms-arclist.html#%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8-msarclist" target="_blank">${'$'}{field.id}</a>
  66. <i class="el-icon-question" slot="reference"></i>
  67. </el-popover>
  68. </template>
  69. </el-table-column>
  70. <el-table-column label="栏目名" align="left" prop="categoryId" :formatter="contentCategoryIdFormat" width="180">
  71. </el-table-column>
  72. <el-table-column label="文章标题" align="left" prop="contentTitle" show-overflow-tooltip>
  73. </el-table-column>
  74. <el-table-column label="作者" align="left" prop="contentAuthor" width="100" show-overflow-tooltip>
  75. </el-table-column>
  76. <el-table-column label="排序" width="55" align="right" prop="contentSort">
  77. </el-table-column>
  78. <el-table-column label="点击量" width="90" align="right" prop="contentHit">
  79. <template slot='header'>点击量
  80. <el-popover placement="top-start" title="提示" trigger="hover" >
  81. 标签:<a href="http://doc.mingsoft.net/mcms/biao-qian/wen-zhang-lie-biao-ms-arclist.html#%E6%96%87%E7%AB%A0%E5%88%97%E8%A1%A8-msarclist" target="_blank">${'$'}{field.hit}</a>
  82. <i class="el-icon-question" slot="reference"></i>
  83. </el-popover>
  84. </template>
  85. <template slot-scope="scope">
  86. {{scope.row.contentHit?scope.row.contentHit:0}}
  87. </template>
  88. </el-table-column>
  89. <el-table-column label="发布时间" align="center" prop="contentDatetime" :formatter="dateFormat" width="120">
  90. </el-table-column>
  91. <el-table-column label="操作" width="120" align="center">
  92. <template slot-scope="scope">
  93. <@shiro.hasPermission name="cms:content:update">
  94. <el-link type="primary" :underline="false" @click="save(scope.row.id)">编辑</el-link>
  95. </@shiro.hasPermission>
  96. <@shiro.hasPermission name="cms:content:del">
  97. <el-link type="primary" :underline="false" @click="del([scope.row])">删除</el-link>
  98. </@shiro.hasPermission>
  99. </template>
  100. </el-table-column>
  101. </el-table>
  102. <el-pagination
  103. background
  104. :page-sizes="[10,20,30,40,50,100]"
  105. layout="total, sizes, prev, pager, next, jumper"
  106. :current-page="currentPage"
  107. :page-size="pageSize"
  108. :total="total"
  109. class="ms-pagination"
  110. @current-change='currentChange'
  111. @size-change="sizeChange">
  112. </el-pagination>
  113. </el-main>
  114. </div>
  115. </body>
  116. </html>
  117. <script>
  118. var indexVue = new Vue({
  119. el: '#main',
  120. data: {
  121. conditionList: [{
  122. action: 'and',
  123. field: 'content_title',
  124. el: 'eq',
  125. model: 'contentTitle',
  126. name: '文章标题',
  127. type: 'input'
  128. }, {
  129. action: 'and',
  130. field: 'category_id',
  131. el: 'eq',
  132. model: 'categoryId',
  133. name: '所属栏目',
  134. key: 'id',
  135. title: 'categoryTitle',
  136. type: 'cascader',
  137. multiple: false
  138. }, {
  139. action: 'and',
  140. field: 'content_type',
  141. el: 'eq',
  142. model: 'contentType',
  143. name: '文章类型',
  144. key: 'dictValue',
  145. title: 'dictLabel',
  146. type: 'checkbox',
  147. label: false,
  148. multiple: true
  149. }, {
  150. action: 'and',
  151. field: 'content_display',
  152. el: 'eq',
  153. model: 'contentDisplay',
  154. name: '是否显示',
  155. key:'value',
  156. title: 'label',
  157. type: 'radio',
  158. label: true,
  159. multiple: false
  160. }, {
  161. action: 'and',
  162. field: 'content_author',
  163. el: 'eq',
  164. model: 'contentAuthor',
  165. name: '文章作者',
  166. type: 'input'
  167. }, {
  168. action: 'and',
  169. field: 'content_source',
  170. el: 'eq',
  171. model: 'contentSource',
  172. name: '文章来源',
  173. type: 'input'
  174. }, {
  175. action: 'and',
  176. field: 'ct.content_datetime',
  177. model: 'contentDatetime',
  178. el: 'gt',
  179. name: '发布时间',
  180. type: 'date'
  181. }, {
  182. action: 'and',
  183. field: 'content_sort',
  184. el: 'eq',
  185. model: 'contentSort',
  186. name: '自定义顺序',
  187. type: 'number'
  188. }, {
  189. action: 'and',
  190. field: 'content_description',
  191. el: 'eq',
  192. model: 'contentDescription',
  193. name: '描述',
  194. type: 'textarea'
  195. }, {
  196. action: 'and',
  197. field: 'content_keyword',
  198. el: 'eq',
  199. model: 'contentKeyword',
  200. name: '关键字',
  201. type: 'textarea'
  202. }, {
  203. action: 'and',
  204. field: 'content_details',
  205. el: 'like',
  206. model: 'contentDetails',
  207. name: '文章内容',
  208. type: 'input'
  209. }, {
  210. action: 'and',
  211. field: 'content_url',
  212. el: 'eq',
  213. model: 'contentUrl',
  214. name: '文章跳转链接地址',
  215. type: 'input'
  216. },{
  217. action: 'and',
  218. field: 'ct.create_date',
  219. el: 'eq',
  220. model: 'createDate',
  221. name: '创建时间',
  222. type: 'date'
  223. }, {
  224. action: 'and',
  225. field: 'ct.update_date',
  226. el: 'eq',
  227. model: 'updateDate',
  228. name: '修改时间',
  229. type: 'date'
  230. }],
  231. conditions: [],
  232. contentCategoryIdOptions: [],
  233. dataList: [],
  234. //文章列表
  235. selectionList: [],
  236. //文章列表选中
  237. total: 0,
  238. //总记录数量
  239. pageSize: 10,
  240. //页面数量
  241. currentPage: 1,
  242. //初始页
  243. manager: ms.manager,
  244. loadState: false,
  245. loading: true,
  246. //加载状态
  247. emptyText: '',
  248. //提示文字
  249. contentTypeOptions: [],
  250. contentDisplayOptions: [{
  251. "value": "0",
  252. "label": "是"
  253. }, {
  254. "value": "1",
  255. "label": "否"
  256. }],
  257. //搜索表单
  258. form: {
  259. sqlWhere: null,
  260. // 文章标题
  261. contentTitle: null,
  262. // 文章类型
  263. contentType: null,
  264. categoryId: ''
  265. },
  266. leaf:true
  267. },
  268. methods: {
  269. //查询列表
  270. list: function () {
  271. var that = this;
  272. that.loading = true;
  273. that.loadState = false;
  274. var page = {
  275. pageNo: that.currentPage,
  276. pageSize: that.pageSize
  277. };
  278. var form = JSON.parse(JSON.stringify(that.form));
  279. if (form.contentType!=null && form.contentType.length > 0) {
  280. form.contentType = form.contentType.join(',');
  281. }
  282. for (var key in form) {
  283. if (!form[key]) {
  284. delete form[key];
  285. }
  286. }
  287. history.replaceState({
  288. form: form,
  289. page: page
  290. }, "");
  291. //筛选栏目类型,1=列表
  292. that.form.categoryType = '1';
  293. ms.http.post(ms.manager + "/cms/content/list.do", form.sqlWhere ? Object.assign({}, {
  294. categoryType: '1',
  295. sqlWhere: form.sqlWhere
  296. }, page) : Object.assign({}, form, page)).then(function (res) {
  297. if (that.loadState) {
  298. that.loading = false;
  299. } else {
  300. that.loadState = true;
  301. }
  302. if (!res.result || res.data.total <= 0) {
  303. that.emptyText = '暂无数据';
  304. that.dataList = [];
  305. that.total = 0;
  306. } else {
  307. that.emptyText = '';
  308. that.total = res.data.total;
  309. that.dataList = res.data.rows;
  310. }
  311. }).finally(function () {
  312. that.loading = false;
  313. });
  314. setTimeout(function () {
  315. if (that.loadState) {
  316. that.loading = false;
  317. } else {
  318. that.loadState = true;
  319. }
  320. }, 500);
  321. },
  322. //文章列表选中
  323. handleSelectionChange: function (val) {
  324. this.selectionList = val;
  325. },
  326. //删除
  327. del: function (row) {
  328. var that = this;
  329. that.$confirm('此操作将永久删除所选内容, 是否继续?', '提示', {
  330. confirmButtonText: '确定',
  331. cancelButtonText: '取消',
  332. type: 'warning'
  333. }).then(function () {
  334. ms.http.post(ms.manager + "/cms/content/delete.do", row.length ? row : [row], {
  335. headers: {
  336. 'Content-Type': 'application/json'
  337. }
  338. }).then(function (res) {
  339. if (res.result) {
  340. that.$notify({
  341. title:'成功',
  342. type: 'success',
  343. message: '删除成功!'
  344. }); //删除成功,刷新列表
  345. that.list();
  346. } else {
  347. that.$notify({
  348. title: '失败',
  349. message: res.msg,
  350. type: 'warning'
  351. });
  352. }
  353. });
  354. })
  355. },
  356. //新增
  357. save: function (id) {
  358. //id有值时编辑
  359. if (id) {
  360. location.href = this.manager + "/cms/content/form.do?id=" + id;
  361. }else {
  362. //根据当前栏目新增时自动选中栏目
  363. var categoryId = this.form.categoryId;
  364. if (categoryId) {
  365. location.href = this.manager + "/cms/content/form.do?categoryId=" + this.form.categoryId;
  366. }else {
  367. //如果栏目id没有值就单纯的新增,不自动选定栏目
  368. location.href = this.manager + "/cms/content/form.do";
  369. }
  370. }
  371. },
  372. //表格数据转换
  373. contentCategoryIdFormat: function (row, column, cellValue, index) {
  374. var value = "";
  375. if (cellValue) {
  376. var data = this.contentCategoryIdOptions.find(function (value) {
  377. return value.id == cellValue;
  378. });
  379. if (data && data.categoryTitle) {
  380. value = data.categoryTitle;
  381. }
  382. }
  383. return value;
  384. },
  385. dateFormat: function (row, column, cellValue, index) {
  386. if (cellValue) {
  387. return ms.util.date.fmt(cellValue, 'yyyy-MM-dd');
  388. } else {
  389. return '';
  390. }
  391. },
  392. contentDisplayFormat: function (row, column, cellValue, index) {
  393. var value = "";
  394. if (cellValue) {
  395. var data = this.contentDisplayOptions.find(function (value) {
  396. return value.value == cellValue;
  397. });
  398. if (data && data.label) {
  399. value = data.label;
  400. }
  401. }
  402. return value;
  403. },
  404. //pageSize改变时会触发
  405. sizeChange: function (pagesize) {
  406. this.loading = true;
  407. this.pageSize = pagesize;
  408. this.list();
  409. },
  410. //currentPage改变时会触发
  411. currentChange: function (currentPage) {
  412. this.loading = true;
  413. this.currentPage = currentPage;
  414. this.list();
  415. },
  416. search: function (data) {
  417. this.form.sqlWhere = JSON.stringify(data);
  418. this.list();
  419. },
  420. //重置表单
  421. rest: function () {
  422. this.form.sqlWhere = null;
  423. this.$refs.searchForm.resetFields();
  424. this.list();
  425. },
  426. //获取contentCategoryId数据源
  427. contentCategoryIdOptionsGet: function () {
  428. var that = this;
  429. ms.http.get(ms.manager + "/cms/category/list.do", {
  430. pageSize: 9999
  431. }).then(function (res) {
  432. if (res.result) {
  433. that.contentCategoryIdOptions = res.data.rows;
  434. }else {
  435. that.$notify({
  436. title: '失败',
  437. message: res.msg,
  438. type: 'warning'
  439. });
  440. }
  441. that.list();
  442. });
  443. },
  444. //获取contentType数据源
  445. contentTypeOptionsGet: function () {
  446. var that = this;
  447. ms.http.get(ms.base + '/mdiy/dict/list.do', {
  448. dictType: '文章属性',
  449. pageSize: 99999
  450. }).then(function (data) {
  451. if(data.result){
  452. data = data.data;
  453. that.contentTypeOptions = data.rows;
  454. }
  455. });
  456. }
  457. },
  458. mounted: function () {
  459. this.contentCategoryIdOptionsGet();
  460. this.contentTypeOptionsGet();
  461. this.form.categoryId = ms.util.getParameter("categoryId");
  462. this.leaf = ms.util.getParameter("leaf")==null?true:JSON.parse(ms.util.getParameter("leaf"));
  463. if (history.hasOwnProperty("state")) {
  464. this.form = history.state.form;
  465. this.currentPage = history.state.page.pageNo;
  466. this.pageSize = history.state.page.pageSize;
  467. }
  468. }
  469. });
  470. </script>
  471. <style>
  472. #main .ms-search {
  473. padding: 20px 0 0;
  474. }
  475. #main .ms-container {
  476. height: calc(100vh - 141px);
  477. }
  478. body{
  479. overflow: hidden;
  480. }
  481. </style>