list-commonly.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <div class="app-container" style="padding: 0 20px;padding-bottom: 20px;">
  3. <el-menu :router="true" default-active="/goods/list/commonly" class="el-menu-demo" mode="horizontal">
  4. <el-menu-item index="/goods/list">全部商品</el-menu-item>
  5. <el-menu-item v-if="modules && modules.firstModulesName" index="/goods/list/preferred">{{ modules.firstModulesName }}</el-menu-item>
  6. <el-menu-item v-if="modules && modules.secondModulesName" index="/goods/list/preferential">{{ modules.secondModulesName }}</el-menu-item>
  7. <el-menu-item v-if="modules && modules.thirdModulesName" index="/goods/list/commonly">{{ modules.thirdModulesName }}</el-menu-item>
  8. </el-menu>
  9. <div class="filter-container">
  10. <el-form class="demo-form-inline goods-list">
  11. <el-form-item label="商品ID:" style="width:190px;float: left;">
  12. <el-input v-model="listQuery.id" placeholder="请输入商品ID" oninput="if(value.length>9)value=value.slice(0,9)" type="number" style="width: 120px;" class="filter-item" @keyup.enter.native="handleFilter" />
  13. </el-form-item>
  14. <el-form-item label="商品名称:" style="width:240px;float: left;">
  15. <el-input v-model="listQuery.productName" placeholder="请输入商品名称" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
  16. </el-form-item>
  17. <el-form-item label="供应商名称:" style="width:250px;float: left;">
  18. <el-input v-model="listQuery.shopName" placeholder="请输入供应商名称" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
  19. </el-form-item>
  20. <el-form-item label="商品分类:" style="width:200px;float: left;">
  21. <el-select v-model="listQuery.classifyID" placeholder="商品分类" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
  22. <template v-for="item in classify">
  23. <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
  24. </template>
  25. </el-select>
  26. </el-form-item>
  27. <el-form-item style="width:95px;float: left;">
  28. <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
  29. </el-form-item>
  30. <el-form-item style="width:150px;float: left;">
  31. <el-button class="filter-item" type="primary" icon="el-icon-sort" @click="batchSaveSort">批量更新排序</el-button>
  32. </el-form-item>
  33. <el-form-item style="width:120px;float: left;">
  34. <router-link :to="'/goods/list/select/'+ modulesId">
  35. <el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline">添加商品</el-button>
  36. </router-link>
  37. </el-form-item>
  38. </el-form>
  39. </div>
  40. <div class="filter-title">
  41. <p>排序值是指本页面和商城小程序对应商品列表的排列顺序,数值越小排序越靠前,排序值允许重复。</p>
  42. </div>
  43. <el-table
  44. v-loading="listLoading"
  45. :data="list"
  46. element-loading-text="Loading"
  47. border
  48. fit
  49. highlight-current-row
  50. :header-cell-style="{background:'#eef1f6',color:'#606266'}"
  51. style="width:100%;margin-top:20px;"
  52. >
  53. <el-table-column align="center" label="序号" width="40px">
  54. <template slot-scope="scope">
  55. {{ ((pageNum-1)*listQuery.pageSize)+scope.$index+1 }}
  56. </template>
  57. </el-table-column>
  58. <el-table-column label="商品ID" align="center" prop="id" width="70px" />
  59. <el-table-column label="商品图片" align="center" prop="mainImage">
  60. <template slot-scope="{row}">
  61. <img :src="row.mainImage" alt="" width="50">
  62. </template>
  63. </el-table-column>
  64. <el-table-column label="商品名称" align="center" prop="productName" min-width="200px" />
  65. <el-table-column label="供应商" align="center" prop="shopName" min-width="120px" />
  66. <el-table-column label="市场价" align="center" prop="normalPrice" />
  67. <el-table-column label="成本价" align="center" prop="costPrice" />
  68. <el-table-column label="售价" align="center" prop="retailPrice" width="70" />
  69. <el-table-column label="起订量" align="center" prop="minBuyNumber" />
  70. <el-table-column label="商品分类" align="center" prop="productClassifyName" />
  71. <el-table-column align="center" label="添加时间" prop="addTime">
  72. <template v-if="row.addTime" slot-scope="{row}">
  73. <span>{{ row.addTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
  74. </template>
  75. </el-table-column>
  76. <el-table-column label="排序值" align="center" prop="commonlyProductSort">
  77. <template slot-scope="{row}">
  78. <el-input-number v-model="row.commonlyProductSort" controls-position="right" :min="1" :max="999" :maxlength="3" size="mini" style="width:65px;" />
  79. </template>
  80. </el-table-column>
  81. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  82. <template slot-scope="{row}">
  83. <el-button type="primary" size="mini" style="width: 70px;margin:5px 0 0 0;" @click="cancelGoods(row)">取消</el-button>
  84. </template>
  85. </el-table-column>
  86. </el-table>
  87. <pagination v-show="total>20" :total="total" :page.sync="listQuery.index" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
  88. <template>
  89. <el-backtop style="right: 40px; bottom: 40px;">
  90. <i class="el-icon-upload2" />
  91. </el-backtop>
  92. </template>
  93. </div>
  94. </template>
  95. <script>
  96. import { getList, getModule, saveGoodsSort, canncelProduct } from '@/api/goods'
  97. import Pagination from '@/components/Pagination'
  98. export default {
  99. components: { Pagination },
  100. data() {
  101. return {
  102. modulesId: '3', // 模块
  103. pageNum: 0,
  104. list: null,
  105. classify: null,
  106. modules: null,
  107. listLoading: true,
  108. total: 0,
  109. listQuery: {
  110. index: 1,
  111. pageSize: 20,
  112. organizeID: this.$store.getters.organizeID,
  113. commonlyProduct: '1', // 常用商品
  114. id: '',
  115. productName: '',
  116. shopName: '',
  117. classifyID: ''
  118. }
  119. }
  120. },
  121. computed: {
  122. organizeID() {
  123. return this.$store.getters.organizeID
  124. },
  125. onKeypress() {
  126. return (/[\d]/.test(String.fromCharCode(event.keyCode)))
  127. }
  128. },
  129. created() {
  130. this.getModuleType()
  131. this.fetchData()
  132. },
  133. methods: {
  134. getModuleType() {
  135. getModule({ organizeID: this.$store.getters.organizeID }).then(response => {
  136. this.modules = response.data[0]
  137. })
  138. },
  139. fetchData() {
  140. this.listLoading = true
  141. getList(this.listQuery).then(response => {
  142. const { organizeProductsPage, listByEffective } = response.data
  143. this.list = organizeProductsPage.results
  144. this.total = organizeProductsPage.totalRecord
  145. this.pageNum = organizeProductsPage.index
  146. this.classify = listByEffective
  147. this.listLoading = false
  148. })
  149. },
  150. handleFilter() {
  151. this.fetchData()
  152. },
  153. batchSaveSort() {
  154. const sorts = []
  155. this.list.map(item => {
  156. if (item.commonlyProductSort) {
  157. sorts.push(item.id + '-' + Math.abs(item.commonlyProductSort))
  158. }
  159. })
  160. this.listQuery.id = ''
  161. this.listQuery.productName = ''
  162. this.listQuery.shopName = ''
  163. this.listQuery.classifyID = ''
  164. saveGoodsSort({ newProducSorttList: sorts.join(','), modules: this.modulesId }).then(response => {
  165. this.$message({ message: response.msg, type: 'success', center: true })
  166. this.fetchData()
  167. }).catch(() => {
  168. this.fetchData()
  169. })
  170. },
  171. cancelGoods(row) {
  172. this.$confirm('确定取消该商品吗?取消后该商品将不在出现在本页面', '系统提示', {
  173. confirmButtonText: '确定',
  174. cancelButtonText: '取消',
  175. type: 'warning'
  176. }).then(() => {
  177. canncelProduct({ id: row.id, modules: this.modulesId }).then(() => {
  178. this.fetchData()
  179. }).catch(() => {
  180. this.fetchData()
  181. })
  182. })
  183. }
  184. }
  185. }
  186. </script>
  187. <style>
  188. .el-input-number.is-controls-right .el-input__inner {
  189. padding-left: 5px;
  190. padding-right: 30px;
  191. }
  192. </style>
  193. <style scoped>
  194. .filter-container .filter-item,.el-form-item{
  195. margin-bottom: 0;
  196. }
  197. .filter-container{
  198. width: 100%;
  199. float: left;
  200. height: auto;
  201. margin-top:20px;
  202. padding-bottom: 0;
  203. }
  204. .filter-title{
  205. float: left;
  206. font-size: 14px;
  207. line-height: 18px;
  208. text-align: left;
  209. color: #2E3748;
  210. }
  211. .filter-title p{
  212. margin:10px 0;
  213. }
  214. .goods-list .el-form-item{
  215. margin-bottom: 8px;
  216. }
  217. </style>