You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
532 lines
19 KiB
532 lines
19 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<template>
|
|
{$form.html}
|
|
</template>>
|
|
</div>
|
|
<script>
|
|
const myVue = new Vue({
|
|
el: '#app'
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
<template>
|
|
<el-form ref="ruleForm" :model="formData" class="demo-ruleForm" label-position="right" label-width="120px">
|
|
<el-col
|
|
v-for=" (formobj,index) in formObj"
|
|
v-show="!formobj.notShow"
|
|
:key="index"
|
|
:span="formobj.width ? formobj.width : 24"
|
|
>
|
|
<el-form-item :label="formobj.label" :prop="formobj.prop" :rules="formobj.rules">
|
|
<!-- inupt输入框 -->
|
|
<el-input
|
|
v-if="formobj.input"
|
|
v-model="formData[formobj.prop]"
|
|
size="small"
|
|
:placeholder="formobj.placeholder"
|
|
@input="inputINPUT($event,index,formobj.prop)"
|
|
@change="inputChange($event,index,formobj.prop)"
|
|
/>
|
|
<!-- textarea输入框 -->
|
|
<el-input
|
|
v-if="formobj.textarea"
|
|
v-model="formData[formobj.prop]"
|
|
size="small"
|
|
type="textarea"
|
|
:placeholder="formobj.placeholder"
|
|
/>
|
|
<!-- select选择器 -->
|
|
<el-select
|
|
v-if="formobj.select"
|
|
v-model="formData[formobj.prop]"
|
|
size="small"
|
|
:placeholder="formobj.placeholder"
|
|
@change="selectChange($event,index,formobj.prop)"
|
|
>
|
|
<el-option v-for="(options, selectIdx) in formobj.options" :key="selectIdx" :label="options.label" :value="options.label" />
|
|
</el-select>
|
|
<!-- select多选 选择器 -->
|
|
<el-select
|
|
v-if="formobj.multiSelect"
|
|
v-model="formData[formobj.prop]"
|
|
size="small"
|
|
multiple
|
|
:placeholder="formobj.placeholder"
|
|
@change="selectChange($event,index,formobj.prop)"
|
|
>
|
|
<el-option v-for="(options, selectIdx) in formobj.options" :key="selectIdx" :label="options.label" :value="options.label" />
|
|
</el-select>
|
|
<!-- select搜索框 -->
|
|
<!-- <el-select
|
|
v-if="formobj.searchSelect"
|
|
v-model="formData[formobj.prop]"
|
|
size="small"
|
|
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
:placeholder="formobj.placeholder"
|
|
:remote-method="(query)=>remoteMethod(query,index,formobj.prop)"
|
|
:loading="searchSelectLoading"
|
|
@change="selectChange($event,index,formobj.prop)"
|
|
>
|
|
<el-option
|
|
v-for="(item,selectIdx) in formobj.options"
|
|
:key="selectIdx"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select> -->
|
|
<!-- 日期选择器 -->
|
|
<el-date-picker
|
|
v-if="formobj.date"
|
|
v-model="formData[formobj.prop]"
|
|
value-format="yyyy-MM-dd"
|
|
type="date"
|
|
size="small"
|
|
:placeholder="formobj.placeholder"
|
|
/>
|
|
<!-- 时间选择器 -->
|
|
<el-time-picker
|
|
v-if="formobj.time"
|
|
v-model="formData[formobj.prop]"
|
|
value-format="HH:mm:ss"
|
|
format="HH:mm:ss"
|
|
size="small"
|
|
:placeholder="formobj.placeholder"
|
|
/>
|
|
<!-- 日期时间选择器 -->
|
|
<el-date-picker
|
|
v-if="formobj.dateTime"
|
|
v-model="formData[formobj.prop]"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
type="dateTime"
|
|
size="small"
|
|
:placeholder="formobj.placeholder"
|
|
/>
|
|
<!-- 年月日时分秒，开始和结束时间 -->
|
|
<el-date-picker
|
|
v-if="formobj.dateTimeRange"
|
|
v-model="formData[formobj.prop]"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
size="small"
|
|
type="datetimerange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
|
|
<!-- 时分秒选择器，开始和结束时间 -->
|
|
<!-- <el-time-picker
|
|
v-if="formobj.timePickerIsRange"
|
|
v-model="formData[formobj.prop]"
|
|
value-format="HH:mm:ss"
|
|
format="HH:mm:ss"
|
|
is-range
|
|
size="small"
|
|
|
|
range-separator="至"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
placeholder="选择时间范围"
|
|
/> -->
|
|
<!-- 年月日选择器 -->
|
|
<!-- <el-date-picker v-if="formobj.datePicker" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd" size="small" :placeholder="formobj.placeholder" /> -->
|
|
<!-- 年月日选择器，开始和介绍年月日 -->
|
|
<!-- <el-date-picker v-if="formobj.datePickerIsRange" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd" type="daterange" size="small" :placeholder="formobj.placeholder" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> -->
|
|
<!-- switch开关 -->
|
|
<el-switch v-if="formobj.switch" v-model="formData[formobj.prop]" size="small" @change="formSwitchChange($event,index,formobj.prop)" />
|
|
<!-- radio单选框 -->
|
|
<el-radio-group v-if="formobj.radio" v-model="formData[formobj.prop]">
|
|
<el-radio v-for="(options, radioIdx) in formobj.options" :key="radioIdx" :label="options.label" :value="options.value" />
|
|
</el-radio-group>
|
|
<!-- checkbox复选框 -->
|
|
<el-checkbox-group v-if="formobj.checkbox" v-model="formData[formobj.prop]">
|
|
<el-checkbox v-for="options in formobj.options" :key="options.value" :label="options.label" />
|
|
</el-checkbox-group>
|
|
<!-- 单个图片上传 --><!-- 如果对象有值就回显，没有值就为空 -->
|
|
<el-upload
|
|
v-if="formobj.image"
|
|
:ref="formobj.prop"
|
|
:headers="myHeaders"
|
|
class="avatar-uploader"
|
|
:action="$store.getters.updateURL+'/attachment/save'"
|
|
:show-file-list="false"
|
|
objbind="cover"
|
|
:on-success="uploadImg"
|
|
>
|
|
<img v-if="image" :src="image" class="avatar">
|
|
<img v-else class="avatar" :src="require('@/assets/icon1.png')" alt="">
|
|
<div slot="tip" class="el-upload__tip">
|
|
只能上传jpg/png文件，且不超过1MB
|
|
</div>
|
|
<div style="font-size: 12px;color: #999999;line-height: 30px;font-weight: 500" />
|
|
</el-upload>
|
|
|
|
<!-- 图片集 --><!-- 如果对象有值就回显，没有值就为空 -->
|
|
<el-upload
|
|
v-if="formobj.multiImages"
|
|
:ref="formobj.prop"
|
|
:file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
|
|
:headers="myHeaders"
|
|
:action="$store.getters.updateURL+'attachment/save'"
|
|
class="avatar-uploader"
|
|
:on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
|
|
list-type="picture-card"
|
|
:auto-upload="true"
|
|
:on-change="changeImages"
|
|
:on-remove="removeImages"
|
|
>
|
|
<i slot="default" class="el-icon-plus" />
|
|
|
|
</el-upload>
|
|
<!-- <el-dialog v-if="formobj.upload" :visible.sync="dialogVisible" :modal-append-to-body="false" width="40%">
|
|
<img width="100%" :src="dialogImageUrl" alt="">
|
|
</el-dialog> -->
|
|
<!-- 文件 --><!-- 如果对象有值就回显，没有值就为空 -->
|
|
<el-upload
|
|
v-if="formobj.file"
|
|
:ref="formobj.prop"
|
|
:file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
|
|
:headers="myHeaders"
|
|
:action="$store.getters.updateURL+'attachment/save'"
|
|
class="avatar-uploader"
|
|
:on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
|
|
:auto-upload="true"
|
|
:limit="1"
|
|
:on-exceed="masterFileMax"
|
|
>
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
</el-upload>
|
|
<!-- 文件集 --><!-- 如果对象有值就回显，没有值就为空 -->
|
|
<el-upload
|
|
v-if="formobj.multiFile"
|
|
:ref="formobj.prop"
|
|
:file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
|
|
:headers="myHeaders"
|
|
:action="$store.getters.updateURL+'attachment/save'"
|
|
class="avatar-uploader"
|
|
:on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
|
|
:auto-upload="true"
|
|
>
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
</el-upload>
|
|
<!-- 视频 --><!-- 如果对象有值就回显，没有值就为空 -->
|
|
<el-upload
|
|
v-if="formobj.video"
|
|
:ref="formobj.prop"
|
|
:file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
|
|
:headers="myHeaders"
|
|
:action="$store.getters.updateURL+'attachment/save'"
|
|
class="avatar-uploader"
|
|
:on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
|
|
:auto-upload="true"
|
|
:limit="1"
|
|
:on-exceed="masterFileMax"
|
|
>
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
</el-upload>
|
|
<!-- 视频集 --><!-- 如果对象有值就回显，没有值就为空 -->
|
|
<el-upload
|
|
v-if="formobj.multiVideo"
|
|
:ref="formobj.prop"
|
|
:file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
|
|
:headers="myHeaders"
|
|
:action="$store.getters.updateURL+'attachment/save'"
|
|
class="avatar-uploader"
|
|
:on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.prop,index)"
|
|
:auto-upload="true"
|
|
>
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
</el-upload>
|
|
<!-- 视频集 --><!-- 如果对象有值就回显，没有值就为空 -->
|
|
<!-- <el-upload
|
|
v-if="formobj.file"
|
|
:ref="formobj.prop"
|
|
:accept="formobj.accept ? formobj.accept : 'PNG,JPEG'"
|
|
:file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
|
|
:action="$store.getters.updateURL+'/attachment/save'"
|
|
:limit="formobj.uploadObj.limit"
|
|
:class="{'hide':formobj.uploadObj.hideUpload || formData[formobj.prop].length==formobj.uploadObj.limit}"
|
|
:on-preview="handlePictureCardPreview"
|
|
:on-remove="(file,fileList)=>handleRemove(file,fileList,formobj.uploadObj.limit,formobj.prop,index)"
|
|
:on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.uploadObj.limit,formobj.prop,index)"
|
|
list-type="picture-card"
|
|
:auto-upload="true"
|
|
>
|
|
<i slot="default" class="el-icon-plus" />
|
|
</el-upload> -->
|
|
|
|
<!-- 按钮 -->
|
|
<!-- <el-button v-if="formobj.button" size="small" :loading="formobj.loading" :type="formobj.buttonType || 'primary'" @click="buttonClick(formobj.prop,index)">{{ formobj.placeholder }}</el-button> -->
|
|
<!-- text展示 -->
|
|
<!-- <span v-if="formobj.text" v-text="formData[formobj.prop]" /> -->
|
|
<!-- 计量单位 -->
|
|
<!-- <span v-if="formobj.unit" class="left10">{{ formobj.unit }}</span> -->
|
|
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-form>
|
|
</template>
|
|
<!-- 引入样式 -->
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<!-- 引入组件库 -->
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<script src="https://unpkg.com/vue@next"></script>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/tinymce/5.8.2/icons/default/icons.min.js"></script>
|
|
<script>
|
|
|
|
var token = 'Bearer ' + getToken()
|
|
export default {
|
|
components: {
|
|
// quillEditor
|
|
},
|
|
props: {
|
|
formObj: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
formData: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
const uploadFileUrl = this.$store.state.user.uploadFileUrl
|
|
return {
|
|
myHeaders: { Authorization: token },
|
|
headers: {},
|
|
imageUrl: '',
|
|
imgUrl: this.$store.getters.updateURL,
|
|
uploadUrl: uploadFileUrl,
|
|
image: '',
|
|
images: '',
|
|
dialogImageUrl: '',
|
|
searchSelectLoading: false,
|
|
dialogVisible: false,
|
|
disabled: false
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
},
|
|
created() {
|
|
console.log(this.imgUrl)
|
|
},
|
|
methods: {
|
|
// select变化调用
|
|
selectChange(value, index, prop) {
|
|
this.$emit('selectChange', value, index, prop)
|
|
},
|
|
// input的input事件
|
|
inputINPUT(value, index, prop) {
|
|
this.$emit('inputINPUT', value, index, prop)
|
|
},
|
|
// input的change事件
|
|
inputChange(value, index, prop) {
|
|
this.$emit('inputChange', value, index, prop)
|
|
},
|
|
// 搜索类型select搜索
|
|
// remoteMethod(query, index, prop) {
|
|
// if (query) {
|
|
// this.searchSelectLoading = true
|
|
// this.$emit('querySelectValue', query, index, prop)
|
|
// setTimeout(() => {
|
|
// this.formObj[index].options = this.searchSelectOptionsCb
|
|
// this.searchSelectLoading = false
|
|
// }, 500)
|
|
// } else {
|
|
// this.searchSelectOptios = []
|
|
// }
|
|
// },
|
|
// switch变化
|
|
formSwitchChange(val, index, prop) {
|
|
this.$emit('formSwitchChange', val, index, prop)
|
|
},
|
|
// 按钮点击事件
|
|
buttonClick(prop, index) {
|
|
this.$emit('buttonClick', prop, index)
|
|
},
|
|
// 图片上传成功
|
|
uploadImg(res, file, fileList, objbind) {
|
|
if (res.code == -200 || res.code == 0) {
|
|
console.log(res)
|
|
this.image = URL.createObjectURL(file.raw)
|
|
this.formData.image = res.data.id
|
|
console.log(this.image)
|
|
}
|
|
},
|
|
masterFileMax() {
|
|
this.$message.warning(`最多上传 1 个文件。`)
|
|
},
|
|
// 图片集上传
|
|
changeImages(file, fileList) {
|
|
// this.fileList = fileList.slice(-3);
|
|
},
|
|
// 删除图片集
|
|
removeImages(file, fileList) {
|
|
const ids = []
|
|
fileList.forEach(el => {
|
|
// ids.push(el.response.data.id)
|
|
ids.push(el.response.data.url)
|
|
})
|
|
|
|
// console.log('删除图片的ids', ids)
|
|
this.formData.multiImages = fileList
|
|
// this.formData.multiImages.forEach(el => {
|
|
// ids.push(el.response.data.id)
|
|
// })
|
|
// this.formData.multiImages = ids
|
|
console.log('删除图片的ids', this.formData.multiImages)
|
|
},
|
|
// 文件上传成功回调
|
|
uploadSuccess(response, file, fileList, limit, prop, index) {
|
|
// this.formObj[index].uploadObj.hideUpload = fileList.length == limit
|
|
// 文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
|
|
this.pushUpload(file, fileList, limit, prop)
|
|
console.log('上传成功的回调', fileList)
|
|
// const ids = []
|
|
// fileList.forEach(el => {
|
|
// ids.push(el.response.data.url)
|
|
// })
|
|
this.formData.multiImages = fileList
|
|
// this.formData.multiImages.forEach(el => {
|
|
// ids.push(el.response.data.id)
|
|
// })
|
|
// this.formData.multiImages = ids
|
|
console.log('上传成功图片的ids', this.formData.multiImages)
|
|
},
|
|
// 文件删除
|
|
handleRemove(file, fileList, limit, prop, index) {
|
|
this.formObj[index].uploadObj.hideUpload = fileList.length == limit
|
|
// 文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
|
|
this.pushUpload(file, fileList, limit, prop)
|
|
},
|
|
// 文件预览
|
|
handlePictureCardPreview(file) {
|
|
this.dialogImageUrl = file.url
|
|
this.dialogVisible = true
|
|
},
|
|
|
|
// 提交时验证表单，直接在父级调用
|
|
submitForm() {
|
|
let formValidate = Boolean
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (valid) {
|
|
formValidate = true
|
|
} else {
|
|
this.$message.warning('请把信息填写完整！')
|
|
formValidate = false
|
|
}
|
|
})
|
|
return formValidate
|
|
},
|
|
/* 清空表单
|
|
逻辑：
|
|
1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
|
|
2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示
|
|
*/
|
|
resetForm(uploadArr) {
|
|
this.$refs.ruleForm.resetFields()
|
|
if (uploadArr) {
|
|
for (let i = 0;i < uploadArr.length;i++) {
|
|
this.$refs[uploadArr[i]][0].clearFiles()
|
|
const index = this.formObj.findIndex(item => item.prop == uploadArr[i])
|
|
this.formObj[index].uploadObj.hideUpload = false
|
|
}
|
|
}
|
|
},
|
|
// 单个字段验证
|
|
validateFieldProp(prop) {
|
|
let formValidate = Boolean
|
|
this.$refs.ruleForm.validateField(prop, valid => {
|
|
if (!valid) {
|
|
formValidate = true
|
|
} else {
|
|
formValidate = false
|
|
}
|
|
})
|
|
return formValidate
|
|
},
|
|
// 对文件上传，删除进行赋值，调用form验证
|
|
pushUpload(file, fileList, limit, prop) {
|
|
if (fileList.length > 0) {
|
|
this.formData[prop] = fileList
|
|
} else {
|
|
// 表示没有数据,把字段置空
|
|
this.formData[prop] = ''
|
|
}
|
|
this.$refs.ruleForm.validateField(prop)// 调用验证form表单的文件上传
|
|
}
|
|
// 地图input的input事件
|
|
// aMapInput(value, prop) {
|
|
// this.$refs[`aMap${prop}`][0].getSearch(value)
|
|
// },
|
|
// 子组件返回地图搜索值
|
|
// cbSearch(val, prop) {
|
|
// this.setSearchVal = val.tips // 子组件
|
|
// this.searchShow = prop // 显示input输入联想
|
|
// },
|
|
// 选中地图值
|
|
// selectVal(val, prop, index) {
|
|
// // 赋值的时候，拿到键，及formobj的下标，进行赋值
|
|
// this.formData[prop] = val.name // input输入框赋值
|
|
// this.formData.district = val.district // 传入省市区
|
|
// const lngLat = {
|
|
// lng: val.location.lng,
|
|
// lat: val.location.lat
|
|
// }
|
|
// this.formData[`${prop}location`] = lngLat
|
|
// this.searchShow = '' // 隐藏input输入联想
|
|
// }
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.el-textarea {
|
|
width: 400px;
|
|
}
|
|
.el-upload--picture-card{
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
.avatar-uploader .avatar{
|
|
width: 128px;
|
|
}
|
|
|
|
.amap_div {
|
|
overflow: hidden;
|
|
height: 400px;
|
|
width: 600px;
|
|
position: relative;
|
|
}
|
|
.amap_div .sreach_ul {
|
|
position: absolute;
|
|
top: 1;
|
|
background-color: white;
|
|
z-index: 9;
|
|
min-width: 210px;
|
|
float: auto;
|
|
height: 200px;
|
|
overflow: auto;
|
|
padding: 0 20px;
|
|
line-height: 24px;
|
|
}
|
|
</style>
|