import { LightningElement,api, track } from 'lwc';
|
|
export default class jzTable extends LightningElement {
|
|
|
connectedCallback(){
|
this.OnChreateNotSelectedData();
|
if (this.isselectedtable) {
|
this.OnChreateShowData();
|
}
|
this.clickShow = this.isselectedtable;
|
|
}
|
|
|
@api selecttitle = "已选择";
|
@api notselecttitle = '未选择';
|
|
idKey = 0;
|
|
isSelected = false; //全选
|
//全选
|
selectedAllOnClick(){
|
|
this.isSelected = !this.isSelected;
|
|
var newshowData = [];
|
var newshowIds = [];
|
this.showData.forEach(sItem=>{
|
var temp = {...{},...sItem};
|
if (this.isSelected) {
|
temp.IsSelected = "1"
|
}else{
|
temp.IsSelected = ""
|
}
|
newshowIds.push(sItem.Id);
|
newshowData.push(temp);
|
})
|
|
var newNotData = [];
|
var notshowIds = [];
|
this.NotData.forEach(sItem=>{
|
var temp = {...{},...sItem};
|
if (this.isSelected) {
|
temp.IsSelected = "1"
|
|
}else{
|
temp.IsSelected = ""
|
}
|
notshowIds.push(sItem.Id);
|
newNotData.push(temp);
|
})
|
|
if (this.isSelected) {
|
this.SelectShowArr = [];
|
this.NotSelectShowArr = notshowIds;
|
}else{
|
this.SelectShowArr = newshowIds;
|
this.NotSelectShowArr = [];
|
}
|
|
this.showData = newshowData;
|
this.NotData = newNotData;
|
|
this.onselecteChange();
|
}
|
|
@api isselectedtable = false;
|
isselectedtable = true;
|
|
// --- 已选择
|
@api optionsdata=[]
|
|
@api selectdata=[]
|
|
|
|
//已选择
|
@track showData=[]
|
|
|
clickShow=true;
|
clickShowFn(event)
|
{
|
this.clickShow = !this.clickShow;
|
}
|
|
SelectShowArr=[];
|
SelectShowFn(event)
|
{
|
var id = event.target.title;
|
var flag = false;
|
var newArr = [];
|
this.SelectShowArr.forEach(item=>{
|
if (item == id) {
|
flag = true;
|
}else{
|
newArr.push(item);
|
}
|
})
|
if (flag) {
|
this.SelectShowArr = newArr;
|
}else{
|
this.SelectShowArr.push(id);
|
}
|
|
this.onselecteChange();
|
}
|
|
OnChreateShowData()
|
{
|
var TempShowData= [];
|
this.selectdata.forEach(item=>{
|
var values=[];
|
this.optionsdata.forEach(option=>{
|
var valuesItem = {};
|
valuesItem.value = item[option.props];
|
valuesItem.type = option.Type;
|
valuesItem.valueId = this.idKey++;
|
valuesItem.IdDataStr = item.Id+"##-##"+option.props;
|
valuesItem.checkBoxOptionData = option.CheckOptionData;
|
if (valuesItem.type == 'input') {
|
valuesItem.input= true
|
}else if (valuesItem.type == 'checkBox') {
|
valuesItem.checkBox= true
|
}else if (valuesItem.type == 'date') {
|
valuesItem.date= true
|
}else if (valuesItem.type == 'search') {
|
valuesItem.search= true
|
}else if (valuesItem.type == 'text') {
|
valuesItem.text= true;
|
}else if (valuesItem.type == 'url') {
|
valuesItem.url= true
|
valuesItem.urlValue= '/'+item[option.url];
|
}else if (valuesItem.type == 'urlNoJump') {
|
valuesItem.urlNoJump= true
|
}
|
else if (valuesItem.type == 'richtext') {
|
valuesItem.richtext= true
|
}
|
|
values.push(valuesItem);
|
|
})
|
var showDataTemp = {};
|
|
showDataTemp.Id = item.Id;
|
showDataTemp.values = values;
|
showDataTemp.checkId = item.Id +" column-group-header"
|
showDataTemp.IsSelected = '1';
|
TempShowData.push(showDataTemp);
|
})
|
|
this.showData = TempShowData;
|
}
|
|
@api NotData=[]
|
|
|
@api notselectdata=[]
|
|
|
|
clickShowNotSelect=true;
|
clickShowNotSelectFn(event)
|
{
|
this.clickShowNotSelect = !this.clickShowNotSelect;
|
}
|
|
|
NotSelectShowArr=[];
|
NotSelectShowFn(event)
|
{
|
var id = event.target.title;
|
var flag = false;
|
var newArr = [];
|
this.NotSelectShowArr.forEach(item=>{
|
if (item == id) {
|
flag = true;
|
}else{
|
newArr.push(item);
|
}
|
})
|
if (flag) {
|
this.NotSelectShowArr = newArr;
|
}else{
|
this.NotSelectShowArr.push(id);
|
}
|
this.onselecteChange();
|
}
|
|
//更改选中的颜色
|
CheckNoDataSelected()
|
{
|
this.NotData.forEach(item=>{
|
this.template.querySelector('[data-parent-id="'+item.Id+'"]').style.backgroundColor="";
|
})
|
this.NotSelectShowArr.forEach(item=>{
|
this.template.querySelector('[data-parent-id="'+item+'"]').style.backgroundColor="#ecebea";
|
})
|
}
|
|
OnChreateNotSelectedData()
|
{
|
var TempShowData= [];
|
this.notselectdata.forEach(item=>{
|
var values=[];
|
this.optionsdata.forEach(option=>{
|
var valuesItem = {};
|
valuesItem.value = item[option.props];
|
valuesItem.type = option.Type;
|
valuesItem.valueId = this.idKey++;
|
valuesItem.IdDataStr = item.Id+"##-##"+option.props;
|
valuesItem.checkBoxOptionData = option.CheckOptionData;
|
if (valuesItem.type == 'input') {
|
valuesItem.input= true
|
}else if (valuesItem.type == 'checkBox') {
|
valuesItem.checkBox= true
|
}else if (valuesItem.type == 'date') {
|
valuesItem.date= true
|
}else if (valuesItem.type == 'search') {
|
valuesItem.search= true
|
}else if (valuesItem.type == 'text') {
|
valuesItem.text= true
|
}else if (valuesItem.type == 'url') {
|
valuesItem.url= true
|
valuesItem.urlValue= '/'+item[option.url];
|
}else if (valuesItem.type == 'urlNoJump') {
|
valuesItem.urlNoJump= true
|
}
|
else if (valuesItem.type == 'richtext') {
|
valuesItem.richtext= true
|
}
|
|
values.push(valuesItem);
|
|
})
|
var showDataTemp = {};
|
|
showDataTemp.Id = item.Id;
|
showDataTemp.values = values;
|
showDataTemp.checkId = item.Id +" column-group-header"
|
showDataTemp.IsSelected = '';
|
showDataTemp.SelecedStyle = '';
|
TempShowData.push(showDataTemp);
|
})
|
|
this.NotData = TempShowData;
|
}
|
|
|
//刷新 未选中和选中的数据
|
@api refreshdata(selectdata,notselectdata){
|
this.SelectShowArr = [];
|
this.NotSelectShowArr = [];
|
if (selectdata!=undefined) {
|
this.selectdata = selectdata;
|
}
|
if (notselectdata!=undefined) {
|
this.notselectdata = notselectdata;
|
}
|
this.OnChreateShowData();
|
this.OnChreateNotSelectedData();
|
}
|
// 勾选
|
onselecteChange(){
|
this.SelectShowArr;
|
this.NotSelectShowArr;
|
|
var SelectedShowTemp = [];
|
var NotSelectShowTemp = [];
|
|
this.SelectShowArr.forEach(sId=>{
|
this.selectdata.forEach(s=>{
|
if (s.Id == sId) {
|
SelectedShowTemp.push({...{},...s});
|
return;
|
}
|
})
|
})
|
|
this.NotSelectShowArr.forEach(sId=>{
|
this.notselectdata.forEach(s=>{
|
if (s.Id == sId) {
|
NotSelectShowTemp.push({...{},...s});
|
return;
|
}
|
})
|
})
|
var returnSelected = {
|
selected:SelectedShowTemp,
|
notselected:NotSelectShowTemp
|
}
|
const getSearchParamsEvent = new CustomEvent('selectedchange', {
|
detail: returnSelected
|
});
|
this.dispatchEvent(getSearchParamsEvent);
|
//更改颜色
|
this.CheckNoDataSelected();
|
}
|
// ---End
|
|
|
//检索条件
|
|
onChangeFn(event)
|
{
|
var a = event;
|
|
var DataStr = event.target.name;
|
DataStr= DataStr.split("##-##");
|
|
var TargetValue = event.target.value;
|
|
this.ChangeDataFn(DataStr[0],DataStr[1],TargetValue);
|
}
|
|
searchoptions=[]
|
searchdatas=[]
|
queryoptions=[]
|
isQuery = false;
|
queryData=[];
|
|
SearchOption = {}; //选中的option
|
SearchInitData = []; //选中查询的数据
|
SearchReturnData={Id:"",prop:"",value:[]}
|
|
|
onChangeSearchFn(event)
|
{
|
|
// const isEnterKey = event.keyCode === 13;
|
|
// if (isEnterKey) {
|
var value = event.target.value;
|
var DataStr = event.target.name;
|
DataStr= DataStr.split("##-##");
|
|
this.SearchReturnData.Id = DataStr[0];
|
this.SearchReturnData.prop = DataStr[1];
|
|
|
//修改事件
|
this.ChangeDataFn(DataStr[0],DataStr[1],value);
|
|
// 初始化 模态框
|
var propTemp = {};
|
if (this.SearchOption!= {} && this.SearchOption.props == DataStr[1]) {
|
propTemp = this.SearchOption;
|
}else{
|
this.optionsdata.forEach(item=>{
|
if (item.props == DataStr[1]) {
|
propTemp = {...{},...item};
|
return;
|
}
|
})
|
|
if (propTemp == {}&&propTemp.searchoption == undefined&&propTemp.searchTableDataInit == undefined) {
|
console.error("搜索列配置错误");
|
}
|
}
|
|
this.SearchOption = propTemp;
|
|
this.searchoptions = propTemp.searchoption;
|
var initData = propTemp.searchTableDataInit({Id:DataStr[0],prop:DataStr[1],value:value});
|
//判断是否启用搜索
|
if (propTemp.isQuery) {
|
this.isQuery = true;
|
var queryoptionsTemp =[];
|
propTemp.queryOption.forEach(item=>{
|
var tempItem = {};
|
tempItem.label = item.label;
|
tempItem.prop = item.prop;
|
tempItem.value = item.value;
|
if (item.Type == 'input') {
|
tempItem.input= true
|
}else if (item.Type == 'checkBox') {
|
tempItem.checkBox= true
|
}else if (item.Type == 'date') {
|
tempItem.date= true
|
}
|
tempItem.checkBoxOptionData = item.CheckOptionData;
|
tempItem.Id = this.idKey++;
|
|
queryoptionsTemp.push(tempItem);
|
|
this.queryData.push({prop:item.prop,value:item.value});
|
})
|
this.queryoptions = queryoptionsTemp;
|
}else{
|
this.isQuery = false;
|
}
|
|
this.SearchInitData = initData;
|
|
|
this.OpenShowModelFn();
|
|
this.searchDataInit(initData);
|
|
|
|
}
|
//模态 查询
|
onQueryChangeFn(event){
|
|
var prop = event.target.title;
|
var value = event.target.value;
|
|
var queryDataTemp = [];
|
this.queryData.forEach(item=>{
|
var temp = {...{},...item};
|
if (temp.prop == prop) {
|
temp.value = value;
|
}
|
queryDataTemp.push(temp);
|
})
|
this.queryData = queryDataTemp;
|
}
|
|
querySearchFn(){
|
var querySearchData= this.SearchOption.queryTable(this.queryData);
|
this.SearchInitData = querySearchData;
|
this.searchDataInit(querySearchData);
|
}
|
|
searchDataInit(data)
|
{
|
var TempShowData= [];
|
data.forEach(item=>{
|
|
var values=[];
|
|
this.searchoptions.forEach(option=>{
|
var temp = {};
|
temp.value=item[option.props];
|
temp.IdDataStr = item.Id+"##-##"+option.props;
|
temp.valueId = this.idKey++;
|
values.push({...{},...temp});
|
})
|
var showDataTemp = {};
|
|
showDataTemp.Id = item.Id;
|
showDataTemp.values = values;
|
showDataTemp.checkId = item.Id +" column-group-header"
|
showDataTemp.IsSelected = '';
|
TempShowData.push(showDataTemp);
|
})
|
|
this.searchdatas = TempShowData;
|
}
|
|
//模态框选中
|
OnSearchId=[];
|
showCheckFn(event)
|
{
|
var a = event;
|
var id = event.target.title;
|
|
var flag = false;
|
var newArr = [];
|
this.OnSearchId.forEach(item=>{
|
if (item == id) {
|
flag = true;
|
}else{
|
newArr.push(item);
|
}
|
})
|
if (flag) {
|
this.OnSearchId = newArr;
|
}else{
|
this.OnSearchId.push(id);
|
}
|
//判断是否是单选
|
if(this.SearchOption.isSingle)
|
{
|
this.ShowModelSaveFn();
|
}
|
}
|
|
TempModelShows = false;
|
OpenShowModelFn()
|
{
|
this.TempModelShows = true;
|
}
|
|
ShowModelCloseFn()
|
{
|
this.TempModelShows = false;
|
}
|
ShowModelSaveFn()
|
{
|
|
if (this.SearchOption.searchTableSave != undefined) {
|
var arrTemp = [];
|
this.OnSearchId.forEach(id=>{
|
this.SearchInitData.forEach(item=>{
|
if (item.Id == id) {
|
arrTemp.push({...{},...item});
|
return;
|
}
|
})
|
})
|
this.SearchReturnData.value = arrTemp;
|
|
this.SearchOption.searchTableSave(this.SearchReturnData);
|
}else{
|
console.error("searchTableSave 方法未配置");
|
}
|
//清空值
|
this.OnSearchId = [];
|
this.SearchOption = {};
|
//TODU刷新列表
|
this.TempModelShows = false;
|
}
|
|
|
//修改 值 事件
|
ChangeDataFn(Id,prop,value){
|
var flag = false;
|
var newselectdata = [];
|
var returnData = {Id:"",prop:"",PreValue:"",CurrentValue:""};
|
this.selectdata.forEach(sitem=>{
|
var temp = {...{},...sitem};
|
if (sitem.Id == Id) {
|
returnData.Id = Id;
|
returnData.prop=prop;
|
returnData.PreValue = temp[prop];
|
returnData.CurrentValue = value;
|
|
temp[prop] = value;
|
|
flag = true;
|
}
|
newselectdata.push(temp);
|
})
|
if (flag) {
|
this.selectdata = newselectdata;
|
}else
|
{
|
var newNotSeletctData = []
|
this.notselectdata.forEach(nitem=>{
|
var temp = {...{},...nitem};
|
if (nitem.Id == Id) {
|
returnData.Id = Id;
|
returnData.prop=prop;
|
returnData.PreValue = temp[prop];
|
returnData.CurrentValue = value;
|
|
temp[prop] = value;
|
|
flag = true;
|
}
|
newNotSeletctData.push(temp);
|
})
|
this.notselectdata = newNotSeletctData;
|
}
|
|
if (flag) {
|
const getSearchParamsEvent = new CustomEvent('datachange', {
|
detail: returnData
|
});
|
this.dispatchEvent(getSearchParamsEvent);
|
}
|
// this.refreshdata();
|
}
|
|
UrlOnClick(event)
|
{
|
var DataStr = event.target.name;
|
DataStr= DataStr.split("##-##");
|
|
const getSearchParamsEvent = new CustomEvent('urlclick', {
|
detail: {Id:DataStr[0],prop:DataStr[1]}
|
});
|
this.dispatchEvent(getSearchParamsEvent);
|
debugger;
|
}
|
//对父组件提供获取当前表格数据
|
@api getdata(){
|
return {selectdata:this.selectdata,notselectdata:[...[],...this.notselectdata]}
|
}
|
|
}
|
