123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <template>
- <div class="subPage">
- <form class="mainForm">
- <ul>
- <li class="flex-h">
- <span>案场名称:<em>*</em></span>
- <div class="flex-item">
- <div style="width:50%">
- <el-input
- placeholder="请输入名称"
- v-model="postData.CaseName"
- clearable>
- </el-input>
- </div>
- </div>
- </li>
- <li class="flex-h">
- <span>案场地址:<em>*</em></span>
- <div class="flex-item">
- <div>
- <el-input
- type="textarea"
- :autosize="{ minRows: 3, maxRows: 5}"
- placeholder="请填写详细地址"
- v-model="postData.CaseAddress">
- </el-input>
- </div>
- </div>
- </li>
- <li class="flex-h">
- <span>案场描述:</span>
- <div class="flex-item">
- <div>
- <el-input
- type="textarea"
- :autosize="{ minRows: 3, maxRows: 5}"
- placeholder="请填写详细描述"
- v-model="postData.CaseDesc">
- </el-input>
- </div>
- </div>
- </li>
- <li class="flex-h">
- <span>案场电话:</span>
- <div class="flex-item">
- <div style="width:50%">
- <el-input
- placeholder="限中国地区有效号码"
- v-model="postData.CaseTel"
- clearable>
- </el-input>
- </div>
- </div>
- </li>
- <li class="flex-h">
- <span>案场头像:<em>*</em></span>
- <div class="flex-item">
- <div>
-
-
- <el-upload
- class="avatar-uploader"
- action='string'
- :http-request="toolClass.upload"
- :show-file-list="false"
- :on-success="handleAvatarSuccess">
- <img v-if="postData.CaseIcon" :src="postData.CaseIcon" class="avatar">
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
- </el-upload>
- </div>
- </div>
- </li>
- <li class="flex-h">
- <span>左击地图获取经纬度:<em>*</em></span>
- <div class="flex-item" style="margin-left: 10px;">
- <div style="width:50%">
- <el-input
- placeholder=""
- v-model="postData.Coordinate"
- clearable>
- </el-input>
- </div>
- </div>
- </li>
- <li class="map flex-v">
- <div class="search">
- <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
- </div>
- <div class="flex-item">
- <div>
- <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
- <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" ></el-amap-marker>
- </el-amap>
- </div>
- </div>
- </li>
- <li style="text-align:center">
- <el-button type="primary" size="mini" @click="submit">保存</el-button>
- <el-button type="danger" size="mini" @click="cancel">取消</el-button>
- </li>
- </ul>
- </form>
- </div>
- </template>
-
- <script>
- import { mapState, mapActions } from 'vuex'
-
- export default {
- name: '',
- data () {
- var _self = this
- return {
- postData: {
- OrgId: '',
- CaseId: '',
- CaseName: '',
- CaseDesc: '',
- CaseIcon: '',
- CaseAddress: '',
- CaseTel: '',
- Coordinate: '',
- Status: '',
- CreatDate: '',
- CreatUser: '',
- },
- markers: [],
- searchOption: {
- city: '南京',
- citylimit: false
- },
- mapCenter: [118.789509, 32.019989],
- events: {
- click: (e) => {
- _self.postData.Coordinate = e.lnglat.lat + ',' + e.lnglat.lng
- }
- },
- }
- },
- computed: {
- ...mapState({
- OrgId: x => x.app.user.OrgId,
- }),
- },
- created () {
- this.getCaseInfoById()
- },
- components: {},
- methods: {
- ...mapActions([
- 'updateSystemInfo'
- ]),
- getCaseInfoById () {
- this.$ajax(this.$api.caseManager.getCaseInfo.url, {
- method: this.$api.caseManager.getCaseInfo.method,
- urlData: { id: this.$route.query.id }
- }).then(res => {
- this.postData = res
- })
- },
- handleAvatarSuccess (res, file) {
- this.postData.CaseIcon = res.result.url
- },
- onSearchResult (pois) {
- let latSum = 0
- let lngSum = 0
- if (pois.length > 0) {
- pois.forEach(poi => {
- let { lng, lat } = poi
- lngSum += lng
- latSum += lat
- this.markers.push([poi.lng, poi.lat])
- })
- let center = {
- lng: lngSum / pois.length,
- lat: latSum / pois.length
- }
- this.mapCenter = [center.lng, center.lat]
- }
- },
- submit () {
- if (this.postData.CaseName === '') {
- this.$message({
- type: 'error',
- message: '请填写案场名称!'
- })
- return false
- }
- if (this.postData.CaseAddress === '') {
- this.$message({
- type: 'error',
- message: '请填写案场地址!'
- })
- return false
- }
- if (this.postData.CaseIcon === '') {
- this.$message({
- type: 'error',
- message: '请上传案场图片!'
- })
- return false
- }
- if (this.postData.Coordinate === '') {
- this.$message({
- type: 'error',
- message: '案场在地图上的位置不明确,请在地图上抓取地址获取经纬度!'
- })
- return false
- }
- this.postData.OrgId = this.OrgId
- this.$ajax(this.$api.caseManager.addCase.url, {
- method: this.$api.caseManager.addCase.method,
- data: this.postData
- }).then(res => {
- this.$message({
- type: 'success',
- message: '操作成功'
- })
- this.updateSystemInfo().then(() => {
- this.$router.push({ name: 'caseInfo' })
- })
- })
- },
- cancel () {
- this.$router.push({ name: 'caseInfo' })
- }
- }
- }
- </script>
-
-
- <style lang="scss" scoped>
- @import "page.scss";
- </style>
|