goodsClass.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索框 -->
  4. <div class="table-page-search-wrapper" style="margin-bottom: 15px;">
  5. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="48">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="商品分类名称">
  9. <a-input allowClear v-model="searchData.name" :maxLength="30" placeholder="请输入" id="goodsClass-name" />
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="24">
  13. <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="goodsClass-refresh">查询</a-button>
  14. <a-button type="" @click="resetForm" id="OperateJournal-resetForm">重置</a-button>
  15. </a-col>
  16. </a-row>
  17. </a-form>
  18. </div>
  19. <div class="add">
  20. <a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="goodsClass-showModal">新增</a-button>
  21. </div>
  22. <!-- table列表 -->
  23. <s-table
  24. ref="table"
  25. size="default"
  26. :rowKey="(record) => record.id"
  27. :columns="columns"
  28. :data="loadData"
  29. bordered>
  30. <span slot="action" slot-scope="text, record">
  31. <a-icon
  32. v-if="record.state==0"
  33. type="edit"
  34. id="bannerSetting-handleEdit"
  35. title="编辑"
  36. class="actionBtn icon-blues"
  37. @click="handleEdit(record)" />
  38. <span v-if="record.state==1">--</span>
  39. </span>
  40. <span slot="state" slot-scope="text, record">
  41. <a-switch
  42. checkedChildren="启用"
  43. unCheckedChildren="禁用"
  44. id="bannerSetting-changeFlagHandle"
  45. :checked="record.state == 1 ? true : false"
  46. @change="changeFlagHandle(text, record)" />
  47. </span>
  48. </span></s-table>
  49. <add-goodsClass-modal
  50. :itemId="itemId"
  51. :itemData="itemData"
  52. :openGoodClassModal="openGoodClassModal"
  53. @refresh="$refs.table.refresh(true)"
  54. @close="cancel"></add-goodsClass-modal>
  55. </a-card>
  56. </template>
  57. <script>
  58. import {
  59. Upload,
  60. STable,
  61. VSelect
  62. } from '@/components'
  63. import addGoodsClassModal from './addGoodsClassModal.vue'
  64. import {
  65. getGoodsClassList,
  66. changeGoodsStatus
  67. } from '@/api/shopSetting.js'
  68. export default {
  69. components: {
  70. STable,
  71. Upload,
  72. VSelect,
  73. addGoodsClassModal
  74. },
  75. data () {
  76. return {
  77. searchData: {
  78. name: ''
  79. },
  80. openGoodClassModal: false, // 默认关闭弹窗
  81. itemId: null, // 编辑行id
  82. itemData: {}, // 编辑行数据
  83. formLayout: 'horizontal',
  84. form: this.$form.createForm(this),
  85. formItemLayout: {
  86. labelCol: {
  87. span: 6
  88. },
  89. wrapperCol: {
  90. span: 14
  91. }
  92. },
  93. // 表头
  94. columns: [{
  95. title: '序号',
  96. dataIndex: 'no',
  97. width: 60,
  98. align: 'center'
  99. },
  100. {
  101. title: '商品分类名称',
  102. width: 100,
  103. dataIndex: 'name',
  104. align: 'center'
  105. },
  106. {
  107. title: '订单起购金额',
  108. width: 100,
  109. dataIndex: 'goldLimit',
  110. align: 'center',
  111. customRender: (text) => {
  112. if (text >= 1) {
  113. return text
  114. } else {
  115. return '--'
  116. }
  117. }
  118. },
  119. {
  120. title: '状态',
  121. width: 100,
  122. dataIndex: 'state',
  123. align: 'center',
  124. scopedSlots: {
  125. customRender: 'state'
  126. }
  127. },
  128. {
  129. title: '备注',
  130. width: 100,
  131. dataIndex: 'remarks',
  132. align: 'center',
  133. customRender: (text) => {
  134. return text || '--'
  135. }
  136. },
  137. {
  138. title: '操作',
  139. align: 'center',
  140. width: 100,
  141. scopedSlots: {
  142. customRender: 'action'
  143. }
  144. }
  145. ],
  146. // 加载数据方法 必须为 Promise 对象
  147. loadData: parameter => {
  148. return getGoodsClassList(
  149. Object.assign(parameter, this.searchData)
  150. ).then(res => {
  151. const no = (res.data.pageNo - 1) * res.data.pageSize
  152. if (res.status == 200) {
  153. for (let i = 0; i < res.data.list.length; i++) {
  154. const _item = res.data.list[i]
  155. _item.no = no + i + 1
  156. }
  157. return res.data
  158. }
  159. })
  160. }
  161. }
  162. },
  163. beforeCreate () {
  164. this.form = this.$form.createForm(this, {
  165. name: 'validate_other'
  166. })
  167. },
  168. methods: {
  169. showModal () {
  170. console.log('---新增')
  171. this.itemId = null
  172. this.itemData = {}
  173. this.openGoodClassModal = true
  174. },
  175. // 编辑
  176. handleEdit (record) {
  177. this.itemId = record.id
  178. this.itemData = record
  179. console.log(this.itemId, '-------编辑')
  180. this.openGoodClassModal = true
  181. },
  182. // 重置
  183. resetForm () {
  184. this.searchData.name = ''
  185. this.$refs.table.refresh(true)
  186. },
  187. //
  188. cancel () {
  189. this.itemId = null
  190. this.openGoodClassModal = false
  191. },
  192. // 更改启用禁用状态
  193. changeFlagHandle (text, record) {
  194. console.log(text)
  195. const _this = this
  196. const _data = {
  197. id: record.id,
  198. flag: record.state == 1 ? '0' : '1'
  199. }
  200. if (record.state == 1) {
  201. this.$confirm({
  202. title: '提示',
  203. centered: true,
  204. content: '商品分类被禁用后,该分类将不在显示给用户,确定禁用吗?',
  205. okText: '确定',
  206. cancelText: '取消',
  207. onOk () {
  208. changeGoodsStatus(_data).then(res => {
  209. if (res.status == 200) {
  210. _this.$message.success(res.message)
  211. _this.$refs.table.refresh()
  212. } else {
  213. record.state = !record.state
  214. }
  215. })
  216. }
  217. })
  218. } else {
  219. changeGoodsStatus(_data).then(res => {
  220. if (res.status == 200) {
  221. _this.$message.success(res.message)
  222. _this.$refs.table.refresh()
  223. } else {
  224. record.state = !record.state
  225. }
  226. })
  227. }
  228. },
  229. beforeRouteEnter (to, from, next) {
  230. next(vm => {
  231. vm.resetForm()
  232. })
  233. }
  234. }
  235. }
  236. </script>
  237. <style>
  238. .w-e-toolbar {
  239. flex-wrap: wrap;
  240. }
  241. .addBtn {
  242. margin-bottom: 20px;
  243. }
  244. </style>