<template>
|
<view class="uni-page-modal-small-wnd-line">
|
<uni-forms ref="baseForm" :modelValue="form" :label-position="control_style=='左右布局' ? 'left':'top'"
|
:label-align="control_style=='左右布局' ? 'right':'left'" :label-width="titleWdith">
|
<view class="uni-group-item" v-for="(group,index) in show_style" :key="group.attrgroup_name">
|
<view class="uni-panel-title" @click="group.open = !group.open">
|
<text class="uni-title-icon" :style="{ backgroundColor: toHexColor(group.def?.bk_color) }"><text
|
class="uni-icon" :class="group.def?.img_font_style"></text></text>
|
<text class="uni-title-text">{{group.attrgroup_name}}</text>
|
<view class="uni-panel-icon-btn">
|
<uni-icons color="#000" type="down" size="18" />
|
</view>
|
</view>
|
<view v-if="group.open" class="uni-head-style" :class="hiddenAttrs.includes(attr.attr)? 'uni-hidden':''"
|
v-for="(attr,i) in group.attrs" :key="`attr-${index}-${i}`">
|
<uni-forms-item :label="attrLabel(attr)" :required="attrRequired(attr)" :error="errTip[attr.attr]">
|
<view class="input-wrapper">
|
<view class="uni-panel-ext-button" v-if="attr.ext_button==true">
|
<input class="uni-panel-input" type="text" v-model="visible" :disabled="disabled" @on-blur="onChange" />
|
<view class="uni-panel-right-ico">
|
<a @click="onClickExtButton"><i class="ace-icon fa fa-plus-circle"></i></a>
|
</view>
|
</view>
|
<input v-if="attr.type == 'input'" :ref="`ref${attr.attr}`" v-model="form[attr.attr]"
|
:ref="`ref${attr.attr}`" :disabled="!attr.edit" @on-blur="onChange(attr)" />
|
<textarea v-else-if="attr.type == 'textarea'" :ref="`ref${attr.attr}`"
|
v-model="form[attr.attr]" :ref="`ref${attr.attr}`" :disabled="!attr.edit"
|
@on-blur="onChange(attr)" />
|
<input v-else-if="attr.type == 'int'" :ref="`ref${attr.attr}`" v-model="form[attr.attr]"
|
type="number" :ref="`ref${attr.attr}`" :disabled="!attr.edit"
|
@on-blur="onChange(attr)" />
|
<input v-else-if="attr.type == 'float'" :ref="`ref${attr.attr}`" v-model="form[attr.attr]"
|
type="digit" :ref="`ref${attr.attr}`" :disabled="!attr.edit"
|
@on-blur="onChange(attr)" />
|
<div v-if="attr.ext_button==true&& (attr.type == 'input' ||attr.type == 'textarea'||attr.type == 'int'||attr.type == 'float') "
|
class="right-ext-btn">
|
<a @tap="onClickExtButton(index,i)"><i class="ace-icon fa fa-plus-circle"></i></a>
|
</div>
|
|
<switch v-else-if="attr.type == 'checkbox'" :ref="`ref${attr.attr}`"
|
:checked="form[attr.attr]" :ref="`ref${attr.attr}`" :disabled="!attr.edit"
|
@change="form[attr.attr]=checked">
|
</switch>
|
<uni-data-select id="dv_select" v-if="attr.type == 'select'" :ref="`ref${attr.attr}`"
|
:class="attr.edit?'':'input-disabled'" v-model="form[attr.attr]"
|
:localdata="dictList[attr.attr]" @change="onChange(attr)" :disabled="!attr.edit"
|
clear></uni-data-select>
|
<picker v-else-if="attr.type == 'date'" :ref="`ref${attr.attr}`" mode="date"
|
style="width: 100%" :value="form[attr.attr]" :ref="`ref${attr.attr}`"
|
:disabled="!attr.edit" @change="form[attr.attr]=value" />
|
<picker v-else-if="attr.type == 'time'" :ref="`ref${attr.attr}`" mode="time"
|
style="width: 100%" :value="form[attr.attr]" :ref="`ref${attr.attr}`"
|
:disabled="!attr.edit" @change="form[attr.attr]=value" />
|
<textarea v-else-if="attr.type == 'ref-psn'" :ref="`ref${attr.attr}`"
|
:value="form[attr.attr]" :ref="`ref${attr.attr}`" disabled />
|
<div v-if="attr.type == 'ref-psn'" class="right-ext-btn">
|
<a @tap="onClickAddPsn(index,i)"><i class="ace-icon fa fa-plus-circle"></i></a>
|
</div>
|
<pickerAddress v-else-if="attr.type == 'region'" :ref="`ref${attr.attr}`"
|
@change="onAddressChange" :data-attr="attr.attr"> {{form[attr.attr]}}
|
</pickerAddress>
|
<div v-else-if="attr.type == 'ref-obj'">
|
<a @tap="classAttr_AddRef" :data-classid="attr.RelCls[0].id"
|
:data-classname="attr.RelCls[0].name"><i class="ace-icon fa fa-plus-circle"></i></a>
|
</div>
|
<div v-else-if="attr.type == 'ref-obj-multi'">
|
<picker class="select" @change="classAttr_AddRef" :range="attr.RelClsList"
|
range-key="name" :data-index="index" :data-iindex="iindex">
|
<label class="">{{ attr.Value }}</label>
|
</picker>
|
<a class="class_attr_add_ref"><i class="ace-icon fa fa-plus-circle"></i></a>
|
</div>
|
|
<textarea v-else-if="attr.type == 'ref-prj'" :ref="`ref${attr.attr}`"
|
:value="form[attr.attr]" :ref="`ref${attr.attr}`" disabled />
|
<div v-if="attr.type == 'ref-prj'" class="right-ext-btn">
|
<a @tap="onClickAddPrj(index,i)"><i class="ace-icon fa fa-plus-circle"></i></a>
|
</div>
|
<input v-if="attr.type == 'code'" :ref="`ref${attr.attr}`" v-model="form[attr.attr]"
|
:ref="`ref${attr.attr}`" :disabled="!attr.edit" />
|
</view>
|
</uni-forms-item>
|
</view>
|
</view>
|
</uni-forms>
|
</view>
|
</template>
|
|
<script>
|
import {
|
Base64
|
} from '@/js/Base64.js';
|
import pickerAddress from '../../js/pickerAddress/pickerAddress.vue'
|
import utils from "@/js/utils.js"
|
export default {
|
name: "PageModalSmallWndLine",
|
inject: ["getFormAllAttrObj"],
|
components: {
|
pickerAddress
|
},
|
props: {
|
clsId: {
|
type: String,
|
default: ""
|
},
|
clsName: {
|
type: String,
|
default: ""
|
},
|
show_style: {
|
type: Object,
|
default: {}
|
},
|
attrList: {
|
type: Array,
|
default: []
|
},
|
control_style: {
|
type: String,
|
default: ""
|
},
|
title_p_wdith: {
|
type: Number,
|
default: 0
|
},
|
|
},
|
data() {
|
return {
|
titleWdith: 100,
|
form: {},
|
errTip: {},
|
opened: [],
|
dictList: {},
|
globalAttrs: [],
|
hiddenAttrs: [],
|
};
|
},
|
computed: {
|
formAttrObj() {
|
return this.getFormAllAttrObj();
|
},
|
initialEvent() {
|
let event = this.show_style.Event?.find((e) => e.event_id == "initial");
|
return {
|
id: event?.scrip_id,
|
name: event?.scrip_name,
|
};
|
},
|
|
|
},
|
mounted() {
|
uni.getSystemInfo({
|
success: function(info) {
|
|
// 你可以将屏幕宽度保存在一个变量中供后续使用
|
if (this.control_style == '左右布局') {
|
if (this.title_p_wdith > 0 && this.title_p_wdith < 100) {
|
this.titleWdith = this.title_p_wdith * info.windowWidth / 100
|
} else {
|
this.titleWdith = 20 * info.windowWidth / 100
|
}
|
} else {
|
this.titleWdith = info.windowWidth
|
}
|
console.log('屏幕宽度,标题宽度', info.windowWidth, this.titleWdith);
|
}
|
});
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
|
isValid() {
|
let flag = true;
|
this.show_style.forEach((group) => {
|
group.attrs.forEach((attr) => {
|
let val = this.form[attr.attr];
|
if (utils.classUtils.attrTypeIsDate(attr.def.type)) val = dayjs(val).format(
|
"YYYY-MM-DD");
|
if (attr.def.not_empty == 1 && isNullOrEmpty(val)) {
|
this.errTip[attr.attr] = `${attr.name}${this.translate('cannot_empty')}`;
|
flag = false;
|
if (this.$refs[`ref${attr.attr}`][0].focus)
|
this.$refs[`ref${attr.attr}`][0].focus();
|
else if (this.$refs[`ref${attr.attr}`][0].$el.focus)
|
this.$refs[`ref${attr.attr}`][0].$el.focus();
|
}
|
});
|
});
|
return flag;
|
},
|
async loadForm() {
|
this.form = {};
|
this.errTip = {};
|
|
await Promise.all(
|
this.show_style.map(async (group) => {
|
let group_def = this.attrList.find(
|
(a) => a.name == group.attrgroup_name
|
);
|
group.def = {
|
bk_color: group_def.bk_color,
|
img_font_style: group_def.img_font_style || "mobox-sys-mobox",
|
};
|
await Promise.all(
|
group.attrs.map(async (attr) => {
|
let attr_def = group_def.attr_list.find(
|
(a) => a.name == attr.attr
|
);
|
|
// “小窗口”中“显示配置”指定的属性在当前数据类中已变更,无法得到相应的定义
|
if (!attr_def) {
|
this.showError(
|
`当前数据类“${this.clsName}(${this.clsId})”中找不到名为“${attr.name}(${attr.attr})”的属性`
|
)
|
|
return;
|
}
|
|
attr.def = attr_def;
|
|
attr.type = this.getAttrType(attr.def);
|
|
this.form[attr.attr] = this.defaultValue(attr.type);
|
this.errTip[attr.attr] = "";
|
|
if (attr.type == "select") {
|
if (attr.def.dict_name) {
|
let res = await dictInfo(undefined, attr.def
|
.dict_name);
|
let dicList = res.dict_item_list;
|
this.dictList[attr.attr] = dicList;
|
let dictName = "";
|
if (dicList?.length > 0) {
|
let defaultValue = dicList.find(
|
(d) => d.is_default == 1
|
)?.name;
|
if (defaultValue) dictName = defaultValue;
|
else dictName = dicList[0].name;
|
}
|
this.form[attr.attr] = dictName;
|
} else {
|
this.dictList[attr.attr] = [];
|
this.form[attr.attr] = "";
|
}
|
}
|
})
|
);
|
})
|
);
|
this.opened = this.show_style
|
.filter((a) => a.open)
|
.map((a) => a.attrgroup_name);
|
},
|
async loadFormData(obj) {
|
this.show_style.forEach((group) => {
|
group.attrs.forEach((attr) => {
|
let info = obj.attr_list.find((o) => o.name == attr.attr);
|
if (info) {
|
if (attr.type == "ref-psn")
|
this.form[attr.attr] = {
|
id: info.value.split(";")[0],
|
name: info.value.split(";")[1],
|
type: 0,
|
};
|
else this.form[attr.attr] = info.value;
|
}
|
});
|
});
|
},
|
async loadFormDataViaDataObj(dataObj) {
|
this.show_style.forEach((group) => {
|
group.attrs.forEach((attr) => {
|
if (attr.attr in dataObj) this.form[attr.attr] = dataObj[attr.attr];
|
});
|
});
|
},
|
getAttrType(def) {
|
let type = def?.type;
|
let height = def?.height;
|
let ctrlType = "";
|
this.show_style?.forEach((group) => {
|
ctrlType = group.attrs?.find((a) => a.attr == def.name)?.ctrl_type;
|
});
|
if (utils.classUtils.attrTypeIsGuid(type) || utils.classUtils.attrTypeIsString(type))
|
return ctrlType == "dropdown" ?
|
"select" :
|
height == 2 ?
|
"textarea" :
|
height == 3 ?
|
"textarea" :
|
"input";
|
else if (utils.classUtils.attrTypeIsDict(type)) return "select";
|
else if (utils.classUtils.attrTypeIsInt(type)) return "int";
|
else if (utils.classUtils.attrTypeIsFloat(type)) return "float";
|
|
else if (utils.classUtils.attrTypeIsBool(type)) return "checkbox";
|
else if (utils.classUtils.attrTypeIsDate(type)) return "date";
|
else if (utils.classUtils.attrTypeIsTime(type)) return "time";
|
else if (utils.classUtils.attrTypeIsUser(type)) return "ref-psn";
|
else if (utils.classUtils.attrTypeIsRegion(type)) return "region";
|
else if (utils.classUtils.attrTypeIsObjRefMulti(type)) return "ref-obj-multi";
|
else if (utils.classUtils.attrTypeIsObjRef(type)) return "ref-obj";
|
else if (utils.classUtils.attrTypeIsProject(type)) return "ref-prj";
|
else if (utils.classUtils.attrTypeIsCode(type)) return "code";
|
else return "unknown";
|
},
|
defaultValue(type) {
|
let value = undefined;
|
switch (type) {
|
case "input":
|
value = "";
|
break;
|
case "select":
|
value = "";
|
break;
|
case "int":
|
value = "0";
|
break;
|
case "float":
|
value = "0.0";
|
break;
|
case "checkbox":
|
value = false;
|
break;
|
case "date":
|
value = "";
|
break;
|
case "time":
|
value = "";
|
break;
|
case "region":
|
value = "";
|
break;
|
case "ref-psn":
|
value = {};
|
break;
|
case "ref-obj-multi":
|
value = [];
|
break;
|
case "ref-obj":
|
value = {};
|
break;
|
case "ref-prj":
|
value = {};
|
break;
|
case "code":
|
value = "";
|
break;
|
|
|
}
|
return value;
|
},
|
attrLabel(attr) {
|
if (attr.notempty || attr.def?.not_empty == 1)
|
return `${attr.name}(${this.translate('required')})`;
|
else return attr.name;
|
},
|
attrRequired(attr) {
|
if (attr.notempty || attr.def?.not_empty == 1) return true;
|
else return false;
|
},
|
toHexColor(num) {
|
return `#${parseInt(num).toString(16)}`;
|
},
|
reset() {
|
this.form = {};
|
this.errTip = {};
|
this.opened = [];
|
this.dictList = {};
|
},
|
clearTip() {
|
Object.keys(this.errTip).forEach((k) => {
|
this.errTip[k] = "";
|
});
|
},
|
clearData() {
|
Object.keys(this.form).forEach((k) => {
|
this.form[k] = "";
|
});
|
},
|
onAddressChange(e) {
|
console.log(e.data.join(';'))
|
this.form[e.target.dataset['attr']] = e.data
|
.join(
|
';');
|
},
|
async onChange(attr) {
|
if (!this.form[attr.attr]) return;
|
let action = attr.action;
|
if (!action) return;
|
if (action[0] != "{" && action[action.length - 1] != "}")
|
action = `{${action}}`;
|
let extInfo = {
|
...this.enviroment,
|
};
|
try {
|
lua(
|
this,
|
await runCustomEvent({
|
ed_type: 0,
|
class_id: this.clsId,
|
event_id: action,
|
obj_attr: this.formAttrObj,
|
ext_info: Base64.encode(JSON.stringify(extInfo)),
|
})
|
);
|
} catch (ex) {
|
this.showError(ex);
|
}
|
},
|
onClickExtButton(gindex, index) {
|
|
},
|
onClickAddPsn(gindex, index) {},
|
onClickAddPrj(gindex, index) {},
|
|
findAttrDef(attr) {
|
let def;
|
this.show_style.forEach((group) => {
|
let r = group.attrs.find((a) => a.attr == attr);
|
if (r) def = r;
|
});
|
return def;
|
},
|
setFormValues(attrs) {
|
attrs.forEach((attr) => {
|
if (attr.attr in this.form) {
|
this.form[attr.attr] = attr.value;
|
if (attr.choice_list) {
|
// 先判断是否是字典类型
|
let type = this.getAttrType(this.findAttrDef(attr.attr)?.def);
|
if (type == "select")
|
if (attr.choice_list)
|
this.dictList[attr.attr] = attr.choice_list.map((name) => ({
|
name,
|
}));
|
}
|
}
|
});
|
},
|
hideFormItems(attrs) {
|
let attrList = [];
|
this.show_style.forEach((group) => attrList.push(...group.attrs));
|
this.hiddenAttrs = [
|
...attrList.filter((a) => a.hidden === true).map((a) => a.attr),
|
...attrs
|
.filter((attr) => attr.attr in this.form && attr.show === false)
|
.map((attr) => attr.attr),
|
];
|
},
|
setFormAllValues(attrs) {
|
this.$emit("on-set-all-value", attrs);
|
},
|
showError(ex) {
|
uni.showModal({
|
title: this.translateSys('error') + " 1.1",
|
content: typeof ex == "string" ? ex : typeof ex.errMsg == "string" ? ex.errMsg : "",
|
showCancel: false,
|
confirmText: this.translateSys('cancel')
|
})
|
},
|
translate(t) {
|
if (typeof this.$t == "function") return this.$t(`page.${t}`)
|
else return t;
|
},
|
translateSys(t) {
|
if (typeof this.$t == "function") return this.$t(`sys.${t}`)
|
else return t;
|
},
|
},
|
}
|
</script>
|
|
|
<style lang="scss">
|
.uni-page-modal-small-wnd-line {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.uni-group-item {
|
border-radius: 8px;
|
background-color: #fff;
|
margin: 5px;
|
padding-bottom: 5px;
|
|
}
|
|
.uni-select {
|
border: 0;
|
}
|
|
.uni-panel-title {
|
display: flex;
|
width: calc(100% - 10rpx);
|
flex-direction: row;
|
}
|
|
|
.input-wrapper:hover {
|
border: 1px solid rgb(41, 121, 255);
|
}
|
|
.uni-title-icon {
|
background-color: #ffdd00;
|
border-radius: 50%;
|
width: 36px;
|
height: 36px;
|
margin: 5px;
|
margin-right: 12px;
|
display: inline-block;
|
vertical-align: middle;
|
text-align: center;
|
line-height: 40px;
|
|
.uni-icon {
|
color: #fff;
|
font-size: 20px
|
}
|
|
}
|
|
.uni-title-text {
|
flex: 1;
|
font-weight: 600;
|
line-height: 45px;
|
}
|
|
.uni-panel-icon-btn {
|
font-size: 18px;
|
padding: 8px;
|
margin-top: 5px;
|
// height: 36px;
|
// width: 36px;
|
|
}
|
|
.uni-panel-text {
|
flex: 1;
|
color: #000000;
|
font-weight: normal;
|
}
|
|
.uni-head-style {
|
display: flex;
|
flex-direction: column;
|
width: calc(100% - 30rpx);
|
padding: 15rpx;
|
}
|
|
.uni-head-style input {
|
width: calc(100% - 20rpx);
|
height: 52rpx;
|
line-height: 34rpx;
|
background: #FFF;
|
border-radius: 0 !important;
|
color: #2d8cf0;
|
padding: 10rpx 10rpx 12rpx;
|
font-size: 34rpx;
|
font-family: inherit;
|
box-shadow: none !important;
|
transition-duration: 0.1s;
|
margin-top: 4rpx;
|
}
|
|
.input-disabled {
|
background-color: #f3f3f3 !important;
|
}
|
|
.uni-hidden {
|
display: none;
|
}
|
|
|
.input-wrapper {
|
border: 1px solid #d5d5d5;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
|
.uni-textarea,
|
.uni-input {
|
flex: 1;
|
padding: 12rpx 8rpx;
|
// height: 40rpx;
|
// line-height: 40rpx;
|
}
|
|
.uni-icon {
|
padding: 8rpx;
|
font-size: 32rpx;
|
color: rgb(192, 196, 204);
|
}
|
|
.right-ext-btn {
|
margin: 5rpx 10rpx 5rpx 5rpx;
|
}
|
|
}
|
}
|
</style>
|