vue+element上传图片
1前端
'use strict';
import Component from '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";
export interface SysIconinfo extends ElementUI.Vue { }
@Component({
template: require('./sys_iconinfo.html'),
components: {
'drop-dict-group': DropDict,
},
})
export class SysIconinfo extends PageVue {
// 标注子系统名称
get SubSys() {
return "SYS";
}
// 标注模块名称
get ModuleName() {
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 = "";
private async GetSysTypeListselect() {//搜索子系统
let res;
try {
res = await sj.sysMgr.GetSubSysList();
} catch (error) {
UI.ShowException(error);
this.loading = false;
return;
}
this.sysTypeListselect.push({ value: -1, label: '全部' });
for (const item of res) {
this.sysTypeListselect.push({ value: item.Id, label: item.Id })
}
}
public sysselect(vId) {//系统搜索
const that = this as any;
const data = that.$data;
that.selectType = vId;
}
public groupselect(vId) {//分组名称搜索
const that = this as any;
const data = that.$data;
that.selectgroup = vId;
}
// public getselectgroupAdd(vId) {//新增组类型
// const that = this as any;
// const data = that.$data;
// that.item.IconGroup = vId;
// }
public getselectsysAdd(vId) {//新增子系统
const that = this as any;
const data = that.$data;
that.item.SubSys = vId;
}
// public getselectgroupedit(vId) {//编辑组类型
// const that = this as any;
// const data = that.$data;
// that.currentRow.IconGroup = vId;
// }
public getselectsysedit(vId) {//编辑子系统
const that = this as any;
const data = that.$data;
that.currentRow.SubSys = vId;
}
private async seachData(e) {//条件搜索数据
const that = this as any;
const data = that.$data;
let res;
try {
res = await SysIconinfoMgr.GetIconListBy(that.selectType, that.selectgroup, that.iconttitle);
} catch (error) {
UI.ShowException(error);
return;
}
this.gridOptionsIcon.api.setRowData(res);
}
// 分组字典
get dictGroups(): 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);',//背景置为红色
}
}
// get dictGroupsedit(): 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) {
const that = this as any;
const data = that.$data;
if(that.val!=""){
data.selectgroup=val;
}
else{
data.selectgroup= "";}
}
public selectgroups(value) {
const that = this as any;
const data = that.$data;
data.selectgroup = value.IconGroup;
}
//新增用的
public data(): any {
return {
item: {
IconId: "",
SubSys: "",
IconTitle: "",
Wb: "",
Py: "",
IconGroup: "",
FileName: "",
IconData: "",
IconType: "",
IconDesc: "",
IconWidth: 0,
IconHeight: 0
}
};
}
public async mounted() {
const that = this as any;
const data = that.$data;
this.loading = true;
await this.GetSysTypeListselect();//获取系统分类数据
// await this.GetGroupListselect();//获取系统分组数据
await this.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;
});
}
//获取全部图标列表
public async getAlliconlist() {
const that = this as any;
const data = that.$data;
//图标列表
let res;
try {
res = await SysIconinfoMgr.GetIconListwhere("");
} catch (error) {
UI.ShowException(error);
return;
}
this.gridOptionsIcon.api.setRowData(res);
}
public Cleariconttitle() {//清空标题名称
const that = this as any;
const data = that.$data;
that.iconttitle = '';
}
public get gridOptionsIcon(): GridOptions {
const that = 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) {
var date = new Date(params.data.CreateOn);
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return year + "-" + 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) => {// 键盘操作选中行
let previousCell = params.previousCellDef;
const suggestedNextCell = params.nextCellDef;
const KEY_UP = 38;
const KEY_DOWN = 40;
const KEY_LEFT = 37;
const KEY_RIGHT = 39;
switch (params.key) {
case KEY_DOWN:
previousCell = params.previousCellDef;
this.gridOptionsIcon.api.forEachNode((node) => {
if (previousCell.rowIndex + 1 === node.rowIndex) {
node.setSelected(true);
}
});
return suggestedNextCell;
case KEY_UP:
previousCell = params.previousCellDef;
this.gridOptionsIcon.api.forEachNode((node) => {
if (previousCell.rowIndex - 1 === node.rowIndex) {
node.setSelected(true);
}
});
return suggestedNextCell;
case KEY_LEFT:
case KEY_RIGHT:
return suggestedNextCell;
default:
break;
}
},
};
}
private IfNodeVisible(node: RowNode) {//判断行数据是否显示
let data = node.data,
unitFilter = false
return unitFilter;
}
public FilterData() {//筛选数据
this.filterStart = true;
}
public RowSelected(params: RowEvent) {//主表格选中回调
const that = this as any;
const data = that.$data;
if (params.node.isSelected()) {
this.selectedRow = true;
this.currentRow = params.data;
}
}
imageUrl = "";
imageUrledit = "";
// //上传图片
shangc(e) {
const that = this as any;
const data = that.$data;
let myfiles: any = (document as any).getElementById('idscwj').files[0];
let name: any = myfiles.name;
let arr = name.split('.');
let fileSize = 0;
let fileMaxSize = 10240;//1M
const isJPGORPNG = (myfiles.type == 'image/jpeg' || myfiles.type == 'image/png');
if (!isJPGORPNG) {
UI.Toast('图片只能是 JPG 或 PNG 格式!');
data.item.IconType = "";
(document as any).getElementById('idscwj').value = '';
return false;
}
if (myfiles) {
fileSize = myfiles.size;
if (fileSize > 1 * 1024 * 1024) {
UI.Toast('图片大小不能超过1M!');
data.item.IconType = "";
(document as any).getElementById('idscwj').value = '';
return false;
}
}
data.item.IconType = arr[1];//图片类型;
data.item.FileName = name.substring(0, name.indexOf("."));//文件名称
//转码base64
let reader = new FileReader();
reader.readAsDataURL(myfiles);
reader.onload = e => {
let imgFile: any = (e.target as any).result;
let arr = imgFile.split(',');
data.item.IconData = arr[1];//图片编码数据
that.imageUrl = imgFile;//图片链接
}
}
//编辑图片
shangcedit(e) {
const that = this as any;
const data = that.$data;
let myfiles: any = (document as any).getElementById('idedit').files[0];
let name: any = myfiles.name;
let arr = name.split('.');
let fileSize = 0;
let fileMaxSize = 10240;//1M
const isJPGORPNG = (myfiles.type == 'image/jpeg' || myfiles.type == 'image/png');
if (!isJPGORPNG) {
UI.Toast('图片只能是 JPG 或 PNG 格式!');
data.currentRow.IconType = "";
(document as any).getElementById('idedit').value = '';
return false;
}
if (myfiles) {
fileSize = myfiles.size;
if (fileSize > 1 * 1024 * 1024) {
UI.Toast('图片大小不能超过1M!');
data.currentRow.IconType = "";
(document as any).getElementById('idedit').value = '';
return false;
}
}
data.currentRow.IconType = arr[1];//图标类型
data.currentRow.FileName = name.substring(0, name.indexOf("."));//文件名称
//转码base64
let reader = new FileReader();
reader.readAsDataURL(myfiles);
reader.onload = e => {
let imgFile: any = (e.target as any).result;
let arr = imgFile.split(',');
data.currentRow.IconData = arr[1];//图片编码
that.imageUrledit = imgFile;
var image = new Image();
console.log(image);
image.onload = function () {
}
}
}
public CloseAddWindow() {// 关闭新增弹窗
this.$refs['addiconWindow'].widget.close();
}
public CloseEditWindow() {// 关闭编辑弹窗
const that = this as any;
const data = that.$data;
this.gridOptionsIcon.api.deselectAll();//取消选择
this.selectedRow = false;
this.currentRow = null;
this.$refs['editiconWindow'].widget.close();
}
selectids = "";
public async downloadicon() {//下载图标
const that = this as any;
const data = that.$data;
if (!this.currentRow || !this.selectedRow) {
UI.Toast('请先选中一条或多条数据!');
return;
}
let flag;
try {
let rows = this.gridOptionsIcon.api.getSelectedRows();//获取选择行数据
for (let r = 0; r < rows.length; r++) {
var dataid = 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 = await SysIconinfoMgr.GetSysIcon(that.selectids, "24", "24");//下载图标
var newflag = (flag.substring(flag.length - 1) == ',') ? flag.substring(0, flag.length - 1) : flag;//去掉返回图片的最后的逗号
var newstr = newflag.replace(/\s*/g, "");//去空格
console.log(newstr);
var arrayinfo = newstr.split(",");//转换为数组
// (window as any).sj.server
var myurl = (window as any).sj.server.conf.SrvBaseUrl; //获取配置信息
// console.log(myurl);
// var myurl = "http://192.168.0.230:6337/sj_web/";
var mydiv = document.getElementById('downstr'); //获得dom对象
mydiv.innerHTML = "<span style='width:130px;'>下载的图标如下:</span>";//还原
for (var i = 0; i < arrayinfo.length - 1; i++) {
console.log(arrayinfo[i]);
var frameimg = 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 = "";
//下载本地
public downpic() {
const that = this as any;
const data = that.$data;
if (!this.currentRow || !this.selectedRow) {
UI.Toast('请先选中一条或多条数据!');
return;
}
let flag;
let rows = this.gridOptionsIcon.api.getSelectedRows();//获取选择行数据
for (let r = 0; r < rows.length; r++) {
var IconData = rows[r].IconData;
var a = document.createElement('a'); // 创建一个a节点插入的document
var event = new MouseEvent('click'); // 模拟鼠标click点击事件
a.download = rows[r].FileName; // 设置a节点的download属性值
a.href = 'data:image/png;base64,' + IconData; // 将图片的src赋值给a节点的href
a.dispatchEvent(event) // 触发鼠标点击事件
}
}
groupListedit=[];
public async OpenEditWindow() {//打开编辑弹窗
const that = this as any;
const data = that.$data;
that.sysTypeList = [];//子系统
that.groupList = [];//分组名称
if (!this.currentRow || !this.selectedRow) {
UI.Toast('请先选中一条数据!');
return;
}
let rows = 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);
let res;
try {
res = await sj.sysMgr.GetSubSysList();
} catch (error) {
UI.ShowException(error);
this.loading = false;
return;
}
for (const item of res) {
this. sysTypeList.push({ value: item.Id, label: item.Id });
}
let resgroup;
try {
resgroup = await SysIconinfoMgr.GetIconGroupListwhere();
} catch (error) {
UI.ShowException(error);
this.loading = false;
return;
}
for (const item of resgroup) {
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){
const that = this as any;
const data = that.$data;
data.currentRow.IconGroup=vld;
}
getgroupadd(vld){
const that = this as any;
const data = that.$data;
data.item.IconGroup=vld;
}
groupListadd=[];
defaultsys = "";
deaultsysid = "";
public async Openaddindow() {//打开新增弹窗
const that = this as any;
const data = 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值
var maxid = await SysIconinfoMgr.GetMaxid();
data.item.IconId = maxid.toString();
data.item.FileName = "";
that.imageUrl = "";
that.sysTypeList = [];//子系统
that.groupList = [];//分组名称
let resgroup;
try {
resgroup = await SysIconinfoMgr.GetIconGroupListwhere();
if (resgroup.length > 0) {
data.item.IconGroup = resgroup[0].IconGroup;//默认值
}
for (const item of resgroup) {
this. groupListadd.push({ value: item.IconGroup, label: item.IconGroup });
}
} catch (error) {
UI.ShowException(error);
return;
}
let res;
try {
res = await sj.sysMgr.GetSubSysList();
if (res.length > 0) {
data.item.SubSys = res[0].Id;//默认值
that.defaultsys = res[0].Id;//默认值
that.deaultsysid = res[0].Id;//默认值
for (const item of res) {
// 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();
}
public async SaveAdd() {//新增图标
const that = this as any;
const data = that.$data;
if (!data.item.IconId) {
UI.Toast('图标id不能为空!');
return false;
}
else {
let res;
try {
res = await SysIconinfoMgr.Ifexsiticonid(data.item.IconId);
if (res == true) {
UI.Toast('图标id已经存在了,请重新输入!');
data.item.IconId = "";
return false;
}
} catch (error) {
UI.ShowException(error);
return;
}
}
//开始没选系统,用的默认系统
if (data.item.SubSys == that.defaultsys) {
data.item.SubSys = that.deaultsysid;
}
else {
}
if (data.item.IconTitle != "") {
let cxpy = await sj.sysMgr.PYM(data.item.IconTitle);
if (cxpy.length > 0) { data.item.Py = cxpy; }//拼音码
let cxwb = await sj.sysMgr.WBM(data.item.IconTitle);
console.log(cxwb);
if (cxwb.length > 0) { data.item.wb = cxwb; }//五笔码
}
try {
let res = await SysIconinfoMgr.SaveiIconinfo(JSON.stringify(data.item));
// 服务器修改成功后,修改本地数据
that.$emit("refreshdata");
await this.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 = "";
//清空上传控件文件名
(document as any).getElementById('idscwj').value = '';
}
//新增时获取拼音码和五笔码
public async cgtext() {
const that = this as any;
const data = that.$data;
if (data.item.IconTitle != "") {
let cxpy = await sj.sysMgr.PYM(data.item.IconTitle);
if (cxpy.length > 0) { data.item.Py = cxpy; }
let cxwb = await sj.sysMgr.WBM(data.item.IconTitle);
console.log(cxwb);
if (cxwb.length > 0) { data.item.wb = cxwb; }
}
}
//编辑时获取拼音码和五笔码
public async cgtextedit() {
const that = this as any;
const data = that.$data;
if (that.currentRow.IconTitle != "") {
let cxpy = await sj.sysMgr.PYM(that.currentRow.IconTitle);
if (cxpy.length > 0) { that.currentRow.Py = cxpy; }
let cxwb = await sj.sysMgr.WBM(that.currentRow.IconTitle);
console.log(cxwb);
if (cxwb.length > 0) { that.currentRow.wb = cxwb; }
}
}
public async SaveEdit() {//编辑图标
const that = this as any;
const data = that.$data;
if (that.currentRow.IconTitle != "") {
let cxpy = await sj.sysMgr.PYM(that.currentRow.IconTitle);
if (cxpy.length > 0) { that.currentRow.Py = cxpy; }
let cxwb = await sj.sysMgr.WBM(that.currentRow.IconTitle);
console.log(cxwb);
if (cxwb.length > 0) { that.currentRow.wb = cxwb; }
}
try {
let res = await SysIconinfoMgr.SaveiIconinfo(JSON.stringify(this.currentRow));
this.$emit("refreshdata");
await this.getAlliconlist();//获取全部数据;
(document as any).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) {
let that = this;
new Dict({
dict: {
id: "A10118",
}, serVal: serVal,
selected: (obj, row) => {
that.currentRow.IconGroup = row.IconGroup;
}
})
}
OpenIconGroupDictadd(serVal: string) {
const that = this as any;
const data = that.$data;
// let that = this;
new Dict({
dict: {
id: "A10118",
}, serVal: serVal,
selected: (obj, row) => {
that.item.IconGroup = row.IconGroup;
}
})
}
}
2.界面
<div v-loading.fullscreen='loading' element-loading-text="正在加载数据,请稍后"
style="display: flex;flex-direction: column;width: 100%;height: 100%;overflow: hidden;">
<div class="sj_expand_row" style="padding:5px 5px 0 5px;">
<span style="width:60px;margin-left: 10px;">子系统:</span>
<el-select size="small" v-model="selectType" style="width: 200px" @change="sysselect">
<el-option v-for="item in sysTypeListselect" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<span style="width:60px;margin-left: 10px;">分组名称:</span>
<!-- <el-select v-model="selectgroup" style="width: 200px" @change="groupselect">
<el-option v-for="item in groupListselect" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<drop-dict-group ref="txtgroupselect" @change="newval" style="width: 200px;" :options="dictGroups"
@select='selectgroups'></drop-dict-group>
<span style="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-button size="small" style="margin-left: 10px; color: black;" @click='seachData'>
查 询
</el-button>
</div>
<div class="sj_expand_row" style="padding:5px;">
<ag-grid-vue class="ag-fresh ag-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>
<div class="sj_expand_row" style="padding:5px;">
<el-button style="margin-right: 10px;width:110px;color: black;" @click='Openaddindow'>新增</el-button>
<el-button style="width:130px; color: black;" @click='OpenEditWindow'>编辑</el-button>
<el-button style="width:130px; color: black;" @click='downloadicon'>下载图标</el-button>
<el-button style="width:130px; color: black;" @click='downpic'>下载图标本地</el-button>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;" id="downstr">
<span style="width:130px;">下载的图标如下:</span>
</div>
<!-- 编辑 -->
<k-window ref='editiconWindow' title="编辑图标" v-if='editWindowReady' width="620" height="500" :visible="false"
modal='true'>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标ID:</span>
<el-input v-model="currentRow.IconId" style="width:200px;" :disabled='true'></el-input>
<span style="width:75px;margin-left: 10px;">图标标题:</span>
<el-input v-model="currentRow.IconTitle" style="width:200px;" @blur="cgtextedit" @change="cgtextedit"></el-input>
</div>
<!-- <div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标拼音:</span>
<el-input v-model="currentRow.Py" style="width:200px;" :disabled='true'></el-input>
<span style="width:75px;margin-left: 10px;">标题五笔码:</span>
<el-input v-model="currentRow.Wb" style="width:200px;" :disabled='true'></el-input>
</div>
-->
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">分组名称:</span>
<el-select v-model="currentRow.IconGroup" filterable allow-create style="width: 200px" @change="getgroupedit">
<el-option v-for="item in groupListedit" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<span style="width:75px;margin-left: 10px;">文件名称:</span>
<el-input v-model="currentRow.FileName" style="width:200px;"></el-input>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标类型:</span>
<el-input v-model="currentRow.IconType" style="width:200px;" :disabled='true'></el-input>
<span style="width:75px;margin-left: 10px;">所在子系统:</span>
<el-select v-model="currentRow.SubSys" filterable allow-create style="width: 200px" @change="getselectsysedit">
<el-option v-for="item in sysTypeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标宽度:</span>
<el-input v-model="currentRow.IconWidth" style="width:200px;"></el-input>
<span style="width:75px;margin-left: 10px;">图标高度:</span>
<el-input v-model="currentRow.IconHeight" style="width:200px;"></el-input>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标描述:</span>
<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" placeholder="请输入内容" v-model="currentRow.IconDesc"
style="width:487px;">
</el-input>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">选择图片:</span>
<input type="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>
<div class="sj_expand_row" style="justify-content: center">
<el-button style="margin-right: 20px;color: black;" @click='CloseEditWindow'>取 消
</el-button>
<el-button style="color: black;" @click='SaveEdit'>保  存
</el-button>
</div>
</k-window>
<!-- 新增图标 -->
<k-window ref='addiconWindow' title="新增图标" :visible="false" width="620" height="500" modal='true'>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标ID:</span>
<el-input v-model="item.IconId" style="width:200px;"></el-input>
<span style="width:75px;margin-left: 10px;">图标标题:</span>
<el-input v-model="item.IconTitle" style="width:200px;" @blur="cgtext"></el-input>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">分组名称:</span>
<!-- <sj-input-dict v-model="item.IconGroup" @showDict="OpenIconGroupDictadd" @clear="item.IconGroup=''" style="width:200px;"></sj-input-dict> -->
<el-select v-model="item.IconGroup" filterable allow-create style="width: 200px" @change="getgroupadd">
<el-option v-for="item in groupListadd" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<span style="width:75px;margin-left: 10px;">文件名称:</span>
<el-input v-model="item.FileName" style="width:200px;"></el-input>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标类型:</span>
<el-input v-model="item.IconType" style="width:200px;" :disabled='true'></el-input>
<span style="width:75px;margin-left: 10px;">所在子系统:</span>
<el-select v-model="item.SubSys" filterable allow-create style="width: 200px" @change="getselectsysAdd">
<el-option v-for="item in sysTypeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标宽度:</span>
<el-input v-model="item.IconWidth" style="width:200px;"></el-input>
<span style="width:75px;margin-left: 10px;">图标高度:</span>
<el-input v-model="item.IconHeight" style="width:200px;"></el-input>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:75px;">图标描述:</span>
<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" placeholder="请输入内容" v-model="item.IconDesc"
style="width:482px;">
</el-input>
</div>
<div class="sj_expand_row" style="margin-bottom:10px;">
<span style="width:65px;">选择图片:</span>
<input type="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>
<div class="sj_expand_row" style="justify-content: center;">
<el-button style="margin-right: 20px;color: black;" @click='CloseAddWindow'>取 消</el-button>
<el-button style="color: black;" @click='SaveAdd'>保  存
</el-button>
</div>
</k-window>
</div>
3.效果