jiangyy
3 years ago
17 changed files with 1921 additions and 677 deletions
@ -0,0 +1,386 @@ |
|||||
|
|
||||
|
@import "@/assets/scss/c/config.scss"; |
||||
|
@import "@/assets/scss/c/function.scss"; |
||||
|
|
||||
|
|
||||
|
|
||||
|
.cell-width-area{ |
||||
|
width: 450px |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.div_searchmap { |
||||
|
z-index: 1000; |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
left: 5px; |
||||
|
} |
||||
|
|
||||
|
.div-btn{ |
||||
|
margin-top:50px; |
||||
|
// margin-bottom:20px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.item_btn { |
||||
|
font-size: 14px; |
||||
|
padding: 8px 16px; |
||||
|
cursor: pointer; |
||||
|
color:#fff; |
||||
|
|
||||
|
border: 1px dashed #0c81fe; |
||||
|
border-radius: 6px; |
||||
|
background-color: #0c81fe; |
||||
|
} |
||||
|
|
||||
|
.mgl { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
.cell-width-1{ |
||||
|
width: 250px |
||||
|
} |
||||
|
.cell-width-long{ |
||||
|
width: 450px |
||||
|
} |
||||
|
.cell-width-2{ |
||||
|
width: 350px |
||||
|
} |
||||
|
|
||||
|
.cell-width-map { |
||||
|
width: 200px; |
||||
|
} |
||||
|
.item_width_3 { |
||||
|
margin-left: 10px; |
||||
|
width: 150px; |
||||
|
} |
||||
|
|
||||
|
.process-form{ |
||||
|
margin-top:20px; |
||||
|
|
||||
|
.process-title { |
||||
|
margin-bottom: 25px; |
||||
|
margin-left: -5px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
line-height: 18px; |
||||
|
} |
||||
|
|
||||
|
.process-title-vis{ |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-card { |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.m-btns { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.m-info { |
||||
|
padding-left: 30px; |
||||
|
font-size: 15px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #333; |
||||
|
line-height: 24px; |
||||
|
// width: 500px; |
||||
|
|
||||
|
.info-title { |
||||
|
margin-top: 30px; |
||||
|
font-size: 20px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
.info-content { |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
.info-pics { |
||||
|
display: flex; |
||||
|
margin: 20px 0; |
||||
|
img { |
||||
|
display: block; |
||||
|
width: 32%; |
||||
|
height: 90px; |
||||
|
margin-right: 9px; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-prop { |
||||
|
position: relative; |
||||
|
margin: 10px 0; |
||||
|
display: flex; |
||||
|
padding-left: 15px; |
||||
|
padding-top:10px; |
||||
|
// border-bottom: 1px solid #d8d8d8; |
||||
|
|
||||
|
.line{ |
||||
|
text-decoration:underline; |
||||
|
color: #3e8ef7; |
||||
|
} |
||||
|
.line:hover{ |
||||
|
cursor:pointer |
||||
|
} |
||||
|
.info-title-2 { |
||||
|
|
||||
|
flex: 0 0 100px; |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
|
||||
|
> span, |
||||
|
> div { |
||||
|
display: block; |
||||
|
// max-width: 300px; |
||||
|
} |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
top: 19px; |
||||
|
left: 0; |
||||
|
width: 7px; |
||||
|
height: 7px; |
||||
|
background: #0c81fe; |
||||
|
border-radius: 3px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.div_map { |
||||
|
width:500px; |
||||
|
padding-top:10px |
||||
|
} |
||||
|
} |
||||
|
.info-prop-vis{ |
||||
|
color:#fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-case { |
||||
|
height: 600px; |
||||
|
padding: 20px 0 20px 0; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.m-row { |
||||
|
// display: flex; |
||||
|
justify-content: space-between; |
||||
|
width:100%; |
||||
|
padding-left:50px; |
||||
|
} |
||||
|
|
||||
|
.m-hint { |
||||
|
position: relative; |
||||
|
height: 300px; |
||||
|
|
||||
|
// 暂无数据 |
||||
|
img { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-line { |
||||
|
min-width: 400px; |
||||
|
|
||||
|
.stat { |
||||
|
margin: 20px 0 10px; |
||||
|
display: flex; |
||||
|
.stat-item { |
||||
|
width: 33%; |
||||
|
text-align: center; |
||||
|
|
||||
|
div { |
||||
|
font-size: 17px; |
||||
|
font-family: Source Han Serif SC; |
||||
|
font-weight: 500; |
||||
|
color: rgba(#000, 0.5); |
||||
|
line-height: 24px; |
||||
|
&.z-weak { |
||||
|
font-size: 12px; |
||||
|
font-family: Source Han Serif SC; |
||||
|
font-weight: 500; |
||||
|
color: rgba(#000, 0.5); |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-process { |
||||
|
margin-top: 30px; |
||||
|
margin-left: 15px; |
||||
|
width: 400px; |
||||
|
|
||||
|
.process-title { |
||||
|
margin-bottom: 25px; |
||||
|
margin-left: -5px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
line-height: 18px; |
||||
|
} |
||||
|
|
||||
|
.process-title-vis{ |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.list { |
||||
|
position: relative; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 30px/2; |
||||
|
margin-left: 50px/2; |
||||
|
padding: 0 0 0 30px/2; |
||||
|
width: 680px/2; |
||||
|
border-left: 3px solid #0c81fe; |
||||
|
padding-right: 10px; |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
z-index: 1; |
||||
|
display: block; |
||||
|
top: -2px/2; |
||||
|
left: -2px/2; |
||||
|
width: 5px/2; |
||||
|
height: 20px/2; |
||||
|
background-color: #333; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
margin-bottom: 8px; |
||||
|
padding-bottom: 8px; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #333; |
||||
|
line-height: 24px; |
||||
|
padding-left: 20px; |
||||
|
padding-top: 1px; |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
top: -5px; |
||||
|
left: -11px; |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
background: #0c81fe; |
||||
|
border: 4px solid lighten(#0c81fe, 15); |
||||
|
border-radius: 100%; |
||||
|
} |
||||
|
|
||||
|
&.z-on { |
||||
|
&::before { |
||||
|
background: #e08400; |
||||
|
border-color: lighten(#e08400, 15); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
padding-bottom: 0; |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.item-row { |
||||
|
margin-top: -10px; |
||||
|
margin-bottom: 10px; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
position: relative; |
||||
|
padding: 0 10px; |
||||
|
font-size: 12px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
line-height: 22px; |
||||
|
height: 22px; |
||||
|
border-radius: 10px 0 10px 0; |
||||
|
background-color: #0c81fe; |
||||
|
// background-color: #e08400; |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
margin-left: 10px; |
||||
|
font-size: 12px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #7ca1d2; |
||||
|
line-height: 25px; |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
@include cs; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
margin-bottom: 5px; |
||||
|
display: flex; |
||||
|
|
||||
|
.detail-field { |
||||
|
flex:0 0 100px; |
||||
|
|
||||
|
text-align: justify; |
||||
|
text-align-last: justify; |
||||
|
} |
||||
|
.detail-value { |
||||
|
// width: 78%; |
||||
|
.detail-link { |
||||
|
display: inline; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.attachement-list { |
||||
|
padding-left: 80px; |
||||
|
a { |
||||
|
display: block; |
||||
|
cursor: pointer; |
||||
|
color: #4df0ff; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
i { |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-vis{ |
||||
|
color:#fff |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-top { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.m-chart { |
||||
|
min-height: 200px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,976 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
<el-form |
||||
|
v-if="iniLoaded" |
||||
|
ref="ref_form" |
||||
|
:model="fmData" |
||||
|
:inline="true" |
||||
|
:disabled="formType === 'watch'" |
||||
|
class="m-fm" |
||||
|
:class="editParamsDiv ? 'z-div' : ''" |
||||
|
> |
||||
|
<div class="list"> |
||||
|
<el-form-item |
||||
|
v-for="item in editParams" |
||||
|
class="item" |
||||
|
label-width="140px" |
||||
|
style="display: block" |
||||
|
:key="'edit' + item.keyName" |
||||
|
:label="item.field" |
||||
|
:prop="item.keyName" |
||||
|
:rules="item.rules || []" |
||||
|
> |
||||
|
<template v-if="item.type == 'switch'"> |
||||
|
<el-switch |
||||
|
v-model="fmData[item.keyName]" |
||||
|
size="small" |
||||
|
:active-text="item.activeText || ''" |
||||
|
:inactive-text="item.inactiveText || ''" |
||||
|
:active-value="item.activeValue || true" |
||||
|
:inactive-value="item.inactiveValue || false" |
||||
|
> |
||||
|
</el-switch> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="item.type == 'input'"> |
||||
|
<el-input |
||||
|
v-if=" |
||||
|
formType == 'add' || (formType == 'edit' && !item.editDisable) |
||||
|
" |
||||
|
v-model="fmData[item.keyName]" |
||||
|
class="item-input" |
||||
|
size="small" |
||||
|
clearable |
||||
|
show-word-limit |
||||
|
:maxlength="item.maxlength || ''" |
||||
|
:placeholder="item.placeholder || '请输入'" |
||||
|
> |
||||
|
</el-input> |
||||
|
|
||||
|
<div class="item-show" v-else> |
||||
|
{{ fmData[item.keyName] || "--" }} |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="item.type == 'textarea'"> |
||||
|
<el-input |
||||
|
v-if=" |
||||
|
formType == 'add' || (formType == 'edit' && !item.editDisable) |
||||
|
" |
||||
|
v-model="fmData[item.keyName]" |
||||
|
type="textarea" |
||||
|
class="item-input" |
||||
|
size="small" |
||||
|
clearable |
||||
|
show-word-limit |
||||
|
:rows="3" |
||||
|
:maxlength="item.maxlength || ''" |
||||
|
:placeholder="item.placeholder || '请输入'" |
||||
|
> |
||||
|
</el-input> |
||||
|
|
||||
|
<div class="item-show" v-else> |
||||
|
{{ fmData[item.keyName] || "--" }} |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="item.type == 'date'"> |
||||
|
<el-date-picker |
||||
|
v-if=" |
||||
|
formType == 'add' || (formType == 'edit' && !item.editDisable) |
||||
|
" |
||||
|
v-model="fmData[item.keyName]" |
||||
|
:picker-options="item.pickerOptions" |
||||
|
class="item-input" |
||||
|
size="small" |
||||
|
clearable |
||||
|
show-word-limit |
||||
|
:value-format="item.format || 'yyyy-MM-dd'" |
||||
|
:placeholder="item.placeholder || '请输入'" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
|
||||
|
<div class="item-show" v-else> |
||||
|
{{ fmData[item.keyName] || "--" }} |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template v-if="item.type == 'number'"> |
||||
|
<el-input-number |
||||
|
v-model="fmData[item.keyName]" |
||||
|
class="item-number" |
||||
|
size="small" |
||||
|
clearable |
||||
|
:precision="item.precision || 0" |
||||
|
:step="item.step || 1" |
||||
|
:min="item.min || 0" |
||||
|
:max="item.max || 999999999999" |
||||
|
:placeholder="item.placeholder || '请输入'" |
||||
|
> |
||||
|
</el-input-number> |
||||
|
<span v-if="item.unitName">（{{ item.unitName }}）</span> |
||||
|
</template> |
||||
|
|
||||
|
<template v-else-if="item.type == 'select'"> |
||||
|
<el-select |
||||
|
v-model="fmData[item.keyName]" |
||||
|
:placeholder="item.placeholder || '请选择'" |
||||
|
size="small" |
||||
|
clearable |
||||
|
class="item-select" |
||||
|
:multiple="item.multiple || false" |
||||
|
:filterable="item.filterable || false" |
||||
|
:allowCreate="item.allowCreate || false" |
||||
|
:collapse-tags="item.collapseTags || false" |
||||
|
default-first-option |
||||
|
@change="(e) => handleChangeSelect(e, item)" |
||||
|
> |
||||
|
<template v-if="item.optionType == 'group'"> |
||||
|
<el-option-group |
||||
|
v-for="group in item.optionList" |
||||
|
:key="group.label" |
||||
|
:label="group.label" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="subItem in group.optionList" |
||||
|
:key="subItem.value" |
||||
|
:label="subItem.label" |
||||
|
:value="subItem.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-option-group> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<el-option |
||||
|
v-for="(subItem, subIndex) in item.optionList" |
||||
|
:key="subItem.value + subIndex" |
||||
|
:label="subItem.label" |
||||
|
:value="subItem.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</template> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
|
||||
|
<template v-else-if="item.type == 'rich-text'"> |
||||
|
<div |
||||
|
v-if=" |
||||
|
formType == 'add' || (formType == 'edit' && !item.editDisable) |
||||
|
" |
||||
|
class="item-rich-text" |
||||
|
> |
||||
|
<Tinymce |
||||
|
:ref="'richText' + item.keyName" |
||||
|
v-model="fmData[item.keyName]" |
||||
|
:customerId="customerId" |
||||
|
:placeholder="item.placeholder || '请输入'" |
||||
|
:height="500" |
||||
|
/> |
||||
|
</div> |
||||
|
<div |
||||
|
v-else |
||||
|
class="item-rich-text z-show" |
||||
|
@click="handleClickHtmlNode" |
||||
|
> |
||||
|
<div v-html="fmData[item.keyName]"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<template v-else-if="item.type == 'cascader'"> |
||||
|
<el-cascader |
||||
|
v-model="fmData[item.keyName]" |
||||
|
:placeholder="item.placeholder || '请选择'" |
||||
|
:options="item.optionList" |
||||
|
:props="item.optionProps || {}" |
||||
|
:show-all-levels="false" |
||||
|
:collapse-tags="item.collapseTags || false" |
||||
|
size="small" |
||||
|
clearable |
||||
|
class="item-select" |
||||
|
@change="(e) => handleChangeCascader(e, item)" |
||||
|
> |
||||
|
</el-cascader> |
||||
|
</template> |
||||
|
|
||||
|
<template v-else-if="item.type == 'upload'"> |
||||
|
<el-upload |
||||
|
v-if=" |
||||
|
formType == 'add' || (formType == 'edit' && !item.editDisable) |
||||
|
" |
||||
|
ref="upload" |
||||
|
class="avatar-uploader" |
||||
|
:class="{ 'z-full': fmData[item.keyName].length >= item.limit }" |
||||
|
:action="item.uploadUrl || uploadUrl" |
||||
|
:data="{ customerId: customerId }" |
||||
|
:show-file-list="true" |
||||
|
:list-type="item.listType || 'picture'" |
||||
|
:limit="item.limit || 100" |
||||
|
:file-list="fmData[item.keyName]" |
||||
|
:on-success="(res, file) => handleImgSuccess(res, file, item)" |
||||
|
:on-error="(res, file) => handleImgError(res, file, item)" |
||||
|
:on-remove="(res) => handleImgRemove(res, item)" |
||||
|
:on-exceed="(res) => handleImgExceed(res, item)" |
||||
|
:before-upload="(file) => beforeImgUpload(file, item)" |
||||
|
> |
||||
|
<a><i class="el-icon-plus"></i> 点击上传</a> |
||||
|
</el-upload> |
||||
|
<el-image |
||||
|
v-else-if="fmData[item.keyName].length > 0" |
||||
|
style="width: 100px; height: 100px" |
||||
|
:src="fmData[item.keyName][0].url" |
||||
|
fit="cover" |
||||
|
:preview-src-list="fmData[item.keyName].map((item) => item.url)" |
||||
|
></el-image> |
||||
|
<span v-else>--</span> |
||||
|
</template> |
||||
|
|
||||
|
<template v-else-if="item.type == 'address'"> |
||||
|
<div class="address-item"> |
||||
|
<el-input |
||||
|
class="address-item-input" |
||||
|
:placeholder="item.placeholder || '请输入所在地址'" |
||||
|
v-model="fmData[item.keyName]" |
||||
|
:maxlength="item.maxlength || ''" |
||||
|
show-word-limit |
||||
|
size="small" |
||||
|
> |
||||
|
</el-input> |
||||
|
<el-button |
||||
|
style="margin-left: 10px" |
||||
|
type="default" |
||||
|
size="small" |
||||
|
ref="mapSearch" |
||||
|
@click="handleSearchMap(item)" |
||||
|
>查询</el-button |
||||
|
> |
||||
|
<div id="app" class="div_map"></div> |
||||
|
<div style="margin-top: 10px" v-show="false"> |
||||
|
<span>经度</span> |
||||
|
<el-input |
||||
|
class="address-item-input2" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入经度" |
||||
|
v-model="fmData[item.supKeys[0]]" |
||||
|
> |
||||
|
</el-input> |
||||
|
<span style="margin-left: 20px">纬度</span> |
||||
|
<el-input |
||||
|
class="address-item-input2" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入纬度" |
||||
|
v-model="fmData[item.supKeys[1]]" |
||||
|
> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
|
||||
|
<div class="div_btn resi-btns" v-if="!formBtnFixed"> |
||||
|
<el-button size="small" @click="handleCancle">{{ |
||||
|
editConfig.cancelBtnName || "取消" |
||||
|
}}</el-button> |
||||
|
<el-button |
||||
|
v-if="formType != 'watch'" |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
:disabled="btnDisable" |
||||
|
@click="handleComfirm" |
||||
|
>{{ editConfig.confirmBtnName || "确定" }}</el-button |
||||
|
> |
||||
|
<slot |
||||
|
name="operateSup" |
||||
|
v-bind:id="formId" |
||||
|
v-bind:info="fmData" |
||||
|
v-bind:formType="formType" |
||||
|
></slot> |
||||
|
</div> |
||||
|
|
||||
|
<slot |
||||
|
name="bottomSup" |
||||
|
v-bind:id="formId" |
||||
|
v-bind:info="fmData" |
||||
|
v-bind:formType="formType" |
||||
|
></slot> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_btn resi-btns" v-if="formBtnFixed"> |
||||
|
<el-button size="small" @click="handleCancle">{{ |
||||
|
editConfig.cancelBtnName || "取消" |
||||
|
}}</el-button> |
||||
|
<el-button |
||||
|
v-if="formType != 'watch'" |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
:disabled="btnDisable" |
||||
|
@click="handleComfirm" |
||||
|
>{{ editConfig.confirmBtnName || "确定" }}</el-button |
||||
|
> |
||||
|
<slot |
||||
|
name="operateSup" |
||||
|
v-bind:id="formId" |
||||
|
v-bind:info="fmData" |
||||
|
v-bind:formType="formType" |
||||
|
></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import Schema from "async-validator"; |
||||
|
import Tinymce from "@c/tinymce2/index.vue"; |
||||
|
|
||||
|
var map; |
||||
|
var search; |
||||
|
var markers; |
||||
|
var infoWindowList; |
||||
|
var geocoder; // 新建一个正逆地址解析类 |
||||
|
|
||||
|
export default { |
||||
|
components: { Tinymce }, |
||||
|
|
||||
|
props: { |
||||
|
formId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
formType: { |
||||
|
type: String, |
||||
|
default: "info", |
||||
|
}, |
||||
|
formBtnFixed: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
idName: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
addUrl: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
editUrl: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
delUrl: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
infoUrl: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
|
||||
|
editParams: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
editFixedParams: { |
||||
|
type: Object, |
||||
|
default: () => ({}), |
||||
|
}, |
||||
|
editParamsDiv: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
editElseRules: { |
||||
|
type: Object, |
||||
|
default: () => ({}), |
||||
|
}, |
||||
|
editConfig: { |
||||
|
type: Object, |
||||
|
default: () => ({}), |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
iniLoaded: false, |
||||
|
|
||||
|
btnDisable: false, |
||||
|
|
||||
|
fmData: {}, |
||||
|
|
||||
|
editParams1: [], |
||||
|
editParams2: [], |
||||
|
|
||||
|
uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2", |
||||
|
customerId: localStorage.getItem("customerId"), |
||||
|
}; |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: { |
||||
|
editParams: { |
||||
|
handler() { |
||||
|
this.computeFmData(); |
||||
|
}, |
||||
|
deep: true, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
async mounted() { |
||||
|
this.initForm(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
async initForm() { |
||||
|
this.iniFmData(); |
||||
|
|
||||
|
if (this.formId && this.formType != "add") { |
||||
|
this.getInfo(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computeFmData() { |
||||
|
console.log(this.fmData); |
||||
|
}, |
||||
|
|
||||
|
iniFmData() { |
||||
|
const { editParams, fmData, editParamsDiv } = this; |
||||
|
editParams.forEach((item, index) => { |
||||
|
if (typeof item.value == "function") { |
||||
|
fmData[item.keyName] = item.value(); |
||||
|
} else if ( |
||||
|
typeof item.value == "string" || |
||||
|
typeof item.value == "number" || |
||||
|
typeof item.value == "boolean" |
||||
|
) { |
||||
|
fmData[item.keyName] = item.value; |
||||
|
} else if (typeof item.value == "undefined") { |
||||
|
fmData[item.keyName] = ""; |
||||
|
} else { |
||||
|
fmData[item.keyName] = item.value || ""; |
||||
|
console.error( |
||||
|
"不应该直接传入数组或对象的值，这样会导致传入的值被子组件修改。editParams-------------cpts/base/cpts/edit.vue", |
||||
|
item |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
if (item.supValues) { |
||||
|
item.supValues.forEach((value, index) => { |
||||
|
if (typeof value == "function") { |
||||
|
fmData[item.supKeys[index]] = value(); |
||||
|
} else if ( |
||||
|
typeof value == "string" || |
||||
|
typeof value == "number" || |
||||
|
typeof value == "boolean" |
||||
|
) { |
||||
|
fmData[item.supKeys[index]] = value; |
||||
|
} else if (typeof value == "undefined") { |
||||
|
fmData[item.supKeys[index]] = ""; |
||||
|
} else { |
||||
|
fmData[item.supKeys[index]] = value; |
||||
|
console.error( |
||||
|
"不应该直接传入数组或对象的值，这样会导致传入的值被子组件修改。editParams-------------cpts/base/cpts/edit.vue", |
||||
|
item |
||||
|
); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
if (item.type == "select" || item.type == "cascader") { |
||||
|
if (item.optionUrl) { |
||||
|
this.getFmOptions( |
||||
|
index, |
||||
|
item.optionUrl, |
||||
|
item.optionUrlParams || {}, |
||||
|
item.optionCook || null |
||||
|
); |
||||
|
} |
||||
|
} else if (item.type == "address") { |
||||
|
this.$nextTick(async () => { |
||||
|
await nextTick(300); |
||||
|
this.initMap(item); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.fmData = { ...fmData }; |
||||
|
if (editParamsDiv) { |
||||
|
this.editParams1 = editParams.slice(0, editParamsDiv); |
||||
|
this.editParams2 = editParams.slice(editParamsDiv); |
||||
|
} else { |
||||
|
this.editParams1 = editParams; |
||||
|
} |
||||
|
console.log("------------------------------------", this.fmData); |
||||
|
this.iniLoaded = true; |
||||
|
}, |
||||
|
|
||||
|
handleClickHtmlNode(e) { |
||||
|
//在判断事件目标节点的时候，考虑到兼容性应该统一转换成大写或小写进行判断 |
||||
|
if (e.target.localName.toLowerCase() === "a") { |
||||
|
// 通过判端目标节点以后，就能在这里对其进行操作啦。 |
||||
|
let url = e.target.getAttribute("src"); //获取a标签属性，我这里自定义了一个属性data-id并将id赋值给了该属性，如何需要获取click方法的参数，需要获取a标签的click属性，并手动解析获取里面的参数 |
||||
|
window.open(url); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async getFmOptions(index, url, params, cookFn) { |
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
...params, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.editParams[index].optionList = |
||||
|
typeof cookFn == "function" ? cookFn(data) : data || []; |
||||
|
} else { |
||||
|
this.$message.error("请求检索基础数据失败！"); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleChangeCascader(vals, item) { |
||||
|
this.fmData[item["keyName"]] = vals; |
||||
|
if (typeof item.handleChangeFn == "function") { |
||||
|
item.handleChangeFn(vals, item, this); |
||||
|
} |
||||
|
}, |
||||
|
handleChangeSelect(vals, item) { |
||||
|
console.log(vals, item); |
||||
|
this.fmData[item["keyName"]] = vals; |
||||
|
if (typeof item.handleChangeFn == "function") { |
||||
|
item.handleChangeFn(vals, item, this); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
beforeImgUpload(file, item) { |
||||
|
if (typeof item.beforeImgUpload == "function") { |
||||
|
if (!item.beforeImgUpload(file, item, this)) return false; |
||||
|
} |
||||
|
return true; |
||||
|
}, |
||||
|
|
||||
|
handleImgRemove(file, item) { |
||||
|
console.log("handleImgRemove", file); |
||||
|
let url = file.response ? file.response.data.url : file.url; |
||||
|
if (url) { |
||||
|
let { fmData } = this; |
||||
|
this.fmData[item.keyName] = fmData[item.keyName].filter( |
||||
|
(item) => item.url !== url |
||||
|
); |
||||
|
if (item.supKeys && Array.isArray(item.supKeys)) { |
||||
|
if (item.supKeys.length > 0) { |
||||
|
this.fmData[item.supKeys[0]] = fmData[item.keyName].map( |
||||
|
(item) => item.url |
||||
|
); |
||||
|
} |
||||
|
if (item.supKeys.length > 1) { |
||||
|
this.fmData[item.supKeys[1]] = |
||||
|
this.fmData[item.supKeys[0]][0] || ""; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleImgExceed(res, item) { |
||||
|
console.log(res); |
||||
|
// this.$message({ |
||||
|
// type: "warning", |
||||
|
// message: "文件数量最多不超过三个", |
||||
|
// }); |
||||
|
}, |
||||
|
|
||||
|
handleImgSuccess(res, file, item) { |
||||
|
console.log("handleImgSuccess", res); |
||||
|
if (res.code === 0 && res.msg === "success") { |
||||
|
let { fmData } = this; |
||||
|
// let picItem = { |
||||
|
// url: res.data.url, |
||||
|
// name: file.name, |
||||
|
// size: file.size, |
||||
|
// type: file.type, |
||||
|
// format: file.name.split(".").pop(), |
||||
|
// }; |
||||
|
let picItem = file; |
||||
|
picItem.url = res.data.url; |
||||
|
picItem.format = file.name.split(".").pop(); |
||||
|
|
||||
|
if (Array.isArray(this.fmData[item.keyName])) { |
||||
|
this.fmData[item.keyName].push(picItem); |
||||
|
} else { |
||||
|
this.fmData[item.keyName] = [picItem]; |
||||
|
} |
||||
|
if (item.supKeys && Array.isArray(item.supKeys)) { |
||||
|
if (item.supKeys.length > 0) { |
||||
|
this.fmData[item.supKeys[0]] = fmData[item.keyName].map( |
||||
|
(item) => item.url |
||||
|
); |
||||
|
} |
||||
|
if (item.supKeys.length > 1) { |
||||
|
this.fmData[item.supKeys[1]] = |
||||
|
this.fmData[item.supKeys[0]][0] || ""; |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(res.msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleImgError(res, file, item) { |
||||
|
console.log(res); |
||||
|
}, |
||||
|
|
||||
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
||||
|
initMap(item) { |
||||
|
let { latitude, longitude } = this.$store.state.user; |
||||
|
if (!latitude || latitude == "" || latitude == "0") { |
||||
|
latitude = 39.9088810666821; |
||||
|
longitude = 116.39743841556731; |
||||
|
} |
||||
|
// 定义地图中心点坐标 |
||||
|
var center = new window.TMap.LatLng(latitude, longitude); |
||||
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
||||
|
map = new window.TMap.Map(document.getElementById("app"), { |
||||
|
center: center, // 设置地图中心点坐标 |
||||
|
zoom: 13, // 设置地图缩放级别 |
||||
|
pitch: 43.5, // 设置俯仰角 |
||||
|
rotation: 45, // 设置地图旋转角度 |
||||
|
}); |
||||
|
|
||||
|
search = new window.TMap.service.Search({ pageSize: 10 }); |
||||
|
// 新建一个地点搜索类 |
||||
|
markers = new TMap.MultiMarker({ |
||||
|
map: map, |
||||
|
geometries: [], |
||||
|
}); |
||||
|
infoWindowList = Array(10); |
||||
|
|
||||
|
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 |
||||
|
|
||||
|
// 监听地图平移结束 |
||||
|
map.on("panend", (e) => { |
||||
|
this.handleMoveCenter(item, e); |
||||
|
}); |
||||
|
// this.handleMoveCenter(item); |
||||
|
}, |
||||
|
|
||||
|
setMarker(lat, lng) { |
||||
|
markers.setGeometries([]); |
||||
|
markers.add([ |
||||
|
{ |
||||
|
id: "4", |
||||
|
styleId: "marker", |
||||
|
position: new TMap.LatLng(lat, lng), |
||||
|
properties: { |
||||
|
title: "marker4", |
||||
|
}, |
||||
|
}, |
||||
|
]); |
||||
|
}, |
||||
|
|
||||
|
handleSearchMap(item) { |
||||
|
infoWindowList.forEach((infoWindow) => { |
||||
|
infoWindow.close(); |
||||
|
}); |
||||
|
infoWindowList.length = 0; |
||||
|
markers.setGeometries([]); |
||||
|
// 在地图显示范围内以给定的关键字搜索地点 |
||||
|
search |
||||
|
.searchRectangle({ |
||||
|
keyword: this.fmData[item.keyName], |
||||
|
bounds: map.getBounds(), |
||||
|
}) |
||||
|
.then((result) => { |
||||
|
let { data } = result; |
||||
|
if (Array.isArray(data) && data.length > 0) { |
||||
|
const { |
||||
|
location: { lat, lng }, |
||||
|
} = data[0]; |
||||
|
map.setCenter(new TMap.LatLng(lat, lng)); |
||||
|
this.setMarker(lat, lng); |
||||
|
// item.supValues[0] = lng; |
||||
|
// item.supValues[1] = lat; |
||||
|
this.fmData[item.supKeys[0]] = lng; |
||||
|
this.fmData[item.supKeys[1]] = lat; |
||||
|
} else { |
||||
|
this.$message.error("未检索到相关位置坐标"); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
handleMoveCenter(item, e) { |
||||
|
console.log(e); |
||||
|
//修改地图中心点 |
||||
|
const center = map.getCenter(); |
||||
|
const lat = center.getLat(); |
||||
|
const lng = center.getLng(); |
||||
|
// item.supValues[0] = lng; |
||||
|
// item.supValues[1] = lat; |
||||
|
this.fmData[item.supKeys[0]] = lng; |
||||
|
this.fmData[item.supKeys[1]] = lat; |
||||
|
this.setMarker(lat, lng); |
||||
|
|
||||
|
if (e && e.originalEvent) { |
||||
|
geocoder |
||||
|
.getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址 |
||||
|
.then((result) => { |
||||
|
this.fmData[item.keyName] = result.result.address; |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async getInfo() { |
||||
|
let url = this.infoUrl; |
||||
|
if (!url) return; |
||||
|
const { idName, formId } = this; |
||||
|
|
||||
|
if (url.endsWith("/")) { |
||||
|
url += formId; |
||||
|
} |
||||
|
|
||||
|
const params = { |
||||
|
[idName]: formId, |
||||
|
}; |
||||
|
|
||||
|
let { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
const { editConfig } = this; |
||||
|
console.log("xxxxxxxxxxxxxxxxxxxxxx", editConfig); |
||||
|
if (editConfig && typeof editConfig.cookInfoFn == "function") { |
||||
|
data = editConfig.cookInfoFn(data); |
||||
|
} |
||||
|
this.fmData = { |
||||
|
...this.fmData, |
||||
|
...data, |
||||
|
}; |
||||
|
|
||||
|
await nextTick(600); |
||||
|
if (map) { |
||||
|
if (data.latitude) { |
||||
|
map.setCenter(new TMap.LatLng(data.latitude, data.longitude)); |
||||
|
} else { |
||||
|
if (this.formType == "edit" && this.$refs && this.$refs.mapSearch) { |
||||
|
this.$refs.mapSearch[0].handleClick(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
watchImg(src) { |
||||
|
window.open(src); |
||||
|
}, |
||||
|
|
||||
|
// 过滤文本 |
||||
|
dormatHtml(content) { |
||||
|
if ( |
||||
|
content.startsWith( |
||||
|
"<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n" |
||||
|
) && |
||||
|
content.endsWith("\n</body>\n</html>") |
||||
|
) { |
||||
|
content = content.slice(45, -16); |
||||
|
} |
||||
|
return content; |
||||
|
}, |
||||
|
|
||||
|
cookBeforeSubmit(data) { |
||||
|
Object.keys(data).forEach((k) => { |
||||
|
if (typeof data[k] == "string") { |
||||
|
data[k] = this.dormatHtml(data[k]); |
||||
|
} |
||||
|
}); |
||||
|
return data; |
||||
|
}, |
||||
|
|
||||
|
async handleComfirm() { |
||||
|
this.btnDisable = true; |
||||
|
setTimeout(() => { |
||||
|
this.btnDisable = false; |
||||
|
}, 5000); |
||||
|
|
||||
|
console.log(this.$refs["ref_form"]); |
||||
|
|
||||
|
this.$refs["ref_form"].validate((valid, messageObj) => { |
||||
|
console.log(valid, messageObj); |
||||
|
if (!valid) { |
||||
|
app.util.validateRule(messageObj); |
||||
|
this.btnDisable = false; |
||||
|
} else { |
||||
|
if (this.editElseRules) { |
||||
|
const validator = new Schema(this.editElseRules); |
||||
|
validator |
||||
|
.validate(this.fmData) |
||||
|
.then(() => { |
||||
|
this.submit(); |
||||
|
}) |
||||
|
.catch(({ err, fields }) => { |
||||
|
console.log("--------------", err, fields); |
||||
|
app.util.validateRule(fields); |
||||
|
}); |
||||
|
} else { |
||||
|
this.submit(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
async submit() { |
||||
|
const { editConfig, fmData, formType, editFixedParams } = this; |
||||
|
if ( |
||||
|
typeof editConfig.beforeSubmit == "function" && |
||||
|
!editConfig.beforeSubmit(formType, fmData, this) |
||||
|
) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let url = ""; |
||||
|
let params = { |
||||
|
...fmData, |
||||
|
...editFixedParams, |
||||
|
// serviceType: this.fmData.serviceTypeArr.join(","), |
||||
|
}; |
||||
|
|
||||
|
params = this.cookBeforeSubmit(params); |
||||
|
|
||||
|
if (this.formType === "add") { |
||||
|
url = this.addUrl; |
||||
|
} else { |
||||
|
url = this.editUrl; |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: "操作成功", |
||||
|
}); |
||||
|
this.handleCancle(); |
||||
|
this.$emit("afterEdit"); |
||||
|
this.btnDisable = false; |
||||
|
} else { |
||||
|
this.btnDisable = false; |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleCancle() { |
||||
|
this.$emit("close"); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.m-fm { |
||||
|
margin-top: 30px; |
||||
|
|
||||
|
&.z-div { |
||||
|
.list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.item { |
||||
|
min-width: 45%; |
||||
|
|
||||
|
.item-rich-text { |
||||
|
width: 817px; |
||||
|
max-height: 500px; |
||||
|
overflow: auto; |
||||
|
|
||||
|
img { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
&.z-show { |
||||
|
box-sizing: border-box; |
||||
|
padding: 15px; |
||||
|
border: 1px solid #eee; |
||||
|
height: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-show { |
||||
|
width: 324px; |
||||
|
} |
||||
|
|
||||
|
.item-input { |
||||
|
width: 324px; |
||||
|
} |
||||
|
.item-select { |
||||
|
width: 324px; |
||||
|
} |
||||
|
.item-number { |
||||
|
width: 180px; |
||||
|
} |
||||
|
|
||||
|
.address-item { |
||||
|
width: 350px; |
||||
|
|
||||
|
.address-item-input { |
||||
|
width: 74%; |
||||
|
} |
||||
|
.address-item-input2 { |
||||
|
margin-left: 5px; |
||||
|
width: 40%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.avatar-uploader { |
||||
|
&.z-full { |
||||
|
/deep/ .el-upload.el-upload--picture-card { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: #65a5f9; |
||||
|
i { |
||||
|
margin-right: 4px; |
||||
|
color: #65a5f9; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
&:hover { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.item-rich-text { |
||||
|
width: 600px; |
||||
|
height: 500px; |
||||
|
img { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
.item-show { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-select, |
||||
|
.item-show, |
||||
|
.item-input { |
||||
|
width: 450px; |
||||
|
} |
||||
|
.item-number { |
||||
|
width: 225px; |
||||
|
} |
||||
|
|
||||
|
.address-item { |
||||
|
width: 450px; |
||||
|
|
||||
|
.address-item-input { |
||||
|
width: 85%; |
||||
|
} |
||||
|
.address-item-input2 { |
||||
|
margin-left: 5px; |
||||
|
width: 40%; |
||||
|
} |
||||
|
} |
||||
|
.div_map { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue