|
|
@@ -0,0 +1,945 @@
|
|
|
+<template>
|
|
|
+ <!-- 维修人员 -->
|
|
|
+ <div class="repairPersonnel_main">
|
|
|
+ <div class="main_top_bg">
|
|
|
+ </div>
|
|
|
+ <div class="additions" :class="{'additions_en':version == 1}" @click="additionsFun()">
|
|
|
+ <p>+</p>
|
|
|
+ <span>{{version==0?'添加人员':'Add people'}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="main_top clearfix">
|
|
|
+ <div class="search_box">
|
|
|
+ <el-input :placeholder="version==0?'- 输入关键词进行搜索':'- Enter keywords to search'" v-model="keyword" class="search" @change="search">
|
|
|
+ <template slot="prepend">{{version==0?'搜索':'Search'}}</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="button_box clearfix">
|
|
|
+ <el-button type="primary">{{version==0?'姓名查看':'Name viewing'}} <i class="el-icon-caret-bottom"></i></el-button>
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li v-for="(item) in alphabetList" :key="item.id" :class="{'li_select':tag == item}" @click="tag = item==tag?'':item">{{item}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content" v-for="n in rpListLength" :key="n">
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li v-for="(item,index) in repairPersonnelList" :key="item.id" @click="repairPersonnelFun(item,index)" v-show="index<(n*3) && index>=((n-1)*3)">
|
|
|
+ <div class="clearfix">
|
|
|
+ <div class="avatar" :style="{'background':'url('+item.url+')'}"></div>
|
|
|
+ <div>
|
|
|
+ <p><span>{{item.name}}</span><span>{{item.number}}{{version==0?'号':'Number'}} {{item.department}}</span></p>
|
|
|
+ <p>{{version==0?'维修数:':'Maintenance number: '}}{{item.repair_count}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom" :class="{'marginRightSelect':repairPersonnelId == item.id}">
|
|
|
+ <p><span>·</span>{{item.repair_path}}</p>
|
|
|
+ <div>{{version==0?'近期维修':'Recent repairs'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="icon" v-if="repairPersonnelId == item.id">
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="table_box" v-if="index == n">
|
|
|
+ <div class="table_box_top">
|
|
|
+ <ul class="clearfix">
|
|
|
+ <!-- <li v-for="(item,index) in employeeInformationList" v-if="version==0">
|
|
|
+ <span>{{item.key}}</span>
|
|
|
+ <span>{{userInfoData[item.value]}}</span>
|
|
|
+ </li> -->
|
|
|
+ <li v-for="(item) in employeeInformationListEN" :key="item.key">
|
|
|
+ <span>{{item.key}}</span>
|
|
|
+ <span>{{userInfoData[item.value]}}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="tableWrap">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ width="100%"
|
|
|
+ height="300"
|
|
|
+ border
|
|
|
+ :row-class-name="tableRowClassName">
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="48">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column align="center" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label" :key="item.id" :min-width="item.prop=='repair_time'?'160':(item.label.length+1)*14+20" v-for="(item,index) in tableList" v-if="version == 0">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column align="center" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label" :key="item.id" :min-width="item.prop=='repair_time'?'160':(item.label.length+1)*9+15" v-for="(item) in tableListEN">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="version==0?'操作':'operate'"
|
|
|
+ align="center"
|
|
|
+ width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="small" @click="editRecordFun(scope.row)">{{version==0?'编辑':'Edit'}}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="table_box_bottom">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handleCurrentChange1"
|
|
|
+ :current-page.sync="currentPage1"
|
|
|
+ :page-size="16"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total1">
|
|
|
+ </el-pagination>
|
|
|
+ <div class="button_box">
|
|
|
+ <el-button @click="editItionsFun()">{{version==0?'编辑资料':'Edit information'}} <span class="icon_span">→</span></el-button>
|
|
|
+ <el-button @click="delRepairUser()">{{version==0?'删除成员':'Remove member'}}<i class="el-icon-close"></i></el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main_bottom">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handleCurrentChange2"
|
|
|
+ :current-page.sync="currentPage2"
|
|
|
+ :page-size="18"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total2">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 添加人员 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="ItionsTitle"
|
|
|
+ :visible.sync="additionsDialog"
|
|
|
+ :class="{'addItions_en':version==1}"
|
|
|
+ width="60%">
|
|
|
+ <el-form ref="additionsForm" :model="additionsForm" label-width="140px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="version==0?'维修人员ID:':'Maintenance Person ID:'" prop="repair_id" :rules="{required: true, message: version==0?'不能为空':'Not null', trigger: 'blur'}">
|
|
|
+ <el-input v-model="additionsForm.repair_id" @keyup.native="itionsKeydown($event)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="version==0?'所属部门:':'Department:'" prop="department">
|
|
|
+ <el-input v-model="additionsForm.department" @keyup.native="itionsKeydown($event)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="version==0?'维修人员名称:':'Maintenance personnel name:'" prop="name" :rules="{required: true, message: version==0?'不能为空':'Not null', trigger: 'blur'}">
|
|
|
+ <el-input v-model="additionsForm.name" @keyup.native="itionsKeydown($event)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="version==0?'手机号码:':'cellphone number:'" prop="phone" :rules="{required: true, message: version==0?'不能为空':'Not null', trigger: 'blur'}">
|
|
|
+ <el-input v-model="additionsForm.phone" @keyup.native="itionsKeydown($event)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="Email:">
|
|
|
+ <el-input v-model="additionsForm.email" @keyup.native="itionsKeydown($event)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="dialog_foot">
|
|
|
+ <el-button type="primary" @click="saveRepairUser()" v-loading="loading.saveRepairUser">{{ItionsButton}}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 编辑维修记录 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="version=='0'?'编辑维修记录':'Edit maintenance record'"
|
|
|
+ :visible.sync="addRecordDialog"
|
|
|
+ class="record_dialog"
|
|
|
+ :class="{'record_dialog_en':version == 1}"
|
|
|
+ width="60%">
|
|
|
+ <el-form ref="addRecordForm" :model="addRecordForm" label-width="140px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="version==0?'维修人员名称:':'Maintenance personnel name:'" prop="repair_id" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
|
|
|
+ <el-select v-model="addRecordForm.repair_id" placeholder="" @keyup.native="recordKeydown($event)">
|
|
|
+ <el-option
|
|
|
+ v-for="item in userList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="version==0?'网络名称:':'Network name:'" prop="networkid" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
|
|
|
+ <el-select v-model="addRecordForm.networkid" placeholder="" @change="networksIdChange" :no-data-text="networksNoDataText" @keyup.native="recordKeydown($event)">
|
|
|
+ <el-option
|
|
|
+ v-for="item in networksList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="version==0?'维修的故障:':'Repair failure:'">
|
|
|
+ <el-input v-model="addRecordForm.repair_hitch" @keyup.native="recordKeydown($event)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="version==0?'维修方案时间:':'Maintenance schedule:'">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="addRecordForm.repair_time"
|
|
|
+ type="datetime">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="version==0?'项目名称:':'project name:'" prop="projectid" :rules="{required: true, message: version==0?'不能为空':'Not null', trigger: 'blur'}">
|
|
|
+ <el-select v-model="addRecordForm.projectid" placeholder="" @change="projectsIdChange" @keyup.native="recordKeydown($event)">
|
|
|
+ <el-option
|
|
|
+ v-for="item in projects"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="version==0?'路灯ID:':'Streetlight ID:'" prop="lampid" :rules="{required: true, message: version==0?'不能为空':'Not null', trigger: 'blur'}">
|
|
|
+ <el-select v-model="addRecordForm.lampid" placeholder="" @keyup.native="recordKeydown($event)">
|
|
|
+ <el-option
|
|
|
+ v-for="item in lampList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.number"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="version==0?'维修方案:':'maintenance proposal:'">
|
|
|
+ <el-input v-model="addRecordForm.repair_solution" @keyup.native="recordKeydown($event)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="version==0?'路段:':'Road section:'">
|
|
|
+ <el-input v-model="addRecordForm.address" @keyup.native="recordKeydown($event)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div class="dialog_foot">
|
|
|
+ <el-button type="primary" @click="recordKeep()" v-loading="loading.recordKeep">{{version==0?'立 刻 保 存':'Save'}}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script type="text/javascript">
|
|
|
+ import {mapGetters} from 'vuex'
|
|
|
+ import baseApi from '../../api/base.js'
|
|
|
+ import allUrl from '../../api/allUel.js'
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ keyword:'',
|
|
|
+ value:1,
|
|
|
+ userid:'',
|
|
|
+ reportList:[{label:'姓名查看',value:1}],
|
|
|
+ alphabetList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
|
|
|
+ repairPersonnelList:[],
|
|
|
+ employeeInformationList:[{key:'维修员名称',value:'name'},{key:'维修员ID',value:'repair_id'},{key:'所属账号',value:'owner'},{key:'所属部门',value:'department'},{key:'手机号码',value:'telephone'},{key:'E-mail',value:'email'}],
|
|
|
+ employeeInformationListEN:[{key:'Maintenance staff name',value:'name'},{key:'Maintenance ID',value:'repair_id'},{key:'Account number',value:'owner'},{key:'Department',value:'department'},{key:'cellphone number',value:'telephone'},{key:'E-mail',value:'email'}],
|
|
|
+ userInfoData:[],
|
|
|
+ tag:'',
|
|
|
+ /*表格*/
|
|
|
+ tableList:[{prop:'projectname',label:'项目名称'},{prop:'networkname',label:'网络名称'},{prop:'lampid',label:'路灯ID'},{prop:'repair_path',label:'路段'},{prop:'repair_hitch',label:'故障维修'},{prop:'repair_solution',label:'维修方案'},{prop:'repair_time',label:'维修时间'}],
|
|
|
+ tableListEN:[{prop:'projectname',label:'Project name'},{prop:'networkname',label:'Network name'},{prop:'lampid',label:'Lamp ID'},{prop:'repair_path',label:'Section'},{prop:'repair_hitch',label:'malfunction repair'},{prop:'repair_solution',label:'maintenance proposal'},{prop:'repair_time',label:'Repair time'}],
|
|
|
+ tableData: [],
|
|
|
+ currentPage1:1,
|
|
|
+ total1:0,
|
|
|
+ currentPage2:1,
|
|
|
+ total2:0,
|
|
|
+ rpListLength:0,
|
|
|
+ repairPersonnelId:'',
|
|
|
+ index:'',
|
|
|
+ additionsDialog:false,
|
|
|
+ ItionsTitle:'添加维修人员',
|
|
|
+ ItionsButton:'立 刻 新 建',
|
|
|
+ additionsForm:{
|
|
|
+ repair_id:'',
|
|
|
+ name:'',
|
|
|
+ department:'',
|
|
|
+ phone:'',
|
|
|
+ email:'',
|
|
|
+ },
|
|
|
+ itionsType:'',
|
|
|
+ loading:{
|
|
|
+ saveRepairUser:false,
|
|
|
+ recordKeep:false,
|
|
|
+ },
|
|
|
+ addRecordDialog:false,
|
|
|
+ addRecordForm:{
|
|
|
+ repair_id:'',
|
|
|
+ projectid:'',
|
|
|
+ networkid:'',
|
|
|
+ lampid:'',
|
|
|
+ repair_hitch:'',
|
|
|
+ repair_solution:'',
|
|
|
+ repair_time:'',
|
|
|
+ address:'',
|
|
|
+ },
|
|
|
+ userList:[],
|
|
|
+ projects:[],
|
|
|
+ networksNoDataText:'请先选择项目',
|
|
|
+ lampList:[],
|
|
|
+ networksList:[],
|
|
|
+ lampNoDataText:'请先选择网络',
|
|
|
+ repairInfoId:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapGetters({
|
|
|
+ token:'token',
|
|
|
+ username:'username',
|
|
|
+ client_key:'client_key',
|
|
|
+ projectsId:'projectsId',
|
|
|
+ version:'version',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.repairUserList(1)
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ search(){
|
|
|
+ // console.log(val)
|
|
|
+ this.repairUserList(1)
|
|
|
+ },
|
|
|
+ itionsKeydown(e){
|
|
|
+ if(e.key == 'Enter'){
|
|
|
+ this.saveRepairUser();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ recordKeydown(e){
|
|
|
+ if(e.key == 'Enter'){
|
|
|
+ this.recordKeep();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ recordKeep(){
|
|
|
+ this.$refs['addRecordForm'].validate((valid) => {
|
|
|
+ if(valid){
|
|
|
+ this.saveRepairInfo(this.repairInfoId)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ saveRepairInfo(id){
|
|
|
+ this.loading.recordKeep = true;
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.saveRepairInfo,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ id:id,
|
|
|
+ ...this.addRecordForm,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message:data.msg,
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.addRecordDialog = false;
|
|
|
+ this.loading.recordKeep = false;
|
|
|
+ this.userInfo(this.currentPage1)
|
|
|
+ },
|
|
|
+ this,
|
|
|
+ () =>{
|
|
|
+ this.loading.recordKeep = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ editRecordFun(data){
|
|
|
+ // console.log(data)
|
|
|
+ this.repairInfoId = data.id;
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.userList,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.userList = data.data.list;
|
|
|
+ // console.log(data,'维修人员下拉列表')
|
|
|
+ },
|
|
|
+ this)
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.repairInfo,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ repairid:data.id
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ for(let key in this.addRecordForm){
|
|
|
+ this.addRecordForm[key] = data.data[key];
|
|
|
+ }
|
|
|
+ this.addRecordDialog = true;
|
|
|
+ this.projectGet();
|
|
|
+ this.projectsIdChange(data.data.projectid,1);
|
|
|
+ this.networksIdChange(data.data.networkid,1);
|
|
|
+ },
|
|
|
+ this)
|
|
|
+ },
|
|
|
+ projectGet(){
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.home.projectGet,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.projects = data.data.projects;
|
|
|
+ // console.log(data,'项目列表')
|
|
|
+ },
|
|
|
+ this)
|
|
|
+ },
|
|
|
+ projectsIdChange(val,type){
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.networkGet,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ project_id:val,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.networksList = data.data.networks;
|
|
|
+ if(type != 1){
|
|
|
+ this.addRecordForm.networkid = '';
|
|
|
+ this.addRecordForm.lampid = '';
|
|
|
+ }
|
|
|
+ if(this.networksList.length == 0){
|
|
|
+ if(this.version == 1){
|
|
|
+ this.networksNoDataText = 'There is no network under the current project'
|
|
|
+ }else{
|
|
|
+ this.networksNoDataText = '当前项目下无网络'
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(this.version == 1){
|
|
|
+ this.networksNoDataText = 'Please select the item'
|
|
|
+ }else{
|
|
|
+ this.networksNoDataText = '请先选择项目'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(data,'网络列表')
|
|
|
+ },
|
|
|
+ this)
|
|
|
+ },
|
|
|
+ networksIdChange(val,type){
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.lampList,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ networkid:val,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.lampList = data.data;
|
|
|
+ if(type != 1){
|
|
|
+ this.addRecordForm.lampid = '';
|
|
|
+ }
|
|
|
+ if(this.lampList.length == 0){
|
|
|
+ if(this.version == 1){
|
|
|
+ this.lampNoDataText = 'There is no street lamp under the current network'
|
|
|
+ }else{
|
|
|
+ this.lampNoDataText = '当前网络下无路灯'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(data,'网络列表')
|
|
|
+ },
|
|
|
+ this)
|
|
|
+ },
|
|
|
+ delRepairUser(){
|
|
|
+ this.$confirm(this.version==0?'此操作将永久删除该成员, 是否继续?':'This will permanently delete the member. Continue?', this.version==0?'提示':'prompt', {
|
|
|
+ confirmButtonText: this.version==0?'确定':'determine',
|
|
|
+ cancelButtonText: this.version==0?'取消':'cancel',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.delRepairUser,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ userid:this.userid,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message:data.msg,
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.repairPersonnelId = -1;
|
|
|
+ this.index = 0;
|
|
|
+ this.repairUserList(this.currentPage2)
|
|
|
+ },
|
|
|
+ this)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: this.version == 0?'已取消删除':'Canceled Del'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ additionsFun(){
|
|
|
+ this.ItionsTitle = '添加维修人员';
|
|
|
+ this.ItionsButton = '立 刻 新 建';
|
|
|
+ if(this.version == 1){
|
|
|
+ this.ItionsTitle = 'Adding maintenance personnel';
|
|
|
+ this.ItionsButton = 'Immediately NEW';
|
|
|
+ }
|
|
|
+ this.additionsDialog = true;
|
|
|
+ this.$nextTick(function(){
|
|
|
+ this.$refs['additionsForm'].resetFields();
|
|
|
+ for(let key in this.additionsForm){
|
|
|
+ this.additionsForm[key] = '';
|
|
|
+ }
|
|
|
+ this.itionsType = 'add';
|
|
|
+ })
|
|
|
+ },
|
|
|
+ editItionsFun(){
|
|
|
+ this.ItionsTitle = '编辑维修人员';
|
|
|
+ this.ItionsButton = '立 刻 保 存';
|
|
|
+ if(this.version == 1){
|
|
|
+ this.ItionsTitle = 'Editors maintenance personnel';
|
|
|
+ this.ItionsButton = 'Save';
|
|
|
+ }
|
|
|
+ this.additionsDialog = true;
|
|
|
+ this.$nextTick(function(){
|
|
|
+ this.$refs['additionsForm'].resetFields();
|
|
|
+ for(let key in this.additionsForm){
|
|
|
+ this.additionsForm[key] = this.userInfoData[key];
|
|
|
+ }
|
|
|
+ this.itionsType = 'edit';
|
|
|
+ })
|
|
|
+ },
|
|
|
+ saveRepairUser(){
|
|
|
+ let userid;
|
|
|
+ if(this.itionsType == 'edit'){
|
|
|
+ userid = this.userid;
|
|
|
+ }else{
|
|
|
+ userid = 0;
|
|
|
+ }
|
|
|
+ this.$refs['additionsForm'].validate((valid) => {
|
|
|
+ if(valid){
|
|
|
+ this.loading.saveRepairUser = true;
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.saveRepairUser,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ userid:userid,
|
|
|
+ ...this.additionsForm,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message:data.msg,
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.loading.saveRepairUser = false;
|
|
|
+ this.repairPersonnelId = -1;
|
|
|
+ this.index = 0;
|
|
|
+ this.repairUserList(this.currentPage2);
|
|
|
+ this.additionsDialog = false;
|
|
|
+ },
|
|
|
+ this,
|
|
|
+ ()=>{
|
|
|
+ this.loading.saveRepairUser = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ userInfo(value){
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.userInfo,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ userid:this.userid,
|
|
|
+ page:value,
|
|
|
+ count:16,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.currentPage1 = value;
|
|
|
+ this.userInfoData = data.data;
|
|
|
+ this.tableData = data.data.repair_list;
|
|
|
+ this.total1 = data.data.total*16;
|
|
|
+ },
|
|
|
+ this)
|
|
|
+ },
|
|
|
+ repairUserList(value){
|
|
|
+ baseApi.ajax_post(
|
|
|
+ allUrl.alarm.repairUserList,
|
|
|
+ {
|
|
|
+ username:this.username,
|
|
|
+ client_key:this.client_key,
|
|
|
+ token:this.token,
|
|
|
+ keyword:this.keyword,
|
|
|
+ page:value,
|
|
|
+ count:18,
|
|
|
+ tag:this.tag,
|
|
|
+ },
|
|
|
+ {},
|
|
|
+ data =>{
|
|
|
+ this.currentPage2 = value;
|
|
|
+ this.repairPersonnelList = data.data.list;
|
|
|
+ this.rpListLength = this.repairPersonnelList.length;
|
|
|
+ this.total2 = data.data.total*18;
|
|
|
+ },
|
|
|
+ this)
|
|
|
+ },
|
|
|
+ /*表格*/
|
|
|
+ tableRowClassName({ rowIndex}) {
|
|
|
+ if (rowIndex%2 != 0) {
|
|
|
+ return 'row_bg';
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ },
|
|
|
+ /*分页*/
|
|
|
+ handleCurrentChange1(val) {
|
|
|
+ this.userInfo(val)
|
|
|
+ },
|
|
|
+ handleCurrentChange2(val) {
|
|
|
+ this.repairUserList(val)
|
|
|
+ },
|
|
|
+ repairPersonnelFun(data,index){
|
|
|
+ if(this.repairPersonnelId == data.id){
|
|
|
+ this.repairPersonnelId = -1;
|
|
|
+ this.index = 0;
|
|
|
+ }else{
|
|
|
+ this.repairPersonnelId = data.id;
|
|
|
+ this.index = parseInt(index/3)+1;
|
|
|
+ }
|
|
|
+ this.userid = data.id;
|
|
|
+ this.userInfo(1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ tag(){
|
|
|
+ this.repairUserList(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style type="text/css" lang="less">
|
|
|
+ .repairPersonnel_main{
|
|
|
+ position: relative;
|
|
|
+ min-width: 1260px;
|
|
|
+ .additions{
|
|
|
+ position: fixed;
|
|
|
+ right: 0px;top:270px;
|
|
|
+ z-index: 2;
|
|
|
+ background: #373b44;
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 36px;
|
|
|
+ padding: 0px 15px 15px 15px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ p{
|
|
|
+ padding: 5px 0;
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .additions_en{
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ >.wrap{
|
|
|
+ padding: 0px 46px 50px 50px;
|
|
|
+ }
|
|
|
+ >.main_top_bg{
|
|
|
+ width: 100%;
|
|
|
+ height:246px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ background:rgba(234,234,234,1);
|
|
|
+ }
|
|
|
+ .main_top{
|
|
|
+ width: 100%;
|
|
|
+ // height: 110px;
|
|
|
+ margin-bottom: 36px;
|
|
|
+ padding-top: 32px;
|
|
|
+ position: relative;
|
|
|
+ .search_box{
|
|
|
+ float: left;
|
|
|
+ width:344px;
|
|
|
+ height:50px;line-height: 50px;
|
|
|
+ background:rgba(255,255,255,1);
|
|
|
+ box-shadow: -5px 0px 0px 0px rgba(252,132,64,1);
|
|
|
+ .search{
|
|
|
+ font-size:18px;
|
|
|
+ font-family:PingFangSC-Regular;
|
|
|
+ color:rgba(178,186,198,1);
|
|
|
+ }
|
|
|
+ .el-input__inner{
|
|
|
+ height:50px;line-height: 50px;
|
|
|
+ border: 0px;
|
|
|
+ }
|
|
|
+ .el-input-group__prepend{
|
|
|
+ background: #ffffff;
|
|
|
+ border: 0px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family:PingFangSC-Medium;
|
|
|
+ color:rgba(26,26,26,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button_box{
|
|
|
+ float: right;
|
|
|
+ margin-top: 5px;
|
|
|
+ // .el-button{
|
|
|
+ // background: linear-gradient(140.3deg,rgba(252,132,64,1),rgba(254,113,33,1));
|
|
|
+ // color: #fff;
|
|
|
+ // margin-left: 18px;
|
|
|
+ // }
|
|
|
+ .el-button {
|
|
|
+ width: 142px;
|
|
|
+ float: left;
|
|
|
+ .el-input__inner{
|
|
|
+ background: linear-gradient(#3682fb, #38a1f6);
|
|
|
+ border-radius: 20px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ float: left;
|
|
|
+ margin-left:10px;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ float: left;
|
|
|
+ height: 40px;line-height: 40px;
|
|
|
+ padding: 0 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #222222;
|
|
|
+ // font-weight: bold;
|
|
|
+ }
|
|
|
+ li:hover{
|
|
|
+ color:#FC8440;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .li_select{
|
|
|
+ color:#FC8440;
|
|
|
+ font-weight: bold;
|
|
|
+ text-decoration:underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ >ul{
|
|
|
+ li{
|
|
|
+ float: left;
|
|
|
+ width: calc(33.33% - 22px);
|
|
|
+ margin: 0 0 30px 20px;
|
|
|
+ border: 1px solid #d9d9d9;border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ >div:first-child{
|
|
|
+ background: #fff;
|
|
|
+ .avatar{
|
|
|
+ float: left;
|
|
|
+ width: 60px;height: 60px;background-size: 100% 100%;
|
|
|
+ border-radius: 30px;
|
|
|
+ margin: 20px 22px 27px 20px;
|
|
|
+ background: #eee !important;
|
|
|
+ }
|
|
|
+ >div:last-child{
|
|
|
+ float: left;
|
|
|
+ margin-top: 30px;
|
|
|
+ width: calc(100% - 110px);
|
|
|
+ p{
|
|
|
+ font-size: 14px;color: #666666;
|
|
|
+ span:first-child{
|
|
|
+ font-size: 18px;color: #222222;
|
|
|
+ display: inline-block;
|
|
|
+ max-width: calc(100% - 100px);
|
|
|
+ margin-right: 20px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p:last-child{
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.bottom{
|
|
|
+ height: 80px;line-height: 80px;
|
|
|
+ color: #666666;font-size: 16px;
|
|
|
+ background: #eaeaea;
|
|
|
+ padding-left: 30px;
|
|
|
+ position: relative;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ div{
|
|
|
+ position: absolute;
|
|
|
+ top: -10px;
|
|
|
+ height: 21px;
|
|
|
+ // width: 71px;
|
|
|
+ padding: 0 20px;
|
|
|
+ line-height: 21px;
|
|
|
+ text-align: center;
|
|
|
+ background: #fc8440;
|
|
|
+ color: #fff;font-size: 12px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.marginRightSelect{
|
|
|
+ background: #373b44;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ position: absolute;
|
|
|
+ top: 166px;
|
|
|
+ left: 28px;
|
|
|
+ margin-left: -5px;
|
|
|
+ z-index: 1;
|
|
|
+ div:first-child{
|
|
|
+ background: #373B44;
|
|
|
+ width: 2px;
|
|
|
+ height:48px;
|
|
|
+ border-radius: 1px;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ div:last-child{
|
|
|
+ width:10px;
|
|
|
+ height:10px;
|
|
|
+ background: #373B44;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: -1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:nth-child(3n+1){
|
|
|
+ margin:0px;
|
|
|
+ width: calc(33.33% - 2px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table_box{
|
|
|
+ width: 100%;height: 427px;
|
|
|
+ background: #494e54;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .table_box_top{
|
|
|
+ height: 74px;line-height: 74px;
|
|
|
+ li{
|
|
|
+ float: left;
|
|
|
+ margin-left: 35px;
|
|
|
+ span{
|
|
|
+ font-size: 14px;color: #fff;
|
|
|
+ }
|
|
|
+ span:first-child{
|
|
|
+ opacity: 0.6;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tableWrap{
|
|
|
+ height: 300px;width: 100%;
|
|
|
+ // overflow: auto;
|
|
|
+ tr:hover>td{
|
|
|
+ background: inherit;
|
|
|
+ }
|
|
|
+ .el-table{
|
|
|
+ background: #373b44;
|
|
|
+ th,tr{
|
|
|
+ background: #373b44;
|
|
|
+ .cell{
|
|
|
+ color: #fff;
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td,th.is-leaf {
|
|
|
+ border-bottom: 1px solid #5a5e67;
|
|
|
+ }
|
|
|
+ .row_bg{
|
|
|
+ background: #313641;
|
|
|
+ }
|
|
|
+ .el-table--border, .el-table--group{
|
|
|
+ border: 0px;
|
|
|
+ }
|
|
|
+ .el-table--border::after, .el-table--group::after, .el-table::before{
|
|
|
+ background: #373b44;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
|
|
|
+ border-right: 1px solid #5a5e67;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table_box_bottom{
|
|
|
+ text-align: center;
|
|
|
+ padding:10px 0;
|
|
|
+ .el-pagination .btn-next, .el-pagination .btn-prev{
|
|
|
+ background: #494e54;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .el-pager li{
|
|
|
+ background: #494e54;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .el-pager li.active{
|
|
|
+ color: #000;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ >.el-button{
|
|
|
+ float: left;
|
|
|
+ width: 178px;height: 54px;line-height: 54px;
|
|
|
+ background: linear-gradient(#3682fb, #38a1f6);
|
|
|
+ padding:0px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: -10px
|
|
|
+ }
|
|
|
+ >.report_bottton{
|
|
|
+ background: linear-gradient(#fc8440, #fe7121);
|
|
|
+ border: 0px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .button_box{
|
|
|
+ float: right;
|
|
|
+ margin:-35px 30px 0 0;
|
|
|
+ .el-button:first-child{
|
|
|
+ background: #7cb2ff;
|
|
|
+ }
|
|
|
+ .el-button:last-child{
|
|
|
+ background: #fe7528;
|
|
|
+ }
|
|
|
+ .el-button{
|
|
|
+ position: relative;
|
|
|
+ color: #fff;
|
|
|
+ border: 0px;
|
|
|
+ padding-right: 40px;
|
|
|
+ .el-icon-close{
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;right: 5px;
|
|
|
+ }
|
|
|
+ .icon_span{
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button+.el-button{
|
|
|
+ margin-left: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main_bottom{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addItions_en{
|
|
|
+ .el-form-item__label{
|
|
|
+ line-height:20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|