|
@@ -1,15 +1,18 @@
|
|
<template>
|
|
<template>
|
|
<div class="club-edit">
|
|
<div class="club-edit">
|
|
- <el-form class="club-edit-form" label-width="120px" :model="formData" :rules="rules">
|
|
|
|
|
|
+ <el-form ref="submitForm" class="club-edit-form" label-width="120px" :model="formData" :rules="rules">
|
|
<el-form-item label="机构名称:" prop="name">
|
|
<el-form-item label="机构名称:" prop="name">
|
|
<el-input v-model="formData.name" placeholder="请输入机构名称" />
|
|
<el-input v-model="formData.name" placeholder="请输入机构名称" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="所在地区:" prop="address">
|
|
<el-form-item label="所在地区:" prop="address">
|
|
<el-cascader
|
|
<el-cascader
|
|
- v-model="value"
|
|
|
|
- :options="options"
|
|
|
|
|
|
+ ref="cascader"
|
|
|
|
+ v-model="formData.address"
|
|
|
|
+ :class="{ display: cascaderDisplay }"
|
|
|
|
+ clearable
|
|
|
|
+ :props="cascaderProps"
|
|
style="width: 100%"
|
|
style="width: 100%"
|
|
- placeholder="请选择所在地区"
|
|
|
|
|
|
+ :placeholder="cascaderPlaceholder"
|
|
@change="handleChange"
|
|
@change="handleChange"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -26,40 +29,24 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="机构logo:" prop="logoImage">
|
|
<el-form-item label="机构logo:" prop="logoImage">
|
|
<el-input v-show="false" v-model="formData.logoImage" />
|
|
<el-input v-show="false" v-model="formData.logoImage" />
|
|
- <el-upload
|
|
|
|
- :class="{ 'el-upload-hidden': logoList.length >= 1}"
|
|
|
|
- :file-list="logoList"
|
|
|
|
- list-type="picture-card"
|
|
|
|
- :action="action"
|
|
|
|
- :headers="headers"
|
|
|
|
- :on-success="uploadLogoSuccess"
|
|
|
|
|
|
+ <upload-image
|
|
|
|
+ tip="建议尺寸:242px * 242px"
|
|
|
|
+ :image-list="logoList"
|
|
:before-upload="beforeLogoUpload"
|
|
:before-upload="beforeLogoUpload"
|
|
- :on-remove="handleLogoRemove"
|
|
|
|
- :limit="1"
|
|
|
|
- >
|
|
|
|
- <div slot="tip" class="el-upload__tip">建议尺寸:242px * 242px</div>
|
|
|
|
- <i slot="default" class="el-icon-plus" />
|
|
|
|
- </el-upload>
|
|
|
|
|
|
+ @success="uploadLogoSuccess"
|
|
|
|
+ @remove="handleLogoRemove"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="轮播图:" prop="banner">
|
|
<el-form-item label="轮播图:" prop="banner">
|
|
<el-input v-show="false" v-model="formData.banner" />
|
|
<el-input v-show="false" v-model="formData.banner" />
|
|
- <el-upload
|
|
|
|
- ref="coverUploader"
|
|
|
|
- :class="{ 'el-upload-hidden': bannerList.length >= 2}"
|
|
|
|
- list-type="picture-card"
|
|
|
|
- :action="action"
|
|
|
|
- :headers="headers"
|
|
|
|
- :on-success="uploadBannerSuccess"
|
|
|
|
- :on-remove="handleBannerRemove"
|
|
|
|
|
|
+ <upload-image
|
|
|
|
+ tip="至少上传一张,最多6张;建议尺寸:542px * 542px"
|
|
|
|
+ :image-list="bannerList"
|
|
:before-upload="beforeBannerUpload"
|
|
:before-upload="beforeBannerUpload"
|
|
- :limit="2"
|
|
|
|
- multiple
|
|
|
|
- accept=".jpg,.png,.gif"
|
|
|
|
- :file-list="bannerList"
|
|
|
|
- >
|
|
|
|
- <div slot="tip" class="el-upload__tip">至少上传一张,最多6张;建议尺寸:542px * 542px</div>
|
|
|
|
- <i slot="default" class="el-icon-plus" />
|
|
|
|
- </el-upload>
|
|
|
|
|
|
+ :limit="6"
|
|
|
|
+ @success="uploadBannerSuccess"
|
|
|
|
+ @remove="handleBannerRemove"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
<div class="submit-btn">
|
|
<div class="submit-btn">
|
|
@@ -67,63 +54,48 @@
|
|
<el-button type="warning" @click="$_back()">返回</el-button>
|
|
<el-button type="warning" @click="$_back()">返回</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <el-dialog class="map-dialog" title="坐标拾取(请拖动标记点选取准确位置)" :visible.sync="dialogMapVisible" width="80%">
|
|
|
|
- <location v-if="dialogMapVisible" :init-point="formData.point" @point="handlePointChange" />
|
|
|
|
|
|
+ <el-dialog
|
|
|
|
+ class="map-dialog"
|
|
|
|
+ title="坐标拾取(请拖动标记点选取准确位置)"
|
|
|
|
+ :visible.sync="dialogMapVisible"
|
|
|
|
+ width="80%"
|
|
|
|
+ >
|
|
|
|
+ <!-- <location v-if="dialogMapVisible" :init-point="formData.point" @point="handlePointChange" /> -->
|
|
|
|
+ <map-ui v-if="dialogMapVisible" :init-point="formData.point" :address="locationAddress" @change="markerChange" />
|
|
<div slot="footer" class="dialog-footer">
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" size="mini" @click="dialogMapVisible = false">确 定</el-button>
|
|
<el-button type="primary" size="mini" @click="dialogMapVisible = false">确 定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import Location from '@/components/location'
|
|
|
|
|
|
+// import Location from '@/components/location'
|
|
|
|
+import AMapUI from '@/components/AMapUI'
|
|
|
|
+import UploadImage from '@/components/UploadImage'
|
|
import { mapGetters } from 'vuex'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
+import { saveBrandAuth, getAuthFormData } from '@/api/auth'
|
|
|
|
+import { getAddress } from '@/api/common'
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
- Location
|
|
|
|
|
|
+ // Location
|
|
|
|
+ [AMapUI.name]: AMapUI,
|
|
|
|
+ UploadImage
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
dialogMapVisible: false,
|
|
dialogMapVisible: false,
|
|
point: {},
|
|
point: {},
|
|
value: [],
|
|
value: [],
|
|
- options: [{
|
|
|
|
- value: 'zhinan',
|
|
|
|
- label: '指南',
|
|
|
|
- children: [{
|
|
|
|
- value: 'shejiyuanze',
|
|
|
|
- label: '设计原则',
|
|
|
|
- children: [{
|
|
|
|
- value: 'yizhi',
|
|
|
|
- label: '一致'
|
|
|
|
- }, {
|
|
|
|
- value: 'fankui',
|
|
|
|
- label: '反馈'
|
|
|
|
- }, {
|
|
|
|
- value: 'xiaolv',
|
|
|
|
- label: '效率'
|
|
|
|
- }, {
|
|
|
|
- value: 'kekong',
|
|
|
|
- label: '可控'
|
|
|
|
- }]
|
|
|
|
- }, {
|
|
|
|
- value: 'daohang',
|
|
|
|
- label: '导航',
|
|
|
|
- children: [{
|
|
|
|
- value: 'cexiangdaohang',
|
|
|
|
- label: '侧向导航'
|
|
|
|
- }, {
|
|
|
|
- value: 'dingbudaohang',
|
|
|
|
- label: '顶部导航'
|
|
|
|
- }]
|
|
|
|
- }]
|
|
|
|
- }],
|
|
|
|
|
|
+ options: [],
|
|
|
|
+
|
|
|
|
+ authId: '',
|
|
disabled: false,
|
|
disabled: false,
|
|
|
|
+
|
|
|
|
+ area: '',
|
|
formData: {
|
|
formData: {
|
|
name: '',
|
|
name: '',
|
|
- address: '',
|
|
|
|
|
|
+ address: [],
|
|
fullAddress: '',
|
|
fullAddress: '',
|
|
point: '',
|
|
point: '',
|
|
mobile: '',
|
|
mobile: '',
|
|
@@ -132,50 +104,146 @@ export default {
|
|
},
|
|
},
|
|
rules: {
|
|
rules: {
|
|
name: [{ required: true, message: '机构名称不能为空', trigger: ['blur', 'change'] }],
|
|
name: [{ required: true, message: '机构名称不能为空', trigger: ['blur', 'change'] }],
|
|
- address: [{ required: true, message: '地址不能为空', trigger: 'change' }],
|
|
|
|
|
|
+ address: [{ required: true, message: '地址不能为空', trigger: 'change', type: 'array' }],
|
|
fullAddress: [{ required: true, message: '详细不能为空', trigger: ['blur', 'change'] }],
|
|
fullAddress: [{ required: true, message: '详细不能为空', trigger: ['blur', 'change'] }],
|
|
point: [{ required: true, message: '地址坐标不能为空', trigger: ['blur', 'change'] }],
|
|
point: [{ required: true, message: '地址坐标不能为空', trigger: ['blur', 'change'] }],
|
|
mobile: [{ required: true, message: '联系方式不能为空', trigger: ['blur', 'change'] }],
|
|
mobile: [{ required: true, message: '联系方式不能为空', trigger: ['blur', 'change'] }],
|
|
logoImage: [{ required: true, message: '请上传机构logo', trigger: 'change' }],
|
|
logoImage: [{ required: true, message: '请上传机构logo', trigger: 'change' }],
|
|
banner: [{ required: true, message: '请至少上传一张banner图片', trigger: 'change' }]
|
|
banner: [{ required: true, message: '请至少上传一张banner图片', trigger: 'change' }]
|
|
-
|
|
|
|
},
|
|
},
|
|
// logo图片列表
|
|
// logo图片列表
|
|
logoList: [],
|
|
logoList: [],
|
|
// banner图片列表
|
|
// banner图片列表
|
|
- bannerList: []
|
|
|
|
|
|
+ bannerList: [],
|
|
|
|
+ // 级联选择的地址
|
|
|
|
+ address: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- ...mapGetters(['token']),
|
|
|
|
- // 图片上传
|
|
|
|
- action() {
|
|
|
|
- return process.env.VUE_APP_UPLOAD_API + '/upload/image'
|
|
|
|
- },
|
|
|
|
- headers() {
|
|
|
|
|
|
+ ...mapGetters(['authUserId', 'proxyInfo']),
|
|
|
|
+ // 级联选择器
|
|
|
|
+ cascaderProps() {
|
|
return {
|
|
return {
|
|
- 'X-Token': this.token
|
|
|
|
|
|
+ lazy: true,
|
|
|
|
+ lazyLoad: async(node, resolve) => {
|
|
|
|
+ const { level, value = 0 } = node
|
|
|
|
+ const result = await getAddress({ parentId: value, type: level })
|
|
|
|
+ const nodes = result.data.map(item => ({ value: item.id, label: item.name, leaf: level >= 2 }))
|
|
|
|
+ resolve(nodes)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ cascaderDisplay() {
|
|
|
|
+ return this.formData.address.length > 0
|
|
|
|
+ },
|
|
|
|
+ cascaderPlaceholder() {
|
|
|
|
+ return this.cascaderDisplay ? this.area : '请选择所在区域'
|
|
|
|
+ },
|
|
|
|
+ // 定位使用的地址
|
|
|
|
+ locationAddress() {
|
|
|
|
+ return this.address + this.formData.fullAddress
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
-
|
|
|
|
|
|
+ this.authId = this.$route.query.id
|
|
|
|
+ this.initFormData()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- handlePointChange(point) {
|
|
|
|
- console.log(point)
|
|
|
|
- this.formData.point = `${point.lat},${point.lng}`
|
|
|
|
|
|
+ // 获取地址
|
|
|
|
+ initAddress() {
|
|
|
|
+ return getAddress({
|
|
|
|
+ parentId: 19,
|
|
|
|
+ type: 1
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 地图标记变化
|
|
|
|
+ markerChange(point) {
|
|
|
|
+ this.formData.point = `${point.lng},${point.lat}`
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 数据回显
|
|
|
|
+ initFormData() {
|
|
|
|
+ getAuthFormData({ authId: this.authId }).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.formData.name = res.data.authParty
|
|
|
|
+
|
|
|
|
+ this.formData.fullAddress = res.data.address
|
|
|
|
+ this.formData.point = res.data.lngAndLat
|
|
|
|
+ this.formData.mobile = res.data.mobile
|
|
|
|
+ this.formData.logoImage = res.data.logo
|
|
|
|
+ this.formData.banner = res.data.bannerList.length || ''
|
|
|
|
+
|
|
|
|
+ this.logoList = [{ name: '', url: res.data.logo }]
|
|
|
|
+ this.bannerList = res.data.bannerList.map(item => ({ name: '', url: item }))
|
|
|
|
+
|
|
|
|
+ this.formData.address = [res.data.provinceId, res.data.cityId, res.data.townId]
|
|
|
|
+ // this.formData.address = '广东省/深圳市/福田区'
|
|
|
|
+ this.area = res.data.area
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 表单提交保存
|
|
|
|
+ submit() {
|
|
|
|
+ this.$refs.submitForm.validate(valide => {
|
|
|
|
+ if (!valide) return
|
|
|
|
+
|
|
|
|
+ console.log(this.formData)
|
|
|
|
+ const {
|
|
|
|
+ name: authParty,
|
|
|
|
+ address: [provinceId, cityId, townId],
|
|
|
|
+ mobile,
|
|
|
|
+ logoImage: logo,
|
|
|
|
+ point: lngAndLat
|
|
|
|
+ } = this.formData
|
|
|
|
+
|
|
|
|
+ const authUserId = this.proxyInfo?.authUserId || this.authUserId
|
|
|
|
+
|
|
|
|
+ const data = {
|
|
|
|
+ authId: parseInt(this.authId),
|
|
|
|
+ authParty,
|
|
|
|
+ authUserId,
|
|
|
|
+ createBy: authUserId,
|
|
|
|
+ provinceId,
|
|
|
|
+ cityId,
|
|
|
|
+ townId,
|
|
|
|
+ address: this.formData.fullAddress,
|
|
|
|
+ mobile,
|
|
|
|
+ logo,
|
|
|
|
+ lngAndLat
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ data.bannerList = this.bannerList.map(item => item.response ? item.response.data : item.url)
|
|
|
|
+
|
|
|
|
+ console.log(data)
|
|
|
|
+ saveBrandAuth(data)
|
|
|
|
+ .then(res => {
|
|
|
|
+ const h = this.$createElement
|
|
|
|
+ this.$notify.success({
|
|
|
|
+ title: `修改授权机构`,
|
|
|
|
+ message: h('i', { style: 'color: #333' }, `已修改授权机构:"${this.formData.name}"`),
|
|
|
|
+ duration: 3000
|
|
|
|
+ })
|
|
|
|
+ this.$refs.submitForm.resetFields()
|
|
|
|
+ this.$store.dispatch('tagsView/delView', this.$route)
|
|
|
|
+ this.$router.push('/auth/list')
|
|
|
|
+ })
|
|
|
|
+ .catch(err => {
|
|
|
|
+ this.$message.danger(err.msg)
|
|
|
|
+ })
|
|
|
|
+ })
|
|
},
|
|
},
|
|
- submit() {},
|
|
|
|
handleChange(e) {
|
|
handleChange(e) {
|
|
- console.log(e)
|
|
|
|
|
|
+ const node = this.$refs.cascader.getCheckedNodes()
|
|
|
|
+ if (node.length <= 0) return
|
|
|
|
+ this.address = node[0].pathLabels.join()
|
|
},
|
|
},
|
|
// logo上传
|
|
// logo上传
|
|
- uploadLogoSuccess(response, file, fileList) {
|
|
|
|
|
|
+ uploadLogoSuccess({ response, file, fileList }) {
|
|
this.logoList = fileList
|
|
this.logoList = fileList
|
|
this.formData.logoImage = fileList[0].response.data
|
|
this.formData.logoImage = fileList[0].response.data
|
|
},
|
|
},
|
|
- handleLogoRemove(file, fileList) {
|
|
|
|
|
|
+ handleLogoRemove({ file, fileList }) {
|
|
this.logoList = fileList
|
|
this.logoList = fileList
|
|
this.formData.logoImage = ''
|
|
this.formData.logoImage = ''
|
|
},
|
|
},
|
|
@@ -188,12 +256,14 @@ export default {
|
|
},
|
|
},
|
|
|
|
|
|
// banner上传
|
|
// banner上传
|
|
- uploadBannerSuccess(response, file, fileList) {
|
|
|
|
|
|
+ uploadBannerSuccess({ response, file, fileList }) {
|
|
this.bannerList = fileList
|
|
this.bannerList = fileList
|
|
console.log(this.bannerList)
|
|
console.log(this.bannerList)
|
|
|
|
+ this.formData.banner = fileList.length > 0 ? fileList.length : ''
|
|
},
|
|
},
|
|
- handleBannerRemove(file, fileList) {
|
|
|
|
|
|
+ handleBannerRemove({ file, fileList }) {
|
|
this.bannerList = fileList
|
|
this.bannerList = fileList
|
|
|
|
+ this.formData.banner = fileList.length > 0 ? fileList.length : ''
|
|
},
|
|
},
|
|
beforeBannerUpload(file) {
|
|
beforeBannerUpload(file) {
|
|
const flag = file.size / 1024 / 1024 < 1
|
|
const flag = file.size / 1024 / 1024 < 1
|
|
@@ -207,13 +277,12 @@ export default {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-
|
|
|
|
-#allmap{
|
|
|
|
|
|
+#allmap {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 600px;
|
|
height: 600px;
|
|
}
|
|
}
|
|
|
|
|
|
-.club-edit{
|
|
|
|
|
|
+.club-edit {
|
|
margin-bottom: 80px;
|
|
margin-bottom: 80px;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -228,5 +297,4 @@ export default {
|
|
width: 140px;
|
|
width: 140px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
</style>
|
|
</style>
|