index.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
  2. <link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
  3. <style>
  4. #questionIndex {
  5. color: #444;
  6. background: #fff;
  7. padding-bottom: 30px;
  8. }
  9. .shopro-header-container {
  10. display: flex;
  11. justify-content: space-between;
  12. align-items: center;
  13. }
  14. [v-cloak] {
  15. display: none
  16. }
  17. </style>
  18. <script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
  19. <script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
  20. <script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
  21. <div id="questionIndex" v-cloak>
  22. <div class="shopro-header-container">
  23. <div class="choose-status" style="font-size: 14px;">
  24. 常见问题
  25. </div>
  26. <div class="custom-search">
  27. <el-input placeholder="请输入搜索名称" suffix-icon="el-icon-search" v-model="search" size="small">
  28. </el-input>
  29. </div>
  30. </div>
  31. <div class="shopro-index-button-container">
  32. <div class="shopro-button shopro-refresh-button" @click="getData">
  33. <i class="el-icon-refresh"></i>
  34. </div>
  35. <div class="shopro-button shopro-add-button" @click="operation('create',null)">
  36. <i class="el-icon-plus"></i>添加问题
  37. </div>
  38. </div>
  39. <div class="shopro-table-container">
  40. <div class="custom-table-border">
  41. <el-table :data="data" border :cell-class-name="tableCellClassName" stripe
  42. :header-cell-class-name="tableCellClassName" @row-dblclick="operation">
  43. <el-table-column label="ID" prop="id" min-width="60">
  44. </el-table-column>
  45. <el-table-column label="名称" min-width="160">
  46. <template slot-scope="scope">
  47. <div class="ellipsis-item">{{scope.row.title}}</div>
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="状态" min-width="110">
  51. <template slot-scope="scope">
  52. <div class="display-flex">
  53. <span v-if="scope.row.status=='normal'" class="display-flex">
  54. <span class="shopro-status-dot shopro-status-normal-dot"></span>
  55. <span class="shopro-status-normal">{{scope.row.status_text}}</span>
  56. </span>
  57. <span v-else-if="scope.row.status=='hidden'" class="display-flex">
  58. <span class="shopro-status-dot shopro-status-default-dot"></span>
  59. <span class="shopro-status-default">{{scope.row.status_text}}</span>
  60. </span>
  61. </div>
  62. </template>
  63. </el-table-column>
  64. <el-table-column label="权重" prop="weigh" min-width="60">
  65. </el-table-column>
  66. <el-table-column label="创建时间" min-width="160">
  67. <template slot-scope="scope">
  68. <div>
  69. {{moment(scope.row.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}
  70. </div>
  71. </template>
  72. </el-table-column>
  73. <el-table-column label="更新时间" min-width="160">
  74. <template slot-scope="scope">
  75. <div>
  76. {{moment(scope.row.updatetime*1000).format("YYYY-MM-DD HH:mm:ss")}}
  77. </div>
  78. </template>
  79. </el-table-column>
  80. <el-table-column label="操作" min-width="180">
  81. <template slot-scope="scope">
  82. <div>
  83. <span class="shopro-edit-text" @click="operation('edit',scope.row.id)">编辑</span>
  84. <span class="shopro-delete-text" @click="operation('del',scope.row.id)">删除</span>
  85. </div>
  86. </template>
  87. </el-table-column>
  88. </el-table>
  89. </div>
  90. <div class="shopro-pagination-container">
  91. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
  92. :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
  93. layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
  94. </el-pagination>
  95. </div>
  96. </div>
  97. </div>