index.vue 7.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <div class="subPage">
  3. <form class="mainForm">
  4. <ul>
  5. <li class="flex-h">
  6. <span>案场名称:<em>*</em></span>
  7. <div class="flex-item">
  8. <div style="width:50%">
  9. <el-input
  10. placeholder="请输入名称"
  11. v-model="postData.CaseName"
  12. clearable>
  13. </el-input>
  14. </div>
  15. </div>
  16. </li>
  17. <li class="flex-h">
  18. <span>案场地址:<em>*</em></span>
  19. <div class="flex-item">
  20. <div>
  21. <el-input
  22. type="textarea"
  23. :autosize="{ minRows: 3, maxRows: 5}"
  24. placeholder="请填写详细地址"
  25. v-model="postData.CaseAddress">
  26. </el-input>
  27. </div>
  28. </div>
  29. </li>
  30. <li class="flex-h">
  31. <span>案场描述:</span>
  32. <div class="flex-item">
  33. <div>
  34. <el-input
  35. type="textarea"
  36. :autosize="{ minRows: 3, maxRows: 5}"
  37. placeholder="请填写详细描述"
  38. v-model="postData.CaseDesc">
  39. </el-input>
  40. </div>
  41. </div>
  42. </li>
  43. <li class="flex-h">
  44. <span>案场电话:</span>
  45. <div class="flex-item">
  46. <div style="width:50%">
  47. <el-input
  48. placeholder="限中国地区有效号码"
  49. v-model="postData.CaseTel"
  50. clearable>
  51. </el-input>
  52. </div>
  53. </div>
  54. </li>
  55. <li class="flex-h">
  56. <span>案场头像:<em>*</em></span>
  57. <div class="flex-item">
  58. <div>
  59. <!-- <a class="formImg">
  60. <img :src="postData.CaseIcon" class="centerLabel contain" alt="">
  61. <i class="iconfont icon-quxiao"></i>
  62. </a> -->
  63. <el-upload
  64. class="avatar-uploader"
  65. action='string'
  66. :http-request="toolClass.upload"
  67. :show-file-list="false"
  68. :on-success="handleAvatarSuccess">
  69. <img v-if="postData.CaseIcon" :src="postData.CaseIcon" class="avatar">
  70. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  71. </el-upload>
  72. </div>
  73. </div>
  74. </li>
  75. <li class="flex-h">
  76. <span>左击地图获取经纬度:<em>*</em></span>
  77. <div class="flex-item" style="margin-left: 10px;">
  78. <div style="width:50%">
  79. <el-input
  80. placeholder=""
  81. v-model="postData.Coordinate"
  82. clearable>
  83. </el-input>
  84. </div>
  85. </div>
  86. </li>
  87. <li class="map flex-v">
  88. <div class="search">
  89. <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
  90. </div>
  91. <div class="flex-item">
  92. <div>
  93. <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
  94. <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" ></el-amap-marker>
  95. </el-amap>
  96. </div>
  97. </div>
  98. </li>
  99. <li style="text-align:center">
  100. <el-button type="primary" size="mini" @click="submit">保存</el-button>
  101. <el-button type="danger" size="mini" @click="cancel">取消</el-button>
  102. </li>
  103. </ul>
  104. </form>
  105. </div>
  106. </template>
  107. <script>
  108. import { mapState, mapActions } from 'vuex'
  109. export default {
  110. name: '',
  111. data () {
  112. var _self = this
  113. return {
  114. postData: {
  115. OrgId: '', // 机构id
  116. CaseId: '', // 案场id
  117. CaseName: '', // 案场名称
  118. CaseDesc: '', // 案场描述
  119. CaseIcon: '', // 案场图标
  120. CaseAddress: '', // 案场地址
  121. CaseTel: '', // 案场电话
  122. Coordinate: '', // 经纬度
  123. Status: '', // 状态 0表示未开放, 1表示已开放
  124. CreatDate: '', // 创建日期
  125. CreatUser: '', // 创建人
  126. },
  127. markers: [],
  128. searchOption: {
  129. city: '南京',
  130. citylimit: false
  131. },
  132. mapCenter: [118.789509, 32.019989],
  133. events: {
  134. click: (e) => {
  135. _self.postData.Coordinate = e.lnglat.lat + ',' + e.lnglat.lng
  136. }
  137. },
  138. }
  139. },
  140. computed: {
  141. ...mapState({
  142. OrgId: x => x.app.user.OrgId,
  143. }),
  144. },
  145. created () {
  146. this.getCaseInfoById()
  147. },
  148. components: {},
  149. methods: {
  150. ...mapActions([
  151. 'updateSystemInfo'
  152. ]),
  153. getCaseInfoById () { // 获取案场信息
  154. this.$ajax(this.$api.caseManager.getCaseInfo.url, {
  155. method: this.$api.caseManager.getCaseInfo.method,
  156. urlData: { id: this.$route.query.id }
  157. }).then(res => {
  158. this.postData = res
  159. })
  160. },
  161. handleAvatarSuccess (res, file) {
  162. this.postData.CaseIcon = res.result.url
  163. },
  164. onSearchResult (pois) { // 搜索地图
  165. let latSum = 0
  166. let lngSum = 0
  167. if (pois.length > 0) {
  168. pois.forEach(poi => {
  169. let { lng, lat } = poi
  170. lngSum += lng
  171. latSum += lat
  172. this.markers.push([poi.lng, poi.lat])
  173. })
  174. let center = {
  175. lng: lngSum / pois.length,
  176. lat: latSum / pois.length
  177. }
  178. this.mapCenter = [center.lng, center.lat]
  179. }
  180. },
  181. submit () { // 提交数据
  182. if (this.postData.CaseName === '') {
  183. this.$message({
  184. type: 'error',
  185. message: '请填写案场名称!'
  186. })
  187. return false
  188. }
  189. if (this.postData.CaseAddress === '') {
  190. this.$message({
  191. type: 'error',
  192. message: '请填写案场地址!'
  193. })
  194. return false
  195. }
  196. if (this.postData.CaseIcon === '') {
  197. this.$message({
  198. type: 'error',
  199. message: '请上传案场图片!'
  200. })
  201. return false
  202. }
  203. if (this.postData.Coordinate === '') {
  204. this.$message({
  205. type: 'error',
  206. message: '案场在地图上的位置不明确,请在地图上抓取地址获取经纬度!'
  207. })
  208. return false
  209. }
  210. this.postData.OrgId = this.OrgId
  211. this.$ajax(this.$api.caseManager.addCase.url, {
  212. method: this.$api.caseManager.addCase.method,
  213. data: this.postData
  214. }).then(res => {
  215. this.$message({
  216. type: 'success',
  217. message: '操作成功'
  218. })
  219. this.updateSystemInfo().then(() => {
  220. this.$router.push({ name: 'caseInfo' })
  221. })
  222. })
  223. },
  224. cancel () { // 取消
  225. this.$router.push({ name: 'caseInfo' })
  226. }
  227. }
  228. }
  229. </script>
  230. <!-- Add "scoped" attribute to limit CSS to this component only -->
  231. <style lang="scss" scoped>
  232. @import "page.scss";
  233. </style>