/* ********** */
|
Root = window.top.Root;
|
RootRole = window.top.RootRole;
|
dataRoot = window.top.dataRoot;
|
dataRootFields = window.top.dataRootFields;
|
Server = window.top.Server;
|
|
Sortable = window.top.Sortable;
|
|
//显示大小基准
|
//分辨率基准
|
var screen_draft = [1920, 1080];
|
//var screen_draft = [1366, 768];
|
//可视范围基准
|
var wh_draft = [1366, 728];
|
|
//dataRoot_lxc = window.top.dataRoot_lxc;
|
//dataRoot_wxy = window.top.dataRoot_wxy;
|
|
var h_language = localStorage.getItem("userlanguage") || "zh";
|
|
/*********** default setting Element的默认设置 ************/
|
var ElTypes = {//可配置项
|
button: {//按键
|
ztypename: String,
|
zdefault: String,
|
small: String,
|
type: String,//default, primary, success
|
size: String,
|
icon: String,
|
nativeType: String,
|
loading: Boolean,
|
disabled: Boolean,
|
plain: Boolean,
|
autofocus: Boolean,
|
round: Boolean,
|
circle: Boolean,
|
},
|
};
|
|
//组件通用设置
|
var currencyDefault = {
|
ElButton: {
|
size: "mini",
|
//type: "primary",//default
|
},
|
ElInput: {
|
size: "mini",
|
},
|
ElCascader: {
|
size: "mini",
|
},
|
ElSelect: {
|
size: "mini",
|
},
|
ElDatePicker: {
|
size: "mini",
|
},
|
ElInputNumber: {
|
size: "mini",
|
},
|
};
|
|
//自定义模板设置
|
var ElementDefault = {
|
buttonmould_refresh: {
|
type: "success",
|
icon: "el-icon-refresh"
|
},
|
buttonmould1: {
|
size: "mini",
|
type: "success",
|
},
|
buttonmould2: {
|
size: "small",
|
type: "success",
|
},
|
buttonmould3: {
|
size: "medium",
|
type: "success",
|
}
|
};
|
|
function getElementDefault(el) {
|
var defaultObj = {};
|
if (typeof (el.ztypename) == 'undefined') {
|
var aa = ""
|
}
|
if (el.ztypename == 'ElDatePicker') {
|
var aa = ""
|
}
|
|
// 通用设置
|
if (typeof (el.ztypename) != 'undefined') {
|
let ztypename = el.ztypename;
|
if (currencyDefault[ztypename]) {
|
let currencyDefaultObj = currencyDefault[ztypename];
|
for (var key in currencyDefaultObj) {
|
el[key] = currencyDefaultObj[key];
|
}
|
}
|
}
|
|
//自定义模板设置
|
if (typeof (el.zdefault) != 'undefined') {
|
let zdefault = el.zdefault;
|
if (ElementDefault[zdefault]) {
|
let ElementDefaultObj = ElementDefault[zdefault];
|
for (var key in ElementDefaultObj) {
|
el[key] = ElementDefaultObj[key];
|
}
|
}
|
}
|
|
};
|
|
function getElementDefault222(el) {
|
var defaultObj = {};
|
|
// 通用设置
|
if (el.ztypename) {
|
let ztypename = el.ztypename;
|
if (currencyDefault[ztypename]) {
|
let currencyDefaultObj = currencyDefault[ztypename];
|
for (var key in currencyDefaultObj) {
|
defaultObj[key] = currencyDefaultObj[key];
|
}
|
}
|
}
|
|
//自定义模板设置
|
if (el.zdefault) {
|
let zdefault = el.zdefault;
|
if (ElementDefault[zdefault]) {
|
let ElementDefaultObj = ElementDefault[zdefault];
|
for (var key in ElementDefaultObj) {
|
defaultObj[key] = ElementDefaultObj[key];
|
}
|
}
|
}
|
|
//return defaultObj;
|
};
|
|
//********************************************************
|
//组件的格式化
|
formatter_json = window.top.formatter_json;
|
formatter_date = window.top.formatter_date;
|
formatter_money = window.top.formatter_money;
|
formatter_float = window.top.formatter_float;
|
formatter_percent = window.top.formatter_percent;
|
formatter_password = window.top.formatter_password;
|
formatter_split = window.top.formatter_split;
|
|
formatter_prefixorunit = window.top.formatter_prefixorunit;
|
formatter_earlyWarning = window.top.formatter_earlyWarning;
|
|
dateFormat = window.top.dateFormat;
|
|
|
function formatter_Splicing(row, column, cellValue, index) {
|
return row.sku = row.name + row.spec;
|
};
|
|
/*********** 文件上传-图片（未完成） ************/
|
// Vue.component("h-upload-img", {
|
// template: [
|
// '<el-popover v-model="visible" >',
|
// '<div class="popover-body">',
|
// '<el-row v-for="(itm, k) in datalist" :key="k" :gutter="2">',
|
// '<el-button class="popover-item" type="default" @click="fireitemselect(itm)">{{itm.label}}',
|
// '</el-button>',
|
// '</el-row>',
|
// '</div>',
|
// '<el-button slot="reference" type="default" icon="el-icon-caret-bottom" class="popover-btn"></el-button>',
|
// '</el-popover>'].join(""),
|
// props: {
|
// datalist: Array
|
// },
|
// data() {
|
// return {
|
// visible: false,
|
// selected: null
|
// }
|
// },
|
// methods: {
|
// fireitemselect(v) {
|
// this.selected = v;
|
// this.visible = false;
|
// this.$emit('itemselect', v);
|
// }
|
// }
|
// });
|
|
/**********h-draggable-order**********/
|
Vue.component("h-draggable-order", {//拖拽调整顺序
|
template:
|
' <el-popover v-model="visible" @show="onshow"> '+
|
'<div>{{title}}</div>' +
|
' <div class="popover-body h_draggable_order"> '+
|
' <div class="h_draggable_order_list"> '+
|
' <div class="h_draggable_order_index"> '+
|
' <div v-for="(item,index) in data_list" :key="index" class="h_draggableorder_index_r"> '+
|
' <p style="margin: 0px;">{{index + 1}}、</p> '+
|
' </div> '+
|
' </div> '+
|
//id="vuedraggable"
|
' <div class="wrapper h_draggable_order_item"> '+
|
// v-if="!isdisabled"
|
' <div v-for="(item,k) in data_list" :key="k" :class="[isdisabled ? \'item_vuedraggable\' : \'\', \'h_draggableorder_item_r\'] " style="overflow: hidden;" :data-id="item[identificationfield]" :data-item="item"> '+
|
' <el-switch v-if="isselect" v-model="item[isselectfield.field]" '+
|
' active-color="#13ce66" '+
|
' inactive-color="#ccc" '+
|
' @change="e=>{switchChange(e, item)}" '+
|
' > '+
|
' </el-switch> '+
|
' <div style="display: inline-block; padding-left: 5px;">{{item[labelfield]}}</div> '+
|
' </div> '+
|
' </div> '+
|
' </div> '+
|
' <div class="h_draggable_order_footer" style="text-align: right; margin: 0; border-top: 1px solid #ccc; padding-top: 5px; margin-top: 5px;"> '+
|
' <el-button size="mini" type="txt" @click="visible = false">取消</el-button> '+
|
' <el-button size="mini" type="primary" @click="saveOrder">确定</el-button> '+
|
' </div> '+
|
' </div> '+
|
' <el-button slot="reference" type="primary" :icon="icon" size="mini" class="popover-btn"></el-button> '+
|
' </el-popover> ',
|
props: {
|
datalist: Array,
|
selectdatalist: Array,
|
title: {
|
type: String,
|
default: "字段拖拽"
|
},
|
icon: {
|
type: String,
|
default: "el-icon-setting"
|
},
|
identificationfield: {
|
type: String,
|
default: "id"
|
},
|
labelfield: {
|
type: String,
|
default: "label"
|
},
|
|
isselectfield: {//显示和隐藏的字段及对应值
|
type: Object,
|
default: function(){
|
return {
|
field: "is_h_select",
|
show: true,
|
hide: false
|
};
|
}
|
},
|
|
//是否可拖拽顺序，默认可拖拽true
|
isdisabled: {
|
type: Boolean,
|
default: true
|
},
|
//是否可设置是否选中，默认可调整true
|
isselect: {
|
type: Boolean,
|
default: true
|
},
|
},
|
|
data() {
|
return {
|
visible: false,
|
data_list: [],
|
new_datalist: [],
|
select_datalist: this.selectdatalist,
|
select_datalist_old: this.selectdatalist,
|
select_datalist_obj: {},
|
select_datalist_oldobj: {},
|
buttontype: "txt"
|
|
}
|
},
|
watch: {
|
datalist(newVal, oldVal){
|
this.data_list = clone(this.datalist);
|
},
|
},
|
|
created() {
|
this.data_list = clone(this.datalist);
|
},
|
|
mounted() {
|
var a = "";
|
},
|
methods: {
|
init_vuedraggable(id_) {
|
var me = this;
|
var vuedraggable_el = document.getElementById(id_).getElementsByClassName("h_draggable_order_item")[0]//getElementById('vuedraggable');
|
var ops = {
|
animation: 1000,
|
handle: ".item_vuedraggable",
|
filter: ".not_vuedraggable",
|
//拖动结束
|
onEnd: function (evt) {
|
me.data_list;
|
console.log(evt);
|
//获取拖动后的排序
|
var arr = sortable.toArray();
|
//alert(JSON.stringify(arr));
|
},
|
|
//排序结束事件
|
onUpdate: function (evt) {
|
me.data_list;
|
console.log(evt);
|
//获取拖动后的排序
|
var arr = sortable.toArray();
|
me.new_datalist = arr;
|
//alert(JSON.stringify(arr));
|
},
|
|
};
|
//初始化
|
var sortable = Sortable.create(vuedraggable_el, ops);
|
var arr = sortable.toArray();
|
console.log("arr:", arr);
|
this.new_datalist = arr;
|
},
|
onshow() {
|
var id_ = this.$el.childNodes[0].childNodes[0].attributes["aria-describedby"].nodeValue;
|
|
this.init_vuedraggable(id_);
|
var me = this;
|
this.data_list = clone(this.datalist);
|
this.select_datalist = clone(this.selectdatalist);
|
this.select_datalist_old = clone(this.selectdatalist);
|
|
this.select_datalist_obj = {};
|
this.select_datalist_oldobj = {};
|
|
if (this.select_datalist && this.select_datalist.length) {
|
this.select_datalist.map(e=>{
|
var id_ = e[me.identificationfield];
|
if (id_) {
|
me.select_datalist_obj[id_] = e;
|
me.select_datalist_oldobj[id_] = e;
|
}
|
|
})
|
}
|
|
if (this.isselect && this.data_list.length) {
|
this.data_list.map(e=>{
|
var id_ = e[me.identificationfield];
|
if (me.select_datalist_oldobj[id_]) {
|
e[me.isselectfield.field] = true;
|
}
|
else {
|
e[me.isselectfield.field] = false;
|
}
|
})
|
}
|
},
|
|
switchChange(e, item) {
|
var aa = "";
|
this.$forceUpdate();
|
},
|
|
saveOrder() {
|
var me = this;
|
this.visible = false;
|
var select_datalist_ = [];
|
this.new_datalist;
|
this.identificationfield;
|
var data_listobj = {};
|
var newdatalist = [];
|
this.data_list.map(e=>{
|
data_listobj[e[this.identificationfield]] = e;
|
});
|
console.log("data_list:", this.data_list);
|
console.log("new_datalist:", this.new_datalist);
|
console.log("data_listobj:", data_listobj);
|
this.new_datalist.map(f=>{
|
var e = data_listobj[f];
|
console.log("f:", e);
|
if(e[me.isselectfield.field]) {
|
e[me.isselectfield.field] = me.isselectfield.show
|
select_datalist_.push(e);
|
}
|
else {
|
e[me.isselectfield.field] = me.isselectfield.hide
|
}
|
newdatalist.push(e);
|
})
|
|
var obj = {
|
select_datalist: select_datalist_,
|
data_list: newdatalist
|
}
|
|
this.$emit('save-order', obj);
|
},
|
onStart(e){
|
console.log(e);
|
},
|
}
|
});
|
|
/*********** h-select ************/
|
Vue.component("h-select", {
|
template: [
|
'<el-popover v-model="visible" >',
|
'<div class="popover-body">',
|
'<el-row v-for="(itm, k) in datalist" :key="k" :gutter="2">',
|
'<el-button class="popover-item" type="default" @click="fireitemselect(itm)">{{itm.label}}',
|
'</el-button>',
|
'</el-row>',
|
'</div>',
|
'<el-button slot="reference" type="default" icon="el-icon-caret-bottom" class="popover-btn"></el-button>',
|
'</el-popover>'].join(""),
|
props: {
|
datalist: Array
|
},
|
data() {
|
return {
|
visible: false,
|
selected: null
|
}
|
},
|
methods: {
|
fireitemselect(v) {
|
this.selected = v;
|
this.visible = false;
|
this.$emit('itemselect', v);
|
}
|
}
|
});
|
|
/*********** h-iconselect ************/
|
Vue.component("h-iconselect", {//图标点击下拉组件
|
template: '<el-popover v-model="visible" >'+
|
'<div class="popover-body">'+
|
'<el-row v-for="(itm, k) in datalist" :key="k" :gutter="2">'+
|
'<el-button class="popover-item" type="default" @click="fireitemselect(itm)">{{itm.label}}'+
|
'</el-button>'+
|
'</el-row>'+
|
'</div>'+
|
'<el-button slot="reference" type="default" :icon="icon" class="popover-btn"></el-button>'+
|
'</el-popover>',
|
props: {
|
datalist: Array,
|
icon: String
|
},
|
data() {
|
return {
|
visible: false,
|
}
|
},
|
|
methods: {
|
fireitemselect(v) {
|
this.visible = false;
|
this.$emit('itemselect', v);
|
},
|
}
|
});
|
|
/*************** h-table *****************/
|
/* **********h-table-lie********* */
|
Vue.component("h-table-lie", {//列表单列
|
template:
|
//存在格式化
|
' <el-table-column v-if="tableField.isshow == \'T\' && tableField.formatter_f" '+
|
' :fixed="tableField.isfixed ? tableField.isfixed : false "'+
|
' :sortable="tableField.issortable ? tableField.issortable : false" '+
|
' :align="tableField.align ? tableField.align : \'center\'" '+
|
' :show-overflow-tooltip="((hideoverflowtooltip || isWithinEditTableData || tableField.type==\'popup\' || tableField.type==\'input\' || tableField.type==\'select\' || tableField.type==\'button\' || tableField.type==\'date\') && !(tableField.disabled || !isWithinEditTableData)) ? false : true" '+
|
' :width="(tableField.width > 20 && !tableField.isminwidth) ? tableField.width : \'auto\'" '+
|
' :min-width="(tableField.width > 20 && tableField.isminwidth) ? tableField.width : \'auto\'" '+
|
' :formatter= "function(row, column, cellValue, index){return tableField.formatter_f(row, column, cellValue, index)}" '+
|
' :prop="tableField.field" '+
|
' :label="tableField.name" > '+
|
' <template slot-scope="scope" > '+
|
' <template v-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type && tableField.type != \'span\'"> '+
|
' <el-checkbox v-if="tableField.type == \'checkbox\'" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" @change="cellInputChange(scope, tableField)"></el-checkbox> '+
|
' <el-input class="111" v-else-if="(isWithinEditTableData || scope.row.isWithinEdit || (scope.row.rowEditField && scope.row.rowEditField[tableField.field])) && tableField.type == \'input\'" style="width: 100%;" v-model="scope.row[tableField.field]" @change="cellInputChange(scope, tableField)"></el-input> '+
|
' <el-input v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'textarea\'" type="textarea" :rows="2" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope, tableField)"></el-input> '+
|
' <el-input-number v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'number\'" v-model="scope.row[tableField.field]" controls-position="right" style="width: 100%;" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" @change="cellInputChange(scope, tableField)" :min="tableField.minval" :max="tableField.maxval"></el-input-number> '+
|
' <el-switch v-else-if="tableField.type==\'switch\'" v-model="scope.row[tableField.field] == \'T\' ? 1==1 : scope.row[tableField.field]" '+
|
' :disabled = "!(isWithinEditTableData || scope.row.isWithinEdit)" '+
|
' :inactive-text="tableField.switch_false" :active-text="tableField.switch_true"></el-switch> '+
|
' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'date\'" type="date" value-format="yyyy-MM-dd" :clearable="tableField.isnotclearable ? false : true" :picker-options="tableField.pickerOptions" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope, tableField)"></el-date-picker> '+
|
' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'month\'" type="month" value-format="yyyy-MM" placeholder="选择月" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope, tableField)"></el-date-picker> '+
|
' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && !(tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange)" :filterable="tableField.filterable" :multiple="tableField.ismultiple" @change="cellSelectChange($event, scope, tableField)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" placeholder="请选择" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k) in tableField.options" '+
|
':key="k" '+
|
':label="tableField.props ? item[tableField.props.label] : item.label" '+
|
':value="tableField.props ? item[tableField.props.value] : item.value"> '+
|
'</el-option> '+
|
' </el-select> '+
|
' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && (tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange)" :multiple="tableField.ismultiple" @visible-change="visibleChange($event, tableField)" @change="cellSelectChange($event, scope, tableField)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" placeholder="请选择" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in tableField.options" '+
|
':key="k1" '+
|
':label="tableField.props ? item[tableField.props.label] : item.label" '+
|
':value="tableField.props ? item[tableField.props.value] : item.value"> '+
|
'</el-option> '+
|
' </el-select> '+
|
//多选selectmultiple
|
' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'selectmultiple\' && !(tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange)" :filterable="tableField.filterable" multiple @change="cellSelectChange($event, scope, tableField)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" placeholder="请选择" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k) in tableField.options" '+
|
':key="k" '+
|
':label="tableField.props ? item[tableField.props.label] : item.label" '+
|
':value="tableField.props ? item[tableField.props.value] : item.value"> '+
|
'</el-option> '+
|
' </el-select> '+
|
' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'selectmultiple\' && (tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange)" multiple @visible-change="visibleChange($event, tableField)" @change="cellSelectChange($event, scope, tableField)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" placeholder="请选择" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in tableField.options" '+
|
':key="k1" '+
|
':label="tableField.props ? item[tableField.props.label] : item.label" '+
|
':value="tableField.props ? item[tableField.props.value] : item.value"> '+
|
'</el-option> '+
|
' </el-select> '+
|
|
' <el-button v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'button\'" @click.native.prevent="cellButtonClick(scope, \'\',tableField)" type="text">{{ scope.row[tableField.field] }}</el-button> '+
|
' <div v-else-if="tableField.type == \'buttons\'" class="h_table_valbuttons"> '+
|
'<template v-for="(button_,bk) in tableField.buttons">'+
|
'<el-button v-if="!button_.disabled" class="h_table_valbutton" @click.native.prevent="cellButtonClick(scope, button_.code, tableField)" type="text">{{ button_.name }}</el-button> '+
|
'</template>'+
|
' </div> '+
|
|
' <template v-else-if="tableField.type == \'pdf\'"> '+
|
' <div style="height: 20px;">'+
|
' <a v-if="scope.row[tableField.field]" :href="scope.row[tableField.field]" download> '+
|
' <img style="width: 20px; height: 20px" src="../../../img/pdf.png"></img> '+
|
' </a> '+
|
' </div> '+
|
' </template> '+
|
|
' <template v-else-if="tableField.type == \'rise\'"> '+
|
' <template v-if="scope.row[tableField.field] * 1 > 0"> '+
|
' <span class="h_up">{{scope.row[tableField.field]}}</span> '+
|
' <span v-if="!tableField.notsymbol" class="h_up">%</span> '+
|
' <i class="iconfont icon-up3 h_up"></i> '+
|
' </template> '+
|
' <template v-else-if="scope.row[tableField.field] * 1 < 0"> '+
|
' <span class="h_down">{{scope.row[tableField.field]}}</span> '+
|
' <span v-if="!tableField.notsymbol" class="h_down">%</span> '+
|
' <i class="iconfont icon-down3 h_down"></i> '+
|
' </template> '+
|
' <span v-else>0</span> '+
|
' </template> '+
|
|
' <template v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'popup\'"> '+
|
'<table>'+
|
'<tr>'+
|
'<td align="left" style="width: 100%; text-align:center; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" ><span>{{scope.row[tableField.field]}}</span></td> '+
|
'<td style= "padding: 0px">'+
|
'<el-button v-if="(isWithinEditTableData || scope.row.isWithinEdit)" type="primary" icon="el-icon-more" style="padding: 5px; margin: 0px 3px;" @click="showpopup(scope)"></el-button> '+
|
'</td>'+
|
|
'</tr>'+
|
'</table>'+
|
' </template> '+
|
|
//普通标签//胶囊标签(有格式化的)
|
' <template v-else-if="tableField.type == \'tag\' || tableField.type == \'capsuletag\'"> '+
|
' <el-tag class="11223" v-if="scope.row[tableField.field] || scope.row[tableField.field] == 0 || scope.row[tableField.field] == false" :class="[tableField.type == \'capsuletag\' ? \'h_capsuletag\' : \'\'] " '+
|
' size="small" :type="(tableField.tagtype && tableField.tagtype[tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)]) ? tableField.tagtype[tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)] : \'success\'" '+
|
//' size="small" type="success" '+
|
' effect="dark">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</el-tag>'+
|
' <el-tag v-else :class="[tableField.type == \'capsuletag\' ? \'h_capsuletag\' : \'\'] " size="small" type="danger" effect="dark">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</el-tag>'+
|
' </template> '+
|
|
//有值
|
' <template v-else-if="scope.row[tableField.field] || scope.row[tableField.field] == 0 || scope.row[tableField.field] == false"> '+
|
//有点击
|
' <span v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].val && tableFieldClick[tableField.field].val.onclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])" class="h_cellclick" '+
|
' @mouseenter="cellValMouseenter(scope.row, tableField, scope.row[tableField.field])" '+
|
' @mouseleave="cellValMouseleave(scope.row, tableField, scope.row[tableField.field])" '+
|
' @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'valclick\')">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</span> '+
|
//无点击
|
' <span v-else class="">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</span> '+
|
//有后缀点击
|
' <template v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].suffixval && tableFieldClick[tableField.field].suffixval.onclick"> '+
|
' <br>' +
|
' <span class="h_cellsuffixclick" @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'suffixvalclick\')">{{tableFieldClick[tableField.field].suffixval.val}}</span> '+
|
' </template> '+
|
' </template> '+
|
|
//无值、有默认值
|
' <template v-else-if="!scope.row[tableField.field] && tableFieldClick[tableField.field] && tableFieldClick[tableField.field].defaultval && tableFieldClick[tableField.field].defaultval.val"> '+
|
//有点击
|
' <template v-if="tableFieldClick[tableField.field].defaultval.onclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])"> '+
|
' <span class="h_cellclick" @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'defaultvalclick\')">{{tableFieldClick[tableField.field].defaultval.val}}</span> '+
|
' </template> '+
|
//无点击
|
' <span v-else>{{tableFieldClick[tableField.field].defaultval.val}}</span> '+
|
' </template> '+
|
' </template> '+
|
|
//不是编辑的
|
' <template v-else> '+
|
' <el-input class="112" v-if="((isWithinEditTableData || scope.row.isWithinEdit) && (scope.row.rowEditField && scope.row.rowEditField[tableField.field] && scope.row.rowEditField[tableField.field].type == \'input\')) && tableField.type == \'span\'" style="width: 100%;" v-model="scope.row[tableField.field]" @change="cellInputChange(scope, tableField)"></el-input> '+
|
' <el-date-picker v-else-if="((isWithinEditTableData || scope.row.isWithinEdit) && (scope.row.rowEditField && scope.row.rowEditField[tableField.field] && scope.row.rowEditField[tableField.field].type == \'date\')) && tableField.type == \'span\'" type="date" value-format="yyyy-MM-dd" :clearable="tableField.isnotclearable ? false : true" :picker-options="tableField.pickerOptions" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope, tableField)"></el-date-picker> '+
|
//普通标签//胶囊标签
|
' <template v-else-if="tableField.type == \'tag\' || tableField.type == \'capsuletag\'"> '+
|
' <el-tag class="112234" v-if="scope.row[tableField.field]" :class="[tableField.type == \'capsuletag\' ? \'h_capsuletag\' : \'\'] " size="small" '+
|
' :type="(tableField.tagtype && tableField.tagtype[tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)]) ? tableField.tagtype[tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)] : \'success\'" '+
|
' effect="dark">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</el-tag>'+
|
' <el-tag v-else-if="tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)" :class="[tableField.type == \'capsuletag\' ? \'h_capsuletag\' : \'\'] " size="small" type="danger" effect="dark">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</el-tag>'+
|
// ' <el-tag v-else :class="[tableField.type == \'capsuletag\' ? \'h_capsuletag\' : \'\'] " size="small" type="danger" effect="dark">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</el-tag>'+
|
' <span v-else></span>'+
|
' </template> '+
|
|
//有值
|
' <template v-else-if="scope.row[tableField.field] || scope.row[tableField.field] == 0 || scope.row[tableField.field] == false"> '+
|
//有点击
|
' <span v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].val && tableFieldClick[tableField.field].val.onclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])" class="h_cellclick" '+
|
' @mouseenter="cellValMouseenter(scope.row, tableField, scope.row[tableField.field])" '+
|
' @mouseleave="cellValMouseleave(scope.row, tableField, scope.row[tableField.field])" '+
|
' @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'valclick\')">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</span> '+
|
//无点击
|
' <span v-else class="">{{tableField.formatter_f(scope.row, scope, scope.row[tableField.field], null)}}</span> '+
|
//有后缀点击
|
' <template v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].suffixval && tableFieldClick[tableField.field].suffixval.onclick"> '+
|
' <br>' +
|
' <span class="h_cellsuffixclick" @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'suffixvalclick\')">{{tableFieldClick[tableField.field].suffixval.val}}</span> '+
|
' </template> '+
|
|
//图表-进度条
|
'<el-progress v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].chart && tableFieldClick[tableField.field].chart.type == \'progress\' && !isNaN(scope.row[tableFieldClick[tableField.field].chart.field]) " '+
|
' :show-text="tableFieldClick[tableField.field].chart.isshowtext ? true : false" '+
|
' :text-inside="tableFieldClick[tableField.field].chart.istextinside ? true : false" '+
|
' :stroke-width="tableFieldClick[tableField.field].chart.progresswidth ? tableFieldClick[tableField.field].chart.progresswidth : 10" :percentage="(scope.row[tableFieldClick[tableField.field].chart.field] * 1) > 100 ? 100 : scope.row[tableFieldClick[tableField.field].chart.field] * 1 " '+
|
' :color="setPercentageColor(scope.row[tableFieldClick[tableField.field].chart.field] * 1)"></el-progress> '+
|
|
' </template> '+
|
|
//无值、有默认值
|
' <template v-else-if="!scope.row[tableField.field] && tableFieldClick[tableField.field] && tableFieldClick[tableField.field].defaultval && tableFieldClick[tableField.field].defaultval.val"> '+
|
//有点击
|
' <template v-if="tableFieldClick[tableField.field].defaultval.onclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])"> '+
|
' <span class="h_cellclick" @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'defaultvalclick\')">{{tableFieldClick[tableField.field].defaultval.val}}</span> '+
|
' </template> '+
|
//无点击
|
' <span v-else>{{tableFieldClick[tableField.field].defaultval.val}}</span> '+
|
|
//图表-进度条
|
'<el-progress v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].chart && tableFieldClick[tableField.field].chart.type == \'progress\' && !isNaN(scope.row[tableFieldClick[tableField.field].chart.field]) " '+
|
' :show-text="tableFieldClick[tableField.field].chart.isshowtext ? true : false" '+
|
' :text-inside="tableFieldClick[tableField.field].chart.istextinside ? true : false" '+
|
' :stroke-width="tableFieldClick[tableField.field].chart.progresswidth ? tableFieldClick[tableField.field].chart.progresswidth : 10" :percentage="(scope.row[tableFieldClick[tableField.field].chart.field] * 1) > 100 ? 100 : scope.row[tableFieldClick[tableField.field].chart.field] * 1 " '+
|
' :color="setPercentageColor(scope.row[tableFieldClick[tableField.field].chart.field] * 1)"></el-progress> '+
|
|
' </template> '+
|
' </template> '+
|
' </template> '+
|
////////////////////
|
' </el-table-column> '+
|
|
' <el-table-column v-else-if="tableField.isshow == \'T\'" '+
|
' :fixed="tableField.isfixed ? tableField.isfixed : false "'+
|
' :sortable="tableField.issortable ? tableField.issortable : false" '+
|
' :align="tableField.align ? tableField.align : \'center\'" '+
|
' :show-overflow-tooltip="(hideoverflowtooltip || isWithinEditTableData || tableField.type==\'popup\' || tableField.type==\'input\' || tableField.type==\'select\' || tableField.type==\'button\' || tableField.type==\'date\') ? false : true" '+
|
' :width="(tableField.width > 20 && !tableField.isminwidth) ? tableField.width : \'auto\'" '+
|
' :min-width="(tableField.width > 20 && tableField.isminwidth) ? tableField.width : \'auto\'" '+
|
' :prop="tableField.field" '+
|
' :label="tableField.name"> '+
|
' <template slot-scope="scope"> '+
|
' <el-checkbox v-if="tableField.type == \'checkbox\'" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" @change="cellInputChange(scope, tableField)"></el-checkbox> '+
|
|
' <el-input class="113" v-if="((isWithinEditTableData || scope.row.isWithinEdit) && (scope.row.rowEditField && scope.row.rowEditField[tableField.field] && scope.row.rowEditField[tableField.field].type == \'input\')) && tableField.type == \'span\'" style="width: 100%;" v-model="scope.row[tableField.field]" @change="cellInputChange(scope, tableField)"></el-input> '+
|
' <el-date-picker v-else-if="((isWithinEditTableData || scope.row.isWithinEdit) && (scope.row.rowEditField && scope.row.rowEditField[tableField.field] && scope.row.rowEditField[tableField.field].type == \'date\')) && tableField.type == \'span\'" type="date" value-format="yyyy-MM-dd" :clearable="tableField.isnotclearable ? false : true" :picker-options="tableField.pickerOptions" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope, tableField)"></el-date-picker> '+
|
|
//按键限制
|
|
// ' <el-input class="z_onkeydown" v-else-if="tableField.inputkeys || (tableFieldClick[tableField.field] && tableFieldClick[tableField.field].input && tableFieldClick[tableField.field].input.onkeydown)" v-model="scope.row[tableField.field]" @keydown.native="(k)=>onkeydown(k, tableField)" onkeyup="value=value.replace(/[^\x00-\xff]/g, \'\')" :style="{width: tableField.valuewidth ? tableField.valuewidth : \'100%\'}" :placeholder="tableField.placeholder" @change="cellInputChange(scope, tableField)"></el-input> '+
|
' <el-input class="z_onkeydown" v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'input\' && (tableField.inputkeys || (tableFieldClick[tableField.field] && tableFieldClick[tableField.field].input && tableFieldClick[tableField.field].input.onkeydown))" v-model="scope.row[tableField.field]" @keydown.native="(k)=>onkeydown(k, tableField)" @keyup.native="onkeyup(scope, tableField)" :style="{width: tableField.valuewidth ? tableField.valuewidth : \'100%\'}" :placeholder="tableField.placeholder" @change="cellInputChange(scope, tableField)"></el-input> '+
|
' <el-input v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'input\'" style="width: 100%;" v-model="scope.row[tableField.field]" @change="cellInputChange(scope, tableField)"></el-input> '+
|
' <el-input v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'textarea\'" type="textarea" :rows="2" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope, tableField)"></el-input> '+
|
' <el-input-number v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'number\'" v-model="scope.row[tableField.field]" controls-position="right" style="width: 100%;" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" @change="cellInputChange(scope, tableField)" :min="tableField.minval" :max="tableField.maxval"></el-input-number> '+
|
' <el-autocomplete '+
|
' v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'autocomplete\'" '+
|
' class="inline-input" '+
|
' v-model="scope.row[tableField.field]" '+
|
' :fetch-suggestions="((queryString,cb)=>{querySearch(queryString,cb,tableField)})" '+
|
' @select="cellInputChange(scope, tableField)" '+
|
' ></el-autocomplete> '+
|
'<el-switch v-else-if="tableField.type==\'switch\'" v-model="scope.row[tableField.field] == \'T\' ? 1==1 : scope.row[tableField.field]" '+
|
' :disabled="!(isWithinEditTableData || scope.row.isWithinEdit)" '+
|
' :inactive-text="tableField.switch_false" :active-text="tableField.switch_true"></el-switch> '+
|
' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'date\'" type="date" value-format="yyyy-MM-dd" :clearable="tableField.isnotclearable ? false : true" :picker-options="tableField.pickerOptions" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope, tableField)"></el-date-picker> '+
|
' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'month\'" type="month" value-format="yyyy-MM" placeholder="选择月" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope, tableField)"></el-date-picker> '+
|
' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && !(tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange)" :filterable="tableField.filterable" :multiple="tableField.ismultiple" @change="cellSelectChange($event, scope, tableField)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" placeholder="请选择" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k) in tableField.options" '+
|
':key="k" '+
|
':label="tableField.props ? item[tableField.props.label] : item.label" '+
|
':value="tableField.props ? item[tableField.props.value] : item.value"> '+
|
'</el-option> '+
|
' </el-select> '+
|
'<el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && (tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange)" :multiple="tableField.ismultiple" @visible-change="visibleChange($event, tableField)" @change="cellSelectChange($event, scope, tableField)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" placeholder="请选择" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in tableField.options" '+
|
':key="k1" '+
|
':label="tableField.props ? item[tableField.props.label] : item.label" '+
|
':value="tableField.props ? item[tableField.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
|
// 多选 selectmultiple
|
' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'selectmultiple\' && !(tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange)" :filterable="tableField.filterable" multiple @change="cellSelectChange($event, scope, tableField)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" placeholder="请选择" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k) in tableField.options" '+
|
':key="k" '+
|
':label="tableField.props ? item[tableField.props.label] : item.label" '+
|
':value="tableField.props ? item[tableField.props.value] : item.value"> '+
|
'</el-option> '+
|
' </el-select> '+
|
'<el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'selectmultiple\' && (tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange)" multiple @visible-change="visibleChange($event, tableField)" @change="cellSelectChange($event, scope, tableField)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled || scope.row.isWithinEdit==\'flase\' || isWithinEditTableData==\'flase\'" placeholder="请选择" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in tableField.options" '+
|
':key="k1" '+
|
':label="tableField.props ? item[tableField.props.label] : item.label" '+
|
':value="tableField.props ? item[tableField.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
' <el-button v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'button\'" @click.native.prevent="cellButtonClick(scope, \'\', tableField)" type="text">{{ scope.row[tableField.field] }}</el-button> '+
|
'<div v-else-if="tableField.type == \'buttons\'" class="h_table_valbuttons"> '+
|
'<template v-for="(button_,bk) in tableField.buttons">'+
|
'<el-button v-if="!button_.disabled" class="h_table_valbutton" @click.native.prevent="cellButtonClick(scope, button_.code, tableField)" type="text">{{ button_.name }}</el-button> '+
|
'</template>'+
|
'</div> '+
|
|
' <template v-else-if="tableField.type == \'pdf\'"> '+
|
'<div style="height: 20px;">'+
|
' <a v-if="scope.row[tableField.field]" :href="scope.row[tableField.field]" download> '+
|
' <img style="width: 20px; height: 20px" src="../../../img/pdf.png"></img> '+
|
' </a> '+
|
'</div> '+
|
' </template> '+
|
|
' <template v-else-if="tableField.type == \'rise\'"> '+
|
' <template v-if="scope.row[tableField.field] * 1 > 0"> '+
|
' <span class="h_up">{{scope.row[tableField.field]}}</span> '+
|
' <span v-if="!tableField.notsymbol" class="h_up">%</span> '+
|
' <i class="iconfont icon-up3 h_up"></i> '+
|
' </template> '+
|
' <template v-else-if="scope.row[tableField.field] * 1 < 0"> '+
|
' <span class="h_down">{{scope.row[tableField.field]}}</span> '+
|
' <span v-if="!tableField.notsymbol" class="h_down">%</span> '+
|
' <i class="iconfont icon-down3 h_down"></i> '+
|
' </template> '+
|
' <span v-else>0</span> '+
|
' </template> '+
|
|
' <template v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'popup\'"> '+
|
'<table>'+
|
'<tr>'+
|
'<td align="left" style="width: 100%; text-align:center; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" ><span>{{scope.row[tableField.field]}}</span></td> '+
|
'<td style= "padding: 0px">'+
|
'<el-button v-if="(isWithinEditTableData || scope.row.isWithinEdit)" type="primary" icon="el-icon-more" style="padding: 5px; margin: 0px 3px;" @click="showpopup(scope)"></el-button> '+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
' </template> '+
|
|
' <template v-else-if="tableField.type == \'icon\'"> '+
|
' <i v-if="scope.row[tableField.field] && scope.row[tableField.field] != \'0\' && tableFieldClick[tableField.field] && tableFieldClick[tableField.field].val.onclick" :class="[tableField.icon, \'h_cellclick\']" '+
|
' @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'valclick\')"></i> '+
|
' <i v-else-if="scope.row[tableField.field] && scope.row[tableField.field] != \'0\'" :class="[tableField.icon, \'h_cellclick\']" ></i> '+
|
|
' <i v-else-if="!scope.row[tableField.field] && tableField.nullicon" :class="[tableField.nullicon]" ></i> '+
|
//' <i v-else></i> '+
|
' </template> '+
|
|
'<template v-else-if="tableField.type == \'filetype\'"> '+
|
' <i v-if="scope.row[tableField.field] && scope.row[tableField.field].toLowerCase() == \'pdf\'" class="pdf"></i> '+
|
' <i v-else-if="scope.row[tableField.field] && scope.row[tableField.field].toLowerCase() == \'doc\'" class="doc"></i> '+
|
' <i v-else-if="scope.row[tableField.field] && (scope.row[tableField.field].toLowerCase() == \'xls\' || scope.row[tableField.field] == \'xlsx\')" class="xls"></i> '+
|
' <i v-else-if="scope.row[tableField.field] && scope.row[tableField.field].toLowerCase() == \'dir\'" class="dir"></i> '+
|
' <i v-else class="other"></i> '+
|
'</template> '+
|
|
//表单字段显示
|
'<template v-else-if="tableField.type == \'table_formgroup\'"> '+
|
'<h-form '+
|
':form-attr="tableFormAttr" '+
|
':table-fields="tableField.formchildren" '+
|
':form-data="scope.row" '+
|
':disabled="!(isWithinEditTableData || scope.row.isWithinEdit)" '+
|
':table-field-click="tableField.formfieldClick" '+
|
'> '+
|
'</h-form> '+
|
'</template> '+
|
|
//普通标签//胶囊标签
|
' <template v-else-if="tableField.type == \'tag\' || tableField.type == \'capsuletag\'"> '+
|
//有值
|
' <template v-if="scope.row[tableField.field] || scope.row[tableField.field] == 0 || scope.row[tableField.field] == false"> '+
|
//有点击
|
' <el-tag v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].val && tableFieldClick[tableField.field].val.onclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])" :class="[tableField.type == \'capsuletag\' ? \'h_capsuletag\' : \'\', \'h_cellclick\'] " '+
|
' size="small" :type="(tableField.tagtype && tableField.tagtype[scope.row[tableField.field]]) ? tableField.tagtype[scope.row[tableField.field]] : \'\'" '+
|
' @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'valclick\')">{{scope.row[tableField.field]}}</el-tag> '+
|
//无点击
|
' <el-tag v-else :class="[tableField.type == \'capsuletag\' ? \'h_capsuletag\' : \'\'] " size="small" :type="(tableField.tagtype && tableField.tagtype[scope.row[tableField.field]]) ? tableField.tagtype[scope.row[tableField.field]] : \'\'">{{scope.row[tableField.field]}}</el-tag>'+
|
' </template> '+
|
|
//无值、有默认值
|
' <template v-else-if="!scope.row[tableField.field] && tableFieldClick[tableField.field] && tableFieldClick[tableField.field].defaultval && tableFieldClick[tableField.field].defaultval.val"> '+
|
//有点击
|
' <el-tag v-if="tableFieldClick[tableField.field].defaultval.onclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])" class="h_cellclick" '+
|
' size="small" :type="(tableField.tagtype && tableField.tagtype[scope.row[tableField.field]]) ? tableField.tagtype[scope.row[tableField.field]] : \'\'" '+
|
' @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'defaultvalclick\')">{{tableFieldClick[tableField.field].defaultval.val}}</el-tag> '+
|
|
//无点击
|
' <el-tag v-else size="small" :type="(tableField.tagtype && tableField.tagtype[scope.row[tableField.field]]) ? tableField.tagtype[scope.row[tableField.field]] : \'\'">{{tableFieldClick[tableField.field].defaultval.val}}</el-tag>'+
|
' </template> '+
|
' </template> '+
|
|
//如果没有tableField.type并且有值
|
' <template v-else-if="scope.row[tableField.field] || scope.row[tableField.field] == 0 || scope.row[tableField.field] == false"> '+
|
//有点击
|
' <span v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].val && tableFieldClick[tableField.field].val.onclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])" class="h_cellclick" '+
|
' @mouseenter="cellValMouseenter(scope.row, tableField, scope.row[tableField.field])" '+
|
' @mouseleave="cellValMouseleave(scope.row, tableField, scope.row[tableField.field])" '+
|
' @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'valclick\')">{{scope.row[tableField.field]}}</span> '+
|
//无点击
|
' <span v-else class="">{{scope.row[tableField.field]}}</span> '+
|
//有后缀点击
|
' <template v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].suffixval && tableFieldClick[tableField.field].suffixval.onclick"> '+
|
' <br>' +
|
' <span class="h_cellsuffixclick" @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'suffixvalclick\')">{{tableFieldClick[tableField.field].suffixval.val}}</span> '+
|
' </template> '+
|
|
//图表-进度条
|
'<el-progress v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].chart && tableFieldClick[tableField.field].chart.type == \'progress\' && !isNaN(scope.row[tableFieldClick[tableField.field].chart.field])" '+
|
' :show-text="tableFieldClick[tableField.field].chart.isshowtext ? true : false" '+
|
' :text-inside="tableFieldClick[tableField.field].chart.istextinside ? true : false" '+
|
' :stroke-width="tableFieldClick[tableField.field].chart.progresswidth ? tableFieldClick[tableField.field].chart.progresswidth : 10" :percentage="(scope.row[tableFieldClick[tableField.field].chart.field] * 1) > 100 ? 100 : (scope.row[tableFieldClick[tableField.field].chart.field] * 1).toFixed(2) * 1 " '+
|
' :color="setPercentageColor(scope.row[tableFieldClick[tableField.field].chart.field] * 1)"></el-progress> '+
|
|
' </template> '+
|
|
//无值、有默认值
|
' <template v-else-if="!scope.row[tableField.field] && tableFieldClick[tableField.field] && tableFieldClick[tableField.field].defaultval && tableFieldClick[tableField.field].defaultval.val"> '+
|
//有点击
|
' <template v-if="tableFieldClick[tableField.field].defaultval.onclick && !(scope.row.z_h_notdefaultval && scope.row.z_h_notdefaultval[tableField.field])"> '+
|
' <span class="h_cellclick" @click.stop="cellValClick(scope.row, tableField, scope.row[tableField.field], \'defaultvalclick\')">{{tableFieldClick[tableField.field].defaultval.val}}</span> '+
|
' </template> '+
|
//无点击
|
' <span v-else>{{tableFieldClick[tableField.field].defaultval.val}}</span> '+
|
|
//图表-进度条
|
'<el-progress v-if="tableFieldClick[tableField.field] && tableFieldClick[tableField.field].chart && tableFieldClick[tableField.field].chart.type == \'progress\' && !isNaN(scope.row[tableFieldClick[tableField.field].chart.field]) " '+
|
' :show-text="tableFieldClick[tableField.field].chart.isshowtext ? true : false" '+
|
' :text-inside="tableFieldClick[tableField.field].chart.istextinside ? true : false" '+
|
' :stroke-width="tableFieldClick[tableField.field].chart.progresswidth ? tableFieldClick[tableField.field].chart.progresswidth : 10" :percentage="(scope.row[tableFieldClick[tableField.field].chart.field] * 1) > 100 ? 100 : (scope.row[tableFieldClick[tableField.field].chart.field] * 1).toFixed(2) * 1 " '+
|
' :color="setPercentageColor(scope.row[tableFieldClick[tableField.field].chart.field] * 1)"></el-progress> '+
|
|
' </template> '+
|
|
' </template> '+
|
'</el-table-column> ',
|
|
props: {
|
tableAttr: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
tableField: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
tableFormAttr: {
|
type: Object,
|
default: function(){
|
return {
|
columnnumber: 1,
|
labelwidth: "100px",
|
labelposition: "left",//"left",// right//top
|
size: "mini",
|
border: "0px solid #c6c6c600"
|
};
|
}
|
},
|
hideoverflowtooltip: {//超长时是否显示完整数据（默认不显示）
|
type: Boolean,
|
default: false
|
},
|
isWithinEditTableData: {//表内编辑
|
type: Boolean,
|
default: false
|
},
|
|
|
},
|
|
data() {
|
return {
|
|
}
|
},
|
|
computed: {
|
|
},
|
mounted() {
|
this.tableField;
|
},
|
watch: {
|
|
},
|
methods: {
|
setPercentageColor(val) {
|
if (val < 30) {
|
return '#909399';
|
} else if (val < 70) {
|
return '#e6a23c';
|
} else {
|
return '#67c23a';
|
}
|
},
|
|
onkeyup(scope, tableField) {
|
if (this.tableFieldClick[tableField.field] && this.tableFieldClick[tableField.field].input && this.tableFieldClick[tableField.field].input.onkeyup){
|
this.tableFieldClick[tableField.field].input.onkeyup(scope, tableField);
|
}
|
else if (tableField.inputkeys && scope.row && scope.row[tableField.field]) {
|
if (tableField.inputkeys == "number") {//仅数字（正整数）
|
// scope.row[tableField.field] = scope.row[tableField.field].replace(/[\u4E00-\u9FA5]/g,'');//中文替换
|
scope.row[tableField.field] = scope.row[tableField.field].replace(/\D/g,'')
|
}
|
else if (tableField.inputkeys == "decimal") {//仅数字+点（正小数）
|
scope.row[tableField.field] = scope.row[tableField.field].replace(/[^\d.]/g,'');
|
}
|
else if (tableField.inputkeys == "minus") {//仅数字+负号（正负整数）
|
//如果首位是“-”，则判断后续的值
|
if (scope.row[tableField.field].substring(0, 1) == "-") {
|
var val_ = scope.row[tableField.field].substring(1);
|
|
val_ = val_.replace(/\D/g,'')
|
scope.row[tableField.field] = "-" + val_
|
}
|
else {
|
scope.row[tableField.field] = scope.row[tableField.field].replace(/\D/g,'')
|
}
|
}
|
else if (tableField.inputkeys == "minusdecimal") {//仅数字+负号+点（正负小数）
|
if (scope.row[tableField.field].substring(0, 1) == "-") {
|
var val_ = scope.row[tableField.field].substring(1);
|
|
val_ = val_.replace(/[^\d.]/g,'')
|
scope.row[tableField.field] = "-" + val_
|
}
|
else {
|
scope.row[tableField.field] = scope.row[tableField.field].replace(/[^\d.]/g,'');
|
}
|
}
|
|
}
|
},
|
|
onkeydown(event, tableField) {
|
let key = event.key;
|
console.log("按键", key);
|
if (key == "Backspace" || key == "Delete") {//删除按键Backspace
|
return true
|
}
|
|
if (this.tableFieldClick[tableField.field] && this.tableFieldClick[tableField.field].input && this.tableFieldClick[tableField.field].input.onkeydown){
|
this.tableFieldClick[tableField.field].input.onkeydown(event, tableField);
|
}
|
else if (tableField.inputkeys) {
|
if (tableField.inputkeys == "number") {//仅数字（正整数）
|
var box = /^[0-9]*$/;//数值的正则表达式
|
if (!box.test(key)) {
|
console.log("返回", "false");
|
event.returnValue = false
|
return false
|
}
|
else {
|
console.log("返回", "true");
|
return true
|
}
|
}
|
else if (tableField.inputkeys == "decimal") {//仅数字+点（正小数）
|
var box = /^[0-9]*$/;//数值的正则表达式
|
if (key == ".") {//删除按键Backspace
|
return true
|
}
|
if (!box.test(key)) {
|
event.returnValue = false
|
return false
|
}
|
else return true
|
}
|
else if (tableField.inputkeys == "minus") {//仅数字+负号（正负整数）
|
var box = /^[0-9]*$/;//数值的正则表达式
|
if (key == "-") {//删除按键Backspace
|
return true
|
}
|
if (!box.test(key)) {
|
event.returnValue = false
|
return false
|
}
|
else return true
|
}
|
else if (tableField.inputkeys == "minusdecimal") {//仅数字+负号+点（正负小数）
|
var box = /^[0-9]*$/;//数值的正则表达式
|
if (key == "-" || key == ".") {//删除按键Backspace
|
return true
|
}
|
if (!box.test(key)) {
|
event.returnValue = false
|
return false
|
}
|
else return true
|
}
|
}
|
console.log("返回", "true222");
|
|
},
|
cellValClick(row, tableField, val, clicktype) {
|
var column_ = {
|
property: tableField.field
|
}
|
let obj = {
|
row: row,
|
column: column_,
|
val: val,
|
tableField: tableField
|
}
|
|
if (clicktype == "valclick") {
|
var notclick_vals = this.tableFieldClick[tableField.field].val.notclick_val;
|
var notclick_bindfields = this.tableFieldClick[tableField.field].val.notclick_bindfield;
|
var notclick_vals_ = [];
|
var bo_ = false;
|
if (notclick_vals) {
|
if (typeof(notclick_vals) == "string") {
|
notclick_vals_ = notclick_vals.split(";");
|
}
|
else if (Array.isArray(notclick_vals)) {
|
notclick_vals_ = notclick_vals;
|
}
|
|
notclick_vals_.map(v=>{
|
if (val == v) {
|
bo_ = true;
|
}
|
});
|
}
|
|
if (notclick_bindfields && notclick_bindfields.length) {
|
notclick_bindfields.map(b=>{
|
if (val == b.val) {
|
bo_ = true;
|
}
|
});
|
}
|
|
if (this.tableFieldClick[tableField.field] && (val || val == 0) && !bo_) {
|
this.tableFieldClick[tableField.field].val.onclick(obj);
|
}
|
}
|
else if (clicktype == "defaultvalclick") {
|
if (this.tableFieldClick[tableField.field] && !val) {
|
this.tableFieldClick[tableField.field].defaultval.onclick(obj);
|
}
|
}
|
else if (clicktype == "suffixvalclick") {
|
if (this.tableFieldClick[tableField.field] && val) {
|
this.tableFieldClick[tableField.field].suffixval.onclick(obj);
|
}
|
}
|
},
|
|
//悬浮入
|
cellValMouseenter(row, tableField, val) {
|
if (tableField.iscellclick) {
|
var column_ = {
|
property: tableField.field
|
}
|
let obj = {
|
row: row,
|
column: column_,
|
val: val,
|
tableField: tableField
|
}
|
this.$emit('cell-val-mouseenter', obj);
|
}
|
},
|
//悬浮出
|
cellValMouseleave(row, tableField, val) {
|
if (tableField.iscellclick) {
|
var column_ = {
|
property: tableField.field
|
}
|
let obj = {
|
row: row,
|
column: column_,
|
val: val,
|
tableField: tableField
|
}
|
this.$emit('cell-val-mouseleave', obj);
|
}
|
},
|
|
cellInputChange(scope, tableField) {//row, column, $index 和 store（table 内部的状态管理）
|
let field = scope.column.property;
|
// if (tableField.inputkeys == "number") {//仅数字（正整数）
|
// // value.replace(/[\u4e00-\u9fa5]/ig,'')
|
// scope.row[tableField.field] = scope.row[tableField.field].replace(/\D/g,'')
|
// }
|
// else if (tableField.inputkeys == "decimal") {//仅数字+点（正小数）
|
// scope.row[tableField.field] = scope.row[tableField.field].replace(/[^\d.]/g,'');
|
// }
|
|
if (this.tableFieldClick[tableField.field] && this.tableFieldClick[tableField.field].input && this.tableFieldClick[tableField.field].input.onchange) {
|
this.tableFieldClick[tableField.field].input.onchange(scope);
|
}
|
|
// this.$emit('cell-input-change', scope);
|
},
|
cellSelectChange(val, scope, tableField) {
|
let field = scope.column.property;
|
var optionsObj = {};
|
var value_ = "value";
|
if (tableField.props && tableField.props.value) {
|
value_ = tableField.props.value;
|
}
|
tableField.options.map(o=>{
|
optionsObj[o[value_]] = o;
|
})
|
|
var selectoption = optionsObj[val];
|
scope.fieldobj = tableField;
|
scope.selectoption = selectoption;
|
scope.data = scope.row;
|
|
if (this.tableFieldClick[tableField.field] && this.tableFieldClick[tableField.field].select && this.tableFieldClick[tableField.field].select.onchange) {
|
this.tableFieldClick[tableField.field].select.onchange(scope);
|
}
|
|
// this.$emit('cell-select-change', scope);
|
},
|
visibleChange(isopen, tableField) {//下拉展开事件
|
if (isopen) {
|
// tableFieldClick[tableField.field] && tableFieldClick[tableField.field].visible && tableFieldClick[tableField.field].visible.onchange
|
if (this.tableFieldClick[tableField.field] && this.tableFieldClick[tableField.field].visible && this.tableFieldClick[tableField.field].visible.onchange) {
|
this.tableFieldClick[tableField.field].visible.onchange(tableField, function(obj_) {
|
tableField.options = obj_.options;
|
// me.tableField = clone(tableField)
|
});
|
}
|
|
// this.$emit("visible-change", obj);
|
}
|
},
|
cellButtonClick(scope, button_code, tableField) {
|
// let field = scope.column.property;
|
// var obj = scope;
|
// if (button_) {
|
// obj.column.property = button_;
|
// }
|
|
if (this.tableFieldClick[tableField.field] && this.tableFieldClick[tableField.field].buttons && this.tableFieldClick[tableField.field].buttons.onclick) {
|
this.tableFieldClick[tableField.field].buttons.onclick(scope, button_code);
|
}
|
|
// this.$emit('cell-button-click', obj);
|
},
|
showpopup(scope) {
|
let field = scope.column.property;
|
|
if (this.tableFieldClick[field] && this.tableFieldClick[field].popup && this.tableFieldClick[field].popup.onclick) {
|
this.tableFieldClick[field].popup.onclick(scope);
|
}
|
|
//this.$emit('cell-show-popup', scope);
|
},
|
querySearch(queryString, cb, tableField) {
|
var obj = {
|
queryString: queryString,
|
cb: cb,
|
tableField: tableField
|
}
|
var inputoptions = tableField.inputoptions;
|
var results = queryString ? inputoptions.filter(this.createFilter(queryString)) : inputoptions;
|
cb(results);
|
this.$emit('cell-query-search', obj);
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
|
}
|
});
|
|
/* *************h-table-header-a**************** */
|
Vue.component("h-table-header-a", {//列表组件2
|
template:
|
' <el-table-column v-if="tableField.children" :label="tableField.name"> '+
|
' <template v-for="tableField_c in tableField.children"> '+
|
' <h-table-header-b '+
|
' :tableField="tableField_c" '+
|
' :table-field-click="tableFieldClick" '+
|
' :isWithinEditTableData="isWithinEditTableData" '+
|
' :hideoverflowtooltip="hideoverflowtooltip" '+
|
|
' v-on:cell-val-mouseenter="cellValMouseenter"'+
|
' v-on:cell-val-mouseleave="cellValMouseleave"'+
|
// ' v-on:cell-val-click="cellValClick"'+
|
' v-on:cell-input-change="cellInputChange" '+
|
' v-on:cell-select-change="cellSelectChange" '+
|
// ' v-on:visible-change="visibleChange" '+
|
' v-on:cell-button-click="cellButtonClick" '+
|
// ' v-on:showpopup="showpopup" '+
|
' v-on:cell-query-search="querySearch" '+
|
' > '+
|
' </h-table-header-b> '+
|
' </template> '+
|
' </el-table-column> '+
|
|
' <h-table-lie v-else '+
|
' :isWithinEditTableData="isWithinEditTableData" '+
|
' :hideoverflowtooltip="hideoverflowtooltip" '+
|
' :tableField="tableField" '+
|
' :table-field-click="tableFieldClick" '+
|
|
' v-on:cell-val-mouseenter="cellValMouseenter"'+
|
' v-on:cell-val-mouseleave="cellValMouseleave"'+
|
// ' v-on:cell-val-click="cellValClick"'+
|
' v-on:cell-input-change="cellInputChange" '+
|
' v-on:cell-select-change="cellSelectChange" '+
|
// ' v-on:visible-change="visibleChange" '+
|
' v-on:cell-button-click="cellButtonClick" '+
|
// ' v-on:showpopup="showpopup" '+
|
// ' v-on:cell-show-popup="showpopup" '+
|
|
' v-on:cell-query-search="querySearch" '+
|
' > '+
|
' </h-table-lie> ',
|
props: {
|
tableAttr: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
tableField: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
hideoverflowtooltip: {//超长时是否显示完整数据（默认不显示）
|
type: Boolean,
|
default: false
|
},
|
isWithinEditTableData: {//表内编辑
|
type: Boolean,
|
default: false
|
},
|
},
|
|
data() {
|
return {
|
|
}
|
},
|
|
computed: {
|
|
},
|
mounted() {
|
|
},
|
watch: {
|
|
},
|
methods: {
|
// cellValClick(obj) {
|
// this.$emit('cell-val-click', obj);
|
// },
|
cellValMouseenter(obj) {
|
this.$emit('cell-val-mouseenter', obj);
|
},
|
cellValMouseleave(obj) {
|
this.$emit('cell-val-mouseleave', obj);
|
},
|
cellInputChange(scope) {//row, column, $index 和 store（table 内部的状态管理）
|
let field = scope.column.property;
|
this.$emit('cell-input-change', scope);
|
},
|
cellSelectChange(scope) {
|
let field = scope.column.property;
|
this.$emit('cell-select-change', scope);
|
},
|
// visibleChange(obj) {//下拉展开事件
|
// this.$emit("visible-change", obj);
|
// },
|
cellButtonClick(scope) {
|
let field = scope.column.property;
|
this.$emit('cell-button-click', scope);
|
},
|
// showpopup(scope) {
|
// let field = scope.column.property;
|
// this.$emit('cell-show-popup', scope);
|
// },
|
querySearch(obj) {
|
this.$emit('cell-query-search', obj);
|
},
|
|
}
|
});
|
|
/* *************h-table-header-b**************** */
|
Vue.component("h-table-header-b", {//列表组件2
|
template:
|
' <el-table-column v-if="tableField.children" :label="tableField.name"> '+
|
' <template v-for="tableField_c in tableField.children"> '+
|
' <h-table-header-a '+
|
' :tableField="tableField_c" '+
|
' :table-field-click="tableFieldClick" '+
|
' :isWithinEditTableData="isWithinEditTableData" '+
|
' :hideoverflowtooltip="hideoverflowtooltip" '+
|
|
' v-on:cell-val-mouseenter="cellValMouseenter"'+
|
' v-on:cell-val-mouseleave="cellValMouseleave"'+
|
// ' v-on:cell-val-click="cellValClick"'+
|
|
' v-on:cell-input-change="cellInputChange" '+
|
' v-on:cell-select-change="cellSelectChange" '+
|
// ' v-on:visible-change="visibleChange" '+
|
' v-on:cell-button-click="cellButtonClick" '+
|
// ' v-on:showpopup="showpopup" '+
|
// ' v-on:cell-show-popup="showpopup" '+
|
|
' v-on:cell-query-search="querySearch" '+
|
' > '+
|
|
' </h-table-header-a> '+
|
' </template> '+
|
' </el-table-column> '+
|
|
' <h-table-lie v-else '+
|
' :isWithinEditTableData="isWithinEditTableData" '+
|
' :hideoverflowtooltip="tableAttr.hideoverflowtooltip" '+
|
' :tableField="tableField" '+
|
' :table-field-click="tableFieldClick" '+
|
|
' v-on:cell-val-mouseenter="cellValMouseenter"'+
|
' v-on:cell-val-mouseleave="cellValMouseleave"'+
|
// ' v-on:cell-val-click="cellValClick"'+
|
' v-on:cell-input-change="cellInputChange" '+
|
' v-on:cell-select-change="cellSelectChange" '+
|
// ' v-on:visible-change="visibleChange" '+
|
' v-on:cell-button-click="cellButtonClick" '+
|
// ' v-on:showpopup="showpopup" '+
|
// ' v-on:cell-show-popup="showpopup" '+
|
' v-on:cell-query-search="querySearch" '+
|
' > '+
|
' </h-table-lie> ',
|
props: {
|
tableAttr: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
tableField: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
hideoverflowtooltip: {//超长时是否显示完整数据（默认不显示）
|
type: Boolean,
|
default: false
|
},
|
isWithinEditTableData: {//表内编辑
|
type: Boolean,
|
default: false
|
},
|
},
|
|
data() {
|
return {
|
|
}
|
},
|
|
computed: {
|
|
},
|
mounted() {
|
|
},
|
watch: {
|
|
},
|
methods: {
|
// cellValClick(obj) {
|
// this.$emit('cell-val-click', obj);
|
// },
|
cellValMouseenter(obj) {
|
this.$emit('cell-val-mouseenter', obj);
|
},
|
cellValMouseleave(obj) {
|
this.$emit('cell-val-mouseleave', obj);
|
},
|
cellInputChange(scope) {//row, column, $index 和 store（table 内部的状态管理）
|
let field = scope.column.property;
|
this.$emit('cell-input-change', scope);
|
},
|
cellSelectChange(scope) {
|
let field = scope.column.property;
|
this.$emit('cell-select-change', scope);
|
},
|
// visibleChange(isopen, obj) {//下拉展开事件
|
// if (isopen) {
|
// this.$emit("visible-change", obj);
|
// }
|
// },
|
cellButtonClick(scope) {
|
let field = scope.column.property;
|
this.$emit('cell-button-click', scope);
|
},
|
// showpopup(scope) {
|
// let field = scope.column.property;
|
// this.$emit('cell-show-popup', scope);
|
// },
|
querySearch(obj) {
|
this.$emit('cell-query-search', obj);
|
},
|
|
}
|
});
|
|
/* *************h-table-new**************** */
|
Vue.component("h-table", {//列表组件2
|
template:
|
'<div class="h_table" @mouseenter="table_hover(true)" @mouseleave="table_hover(false)">'+
|
'<div v-if="istableloading" class="h_table_loading" >'+
|
'</div> '+
|
'<div class="h_h_table"> '+
|
'<div v-if="tableAttr.istitle && tableAttr.title" class="h_table_title" style="font-weight: bold;">{{tableAttr.title}}</div> '+
|
|
'<div v-if="tableAttr.toolbarobj" class="h_table_tool" align="right"> '+
|
//自定义按键
|
'<div v-if="tableAttr.toolbarobj.toolbuttons" class="h_table_toolbuttons"> '+
|
'<template v-for="tool_button in tableAttr.toolbarobj.toolbuttons"> '+
|
'<el-button '+
|
':type="tool_button.type" '+
|
':class="tool_button.classname" '+
|
'style="" '+
|
':icon="tool_button.icon" '+
|
'@click.native.prevent="toolbuttonclick(tool_button)" '+
|
'> {{tool_button.name}} '+
|
'</el-button> '+
|
'</template>'+
|
'</div> '+
|
//添加数据
|
'<div v-if="tableAttr.toolbarobj.isadd" class="h_table_add"> '+
|
'<el-tooltip class="item" effect="dark" content="添加" placement="top">'+
|
'<el-button type="default" style="padding: 0px; font-size: 16px;" icon="el-icon-plus" @click.native.prevent="toolbuttonclick(tableAdd)"></el-button> '+
|
'</el-tooltip>'+
|
'</div> '+
|
//删除数据
|
'<div v-if="tableAttr.toolbarobj.isdelete" class="h_table_delete" @click.native.prevent="toolbuttonclick(tableAdd)"> '+
|
'<el-tooltip class="item" effect="dark" content="删除" placement="top">'+
|
'<el-button type="default" style="padding: 0px; font-size: 16px;" icon="el-icon-delete"></el-button> '+
|
'</el-tooltip>'+
|
'</div> '+
|
//数据排序
|
'<div v-if="tableAttr.toolbarobj.isorder" class="h_table_order"> '+
|
'<el-tooltip class="item" effect="dark" content="排序" placement="top">'+
|
'<el-button type="default" style="padding: 0px; font-size: 16px;" icon="el-icon-sort" @click.native.prevent="toolbuttonclick(tableAdd)"></el-button> '+
|
'</el-tooltip>'+
|
'</div> '+
|
//表头筛选设置
|
'<div v-if="tableAttr.toolbarobj.isfilterfield" class="h_table_filterfield"> '+
|
'<el-tooltip class="item" effect="dark" content="筛选" placement="top">'+
|
'<el-button type="default" style="padding: 0px; font-size: 16px;" icon="el-icon-search" @click.native.prevent="toolbuttonclick(tableAdd)"></el-button> '+
|
'</el-tooltip>'+
|
'</div> '+
|
//更多功能
|
'<div v-if="tableAttr.toolbarobj.ismore" class="h_table_more"> '+
|
'<el-tooltip class="item" effect="dark" content="更多" placement="top">'+
|
'<h-iconselect :datalist="more_datalist" icon="el-icon-s-unfold" v-on:itemselect="moreclick"> '+
|
'</h-iconselect> '+
|
'</el-tooltip>'+
|
'</div> '+
|
'</div> '+
|
|
'<div v-if="tableAttr.isSelection || isSelection" class="h_table_select"> '+
|
'<div class="h_table_select_body" > '+
|
'<span class="h_table_select_cnt">{{tablelanguage_map[tablelanguage].selected}}{{selection_cnt}} {{tablelanguage_map[tablelanguage].row}}</span> '+
|
'<span class="h_table_select_empty" @click="hTableEmptySelect">{{tablelanguage_map[tablelanguage].clear}}</span> '+
|
|
//购物车
|
'<div v-if="isshowShoppingcart" class="h_table_select_list">'+
|
'<el-popover placement="left-start" width="400" trigger="click">'+
|
'<el-table :data="selectedList" :height="tableHeight">'+
|
'<el-table-column v-if="selectedList.length > 0" label="序号" type="index" align="center" width="50"> </el-table-column> '+
|
'<el-table-column label="操作" align="center" width="50" fixed="right"> '+
|
'<template slot-scope="scope"> '+
|
'<el-row> '+
|
'<el-button type="danger" size="mini" style="padding: 0px; font-size: 16px;" icon="el-icon-delete" @click.native.prevent="shoppingcartDataRow(\'delete\', scope)"></el-button> '+
|
'</el-row> '+
|
'</template> '+
|
'</el-table-column> '+
|
|
'<template v-for="tableField in doTableFields"> '+
|
' <template v-if="tableField.children"> '+
|
' <h-table-header-a '+
|
' :isWithinEditTableData="isWithinEditTableData" '+
|
' :hideoverflowtooltip="tableAttr.hideoverflowtooltip" '+
|
' :tableField="tableField" '+
|
' :table-field-click="tableFieldClick" '+
|
|
' v-on:cell-val-mouseenter="cellValMouseenter"'+
|
' v-on:cell-val-mouseleave="cellValMouseleave"'+
|
// ' v-on:cell-val-click="cellValClick"'+
|
' v-on:cell-input-change="cellInputChange" '+
|
' v-on:cell-select-change="cellSelectChange" '+
|
// ' v-on:visible-change="visibleChange" '+
|
' v-on:cell-button-click="cellButtonClick" '+
|
// ' v-on:showpopup="showpopup" '+
|
' v-on:cell-query-search="querySearch" '+
|
' > '+
|
' </h-table-header-a> '+
|
' </template> '+
|
|
' <h-table-lie v-else '+
|
' :isWithinEditTableData="isWithinEditTableData" '+
|
' :hideoverflowtooltip="tableAttr.hideoverflowtooltip" '+
|
' :tableField="tableField" '+
|
' :table-field-click="tableFieldClick" '+
|
|
' v-on:cell-val-mouseenter="cellValMouseenter"'+
|
' v-on:cell-val-mouseleave="cellValMouseleave"'+
|
// ' v-on:cell-val-click="cellValClick"'+
|
' v-on:cell-input-change="cellInputChange" '+
|
' v-on:cell-select-change="cellSelectChange" '+
|
// ' v-on:visible-change="visibleChange" '+
|
' v-on:cell-button-click="cellButtonClick" '+
|
// ' v-on:showpopup="showpopup" '+
|
// ' v-on:cell-show-popup="showpopup" '+
|
' v-on:cell-query-search="querySearch" '+
|
' > '+
|
' </h-table-lie> '+
|
|
' </template> '+
|
'</el-table>'+
|
|
'<span slot="reference">'+
|
'<i :class="[selectedList.length ? \'el-icon-shopping-cart-full\' : \'el-icon-shopping-cart-2\']" ></i>'+
|
'<el-badge v-show="selectedList.length" :value="selectedList.length" :max="show_maxcnt" class="h_shoppingcart_badge">'+
|
'</el-badge>'+
|
'</span>'+
|
'</el-popover>'+
|
'</div>'+
|
|
'</div>'+
|
'</div> '+
|
|
//表字段配置
|
'<div v-if="(tableAttr.isdraggableorder || isdraggableorder) && tableFields.length > 0" v-show="istablehover" class="h_table_editfield" align="center"> '+
|
//'<el-tooltip class="item" effect="dark" content="字段设置" placement="top">'+
|
'<h-draggable-order :datalist="tableFields" :selectdatalist="showTableFields" :identificationfield="identificationfield" '+
|
':labelfield="orderlabelfield" :isselectfield="orderisselect" icon="el-icon-setting" title="表格字段设置" v-on:save-order="saveOrder"></h-draggable-order> '+
|
//'</el-tooltip>'+
|
'</div> '+
|
'</div> '+
|
|
'<el-table :data="tableData" v-show="isShowTable" size="small" :border="tableAttr.isborder" :height="tableHeight" '+//
|
':ref= "href"' +
|
':stripe= "stripe"' +
|
':row-key="rowkey"' +
|
':expand-row-keys="expands"'+
|
':span-method="arraySpanMethod" '+
|
':empty-text="tablelanguage_map[tablelanguage].empty" '+
|
':lazy="lazy" '+
|
':load="load" '+
|
':tree-props="treeprops" '+
|
':default-expand-all="defaultExpandAll" '+
|
|
'@sort-change="sortChange" '+
|
'@check-change="checkClick" '+
|
'@row-click="rowClick" '+
|
'@row-dblclick="rowDblclick" '+
|
'@cell-click="cellClick" '+
|
'@selection-change="handleSelectionChange" '+
|
'v-loading="tableloading" '+
|
':row-class-name="tableRowClassName" '+
|
':cell-class-name="cellClass" '+
|
':show-summary="tableAttr.showSummary || showSummary" '+
|
':summary-method="getSummaries" '+
|
':highlight-current-row="tableAttr.isHighlightRow || isHighlightRow" '+
|
':header-cell-style="headerCellStyle"> '+
|
'<el-table-column v-if="rowkey && istree" width="80"></el-table-column> '+
|
'<el-table-column v-if="isEditTableData" label="操作" align="center" width="100" fixed="right"> '+
|
'<template slot-scope="scope"> '+
|
'<el-row> '+
|
//'<el-tooltip class="item" effect="dark" :content="editTableButton.edit.txt" placement="top"> '+
|
'<el-button v-if="editTableButton.edit.isshow && !scope.row.isWithinEdit" type="success" size="mini" style="padding: 0px; font-size: 16px;" icon="el-icon-edit" @click.native.prevent="editDataRow(\'edit\', scope)"></el-button> '+
|
//'</el-tooltip> '+
|
//'<el-tooltip class="item" effect="dark" :content="editTableButton.save.txt" placement="top"> '+
|
'<el-button v-if="editTableButton.save.isshow && scope.row.isWithinEdit" type="primary" size="mini" style="padding: 0px; font-size: 16px;" icon="el-icon-check" @click.native.prevent="editDataRow(\'edit\', scope)"></el-button> '+
|
//'</el-tooltip> '+
|
//'<el-tooltip class="item" effect="dark" :content="editTableButton.del.txt" placement="top"> '+
|
'<el-button v-if="editTableButton.del.isshow" type="danger" size="mini" style="padding: 0px; font-size: 16px;" icon="el-icon-delete" @click.native.prevent="editDataRow(\'delete\', scope)"></el-button> '+
|
//'</el-tooltip> '+
|
'</el-row> '+
|
'</template> '+
|
'</el-table-column> '+
|
// ':header-cell-style="{background:\'#FAFAFA\',color:\'black\',\'text-align\':\'center\'}"> '+
|
'<el-table-column v-if="tableAttr.isSelection || isSelection" type="selection" width="55"> </el-table-column> '+
|
'<el-table-column v-if="(tableAttr.isShowIndex || isShowIndex) && tableData.length > 0" label="序号" type="index" align="center" width="50"> </el-table-column> '+
|
'<template v-for="tableField in doTableFields"> '+
|
' <template v-if="tableField.children"> '+
|
' <h-table-header-a '+
|
' :isWithinEditTableData="isWithinEditTableData" '+
|
' :hideoverflowtooltip="tableAttr.hideoverflowtooltip" '+
|
' :tableField="tableField" '+
|
' :table-field-click="tableFieldClick" '+
|
|
' v-on:cell-val-mouseenter="cellValMouseenter"'+
|
' v-on:cell-val-mouseleave="cellValMouseleave"'+
|
// ' v-on:cell-val-click="cellValClick"'+
|
' v-on:cell-input-change="cellInputChange" '+
|
' v-on:cell-select-change="cellSelectChange" '+
|
// ' v-on:visible-change="visibleChange" '+
|
' v-on:cell-button-click="cellButtonClick" '+
|
// ' v-on:showpopup="showpopup" '+
|
' v-on:cell-query-search="querySearch" '+
|
' > '+
|
' </h-table-header-a> '+
|
' </template> '+
|
|
' <h-table-lie v-else '+
|
' :isWithinEditTableData="isWithinEditTableData" '+
|
' :hideoverflowtooltip="tableAttr.hideoverflowtooltip" '+
|
' :tableField="tableField" '+
|
' :table-field-click="tableFieldClick" '+
|
|
' v-on:cell-val-mouseenter="cellValMouseenter"'+
|
' v-on:cell-val-mouseleave="cellValMouseleave"'+
|
// ' v-on:cell-val-click="cellValClick"'+
|
' v-on:cell-input-change="cellInputChange" '+
|
' v-on:cell-select-change="cellSelectChange" '+
|
// ' v-on:visible-change="visibleChange" '+
|
' v-on:cell-button-click="cellButtonClick" '+
|
// ' v-on:showpopup="showpopup" '+
|
// ' v-on:cell-show-popup="showpopup" '+
|
' v-on:cell-query-search="querySearch" '+
|
' > '+
|
' </h-table-lie> '+
|
|
' </template> '+
|
'</el-table> '+
|
'<div ref="ref_notTableData" style="width: 0px; height: 0px; overflow: hidden; box-sizing: border-box;" align="center"> '+
|
'<div v-show="!isShowTable" style="height: 215px; width: 220px;"> '+
|
'<img v-if="url_img2" :src="url_img2" style="height: 100%;"> '+
|
'<div style="margin-top: 24px;"> '+
|
'<span style="font-size: 14px; font-weight: bold; color: #c5c5c5;">{{emptytext}}</span> '+
|
'</div> '+
|
'</div> '+
|
'</div> '+
|
|
'<div v-if="isPagination && tableFields.length" class="z_table_pagination"> '+
|
'<el-pagination background '+
|
' @size-change="handleSizeChange" '+
|
' @current-change="handleCurrentChange" '+
|
' :current-page="pagenum" '+
|
' :pager-count="5" '+
|
' :page-sizes="[10, 20, 30, 40]" '+
|
' :page-size="pagesize" '+
|
' :layout="layout" '+
|
' :total="total ? total : tableData.length" '+
|
'></el-pagination> '+
|
'</div> '+
|
'</div>',
|
props: {
|
tableAttr: {
|
type: Object,
|
default: function(){
|
return {
|
isborder: true,
|
|
isdraggableorder222: true,
|
toolbarobj222: {
|
toolbuttons: [
|
{name: "审批", classname: "", type: ""},
|
{name: "审批111", classname: "", type: ""},
|
],
|
isadd: true,
|
isdelete: true,
|
isorder: true,
|
isfilterfield: true,
|
ismore: true,
|
}
|
};
|
}
|
},
|
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
|
identificationfield: {//属性数据标识字段
|
type: String,
|
default: "field"
|
},
|
orderlabelfield: {//显示的字段
|
type: String,
|
default: "name"
|
},
|
orderisselect: {//显示和隐藏的字段及对应值
|
type: Object,
|
default: function(){
|
return {
|
field: "isshow",
|
show: "T",
|
hide: "F"
|
};
|
}
|
},
|
isdraggableorder: {//字段顺序及显示按键
|
type: Boolean,
|
default: false
|
},
|
istree: {//树形列表的箭头单元格
|
type: Boolean,
|
default: false
|
},
|
defaultExpandAll: {//是否默认全展开
|
type: Boolean,
|
default: false
|
},
|
isOldContrast: {//是否对比差异isOldContrast//tableDataOld
|
type: Boolean,
|
default: false
|
},
|
tableDataOld: {//对比差异的历史数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
treeprops: {//树形数据配置
|
type: Object,
|
default: function(){
|
return {children: 'children', hasChildren: 'haschildren'};
|
}
|
},
|
|
lazy: {//多选tableAttr
|
type: Boolean,
|
default: false
|
},
|
|
"layout": {//无数据的图片
|
type: String,
|
default: "total, prev, pager, next"//"total, sizes, prev, pager, next, jumper"
|
},
|
|
"tableFields": Array,//字段
|
"tableData": Array,//数据
|
"selectTableData": {//选中的数据
|
type: Array,
|
default: function(){
|
return [];
|
}
|
},
|
"tableloading": {//多选tableAttr
|
type: Boolean,
|
default: false
|
},
|
stripe: {//斑马条纹
|
type: Boolean,
|
default: true
|
},
|
"tablelanguage": {//表格语言
|
type: String,
|
default: "zh"
|
},
|
"url_img2": {//无数据的图片
|
type: String,
|
default: window.top.config.url_root + "img/zanwushuju.png"
|
},
|
"href": {//无数据的图片
|
type: String,
|
default: "table1"
|
},
|
"rowkey": {//树形数据时需要设置
|
type: String,
|
default: null
|
},
|
"showSummary": {//是否在表尾显示合计行tableAttr
|
type: Boolean,
|
default: false
|
},
|
isshowShoppingcart: {//是否在多选时显示购物车
|
type: Boolean,
|
default: false
|
},
|
selectedIdByFields: {//已选择的行数据（唯一标识字段，可以是多字段的组合）
|
type: Array,
|
default: function(){
|
return ["id"];
|
}
|
},
|
initSelectedList: {//已选择的行数据数组（初始已选数据）
|
type: Array,
|
default: function(){
|
return [
|
{id:"123"}
|
];
|
}
|
},
|
"isSelection": {//多选tableAttr
|
type: Boolean,
|
default: false
|
},
|
"isShowIndex": {//序号tableAttr
|
type: Boolean,
|
default: false
|
},
|
"isWithinEditTableData": {//表内编辑
|
type: Boolean,
|
default: false
|
},
|
|
"isEditTableData": {//编辑/删除按键
|
type: Boolean,
|
default: false
|
},
|
"isHighlightRow": {//选中高亮tableAttr
|
type: Boolean,
|
default: false
|
},
|
"isPagination": {//是否显示分页
|
type: Boolean,
|
default: true
|
},
|
"editTableButton": {//编辑界面行按键（编辑，删除）
|
type: Object,
|
default: function(){
|
return {
|
edit: {
|
isshow:true,
|
txt:"编辑"
|
},
|
del: {
|
isshow:true,
|
txt:"删除"
|
},
|
save: {
|
isshow:true,
|
txt:"保存"
|
},
|
}
|
}
|
},
|
"expands": Array,//展开的节点
|
|
emptytext: {//空数据显示内容
|
type: String,
|
default: "无数据"
|
},
|
tableHeight: {
|
type: Number,
|
default: null
|
},
|
pagesize: {
|
type: Number,
|
default: 10
|
},
|
pagenum: {
|
type: Number,
|
default: 1
|
},
|
total: {
|
type: Number,
|
default: 0
|
},
|
},
|
|
data() {
|
return {
|
zpagesize: this.pagesize,
|
zpagenum: this.pagenum,
|
istableloading: true,
|
istablehover: false,
|
summaries: [],
|
z_old_tableData: [],
|
tableFields_obj: {},
|
selection_cnt: 0,
|
show_maxcnt: 99,
|
selectedList: this.initSelectedList,
|
selectedMap: {},//已选择的行数据对象（初始已选数据根据唯一字段转换的对象）
|
doTableFieldObjs: {},
|
tablelanguage_map: {
|
zh: {
|
selected: "已选择",
|
row: "条",
|
clear: "清空选择",
|
operation: "操作",
|
no_: "序号",
|
empty: "无数据"
|
},
|
en: {
|
selected: "Selected",
|
row: "Row",
|
clear: "Clear",
|
operation: "operation",
|
no_: "No.",
|
empty: "empty"
|
}
|
},
|
doFieldsObj: {},
|
showTableFields: [],
|
}
|
},
|
mounted() {
|
this.tablelanguage_map.zh.empty = this.emptytext;
|
|
this.istableloading = true;
|
this.setNotTableData();
|
|
if (this.selectedList.length) {
|
//初始已选数据根据唯一字段转换的对象
|
this.selectedList.map(r=>{
|
var e_id_val = "";
|
this.selectedIdByFields.map(id_field=>{
|
e_id_val += r[id_field];
|
})
|
this.selectedMap[e_id_val] = r;
|
})
|
}
|
},
|
|
computed: {
|
isShowTable() {
|
var me = this;
|
me.tableFields_obj = {};
|
if (!this.tableFields) {
|
this.tableFields = []
|
}
|
this.tableFields.map(e=>{
|
me.tableFields_obj[e.field] = e;
|
//国际化设置，目前仅支持中/英
|
if (h_language && h_language=="en" && e.labelenglish) {
|
if (!e.labelchinese) {
|
e.labelchinese = clone(e.name);
|
}
|
e.name = clone(e.labelenglish);
|
}
|
else {
|
if (e.labelchinese) {
|
e.name = clone(e.labelchinese);
|
}
|
}
|
});
|
if (this.$refs.ref_notTableData) {
|
this.setNotTableData();
|
}
|
return (this.tableData && this.tableData.length > 0) ? true : true; //false;
|
},
|
doTableFields() {
|
var me = this;
|
this.istableloading = true;
|
me.showTableFields = [];
|
var me_tableFields = clone(this.tableFields);
|
me_tableFields.map(t=>{
|
if (t.inputtype && !t.type) {
|
t.type = t.inputtype.toLowerCase();
|
}
|
if (t.tagtype && typeof t.tagtype === 'string') {
|
var tagtype = t.tagtype.replace(/\^/g, '\"');
|
t.tagtype = JSON.parse(tagtype);
|
}
|
|
if (t.isshow == "T") {
|
me.showTableFields.push(t);
|
}
|
me.tableFieldAttr(t);
|
})
|
var oldTableFields_ = clone(me_tableFields);
|
|
if (me_tableFields.length > 0 ) {
|
oldTableFields_= listTOtableGroup(me_tableFields, "table_formgroup_name", "formchildren");
|
}
|
|
var tableFields_ = clone(oldTableFields_);
|
var rowindex = 0;
|
var index = 0;
|
var doFieldsObj_ = {};
|
|
if(this.isEditTableData) {
|
index = 0;
|
}
|
|
me.setFieldsObj(tableFields_,rowindex, index, doFieldsObj_, function(fieldsObj) {
|
me.doFieldsObj = clone(fieldsObj);
|
});
|
|
// return this.tableFields;
|
return tableFields_;
|
}
|
},
|
|
watch: {
|
isEditTableData() {
|
var me = this;
|
var ref = this.href;
|
this.$nextTick(function() {
|
me.$refs[ref].doLayout();
|
me.istableloading = false;
|
})
|
|
},
|
selectTableData(newVal, oldVal){
|
if (this.selectTableData && this.selectTableData.length) {
|
this.toggleSelection(this.selectTableData);
|
}
|
else {
|
this.toggleSelection();
|
}
|
},
|
},
|
methods: {
|
//购物车事件
|
shoppingcartDataRow(code, scope) {
|
if (code == "delete") {
|
this.$emit('shoppingcart-del-data', scope);
|
}
|
},
|
|
table_hover(ishover) {
|
if (ishover) {
|
this.istablehover = true;
|
}
|
else {
|
this.istablehover = false;
|
}
|
},
|
saveOrder(v) {
|
this.$emit('order-fields', v);
|
},
|
isArray(r){
|
return Object.prototype.toString.call(r)== '[object Array]';
|
},
|
setFieldsObj(list, rowindex, index, doFieldsObj_, callback) {
|
list.map(l=>{
|
if(l.isshow == "T"){
|
if (!doFieldsObj_[rowindex]) {
|
doFieldsObj_[rowindex] = {};
|
}
|
else {
|
index++;
|
}
|
doFieldsObj_[rowindex][index] = l;
|
if (l.children) {
|
var rowindex_ = rowindex + 1;
|
var index_ = 0;
|
if(doFieldsObj_[rowindex_]){
|
index_ = Object.keys(doFieldsObj_[rowindex_]).length - 1;
|
}
|
this.doSetFieldsObj(l.children, rowindex_, index_, doFieldsObj_);
|
}
|
}
|
})
|
callback(doFieldsObj_);
|
},
|
|
doSetFieldsObj(list, rowindex, index, doFieldsObj_) {
|
list.map(l=>{
|
if (!doFieldsObj_[rowindex]) {
|
doFieldsObj_[rowindex] = {};
|
}
|
else {
|
index++;
|
}
|
doFieldsObj_[rowindex][index] = l;
|
if (l.children) {
|
var rowindex_ = rowindex + 1;
|
var index_ = 0;
|
this.doSetFieldsObj(l.children, rowindex_, index_, doFieldsObj_);
|
}
|
})
|
},
|
|
|
tableFieldAttr(t) {
|
var me = this;
|
if (t.children) {
|
this.tableFieldAttr(t.children);
|
}
|
else {
|
if(this.isArray(t)) {
|
t.map(e=>{
|
me.tableFieldAttr(e);
|
})
|
}
|
else {
|
this.doTableFieldAttr(t);
|
}
|
}
|
|
},
|
|
doTableFieldAttr(e) {
|
//国际化设置，目前仅支持中/英
|
if (h_language && h_language=="en" && e.labelenglish) {
|
if (!e.labelchinese) {
|
e.labelchinese = clone(e.name);
|
}
|
e.name = clone(e.labelenglish);
|
}
|
else {
|
if (e.labelchinese) {
|
e.name = clone(e.labelchinese);
|
}
|
}
|
|
//设置下拉选项的（根据字典数据设置）
|
if (e.type == "select" || e.type == "selectmultiple" || e.type == "cascader") {
|
if (!e.props) {
|
var props_ = {value: "code", label: "value"};
|
e.props = clone(props_);
|
}
|
|
if (e.optionsgroup) {
|
//:options="fieldObj.options" :props="fieldObj.props"
|
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var list_ = window.top.Dictionary.getList(e.optionsgroup);
|
e.options = clone(list_);
|
}
|
else if(!e.options) {
|
e.options = []
|
}
|
}
|
|
if (e.type == "radio" || e.type == "checkboxobj") {
|
if (e.optionsgroup) {
|
//:options="fieldObj.options" :props="fieldObj.props" ;//{value: "code", label: "value"};
|
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var list_ = window.top.Dictionary.getList(e.optionsgroup);
|
e.options = clone(list_);
|
}
|
else if(!e.options) {
|
e.options = []
|
}
|
}
|
|
if (e.formatter) {
|
//formatpattern 格式设置（可以是小数位数。也可以是时间、日期的格式）
|
if (e.formatter == "formatter_json") {
|
var json_ = {};
|
if (e.formatterjson) {
|
//说明是对应关系
|
json_ = e.formatterjson;
|
}
|
else if (e.formatpattern){
|
//根据formatpattern获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var map_ = window.top.Dictionary.getMap(e.formatpattern);
|
json_ = e.formatterjson = clone(map_);
|
}
|
else if (!e.formatpattern && e.optionsgroup){
|
//根据optionsgroup下拉组名获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var map_ = window.top.Dictionary.getMap(e.optionsgroup);
|
json_ = e.formatterjson = clone(map_);
|
}
|
e.formatter_f = function(a,b,c,d) {return formatter_json(a,b,c,d, json_)}
|
}
|
else if (e.formatter == "formatter_money") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
e.formatter_f = function(a,b,c,d) {return formatter_money(a,b,c,d, digit)}
|
}
|
else if(e.formatter == "formatter_date") {
|
var format = e.formatpattern;//日期格式，默认"yyyy-MM-dd"
|
e.formatter_f = function(a,b,c,d) {return formatter_date(a,b,c,d, format)}
|
}
|
else if(e.formatter == "formatter_float") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
e.formatter_f = function(a,b,c,d) {return formatter_float(a,b,c,d, digit)}
|
}
|
else if(e.formatter == "formatter_percent") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
e.formatter_f = function(a,b,c,d) {return formatter_percent(a,b,c,d, digit)}
|
}
|
else if(e.formatter == "formatter_prefixorunit") {
|
var prefix = e.prefix;//前缀
|
var unit = e.suffix;//后缀或单位
|
e.formatter_f = function(a,b,c,d) {return formatter_prefixorunit(a,b,c,d, prefix, unit)}
|
}
|
else if(e.formatter == "formatter_split") {
|
var format = e.formatpattern;//拼接的字段格式 format = "#{name}-{name}%"
|
e.formatter_f = function(a,b,c,d) {return formatter_split(a,b,c,d, format)}
|
}
|
else if(e.formatter == "formatter_password") {
|
e.formatter_f = function(a,b,c,d) {return formatter_password(a,b,c,d)}
|
}
|
|
else if(e.formatter == "formatter_earlyWarning") {
|
e.formatter_f = function(a,b,c,d) {return formatter_earlyWarning(a,b,c,d)}
|
}
|
|
|
|
}
|
|
/* else if(e.field != "id") {
|
e.formatter_f = function(row, column, cellValue, index) {
|
if (typeof cellValue === 'number' && !isNaN(cellValue)) {//主要针对int 0
|
return cellValue.toString();
|
}
|
else return cellValue
|
}
|
} */
|
|
if (e.field) {
|
this.doTableFieldObjs[e.field] = e;
|
}
|
return e;
|
},
|
tableRowClassName({row, rowIndex}) {
|
if (row.h_classname) {
|
return row.h_classname;
|
}
|
return '';
|
},
|
|
cellClass(obj) {
|
// if(clone(this.tableData) == clone(this.z_old_tableData)) {
|
// return
|
// }
|
// this.z_old_tableData = clone(this.tableData);
|
let field = obj.column.property;
|
let row_ = [];
|
var row_field = this.doTableFieldObjs[field];
|
if (row_field) {
|
row_.push(row_field);
|
}
|
/* let row_ = this.doTableFields.filter(item => {
|
return item.field == field;
|
}); */
|
|
let class_ = "";
|
//业务上的样式，如：可点击，存在上下限等
|
|
if(this.tableFieldClick[field] && this.tableFieldClick[field].val && this.tableFieldClick[field].val.onclick) {
|
class_ = "h_cellclick";
|
}
|
|
if(row_.length > 0 && (row_[0].maxval || row_[0].minval)) {
|
|
if (row_[0].formatter == "formatter_earlyWarning") {
|
if (row_[0].earlyWarningField) {
|
|
var field1 = row_[0].earlyWarningField[0];
|
var field2 = row_[0].earlyWarningField[1];
|
|
var d_ = 0;
|
|
var date_field1 = null;
|
var date_field2 = null;
|
if (field1 == "znewdate") {
|
date_field1 = Date.parse(new Date());
|
}
|
else if(obj.row[field1]) {
|
date_field1 = Date.parse(new Date(obj.row[field1]));
|
}
|
|
if (field2 == "znewdate") {
|
date_field2 = Date.parse(new Date());
|
}
|
else if(obj.row[field2]) {
|
date_field2 = Date.parse(new Date(obj.row[field2]));
|
}
|
|
var d_ = parseInt((date_field1-date_field2)/ (1000 * 60 * 60 * 24));
|
obj.row[field] = d_;
|
}
|
|
//-----警告---minval----预警------maxval-----正常--
|
if (obj.row[field] * 1 > row_[0].maxval * 1) {
|
//正常
|
class_ += " h_notoverflowval";
|
}
|
else if(obj.row[field] * 1 < row_[0].minval * 1) {
|
//警告
|
class_ += " h_overflowval";
|
}
|
else {
|
//预警
|
class_ += " h_earlywarning";
|
}
|
|
}
|
|
else if((row_[0].maxval && obj.row[field] * 1 > row_[0].maxval * 1) || (row_[0].minval && obj.row[field] * 1 < row_[0].minval * 1)) {
|
class_ += " h_overflowval";
|
}
|
else class_ += " h_notoverflowval";
|
}
|
|
if(row_.length > 0 && row_[0].formatter == "formatter_TF2") {
|
if(obj.row[field] == "T" || obj.row[field] == "S1"
|
|| obj.row[field] == "S2" || obj.row[field] == "S3") {
|
class_ += " h_stamp";
|
}
|
}
|
|
if(row_.length > 0 && row_[0].isstamp) {
|
if(obj.row[field]) {
|
class_ += " h_stamp";
|
}
|
}
|
|
if(this.tableFieldClick[field] && this.tableFieldClick[field].val && this.tableFieldClick[field].val.onclick) {
|
var notclick_vals = this.tableFieldClick[field].val.notclick_val;
|
var notclick_bindfields = this.tableFieldClick[field].val.notclick_bindfield;
|
// if (row_.length > 0 && row_[0].iscellclick && !row_[0].isclick) {
|
if((!obj.row[field] || obj.row[field] == "") && obj.row[field] != 0 && (!this.tableFieldClick[field].defaultval || (this.tableFieldClick[field].defaultval && !this.tableFieldClick[field].defaultval.onclick))) {
|
class_ += " h_notclick";
|
}
|
|
if (notclick_vals) {
|
var notclick_vals_ = [];
|
if (typeof(notclick_vals) == "string") {
|
notclick_vals_ = notclick_vals.split(";");
|
}
|
else if (Array.isArray(notclick_vals)) {
|
notclick_vals_ = notclick_vals;
|
}
|
|
var bo_ = false;
|
var val_ = obj.row[field];
|
notclick_vals_.map(v=>{
|
if (val_ == v) {
|
bo_ = true;
|
}
|
});
|
|
if (bo_) {
|
class_ += " h_notclick";
|
}
|
}
|
|
//notclick_bindfield: [{field: "folw_id", val: null},{}]
|
if (notclick_bindfields && notclick_bindfields.length) {
|
var bo_ = false;
|
|
notclick_bindfields.map(b=>{
|
var val_ = obj.row[b.field];
|
|
if (val_ == b.val) {
|
bo_ = true;
|
}
|
});
|
|
if (bo_) {
|
class_ += " h_notclick";
|
}
|
}
|
}
|
|
//如果存在自定义的class
|
if(row_.length > 0 && row_[0].cssname) {
|
class_ += " " + row_[0].cssname;
|
}
|
|
|
//如果存在差异则背景高亮isOldContrast//tableDataOld
|
if(this.isOldContrast) {
|
var row_n = obj.row;
|
if (this.tableDataOld[row_n.id]) {//如果存在历史数据
|
var row_o = this.tableDataOld[row_n.id];
|
if (row_n[field] != row_o[field]) {
|
class_ += "z_contrast_tablecall";
|
}
|
}
|
}
|
|
return class_;
|
},
|
setNotTableData() {
|
var me = this;
|
if (!this.tableData || (this.tableData && this.tableData.length == 0) ) {
|
// this.$refs.ref_notTableData.style['height'] = this.tableHeight + "px";
|
//this.$refs.ref_notTableData.style['min-height'] = this.tableHeight + "px";
|
|
//this.$refs.ref_notTableData.style['padding-top'] = (this.tableHeight * 0.3)+"px";
|
this.$refs.ref_notTableData.style['width'] = "100%";
|
}
|
else {
|
//设置默认值
|
this.tableData.map(d=>{
|
me.tableFields.map(f=>{
|
me.notTableData(d, f);
|
})
|
});
|
|
this.$refs.ref_notTableData.style['height'] = "0px";
|
this.$refs.ref_notTableData.style['min-height'] = "0px";
|
this.$refs.ref_notTableData.style['padding-top'] = "0px";
|
this.$refs.ref_notTableData.style['width'] = "0px";
|
}
|
var ref = this.href;
|
this.$nextTick(function() {
|
//me.$refs[ref].doLayout();
|
setTimeout(() => {
|
if (me.$refs[ref]) {
|
me.$refs[ref].doLayout();
|
}
|
me.istableloading = false;
|
}, 100);
|
})
|
},
|
|
notTableData(d, f) {
|
var me = this;
|
if (f.children) {
|
this.notTableData(d, f.children);
|
}
|
else {
|
if(this.isArray(f)) {
|
f.map(e=>{
|
me.notTableData(d, e);
|
})
|
}
|
else {
|
this.doNotTableData(d, f);
|
}
|
}
|
|
},
|
|
doNotTableData(d, f) {
|
|
//isassignment: 是否默认值替换原值 ，如果有保存会被替换
|
if (!d[f.field] && f.defaultval && f.isassignment) {
|
|
//defaultval_filter： 默认值的条件第一层数组的元素是or, 里面的数组元素是and
|
//type: 是条件，如果没有则是等于val值时可替换， "isnull"为空时，"isnotnull" 不为空时
|
if (f.defaultval_filter) {//:[[{field: "", val: ""},{field: "", val: ""}], [{}]]
|
var defaultval_filter_ = f.defaultval_filter;
|
if (f.defaultval_filter instanceof String) {
|
defaultval_filter_ = JSON.parse(f.defaultval_filter);
|
}
|
|
defaultval_filter_.map(m=>{
|
var bo_m = true;
|
m.map(mf=>{
|
if (!mf.type) {
|
if (d[mf.field] != mf.val) {
|
bo_m = false
|
}
|
}
|
else if (mf.type == "isnull") {
|
if (d[mf.field]) {
|
bo_m = false
|
}
|
}
|
else if (mf.type == "isnotnull") {
|
if (!d[mf.field]) {
|
bo_m = false
|
}
|
}
|
|
});
|
if (bo_m) {
|
d[f.field] = f.defaultval
|
}
|
else {
|
//单条设置不显示默认值的字段
|
if (!d.z_h_notdefaultval) {
|
d.z_h_notdefaultval = {};
|
}
|
d.z_h_notdefaultval[f.field] = true;
|
}
|
})
|
}
|
else {
|
d[f.field] = f.defaultval
|
}
|
}
|
|
//return d;
|
},
|
|
setCurrentRow(row) {
|
this.$refs.table1.setCurrentRow(row);
|
},
|
|
sortChange({column, prop, order}) {
|
let obj = {
|
column: column,
|
prop: prop,
|
order: order,
|
field: this.tableFields_obj[prop]
|
}
|
this.$emit('orderby-change', obj);
|
},
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
|
let obj = {
|
row: row,
|
column: column,
|
rowIndex: rowIndex,
|
columnIndex: columnIndex
|
}
|
var result = [];
|
if (this.$listeners["span-method"]) {
|
this.$emit('span-method', obj, function(r) {
|
result = r;
|
});
|
}
|
else {
|
return [1,1];
|
}
|
|
return result;
|
//（返回数组）return [1,2] 1行2列。columnIndex 是行号
|
//（返回对象）return {rowspan: 2, colspan: 1} 2行1列。columnIndex 是行号
|
},
|
checkClick(data, checked, indeterminate) {
|
let obj = {
|
data: data,
|
checked: checked,
|
indeterminate: indeterminate
|
}
|
this.$emit('check-click', obj);
|
},
|
|
load(tree, treeNode, resolve) {
|
/* let obj = {
|
data: data,
|
checked: checked,
|
indeterminate: indeterminate
|
} */
|
this.$emit('load-click', tree, treeNode, resolve);
|
},
|
|
rowClick(row, column, event) {
|
var is_click = true;
|
if (event.currentTarget.classList) {
|
event.currentTarget.classList.forEach((class_, index)=>{
|
if (class_ == "z_notrowclick") {
|
is_click = false;
|
return
|
}
|
})
|
}
|
if (!is_click) {
|
return
|
}
|
let obj = {
|
row: row,
|
column: column,
|
event: event
|
}
|
this.$emit('row-click', obj);
|
},
|
|
headerCellStyle(obj) {
|
var aa = obj;
|
var rowIndex = obj.rowIndex;
|
var index = obj.columnIndex;
|
var style_ = {
|
/* 'background':'#FAFAFA',
|
'color':'black', */
|
'text-align':'center'
|
}
|
let field = obj.column.property;
|
|
let label = obj.column.label;
|
let row_ = {};
|
if (field == "phone") {
|
var aa = "";
|
}
|
if (field) {
|
/* let row_field = this.doTableFields.filter(item => {
|
return item.field == field;
|
}); */
|
row_ = this.doTableFieldObjs[field];
|
}
|
else {
|
row_ = this.doFieldsObj[rowIndex][index];
|
}
|
|
if (row_ && row_.headercolor) {
|
//if (row_.length && row_[0].headercolor) {
|
style_.background = row_.headercolor;
|
}
|
return style_;
|
},
|
rowDblclick(row, column, event) {
|
var is_click = true;
|
if (event.currentTarget.classList) {
|
event.currentTarget.classList.forEach((class_, index)=>{
|
if (class_ == "z_notrowclick") {
|
is_click = false;
|
return
|
}
|
})
|
}
|
if (!is_click) {
|
return
|
}
|
let obj = {
|
row: row,
|
column: column,
|
event: event
|
}
|
this.$emit('row-dblclick', obj);
|
},
|
cellClick(row, column, cell, event) {
|
// if (this.tableFields_obj[column.property]) {
|
// var tableField = this.tableFields_obj[column.property];
|
// if (tableField.iscellelclick) {
|
// let obj = {
|
// row: row,
|
// column: column,
|
// cell: cell,
|
// event: event
|
// }
|
// this.$emit('cell-el-click', obj);
|
// }
|
// }
|
// else {
|
// let obj = {
|
// row: row,
|
// column: column,
|
// cell: cell,
|
// event: event
|
// }
|
// this.$emit('cell-el-click', obj);
|
// }
|
},
|
// cellValClick(obj) {
|
// this.$emit('cell-click', obj);
|
// },
|
cellValMouseenter(obj) {
|
this.$emit('cell-val-mouseenter', obj);
|
},
|
cellValMouseleave(obj) {
|
this.$emit('cell-val-mouseleave', obj);
|
},
|
handleSelectionChange(selection) {
|
this.selection_cnt = selection.length;
|
this.$emit('selection-change', selection);
|
},
|
hTableEmptySelect() {
|
var ref = this.href;
|
this.$refs[ref].clearSelection();
|
},
|
|
editDataRow(code, scope){
|
if (code == "edit") {
|
this.$emit('edit-data', scope);
|
}
|
else if (code == "delete") {
|
this.$emit('del-data', scope);
|
}
|
},
|
|
cellInputChange(scope) {//row, column, $index 和 store（table 内部的状态管理）
|
let field = scope.column.property;
|
this.$emit('cell-input-change', scope);
|
},
|
cellSelectChange(scope) {
|
let field = scope.column.property;
|
this.$emit('cell-select-change', scope);
|
},
|
cellButtonClick(scope) {
|
let field = scope.column.property;
|
this.$emit('cell-button-click', scope);
|
},
|
querySearch(obj) {
|
this.$emit('cell-query-search', obj);
|
},
|
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
|
// showpopup(scope) {
|
// let field = scope.column.property;
|
// this.$emit('cell-show-popup', scope);
|
// },
|
|
tableFieldsList(t, fields_) {
|
var me = this;
|
if (t.children) {
|
this.tableFieldsList(t.children, fields_);
|
}
|
else {
|
if(this.isArray(t)) {
|
t.map(e=>{
|
me.tableFieldsList(e, fields_);
|
})
|
}
|
else {
|
fields_.push(t);
|
}
|
|
return fields_
|
}
|
|
},
|
|
getSummaries(param) {
|
var me = this;
|
const { columns, data } = param;
|
const sums = [];
|
var sumfields = {};
|
var issumfields = false;
|
|
var tableFields_ = [];
|
this.tableFields.map(e=>{
|
tableFields_ = me.tableFieldsList(e, tableFields_);
|
});
|
|
tableFields_.map(e=>{
|
if (e.istablesum) {
|
sumfields[e.field] = e;
|
issumfields = true;
|
}
|
});
|
|
|
|
if (issumfields) {
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '汇总';
|
return;
|
}
|
if (sumfields[column.property]) {
|
const values = data.map(item => Number(item[column.property]));
|
if (!values.every(value => isNaN(value))) {
|
sums[index] = values.reduce((prev, curr) => {
|
const value = Number(curr);
|
if (!isNaN(value)) {
|
return prev + curr;
|
}
|
else {
|
return prev;
|
}
|
}, 0);
|
|
var field = sumfields[column.property];
|
if (field.formatter && field.formatter=="formatter_money") {
|
sums[index] = formatter_money(null, null, sums[index]);
|
}
|
else {
|
sums[index] += '';
|
}
|
}
|
else {
|
sums[index] = '';
|
}
|
}
|
else sums[index] = '';
|
});
|
}
|
return sums;
|
},
|
|
// visibleChange(obj) {//下拉展开事件
|
// this.$emit("visible-change", obj);
|
// },
|
|
operate_(row, column, cellValue, index) {
|
if(cellValue === "create") {
|
return "新增数据";
|
}
|
else if(cellValue === "delete") {
|
return "删除数据";
|
}
|
else if(cellValue === "update") {
|
return "修改数据";
|
}
|
else return "";
|
},
|
|
status_(row, column, cellValue, index) {
|
if (cellValue == "working"){
|
return "正在审批";
|
}
|
else if(cellValue == "refuse") {
|
return "待修改";
|
}
|
else if(cellValue == "open") {
|
return "申请成功";
|
}
|
else if(cellValue == "close") {
|
return "撤销申请";
|
}
|
return "";
|
},
|
|
toggleSelection(array, iscancelselect) {
|
var ref = this.href;
|
if (iscancelselect && array) {
|
array.forEach(id_ => {
|
this.tableData.map(e=>{
|
if(id_ == e.id) {
|
this.$refs[ref].toggleRowSelection(e,false);
|
}
|
});
|
});
|
}
|
else if (array) {
|
array.forEach(id_ => {
|
this.tableData.map(e=>{
|
if(id_ == e.id) {
|
this.$refs[ref].toggleRowSelection(e,true);
|
}
|
});
|
});
|
} else {
|
this.$refs[ref].clearSelection();
|
}
|
},
|
toggleSelectionByRow(row) {
|
var ref = this.href;
|
this.$refs[ref].toggleRowSelection(row,true);
|
},
|
/* 每页条数变更事件 */
|
handleSizeChange(val) {
|
this.zpagesize = val;
|
let page = {
|
pagesize: this.zpagesize,
|
pagenum: this.zpagenum
|
}
|
this.$emit('get-data', page);
|
},
|
/* 页码变更事件*/
|
handleCurrentChange(val) {
|
this.zpagenum = val;
|
let page = {
|
pagesize: this.zpagesize,
|
pagenum: this.zpagenum
|
}
|
this.$emit('get-data', page);
|
},
|
}
|
});
|
|
|
/*********** h-form ************/
|
//单元格集合
|
Vue.component("h-cell-input", {//输入框
|
template:
|
'<span> '+
|
//只读
|
'<template v-if="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled :((typeof (disabled) != \'undefined\') ? disabled : false)"> '+
|
//文本域
|
'<el-input v-if="fieldObj.type==\'textarea\'" type="textarea" '+
|
' :rows="fieldObj.textarearows ? fieldObj.textarearows : 2" '+
|
' v-model="cellData" disabled '+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" @change="formchange($event, fieldObj)">'+
|
'</el-input> '+
|
|
'<el-input v-else-if="fieldObj.type==\'password\'" v-model="cellData" disabled :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" @change="formchange($event, fieldObj)" show-password></el-input> '+
|
|
'<el-input v-else v-model="cellData" disabled :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" @change="formchange($event, fieldObj)"></el-input> '+
|
'</template> '+
|
//可编辑
|
'<template v-else> '+
|
//文本域
|
'<el-input v-if="fieldObj.type==\'textarea\' && fieldObj.maxlength" type="textarea" '+
|
' :rows="fieldObj.textarearows ? fieldObj.textarearows : 2" '+
|
' v-model="cellData" '+
|
' :maxlength="fieldObj.maxlength" show-word-limit '+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" @change="formchange($event, fieldObj)">'+
|
'</el-input> '+
|
//文本域
|
'<el-input v-else-if="fieldObj.type==\'textarea\'" type="textarea" '+
|
' :rows="fieldObj.textarearows ? fieldObj.textarearows : 2" '+
|
' v-model="cellData" '+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" @change="formchange($event, fieldObj)">'+
|
'</el-input> '+
|
|
'<el-input v-else-if="fieldObj.type==\'password\'" v-model="cellData" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" @change="formchange($event, fieldObj)" show-password></el-input> '+
|
|
//this.tableFieldClick[fieldObj.field].input.onkeydown
|
'<el-input class="z_onkeydown" v-else-if="fieldObj.inputkeys || (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].input && tableFieldClick[fieldObj.field].input.onkeydown)" v-model="cellData" @keydown.native="(k)=>onkeydown(k, fieldObj)" @keyup.native="onkeyup($event, fieldObj)" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" @change="formchange($event, fieldObj)"></el-input> '+
|
'<el-input v-else v-model="cellData" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" @change="formchange($event, fieldObj)"></el-input> '+
|
'</template> '+
|
'</span> ',
|
props: {
|
formAttr: Object,
|
formDataData: {//表单全部数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
fromFieldObj: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
fieldObj: {//表单字段数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
formFieldData: null,//字段值
|
|
dataIndex: {//字段值的下标
|
type: Number,
|
default: -1
|
},
|
dataId: {//字段值的id
|
type: String,
|
default: ""
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
},
|
data() {
|
return {
|
cellData: ""
|
}
|
},
|
computed: {
|
|
},
|
watch: {
|
|
},
|
mounted() {
|
this.cellData = this.formFieldData;
|
},
|
methods: {
|
onkeyup(val, fieldObj) {
|
if (this.tableFieldClick[fieldObj.field] && this.tableFieldClick[fieldObj.field].input && this.tableFieldClick[fieldObj.field].input.onkeyup){
|
this.tableFieldClick[fieldObj.field].input.onkeyup(val, fieldObj);
|
}
|
else if (fieldObj.inputkeys && val) {
|
if (fieldObj.inputkeys == "number") {//仅数字（正整数）
|
val = val.replace(/\D/g,'')
|
}
|
else if (fieldObj.inputkeys == "decimal") {//仅数字+点（正小数）
|
val = val.replace(/[^\d.]/g,'');
|
}
|
else if (fieldObj.inputkeys == "minus") {//仅数字+负号（正负整数）
|
//如果首位是“-”，则判断后续的值
|
if (val.substring(0, 1) == "-") {
|
var val_ = val.substring(1);
|
|
val_ = val_.replace(/\D/g,'')
|
val = "-" + val_
|
}
|
else {
|
val = val.replace(/\D/g,'')
|
}
|
}
|
else if (fieldObj.inputkeys == "minusdecimal") {//仅数字+负号+点（正负小数）
|
if (val.substring(0, 1) == "-") {
|
var val_ = val.substring(1);
|
|
val_ = val_.replace(/[^\d.]/g,'')
|
val = "-" + val_
|
}
|
else {
|
val = val.replace(/[^\d.]/g,'');
|
}
|
}
|
}
|
},
|
|
onkeydown(event, fieldObj) {
|
let key = event.key;
|
if (key == "Backspace" || key == "Delete") {//删除按键Backspace
|
return true
|
}
|
|
if (this.tableFieldClick[fieldObj.field] && this.tableFieldClick[fieldObj.field].input && this.tableFieldClick[fieldObj.field].input.onkeydown){
|
this.tableFieldClick[fieldObj.field].input.onkeydown(event, fieldObj);
|
}
|
else if (fieldObj.inputkeys) {
|
if (fieldObj.inputkeys == "number") {//仅数字（正整数）
|
var box = /^[0-9]*$/;//数值的正则表达式
|
if (!box.test(key)) {
|
event.returnValue = false
|
return false
|
}
|
else return true
|
}
|
else if (fieldObj.inputkeys == "decimal") {//仅数字+点（正小数）
|
var box = /^[0-9]*$/;//数值的正则表达式
|
if (key == ".") {//删除按键Backspace
|
return true
|
}
|
if (!box.test(key)) {
|
event.returnValue = false
|
return false
|
}
|
else return true
|
}
|
else if (fieldObj.inputkeys == "minus") {//仅数字+负号（正负整数）
|
var box = /^[0-9]*$/;//数值的正则表达式
|
if (key == "-") {//删除按键Backspace
|
return true
|
}
|
if (!box.test(key)) {
|
event.returnValue = false
|
return false
|
}
|
else return true
|
}
|
else if (fieldObj.inputkeys == "minusdecimal") {//仅数字+负号+点（正负小数）
|
var box = /^[0-9]*$/;//数值的正则表达式
|
if (key == "-" || key == ".") {//删除按键Backspace
|
return true
|
}
|
if (!box.test(key)) {
|
event.returnValue = false
|
return false
|
}
|
else return true
|
}
|
}
|
},
|
|
formchange(val, obj) {
|
if (typeof(val) == "string") {
|
//去除两端的空格
|
val = val.replace(/(^\s*)|(\s*$)/g, "");
|
|
//去除中间的回车换行
|
//this.formData[obj.field] = val = val.replace(/[\r\n]/g,"");
|
}
|
|
if (this.dataIndex > -1) {
|
this.formDataData[obj.field][this.dataIndex] = val;
|
}
|
else {
|
this.formDataData[obj.field] = val;
|
}
|
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formDataData
|
}
|
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].input && this.tableFieldClick[obj.field].input.onchange) {
|
this.tableFieldClick[obj.field].input.onchange(obj_);
|
}
|
|
// this.$emit("form-change", obj_);
|
},
|
|
|
remoteMethod(query, fieldObj) {
|
var fromFieldsObj_ = clone(this.fromFieldObj);
|
|
var fromFieldObj_ = fromFieldsObj_[fieldObj.field];
|
var obj = {
|
query: query,
|
fieldObj: fieldObj
|
}
|
|
if (query !== '') {
|
this.$emit('remote-method', obj);
|
} else {
|
fieldObj.options = [];
|
}
|
},
|
|
}
|
});
|
Vue.component("h-cell-select", {//下拉选择器的单元格
|
template://clearable
|
'<span v-if="hCellRefresh"> '+
|
//只读
|
// '<span>{{typeof (hdisabled) != \'undefined\'}}{{hdisabled}}</span>'+
|
// '<span>{{typeof (disabled) != \'undefined\'}}{{disabled}}</span>'+
|
// '<template v-if="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (typeof (formAttr.disabled) != \'undefined\' ? formAttr.disabled : false)"> '+
|
'<template v-if="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled :((typeof (disabled) != \'undefined\') ? disabled : false)"> '+
|
'<el-select class="ss1" v-model="cellData" disabled :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
'</template> '+
|
//可编辑
|
'<template v-else > '+
|
'<el-select class="ss2" v-if="fieldObj.type==\'select\' && !(tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" '+
|
' :multiple="fieldObj.ismultiple" @change="selectChange($event, fieldObj)" v-model="cellData" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
|
//下拉单选
|
'<el-select class="ss3" v-else-if="fieldObj.type==\'select\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" '+
|
' :loading="fieldObj.options.length == 0" :multiple="fieldObj.ismultiple" :filterable="fieldObj.isfilterable" :allow-create="fieldObj.isallowcreate" @visible-change="visibleChange($event, fieldObj, formDataData)" @change="selectChange($event, fieldObj)" v-model="cellData" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
|
//下拉多选
|
'<el-select class="ssm2" v-else-if="fieldObj.type==\'selectmultiple\' && !(tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" '+
|
' multiple @change="selectChange($event, fieldObj)" v-model="cellData" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
|
'<el-select class="ssm3" v-else-if="fieldObj.type==\'selectmultiple\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" '+
|
' :loading="fieldObj.options.length == 0" multiple :filterable="fieldObj.isfilterable" :allow-create="fieldObj.isallowcreate" @visible-change="visibleChange($event, fieldObj, formDataData)" @change="selectChange($event, fieldObj)" v-model="cellData" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
|
//可新增的下拉选择器
|
'<el-select class="ss4" v-else-if="fieldObj.type==\'selectbyadd\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" popper-class="z_form_selectbyadd"'+
|
' :loading="fieldObj.options.length == 0" :multiple="fieldObj.ismultiple" :filterable="fieldObj.isfilterable" :allow-create="fieldObj.isallowcreate" @visible-change="visibleChange($event, fieldObj, formDataData)" @change="selectChange($event, fieldObj)" v-model="cellData" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'<div v-if="k1 == 0">'+
|
'<div class="z_option_add" align="center">'+
|
'<el-button type="primary" plain @click.stop="selectoptionoperate(\'add\', fieldObj)">新 增</el-button>'+
|
'</div>'+
|
'<div class="z_option_val">'+
|
'<span style="float: left">{{ item.label }}</span>'+
|
// '<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>'+
|
'</div>'+
|
'</div>'+
|
'<div v-else>'+
|
'<span style="float: left">{{ item.label }}</span>'+
|
// '<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>'+
|
'</div>'+
|
'</el-option> '+
|
'</el-select> '+
|
|
'<el-select class="ss5" v-else-if="fieldObj.type==\'selectbyfilterable2\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" '+
|
' :multiple="fieldObj.ismultiple" '+
|
' remote filterable :remote-method="(query)=>remoteMethod(query, fieldObj)" '+
|
' :allow-create="fieldObj.isallowcreate" '+
|
' @visible-change="visibleChange($event, fieldObj, formDataData)" '+
|
' @change="selectChange($event, fieldObj)" '+
|
' v-model="cellData" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
|
|
'<el-select class="ss6" v-else-if="fieldObj.type==\'selectbyfilterable\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" '+
|
' :multiple="fieldObj.ismultiple" remote filterable :remote-method="(query)=>remoteMethod(query, fieldObj)" :allow-create="fieldObj.isallowcreate" @visible-change="visibleChange($event, fieldObj, formDataData)" @change="selectChange($event, fieldObj)" v-model="cellData" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
|
'<div>'+
|
'<div>'+
|
'<span style="">{{ item.label }}</span>'+
|
'<span style="margin-left: 10px; color: #8492a6; font-size: 13px">{{ item.value }}</span>'+
|
'</div>'+
|
'</div>'+
|
'</el-option> '+
|
'</el-select> '+
|
|
'</template> '+
|
'</span> ',
|
props: {
|
formAttr: Object,
|
formDataData: {//表单全部数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
fromFieldObj: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
fieldObjt: {//表单字段数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
formFieldData: null,//字段值
|
|
dataIndex: {//字段值的下标
|
type: Number,
|
default: -1
|
},
|
dataId: {//字段值的id
|
type: String,
|
default: ""
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
},
|
data() {
|
return {
|
hCellRefresh: true,
|
cellData: "",
|
fieldObj: {},
|
hdisabled: false,
|
}
|
},
|
computed: {
|
|
},
|
watch: {
|
formFieldData() {
|
this.hCellRefresh = false;
|
this.$nextTick(function() {
|
this.hCellRefresh = true;
|
})
|
},
|
fieldObjt() {
|
this.fieldObj = clone(this.fieldObjt);
|
}
|
|
},
|
created() {
|
this.hdisabled = this.disabled;
|
this.fieldObj = clone(this.fieldObjt);
|
},
|
mounted() {
|
this.fromFieldObj;
|
this.fieldObj;
|
this.cellData = this.formFieldData;
|
},
|
methods: {
|
selectChange(val, obj) {
|
if (this.dataIndex > -1) {
|
this.formDataData[obj.field][this.dataIndex] = val;
|
}
|
else {
|
this.formDataData[obj.field] = val;
|
}
|
let me = this;
|
if (obj.selectchildren) {
|
obj.selectchildren.map(e=>{
|
let tableFieldsFormat_ = me.tableFieldsFormat;
|
tableFieldsFormat_.map(item => {
|
item.children.map(item2 => {
|
if (item2.field.toLowerCase().indexOf(e.toLowerCase()) > -1) {
|
if(item2.ismultiple || item2.type == "selectmultiple") {
|
me.formDataData[e] = [];
|
}
|
else {
|
me.formDataData[e] = "";
|
}
|
}
|
});
|
});
|
});
|
}
|
|
var optionsObj = {};
|
var value_ = "value";
|
|
if (obj.props && obj.props.value) {
|
value_ = obj.props.value;
|
}
|
obj.options.map(o=>{
|
optionsObj[o[value_]] = o;
|
})
|
|
var selectoption = optionsObj[val];
|
|
var obj_ = {
|
fieldobj: obj,
|
selectoption: selectoption,
|
data: this.formDataData
|
}
|
|
//let field = scope.column.property;
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].select && this.tableFieldClick[obj.field].select.onchange) {
|
this.tableFieldClick[obj.field].select.onchange(obj_);
|
}
|
|
this.$emit("select-change", obj_);
|
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
visibleChange(isshow, obj, row) {//下拉展开事件
|
if (isshow) {
|
var me = this;
|
var fieldObj = clone(this.fieldObj);
|
if (this.tableFieldClick[fieldObj.field] && this.tableFieldClick[fieldObj.field].visible && this.tableFieldClick[fieldObj.field].visible.onchange) {
|
this.tableFieldClick[fieldObj.field].visible.onchange(fieldObj, row, function(obj_) {
|
fieldObj.options = obj_.options;
|
me.fieldObj = clone(fieldObj)
|
});
|
}
|
|
// this.$emit("visible-change", fieldObj, row, function(obj_) {
|
// fieldObj.options = obj_.options;
|
// me.fieldObj = clone(fieldObj)
|
// /* me.hCellRefresh = false;
|
// me.$nextTick(function() {
|
// me.hCellRefresh = true;
|
// }) */
|
// });
|
}
|
},
|
remoteMethod(query, fieldObj) {
|
//var fromFieldsObj_ = clone(this.fromFieldObj);
|
|
//var fromFieldObj_ = fromFieldsObj_[fieldObj.field];
|
var obj = {
|
query: query,
|
fieldobj: fieldObj
|
}
|
|
if (query !== '') {
|
this.$emit('remote-method', obj);
|
} else {
|
fieldObj.options = [];
|
}
|
},
|
selectClear(obj) {
|
if (this.dataIndex > -1) {
|
this.formDataData[obj.field][this.dataIndex] = "";
|
}
|
else {
|
this.formDataData[obj.field] = "";
|
}
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formDataData
|
}
|
this.$emit("select-clear", obj_);
|
},
|
selectoptionoperate(type, obj) {
|
if (this.dataIndex > -1) {
|
this.formDataData[obj.field][this.dataIndex] = "";
|
}
|
else {
|
this.formDataData[obj.field] = "";
|
}
|
var obj_ = {
|
type: type,
|
fieldobj: obj,
|
data: this.formDataData
|
}
|
this.$emit("select-option-operate", obj_);
|
},
|
}
|
});
|
Vue.component("h-cell", {//表单单元格
|
template:
|
'<table '+
|
':class="\'\'" '+
|
'style="width: 100%; height: 100%; border-spacing: 0px"> '+
|
'<tr v-if="hCellRefresh">'+
|
//数据前面加的
|
//前面加复选框
|
'<td v-if="fieldObj.ischeckbox" style="padding: 0px;">'+
|
'<el-checkbox v-model="formData[fieldObj.ischeckbox]" '+
|
' :disabled="disabled"'+
|
' :checked="formData[fieldObj.ischeckbox]" '+
|
' @change="isformcheckboxchange($event, fieldObj)">{{fieldObj.checkbox_text}}</el-checkbox> '+
|
'</td>'+
|
|
'<td v-if="fieldObj.isstamp && formDataFace[fieldObj.isstamp]" style="padding: 0px;">'+
|
'<div class="h_stamp">'+
|
'<div class="cell" style="min-width: 40px !important; margin: 0 auto; text-align: center;">{{formDataFace[fieldObj.isstamp]}}</div>'+
|
'</div>'+
|
'</td>'+
|
|
/* 前缀 */
|
'<td v-if="fieldObj.prefix" :style="{width: fieldObj.prefixwidth ? fieldObj.prefixwidth : \'auto\',padding: \'0px\'}">'+
|
'<span>{{fieldObj.prefix}}</span>'+
|
'</td>'+
|
|
//正常数据
|
'<td v-if="fieldObj.type!=\'popup\' && fieldObj.type!=\'upload\' && fieldObj.type!=\'uploadfilelist\' && fieldObj.type!=\'uploadfile\'" :style="{width: (fieldObj.type == \'span\' && formData[fieldObj.field] && fieldObj.buttonarrayname) ? (fieldObj.valuewidth ? fieldObj.valuewidth : \'30%\') : \'auto\', padding: \'0px\'}">'+
|
//单选框含其它类型的输入框
|
'<template v-if="fieldObj.type == \'radio\' && fieldObj.fieldother"> '+
|
'<el-radio-group v-model="formData[fieldObj.field]" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" @change="formchange($event, fieldObj)"> '+
|
'<el-radio v-for="(r, k) in fieldObj.options" :key="k" :label="r.code">{{r.value}}</el-radio>'+
|
'<el-radio label="other" >{{fieldObj.fieldotherlabel ? fieldObj.fieldotherlabel : \'其它\'}}</el-radio> '+
|
'</el-radio-group>'+
|
'<el-input v-show="formData[fieldObj.field] == \'other\'" '+
|
' v-model="formData[fieldObj.fieldother]" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" '+
|
' @change="formchange($event, fieldObj)">'+
|
'</el-input> '+
|
'</template > '+
|
//单选框
|
'<template v-else-if="fieldObj.type == \'radio\'"> '+
|
'<el-radio-group v-model="formData[fieldObj.field]" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" @change="formchange($event, fieldObj)"> '+
|
'<el-radio v-for="(r, k) in fieldObj.options" :key="k" :label="r.code">{{r.value}}</el-radio>'+
|
'</el-radio-group>'+
|
//单选框时的其它录入
|
// '<el-input v-if="fieldObj.isother" '+
|
// ' v-model="formData[fieldObj.fieldother]" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
// ' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" '+
|
// ' @change="formchange($event, fieldObj)">'+
|
// '</el-input> '+
|
'</template > '+
|
//值的数据类型数组（strlist: 字符串数组，objlist: 对象数组）
|
'<template v-else-if="fieldObj.typeof == \'strlist\'"> '+
|
'<template > '+
|
//第一个数据值
|
'<template > '+
|
'<table style="width: 100%; border-spacing: 0px">'+
|
'<tr>'+
|
'<td style="padding-left: 0px; padding: 0px;">'+
|
//下拉选择器
|
'<h-cell-select v-if="fieldObj.type == \'select\' || fieldObj.type == \'selectmultiple\'" '+
|
':form-attr = "formAttr" '+
|
':form-data-data = "formData" '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
':field-objt = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
':table-field-click="tableFieldClick" '+
|
':form-field-data = "formData[fieldObj.field][0]" '+
|
':data-index = "listIndex0" '+
|
//下拉更改事件
|
'v-on:select-change="selectChange" '+
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
'></h-cell-select> '+
|
//Tag 标签
|
|
//span
|
|
//输入
|
'<h-cell-input v-if="fieldObj.type==\'input\' || fieldObj.type==\'password\' || !fieldObj.type" '+
|
':form-attr = "formAttr" '+
|
':form-data-data = "formData" '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
':field-obj = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
':table-field-click="tableFieldClick" '+
|
':form-field-data = "formData[fieldObj.field][0]" '+
|
':data-index = "listIndex0" '+
|
//更改事件
|
'v-on:form-change="cellFormChange" '+
|
'></h-cell-input> '+
|
'</td>'+
|
// '<td v-if="!fieldObj.notadd" style="width: 50px; padding: 0px;" >'+
|
// //添加
|
// '<el-button v-if="!disabled || !fieldObj.disabled" type="primary" '+
|
// ' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
// ' style="padding: 5px;" '+
|
// ' @click="listButtonClick(fieldObj)">添加'+
|
// '</el-button> '+
|
// '</td>'+
|
'</tr>'+
|
'<tr>'+
|
'<td v-if="!fieldObj.notadd" style="width: 50px; padding: 0px;" >'+
|
//添加
|
'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' style="padding: 7px 15px;" '+
|
' @click="listButtonClick(fieldObj)">继续添加'+
|
'</el-button> '+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</template> '+
|
|
//遍历其它值，如果数组中不止一个值时
|
'<template v-if="formData[fieldObj.field] && formData[fieldObj.field].length > 1" '+
|
' v-for="(val, valk) in formData[fieldObj.field]"> '+
|
'<template v-if="valk==0"></template> '+
|
'<template v-else> '+
|
'<table style="width: 100%; border-spacing: 0px; margin-top: 5px; border-top: 1px dashed #ccc;">'+
|
'<tr>'+
|
'<td style="padding-left: 0px; padding: 0px;">'+
|
//下拉选择器
|
'<h-cell-select v-if="fieldObj.type==\'select\' || fieldObj.type == \'selectmultiple\' || fieldObj.type==\'selectbyfilterable\'" '+
|
':form-attr = "formAttr" '+
|
':form-data-data = "formData" '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
':field-objt = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
':table-field-click="tableFieldClick" '+
|
':form-field-data = "val" '+
|
':data-index = "valk" '+
|
//下拉更改事件
|
'v-on:select-change="selectChange" '+
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
'></h-cell-select> '+
|
//Tag 标签
|
|
//span
|
|
//输入
|
'<h-cell-input v-if="fieldObj.type==\'input\' || fieldObj.type==\'password\' || !fieldObj.type" '+
|
':form-attr = "formAttr" '+
|
':form-data-data = "formData" '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
':field-obj = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
':table-field-click="tableFieldClick" '+
|
':form-field-data = "val" '+
|
':data-index = "valk" '+
|
//更改事件
|
'v-on:form-change="cellFormChange" '+
|
'></h-cell-input> '+
|
'</td>'+
|
// '<td style="width: 50px; padding: 0px;" >'+
|
// //删除
|
// '<el-button v-if="!disabled || !fieldObj.disabled" type="danger" '+
|
// ' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
// ' style="padding: 5px;" '+
|
// ' @click="listButtonClick(fieldObj, valk, \'del\')">删除'+
|
// '</el-button> '+
|
// '</td>'+
|
'</tr>'+
|
'<tr>'+
|
'<td style="width: 50px; padding: 0px;" >'+
|
//删除
|
'<el-button v-if="!disabled || !fieldObj.disabled" type="danger" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' style="padding: 7px 15px;" '+
|
' @click="listButtonClick(fieldObj, valk, \'del\')">删 除'+
|
'</el-button> '+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</template> '+
|
'</template> '+
|
'</template> '+
|
'</template> '+
|
|
//值的数据类型数组（strlist: 字符串数组，objlist: 对象数组）
|
'<template v-else-if="fieldObj.typeof == \'objlist\'"> '+
|
'<template > '+
|
//第一个数据值
|
'<template > '+
|
'<table style="width: 100%; border-spacing: 0px">'+
|
'<tr>'+
|
'<td style="padding-left: 0px; padding: 0px;">'+
|
//表单
|
'<h-newform-a '+
|
//外部参数
|
':form-attr="fieldObj.formattr ? fieldObj.formattr : formAttr" '+
|
':table-fields="fieldObj.children" '+
|
':table-field-click="tableFieldClick" '+
|
':form-data="formData[fieldObj.field][0]" '+
|
':ref="\'children_\' + fieldObj.field + \'_\' + listIndex0" '+
|
':href="\'children_\' + fieldObj.field + \'_\' + listIndex0" '+
|
':width="fieldObj.children.width ? fieldObj.width : width " '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
//':data-index = "listIndex0" '+
|
//内部参数
|
|
//外部事件
|
//表单更改事件
|
'v-on:form-change="cellFormChange" '+
|
//下拉更改事件
|
'v-on:select-change="selectChange" '+
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
/*
|
//popup弹窗
|
'v-on:show-popup="showPopup" '+
|
//按键事件
|
'v-on:button-click="buttonClick" '+
|
'v-on:button-array-click="buttonClick" '+
|
*/
|
//按键事件
|
'v-on:button-click="cellButtonClick" '+
|
'v-on:button-array-click="cellButtonClick" '+
|
|
//内部事件
|
|
'> '+
|
'</h-newform-a> '+
|
'</td>'+
|
// '<td v-if="!fieldObj.notadd" style="width: 50px; padding: 0px;" >'+
|
// //添加
|
// '<el-button v-if="!disabled && !fieldObj.disabled" type="primary" '+
|
// ' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
// ' style="padding: 5px;" '+
|
// ' @click="listButtonClick(fieldObj)">添加'+
|
// '</el-button> '+
|
// '</td>'+
|
'</tr>'+
|
'<tr>'+
|
'<td v-if="!fieldObj.notadd" style="width: 50px; padding: 0px;" >'+
|
// '<template v-if="formData[fieldObj.field] && formData[fieldObj.field].length > 1" '+
|
//删除
|
'<el-button v-if="!disabled && !fieldObj.disabled && (formData[fieldObj.field] && formData[fieldObj.field].length > 1)" type="danger" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' style="padding: 7px 15px;" '+
|
' @click="listButtonClick(fieldObj, 0, \'del\')">删 除'+
|
'</el-button> '+
|
// '</template> '+
|
|
//添加
|
'<el-button v-if="!disabled && !fieldObj.disabled && formData[fieldObj.field].length == 1" type="primary" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' style="padding: 7px 15px;" '+
|
' @click="listButtonClick(fieldObj)">继续添加'+
|
'</el-button> '+
|
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</template> '+
|
|
//遍历其它值，如果数组中不止一个值时
|
'<template v-if="formData[fieldObj.field] && formData[fieldObj.field].length > 1" '+
|
' v-for="(val, valk) in formData[fieldObj.field]"> '+
|
'<template v-if="valk==0"></template> '+
|
'<template v-else> '+
|
'<table style="width: 100%; border-spacing: 0px; margin-top: 5px; border-top: 1px dashed #ccc;">'+
|
'<tr>'+
|
'<td style="padding-left: 0px; padding: 0px;">'+
|
//表单
|
'<h-newform-a '+
|
//外部参数
|
':form-attr="fieldObj.formattr ? fieldObj.formattr : formAttr" '+
|
':table-fields="fieldObj.children" '+
|
':table-field-click="tableFieldClick" '+
|
':form-data="val" '+
|
':ref="\'children_\' + fieldObj.field + \'_\' + valk" '+
|
':href="\'children_\' + fieldObj.field + \'_\' + valk" '+
|
':width="fieldObj.children.width ? fieldObj.width : width " '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
//':data-index = "valk" '+
|
//内部参数
|
|
//外部事件
|
//表单更改事件
|
'v-on:form-change="cellFormChange" '+
|
//下拉更改事件
|
'v-on:select-change="selectChange" '+
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
/*
|
//popup弹窗
|
'v-on:show-popup="showPopup" '+
|
//按键事件
|
'v-on:button-click="buttonClick" '+
|
'v-on:button-array-click="buttonClick" '+
|
*/
|
|
//按键事件
|
'v-on:button-click="cellButtonClick" '+
|
'v-on:button-array-click="cellButtonClick" '+
|
//内部事件
|
|
'> '+
|
'</h-newform-a> '+
|
|
'</td>'+
|
// '<td style="width: 50px; padding: 0px;" >'+ //text-align: end;
|
// //删除
|
// '<el-button v-if="!disabled && !fieldObj.disabled" type="danger" '+
|
// ' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
// ' style="padding: 5px;" '+
|
// ' @click="listButtonClick(fieldObj, valk, \'del\')">删除'+
|
// '</el-button> '+
|
// '</td>'+
|
'</tr>'+
|
'<tr>'+
|
'<td style="width: 50px; padding: 0px;" >'+
|
//删除
|
'<el-button v-if="!disabled && !fieldObj.disabled" type="danger" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' style="padding: 7px 15px;" '+
|
' @click="listButtonClick(fieldObj, valk, \'del\')">删 除'+
|
'</el-button> '+
|
|
//添加
|
'<el-button v-if="!disabled && !fieldObj.disabled && valk == formData[fieldObj.field].length - 1" type="primary" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' style="padding: 7px 15px;" '+
|
' @click="listButtonClick(fieldObj)">继续添加'+
|
'</el-button> '+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</template> '+
|
'</template> '+
|
'</template> '+
|
'</template> '+
|
|
//数字
|
'<el-input-number v-else-if="fieldObj.type == \'number\'" v-model="formData[fieldObj.field]" '+
|
' :controls="fieldObj.controls ? true : false" controls-position="right" '+
|
//' :precision="fieldObj.precision ? fieldObj.precision : 0"'+
|
' :class="fieldObj.alignform ? \'input_align_\' + fieldObj.alignform : \'input_align_right\'"'+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" @change="formchange($event, fieldObj)" '+
|
//' @keyup.native=numberKeyupChange($event)'+
|
' :min="fieldObj.minval" :max="fieldObj.maxval">'+
|
'</el-input-number> '+
|
|
//复选框（单个）
|
'<el-checkbox v-else-if="fieldObj.type == \'ischeckbox\'" v-model="formData[fieldObj.field]" class="h_form_checkbox" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" @change="formchange($event, fieldObj)">{{fieldObj.label}}'+
|
'</el-checkbox> '+
|
//复选框（多项，值是数组，显示和值一样）
|
'<el-checkbox-group v-else-if="fieldObj.type == \'checkbox\'" v-model="formData[fieldObj.field]" class="h_form_checkboxgroup" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" @change="formchange($event, fieldObj)"> '+
|
'<el-checkbox v-for="(o, k) in fieldObj.options" :key="k" :label="o"><div :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}">{{o}}</div></el-checkbox> '+
|
'</el-checkbox-group> '+
|
//复选框（多项，值是数组，显示和值不一样）
|
'<template v-else-if="fieldObj.type == \'checkboxobj\'"> '+
|
'<el-checkbox v-if="fieldObj.options && fieldObj.options.length > 0" :indeterminate="formData[fieldObj.field] && formData[fieldObj.field].length > 0 && formData[fieldObj.field].length < fieldObj.options.length ? true : false " '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :value="formData[fieldObj.field] && formData[fieldObj.field].length == fieldObj.options.length ? true : false" @change="handleCheckAllChange($event, fieldObj, formData)">全选</el-checkbox>'+
|
|
'<el-checkbox-group v-model="formData[fieldObj.field]" class="h_form_checkboxgroup" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" @change="formchange($event, fieldObj)"> '+
|
'<el-checkbox v-for="(o, k) in fieldObj.options" :key="k" :label="o.code"><div :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}">{{o.value}}</div></el-checkbox> '+
|
'</el-checkbox-group> '+
|
'</template> '+
|
//复选框（多项，将选项按组分类）
|
'<template v-else-if="fieldObj.type == \'checkboxobjgroup\'"> '+
|
'<el-checkbox v-if="fieldObj.optionsdictionary && fieldObj.optionsdictionary.length > 0" :indeterminate="formData[fieldObj.field] && formData[fieldObj.field].length > 0 && formData[fieldObj.field].length < fieldObj.optionsdictionary.length ? true : false " '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :value="formData[fieldObj.field] && formData[fieldObj.field].length == fieldObj.optionsdictionary.length ? true : false" @change="handleCheckAllChange($event, fieldObj, formData)">全选</el-checkbox>'+
|
|
'<template v-for="(o, k) in fieldObj.options"> '+
|
'<div style="margin: 0;">{{o.name}}</div> '+
|
'<div style="margin: 0; padding-left: 16px">'+
|
'<el-checkbox-group v-model="formData[fieldObj.field]" :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" @change="formchange($event, fieldObj)"> '+
|
'<el-checkbox v-for="oc in o.children" :label="oc.code" :disabled="oc.disabled ? true : false" :key="oc.code">{{oc.value}}</el-checkbox> '+
|
'</el-checkbox-group> '+
|
'</div> '+
|
'</template> '+
|
|
'</template> '+
|
//复选框（多项，每项选中后会有后续数据需要填写）
|
'<template v-else-if="fieldObj.type == \'checkboxobjlist\'"> '+
|
'<el-row v-for="(o, k) in fieldObj.options" :key="k">'+
|
'<el-checkbox v-model="formData[o.checkbox_field]" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" @change="checkboxonchange(o, formData)">{{o.value}}'+
|
'</el-checkbox>'+
|
'<el-row v-if="o.describe_field && formData[o.checkbox_field] && o.describe_field.children" >'+//&& formData[o.checkbox_field]
|
//表单
|
'<h-newform-a '+
|
//外部参数
|
':form-attr="o.describe_field.formattr ? o.describe_field.formattr : formAttr" '+
|
':table-fields="o.describe_field.children" '+
|
':table-field-click="tableFieldClick" '+
|
//':form-data="formData[fieldObj.field][o.checkbox_field]" '+
|
':form-data="formData" '+
|
':ref="\'children_\' + o.checkbox_field + \'_0\'" '+
|
':href="\'children_\' + o.checkbox_field + \'_0\'" '+
|
':width="o.describe_field.width ? fieldObj.width : width " '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
|
//外部事件
|
//表单更改事件
|
'v-on:form-change="cellFormChange" '+
|
//下拉更改事件
|
'v-on:select-change="selectChange" '+
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
/*
|
//popup弹窗
|
'v-on:show-popup="showPopup" '+
|
//按键事件
|
'v-on:button-click="buttonClick" '+
|
'v-on:button-array-click="buttonClick" '+
|
*/
|
|
//按键事件
|
'v-on:button-click="cellButtonClick" '+
|
'v-on:button-array-click="cellButtonClick" '+
|
//内部事件
|
'> '+
|
'</h-newform-a> '+
|
'</el-row>'+
|
'</el-row>'+
|
'</template> '+
|
|
//只读的且存在格式函数
|
'<div v-else-if="(fieldObj.disabled || (!fieldObj.disabled && formAttr.disabled)) && fieldObj.formatter" '+
|
' class="z_form_span" style="width: 100%; height: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;">'+
|
'<span > {{formDataFace[fieldObj.field]}}</span>'+
|
'</div> '+
|
|
//input录入
|
'<h-cell-input v-else-if="fieldObj.type==\'input\' || fieldObj.type==\'password\' || fieldObj.type==\'textarea\'" '+
|
':form-attr = "formAttr" '+
|
':form-data-data = "formData" '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
':field-obj = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
':table-field-click="tableFieldClick" '+
|
':form-field-data = "formData[fieldObj.field]" '+
|
//更改事件
|
'v-on:form-change="cellFormChange" '+
|
'></h-cell-input> '+
|
|
/* 原input录入
|
'<el-input v-else-if="fieldObj.type==\'input\'" v-model="formData[fieldObj.field]" '+
|
' :disabled="fieldObj.disabled" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" '+
|
' @change="formchange($event, fieldObj)">'+
|
'</el-input> '+
|
*/
|
//文本域
|
/* '<el-input v-else-if="fieldObj.type==\'textarea\'" type="textarea" '+
|
' :rows="fieldObj.textarearows ? fieldObj.textarearows : 2" '+
|
' v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" '+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" @change="formchange($event, fieldObj)">'+
|
'</el-input> '+ */
|
//带输入建议的输入框
|
'<el-autocomplete '+
|
' v-else-if="fieldObj.type ==\'autocomplete\'" '+
|
' class="inline-input" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' v-model="formData[fieldObj.field]" '+
|
' :fetch-suggestions="((queryString,cb)=>{querySearch(queryString,cb, fieldObj)})" '+
|
' @select="formchange($event, fieldObj)" '+
|
'></el-autocomplete> '+
|
|
//日期
|
'<el-date-picker v-else-if="fieldObj.type==\'date\'" type="date" :placeholder="fieldObj.placeholder ? fieldObj.placeholder : \'请选择日期\'"'+
|
' :clearable="fieldObj.isnotclearable ? false : true" :picker-options="fieldObj.pickerOptions" '+
|
' v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" @change="formchange($event, fieldObj)">'+
|
'</el-date-picker> '+
|
//月份
|
'<el-date-picker v-else-if="fieldObj.type==\'month\'" type="month" placeholder="选择月" '+
|
' v-model="formData[fieldObj.field]" value-format="yyyy-MM" :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" @change="formchange($event, fieldObj)">'+
|
'</el-date-picker> '+
|
//年
|
'<el-date-picker v-else-if="fieldObj.type==\'year\'" type="year" placeholder="选择年" '+
|
' v-model="formData[fieldObj.field]" value-format="yyyy" :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" @change="formchange($event, fieldObj)">'+
|
'</el-date-picker> '+
|
//日期段
|
'<el-date-picker v-else-if="fieldObj.type==\'daterange\'" type="daterange" v-model="formData[fieldObj.field]" '+
|
' value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" @change="formchange($event, fieldObj)">'+
|
'</el-date-picker> '+
|
|
//数字范围
|
'<template v-else-if="fieldObj.type==\'numberrange\'">'+
|
'<el-col :span="11">'+
|
'<table style="width: 100%; border-spacing: 0px">'+
|
'<tr>'+
|
'<td style="padding-left: 0px; padding: 0px;">'+
|
'<el-input-number v-model="formData[fieldObj.field][0]" :controls="fieldObj.controls ? true : false" controls-position="right" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" :placeholder="fieldObj.placeholder ? fieldObj.placeholder : \'\'"></el-input-number> '+
|
'</td>'+
|
'<td v-if="!notvalunit" class="hformvalunit" :style="{padding: \'0px\', width: fieldObj.suffixwidth ? fieldObj.suffixwidth : \'30px\', \'text-align\': \'center\'}">'+
|
'<span class="h_valunit">{{fieldObj.suffix}}</span>'+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</el-col>'+
|
'<el-col class="line" :span="2" style="text-align: center;">-</el-col>'+
|
'<el-col :span="11">'+
|
'<table style="width: 100%; border-spacing: 0px">'+
|
'<tr>'+
|
'<td style="padding-left: 0px; padding: 0px;">'+
|
'<el-input-number v-model="formData[fieldObj.field][1]" :controls="fieldObj.controls ? true : false" controls-position="right" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" :placeholder="fieldObj.placeholder ? fieldObj.placeholder : \'\'"></el-input-number> '+
|
'</td>'+
|
'<td v-if="!notvalunit" class="hformvalunit" :style="{padding: \'0px\', width: fieldObj.suffixwidth ? fieldObj.suffixwidth : \'30px\', \'text-align\': \'center\'}">'+
|
'<span class="h_valunit">{{fieldObj.suffix}}</span>'+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</el-col>'+
|
'</template>'+
|
|
//字符串范围
|
'<template v-else-if="fieldObj.type==\'stringrange\'">'+
|
'<el-col :span="11">'+
|
'<table style="width: 100%; border-spacing: 0px">'+
|
'<tr>'+
|
'<td style="padding-left: 0px; padding: 0px;">'+
|
'<el-input v-model="formData[fieldObj.field][0]" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" :placeholder="fieldObj.placeholder ? fieldObj.placeholder : \'\'"></el-input> '+
|
'</td>'+
|
'<td v-if="!notvalunit" class="hformvalunit" :style="{padding: \'0px\', width: fieldObj.suffixwidth ? fieldObj.suffixwidth : \'30px\', \'text-align\': \'center\'}">'+
|
'<span class="h_valunit">{{fieldObj.suffix}}</span>'+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
|
'</el-col>'+
|
'<el-col class="line" :span="2" style="text-align: center;">-</el-col>'+
|
'<el-col :span="11">'+
|
'<table style="width: 100%; border-spacing: 0px">'+
|
'<tr>'+
|
'<td style="padding-left: 0px; padding: 0px;">'+
|
'<el-input v-model="formData[fieldObj.field][1]" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" :placeholder="fieldObj.placeholder ? fieldObj.placeholder : \'\'"></el-input> '+
|
'</td>'+
|
'<td v-if="!notvalunit" class="hformvalunit" :style="{padding: \'0px\', width: fieldObj.suffixwidth ? fieldObj.suffixwidth : \'30px\', \'text-align\': \'center\'}">'+
|
'<span class="h_valunit">{{fieldObj.suffix}}</span>'+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
|
'</el-col>'+
|
'</template>'+
|
|
//没有属性名称
|
'<div v-else-if="fieldObj.type==\'span\' && !fieldObj.name && fieldObj.field != \'id\'" '+
|
' class="z_form_span" style="width: 100%; height: 100%; padding: 0px; overflow: hidden; min-height: 28px; border-bottom: 1px solid #DCDFE6;">'+
|
'<span v-if="tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].val && tableFieldClick[fieldObj.field].val.onclick && !disabled" class="h_cellclick" '+
|
' @click="formCallClickBySpan(fieldObj)">{{fieldObj.formatter ? formDataFace[fieldObj.field] : formData[fieldObj.field]}}</span>'+
|
'<span v-else>{{fieldObj.formatter ? formDataFace[fieldObj.field] : formData[fieldObj.field]}}</span>'+
|
'</div> '+
|
|
'<div v-else-if="fieldObj.type==\'span\'" :style="{\'text-align\': fieldObj.alignform ? fieldObj.alignform : \'left\', width: \'100%\', height: \'100%\', \'min-height\': \'28px\'}" style="">'+
|
'<div style="width: 100%; height: 100%; min-height: 28px; padding: 0px; position: relative;">'+
|
'<div class="z_form_span" style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; position: absolute; top:0px; bottom:0px; padding: 0px; border-bottom: 1px solid #DCDFE6;">'+
|
'<span v-if="tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].val && tableFieldClick[fieldObj.field].val.onclick && !disabled" class="h_cellclick" '+
|
' @click="formCallClickBySpan(fieldObj)">{{fieldObj.formatter ? formDataFace[fieldObj.field] : formData[fieldObj.field]}}</span>'+
|
'<span class=\'aaa\' v-else>{{fieldObj.formatter ? formDataFace[fieldObj.field] : formData[fieldObj.field]}}</span>'+
|
'</div>'+
|
'</div>'+
|
'</div> '+
|
|
//下拉选择器
|
'<h-cell-select v-else-if="fieldObj.type==\'select\' || fieldObj.type == \'selectmultiple\' || fieldObj.type==\'selectbyadd\' || fieldObj.type== \'selectbyfilterable\' " '+
|
':form-attr = "formAttr" '+
|
':form-data-data = "formData" '+
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
':field-objt = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
':table-field-click="tableFieldClick" '+
|
':form-field-data = "formData[fieldObj.field]" '+
|
|
//下拉更改事件
|
'v-on:select-change="selectChange" '+
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
'></h-cell-select> '+
|
|
'<template v-else-if="fieldObj.type==\'cascader\' && fieldObj.visiblefield">'+
|
//'<div v-if="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" style="width: 100%; padding: 0px; overflow: hidden; border-radius: 4px; border: 1px solid #DCDFE6;">' +
|
'<div suffix-icon="el-icon-arrow-down" v-if="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" class="hcascaderspandisabled">' +
|
//'<span>{{formData[fieldObj.field]}}</span>'+
|
'<el-input v-model="formData[fieldObj.field]" disabled :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder ? fieldObj.placeholder : \'请选择\'"></el-input> '+
|
'</div>'+
|
|
'<div v-else style="width: 100%; padding: 0px;" class="hcascaderspan" '+
|
'@click="openformvisible($event, fieldObj)"'+
|
'>' +
|
'<el-input suffix-icon="el-icon-arrow-down" v-model="formData[fieldObj.field]" disabled :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder ? fieldObj.placeholder : \'请选择\'"></el-input> '+
|
//'<span>{{formData[fieldObj.field]}}</span>'+
|
'</div>'+
|
'<div style="width: 100%; height: 0px; float: left; overflow: hidden;" class="hcascaderspan">' +
|
'<el-cascader v-model="formData[fieldObj.visiblefield]" '+
|
' :ref="fieldObj.field + fieldObj.visiblefield" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :options="fieldObj.options" :props="fieldObj.props" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" '+
|
' :show-all-levels="fieldObj.notshowalllevels ? false : true" '+
|
//' @visible-change="visibleChange($event, fieldObj, formData)" '+
|
//' @change="formchange($event, fieldObj)">'+
|
' @change="formvisiblechange($event, fieldObj)"'+
|
'>'+
|
'</el-cascader>'+
|
'</div>'+
|
|
'</template>'+
|
'<el-cascader v-else-if="fieldObj.type==\'cascader\'" v-model="formData[fieldObj.field]" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :options="fieldObj.options" :props="fieldObj.props" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" '+
|
' :show-all-levels="fieldObj.notshowalllevels ? false : true" '+
|
//' @visible-change="visibleChange($event, fieldObj, formData)" '+
|
' @change="formchange($event, fieldObj)">'+
|
//' @blur="formchange($event, fieldObj)"'+
|
// '>'+
|
|
'</el-cascader>'+
|
|
'<el-cascader v-else-if="fieldObj.type==\'cascaderbyadd\'" v-model="formData[fieldObj.field]" :options="fieldObj.options" :props="fieldObj.props" style="width: 100%;" popper-class="z_form_cascaderbyadd" @change="formchange($event, fieldObj)">'+
|
'<template slot-scope="{ node, data }">'+
|
'<template v-if="data.label == \'cascaderbyadd\'" >'+
|
'<div class="z_option_add" align="center">'+
|
'<el-button type="primary" plain @click.stop="cellselectoptionoperate(\'add\', fieldObj)">新 增</el-button>'+
|
'</div>'+
|
'</template>'+
|
'<template v-else>'+
|
'<span>{{ data.label }}</span>'+
|
'<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>'+
|
'</template>'+
|
'</template>'+
|
'</el-cascader>'+
|
|
'<el-tag v-else-if="fieldObj.type==\'tag\'" type="success" effect="dark" '+
|
' size="small">{{formData[fieldObj.field] == \'T\' ? fieldObj.activevalue : fieldObj.inactivevalue}}'+
|
'</el-tag> '+
|
'<el-switch v-else-if="fieldObj.type==\'switchbyval\'" v-model="formData[fieldObj.field]" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :inactive-text="fieldObj.switch_false" :active-text="fieldObj.switch_true" '+
|
' :active-value="fieldObj.activevalue" inactive-value="fieldObj.inactivevalue">'+
|
'</el-switch> '+
|
'<el-switch class="switch123" v-else-if="fieldObj.type==\'switch\'" v-model="formData[fieldObj.field]" '+
|
' :disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" '+
|
' :inactive-text="fieldObj.switch_false" :active-text="fieldObj.switch_true"></el-switch> '+
|
'</td>'+
|
|
'<td v-if="fieldObj.type==\'popup\' && !(disabled || fieldObj.disabled)" @click="showpopup(fieldObj)" align="left" style="width: auto; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" :class="[\'el-form-item__content\', fieldObj.disabled ? \'is-disabled\': \'\']">'+
|
'<el-input v-if="fieldObj.formatter && formDataFace[fieldObj.field]" class="h_from_popup_input h_cellclick" disabled v-model="formDataFace[fieldObj.field]" @change="formchange($event, fieldObj)"></el-input> '+
|
'<el-input v-else class="h_from_popup_input h_cellclick" disabled v-model="formData[fieldObj.field]" @change="formchange($event, fieldObj)"></el-input> '+
|
/* '<div><span style="">{{formData[fieldObj.field]}}</span></div>'+ */
|
'</td> '+
|
|
'<td v-else-if="fieldObj.type==\'popup\'" align="left" style="width: auto; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" :class="[\'el-form-item__content\', fieldObj.disabled ? \'is-disabled\': \'\']">'+
|
'<el-input v-if="fieldObj.formatter && formDataFace[fieldObj.field]" class="h_from_popup_input" disabled v-model="formDataFace[fieldObj.field]" @change="formchange($event, fieldObj)"></el-input> '+
|
'<el-input v-else class="h_from_popup_input" disabled v-model="formData[fieldObj.field]" @change="formchange($event, fieldObj)"></el-input> '+
|
/* '<div><span style="">{{formData[fieldObj.field]}}</span></div>'+ */
|
'</td> '+
|
//'<td>'+
|
|
//'</td>'+
|
/* 后缀 */
|
'<td v-if="notvalunit && fieldObj.suffix && (fieldObj.type != \'checkboxobjlist\' && fieldObj.typeof != \'objlist\' && fieldObj.type != \'numberrange\' && fieldObj.type != \'stringrange\')" class="hformvalunit" :style="{padding: \'0px\', width: fieldObj.suffixwidth ? fieldObj.suffixwidth : \'30px\', \'text-align\': \'center\'}">'+
|
'<div :style="{padding: \'0px\', width: formAttr.suffixwidth ? formAttr.suffixwidth : \'30px\', \'text-align\': \'center\'}">'+
|
'<span class="h_valunit">{{fieldObj.suffix}}</span>'+
|
'</div>'+
|
'</td>'+
|
'<td v-if="!notvalunit && (fieldObj.type != \'checkboxobjlist\' && fieldObj.typeof != \'objlist\' && fieldObj.type != \'numberrange\' && fieldObj.type != \'stringrange\')" class="hformvalunit" :style="{padding: \'0px\', width: fieldObj.suffixwidth ? fieldObj.suffixwidth : \'30px\', \'text-align\': \'center\'}">'+
|
'<div :style="{padding: \'0px\', width: fieldObj.suffixwidth ? fieldObj.suffixwidth : \'30px\', \'text-align\': \'center\'}">'+
|
'<span class="h_valunit">{{fieldObj.suffix}}</span>'+
|
'</div>'+
|
'</td>'+
|
/* 说明(isvalexplain_br:是否在字段下面显示) */
|
'<td v-if="fieldObj.appendix && !fieldObj.isvalexplain_br" :style="{padding: \'0px\', width: fieldObj.appendixwidth ? fieldObj.appendixwidth : \'50%\'}">'+
|
'<span class="h_valexplain">{{fieldObj.appendix}}</span>'+
|
'</td>'+
|
|
/* '<td v-if="fieldObj.type == \'radio\' && fieldObj.isother" style="padding: 0px;">'+
|
'<el-input v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}" :placeholder="fieldObj.placeholder" @change="formchange($event, fieldObj)"></el-input> '+
|
'</td>'+ */
|
|
// '<td v-if="fieldObj.type==\'popup\'" style="padding: 0px;">'+
|
// '<el-button v-if="!(disabled || fieldObj.disabled)" type="primary" icon="el-icon-more" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" style="padding: 5px; margin: 0px 3px 2px; color: #042A72; background-color: white; border-color: rgb(4 89 114 / 49%)" @click="showpopup(fieldObj)"></el-button> '+
|
// '</td>'+
|
// (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].popup && tableFieldClick[fieldObj.field].popup.onEmpty)
|
// '<td v-if="fieldObj.type==\'popup\'" :style="{padding: \'0px\', width: fieldObj.ispopupempty ? \'64px\' : \'30px\'}">'+
|
'<td v-if="fieldObj.type==\'popup\' && !(disabled || fieldObj.disabled)" class="h_popup_group" :style="{padding: \'0px\', \'text-align\': \'right\', width: (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].popup && tableFieldClick[fieldObj.field].popup.onEmpty) ? \'64px\' : \'30px\'}">'+
|
// '<el-button-group v-if="!disabled || !fieldObj.disabled" style="">'+
|
// '<el-button v-if="fieldObj.ispopupempty" type="primary" icon="el-icon-close" :disabled="fieldObj.disabled" style="color: #c0c4cc; background-color: white; border-color: rgb(4 89 114 / 49%)" @click="emptypopup(fieldObj)"></el-button> '+
|
'<el-button v-if=" (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].popup && tableFieldClick[fieldObj.field].popup.onEmpty)" type="primary" icon="el-icon-close" :disabled="fieldObj.disabled" style="color: #c0c4cc; background-color: white; border-color: rgb(4 89 114 / 49%)" @click="emptypopup(fieldObj)"></el-button> '+
|
'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-more" :disabled="fieldObj.disabled" style=" color: #042A72; background-color: white; border-color: rgb(4 89 114 / 49%)" @click="showpopup(fieldObj)"></el-button> '+
|
// '</el-button-group>'+
|
'</td>'+
|
|
'<td v-if="fieldObj.type==\'upload\'" align="left" style="width: auto; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;">'+
|
'<span class="h_cellclick" @click="formCallClick(fieldObj)">{{formData[fieldObj.field]}}</span>'+
|
'</td> '+
|
|
'<td v-if="fieldObj.type==\'upload\'">'+
|
'<el-button v-if="!(disabled || fieldObj.disabled)" type="primary" icon="el-icon-share" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" style="padding: 5px;" @click="showpopup(fieldObj)"></el-button> '+
|
'</td>'+
|
'<td v-if="fieldObj.buttonname" style="padding: 0px;" align="right">'+
|
'<el-button v-if="!(disabled || fieldObj.disabled)" type="primary" :disabled="typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : (disabled ? true : false)" style="padding: 5px;" @click="buttonClick(fieldObj)">{{fieldObj.buttonname}}</el-button> '+
|
'</td>'+
|
|
//附件上传
|
'<template v-if="fieldObj.type==\'uploadfile\'">'+
|
'<td align="left" style="width: auto; height: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;">'+
|
'<span> </span>'+
|
'<span class="h_cellclick" @click="buttonArrayClick(fieldObj, {code:\'showfile\'})">{{formData[fieldObj.field]}}</span>'+
|
'</td> '+
|
|
'<td >'+
|
//只有存在数据时显示此按键（查看）
|
// '<template v-if="formData[fieldObj.field]">'+
|
// '<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, {code:\'showfile\'})" icon="el-icon-search" class="form_showfile">查看下载</el-button> '+
|
// '</template >'+
|
|
//存在数据且不只读时显示此按键（编辑删除事件）
|
'<template v-if="formData[fieldObj.field] && (!disabled && !fieldObj.disabled)">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, {code:\'delfile\'})" icon="el-icon-delete" class="form_delfile">删除附件</el-button> '+
|
'</template >'+
|
|
//没有数据且不只读时显示此按键（上传）
|
'<template v-else-if="!formData[fieldObj.field] && (!disabled && !fieldObj.disabled)">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, {code:\'upload\'})" icon="el-icon-upload" class="form_uploadfile">附件上传</el-button> '+
|
'</template >'+
|
'</td>'+
|
'</template>'+
|
//多附件上传
|
'<template v-if="fieldObj.type==\'uploadfilelist\'">'+
|
'<td align="left" style="width: auto; height: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;">'+
|
'<table v-if="fileListShowType==\'formshow\'">'+
|
//不只读时显示此按键（上传）
|
'<tr>'+
|
'<td v-if="!disabled && !fieldObj.disabled">'+
|
'<span> </span>'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, {code:\'uploadlist\'})" icon="el-icon-upload" class="form_uploadfile">附件上传</el-button> '+
|
'</td>'+
|
'<td></td>'+
|
'</tr>'+
|
|
'<template v-if="formData[fieldObj.field] && formData[fieldObj.field].length">'+
|
'<tr v-for="(file_obj, k) in formData[fieldObj.field]" :key="\'file_\' + file_obj.id + k">'+
|
'<td align="left" style="width: auto; height: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;">'+
|
'<span> </span>'+
|
'<span class="h_cellclick aa" @click="buttonArrayClick(fieldObj, {code:\'showfilebyfile\', fileobj: file_obj})">{{file_obj.file_name}}</span>'+
|
|
'<template v-if="file_obj.file_tag">'+
|
'<span> </span>'+
|
'<el-tag size="small" type="danger">{{file_obj.file_tag}}</el-tag>'+
|
'</template >'+
|
'</td> '+
|
|
'<td >'+
|
//存在数据且不只读时显示此按键（编辑删除事件）
|
'<template v-if="file_obj.id && (!disabled && !fieldObj.disabled)">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, {code:\'delfilebyfile\', fileobj: file_obj})" icon="el-icon-delete" class="form_delfile">删除附件</el-button> '+
|
'</template >'+
|
'</td>'+
|
'</tr>'+
|
'</template>'+
|
'<template v-else-if="disabled || fieldObj.disabled">'+
|
'<span> </span>'+
|
'</template >'+
|
'</table>'+
|
|
'<table v-else-if="fileListShowType==\'popover\'">'+
|
//不只读时显示此按键（上传）
|
'<tr>'+
|
'<td class="">'+
|
'<template v-if="formData[fieldObj.field] && formData[fieldObj.field].length">'+
|
'<el-popover placement="bottom" width="400" trigger="click" popper-class="h_form_filelist_popover">'+
|
'<table style="width: 100%; background-color: #fff;">'+
|
'<tr v-for="(file_obj, k) in formData[fieldObj.field]" :key="\'file_\' + file_obj.id + k">'+
|
'<td align="left" style="width: auto; height: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;">'+
|
'<span> </span>'+
|
'<span class="h_cellclick aa" @click="buttonArrayClick(fieldObj, {code:\'showfilebyfile\', fileobj: file_obj})">{{file_obj.file_name}}</span>'+
|
|
'<template v-if="file_obj.file_tag">'+
|
'<span> </span>'+
|
'<el-tag size="small" type="danger">{{file_obj.file_tag}}</el-tag>'+
|
'</template >'+
|
'</td> '+
|
|
'<td >'+
|
//存在数据且不只读时显示此按键（编辑删除事件）
|
'<template v-if="file_obj.id && (!disabled && !fieldObj.disabled)">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, {code:\'delfilebyfile\', fileobj: file_obj})" icon="el-icon-delete" class="form_delfile">删除附件</el-button> '+
|
'</template >'+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'<el-button slot="reference" type="primary" plain size="small">附件详情</el-button>'+
|
'</el-popover>'+
|
'</template >'+
|
'<template v-else-if="disabled || fieldObj.disabled">'+
|
'<span> </span>'+
|
'</template >'+
|
'</td>'+
|
|
'<td v-if="!disabled && !fieldObj.disabled">'+
|
'<span> </span>'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, {code:\'uploadlist\'})" icon="el-icon-upload" class="form_uploadfile">附件上传</el-button> '+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</td> '+
|
'</template>'+
|
|
'<template v-if="fieldObj.buttonarrayname && fieldObj.buttonarrayname.length>0">'+
|
'<td >'+
|
'<template v-for="(buttonobj, index) in fieldObj.buttonarrayname">'+
|
//存在数据且不只读时显示此按键
|
'<template v-if="buttonobj.type == \'isdatashow\' && formData[fieldObj.field] && (!disabled && !fieldObj.disabled)">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, buttonobj)" :icon="buttonobj.icon ? buttonobj.icon: \'\'" :class="buttonobj.classname ? buttonobj.classname : \'\'">{{buttonobj.buttonname}}</el-button> '+
|
'</template >'+
|
|
//只有存在数据时显示此按键
|
'<template v-else-if="buttonobj.type == \'isdata\' && formData[fieldObj.field]">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, buttonobj)" :icon="buttonobj.icon ? buttonobj.icon: \'\'" :class="buttonobj.classname ? buttonobj.classname : \'\'">{{buttonobj.buttonname}}</el-button> '+
|
'</template >'+
|
//没有数据且不只读时显示此按键
|
'<template v-else-if="buttonobj.type == \'isnotdatashow\' && !formData[fieldObj.field] && (!disabled && !fieldObj.disabled)">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, buttonobj)" :icon="buttonobj.icon ? buttonobj.icon: \'\'" :class="buttonobj.classname ? buttonobj.classname : \'\'">{{buttonobj.buttonname}}</el-button> '+
|
'</template >'+
|
//一直显示此按键
|
'<template v-else-if="buttonobj.type == \'show\'">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, buttonobj)" :icon="buttonobj.icon ? buttonobj.icon: \'\'" :class="buttonobj.classname ? buttonobj.classname : \'\'">{{buttonobj.buttonname}}</el-button> '+
|
'</template >'+
|
|
//默认不设置类型时，不只读时显示此按键，不管是否存在数据
|
'<template v-else-if="!buttonobj.type && (buttonobj.notdisabled || (!disabled && !fieldObj.disabled))">'+
|
'<el-button :disabled="formnotdisabled" type="primary" style="padding: 5px;" @click="buttonArrayClick(fieldObj, buttonobj)" :icon="buttonobj.icon ? buttonobj.icon: \'\'" :class="buttonobj.classname ? buttonobj.classname : \'\'">{{buttonobj.buttonname}}</el-button> '+
|
'</template >'+
|
|
//'<el-button v-else-if="buttonobj.notdisabled" type="primary" :disabled="!buttonobj.notdisabled" style="padding: 5px;" @click="buttonArrayClick(fieldObj, buttonobj)" :icon="buttonobj.icon ? buttonobj.icon: \'\'" :class="buttonobj.classname ? buttonobj.classname : \'\'">{{buttonobj.buttonname}}</el-button> '+
|
//'<el-button v-else-if="!disabled || !fieldObj.disabled" type="primary" :disabled="fieldObj.disabled" style="padding: 5px;" @click="buttonArrayClick(fieldObj, buttonobj)" :icon="buttonobj.icon ? buttonobj.icon: \'\'" :class="buttonobj.classname ? buttonobj.classname : \'\'">{{buttonobj.buttonname}}</el-button> '+
|
'</template>'+
|
'</td>'+
|
'</template>'+
|
|
'<div v-if="fieldObj.ischeckbox && fieldObj.ischeckbox == \'isuserebate\'" style="min-width: 100px !important; margin: 0 auto; text-align: left;">可用返利 :'+
|
'<el-input v-if="fieldObj.ischeckbox && fieldObj.ischeckbox == \'isuserebate\'" v-model="rebate_available" :disabled="true" style="width: 70px;"></el-input> </div>'+
|
// //字段对比
|
// '<td v-if="isOldContrast && contrastMode==\'fieldContrast\' && formDataOld[fieldObj.field] && (formDataOld[fieldObj.field] != formData[fieldObj.field])" style="width: 20px">'+
|
// '<el-popover popper-class="h_example" placement="bottom-end" width="400" trigger="hover" @show="showexample(fieldObj)">'+
|
// '<span>{{fieldObj.example}}</span><br>'+
|
|
// '<i slot="reference" class="el-icon-c-scale-to-original"></i>'+
|
// '</el-popover>'+
|
// '</td>'+
|
|
//对比
|
'<td v-if="isOldContrast && contrastMode==\'fieldContrast\' && formDataOld.id && JSON.stringify(formDataOld[fieldObj.field]) != JSON.stringify(formData[fieldObj.field]) && (formDataOld[fieldObj.field] || formData[fieldObj.field])" '+
|
' style="width: 20px;">'+
|
'<el-popover popper-class="h_example" placement="bottom-end" width="400" trigger="hover">'+
|
'<h-cell v-if="fieldObj.type != \'null\'" '+
|
':ref = "\'cell_old_\' + fieldObj.field" '+
|
':form-attr = "formAttr" '+
|
':form-data = "formDataOld" '+
|
':disabled = "true"'+
|
':field-obj = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
':table-fields = "tableFields" '+
|
':notvalunit = "notvalunit" '+
|
':table-field-click="tableFieldClick" '+
|
'></h-cell> '+
|
//el-icon-c-scale-to-original
|
'<i slot="reference" class="" style="font-size: 18px; color: red; ">vs</i>'+
|
'</el-popover>'+
|
'</td>'+
|
|
//样例
|
'<td v-if="fieldObj.example" style="width: 20px">'+
|
'<el-popover popper-class="h_example" placement="bottom-end" width="400" trigger="hover" @show="showexample(fieldObj)">'+
|
'<span>{{fieldObj.example}}</span><br>'+
|
'<el-image v-if="fieldObj.example_imgurl" style="width: 100%; max-height: 300px}" :src="fieldObj.example_imgurl" :preview-src-list="[fieldObj.example_imgurl]">'+
|
'</el-image>'+
|
'<i slot="reference" class="el-icon-question"></i>'+
|
'</el-popover>'+
|
'</td>'+
|
'</tr>'+
|
'</table>',
|
props: {
|
formAttr: Object,
|
fromFieldObj: {//表单字段是否编辑
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
fieldObj: {//表单字段数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
formFieldData: {//字段值，可能是字符串、布尔、字符串数组、对象数组
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
|
tableFields: {
|
type: Array,
|
default: function(){
|
return [];
|
}
|
},
|
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
notvalunit: {//是否不保留单位/后缀占位符
|
type: Boolean,
|
default: true
|
},
|
isOldContrast: {//是否对比差异
|
type: Boolean,
|
default: false
|
},
|
contrastMode: {//对比方式//fieldContrast字段对比，formContrast表单整体对比
|
type: String,
|
default: "fieldContrast"
|
},
|
fileListShowType: {//多附件的显示方式//formshow/popover
|
type: String,
|
default: "formshow"
|
},
|
formDataOld: {//对比差异的历史数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
|
isEndColspan: {//是否最后一行自动铺满
|
type: Boolean,
|
default: true
|
},
|
|
formData: {//表单数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
href: {//无数据的图片
|
type: String,
|
default: "form1"
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
width: {
|
type: String,
|
default: "100%"
|
},
|
// formDataFace: {//表单数据
|
// type: Object,
|
// default: function(){
|
// return {};
|
// }
|
// },
|
},
|
data() {
|
return {
|
hCellRefresh: true,
|
tableFieldsFormat: [],
|
//fromFieldObj: {},
|
|
formFieldsObj: {},
|
record: null,
|
formDataData: {},
|
formDataFace: {},
|
|
listIndex0: 0,
|
formnotdisabled: false,
|
selectother: "other",
|
notselectother: ""
|
}
|
},
|
|
|
computed: {
|
|
},
|
watch: {
|
formData(newName, oldName) {
|
let me = this;
|
if (newName[this.fieldObj.field] != oldName[this.fieldObj.field] ) {
|
this.hCellRefresh = false;
|
this.$nextTick(function() {
|
this.hCellRefresh = true;
|
})
|
}
|
|
if (this.formData) {
|
// this.record = new Record(me);
|
// this.record.setData(this.formData);
|
|
// this.formDataData = this.formData;
|
// this.rebate_available = this.formData.rebate_available;
|
// this.formDataFace = this.record.getFace();
|
|
//var formDataFace_ = this.record.getFace();
|
|
this.formDataFace = {}
|
for (var prop in this.formData) {
|
var fieldMeta = this.formFieldsObj[prop];
|
if (!fieldMeta) {
|
continue;
|
}
|
var value = this.formData[prop];
|
|
var e = fieldMeta;
|
if (e.formatter) {
|
//formatpattern 格式设置（可以是小数位数。也可以是时间、日期的格式）
|
if (e.formatter == "formatter_json") {
|
var json_ = {};
|
if (e.formatterjson) {
|
//说明是对应关系
|
json_ = e.formatterjson;
|
}
|
else if (e.formatpattern){
|
//根据formatpattern获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var map_ = window.top.Dictionary.getMap(e.formatpattern);
|
json_ = e.formatterjson = clone(map_);
|
}
|
else if (!e.formatpattern && e.optionsgroup){
|
//根据optionsgroup下拉组名获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var map_ = window.top.Dictionary.getMap(e.optionsgroup);
|
json_ = e.formatterjson = clone(map_);
|
}
|
this.formDataFace[prop] = formatter_json(null, null, value, null, json_);
|
}
|
else if (e.formatter == "formatter_money") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_money(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_date") {
|
var format = e.formatpattern;//日期格式，默认"yyyy-MM-dd"
|
this.formDataFace[prop] = formatter_date(null, null, value, null, format);
|
}
|
else if(e.formatter == "formatter_float") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_float(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_percent") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_percent(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_split") {
|
var format = e.formatpattern;//拼接的字段格式 format = "#{name}-{name}%"
|
this.formDataFace[prop] = formatter_split(this.formData, null, value, null, format);
|
}
|
else if(e.formatter == "formatter_prefixorunit") {
|
var prefix = e.prefix;//前缀
|
var unit = e.suffix;//后缀或单位
|
this.formDataFace[prop] = formatter_prefixorunit(null, null, value, null, prefix, unit);
|
}
|
|
}
|
|
|
}
|
}
|
},
|
fieldObj() {
|
if (this.fieldObj.iscellrefresh) {
|
this.hCellRefresh = false;
|
this.$nextTick(function() {
|
this.hCellRefresh = true;
|
})
|
}
|
|
if (this.fieldObj) {
|
/* this.hCellRefresh = false;
|
this.$nextTick(function() {
|
this.hCellRefresh = true;
|
}) */
|
}
|
},
|
},
|
|
mounted() {
|
let me = this;
|
this.formData;
|
this.disabled;
|
this.fieldObj;
|
this.tableFieldClick;
|
if (this.tableFields) {
|
let tableFields_ = clone(this.tableFields);
|
let formFieldsObj_ = {};
|
for (var r=0; r<tableFields_.length; r++) {
|
let field_ = tableFields_[r];
|
this.formFieldsObj[field_.field] = field_;
|
}
|
}
|
/* if (this.formData) {
|
this.record = new Record(me);
|
this.record.setData(this.formData);
|
|
this.formDataData = this.formData;//this.record.getData();
|
this.rebate_available = this.formData.rebate_available;
|
this.formDataFace = this.record.getFace();
|
//var formDataFace_ = this.record.getFace();
|
} */
|
this.formDataFace = {}
|
if (this.formData) {
|
for (var prop in this.formData) {
|
var fieldMeta = this.formFieldsObj[prop];
|
if (!fieldMeta) {
|
continue;
|
}
|
var value = this.formData[prop];
|
|
var e = fieldMeta;
|
if (e.formatter) {
|
//formatpattern 格式设置（可以是小数位数。也可以是时间、日期的格式）
|
if (e.formatter == "formatter_json") {
|
var json_ = {};
|
if (e.formatterjson) {
|
//说明是对应关系
|
json_ = e.formatterjson;
|
}
|
else if (e.formatpattern){
|
//根据formatpattern获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var map_ = window.top.Dictionary.getMap(e.formatpattern);
|
json_ = e.formatterjson = clone(map_);
|
}
|
else if (!e.formatpattern && e.optionsgroup){
|
//根据optionsgroup下拉组名获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var map_ = window.top.Dictionary.getMap(e.optionsgroup);
|
json_ = e.formatterjson = clone(map_);
|
}
|
this.formDataFace[prop] = formatter_json(null, null, value, null, json_);
|
}
|
else if (e.formatter == "formatter_money") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_money(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_date") {
|
var format = e.formatpattern;//日期格式，默认"yyyy-MM-dd"
|
this.formDataFace[prop] = formatter_date(null, null, value, null, format);
|
}
|
else if(e.formatter == "formatter_float") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_float(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_percent") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_percent(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_split") {
|
var format = e.formatpattern;//拼接的字段格式 format = "#{name}-{name}%"
|
this.formDataFace[prop] = formatter_split(this.formData, null, value, null, format);
|
}
|
else if(e.formatter == "formatter_prefixorunit") {
|
var prefix = e.prefix;//前缀
|
var unit = e.suffix;//后缀或单位
|
this.formDataFace[prop] = formatter_prefixorunit(null, null, value, null, prefix, unit);
|
}
|
|
}
|
|
|
}
|
}
|
},
|
methods: {
|
|
formDataRecord() {
|
let me = this;
|
/* if (this.formData) {
|
this.record = new Record(me);
|
this.record.setData(this.formData);
|
|
this.formDataData = this.formData;//this.record.getData();
|
this.rebate_available = this.formData.rebate_available;
|
this.formDataFace = this.record.getFace();
|
} */
|
this.hCellRefresh = false;
|
this.$nextTick(function() {
|
this.hCellRefresh = true;
|
})
|
},
|
|
checkboxonchange(el, data) {
|
var aa = "";
|
},
|
refresh() {
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
emptypopup(obj) {
|
let val = this.formDataData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val
|
};
|
// this.$emit('empty-popup', popupObj);
|
// (tableFieldClick[obj.field] && tableFieldClick[obj.field].popup && tableFieldClick[obj.field].popup.onEmpty)
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].popup && this.tableFieldClick[obj.field].popup.onEmpty) {
|
this.tableFieldClick[obj.field].popup.onEmpty(popupObj);
|
}
|
},
|
showpopup(obj) {//弹窗弹出事件
|
let val = this.formData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val
|
};
|
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].popup && this.tableFieldClick[obj.field].popup.onclick) {
|
this.tableFieldClick[obj.field].popup.onclick(popupObj);
|
}
|
// this.$emit('show-popup', popupObj);
|
},
|
formCallClick(obj) {//指定属性值点击事件
|
let val = this.formData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val
|
};
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].val && this.tableFieldClick[obj.field].val.onclick) {
|
this.tableFieldClick[obj.field].val.onclick(popupObj);
|
}
|
// this.$emit('formcall-click', popupObj);
|
},
|
formCallClickBySpan(obj) {//指定属性值点击事件
|
let val = this.formData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val
|
};
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].val && this.tableFieldClick[obj.field].val.onclick) {
|
this.tableFieldClick[obj.field].val.onclick(popupObj);
|
}
|
// this.$emit('formcallspan-click', popupObj);
|
},
|
|
listButtonClick(obj, index, type) {
|
let val = this.formData[obj.field][index];
|
let popupObj = {
|
obj: obj,
|
val: val,
|
index: index,
|
type: type,
|
formdata: this.formData
|
|
};
|
|
this.$emit('button-click', popupObj);
|
|
this.hCellRefresh = false;
|
this.$nextTick(function() {
|
this.hCellRefresh = true;
|
})
|
},
|
|
buttonClick(obj) {//按键点击事件
|
let val = this.formData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val,
|
formdata: this.formData
|
};
|
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].button && this.tableFieldClick[obj.field].button.onclick) {
|
this.tableFieldClick[obj.field].button.onclick(popupObj);
|
}
|
// this.$emit('button-click', popupObj);
|
},
|
buttonArrayClick(obj, buttonobj) {//按键组点击事件
|
let val = this.formData[obj.field];
|
let popupObj = {
|
obj: obj,
|
buttonobj: buttonobj,
|
val: val,
|
formdata: this.formData
|
};
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].buttonarray && this.tableFieldClick[obj.field].buttonarray.onclick) {
|
this.tableFieldClick[obj.field].buttonarray.onclick(popupObj);
|
}
|
//this.$emit('button-array-click', popupObj);
|
},
|
|
cellButtonClick(obj) {//按键点击事件
|
this.$emit('button-click', obj);
|
},
|
setFormValByField(field, val) {
|
this.formData[field] = val;
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
setFormOptionsByField(fieldobj, result) {
|
let tableFieldsFormat_ = this.tableFieldsFormat;
|
tableFieldsFormat_.map(item => {
|
item.children.map(item2 => {
|
if (item2.field.toLowerCase().indexOf(fieldobj.field.toLowerCase()) > -1) {
|
item2.options = result;
|
}
|
});
|
});
|
this.tableFieldsFormat = tableFieldsFormat_;
|
},
|
|
// visibleChange(isshow, obj, row) {//下拉展开事件
|
// if (isshow) {
|
// var me = this;
|
// var fieldObj = clone(this.fieldObj);
|
// this.$emit("visible-change", fieldObj, row, function(obj_) {
|
// fieldObj.options = obj_.options;
|
// me.fieldObj = clone(fieldObj)
|
// /* me.hCellRefresh = false;
|
// me.$nextTick(function() {
|
// me.hCellRefresh = true;
|
// }) */
|
// });
|
// }
|
// },
|
|
/* visibleChange(isshow, obj, row) {//下拉展开事件
|
if (isshow) {
|
this.$emit("visible-change", obj, row);
|
}
|
}, */
|
remoteMethod(query, fieldObj) {
|
var fromFieldsObj_ = clone(this.fromFieldObj);
|
|
var fromFieldObj_ = fromFieldsObj_[fieldObj.field];
|
var obj = {
|
query: query,
|
fieldObj: fieldObj
|
}
|
|
if (query !== '') {
|
this.$emit('remote-method', obj);
|
} else {
|
fieldObj.options = [];
|
}
|
},
|
|
numberKeyupChange(key) {
|
/* let b = new RegExp("^[1-9]\d*\.\d*|[1-9]\d*$").test(key.target.value);
|
var reg = /^\d+$|^\d*\./g;
|
b = reg.test(key.target.value);
|
|
if (!b) {
|
key.target.value = '';
|
} */
|
},
|
|
openformvisible(val, obj) {
|
var ref = obj.field + obj.visiblefield;
|
this.$refs[ref].$el.click();
|
//this.$refs[ref]._data.dropDownVisible = !this.$refs[ref]._data.dropDownVisible;
|
},
|
|
formvisiblechange(val, obj) {
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].val && this.tableFieldClick[obj.field].val.onchange) {
|
this.tableFieldClick[obj.field].val.onchange(obj_);
|
}
|
// this.$emit("form-change", obj_);
|
},
|
|
formchange(val, obj) {
|
if (typeof(val) == "string") {
|
//去除两端的空格
|
this.formData[obj.field] = val = val.replace(/(^\s*)|(\s*$)/g, "");
|
|
//去除中间的回车换行
|
//this.formData[obj.field] = val = val.replace(/[\r\n]/g,"");
|
}
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].val && this.tableFieldClick[obj.field].val.onchange) {
|
this.tableFieldClick[obj.field].val.onchange(obj_);
|
}
|
|
this.$emit("form-change", obj_);
|
},
|
|
handleCheckAllChange(val, fieldObj, formData) {
|
var code_ = [];
|
if (fieldObj.type == 'checkboxobj') {
|
if (val) {
|
fieldObj.options.map(o=>{
|
code_.push(o.code)
|
});
|
}
|
}
|
else if (fieldObj.type == 'checkboxobjgroup') {
|
if (val) {
|
fieldObj.options.map(o=>{
|
o.children.map(oc=>{
|
code_.push(oc.code)
|
})
|
});
|
}
|
}
|
|
formData[fieldObj.field] = code_
|
},
|
|
isformcheckboxchange(val, obj) {
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
this.$emit("form-checkbox-change", obj_);
|
},
|
ischeckboxchange(val, obj) {
|
obj.disabled = !val;
|
},
|
ischeckboxchangeToEdit(val, obj) {
|
obj.disabled = !val;
|
this.cellFaceClick(obj);
|
},
|
cellFaceClick(fieldObj) {
|
var fromFieldObj_ = clone(this.fromFieldObj);
|
if (fromFieldObj_[fieldObj.field].isEdit){
|
return;
|
}
|
this.record.setEditData(this.formData);
|
this.record.apply();
|
this.formDataFace = this.record.getFace();
|
|
for (var field in fromFieldObj_) {
|
fromFieldObj_[field].isEdit = false;
|
}
|
|
if (!fieldObj.disabled && !this.disabled && !this.formAttr.disabled) {
|
fromFieldObj_[fieldObj.field].isEdit = true;
|
}
|
|
this.fromFieldObj = fromFieldObj_;
|
},
|
cellVisibleChange(obj, row, callback) {
|
this.$emit("visible-change", obj, row,callback);
|
},
|
|
formRemoteMethod(obj) {
|
this.$emit('remote-method', obj);
|
},
|
|
cellFormChange(obj) {
|
/* this.hCellRefresh = false;
|
this.$nextTick(function() {
|
this.hCellRefresh = true;
|
}) */
|
this.$emit("form-change", obj);
|
},
|
|
selectChange(obj) {
|
this.$emit("select-change", obj);
|
},
|
selectClear(obj) {
|
this.$emit("select-clear", obj);
|
},
|
selectOptionOperate(obj) {
|
this.$emit("select-option-operate", obj);
|
},
|
|
cellselectoptionoperate(type, obj) {
|
if (this.dataIndex > -1) {
|
this.formDataData[obj.field][this.dataIndex] = "";
|
}
|
else {
|
this.formDataData[obj.field] = "";
|
}
|
var obj_ = {
|
type: type,
|
fieldobj: obj,
|
data: this.formDataData
|
}
|
this.$emit("select-option-operate", obj_);
|
},
|
|
/* selectChange(val, obj) {
|
this.formDataData[obj.field] = val;
|
let me = this;
|
if (obj.selectchildren) {
|
obj.selectchildren.map(e=>{
|
let tableFieldsFormat_ = me.tableFieldsFormat;
|
tableFieldsFormat_.map(item => {
|
item.children.map(item2 => {
|
if (item2.field.toLowerCase().indexOf(e.toLowerCase()) > -1) {
|
if(item2.ismultiple) {
|
me.formDataData[e] = [];
|
}
|
else {
|
me.formDataData[e] = "";
|
}
|
}
|
});
|
});
|
});
|
}
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formDataData
|
}
|
this.$emit("select-change", obj_);
|
|
this.isRefresh = false;
|
this.isRefresh = true;
|
}, */
|
querySearch(queryString, cb, scope, tableField) {
|
let field = scope.column.property;
|
var obj = {
|
queryString: queryString,
|
cb: cb,
|
scope: scope,
|
tableField: tableField
|
}
|
var inputoptions = tableField.inputoptions;
|
var results = queryString ? inputoptions.filter(this.createFilter(queryString)) : inputoptions;
|
cb(results);
|
this.$emit('cell-query-search', obj);
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
showexample(fieldObj) {
|
var me = this;
|
// var fieldObj = clone(this.fieldObj);
|
if (this.tableFieldClick[fieldObj.field] && this.tableFieldClick[fieldObj.field].example && this.tableFieldClick[fieldObj.field].example.onshow) {
|
this.tableFieldClick[fieldObj.field].example.onshow(fieldObj, function(obj_) {
|
// fieldObj.example_imgurl = obj_.example_imgurl;
|
me.$set(fieldObj, "example_imgurl", obj_.example_imgurl)
|
// me.fieldObj = clone(fieldObj)
|
});
|
}
|
|
},
|
checkForm() {//检验通过true 否false
|
var bo_sum = true;
|
for (var c_ref in this.$refs) {
|
var bo_ = true;
|
if (this.isArray(this.$refs[c_ref])) {
|
if(this.$refs[c_ref].length > 0){
|
bo_ = this.$refs[c_ref][0].checkForm();
|
}
|
}else if(this.$refs[c_ref] && this.$refs[c_ref].checkForm) {
|
bo_ = this.$refs[c_ref].checkForm()
|
}
|
else {
|
// bo_ = this.$refs[c_ref].checkForm()
|
}
|
|
bo_sum = bo_ & bo_sum;
|
}
|
|
return bo_sum;
|
/* var ref = this.href;
|
var bo_ = true;
|
this.$refs[ref].validate((valid) => {
|
if (valid) {
|
} else {
|
bo_ = false;
|
}
|
});
|
|
return bo_; */
|
},
|
|
isArray(r){
|
return Object.prototype.toString.call(r)== '[object Array]';
|
},
|
}
|
});
|
//单个表单
|
Vue.component("h-newform-a", {//表单组件
|
template:
|
'<div '+
|
':class="[(formAttr.labelposition && (formAttr.labelposition == \'left\' || formAttr.labelposition == \'right\')) ? \'h_form_item__label_\' + formAttr.labelposition : \'\']" '+
|
'>'+
|
'<el-form v-if="isRefresh" :model="formData" :show-message="false" status-icon '+
|
':ref="href"' +
|
':label-width="formAttr.labelwidth" '+
|
//':disabled="disabled || formAttr.disabled" '+
|
':label-position="formAttr.labelposition" '+
|
':size="formAttr.size? formAttr.size : \'medium\'" '+
|
':style="{width: width, \'overflow-y\':\'auto\', \'padding-left\': formAttr.formleft ? formAttr.formleft : \'0px\', \'padding-top\': formAttr.formtop ? formAttr.formtop : \'0px\', \'padding-right\': formAttr.formright ? formAttr.formright : \'0px\', \'padding-bottom\': formAttr.formbottom ? formAttr.formbottom : \'0px\'}"> '+
|
|
'<table :style="{\'table-layout\':\'fixed\', width: \'100%\', height: \'100%\', \'border-spacing\': \'0px\', \'border-right\': formAttr.borderright ? formAttr.borderright : formAttr.border, \'border-bottom\': formAttr.borderbottom ? formAttr.borderbottom : formAttr.border}"> '+
|
'<tr v-for="(tableField, k) in tableFieldsFormat" :key="k" style="max-height: 30px;"> '+
|
'<td v-for="(fieldObj, kf) in tableField.children" :key="kf" '+
|
':colspan="fieldObj.colspan ? fieldObj.colspan : 1" '+
|
//JSON.stringify(formDataOld[fieldObj.field]) != JSON.stringify(formData[fieldObj.field])
|
//对比
|
':class="[(isOldContrast && formDataOld.id && JSON.stringify(formDataOld[fieldObj.field]) != JSON.stringify(formData[fieldObj.field]) && (formDataOld[fieldObj.field] || formData[fieldObj.field])) ? \'z_contrast_form\' : \'\', formAttr.valalign ? \'h_form_allval_\' + formAttr.valalign : \'h_form_allval_left\', fieldObj.alignform ? \'h_form_val_\' + fieldObj.alignform : \'\', (fieldObj.required && fieldObj.rules && fieldObj.rules.length) ? \'\' : \'h_nullrules\']" '+
|
':style="{\'border-left\': fieldObj.visiblefilterrule && !filterrule[fieldObj.field] ? \'0px\' : formAttr.borderleft ? formAttr.borderleft : formAttr.border, \'border-top\': fieldObj.visiblefilterrule && !filterrule[fieldObj.field] ? \'0px\' : formAttr.bordertop ? formAttr.bordertop : formAttr.border}"> '+
|
'<template v-if="fieldObj.visiblefilterfield && fieldObj.visiblefiltervalue && formData[fieldObj.visiblefilterfield] != fieldObj.visiblefiltervalue"> '+
|
'<el-form-item label="" :style="{width: \'100%\', overflow: \'hidden\',\'padding-left\': fieldObj.labelleft ? fieldObj.labelleft : \'0px\',\'padding-right\': fieldObj.labelright ? fieldObj.labelright : \'0px\'}" '+
|
|
'</el-form-item> '+
|
'</template> '+
|
'<template v-else-if="fieldObj.visiblefilterrule && !filterrule[fieldObj.field]"> '+
|
'<el-form-item label="" :style="{width: \'100%\', overflow: \'hidden\',\'padding-left\': fieldObj.labelleft ? fieldObj.labelleft : \'0px\',\'padding-right\': fieldObj.labelright ? fieldObj.labelright : \'0px\'}" '+
|
|
'</el-form-item> '+
|
'</template> '+
|
|
'<template v-else> '+
|
//isColon:是否存在"："
|
'<el-form-item v-if="fieldObj.isrefresh_formitem" :label="formAttr.isColon && fieldObj.name ? fieldObj.name +\'：\' : fieldObj.name" :prop="fieldObj.field" :label-width="fieldObj.labelwidth ? fieldObj.labelwidth + \'px\': \'\'" :style="{width: \'100%\', overflow: \'hidden\',\'padding-left\': fieldObj.labelleft ? fieldObj.labelleft : \'0px\',\'padding-right\': fieldObj.labelright ? fieldObj.labelright : \'0px\'}" '+
|
//':disabled="disabled || formAttr.disabled" '+
|
':rules="fieldObj.rules" > '+
|
'<h-cell v-if="fieldObj.type != \'null\'" '+
|
':ref = "\'cell_\' + fieldObj.field" '+
|
':form-attr = "formAttr" '+
|
':form-data = "formData" '+
|
|
':is-old-contrast="isOldContrast" '+
|
':contrast-mode="contrastMode" '+
|
':form-data-old="formDataOld" '+
|
|
':disabled = "typeof (fieldObj.disabled) != \'undefined\' ? fieldObj.disabled : ((disabled || formAttr.disabled) ? true : false)"'+
|
':field-obj = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
':file-list-show-type="fileListShowType"'+
|
//':form-data-face = "formDataFace" '+
|
|
//':form-field-data = "formDataData[fieldObj.field]" '+
|
':table-fields = "tableFields" '+
|
':table-field-click="tableFieldClick" '+
|
':notvalunit = "notvalunit" '+
|
///外部事件
|
//表单更改事件
|
'v-on:form-change="(obj)=>formChange(obj, fieldObj)" '+
|
//下拉更改事件
|
'v-on:select-change="(obj)=>selectChange(obj, fieldObj)" '+
|
//fieldObj.ischeckbox //复选框在前面
|
//'v-on:ischeckboxchangeToEdit="ischeckboxchangeToEdit" '+
|
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
//popup弹窗
|
'v-on:show-popup="showPopup" '+
|
//按键事件
|
'v-on:button-click="buttonClick" '+
|
'v-on:button-array-click="buttonArrayClick" '+
|
//内部事件
|
'></h-cell> '+
|
// '<div v-if="isOldContrast && contrastMode==\'fieldContrast\' && formDataOld.id && formDataOld[fieldObj.field] != formData[fieldObj.field] && (formDataOld[fieldObj.field] || formData[fieldObj.field])" '+
|
// ' style="width: 20px; position: absolute; top: 0px; right: 0px;">'+
|
// '<el-popover popper-class="h_example" placement="bottom-end" width="400" trigger="hover">'+
|
// '<h-cell v-if="fieldObj.type != \'null\'" '+
|
// ':ref = "\'cell_old_\' + fieldObj.field" '+
|
// ':form-attr = "formAttr" '+
|
// ':form-data = "formDataOld" '+
|
// ':disabled = "true"'+
|
// ':field-obj = "fieldObj" '+
|
// ':from-field-obj = "fromFieldObj" '+
|
// ':table-fields = "tableFields" '+
|
// ':notvalunit = "notvalunit" '+
|
// '></h-cell> '+
|
|
// '<i slot="reference" class="el-icon-c-scale-to-original" style="font-size: 18px;"></i>'+
|
// '</el-popover>'+
|
// '</div>'+
|
/* 说明 */
|
'<span v-if="fieldObj.appendix && fieldObj.isvalexplain_br" class="h_valexplain">{{fieldObj.appendix}}</span>'+
|
'</el-form-item> '+
|
|
//版本对比的数据，所以不能编辑(整个表单对比)
|
'<el-form-item v-if="isOldContrast && contrastMode==\'formContrast\'" label="" :prop="fieldObj.field" :label-width="fieldObj.labelwidth? fieldObj.labelwidth + \'px\': \'\'" :style="{width: \'100%\', overflow: \'hidden\',\'padding-left\': fieldObj.labelleft ? fieldObj.labelleft : \'0px\',\'padding-right\': fieldObj.labelright ? fieldObj.labelright : \'0px\'}" '+
|
//':disabled="disabled || formAttr.disabled" '+
|
'> '+
|
'<h-cell v-if="fieldObj.type != \'null\'" '+
|
':ref = "\'cell_old_\' + fieldObj.field" '+
|
':form-attr = "formAttr" '+
|
':form-data = "formDataOld" '+
|
':disabled = "true"'+
|
':field-obj = "fieldObj" '+
|
':from-field-obj = "fromFieldObj" '+
|
//':form-data-face = "formDataOldFace" '+
|
//':form-field-data = "formDataData[fieldObj.field]" '+
|
':table-fields = "tableFields" '+
|
':notvalunit = "notvalunit" '+
|
':file-list-show-type="fileListShowType"'+
|
///外部事件
|
//表单更改事件
|
'v-on:form-change="(obj)=>formChange(obj, fieldObj)" '+
|
//下拉更改事件
|
'v-on:select-change="(obj)=>selectChange(obj, fieldObj)" '+
|
//fieldObj.ischeckbox //复选框在前面
|
//'v-on:ischeckboxchangeToEdit="ischeckboxchangeToEdit" '+
|
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
//popup弹窗
|
'v-on:show-popup="showPopup" '+
|
//按键事件
|
'v-on:button-click="buttonClick" '+
|
'v-on:button-array-click="buttonArrayClick" '+
|
//内部事件
|
'></h-cell> '+
|
/* 说明 */
|
'<span v-if="fieldObj.appendix && fieldObj.isvalexplain_br" class="h_valexplain">{{fieldObj.appendix}}</span>'+
|
|
'</el-form-item> '+
|
'</template> '+
|
'</td> '+
|
'</tr> '+
|
'</table> '+
|
'</el-form> '+
|
'</div> ',
|
props: {
|
formAttr: Object,
|
tableFields: Array,
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
notvalunit: {//是否不保留单位/后缀占位符
|
type: Boolean,
|
default: true
|
},
|
isOldContrast: {//是否对比差异
|
type: Boolean,
|
default: false
|
},
|
contrastMode: {//对比方式//fieldContrast字段对比，formContrast表单整体对比
|
type: String,
|
default: "fieldContrast"
|
},
|
fileListShowType: {//多附件的显示方式//formshow/popover
|
type: String,
|
default: "formshow"
|
},
|
formDataOld: {//对比差异的历史数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
|
isEndColspan: {//是否最后一行自动铺满
|
type: Boolean,
|
default: true
|
},
|
|
formData: {//表单数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
filterrule: {//符合字段显示规则的字段
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
href: {//无数据的图片
|
type: String,
|
default: "form1"
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
width: {
|
type: String,
|
default: "100%"
|
},
|
|
},
|
data() {
|
return {
|
form_ref: null,
|
isRefresh: true,
|
isCellRefresh: true,
|
tableFieldsFormat: [],
|
fromFieldObj: {},
|
|
formFieldsObj: {},
|
record: null,
|
formDataData: {},
|
formDataFace: {},
|
formDataOldFace: {},
|
newFormData: {},
|
|
formData__: {
|
field1: "1211",
|
field3: ["33"],
|
field31: ["33"]
|
}
|
}
|
},
|
computed: {
|
|
},
|
watch: {
|
tableFields() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
},
|
formData() {
|
if(this.formData) {
|
this.formData = this.formData;
|
this.formDataRecord();
|
}
|
},
|
|
},
|
mounted() {
|
if (!this.notvalunit) {
|
var a1234 = "";
|
}
|
this.disabled;
|
this.formAttr;
|
this.tableFieldClick;
|
var ref = this.href;
|
this.form_ref = this.$refs[ref];
|
var a2 = this.formData;
|
/* var formData_ = clone(this.formData);
|
for (var k in formData_) {
|
if (formData_[k] == 0) {
|
formData_[k] = "0";
|
}
|
}
|
this.formData = clone(formData_) */
|
|
|
if(this.tableFields.length > 0) {
|
let tableFields_ = clone(this.tableFields);
|
for (var r=0; r<tableFields_.length; r++) {
|
let field_ = tableFields_[r];
|
|
if (field_.type == "numberrange") {
|
if (this.formData[field_.field] && this.formData[field_.field].length == 2) {
|
if (this.formData[field_.field][0] == null) {
|
this.formData[field_.field][0] = undefined;
|
}
|
if (this.formData[field_.field][1] == null) {
|
this.formData[field_.field][1] = undefined;
|
}
|
}
|
}
|
|
if (this.formData[field_.field] == null || typeof (this.formData[field_.field]) == 'undefined') {
|
if (field_.type == "cascader" && field_.visiblefield) {//'cascader\' && fieldObj.visiblefield
|
this.formData[field_.visiblefield] = [];
|
}
|
else if (field_.type == "cascader") {//'cascader\' && fieldObj.visiblefield
|
this.formData[field_.field] = [];
|
}
|
else if (field_.type == "selectmultiple") {//'cascader\' && fieldObj.visiblefield
|
this.formData[field_.field] = [];
|
}
|
else if (field_.type != "number" && field_.type != "numberrange" && field_.type != "date") {
|
//this.formData[field_.field] = "";
|
this.$set(this.formData, field_.field, "")
|
}
|
/* else {
|
this.formData[field_.field] = null;
|
} */
|
|
}
|
}
|
}
|
|
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.tableFields.map(f=>{
|
if (f.field == "is_has_inhospital_store") {
|
var aa = ""
|
}
|
})
|
|
this.formLayout();
|
}
|
},
|
methods: {
|
formLayout() {
|
//表单布局设置
|
let columnnumber_ = this.formAttr.columnnumber;
|
let tableFieldsFormat_ = [];
|
|
let rowObj_ = {};
|
let children_ = [];
|
let i = 0;
|
let field_i = 0;
|
let tableFields_ = clone(this.tableFields);
|
let formFieldsObj_ = {};
|
for (var r=0; r<tableFields_.length; r++) {
|
let field_ = tableFields_[r];
|
if (field_.readonly) {
|
field_.disabled = field_.readonly
|
}
|
|
if (field_.inputtype && !field_.type) {
|
field_.type = field_.inputtype.toLowerCase();
|
}
|
else if (!field_.type) {
|
field_.type = "input";
|
}
|
|
//国际化设置，目前仅支持中/英
|
if (h_language == "en" && field_.labelenglish) {
|
if (!field_.labelchinese) {
|
field_.labelchinese = clone(field_.name);
|
}
|
field_.name = clone(field_.labelenglish);
|
}
|
else {
|
if (field_.labelchinese) {
|
field_.name = clone(field_.labelchinese);
|
}
|
}
|
|
this.formFieldsObj[field_.field] = field_;
|
this.fromFieldObj[field_.field] = {
|
isEdit: true
|
};
|
|
if(!field_.type || field_.type == "") {
|
field_.type = "input";
|
}
|
if (field_.isshow != "T") {
|
continue;
|
};
|
|
//设置下拉选项的（根据字典数据设置）
|
if (field_.type == "select" || field_.type == "selectmultiple" || field_.type == "cascader") {
|
if (!field_.props) {
|
var props_ = {value: "code", label: "value"};
|
field_.props = clone(props_);
|
}
|
|
if (!field_.options && field_.optionsgroup) {
|
//:options="fieldObj.options" :props="fieldObj.props"
|
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var list_ = window.top.Dictionary.getList(field_.optionsgroup);
|
field_.options = clone(list_);
|
}
|
else if(!field_.options) {
|
field_.options = []
|
}
|
}
|
|
if (field_.type == "radio" || field_.type == "checkboxobj" || field_.type == "checkboxobjgroup") {
|
if (field_.optionsgroup) {
|
//:options="fieldObj.options" :props="fieldObj.props" ;//{value: "code", label: "value"};
|
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var list_ = window.top.Dictionary.getList(field_.optionsgroup);
|
|
if (field_.type == "checkboxobjgroup") {
|
field_.optionsdictionary = list_;
|
var list_groupobj_ = {};
|
var list_group_ = [];
|
list_.map(option=>{
|
var option_ = clone(option);
|
if (option_.value.indexOf("：") > 0) {
|
var group_ = option_.value.split("：");
|
var groupname_ = group_[0];
|
var value_ = group_[1];
|
option_.value = value_;
|
option_.groupname = groupname_;
|
|
if (!list_groupobj_[groupname_]) {
|
list_groupobj_[groupname_] = []
|
}
|
|
list_groupobj_[groupname_].push(option_)
|
}
|
else {
|
option_.groupname = "";
|
list_groupobj_[groupname_].push(option_);
|
}
|
})
|
|
for (var groupname in list_groupobj_) {
|
var option_group_ = {
|
name: groupname,
|
children: list_groupobj_[groupname]
|
}
|
|
list_group_.push(option_group_);
|
}
|
|
field_.options = clone(list_group_);
|
}
|
else {
|
field_.options = clone(list_);
|
}
|
|
}
|
else if(!field_.options) {
|
field_.options = []
|
}
|
}
|
|
field_.isrefresh_formitem = true;
|
field_.rules = [];
|
|
if (field_.required && field_.disabled) {
|
field_.required = false;
|
}
|
|
if (field_.required && !field_.disabled) {//是否必填
|
let required_ = {
|
required: true,
|
message: "请输入"+field_.name,
|
trigger: "blur"
|
};
|
//添加数组校验
|
// if (field_.type == "numberrange") {
|
// required_.type = "array";
|
// }
|
//添加自定义校验
|
if (field_.type == "numberrange") {
|
required_.validator = this.numberrangevalidator;
|
}
|
|
//添加自定义校验
|
//if (field_.type == "number") {
|
//required_.validator = this.numbervalidator;
|
//}
|
field_.rules.push(required_);
|
}
|
|
if (field_.pattern) {//填写规则，正则表达式
|
field_.pattern = field_.pattern.replace(/\//g,"\\");
|
var patterns = field_.pattern.split("；");
|
patterns.map(p=>{
|
var pattern_ = new RegExp(p);
|
let required_ = {
|
pattern: pattern_,
|
message: "请填写正确的"+field_.name,
|
trigger: "blur"
|
};
|
field_.rules.push(required_);
|
})
|
|
}
|
|
if (field_.colspan > columnnumber_) {//如果合并列大于表单设置列数
|
field_.colspan = columnnumber_;
|
}
|
field_i += field_.colspan ? field_.colspan : 1;//如果有合并列数, 默认为1
|
|
if (field_i == columnnumber_) {//列数满一行
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
else {//不满一行, 看是否存在下一属性，
|
//若有则看已有列数加下一合并列数是否超过设置列数，若超了则自动调整该属性的合并列，使下一属性换行。
|
//若没有下一属性，则调整该属性合并列
|
let nxt_r = r + 1;
|
let field_nxt = {};
|
if(nxt_r < tableFields_.length) {
|
for (var nxt_j = nxt_r; nxt_j < tableFields_.length; nxt_j++) {
|
let field_nxtj = tableFields_[nxt_j];
|
if(field_nxtj.isshow!="T") {
|
continue;
|
}
|
else {
|
field_nxt = field_nxtj;
|
break
|
}
|
}
|
}
|
|
if (field_nxt.field) {
|
//let field_nxt = tableFields_[nxt_r];
|
if(field_nxt.colspan) {
|
let field_i_nxt = field_i + field_nxt.colspan;
|
if (field_i_nxt > columnnumber_) {
|
field_.colspan = columnnumber_ - i;
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
else {
|
children_.push(field_);
|
i++;
|
}
|
}
|
else {
|
children_.push(field_);
|
i++;
|
}
|
}
|
else {
|
if (this.isEndColspan) {
|
if (!field_.colspan){
|
field_.colspan = columnnumber_ - i;
|
}
|
}
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
}
|
|
if (i == columnnumber_) {//列数满一行，保留该行属性，新建下一空行
|
rowObj_.children = children_;
|
tableFieldsFormat_.push(rowObj_);
|
rowObj_ = {};
|
children_ = [];
|
i = 0;
|
field_i = 0;
|
}
|
}
|
this.tableFieldsFormat = tableFieldsFormat_;
|
|
this.formDataRecord();
|
},
|
|
numbervalidator(rule, value, callback) {
|
if (value == null || typeof (value) == 'undefined') {
|
callback(new Error('缺少必填项'));
|
} else {
|
callback();
|
}
|
},
|
|
numberrangevalidator(rule, value, callback) {
|
if (value == null || value.length == 0 || typeof (value[0]) == 'undefined' || typeof (value[1]) == 'undefined') {
|
value = []
|
callback(new Error('缺少必填项'));
|
} else {
|
callback();
|
}
|
},
|
formDataRecord() {
|
let me = this;
|
/* if (this.formData) {
|
this.record = new Record(me);
|
this.record.setData(this.formData);
|
|
this.formDataData = this.formData;//this.record.getData();
|
this.rebate_available = this.formData.rebate_available;
|
this.formDataFace = this.record.getFace();
|
} */
|
this.formDataFace = {}
|
if (this.formData) {
|
for (var prop in this.formData) {
|
var fieldMeta = this.formFieldsObj[prop];
|
if (!fieldMeta) {
|
continue;
|
}
|
var value = this.formData[prop];
|
|
var e = fieldMeta;
|
|
if (e.visiblefilterrule) {//存在显示规则，则判断是否满足现实规则
|
//visiblefilterrule = "情况一；情况二"// field1：val1、val2+field2：val3；field1：val3
|
//当情况一、情况二任意一个满足都会显示
|
//情况一中需要满足两个字段的值才行（字段field1的值是val1或val2并且字段field2的值是val3）
|
//情况二中需要满足一个字段的值就行（字段field1的值是val3）
|
if (typeof(e.visiblefilterrule) == "string") {
|
var isrule = false;//默认不符合规则
|
var _a = [];
|
_a = e.visiblefilterrule.split("；");
|
_a.map(_filter=>{
|
var isshow = false;
|
var _c = [];
|
_c = _filter.split("+");
|
_c.map(c_field=>{
|
var _d = [];
|
_d = c_field.split("：");
|
var field = _d[0];
|
var vals = _d[1].split("、");
|
if (vals.indexOf(this.formData[field]) > -1) {
|
isshow = true;
|
}
|
else {
|
isshow = false;
|
return
|
}
|
|
})
|
|
if (isshow == true) {
|
isrule = true;
|
return
|
}
|
});
|
//符合显示规则
|
if (isrule == true) {
|
this.$set(this.filterrule, e.field, true);
|
}
|
else {//隐藏
|
this.$set(this.filterrule, e.field, false);
|
//隐藏规则
|
if (typeof(e.hidefilterrule) == "string") {//相关字段需要清空的或设置为默认值的可配置规则
|
var _hfr = e.hidefilterrule.split("；");
|
_hfr.map(_filter=>{
|
var _d = _filter.split("：");
|
var field = _d[0];
|
var vals = _d[1];
|
if (vals == "“”") {
|
vals = ""
|
}
|
|
if (field) {
|
this.$set(this.formData, field, vals);
|
}
|
});
|
}
|
else if (this.formData[prop]) {//没有隐藏规则的,且存在值的该字段值设置为空字符串
|
this.$set(this.formData, prop, "");
|
}
|
|
}
|
}
|
}
|
|
if (e.formatter) {
|
//formatpattern 格式设置（可以是小数位数。也可以是时间、日期的格式）
|
if (e.formatter == "formatter_json") {
|
var json_ = {};
|
if (e.formatterjson) {
|
//说明是对应关系
|
json_ = e.formatterjson;
|
}
|
else if (e.formatpattern){
|
//根据formatpattern获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var map_ = window.top.Dictionary.getMap(e.formatpattern);
|
json_ = e.formatterjson = clone(map_);
|
}
|
this.formDataFace[prop] = formatter_json(null, null, value, null, json_);
|
}
|
else if (e.formatter == "formatter_money") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_money(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_date") {
|
var format = e.formatpattern;//日期格式，默认"yyyy-MM-dd"
|
this.formDataFace[prop] = formatter_date(null, null, value, null, format);
|
}
|
else if(e.formatter == "formatter_float") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_float(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_percent") {
|
var digit = e.formatpattern;//小数位数，默认2位
|
this.formDataFace[prop] = formatter_percent(null, null, value, null, digit);
|
}
|
else if(e.formatter == "formatter_split") {
|
var format = e.formatpattern;//拼接的字段格式 format = "#{name}-{name}%"
|
this.formDataFace[prop] = formatter_split(this.formData, null, value, null, format);
|
}
|
else if(e.formatter == "formatter_prefixorunit") {
|
var prefix = e.prefix;//前缀
|
var unit = e.suffix;//后缀或单位
|
this.formDataFace[prop] = formatter_prefixorunit(null, null, value, null, prefix, unit);
|
}
|
|
}
|
|
|
}
|
}
|
},
|
cellVisibleChange(obj, row, callback) {
|
this.$emit("visible-change", obj, row, callback);
|
},
|
|
selectClear(obj) {
|
this.$emit("select-clear", obj);
|
},
|
selectOptionOperate(obj) {
|
this.$emit("select-option-operate", obj);
|
},
|
|
formRemoteMethod(obj) {
|
this.$emit('remote-method', obj);
|
},
|
showPopup(popupObj) {
|
this.$emit('show-popup', popupObj);
|
},
|
buttonClick(obj) {//按键点击事件
|
this.$emit('button-click', obj);
|
},
|
formChange(obj, fieldObj) {
|
if (fieldObj){
|
this.formRefresh(fieldObj);
|
}
|
this.formDataRecord();
|
|
// this.$emit("form-change", obj);
|
},
|
|
formRefresh(fieldObj) {
|
// var formData_ = clone(this.formData);
|
|
// this.formData = formData_;
|
/* this.isCellRefresh = false;
|
this.$nextTick(function() {
|
this.isCellRefresh = true;
|
if (!ischeck) {
|
this.checkForm();
|
}
|
}) */
|
if (!fieldObj.children) {
|
fieldObj.isrefresh_formitem = false;
|
this.$nextTick(function() {
|
fieldObj.isrefresh_formitem = true;
|
})
|
}
|
},
|
|
showpopup(popupObj) {//弹窗弹出事件
|
this.$emit('show-popup', popupObj);
|
},
|
formCallClick(popupObj) {//指定属性值点击事件
|
this.$emit('formcall-click', popupObj);
|
},
|
formCallClickBySpan(popupObj) {//指定属性值点击事件
|
this.$emit('formcallspan-click', popupObj);
|
},
|
|
buttonArrayClick(popupObj) {//按键组点击事件//fieldObj, buttonobj
|
this.$emit('button-array-click', popupObj);
|
},
|
setFormValByField(field, val) {
|
this.formDataData[field] = val;
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
setFormOptionsByField(fieldobj, result) {
|
let tableFieldsFormat_ = this.tableFieldsFormat;
|
tableFieldsFormat_.map(item => {
|
item.children.map(item2 => {
|
if (item2.field.toLowerCase().indexOf(fieldobj.field.toLowerCase()) > -1) {
|
item2.options = result;
|
}
|
});
|
});
|
this.tableFieldsFormat = tableFieldsFormat_;
|
},
|
visibleChange(obj, row) {//下拉展开事件
|
var me = this;
|
this.$emit("visible-change", obj, row, function() {
|
me.isRefresh = false;
|
me.isRefresh = true;
|
});
|
},
|
remoteMethod(obj) {
|
this.$emit('remote-method', obj);
|
},
|
|
isformcheckboxchange(val, obj) {
|
this.$emit("form-checkbox-change", obj);
|
},
|
ischeckboxchange(val, obj) {
|
obj.disabled = !val;
|
},
|
ischeckboxchangeToEdit(val, obj) {
|
obj.disabled = !val;
|
this.cellFaceClick(obj);
|
},
|
selectChange(obj, fieldObj) {
|
if (fieldObj){
|
this.formRefresh(fieldObj);
|
}
|
this.formDataRecord();
|
// this.$emit("select-change", obj);
|
|
},
|
|
querySearch(obj) {
|
this.$emit('cell-query-search', obj);
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
checkForm() {//检验通过true 否false
|
var bo_s = true;
|
|
for (var c_ref in this.$refs) {
|
var bo_ = true;
|
if (c_ref == "form1_a") {
|
//messagemap是当false时对于的不通过的字段；
|
/*
|
例：
|
{
|
"instrument_date_from": [
|
{
|
"message": "请输入经营期限自",
|
"field": "instrument_date_from"
|
}
|
],
|
"instrument_date_to": [
|
{
|
"message": "请输入经营期限至",
|
"field": "instrument_date_to"
|
}
|
]
|
}
|
|
*/
|
this.form_ref.validate((valid, messagemap) => {
|
if (valid) {
|
} else {
|
bo_ = false;
|
}
|
});
|
}
|
else {
|
if (this.isArray(this.$refs[c_ref])) {
|
if(this.$refs[c_ref].length > 0){
|
bo_ = this.$refs[c_ref][0].checkForm();
|
}
|
}
|
else {
|
this.$refs[c_ref].validate((valid, messagemap) => {
|
if (valid) {
|
} else {
|
bo_ = false;
|
}
|
});
|
}
|
}
|
|
bo_s = bo_ & bo_s;
|
}
|
|
return bo_s;
|
/* var bo_ = true;
|
this.form_ref.validate((valid) => {
|
if (valid) {
|
} else {
|
bo_ = false;
|
}
|
});
|
|
return bo_; */
|
//this.$emit('check-form', bo_);
|
},
|
|
isArray(r){
|
return Object.prototype.toString.call(r)== '[object Array]';
|
},
|
}
|
});
|
|
//完整表单
|
Vue.component("h-form", {//新版V2.0表单功能块
|
template:
|
'<div class="z_form h_form" v-if="isRefresh"> '+
|
'<div v-if="formAttr.istitle && formAttr.title" style="font-size: 14px; font-weight: bold;">{{formAttr.title}}</div> '+
|
|
'<template v-for="(g, k) in tableFieldsGroup"> '+
|
'<div style="margin: 0;">{{g.name}}</div> '+
|
'<div style="margin: 0; padding-left: 0px">'+
|
'<h-newform-a '+
|
//外部参数
|
':form-attr="formAttr" '+
|
':table-fields="g.children" '+
|
':table-field-click="tableFieldClick" '+
|
':form-data="formData" '+
|
':ref="href" '+
|
':href="href+\'_a\'" '+
|
':width="width" '+
|
':is-old-contrast="isOldContrast" '+
|
':contrast-mode="contrastMode" '+
|
':form-data-old="formDataOld" '+
|
':is-end-colspan="isEndColspan" '+
|
':disabled="disabled || formAttr.disabled" '+
|
':notvalunit="formAttr.notvalunit" '+
|
':file-list-show-type="fileListShowType"'+
|
//内部参数
|
|
//外部事件
|
//表单更改事件
|
'v-on:form-change="formChange" '+
|
//下拉更改事件
|
'v-on:select-change="selectChange" '+
|
//fieldObj.ischeckbox //复选框在前面
|
//'v-on:ischeckboxchangeToEdit="ischeckboxchangeToEdit" '+
|
|
//下拉展开事件
|
'v-on:visible-change="cellVisibleChange" '+
|
//下拉筛选
|
'v-on:remote-method="formRemoteMethod" '+
|
//单选删除
|
'v-on:select-clear="selectClear" '+
|
//选择项操作
|
'v-on:select-option-operate="selectOptionOperate" '+
|
//popup弹窗
|
'v-on:show-popup="showPopup" '+
|
//按键事件
|
'v-on:button-click="buttonClick" '+
|
'v-on:button-array-click="buttonClick" '+
|
|
//内部事件
|
'> '+
|
'</h-newform-a> '+
|
|
'</div> '+
|
'</template> '+
|
|
|
'</div>',
|
props: {
|
formAttr: Object,
|
tableFields: {
|
type: Array,
|
default: function(){
|
return [];
|
}
|
},
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {
|
|
};
|
}
|
},
|
notvalunit: {//是否不保留单位/后缀占位符
|
type: Boolean,
|
default: true
|
},
|
isOldContrast: {//是否对比差异
|
type: Boolean,
|
default: false
|
},
|
contrastMode: {//对比方式//fieldContrast字段对比，formContrast表单整体对比
|
type: String,
|
default: "fieldContrast"
|
},
|
fileListShowType: {//多附件的显示方式//formshow/popover
|
type: String,
|
default: "formshow"
|
},
|
formDataOld: {//对比差异的历史数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
|
isEndColspan: {//是否最后一行自动铺满
|
type: Boolean,
|
default: true
|
},
|
|
formData: {//表单数据
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
href: {//无数据的图片
|
type: String,
|
default: "form1"
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
width: {
|
type: String,
|
default: "100%"
|
},
|
|
},
|
data() {
|
return {
|
isRefresh: true,
|
isCheckForm: false,
|
tableFieldsGroup: [],
|
}
|
},
|
computed: {
|
|
},
|
watch: {
|
tableFields() {
|
if(this.tableFields.length > 0) {
|
let tableFields_ = clone(this.tableFields);
|
for (var r=0; r<tableFields_.length; r++) {
|
let field_ = tableFields_[r];
|
if (field_.readonly) {
|
field_.disabled = field_.readonly
|
}
|
|
if (field_.inputtype && !field_.type) {
|
field_.type = field_.inputtype.toLowerCase();
|
}
|
else if (!field_.type) {
|
field_.type = "input";
|
}
|
if (this.formData[field_.field] == null && field_.type == "number") {
|
this.formData[field_.field] = undefined;
|
}
|
else if ((this.formData[field_.field] == null || typeof(this.formData[field_.field]) == "undefined") && field_.type == "daterange") {
|
this.$set(this.formData, field_.field, []);
|
}
|
else if ((this.formData[field_.field] == null || typeof(this.formData[field_.field]) == "undefined") && field_.type == "date") {
|
this.$set(this.formData, field_.field, null);
|
}
|
else if (field_.type == "numberrange") {
|
if (this.formData[field_.field] && this.formData[field_.field].length == 2) {
|
if (this.formData[field_.field][0] == null) {
|
this.formData[field_.field][0] = undefined;
|
}
|
if (this.formData[field_.field][1] == null) {
|
this.formData[field_.field][1] = undefined;
|
}
|
}
|
}
|
// else if (this.formData[field_.field] == undefined && field_.type == "checkboxobj") {
|
// this.formData[field_.field] = [];
|
// }
|
|
else if (this.formData[field_.field] == undefined && field_.type != "number") {
|
this.formData[field_.field] = null;
|
}
|
|
|
}
|
|
this.tableFieldsGroup = listTOListGroup(tableFields_, "group_name", "name");
|
|
|
}
|
},
|
|
formData() {
|
var aa = this.formData;
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
if (typeof this.formAttr.notvalunit == 'undefined' ) {
|
this.formAttr.notvalunit = true;
|
}
|
this.tableFieldClick;
|
var aa = this.formData;
|
if(this.tableFields.length > 0) {
|
let tableFields_ = clone(this.tableFields);
|
for (var r=0; r<tableFields_.length; r++) {
|
let field_ = tableFields_[r];
|
|
if (field_.readonly) {
|
field_.disabled = field_.readonly
|
}
|
|
if (field_.inputtype && !field_.type) {
|
field_.type = field_.inputtype.toLowerCase();
|
}
|
else if (!field_.type) {
|
field_.type = "input";
|
}
|
if (field_.type == "numberrange") {
|
if (this.formData[field_.field] && this.formData[field_.field].length == 2) {
|
if (this.formData[field_.field][0] == null) {
|
this.formData[field_.field][0] = undefined;
|
}
|
if (this.formData[field_.field][1] == null) {
|
this.formData[field_.field][1] = undefined;
|
}
|
}
|
}
|
|
if (this.formData[field_.field] == null || typeof (this.formData[field_.field]) == 'undefined') {
|
if (field_.type != "number" && field_.type != "numberrange") {
|
//this.formData[field_.field] = "";
|
this.$set(this.formData, field_.field, "")
|
}
|
/* else {
|
this.formData[field_.field] = null;
|
} */
|
|
}
|
|
else if (this.formData[field_.field] == undefined && field_.type != "number") {
|
this.formData[field_.field] = null;
|
}
|
}
|
|
this.tableFieldsGroup = listTOListGroup(tableFields_, "group_name", "name");
|
}
|
},
|
methods: {
|
/* function listTOListGroup(array_, groupfield, label) {
|
let result = [];
|
let resultval = [];
|
let resultobj = {};
|
let parentval = " ";
|
|
if (!label) {
|
label = "groupname";
|
}
|
let list = JSON.parse(JSON.stringify(array_));
|
list.map(el => {
|
if (!el[groupfield]) {
|
el[groupfield] = parentval;
|
}
|
})
|
for (let i = 0, len = list.length; i < len; i++) {
|
let groupval_ = list[i][groupfield];
|
if (!resultobj[groupval_]) {
|
resultval.push(groupval_);
|
resultobj[groupval_] = []
|
}
|
resultobj[groupval_].push(list[i]);
|
}
|
resultval.map(v=>{
|
var l_ = {};
|
l_[label] = v;
|
l_.children = resultobj[v];
|
|
result.push(l_);
|
})
|
return result;
|
} */
|
|
cellVisibleChange(obj, row, callback) {//√
|
this.$emit("visible-change", obj, row, callback);
|
},
|
selectClear(obj) {//√
|
this.$emit("select-clear", obj);
|
},
|
selectOptionOperate(obj) {
|
this.$emit("select-option-operate", obj);
|
},
|
formRemoteMethod(obj) {//√
|
this.$emit('remote-method', obj);
|
},
|
showPopup(popupObj) {//弹窗弹出事件
|
this.$emit('show-popup', popupObj);
|
},
|
buttonClick(popupObj) {
|
this.$emit('button-click', popupObj);
|
},
|
/* buttonArrayClick(popupObj) {//按键组点击事件
|
this.$emit('button-array-click', popupObj);
|
}, */
|
|
formChange(popupObj) {
|
this.$emit('form-change', popupObj);
|
},
|
selectChange(obj) {//√
|
this.$emit("select-change", obj);
|
},
|
checkForm() {//检验通过true 否false
|
var bo_ = false;
|
bo_ = this.$refs[this.href][0].checkForm();
|
|
return bo_;
|
},
|
}
|
});
|
|
/*********** h-form-filter ************/
|
Vue.component("h-form-filter", {//表单组件2(查询)
|
template:
|
'<div class="z_form h_form_filter" v-if="isRefresh"> '+
|
'<table style="border-spacing: 0px;">' +
|
'<tr>' +
|
'<td v-if="isiconquery && tableFields.length" class="query-icon">' +
|
'<i class="iconfont icon-guolv"></i>' +
|
'</td>' +
|
'<td>' +
|
'<el-form :model="formData" status-icon '+
|
':label-width="formAttr.labelwidth" '+
|
':label-position="formAttr.labelposition" '+
|
':size="formAttr.size? formAttr.size : \'medium\'" '+
|
':style="{width: width, \'overflow-y\':\'auto\'}"> '+
|
'<table :style="{\'table-layout\':\'fixed\', width: \'100%\', height: \'100%\', \'border-spacing\': \'0px\', \'border-bottom\': formAttr.borderbottom ? formAttr.borderbottom : formAttr.border}"> '+
|
'<tr v-for="(tableField, k) in tableFieldsFormat" :key="k" style="max-height: 30px;"> '+
|
'<td v-for="(fieldObj, kf) in tableField.children" :key="kf" '+
|
':colspan="fieldObj.colspan ? fieldObj.colspan : 1" '+
|
':style="{\'border-left\': formAttr.borderleft ? formAttr.borderleft : formAttr.border, \'border-top\': formAttr.bordertop ? formAttr.bordertop : formAttr.border}"> '+
|
//最后的按键栏
|
'<template v-if="k == tableFieldsFormat.length-1 && kf == tableField.children.length -1">' +//
|
'<div style="width: 100%; text-align: right;"> '+
|
'<el-button-group style="height: 30px;">' +
|
'<el-button v-if="formButton.add" icon="el-icon-plus" @click="h_onAdd">{{formlanguage_map[formlanguage].add}}</el-button>' +
|
'<el-button v-if="formButton.import" icon="el-icon-upload2" @click="h_onImport">{{formlanguage_map[formlanguage].import}}</el-button>' +
|
'<el-button v-if="formButton.export" icon="el-icon-download" @click="h_onExport">{{formlanguage_map[formlanguage].export}}</el-button>' +
|
'<el-button v-if="formButton.sendGSP" icon="el-icon-refresh" @click="h_sendGSP">{{formlanguage_map[formlanguage].sendGSP}}</el-button>' +
|
'<el-button v-if="formButton.query" icon="el-icon-search" @click="h_onQuery">{{formlanguage_map[formlanguage].query}}</el-button>' +
|
'<el-button v-if="formButton.empty" icon="el-icon-remove-outline" @click="h_onInitQuery">{{formlanguage_map[formlanguage].empty}}</el-button>' +
|
|
/* '<el-button icon="iconfont icon-productclassification" @click="h_onQuery"></el-button>' +
|
'<el-button icon="iconfont icon-brand" @click="h_onInitQuery"></el-button>' + */
|
/* '<el-button icon="iconfont icon-liebiao" @click="h_onEditQuery"></el-button>' + */
|
'</el-button-group>' +
|
|
'<el-button-group v-if="isReduce">' +
|
'<el-button type="text" @click="formOpenReduce"> '+
|
'<span v-if="z_isformOpen"> <i class="el-icon-arrow-up"></i>收起 </span>'+
|
'<span v-else> <i class="el-icon-arrow-down"></i>展开 </span>'+
|
'</el-button>' +
|
/* '<el-button icon="iconfont icon-liebiao" @click="h_onEditQuery"></el-button>' + */
|
'</el-button-group>' +
|
'<div v-if="isdraggableorder" class="h_filter_editfield" style="display: inline-block; height: 30px; line-height: 30px; margin-left: 1px;"> '+
|
'<h-draggable-order :datalist="tableFields" :selectdatalist="showTableFields" :identificationfield="identificationfield" '+
|
':labelfield="orderlabelfield" :isselectfield="orderisselect" icon="el-icon-setting" title="筛选字段设置" v-on:save-order="saveOrder"></h-draggable-order>'+
|
|
//'<h-draggable-order :datalist="tableFields" :selectdatalist="tableFields" :identificationfield="identificationfield" :labelfield="labelfield" v-on:save-order="saveOrder"></h-draggable-order> '+
|
'</div> '+
|
'</div> '+
|
'</template> '+
|
|
'<template v-else> '+ //
|
'<el-form-item :label="fieldObj.name ? fieldObj.name + \'：\' : \'\'" :prop="fieldObj.field" :label-width="fieldObj.labelwidth ? fieldObj.labelwidth + \'px\' : \'\'" style="width: 100%; overflow: hidden;" '+
|
':rules="fieldObj.rules" > '+
|
|
//'<table :style="{\'width\': \'100%\', \'height\': \'100%\', \'border-spacing\': \'0px\',\'border\':fieldObj.type==\'popup\' ? \'1px solid #DCDFE6\' : \'0px\',\'border-radius\':fieldObj.type==\'popup\' ? \'4px\' : \'0px\'}"> '+
|
'<table :class="fieldObj.type==\'popup\' ? \'h_form_table_popup\' : \'\'" style="width: 100%; height: 100%; border-spacing: 0px"> '+
|
'<tr >'+
|
'<td v-if="fieldObj.ischeckbox">'+
|
'<el-checkbox v-model="formData[fieldObj.ischeckbox]" @change="ischeckboxchange($event, fieldObj)"></el-checkbox> '+
|
'</td>'+
|
|
'<td v-if="fieldObj.isstamp && formData[fieldObj.isstamp]">'+
|
'<div class="h_stamp"><div class="cell" style="min-width: 40px !important; margin: 0 auto; text-align: center;">{{formData[fieldObj.isstamp]}}</div></div>'+
|
'</td>'+
|
|
'<td v-if="fieldObj.type!=\'popup\'">'+
|
'<el-checkbox v-if="fieldObj.type == \'checkbox\'" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" @change="formchange($event, fieldObj)"></el-checkbox> '+
|
'<el-radio-group v-else-if="fieldObj.type == \'radio\'" v-model="formData[fieldObj.field]" @change="formchange($event, fieldObj)"> '+
|
'<el-radio v-for="(r, k) in fieldObj.options" :key="k" :label="r.code">{{r.value}}</el-radio> '+
|
'</el-radio-group> '+
|
'<el-input v-else-if="fieldObj.type==\'input\'" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)" :placeholder="fieldObj.placeholder ? fieldObj.placeholder : \'\'"></el-input> '+
|
'<el-input v-else-if="fieldObj.type==\'textarea\'" type="textarea" :rows="2" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'daterange\'" type="daterange" v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" :range-separator="formlanguage_map[formlanguage].to" :start-placeholder="formlanguage_map[formlanguage].begin" :end-placeholder="formlanguage_map[formlanguage].end" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'date\'" type="date" v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'month\'" type="month" placeholder="选择月" v-model="formData[fieldObj.field]" value-format="yyyy-MM" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'year\'" type="year" placeholder="选择年" v-model="formData[fieldObj.field]" value-format="yyyy" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'week\'" type="week" placeholder="选择周" v-model="formData[fieldObj.field]" format="yyyy 第 WW 周" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
|
//数字
|
'<el-input-number v-else-if="fieldObj.type == \'number\'" v-model="formData[fieldObj.field]" '+
|
' :controls="fieldObj.controls ? true : false" controls-position="right" '+
|
' :precision="fieldObj.precision ? fieldObj.precision : 0"'+
|
' :class="fieldObj.alignform ? \'input_align_\' + fieldObj.alignform : \'input_align_right\'"'+
|
|
' style="width: 100%" :disabled="fieldObj.disabled" @change="formchange($event, fieldObj)" '+
|
' :min="fieldObj.minval" :max="fieldObj.maxval">'+
|
'</el-input-number> '+
|
|
'<span v-else-if="fieldObj.type==\'span\'" >{{formData[fieldObj.field]}}</span> '+
|
'<el-select v-else-if="fieldObj.type==\'select\' && !(tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" :multiple="fieldObj.ismultiple" @visible-change="visibleChange($event, fieldObj)" collapse-tags @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" :placeholder="formlanguage_map[formlanguage].select" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="fieldObj.field + k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
'<el-select v-else-if="fieldObj.type==\'select\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" :multiple="fieldObj.ismultiple" collapse-tags @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" :placeholder="formlanguage_map[formlanguage].select" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="fieldObj.field + k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
'<el-select v-else-if="fieldObj.type==\'selectbyfilterable\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" :multiple="fieldObj.ismultiple" remote filterable :remote-method="(query)=>remoteMethod(query, fieldObj)" :allow-create="fieldObj.isallowcreate" @visible-change="visibleChange($event, fieldObj, formData)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" :placeholder="formlanguage_map[formlanguage].select" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="fieldObj.field + k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
|
//可新增的下拉选择器
|
'<el-select v-else-if="fieldObj.type==\'selectbyadd\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" popper-class="z_form_selectbyadd"'+
|
' :loading="fieldObj.options.length == 0" :multiple="fieldObj.ismultiple" :filterable="fieldObj.isfilterable" :allow-create="fieldObj.isallowcreate" @visible-change="visibleChange($event, fieldObj, formDataData)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'<div v-if="k1 == 0">'+
|
'<div class="z_option_add" align="center">'+
|
'<el-button type="primary" plain @click.stop="selectoptionoperate(\'add\', fieldObj)">新 增</el-button>'+
|
'</div>'+
|
'<div class="z_option_val">'+
|
'<span style="float: left">{{ item.label }}</span>'+
|
// '<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>'+
|
'</div>'+
|
'</div>'+
|
'<div v-else>'+
|
'<span style="float: left">{{ item.label }}</span>'+
|
// '<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>'+
|
'</div>'+
|
'</el-option> '+
|
'</el-select> '+
|
'<el-cascader v-else-if="fieldObj.type==\'cascaderbyadd\'" v-model="formData[fieldObj.field]" :options="fieldObj.options" :props="fieldObj.props" style="width: 100%;" popper-class="z_form_cascaderbyadd" @change="formchange($event, fieldObj)">'+
|
'<template slot-scope="{ node, data }">'+
|
'<template v-if="data.label == \'cascaderbyadd\'" >'+
|
// '<span>{{ data.label }}</span>'+
|
'<div class="z_option_add" align="center">'+
|
'<el-button type="primary" plain @click.stop="selectoptionoperate(\'add\', fieldObj)">新 增</el-button>'+
|
'</div>'+
|
// '<span class="z_option_add" align="center">'+
|
// '<el-button type="primary" plain @click.stop="selectoptionoperate(\'add\', fieldObj)">新 增</el-button>'+
|
// '</span>'+
|
'</template>'+
|
'<template v-else>'+
|
'<span>{{ data.label }}</span>'+
|
'<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>'+
|
'</template>'+
|
'</template>'+
|
'</el-cascader>'+
|
'<el-cascader v-else-if="fieldObj.type==\'cascader\'" v-model="formData[fieldObj.field]" :options="fieldObj.options" :props="fieldObj.props" style="width: 100%;" @change="formchange($event, fieldObj)"></el-cascader>'+
|
'</td>'+
|
|
'<td v-if="fieldObj.type==\'popup\'" align="left" style="width: auto; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" class="el-form-item__content"> '+
|
//'<el-input class="from_popup_input" v-model="formData[fieldObj.field]"></el-input> '+
|
|
'<el-input v-if="fieldObj.popupisinput" class="from_popup_input" v-model="formData[fieldObj.field]"></el-input> '+
|
'<span v-else class="h_down">{{formData[fieldObj.field]}}</span> '+
|
'</td> '+
|
//{{formData[fieldObj.field]}}
|
/* '<td>'+
|
|
'</td>'+ */
|
'<td v-if="fieldObj.type==\'popup\'" style="padding: 0px;">'+
|
'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-more" :disabled="fieldObj.disabled" @click="showpopup(fieldObj)"></el-button> '+
|
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</el-form-item> '+
|
'</template>' +
|
'</td> '+
|
'</tr> '+
|
'</table> '+
|
'</el-form> '+
|
'</td> '+
|
'</tr> '+
|
'</table> '+
|
|
|
'</div>',
|
props: {
|
formAttr: Object,
|
tableFields: Array,
|
formData: Object,
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
identificationfield: {//属性数据标识字段
|
type: String,
|
default: "field"
|
},
|
orderlabelfield: {//
|
type: String,
|
default: "name"
|
},
|
orderisselect: {//显示和隐藏的字段及对应值
|
type: Object,
|
default: function(){
|
return {
|
field: "isshow",
|
show: "T",
|
hide: "F"
|
};
|
}
|
},
|
isiconquery: {//首行是否存在图标
|
type: Boolean,
|
default: true
|
},
|
isdraggableorder: {//是否允许编辑字段顺序
|
type: Boolean,
|
default: false
|
},
|
isReduce: {//是否允许展开
|
type: Boolean,
|
default: false
|
},
|
isFormOpen: {//是否展开
|
type: Boolean,
|
default: true
|
},
|
isbuttonquery: {
|
type: Boolean,
|
default: true
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
buttonloading: {//按键的转圈圈
|
type: Boolean,
|
default: false
|
},
|
width: {
|
type: String,
|
default: "100%"
|
},
|
"formlanguage": {//表格语言
|
type: String,
|
default: "zh"
|
},
|
|
"formButton": {//筛选表单的功能按键
|
type: Object,
|
default: function(){
|
return {
|
query: true,//查询
|
empty: true,//重置
|
add: false,//添加
|
import: false,//导入
|
export: false,//导出
|
}
|
}
|
},
|
|
},
|
data() {
|
return {
|
isRefresh: true,
|
tableFieldsFormat: [],
|
formFieldsObj: {},
|
z_isformOpen: true,//是否展开
|
formlanguage_map: {
|
zh: {
|
query: "查询",
|
empty: "重置",
|
add: "新增",
|
import: "导入",
|
export: "导出",
|
sendGSP: "同步至GSP",
|
|
select: "请选择",
|
begin: "开始日期",
|
end: "结束日期",
|
to: "至"
|
},
|
en: {
|
query: "Search",
|
empty: "Clean",
|
add: "Add",
|
import: "Import",
|
export: "Export",
|
sendGSP: "SendGSP",
|
|
select: "Select",
|
begin: "begin",
|
end: "end",
|
to: "to"
|
},
|
},
|
|
showTableFields: [],
|
}
|
},
|
computed: {
|
tableFields2() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
}
|
},
|
watch: {
|
// formData:{
|
// handler(newd, oldd) {
|
// this.h_onQuery();
|
// },
|
// deep: true,
|
// },
|
tableFields() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.tableFields.map(e=>{
|
if (e.inputtypefilter && !e.type) {
|
e.type = e.inputtypefilter.toLowerCase();
|
}
|
else if (!e.type) {
|
e.type = "input";
|
}
|
|
//设置下拉选项的（根据字典数据设置）
|
if (e.type == "select" || e.type == "selectmultiple" || e.type == "cascader") {
|
if (!e.props) {
|
var props_ = {value: "code", label: "value"};
|
e.props = clone(props_);
|
}
|
|
if (e.optionsgroup) {
|
//:options="fieldObj.options" :props="fieldObj.props"
|
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var list_ = window.top.Dictionary.getList(e.optionsgroup);
|
e.options = clone(list_);
|
}
|
else if(!e.options) {
|
e.options = []
|
}
|
}
|
|
if (e.type == "radio" || e.type == "checkboxobj") {
|
if (e.optionsgroup) {
|
//:options="fieldObj.options" :props="fieldObj.props" ;//{value: "code", label: "value"};
|
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var list_ = window.top.Dictionary.getList(e.optionsgroup);
|
e.options = clone(list_);
|
}
|
else if(!e.options) {
|
e.options = []
|
}
|
}
|
|
//国际化设置，目前仅支持中/英
|
if (h_language && h_language=="en" && e.labelenglish) {
|
if (!e.labelchinese) {
|
e.labelchinese = clone(e.name);
|
}
|
e.name = clone(e.labelenglish);
|
}
|
else {
|
if (e.labelchinese) {
|
e.name = clone(e.labelchinese);
|
}
|
}
|
});
|
this.formLayout();
|
}
|
}
|
},
|
|
mounted() {
|
this.z_isformOpen = this.isFormOpen;
|
if(this.formAttr && this.tableFields && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
},
|
methods: {
|
saveOrder(v) {
|
// var obj = {
|
// select_datalist: select_datalist_,
|
// data_list: this.data_list
|
// }
|
this.$emit('order-fields', v);
|
},
|
formLayout() {
|
if (this.isReduce) {
|
this.doFormOpenReduce();
|
}
|
else {
|
var tableFields_open_ = clone(this.tableFields);
|
this.doFormLayout(tableFields_open_);
|
}
|
},
|
formOpenReduce() {
|
this.z_isformOpen = !this.z_isformOpen;
|
this.doFormOpenReduce();
|
},
|
doFormOpenReduce() {
|
var me = this;
|
if (this.z_isformOpen) {//展开
|
//获取全部字段
|
var tableFields_open_ = clone(this.tableFields);
|
//表单布局设置
|
this.doFormLayout(tableFields_open_, function() {
|
//如果有表格则表格高度设置
|
me.$emit("on-formlayout-after");
|
});
|
|
}
|
else {//收起
|
//获取收起后字段
|
var tableFields_open_ = [];
|
this.tableFields.map(t=>{
|
if (t.isopenshow) {
|
tableFields_open_.push(t);
|
}
|
});
|
|
if (tableFields_open_.length == 0 && this.tableFields.length > 0) {
|
tableFields_open_.push(this.tableFields[0]);
|
}
|
//表单布局设置
|
this.doFormLayout(tableFields_open_, function() {
|
//如果有表格则表格高度设置
|
me.$emit("on-formlayout-after");
|
});
|
}
|
},
|
doFormLayout(tableFields, callback) {
|
var me = this;
|
//表单布局设置
|
let columnnumber_ = this.formAttr.columnnumber;
|
let tableFieldsFormat_ = [];
|
|
let rowObj_ = {};
|
let children_ = [];
|
let i = 0;
|
let field_i = 0;
|
let tableFields_ = clone(tableFields);
|
let button_ = {isshow: "T", field: "id_filter_button_"};
|
if(tableFields_) {
|
tableFields_.push(button_);
|
}
|
me.showTableFields = [];
|
for (var r=0; r<tableFields_.length; r++) {
|
let field_ = tableFields_[r];
|
|
if (field_.isshow == "T") {
|
me.showTableFields.push(field_);
|
}
|
|
if (h_language == "en" && field_.labelenglish) {
|
if (!field_.labelchinese) {
|
field_.labelchinese = clone(field_.name);
|
}
|
|
field_.name = clone(field_.labelenglish);
|
}
|
else {
|
if (field_.labelchinese) {
|
field_.name = clone(field_.labelchinese);
|
}
|
}
|
|
this.formFieldsObj[field_.field] = field_;
|
if(!field_.type || field_.type == "") {
|
field_.type = "input";
|
}
|
if (field_.isshow != "T") {
|
continue;
|
}
|
|
// field_.rules = [];
|
// if (field_.required) {//是否必填
|
// let required_ = {
|
// required: true,
|
// message: "请输入"+field_.name,
|
// trigger: "blur"
|
// };
|
// field_.rules.push(required_);
|
// }
|
// if (field_.pattern) {//填写规则，正则表达式
|
// var pattern_ = new RegExp(field_.pattern);
|
// let required_ = {
|
// pattern: pattern_,
|
// message: "请填写正确的"+field_.name,
|
// trigger: "blur"
|
// };
|
// field_.rules.push(required_);
|
// }
|
|
if (field_.colspan > columnnumber_) {//如果合并列大于表单设置列数
|
field_.colspan = columnnumber_;
|
}
|
field_i += field_.colspan ? field_.colspan : 1;//如果有合并列数, 默认为1
|
|
if (field_i == columnnumber_) {//列数满一行
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
else {//不满一行, 看是否存在下一属性，
|
//若有则看已有列数加下一合并列数是否超过设置列数，若超了则自动调整该属性的合并列，使下一属性换行。
|
//若没有下一属性，则调整该属性合并列
|
let nxt_r = r + 1;
|
let field_nxt = {};
|
if(nxt_r < tableFields_.length) {
|
for (var nxt_j = nxt_r; nxt_j < tableFields_.length; nxt_j++) {
|
let field_nxtj = tableFields_[nxt_j];
|
if(field_nxtj.isshow!="T") {
|
continue;
|
}
|
else {
|
field_nxt = field_nxtj;
|
break
|
}
|
}
|
}
|
|
if (field_nxt.field) {
|
//let field_nxt = tableFields_[nxt_r];
|
if(field_nxt.colspan) {
|
let field_i_nxt = field_i + field_nxt.colspan;
|
if (field_i_nxt > columnnumber_) {
|
field_.colspan = columnnumber_ - i;
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
else {
|
children_.push(field_);
|
i++;
|
}
|
}
|
else {
|
children_.push(field_);
|
i++;
|
}
|
}
|
else {
|
field_.colspan = columnnumber_ - i;
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
}
|
|
if (i == columnnumber_) {//列数满一行，保留该行属性，新建下一空行
|
rowObj_.children = children_;
|
tableFieldsFormat_.push(rowObj_);
|
rowObj_ = {};
|
children_ = [];
|
i = 0;
|
field_i = 0;
|
}
|
}
|
this.tableFieldsFormat = tableFieldsFormat_;
|
|
if (callback) {
|
this.$nextTick(function(){
|
callback();
|
})
|
}
|
},
|
h_onQuery() {
|
this.$emit("on-query");
|
},
|
h_onInitQuery() {
|
this.$emit("on-init-query");
|
},
|
h_onEditQuery() {
|
this.$emit("on-edit-query");
|
},
|
h_sendGSP() {
|
this.$emit("on-form-button", 'sendGSP');
|
},
|
h_onAdd() {
|
this.$emit("on-form-button", 'add');
|
},
|
h_onImport() {
|
this.$emit("on-form-button", 'import');
|
},
|
h_onExport() {
|
this.$emit("on-form-button", 'export');
|
},
|
|
refresh() {
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
showpopup(obj) {//弹窗弹出事件
|
let val = this.formData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val
|
};
|
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].popup && this.tableFieldClick[obj.field].popup.onclick) {
|
this.tableFieldClick[obj.field].popup.onclick(popupObj);
|
}
|
// this.$emit('show-popup', popupObj);
|
},
|
setFormValByField(field, val) {
|
this.formData[field] = val;
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
setFormOptionsByField(fieldobj, result) {
|
let tableFieldsFormat_ = this.tableFieldsFormat;
|
tableFieldsFormat_.map(item => {
|
item.children.map(item2 => {
|
if (item2.field.toLowerCase().indexOf(fieldobj.field.toLowerCase()) > -1) {
|
item2.options = result;
|
}
|
});
|
});
|
this.tableFieldsFormat = tableFieldsFormat_;
|
},
|
visibleChange(isshow, obj) {//下拉展开事件
|
if (isshow) {
|
// (tableFieldClick[obj.field] && tableFieldClick[obj.field].visible && tableFieldClick[obj.field].visible.onchange)
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].visible && this.tableFieldClick[obj.field].visible.onchange) {
|
this.tableFieldClick[obj.field].visible.onchange(obj, function(obj_) {
|
obj.options = obj_.options;
|
});
|
}
|
// this.$emit("visible-change", obj);
|
}
|
},
|
formchange(val, obj) {
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
//this.$emit("form-change", obj_);
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].input && this.tableFieldClick[obj.field].input.onchange) {
|
this.tableFieldClick[obj.field].input.onchange(obj_);
|
}
|
// this.$emit("on-formchange", obj_);
|
},
|
ischeckboxchange(val, obj) {
|
obj.disabled = !val;
|
},
|
remoteMethod(query, fieldObj) {
|
var fromFieldsObj_ = clone(this.formFieldsObj);
|
|
var fromFieldObj_ = fromFieldsObj_[fieldObj.field];
|
var obj = {
|
query: query,
|
fieldObj: fieldObj
|
}
|
|
if (query !== '') {
|
this.$emit('remote-method', obj);
|
} else {
|
fieldObj.options = [];
|
}
|
},
|
selectChange(val, obj) {
|
this.formData[obj.field] = val;
|
let me = this;
|
if (obj.selectchildren) {
|
obj.selectchildren.map(e=>{
|
let tableFieldsFormat_ = me.tableFieldsFormat;
|
tableFieldsFormat_.map(item => {
|
item.children.map(item2 => {
|
if (item2.field.toLowerCase().indexOf(e.toLowerCase()) > -1) {
|
if(item2.ismultiple) {
|
me.formData[e] = [];
|
}
|
else {
|
me.formData[e] = "";
|
}
|
}
|
});
|
});
|
});
|
}
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].select && this.tableFieldClick[obj.field].select.onchange) {
|
this.tableFieldClick[obj.field].select.onchange(obj_, function() {
|
//选择后自动查询数据
|
me.h_onQuery()
|
});
|
}
|
else {
|
//选择后自动查询数据
|
this.h_onQuery()
|
}
|
// this.$emit("select-change", obj_);
|
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
|
selectoptionoperate(type, obj) {
|
var obj_ = {
|
type: type,
|
fieldobj: obj
|
}
|
this.$emit("select-option-operate", obj_);
|
},
|
|
|
}
|
});
|
|
/*********** 拖拽表单 ************/
|
Vue.component("h-form-draggable", {//拖拽表单
|
template:
|
'<div class="z_form h_form_draggable" v-if="isRefresh"> '+
|
'<el-form :model="formData" status-icon '+
|
':label-width="formAttr.labelwidth" '+
|
':label-position="formAttr.labelposition" '+
|
':size="formAttr.size? formAttr.size : \'medium\'" '+
|
':style="{width: width, \'overflow-y\':\'auto\'}"> '+
|
|
//'<template v-for="(tableField, k) in tableFieldsFormat">' +//
|
'<draggable v-model="tableFields" group="itxst" animation="300">'+
|
'<transition-group>'+
|
'<div v-for="(fieldObj, kf) in tableFields" :key="kf" :style="{width: 100/formAttr.columnnumber-1 + \'%\', display: \'inline-block\'}">' +//formAttr.columnnumber
|
//最后的按键栏
|
//'<template v-if="k == tableFieldsFormat.length-1 && kf == tableField.children.length -1">' +//
|
//
|
//'</template> '+
|
|
//'<template v-else> '+ //
|
|
'<el-form-item :label="fieldObj.name ? fieldObj.name + \'：\' : \'\'" :prop="fieldObj.field" :label-width="fieldObj.labelwidth" style="width: 100%; overflow: hidden;" '+
|
':rules="fieldObj.rules" > '+
|
|
'<table :class="fieldObj.type==\'popup\' ? \'h_form_table_popup\' : \'\'" style="width: 100%; height: 100%; border-spacing: 0px"> '+
|
'<tr >'+
|
'<td v-if="fieldObj.ischeckbox">'+
|
'<el-checkbox v-model="formData[fieldObj.ischeckbox]" @change="ischeckboxchange($event, fieldObj)"></el-checkbox> '+
|
'</td>'+
|
|
'<td v-if="fieldObj.isstamp && formData[fieldObj.isstamp]">'+
|
'<div class="h_stamp"><div class="cell" style="min-width: 40px !important; margin: 0 auto; text-align: center;">{{formData[fieldObj.isstamp]}}</div></div>'+
|
'</td>'+
|
|
'<td v-if="fieldObj.type!=\'popup\'">'+
|
'<el-checkbox v-if="fieldObj.type == \'checkbox\'" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" @change="formchange($event, fieldObj)"></el-checkbox> '+
|
'<el-radio-group v-else-if="fieldObj.type == \'radio\'" v-model="formData[fieldObj.field]" @change="formchange($event, fieldObj)"> '+
|
'<el-radio v-for="(r, k) in fieldObj.options" :key="k" :label="r.code">{{r.name}}</el-radio> '+
|
'</el-radio-group> '+
|
'<el-input v-else-if="fieldObj.type==\'input\'" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
|
'<el-input v-else-if="fieldObj.type==\'textarea\'" type="textarea" :rows="2" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'daterange\'" type="daterange" v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" :range-separator="formlanguage_map[formlanguage].to" :start-placeholder="formlanguage_map[formlanguage].begin" :end-placeholder="formlanguage_map[formlanguage].end" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'date\'" type="date" v-model="formData[fieldObj.field]" value-format="yyyy-MM-dd" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'month\'" type="month" placeholder="选择月" v-model="formData[fieldObj.field]" value-format="yyyy-MM" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'year\'" type="year" placeholder="选择年" v-model="formData[fieldObj.field]" value-format="yyyy" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
|
//数字
|
'<el-input-number v-else-if="fieldObj.type == \'number\'" v-model="formData[fieldObj.field]" '+
|
' :controls="fieldObj.controls ? true : false" controls-position="right" '+
|
' :precision="fieldObj.precision ? fieldObj.precision : 0"'+
|
' :class="fieldObj.alignform ? \'input_align_\' + fieldObj.alignform : \'input_align_right\'"'+
|
|
' style="width: 100%" :disabled="fieldObj.disabled" @change="formchange($event, fieldObj)" '+
|
' :min="fieldObj.minval" :max="fieldObj.maxval">'+
|
'</el-input-number> '+
|
|
'<span v-else-if="fieldObj.type==\'span\'" >{{formData[fieldObj.field]}}</span> '+
|
'<el-select v-else-if="fieldObj.type==\'select\' && !(tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" :multiple="fieldObj.ismultiple" @visible-change="visibleChange($event, fieldObj)" collapse-tags @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" :placeholder="formlanguage_map[formlanguage].select" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="fieldObj.field + k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
'<el-select v-else-if="fieldObj.type==\'select\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" :multiple="fieldObj.ismultiple" collapse-tags @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" :placeholder="formlanguage_map[formlanguage].select" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="fieldObj.field + k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
'<el-select v-else-if="fieldObj.type==\'selectbyfilterable\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" :multiple="fieldObj.ismultiple" remote filterable :remote-method="(query)=>remoteMethod(query, fieldObj)" :allow-create="fieldObj.isallowcreate" @visible-change="visibleChange($event, fieldObj, formData)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" :placeholder="formlanguage_map[formlanguage].select" style="width: 100%;"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="fieldObj.field + k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'</el-option> '+
|
'</el-select> '+
|
|
//可新增的下拉选择器
|
'<el-select v-else-if="fieldObj.type==\'selectbyadd\' && (tableFieldClick[fieldObj.field] && tableFieldClick[fieldObj.field].visible && tableFieldClick[fieldObj.field].visible.onchange)" '+
|
' :clearable="fieldObj.isnotclearable ? false : true"'+
|
' @clear="selectClear(fieldObj)" popper-class="z_form_selectbyadd"'+
|
' :loading="fieldObj.options.length == 0" :multiple="fieldObj.ismultiple" :filterable="fieldObj.isfilterable" :allow-create="fieldObj.isallowcreate" @visible-change="visibleChange($event, fieldObj, formDataData)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" :placeholder="fieldObj.placeholder" :style="{width: fieldObj.valuewidth ? fieldObj.valuewidth : \'100%\'}"> '+
|
'<el-option '+
|
'v-for="(item,k1) in fieldObj.options" '+
|
':key="k1" '+
|
':label="fieldObj.props ? item[fieldObj.props.label] : item.label" '+
|
':value="fieldObj.props ? item[fieldObj.props.value] : item.value"> '+
|
'<div v-if="k1 == 0">'+
|
'<div class="z_option_add" align="center">'+
|
'<el-button type="primary" plain @click.stop="selectoptionoperate(\'add\', fieldObj)">新 增</el-button>'+
|
'</div>'+
|
'<div class="z_option_val">'+
|
'<span style="float: left">{{ item.label }}</span>'+
|
// '<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>'+
|
'</div>'+
|
'</div>'+
|
'<div v-else>'+
|
'<span style="float: left">{{ item.label }}</span>'+
|
// '<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>'+
|
'</div>'+
|
'</el-option> '+
|
'</el-select> '+
|
'<el-cascader v-else-if="fieldObj.type==\'cascaderbyadd\'" v-model="formData[fieldObj.field]" :options="fieldObj.options" :props="fieldObj.props" style="width: 100%;" popper-class="z_form_cascaderbyadd" @change="formchange($event, fieldObj)">'+
|
'<template slot-scope="{ node, data }">'+
|
'<template v-if="data.label == \'cascaderbyadd\'" >'+
|
// '<span>{{ data.label }}</span>'+
|
'<div class="z_option_add" align="center">'+
|
'<el-button type="primary" plain @click.stop="selectoptionoperate(\'add\', fieldObj)">新 增</el-button>'+
|
'</div>'+
|
// '<span class="z_option_add" align="center">'+
|
// '<el-button type="primary" plain @click.stop="selectoptionoperate(\'add\', fieldObj)">新 增</el-button>'+
|
// '</span>'+
|
'</template>'+
|
'<template v-else>'+
|
'<span>{{ data.label }}</span>'+
|
'<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>'+
|
'</template>'+
|
'</template>'+
|
'</el-cascader>'+
|
'<el-cascader v-else-if="fieldObj.type==\'cascader\'" v-model="formData[fieldObj.field]" :options="fieldObj.options" :props="fieldObj.props" style="width: 100%;" @change="formchange($event, fieldObj)"></el-cascader>'+
|
'</td>'+
|
|
'<td v-if="fieldObj.type==\'popup\'" align="left" style="width: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" class="el-form-item__content"> '+
|
//'<el-input class="from_popup_input" v-model="formData[fieldObj.field]"></el-input> '+
|
|
'<el-input v-if="fieldObj.popupisinput" class="from_popup_input" v-model="formData[fieldObj.field]"></el-input> '+
|
'<span v-else class="h_down">{{formData[fieldObj.field]}}</span> '+
|
'</td> '+
|
//{{formData[fieldObj.field]}}
|
/* '<td>'+
|
|
'</td>'+ */
|
'<td v-if="fieldObj.type==\'popup\'" style="padding: 0px;">'+
|
'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-more" :disabled="fieldObj.disabled" @click="showpopup(fieldObj)"></el-button> '+
|
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</el-form-item> '+
|
|
//'</template>' +
|
'</div> '+
|
'</transition-group>'+
|
'</draggable>'+
|
|
// '</template> '+
|
'</el-form> '+
|
|
|
'</div>',
|
props: {
|
formAttr: Object,
|
tableFields: Array,
|
formData: Object,
|
tableFieldClick: {//字段对应的点击事件
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
identificationfield: {//属性数据标识字段
|
type: String,
|
default: "field"
|
},
|
orderlabelfield: {//
|
type: String,
|
default: "name"
|
},
|
orderisselect: {//显示和隐藏的字段及对应值
|
type: Object,
|
default: function(){
|
return {
|
field: "isshow",
|
show: "T",
|
hide: "F"
|
};
|
}
|
},
|
isiconquery: {//首行是否存在图标
|
type: Boolean,
|
default: true
|
},
|
isdraggableorder: {//是否允许编辑字段顺序
|
type: Boolean,
|
default: false
|
},
|
isReduce: {//是否允许展开
|
type: Boolean,
|
default: false
|
},
|
isFormOpen: {//是否展开
|
type: Boolean,
|
default: true
|
},
|
isbuttonquery: {
|
type: Boolean,
|
default: true
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
buttonloading: {//按键的转圈圈
|
type: Boolean,
|
default: false
|
},
|
width: {
|
type: String,
|
default: "100%"
|
},
|
"formlanguage": {//表格语言
|
type: String,
|
default: "zh"
|
},
|
|
"formButton": {//筛选表单的功能按键
|
type: Object,
|
default: function(){
|
return {
|
query: true,//查询
|
empty: true,//重置
|
add: false,//添加
|
import: false,//导入
|
export: false,//导出
|
}
|
}
|
},
|
|
},
|
data() {
|
return {
|
isRefresh: true,
|
tableFieldsFormat: [],
|
formFieldsObj: {},
|
z_isformOpen: true,//是否展开
|
formlanguage_map: {
|
zh: {
|
query: "查询",
|
empty: "重置",
|
add: "新增",
|
import: "导入",
|
export: "导出",
|
sendGSP: "同步至GSP",
|
|
select: "请选择",
|
begin: "开始日期",
|
end: "结束日期",
|
to: "至"
|
},
|
en: {
|
query: "Search",
|
empty: "Clean",
|
add: "Add",
|
import: "Import",
|
export: "Export",
|
sendGSP: "SendGSP",
|
|
select: "Select",
|
begin: "begin",
|
end: "end",
|
to: "to"
|
},
|
},
|
|
showTableFields: [],
|
}
|
},
|
computed: {
|
tableFields2() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
}
|
},
|
watch: {
|
tableFields() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.tableFields.map(e=>{
|
if (e.inputtypefilter && !e.type) {
|
e.type = e.inputtypefilter.toLowerCase();
|
}
|
else if (!e.type) {
|
e.type = "input";
|
}
|
|
//设置下拉选项的（根据字典数据设置）
|
if (e.type == "select" || e.type == "cascader") {
|
if (e.optionsgroup) {
|
var props_ = {value: "code", label: "value"};
|
//:options="fieldObj.options" :props="fieldObj.props"
|
//根据optionsname获取公用的对应关系，从字典中获取,字典数据从数据库获取
|
var list_ = window.top.Dictionary.getList(e.optionsgroup);
|
e.props = clone(props_);
|
e.options = clone(list_);
|
}
|
else if(!e.options) {
|
e.options = []
|
}
|
}
|
|
//国际化设置，目前仅支持中/英
|
if (h_language && h_language=="en" && e.labelenglish) {
|
if (!e.labelchinese) {
|
e.labelchinese = clone(e.name);
|
}
|
e.name = clone(e.labelenglish);
|
}
|
else {
|
if (e.labelchinese) {
|
e.name = clone(e.labelchinese);
|
}
|
}
|
});
|
this.formLayout();
|
}
|
}
|
},
|
|
mounted() {
|
this.z_isformOpen = this.isFormOpen;
|
if(this.formAttr && this.tableFields && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
},
|
methods: {
|
saveOrder(v) {
|
// var obj = {
|
// select_datalist: select_datalist_,
|
// data_list: this.data_list
|
// }
|
this.$emit('order-fields', v);
|
},
|
formLayout() {
|
if (this.isReduce) {
|
this.doFormOpenReduce();
|
}
|
else {
|
var tableFields_open_ = clone(this.tableFields);
|
this.doFormLayout(tableFields_open_);
|
}
|
},
|
formOpenReduce() {
|
this.z_isformOpen = !this.z_isformOpen;
|
this.doFormOpenReduce();
|
},
|
doFormOpenReduce() {
|
var me = this;
|
if (this.z_isformOpen) {//展开
|
//获取全部字段
|
var tableFields_open_ = clone(this.tableFields);
|
//表单布局设置
|
this.doFormLayout(tableFields_open_, function() {
|
//如果有表格则表格高度设置
|
me.$emit("on-formlayout-after");
|
});
|
|
}
|
else {//收起
|
//获取收起后字段
|
var tableFields_open_ = [];
|
this.tableFields.map(t=>{
|
if (t.isopenshow) {
|
tableFields_open_.push(t);
|
}
|
});
|
|
if (tableFields_open_.length == 0 && this.tableFields.length > 0) {
|
tableFields_open_.push(this.tableFields[0]);
|
}
|
//表单布局设置
|
this.doFormLayout(tableFields_open_, function() {
|
//如果有表格则表格高度设置
|
me.$emit("on-formlayout-after");
|
});
|
}
|
},
|
doFormLayout(tableFields, callback) {
|
var me = this;
|
//表单布局设置
|
let columnnumber_ = this.formAttr.columnnumber;
|
let tableFieldsFormat_ = [];
|
|
let rowObj_ = {};
|
let children_ = [];
|
let i = 0;
|
let field_i = 0;
|
let tableFields_ = clone(tableFields);
|
let button_ = {isshow: "T", field: "id_filter_button_"};
|
if(tableFields_) {
|
tableFields_.push(button_);
|
}
|
me.showTableFields = [];
|
for (var r=0; r<tableFields_.length; r++) {
|
let field_ = tableFields_[r];
|
|
if (field_.isshow == "T") {
|
me.showTableFields.push(field_);
|
}
|
|
if (h_language == "en" && field_.labelenglish) {
|
if (!field_.labelchinese) {
|
field_.labelchinese = clone(field_.name);
|
}
|
|
field_.name = clone(field_.labelenglish);
|
}
|
else {
|
if (field_.labelchinese) {
|
field_.name = clone(field_.labelchinese);
|
}
|
}
|
|
this.formFieldsObj[field_.field] = field_;
|
if(!field_.type || field_.type == "") {
|
field_.type = "input";
|
}
|
if (field_.isshow != "T") {
|
continue;
|
}
|
|
// field_.rules = [];
|
// if (field_.required) {//是否必填
|
// let required_ = {
|
// required: true,
|
// message: "请输入"+field_.name,
|
// trigger: "blur"
|
// };
|
// field_.rules.push(required_);
|
// }
|
// if (field_.pattern) {//填写规则，正则表达式
|
// var pattern_ = new RegExp(field_.pattern);
|
// let required_ = {
|
// pattern: pattern_,
|
// message: "请填写正确的"+field_.name,
|
// trigger: "blur"
|
// };
|
// field_.rules.push(required_);
|
// }
|
|
if (field_.colspan > columnnumber_) {//如果合并列大于表单设置列数
|
field_.colspan = columnnumber_;
|
}
|
field_i += field_.colspan ? field_.colspan : 1;//如果有合并列数, 默认为1
|
|
if (field_i == columnnumber_) {//列数满一行
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
else {//不满一行, 看是否存在下一属性，
|
//若有则看已有列数加下一合并列数是否超过设置列数，若超了则自动调整该属性的合并列，使下一属性换行。
|
//若没有下一属性，则调整该属性合并列
|
let nxt_r = r + 1;
|
let field_nxt = {};
|
if(nxt_r < tableFields_.length) {
|
for (var nxt_j = nxt_r; nxt_j < tableFields_.length; nxt_j++) {
|
let field_nxtj = tableFields_[nxt_j];
|
if(field_nxtj.isshow!="T") {
|
continue;
|
}
|
else {
|
field_nxt = field_nxtj;
|
break
|
}
|
}
|
}
|
|
if (field_nxt.field) {
|
//let field_nxt = tableFields_[nxt_r];
|
if(field_nxt.colspan) {
|
let field_i_nxt = field_i + field_nxt.colspan;
|
if (field_i_nxt > columnnumber_) {
|
field_.colspan = columnnumber_ - i;
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
else {
|
children_.push(field_);
|
i++;
|
}
|
}
|
else {
|
children_.push(field_);
|
i++;
|
}
|
}
|
else {
|
field_.colspan = columnnumber_ - i;
|
children_.push(field_);
|
i = columnnumber_;
|
}
|
}
|
|
if (i == columnnumber_) {//列数满一行，保留该行属性，新建下一空行
|
rowObj_.children = children_;
|
tableFieldsFormat_.push(rowObj_);
|
rowObj_ = {};
|
children_ = [];
|
i = 0;
|
field_i = 0;
|
}
|
}
|
this.tableFieldsFormat = tableFieldsFormat_;
|
|
if (callback) {
|
this.$nextTick(function(){
|
callback();
|
})
|
}
|
},
|
h_onQuery() {
|
this.$emit("on-query");
|
},
|
h_onInitQuery() {
|
this.$emit("on-init-query");
|
},
|
h_onEditQuery() {
|
this.$emit("on-edit-query");
|
},
|
h_sendGSP() {
|
this.$emit("on-form-button", 'sendGSP');
|
},
|
h_onAdd() {
|
this.$emit("on-form-button", 'add');
|
},
|
h_onImport() {
|
this.$emit("on-form-button", 'import');
|
},
|
h_onExport() {
|
this.$emit("on-form-button", 'export');
|
},
|
|
refresh() {
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
showpopup(obj) {//弹窗弹出事件
|
let val = this.formData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val
|
};
|
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].popup && this.tableFieldClick[obj.field].popup.onclick) {
|
this.tableFieldClick[obj.field].popup.onclick(popupObj);
|
}
|
// this.$emit('show-popup', popupObj);
|
},
|
setFormValByField(field, val) {
|
this.formData[field] = val;
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
setFormOptionsByField(fieldobj, result) {
|
let tableFieldsFormat_ = this.tableFieldsFormat;
|
tableFieldsFormat_.map(item => {
|
item.children.map(item2 => {
|
if (item2.field.toLowerCase().indexOf(fieldobj.field.toLowerCase()) > -1) {
|
item2.options = result;
|
}
|
});
|
});
|
this.tableFieldsFormat = tableFieldsFormat_;
|
},
|
visibleChange(isshow, obj) {//下拉展开事件
|
if (isshow) {
|
// (tableFieldClick[obj.field] && tableFieldClick[obj.field].visible && tableFieldClick[obj.field].visible.onchange)
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].visible && this.tableFieldClick[obj.field].visible.onchange) {
|
this.tableFieldClick[obj.field].visible.onchange(obj);
|
}
|
// this.$emit("visible-change", obj);
|
}
|
},
|
formchange(val, obj) {
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
//this.$emit("form-change", obj_);
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].input && this.tableFieldClick[obj.field].input.onchange) {
|
this.tableFieldClick[obj.field].input.onchange(obj_);
|
}
|
// this.$emit("on-formchange", obj_);
|
},
|
ischeckboxchange(val, obj) {
|
obj.disabled = !val;
|
},
|
remoteMethod(query, fieldObj) {
|
var fromFieldsObj_ = clone(this.formFieldsObj);
|
|
var fromFieldObj_ = fromFieldsObj_[fieldObj.field];
|
var obj = {
|
query: query,
|
fieldObj: fieldObj
|
}
|
|
if (query !== '') {
|
this.$emit('remote-method', obj);
|
} else {
|
fieldObj.options = [];
|
}
|
},
|
selectChange(val, obj) {
|
this.formData[obj.field] = val;
|
let me = this;
|
if (obj.selectchildren) {
|
obj.selectchildren.map(e=>{
|
let tableFieldsFormat_ = me.tableFieldsFormat;
|
tableFieldsFormat_.map(item => {
|
item.children.map(item2 => {
|
if (item2.field.toLowerCase().indexOf(e.toLowerCase()) > -1) {
|
if(item2.ismultiple) {
|
me.formData[e] = [];
|
}
|
else {
|
me.formData[e] = "";
|
}
|
}
|
});
|
});
|
});
|
}
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
|
if (this.tableFieldClick[obj.field] && this.tableFieldClick[obj.field].select && this.tableFieldClick[obj.field].select.onchange) {
|
this.tableFieldClick[obj.field].select.onchange(obj_);
|
}
|
// this.$emit("select-change", obj_);
|
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
|
selectoptionoperate(type, obj) {
|
var obj_ = {
|
type: type,
|
fieldobj: obj
|
}
|
this.$emit("select-option-operate", obj_);
|
},
|
|
}
|
});
|
|
//**************h-tree*******************
|
Vue.component("h-tree", {
|
template: [
|
'<div :class="[\'z_left_menu_tree\', isCheckbox ? \'z_left_menu_checkbox\' : \'\']">',
|
'<el-tree ref="hierTree" class="filter-tree" :node-key="nodekey" :indent="indent"',
|
' :default-expand-all="defaultExpandAll"',
|
' highlight-current ',
|
' :data="treeData" ',
|
' show-checkbox',
|
' :accordion="!defaultExpandAll"',
|
' :expand-on-click-node="expandonclicknode" ',
|
' :current-node-key="currentnodekey"',
|
' :default-expanded-keys="defaultExpandedKeys"',
|
' @node-click="nodeClick"',
|
' >',
|
'<span class="custom-tree-node z_menu_tree" slot-scope="{ node, data, itm }"',
|
' @mouseenter="node_isShow(data, true)"',
|
' @mouseleave="node_isShow(data, false)"',
|
'>',
|
'<span>',
|
'<div class="nodeLabel nodeLabel_l" style="height: 32px; line-height: 32px;">',
|
'</div>',
|
'<div class="nodeLabel z_left_menu_tree_txt">',
|
'<i v-if="!node.isLeaf" :class="!node.expanded ? \'el-icon-plus\':\'el-icon-minus\'" style="font-size: 10px; margin-right: 10px; border: 1px solid #a7a9a9; color: #a7a9a9;"></i>',
|
'<i v-else style="font-size: 10px; margin-right: 10px;"></i>',
|
'</div>',
|
'<div class="nodeLabel z_left_menu_tree_txt">',
|
'<span v-for="(nodeTxt, k) in treeTxtList">',
|
'<span v-if="nodeTxt.type == \'value\'">{{ nodeTxt.value }}</span>',
|
'<span v-else-if="nodeTxt.type == \'field\'">{{ data[nodeTxt.value] }}</span>',
|
'</span>',
|
// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="data.isBadge ? true : false" is-dot class="item">',
|
// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
|
// '</el-badge>',
|
'</div>',
|
'<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
|
'</el-badge>',
|
'</span>',
|
'<span>',
|
'<div :ref="data.id" v-show="false" class="nodeLabel" style="max-width: 128px;">',
|
'<el-button v-if="(!data.parent_id || (data.children && data.children.length) || data.ishnodeadd) && editTreeButton.add.isshow" type="text" ',
|
'@click.stop="addNode(data,node)" class="z_node_button" icon="el-icon-circle-plus-outline">',
|
'</el-button>',
|
'<el-button v-if="editTreeButton.edit.isshow && !data.edit_disabled" type="text" ',
|
'@click.stop="editNode(data,node)" class="z_node_button" icon="el-icon-edit">',
|
'</el-button>',
|
'<el-button v-if="!(data.children && data.children.length) && editTreeButton.del.isshow" type="text" ',
|
'@click.stop="delNode(data,node)" class="z_node_button" icon="el-icon-delete">',
|
'</el-button>',
|
'</div>',
|
|
/* '<div class="nodeLabel" style="margin-right: 30px;">',
|
// '<span v-if="!node.isLeaf && !data.badgeval">{{data.children.length}}</span>',
|
// '<span v-if="!node.isLeaf && data.badgeval">{{data.badgeval}}</span>',
|
'</div>', */
|
'</span>',
|
'</span>',
|
'</el-tree>',
|
'</div>'].join(""),
|
props: {
|
treeData: Array,
|
isCheckbox: {//是否显示复选框
|
type: Boolean,
|
default: false
|
},
|
isReadonly: {//是否只读
|
type: Boolean,
|
default: false
|
},
|
defaultExpandAll: {//是否全部展开
|
type: Boolean,
|
default: true
|
},
|
// accordion: {//是否手风琴
|
// type: Boolean,
|
// default: false
|
// },
|
nodekey: {//
|
type: String,
|
default: "id"
|
},
|
treeTxtFormatter: {//
|
type: String,
|
default: "#{name}-{name}%"
|
},
|
|
defaultExpandedKeys: {//默认展开节点数组
|
type: Array,
|
default: function(){
|
return [];
|
}
|
},
|
currentnodekey: "",//默认选中节点
|
|
editTreeButton: {//编辑界面行按键（编辑，删除）
|
type: Object,
|
default: function(){
|
return {
|
add: {
|
isshow:true,
|
txt:"编辑"
|
},
|
edit: {
|
isshow:true,
|
txt:"编辑"
|
},
|
del: {
|
isshow:true,
|
txt:"删除"
|
},
|
}
|
}
|
},
|
},
|
|
data() {
|
return {
|
indent: 24,
|
expandonclicknode: true,
|
treeTxtList: [
|
{value: "", type: "value/field"}
|
]
|
}
|
},
|
mounted() {
|
this.nodeTxtFormatter();
|
},
|
methods: {
|
nodeTxtFormatter() {
|
var treeTxtList_ = [];
|
var treeTxtFormatter_ = [];
|
treeTxtFormatter_ = this.treeTxtFormatter.split("{");
|
treeTxtFormatter_.map(f=>{
|
if (f.indexOf('}') != -1) {
|
var fa_ = f.split("}");
|
if (fa_[0]) {
|
var t_ = {};
|
t_.type = "field"
|
t_.value = fa_[0];
|
treeTxtList_.push(t_);
|
}
|
if (fa_[1]) {
|
var t_ = {};
|
t_.type = "value"
|
t_.value = fa_[1];
|
treeTxtList_.push(t_);
|
}
|
}
|
else if (f) {
|
var t_ = {}
|
t_.type = "value"
|
t_.value = f;
|
treeTxtList_.push(t_);
|
}
|
|
})
|
|
this.treeTxtList = treeTxtList_;
|
},
|
nodeClick(data, node, el) {
|
var obj = {
|
data: data,
|
node: node,
|
el: el
|
}
|
this.$emit('node-click', obj);
|
},
|
|
addNode(data, node) {
|
var obj = {
|
data: data,
|
node: node,
|
}
|
this.$emit('add-node', obj);
|
},
|
editNode(data, node) {
|
var obj = {
|
data: data,
|
node: node,
|
}
|
this.$emit('edit-node', obj);
|
},
|
delNode(data, node) {
|
var obj = {
|
data: data,
|
node: node,
|
}
|
this.$emit('del-node', obj);
|
},
|
|
node_isShow(data, isShow) {
|
if (this.isReadonly || data.disabled) {//只读
|
return
|
}
|
|
if (this.$refs[data.id]) {
|
this.$refs[data.id].style.display = isShow ? '' : 'none';
|
}
|
},
|
|
setCheckedKeys(ids) {//设置选中
|
this.$refs.hierTree.setCheckedKeys(ids);
|
},
|
resetChecked() {
|
this.$refs.hierTree.setCheckedKeys([]);
|
}
|
|
|
|
}
|
});
|
|
/****************** 第三方组件 *********************/
|
/*********************拖拽************************/
|
// 全局注册组件
|
Vue.component('vuedraggable', window.vuedraggable);
|
|
|
//**************通用事件*******************
|
function getSetting(pageName) {
|
var roleCode = Root.role.code;
|
|
var result = { page: {}, buttons: {} };
|
|
if (!setting) {
|
return result;
|
}
|
|
var pageSetting = setting[pageName];
|
|
if (!pageSetting) {
|
return result;
|
}
|
|
result.page = pageSetting.page;
|
|
var btnOptions = pageSetting.buttons;
|
var buttons = result.buttons;
|
|
for (var i = 0; i < btnOptions.length; i++) {
|
var option = btnOptions[i];
|
|
if (option.isVisible && !arrayContains(option.isVisible, roleCode)) {
|
continue;
|
}
|
|
var button = buttons[option.code] = {};
|
button.disabled = !option.isActive || !arrayContains(option.isActive, roleCode);
|
}
|
|
return result;
|
}
|
|
//判断数组中是否存在指定值
|
function arrayContains(array, value) {
|
if (!array || !value) {
|
return false;
|
}
|
var bo_ = false;
|
for (var i = 0; i < array.length; i++) {
|
value.map(e=>{
|
if (e == array[i]) {
|
bo_ = true;
|
}
|
});
|
}
|
return bo_;
|
}
|
|
///////////////
|
// 兼容所有浏览器关闭页面方法
|
function ClosePage() {
|
if (navigator.userAgent.indexOf("MSIE") > 0) {
|
if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
|
window.opener = null;
|
window.close();
|
}
|
else {
|
window.open('', '_top');
|
window.top.close();
|
}
|
}
|
else if (navigator.userAgent.indexOf("Firefox") > 0) {
|
window.location.href = 'about:blank '; //火狐默认状态非window.open的页面window.close是无效的
|
//window.history.go(-2);
|
}
|
else {
|
window.opener = null;
|
window.open('', '_self', '');
|
window.close();
|
}
|
};
|
|
//指定数组，根据指定条件筛选，返回符合条件的数组
|
function h_query(datalist, filterobj) {
|
let result = [];
|
result = datalist.filter(item => {
|
let bo = true;
|
for(var k in filterobj) {
|
let k_val = filterobj[k];
|
let bo_ = item[k].toLowerCase().indexOf(k_val.toLowerCase()) > -1;
|
if (!bo_) {
|
return false;
|
}
|
}
|
return bo;
|
});
|
return result;
|
};
|
|
//拼接 GetUrl
|
function SplicingGetUrlToStr(url_, param) {
|
var urlstr = "";
|
if (url_.indexOf("?") != -1 ) {
|
for (p in param) {
|
url_ += "&" + p + "=" + encodeURI(param[p]);
|
}
|
}
|
else {
|
var url_param = "";
|
for (p in param) {
|
if (!url_param) {
|
url_param = p + "=" + encodeURI(param[p]);
|
}
|
else {
|
url_param += "&" + p + "=" + encodeURI(param[p]);
|
}
|
}
|
url_ += "?" + url_param;
|
}
|
|
urlstr = url_;
|
return urlstr;
|
};
|
|
//表格高度计算 By pagesize
|
function settableHeight(table_el, pagesize) {
|
let tableHeight2_ = 0;
|
let header_height = table_el.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight;
|
var row_height_ = 40;
|
// if (table_el.getElementsByClassName('el-table__row')[0] && table_el.getElementsByClassName('el-table__row')[0].offsetHeight) {
|
// row_height_ = table_el.getElementsByClassName('el-table__row')[0].offsetHeight + 0.5;
|
// }
|
let row_height = row_height_;
|
let body_width = table_el.getElementsByClassName('el-table__body')[0].offsetWidth;
|
let body_wrapper_width = table_el.getElementsByClassName('el-table__body-wrapper')[0].offsetWidth;
|
|
tableHeight2_ = header_height + (row_height * pagesize) + pagesize/4.5;
|
if ((body_width - body_wrapper_width)>5){
|
tableHeight2_ += 20;
|
}
|
|
return tableHeight2_;
|
};
|
//表格高度计算 By 页面
|
function setpageHeight(table_el, array_el, tableCnt, minCnt) {
|
var tableHeight_ = 0;
|
let clientHeight = document.documentElement.clientHeight;
|
let title_height = document.getElementsByClassName('topbar').length ? document.getElementsByClassName('topbar')[0].offsetHeight + document.getElementsByClassName('topbar')[0].offsetTop : 0;
|
let tabs_height = document.getElementsByClassName('el-tabs__header').length ? document.getElementsByClassName('el-tabs__header')[0].offsetHeight + 2 : 0;
|
let footer_height = document.getElementsByClassName('el-dialog__footer').length ? document.getElementsByClassName('el-dialog__footer')[0].offsetHeight : 0;
|
|
let h_table_select = document.getElementsByClassName('h_table_select').length ? document.getElementsByClassName('h_table_select')[0].offsetHeight : 0;
|
let h_table_title = document.getElementsByClassName('h_table_title').length ? document.getElementsByClassName('h_table_title')[0].offsetHeight : 0;
|
|
let header_height = document.getElementsByClassName('el-dialog__header').length ? document.getElementsByClassName('el-dialog__header')[0].offsetHeight : 0;
|
|
let pagination_height = 0;
|
if (table_el.getElementsByClassName('z_table_pagination').length) {
|
pagination_height = table_el.getElementsByClassName('z_table_pagination')[0].offsetHeight;
|
}
|
tableHeight_ = clientHeight - title_height - tabs_height - pagination_height - footer_height - h_table_select - h_table_title - header_height - 1 - 10;
|
|
if(array_el && array_el.length) {
|
array_el.map(el=>{
|
// let el_height = el.offsetHeight;
|
let el_height = el.clientHeight;
|
tableHeight_ -= el_height;
|
})
|
}
|
|
// if (!minCnt) {
|
// minCnt = 5
|
// }
|
|
// if (!tableCnt || tableCnt < minCnt) {
|
// tableCnt = minCnt
|
// }
|
|
// var row_height_ = 40;
|
// var tbody_height_ = 0;
|
// var tbody_cnt_ = 0;
|
// if (table_el.getElementsByClassName('el-table__row')[0] && table_el.getElementsByClassName('el-table__row')[0].offsetHeight) {
|
// row_height_ = table_el.getElementsByClassName('el-table__row')[0].offsetHeight + 0.5;
|
// if(table_el.getElementsByClassName('el-table__row')[0].parentElement && table_el.getElementsByClassName('el-table__row')[0].parentElement.offsetHeight) {
|
// tbody_height_ = table_el.getElementsByClassName('el-table__row')[0].parentElement.offsetHeight;
|
// tbody_cnt_ = table_el.getElementsByClassName('el-table__row')[0].parentElement.childElementCount;
|
// }
|
|
// }
|
|
// let row_height = row_height_;
|
|
// if (tbody_cnt_ > 0 && tbody_height_ > tableHeight_ && (tableHeight_ < (row_height * minCnt))) {
|
// let header_height = table_el.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight;
|
// let body_width = table_el.getElementsByClassName('el-table__body')[0].offsetWidth;
|
// let body_wrapper_width = table_el.getElementsByClassName('el-table__body-wrapper')[0].offsetWidth;
|
// tableHeight_ = header_height +tbody_height_ + row_height/4.5;
|
// if ((body_width - body_wrapper_width) > 5 ){
|
// tableHeight_ += 20;
|
// }
|
// }
|
// else if (tableHeight_ < (row_height * minCnt)) {
|
// let header_height = table_el.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight;
|
|
// let body_width = table_el.getElementsByClassName('el-table__body')[0].offsetWidth;
|
// let body_wrapper_width = table_el.getElementsByClassName('el-table__body-wrapper')[0].offsetWidth;
|
|
// tableHeight_ = header_height + (row_height * tableCnt) + row_height/4.5;
|
// if ((body_width - body_wrapper_width) > 5 ){
|
// tableHeight_ += 20;
|
// }
|
|
// }
|
|
return tableHeight_;
|
};
|
//弹窗表格高度计算 By 页面
|
function setpopuppageHeight(table_el, array_el, tableCnt, minCnt) {
|
var tableHeight_ = 0;
|
let clientHeight = document.documentElement.clientHeight;
|
let title_height = document.getElementsByClassName('topbar').length ? document.getElementsByClassName('topbar')[0].offsetHeight + document.getElementsByClassName('topbar')[0].offsetTop : 0;
|
let tabs_height = document.getElementsByClassName('el-tabs__header').length ? document.getElementsByClassName('el-tabs__header')[0].offsetHeight + 2 : 0;
|
let footer_height = document.getElementsByClassName('el-dialog__footer').length ? document.getElementsByClassName('el-dialog__footer')[0].offsetHeight : 0;
|
|
let h_table_select = document.getElementsByClassName('h_table_select').length ? document.getElementsByClassName('h_table_select')[0].offsetHeight : 0;
|
let h_table_title = document.getElementsByClassName('h_table_title').length ? document.getElementsByClassName('h_table_title')[0].offsetHeight : 0;
|
let header_height = document.getElementsByClassName('el-dialog__header').length ? document.getElementsByClassName('el-dialog__header')[0].offsetHeight : 0;
|
|
let filter_height = document.getElementsByClassName('h_form_filter').length ? document.getElementsByClassName('h_form_filter')[0].offsetHeight : 0;
|
// let topbar_height = document.getElementsByClassName('topbar').length ? document.getElementsByClassName('topbar')[0].offsetHeight : 0;
|
let pagination_height = 0;
|
if (table_el.getElementsByClassName('z_table_pagination').length) {
|
pagination_height = table_el.getElementsByClassName('z_table_pagination')[0].offsetHeight;
|
}
|
tableHeight_ = clientHeight - title_height - tabs_height - pagination_height - footer_height - h_table_select - h_table_title - header_height - filter_height - 10;
|
|
return tableHeight_;
|
};
|
//****************************
|
//日期
|
function createDate () {
|
var aDate = new Date();
|
var date_ = dateFormat(aDate,"yyyy-MM-dd");
|
return date_;
|
}
|
//时间
|
function createDatetime () {
|
var aDate = new Date();
|
var date_ = dateFormat(aDate,"yyyy-MM-dd hh:mm:ss");
|
return date_;
|
}
|
//年
|
function createYear () {
|
var aDate = new Date();
|
var date_ = dateFormat(aDate,"yyyy") * 1;
|
var month_ = dateFormat(aDate,"MM") * 1;
|
var year = "";
|
if (month_ > 9 ) {
|
year = date_ + 1
|
}
|
else {
|
year = date_
|
}
|
return year;
|
}
|
//季度
|
function createQuarter () {
|
var aDate = new Date();
|
var date_ = dateFormat(aDate,"MM") * 1;
|
var quarter = "";
|
if (date_ < 4) {
|
quarter = 2
|
}
|
else if (date_ < 7) {
|
quarter = 3
|
}
|
else if (date_ < 10) {
|
quarter = 4
|
}
|
else {
|
quarter = 1
|
}
|
return quarter;
|
}
|
//月份
|
function createMonth () {
|
var aDate = new Date();
|
var date_ = dateFormat(aDate,"MM") * 1;
|
return date_;
|
}
|
|
//根据分辨率和基准分辨率设置缩放
|
function bodyScale(el) {
|
var win_ratio = window.devicePixelRatio;
|
var screen_width = window.screen.width; //document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
|
var screen_height = window.screen.height; //document.documentElement.clientHeight;//获取当前分辨率下的可是区域宽度
|
var scale_w = screen_width / win_ratio / screen_draft[0]; // 分母——设计稿的分辨率
|
var scale_h = screen_height / win_ratio / screen_draft[1]; // 分母——设计稿的分辨率
|
|
var win_width = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
|
var win_height = document.documentElement.clientHeight;//获取当前分辨率下的可是区域宽度
|
var win_w = win_width / win_ratio / wh_draft[0]; // 分母——设计稿的尺寸
|
var win_h = win_height / win_ratio / wh_draft[1]; // 分母——设计稿的尺寸
|
|
if (scale_w > 1 && scale_h > 1) {
|
el.style.transform = "scale(" + scale_w + "," + scale_h + ")";//放大缩小相应倍数
|
}
|
else {
|
el.style.width = win_width - 2 + "px";
|
el.style.height = win_height - 2 + "px";
|
}
|
|
//el.style.transform = "scale(" + scale_w * win_w + "," + scale_h * win_h + ")";//放大缩小相应倍数
|
//document.getElementById('sys_iframe').style.transform = "scale(" + scale_w + "," + scale_h + ")";//放大缩小相应倍数
|
}
|
|
//滚屏效果
|
const cubic = value => Math.pow(value, 3);
|
const easeInOutCubic = value => value < 0.5
|
? cubic(value * 2) / 2
|
: 1 - cubic((1 - value) * 2) / 2;
|
