From 51c9af63b7cd842a388808912c8e68540142d97f Mon Sep 17 00:00:00 2001
From: duan <duanduanduan.com>
Date: Fri, 5 Aug 2022 18:41:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(src/views/user):=20=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/user.js                 |  62 ++++++--
 src/components/UserForm/index.vue    |   6 +-
 src/router/modules/reagent.js        |  15 +-
 src/styles/sidebar.scss              |   6 +-
 src/views/reagent/database/index.vue | 187 ++++++++++++++++++++++-
 src/views/user/index.vue             | 156 +++++++++++++++----
 src/views/user/role/index.vue        | 221 ++++++++++++++++++++-------
 7 files changed, 549 insertions(+), 104 deletions(-)

diff --git a/src/api/user/user.js b/src/api/user/user.js
index bbbe791..b7ad691 100644
--- a/src/api/user/user.js
+++ b/src/api/user/user.js
@@ -34,15 +34,6 @@ export function user_power(data) {
   })
 }
 
-//  /api/power/user_power
-export function get_module_list(data) {
-  return request({
-    url: '/api/power/get_module_list',
-    method: 'post',
-    data
-  })
-}
-
 // /api/user/update
 export function update(data) {
   return request({
@@ -70,6 +61,59 @@ export function get_role_list(data) {
   })
 }
 
+// /api/power/get_module_list
+export function get_module_list(data) {
+  return request({
+    url: '/api/power/get_module_list',
+    method: 'post',
+    data
+  })
+}
+
+//  /api/power/add_update_role
+export function add_update_role(data) {
+  return request({
+    url: '/api/power/add_update_role',
+    method: 'post',
+    data
+  })
+}
+
+// /api/power/get_role_module
+export function get_role_module(data) {
+  return request({
+    url: '/api/power/get_role_module',
+    method: 'post',
+    data
+  })
+}
+
+// /api/power/get_user_power_list
+export function get_user_power_list(data) {
+  return request({
+    url: '/api/power/get_user_power_list',
+    method: 'post',
+    data
+  })
+}
+
+//  /api/power/add_user_power
+export function add_user_power(data) {
+  return request({
+    url: '/api/power/add_user_power',
+    method: 'post',
+    data
+  })
+}
+
+// /api/power/get_role_name_list
+export function get_role_name_list(data) {
+  return request({
+    url: '/api/power/get_role_name_list',
+    method: 'post',
+    data
+  })
+}
 // export function getInfo(token) {
 //   return request({
 //     url: '/vue-admin-template/user/info',
diff --git a/src/components/UserForm/index.vue b/src/components/UserForm/index.vue
index 7643eb1..924ef01 100644
--- a/src/components/UserForm/index.vue
+++ b/src/components/UserForm/index.vue
@@ -45,9 +45,9 @@
             <el-select v-model="formData.role_id" placeholder="请选择角色" clearable :style="{width: '100%'}">
               <el-option
                 v-for="item in roledata"
-                :key="item.module_id"
-                :label="item.module_name"
-                :value="item.module_id"
+                :key="item.role_id"
+                :label="item.role_name"
+                :value="item.role_id"
               />
             </el-select>
           </el-form-item>
diff --git a/src/router/modules/reagent.js b/src/router/modules/reagent.js
index 0b39a2e..822d39e 100644
--- a/src/router/modules/reagent.js
+++ b/src/router/modules/reagent.js
@@ -157,13 +157,20 @@ const reagentRouter = [
   {
     path: '/reagent/database',
     component: Layout,
-    meta: { classification: 'reagent' },
+    redirect: '/reagent/database/msds',
+    meta: { title: '化学品数据库', icon: '化学品数据库', classification: 'reagent' },
     children: [
       {
-        path: 'index',
-        name: 'Database',
+        path: 'msds',
+        name: 'MSDS',
+        component: () => import('@/views/reagent/database/index'),
+        meta: { title: 'MSDS数据库', classification: 'reagent' }
+      },
+      {
+        path: 'dangerous',
+        name: 'Dangerous',
         component: () => import('@/views/reagent/database/index'),
-        meta: { title: '化学品数据库', icon: '化学品数据库', classification: 'reagent' }
+        meta: { title: '危化品数据库', classification: 'reagent' }
       }
     ]
   },
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 229123f..32ae341 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -78,16 +78,16 @@
     }
 
     .is-active>.el-submenu__title {
-      color: $subMenuActiveText !important;
+      //color: $subMenuActiveText !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
+      background-color: $subMenuActiveText !important;
 
       &:hover {
-        background-color: $subMenuHover !important;
+        background-color: $menuHover !important;
       }
     }
   }
diff --git a/src/views/reagent/database/index.vue b/src/views/reagent/database/index.vue
index c104dec..0e6c235 100644
--- a/src/views/reagent/database/index.vue
+++ b/src/views/reagent/database/index.vue
@@ -1,13 +1,194 @@
 <template>
-  <h1>化学品数据库</h1>
+  <div>
+    <div v-if="show" class="main-container">
+      <div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
+      <div class="header">
+        <el-input v-model="value" placeholder="请输入内容" />
+        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+      </div>
+      <div class="kws-title">最近搜索</div>
+      <el-divider />
+      <div class="kws">
+        <span v-for="(item,index) in searchKWs" :key="index" class="kw">{{ item }}</span>
+      </div>
+      <div class="kws-title">搜索结果</div>
+      <el-divider />
+      <div class="search-item-container">
+        <div v-for="item in searchItem" :key="item.code" class="search-item" @click="handleInfo(item)">
+          <div class="search-img">
+            <img src="@/assets/3-主概览/今日入库.png">
+          </div>
+          <div class="content">
+            <div class="name">{{ item.name }}</div>
+            <div class="code">{{ item.code }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="main-container">
+      <div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
+      <div class="header">
+        <el-button @click="handleBack">返回上级</el-button>
+        <div class="title-sub">{{ currentItem.name }}</div>
+      </div>
+      <el-descriptions :column="1" border size="small">
+        <el-descriptions-item label="英文名称">kooriookami</el-descriptions-item>
+        <el-descriptions-item label="CAS码">18100000000</el-descriptions-item>
+        <el-descriptions-item label="分子式">苏州市</el-descriptions-item>
+        <el-descriptions-item label="分子量">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+        <el-descriptions-item label="物理数据">kooriookami</el-descriptions-item>
+        <el-descriptions-item label="毒理数据">18100000000</el-descriptions-item>
+        <el-descriptions-item label="用途">苏州市</el-descriptions-item>
+        <el-descriptions-item label="稳定性">kooriookami</el-descriptions-item>
+        <el-descriptions-item label="生态性">18100000000</el-descriptions-item>
+        <el-descriptions-item label="注意事项">苏州市</el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions :column="1" border size="small">
+        <el-descriptions-item label="试剂属性">kooriookami</el-descriptions-item>
+        <el-descriptions-item label="储存禁忌">18100000000</el-descriptions-item>
+        <el-descriptions-item label="储存方法">苏州市</el-descriptions-item>
+        <el-descriptions-item label="柜体储存要求">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+        <el-descriptions-item label="领用归还规定">kooriookami</el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'Database'
+  name: 'Database',
+  data() {
+    return {
+      searchItem: [
+        {
+          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
+          code: '226883-66-5'
+        },
+        {
+          name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
+          code: '145783-15-9'
+        },
+        {
+          name: '3-辛酰基硫代丙基三乙氧基硅烷',
+          code: '220727-26-4'
+        },
+        {
+          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
+          code: '226883-66-15'
+        },
+        {
+          name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
+          code: '145783-15-19'
+        },
+        {
+          name: '3-辛酰基硫代丙基三乙氧基硅烷',
+          code: '220727-26-14'
+        },
+        {
+          name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
+          code: '226883-66-25'
+        },
+        {
+          name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
+          code: '145783-15-29'
+        },
+        {
+          name: '3-辛酰基硫代丙基三乙氧基硅烷',
+          code: '220727-26-24'
+        }
+      ],
+      searchKWs: [
+        '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
+        '甲醛', '乙醇'
+        // , '三氯甲烷',
+        // '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
+        // '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐'
+      ],
+      value: '',
+      currentItem: {},
+      show: true
+    }
+  },
+  methods: {
+    handleInfo(item) {
+      this.currentItem = item
+      this.show = false
+    },
+    handleBack() {
+      this.show = true
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.main-container{
+  height:calc(100vh - 12rem) ;
+  padding: 1rem;
+  margin: 1rem;
+  background: white;
+  .title{
+    font-size: 20px;
+    font-weight: bold;
+    color: #000000;
+  }
+  .header{
+    .title-sub{
+      text-align: center;
+      font-size: 1.25rem;
+      font-weight: 400;
+      color: #303133;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+    }
+    margin: 1rem 0 1rem 0;
+    .el-input{
+      width: 18.75rem;
+      margin-right: 1rem;
+    }
+  }
+  .kws{
+    margin-bottom: 2rem;
+      .kw{
+        line-height: 3rem;
+        width: 670px;
+        height: 48px;
+        background: #F0F0F0;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        font-size: 14px;
+        font-weight: 400;
+        color: #303133;
+        margin-right: 1rem;
+        padding: 1rem;
+      }
+  }
+  .search-item-container{
+    overflow-y: scroll;
+    max-height: 24rem;
+    .search-item{
+      display: flex;
+      align-items: center;
+      margin-bottom: 2rem;
+      .search-img img{
+        width: 56px;
+      }
+      .content{
+        margin-left: 1rem;
+        .name{
+          font-size: 1.125rem;
+          font-weight: bold;
+          color: #303133;
+        }
+        .code{
+          margin-top: 1rem;
+          font-size: 1rem;
+          font-weight: 400;
+          color: #909399;
+        }
+      }
+    }
+  }
+}
 
 </style>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 8a8b46e..2a96a5b 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -7,9 +7,9 @@
       <el-select v-model="role_id" placeholder="请输入角色" :value="manageer">
         <el-option
           v-for="item in roleData"
-          :key="item.module_id"
-          :label="item.module_name"
-          :value="item.module_id"
+          :key="item.role_id"
+          :label="item.role_name"
+          :value="item.role_id"
         />
       </el-select>
       <el-select v-model="is_enabled" placeholder="账号状态" :value="manageer">
@@ -125,23 +125,53 @@
       title="分配用户权限"
       :visible.sync="roleDialogVisible"
       width="30%"
+      @close="handleClose"
     >
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="试剂管理" name="first">
-          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
+      <el-tabs
+        v-model="activeName"
+        v-loading="tabsLoading"
+        element-loading-text="拼命加载中"
+      >
+        <el-tab-pane label="后台管理" name="first">
+          <el-checkbox v-model="checkAll_drug_module_id" :indeterminate="isIndeterminate_drug_module_id" @change="(val) => handleCheckAllChange(val,'drug_module_id')">全选</el-checkbox>
+          <div style="margin: 15px 0;" />
+          <el-checkbox-group v-model="formData.drug_module_id" @change="(val) => handleCheckedCitiesChange(val,'drug_module_id')">
+            <el-checkbox v-for="item in drug_module_idOptions" :key="item.module_id" :label="item.module_id">{{ item.module_name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-tab-pane>
+        <el-tab-pane label="终端管理" name="second">
+          <el-checkbox v-model="checkAll_client_module_id" :indeterminate="isIndeterminate_client_module_id" @change="(val) =>handleCheckAllChange(val,'client_module_id')">全选</el-checkbox>
+          <div style="margin: 15px 0;" />
+          <el-checkbox-group v-model="formData.client_module_id" @change="(val) =>handleCheckedCitiesChange(val,'client_module_id')">
+            <el-checkbox v-for="item in client_module_idOptions" :key="item.module_id" :label="item.module_id">{{ item.module_name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-tab-pane>
+        <el-tab-pane label="标准品管理" name="data">
+          <el-checkbox v-model="checkAll_standard_module_id" :indeterminate="isIndeterminate_standard_module_id" @change="(val) =>handleCheckAllChange(val,'standard_module_id')">全选</el-checkbox>
+          <div style="margin: 15px 0;" />
+          <el-checkbox-group v-model="formData.standard_module_id" @change="(val) =>handleCheckedCitiesChange(val,'standard_module_id')">
+            <el-checkbox v-for="item in standard_module_idOptions" :key="item.module_id" :label="item.module_id">{{ item.module_name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-tab-pane>
+        <el-tab-pane label="耗材管理" name="third">
+          <el-checkbox v-model="checkAll_consumables_module_id" :indeterminate="isIndeterminate_consumables_module_id" @change="(val) =>handleCheckAllChange(val,'consumables_module_id')">全选</el-checkbox>
           <div style="margin: 15px 0;" />
-          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-            <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
+          <el-checkbox-group v-model="formData.consumables_module_id" @change="(val) =>handleCheckedCitiesChange(val,'consumables_module_id')">
+            <el-checkbox v-for="item in consumables_module_idOptions" :key="item.module_id" :label="item.module_id">{{ item.module_name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-tab-pane>
+        <el-tab-pane label="仪器管理" name="fourth">
+          <el-checkbox v-model="checkAll_instrument_module_id" :indeterminate="isIndeterminate_instrument_module_id" @change="(val) =>handleCheckAllChange(val,'instrument_module_id')">全选</el-checkbox>
+          <div style="margin: 15px 0;" />
+          <el-checkbox-group v-model="formData.instrument_module_id" @change="(val) =>handleCheckedCitiesChange(val,'instrument_module_id')">
+            <el-checkbox v-for="item in instrument_module_idOptions" :key="item.module_id" :label="item.module_id">{{ item.module_name }}</el-checkbox>
           </el-checkbox-group>
         </el-tab-pane>
-        <el-tab-pane label="标准品管理" name="second">标准品管理</el-tab-pane>
-        <el-tab-pane label="耗材管理" name="third">耗材管理</el-tab-pane>
-        <el-tab-pane label="仪器管理" name="fourth">仪器管理</el-tab-pane>
       </el-tabs>
       <span slot="footer" class="dialog-footer">
         <div style="text-align: center">
           <el-button @click="roleDialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="roleDialogVisible = false">确 定</el-button>
+          <el-button type="primary" @click="handleSubmitForm">确 定</el-button>
         </div>
       </span>
     </el-dialog>
@@ -150,13 +180,25 @@
 
 <script>
 import UserForm from '@/components/UserForm'
-import { get_user_list, add, user_power, update, del } from '@/api/user/user'
+import { get_user_list, add, update, del, get_module_list, get_user_power_list, add_user_power, get_role_name_list } from '@/api/user/user'
 import stringify from '@/utils/stringify'
 export default {
   name: 'User',
   components: { UserForm },
   data() {
     return {
+      // 全选相关
+      checkAll_drug_module_id: false,
+      isIndeterminate_drug_module_id: true,
+      checkAll_client_module_id: false,
+      isIndeterminate_client_module_id: true,
+      checkAll_standard_module_id: false,
+      isIndeterminate_standard_module_id: true,
+      checkAll_consumables_module_id: false,
+      isIndeterminate_consumables_module_id: true,
+      checkAll_instrument_module_id: false,
+      isIndeterminate_instrument_module_id: true,
+
       tableData: [],
       manageer: null,
       headerStyle: { 'background': '#E6E6E6' },
@@ -167,10 +209,6 @@ export default {
       // 分配用户权限
       roleDialogVisible: false,
       activeName: 'first',
-      checkAll: false,
-      checkedCities: ['上海', '北京'],
-      cities: ['上海', '北京', '广州', '深圳'],
-      isIndeterminate: true,
       page: 1,
       page_size: 15,
       total: 0,
@@ -179,16 +217,40 @@ export default {
       role_id: '',
       is_enabled: '',
       loading: false,
-      roleData: []
+      roleData: [],
+      tabsLoading: false,
+      drug_module_idOptions: [],
+      client_module_idOptions: [],
+      standard_module_idOptions: [],
+      consumables_module_idOptions: [],
+      instrument_module_idOptions: [],
+      formData: {
+        user_id: undefined,
+        drug_module_id: [],
+        client_module_id: [],
+        standard_module_id: [],
+        consumables_module_id: [],
+        instrument_module_id: []
+      }
     }
   },
   created() {
     this.getList()
     this.getRoleList()
+    this.getModelList()
   },
   methods: {
+    getModelList() {
+      get_module_list().then(res => {
+        this.drug_module_idOptions = res.data.sys_manage
+        this.client_module_idOptions = res.data.client_manage
+        this.standard_module_idOptions = res.data.standard_manage
+        this.consumables_module_idOptions = res.data.consumables_manage
+        this.instrument_module_idOptions = res.data.instrument_manage
+      })
+    },
     getRoleList() {
-      user_power().then(
+      get_role_name_list().then(
         res => (this.roleData = res.data)
       )
     },
@@ -211,14 +273,15 @@ export default {
       this.page = page
       this.getList()
     },
-    handleCheckAllChange(val) {
-      this.checkedCities = val ? this.cities : []
-      this.isIndeterminate = false
+    handleCheckAllChange(val, t) {
+      this.formData[t] = val ? this[t + 'Options'].map(item => item.module_id) : []
+      this['isIndeterminate_' + t] = false
     },
-    handleCheckedCitiesChange(value) {
+    handleCheckedCitiesChange(value, t) {
+      console.log(value)
       const checkedCount = value.length
-      this.checkAll = checkedCount === this.cities.length
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
+      this.$set(this, 'checkAll_' + t, checkedCount === this[t + 'Options'].length)
+      this['isIndeterminate_' + t] = checkedCount > 0 && checkedCount < this[ t + 'Options'].length
     },
     handleSelectionChange(val) {
       this.multipleSelection = val
@@ -229,7 +292,7 @@ export default {
         ...formdata
       }
       data.is_enabled = data.is_enabled ? 1 : 0
-      data.role_name = this.roleData.find(item => item.module_id === data.role_id).module_name
+      data.role_name = this.roleData.find(item => item.role_id === data.role_id).role_name
       if (this.userFormTitle === '新增用户') {
         add(stringify(data)).then(res => {
           this.$message.success(res.msg)
@@ -267,6 +330,21 @@ export default {
     },
     handleRole(index, row) {
       this.roleDialogVisible = true
+      this.tabsLoading = true
+      this.formData.user_id = row.user_id
+      get_user_power_list(stringify({ 'user_id': row.user_id })).then(res => {
+        // client_manage: [{have: 1, module_code: "MyDrug", module_id: "43272548-116f-11ed-8d0e-f47b094925e5",…},…]
+        // consumables_manage: []
+        // drug_manage: [{have: 1, module_code: "DrugScanBarCode", module_id: "4327254a-116f-11ed-8d11-f47b094925e5",…},…]
+        // instrument_manage: []
+        // standard_manage
+
+        this.formData.consumables_module_id = res.data.consumables_manage.filter(item => item.have === 1).map(item => item.module_id)
+        this.formData.drug_module_id = res.data.drug_manage.filter(item => item.have === 1).map(item => item.module_id)
+        this.formData.instrument_module_id = res.data.instrument_manage.filter(item => item.have === 1).map(item => item.module_id)
+        this.formData.standard_module_id = res.data.standard_manage.filter(item => item.have === 1).map(item => item.module_id)
+        this.formData.client_module_id = res.data.client_manage.filter(item => item.have === 1).map(item => item.module_id)
+      }).finally(() => { this.tabsLoading = false })
     },
     handleDelTem() {
       if (this.multipleSelection.length !== 1) {
@@ -300,6 +378,32 @@ export default {
     },
     handleSearch() {
       this.getList()
+    },
+    // 提交-分配用户权限form
+    handleSubmitForm() {
+      const data = JSON.parse(JSON.stringify(this.formData))
+      data.drug_module_id = JSON.stringify(data.drug_module_id)
+      data.client_module_id = JSON.stringify(data.client_module_id)
+      data.standard_module_id = JSON.stringify(data.standard_module_id)
+      data.consumables_module_id = JSON.stringify(data.consumables_module_id)
+      data.instrument_module_id = JSON.stringify(data.instrument_module_id)
+      add_user_power(stringify(data)).then(
+        res => {
+          this.$message.success(res.msg)
+          this.roleDialogVisible = false
+        }
+      )
+    },
+    // 关闭时清空
+    handleClose() {
+      this.formData = {
+        user_id: undefined,
+        drug_module_id: [],
+        client_module_id: [],
+        standard_module_id: [],
+        consumables_module_id: [],
+        instrument_module_id: []
+      }
     }
   }
 }
diff --git a/src/views/user/role/index.vue b/src/views/user/role/index.vue
index a0189bd..248f9ec 100644
--- a/src/views/user/role/index.vue
+++ b/src/views/user/role/index.vue
@@ -9,6 +9,8 @@
       </div>
     </div>
     <el-table
+      v-loading="loading"
+      element-loading-text="拼命加载中"
       :data="tableData"
       :header-cell-style="headerStyle"
       height="460"
@@ -20,28 +22,27 @@
         align="center"
       />
       <el-table-column
-        prop="date"
+        prop="role_code"
         label="角色代码"
         align="center"
       />
       <el-table-column
-        prop="name"
+        prop="role_name"
         label="角色名"
         align="center"
       />
       <el-table-column
         show-overflow-tooltip
-        prop="address"
+        prop="module_name"
         label="系统权限"
         align="center"
       />
       <el-table-column
-        prop="address"
-        label="角色名"
+        prop="description"
+        label="具体描述"
         align="center"
       />
       <el-table-column
-        prop="address"
         label="操作"
         align="center"
       >
@@ -60,47 +61,90 @@
         @current-change="pageChange"
       />
     </div>
-    <el-dialog :visible.sync="dialogVisible" :title="title" @close="onClose">
-      <el-row class="form-container" :gutter="15">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="title"
+      width="80%"
+      @close="onClose"
+    >
+      <el-row
+        v-loading="loadingForm"
+        element-loading-text="拼命加载中"
+        class="form-container"
+        :gutter="15"
+        destroy-on-close
+        @close="onClose"
+      >
         <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
           <el-col :span="12">
-            <el-form-item label="角色代码" prop="field101">
-              <el-input v-model="formData.field101" placeholder="请输入角色代码" clearable :style="{width: '100%'}" />
+            <el-form-item label="角色代码" prop="role_code">
+              <el-input v-model="formData.role_code" placeholder="请输入角色代码" clearable :style="{width: '100%'}" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="角色名" prop="field102">
-              <el-input v-model="formData.field102" placeholder="请输入角色名" clearable :style="{width: '100%'}" />
+            <el-form-item label="角色名" prop="role_name">
+              <el-input v-model="formData.role_name" placeholder="请输入角色名" clearable :style="{width: '100%'}" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="drug_module_idOptions.length !== 0">
+            <el-form-item label="系统权限" prop="drug_module_id">
+              <el-checkbox-group v-model="formData.drug_module_id" size="medium">
+                <el-checkbox
+                  v-for="item in drug_module_idOptions"
+                  :key="item.module_id"
+                  :label="item.module_id"
+                >{{ item.module_name }}</el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="client_module_idOptions.length !== 0">
+            <el-form-item label="终端权限" prop="client_module_id">
+              <el-checkbox-group v-model="formData.client_module_id" size="medium">
+                <el-checkbox
+                  v-for="item in client_module_idOptions"
+                  :key="item.module_id"
+                  :label="item.module_id"
+                >{{ item.module_name }}</el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="standard_module_idOptions.length !== 0">
+            <el-form-item label="标准品权限" prop="standard_module_id">
+              <el-checkbox-group v-model="formData.standard_module_id" size="medium">
+                <el-checkbox
+                  v-for="item in standard_module_idOptions"
+                  :key="item.module_id"
+                  :label="item.module_id"
+                >{{ item.module_name }}</el-checkbox>
+              </el-checkbox-group>
             </el-form-item>
           </el-col>
-          <el-col :span="14">
-            <el-form-item label="系统权限" prop="field103">
-              <el-checkbox-group v-model="formData.field103" size="medium">
+          <el-col v-if="consumables_module_idOptions.length !== 0">
+            <el-form-item label="耗材权限" prop="consumables_module_id">
+              <el-checkbox-group v-model="formData.consumables_module_id" size="medium">
                 <el-checkbox
-                  v-for="(item, index) in field103Options"
-                  :key="index"
-                  :label="item.value"
-                  :disabled="item.disabled"
-                >{{ item.label }}</el-checkbox>
+                  v-for="item in consumables_module_idOptions"
+                  :key="item.module_id"
+                  :label="item.module_id"
+                >{{ item.module_name }}</el-checkbox>
               </el-checkbox-group>
             </el-form-item>
           </el-col>
-          <el-col :span="14">
-            <el-form-item label="终端权限" prop="field104">
-              <el-checkbox-group v-model="formData.field104" size="medium">
+          <el-col v-if="instrument_module_idOptions.length !==0">
+            <el-form-item label="仪器权限" prop="instrument_module_id">
+              <el-checkbox-group v-model="formData.instrument_module_id" size="medium">
                 <el-checkbox
-                  v-for="(item, index) in field104Options"
-                  :key="index"
-                  :label="item.value"
-                  :disabled="item.disabled"
-                >{{ item.label }}</el-checkbox>
+                  v-for="item in instrument_module_idOptions"
+                  :key="item.module_id"
+                  :label="item.module_id"
+                >{{ item.module_name }}</el-checkbox>
               </el-checkbox-group>
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="具体描述" prop="field105">
+            <el-form-item label="具体描述" prop="description">
               <el-input
-                v-model="formData.field105"
+                v-model="formData.description"
                 type="textarea"
                 placeholder="请输入具体描述"
                 :autosize="{minRows: 4, maxRows: 4}"
@@ -119,6 +163,8 @@
 </template>
 
 <script>
+import { get_role_list, get_module_list, add_update_role, get_role_module } from '@/api/user/user'
+import stringify from '@/utils/stringify'
 export default {
   name: 'Role',
   data() {
@@ -128,50 +174,75 @@ export default {
       total: 0,
       title: '',
       dialogVisible: false,
+      loading: false,
+      loadingForm: false,
       tableData: [{}],
       headerStyle: { 'background': '#E6E6E6' },
       multipleSelection: [],
       formData: {
-        field101: undefined,
-        field102: undefined,
-        field103: [],
-        field104: [],
-        field105: undefined
+        role_id: undefined,
+        role_code: undefined,
+        role_name: undefined,
+        drug_module_id: [],
+        client_module_id: [],
+        standard_module_id: [],
+        consumables_module_id: [],
+        instrument_module_id: [],
+        description: undefined
       },
       rules: {
-        field101: [{
+        role_code: [{
           required: true,
           message: '请输入角色代码',
           trigger: 'blur'
         }],
-        field102: [{
+        role_name: [{
           required: true,
           message: '请输入角色名',
           trigger: 'blur'
         }],
-        field103: [],
-        field104: [],
-        field105: []
+        drug_module_id: [],
+        client_module_id: [],
+        standard_module_id: [],
+        consumables_module_id: [],
+        instrument_module_id: [],
+        description: []
       },
-      field103Options: [{
-        'label': '选项一',
-        'value': 1
-      }, {
-        'label': '选项二',
-        'value': 2
-      }],
-      field104Options: [{
-        'label': '选项一',
-        'value': 1
-      }, {
-        'label': '选项二',
-        'value': 2
-      }]
+      drug_module_idOptions: [],
+      client_module_idOptions: [],
+      standard_module_idOptions: [],
+      consumables_module_idOptions: [],
+      instrument_module_idOptions: []
     }
   },
+  created() {
+    this.getList()
+    this.getModelList()
+  },
   methods: {
+    getList() {
+      const data = {
+        page: this.page,
+        page_size: this.page_size
+      }
+      this.loading = true
+      get_role_list(stringify(data)).then(res => {
+        this.tableData = res.data.data_list
+        this.total = res.data.total_count
+      }).finally(() => (this.loading = false))
+    },
+    getModelList() {
+      get_module_list().then(res => {
+        this.drug_module_idOptions = res.data.sys_manage
+        this.client_module_idOptions = res.data.client_manage
+        this.standard_module_idOptions = res.data.standard_manage
+        this.consumables_module_idOptions = res.data.consumables_manage
+        this.instrument_module_idOptions = res.data.instrument_manage
+      })
+    },
     pageChange(page) {
       this.page = page
+      this.getList()
     },
     handleSelectionChange(val) {
       this.multipleSelection = val
@@ -202,13 +273,41 @@ export default {
       })
     },
     handleRefresh() {
-
+      this.getList()
     },
-    handleEdit() {
+    handleEdit(index, row) {
       this.title = '编辑角色'
       this.dialogVisible = true
+      this.loadingForm = true
+      this.formData.role_id = row.role_id
+      this.formData.role_code = row.role_code
+      this.formData.role_name = row.role_name
+      this.formData.description = row.description
+      const data = {
+        'role_id': row.role_id
+      }
+      get_role_module(stringify(data)).then(
+        res => {
+          this.formData.drug_module_id = res.data.filter(item => (item.have === 1 && item.module_type === '2')).map(item => item.module_id)
+          this.formData.client_module_id = res.data.filter(item => item.have === 1 && item.module_type === '1').map(item => item.module_id)
+          this.formData.standard_module_id = res.data.filter(item => item.have === 1 && item.module_type === '3').map(item => item.module_id)
+          this.formData.consumables_module_id = res.data.filter(item => item.have === 1 && item.module_type === '4').map(item => item.module_id)
+          this.formData.instrument_module_id = res.data.filter(item => item.have === 1 && item.module_type === '5').map(item => item.module_id)
+        }
+      ).finally(() => { this.loadingForm = false })
     },
     onClose() {
+      this.formData = {
+        role_id: undefined,
+        role_code: undefined,
+        role_name: undefined,
+        drug_module_id: [],
+        client_module_id: [],
+        standard_module_id: [],
+        consumables_module_id: [],
+        instrument_module_id: [],
+        description: undefined
+      }
       this.$refs['elForm'].resetFields()
     },
     close() {
@@ -217,6 +316,16 @@ export default {
     handelConfirm() {
       this.$refs['elForm'].validate(valid => {
         if (!valid) return
+        const data = JSON.parse(JSON.stringify(this.formData))
+        data.drug_module_id = JSON.stringify(data.drug_module_id)
+        data.client_module_id = JSON.stringify(data.client_module_id)
+        data.standard_module_id = JSON.stringify(data.standard_module_id)
+        data.consumables_module_id = JSON.stringify(data.consumables_module_id)
+        data.instrument_module_id = JSON.stringify(data.instrument_module_id)
+        add_update_role(stringify(data)).then(res => {
+          this.$message.success(res.msg)
+          this.onClose()
+        })
         this.close()
       })
     }