StoreModal.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <a-modal
  3. class="StoreModal"
  4. title="编辑"
  5. :width="1000"
  6. :footer="null"
  7. :destroyOnClose="true"
  8. @cancel="isShow = false"
  9. v-model="isShow">
  10. <!-- 表单 -->
  11. <a-form-model
  12. class="form"
  13. ref="ruleForm"
  14. :model="form"
  15. :rules="rules"
  16. :label-col="{ span: 6 }"
  17. :wrapper-col="{ span: 18 }">
  18. <a-row :gutter="20" v-if="storeInfo">
  19. <a-col :span="8" class="item-w">
  20. <div class="item-label">门店名称:</div>
  21. <div class="item-cont">{{ storeInfo.name }}</div>
  22. </a-col>
  23. <a-col :span="8" class="item-w">
  24. <div class="item-label">门店负责人:</div>
  25. <div class="item-cont">{{ storeInfo.managerName }}</div>
  26. </a-col>
  27. <a-col :span="8" class="item-w">
  28. <div class="item-label">负责人手机:</div>
  29. <div class="item-cont">{{ storeInfo.managerMobile }}</div>
  30. </a-col>
  31. <a-col :span="24" class="item-w">
  32. <div class="item-label">地址:</div>
  33. <div class="item-cont">{{ storeInfo.addrProvinceName }} - {{ storeInfo.addrCityName }} - {{ storeInfo.addrDistrictName }} - {{ storeInfo.addrDetail }}</div>
  34. </a-col>
  35. <a-col :span="8" class="item-w">
  36. <div class="item-label">纬度:</div>
  37. <div class="item-cont">{{ storeInfo.lat }}</div>
  38. </a-col>
  39. <a-col :span="8" class="item-w">
  40. <div class="item-label">经度:</div>
  41. <div class="item-cont">{{ storeInfo.lng }}</div>
  42. </a-col>
  43. <a-col :span="8" class="item-w">
  44. <div class="item-label">营业时间:</div>
  45. <div class="item-cont">{{ storeInfo.beginTime }} - {{ storeInfo.endTime }}</div>
  46. </a-col>
  47. <a-col :span="8" class="item-w">
  48. <div class="item-label">是否自营:</div>
  49. <div class="item-cont">{{ storeInfo.selfFlag }}</div>
  50. </a-col>
  51. <a-col :span="8" class="item-w">
  52. <div class="item-label">启用状态:</div>
  53. <div class="item-cont">{{ storeInfo.isEnable }}</div>
  54. </a-col>
  55. <a-col :span="8">
  56. <a-form-model-item class="form-label" label="组织归属" prop="orgCode" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
  57. <a-tree-select
  58. showSearch
  59. id="store-editOrg"
  60. v-model="form.orgCode"
  61. allowClear
  62. style="width: 100%"
  63. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  64. :tree-data="treeData"
  65. placeholder="请选择组织归属"
  66. treeNodeFilterProp="title">
  67. </a-tree-select>
  68. </a-form-model-item>
  69. </a-col>
  70. <a-col :span="24">
  71. <a-form-model-item class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
  72. <a-button id="store-saveOrg" type="primary" @click="onSubmit">保存</a-button>
  73. <a-button id="store-cancelOrg" class="cancel" @click="isShow = false">取消</a-button>
  74. </a-form-model-item>
  75. </a-col>
  76. </a-row>
  77. </a-form-model>
  78. </a-modal>
  79. </template>
  80. <script>
  81. import { Tree } from '@/components'
  82. import { findStoreDetail, saveStoreOrg } from '@/api/store.js'
  83. import { findOrgTree } from '@/api/atorg.js'
  84. export default {
  85. components: { Tree },
  86. name: 'StoreModal',
  87. props: {
  88. openModal: {
  89. // 弹框是否展示
  90. type: Boolean,
  91. default: false
  92. },
  93. storeId: {
  94. // 门店id
  95. type: String,
  96. default: ''
  97. }
  98. },
  99. data () {
  100. return {
  101. isShow: this.openModal, // 弹框是否展示
  102. form: { // 编辑
  103. orgCode: null // 机构编码
  104. },
  105. rules: { // 表单校验规则
  106. orgCode: [{ required: true, message: '请选择所属组织归属', trigger: 'change' }]
  107. },
  108. treeData: [],
  109. storeInfo: null // 门店详情
  110. }
  111. },
  112. methods: {
  113. // 门店详情
  114. getStoreInfo (id) {
  115. findStoreDetail({ id: id }).then(res => {
  116. console.log(res, '————————')
  117. if (res.status == 200) {
  118. this.storeInfo = res.data
  119. }
  120. })
  121. },
  122. // 获取组织机构 数据
  123. getOrgList () {
  124. findOrgTree().then(res => {
  125. if (res.status == 200) {
  126. this.treeData = this.recursionFun(res.data.list)
  127. } else {
  128. this.treeData = []
  129. }
  130. })
  131. },
  132. // 递归函数
  133. recursionFun (data) {
  134. data.map(item => {
  135. if (item.children && item.children.length == 0) {
  136. item.key = item.id ? 'org' + item.id : ''
  137. item.value = item.id ? item.id : ''
  138. item.title = item.name ? item.name : ''
  139. } else {
  140. item.key = item.id ? 'org' + item.id : ''
  141. item.value = item.id ? item.id : ''
  142. item.title = item.name ? item.name : ''
  143. this.recursionFun(item.children)
  144. }
  145. })
  146. return data
  147. },
  148. // 保存
  149. onSubmit () {
  150. const _this = this
  151. _this.$refs.ruleForm.validate(valid => {
  152. if (valid) {
  153. const formData = JSON.parse(JSON.stringify(_this.form))
  154. formData.tenantId = this.storeId
  155. console.log(formData)
  156. saveStoreOrg(formData).then(res => {
  157. if (res.status == 200) {
  158. _this.$message.success(res.message)
  159. _this.$emit('success')
  160. } else {
  161. _this.$message.error(res.message)
  162. }
  163. })
  164. } else {
  165. return false
  166. }
  167. })
  168. }
  169. },
  170. watch: {
  171. // 父页面传过来的弹框状态
  172. openModal (newValue, oldValue) {
  173. this.isShow = newValue
  174. },
  175. // 重定义的弹框状态
  176. isShow (val) {
  177. if (!val) {
  178. this.$emit('close')
  179. } else {
  180. // 重置表单数据
  181. this.form.orgCode = null
  182. }
  183. },
  184. storeId (newValue, oldValue) {
  185. if (newValue && this.isShow) {
  186. this.getOrgList()
  187. this.getStoreInfo(newValue)
  188. }
  189. }
  190. }
  191. }
  192. </script>
  193. <style lang="less">
  194. .StoreModal{
  195. .form{
  196. .item-w{
  197. display: flex;
  198. line-height: 24px;
  199. padding: 8px 0;
  200. margin-bottom: 24px;
  201. .item-label{
  202. flex-shrink: 0;
  203. width: 90px;
  204. text-align: right;
  205. font-weight: bold;
  206. }
  207. .item-cont{
  208. flex-grow: 1;
  209. }
  210. }
  211. .btn-cont {
  212. text-align: center;
  213. .cancel {
  214. margin-left: 40px;
  215. }
  216. }
  217. .form-label{
  218. .ant-form-item-label{
  219. .ant-form-item-required{
  220. font-weight: bold;
  221. color: rgba(0, 0, 0, 0.65);
  222. }
  223. }
  224. }
  225. }
  226. }
  227. </style>