From a2ecf5a97ae2bd935ec0478fd13039b2bf6f5460 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Thu, 11 Aug 2022 13:38:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A1=E6=9F=A5=E7=9A=84=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/rain/basic/account.vue | 482 ++++++++++++++++---------------
 1 file changed, 247 insertions(+), 235 deletions(-)

diff --git a/src/views/rain/basic/account.vue b/src/views/rain/basic/account.vue
index b34c9a7..18fa388 100644
--- a/src/views/rain/basic/account.vue
+++ b/src/views/rain/basic/account.vue
@@ -7,7 +7,7 @@
           <slot>
             <div>
               <Input style="width: 200px; margin-right: 10px" v-model="searchFields.KeyWord" placeholder="关键字搜索" />
-              <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
+              <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
               <Button type="primary" @click="edit()" style="margin-left: 10px">新增</Button>
             </div>
           </slot>
@@ -15,20 +15,26 @@
       </div>
       <div ref="lxTable">
         <el-table :data="tableData" class="v-table" :height="tableHeight" style="width: 100%">
-          <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
+          <el-table-column type="index" width="50" label="序号" align="center" :fixed="left"> </el-table-column>
           <el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columns"
-            :label="column.title" :width="column.width">
-              <template slot-scope="scope">
-                <div v-if="column.type=='opt'">
-                  <Button ghost size="small" @click="edit(scope.row)" type="primary"
-                    style="margin-left: 10px;">编辑</Button>
-                  <Button ghost size="small" @click="del(scope.row)" type="error" style="margin-left: 10px;">删除</Button>
-                </div>
-                <div v-else-if="column.type=='format'">
-                  {{scope.row[column.field]?scope.row[column.field].name:""}}
-                </div>
-                <div v-else>{{scope.row[column.field]}}</div>
-              </template>
+            :label="column.title" :width="column.width" :fixed="column.fixed">
+            <template slot-scope="scope">
+              <div v-if="column.type=='opt'">
+                <Button ghost size="small" @click="edit(scope.row)" type="primary"
+                  style="margin-left: 10px;">编辑</Button>
+                <Button ghost size="small" @click="del(scope.row)" type="error" style="margin-left: 10px;">删除</Button>
+              </div>
+              <div v-else-if="column.type=='format'">
+
+                <div v-if="column.field=='menu'">
+                  {{showMenu(scope.row["allow_menu_list"])}}
+                </div>
+                <div v-else>
+                  {{scope.row[column.field]?scope.row[column.field].name:""}}
+                </div>
+              </div>
+              <div v-else>{{scope.row[column.field]}}</div>
+            </template>
           </el-table-column>
         </el-table>
         <div class="pagination">
@@ -40,69 +46,57 @@
 
       <el-dialog class="common-dialog" title="账号编辑" :visible.sync="dialogFormVisible" width="40%">
         <div class="dialogConcent">
-          <el-scrollbar style="flex: 1">
+          <el-scrollbar style="flex: 1">
 
             <el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item label="名字" prop="name">
-                    <el-input v-model="form.name" placeholder="请填写名字" autocomplete="off"></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="24">
-                  <el-form-item label="账号" prop="username">
-                    <el-input v-model="form.username" placeholder="请填写账号" autocomplete="off"></el-input>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="24">
-                  <el-form-item label="密码" prop="password">
-                    <el-input v-model="form.password" placeholder="请填写密码" autocomplete="off"></el-input>
-                  </el-form-item>
-                </el-col>
-
-                <el-col :span="24">
-                  <el-form-item label="所属片区" prop="area_id">
-                    <el-select style="width:100%" v-model="form.area_id" placeholder="请选择所属片区">
-                        <el-option
-                          v-for="item in areaList"
-                          :key="item.id"
-                          :label="item.name"
-                          :value="item.id">
-                        </el-option>
-                      </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="24">
-                  <el-form-item label="所属养护单位" prop="maintain_id">
-                    <el-select style="width:100%" v-model="form.maintain_id" placeholder="请选择所属养护单位">
-                        <el-option
-                          v-for="item in maintainList"
-                          :key="item.id"
-                          :label="item.name"
-                          :value="item.id">
-                        </el-option>
-                      </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="24">
-                  <el-form-item label="巡查养护组" prop="group_id">
-                    <el-select style="width:100%" v-model="form.group_id" placeholder="请选择巡查养护组">
-                        <el-option
-                          v-for="item in groupList"
-                          :key="item.id"
-                          :label="item.name"
-                          :value="item.id">
-                        </el-option>
-                      </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="24">
-                  <el-form-item label="用户权限" prop="role_id">
-                    <el-checkbox-group v-model="roleArr">
-                      <el-checkbox v-for="item in roleList" :label="item.id">{{item.value}}</el-checkbox>
-                    </el-checkbox-group>
-                  </el-form-item>
-                </el-col>
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="名字" prop="name">
+                    <el-input v-model="form.name" placeholder="请填写名字" autocomplete="off"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="账号" prop="username">
+                    <el-input v-model="form.username" placeholder="请填写账号" autocomplete="off"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="密码" prop="password">
+                    <el-input v-model="form.password" placeholder="请填写密码" autocomplete="off"></el-input>
+                  </el-form-item>
+                </el-col>
+
+                <el-col :span="24">
+                  <el-form-item label="所属片区" prop="area_id">
+                    <el-select style="width:100%" v-model="form.area_id" placeholder="请选择所属片区">
+                      <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="所属养护单位" prop="maintain_id">
+                    <el-select style="width:100%" v-model="form.maintain_id" placeholder="请选择所属养护单位">
+                      <el-option v-for="item in maintainList" :key="item.id" :label="item.name" :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="巡查养护组" prop="group_id">
+                    <el-select style="width:100%" v-model="form.group_id" placeholder="请选择巡查养护组">
+                      <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="用户权限" prop="role_id">
+                    <el-checkbox-group v-model="roleArr">
+                      <el-checkbox v-for="item in roleList" :label="item.id">{{item.value}}</el-checkbox>
+                    </el-checkbox-group>
+                  </el-form-item>
+                </el-col>
               </el-row>
 
             </el-form>
@@ -119,22 +113,22 @@
   </div>
 </template>
 
-<script>
-  import {
-    listaccount,
-    get,
-    store,
-    save,
-    del
-  } from '../../../api/basic/account.js'
-  import {
-    listarea
-  } from '../../../api/basic/area.js'
-  import {
-    listmaintain
-  } from '../../../api/basic/unit.js'
-  import {
-    listgroup
+<script>
+  import {
+    listaccount,
+    get,
+    store,
+    save,
+    del
+  } from '../../../api/basic/account.js'
+  import {
+    listarea
+  } from '../../../api/basic/area.js'
+  import {
+    listmaintain
+  } from '../../../api/basic/unit.js'
+  import {
+    listgroup
   } from '../../../api/basic/group.js'
   import LxHeader from "@/components/LxHeader/index.vue";
 
@@ -146,65 +140,61 @@
       return {
         tableHeight: 0,
         dialogFormVisible: false,
-        formLabelWidth: "120px",
-        tableData: [],
-        areaList:[],
-        maintainList:[],
-        groupList:[],
-        tableHeight: 0,
-        searchFields: {
-          KeyWord: ""
-        },
-        roleList:[{
-          id:1,
-          value:"巡查管理"
-        },{
-          id:2,
-          value:"养护管理"
-        },{
-          id:3,
-          value:"监督考核"
-        },{
-          id:4,
-          value:"通用巡查"
-        },],
-        roleArr:[],
-        paginations: {
-          page: 1,
-          page_size: 15,
-          total: 0
+        formLabelWidth: "120px",
+        tableData: [],
+        areaList: [],
+        maintainList: [],
+        groupList: [],
+        tableHeight: 0,
+        searchFields: {
+          KeyWord: ""
+        },
+        roleList: [{
+          id: "1",
+          value: "巡查管理"
+        }, {
+          id: "2",
+          value: "养护管理"
+        }, {
+          id: "3",
+          value: "监督考核"
+        }, {
+          id: "4",
+          value: "通用巡查"
+        }, ],
+        roleArr: [],
+        paginations: {
+          page: 1,
+          page_size: 15,
+          total: 0
         },
         form: {
-          name:"",
-          username:"",
-          password:"",
-          area_id:"",
-          maintain_id:"",
-          group_id:""
+          name: "",
+          username: "",
+          password: "",
+          area_id: "",
+          maintain_id: "",
+          group_id: "",
+          allow_menu_ids: ""
         },
 
         rules: {
-          name:[{
-            required: true,
-            message: '请填写名字',
-            trigger: 'blur',
-          }],
-          username:[{
-            required: true,
-            message: '请填写账号',
-            trigger: 'blur',
-          }],
-          password:[{
-            required: true,
-            message: '请填写密码',
-            trigger: 'blur',
+          name: [{
+            required: true,
+            message: '请填写名字',
+            trigger: 'blur',
+          }],
+          username: [{
+            required: true,
+            message: '请填写账号',
+            trigger: 'blur',
           }]
         },
 
         columns: [{
             field: "name",
             title: "名字",
-            type: "string",
+            type: "string",
             align: "center"
           },
 
@@ -219,38 +209,38 @@
             title: "所属片区",
             type: "format",
             align: "center"
-          },
-          {
-            field: "maintain",
-            title: "所属养护单位",
-            type: "format",
-            align: "center"
-          },
-          {
-            field: "group",
-            title: "所属巡查养护组",
-            type: "format",
-            align: "center"
-          },
-          // {
-          //   field: "admin_id",
-          //   title: "提交人",
-          //   type: "string",
-          //   align: "center",
-          //   width:180
-          // },
-          {
-            field: "created_at",
-            title: "提交日期",
-            type: "string",
-            align: "center",
-            width:180
+          },
+          {
+            field: "maintain",
+            title: "所属养护单位",
+            type: "format",
+            align: "center"
+          },
+          {
+            field: "group",
+            title: "所属巡查养护组",
+            type: "format",
+            align: "center"
+          },
+          {
+            field: "menu",
+            title: "功能权限",
+            type: "format",
+            align: "center"
+          },
+          {
+            field: "created_at",
+            title: "提交日期",
+            type: "string",
+            align: "center",
+            width: 180
           },
           {
             field: "操作",
             title: "操作",
             width: 220,
             type: "opt",
+            fixed: "right"
           }
         ],
       }
@@ -261,6 +251,23 @@
 
     },
     methods: {
+      showMenu(listMenu) {
+        if (listMenu.length == 0) {
+          return "不限";
+        } else {
+          var sb = [];
+          for (var m of listMenu) {
+
+            var r = this.roleList.filter((item) => {
+              return item.id == m;
+            });
+            if (r.length == 1) {
+              sb.push(r[0].value);
+            }
+          }
+          return sb.join(",");
+        }
+      },
       initLoad() {
         var that = this;
         var clientHeight = document.documentElement.clientHeight
@@ -285,44 +292,45 @@
         }).catch(error => {
           console.log(error)
           reject(error)
-        });
-
-        listarea({
-          page: 1,
-          page_size: 999,
-        }).then(response => {
-          this.areaList = response.data;
-        }).catch(error => {
-          console.log(error)
-          reject(error)
-        });
-
-        listmaintain({
-          page: 1,
-          page_size: 999,
-        }).then(response => {
-          this.maintainList = response.data;
-        }).catch(error => {
-          console.log(error)
-          reject(error)
-        });
-
-        listgroup({
-          page: 1,
-          page_size: 999,
-        }).then(response => {
-          this.groupList = response.data;
-        }).catch(error => {
-          console.log(error)
-          reject(error)
-        });
-
+        });
+
+        listarea({
+          page: 1,
+          page_size: 999,
+        }).then(response => {
+          this.areaList = response.data;
+        }).catch(error => {
+          console.log(error)
+          reject(error)
+        });
+
+        listmaintain({
+          page: 1,
+          page_size: 999,
+        }).then(response => {
+          this.maintainList = response.data;
+        }).catch(error => {
+          console.log(error)
+          reject(error)
+        });
+
+        listgroup({
+          page: 1,
+          page_size: 999,
+        }).then(response => {
+          this.groupList = response.data;
+        }).catch(error => {
+          console.log(error)
+          reject(error)
+        });
+
 
 
       },
       show(obj) {
         // this.clientHeight = document.documentElement.clientHeight - 84 - 110;
         this.dialogViewVisible = false;
+
         this.info(obj);
       },
       info(obj) {
@@ -331,45 +339,48 @@
           let result = Object.assign(that.form, res);
           // this.$set(that.form,res);
           that.form = result;
+          that.roleArr = result.allow_menu_list;
 
         }).catch(error => {
           //reject(error)
         })
-      },
+      },
 
-     edit(obj) {
-       this.form = this.$options.data().form
-       if (obj) {
-         this.info(obj)
-       }
-       this.dialogFormVisible = true;
-     },
-      del(obj) {
-        var that = this;
-        if (obj) {
-          this.$Modal.confirm({
-            title: '确认要删除数据？',
-            onOk: () => {
-              del(obj.id).then(response => {
-                this.$Message.success('操作成功');
-                that.load();
-              }).catch(error => {
-                console.log(error)
-                reject(error)
-              })
-            },
-            onCancel: () => {
-              //this.$Message.info('Clicked cancel');
-            }
-          });
-        }
+      edit(obj) {
+        this.form = this.$options.data().form;
+        this.roleArr = [];
+        if (obj) {
+          this.info(obj)
+        }
+        this.dialogFormVisible = true;
+      },
+      del(obj) {
+        var that = this;
+        if (obj) {
+          this.$Modal.confirm({
+            title: '确认要删除数据？',
+            onOk: () => {
+              del(obj.id).then(response => {
+                this.$Message.success('操作成功');
+                that.load();
+              }).catch(error => {
+                console.log(error)
+                reject(error)
+              })
+            },
+            onCancel: () => {
+              //this.$Message.info('Clicked cancel');
+            }
+          });
+        }
       },
       submitForm(formName) {
-        var that = this;
-        console.log(that.form);
+        var that = this;
+        console.log(that.form);
         // return;
         this.$refs[formName].validate((valid) => {
           if (valid) {
+            that.form.allow_menu_ids = that.roleArr.join(",");
             if (that.form.id) {
               save(that.form).then(response => {
                 this.$Message.success('操作成功');
@@ -393,12 +404,12 @@
             return false;
           }
         });
-      },
-      resetForm(formName) {
-        var that = this;
-        this.$refs[formName].resetFields();
-        that.dialogFormVisible = false;
-
+      },
+      resetForm(formName) {
+        var that = this;
+        this.$refs[formName].resetFields();
+        that.dialogFormVisible = false;
+
       }
     }
   }
@@ -407,8 +418,9 @@
 <style>
   .dialogConcent {
     overflow-y: auto;
-  }
-  .width100{
-    width:100%;
+  }
+
+  .width100 {
+    width: 100%;
   }
 </style>