list.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <a-card size="small" :bordered="false" class="announcementList-wrap">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  6. <a-row :gutter="15">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="标题">
  9. <a-input id="announcementList-productName" v-model.trim="queryParam.productName" allowClear placeholder="请输入标题"/>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="24">
  13. <a-form-item label="类别">
  14. <a-select
  15. placeholder="请选择类别"
  16. id="announcementList-productBrandSn"
  17. allowClear
  18. v-model="queryParam.productBrandSn">
  19. <a-select-option v-for="item in productBrandList" :key="item.productBrandSn" :value="item.productBrandSn">{{ item.productBrandName }}</a-select-option>
  20. </a-select>
  21. </a-form-item>
  22. </a-col>
  23. <a-col :md="6" :sm="24">
  24. <a-form-item label="发布状态">
  25. <v-select code="ENABLED_FLAG" id="announcementList-enabledFlag" v-model="queryParam.enabledFlag" allowClear placeholder="请选择发布状态"></v-select>
  26. </a-form-item>
  27. </a-col>
  28. <a-col :md="6" :sm="24">
  29. <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="announcementList-refresh">查询</a-button>
  30. <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="announcementList-reset">重置</a-button>
  31. </a-col>
  32. </a-row>
  33. </a-form>
  34. </div>
  35. <!-- 总计 -->
  36. <a-alert type="info" showIcon style="margin-bottom:15px">
  37. <div slot="message">合计:<strong>300</strong>条</div>
  38. </a-alert>
  39. <!-- 列表 -->
  40. <s-table
  41. class="sTable"
  42. ref="table"
  43. size="default"
  44. :rowKey="(record) => record.id"
  45. :columns="columns"
  46. :data="loadData"
  47. :scroll="{ x: 1230, y: tableHeight }"
  48. bordered>
  49. <!-- 操作 -->
  50. <template slot="action" slot-scope="text, record">
  51. <a-button size="small" type="link" class="button-info" @click="handleEdit(record)" id="announcementList-edit-btn">编辑</a-button>
  52. <a-button size="small" type="link" class="button-success" @click="handleDetail(record)" id="announcementList-detail-btn">详情</a-button>
  53. <a-button
  54. size="small"
  55. type="link"
  56. class="button-error"
  57. @click="handleDel(record)"
  58. id="announcementList-del-btn">删除</a-button>
  59. </template>
  60. </s-table>
  61. <!-- 编辑 -->
  62. <announcement-edit-modal :openModal="openModal" :itemId="itemId" @close="closeModal" />
  63. <!-- 详情 -->
  64. <announcement-detail-modal :openModal="openDetailModal" :itemId="itemId" @close="closeDetailModal" />
  65. </a-card>
  66. </template>
  67. <script>
  68. // import { dealerProductBrandQuery } from '@/api/dealerProductBrand'
  69. // import { dealerProductTypeQuery } from '@/api/dealerProductType'
  70. import { STable, VSelect } from '@/components'
  71. import AnnouncementEditModal from './editModal.vue'
  72. import AnnouncementDetailModal from './detailModal.vue'
  73. export default {
  74. components: { STable, VSelect, AnnouncementEditModal, AnnouncementDetailModal },
  75. data () {
  76. return {
  77. advanced: false, // 高级搜索 展开/关闭
  78. tableHeight: 0,
  79. queryParam: { // 查询条件
  80. productName: '', // 产品名称
  81. productCode: '', // 产品编码/原厂编码
  82. productBrandSn: undefined, // 品牌
  83. productTypeSn1: '', // 产品一级分类
  84. productTypeSn2: '', // 产品二级分类
  85. productTypeSn3: '', // 产品三级分类
  86. enabledFlag: undefined // 定价状态
  87. },
  88. disabled: false, // 查询、重置按钮是否可操作
  89. columns: [
  90. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  91. { title: '创建时间', dataIndex: 'createDate', width: 160, align: 'center' },
  92. { title: '类别', dataIndex: 'productCode', width: 200, align: 'center' },
  93. { title: '标题', dataIndex: 'productName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  94. { title: '可见性', dataIndex: 'origCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  95. { title: '发布时间', dataIndex: 'productBrandName', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
  96. { title: '发布状态', dataIndex: 'sterminaldsdPrice', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
  97. { title: '操作', scopedSlots: { customRender: 'action' }, width: 170, align: 'center', fixed: 'right' }
  98. ],
  99. // 加载数据方法 必须为 Promise 对象
  100. loadData: parameter => {
  101. this.disabled = true
  102. if (this.tableHeight == 0) {
  103. this.tableHeight = window.innerHeight - 380
  104. }
  105. // return dealerProductList(Object.assign(parameter, this.queryParam)).then(res => {
  106. // const data = res.data
  107. // const no = (data.pageNo - 1) * data.pageSize
  108. // for (var i = 0; i < data.list.length; i++) {
  109. // data.list[i].no = no + i + 1
  110. // const productTypeName1 = data.list[i].productTypeName1 ? data.list[i].productTypeName1 : ''
  111. // const productTypeName2 = data.list[i].productTypeName2 ? ' > ' + data.list[i].productTypeName2 : ''
  112. // const productTypeName3 = data.list[i].productTypeName3 ? ' > ' + data.list[i].productTypeName3 : ''
  113. // data.list[i].productTypeName = productTypeName1 + productTypeName2 + productTypeName3
  114. // }
  115. // this.disabled = false
  116. // return data
  117. // })
  118. const _this = this
  119. return new Promise(function (resolve, reject) {
  120. const data = {
  121. pageNo: 1,
  122. pageSize: 10,
  123. list: [
  124. { id: '1', productNum: 'jgqp11111111111', productName: '产品1', productPic: ['https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', 'https://qn.antdv.com/vue.png'], productOldNum: 'jgqp111123545', productBrand: '箭冠品牌', productType: '产品分类1', inventoryNum: '5', inventoryMoney: '122' }
  125. ]
  126. }
  127. const no = (data.pageNo - 1) * data.pageSize
  128. for (var i = 0; i < data.list.length; i++) {
  129. data.list[i].no = no + i + 1
  130. }
  131. _this.disabled = false
  132. resolve(data)
  133. })
  134. },
  135. openModal: false, // 编辑 弹框
  136. openDetailModal: false, // 详情 弹框
  137. itemId: '', // 当前产品id
  138. productBrandList: [], // 品牌下拉数据
  139. productTypeList: [] // 分类下拉数据
  140. }
  141. },
  142. methods: {
  143. // 重置
  144. resetSearchForm () {
  145. this.queryParam.productCode = ''
  146. this.queryParam.productName = ''
  147. this.queryParam.productBrandSn = undefined
  148. this.queryParam.productTypeSn1 = ''
  149. this.queryParam.productTypeSn2 = ''
  150. this.queryParam.productTypeSn3 = ''
  151. this.queryParam.enabledFlag = undefined
  152. this.$refs.table.refresh(true)
  153. },
  154. // 详情
  155. handleDetail (row) {
  156. this.itemId = row.id
  157. this.openDetailModal = true
  158. },
  159. // 编辑
  160. handleEdit (row) {
  161. this.itemId = row.id
  162. this.openModal = true
  163. },
  164. // 关闭弹框
  165. closeModal () {
  166. this.itemId = ''
  167. this.openModal = false
  168. },
  169. // 关闭详情弹框
  170. closeDetailModal () {
  171. this.itemId = ''
  172. this.openDetailModal = false
  173. },
  174. // 删除
  175. handleDel (row) {
  176. const _this = this
  177. this.$confirm({
  178. title: '提示',
  179. content: '确认要删除吗?',
  180. centered: true,
  181. onOk () {
  182. // productDel({ sn: row.productSn }).then(res => {
  183. // if (res.status == 200) {
  184. // _this.$message.success(res.message)
  185. // _this.$refs.table.refresh()
  186. // }
  187. // })
  188. }
  189. })
  190. }
  191. }
  192. }
  193. </script>