123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363 |
- <template>
- <div>
- <el-drawer
- :show-close="false"
- :title="curObj.estate_id ? '编辑摇号信息' : '新增摇号信息'"
- :wrapper-closable="false"
- :close-on-press-escape="false"
- :visible.sync="isShow"
- size="960px"
- custom-class="xl-drawer"
- direction="rtl"
- >
- <base-form ref="ruleForm" class="lib-edit" :data="formData" :is-inline="false" label-width="110px" :insertSlotArr="[0,6]">
- <div slot="OI0" class="scoped-other-form">
- <div class="scoped-img-area">
- <div class="sia-title">项目图</div>
- <div class="sia-op" v-for="(imgsrc,index) in infoImg" :key="index">
- <img class="img" :src="imgsrc" alt="img" @click="openbigImg(imgsrc)">
- <span class="close" @click="infoImgDel(index)"></span>
- </div>
- <el-upload
- class="sia-img"
- :action="`${domainUrl}/adm/upload/cloudpub`"
- :data="{logic_type: 'estate', token}"
- name="upload"
- :show-file-list="false"
- :on-success="infoImgSuccess"
- :before-upload="imgUploadBefore"
- >
- <i class="el-icon-plus icon" />
- </el-upload>
- </div>
- </div>
- <div slot="OI6">
- <div class="scoped-img-area">
- <div class="sia-title">一房一价图</div>
- <div class="sia-op" v-for="(imgsrc,index) in houseImg" :key="index">
- <img class="img" :src="imgsrc" alt="img" @click="openbigImg(imgsrc)">
- <span class="close" @click="houseImgDel(index)"></span>
- </div>
- <el-upload
- class="sia-img"
- :action="`${domainUrl}/adm/upload/cloudpub`"
- :data="{logic_type: 'estate', token}"
- name="upload"
- :show-file-list="false"
- :on-success="houseImgSuccess"
- :before-upload="imgUploadBefore"
- >
- <i class="el-icon-plus icon" />
- </el-upload>
- </div>
- <div class="scoped-price-area" v-if="this.curObj.id">
- <div class="spa-title">一房一价表</div>
- <div class="spa-label" @click="openRPPopup('edit')">编辑</div>
- <div class="spa-label" @click="openRPPopup('add')">添加</div>
- </div>
- </div>
- <div slot="otherItem" class="scoped-other-form">
- <div class="scoped-img-area">
- <div class="sia-title">摇号结果图</div>
- <div class="sia-op" v-for="(imgsrc,index) in lotteryImg" :key="index">
- <img class="img" :src="imgsrc" alt="img" @click="openbigImg(imgsrc)">
- <span class="close" @click="lotteryImgDel(index)"></span>
- </div>
- <el-upload
- class="sia-img"
- :action="`${domainUrl}/adm/upload/cloudpub`"
- :data="{logic_type: 'estate', token}"
- name="upload"
- :show-file-list="false"
- :on-success="lotteryImgSuccess"
- :before-upload="imgUploadBefore"
- >
- <i class="el-icon-plus icon" />
- </el-upload>
- </div>
- </div>
- </base-form>
- <div class="xl-form">
- <div class="xl-form-footer fixed" style="width:960px;padding-top: 20px;border-top: 1px solid #dcdcdc;right:0;">
- <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
- <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
- </div>
- </div>
- </el-drawer>
- <room-price
- :isShow="isRPShow"
- :curObj="cObj"
- :type="priceType"
- @close="closeRPPopup"
- />
- <popup-big-img :is-show="bigImgShow" :src="`${bigImgSrc}`" @close="closebigImg" />
- </div>
- </template>
- <script>
- import RoomPrice from './RoomPrice'
- import bigImgPopup from '_m/bigImgPopup.js'
- export default {
- components: {
- RoomPrice,
- },
- mixins: [...mixins, bigImgPopup],
- props: {
- isShow: Boolean,
- curObj: Object
- },
- inject: ['parentData'],
- data() {
- let domainUrl = process.env.VUE_APP_BASE_API
- const token = window.sessionStorage.getItem('fp_token')
- return {
- domainUrl,
- token,
- formData: [],
- loading: true,
- cObj: {},
- infoImg: [],
- houseImg: [],
- lotteryImg: [],
- isRPShow: false,
- priceType: 'add',
- }
- },
- watch: {
- isShow: function(val) {
- if (val) {
- this.infoImg = []
- this.lotteryImg = []
- this.houseImg = []
- if (this.curObj.id) {
- this.$api.house.admestatelottery2detail({id: this.curObj.id}).then(res => {
- this.cObj = res || {}
- if (res.info_img) this.infoImg = res.info_img.split(',')
- if (res.lottery_img) this.lotteryImg = res.lottery_img.split(',')
- if (res.house_img) this.houseImg = res.house_img.split(',')
- this.getDef()
- })
- } else {
- this.cObj = {
- estate_id: this.curObj.estate_id
- }
- this.getDef()
- }
- }
- },
- },
- methods: {
- openRPPopup(str) {
- this.isRPShow = true
- this.priceType = str
- },
- closeRPPopup(obj) {
- this.isRPShow = false
- if (obj) {
- this.fetchData()
- }
- },
- comImgDel (str, index) {
- let cImg = this[str]
- cImg.splice(index, 1)
- this[str] = [...cImg]
- },
- comImgSuccess(str, res) {
- const data = res.data || {}
- let cImg = [...this[str]]
- cImg.push(`${data.url}`)
- this[str] = [...cImg]
- },
- lotteryImgDel (index) {
- this.comImgDel('lotteryImg', index)
- },
- lotteryImgSuccess(res, file) {
- this.comImgSuccess('lotteryImg', res)
- },
- houseImgDel (index) {
- this.houseImg.splice(index, 1)
- this.houseImg = [...this.houseImg]
- },
- houseImgSuccess(res, file) {
- this.comImgSuccess('houseImg', res)
- },
- infoImgDel (index) {
- this.infoImg.splice(index, 1)
- this.infoImg = [...this.infoImg]
- },
- infoImgSuccess(res, file) {
- this.comImgSuccess('infoImg', res)
- },
- imgUploadBefore(file) {
- const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png'
- const isLtM = file.size / 1024 / 1024 < 10
- if (!isJPGPNG) {
- this.$message.error('上传图片只能是 JPG PNG 格式!')
- }
- if (!isLtM) {
- this.$message.error('上传图片大小不能超过 10M!')
- }
- return isJPGPNG && isLtM
- },
- getDef() {
- let params = { ...this.cObj }
- if (params.lottery_time) params.time = params.lottery_time.split('至')
- if (!params.hide_status) params.hide_status = '1'
- this.formData = [
- { label: '楼栋分布图', key: 'project_img', type: 'upload', class: 'c-2', rules: 1 },
- { label: '摇号期数', key: 'batch', class: 'c-2', rules: 1 },
- { label: '排序', key: 'sort', class: 'c-2', rules: 1 },
- { label: '摇号中的日期', key: 'time', class: 'c-2', type: 'datePicker', rules: 1 },
- { label: '显示状态', key: 'hide_status', class: 'c-2', type: 'select', options: this.$dictData.hide_status, rules: 1 },
- { label: '摇号中的标题', key: 'under_way', rules: 1 },
- { label: '本期包含期数', key: 'building_num', rules: 1 },
- { label: '摇号结果的标题', key: 'lottery_res' },
- { label: '摇号结果时间', key: 'lottery_res_time', type: 'datePicker', type2: 'date' },
- ]
- params.project_img = this.IMadd(params.project_img)
- this.setDefaultValue(params)
- },
- close(str) {
- if (str === 'confirm') {
- this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
- if (valid) {
- const oldform = this.$refs.ruleForm.baseForm
- const newForm = { ...oldform }
- if (this.curObj.estate_id) {
- newForm.estate_id = this.curObj.estate_id
- }
- if (this.infoImg && this.infoImg.length > 0) {
- newForm.info_img = this.infoImg.join(',')
- }
- if (this.houseImg && this.houseImg.length > 0) {
- newForm.house_img = this.houseImg.join(',')
- }
- if (this.lotteryImg && this.lotteryImg.length > 0) {
- newForm.lottery_img = this.lotteryImg.join(',')
- }
- newForm.lottery_time = newForm.time[0] + '至' + newForm.time[1]
- delete newForm.time
- newForm.building_num = newForm.building_num.replace(/,|、|\/|\\/g, ',')
- newForm.project_img = this.IMdel(newForm.project_img)
- // console.log(newForm)
- // return
- let apiStr = 'admestatelottery2add'
- if (this.curObj.id) {
- apiStr = 'admestatelottery2edit'
- newForm.id = this.curObj.id
- }
- this.$api.house[apiStr](newForm).then(data => {
- this.$msgs(newForm.id ? '编辑成功' : '新增成功')
- this.$emit('close', newForm)
- })
- }
- })
- } else {
- this.$emit('close')
- this.setDefaultValue()
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import '../../../../styles/libEdit.scss';
- .lib-edit {
- width: 100%;
- padding-top: 0;
- padding-bottom: 100px;
- ::v-deep .el-form-item {
- margin-bottom: 10px;
- }
- ::v-deep .el-date-editor.el-input {
- width: 100%;
- }
- }
- .scoped-img-area {
- padding-left: 20px;
- .sia-title {
- font-size: 12px;
- padding-bottom: 10px;
- color: #666;
- font-weight: bold;
- }
- .sia-op {
- display: inline-block;
- vertical-align: middle;
- margin-right: 10px;
- margin-bottom: 10px;
- border: 1px solid #f2f2f2;
- width: 80px;
- height: 80px;
- position: relative;
- &:hover {
- .img-big {
- display: block;
- }
- }
- .img {
- width: 80px;
- height: 80px;
- }
- .close {
- position: absolute;
- width: 20px;
- height: 20px;
- top: -10px;
- right: -10px;
- background: url(../../../../assets/icon_g_close.png) no-repeat;
- background-size: 20px;
- cursor: pointer;
- }
- .img-big {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 400px;
- height: auto;
- display: none;
- box-shadow: 10px 10px 10px #ccc;
- z-index: 99;
- }
- }
- .sia-img {
- display: inline-block;
- vertical-align: middle;
- width: 80px;
- height: 80px;
- overflow: hidden;
- border: 1px dashed #999;
- margin-bottom: 10px;
- .el-icon-plus {
- color: #999;
- padding: 30px;
- }
- }
- }
- .scoped-price-area {
- padding: 20px 0 100px;
- width: 100%;
- .spa-title {
- display: inline-block;
- vertical-align: middle;
- font-size: 14px;
- color: #666;
- font-weight: bold;
- width: 110px;
- text-align: right;
- box-sizing: border-box;
- padding-right: 12px;
- }
- .spa-label {
- font-size: 14px;
- display: inline-block;
- vertical-align: middle;
- text-decoration: underline;
- color: #0c78b1;
- font-weight: bold;
- cursor: pointer;
- margin-right: 20px;
- }
- }
- </style>
|