StoreManagement.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  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. :replace-fields="{children:'children', title:'name', key:'id', value: 'code' }"
  26. :tree-data="treeData"
  27. placeholder="请选择组织机构"
  28. treeNodeFilterProp="title">
  29. </a-tree-select>
  30. </a-form-item>
  31. </a-col>
  32. <a-col :span="6">
  33. <a-form-item class="search-item" label="启用状态">
  34. <v-select
  35. id="store-status"
  36. ref="enableFlag"
  37. allowClear
  38. placeholder="请选择启用状态"
  39. v-model="queryParam.enableFlag"
  40. code="ENABLE_FLAG"></v-select>
  41. </a-form-item>
  42. </a-col>
  43. <a-col :span="6" style="padding-bottom: 10px;">
  44. <a-button type="primary" id="store-search" class="search-btn" @click="$refs.table.refresh(true)">查询</a-button>
  45. <a-button id="store-reset" @click="reset">重置</a-button>
  46. </a-col>
  47. </a-row>
  48. </a-form>
  49. </div>
  50. <!-- 表格列表 -->
  51. <s-table
  52. ref="table"
  53. size="default"
  54. :rowKey="(record) => record.id"
  55. :columns="columns"
  56. :data="loadData"
  57. bordered>
  58. <!-- 组织机构 -->
  59. <template slot="orgCode" slot-scope="text, record">
  60. <span v-for="(item, index) in record.codeNameArr" :key="index">
  61. {{ item }}
  62. <strong v-if="index != record.codeNameArr.length-1">></strong>
  63. </span>
  64. </template>
  65. <!-- 负责人名称 -->
  66. <template slot="managerName" slot-scope="text, record">
  67. <div v-if="record.managerName">{{ record.managerName }}</div>
  68. <div v-else>--</div>
  69. </template>
  70. <!-- 启用状态 -->
  71. <template slot="enableFlag" slot-scope="text, record">
  72. <div v-if="record.enableFlag == 0" style="color: #ff4d4f">{{ record.enableFlagDictValue }}</div>
  73. <div v-if="record.enableFlag == 1" style="color: #1890FF">{{ record.enableFlagDictValue }}</div>
  74. </template>
  75. <!-- 操作 -->
  76. <template slot="action" slot-scope="text, record">
  77. <a-icon
  78. type="edit"
  79. title="编辑"
  80. id="store-edit"
  81. @click="edit(record)"
  82. class="actionBtn icon-blues"
  83. v-hasPermission="'B_basicSettings_store_edit'" />
  84. <a-icon
  85. type="setting"
  86. title="关联摄像设备"
  87. id="store-set"
  88. @click="setEquipment(record)"
  89. class="actionBtn icon-orange"
  90. v-hasPermission="'M_store_device'" />
  91. </template>
  92. </s-table>
  93. <!-- 编辑 门店所属组织 -->
  94. <store-modal :openModal="openModal" :storeId="storeId" @success="storeSubmit" @close="closeModal" />
  95. <!-- 门店 关联设备 -->
  96. <store-associated-equipment-modal :openModal="openEquipmentModal" :storeId="storeId" :storeCode="storeCode" @close="closeDetailsModal" />
  97. </a-card>
  98. </template>
  99. <script>
  100. import { STable, VSelect } from '@/components'
  101. import StoreModal from './StoreModal.vue'
  102. import StoreAssociatedEquipmentModal from './StoreAssociatedEquipmentModal.vue'
  103. import { findStoreList } from '@/api/store.js'
  104. import { findOrgTree } from '@/api/atorg.js'
  105. export default {
  106. name: 'StoreManagement',
  107. components: { STable, VSelect, StoreModal, StoreAssociatedEquipmentModal },
  108. data () {
  109. return {
  110. queryParam: {
  111. name: '', // 门店名称
  112. managerMobile: '', // 负责人手机
  113. orgCode: null, // 组织机构
  114. enableFlag: '' // 启用状态
  115. },
  116. columns: [
  117. { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  118. { title: '创建时间', dataIndex: 'createDate', width: 150, align: 'center' },
  119. { title: '组织机构', scopedSlots: { customRender: 'orgCode' }, width: 150, align: 'center' },
  120. { title: '门店名称', dataIndex: 'name', width: 120, align: 'center' },
  121. { title: '负责人名称', scopedSlots: { customRender: 'managerName' }, width: 100, align: 'center' },
  122. { title: '负责人手机', dataIndex: 'managerMobile', width: 100, align: 'center' },
  123. { title: '启用状态', scopedSlots: { customRender: 'enableFlag' }, width: 80, align: 'center' },
  124. { title: '操作', scopedSlots: { customRender: 'action' }, width: 120, 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. let codeNameArr = []
  136. if (_item.orgPCodeName) { // 父级组织机构名称
  137. const orgPCodeNameArr = _item.orgPCodeName.split(',')
  138. codeNameArr = orgPCodeNameArr.splice(0, orgPCodeNameArr.length - 1)
  139. }
  140. if (_item.orgCodeName) { // 当前组织机构名称
  141. codeNameArr.push(_item.orgCodeName)
  142. }
  143. _item.codeNameArr = codeNameArr
  144. }
  145. return res.data
  146. }
  147. })
  148. },
  149. openModal: false, // 编辑 门店所属组织 弹框展示状态
  150. openEquipmentModal: false, // 门店 关联设备 弹框展示状态
  151. storeId: '', // 门店id
  152. storeCode: '', // 门店code
  153. treeData: [] // 组织机构
  154. }
  155. },
  156. mounted () {
  157. this.getOrgList()
  158. },
  159. methods: {
  160. // 获取组织机构 数据
  161. getOrgList () {
  162. findOrgTree().then(res => {
  163. if (res.status == 200) {
  164. this.treeData = res.data
  165. } else {
  166. this.treeData = []
  167. }
  168. })
  169. },
  170. // 编辑
  171. edit (item) {
  172. this.storeId = String(item.id)
  173. this.storeCode = String(item.code)
  174. this.openModal = true
  175. this.openEquipmentModal = false
  176. },
  177. // 新增编辑 提交成功
  178. storeSubmit () {
  179. this.$refs.table.refresh(true)
  180. this.openModal = false
  181. },
  182. // 设置
  183. setEquipment (item) {
  184. this.storeId = String(item.id)
  185. this.storeCode = String(item.code)
  186. this.openEquipmentModal = true
  187. this.openModal = false
  188. },
  189. // 重置
  190. reset () {
  191. this.queryParam = {
  192. name: '', // 门店名称
  193. managerMobile: '', // 负责人手机
  194. orgCode: null, // 组织机构
  195. enableFlag: '' // 启用状态
  196. }
  197. this.addrCityList = []
  198. this.$refs.table.refresh(true)
  199. },
  200. // 新增、编辑 弹框关闭
  201. closeModal () {
  202. this.storeId = ''
  203. this.storeCode = ''
  204. this.openModal = false
  205. },
  206. // 关联设备 弹框关闭
  207. closeDetailsModal () {
  208. this.storeId = ''
  209. this.storeCode = ''
  210. this.openEquipmentModal = false
  211. }
  212. }
  213. }
  214. </script>
  215. <style lang="less">
  216. .StoreManagement {
  217. .table-page-search-wrapper {
  218. .search-btn {
  219. margin-right: 10px;
  220. }
  221. }
  222. }
  223. </style>