<style>
|
.v-headStyle .txt_title{
|
font-size: 34rpx;
|
text-align: right;
|
display: inline-block;
|
vertical-align: 12px;
|
}
|
.v-headStyle input{
|
display: inline-block;
|
/* border: 1px solid #d5d5d5; */
|
/* width: 65%; */
|
width: 85%;
|
height: 52rpx;
|
line-height: 34rpx;
|
background: #FFF;
|
border-radius: 0 !important;
|
color: #2d8cf0;
|
padding: 10rpx 8rpx 12rpx;
|
font-size: 34rpx;
|
font-family: inherit;
|
box-shadow: none !important;
|
transition-duration: 0.1s;
|
margin-top: 4rpx;
|
}
|
.v-headStyle input::-webkit-input-placeholder {
|
font-size: 12rpx;
|
}
|
.input-wrapper{
|
border: 1px solid #d5d5d5;
|
display: inline-block;
|
width: 65%;
|
line-height: 22rpx;
|
}
|
[nvue] uni-view {
|
position: relative;
|
border: 0 solid #000;
|
box-sizing: border-box;
|
}
|
.uni-input {
|
/* border: none; */
|
}
|
.uni-icon{
|
/* border: 1px solid red; */
|
width: 8%;
|
font-family: uniicons;
|
font-size: 40rpx;
|
font-weight: 400;
|
font-style: normal;
|
/* width: 48rpx; */
|
height: 48rpx;
|
line-height: 48rpx;
|
color: #2d8cf0;
|
cursor: pointer;
|
display: inline-block;
|
vertical-align: 18rpx;
|
}
|
.v-content{
|
height: 945rpx;
|
overflow: auto;
|
/* border:1px solid red; */
|
}
|
|
/* .dv-panel-bkcolor{
|
background-color:#efefef;
|
} */
|
.dv-panel{
|
/* background-color:#efefef; */
|
padding: 20rpx 20rpx 4rpx 0px;
|
border-radius: 12rpx;
|
margin-bottom: 20rpx;
|
text-align: right;
|
}
|
.dv-panel-input{
|
vertical-align: middle;
|
width: 100%;
|
display: inline-block;
|
text-align: left;
|
}
|
.dv-panel-buticon{
|
line-height: 25px;
|
text-align: left;
|
/* font-size: 17px; */
|
padding: 0 15px;
|
}
|
.dv-panel-buticon .btn-padding{
|
padding: 10px;
|
display: inline-block;
|
vertical-align: middle;
|
}
|
.dv-panel-buticon a i {
|
font-size: 22px;
|
}
|
.dv-panel-buticon button{
|
min-width: 60px;
|
font-size: 16px;
|
padding: 20rpx 20rpx;
|
line-height: 1;
|
background: #4D6AF4;
|
border: none;
|
color: #fff;
|
font-weight: bold;
|
border-radius: 4px;
|
}
|
.dv-panel .txt_title{
|
font-size: 34rpx;
|
text-align: right;
|
display: inline-block;
|
}
|
.dv-panel input{
|
vertical-align: middle;
|
display: inline-block;
|
border: 1px solid #d5d5d5;
|
width: 68%;
|
height: 52rpx;
|
line-height: 34rpx;
|
background: #FFF;
|
border-radius: 7px !important;
|
color: #2d8cf0;
|
padding: 6rpx 8rpx 8rpx;
|
font-size: 32rpx;
|
font-family: inherit;
|
box-shadow: none !important;
|
transition-duration: 0.1s;
|
margin-top: 0rpx;
|
}
|
.dv-panel input::-webkit-input-placeholder {
|
font-size: 10rpx;
|
}
|
.dv-panel .form-item-span{
|
vertical-align: text-top;
|
color: #2d8cf0;
|
white-space: normal;
|
word-break: break-all;
|
display: inline-block;
|
width: calc(100% - 100px);
|
}
|
.dv-panel-button{
|
display: inline-block;
|
}
|
.dv-panel-button checkbox-group {
|
display: inline-block;
|
}
|
.dv-panel-button a i {
|
font-size: 18px;
|
}
|
.dv-panel-button button {
|
height: 25px;
|
font-size: 13px;
|
padding: 0 12px;
|
}
|
.view-floor{
|
padding: 0 20rpx;
|
/* border:1px solid red; */
|
}
|
button.btn_refresh {
|
width:49.5%;
|
margin-top: 25rpx;
|
padding: 20rpx;
|
line-height: 1.5;
|
background: #4D6AF4;
|
border: none;
|
color: #fff;
|
font-size: 38rpx;
|
font-weight: bold;
|
float: left;
|
display: inline-block;
|
}
|
button.btn_cancel {
|
width:49.5%;
|
margin-top: 25rpx;
|
padding: 20rpx;
|
line-height: 1.5;
|
background: #fff;
|
border: none;
|
color: #000;
|
font-size: 38rpx;
|
font-weight: bold;
|
float: left;
|
display: inline-block;
|
margin-right: 10px;
|
}
|
|
.bk-active{
|
background-color: #D6FCB2;
|
}
|
.uni-padding-wrap{
|
margin-top: 14rpx;
|
background-color: #98DAEA;
|
width: 52px;
|
height: 40px;
|
text-align: center;
|
border-radius: 27px;
|
padding: 12px 0 0px 0;
|
float: right;
|
display: inline-block;
|
}
|
.uni-padding-wrap a{
|
font-size: 20px;
|
}
|
</style>
|
<style lang="scss">
|
.demo-uni-row {
|
margin-bottom: 0px;
|
display: block;
|
}
|
::v-deep .uni-row {
|
margin-bottom: 0px;
|
}
|
.view-tabpage ::v-deep .uni-row {
|
margin-bottom: 5px;
|
}
|
.demo-uni-col {
|
height: 36px;
|
border-radius: 5px;
|
}
|
.demo-uni-row .uni-input{
|
width: calc(100% - 120px);
|
}
|
|
</style>
|
|
<template>
|
<view class="content">
|
<view class="v-content">
|
<view class="dv-panel dv-panel-bkcolor">
|
<div class="dv-panel-input">
|
<div v-for="(item,index) in detail2_styledef.form.items">
|
<!-- 普通布局 -->
|
<view v-if="item.name!='Layout'">
|
<text class="txt_title" :style="{'width':item.labelWidth+'px'}">{{item.label}}：</text>
|
<span class="form-item-span" v-if="item.disabled">{{item.value}}</span>
|
<!-- 文本框/数字框 -->
|
<view class="dv_input" v-if="(item.name=='Input' || item.name=='InputNumber') && !item.disabled">
|
<text v-if="item.setting.prefix"
|
class="uni-icon"
|
:class="[item.setting.prefix]"
|
@change="onchange(item)"></text>
|
<input class="uni-input" :class="item.disabled?'input-disabled':''"
|
:type="item.name=='Input'?'text':item.name=='InputNumber'?'number':'text'"
|
v-model="item.value"
|
:disabled="item.disabled"
|
:placeholder="item.placeholder"
|
:style="{'width':item.setting.prefix && item.setting.suffix?'78%':item.setting.prefix || item.setting.suffix?'87%':'96%'}"
|
:focus="focusMateria"
|
@focus="ontap(item)"
|
@blur="onevent(item)"
|
/>
|
<text v-if="item.setting.suffix"
|
class="uni-icon"
|
:class="[item.setting.suffix]"
|
@click="onchange(item)"></text>
|
</view>
|
<!-- 下拉框-单选 item.useDict?item.dict:item.selections-->
|
<uni-data-select id="dv_select" v-if="item.name=='Select' && !item.disabled"
|
:class="item.disabled?'input-disabled':''"
|
v-model="item.value"
|
:localdata="item.dict"
|
@change="onchange(item)"
|
:disabled="item.disabled"
|
:clear="false"
|
></uni-data-select>
|
<!-- 多行文本 -->
|
<view class="input-wrapper" v-if="item.name=='Textarea' && !item.disabled">
|
<textarea class="uni-input" :value="item.value"
|
:class="item.disabled?'input-disabled':''"
|
:placeholder="item.placeholder"
|
@blur="onModelValue(item)"
|
style="height:60px;"
|
:style="{'width':'96%'}"
|
:disabled="item.disabled"
|
></textarea>
|
</view>
|
<!-- 复选框 -->
|
<checkbox-group class="check_rememberPwd" v-if="item.name=='Checkbox'"
|
:class="item.disabled?'input-disabled':''"
|
@change="onModelValue(item)"
|
:data-ischeck="item.value"
|
:disabled="item.disabled"
|
:style="{'margin-left':'10rpx'}">
|
<label>
|
<checkbox :value="item.value" :checked="item.value"/>
|
<text>{{item.label}}</text>
|
</label>
|
</checkbox-group>
|
<!-- Switch开关 -->
|
<switch v-if="item.name=='Switch'" :class="item.disabled?'input-disabled':''"
|
:disabled="item.disabled"
|
v-model="item.value"
|
@change="onModelValue(item)"
|
:style="{'margin-left':'10rpx'}"/>
|
<!-- 日期时间 -->
|
<view class="input-wrapper" v-if="(item.name=='TimePicker' || item.name=='DatePicker') && !item.disabled">
|
<picker mode="date" class="date_iput" :class="item.disabled?'input-disabled':''"
|
:disabled="item.disabled"
|
:value="item.value"
|
@change="onModelValue(item)"
|
>
|
<view class="picker">{{item.value}}</view>
|
</picker>
|
</view>
|
</view>
|
<!-- 栅格布局 -->
|
<uni-row class="demo-uni-row" v-if="item.name=='Layout'">
|
<uni-col v-for="(cols,key) in item.setting.colList"
|
:span="item.setting.spanList?item.setting.spanList[key]:24 / item.setting.col">
|
<view v-if="cols!=null" >
|
<text class="txt_title" :style="{'width':cols.labelWidth+'px'}">{{cols.label}}：</text>
|
<span class="form-item-span" v-if="cols.disabled">{{cols.value}}</span>
|
<view class="dv_input" v-if="(cols.name=='Input' || cols.name=='InputNumber') && !cols.disabled">
|
<text v-if="cols.setting.prefix"
|
class="uni-icon"
|
:class="[cols.setting.prefix]"
|
@change="onchange(cols)"></text>
|
<input class="uni-input" :class="cols.disabled?'input-disabled':''"
|
:type="cols.name=='Input'?'text':cols.name=='InputNumber'?'number':'text'"
|
v-model="cols.value"
|
:disabled="cols.disabled"
|
:placeholder="cols.placeholder"
|
:style="{'width':cols.setting.prefix && cols.setting.suffix?'78%':cols.setting.prefix || cols.setting.suffix?'87%':'96%'}"
|
:focus="focusMateria"
|
@focus="ontap(cols)"
|
@blur="onevent(cols)"
|
/>
|
<text v-if="cols.setting.suffix"
|
class="uni-icon"
|
:class="[cols.setting.suffix]"
|
@click="onchange(cols)"></text>
|
</view>
|
<!-- 下拉框-单选 cols.useDict?cols.dict:cols.selections-->
|
<uni-data-select id="dv_select" v-if="cols.name=='Select' && !cols.disabled"
|
:class="cols.disabled?'input-disabled':''"
|
v-model="cols.value"
|
:localdata="cols.dict"
|
@change="onchange(cols)"
|
:disabled="cols.disabled"
|
:clear="false"
|
></uni-data-select>
|
<!-- 多行文本 -->
|
<view class="input-wrapper" v-if="cols.name=='Textarea' && !cols.disabled">
|
<textarea class="uni-input" :value="cols.value"
|
:class="cols.disabled?'input-disabled':''"
|
:placeholder="cols.placeholder"
|
@blur="onModelValue(cols)"
|
style="height:60px;"
|
:style="{'width':'96%'}"
|
:disabled="cols.disabled"
|
></textarea>
|
</view>
|
<!-- 复选框 -->
|
<checkbox-group class="check_rememberPwd" v-if="cols.name=='Checkbox'"
|
:class="cols.disabled?'input-disabled':''"
|
:disabled="item.disabled"
|
@change="onModelValue(cols)"
|
:data-ischeck="cols.value"
|
:style="{'margin-left':'10rpx'}">
|
<label>
|
<checkbox :value="cols.value" :checked="cols.value"/>
|
<text>{{cols.label}}</text>
|
</label>
|
</checkbox-group>
|
<!-- Switch开关 -->
|
<switch v-if="cols.name=='Switch'" :class="cols.disabled?'input-disabled':''"
|
:disabled="item.disabled"
|
v-model="cols.value"
|
@change="onModelValue(cols)"
|
:style="{'margin-left':'10rpx'}"/>
|
<!-- 日期时间 -->
|
<view class="input-wrapper" v-if="(cols.name=='TimePicker' || cols.name=='DatePicker') && !cols.disabled">
|
<picker mode="date" class="date_iput" :class="cols.disabled?'input-disabled':''"
|
:disabled="item.disabled"
|
:value="cols.value"
|
@change="onModelValue(cols)"
|
>
|
<view class="picker">{{cols.value}}</view>
|
</picker>
|
</view>
|
|
</view>
|
</uni-col>
|
</uni-row>
|
</div>
|
</div>
|
</view>
|
</view>
|
|
<view class="view-floor">
|
<button type="default" @click="cancel" class="btn_cancel"
|
:style="{'width':param.ViewPage.Page_Button.length>1?'39.5%':'48.5%'}">返回</button>
|
<view v-if="param.ViewPage.Page_Button">
|
<button type="default" class="btn_refresh" @click="onBtnClick(param.ViewPage.Page_Button[0])"
|
:style="{'width':param.ViewPage.Page_Button.length>1?'39.5%':'48.5%'}">{{param.ViewPage.Page_Button[0].ShowName}}</button>
|
|
<view class="uni-padding-wrap" v-if="param.ViewPage.Page_Button.length>1">
|
<view class="uni-btn-v">
|
<a @tap="actionSheetTap"><Icon class="mobox-normal-more"/></a>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import Base64 from '../../components/js-base64/base64.js'
|
export default {
|
modules:{
|
Base64,
|
},
|
onBackPress(e){
|
// console.log("监听返回按钮事件",e);
|
var eventChannel = this.$scope.eventChannel;
|
// const eventChannel = this.getOpenerEventChannel();
|
eventChannel.emit('ExitViewEvent',"");
|
// uni.navigateBack({
|
// delta:1 ,//返回层数，2则上上页
|
// });
|
// return true;
|
},
|
data() {
|
return {
|
title:'新增',
|
param: {},
|
styleDef:{
|
form:{
|
items:[]
|
}
|
},
|
detail2_styledef:{
|
form:{
|
items:[]
|
},
|
},
|
// detail2StyleDefList:[],
|
};
|
},
|
async onLoad(options) {
|
// console.log(options);
|
uni.setNavigationBarTitle({ title: options.titlename}); //设置顶部标题
|
this.$data.title = options.titlename;
|
this.$data.param = JSON.parse(options.param);
|
console.log(this.$data.param);
|
this.$data.styleDef = JSON.parse(options.style);
|
// console.log(this.$data.styleDef);
|
this.Detail2_UIstyleGetInfo(this.param.DataCls.id,this.param.ViewPage.View_UIDef.id);
|
//进入页面后事件
|
var eventid = this.param.ViewPage.Enter_View_Event?.id;
|
if(eventid){
|
try {
|
var obj_attr = {'S_ID':this.styleDef.form.objId};
|
this.styleDef.form.attrs.forEach((attr) => {
|
obj_attr[attr.name]=attr.value;
|
});
|
// console.log(obj_attr);
|
var input_param = Base64.encode(JSON.stringify(obj_attr));
|
this.runCustomEvent({
|
ed_type: 0,
|
start_transaction: true,
|
class_id: this.param.DataCls.id,
|
event_id: eventid,
|
obj_attr,
|
input_param,
|
});
|
} catch (ex) {
|
var tip = typeof ex == "string" ? ex : ex.message;
|
uni.showModal({title:"错误",content:tip,showCancel:false,confirmText:"取消"});
|
}
|
}
|
},
|
methods: {
|
async Detail2_UIstyleGetInfo(class_id,style_id){ //获取自定义表单样式
|
var $this = this;
|
var dataInfo={
|
class_id:class_id,
|
ui_style_id:style_id,
|
};
|
this.$store.dispatch('UIStyleGetInfo',dataInfo).then(ret=>{
|
// console.log(ret);
|
if (ret.err_code == 0) {
|
var styledef="";
|
if(ret.result.style_def){
|
//mobox2的style_def是json字符串
|
styledef = ret.result.style_def.replace(/\\/g,"");
|
//mobox3的style_def是base64字符串
|
if(!ret.result.style_def.includes('"')) styledef = Base64.decode(ret.result.style_def);
|
}
|
$this.$data.detail2_styledef = ret.result.style_def? JSON.parse(styledef): {};
|
$this.$data.detail2_styledef.SelBut_Checked = false;
|
// console.log($this.$data.detail2_styledef);
|
$this.styleDef.form.attrs.forEach((attr) => {
|
// info[attr.name]=attr.value;
|
$this.detail2_styledef.form.items.forEach(ele=>{
|
if(ele.name!='Layout'){
|
if(ele.fieldId == attr.name) ele.value = attr.value;
|
} else if(ele.name=='Layout'){
|
ele.setting.colList.forEach(col=>{
|
if(col){
|
if(col.fieldId == attr.name) col.value = attr.value;
|
}
|
});
|
}
|
});
|
});
|
}else{
|
uni.showModal({title:"错误1",content:ret.err_msg,showCancel:false,confirmText:"取消"});
|
}
|
}).catch(ex=>{
|
// console.log(ex);
|
uni.showModal({title:"错误1.1",content:ex.errMsg,showCancel:false,confirmText:"取消"});
|
});
|
|
},
|
//点击按钮
|
onBtnClick(btn){
|
var that = this
|
if (btn.Prompt) {
|
uni.showModal({
|
title: '提示',
|
content: btn.PromptContent || "是否确定？",
|
success: function (res) {
|
if (res.confirm) {
|
that.onButtonClicked(btn);
|
// } else if (res.cancel) {
|
// console.log('用户点击取消');
|
}
|
}
|
});
|
} else that.onButtonClicked(btn);
|
},
|
//点击按钮列表
|
actionSheetTap() {
|
var that = this
|
var itemlist=[];
|
this.param.ViewPage.Page_Button.forEach((btn) => {
|
itemlist.push(btn.ShowName);
|
});
|
uni.showActionSheet({
|
// title: '按钮列表',
|
itemList: itemlist,
|
success: (e) => {
|
console.log(e.tapIndex);
|
var btn = that.param.ListPage.Page_Button[e.tapIndex];
|
if (btn.Prompt) {
|
uni.showModal({
|
title: '提示',
|
content: btn.PromptContent || "是否确定？",
|
success: function (res) {
|
if (res.confirm) {
|
that.onButtonClicked(btn);
|
// } else if (res.cancel) {
|
// console.log('用户点击取消');
|
}
|
}
|
});
|
} else that.onButtonClicked(btn);
|
}
|
})
|
},
|
//处理相关按钮
|
async onButtonClicked(btn) {
|
var style = this.styleDef || '';
|
try {
|
var enviroment = {
|
button: "top",
|
button_name: btn.ShowName,
|
cls_id: btn.Cls_ID,
|
function: "3200",
|
master: {},
|
};
|
if (btn.FunCode == "TriggerEvent") {
|
this.triggerEvent(btn, style, enviroment);
|
} else {
|
uni.showModal({title:"提示",content:"未实现",showCancel:false,confirmText:"取消"});
|
}
|
} catch (ex) {
|
var tip = typeof ex == "string" ? ex : ex.message;
|
uni.showModal({title:"错误2",content:tip,showCancel:false,confirmText:"取消"});
|
}
|
},
|
//执行触发事件
|
async triggerEvent(btn, style, enviroment) {
|
try {
|
var obj_attr = {'S_ID':this.styleDef.form.objId};
|
style.form.attrs.forEach((attr) => {
|
obj_attr[attr.name]=attr.value;
|
});
|
// console.log(obj_attr);
|
// let input_param = Base64.encode(JSON.stringify(obj_attr));
|
// return;
|
this.runCustomEvent({
|
ed_type: 0,
|
start_transaction: true,
|
class_id: btn.Cls_ID,
|
event_id: btn.Event.ID,
|
obj_attr: obj_attr,
|
});
|
} catch (ex) {
|
var tip = typeof ex == "string" ? ex : ex.message;
|
uni.showModal({title:"错误3",content:tip,showCancel:false,confirmText:"取消"});
|
}
|
},
|
//事件
|
async runCustomEvent(dataInfo) {
|
try {
|
var $this = this;
|
this.$store.dispatch('runCustomEvent',dataInfo).then(ret=>{
|
console.log(ret);
|
if (ret.err_code == 0) {
|
var result = ret.result;
|
if (result.ret != 0) {
|
var tip = result.err_info ? typeof result.err_info == 'string' ? result.err_info : result.err_info.join('<br/>') : '';
|
if (result.ret == 801) uni.showModal({title:'提示',content:tip,showCancel:false,confirmText:"取消"});
|
else uni.showModal({title:'提示',content:tip+',提示:'+result.ret,showCancel:false,confirmText:"取消"});
|
return false;
|
}else{
|
var tip = result.info ? typeof result.info == 'string' ? result.info : result.info.join('<br/>') : '';
|
if (tip) uni.showModal({title:'提示',content:tip,showCancel:false,confirmText:"取消"});
|
|
if(result.result_type == 0 && result.action){
|
result.action.forEach(item=>{
|
if(item.action_type == "goback_to_pre_page"){ //返回上一页
|
var value = item.value;
|
// const eventChannel = this.$scope.eventChannel;
|
// // const eventChannel = this.getOpenerEventChannel();
|
// eventChannel.emit('ExitViewEvent',"");
|
uni.navigateBack({
|
delta:1 ,//返回层数，2则上上页
|
});
|
} else if(item.action_type == "hidden_button"){ //隐藏按钮
|
var value = item.value;
|
value.forEach(btn => {
|
var index = $this.param.ViewPage.Page_Button.findIndex(button => button.ShowName == btn)
|
if (index > -1)
|
$this.param.ViewPage.Page_Button.splice(index, 1)
|
})
|
}
|
|
});
|
}else{
|
var tip = result.info ? typeof result.info == 'string' ? result.info : result.info.join('<br/>') : '';
|
if (tip) uni.showModal({title:'提示',content:tip,showCancel:false,confirmText:"取消"});
|
}
|
}
|
|
}else{
|
uni.showModal({title:"错误4",content:ret.err_msg,showCancel:false,confirmText:"取消"});
|
}
|
}).catch(ex=>{
|
// console.log(ex);
|
uni.showModal({title:"错误4.1",content:ex.errMsg,showCancel:false,confirmText:"取消"});
|
});
|
} catch (ex) {
|
var tip = typeof ex == "string" ? ex : ex.message;
|
uni.showModal({title:"错误4.2",content:"执行“内容变化后”事件失败：" + tip,showCancel:false,confirmText:"取消"});
|
|
}
|
},
|
|
cancel(e){ //取消
|
var eventChannel = this.$scope.eventChannel;
|
// const eventChannel = this.getOpenerEventChannel();
|
eventChannel.emit('ExitViewEvent',"");
|
uni.navigateBack({
|
delta:1 ,//返回层数，2则上上页
|
});
|
},
|
|
|
},
|
};
|
</script>
|
