LotteryEdit.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <template>
  2. <div>
  3. <el-drawer
  4. :show-close="false"
  5. :title="curObj.estate_id ? '编辑摇号信息' : '新增摇号信息'"
  6. :wrapper-closable="false"
  7. :close-on-press-escape="false"
  8. :visible.sync="isShow"
  9. size="960px"
  10. custom-class="xl-drawer"
  11. direction="rtl"
  12. >
  13. <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="110px" :insertSlotArr="[0,6]">
  14. <div slot="OI0" class="scoped-other-form">
  15. <div class="scoped-img-area">
  16. <div class="sia-title">项目图</div>
  17. <div class="sia-op" v-for="(imgsrc,index) in infoImg" :key="index">
  18. <img class="img" :src="imgsrc" alt="img" @click="openbigImg(imgsrc)">
  19. <span class="close" @click="infoImgDel(index)"></span>
  20. </div>
  21. <el-upload
  22. class="sia-img"
  23. :action="`${domainUrl}/adm/upload/cloudpub`"
  24. :data="{logic_type: 'estate', token}"
  25. name="upload"
  26. :show-file-list="false"
  27. :on-success="infoImgSuccess"
  28. :before-upload="imgUploadBefore"
  29. >
  30. <i class="el-icon-plus icon" />
  31. </el-upload>
  32. </div>
  33. </div>
  34. <div slot="OI6">
  35. <div class="scoped-img-area">
  36. <div class="sia-title">一房一价图</div>
  37. <div class="sia-op" v-for="(imgsrc,index) in houseImg" :key="index">
  38. <img class="img" :src="imgsrc" alt="img" @click="openbigImg(imgsrc)">
  39. <span class="close" @click="houseImgDel(index)"></span>
  40. </div>
  41. <el-upload
  42. class="sia-img"
  43. :action="`${domainUrl}/adm/upload/cloudpub`"
  44. :data="{logic_type: 'estate', token}"
  45. name="upload"
  46. :show-file-list="false"
  47. :on-success="houseImgSuccess"
  48. :before-upload="imgUploadBefore"
  49. >
  50. <i class="el-icon-plus icon" />
  51. </el-upload>
  52. </div>
  53. <div class="scoped-price-area" v-if="this.curObj.id">
  54. <div class="spa-title">一房一价表</div>
  55. <div class="spa-label" @click="openRPPopup('edit')">编辑</div>
  56. <div class="spa-label" @click="openRPPopup('add')">添加</div>
  57. </div>
  58. </div>
  59. <div slot="otherItem" class="scoped-other-form">
  60. <div class="scoped-img-area">
  61. <div class="sia-title">摇号结果图</div>
  62. <div class="sia-op" v-for="(imgsrc,index) in lotteryImg" :key="index">
  63. <img class="img" :src="imgsrc" alt="img" @click="openbigImg(imgsrc)">
  64. <span class="close" @click="lotteryImgDel(index)"></span>
  65. </div>
  66. <el-upload
  67. class="sia-img"
  68. :action="`${domainUrl}/adm/upload/cloudpub`"
  69. :data="{logic_type: 'estate', token}"
  70. name="upload"
  71. :show-file-list="false"
  72. :on-success="lotteryImgSuccess"
  73. :before-upload="imgUploadBefore"
  74. >
  75. <i class="el-icon-plus icon" />
  76. </el-upload>
  77. </div>
  78. </div>
  79. </base-form>
  80. <div class="xl-form">
  81. <div class="xl-form-footer fixed" style="width:960px;padding-top: 20px;border-top: 1px solid #dcdcdc;right:0;">
  82. <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
  83. <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
  84. </div>
  85. </div>
  86. </el-drawer>
  87. <room-price
  88. :isShow="isRPShow"
  89. :curObj="cObj"
  90. :type="priceType"
  91. @close="closeRPPopup"
  92. />
  93. <popup-big-img :is-show="bigImgShow" :src="`${bigImgSrc}`" @close="closebigImg" />
  94. </div>
  95. </template>
  96. <script>
  97. import RoomPrice from './RoomPrice'
  98. import bigImgPopup from '_m/bigImgPopup.js'
  99. export default {
  100. components: {
  101. RoomPrice,
  102. },
  103. mixins: [...mixins, bigImgPopup],
  104. props: {
  105. isShow: Boolean,
  106. curObj: Object
  107. },
  108. inject: ['parentData'],
  109. data() {
  110. let domainUrl = process.env.VUE_APP_BASE_API
  111. const token = window.sessionStorage.getItem('fp_token')
  112. return {
  113. domainUrl,
  114. token,
  115. formData: [],
  116. loading: true,
  117. cObj: {},
  118. infoImg: [],
  119. houseImg: [],
  120. lotteryImg: [],
  121. isRPShow: false,
  122. priceType: 'add',
  123. }
  124. },
  125. watch: {
  126. isShow: function(val) {
  127. if (val) {
  128. this.infoImg = []
  129. this.lotteryImg = []
  130. this.houseImg = []
  131. if (this.curObj.id) {
  132. this.$api.house.admestatelottery2detail({id: this.curObj.id}).then(res => {
  133. this.cObj = res || {}
  134. if (res.info_img) this.infoImg = res.info_img.split(',')
  135. if (res.lottery_img) this.lotteryImg = res.lottery_img.split(',')
  136. if (res.house_img) this.houseImg = res.house_img.split(',')
  137. this.getDef()
  138. })
  139. } else {
  140. this.cObj = {
  141. estate_id: this.curObj.estate_id
  142. }
  143. this.getDef()
  144. }
  145. }
  146. },
  147. },
  148. methods: {
  149. openRPPopup(str) {
  150. this.isRPShow = true
  151. this.priceType = str
  152. },
  153. closeRPPopup(obj) {
  154. this.isRPShow = false
  155. if (obj) {
  156. this.fetchData()
  157. }
  158. },
  159. comImgDel (str, index) {
  160. let cImg = this[str]
  161. cImg.splice(index, 1)
  162. this[str] = [...cImg]
  163. },
  164. comImgSuccess(str, res) {
  165. const data = res.data || {}
  166. let cImg = [...this[str]]
  167. cImg.push(`${data.url}`)
  168. this[str] = [...cImg]
  169. },
  170. lotteryImgDel (index) {
  171. this.comImgDel('lotteryImg', index)
  172. },
  173. lotteryImgSuccess(res, file) {
  174. this.comImgSuccess('lotteryImg', res)
  175. },
  176. houseImgDel (index) {
  177. this.houseImg.splice(index, 1)
  178. this.houseImg = [...this.houseImg]
  179. },
  180. houseImgSuccess(res, file) {
  181. this.comImgSuccess('houseImg', res)
  182. },
  183. infoImgDel (index) {
  184. this.infoImg.splice(index, 1)
  185. this.infoImg = [...this.infoImg]
  186. },
  187. infoImgSuccess(res, file) {
  188. this.comImgSuccess('infoImg', res)
  189. },
  190. imgUploadBefore(file) {
  191. const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png'
  192. const isLtM = file.size / 1024 / 1024 < 10
  193. if (!isJPGPNG) {
  194. this.$message.error('上传图片只能是 JPG PNG 格式!')
  195. }
  196. if (!isLtM) {
  197. this.$message.error('上传图片大小不能超过 10M!')
  198. }
  199. return isJPGPNG && isLtM
  200. },
  201. getDef() {
  202. let params = { ...this.cObj }
  203. if (params.lottery_time) params.time = params.lottery_time.split('至')
  204. if (!params.hide_status) params.hide_status = '1'
  205. this.formData = [
  206. { label: '楼栋分布图', key: 'project_img', type: 'upload', class: 'c-2', rules: 1 },
  207. { label: '摇号期数', key: 'batch', class: 'c-2', rules: 1 },
  208. { label: '排序', key: 'sort', class: 'c-2', rules: 1 },
  209. { label: '摇号中的日期', key: 'time', class: 'c-2', type: 'datePicker', rules: 1 },
  210. { label: '显示状态', key: 'hide_status', class: 'c-2', type: 'select', options: this.$dictData.hide_status, rules: 1 },
  211. { label: '摇号中的标题', key: 'under_way', rules: 1 },
  212. { label: '本期包含期数', key: 'building_num', rules: 1 },
  213. { label: '摇号结果的标题', key: 'lottery_res' },
  214. { label: '摇号结果时间', key: 'lottery_res_time', type: 'datePicker', type2: 'date' },
  215. ]
  216. params.project_img = this.IMadd(params.project_img)
  217. this.setDefaultValue(params)
  218. },
  219. close(str) {
  220. if (str === 'confirm') {
  221. this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
  222. if (valid) {
  223. const oldform = this.$refs.ruleForm.baseForm
  224. const newForm = { ...oldform }
  225. if (this.curObj.estate_id) {
  226. newForm.estate_id = this.curObj.estate_id
  227. }
  228. if (this.infoImg && this.infoImg.length > 0) {
  229. newForm.info_img = this.infoImg.join(',')
  230. }
  231. if (this.houseImg && this.houseImg.length > 0) {
  232. newForm.house_img = this.houseImg.join(',')
  233. }
  234. if (this.lotteryImg && this.lotteryImg.length > 0) {
  235. newForm.lottery_img = this.lotteryImg.join(',')
  236. }
  237. newForm.lottery_time = newForm.time[0] + '至' + newForm.time[1]
  238. delete newForm.time
  239. newForm.building_num = newForm.building_num.replace(/,|、|\/|\\/g, ',')
  240. newForm.project_img = this.IMdel(newForm.project_img)
  241. // console.log(newForm)
  242. // return
  243. let apiStr = 'admestatelottery2add'
  244. if (this.curObj.id) {
  245. apiStr = 'admestatelottery2edit'
  246. newForm.id = this.curObj.id
  247. }
  248. this.$api.house[apiStr](newForm).then(data => {
  249. this.$msgs(newForm.id ? '编辑成功' : '新增成功')
  250. this.$emit('close', newForm)
  251. })
  252. }
  253. })
  254. } else {
  255. this.$emit('close')
  256. this.setDefaultValue()
  257. }
  258. }
  259. }
  260. }
  261. </script>
  262. <style lang="scss" scoped>
  263. @import '../../../../styles/libEdit.scss';
  264. .lib-edit {
  265. width: 100%;
  266. padding-top: 0;
  267. padding-bottom: 100px;
  268. ::v-deep .el-form-item {
  269. margin-bottom: 10px;
  270. }
  271. ::v-deep .el-date-editor.el-input {
  272. width: 100%;
  273. }
  274. }
  275. .scoped-img-area {
  276. padding-left: 20px;
  277. .sia-title {
  278. font-size: 12px;
  279. padding-bottom: 10px;
  280. color: #666;
  281. font-weight: bold;
  282. }
  283. .sia-op {
  284. display: inline-block;
  285. vertical-align: middle;
  286. margin-right: 10px;
  287. margin-bottom: 10px;
  288. border: 1px solid #f2f2f2;
  289. width: 80px;
  290. height: 80px;
  291. position: relative;
  292. &:hover {
  293. .img-big {
  294. display: block;
  295. }
  296. }
  297. .img {
  298. width: 80px;
  299. height: 80px;
  300. }
  301. .close {
  302. position: absolute;
  303. width: 20px;
  304. height: 20px;
  305. top: -10px;
  306. right: -10px;
  307. background: url(../../../../assets/icon_g_close.png) no-repeat;
  308. background-size: 20px;
  309. cursor: pointer;
  310. }
  311. .img-big {
  312. position: absolute;
  313. bottom: 0;
  314. left: 0;
  315. width: 400px;
  316. height: auto;
  317. display: none;
  318. box-shadow: 10px 10px 10px #ccc;
  319. z-index: 99;
  320. }
  321. }
  322. .sia-img {
  323. display: inline-block;
  324. vertical-align: middle;
  325. width: 80px;
  326. height: 80px;
  327. overflow: hidden;
  328. border: 1px dashed #999;
  329. margin-bottom: 10px;
  330. .el-icon-plus {
  331. color: #999;
  332. padding: 30px;
  333. }
  334. }
  335. }
  336. .scoped-price-area {
  337. padding: 20px 0 100px;
  338. width: 100%;
  339. .spa-title {
  340. display: inline-block;
  341. vertical-align: middle;
  342. font-size: 14px;
  343. color: #666;
  344. font-weight: bold;
  345. width: 110px;
  346. text-align: right;
  347. box-sizing: border-box;
  348. padding-right: 12px;
  349. }
  350. .spa-label {
  351. font-size: 14px;
  352. display: inline-block;
  353. vertical-align: middle;
  354. text-decoration: underline;
  355. color: #0c78b1;
  356. font-weight: bold;
  357. cursor: pointer;
  358. margin-right: 20px;
  359. }
  360. }
  361. </style>