From ccfd5dc264d07471d831d2287ff03f293c295981 Mon Sep 17 00:00:00 2001 From: Goldennfish <1981343953@qq.com> Date: 星期二, 25 七月 2023 14:22:44 +0800 Subject: [PATCH] Merge branch 'master' of https://gitee.com/yuanchu_code/lims-front-end --- src/views/personal/myInformation/index.vue | 194 +++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 166 insertions(+), 28 deletions(-) diff --git a/src/views/personal/myInformation/index.vue b/src/views/personal/myInformation/index.vue index a55172f..3fc95ed 100644 --- a/src/views/personal/myInformation/index.vue +++ b/src/views/personal/myInformation/index.vue @@ -1,11 +1,44 @@ <template> <div class="my-main content-main"> <div class="my-info"> - <div class="tips"> - <span /> - <div>鍩烘湰淇℃伅</div> + <div class="tips-main"> + <div class="tips"> + <span /> + <div>鍩烘湰淇℃伅</div> + </div> + <div class="tips-btn"> + <span><i class="el-icon-edit" />鎿嶄綔锛�</span> + <el-button type="text" @click="dialogFormVisible = true">缂栬緫</el-button> + <el-dialog title="缂栬緫" :visible.sync="dialogFormVisible"> + <el-form ref="form" :model="form" :rules="rules"> + <el-form-item label="璐﹀彿" :label-width="formLabelWidth" prop="account"> + <el-input v-model="form.account" autocomplete="off" /> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="dialogFormVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="submitForm()">纭� 瀹�</el-button> + </div> + </el-dialog> + </div> </div> - <el-table + <div class="message"> + <div class="message-item"><span><i class="el-icon-edit" />鐢ㄦ埛鍚嶏細</span>{{ infoTable.username }}</div> + <div class="message-item"> + <span><i class="el-icon-edit" />濮撳悕锛�</span> + <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ infoTable.name }}</el-tag> + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />鐢佃瘽鍙风爜锛�</span> + {{ infoTable.cellPhone }}</div> + <div class="message-item"> + <span><i class="el-icon-edit" />閭锛�</span> + {{ infoTable.email }}</div> + <div class="message-item"> + <span><i class="el-icon-edit" />绛惧悕锛�</span> + 2121212121212121</div> + </div> + <!-- <el-table ref="infoTable" :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}" :data="infoTable" @@ -49,17 +82,23 @@ > <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button> - <!-- <el-button type="text" size="small">缂栬緫</el-button> --> + <el-button type="text" size="small">缂栬緫</el-button> </template> </el-table-column> - </el-table> + </el-table> --> </div> <div class="my-business"> - <div class="tips"> - <span /> - <div>浼佷笟淇℃伅</div> + <div class="tips-main"> + <div class="tips"> + <span /> + <div>浼佷笟淇℃伅</div> + </div> + <div class="tips-btn"> + <span><i class="el-icon-edit" />鎿嶄綔锛�</span> + <el-button type="text">閫�鍑�</el-button> + </div> </div> - <el-table + <!-- <el-table ref="businessTable" :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}" :data="businessTable" @@ -109,40 +148,60 @@ > <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">閫�鍑�</el-button> - <!-- <el-button type="text" size="small">缂栬緫</el-button> --> + <el-button type="text" size="small">缂栬緫</el-button> </template> </el-table-column> - </el-table> + </el-table> --> + <div class="message"> + <div class="message-item"><span><i class="el-icon-edit" />浼佷笟绠�绉帮細</span>{{ businessTable.businessSmallName }}</div> + <div class="message-item"> + <span><i class="el-icon-edit" />瀹屾暣鍚嶇О锛�</span>{{ businessTable.businessBigName }} + </div> + <div class="message-item"> + <span><i class="el-icon-edit" />鑱旂郴浜猴細</span> + <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ businessTable.businessContact }}</el-tag></div> + <div class="message-item"> + <span><i class="el-icon-edit" />鑱旂郴浜虹數璇濓細</span> + {{ businessTable.businessPhone }}</div> + <div class="message-item"> + <span><i class="el-icon-edit" />鍔犲叆鐘舵�侊細</span> + 2121212121212121</div> + </div> </div> </div> </template> <script> +import { getInfo } from '@/api/user' + +// axios.defaults.baseURL = process.env.VUE_APP_BASE_API + export default { data() { return { - infoTable: [ + infoTable: { username: 'jack', name: '寮犱笁', cellPhone: '138888888', email: '138888888@qq.com', signature: '鎴戞槸娉曞鐙傚緬' - } - - ], - businessTable: [ + }, + businessTable: { businessSmallName: '涓ぉ', businessBigName: '涓ぉ绉戞妧', businessContact: 'jack', businessPhone: '1388888888', businessStatus: 1 - } - ] + }, + dialogFormVisible: false, + form: [], + formLabelWidth: 120 } }, created() { + this.getUserInfo() }, methods: { clearFilter() { @@ -152,6 +211,24 @@ filterTag(value, row) { console.log(value, row) return row.businessStatus === value + }, + submitForm() { + // Handle form submission here + // console.log(this.form); + // POST璇锋眰 + this.dialogFormVisible = false + }, + async getUserInfo() { + const res = await getInfo() + this.infoTable.name = res.data.uname + this.infoTable.username = res.data.account + this.infoTable.cellPhone = res.data.phone + this.infoTable.email = res.data.email + this.businessTable.businessSmallName = res.data.e_byname + this.businessTable.businessBigName = res.data.e_name + this.businessTable.businessContact = res.data.e_link_name + this.businessTable.businessPhone = res.data.e_phone + // console.log(res) } } } @@ -161,34 +238,95 @@ .my-main{ .my-info,.my-business{ background: #fff; - padding: 20px 20px 10px 20px; + // padding: 10px 20px 10px 20px; margin: 0; margin-bottom: 12px; - .tips{ + border-radius: 6px; + overflow: hidden; + .tips-main{ + // margin: ; + padding: 10px 20px 0 20px; + display: flex; + justify-content: space-between; + align-items: center; + height: 50px; + // height: ; + &:hover{ + background: #85bff810; + .tips-btn{ + display: block; + left: 0; + opacity:1; + } + } + .tips-btn{ + height: 100%; + // display: none; + position: relative; + opacity:0; + left: 100px; + transition: all 0.3s ease-in-out; + } + .tips{ + height: 100%; display: flex; height: 24px; align-items: center; font-size: 16px; - margin-bottom: 12px; - span{ + // margin-bottom: 12px; + >span{ display: inline-block; margin-right: 10px; width: 4px; height: 16px; background: #0077DB; } - div{ + >div{ height: 100%; line-height: 26px; } + .el-button{ + padding: 0; + } + } + } + // 鍩烘湰淇℃伅鍜屼紒涓氫俊鎭殑姣忎竴涓俊鎭」鏍峰紡 + .message{ + padding: 0px 20px 10px 20px; + + display: flex; + flex-wrap: wrap; + border-top: 1px solid #F2F6FC; + // border-top: 1px solid #F2F6FC; + >div{ + flex: 30%; + max-width: 30%; + padding: 8px; + color: #606266; + align-items: center; + // height: 65px; + font-size: 12px; + height: 52px; + display: flex; + align-items: center; + >span{ + color: #303133; + font-size: 16px; + // + >i{ + margin-right: 8px; + } + } + } + // >div:nth-child(5){ + // flex: 60%; + // max-width: 60%; + // } } } - .my-info{ - - } .my-business{ - + margin-top: 28px; } } </style> -- Gitblit v1.9.3