Merge branch 'superman' of http://git.shengws.com/zhangbj/xt_vue into superman

src/views/layout/Layout.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="app-wrapper" :class="classObj">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
-      <navbar></navbar>
+    <navbar></navbar>
 
     <div class="Header-container">
-    <sidebar class="sidebar-container"></sidebar>
-    <div class="main-container">
-      <tags-view></tags-view>
-      <app-main></app-main>
+      <sidebar class="sidebar-container"></sidebar>
+      <div class="main-container">
+        <tags-view></tags-view>
+        <app-main></app-main>
+      </div>
     </div>
-   </div>
   </div>
 </template>
 
 <script>
-import { Navbar, Sidebar, AppMain, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
+import { Navbar, Sidebar, AppMain, TagsView } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
 
 export default {
-  name: 'layout',
+  name: "layout",
   components: {
     Navbar,
     Sidebar,
@@ -28,47 +28,47 @@ export default {
   mixins: [ResizeMixin],
   computed: {
     sidebar() {
-      return this.$store.state.app.sidebar
+      return this.$store.state.app.sidebar;
     },
     device() {
-      return this.$store.state.app.device
+      return this.$store.state.app.device;
     },
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
+        mobile: this.device === "mobile"
+      };
     }
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch("closeSideBar", { withoutAnimation: false });
     }
   }
-}
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    // position: relative;
-    height: 100%;
-    width: 100%;
-    // &.mobile.openSidebar{
-    //   position: fixed;
-    //   top: 0;
-    // }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
+@import "src/styles/mixin.scss";
+.app-wrapper {
+  @include clearfix;
+  // position: relative;
+  height: 100%;
+  width: 100%;
+  // &.mobile.openSidebar{
+  //   position: fixed;
+  //   top: 0;
+  // }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 </style>

src/xt_pages/management/components/ManageForm.vue

@@ -761,7 +761,7 @@ export default {
               this.$emit("getAllMachineInfo");
               this.$forceUpdate();
             } else {
-              this.$message.error("添加失败");
+              this.$message.error("该机位号已绑定设备,添加失败");
             }
           });
         }

src/xt_pages/management/components/MultipleForm.vue

@@ -6,11 +6,11 @@
       width="95%"
       center
     >
-      <el-form style="height:100%">
+      <el-form style="height: 100%;">
         <el-row :gutter="20">
           <el-col :span="4">
             <el-form-item label="透析分区:">
-              <el-select style="width:110px" v-model="form.zone">
+              <el-select style="width: 110px;" v-model="form.zone">
                 <el-option
                   v-for="item in this.DeviceType"
                   :key="item.id"
@@ -22,7 +22,7 @@
           </el-col>
           <el-col :span="4">
             <el-form-item label="机号:">
-              <el-select style="width:110px" v-model="form.device_number">
+              <el-select style="width: 110px;" v-model="form.device_number">
                 <el-option
                   v-for="item in this.Numbers"
                   :key="item.id"
@@ -34,7 +34,7 @@
           </el-col>
           <el-col :span="4">
             <el-form-item label="设备类型:">
-              <el-select style="width:110px" v-model="form.device_type">
+              <el-select style="width: 110px;" v-model="form.device_type">
                 <el-option
                   v-for="item in this.EquitmentType"
                   :key="item.id"
@@ -46,7 +46,7 @@
           </el-col>
           <el-col :span="4">
             <el-form-item label="设备型号:">
-              <el-select style="width:110px" v-model="form.device_model">
+              <el-select style="width: 110px;" v-model="form.device_model">
                 <el-option
                   v-for="item in this.EquitmentName"
                   :key="item.id"
@@ -58,7 +58,7 @@
           </el-col>
           <el-col :span="4">
             <el-form-item label="使用年限:">
-              <el-select style="width:110px" v-model="form.user_year">
+              <el-select style="width: 110px;" v-model="form.user_year">
                 <el-option
                   v-for="item in this.userYear"
                   :key="item.id"
@@ -122,12 +122,12 @@
         <el-table
           :data="tableData"
           border
-          style="width:100%"
-          height="80%"
+          style="width: 100%;"
+          height="330"
           :row-style="{ color: '#303133' }"
           :header-cell-style="{
             backgroundColor: 'rgb(245, 247, 250)',
-            color: '#606266'
+            color: '#606266',
           }"
         >
           <el-table-column
@@ -286,13 +286,13 @@ import {
   getAllSubregion,
   getAllEquimentName,
   getComprehensive,
-  getTotalCount
-} from '@/api/manage'
-import { uParseTime } from '@/utils/tools'
+  getTotalCount,
+} from "@/api/manage";
+import { uParseTime } from "@/utils/tools";
 export default {
-  name: 'MultipleForm',
+  name: "MultipleForm",
   props: {
-    equimentid: Number
+    equimentid: Number,
   },
   data() {
     return {
@@ -300,77 +300,77 @@ export default {
       failure: 0,
       dialogVisible: false,
       form: {
-        zone: '',
-        device_number: '',
-        device_type: '',
-        device_model: '',
-        user_year: '',
-        start_time: '',
-        end_time: ''
+        zone: "",
+        device_number: "",
+        device_type: "",
+        device_model: "",
+        user_year: "",
+        start_time: "",
+        end_time: "",
       },
       userYear: [
-        { id: 0, name: '全部' },
-        { id: 1, name: '0~1' },
-        { id: 2, name: '1~3' },
-        { id: 3, name: '3~10' },
-        { id: 4, name: '10年以上' }
+        { id: 0, name: "全部" },
+        { id: 1, name: "0~1" },
+        { id: 2, name: "1~3" },
+        { id: 3, name: "3~10" },
+        { id: 4, name: "10年以上" },
       ],
-      value1: '',
-      value2: '',
+      value1: "",
+      value2: "",
       tableData: [],
       EquitmentType: [
-        { id: 0, name: '全部' },
-        { id: 1, name: '透析机' },
-        { id: 2, name: '水处理机' },
-        { id: 3, name: '报废机' },
-        { id: 4, name: '其他' }
+        { id: 0, name: "全部" },
+        { id: 1, name: "透析机" },
+        { id: 2, name: "水处理机" },
+        { id: 3, name: "报废机" },
+        { id: 4, name: "其他" },
       ],
-      DeviceType: [{ id: 0, name: '不限' }],
-      Numbers: [{ id: 0, number: '不限' }],
-      EquitmentName: [{ id: 0, equitment_name: '全部' }],
+      DeviceType: [{ id: 0, name: "不限" }],
+      Numbers: [{ id: 0, number: "不限" }],
+      EquitmentName: [{ id: 0, equitment_name: "全部" }],
       runOptions: [
-        { value: '1', label: '正常' },
-        { value: '2', label: '故障' }
-      ]
-    }
+        { value: "1", label: "正常" },
+        { value: "2", label: "故障" },
+      ],
+    };
   },
   methods: {
-    open: function() {
-      this.dialogVisible = true
+    open: function () {
+      this.dialogVisible = true;
     },
     getAllSubregion() {
-      getAllSubregion().then(response => {
+      getAllSubregion().then((response) => {
         if (response.data.state === 1) {
-          var zone = response.data.data.zones
-          var zones = [{ id: 0, name: '不限' }]
+          var zone = response.data.data.zones;
+          var zones = [{ id: 0, name: "不限" }];
           for (let i = 0; i < zone.length; i++) {
-            const item = zone[i]
-            zones.push({ id: item.id, name: item.name })
+            const item = zone[i];
+            zones.push({ id: item.id, name: item.name });
           }
-          this.DeviceType = zones
-          var number = response.data.data.numbers
-          var numbers = [{ id: 0, number: '不限' }]
+          this.DeviceType = zones;
+          var number = response.data.data.numbers;
+          var numbers = [{ id: 0, number: "不限" }];
           for (let index = 0; index < number.length; index++) {
-            const item = number[index]
-            numbers.push({ id: item.id, number: item.number })
+            const item = number[index];
+            numbers.push({ id: item.id, number: item.number });
           }
-          this.Numbers = numbers
+          this.Numbers = numbers;
           // console.log('numbers', number)
         }
-      })
+      });
     },
     getAllEquimentName() {
-      getAllEquimentName().then(response => {
+      getAllEquimentName().then((response) => {
         if (response.data.state == 1) {
-          var equit = response.data.data.equit
-          var equits = [{ id: 0, equitment_name: '全部' }]
+          var equit = response.data.data.equit;
+          var equits = [{ id: 0, equitment_name: "全部" }];
           for (let index = 0; index < equit.length; index++) {
-            const item = equit[index]
-            equits.push({ id: item.id, equitment_name: item.equitment_name })
+            const item = equit[index];
+            equits.push({ id: item.id, equitment_name: item.equitment_name });
           }
-          this.EquitmentName = equits
+          this.EquitmentName = equits;
         }
-      })
+      });
     },
     getComprehensive() {
       const params = {
@@ -379,67 +379,67 @@ export default {
         devicetype: this.form.device_type,
         year: this.form.user_year,
         starttime: this.form.start_time,
-        endtime: this.form.end_time
-      }
-      getComprehensive(params).then(response => {
+        endtime: this.form.end_time,
+      };
+      getComprehensive(params).then((response) => {
         if (response.data.state === 1) {
-          var macher = response.data.data.macher
-        
+          var macher = response.data.data.macher;
+
           for (let index = 0; index < macher.length; index++) {
             if (macher[index].device_type === 1) {
-              macher[index].device_type = '透析机'
+              macher[index].device_type = "透析机";
             }
             if (macher[index].device_type === 2) {
-              macher[index].device_type = '水处理机'
+              macher[index].device_type = "水处理机";
             }
             if (macher[index].device_type === 3) {
-              macher[index].device_type = '其他'
+              macher[index].device_type = "其他";
             }
 
             if (macher[index].machine_status === 1) {
-              macher[index].machine_status = '使用机'
+              macher[index].machine_status = "使用机";
             }
             if (macher[index].machine_status === 2) {
-              macher[index].machine_status = '备用机'
+              macher[index].machine_status = "备用机";
             }
             if (macher[index].machine_status === 3) {
-              macher[index].machine_status = '急诊机'
+              macher[index].machine_status = "急诊机";
             }
             if (macher[index].machine_status === 4) {
-              macher[index].machine_status = '报废机'
+              macher[index].machine_status = "报废机";
             }
             if (macher[index].rubbish_reason === 0) {
-              macher[index].rubbish_reason = ''
+              macher[index].rubbish_reason = "";
             }
           }
           // console.log('macher', macher)
-          this.tableData = macher
+          this.tableData = macher;
         }
-      })
+      });
     },
     getTime(time) {
       if (time === 0) {
-        return ''
+        return "";
       } else {
-        return uParseTime(time, '{y}-{m}-{d}')
+        return uParseTime(time, "{y}-{m}-{d}");
       }
     },
     getTotalCount() {
-      getTotalCount().then(response => {
+      getTotalCount().then((response) => {
         if (response.data.state === 1) {
-          var total = response.data.data.total
-     
-          this.failure_times = total
+          var total = response.data.data.total;
+
+          this.failure_times = total;
         }
-      })
-    }
+      });
+    },
   },
   created() {
-    this.getAllSubregion()
-    this.getAllEquimentName()
-    this.getTotalCount()
-  }
-}
+    this.getAllSubregion();
+    this.getAllEquimentName();
+    this.getTotalCount();
+  },
+};
 </script>
 
 <style scoped></style>

src/xt_pages/management/components/UserForm.vue

@@ -1153,7 +1153,8 @@ export default {
         germ_number: "", // 数量
         clean: "", // 清洁
         sign_name: "", // 签名
-        patient_id: ""
+        patient_id: "",
+        equiment_id: ""
       },
       hiddenShow: false,
       searchArray: [],
@@ -1474,7 +1475,7 @@ export default {
       EditUser(id, patientid).then(response => {
         if (response.data.state === 1) {
           var device = response.data.data.device;
-          // console.log('device', device)
+          console.log("device", device);
           var patients = response.data.data.patients;
           // console.log('patients', patients)
           // eslint-disable-next-line no-sequences
@@ -1485,7 +1486,7 @@ export default {
             ));
           this.userform.patient_id = device.patient_id;
           this.userform.classtype = device.class;
-          this.userform.zone = device.zone;
+          this.userform.zone = device.zone_id;
           this.userform.bed_number = device.bed_number;
           this.userform.contagion = device.contagion;
           this.userform.patient_name = patients.name;
@@ -1531,6 +1532,7 @@ export default {
           // )
           this.userform.starttime = this.updateTimes(device.disinfec_startime);
           this.userform.endtime = this.updateTimes(device.disinfec_endtime);
+          this.userform.equiment_id = device.equiment_id;
           if (device.dialysis_checked === 1) {
             this.userform.dialysis_checked = true;
           }
@@ -2240,10 +2242,11 @@ export default {
       getBedForm(id).then(response => {
         if (response.data.state === 1) {
           var addmacher = response.data.data.addmacher;
-          // console.log('addmacher=============', addmacher)
+          console.log("addmacher=============", addmacher);
           var number = response.data.data.number;
-          // console.log('number', number)
-          this.form.zone = addmacher.zone_id;
+          console.log("number", number);
+          //改动
+          this.form.zone = number[0].zone_id;
           this.form.bed = addmacher.bed_id;
 
           var bed = [{ id: 0, number: "全部" }];
@@ -2357,6 +2360,7 @@ export default {
   },
   watch: {
     userdata(newvalue, oldvalue) {
+      console.log("newvalue是什么", newvalue);
       this.getUserForm(newvalue);
       this.getBedForm(newvalue);
     }

src/xt_pages/management/home.vue

@@ -2666,6 +2666,17 @@ export default {
           if (response.data.state === 1) {
             var addmahcer = response.data.data.addmahcer
             console.log('查找的数据', addmahcer)
+            for(let j=0;j<addmahcer.length;j++){
+              if(addmahcer[j].device_type == 1){
+                 addmahcer[j].bed_number = addmahcer[j].number
+              }
+              if(addmahcer[j].device_type == 2){
+                 addmahcer[j].bed_number = addmahcer[j].bed_number
+              }
+               if(addmahcer[j].device_type == 3){
+                 addmahcer[j].bed_number = addmahcer[j].bed_number
+              }
+            }
             this.tableDatatwo = addmahcer
             this.tabIndex = this.$route.query.index
             var id = this.$route.query.id
@@ -2674,6 +2685,7 @@ export default {
                 this.$refs.singleTable.setCurrentRow(this.tableDatatwo[i])
                 break
               }
+              
             }
             // this.$refs.singleTable.setCurrentRow(this.tableDatatwo[this.tabIndex])
           }
@@ -3001,6 +3013,8 @@ export default {
               // this.getAllSubregion()
               this.$refs.singleTable.setCurrentRow(addmacher)
               this.$forceUpdate()
+            }else{
+             this.$message.error("修改失败");
             }
           })
         })
@@ -3437,7 +3451,7 @@ export default {
             this.machineform.machine_disinfectant = plan.machine_disinfectant
             this.machineform.disinfectant_way = plan.disinfectan_way
             this.machineform.disinfectant = plan.disinfectant
-            this.getPatientDetail(this.unitType, this.$route.query.bedid)
+           // this.getPatientDetail(this.unitType, this.$route.query.bedid)
           }
         })
       },
@@ -3862,7 +3876,7 @@ export default {
         getUserRegister(id).then(response => {
           if (response.data.state === 1) {
             var information = response.data.data.information
-            // console.log('产讯使用登记', information)
+             console.log('产讯使用登记', information)
             // eslint-disable-next-line no-unused-vars
             var role = response.data.data.role
             // console.log('role', role)
@@ -3924,7 +3938,7 @@ export default {
             this.userform.machine_run = information.machine_run
             this.userform.fluid_path = information.fluid_path
             this.userform.disinfectant = information.disinfectant
-            this.userform.disinfectant = information.disinfection_status
+            this.userform.disinfection_status = information.disinfection_status
             this.userform.disinfection_residue = information.disinfection_residue
             this.userform.longtime = information.long_time
             this.userform.starttime = this.updateTimes(information.disinfec_startime)

src/xt_pages/management/index.vue

@@ -255,16 +255,20 @@ export default {
       ).then(response => {
         if (response.data.state === 1) {
           var addmahcer = response.data.data.addmahcer;
+          console.log("addmacher", addmahcer);
           for (let index = 0; index < addmahcer.length; index++) {
             if (addmahcer[index].device_type === 1) {
               addmahcer[index].device_type = "透析机";
+              addmahcer[index].bed_number = addmahcer[index].number;
             }
             if (addmahcer[index].device_type === 2) {
               addmahcer[index].device_type = "水处理机";
+              addmahcer[index].bed_number = addmahcer[index].bed_number;
             }
 
             if (addmahcer[index].device_type === 3) {
               addmahcer[index].device_type = "其他";
+              addmahcer[index].bed_number = addmahcer[index].bed_number;
             }
 
             if (addmahcer[index].machine_status === 1) {

src/xt_pages/role/components/EditRole.vue

@@ -1,113 +1,292 @@
 <template>
-    <el-dialog title='新增角色' width="600px" :visible.sync="visible" :before-close="_close">
-        <el-form :model="form" :rules="rules" ref="form" label-width="90px">
+  <el-dialog title="新增用户" width="660px" :visible.sync="visible" :before-close="_close">
+    <!-- <el-form :model="form" :rules="rules" ref="form" label-width="90px">
             <el-form-item label="角色名称 : " prop="name">
                 <el-input v-model="form.name" placeholder="" maxlength="30" ></el-input>
             </el-form-item>
             <el-form-item label="角色描述 : " prop="intro">
                 <el-input type="textarea" v-model="form.intro" placeholder="" resize="none" rows="4" ></el-input>
             </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button @click="hide">取 消</el-button>
-            <el-button type="primary" @click="submitAction()">保 存</el-button>
+    </el-form>-->
+    <div class="chooseuser">
+      <span style="color:#303133">选择用户：</span>
+      <el-radio v-model="checked" label="1">从已有员工中选择</el-radio>
+      <el-radio v-model="checked" label="2">新增员工</el-radio>
+    </div>
+    <div v-if="checked == '1'" class="roleContent">
+      <div class="roleContentLeft">
+        <p style="color:#303133">选择：</p>
+        <div class="chooseBox">
+          <div>
+            <el-checkbox
+              :indeterminate="isIndeterminate"
+              v-model="checkAll"
+              @change="handleCheckAllChange"
+            >全选</el-checkbox>
+          </div>
+          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+            <!-- <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> -->
+            <div class="checkone" v-for="city in cities" :key="city">
+              <el-checkbox :label="city">
+                <img src="https://kuyi.shengws.com/S1.png" alt />
+                <span>名字</span>
+              </el-checkbox>
+            </div>
+          </el-checkbox-group>
         </div>
-    </el-dialog>
+      </div>
+      <div class="roleContentRight">
+        <p style="color:#303133">已选：</p>
+        <div class="chooseBox">
+          <div class="hasChoosedOne">
+            <img src="https://kuyi.shengws.com/S1.png" alt />
+            <span>名字</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="checked == '2'" class="newStaff">
+      <el-form
+        :model="ruleForm"
+        :rules="newrules"
+        label-position="right"
+        label-width="80px"
+        style="width:40%"
+      >
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="ruleForm.name"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="ruleForm.phone"></el-input>
+        </el-form-item>
+        <el-form-item label="职位">
+          <el-input></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="newItem">
+        <p style="width:80px;text-align:right;padding-right:8px">
+          <i class="el-icon-circle-plus" style="font-size:20px;color:#338AFB"></i>
+        </p>
+        <p style="color:#409FFF">继续新增员工</p>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="hide">取 消</el-button>
+      <el-button type="primary" @click="submitAction()">保 存</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-import {addRole, modifyRole} from '@/api/role/role'
+import { addRole, modifyRole } from "@/api/role/role";
 
 export default {
-    name: 'EditRole',
-    data() {
-        return {
-            form: {
-                id: 0,
-                name: '',
-                intro: ''
-            },
-            'visible': false,
-            rules: {
-                name: [
-                    {required: true, message: '请输入角色名称', trigger: 'blur'},
-                    {max: 10, message: '10个字以内', trigger: 'blur'}
-                ],
-                intro: [
-                    {required: true, message: '请输入角色说明', trigger: 'blur'},
-                ]
-            }
-        }
+  name: "EditRole",
+  data() {
+    return {
+      form: {
+        id: 0,
+        name: "",
+        intro: ""
+      },
+      visible: false,
+      rules: {
+        name: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+          { max: 10, message: "10个字以内", trigger: "blur" }
+        ],
+        intro: [{ required: true, message: "请输入角色说明", trigger: "blur" }]
+      },
+
+      //
+      checked: "1",
+      checkAll: false,
+      checkedCities: [],
+      cities: ["上海", "北京", "广州", "深圳"],
+      isIndeterminate: true,
+      ruleForm: {
+        name: "",
+        phone: "",
+        position: ""
+      },
+      newrules: {
+        name: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+          { max: 10, message: "10个字以内", trigger: "blur" }
+        ],
+        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }]
+      }
+    };
+  },
+  methods: {
+    _close: function(done) {
+      this.clear();
+      done();
+    },
+    clear: function() {
+      this.form.id = 0;
+      this.form.name = "";
+      this.form.intro = "";
+    },
+    show() {
+      this.clear();
+      this.visible = true;
+    },
+    hide() {
+      this.clear();
+      this.visible = false;
     },
-    methods: {
-        _close: function(done) {
-            this.clear()
-            done()
-        },
-        clear: function() {
-            this.form.id = 0
-            this.form.name = ''
-            this.form.intro = ''
-        },
-        show() {
-            this.clear()
-            this.visible = true
-        },
-        hide() {
-            this.clear()
-            this.visible = false
-        },
-        modify(id, name, intro) {
-            this.form.id = id
-            this.form.name = name
-            this.form.intro = intro
-            this.visible = true
-        },
-        submitAction() {
-            this.$refs.form.validate((valid) => {
-                if (valid) { // 验证通过
-                    if (this.form.id === 0) { // 新增 role
-                        addRole(this.form.name, this.form.intro).then(rs => {
-                            var resp = rs.data
-                            if (resp.state === 1) {
-                                var new_id = resp.data.id
-                                var new_name = resp.data.name
-                                var new_intro = resp.data.intro
-                                var new_status = resp.data.status
-                                this.$emit('did-add-role', new_id, new_name, new_intro, new_status)
+    modify(id, name, intro) {
+      this.form.id = id;
+      this.form.name = name;
+      this.form.intro = intro;
+      this.visible = true;
+    },
+    submitAction() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          // 验证通过
+          if (this.form.id === 0) {
+            // 新增 role
+            addRole(this.form.name, this.form.intro)
+              .then(rs => {
+                var resp = rs.data;
+                if (resp.state === 1) {
+                  var new_id = resp.data.id;
+                  var new_name = resp.data.name;
+                  var new_intro = resp.data.intro;
+                  var new_status = resp.data.status;
+                  this.$emit(
+                    "did-add-role",
+                    new_id,
+                    new_name,
+                    new_intro,
+                    new_status
+                  );
 
-                                this.hide()
-                                
-                            } else {
-                                this.$message.error(resp.msg)
-                            }
-                            
-                        }).catch(err => {
-                            this.$message.error(err)
-                        })
-                        
-                    } else { // 修改 role
-                        modifyRole(this.form.id, this.form.name, this.form.intro).then(rs => {
-                            var resp = rs.data
-                            if (resp.state === 1) {
-                                this.$emit('did-edit-role', this.form.id, this.form.name, this.form.intro)
-                                this.hide()
-                                
-                            } else {
-                                this.$message.error(resp.msg)
-                            }
-                            
-                        }).catch(err => {
-                            this.$message.error(err)
-                        })
-                    }
-                    
-                } else { // 验证失败
-                    return false
+                  this.hide();
+                } else {
+                  this.$message.error(resp.msg);
+                }
+              })
+              .catch(err => {
+                this.$message.error(err);
+              });
+          } else {
+            // 修改 role
+            modifyRole(this.form.id, this.form.name, this.form.intro)
+              .then(rs => {
+                var resp = rs.data;
+                if (resp.state === 1) {
+                  this.$emit(
+                    "did-edit-role",
+                    this.form.id,
+                    this.form.name,
+                    this.form.intro
+                  );
+                  this.hide();
+                } else {
+                  this.$message.error(resp.msg);
                 }
-            })
+              })
+              .catch(err => {
+                this.$message.error(err);
+              });
+          }
+        } else {
+          // 验证失败
+          return false;
         }
+      });
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
     }
-}
+  }
+};
 </script>
 
+
+
+<style lang="scss" scoped>
+.roleContent {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  .roleContentLeft {
+    .chooseBox {
+      width: 280px;
+      height: 320px;
+      overflow-y: auto;
+      border: 1px solid rgba(235, 238, 240, 1);
+      margin-top: 26px;
+      padding: 20px;
+      .checkone {
+        display: flex;
+        align-items: center;
+        height: 50px;
+      }
+      .el-checkbox__label {
+        display: flex;
+        align-items: center;
+        img {
+          width: 30px;
+          height: 30px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .roleContentRight {
+    .chooseBox {
+      width: 280px;
+      height: 320px;
+      overflow-y: auto;
+      border: 1px solid rgba(235, 238, 240, 1);
+      margin-top: 26px;
+      padding: 20px;
+      .hasChoosedOne {
+        display: flex;
+        align-items: center;
+        height: 50px;
+        img {
+          width: 30px;
+          height: 30px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+.newStaff {
+  margin-top: 26px;
+  .newItem {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
+
+<style lang="scss">
+.roleContent {
+  .roleContentLeft {
+    .chooseBox {
+      .el-checkbox {
+        display: flex;
+        align-items: center;
+      }
+      .el-checkbox__label {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

src/xt_pages/role/components/PermissionSettings.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-dialog class="settingDialog" title="角色权限配置" width="750px" :visible.sync="visible">
+    <div class="roleSettings">
+      <div class="roleName">
+        <div class="roleNameLeft">
+          <p>角色名称</p>
+          <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
+        </div>
+        <p style="color:#338AFB">删除该角色</p>
+      </div>
+      <div class="roleMain">
+        <div class="roleMainLeft">
+          <p class="roletitle">选择权限</p>
+          <div class="roleMainLeftBox">
+            <el-tree
+              :props="defaultProps"
+              :data="data"
+              :default-checked-keys="data"
+              node-key="id"
+              ref="tree"
+              default-expand-all
+              show-checkbox
+            >
+              <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
+                                <span>{{ data.name }}</span>
+              </span>-->
+            </el-tree>
+          </div>
+        </div>
+        <div class="roleMainRight">
+          <div class="hasChoose">已选择权限</div>
+          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      data: [
+        {
+          id: 1,
+          label: "一级 2",
+          children: [
+            {
+              id: 3,
+              label: "二级 2-1",
+              children: [
+                {
+                  id: 4,
+                  label: "三级 3-1-1"
+                },
+                {
+                  id: 5,
+                  label: "三级 3-1-2"
+                }
+              ]
+            },
+            {
+              id: 2,
+              label: "二级 2-2",
+              children: [
+                {
+                  id: 6,
+                  label: "三级 3-2-1"
+                },
+                {
+                  id: 7,
+                  label: "三级 3-2-2"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label"
+      }
+    };
+  },
+  methods: {
+    show() {
+      this.visible = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.roleSettings {
+  .roleName {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .roleNameLeft {
+    display: flex;
+    align-items: center;
+    p {
+      width: 100px;
+    }
+  }
+  .roleMain {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 18px;
+    .roleMainLeft {
+      display: flex;
+      .roletitle {
+        width: 74px;
+      }
+      .roleMainLeftBox {
+        width: 300px;
+        height: 706px;
+        overflow-y: auto;
+        border: 1px solid rgba(234, 238, 240, 1);
+        border-radius: 4px;
+        padding: 20px 0 0 10px;
+      }
+    }
+    .roleMainRight {
+      width: 280px;
+      height: 706px;
+      overflow-y: auto;
+      border: 1px solid rgba(235, 238, 240, 1);
+      color: #303133;
+      .hasChoose {
+        height: 42px;
+        line-height: 42px;
+        padding-left: 20px;
+        background: #f6f8f9;
+      }
+    }
+  }
+}
+</style>
+
+
+<style lang="scss">
+.settingDialog {
+  .el-dialog__body {
+    max-height: 600px !important;
+  }
+}
+</style>

src/xt_pages/role/role.vue

@@ -8,11 +8,10 @@
         icon="el-icon-circle-plus"
         style="float:right;"
         @click="addRoleAction"
-        >新增</el-button
-      >
+      >新增</el-button>
     </div>
     <div class="app-container">
-      <el-table
+      <!-- <el-table
         :data="roles"
         v-loading="loading_roles"
         border
@@ -22,24 +21,11 @@
           color: '#606266'
         }"
       >
-        <el-table-column
-          label="角色名称"
-          prop="name"
-          min-width="20%"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          label="角色描述"
-          prop="intro"
-          min-width="25%"
-          align="center"
-        ></el-table-column>
+        <el-table-column label="角色名称" prop="name" min-width="20%" align="center"></el-table-column>
+        <el-table-column label="角色描述" prop="intro" min-width="25%" align="center"></el-table-column>
         <el-table-column label="状态" min-width="15%" align="center">
           <template slot-scope="scope">
-            <div
-              v-if="scope.row.status == 1"
-              style="color: #67C23A; font-size:20px;"
-            >
+            <div v-if="scope.row.status == 1" style="color: #67C23A; font-size:20px;">
               <li class="el-icon-success"></li>
             </div>
             <div v-else style="color: #F56C6C; font-size:20px;">
@@ -49,28 +35,12 @@
         </el-table-column>
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
-            <router-link
-              :to="{ path: '/role/perview', query: { id: scope.row.id } }"
-            >
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="权限设置"
-                placement="top"
-              >
-                <el-button
-                  type="warning"
-                  icon="el-icon-setting"
-                  size="small"
-                ></el-button>
+            <router-link :to="{ path: '/role/perview', query: { id: scope.row.id } }">
+              <el-tooltip class="item" effect="dark" content="权限设置" placement="top">
+                <el-button type="warning" icon="el-icon-setting" size="small"></el-button>
               </el-tooltip>
             </router-link>
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="编辑"
-              placement="top"
-            >
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
               <el-button
                 type="primary"
                 size="small"
@@ -79,12 +49,7 @@
               ></el-button>
             </el-tooltip>
 
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="移除"
-              placement="top"
-            >
+            <el-tooltip class="item" effect="dark" content="移除" placement="top">
               <el-button
                 type="danger"
                 size="small"
@@ -94,12 +59,7 @@
               ></el-button>
             </el-tooltip>
 
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="恢复"
-              placement="top"
-            >
+            <el-tooltip class="item" effect="dark" content="恢复" placement="top">
               <el-button
                 type="info"
                 size="small"
@@ -122,26 +82,160 @@
             layout="total, prev, pager, next, jumper"
           ></el-pagination>
         </el-col>
-      </el-row>
+      </el-row>-->
 
-      <edit-role
-        ref="edit_role"
-        @did-add-role="didAddRole"
-        @did-edit-role="didModifyRole"
-      ></edit-role>
+      <edit-role ref="edit_role" @did-add-role="didAddRole" @did-edit-role="didModifyRole"></edit-role>
+      <permission-settings ref="permission_settings"></permission-settings>
+      <div class="roleBox">
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px" @click="onClick">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc1.png" alt />
+            <p class="avatarname">子管理员</p>
+          </div>
+          <div class="roleTip">子管理员角色具备平台全部功能的使用权限,请谨慎配置...</div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc2.png" alt />
+            <p class="avatarname">医生</p>
+          </div>
+          <div class="roleTip">医生角色能够进行建立患者档案，制定和调整患者透析治疗方案，定期评价病人的透析质量等...</div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc3.png" alt />
+            <p class="avatarname">护士</p>
+          </div>
+          <div class="roleTip">护士角色能够进行病人透析管理，以及医院的感染控制与消毒记录等...</div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc2.png" alt />
+            <p class="avatarname">技师</p>
+          </div>
+          <div class="roleTip">技师角色能够进行设备的管理，日常维护维修记录等...</div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc2.png" alt />
+            <p class="avatarname">运营</p>
+          </div>
+          <div class="roleTip">运营角色能够在SCRM中管理微网站、使用营销工具、做会员管理和分销商品经营的操作...</div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc4.png" alt />
+            <p class="avatarname">库存</p>
+          </div>
+          <div class="roleTip">库存角色负责透析耗材的日常管理，对耗材的入库、出库、退库的登记操作...</div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+        <div class="roleOne">
+          <div class="setting">
+            <i class="el-icon-setting"></i>
+            <span style="margin-right:20px">权限配置</span>
+          </div>
+          <div class="avatar">
+            <img src="../../assets/img/pc5.png" alt />
+            <p class="avatarname">院长</p>
+          </div>
+          <div class="roleTip">院长角色了解血透患者血液透析质量和相关的大数据，以及掌握透析中心整体运营情况</div>
+          <div class="roleTxt">
+            该角色目前已配置
+            <span style="color:#4A8AF3">0</span> 个员工
+          </div>
+          <div class="btnBox">
+            <el-button>新增用户</el-button>
+            <el-button>用户管理</el-button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import EditRole from "./components/EditRole.vue";
+import PermissionSettings from "./components/PermissionSettings.vue";
 import { getRoles, setRoleStatus } from "@/api/role/role";
 import BreadCrumb from "@/xt_pages/components/bread-crumb";
 
 export default {
   components: {
     EditRole,
-    BreadCrumb
+    BreadCrumb,
+    PermissionSettings
   },
   data: function() {
     return {
@@ -259,6 +353,11 @@ export default {
     },
     pageChange: function(nextPage) {
       this.requestRoleWithPage(nextPage);
+    },
+    ///
+
+    onClick() {
+      this.$refs.permission_settings.show();
     }
   }
 };
@@ -267,6 +366,60 @@ export default {
 .el-button + .el-button {
   margin-left: 0 !important;
 }
+.roleBox {
+  display: flex;
+  flex-wrap: wrap;
+  .roleOne {
+    width: 280px;
+    height: 350px;
+    margin: 0 15px 20px;
+    border: 1px solid rgba(235, 238, 240, 1);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .setting {
+    // float: right;
+    text-align: right;
+    margin-right: 20px;
+    margin-top: 20px;
+    width: 100%;
+    color: #313234;
+  }
+  .avatar {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
+    img {
+      width: 60px;
+      height: 60px;
+      margin: 10px 0;
+    }
+    .avatarname {
+      font-size: 18px;
+    }
+  }
+  .roleTip {
+    width: 82%;
+    margin: 20px auto 10px;
+    font-size: 14px;
+    color: #989898;
+  }
+  .roleTxt {
+    width: 82%;
+    margin: 0 auto;
+    font-size: 14px;
+    color: #666666;
+  }
+  .btnBox {
+    width: 82%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 50px;
+  }
+}
 </style>
 <style>
 .el-table td,