Commit d346edda by yangchen

新增组件:功能文本框,大文本输入框

parent 8862ac49
<template>
<div class="input-control-wrapper">
<Input
v-if="vifValue && !isContent && controlDisplay"
ref="setfocus"
v-show="vshowValue"
style="width: 100%"
v-model="value"
:placeholder="define.config.placeholder"
:type="define.config.inputType || 'text'"
:disabled="state == 'readOnly'"
@on-blur="inputBlur"
@on-focus="inputFocus"
></Input>
<div v-if="isContent && controlDisplay">
{{ getValue() }}
</div>
<Modal v-model="modal" :title="define.title" :mask-closable="false">
<div class="input-modal">
<Input
v-model="areaValue"
type="textarea"
:autosize="{ minRows: 4, maxRows: 10 }"
/>
</div>
<div slot="footer">
<Button @click="cancel">取消</Button>
<Button type="primary" @click="handleSubmit">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import input from "./util/bc_input.js";
export default {
mixins: [input],
data() {
return {
modal: false,
areaValue: "",
};
},
mounted() {
if (this.tableStyle) {
this.$nextTick(() => {
this.$refs.setfocus && this.$refs.setfocus.focus();
});
}
},
methods: {
cancel() {
this.areaValue = this.value;
this.modal = false;
},
/*
弹框点击确认
1.弹框数据传回input
2.关闭弹框
3.更新数据到上下文
*/
handleSubmit() {
this.value = this.areaValue;
this.modal = false;
this.onBlur();
},
inputBlur() {},
inputFocus() {
this.areaValue = this.value;
this.modal = true;
},
},
};
</script>
<style lang="less" scoped>
@import "./style/dynamic-from-common.less";
/deep/ .ivu-input {
text-overflow: ellipsis;
}
.input-modal {
max-height: calc(100vh - 20vh - 100px);
}
</style>
<template>
<div @click.stop="canGoDetail ? goDetail() : ''" :class="{ 'can-go-detail':canGoDetail }">
<Input
v-if="vifValue && !isContent && controlDisplay"
ref="setfocus"
v-show="vshowValue"
style="width: 100%"
v-model="value"
:rows="define.config.maxRows"
:placeholder="define.config.placeholder"
:maxlength="computedDefinition.length"
:type="define.config.inputType || 'text'"
:readonly="true"
clearable
@on-blur="onBlur"
>
<Icon
type="ios-menu"
slot="suffix"
style="cursor: point"
@click.stop="executeAction"
v-if="isShowIcon"
/>
</Input>
<div v-if="isContent && controlDisplay">
{{ getValue() }}
</div>
</div>
</template>
<script>
import introduce from "./util/introduce.js";
import bc_input from "./util/bc_input.js";
import stateFormulaMixins from "./util/control-state-formula.js";
import util from "./util/util";
function validateNull(val) {
if (val instanceof Array) {
if (val.length === 0) {
return true;
}
} else if (val instanceof Object) {
if (JSON.stringify(val) === "{}") {
return true;
}
} else {
if (
val === "null" ||
val === null ||
val === "undefined" ||
val === undefined ||
val === ""
) {
return true;
}
return false;
}
return false;
}
export default {
mixins: [bc_input],
data() {
return {
value: "",
};
},
computed: {
button() {
const define = this.define;
const button =
(define.slots &&
define.slots.children &&
define.slots.children.elements &&
define.slots.children.elements[0]) ||
{};
return button;
},
isShowIcon() {
return !validateNull(this.button);
},
canGoDetail() {
return !!this.value;
},
computedDefinition() {
const MAX_LENGTH = 255;
const PRECISION = 19;
const SCALE = 6;
const field = this.define.config.field;
const [tableName, fieldName] = field.split(".");
const tableType = this.context.bill.getTableType(tableName);
const maxLength = Math.min(
this.define.config.maxlength || MAX_LENGTH,
MAX_LENGTH
);
const precision = Math.min(
this.define.config.precision || PRECISION,
PRECISION
);
const scale = Math.min(this.define.config.scale || SCALE, SCALE);
let curDefinition = {};
let flag = false;
const getColumnDefinition = (attr) => {
let obj = {};
for (let annotation of attr.annotations) {
if (annotation.type == "javax.persistence.Column") {
obj = { ...annotation.values };
} else if (annotation.type == "org.hibernate.annotations.Type") {
if (annotation.values.type == "text") {
flag = true;
}
}
}
return obj;
};
for (let attribute of tableType.attributes) {
if (attribute.name == fieldName) {
curDefinition = { ...getColumnDefinition(attribute) };
}
}
curDefinition = {
...curDefinition,
length: flag
? 1e5
: Math.min(maxLength, curDefinition.length || MAX_LENGTH),
precision: Math.min(precision, curDefinition.precision || PRECISION),
scale: Math.min(scale, curDefinition.scale || SCALE),
};
return curDefinition;
},
getInputStyle() {
let style = {};
this.getTextAlign(style);
this.getTextColor(style);
this.getInputHeight(style);
this.getInputWidth(style);
return style;
},
},
methods: {
goDetail() {
let param = this.context.bill.getActionParam(this.button.config.action);
if(!param || !param.param) return
let defineName = param.param.billDefine && param.param.billDefine[0]
let templateName = param.param.templateName
const datasource = 'querysource.' + templateName.split('.')[1]
const postBody = {"datasource": datasource,"page":{"pageNum":1,"size":20000},"groupBy":[],"orders":[],"queryFields":["id","单据编号"],"conditions":[{"type":"UNDEFINED"}]}
GMS.$http.post("/bcp/query/advance/query", postBody).then((res) => {
const data = res.data.rows
let map = {}
data.forEach(d=>{
map[d['单据编号']] = d.id
})
let id = map[this.value]
let a = "/showBillForm/" + defineName + "_E/" + id;
let routeData = GMS.routerManager.getRouter().resolve({
path: a,
});
window.open(routeData.href, "_blank");
});
},
executeAction() {
this.context.bill.executeAction(this.button.config.action);
},
},
};
</script>
<style lang="less" scoped>
.input-height {
/deep/.ivu-input-default {
height: 100%;
}
}
.input-center {
/deep/.ivu-input-default {
text-align: center;
}
}
.input-left {
/deep/.ivu-input-default {
text-align: left;
}
}
.input-right {
/deep/.ivu-input-default {
text-align: right;
}
}
.input-control-wrapper {
display: inline-block;
width: 100%;
position: relative;
}
.can-go-detail {
/deep/ .ivu-input {
cursor: pointer;
}
}
/deep/ .ivu-input-suffix{
cursor: pointer;
}
</style>
\ No newline at end of file
.input-height{
/deep/.ivu-input-default{
height: 100%;
}
}
.input-center{
/deep/.ivu-input-default{
text-align: center;
}
}
.input-left{
/deep/.ivu-input-default{
text-align: left;
}
}
.input-right{
/deep/.ivu-input-default{
text-align: right;
}
}
.input-control-wrapper{
display: inline-block;
width: 100%;
position: relative;
}
\ No newline at end of file
export default {
data() {
return {
state:"",
controlDisplay:true
}
},
methods: {
addControlStateListener(){
this.controlState = this.context.bill.addControlStateListener(this.define.name,{
display:function(type){
if(type){
this.controlDisplay = true;
}else{
this.controlDisplay = false;
}
}.bind(this),
editable:function(nv){
this.state = nv;
}.bind(this),
enable:function(){
}.bind(this),
confirm:function(msg){
/**
* 主动调用
*/
// if(msg){
// this.showTipMessage(msg);
// return false;
// }
}.bind(this)
});
},
getControlState(config){
if(config&&config.formulas){
for (const key in config.formulas) {
if(config.formulas[key] === "false"){
this[`setControl${key}`]&&this[`setControl${key}`]();
}else{
this.context.bill.getControlState(key,this.define.name);
}
}
}
},
setControldisplay(){
this.controlDisplay = false;
},
setControleditable(){
this.state = 'readOnly';
},
showTipMessage(message){
this.$Modal.confirm({
title: '提示',
content: message,
onOk: () => {
},
onCancel: () => {
if(this.context.dataObject){
this.context.dataObject.resetFieldValue();
}
return ;
}
})
}
},
mounted() {
this.getControlState(this.define.config);
},
created(){
this.addControlStateListener();
},
beforeDestroy() {
this.controlState&&this.controlState();
}
}
export default {
inject: ['tmpBill'],
props:{
define: {
type: Object,
required: false,
default:function() {
return {}
}
},
context: {
type: Object,
required: false,
default:function() {
return {}
}
},
index:{
type:Number
},
buttonDisplayStatus: {
type: Boolean,
default: true
},
billStateDisable: {
type: Boolean,
default: false
},
customExecute:{
type:Boolean,
default:false
}
},
data(){
return {
state:false,
description:'',
determineShowActions:[],
actionTitle:'',
actionIcon:'',
controlDisplay:true,
loading:false,
changeLoading: null,
isEdit:false
}
},
methods:{
getWorkflowStep(callBack){
GAMS.Util.invokeServer({
contentType: "application/json",
path: "/workflow/getWorkflowStep/" + this.context.bill.getMasterData().getValue('id'),
type: 'GET'
}).then(function(data){
if(data&&data.code === 0){
callBack(JSON.parse(data.content));
}else{
callBack('');
}
}.bind(this)).catch((XMLHttpRequest, textStatus, errorThrown) => {
callBack('');
});
},
executeAction(){
debugger
this.context.bill.setSubFocus(this.index);
let actionParam = this.context.bill.getActionParam(this.define.config.action);
if(actionParam && actionParam.param && actionParam.param.loading){
this.loading = true;
// this.changeLoading = this.context.bill.addButtonLoadingListener(this.define.config.action, {
// load:function(){
// this.loading = false
// }.bind(this)
// })
}
if(this.define.config.formulas&&(this.define.config.formulas.display||this.define.config.formulas.enable)){
let _resout = this.getControlState(this.define.config);
if(_resout.enable == 'disabled'){
this.setControleditable();
}else if(_resout.display == false){
this.setControldisplay();
}else{
!this.customExecute&&this.context.bill.executeAction(this.define.config.action);
this.customExecute&&this.$emit('executeAction',this.define.config.action);
}
}else{
!this.customExecute&&this.context.bill.executeAction(this.define.config.action);
this.customExecute&&this.$emit('executeAction',this.define.config.action);
}
},
loadShowActions(val) {
this.getActionName();
if(this.isEdit){//编辑和详情单据是一个的情况下,只读界面按钮是否可编辑
let actionParam = this.context.bill.getActionParam(this.define.config.action);
if(this.context.controlState === 'readOnly' && this.define.config.action.endsWith('action_gams') && !actionParam.param.alwaysUse){//如果单据是只读状态,则按钮禁用
this.state = 'disabled';
return;
}
}
if(!this.context.bill.getGlobalParam('_old_action_status')){
this.getControlState(this.define.config);
}
},
getActionName(){
if(!this.define.config){
return;
}
if(this.define.config.rule){
this.dealWithRule();
}else {
this.setBtnDefaultName();
}
},
setBtnDefaultName(){
if(!this.define.config.clear_btn_title){
this.actionTitle = this.define.config.text;
this.actionIcon = this.define.config.icon;
}
},
dealWithRule(){
let actionParam = this.context.bill.getActionParam(this.define.config.action);
if(this.define.config.rule.type === 'roles'){
if(this.define.config.rule[this.$store.state.role]){
this.actionTitle = this.define.config.rule[this.$store.state.role];
}else{
this.actionTitle = this.define.config.rule['default'];
}
}else if(this.define.config.rule.type === 'node'){
this.getWorkflowStep(function(data){
if(data&&this.define.config.rule[data.stepCurrent]){
this.actionTitle = this.define.config.rule[data.stepCurrent];
}else{
this.actionTitle = this.define.config.rule['default']
}
}.bind(this));
}
},
getControlHideStatus(name){
name&&this.context.bill.getControlHideStatus(name,'runtime');
},
addControlDisplayListener(){
this.hideRemove = this.context.bill.addControlHideListener(this.define.name,{
hideControl:function(type){
if(type){
this.controlDisplay = true;
}else{
this.controlDisplay = false;
}
}.bind(this)
});
},
addControlStateListener(){
this.controlState = this.context.bill.addControlStateListener(this.define.name,{
display:function(type){
if(type){
this.controlDisplay = true;
}else{
this.controlDisplay = false;
}
}.bind(this),
enable:function(nv){
this.state = nv;
}.bind(this),
loading:function(nv){
this.loading = nv;
}.bind(this)
});
},
getControlState(config){
if(config&&config.formulas){
let _resout = {};
for (const key in config.formulas) {
if(config.formulas[key] === "false"){
this[`setControl${key}`]&&this[`setControl${key}`]();
}else if(config.formulas[key] !== "true"){
// _resout[key] = this.context.bill.getControlState(key,this.define.name.split('.')[1]);
_resout[key] = this.context.bill.getControlState(key,this.define.name.split('.')[1]?this.define.name.split('.')[1]:this.define.name);
}
}
return _resout;
}
},
setControldisplay(){
this.controlDisplay = false;
},
setControlenable(){
this.state = 'disabled';
},
setLoading(){
this.loading = true;
}
},
mounted(){
if(this.define.config&&this.define.config.action){
this.remove = this.context.bill.addActionStateListener(this.define.config.action,this.context.dataObject,{
stateChange:function(nv){
this.state = nv;
}.bind(this),
descriptionChange:function(nv){
this.description = nv;
}.bind(this)
});
}
if(this.define.config&&this.define.config.formulaName){
this.addControlDisplayListener();
this.define.config&&this.getControlHideStatus(this.define.config.formulaName);
}else {
this.addControlStateListener();
}
this.$nextTick(function(){
this.loadShowActions()
}.bind(this));
},
watch:{
buttonDisplayStatus:{
handler(nv,ov){
if( Object.prototype.toString.call(nv) == '[object Boolean]'){
this.controlDisplay = nv;
}
},
immediate:true
},
billStateDisable: {
handler(nv) {
if(nv) {
this.state = 'disabled'
} else {
this.state = ''
}
},
immediate:true
},
"tmpBill.$attrs.params": {
handler(nv) {
if(typeof nv == 'string'){
nv = eval('('+nv+')')
}
if (nv && 'isEdit' in nv) {
this.isEdit = true;
}
},
immediate: true,
}
},
computed: {
showToolTip: {
get: function() {
if(this.description.length > 0 && this.state==='disabled'){
return false;
}else{
return true;
}
}
}
},
beforeDestroy(){
if(this.remove){
this.remove();
}
if(this.hideRemove){
this.hideRemove();
}
this.controlState&&this.controlState();
this.changeLoading&&this.changeLoading();
}
}
\ No newline at end of file
......@@ -100,6 +100,169 @@ export default {
"path": "资产/通用"
},
{
"title": "功能文本框",
"dynamicComponent": 'IntroduceInputControl',
"description": "",
"discard": false,
"extends": {
"config": [
{
"key": "field",
"type": "field",
"ref": "BillClassVO.attributes",
"disableReload": false,
"title": "关联字段"
},
{
"key": "placeholder",
"type": "String",
"title": "提示文字"
}
]
},
"value": "IntroduceInputControl",
"path": "资产/通用"
},
{
"value": "InputModalControl",
"title": "大文本输入框",
"description": "",
"discard": false,
"dynamicComponent": 'billForm',
"path": "资产/通用",
"extends": {
"config": [
{
"key": "formulas.editable",
"type": "formula",
"title": "是否可编辑",
"configFormula": true,
"disableSwitch": false,
"formulas.editable": true
},
{
"key": "formulas.display",
"type": "formula",
"title": "控件是否展示",
"configFormula": true,
"disableSwitch": false,
"formulas.display": true
},
{
"key": "formulas.confirm",
"type": "formula",
"title": "数据变化提示消息",
"configFormula": true,
"disableSwitch": true,
"formulas.confirm": true
},
{
"key": "field",
"type": "field",
"ref": "BillClassVO.attributes",
"disableReload": false,
"title": "关联字段"
},
{
"key": "placeholder",
"type": "String",
"title": "提示文字"
},
{
"key": "inputType",
"type": "enum",
"title": "输入框类型",
"inputType": "text",
"ref": [{
"key": "text",
"value": "文本"
},
{
"key": "password",
"value": "密码"
},
{
"key": "textarea",
"value": "文本域"
},
{
"key": "tel",
"value": "电话"
},
{
"key": "email",
"value": "邮箱"
}
]
},
{
"key": "v-if",
"type": "viewdata",
"title": "是否渲染"
},
{
"key": "v-show",
"type": "viewdata",
"title": "是否可见"
},
{
"key": "editable",
"type": "viewdata",
"title": "是否可编辑"
}
],
"layout": [
{
"key": "width",
"type": "int",
"title": "宽度",
"message": "默认100%"
},
{
"key": "height",
"type": "int",
"title": "高度",
"height": 32,
"message": "默认32"
},
{
"key": "color",
"type": "Color",
"color": "#222222",
"title": "文字颜色"
},
{
"key": "textAlign",
"type": "enum",
"title": "对齐方式",
"ref": [{
"key": "left",
"value": "居左"
},
{
"key": "right",
"value": "居右"
},
{
"key": "center",
"value": "居中"
}
]
},
{
"key": "fontSize",
"type": "int",
"title": "字体大小"
},
{
"key": "background",
"type": "Color",
"title": "背景色"
}
]
}
},
{
"value": "ButtonControl",
"discard": false,
"path": "资产/通用",
......
......@@ -76,6 +76,8 @@ import newsDetail from './components-control/news-detail.vue'
import queryDate from './control/query-date.vue'
import userSelectControl from './control/userSelect.vue'
import integerControl from './control/integerControl.vue'
import IntroduceInputControl from './control/IntroduceInputControl.vue'
import InputModalControl from './control/InputModalControl.vue'
//formula
import GeneralImportFile from './formula/GeneralImportFile.js';
......@@ -244,7 +246,9 @@ export default {
WorkflowTrack,
rbcBasedataTree,
userSelectControl,
integerControl
integerControl,
IntroduceInputControl,
InputModalControl
},
formula: {
SubTableSetBaseData,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment