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;">

<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>

<!-- <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>

<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>

<ag-grid-vue class="ag-fresh ag-grid-module_name" :gridOptions="gridOptionsIcon"

v-bind:style="{ overflow:'auto', width:'100%',height:(myheight-150)+'px'}">

</ag-grid-vue>

</div>

<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>

<span style="width:130px;">下载的图标如下：</span>

</div>

<k-window ref='editiconWindow' title="编辑图标" v-if='editWindowReady' width="620" height="500" :visible="false"

modal='true'>

<el-input v-model="currentRow.IconId" style="width:200px;" :disabled='true'></el-input>

<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;">

<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>

-->

<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>

<el-input v-model="currentRow.FileName" style="width:200px;"></el-input>

</div>

<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>

<el-input v-model="currentRow.IconWidth" style="width:200px;"></el-input>

<el-input v-model="currentRow.IconHeight" style="width:200px;"></el-input>

</div>

<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" placeholder="请输入内容" v-model="currentRow.IconDesc"

style="width:487px;">

</el-input>

</div>

<input type="file" id="idedit" name="image" style="width: 200px" class="getImgUrl_file"

@change="shangcedit($event)" accept="image/jpg,image/jpeg,image/png">

</div>

<el-button style="margin-right: 20px;color: black;" @click='CloseEditWindow'>取    消

</el-button>

<el-button style="color: black;" @click='SaveEdit'>保   &nbsp存

</el-button>

</div>

</k-window>

<k-window ref='addiconWindow' title="新增图标" :visible="false" width="620" height="500" modal='true'>

<el-input v-model="item.IconId" style="width:200px;"></el-input>

<el-input v-model="item.IconTitle" style="width:200px;" @blur="cgtext"></el-input>

</div>

<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>

<el-input v-model="item.FileName" style="width:200px;"></el-input>

</div>

<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>

<el-input v-model="item.IconWidth" style="width:200px;"></el-input>

<el-input v-model="item.IconHeight" style="width:200px;"></el-input>

</div>

<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" placeholder="请输入内容" v-model="item.IconDesc"

style="width:482px;">

</el-input>

</div>

<input type="file" id="idscwj" name="image" style="width: 200px" class="getImgUrl_file" @change="shangc($event)"

accept="image/jpg,image/jpeg,image/png">

</div>

<el-button style="margin-right: 20px;color: black;" @click='CloseAddWindow'>取    消</el-button>

<el-button style="color: black;" @click='SaveAdd'>保   &nbsp存

</el-button>

</div>

</k-window>

</div>

3.效果

vue+element上传图片相关推荐

vue+element上传图片到阿里云（可直接运行domo）
vue+element上传图片到阿里云,OSS(最简单,最详细,可在线运行domo),不要走弯路了支持格式 jpeg,jpg,png,webp,gif =可限制大小== 4M 安装ali-oss n ...
vue+element 上传图片的进度显示
效果展示 HTML 这里用的是element默认的上传地址action,代码如下 <div><el-uploadaction="https://jsonplaceholde ...
vue使用element 上传图片，修改图片
vue使用element 上传图片,修改图片文章目录 vue使用element 上传图片,修改图片前言一.应用场景 1.上传图片并进行放大预览 2.图片上传代码二.修改已经上传的图片,并展示到 ...
VUE+element 上传视频
VUE+element上传视频效果展示 html部分 <el-form-item label="视频上传" prop="storageurl">& ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
vue+Element ui 实现照片墙
vue+Element ui 实现照片墙上面是我要实现的效果.直接上代码,间接明了 1.前端视图代码 <div><el-upload:file-list="fileLis ...
vue + element 谷歌浏览器调用电脑摄像头拍照
本项目使用ruoyi-vue-plus (使用文件上传功能去ruoyi-vue-plus查看封装的js,文件目录 utils/request.js 封装了axios) 框架推荐:https://g ...
前端vue+element-ui上传图片至七牛，并返回外链URL至后台
前端vue+element-ui上传图片至七牛,并返回外链URL至后台上传文件到七牛云代码 2019/08/12 上传文件到七牛云注册登陆到七牛云,需要认证信息才能创建个人存储空间; 注册等步骤 ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...

vue+element上传图片

vue+element上传图片相关推荐

最新文章

热门文章