| | |
| | | height: 60px; |
| | | line-height: 60px; |
| | | } |
| | | |
| | | .search{ |
| | | |
| | | .search { |
| | | background-color: #fff; |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .search_thing{ |
| | | |
| | | .search_thing { |
| | | width: 350px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .search_label{ |
| | | |
| | | .search_label { |
| | | width: 110px; |
| | | font-size: 14px; |
| | | text-align: right; |
| | | } |
| | | |
| | | .search_input{ |
| | | |
| | | .search_input { |
| | | width: calc(100% - 110px); |
| | | } |
| | | |
| | | .table { |
| | | margin-top: 10px; |
| | | background-color: #fff; |
| | | width: calc(100% - 40px); |
| | | height: calc(100% - 60px - 80px - 10px - 40px); |
| | | padding: 20px; |
| | | } |
| | | </style> |
| | | |
| | |
| | | <el-row class="title"> |
| | | <el-col :span="12" style="padding-left: 20px;">人员管理</el-col> |
| | | <el-col :span="12" style="text-align: right;"> |
| | | <el-button size="medium" type="primary">新增人员</el-button> |
| | | <el-button size="medium" type="primary" @click="opeaAdd" v-if="addPower">新增人员</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <div class="search"> |
| | | <div class="search_thing"> |
| | | <div class="search_label">客户名称:</div> |
| | | <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="search.customer"></el-input></div> |
| | | <div class="search_label">用户名:</div> |
| | | <div class="search_input"><el-input size="small" placeholder="请输入" clearable |
| | | v-model="componentData.entity.name" @keyup.enter.native="refreshTable()"></el-input></div> |
| | | </div> |
| | | <div class="search_thing"> |
| | | <div class="search_label">账号状态:</div> |
| | | <div class="search_input"> |
| | | <el-select size="small" v-model="search.state" style="width: 100%;"> |
| | | <el-option label="全部" :value="2"></el-option> |
| | | <el-select size="small" v-model="componentData.entity.state" style="width: 100%;"> |
| | | <el-option label="全部" :value="null"></el-option> |
| | | <el-option label="启用" :value="1"></el-option> |
| | | <el-option label="停用" :value="0"></el-option> |
| | | </el-select> |
| | |
| | | </div> |
| | | <div class="search_thing"> |
| | | <div class="search_label">公司名称:</div> |
| | | <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="search.company"></el-input></div> |
| | | <div class="search_input"> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.company" @keyup.enter.native="refreshTable()"></el-input> |
| | | </div> |
| | | </div> |
| | | <div class="search_thing" style="padding-left: 30px;"> |
| | | <el-button size="small">重 置</el-button> |
| | | <el-button size="small" type="primary">查 询</el-button> |
| | | <el-button size="small" @click="refresh()">重 置</el-button> |
| | | <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table"> |
| | | <ValueTable ref="ValueTable" :url="$api.user.selectUserList" :upUrl="$api.user.updateUser" :componentData="componentData" :key="upIndex" @upUser="upUser"/> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default{ |
| | | import ValueTable from '../tool/value-table.vue' |
| | | export default { |
| | | components: { |
| | | ValueTable |
| | | }, |
| | | data() { |
| | | return{ |
| | | search: { |
| | | customer: null, |
| | | state: 2, |
| | | company: null |
| | | return { |
| | | componentData: { |
| | | entity: { |
| | | name: null, |
| | | state: null, |
| | | company: null, |
| | | orderBy:{ |
| | | field: 'id', |
| | | order: 'asc' |
| | | } |
| | | }, |
| | | isIndex: true, |
| | | showSelect: false, |
| | | select: false, |
| | | init:false, |
| | | do: [{ |
| | | id: 'update', |
| | | font: '编辑', |
| | | type: 'text', |
| | | method: 'doDiy', |
| | | field:['createUserName','updateUserName','roleName','角色=roleId','密码=password'] |
| | | }], |
| | | tagField: { |
| | | state: { |
| | | select: [{ |
| | | value: 1, |
| | | type: 'success', |
| | | label: '启用' |
| | | },{ |
| | | value: 0, |
| | | type: 'danger', |
| | | label: '停用' |
| | | }] |
| | | } |
| | | }, |
| | | selectField: { |
| | | state: { |
| | | select: [{ |
| | | value: 1, |
| | | type: 'success', |
| | | label: '启用' |
| | | },{ |
| | | value: 0, |
| | | type: 'danger', |
| | | label: '停用' |
| | | }] |
| | | }, |
| | | roleId: { |
| | | select: [] |
| | | } |
| | | }, |
| | | cascaderField:{ |
| | | departId:{ |
| | | tree:[] |
| | | }, |
| | | // 字段配置 |
| | | props:{ |
| | | value:'id', |
| | | label:'name', |
| | | checkStrictly: true |
| | | } |
| | | }, |
| | | requiredAdd:['account','name','state','roleId','password','departId'], |
| | | requiredUp:['account','name','state','roleId','departId'], |
| | | addUpload:['pictureUrl','signatureUrl'], |
| | | addUploadConfig:{ |
| | | accept:'.png, .jpg, .jpeg, .gif', |
| | | url:this.$api.deviceScope.uploadFile |
| | | }, |
| | | }, |
| | | entityCopy: {}, |
| | | upIndex: 0, |
| | | addDia: false, |
| | | addPower: true |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.selectTreeList() |
| | | this.selectRole() |
| | | this.entityCopy = this.HaveJson(this.componentData.entity) |
| | | this.getPower() |
| | | }, |
| | | methods: { |
| | | refreshTable() { |
| | | this.$refs['ValueTable'].selectList() |
| | | }, |
| | | refresh() { |
| | | this.componentData.entity = this.HaveJson(this.entityCopy) |
| | | this.upIndex++ |
| | | }, |
| | | upUser(row){ |
| | | console.log(row); |
| | | }, |
| | | selectRole(){ |
| | | this.$axios.get(this.$api.user.selectRoleList).then(res=>{ |
| | | var str = [] |
| | | res.data.forEach(a=>{ |
| | | str.push({ |
| | | label: a.name, |
| | | value: a.id |
| | | }) |
| | | }) |
| | | this.componentData.selectField.roleId.select = str |
| | | }) |
| | | }, |
| | | opeaAdd(){ |
| | | this.$refs.ValueTable.openAddDia(this.$api.user.addUser); |
| | | }, |
| | | selectTreeList(){ |
| | | this.$axios.get(this.$api.department.selectDepartment).then(res => { |
| | | this.componentData.cascaderField.departId.tree = this.handleTree(res.data[0].children) |
| | | this.$refs.ValueTable.selectList() |
| | | }) |
| | | }, |
| | | handleTree(arr){ |
| | | arr.forEach(a => { |
| | | if(a.children.length==0){ |
| | | a.children = null; |
| | | }else{ |
| | | this.handleTree(a.children) |
| | | } |
| | | }) |
| | | return arr |
| | | }, |
| | | // 权限分配 |
| | | getPower(){ |
| | | let power = JSON.parse(sessionStorage.getItem('power')) |
| | | let up = false |
| | | let add = false |
| | | for (var i = 0; i < power.length; i++) { |
| | | if(power[i].menuMethod=='updateUser'){ |
| | | up = true |
| | | } |
| | | if(power[i].menuMethod=='addUser'){ |
| | | add = true |
| | | } |
| | | } |
| | | if(!up){ |
| | | this.componentData.do.splice(0, 1) |
| | | } |
| | | this.addPower = add |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | </script> |