You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

269 lines
7.5 KiB
Plaintext

11 months ago
<template>
<div class="user">
<el-divider content-position="left">个人信息</el-divider>
<el-row :gutter="20">
<el-col :span="6">
<el-card class="avatarImg">
<el-avatar :size="120" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
</el-avatar>
<el-upload ref="upload" :file-list="fileList" action="">
<el-button slot="trigger" size="small" type="primary">头像上传</el-button>
<div slot="tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</el-card>
</el-col>
<el-col :span="18">
<el-card>
<div>
<el-form label-width="80px" size="mini" :rules="rules" :model="formLabelAlign"
ref="ValidateForm">
<el-form-item label="登录帐号" prop="UserNo">
<el-input v-model="formLabelAlign.UserNo" disabled></el-input>
</el-form-item>
<el-form-item label="用户名" prop="UserName">
<el-input v-model="formLabelAlign.UserName"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="Tel">
<el-input v-model="formLabelAlign.Tel"></el-input>
</el-form-item>
<el-form-item label="E-mail" prop="Email">
<el-input v-model="formLabelAlign.Email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ValidateForm')">保存修改</el-button>
<el-button @click="power()">设置委托</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row :gutter="20">
<el-col :span="6">
<el-card>
<div slot="header" class="clearfix">
<span>电子签字</span>
</div>
<div class="item">
<el-image :src="src">
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</div>
<el-button type="primary" size="mini" @click="dialogTableVisible = true">设置/修改</el-button>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<div slot="header" class="clearfix">
<span>主部门</span>
</div>
<div class="item">
<el-tag type="success">{{ formLabelAlign.DeptName }}</el-tag>
</div>
<el-button type="primary" size="mini" @click="dialogTab = true">切换登录部门</el-button>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<div slot="header" class="clearfix">
<span>修改密码</span>
</div>
<div class="item">
<el-tag type="success">*********</el-tag>
</div>
<el-button type="primary" size="mini">修改密码</el-button>
</el-card>
</el-col>
<el-col :span="6">
<el-card>
<div slot="header" class="clearfix">
<span>岗位/部门-权限</span>
</div>
</el-card>
</el-col>
</el-row>
<el-dialog title="电子签名设置" width='40%' :visible.sync="dialogTableVisible">
<el-row :gutter="20">
<el-col :span="12">
<el-card>
<h5>利用扫描仪设置步骤:</h5>
<ul>
<li>在白纸上写下您的签名</li>
<li>送入扫描仪扫描并得到jpg文件。</li>
<li>利用图片处理工具把他们处理缩小到 90*30像素大小。</li>
</ul>
<h5>手写设置:</h5>
<ul>
<li>启动画板程序,写下您的签名。</li>
<li>保存成.jpg文件设置文件为90*30像素大小。</li>
</ul>
</el-card>
</el-col>
<el-col :span="12">
<el-image class="imgupdbox" :src="url" :fit="fit"></el-image>
<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</el-col>
</el-row>
</el-dialog>
<el-dialog title="切换部门" width='30%' :visible.sync="dialogTab">
</el-dialog>
</div>
</template>
<script>
export default {
name: "user",
data() {
return {
fileList: [],
formLabelAlign: {},
src: "",
upUrl: "",
dialogTableVisible: false,
dialogTab:false,
fit: 'contain',
url: '',
dynamicHandler: '',
rules: {
userName: [{
required: true,
message: "请输入用户名",
trigger: "blur"
}, ],
phone: [{
required: true,
message: "请输入手机号",
trigger: "change"
},
{
validator: function(rule, value, callback) {
if (/^1[34578]\d{9}$/.test(value) == false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
},
trigger: "change",
},
],
email: [{
required: true,
message: "请输入邮箱地址",
trigger: "blur"
},
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"],
},
],
},
};
},
created() {
this.loadData();
this.HeadPic();
this.getSigimg();
},
methods: {
loadData() {
let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_Setting");
handler.AddUrlData();
let data = handler.DoMethodReturnString("Default_Init");
if (data.indexOf("err@") != -1) {
this.$message.error(data);
console.log(data);
return;
}
this.formLabelAlign = JSON.parse(data);
console.log(this.formLabelAlign);
},
submitForm() {
this.$refs["ValidateForm"].validate((valid) => {
if (valid) {
let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_Setting");
handler.AddPara("Name", this.formLabelAlign.UserName);
handler.AddPara("Tel", this.formLabelAlign.Tel);
handler.AddPara("Email", this.formLabelAlign.Email);
const data = handler.DoMethodReturnString("UpdateEmpNo");
console.log(data);
this.$message("保存成功!");
} else {
console.log("error submit!!");
return false;
}
});
},
power() {
this.$router.push({
name: 'powerlist'
})
},
HeadPic() {
var doMethod = "HeadPic_Save";
const httpHandlerName = "BP.WF.HttpHandler.WF_Setting";
this.url = process.env.VUE_APP_HANDLER + "?DoType=HttpHandler&DoMethod=" + doMethod + "&HttpHandlerName=" +
httpHandlerName;
console.log(this.url)
},
//获取签名图片url 方法
getSigimg() {
const _this = this;
const doMethod = "Siganture_Init";
const httpHandlerName = "BP.WF.HttpHandler.WF_Setting";
const apiurl = process.env.VUE_APP_HANDLER + "?DoType=HttpHandler&DoMethod=" + doMethod + "&HttpHandlerName=" +
httpHandlerName;
this.$.ajax({
url: apiurl,
dataType: "json",
success: function(data) {
let url = '../../DataUser/Siganture/' + data.No + '.jpg';
_this.url = url;
console.log(_this.url)
}
});
},
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
},
};
</script>
<style lang="less" scoped>
.user {
.avatarImg {
text-align: center;
line-height: 40px;
min-height: 292px;
}
.item {
margin-bottom: 18px;
}
.imgupdbox {
width: 120px;
height: 30px;
}
}
</style>