1前端
'usestrict';
importComponentfrom'vue-class-component';
import{PageVue,UI,Dict,DropDict}from"sj.sys.ui";
//引入ag-grid声明文件
import{GridOptions,RowEvent,RowNode,ColumnController}from"ag-grid/main";
//引入字典注册
import{DictId}from"sj.sys.dict";
import{SysIconinfoMgr}from'./../../../bll/sys/sys_iconinfo/sys_iconinfo';
require('./style.less');
import{api,sj,Util,SysMgr}from"sj.sys";
exportinterfaceSysIconinfoextendsElementUI.Vue{}
@Component({
template:require('./sys_iconinfo.html'),
components:{
'drop-dict-group':DropDict,
},
})
exportclassSysIconinfoextendsPageVue{
//标注子系统名称
getSubSys(){
return"SYS";
}
//标注模块名称
getModuleName(){
return'系统图标设置';
}
//---为防止编辑器报错增加的属性
$refs;
//---为防止编辑器报错增加的属性-end
//---本组件用到的属性
loading=false;//页面加载loading
loadingSubmit=false;//提交编辑数据时的loading
editWindowReady=false;//是否准备好渲染编辑弹窗k-window可以先不渲染等需要弹出时才渲染以节省性能
recordWindowReady=false;//是否准备好渲染记录弹窗k-window可以先不渲染等需要弹出时才渲染以节省性能
filterStart=false;//是否打开筛选数据开关默认不打开只有筛选条件改变时才打开
//---本组件用到的属性-end
currentRow:any=null;//当前选中的行数据
selectedRow=false;//当前有选中行
sysTypeList=[];//子系统
groupList=[];//分组名称
groupListselect=[];//分组名称
sysTypeListselect=[];//子系统
myheight="";
mytop="";
fileList:[];
selectType=-1;
selectgroup=-1;
iconttitle="";
defaultgroup="";
privateasyncGetSysTypeListselect(){//搜索子系统
letres;
try{
res=awaitsj.sysMgr.GetSubSysList();
}catch(error){
UI.ShowException(error);
this.loading=false;
return;
}
this.sysTypeListselect.push({value:-1,label:'全部'});
for(constitemofres){
this.sysTypeListselect.push({value:item.Id,label:item.Id})
}
}
publicsysselect(vId){//系统搜索
constthat=thisasany;
constdata=that.$data;
that.selectType=vId;
}
publicgroupselect(vId){//分组名称搜索
constthat=thisasany;
constdata=that.$data;
that.selectgroup=vId;
}
//publicgetselectgroupAdd(vId){//新增组类型
//constthat=thisasany;
//constdata=that.$data;
//that.item.IconGroup=vId;
//}
publicgetselectsysAdd(vId){//新增子系统
constthat=thisasany;
constdata=that.$data;
that.item.SubSys=vId;
}
//publicgetselectgroupedit(vId){//编辑组类型
//constthat=thisasany;
//constdata=that.$data;
//that.currentRow.IconGroup=vId;
//}
publicgetselectsysedit(vId){//编辑子系统
constthat=thisasany;
constdata=that.$data;
that.currentRow.SubSys=vId;
}
privateasyncseachData(e){//条件搜索数据
constthat=thisasany;
constdata=that.$data;
letres;
try{
res=awaitSysIconinfoMgr.GetIconListBy(that.selectType,that.selectgroup,that.iconttitle);
}catch(error){
UI.ShowException(error);
return;
}
this.gridOptionsIcon.api.setRowData(res);
}
//分组字典
getdictGroups():any{
return{
id:"A10118",//字典ID,必传,下面参数都为不必传
name:"分组字典",//字典名字(不传弹出字典标题上显示'系统字典')
label:"",//输入框左边的label
defaultFirst:false,//默认选中第一个(默认false)
height:200,//下拉框高度，默认200
textField:"IconGroup",//选中后设置到输入框上的字段（如果不传就是字典配置里的spec_mark=2的那个字段
returnField:["IconGroup"],//选中后设返回调用地方的字段（如果不传就是字典配置里的spec_mark=1的那个字段
placeHolder:"",//占位符
//needWhere:true,
where:"",//where条件,这里带上where条件,所有的字典数据都会被这个where条件过滤
notNull:false,//不允许为空(默认false)
popDict:false,//启用弹出字典(默认启用)
valueType:"0",//0按人员记忆弹出字典方式,1按工作站(默认0)
separator:"",//需要可以选多个值的时候用,每个值用什么符号隔开
noDataTemplate:"",//无数据时的模板
customExpression:"",//自定义表达式，例子在下方
customStyle:"",//满足自定义表达式的数据应用的样式,例子在下方
//customExpression:'data.UserName=="张磊"',//满足这个customExpression的数据将应用下面customStyle的样式
//customStyle:'background-color:rgb(255,0,0);',//背景置为红色
}
}
//getdictGroupsedit():any{
//return{
//id:"A10118",//字典ID,必传,下面参数都为不必传
//name:"分组字典",//字典名字(不传弹出字典标题上显示'系统字典')
//label:"",//输入框左边的label
//defaultFirst:false,//默认选中第一个(默认false)
//height:200,//下拉框高度，默认200
//textField:"IconGroup",//选中后设置到输入框上的字段（如果不传就是字典配置里的spec_mark=2的那个字段
//returnField:["IconGroup"],//选中后设返回调用地方的字段（如果不传就是字典配置里的spec_mark=1的那个字段
//placeHolder:"",//占位符
////needWhere:true,
//where:"",//where条件,这里带上where条件,所有的字典数据都会被这个where条件过滤
//notNull:false,//不允许为空(默认false)
//popDict:true,//启用弹出字典(默认启用)
//valueType:"0",//0按人员记忆弹出字典方式,1按工作站(默认0)
//separator:"",//需要可以选多个值的时候用,每个值用什么符号隔开
//noDataTemplate:"",//无数据时的模板
//customExpression:"",//自定义表达式，例子在下方
//customStyle:"",//满足自定义表达式的数据应用的样式,例子在下方
////customExpression:'data.UserName=="张磊"',//满足这个customExpression的数据将应用下面customStyle的样式
////customStyle:'background-color:rgb(255,0,0);',//背景置为红色
//}
//}
//清空条件
newval(val){
constthat=thisasany;
constdata=that.$data;
if(that.val!=""){
data.selectgroup=val;
}
else{
data.selectgroup="";}
}
publicselectgroups(value){
constthat=thisasany;
constdata=that.$data;
data.selectgroup=value.IconGroup;
}
//新增用的
publicdata():any{
return{
item:{
IconId:"",
SubSys:"",
IconTitle:"",
Wb:"",
Py:"",
IconGroup:"",
FileName:"",
IconData:"",
IconType:"",
IconDesc:"",
IconWidth:0,
IconHeight:0
}
};
}
publicasyncmounted(){
constthat=thisasany;
constdata=that.$data;
this.loading=true;
awaitthis.GetSysTypeListselect();//获取系统分类数据
//awaitthis.GetGroupListselect();//获取系统分组数据
awaitthis.getAlliconlist();//获取全部图标
this.loading=false;
that.myheight=document.documentElement.clientHeight;
that.mytop=document.documentElement.clientHeight;
$(window).resize(()=>{
that.myheight=document.documentElement.clientHeight;
that.mytop=document.documentElement.clientHeight;
});
}
//获取全部图标列表
publicasyncgetAlliconlist(){
constthat=thisasany;
constdata=that.$data;
//图标列表
letres;
try{
res=awaitSysIconinfoMgr.GetIconListwhere("");
}catch(error){
UI.ShowException(error);
return;
}
this.gridOptionsIcon.api.setRowData(res);
}
publicCleariconttitle(){//清空标题名称
constthat=thisasany;
constdata=that.$data;
that.iconttitle='';
}
publicgetgridOptionsIcon():GridOptions{
constthat=this;
return{
headerHeight:30,//表头高度
rowHeight:30,//行高
columnDefs:[//列定义
{
headerName:'选择',
width:60,
checkboxSelection:true
},
{
headerName:'图标编码',
field:'IconId',
width:95,
},
{
headerName:'创建时间',
field:'CreateOn',
sort:'desc',
width:145,
valueFormatter:(params)=>{
if(params.data){
vardate=newDate(params.data.CreateOn);
varyear=date.getFullYear();
varmonth=date.getMonth()+1<10?"0"+(date.getMonth()+1):date.getMonth()+1;
varday=date.getDate()<10?"0"+date.getDate():date.getDate();
varhours=date.getHours()<10?"0"+date.getHours():date.getHours();
varminutes=date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
varseconds=date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
returnyear+"-"+month+"-"+day+""+hours+":"+minutes+":"+seconds;
}
},
},
{
headerName:'图标标题',
field:'IconTitle',
width:150,
},
{
headerName:'子系统',
field:'SubSys',
width:80,
},
{
headerName:'五笔码',
field:'Wb',
width:120,
},
{
headerName:'拼音码',
field:'Py',
width:120,
},
{
headerName:'分组名称',
field:'IconGroup',
width:150,
},
{
headerName:'文件名',
field:'FileName',
width:150,
},
{
headerName:'图标类型',
field:'IconType',
width:130,
},
{
headerName:'图标描述',
field:'IconDesc',
width:180,
},
{
headerName:'图标宽度',
field:'IconWidth',
width:110,
},
{
headerName:'图标高度',
field:'IconHeight',
width:110,
},
],
showToolPanel:false,//显示工具栏
enableSorting:true,//允许排序
enableColResize:true,//允许调整列宽
suppressLoadingOverlay:true,//去掉表格加载数据提示
suppressNoRowsOverlay:true,//去掉表格无数据提示
suppressDragLeaveHidesColumns:true,//防止拖动的时候隐藏表格列
suppressContextMenu:true,//阻止表格的右键菜单
defaultColDef:{
suppressMenu:true,//隐藏表头菜单
},
onRowSelected:this.RowSelected,//行选中回调
//rowSelection:'single',//只允许单行选中
rowSelection:"multiple",
isExternalFilterPresent:()=>this.filterStart,//是否允许外部筛选
doesExternalFilterPass:this.IfNodeVisible,//外部筛选条件
onFilterChanged(){//筛选条件改变回调
this.api.deselectAll();
that.selectedRow=false;
},
navigateToNextCell:(params)=>{//键盘操作选中行
letpreviousCell=params.previousCellDef;
constsuggestedNextCell=params.nextCellDef;
constKEY_UP=38;
constKEY_DOWN=40;
constKEY_LEFT=37;
constKEY_RIGHT=39;
switch(params.key){
caseKEY_DOWN:
previousCell=params.previousCellDef;
this.gridOptionsIcon.api.forEachNode((node)=>{
if(previousCell.rowIndex+1===node.rowIndex){
node.setSelected(true);
}
});
returnsuggestedNextCell;
caseKEY_UP:
previousCell=params.previousCellDef;
this.gridOptionsIcon.api.forEachNode((node)=>{
if(previousCell.rowIndex-1===node.rowIndex){
node.setSelected(true);
}
});
returnsuggestedNextCell;
caseKEY_LEFT:
caseKEY_RIGHT:
returnsuggestedNextCell;
default:
break;
}
},
};
}
privateIfNodeVisible(node:RowNode){//判断行数据是否显示
letdata=node.data,
unitFilter=false
returnunitFilter;
}
publicFilterData(){//筛选数据
this.filterStart=true;
}
publicRowSelected(params:RowEvent){//主表格选中回调
constthat=thisasany;
constdata=that.$data;
if(params.node.isSelected()){
this.selectedRow=true;
this.currentRow=params.data;
}
}
imageUrl="";
imageUrledit="";
////上传图片
shangc(e){
constthat=thisasany;
constdata=that.$data;
letmyfiles:any=(documentasany).getElementById('idscwj').files[0];
letname:any=myfiles.name;
letarr=name.split('.');
letfileSize=0;
letfileMaxSize=10240;//1M
constisJPGORPNG=(myfiles.type=='image/jpeg'||myfiles.type=='image/png');
if(!isJPGORPNG){
UI.Toast('图片只能是JPG或PNG格式！');
data.item.IconType="";
(documentasany).getElementById('idscwj').value='';
returnfalse;
}
if(myfiles){
fileSize=myfiles.size;
if(fileSize>1*1024*1024){
UI.Toast('图片大小不能超过1M！');
data.item.IconType="";
(documentasany).getElementById('idscwj').value='';
returnfalse;
}
}
data.item.IconType=arr[1];//图片类型；
data.item.FileName=name.substring(0,name.indexOf("."));//文件名称
//转码base64
letreader=newFileReader();
reader.readAsDataURL(myfiles);
reader.onload=e=>{
letimgFile:any=(e.targetasany).result;
letarr=imgFile.split(',');
data.item.IconData=arr[1];//图片编码数据
that.imageUrl=imgFile;//图片链接
}
}
//编辑图片
shangcedit(e){
constthat=thisasany;
constdata=that.$data;
letmyfiles:any=(documentasany).getElementById('idedit').files[0];
letname:any=myfiles.name;
letarr=name.split('.');
letfileSize=0;
letfileMaxSize=10240;//1M
constisJPGORPNG=(myfiles.type=='image/jpeg'||myfiles.type=='image/png');
if(!isJPGORPNG){
UI.Toast('图片只能是JPG或PNG格式！');
data.currentRow.IconType="";
(documentasany).getElementById('idedit').value='';
returnfalse;
}
if(myfiles){
fileSize=myfiles.size;
if(fileSize>1*1024*1024){
UI.Toast('图片大小不能超过1M！');
data.currentRow.IconType="";
(documentasany).getElementById('idedit').value='';
returnfalse;
}
}
data.currentRow.IconType=arr[1];//图标类型
data.currentRow.FileName=name.substring(0,name.indexOf("."));//文件名称
//转码base64
letreader=newFileReader();
reader.readAsDataURL(myfiles);
reader.onload=e=>{
letimgFile:any=(e.targetasany).result;
letarr=imgFile.split(',');
data.currentRow.IconData=arr[1];//图片编码
that.imageUrledit=imgFile;
varimage=newImage();
console.log(image);
image.onload=function(){
}
}
}
publicCloseAddWindow(){//关闭新增弹窗
this.$refs['addiconWindow'].widget.close();
}
publicCloseEditWindow(){//关闭编辑弹窗
constthat=thisasany;
constdata=that.$data;
this.gridOptionsIcon.api.deselectAll();//取消选择
this.selectedRow=false;
this.currentRow=null;
this.$refs['editiconWindow'].widget.close();
}
selectids="";
publicasyncdownloadicon(){//下载图标
constthat=thisasany;
constdata=that.$data;
if(!this.currentRow||!this.selectedRow){
UI.Toast('请先选中一条或多条数据！');
return;
}
letflag;
try{
letrows=this.gridOptionsIcon.api.getSelectedRows();//获取选择行数据
for(letr=0;r<rows.length;r++){
vardataid=rows[r].IconId;
that.selectids+=dataid+";"
}
//去掉最后一个字符串，是分号去掉分号，不是就不处理
that.selectids=(that.selectids.substring(that.selectids.length-1)==';')?that.selectids.substring(0,that.selectids.length-1):that.selectids;
console.log(that.selectids);
flag=awaitSysIconinfoMgr.GetSysIcon(that.selectids,"24","24");//下载图标
varnewflag=(flag.substring(flag.length-1)==',')?flag.substring(0,flag.length-1):flag;//去掉返回图片的最后的逗号
varnewstr=newflag.replace(/\s*/g,"");//去空格
console.log(newstr);
vararrayinfo=newstr.split(",");//转换为数组
//(windowasany).sj.server
varmyurl=(windowasany).sj.server.conf.SrvBaseUrl;//获取配置信息
//console.log(myurl);
//varmyurl="http://192.168.0.230:6337/sj_web/";
varmydiv=document.getElementById('downstr');//获得dom对象
mydiv.innerHTML="<spanstyle='width:130px;'>下载的图标如下：</span>";//还原
for(vari=0;i<arrayinfo.length-1;i++){
console.log(arrayinfo[i]);
varframeimg=document.createElement("img");//创建一个标签
frameimg.setAttribute("id","divid"+i);//给创建的div设置id值；
frameimg.setAttribute("src",myurl+arrayinfo[i]);//给创建的div设置id值；
frameimg.setAttribute("height","24");//给创建的div设置高度；
frameimg.setAttribute("width","24");//给创建的div设置宽度；
frameimg.setAttribute("style","margin-left:30px;");//给创建的div设样式；
mydiv.appendChild(frameimg);
}
if(flag!=""){
this.$message({
message:'图标下载成功!',
type:'success',/**/
});
that.selectids="";
}
}catch(error){
UI.ShowException(error);
return;
}
}
downurl="";
//下载本地
publicdownpic(){
constthat=thisasany;
constdata=that.$data;
if(!this.currentRow||!this.selectedRow){
UI.Toast('请先选中一条或多条数据！');
return;
}
letflag;
letrows=this.gridOptionsIcon.api.getSelectedRows();//获取选择行数据
for(letr=0;r<rows.length;r++){
varIconData=rows[r].IconData;
vara=document.createElement('a');//创建一个a节点插入的document
varevent=newMouseEvent('click');//模拟鼠标click点击事件
a.download=rows[r].FileName;//设置a节点的download属性值
a.href='data:image/png;base64,'+IconData;//将图片的src赋值给a节点的href
a.dispatchEvent(event)//触发鼠标点击事件
}
}
groupListedit=[];
publicasyncOpenEditWindow(){//打开编辑弹窗
constthat=thisasany;
constdata=that.$data;
that.sysTypeList=[];//子系统
that.groupList=[];//分组名称
if(!this.currentRow||!this.selectedRow){
UI.Toast('请先选中一条数据！');
return;
}
letrows=this.gridOptionsIcon.api.getSelectedRows().length;//获取选择行数据
if(rows>1){
UI.Toast('编辑时只能选择一行数据！');
this.gridOptionsIcon.api.deselectAll();
this.selectedRow=false;
this.currentRow=null;
return;
}
//console.log(that.dictGroupsedit);
//that.dictGroupsedit.api.setAttribute("value",that.currentRow.IconGroup);
letres;
try{
res=awaitsj.sysMgr.GetSubSysList();
}catch(error){
UI.ShowException(error);
this.loading=false;
return;
}
for(constitemofres){
this.sysTypeList.push({value:item.Id,label:item.Id});
}
letresgroup;
try{
resgroup=awaitSysIconinfoMgr.GetIconGroupListwhere();
}catch(error){
UI.ShowException(error);
this.loading=false;
return;
}
for(constitemofresgroup){
this.groupListedit.push({value:item.IconGroup,label:item.IconGroup});
}
that.imageUrledit='data:image/png;base64,'+this.currentRow.IconData;
console.log(this.currentRow.IconData);
this.editWindowReady=true;//先渲染k-window
this.$nextTick(()=>{//再打开k-window
this.$refs['editiconWindow'].widget.center().open();
that.dictGroupsedit.api.SetText(that.currentRow.IconGroup);
});
}
getgroupedit(vld){
constthat=thisasany;
constdata=that.$data;
data.currentRow.IconGroup=vld;
}
getgroupadd(vld){
constthat=thisasany;
constdata=that.$data;
data.item.IconGroup=vld;
}
groupListadd=[];
defaultsys="";
deaultsysid="";
publicasyncOpenaddindow(){//打开新增弹窗
constthat=thisasany;
constdata=that.$data;
data.item.IconTitle="";
data.item.Wb="";
data.item.Py="";
data.item.IconGroup="";
data.item.IconType="";
data.item.SubSys="";
data.item.IconWidth=0;
data.item.IconHeight=0;
data.item.IconData="";
data.item.IconDesc="";
//data.item.IconId="";
//设置id默认值，最大的id值
varmaxid=awaitSysIconinfoMgr.GetMaxid();
data.item.IconId=maxid.toString();
data.item.FileName="";
that.imageUrl="";
that.sysTypeList=[];//子系统
that.groupList=[];//分组名称
letresgroup;
try{
resgroup=awaitSysIconinfoMgr.GetIconGroupListwhere();
if(resgroup.length>0){
data.item.IconGroup=resgroup[0].IconGroup;//默认值
}
for(constitemofresgroup){
this.groupListadd.push({value:item.IconGroup,label:item.IconGroup});
}
}catch(error){
UI.ShowException(error);
return;
}
letres;
try{
res=awaitsj.sysMgr.GetSubSysList();
if(res.length>0){
data.item.SubSys=res[0].Id;//默认值
that.defaultsys=res[0].Id;//默认值
that.deaultsysid=res[0].Id;//默认值
for(constitemofres){
//this.sysTypeList.push({value:item.Id,label:item.Name});//子系统
this.sysTypeList.push({value:item.Id,label:item.Id});//子系统
}
}
}catch(error){
UI.ShowException(error);
this.loading=false;
return;
}
this.$refs['addiconWindow'].widget.center().open();
}
publicasyncSaveAdd(){//新增图标
constthat=thisasany;
constdata=that.$data;
if(!data.item.IconId){
UI.Toast('图标id不能为空！');
returnfalse;
}
else{
letres;
try{
res=awaitSysIconinfoMgr.Ifexsiticonid(data.item.IconId);
if(res==true){
UI.Toast('图标id已经存在了,请重新输入！');
data.item.IconId="";
returnfalse;
}
}catch(error){
UI.ShowException(error);
return;
}
}
//开始没选系统，用的默认系统
if(data.item.SubSys==that.defaultsys){
data.item.SubSys=that.deaultsysid;
}
else{
}
if(data.item.IconTitle!=""){
letcxpy=awaitsj.sysMgr.PYM(data.item.IconTitle);
if(cxpy.length>0){data.item.Py=cxpy;}//拼音码
letcxwb=awaitsj.sysMgr.WBM(data.item.IconTitle);
console.log(cxwb);
if(cxwb.length>0){data.item.wb=cxwb;}//五笔码
}
try{
letres=awaitSysIconinfoMgr.SaveiIconinfo(JSON.stringify(data.item));
//服务器修改成功后，修改本地数据
that.$emit("refreshdata");
awaitthis.getAlliconlist();//获取全部图标//
this.$refs['addiconWindow'].widget.close();
this.$message({
message:'新增成功!',
type:'success',/**/
});
}
catch(error){
UI.ShowException(error);
return;
}
data.item.IconTitle="";
data.item.Wb="";
data.item.Py="";
data.item.IconGroup="";
data.item.IconType="";
data.item.SubSys="";
data.item.IconWidth=0;
data.item.IconHeight=0;
data.item.IconData="";
data.item.IconDesc="";
that.imageUrl="";
data.item.IconId="";
//清空上传控件文件名
(documentasany).getElementById('idscwj').value='';
}
//新增时获取拼音码和五笔码
publicasynccgtext(){
constthat=thisasany;
constdata=that.$data;
if(data.item.IconTitle!=""){
letcxpy=awaitsj.sysMgr.PYM(data.item.IconTitle);
if(cxpy.length>0){data.item.Py=cxpy;}
letcxwb=awaitsj.sysMgr.WBM(data.item.IconTitle);
console.log(cxwb);
if(cxwb.length>0){data.item.wb=cxwb;}
}
}
//编辑时获取拼音码和五笔码
publicasynccgtextedit(){
constthat=thisasany;
constdata=that.$data;
if(that.currentRow.IconTitle!=""){
letcxpy=awaitsj.sysMgr.PYM(that.currentRow.IconTitle);
if(cxpy.length>0){that.currentRow.Py=cxpy;}
letcxwb=awaitsj.sysMgr.WBM(that.currentRow.IconTitle);
console.log(cxwb);
if(cxwb.length>0){that.currentRow.wb=cxwb;}
}
}
publicasyncSaveEdit(){//编辑图标
constthat=thisasany;
constdata=that.$data;
if(that.currentRow.IconTitle!=""){
letcxpy=awaitsj.sysMgr.PYM(that.currentRow.IconTitle);
if(cxpy.length>0){that.currentRow.Py=cxpy;}
letcxwb=awaitsj.sysMgr.WBM(that.currentRow.IconTitle);
console.log(cxwb);
if(cxwb.length>0){that.currentRow.wb=cxwb;}
}
try{
letres=awaitSysIconinfoMgr.SaveiIconinfo(JSON.stringify(this.currentRow));
this.$emit("refreshdata");
awaitthis.getAlliconlist();//获取全部数据;
(documentasany).getElementById('idedit').value='';
//服务器修改成功后，修改本地数据
this.gridOptionsIcon.api.updateRowData(this.currentRow);
this.$refs['editiconWindow'].widget.close();
this.$message({
message:'修改成功!',
type:'success',/**/
});
}
catch(error){
UI.ShowException(error);
return;
}
}
OpenIconGroupDict(serVal:string){
letthat=this;
newDict({
dict:{
id:"A10118",
},serVal:serVal,
selected:(obj,row)=>{
that.currentRow.IconGroup=row.IconGroup;
}
})
}
OpenIconGroupDictadd(serVal:string){
constthat=thisasany;
constdata=that.$data;
//letthat=this;
newDict({
dict:{
id:"A10118",
},serVal:serVal,
selected:(obj,row)=>{
that.item.IconGroup=row.IconGroup;
}
})
}
}
2.界面
<divv-loading.fullscreen='loading'element-loading-text="正在加载数据，请稍后"
style="display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;">
<divclass="sj_expand_row"style="padding:5px5px05px;">
<spanstyle="width:60px;margin-left:10px;">子系统：</span>
<el-selectsize="small"v-model="selectType"style="width:200px"@change="sysselect">
<el-optionv-for="iteminsysTypeListselect":key="item.value":label="item.label":value="item.value">
</el-option>
</el-select>
<spanstyle="width:60px;margin-left:10px;">分组名称：</span>
<!--<el-selectv-model="selectgroup"style="width:200px"@change="groupselect">
<el-optionv-for="itemingroupListselect":key="item.value":label="item.label":value="item.value">
</el-option>
</el-select>-->
<drop-dict-groupref="txtgroupselect"@change="newval"style="width:200px;":options="dictGroups"
@select='selectgroups'></drop-dict-group>
<spanstyle="width:60px;margin-left:10px;">图标标题：</span>
<el-input:icon='iconttitle.trim()===""?"":"circle-close"'class="custom_el_input"size="small"v-model="iconttitle"
style="width:200px":on-icon-click="Cleariconttitle"></el-input>
<el-buttonsize="small"style="margin-left:10px;color:black;"@click='seachData'>
查 询
</el-button>
</div>
<divclass="sj_expand_row"style="padding:5px;">
<ag-grid-vueclass="ag-freshag-grid-module_name":gridOptions="gridOptionsIcon"
v-bind:style="{overflow:'auto',width:'100%',height:(myheight-150)+'px'}">
<!--style="height:800px;margin-bottom:30px;width:100%;">-->
</ag-grid-vue>
</div>
<divclass="sj_expand_row"style="padding:5px;">
<el-buttonstyle="margin-right:10px;width:110px;color:black;"@click='Openaddindow'>新增</el-button>
<el-buttonstyle="width:130px;color:black;"@click='OpenEditWindow'>编辑</el-button>
<el-buttonstyle="width:130px;color:black;"@click='downloadicon'>下载图标</el-button>
<el-buttonstyle="width:130px;color:black;"@click='downpic'>下载图标本地</el-button>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;"id="downstr">
<spanstyle="width:130px;">下载的图标如下：</span>
</div>
<!--编辑-->
<k-windowref='editiconWindow'title="编辑图标"v-if='editWindowReady'width="620"height="500":visible="false"
modal='true'>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标ID：</span>
<el-inputv-model="currentRow.IconId"style="width:200px;":disabled='true'></el-input>
<spanstyle="width:75px;margin-left:10px;">图标标题：</span>
<el-inputv-model="currentRow.IconTitle"style="width:200px;"@blur="cgtextedit"@change="cgtextedit"></el-input>
</div>
<!--<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标拼音：</span>
<el-inputv-model="currentRow.Py"style="width:200px;":disabled='true'></el-input>
<spanstyle="width:75px;margin-left:10px;">标题五笔码：</span>
<el-inputv-model="currentRow.Wb"style="width:200px;":disabled='true'></el-input>
</div>
-->
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">分组名称：</span>
<el-selectv-model="currentRow.IconGroup"filterableallow-createstyle="width:200px"@change="getgroupedit">
<el-optionv-for="itemingroupListedit":key="item.value":label="item.label":value="item.value">
</el-option>
</el-select>
<spanstyle="width:75px;margin-left:10px;">文件名称：</span>
<el-inputv-model="currentRow.FileName"style="width:200px;"></el-input>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标类型：</span>
<el-inputv-model="currentRow.IconType"style="width:200px;":disabled='true'></el-input>
<spanstyle="width:75px;margin-left:10px;">所在子系统：</span>
<el-selectv-model="currentRow.SubSys"filterableallow-createstyle="width:200px"@change="getselectsysedit">
<el-optionv-for="iteminsysTypeList":key="item.value":label="item.label":value="item.value">
</el-option>
</el-select>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标宽度：</span>
<el-inputv-model="currentRow.IconWidth"style="width:200px;"></el-input>
<spanstyle="width:75px;margin-left:10px;">图标高度：</span>
<el-inputv-model="currentRow.IconHeight"style="width:200px;"></el-input>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标描述：</span>
<el-inputtype="textarea":autosize="{minRows:5,maxRows:10}"placeholder="请输入内容"v-model="currentRow.IconDesc"
style="width:487px;">
</el-input>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">选择图片：</span>
<inputtype="file"id="idedit"name="image"style="width:200px"class="getImgUrl_file"
@change="shangcedit($event)"accept="image/jpg,image/jpeg,image/png">
<img:src="imageUrledit"></img>
</div>
<divclass="sj_expand_row"style="justify-content:center">
<el-buttonstyle="margin-right:20px;color:black;"@click='CloseEditWindow'>取 消
</el-button>
<el-buttonstyle="color:black;"@click='SaveEdit'>保  存
</el-button>
</div>
</k-window>
<!--新增图标-->
<k-windowref='addiconWindow'title="新增图标":visible="false"width="620"height="500"modal='true'>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标ID：</span>
<el-inputv-model="item.IconId"style="width:200px;"></el-input>
<spanstyle="width:75px;margin-left:10px;">图标标题：</span>
<el-inputv-model="item.IconTitle"style="width:200px;"@blur="cgtext"></el-input>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">分组名称：</span>
<!--<sj-input-dictv-model="item.IconGroup"@showDict="OpenIconGroupDictadd"@clear="item.IconGroup=''"style="width:200px;"></sj-input-dict>-->
<el-selectv-model="item.IconGroup"filterableallow-createstyle="width:200px"@change="getgroupadd">
<el-optionv-for="itemingroupListadd":key="item.value":label="item.label":value="item.value">
</el-option>
</el-select>
<spanstyle="width:75px;margin-left:10px;">文件名称：</span>
<el-inputv-model="item.FileName"style="width:200px;"></el-input>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标类型：</span>
<el-inputv-model="item.IconType"style="width:200px;":disabled='true'></el-input>
<spanstyle="width:75px;margin-left:10px;">所在子系统：</span>
<el-selectv-model="item.SubSys"filterableallow-createstyle="width:200px"@change="getselectsysAdd">
<el-optionv-for="iteminsysTypeList":key="item.value":label="item.label":value="item.value">
</el-option>
</el-select>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标宽度：</span>
<el-inputv-model="item.IconWidth"style="width:200px;"></el-input>
<spanstyle="width:75px;margin-left:10px;">图标高度：</span>
<el-inputv-model="item.IconHeight"style="width:200px;"></el-input>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:75px;">图标描述：</span>
<el-inputtype="textarea":autosize="{minRows:5,maxRows:10}"placeholder="请输入内容"v-model="item.IconDesc"
style="width:482px;">
</el-input>
</div>
<divclass="sj_expand_row"style="margin-bottom:10px;">
<spanstyle="width:65px;">选择图片：</span>
<inputtype="file"id="idscwj"name="image"style="width:200px"class="getImgUrl_file"@change="shangc($event)"
accept="image/jpg,image/jpeg,image/png">
<img:src="imageUrl"></img>
</div>
<divclass="sj_expand_row"style="justify-content:center;">
<el-buttonstyle="margin-right:20px;color:black;"@click='CloseAddWindow'>取 消</el-button>
<el-buttonstyle="color:black;"@click='SaveAdd'>保  存
</el-button>
</div>
</k-window>
</div>
3.效果
