Merge remote-tracking branch 'origin/master'
| | |
| | | import com.vci.web.service.OsQuereyTemplateServiceI; |
| | | import com.vci.web.util.PlatformClientUtil; |
| | | import com.vci.web.util.UITools; |
| | | import com.vci.web.util.WebUtil; |
| | | import org.apache.commons.io.IOUtils; |
| | | import org.apache.commons.lang3.StringUtils; |
| | | import org.slf4j.Logger; |
| | |
| | | @Override |
| | | public PortalVI portalVIDTOO2VI(PortalVIDTO portalVIDTO) { |
| | | PortalVI portalVI = new PortalVI(); |
| | | portalVI.id = portalVIDTO.getId(); |
| | | portalVI.id = StringUtils.isNotBlank(portalVIDTO.getId()) ? portalVIDTO.getId() : WebUtil.getPk(); |
| | | portalVI.typeFlag = portalVIDTO.getTypeFlag(); |
| | | portalVI.typeName = portalVIDTO.getTypeName(); |
| | | portalVI.viName = portalVIDTO.getViName(); |
| | |
| | | params |
| | | }); |
| | | } |
| | | // è·å头å |
| | | export function getUserPhoto(params) { |
| | | return request({ |
| | | url: "/api/userQueryController/getUserPhoto", |
| | | method: "get", |
| | | responseType:'blob', |
| | | params |
| | | }); |
| | | } |
| | | // ä¸ä¼ 头å |
| | | export function updateUserPhoto(formData) { |
| | | return request({ |
| | | url: "/api/userQueryController/updateUserPhoto", |
| | | method: "post", |
| | | data:formData |
| | | }); |
| | | } |
| | |
| | | width="70%" |
| | | custom-class="flow-design-dialog"> |
| | | <wf-design-base ref="bpmn" |
| | | style="height: 60vh;" |
| | | :style="'height: '+height+';'" |
| | | :options="option"></wf-design-base> |
| | | </el-dialog> |
| | | <div v-else> |
| | | <wf-design-base v-if="visible" |
| | | ref="bpmn" |
| | | style="height: 60vh;" |
| | | :style="'height: '+height+';'" |
| | | :options="option"></wf-design-base> |
| | | </div> |
| | | </div> |
| | |
| | | }, |
| | | processInstanceId: String, |
| | | processDefinitionId: String, |
| | | height: { |
| | | type: String, |
| | | default: '60vh' |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | </el-tooltip> |
| | | <el-tooltip content="个人信æ¯"> |
| | | <div> |
| | | <img :src="userInfo.avatar" |
| | | <img :src="avatar" |
| | | class="top-bar__img" |
| | | @click="gotoInfo"> |
| | | </div> |
| | |
| | | listenfullscreen(this.setScreen); |
| | | }, |
| | | computed: { |
| | | avatar(){ |
| | | return this.userInfo.avatar |
| | | }, |
| | | ...mapState({ |
| | | showDebug: state => state.common.showDebug, |
| | | showTheme: state => state.common.showTheme, |
| | |
| | | import {isURL, validatenull} from '@/util/validate' |
| | | import {deepClone, queryStringToObject} from '@/util/util' |
| | | import website from '@/config/website' |
| | | import {loginByUsername, loginBySocial, loginBySso, getUserInfo, logout, refreshToken, getButtons} from '@/api/user' |
| | | import {loginByUsername, loginBySocial, loginBySso, getUserInfo, logout, refreshToken, getButtons,getUserPhoto} from '@/api/user' |
| | | import {getTopMenu, getRoutes} from '@/api/system/menu' |
| | | import md5 from 'js-md5' |
| | | import func from "@/util/func"; |
| | |
| | | state.tenantId = tenantId; |
| | | setStore({name: 'tenantId', content: state.tenantId}) |
| | | }, |
| | | // SET_USER_INFO: (state, userInfo) => { |
| | | // getUserPhoto().then(res => { |
| | | // userInfo.avatar = URL.createObjectURL(res.data); |
| | | // console.log('userInfo',userInfo) |
| | | // }) |
| | | // state.userInfo = userInfo; |
| | | // setStore({name: 'userInfo', content: state.userInfo}) |
| | | // }, |
| | | SET_USER_INFO: (state, userInfo) => { |
| | | if (validatenull(userInfo.avatar)) { |
| | | userInfo.avatar = "/img/bg/img-logo.png"; |
| | | } |
| | | getUserPhoto().then(res => { |
| | | // å° Blob 转æ¢ä¸º Base64 |
| | | const reader = new FileReader(); |
| | | reader.onloadend = (result) => { |
| | | userInfo.avatar = reader.result; // åå¨ Base64 å符串 |
| | | |
| | | // æ´æ°ç¶æå¹¶åå¨å° localStorage |
| | | state.userInfo = userInfo; |
| | | setStore({name: 'userInfo', content: state.userInfo}) |
| | | setStore({ name: 'userInfo', content: state.userInfo }); |
| | | }; |
| | | reader.readAsDataURL(res.data); // è°ç¨readeræ¹æ³ |
| | | }); |
| | | }, |
| | | SET_ROLES: (state, roles) => { |
| | | state.roles = roles; |
| | |
| | | } |
| | | .avue-dialog .el-dialog{ |
| | | top:50%; |
| | | max-height: calc(100% - 80px); |
| | | max-height: calc(100% - 50px); |
| | | max-width: calc(100% - 50px); |
| | | -webkit-transform: translate(-50%, 0); |
| | | transform: translate(-50%, -50%); |
| | | margin-top: 0 !important; |
| | | } |
| | | .avue-dialog .el-dialog__body{ |
| | | padding: 15px 15px 0px 15px; // ä¸å³ä¸å·¦ åæ¶è¡¨æ ¼ä¸è¾¹è·ï¼ä¼åºç°æ»å¨æ¡ï¼ |
| | | margin-bottom: 10px !important; |
| | | margin-bottom: 5px !important; |
| | | } |
| | | .avue-dialog .el-dialog__body .avue-form{ |
| | | margin: 0px auto 40px; // åç¬ç»å¯¹è¯æ¡éçavue表åå ä¸ä¸è¾¹è· |
| | | margin: 0px auto 45px; // åç¬ç»å¯¹è¯æ¡éçavue表åå ä¸ä¸è¾¹è· |
| | | } |
| | | .dialog-footer{ |
| | | background-color: #ffffff; |
| | |
| | | .avue-crud table td{ |
| | | line-height: 22px; |
| | | } |
| | | .avue-crud__header{ |
| | | min-height: 35px; |
| | | } |
| | | /**左侧æä½æ **/ |
| | | .avue-crud__left{ |
| | | display: flex; |
| | | align-items: center; |
| | | align-items: start; |
| | | } |
| | | /**å³ä¾§ä¾§æä½æ **/ |
| | | .avue-crud__right{ |
| | | display: flex; |
| | | align-items: center; |
| | | align-items: start; |
| | | } |
| | | /**表å
æä½æ **/ |
| | | .avue-crud .avue-crud__menu{ |
| | |
| | | editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false), |
| | | exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false), |
| | | importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false), |
| | | downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOADFILE, false), |
| | | downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOAD, false), |
| | | viewTheScopeBtn: this.vaildData(this.permission[this.$route.query.id].VIRTUALVIEW, false), |
| | | }; |
| | | }, |
| | |
| | | editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false), |
| | | exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false), |
| | | importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false), |
| | | actionTopAddBtn: this.vaildData(this.permission[this.$route.query.id].USE, false), |
| | | actionTopDelBtn: this.vaildData(this.permission[this.$route.query.id].RESET, false), |
| | | actionTopEditBtn: this.vaildData(this.permission[this.$route.query.id].RECYCLE, false), |
| | | actionTopExportBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOADFILE, false), |
| | | actionBottomAddBtn: this.vaildData(this.permission[this.$route.query.id].FREEZE, false), |
| | | actionBottomDelBtn: this.vaildData(this.permission[this.$route.query.id].BATCHAPPLY, false), |
| | | actionBottomEditBtn: this.vaildData(this.permission[this.$route.query.id].CODEAPPLY, false), |
| | | actionTopAddBtn: this.vaildData(this.permission[this.$route.query.id].ADD2, false), |
| | | actionTopDelBtn: this.vaildData(this.permission[this.$route.query.id].DELETE2, false), |
| | | actionTopEditBtn: this.vaildData(this.permission[this.$route.query.id].EDIT2, false), |
| | | actionTopExportBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOAD, false), |
| | | actionBottomAddBtn: this.vaildData(this.permission[this.$route.query.id].ADD3, false), |
| | | actionBottomDelBtn: this.vaildData(this.permission[this.$route.query.id].DELETE3, false), |
| | | actionBottomEditBtn: this.vaildData(this.permission[this.$route.query.id].EDIT3, false), |
| | | }; |
| | | }, |
| | | treeCrudOption(){ |
| | |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span style="display: flex"> |
| | | <i v-if="data.oId=='parentNode'" class="iconShow el-icon-s-home"></i> |
| | | <icon-show v-else :name="data.iconPath"></icon-show> |
| | | <icon-show v-if="data.oId!='parentNode' && data.iconPath && data.iconPath!='undefined'" |
| | | :name="data.iconPath"></icon-show> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | |
| | | </el-radio> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24" v-show="basicForm.show=='0' && (basicForm.displayMode=='image'||basicForm.displayMode=='textandimage')"> |
| | | <el-col |
| | | v-show="basicForm.show=='0' && (basicForm.displayMode=='image'||basicForm.displayMode=='textandimage')" |
| | | :span="24"> |
| | | <el-form-item :class="basicForm.displayMode==='image'?'is-required':''" label="徿 ï¼" prop="iconPath"> |
| | | <input-icon v-model="basicForm.iconPath" :disabled="disabledBtn"></input-icon> |
| | | </el-form-item> |
| | |
| | | ] |
| | | }, |
| | | { |
| | | label: 'ç¼å·', |
| | | label: 'åºå·', |
| | | prop: 'seq', |
| | | width: 100, |
| | | type: 'number', |
| | | labelWidth: 110, |
| | | hide: false, |
| | | rules: [ |
| | |
| | | ...mapGetters(["permission"]), |
| | | permissionChildrenList() { |
| | | return { |
| | | UiPageLayoutAddBtn: this.vaildData(this.permission[this.$route.query.id].CLSRIGHT, false), |
| | | UiPageLayoutEditBtn: this.vaildData(this.permission[this.$route.query.id].DATARIGHT, false), |
| | | UiPageLayoutDelBtn: this.vaildData(this.permission[this.$route.query.id].ATTRRIGHT, false), |
| | | UiPageLayoutAddBtn: this.vaildData(this.permission[this.$route.query.id].ADD3, false), |
| | | UiPageLayoutEditBtn: this.vaildData(this.permission[this.$route.query.id].EDIT3, false), |
| | | UiPageLayoutDelBtn: this.vaildData(this.permission[this.$route.query.id].DELETE3, false), |
| | | UiPageLayoutCloneBtn: this.vaildData(this.permission[this.$route.query.id].CLONE, false), |
| | | UiPageLayoutDesignBtn: this.vaildData(this.permission[this.$route.query.id].UPLOAD, false), |
| | | } |
| | |
| | | } else { |
| | | return false; |
| | | } |
| | | done(); |
| | | }); |
| | | }, |
| | | |
| | |
| | | prop: 'plExtAttr' |
| | | }, { |
| | | label: 'æè¿°', |
| | | prop: 'plDesc' |
| | | prop: 'plDesc', |
| | | overHidden: true |
| | | }] |
| | | }, |
| | | data: [], |
| | |
| | | ...mapGetters(["permission"]), |
| | | permissionChildrenList() { |
| | | return { |
| | | UiTabAddBtn: this.vaildData(this.permission[this.$route.query.id].BATCHAPPLY, false), |
| | | UiTabEditBtn: this.vaildData(this.permission[this.$route.query.id].BATCHUPDATE, false), |
| | | UiTabDelBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOADFILE, false), |
| | | UiTabAddBtn: this.vaildData(this.permission[this.$route.query.id].ADD2, false), |
| | | UiTabEditBtn: this.vaildData(this.permission[this.$route.query.id].EDIT2, false), |
| | | UiTabDelBtn: this.vaildData(this.permission[this.$route.query.id].DELETE2, false), |
| | | UiTabCloneBtn: this.vaildData(this.permission[this.$route.query.id].CLONE, false), |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <!--æµç¨æ¨¡æ¿å®ä¹--> |
| | | <basic-container style="height: calc(100vh - 123px)"> |
| | | <div style="margin-bottom: 5px;"> |
| | | <div style="margin-bottom: 10px;"> |
| | | æµç¨åç±»ï¼ |
| | | <el-select v-model="tempType" :clearable="true" placeholder="è¯·éæ©" size="small" |
| | | style="width: 300px;margin-right: 20px;" |
| | |
| | | </span> |
| | | </el-button> |
| | | </template> |
| | | |
| | | </avue-crud> |
| | | <!-- å建ç¼è¾èªå®ä¹å¯¹è¯æ¡ --> |
| | | <el-dialog |
| | | v-dialogDrag |
| | | v-loading="dialogLoading" |
| | | :title="dialogType === 'add' ? ' å建' : 'ç¼è¾'" |
| | | title="æµç¨èªå®ä¹" |
| | | :visible.sync="dialogVisible" |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | width="1000px" |
| | | @close="dialogClose" |
| | | :close-on-press-escape="false" |
| | | :fullscreen="true" |
| | | :before-close="handleNutflowClose" |
| | | custom-class="wf-dialog" |
| | | > |
| | | <wf-design-base v-if="nutflowOption.step === 1" |
| | | class="animated fadeIn" |
| | | style="height: calc(100vh - 178px);" |
| | | ref="wf-design" |
| | | :options="nutflowOption.step1"></wf-design-base> |
| | | <wf-design-base v-if="nutflowOption.step === 2" |
| | | class="animated fadeIn" |
| | | style="height: calc(100vh - 178px);" |
| | | ref="wf-design-view" |
| | | :options="nutflowOption.step2"></wf-design-base> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button size="small" type="primary" @click="saveHandler">ç¡® å®</el-button> |
| | | <el-button size="small" @click="dialogClose">å æ¶</el-button> |
| | | <el-button v-if="nutflowOption.step === 1" |
| | | size="small" |
| | | type="success" |
| | | @click="handleStep(1)">ä¸ ä¸ æ¥</el-button> |
| | | <el-button v-if="nutflowOption.step === 2" |
| | | size="small" |
| | | type="success" |
| | | @click="handleStep(-1)">ä¸ ä¸ æ¥</el-button> |
| | | <el-button v-if="nutflowOption.step === 2" |
| | | size="small" |
| | | type="primary" |
| | | @click="handleSubmitModel">ç¡® å®</el-button> |
| | | <el-button size="small" |
| | | @click="handleNutflowClose(() => {}, true)">å æ¶</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | <!-- 导å
¥ --> |
| | | <upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导å
¥æµç¨æ¨¡æ¿" |
| | | @updata="getTableList"></upload-file> |
| | | |
| | | </el-aside> |
| | | |
| | | <el-main width="60%"> |
| | | <div style="height: 100%;background-color: #eeeeea">设计å¨</div> |
| | | <div style="height: 100%;position: relative;"> |
| | | <flow-design style="padding-top: 5px" :is-display.sync="flowBox" :process-definition-id="processDefinitionId" height="calc(100vh - 195px)"></flow-design> |
| | | <div style="position: absolute;top:0;left: 0;height: 100%;width: 100%"></div> |
| | | </div> |
| | | </el-main> |
| | | </el-container> |
| | | </basic-container> |
| | |
| | | tipList:[], |
| | | dialogLoading:false, |
| | | dialogVisible:false, |
| | | dialogType:'add' |
| | | dialogType:'add', |
| | | processDefinitionId: '', |
| | | flowBox: false, |
| | | nutflowOption: { |
| | | process: {}, |
| | | step: 1, |
| | | step1: { |
| | | toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'], |
| | | }, |
| | | step2: { |
| | | mode: 'view', |
| | | simulation: true, |
| | | minimap: true, |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | this.dialogVisible = true; |
| | | this.dialogType = 'edit' |
| | | }, |
| | | // ç¼è¾ä¿å |
| | | saveHandler() { |
| | | //ä¿åæµç¨é
ç½® |
| | | handleSubmitModel() { |
| | | const registry = this.$refs['wf-design-view'].getElementRegistry().getAll() |
| | | const {businessObject} = registry[0] |
| | | const {id, name, documentation} = businessObject |
| | | const description = (documentation && documentation.length > 0) ? documentation[0].text : null |
| | | const params = { |
| | | ...this.nutflowOption.process, |
| | | modelKey: id, |
| | | name, |
| | | description, |
| | | modelEditorXml: this.nutflowOption.process.xml |
| | | } |
| | | if(this.dialogType=='add'){ |
| | | saveProcessTemp(this.form).then(res => { |
| | | saveProcessTemp(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.getTableList(); |
| | | this.handleNutflowClose() |
| | | } |
| | | }); |
| | | }else{ |
| | | updateProcessTemp(this.form).then(res => { |
| | | updateProcessTemp(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.getTableList(); |
| | | this.handleNutflowClose() |
| | | } |
| | | }) |
| | | } |
| | | |
| | | }, |
| | | dialogClose(){ |
| | | this.form={}; |
| | | this.dialogLoading=false; |
| | | this.dialogVisible=false; |
| | | handleStep(step) { |
| | | if (step === 1) { // ä¸ä¸æ¥ |
| | | this.$refs['wf-design'].getData('xml').then(data => { |
| | | this.$set(this.nutflowOption.step1, 'xml', data) |
| | | this.$set(this.nutflowOption.step2, 'xml', data) |
| | | this.$set(this.nutflowOption.process, 'xml', data) |
| | | this.$set(this.nutflowOption, 'step', 2) |
| | | }) |
| | | } else { |
| | | this.$set(this.nutflowOption, 'step', 1) |
| | | } |
| | | }, |
| | | handleNutflowClose(done, flag) { |
| | | const initOption = { |
| | | process: {}, |
| | | step: 1, |
| | | step1: { |
| | | toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'], |
| | | }, |
| | | step2: { |
| | | mode: 'view', |
| | | simulation: true, |
| | | minimap: true, |
| | | } |
| | | } |
| | | if (done || flag) { |
| | | this.$confirm('ç¡®å®è¦å
³éåï¼å
³éæªä¿åçä¿®æ¹é½ä¼ä¸¢å¤±ã', 'è¦å', { |
| | | type: 'warning' |
| | | }).then(() => { |
| | | this.$set(this, 'nutflowOption', initOption) |
| | | if (typeof done == 'function') done() |
| | | this.dialogVisible = false |
| | | }).catch(() => { |
| | | }) |
| | | } else { |
| | | this.$set(this, 'nutflowOption', initOption) |
| | | this.dialogVisible = false |
| | | } |
| | | }, |
| | | // å é¤ |
| | | handleDel(row,index) { |
| | |
| | | this.selectionList = [row]; |
| | | } |
| | | ); |
| | | //æ¾ç¤ºæµç¨å¾ |
| | | this.processDefinitionId = row.id; |
| | | this.flowBox = true; |
| | | }, |
| | | |
| | | // å¯¼åº |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | <style lang="scss" scoped> |
| | | ::v-deep { |
| | | .avue-dialog .el-dialog__body{ |
| | | margin-bottom: 0 !important; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | addBtn:false, |
| | | editBtn:false, |
| | | delBtn:false, |
| | | calcHeight: -60, |
| | | calcHeight: -55, |
| | | align:'left', |
| | | headerAlign:'center', |
| | | menuWidth:160, |
| | |
| | | editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false), |
| | | assignMembersBtn: this.vaildData(this.permission[this.$route.query.id].FREEZE, false), |
| | | departmentAddChildrenBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false), |
| | | downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOADFILE, false), |
| | | downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOAD, false), |
| | | importDepartmentBtn: this.vaildData(this.permission[this.$route.query.id].MGR, false), |
| | | statisticsBtn: this.vaildData(this.permission[this.$route.query.id].DISCARD, false), |
| | | }; |
| | |
| | | <template> |
| | | <div> |
| | | <basic-container> |
| | | <avue-form |
| | | ref="form" |
| | | v-model="form" |
| | | :option="option" |
| | | @submit="handleSubmit" |
| | | @tab-click="handleTabClick"> |
| | | <template slot="avatar" slot-scope="{disabled,size}"> |
| | | <div> |
| | | <userAvatar :avatar="form.avatar"/> |
| | | </div> |
| | | </template> |
| | | </avue-form> |
| | | <el-tabs v-model="index" @tab-click="handleTabClick"> |
| | | <el-tab-pane label="个人信æ¯" name="0"> |
| | | <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="90px" size="small"> |
| | | <el-form-item label="头åï¼"> |
| | | <userAvatar :avatar="userForm.avatar"/> |
| | | </el-form-item> |
| | | <el-form-item label="ç¨æ·åï¼"> |
| | | <el-input v-model="userForm.userId" :disabled="true"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="å§åï¼" prop="userName"> |
| | | <el-input v-model="userForm.userName"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="å½åè§è²ï¼"> |
| | | <el-input v-model="userForm.personName" :disabled="true"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="é®ç®±ï¼"> |
| | | <el-input v-model="userForm.email"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="userSubmit">æäº¤</el-button> |
| | | <el-button @click="handleWitch">æ¸
空</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="ä¿®æ¹å¯ç " name="1"> |
| | | <el-form ref="passWordForm" :model="passWordForm" :rules="rules" label-width="145px" size="small"> |
| | | <el-form-item label="ç»éå¯ç ï¼" prop="oldPassword"> |
| | | <el-input v-model="passWordForm.oldPassword"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="æ°ç»éå¯ç ï¼" prop="password"> |
| | | <el-input v-model="passWordForm.password"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="æ°å¯ç ç»é确认ï¼" prop="confirmPassword"> |
| | | <el-input v-model="passWordForm.confirmPassword"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="passWordSubmit">æäº¤</el-button> |
| | | <el-button @click="handleWitch">æ¸
空</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </basic-container> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import option from "@/option/user/info"; |
| | | import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user"; |
| | | import {updateUser} from "@/api/system/user/api"; |
| | | import func from "../../../util/func"; |
| | | import {changePassword} from "../../../api/user" |
| | | import userAvatar from "./userAvatar"; |
| | |
| | | components: {userAvatar,}, |
| | | data() { |
| | | return { |
| | | index: 0, |
| | | index: '0', |
| | | option: option, |
| | | form: {} |
| | | userForm: {}, |
| | | passWordForm: {}, |
| | | userRules: { |
| | | userName: [ |
| | | {required: true, message: '请è¾å
¥å¯ç ', trigger: 'blur'}, |
| | | ], |
| | | }, |
| | | rules: { |
| | | oldPassword: [ |
| | | {required: true, message: '请è¾å
¥å¯ç ', trigger: 'blur'}, |
| | | ], |
| | | password: [ |
| | | {required: true, message: '请è¾å
¥å¯ç ', trigger: 'blur'}, |
| | | ], |
| | | confirmPassword: [ |
| | | {required: true, message: '请è¾å
¥å¯ç ', trigger: 'blur'}, |
| | | ], |
| | | } |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | this.handleWitch(); |
| | | }, |
| | | methods: { |
| | | handleSubmit(form, done) { |
| | | if (this.index === 0) { |
| | | updateInfo(form).then(res => { |
| | | handleWitch() { |
| | | if (this.index === '0') { |
| | | const {avatar, userId, userName, email, personName} = this.userInfo; |
| | | this.userForm = {avatar, userId, userName, email, personName}; |
| | | } else { |
| | | this.passWordForm = {}; |
| | | this.$refs.passWordForm.clearValidate(); |
| | | } |
| | | }, |
| | | handleTabClick(tabs) { |
| | | this.index = tabs.index |
| | | this.handleWitch(); |
| | | }, |
| | | |
| | | userSubmit() { |
| | | console.log('123') |
| | | this.$refs.userForm.validate((valid) => { |
| | | if (valid) { |
| | | const params = { |
| | | id: this.userInfo.userId, |
| | | name: this.userForm.userName, |
| | | email: this.userForm.email |
| | | } |
| | | updateUser(params).then(res => { |
| | | if (res.data.success) { |
| | | this.$message({ |
| | | type: "success", |
| | |
| | | }); |
| | | } |
| | | done(); |
| | | }, error => { |
| | | window.console.log(error); |
| | | done(); |
| | | }) |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | }, |
| | | passWordSubmit() { |
| | | this.$refs.passWordForm.validate((valid) => { |
| | | if (valid) { |
| | | let userInfo = JSON.parse(localStorage.getItem('saber-userInfo')); |
| | | let params = { |
| | | userName: userInfo.content.userId, |
| | | oldPassword: func.encryptData(form.oldPassword, 'daliantan0v0vcip'), |
| | | password: func.encryptData(form.password, 'daliantan0v0vcip'), |
| | | confirmPassword: func.encryptData(form.confirmPassword, 'daliantan0v0vcip'), |
| | | oldPassword: func.encryptData(this.passWordForm.oldPassword, 'daliantan0v0vcip'), |
| | | password: func.encryptData(this.passWordForm.password, 'daliantan0v0vcip'), |
| | | confirmPassword: func.encryptData(this.passWordForm.confirmPassword, 'daliantan0v0vcip'), |
| | | |
| | | } |
| | | changePassword(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.msg); |
| | | this.passwordVisible = false; |
| | | this.$store.dispatch("LogOut").then(() => { |
| | | resetRouter(); |
| | | this.$router.push({path: "/login"}); |
| | |
| | | }).catch(err => { |
| | | console.log(err); |
| | | }) |
| | | } else { |
| | | return false; |
| | | } |
| | | }, |
| | | handleWitch() { |
| | | if (this.index === 0) { |
| | | this.form = {...this.userInfo}; |
| | | console.log(this.form); |
| | | } |
| | | }, |
| | | handleTabClick(tabs) { |
| | | this.index = func.toInt(tabs.index); |
| | | this.handleWitch(); |
| | | this.$refs.form.resetFields(); |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | |
| | | <script> |
| | | import store from "@/store"; |
| | | import { VueCropper } from "vue-cropper"; |
| | | import { uploadAvatar } from "@/api/system/user"; |
| | | import {getUserPhoto, updateUserPhoto} from "@/api/user"; |
| | | import {mapGetters} from "vuex"; |
| | | import {setStore} from '@/util/store' |
| | | |
| | | export default { |
| | | components: { VueCropper }, |
| | |
| | | visible: false, |
| | | // å¼¹åºå±æ é¢ |
| | | title: "ä¿®æ¹å¤´å", |
| | | options: { |
| | | img: this.avatar, //è£åªå¾ççå°å |
| | | previews: {}, |
| | | resizeHandler: null |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["userInfo"]), |
| | | options() { |
| | | return { |
| | | img: this.userInfo.avatar, //è£åªå¾ççå°å |
| | | autoCrop: true, // æ¯å¦é»è®¤çææªå¾æ¡ |
| | | autoCropWidth: 200, // é»è®¤çææªå¾æ¡å®½åº¦ |
| | | autoCropHeight: 200, // é»è®¤çææªå¾æ¡é«åº¦ |
| | | fixedBox: true, // åºå®æªå¾æ¡å¤§å° ä¸å
许æ¹å |
| | | outputType:"png", // é»è®¤çææªå¾ä¸ºPNGæ ¼å¼ |
| | | filename: 'avatar' // æä»¶åç§° |
| | | }, |
| | | previews: {}, |
| | | resizeHandler: null |
| | | }; |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | // ç¼è¾å¤´å |
| | |
| | | // ä¸ä¼ é¢å¤ç |
| | | beforeUpload(file) { |
| | | if (file.type.indexOf("image/") == -1) { |
| | | this.$modal.msgError("æä»¶æ ¼å¼é误ï¼è¯·ä¸ä¼ å¾çç±»å,å¦ï¼JPGï¼PNGåç¼çæä»¶ã"); |
| | | this.$message.error("æä»¶æ ¼å¼é误ï¼è¯·ä¸ä¼ å¾çç±»å,å¦ï¼JPGï¼PNGåç¼çæä»¶ã"); |
| | | } else { |
| | | const reader = new FileReader(); |
| | | reader.readAsDataURL(file); |
| | |
| | | this.options.img = reader.result; |
| | | this.options.filename = file.name; |
| | | }; |
| | | this.$refs.cropper.refresh(); |
| | | } |
| | | }, |
| | | // ä¸ä¼ å¾ç |
| | | uploadImg() { |
| | | this.$refs.cropper.getCropBlob(data => { |
| | | console.log(data); |
| | | |
| | | let formData = new FormData(); |
| | | formData.append("avatarfile", data, this.options.filename); |
| | | uploadAvatar(formData).then(response => { |
| | | formData.append("file", data, this.options.filename); |
| | | formData.append("username",this.userInfo.userId); |
| | | |
| | | updateUserPhoto(formData).then(response => { |
| | | this.open = false; |
| | | this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl; |
| | | store.commit('SET_AVATAR', this.options.img); |
| | | this.$modal.msgSuccess("ä¿®æ¹æå"); |
| | | this.$message.success('ä¿®æ¹æåï¼'); |
| | | this.getUserInfo(); |
| | | this.visible = false; |
| | | }); |
| | | }); |
| | |
| | | }, |
| | | // å
³éçªå£ |
| | | closeDialog() { |
| | | this.options.img = store.getters.avatar |
| | | this.options.img = this.userInfo.avatar; // å
³éçªå£æ´æ°ä¸ºç¼åä¸ç头åå°å å¦ä¿®æ¹æåæ´æ°ä¸ºææ°ç å¦ä¿®æ¹åæªä¿åæ´æ°ä¸ºç¼åä¸ç |
| | | this.visible = false; |
| | | window.removeEventListener("resize", this.resizeHandler) |
| | | }, |
| | | // æ´æ°ç¼åå
容 |
| | | getUserInfo(){ |
| | | getUserPhoto().then(res => { |
| | | // å° Blob 转æ¢ä¸º Base64 |
| | | const reader = new FileReader(); |
| | | reader.onloadend = (result) => { |
| | | this.userInfo.avatar = reader.result; // åå¨ Base64 å符串 |
| | | |
| | | setStore({ name: 'userInfo', content: this.userInfo }); |
| | | }; |
| | | reader.readAsDataURL(res.data); // è°ç¨readeræ¹æ³ |
| | | }); |
| | | } |
| | | } |
| | | }; |