MapTextEdit.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  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="mteStr === 'polygonAdd' || mteStr === 'polylineAdd' ? '多边形或折线操作' : '文字操作'"
  9. :fullscreen="false"
  10. width="400px"
  11. custom-class="xl-dialog"
  12. center
  13. >
  14. <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="70px">
  15. </base-form>
  16. <div class="scoped-color-quick" v-if="mteStr === 'polygonAdd' || mteStr === 'polylineAdd'">
  17. <div class="t">快速选择颜色</div>
  18. <div :class="fillColor === item.color ? 'op cur' : 'op'" v-for="(item, i) in colorArr" @click="colorHandle(item)" :style="`background: ${item.color}`" :key="i">{{item.t}}</div>
  19. <div style="padding-top: 10px;">
  20. <div :class="fillColor === item.color ? 'op cur' : 'op'" v-for="(item, i) in colorArr2" @click="colorHandle(item)" :style="`background: ${item.color}`" :key="i">{{item.t}}</div>
  21. </div>
  22. </div>
  23. <div class="xl-form">
  24. <div class="xl-form-footer">
  25. <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
  26. <el-button v-if="curObj.obj" class="xl-form-btn t1" @click="close('confirm')">保存</el-button>
  27. <el-button v-else class="xl-form-btn t3" @click="close('confirm')">去画图</el-button>
  28. </div>
  29. </div>
  30. </el-dialog>
  31. </div>
  32. </template>
  33. <script>
  34. import { arrToObj } from '@/utils'
  35. export default {
  36. components: { },
  37. mixins,
  38. props: {
  39. isShow: Boolean,
  40. curObj: Object,
  41. mteStr: String,
  42. },
  43. data() {
  44. return {
  45. loading: false,
  46. formData: [],
  47. fillColor: '#ff003f',
  48. strokeColor: '#ff003f',
  49. colorArr: [
  50. {color: '#ff0', t: '新楼盘'},
  51. {color: '#bb9c2c', t: '二手房'},
  52. {color: '#e8d0e6', t: '还建房'},
  53. {color: '#ff9149', t: '幼儿园'},
  54. {color: '#ff7fbf', t: '小初中'},
  55. // {color: '#60c68b', t: ''},
  56. {color: '#e77ad4', t: '高中'},
  57. {color: '#fb6557', t: '专本科'},
  58. ],
  59. colorArr2: [
  60. {color: '#ff003f', t: '纯商业'},
  61. {color: '#999', t: '商综合'},
  62. {color: '#007299', t: '公共'},
  63. {color: '#00ff3f', t: '公园'},
  64. {color: '#4da4ee', t: '医院'},
  65. ],
  66. cObj: {},
  67. estateObj: {},
  68. schoolObj: {},
  69. }
  70. },
  71. watch: {
  72. isShow: function(val) {
  73. if (val) {
  74. this.estateObj = {}
  75. this.schoolObj = {}
  76. this.cObj = JSON.parse(JSON.stringify(this.curObj))
  77. this.getDef()
  78. }
  79. },
  80. },
  81. methods: {
  82. getDef (str) {
  83. let params = { ...this.curObj.obj }
  84. let remoteEstateOptions = []
  85. if (params.estateObj) {
  86. let estateObj = {}
  87. if (typeof(params.estateObj) === 'object') {
  88. estateObj = params.estateObj
  89. } else {
  90. estateObj = JSON.parse(params.estateObj)
  91. }
  92. if (estateObj.id) {
  93. params.estate_id = estateObj.id
  94. remoteEstateOptions = [{ keyRO: estateObj.estate_name, valRO: estateObj.id }]
  95. }
  96. }
  97. let remoteSchoolOptions = []
  98. if (params.schoolObj) {
  99. const schoolObj = JSON.parse(params.schoolObj)
  100. if (schoolObj.id) {
  101. params.school_id = schoolObj.id
  102. remoteSchoolOptions = [{ keyRO: schoolObj.school_name, valRO: schoolObj.id }]
  103. }
  104. }
  105. if (str === 'color') {
  106. const oldform = this.$refs.ruleForm.baseForm
  107. params = {...oldform}
  108. params.fillColor = this.fillColor
  109. params.strokeColor = this.strokeColor
  110. }
  111. if (str === 'estate') {
  112. const oldform = this.$refs.ruleForm.baseForm
  113. params = {...oldform}
  114. params.text = this.estateObj.estate_name
  115. remoteEstateOptions = [{ keyRO: this.estateObj.estate_name, valRO: this.estateObj.id }]
  116. params.school_id = ''
  117. }
  118. if (str === 'school') {
  119. const oldform = this.$refs.ruleForm.baseForm
  120. params = {...oldform}
  121. params.text = this.schoolObj.school_name
  122. remoteSchoolOptions = [{ keyRO: this.schoolObj.school_name, valRO: this.schoolObj.id }]
  123. params.estate_id = ''
  124. }
  125. if (!params.text) params.text = '标题示例'
  126. if (!params.strokeStyle) params.strokeStyle = 'solid'
  127. if (this.mteStr === 'polygonAdd' || this.mteStr === 'polylineAdd') {
  128. if (!params.fillColor) {
  129. params.fillColor = this.fillColor
  130. params.fillOpacity = '0.4'
  131. params.strokeColor = this.strokeColor
  132. }
  133. this.formData = [
  134. { label: '关联楼盘', key: 'estate_id', type: 'selectRemote', changeHandle: this.estateChange,
  135. remoteParams: { skey: 'estate_name', api: `house.admestatelist`, opKey: 'estate_name', opVal: 'id' },
  136. remoteOptions: remoteEstateOptions
  137. },
  138. { label: '关联学校', key: 'school_id', type: 'selectRemote', changeHandle: this.schoolChange,
  139. remoteParams: { skey: 'school_name', api: `school.admschoollist`, opKey: 'school_name', opVal: 'id' },
  140. remoteOptions: remoteSchoolOptions
  141. },
  142. { label: '标题', key: 'text', rules: 1},
  143. { label: '填充色', key: 'fillColor', type: 'colorPicker', rules: 1},
  144. { label: '透明度', key: 'fillOpacity', rules: 1},
  145. { label: '轮廓色', key: 'strokeColor', type: 'colorPicker', rules: 1},
  146. { label: '实虚线', key: 'strokeStyle', type: 'select', options: [{key: '实线', val: 'solid'}, {key: '虚线', val: 'dashed'}]},
  147. ]
  148. } else {
  149. if (!params.color) {
  150. params.color = '#fff'
  151. }
  152. this.formData = [
  153. { label: '内容', key: 'text', rules: 1},
  154. { label: '颜色', key: 'color', type: 'colorPicker', rules: 1},
  155. ]
  156. }
  157. this.setDefaultValue(params)
  158. },
  159. estateChange (val, op, valObj) {
  160. this.estateObj = {
  161. id: valObj.id,
  162. estate_name: valObj.estate_name,
  163. pri_image: valObj.pri_image,
  164. price_range: valObj.price_range,
  165. product_type: valObj.product_type,
  166. // property_type: valObj.property_type,
  167. // area_type: valObj.area_type,
  168. // metro_type: valObj.metro_type,
  169. // metro_line: valObj.metro_line,
  170. // vr_image: valObj.vr_image,
  171. // vr_key: valObj.vr_key,
  172. }
  173. this.getDef('estate')
  174. },
  175. schoolChange (val, op, valObj) {
  176. this.schoolObj = {
  177. id: valObj.id,
  178. school_name: valObj.school_name,
  179. pri_image: valObj.pri_image,
  180. school_attrib: valObj.school_attrib,
  181. school_type: valObj.school_type,
  182. remarked: valObj.remarked,
  183. }
  184. this.getDef('school')
  185. },
  186. colorHandle (item) {
  187. this.fillColor = item.color
  188. this.strokeColor = item.color
  189. this.getDef('color')
  190. },
  191. close (str) {
  192. if (str === 'confirm') {
  193. this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
  194. if (valid) {
  195. const oldform = this.$refs.ruleForm.baseForm
  196. const newForm = { ...oldform }
  197. if (this.estateObj && this.estateObj.id) {
  198. newForm.estateObj = JSON.stringify(this.estateObj)
  199. }
  200. if (this.schoolObj && this.schoolObj.id) {
  201. newForm.schoolObj = JSON.stringify(this.schoolObj)
  202. }
  203. if (this.curObj.obj) {
  204. this.$emit('close', newForm, 'edit')
  205. } else {
  206. this.$emit('close', newForm)
  207. }
  208. this.setDefaultValue()
  209. }
  210. })
  211. } else {
  212. this.$emit('close')
  213. this.setDefaultValue()
  214. }
  215. },
  216. }
  217. }
  218. </script>
  219. <style lang="scss" scoped>
  220. @import '../../../../styles/libEdit.scss';
  221. .lib-edit {
  222. padding-top: 0;
  223. ::v-deep .el-date-editor.el-input {
  224. width: 100%;
  225. }
  226. ::v-deep .el-textarea__inner {
  227. height: 300px;
  228. }
  229. }
  230. .scoped-color-quick {
  231. margin-bottom: 20px;
  232. .t {
  233. color: #313131;
  234. }
  235. .op {
  236. display: inline-block;
  237. vertical-align: middle;
  238. width: 40px;
  239. height: 26px;
  240. line-height: 26px;
  241. color: #fff;
  242. cursor: pointer;
  243. text-align: center;
  244. margin-right: 10px;
  245. opacity: .6;
  246. color: #000;
  247. user-select: none;
  248. font-size: 12px;
  249. &.cur {
  250. opacity: 1;
  251. color: #fff;
  252. }
  253. }
  254. }
  255. </style>