IndexEdit.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <template>
  2. <div>
  3. <el-dialog
  4. v-loading="loading"
  5. :show-close="false"
  6. :close-on-click-modal="false"
  7. :visible.sync="isShow"
  8. :title="'编辑学校'"
  9. :fullscreen="false"
  10. width="700px"
  11. custom-class="xl-dialog"
  12. center
  13. >
  14. <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="110px" :insertSlotArr="[7, 10]">
  15. <div slot="OI7" class="scoped-img-area">
  16. <div class="sia-title">更多图片</div>
  17. <div class="sia-op" v-for="(imgsrc,index) in imagesArr" :key="index">
  18. <img class="img" :src="imgsrc + '_adm0'" alt="img" @click="openbigImg(imgsrc + '_adm0')">
  19. <span class="close" @click="imgDel(index)"></span>
  20. </div>
  21. <el-upload
  22. class="sia-img"
  23. :action="`${domainUrl}/adm/upload/cloud`"
  24. :data="{logic_type: 'estate', token}"
  25. name="upload"
  26. :show-file-list="false"
  27. :on-success="roomAreaUploadSuccess"
  28. :before-upload="roomAreaUploadBefore"
  29. >
  30. <i class="el-icon-plus icon" />
  31. </el-upload>
  32. </div>
  33. <div slot="OI10" class="scoped-other-form">
  34. <el-form-item label="点位坐标" class="scoped-item-two item">
  35. 纬度N<el-input v-model="cObj.latitude" disabled />
  36. 经度E<el-input v-model="cObj.longitude" disabled />
  37. <el-button type="primary" class="map-btn" size="small" @click="handleMap">点击从地图获取</el-button>
  38. </el-form-item>
  39. </div>
  40. <div slot="footer" style="padding-top: 20px;">
  41. <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
  42. <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
  43. </div>
  44. </base-form>
  45. </el-dialog>
  46. <handle-map :is-show="isShowMap" @close="closeMap" />
  47. <popup-big-img :is-show="bigImgShow" :src="`${bigImgSrc}`" @close="closebigImg" />
  48. </div>
  49. </template>
  50. <script>
  51. import handleMap from '@/components/Common/Map'
  52. import bigImgPopup from '_m/bigImgPopup.js'
  53. export default {
  54. components: { handleMap },
  55. mixins: [...mixins, bigImgPopup],
  56. props: {
  57. isShow: Boolean,
  58. curObj: Object
  59. },
  60. inject: ['parentData'],
  61. data() {
  62. let domainUrl = process.env.VUE_APP_BASE_API
  63. const token = window.sessionStorage.getItem('fp_token')
  64. return {
  65. imagesArr: [],
  66. domainUrl,
  67. token,
  68. formData: [],
  69. loading: true,
  70. cObj: {},
  71. isShowMap: false
  72. }
  73. },
  74. watch: {
  75. isShow: function(val) {
  76. if (val) {
  77. if (val) {
  78. if (this.curObj.id) {
  79. this.$api.school.admschooldetail({id: this.curObj.id}).then(res => {
  80. let curData = res || {}
  81. this.cObj = curData || {}
  82. if (curData.images && curData.images.length > 0) this.imagesArr = curData.images.split(',')
  83. this.getDef()
  84. })
  85. } else {
  86. this.cObj = this.curObj
  87. this.getDef()
  88. }
  89. }
  90. }
  91. },
  92. },
  93. methods: {
  94. imgDel (index) {
  95. this.imagesArr.splice(index, 1)
  96. this.imagesArr = [...this.imagesArr]
  97. },
  98. roomAreaUploadSuccess(res, file) {
  99. const data = res.data || {}
  100. let urls = this.imagesArr || []
  101. urls.push(`${data.url}`)
  102. this.imagesArr = urls
  103. this.imagesArr = [...this.imagesArr]
  104. },
  105. roomAreaUploadBefore(file) {
  106. const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png'
  107. const isLt2M = file.size / 1024 / 1024 < 2
  108. if (!isJPGPNG) {
  109. this.$message.error('上传图片只能是 JPG PNG 格式!')
  110. }
  111. if (!isLt2M) {
  112. this.$message.error('上传图片大小不能超过 2M!')
  113. }
  114. return isJPGPNG && isLt2M
  115. },
  116. getDef (str) {
  117. let params = { ...this.cObj }
  118. if (str === 'school_type') {
  119. params = {...this.$refs.ruleForm.baseForm}
  120. }
  121. const disabled = false
  122. if (!params.pri_image) params.pri_image = 'http://img.honglounews.com/20210429034015-4091.png'
  123. let remoteOptionsHouse = []
  124. if (params.estate_list && params.estate_list.duikou && params.estate_list.duikou.length > 0) {
  125. params.estate_dk_list = params.estate_list.duikou.map(item => {
  126. remoteOptionsHouse.push({ keyRO: item.estate_name, valRO: item.id })
  127. return item.id
  128. })
  129. } else {
  130. params.estate_dk_list = []
  131. }
  132. if (params.estate_list && params.estate_list.guihua && params.estate_list.guihua.length > 0) {
  133. params.estate_gh_list = params.estate_list.guihua.map(item => {
  134. remoteOptionsHouse.push({ keyRO: item.estate_name, valRO: item.id })
  135. return item.id
  136. })
  137. } else {
  138. params.estate_gh_list = []
  139. }
  140. if (params.school_type === '2') {
  141. this.formData = [
  142. { label: '学校名称', key: 'school_name' },
  143. { label: '所属区域', key: 'area_type', type: 'select', class: 'c-2', options: this.$dictData.area_type },
  144. { label: '学校属性', key: 'school_attrib', type: 'select', class: 'c-2', options: this.$dictData.school_attrib },
  145. { label: '学校类型', key: 'school_type', type: 'select', class: 'c-2', options: this.$dictData.school_type, changeHandle: this.typeChange },
  146. // { label: '学校分类', key: 'school_cate', type: 'select', class: 'c-2', options: this.$dictData.school_cate },
  147. { label: '学校预警', key: 'school_warn', type: 'select', class: 'c-2', options: this.$dictData.school_warn },
  148. { label: '主图', key: 'pri_image', type: 'upload', class: 'c-2' },
  149. { label: '学区范围图', key: 'district_img', type: 'upload', class: 'c-2' },
  150. { label: '学区范围', key: 'district',type: 'textarea' },
  151. { label: '当前航拍key', key: 'vr_key', class: 'c-2'},
  152. { label: '航拍背景图', key: 'vr_image', class: 'c-2', type: 'cuImg',
  153. options: {
  154. w: 375,
  155. h: 250,
  156. }
  157. },
  158. { label: '对口楼盘', key: 'estate_dk_list', multiple: true, type: 'selectRemote',
  159. remoteParams: { skey: 'estate_name', api: `house.admestatelist`, opKey: 'estate_name', opVal: 'id' },
  160. remoteOptions: remoteOptionsHouse
  161. },
  162. { label: '规划楼盘', key: 'estate_gh_list', multiple: true, type: 'selectRemote',
  163. remoteParams: { skey: 'estate_name', api: `house.admestatelist`, opKey: 'estate_name', opVal: 'id' },
  164. remoteOptions: remoteOptionsHouse
  165. },
  166. { label: '学校地址', key: 'address' },
  167. { label: '历年成绩', key: 'achievement', type: 'textarea' },
  168. { label: '学校评价', key: 'remarked', type: 'textarea' },
  169. { label: '学费', key: 'tuition', class: 'c-2', type: 'inputFont', appendFont: '万元/年' },
  170. { label: '有无住宿', key: 'is_live', type: 'select', class: 'c-2', options: this.$dictData.sys_yesno2 },
  171. ]
  172. } else {
  173. this.formData = [
  174. { label: '学校名称', key: 'school_name' },
  175. { label: '所属区域', key: 'area_type', type: 'select', class: 'c-2', options: this.$dictData.area_type },
  176. { label: '学校属性', key: 'school_attrib', type: 'select', class: 'c-2', options: this.$dictData.school_attrib },
  177. { label: '学校类型', key: 'school_type', type: 'select', class: 'c-2', options: this.$dictData.school_type, changeHandle: this.typeChange },
  178. // { label: '学校分类', key: 'school_cate', type: 'select', class: 'c-2', options: this.$dictData.school_cate },
  179. { label: '学校预警', key: 'school_warn', type: 'select', class: 'c-2', options: this.$dictData.school_warn },
  180. { label: '主图', key: 'pri_image', type: 'cuImg',
  181. options: {
  182. w: 375,
  183. h: 250,
  184. SY: 1,
  185. }, class: 'c-2' },
  186. { label: '学区范围图', key: 'district_img', type: 'upload', class: 'c-2' },
  187. { label: '学区范围', key: 'district',type: 'textarea' },
  188. { label: '当前航拍key', key: 'vr_key', class: 'c-2'},
  189. { label: '航拍背景图', key: 'vr_image', class: 'c-2', type: 'cuImg',
  190. options: {
  191. w: 375,
  192. h: 250,
  193. }
  194. },
  195. { label: '对口楼盘', key: 'estate_dk_list', multiple: true, type: 'selectRemote',
  196. remoteParams: { skey: 'estate_name', api: `house.admestatelist`, opKey: 'estate_name', opVal: 'id' },
  197. remoteOptions: remoteOptionsHouse
  198. },
  199. { label: '规划楼盘', key: 'estate_gh_list', multiple: true, type: 'selectRemote',
  200. remoteParams: { skey: 'estate_name', api: `house.admestatelist`, opKey: 'estate_name', opVal: 'id' },
  201. remoteOptions: remoteOptionsHouse
  202. },
  203. { label: '学校地址', key: 'address'},
  204. { label: '历年成绩', key: 'achievement', type: 'textarea'},
  205. { label: '学校评价', key: 'remarked', type: 'textarea'},
  206. ]
  207. }
  208. params.pri_image = this.IMadd(params.pri_image)
  209. params.district_img = this.IMadd(params.district_img)
  210. this.setDefaultValue(params)
  211. },
  212. typeChange () {
  213. this.getDef('school_type')
  214. },
  215. close(str) {
  216. if (str === 'confirm') {
  217. this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
  218. if (valid) {
  219. const oldform = this.$refs.ruleForm.baseForm
  220. const newForm = { ...oldform }
  221. if (this.curObj.id) newForm.id = this.curObj.id
  222. if (newForm.estate_dk_list && newForm.estate_dk_list.length > 0) {
  223. newForm.estate_dk_list = newForm.estate_dk_list.join(',')
  224. } else {
  225. newForm.estate_dk_list = ''
  226. }
  227. if (newForm.estate_gh_list && newForm.estate_gh_list.length > 0) {
  228. newForm.estate_gh_list = newForm.estate_gh_list.join(',')
  229. } else {
  230. newForm.estate_gh_list = ''
  231. }
  232. if (this.imagesArr && this.imagesArr.length > 0) {
  233. newForm.images = this.imagesArr.join(',')
  234. }
  235. newForm.longitude = this.cObj.longitude
  236. newForm.latitude = this.cObj.latitude
  237. newForm.pri_image = this.IMdel(newForm.pri_image)
  238. newForm.district_img = this.IMdel(newForm.district_img)
  239. if (!newForm.longitude) return this.$msgw('请选择经度!')
  240. else if (!newForm.latitude) return this.$msgw('请选择纬度!')
  241. let apiStr = 'admschooladd'
  242. if (newForm.id) apiStr = 'admschooledit'
  243. this.$api.school[apiStr](newForm).then(data => {
  244. this.$msgs(newForm.id ? '编辑成功' : '新增成功')
  245. this.$emit('close', newForm)
  246. })
  247. }
  248. })
  249. } else {
  250. this.$emit('close')
  251. this.setDefaultValue()
  252. }
  253. },
  254. handleMap() { // 定位
  255. this.isShowMap = true
  256. const pointObj = {
  257. latitude: this.cObj.latitude || '',
  258. longitude: this.cObj.longitude || '',
  259. address: this.cObj.address || ''
  260. }
  261. this.$root.$emit('handleMap', pointObj)
  262. },
  263. closeMap(obj) {
  264. if (obj) {
  265. const oldform = this.$refs.ruleForm.baseForm
  266. const newForm = { ...oldform, ...obj }
  267. this.cObj = newForm
  268. this.setDefaultValue(newForm)
  269. }
  270. this.isShowMap = false
  271. }
  272. }
  273. }
  274. </script>
  275. <style lang="scss" scoped>
  276. @import '../../../../styles/libEdit.scss';
  277. .lib-edit {
  278. padding-top: 0;
  279. ::v-deep .el-form-item {
  280. margin-bottom: 10px;
  281. }
  282. ::v-deep .el-date-editor.el-input {
  283. width: 100%;
  284. }
  285. }
  286. .scoped-other-form {
  287. .scoped-item-two {
  288. .el-input {
  289. display: inline-block;
  290. width: 115px;
  291. margin: 0 10px;
  292. ::v-deep input {
  293. text-align: center;
  294. }
  295. }
  296. }
  297. }
  298. .map-btn{
  299. height: 36px;
  300. }
  301. .scoped-img-area {
  302. padding-left: 40px;
  303. margin-bottom: 20px;
  304. .sia-title {
  305. font-size: 14px;
  306. padding-bottom: 10px;
  307. color: #666;
  308. font-weight: bold;
  309. }
  310. .sia-op {
  311. display: inline-block;
  312. vertical-align: middle;
  313. margin-right: 10px;
  314. margin-bottom: 10px;
  315. border: 1px solid #f2f2f2;
  316. width: 80px;
  317. height: 80px;
  318. position: relative;
  319. &:hover {
  320. .img-big {
  321. display: block;
  322. }
  323. }
  324. .img {
  325. width: 80px;
  326. height: 80px;
  327. }
  328. .close {
  329. position: absolute;
  330. width: 20px;
  331. height: 20px;
  332. top: -10px;
  333. right: -10px;
  334. background: url(../../../../assets/icon_g_close.png) no-repeat;
  335. background-size: 20px;
  336. cursor: pointer;
  337. }
  338. .img-big {
  339. position: absolute;
  340. bottom: 0;
  341. left: 0;
  342. width: 400px;
  343. height: auto;
  344. display: none;
  345. box-shadow: 10px 10px 10px #ccc;
  346. z-index: 99;
  347. }
  348. }
  349. .sia-img {
  350. display: inline-block;
  351. vertical-align: middle;
  352. width: 80px;
  353. height: 80px;
  354. overflow: hidden;
  355. border: 1px dashed #999;
  356. margin-bottom: 10px;
  357. .el-icon-plus {
  358. color: #999;
  359. padding: 30px;
  360. }
  361. }
  362. }
  363. </style>