抖音小程序发布平台
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

354 lines
8.2 KiB

  1. <template>
  2. <div class="layout server">
  3. <div class="title">
  4. <h3>草稿/模板</h3>
  5. </div>
  6. <el-button type="primary" @click="refresh">刷新</el-button>
  7. <div class="content">
  8. <div>
  9. <h3 class="h3">草稿</h3>
  10. <table-list :ref="tk1" :options="optionsTable1"></table-list>
  11. <alert-dialog ref="alertDialogKey"></alert-dialog>
  12. </div>
  13. <div>
  14. <h3 class="h3">模板</h3>
  15. <table-list :ref="tk2" :options="optionsTable2"></table-list>
  16. <alert-dialog ref="alertDialogKey"></alert-dialog>
  17. </div>
  18. </div>
  19. <choose-app :params="params" :ref="tKey" :t-key="tKey" :cb="getShopCb"></choose-app>
  20. </div>
  21. </template>
  22. <script>
  23. import TableList from "./../../core/comps/table/tableList.vue";
  24. import { configUrl } from "./../../utils/config.js";
  25. import { mapState, mapActions } from "vuex";
  26. import moment from 'moment';
  27. import alertDialog from "../../core/comps/input/alertDialog.vue";
  28. import commonUtil from './../../core/tool/commonUtil';
  29. import chooseApp from "./../../components/marketing/businessComp/chooseApp.vue";
  30. export default {
  31. name: 'draft',
  32. components: {TableList,alertDialog,chooseApp},
  33. data () {
  34. return {
  35. data:[],
  36. tk1:"draftTableKey1",
  37. tk2:"draftTableKey2",
  38. tKey: "chooseApp",
  39. params:"",
  40. draft:"draft",
  41. ruleForm: {
  42. //副标题
  43. subTitle: "",
  44. },
  45. rules:{
  46. subTitle: [
  47. {
  48. min: 1,
  49. max: 50,
  50. message: "副标题最大50个字符!",
  51. trigger: "blur"
  52. }
  53. ],
  54. },
  55. optionsTable1:{
  56. actions :[
  57. {key:"edit",val:"转为模板(4)",action:this.addToTemplate}
  58. ],
  59. map:[
  60. {key:"draftId",val:"草稿ID"},
  61. {key:"userVersion",val:"版本号"},
  62. {key:"createTime",val:"创建时间",type:'dateTime'},
  63. {key:"userDesc",val:"版本描述"},
  64. ],
  65. getUrl:()=>{
  66. return configUrl.tempDraftList;
  67. },
  68. pageOption:{
  69. showIf:false,
  70. sizeKey:"pageSize",
  71. indexKey:"pageNum",
  72. index:1,
  73. size:10
  74. },
  75. analysis:(res)=>{
  76. res.data.map((item,index)=>{
  77. item.createTime=Number(item.createTime)*1000
  78. })
  79. return {
  80. data:res.data,
  81. count:res.data.total
  82. };
  83. }
  84. },
  85. optionsTable2:{
  86. actions :[
  87. {key:"edit",val:"删除",action:this.goDelete},
  88. {key:"edit",val:"提交(5)",action:this.choseAPP},
  89. ],
  90. map:[
  91. {key:"templateId",val:"模板ID"},
  92. {key:"userVersion",val:"版本号"},
  93. {key:"createTime",val:"创建时间",type:'dateTime'},
  94. {key:"userDesc",val:"版本描述"}
  95. ],
  96. getUrl:()=>{
  97. return configUrl.getTempList;
  98. },
  99. pageOption:{
  100. showIf:false,
  101. sizeKey:"pageSize",
  102. indexKey:"pageNum",
  103. index:1,
  104. size:10,
  105. },
  106. analysis:(res)=>{
  107. res.data.map((item,index)=>{
  108. item.createTime=Number(item.createTime)*1000
  109. })
  110. return {
  111. data:res.data,
  112. count:res.data.total
  113. };
  114. }
  115. }
  116. }
  117. },
  118. computed:{
  119. ...mapState({
  120. topNav:state=>state.topNav.data, //将 this.topNav 映射为 this.$store.topNav.data
  121. channels:state=>state.couponStore.channels,
  122. index:state=>state.topNav.index
  123. })
  124. },
  125. methods:{
  126. ...mapActions([
  127. "setIndex"
  128. ]),
  129. //选择小程序
  130. choseAPP(item) {
  131. console.log(item)
  132. this.params = JSON.stringify(item);
  133. this.$refs[this.tKey].openDialog(this.params);
  134. },
  135. //选择小程序
  136. getShopCb(items) {
  137. this.shopTableData = [];
  138. items.data.map((item, index) => {
  139. let haveIf = false;
  140. this.shopTableData.map((item01, index01) => {
  141. if(item.id == item01.id) {
  142. haveIf = true
  143. }
  144. })
  145. if (haveIf == false) {
  146. item.merchantName = item.name;
  147. item.merchantLinkPhone = item.linkPhone
  148. this.shopTableData.push(item);
  149. }
  150. })
  151. },
  152. //删除模板
  153. goDelete(item) {
  154. this.$refs['alertDialogKey'].openDialog("此操作会删除草稿, 是否继续?",() => {
  155. let params = { templateId: item.templateId}
  156. this.postFetch(configUrl.deleteTemplate, params).then(d => {
  157. this.showAlertMsg("success", '操作成功!');
  158. this.search();
  159. })
  160. });
  161. },
  162. //将草稿转为模板
  163. addToTemplate(item) {
  164. this.$refs['alertDialogKey'].openDialog("此操作会将草稿转为模板, 是否继续?",() => {
  165. let params = { draftId: item.draftId};
  166. this.postFetch(configUrl.addToTemplate, params).then(d => {
  167. this.showAlertMsg("success", '操作成功!');
  168. this.search();
  169. })
  170. })
  171. },
  172. search:function(){
  173. let tk1 = this.$refs[this.tk1];
  174. let tk2 = this.$refs[this.tk2];
  175. tk1.search(tk1.getParams().index);
  176. tk2.search(tk2.getParams().index);
  177. },
  178. //刷新
  179. refresh(){
  180. //更新草稿列表
  181. //更新模板列表
  182. this.search();
  183. }
  184. },
  185. mounted(){
  186. },
  187. created() {
  188. this.setIndex("3");
  189. }
  190. }
  191. </script>
  192. <!-- Add "scoped" attribute to limit CSS to this component only -->
  193. <style scoped>
  194. .tableContainer{
  195. width: 100%;
  196. margin-top: 30px;
  197. }
  198. .h3{
  199. font-size: 16px;
  200. }
  201. .sever{
  202. border-radius: 4px;
  203. border:1px solid #e7e7eb;
  204. padding: 0 20px 10px;
  205. margin-bottom: 20px;
  206. }
  207. .title{
  208. margin-bottom: 10px;
  209. }
  210. .title h3{
  211. font-size: 18px;
  212. font-weight: bold;
  213. }
  214. .layout-content{
  215. background: #fff;
  216. overflow: hidden;
  217. }
  218. .btn-group{
  219. text-align: center;
  220. margin-top: 26px;
  221. }
  222. .layout-content table{
  223. width:100%;
  224. }
  225. .layout-content table tr td{
  226. padding:17px 0;
  227. text-align:left;
  228. }
  229. .layout-content table tr td:nth-child(1){
  230. padding:17px 0 17px 18px;
  231. width:200px;
  232. text-align:center;
  233. }
  234. .layout-content table tr td:nth-child(2){
  235. padding:17px 15px;
  236. width:10px;
  237. text-align:center;
  238. }
  239. .layout-content table tr td:nth-child(3){
  240. padding:17px 10px 17px 0;
  241. width:180px;
  242. text-align:center;
  243. }
  244. .layout-content table tr td:nth-child(4){
  245. padding:17px 10px;
  246. width:240px;
  247. text-align:center;
  248. }
  249. .layout-content table tr td:nth-child(5){
  250. padding:17px 10px;
  251. text-align:left;
  252. }
  253. .layout-content table tr:hover{
  254. cursor:pointer;
  255. background:#F4F7F9;
  256. }
  257. .editBox,.delBox{
  258. width:40px;
  259. height:40px;
  260. text-align:center;
  261. line-height:40px;
  262. display:inline-block;
  263. color:#fff;
  264. font-size:14px;
  265. border-radius:3px;
  266. margin-right:20px;
  267. display:none;
  268. }
  269. .editBox{
  270. background:#51A9C9;
  271. }
  272. .delBox{
  273. background:#EE7653;
  274. }
  275. .layout-content table tr:hover .editBox{
  276. display:inline-block;
  277. }
  278. .layout-content table tr:hover .delBox{
  279. display:inline-block;
  280. }
  281. .btnGroupBox{
  282. margin-top:20px;
  283. }
  284. .addBox{
  285. width:146px;
  286. height:40px;
  287. text-align:center;
  288. line-height:40px;
  289. display:inline-block;
  290. color:#fff;
  291. font-size:14px;
  292. border-radius:3px;
  293. margin-right:20px;
  294. background:#6B5EC9;
  295. cursor:pointer;
  296. }
  297. .addBox i{
  298. margin-right:5px;
  299. }
  300. .saveBox{
  301. width:91px;
  302. height:40px;
  303. text-align:center;
  304. line-height:40px;
  305. display:block;
  306. color:#fff;
  307. font-size:14px;
  308. border-radius:3px;
  309. background:#51A9C9;
  310. margin: 0 auto!important;
  311. cursor:pointer;
  312. }
  313. .addBox:hover{
  314. background:#7A6CE1;
  315. }
  316. .addBox:active{
  317. background:#6357BB;
  318. }
  319. .editBox:hover{
  320. background:#5DC1E5;
  321. }
  322. .editBox:active{
  323. background:#4490AB;
  324. }
  325. .saveBox:hover{
  326. background:#5DC1E5;
  327. }
  328. .saveBox:active{
  329. background:#4490AB;
  330. }
  331. .delBox:hover{
  332. background:#FF8460;
  333. }
  334. .delBox:active{
  335. background:#DF6F4E;
  336. }
  337. </style>
  338. <style>
  339. .save{
  340. display: block;
  341. width:90px;
  342. margin:0 auto;
  343. }
  344. .tips{
  345. color:red;
  346. text-align:center;
  347. margin-top:10px;
  348. }
  349. </style>