From 34b348ecbdaa67d3e419ca0c80e209e6f77022e1 Mon Sep 17 00:00:00 2001 From: lxl <lixuliang_hd@126.com> Date: 星期三, 21 九月 2022 18:04:54 +0800 Subject: [PATCH] 1 --- src/views/userManage/userInfoManage.vue | 624 +++++++++++++++++++++++++++++-------------------------- 1 files changed, 329 insertions(+), 295 deletions(-) diff --git a/src/views/userManage/userInfoManage.vue b/src/views/userManage/userInfoManage.vue index d971cb8..221cec0 100644 --- a/src/views/userManage/userInfoManage.vue +++ b/src/views/userManage/userInfoManage.vue @@ -1,307 +1,341 @@ <template> - <div class="logLog_box"> - <My-bread - :list="[ - `${$t('operatManage.operatManage')}`, - `${$t('operatManage.eventlogManage')}`, - ]" - ></My-bread> - <el-divider /> - <div class="inquire"> - <el-form ref="ruleForm" :model="form" :inline="true"> - <el-form-item :label="$t('operatManage.ELM.username')" prop="username"> - <el-input - v-model="form.username" - :placeholder="$t('operatManage.ELM.usernameInfo')" + <div class="logLog_box"> + <My-bread + :list="[ + `${$t('userManage.userManage')}`, + `${$t('userManage.userInfoManage')}`, + ]" + ></My-bread> + <el-divider /> + <div class="inquire"> + <el-form ref="ruleForm" :model="form" :inline="true"> + <el-form-item :label="$t('operatManage.ELM.username')" prop="username"> + <el-input + v-model="form.username" + :placeholder="$t('operatManage.ELM.usernameInfo')" + /> + </el-form-item> + <el-form-item + :label="$t('userManage.userInfoObj.userStatus')" + prop="ownedSystem" + > + <el-select + v-model="form.ownedSystem" + :placeholder="$t('userManage.userInfoObj.userStatus')" + > + <el-option :label="$t('userManage.userInfoObj.all')" value="all" /> + <el-option + :label="$t('userManage.userInfoObj.normal')" + value="normal" /> - </el-form-item> - <el-form-item - :label="$t('operatManage.ELM.ownedSystem')" - prop="ownedSystem" + <el-option + :label="$t('userManage.userInfoObj.disable')" + value="disable" + /> + <el-option + :label="$t('userManage.userInfoObj.delete')" + value="delete" + /> + <el-option + :label="$t('userManage.userInfoObj.apply')" + value="apply" + /> + <el-option + :label="$t('userManage.userInfoObj.rejection')" + value="rejection" + /> + </el-select> + </el-form-item> + <el-form-item + :label="$t('userManage.userInfoObj.companyName')" + prop="requestIp" + > + <el-input + v-model="form.requestIp" + :placeholder="$t('common.pleaseInput')" + /> + </el-form-item> + <br /> + <el-form-item> + <el-button type="success" size="small" + ><i class="el-icon-plus"></i> {{ + $t('common.append') + }}</el-button > - <el-select - v-model="form.ownedSystem" - :placeholder="$t('operatManage.ELM.please')" - > - <el-option :label="$t('operatManage.ELM.all')" value="all" /> - <el-option :label="$t('operatManage.ELM.one')" value="one" /> - </el-select> - </el-form-item> - <el-form-item - :label="$t('operatManage.ELM.operationType')" - prop="operationType" + <el-button type="primary" size="small"> + {{ $t('userManage.userInfoObj.userinput') }}</el-button > - <el-select - v-model="form.operationType" - :placeholder="$t('operatManage.ELM.please')" - > - <el-option :label="$t('operatManage.ELM.all')" value="all" /> - <el-option :label="$t('operatManage.ELM.add')" value="add" /> - <el-option :label="$t('operatManage.ELM.delete')" value="delete" /> - <el-option :label="$t('operatManage.ELM.edit')" value="edit" /> - <el-option :label="$t('operatManage.ELM.query')" value="query" /> - </el-select> - </el-form-item> - <el-form-item :label="$t('operatManage.ELM.date')" prop="date"> - <el-date-picker - v-model="form.date" - type="daterange" - align="right" - unlink-panels - :range-separator="$t('operatManage.ELM.to')" - :start-placeholder="$t('operatManage.ELM.startDate')" - :end-placeholder="$t('operatManage.ELM.endDate')" - > - </el-date-picker> - </el-form-item> - <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp"> - <el-input v-model="form.requestIp" placeholder="璇疯緭鍏�" /> - </el-form-item> - <el-form-item> - <el-button @click="onSubmit" - ><i class="el-icon-search"></i> {{ - $t("operatManage.ELM.search") - }}</el-button - > - </el-form-item> - <el-form-item> - <el-button @click="resetForm('ruleForm')" - ><i class="el-icon-delete"></i> {{ - $t("operatManage.ELM.reset") - }}</el-button - > - </el-form-item> - </el-form> - </div> - <div class="table_box"> - <el-table :data="tableData" stripe style="width: 100%" height="99%"> - <el-table-column - align="center" - type="index" - :label="$t('operatManage.ELM.index')" - width="70px" - /> - <el-table-column - align="center" - prop="username" - :label="$t('operatManage.ELM.username')" - /> - <el-table-column - align="center" - prop="ip" - :label="$t('operatManage.ELM.ip')" - /> - <el-table-column - align="center" - prop="ownedSystem" - :label="$t('operatManage.ELM.ownedSystem')" - /> - <el-table-column - align="center" - prop="largeModuleName" - :label="$t('operatManage.ELM.largeModuleName')" - /> - <el-table-column - align="center" - prop="smallModuleName" - :label="$t('operatManage.ELM.smallModuleName')" - /> - <el-table-column - align="center" - prop="resourceName" - :label="$t('operatManage.ELM.resourceName')" - /> - <el-table-column - align="center" - prop="date" - :label="$t('operatManage.ELM.date')" - /> - <el-table-column - align="center" - prop="operationType" - :label="$t('operatManage.ELM.operationType')" - /> - </el-table> - <div style="margin-top: 40px" class="pagination_box"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage" - :page-sizes="[10, 20, 30, 40]" - :page-size="10" - layout="total, sizes, prev, pager, next, jumper" - :total="9" + <el-button type="primary" size="small"> + {{ $t('userManage.userInfoObj.userexport') }}</el-button > - </el-pagination> - </div> + </el-form-item> + <el-form-item style="margin-left: 60%"> + <el-button @click="onSubmit" + ><i class="el-icon-search"></i> {{ + $t('operatManage.ELM.search') + }}</el-button + > + </el-form-item> + <el-form-item> + <el-button @click="resetForm('ruleForm')" + ><i class="el-icon-delete"></i> {{ + $t('operatManage.ELM.reset') + }}</el-button + > + </el-form-item> + </el-form> + </div> + <div class="table_box"> + <el-table :data="tableData" stripe style="width: 100%" height="99%"> + <el-table-column + align="center" + type="index" + :label="$t('operatManage.ELM.index')" + width="70px" + /> + <el-table-column + align="center" + prop="username" + width="220px" + :label="$t('userManage.userInfoObj.chineseName')" + /> + <el-table-column + align="center" + prop="ip" + width="220px" + :label="$t('userManage.userInfoObj.affiliatedUnit')" + /> + <el-table-column + align="center" + prop="ownedSystem" + width="230px" + :label="$t('userManage.userInfoObj.mobileNumber')" + /> + <el-table-column + align="center" + prop="largeModuleName" + :label="$t('userManage.userInfoObj.state')" + > + <template scope="scope"> + <el-tag v-if="scope.row.largeModuleName == '姝e父'" type="success">{{ + scope.row.largeModuleName + }}</el-tag> + <el-tag v-if="scope.row.largeModuleName == '寮傚父'" type="danger">{{ + scope.row.largeModuleName + }}</el-tag> + </template> + </el-table-column> + <el-table-column + align="center" + prop="smallModuleName" + :label="$t('userManage.userInfoObj.post')" + /> + <el-table-column + align="center" + prop="resourceName" + :label="$t('userManage.userInfoObj.addtime')" + /> + <el-table-column + fixed="right" + :label="$t('common.operate')" + width="200" + > + <template #default> + <!-- <el-button type="primary" size="small">淇敼</el-button> --> + + <el-button type="warning" size="small">{{ + $t('common.edit') + }}</el-button> + <el-button type="danger" size="small">{{ + $t('common.delete') + }}</el-button> + </template> + </el-table-column> + </el-table> + <div style="margin-top: 40px" class="pagination_box"> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="currentPage" + :page-sizes="[10, 20, 30, 40]" + :page-size="10" + layout="total, sizes, prev, pager, next, jumper" + :total="9" + > + </el-pagination> </div> </div> - </template> - - <script> - import MyBread from "../../components/MyBread.vue"; - - export default { - //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� - components: { - MyBread, - }, - - data() { - return { - currentPage: 1, - form: { - username: "", - ownedSystem: "", - requestIp: "", - operationType: "", - date: "", + </div> +</template> + +<script> +import MyBread from '../../components/MyBread.vue'; + +export default { + //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� + components: { + MyBread, + }, + + data() { + return { + currentPage: 1, + form: { + username: '', + ownedSystem: 'all', + requestIp: '', + operationType: '', + date: '', + }, + tableData: [ + { + username: '绠$悊鍛�', + ip: '221.182.31.12', + date: '2022-08-05', + ownedSystem: '', + largeModuleName: '姝e父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', }, - tableData: [ - { - username: "绠$悊鍛�", - ip: "221.182.31.12", - date: "2022-08-05", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - }, - { - date: "2022-08-05", - username: "绠$悊鍛�", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - ip: "221.182.31.12", - }, - { - date: "2022-08-05", - username: "绠$悊鍛�", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - ip: "221.182.31.12", - }, - { - date: "2022-08-05", - username: "绠$悊鍛�", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - ip: "221.182.31.12", - }, - { - date: "2022-08-05", - username: "绠$悊鍛�", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - ip: "221.182.31.12", - }, - { - date: "2022-08-05", - username: "绠$悊鍛�", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - ip: "221.182.31.12", - }, - { - date: "2022-08-05", - username: "绠$悊鍛�", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - ip: "221.182.31.12", - }, - { - date: "2022-08-05", - username: "绠$悊鍛�", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - ip: "221.182.31.12", - }, - { - date: "2022-08-05", - username: "绠$悊鍛�", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - ip: "221.182.31.12", - }, - ], - }; + { + date: '2022-08-05', + username: '绠$悊鍛�', + ownedSystem: '', + largeModuleName: '姝e父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', + ip: '221.182.31.12', + }, + { + date: '2022-08-05', + username: '绠$悊鍛�', + ownedSystem: '', + largeModuleName: '寮傚父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', + ip: '221.182.31.12', + }, + { + date: '2022-08-05', + username: '绠$悊鍛�', + ownedSystem: '', + largeModuleName: '姝e父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', + ip: '221.182.31.12', + }, + { + date: '2022-08-05', + username: '绠$悊鍛�', + ownedSystem: '', + largeModuleName: '寮傚父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', + ip: '221.182.31.12', + }, + { + date: '2022-08-05', + username: '绠$悊鍛�', + ownedSystem: '', + largeModuleName: '寮傚父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', + ip: '221.182.31.12', + }, + { + date: '2022-08-05', + username: '绠$悊鍛�', + ownedSystem: '', + largeModuleName: '姝e父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', + ip: '221.182.31.12', + }, + { + date: '2022-08-05', + username: '绠$悊鍛�', + ownedSystem: '', + largeModuleName: '姝e父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', + ip: '221.182.31.12', + }, + { + date: '2022-08-05', + username: '绠$悊鍛�', + ownedSystem: '', + largeModuleName: '姝e父', + smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', + resourceName: '', + operationType: '鏌ヨ', + ip: '221.182.31.12', + }, + ], + }; + }, + methods: { + handleSizeChange(val) { + console.log(`姣忛〉 ${val} 鏉); }, - methods: { - handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉); - }, - handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`); - }, - onSubmit() { - console.log("submit!"); - }, - resetForm(formName) { - this.$refs[formName].resetFields(); - }, + handleCurrentChange(val) { + console.log(`褰撳墠椤�: ${val}`); }, - created() {}, - }; - </script> - <style lang="less" scoped> - //@import url(); 寮曞叆鍏叡css绫� - .logLog_box { - background: rgb(240, 242, 245); - border-radius: 10px; - height: 100%; - padding: 10px; - box-sizing: border-box; - .el-input { - width: 300px; - } - .inquire { - height: 110px; - overflow: auto; - padding: 10px; - margin-top: 20px; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - margin-bottom: 20px; - .el-form-item { - margin: 7px; - } - } - .table_box { - height: 65%; - padding: 10px; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - } - .text-center { - text-align: center; + onSubmit() { + console.log('submit!'); + }, + resetForm(formName) { + this.$refs[formName].resetFields(); + }, + }, + created() {}, +}; +</script> +<style> +/deep/ .el-table__fixed-right { + height: 100% !important; +} +</style> +<style lang="less" scoped> +//@import url(); 寮曞叆鍏叡css绫� +.logLog_box { + background: rgb(240, 242, 245); + border-radius: 10px; + height: 100%; + padding: 10px; + box-sizing: border-box; + .el-input { + width: 300px; + } + .inquire { + height: 110px; + overflow: auto; + padding: 8px; + margin-top: 20px; + background: #fff; + border-radius: 5px; + border: 1px solid rgb(202, 201, 204); + margin-bottom: 20px; + .el-form-item { + margin: 5px; } } - </style> - \ No newline at end of file + .table_box { + height: 65%; + padding: 10px; + background: #fff; + border-radius: 5px; + border: 1px solid rgb(202, 201, 204); + } + .text-center { + text-align: center; + } +} +</style> -- Gitblit v1.9.3