|
@@ -173,6 +173,29 @@
|
|
<i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
|
|
<i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
|
|
</el-upload>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <el-form-item
|
|
|
|
+ v-else-if="item.type === 'cuImg'"
|
|
|
|
+ :key="index"
|
|
|
|
+ :class="item.class"
|
|
|
|
+ :prop="item.key"
|
|
|
|
+ :label="isInline && noLabel ? '' : item.label"
|
|
|
|
+ :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
|
|
|
|
+ >
|
|
|
|
+ <el-upload
|
|
|
|
+ class="img-upload"
|
|
|
|
+ :action="`${requireUrl}/adm/upload/cloudpub`"
|
|
|
|
+ :data="{logic_type: 'estate', token}"
|
|
|
|
+ name="upload"
|
|
|
|
+ ref="cui"
|
|
|
|
+ :auto-upload="false"
|
|
|
|
+ :show-file-list="false"
|
|
|
|
+ :on-change='cuImgOpen'
|
|
|
|
+ :on-success="uploadSuccess"
|
|
|
|
+ >
|
|
|
|
+ <img v-if="baseForm[item.key]" :src="baseForm[item.key]" class="img" @click="focusHandle(item.key)">
|
|
|
|
+ <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
|
|
|
|
+ </el-upload>
|
|
|
|
+ </el-form-item>
|
|
<el-form-item
|
|
<el-form-item
|
|
v-else-if="item.type === 'uploads'"
|
|
v-else-if="item.type === 'uploads'"
|
|
:key="index"
|
|
:key="index"
|
|
@@ -331,12 +354,19 @@
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<slot name="footer" />
|
|
<slot name="footer" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <cropper-img
|
|
|
|
+ :isShow="isCIShow"
|
|
|
|
+ :curObj="uploadObj"
|
|
|
|
+ @close="cuImgClose"
|
|
|
|
+ />
|
|
</el-form>
|
|
</el-form>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import { strTrim } from '@/utils'
|
|
import { strTrim } from '@/utils'
|
|
|
|
+import CropperImg from './CropperImg'
|
|
export default {
|
|
export default {
|
|
name: 'BaseForm',
|
|
name: 'BaseForm',
|
|
|
|
+ components: { CropperImg },
|
|
props: {
|
|
props: {
|
|
data: Array,
|
|
data: Array,
|
|
labelWidth: {
|
|
labelWidth: {
|
|
@@ -381,7 +411,10 @@ export default {
|
|
uploadHeaders: {
|
|
uploadHeaders: {
|
|
'Content-Type': 'multipart/form-data'
|
|
'Content-Type': 'multipart/form-data'
|
|
},
|
|
},
|
|
- remoteOptionsPrev: {}
|
|
|
|
|
|
+ remoteOptionsPrev: {},
|
|
|
|
+ isCIShow: false,
|
|
|
|
+ uploadObj: {},
|
|
|
|
+ isCanUpload: false,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
@@ -461,6 +494,7 @@ export default {
|
|
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
|
|
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
|
|
},
|
|
},
|
|
uploadSuccess(res, file) {
|
|
uploadSuccess(res, file) {
|
|
|
|
+ console.log(res)
|
|
const data = res.data || {}
|
|
const data = res.data || {}
|
|
const uploadItem = this.curData[this.curFormIndex]
|
|
const uploadItem = this.curData[this.curFormIndex]
|
|
// this.baseForm[uploadItem.key] = `${data.domain}${data.url}?url=${data.url}&id=${data.file_id}`
|
|
// this.baseForm[uploadItem.key] = `${data.domain}${data.url}?url=${data.url}&id=${data.file_id}`
|
|
@@ -558,6 +592,37 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ cuImgOpen(file, fileList) {
|
|
|
|
+ // if (!this.isCanUpload) {
|
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 10
|
|
|
|
+ if (!isLt10M) {
|
|
|
|
+ this.$msgw('上传文件大小不能超过 10MB!')
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ // this.fileinfo = file
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.uploadObj = {url: URL.createObjectURL(file.raw)}
|
|
|
|
+ this.isCIShow = true
|
|
|
|
+ // this.isCanUpload = true
|
|
|
|
+ })
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
|
|
+ cuImgClose (obj) {
|
|
|
|
+ this.isCIShow = false
|
|
|
|
+ console.log(obj)
|
|
|
|
+ this.baseForm[this.curFormKey] = obj
|
|
|
|
+ // console.log(this.curFormKey)
|
|
|
|
+ // if (obj && obj.url && this.curFormKey) {
|
|
|
|
+ // console.log(this.$refs.cui)
|
|
|
|
+ // window.setTimeout(() => {
|
|
|
|
+ // // this.isCIShow = false
|
|
|
|
+ // this.$refs.cui[0].submit()
|
|
|
|
+ // }, 1000)
|
|
|
|
+ // // window.setTimeout(() => {
|
|
|
|
+ // // this.isCIShow = false
|
|
|
|
+ // // }, 3000)
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
remoteChange(val) {
|
|
remoteChange(val) {
|
|
if (val) {
|
|
if (val) {
|
|
const remoteParams = this.curData[this.curFormIndex].remoteParams
|
|
const remoteParams = this.curData[this.curFormIndex].remoteParams
|
|
@@ -697,5 +762,6 @@ export default {
|
|
align-items: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
</style>
|
|
</style>
|
|
|
|
|