partnerManage.vue 5.9 KB

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