//指定数组，根据指定条件筛选，返回符合条件的数组
|
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;
|
};
|
//
|
function settableHeight(root_el, pagesize) {
|
let tableHeight2_ = 0;
|
let header_height = root_el.getElementsByClassName('el-table__header-wrapper')[0].offsetHeight;
|
let row_height = root_el.getElementsByClassName('el-table__row')[0].offsetHeight || 40;
|
let body_width = root_el.getElementsByClassName('el-table__body')[0].offsetWidth;
|
let body_wrapper_width = root_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_;
|
};
|
|
function createCode (code) {
|
var code_ = "";
|
//日期转为单号
|
var day = new Date();
|
var Year = 0;
|
var Month = 0;
|
var Day = 0;
|
Year = day.getFullYear();
|
Month = day.getMonth() + 1;
|
Day = day.getDate();
|
code_ += Year;
|
if (Month >= 10) {
|
code_ += Month;
|
}
|
else {
|
code_ += "0" + Month;
|
}
|
if (Day >= 10) {
|
code_ += Day;
|
}
|
else {
|
code_ += "0" + Day;
|
}
|
var random = 0;
|
do
|
random = Math.floor(Math.random()*10000);
|
while( random < 1000 );
|
|
if (code) {
|
code_ = code + code_+ random;
|
}
|
return code_;
|
}
|
|
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_;
|
}
|
|
/*********** default setting ************/
|
function getElementDefault(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;
|
};
|
|
|
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",
|
},
|
};
|
|
//自定义模板设置
|
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",
|
}
|
};
|
|
//组件的格式化
|
dateFormat = window.top.dateFormat;
|
formatter_money = window.top.formatter_money;
|
formatter_percent = window.top.formatter_percent;
|
formatter_TF1 = window.top.formatter_TF1;
|
formatter_TF2 = window.top.formatter_TF2;
|
formatter_TF3 = window.top.formatter_TF3;
|
formatter_TF4 = window.top.formatter_TF4;
|
formatter_TF5 = window.top.formatter_TF5;
|
formatter_TF6 = window.top.formatter_TF6;
|
formatter_null1 = window.top.formatter_null1;
|
formatter_Target = window.top.formatter_Target;
|
formatter_OpenState = window.top.formatter_OpenState;
|
formatter_CommitState = window.top.formatter_CommitState;
|
formatter_OrderState = window.top.formatter_OrderState;
|
formatter_Grade = window.top.formatter_Grade;
|
formatter_date = window.top.formatter_date;
|
formatter_isreconciliation = window.top.formatter_isreconciliation;
|
formatter_businessline = window.top.formatter_businessline;
|
formatter_matchstatus = window.top.formatter_matchstatus;
|
|
function formatter_Splicing(row, column, cellValue, index) {
|
return row.sku = row.name + row.spec;
|
};
|
|
/*********** 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 ************/
|
Vue.component("h-table", {//列表组件1
|
template:
|
'<div class="h_table"><el-table :data="tableData" v-show="isShowTable" size="small" border :height="tableHeight" '+//
|
'@row-click="rowClick" '+
|
'@row-dblclick="rowDblclick" '+
|
'@cell-click="cellClick" '+
|
'@selection-change="handleSelectionChange" '+
|
':cell-class-name="cellClass" '+
|
':show-summary="tableAttr.showSummary || showSummary" '+
|
':summary-method="getSummaries" '+
|
':highlight-current-row="tableAttr.isHighlightRow || isHighlightRow" '+
|
':header-cell-style="headerCellStyle"> '+
|
// ':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" label="序号" type="index" align="center" width="50"> </el-table-column> '+
|
'<template v-for="(tableField,k) in doTableFields"> '+
|
'<el-table-column v-if="tableField.formatter_f && tableField.isshow == \'T\'" '+
|
' :align="tableField.align ? tableField.align : \'center\'" '+
|
' :show-overflow-tooltip="(tableField.type==\'input\' || tableField.type==\'select\' || tableField.type==\'button\' ) ? false : true" '+
|
' :width="tableField.width > 20 ? tableField.width : \'auto\'" '+
|
//' :formatter= "function(row, column, cellValue, index){return tableField.formatter(row, column, cellValue, index)}" '+
|
' :formatter= "function(row, column, cellValue, index){return tableField.formatter_f(row, column, cellValue, index)}" '+
|
' :prop="tableField.field" '+
|
' :label="tableField.name" > '+
|
'</el-table-column> '+
|
'<el-table-column '+
|
' v-else-if="tableField.isshow == \'T\'" '+
|
' :align="tableField.align ? tableField.align : \'center\'" '+
|
' :show-overflow-tooltip="(tableField.type==\'input\' || tableField.type==\'select\' || tableField.type==\'button\' ) ? false : true" '+
|
' :width="tableField.width > 20 ? 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 || !isWithinEditTableData" @change="cellInputChange(scope)"></el-checkbox> '+
|
' <el-input v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type == \'input\'" style="width: 100%;" v-model="scope.row[tableField.field]" @change="cellInputChange(scope)"></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)"></el-input> '+
|
' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'date\'" type="date" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope)"></el-date-picker> '+
|
' <el-date-picker v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type ==\'month\'" type="month" placeholder="选择月" v-model="scope.row[tableField.field]" style="width: 100%;" @change="cellInputChange(scope)"></el-date-picker> '+
|
' <el-select v-else-if="(isWithinEditTableData || scope.row.isWithinEdit) && tableField.type==\'select\' && !tableField.isrefresh" :filterable="tableField.filterable" :multiple="tableField.ismultiple" @change="cellSelectChange(scope)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled" 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\' && tableField.isrefresh" :multiple="tableField.ismultiple" @visible-change="visibleChange($event, tableField)" @change="cellSelectChange(scope)" v-model="scope.row[tableField.field]" :disabled="tableField.disabled" 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)" type="text">{{ scope.row[tableField.field] }}</el-button> '+
|
' <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="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-share" style="padding: 5px;" @click="showpopup(scope)"></el-button> '+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
' </template> '+
|
|
' <span v-else :class="tableField.iscellclick ? \'h_cellclick\' : \'\'">{{scope.row[tableField.field] ? scope.row[tableField.field] : tableField.defaultval}}</span> '+
|
' </template> '+
|
'</el-table-column> '+
|
' </template> '+
|
/* '<el-table-column v-if="isEditTableData" property="operate" label="数据状态" align="center" :formatter= "operate_"></el-table-column> '+
|
'<el-table-column v-if="isEditTableData" property="status" label="审批状态" align="center" :formatter= "status_"></el-table-column> '+ */
|
'<el-table-column v-if="isEditTableData" label="操作" align="center" width="100"> '+
|
'<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 v-if="editTableButton.save.isshow && scope.row.isWithinEdit" class="item" effect="dark" :content="editTableButton.save.txt" placement="top"> '+
|
'<el-button 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> '+
|
'</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: 120px;"> '+
|
'<div style="margin-top: 24px;"> '+
|
'<span style="font-size: 14px; font-weight: bold; color: #999;">请添加数据</span> '+
|
'</div> '+
|
'</div> '+
|
'</div> '+
|
|
'<div v-if="isPagination" class="z_table_pagination"> '+
|
'<el-pagination background '+
|
' @size-change="handleSizeChange" '+
|
' @current-change="handleCurrentChange" '+
|
' :current-page="pagenum" '+
|
' :page-sizes="[10, 20, 30, 40]" '+
|
' :page-size="pagesize" '+
|
' layout="total, sizes, prev, pager, next, jumper" '+
|
' :total="total" '+
|
'></el-pagination> '+
|
'</div> '+
|
'</div>',
|
props: {
|
tableAttr: {
|
type: Object,
|
default: function(){
|
return {};
|
}
|
},
|
"tableFields": Array,//字段
|
"tableData": Array,//数据
|
"url_img2": {//无数据的图片
|
type: String,
|
default: ""
|
},
|
"showSummary": {//是否在表尾显示合计行tableAttr
|
type: Boolean,
|
default: false
|
},
|
"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:"保存"
|
},
|
}
|
}
|
},
|
tableHeight: {
|
type: Number,
|
default: 100
|
},
|
pagesize: {
|
type: Number,
|
default: 10
|
},
|
pagenum: {
|
type: Number,
|
default: 1
|
},
|
total: {
|
type: Number,
|
default: 0
|
},
|
},
|
|
data() {
|
return {
|
zpagesize: this.pagesize,
|
zpagenum: this.pagenum,
|
summaries: []
|
}
|
},
|
|
computed: {
|
isShowTable() {
|
if (this.$refs.ref_notTableData) {
|
this.setNotTableData();
|
}
|
return this.tableData.length > 0 ? true : true; //false;
|
},
|
doTableFields() {
|
this.tableFields.map(e=>{
|
if (e.formatter) {
|
if (e.formatter == "formatter_money") {
|
e.formatter_f = function(a,b,c,d) {return formatter_money(a,b,c,d)}
|
}
|
if (e.formatter == "formatter_percent") {
|
e.formatter_f = function(a,b,c,d) {return formatter_percent(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_TF1") {
|
e.formatter_f = function(a,b,c,d) {return formatter_TF1(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_TF2") {
|
e.formatter_f = function(a,b,c,d) {return formatter_TF2(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_TF3") {
|
e.formatter_f = function(a,b,c,d) {return formatter_TF3(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_TF4") {
|
e.formatter_f = function(a,b,c,d) {return formatter_TF4(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_TF5") {
|
e.formatter_f = function(a,b,c,d) {return formatter_TF5(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_TF6") {
|
e.formatter_f = function(a,b,c,d) {return formatter_TF6(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_null1") {
|
e.formatter_f = function(a,b,c,d) {return formatter_null1(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_Target") {
|
e.formatter_f = function(a,b,c,d) {return formatter_Target(a,b,c,d)}
|
}
|
else if (e.formatter == "formatter_OpenState") {
|
e.formatter_f = function(a,b,c,d) {return formatter_OpenState(a,b,c,d)}
|
}
|
else if(e.formatter == "formatter_CommitState") {
|
e.formatter_f = function(a,b,c,d) {return formatter_CommitState(a,b,c,d)}
|
}
|
else if(e.formatter == "formatter_OrderState") {
|
e.formatter_f = function(a,b,c,d) {return formatter_OrderState(a,b,c,d)}
|
}
|
else if(e.formatter == "formatter_Grade") {
|
e.formatter_f = function(a,b,c,d) {return formatter_Grade(a,b,c,d)}
|
}
|
else if(e.formatter == "formatter_date") {
|
e.formatter_f = function(a,b,c,d) {return formatter_date(a,b,c,d)}
|
}
|
else if(e.formatter == "formatter_Splicing") {
|
e.formatter_f = function(a,b,c,d) {return formatter_Splicing(a,b,c,d)}
|
}
|
else if(e.formatter == "formatter_isreconciliation") {
|
e.formatter_f = function(a,b,c,d) {return formatter_isreconciliation(a,b,c,d)}
|
}
|
else if(e.formatter == "formatter_businessline") {
|
e.formatter_f = function(a,b,c,d) {return formatter_businessline(a,b,c,d)}
|
}
|
else if(e.formatter == "formatter_matchstatus") {
|
e.formatter_f = function(a,b,c,d) {return formatter_matchstatus(a,b,c,d)}
|
}
|
}
|
})
|
|
return this.tableFields;
|
}
|
},
|
mounted() {
|
this.setNotTableData();
|
},
|
methods: {
|
cellClass(obj) {
|
let field = obj.column.property;
|
let row_ = this.doTableFields.filter(item => {
|
return item.field == field;
|
});
|
|
let class_ = "";
|
//业务上的样式，如：可点击，存在上下限等
|
|
if(row_.length > 0 && row_[0].iscellclick) {
|
class_ = "h_cellclick";
|
}
|
|
if(row_.length > 0 && (row_[0].maxval || row_[0].minval)) {
|
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") {
|
class_ += " h_stamp";
|
}
|
}
|
//如果存在自定义的class
|
|
if(row_.length > 0 && row_[0].cssname) {
|
class_ += " " + row_[0].cssname;
|
}
|
|
|
return class_;
|
},
|
setNotTableData() {
|
if (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.$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";
|
}
|
},
|
rowClick(row, column, event) {
|
let obj = {
|
row: row,
|
column: column,
|
event: event
|
}
|
this.$emit('row-click', obj);
|
},
|
|
headerCellStyle(obj) {
|
var aa = obj;
|
var style_ = {
|
'background':'#FAFAFA',
|
'color':'black',
|
'text-align':'center'
|
}
|
let field = obj.column.property;
|
let row_ = this.doTableFields.filter(item => {
|
return item.field == field;
|
});
|
|
if (row_.length && row_[0].headercolor) {
|
style_.background = row_[0].headercolor;
|
}
|
return style_;
|
},
|
rowDblclick(row, column, event) {
|
let obj = {
|
row: row,
|
column: column,
|
event: event
|
}
|
this.$emit('row-dblclick', obj);
|
},
|
cellClick(row, column, cell, event) {
|
let obj = {
|
row: row,
|
column: column,
|
cell: cell,
|
event: event
|
}
|
this.$emit('cell-click', obj);
|
},
|
handleSelectionChange(selection) {
|
this.$emit('selection-change', selection);
|
},
|
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);
|
},
|
|
showpopup(scope) {
|
let field = scope.column.property;
|
this.$emit('cell-show-popup', scope);
|
},
|
|
getSummaries(param) {
|
const { columns, data } = param;
|
const sums = [];
|
var sumfields = {};
|
var issumfields = false;
|
this.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(isshow, obj) {//下拉展开事件
|
if (isshow) {
|
this.$emit("visible-change", obj);
|
}
|
},
|
/* remoteMethod(query, obj) {
|
if (query !== '') {
|
this.loading_filterable = true;
|
setTimeout(() => {
|
this.loading_filterable = false;
|
this.options = this.list.filter(item => {
|
return item.label.toLowerCase()
|
.indexOf(query.toLowerCase()) > -1;
|
});
|
}, 200);
|
} else {
|
this.options = [];
|
}
|
}, */
|
|
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 "";
|
},
|
|
/* 每页条数变更事件 */
|
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-form", {//表单组件1
|
/* template:
|
'<div class="z_form" v-if="isRefresh"> '+
|
'<div v-if="formAttr.istitle && formAttr.title" style="font-size: 14px; font-weight: bold;">{{formAttr.title}}</div> '+
|
'<el-form :model="formData" :show-message="false" status-icon '+
|
':label-width="formAttr.labelwidth" '+
|
':disabled="disabled || formAttr.disabled" '+
|
':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-right\': formAttr.border, \'border-bottom\': 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.border, \'border-top\': formAttr.border}"> '+
|
'<el-form-item :label="fieldObj.name +\'：\'" :prop="fieldObj.field" style="width: 100%; overflow: hidden;" '+
|
':rules="fieldObj.rules" > '+
|
|
'<table 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="tableField.disabled" @change="formchange($event, fieldObj)"></el-checkbox> '+
|
'<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==\'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> '+
|
'<span v-else-if="fieldObj.type==\'span\'" >{{formData[fieldObj.field]}}</span> '+
|
'<el-select v-else-if="fieldObj.type==\'select\' && !fieldObj.isrefresh" :multiple="fieldObj.ismultiple" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 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 v-else-if="fieldObj.type==\'select\' && fieldObj.isrefresh" :multiple="fieldObj.ismultiple" @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 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-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"><span>{{formData[fieldObj.field]}}</span></td> '+
|
//'<td>'+
|
|
//'</td>'+
|
'<td v-if="fieldObj.type==\'popup\'">'+
|
'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-share" :disabled="fieldObj.disabled" style="padding: 5px;" @click="showpopup(fieldObj)"></el-button> '+
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</el-form-item> '+
|
'</td> '+
|
'</tr> '+
|
'</table> '+
|
'</el-form> '+
|
'</div>', */
|
|
template:
|
'<div class="z_form" v-if="isRefresh"> '+
|
'<div v-if="formAttr.istitle && formAttr.title" style="font-size: 14px; font-weight: bold;">{{formAttr.title}}</div> '+
|
'<el-form :model="formDataData" :show-message="false" status-icon '+
|
':label-width="formAttr.labelwidth" '+
|
':disabled="disabled || formAttr.disabled" '+
|
':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-right\': formAttr.border, \'border-bottom\': 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.border, \'border-top\': formAttr.border}"> '+
|
'<el-form-item :label="fieldObj.name +\'：\'" :class="fieldObj.labelclass ? fieldObj.labelclass : \'\'" :prop="fieldObj.field" style="width: 100%; overflow: hidden;" '+
|
':rules="fieldObj.rules" > '+
|
|
'<table :style="{\'width\':\'100%\', \'height\':\'100%\', \'border-spacing\':\'0px\',\'text-align\': fieldObj.align ? fieldObj.align : \'left\'}"> '+
|
'<tr v-if="!fromFieldObj[fieldObj.field].isEdit && !fieldObj.notformat" @click="cellFaceClick(fieldObj)">'+
|
'<td v-if="fieldObj.ischeckbox">'+
|
'<el-checkbox v-model="formDataData[fieldObj.ischeckbox]" @change="ischeckboxchangeToEdit($event, fieldObj)"></el-checkbox> '+
|
'</td>'+
|
|
'<td v-if="fieldObj.isstamp && formDataFace[fieldObj.isstamp]">'+
|
'<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 align="left" style="width: 100%; padding: 0px; overflow: hidden; border-bottom: 1px solid #DCDFE6;" class="el-form-item__content"> '+
|
'<span> {{formDataFace[fieldObj.field]}}</span>'+
|
//'<el-input disabled class="from_popup_input" v-model="formDataFace[fieldObj.field]"></el-input> '+
|
'</td> '+
|
'</tr>'+
|
'<tr v-else>'+
|
'<td v-if="fieldObj.ischeckbox">'+
|
'<el-checkbox v-model="formDataData[fieldObj.ischeckbox]" @change="ischeckboxchange($event, fieldObj)"></el-checkbox> '+
|
'</td>'+
|
|
'<td v-if="fieldObj.isstamp && formDataFace[fieldObj.isstamp]">'+
|
'<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.type!=\'popup\'">'+
|
'<el-checkbox v-if="fieldObj.type == \'checkbox\'" v-model="formDataData[fieldObj.field]" :disabled="tableField.disabled" @change="formchange($event, fieldObj)"></el-checkbox> '+
|
'<el-input v-else-if="fieldObj.type==\'input\'" v-model="formDataData[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="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-input> '+
|
'<el-date-picker v-else-if="fieldObj.type==\'date\'" type="date" v-model="formDataData[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==\'year\'" type="year" v-model="formDataData[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==\'month\'" type="month" placeholder="选择月" v-model="formDataData[fieldObj.field]" value-format="yyyy-MM" :disabled="fieldObj.disabled" style="width: 100%;" @change="formchange($event, fieldObj)"></el-date-picker> '+
|
'<span v-else-if="fieldObj.notformat" >{{formDataFace[fieldObj.field]}}</span> '+
|
'<span v-else-if="fieldObj.type==\'span\'" >{{formDataData[fieldObj.field]}}</span> '+
|
'<el-select v-else-if="fieldObj.type==\'select\' && !fieldObj.isrefresh" :multiple="fieldObj.ismultiple" @change="selectChange($event, fieldObj)" v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 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 v-else-if="fieldObj.type==\'select\' && fieldObj.isrefresh" :multiple="fieldObj.ismultiple" @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formDataData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 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-cascader v-else-if="fieldObj.type==\'cascader\'" v-model="formDataData[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"><span>{{formDataData[fieldObj.field]}}</span></td> '+
|
//'<td>'+
|
|
//'</td>'+
|
'<td v-if="fieldObj.type==\'popup\'">'+
|
'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-share" :disabled="fieldObj.disabled" style="padding: 5px;" @click="showpopup(fieldObj)"></el-button> '+
|
'</td>'+
|
'<div v-if="fieldObj.ischeckbox" style="min-width: 100px !important; margin: 0 auto; text-align: left;">可用返利 :'+
|
'<el-input v-if="fieldObj.ischeckbox" v-model="rebate_available" :disabled="true" style="width: 70px;"></el-input> </div>'+
|
'</tr>'+
|
'</table>'+
|
'</el-form-item> '+
|
'</td> '+
|
'</tr> '+
|
'</table> '+
|
'</el-form> '+
|
'</div>',
|
props: {
|
formAttr: Object,
|
tableFields: Array,
|
formData: Object,
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
width: {
|
type: String,
|
default: "100%"
|
},
|
|
},
|
|
data() {
|
return {
|
isRefresh: true,
|
tableFieldsFormat: [],
|
fromFieldObj: {},
|
|
formFieldsObj: {},
|
record: null,
|
formDataData: {},
|
formDataFace: {},
|
}
|
},
|
computed: {
|
tableFields2() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
}
|
},
|
watch: {
|
tableFields() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
},
|
formData() {
|
if(this.formData) {
|
this.formDataRecord();
|
}
|
}
|
|
},
|
mounted() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
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];
|
this.formFieldsObj[field_.field] = field_;
|
this.fromFieldObj[field_.field] = {
|
isEdit: false
|
};
|
|
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) {//填写规则，正则表达式
|
let required_ = {
|
pattern: field_.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_;
|
|
this.formDataRecord();
|
},
|
|
formDataRecord() {
|
/* if (this.formAttr && this.formAttr.formatter && this.formData) {
|
this.formAttr.formatter(this.formData, this.tableFields);
|
} */
|
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();
|
}
|
},
|
|
cellFaceClick(fieldObj) {
|
var fromFieldObj_ = clone(this.fromFieldObj);
|
if (fromFieldObj_[fieldObj.field].isEdit){
|
return;
|
}
|
this.record.setEditData(this.formDataData);
|
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_;
|
},
|
|
refresh() {
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
showpopup(obj) {//弹窗弹出事件
|
let val = this.formDataData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val
|
};
|
this.$emit('show-popup', 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(isshow, obj) {//下拉展开事件
|
if (isshow) {
|
//let val = this.formDataData[obj.field];
|
//let url = obj.dataurl;
|
|
this.$emit("visible-change", obj);
|
|
//根据url请求重新获取选择项
|
/* obj.options = [
|
{label: "选项1", value:"code1"},
|
{label: "选项2", value:"code2"},
|
{label: "选项3", value:"code3"},
|
{label: "选项4", value:"code4"}
|
]; */
|
|
/* let data = this.formData;
|
let options = url.split("?");
|
let parendfield = options[1].split("=");
|
let optionslist = dataRoot.database[options[0]];
|
let result = clone(optionslist);
|
if (obj.selectparent) {
|
let parentval = data[obj.selectparent];
|
result = optionslist.filter(item => {
|
if (!parentval) {
|
return false;
|
}
|
return item[parendfield[1]].toLowerCase().indexOf(parentval.toLowerCase()) > -1;
|
});
|
}
|
obj.options = result; */
|
|
/* var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
this.$emit('visible-change', obj_); */ //obj.options =
|
}
|
},
|
formchange(val, obj) {
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
this.$emit("form-change", obj_);
|
},
|
ischeckboxchange(val, obj) {
|
obj.disabled = !val;
|
},
|
ischeckboxchangeToEdit(val, obj) {
|
obj.disabled = !val;
|
this.cellFaceClick(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.formData
|
}
|
this.$emit("select-change", obj_);
|
|
this.isRefresh = false;
|
this.isRefresh = true;
|
}
|
|
}
|
});
|
|
/*********** h-form-filter ************/
|
Vue.component("h-form-filter", {//表单组件2(查询)
|
template:
|
'<div class="z_form" 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\'}"> '+
|
'<table :style="{\'table-layout\':\'fixed\', width: \'100%\', height: \'100%\', \'border-spacing\': \'0px\', \'border-right\': formAttr.border, \'border-bottom\': 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.border, \'border-top\': formAttr.border}"> '+
|
'<template v-if="k == tableFieldsFormat.length-1 && kf == tableField.children.length -1">' +//
|
'<el-button-group>' +
|
'<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>' +
|
'</template>' +
|
|
'<template v-else>' +//
|
'<el-form-item :label="fieldObj.name +\'：\'" :prop="fieldObj.field" :label-width="fieldObj.labelwidth" style="width: 100%; overflow: hidden;" '+
|
':rules="fieldObj.rules" > '+
|
|
'<table 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="tableField.disabled" @change="formchange($event, fieldObj)"></el-checkbox> '+
|
'<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="至" start-placeholder="开始日期" end-placeholder="结束日期" :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> '+
|
'<span v-else-if="fieldObj.type==\'span\'" >{{formData[fieldObj.field]}}</span> '+
|
'<el-select v-else-if="fieldObj.type==\'select\' && !fieldObj.isrefresh" :multiple="fieldObj.ismultiple" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 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 v-else-if="fieldObj.type==\'select\' && fieldObj.isrefresh" :multiple="fieldObj.ismultiple" @visible-change="visibleChange($event, fieldObj)" @change="selectChange($event, fieldObj)" v-model="formData[fieldObj.field]" :disabled="fieldObj.disabled" placeholder="请选择" style="width: 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-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></td> '+ //{{formData[fieldObj.field]}}
|
/* '<td>'+
|
|
'</td>'+ */
|
'<td v-if="fieldObj.type==\'popup\'">'+
|
'<el-button v-if="!disabled || !fieldObj.disabled" type="primary" icon="el-icon-share" :disabled="fieldObj.disabled" style="padding: 5px;" @click="showpopup(fieldObj)"></el-button> '+
|
|
'</td>'+
|
'</tr>'+
|
'</table>'+
|
'</el-form-item> '+
|
'</template>' +
|
'</td> '+
|
'</tr> '+
|
'</table> '+
|
'</el-form> '+
|
'</div>',
|
props: {
|
formAttr: Object,
|
tableFields: Array,
|
options: Array,
|
formData: Object,
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
width: {
|
type: String,
|
default: "100%"
|
}
|
},
|
|
data() {
|
return {
|
isRefresh: true,
|
tableFieldsFormat: [],
|
}
|
},
|
computed: {
|
tableFields2() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
}
|
},
|
watch: {
|
tableFields() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
this.formLayout();
|
}
|
}
|
},
|
mounted() {
|
if(this.formAttr && this.tableFields.length > 0) {
|
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 button_ = {isshow: "T", field: "id"};
|
if(tableFields_) {
|
tableFields_.push(button_);
|
}
|
|
for (var r=0; r<tableFields_.length; r++) {
|
let field_ = tableFields_[r];
|
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) {//填写规则，正则表达式
|
let required_ = {
|
pattern: field_.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 (!this.tableFieldsFormat[0].children[0].options) {
|
this.tableFieldsFormat[0].children[0].options = null;
|
}
|
this.tableFieldsFormat[0].children[0].options = this.options;
|
},
|
|
h_onQuery() {
|
this.$emit("on-query");
|
},
|
h_onInitQuery() {
|
this.$emit("on-init-query");
|
},
|
h_onEditQuery() {
|
this.$emit("on-edit-query");
|
},
|
refresh() {
|
this.isRefresh = false;
|
this.isRefresh = true;
|
},
|
showpopup(obj) {//弹窗弹出事件
|
let val = this.formData[obj.field];
|
let popupObj = {
|
obj: obj,
|
val: val
|
};
|
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) {
|
//let val = this.formData[obj.field];
|
//let url = obj.dataurl;
|
|
this.$emit("visible-change", obj);
|
|
//根据url请求重新获取选择项
|
/* obj.options = [
|
{label: "选项1", value:"code1"},
|
{label: "选项2", value:"code2"},
|
{label: "选项3", value:"code3"},
|
{label: "选项4", value:"code4"}
|
]; */
|
|
/* let data = this.formData;
|
let options = url.split("?");
|
let parendfield = options[1].split("=");
|
let optionslist = dataRoot.database[options[0]];
|
let result = clone(optionslist);
|
if (obj.selectparent) {
|
let parentval = data[obj.selectparent];
|
result = optionslist.filter(item => {
|
if (!parentval) {
|
return false;
|
}
|
return item[parendfield[1]].toLowerCase().indexOf(parentval.toLowerCase()) > -1;
|
});
|
}
|
obj.options = result; */
|
|
/* var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
this.$emit('visible-change', obj_); */ //obj.options =
|
}
|
},
|
formchange(val, obj) {
|
var obj_ = {
|
fieldobj: obj,
|
data: this.formData
|
}
|
this.$emit("form-change", obj_);
|
},
|
ischeckboxchange(val, obj) {
|
obj.disabled = !val;
|
},
|
|
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
|
}
|
this.$emit("select-change", obj_);
|
|
this.isRefresh = false;
|
this.isRefresh = true;
|
}
|
|
}
|
});
|
/* ********** */
|
Root = window.top.Root;
|
RootRole = window.top.RootRole;
|
dataRoot = window.top.dataRoot;
|
dataRootFields = window.top.dataRootFields;
|
Server = window.top.Server;
|
|
//dataRoot_lxc = window.top.dataRoot_lxc;
|
//dataRoot_wxy = window.top.dataRoot_wxy;
|
|
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;
|
}
|
|
for (var i = 0; i < array.length; i++) {
|
var bo_ = false;
|
value.map(e=>{
|
if (e == array[i]) {
|
bo_ = true
|
return bo_;
|
}
|
});
|
return bo_;
|
}
|
|
return false;
|
}
|
