newStoreModal.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <a-modal v-model="isShow" @cancel="cancel" title="选择关联门店" width="60%" :footer="null">
  3. <a-row :gutter="24">
  4. <a-form class="form-box" :form="form" @submit="handleSubmit">
  5. <a-col :span="10">
  6. <a-tree
  7. @check="onCheck"
  8. @expand="onExpand"
  9. @select="onSelect"
  10. :expandedKeys="expandedKeys"
  11. :autoExpandParent="autoExpandParent"
  12. v-model="checkedKeys"
  13. :treeData="treeData" />
  14. </a-col>
  15. <a-col :span="14">
  16. <a-table :columns="columns" :data-source="loadData" :pagination="false" bordered>
  17. <template slot="title">
  18. 选择门店
  19. </template>
  20. <span slot="action" slot-scope="text, record">
  21. <a-button type="danger" v-if="record.usedFlag == 1" @click="delect(record)" size="small" id="newStoreModal-delect">解绑</a-button>
  22. <a-button type="primary" v-if="record.usedFlag == 0" @click="handleSubmit(record)" size="small" id="newStoreModal-handleSubmit">绑定</a-button>
  23. </span>
  24. </a-table>
  25. </a-col>
  26. </a-form>
  27. </a-row>
  28. </a-modal>
  29. </template>
  30. <script>
  31. import {
  32. findOrgTree
  33. } from '@/api/atorg.js'
  34. import {
  35. STable
  36. } from '@/components'
  37. import {
  38. getOrgUsedStoreList,
  39. saveNewUserStore,
  40. deleteUsedStore
  41. } from '@/api/supervision-user.js'
  42. export default {
  43. name: 'NewStoreModal',
  44. components: {
  45. STable
  46. },
  47. props: {
  48. visible: {
  49. type: Boolean,
  50. default: false
  51. },
  52. ddId: {
  53. type: String,
  54. default: ''
  55. }
  56. },
  57. data () {
  58. return {
  59. isShow: this.visible,
  60. loadData: [], // 列表数据
  61. expandedKeys: [], // 树节点
  62. autoExpandParent: true, // 自动展开父节点
  63. checkedKeys: [], // 选中的key值
  64. checkedData: [], // 选中的数据
  65. treeData: [], // 组织机构
  66. orgId: '', // 组织机构id
  67. storeId: '', // 门店id
  68. columns: [{
  69. title: '序号',
  70. dataIndex: 'no',
  71. minWidth: '100',
  72. align: 'center'
  73. },
  74. {
  75. title: '门店名称',
  76. dataIndex: 'storeName',
  77. minWidth: '100',
  78. align: 'center'
  79. },
  80. {
  81. title: '操作',
  82. minWidth: '100',
  83. align: 'center',
  84. scopedSlots: {
  85. customRender: 'action'
  86. }
  87. }
  88. ]
  89. }
  90. },
  91. methods: {
  92. // 递归函数
  93. recursionFun (data) {
  94. if (data) {
  95. data.map(item => {
  96. if (item.children && item.children.length == 0) {
  97. item.key = item.id ? 'org' + item.id : ''
  98. item.value = item.id ? item.id : ''
  99. item.title = item.name ? item.name : ''
  100. } else {
  101. item.key = item.id ? 'org' + item.id : ''
  102. item.value = item.id ? item.id : ''
  103. item.title = item.name ? item.name : ''
  104. this.recursionFun(item.children)
  105. }
  106. })
  107. }
  108. return data
  109. },
  110. cancel (e) {
  111. this.$emit('close')
  112. },
  113. onExpand (expandedKeys) {
  114. this.expandedKeys = expandedKeys
  115. this.autoExpandParent = false
  116. },
  117. onCheck (checkedKeys, info) {
  118. this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
  119. this.checkedKeys = checkedKeys
  120. },
  121. onSelect (selectedKeys, info) {
  122. this.selectedKeys = selectedKeys[0]
  123. if (this.selectedKeys) {
  124. this.orgId = this.selectedKeys.substring(3, this.selectedKeys.length)
  125. }
  126. this.getListData()
  127. },
  128. // 获取列表数据
  129. getListData () {
  130. getOrgUsedStoreList({
  131. orgId: this.orgId
  132. }).then(res => {
  133. if (res.status == 200) {
  134. res.data.map((item, index) => {
  135. item.no = index + 1
  136. })
  137. this.loadData = res.data
  138. } else {
  139. this.loadData = []
  140. }
  141. })
  142. },
  143. // 绑定
  144. handleSubmit (record) {
  145. const _this = this
  146. this.$confirm({
  147. title: '提示',
  148. content: '确认给该督导绑定该门店?',
  149. okText: '确定',
  150. cancelText: '取消',
  151. onOk () {
  152. saveNewUserStore({
  153. userId: _this.ddId,
  154. storeId: record.storeId
  155. }).then(res => {
  156. if (res.status == 200) {
  157. _this.getListData()
  158. _this.$message.success(res.message)
  159. } else {
  160. _this.$message.error(res.message)
  161. }
  162. })
  163. }
  164. })
  165. },
  166. // 解绑
  167. delect (row) {
  168. const _this = this
  169. this.$confirm({
  170. title: '提示',
  171. content: '解绑后数据无法恢复,确认解绑?',
  172. okText: '确定',
  173. cancelText: '取消',
  174. onOk () {
  175. deleteUsedStore({
  176. id: row.id
  177. }).then(res => {
  178. if (res.status == 200) {
  179. _this.$message.success(res.message)
  180. _this.getListData()
  181. } else {
  182. _this.$message.error(res.message)
  183. }
  184. })
  185. }
  186. })
  187. }
  188. },
  189. beforeCreate () {
  190. this.form = this.$form.createForm(this, {
  191. name: 'NewStoreModal'
  192. })
  193. },
  194. watch: {
  195. checkedKeys (val) {
  196. console.log('onCheck', val)
  197. },
  198. visible (newValue, oldValue) {
  199. this.isShow = newValue
  200. },
  201. isShow (newValue, oldValue) {
  202. if (newValue) {
  203. // 获取组织机构树的数据
  204. findOrgTree().then(res => {
  205. if (res.status == 200) {
  206. this.treeData = this.recursionFun(res.data)
  207. this.getListData()
  208. } else {
  209. this.treeData = []
  210. }
  211. })
  212. } else {
  213. this.$emit('close')
  214. }
  215. }
  216. }
  217. }
  218. </script>