productClass.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <div>
  3. <en-table-layout :tableData="tableData.records" :loading="loading" :selection-change="handleSelectionChange">
  4. <div slot="toolbar" class="inner-toolbar">
  5. <div class="toolbar-btns">
  6. <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="handleAddBrand"
  7. v-if="checkPermission(['brand:add'])">添加</el-button>
  8. </div>
  9. <div class="toolbar-search">
  10. <en-table-search @search="searchEvent" placeholder="请输入品牌名称" />
  11. </div>
  12. </div>
  13. <template slot="table-columns">
  14. <el-table-column type="selection" width="100" />
  15. <!--品牌名称-->
  16. <el-table-column prop="name" label="组合名称" />
  17. <!--品牌图片-->
  18. <el-table-column label="组合说明" prop="remark">
  19. </el-table-column>
  20. <!--操作-->
  21. <el-table-column label="操作" >
  22. <template slot-scope="scope">
  23. <el-button size="mini"
  24. @click="handleEditBrand('check', scope.row)">查看</el-button>
  25. <el-button size="mini" type="primary"
  26. @click="handleEditBrand('edit', scope.row)">编辑</el-button>
  27. <el-button size="mini" type="danger"
  28. @click="handleDeleteBrand(scope.$index, scope.row)">删除</el-button>
  29. </template>
  30. </el-table-column>
  31. </template>
  32. <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
  33. @current-change="handlePageCurrentChange" :current-page="tableData.pages"
  34. :page-sizes="[10, 20, 50, 100]" :page-size="tableData.size"
  35. layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
  36. </el-pagination>
  37. </en-table-layout>
  38. </div>
  39. </template>
  40. <script>
  41. import * as API_productClass from "@/api/productClass.js"
  42. export default {
  43. name: 'brandList',
  44. data() {
  45. return {
  46. /** 列表loading状态 */
  47. loading: false,
  48. /** 列表参数 */
  49. params: {
  50. pages: 1,
  51. size: 10
  52. },
  53. /** 列表数据 */
  54. tableData: '',
  55. /** 被选数据 */
  56. selectedData: [],
  57. // 添加、修改品牌 dialog
  58. dialogBrandVisible: false,
  59. /** 添加、修改品牌 表单 */
  60. brandForm: {
  61. logo: ".."
  62. },
  63. }
  64. },
  65. mounted() {
  66. this.GET_BrandList()
  67. },
  68. methods: {
  69. /** 当选择项发生变化 */
  70. handleSelectionChange(val) {
  71. this.selectedData = val.map(item => item.brand_id)
  72. },
  73. uploadSuccess(res) {
  74. this.$set(this.brandForm, 'logo', res.url)
  75. this.$refs['brandForm'].validateField('logo')
  76. },
  77. /** 图片移除之后 */
  78. delGiftImg() {
  79. this.fileList = []
  80. this.brandForm.logo = ''
  81. },
  82. /** 分页大小发生改变 */
  83. handlePageSizeChange(size) {
  84. this.params.size = size
  85. this.GET_BrandList()
  86. },
  87. /** 分页页数发生改变 */
  88. handlePageCurrentChange(page) {
  89. this.params.page = page
  90. this.GET_BrandList()
  91. },
  92. /** 搜索事件触发 */
  93. searchEvent(data) {
  94. this.params.page = 1
  95. this.params.name = data
  96. if (!data) delete this.params.name
  97. this.GET_BrandList()
  98. },
  99. /** 获取品牌列表 */
  100. GET_BrandList() {
  101. this.loading = true
  102. API_productClass.getProductList(this.params).then(response => {
  103. this.loading = false
  104. this.tableData = response
  105. }).catch(() => { this.loading = false })
  106. },
  107. /** 添加品牌触发事件 */
  108. handleAddBrand() {
  109. this.$router.push({
  110. name: "productClassAdd",
  111. });
  112. },
  113. /** 添加、修改品牌 表单提交 */
  114. submitBrandForm(formName) {
  115. },
  116. /** 修改品牌操作 */
  117. handleEditBrand(index, row) {
  118. this.$router.push({
  119. name: "productClassEdit",
  120. params: { id:row.id, type:index },
  121. });
  122. /* this.brandForm = this.MixinClone(row)
  123. this.fileList = this.brandForm.logo ? [{ name: 'brand_image', url: this.brandForm.logo }] : []
  124. this.dialogBrandVisible = true */
  125. },
  126. /** 删除品牌操作 */
  127. handleDeleteBrand(index, row) {
  128. this.$confirm('确定要删除这个品牌吗?', '提示', { type: 'warning' }).then(() => {
  129. this.DELETE_Brand(row.id)
  130. }).catch(() => { })
  131. },
  132. /** 删除商品组合 */
  133. DELETE_Brand(ids) {
  134. API_productClass.removeProduct(ids).then(() => {
  135. this.$message.success('删除成功!')
  136. this.GET_BrandList()
  137. })
  138. }
  139. }
  140. }
  141. </script>
  142. <style type="text/scss" lang="scss" scoped>
  143. /deep/ .el-table td:not(.is-left) {
  144. text-align: center;
  145. }
  146. .inner-toolbar {
  147. display: flex;
  148. width: 100%;
  149. justify-content: space-between;
  150. padding: 0 20px;
  151. }
  152. .goods-image {
  153. max-width: 120px;
  154. height: 75px;
  155. }
  156. /deep/ .el-select .el-input {
  157. width: 100px;
  158. }
  159. /deep/ .input-with-select .el-input-group__prepend {
  160. background-color: #fff;
  161. }
  162. /deep/ .el-form-item__content .edui-editor {
  163. line-height: normal;
  164. }
  165. </style>