StoreManagement.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <a-card class="StoreManagement" :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline">
  6. <a-row :gutter="48">
  7. <a-col :span="6">
  8. <a-form-item class="search-item" label="门店名称">
  9. <a-input id="store-name" v-model.trim="queryParam.name" placeholder="请输入门店名称" @pressEnter="$refs.table.refresh(true)" allowClear />
  10. </a-form-item>
  11. </a-col>
  12. <a-col :span="6">
  13. <a-form-item class="search-item" label="负责人手机">
  14. <a-input id="store-managerMobile" v-model.trim="queryParam.managerMobile" placeholder="请输入负责人手机" @pressEnter="$refs.table.refresh(true)" allowClear />
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="6">
  18. <a-form-item class="search-item" label="组织机构">
  19. <a-tree-select
  20. showSearch
  21. id="store-orgCode"
  22. v-model="queryParam.orgCode"
  23. allowClear
  24. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  25. :tree-data="treeData"
  26. placeholder="请选择组织机构"
  27. treeNodeFilterProp="title">
  28. </a-tree-select>
  29. </a-form-item>
  30. </a-col>
  31. <a-col :span="6">
  32. <a-form-item class="search-item" label="门店类型">
  33. <v-select
  34. id="store-type"
  35. ref="selfFlag"
  36. allowClear
  37. placeholder="请选择门店类型"
  38. v-model="queryParam.selfFlag"
  39. code="STORE_TYPE"></v-select>
  40. </a-form-item>
  41. </a-col>
  42. <a-col :span="6">
  43. <a-form-item class="search-item" label="启用状态">
  44. <v-select
  45. id="store-status"
  46. ref="isEnable"
  47. allowClear
  48. placeholder="请选择启用状态"
  49. v-model="queryParam.isEnable"
  50. code="ENABLE_FLAG"></v-select>
  51. </a-form-item>
  52. </a-col>
  53. <a-col :span="6">
  54. <a-button type="primary" id="store-search" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
  55. <a-button id="store-reset" @click="reset">重置</a-button>
  56. </a-col>
  57. </a-row>
  58. </a-form>
  59. </div>
  60. <!-- 表格列表 -->
  61. <s-table
  62. ref="table"
  63. size="default"
  64. :rowKey="(record) => record.id"
  65. :columns="columns"
  66. :data="loadData"
  67. bordered>
  68. <!-- 启用状态 -->
  69. <template slot="isEnable" slot-scope="text, record">
  70. <div v-if="record.isEnable == 0" style="color: #ff4d4f">{{ record.isEnableDictValue }}</div>
  71. <div v-if="record.isEnable == 1" style="color: #1890FF">{{ record.isEnableDictValue }}</div>
  72. </template>
  73. <!-- 操作 -->
  74. <template slot="action" slot-scope="text, record">
  75. <a-icon
  76. type="edit"
  77. title="编辑"
  78. id="store-edit"
  79. @click="edit(record)"
  80. :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }"
  81. v-hasPermission="'B_basicSettings_store_edit'" />
  82. <a-icon
  83. type="link"
  84. title="设置"
  85. id="store-set"
  86. @click="setEquipment(record)"
  87. :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }"
  88. v-hasPermission="'M_store_device'" />
  89. </template>
  90. </s-table>
  91. <!-- 编辑 门店所属组织 -->
  92. <store-modal :openModal="openModal" :storeId="storeId" @success="storeSubmit" @close="closeModal" />
  93. <!-- 门店 关联设备 -->
  94. <store-associated-equipment-modal :openModal="openEquipmentModal" :storeId="storeId" :storeCode="storeCode" @close="closeDetailsModal" />
  95. </a-card>
  96. </template>
  97. <script>
  98. import { STable, VSelect } from '@/components'
  99. import StoreModal from './StoreModal.vue'
  100. import StoreAssociatedEquipmentModal from './StoreAssociatedEquipmentModal.vue'
  101. import { findStoreList } from '@/api/store.js'
  102. import { findOrgTree } from '@/api/atorg.js'
  103. export default {
  104. name: 'StoreManagement',
  105. components: { STable, VSelect, StoreModal, StoreAssociatedEquipmentModal },
  106. data () {
  107. return {
  108. queryParam: {
  109. name: '', // 门店名称
  110. managerMobile: '', // 负责人手机
  111. orgCode: null, // 组织机构
  112. selfFlag: '', // 门店类型
  113. isEnable: '' // 启用状态
  114. },
  115. columns: [
  116. { title: '序号', dataIndex: 'no', width: '40', align: 'center' },
  117. { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
  118. { title: '组织机构', dataIndex: 'orgCodeName', width: '100', align: 'center' },
  119. { title: '门店名称', dataIndex: 'name', width: '100', align: 'center' },
  120. { title: '门店类型', dataIndex: 'selfFlagDictValue', width: '100', align: 'center' },
  121. { title: '负责人名称', dataIndex: 'managerName', width: '100', align: 'center' },
  122. { title: '负责人手机', dataIndex: 'managerMobile', width: '100', align: 'center' },
  123. { title: '启用状态', scopedSlots: { customRender: 'isEnable' }, width: '100', align: 'center' },
  124. { title: '操作', scopedSlots: { customRender: 'action' }, width: '265', align: 'center' }
  125. ],
  126. // 加载数据方法 必须为 Promise 对象
  127. loadData: parameter => {
  128. return findStoreList(Object.assign(parameter, this.queryParam)).then(res => {
  129. if (res.status == 200) {
  130. const no = (res.data.pageNo - 1) * res.data.pageSize
  131. for (let i = 0; i < res.data.list.length; i++) {
  132. const _item = res.data.list[i]
  133. _item.no = no + i + 1
  134. }
  135. res.data.count = Number(res.data.count)
  136. return res.data
  137. }
  138. })
  139. },
  140. openModal: false, // 编辑 门店所属组织 弹框展示状态
  141. openEquipmentModal: false, // 门店 关联设备 弹框展示状态
  142. storeId: '', // 门店id
  143. storeCode: '', // 门店code
  144. treeData: [] // 组织机构
  145. }
  146. },
  147. mounted () {
  148. this.getOrgList()
  149. },
  150. methods: {
  151. // 获取组织机构 数据
  152. getOrgList () {
  153. findOrgTree().then(res => {
  154. if (res.status == 200) {
  155. this.treeData = this.recursionFun(res.data)
  156. } else {
  157. this.treeData = []
  158. }
  159. })
  160. },
  161. // 递归函数
  162. recursionFun (data) {
  163. if (data) {
  164. data.map(item => {
  165. if (item.children && item.children.length == 0) {
  166. item.key = item.id ? 'org' + item.id : ''
  167. item.value = item.code ? item.code : ''
  168. item.title = item.name ? item.name : ''
  169. } else {
  170. item.key = item.id ? 'org' + item.id : ''
  171. item.value = item.code ? item.code : ''
  172. item.title = item.name ? item.name : ''
  173. this.recursionFun(item.children)
  174. }
  175. })
  176. }
  177. return data
  178. },
  179. // 编辑
  180. edit (item) {
  181. this.storeId = String(item.id)
  182. this.storeCode = String(item.code)
  183. this.openModal = true
  184. this.openEquipmentModal = false
  185. },
  186. // 新增编辑 提交成功
  187. storeSubmit () {
  188. this.$refs.table.refresh(true)
  189. this.openModal = false
  190. },
  191. // 设置
  192. setEquipment (item) {
  193. this.storeId = String(item.id)
  194. this.storeCode = String(item.code)
  195. this.openEquipmentModal = true
  196. this.openModal = false
  197. },
  198. // 重置
  199. reset () {
  200. this.queryParam = {
  201. name: '', // 门店名称
  202. managerMobile: '', // 负责人手机
  203. orgCode: null, // 组织机构
  204. selfFlag: '', // 门店类型
  205. isEnable: '' // 启用状态
  206. }
  207. this.addrCityList = []
  208. this.$refs.table.refresh(true)
  209. },
  210. // 新增、编辑 弹框关闭
  211. closeModal () {
  212. this.storeId = ''
  213. this.storeCode = ''
  214. this.openModal = false
  215. },
  216. // 关联设备 弹框关闭
  217. closeDetailsModal () {
  218. this.storeId = ''
  219. this.storeCode = ''
  220. this.openEquipmentModal = false
  221. }
  222. }
  223. }
  224. </script>
  225. <style lang="less">
  226. .StoreManagement {
  227. .table-page-search-wrapper {
  228. .search-btn {
  229. margin-right: 10px;
  230. }
  231. }
  232. }
  233. </style>