From 45c2197fc1ab2d9e92cfa7ff106a3b83d867cb0e Mon Sep 17 00:00:00 2001
From: duan <duanduanduan.com>
Date: Thu, 4 Aug 2022 13:23:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(src/views/user):=20=E5=AE=8C=E6=88=90=20?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E7=BC=96?=
 =?UTF-8?q?=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserForm/index.vue             | 162 +++++++++++
 src/icons/svg/分配权限.svg                    |   2 +
 src/layout/components/Sidebar/SidebarItem.vue |   1 -
 src/views/user/index.vue                      | 254 +++++++++++++++++-
 4 files changed, 415 insertions(+), 4 deletions(-)
 create mode 100644 src/components/UserForm/index.vue
 create mode 100644 src/icons/svg/分配权限.svg

diff --git a/src/components/UserForm/index.vue b/src/components/UserForm/index.vue
new file mode 100644
index 0000000..5a6d6e3
--- /dev/null
+++ b/src/components/UserForm/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="form-container">
+    <el-row :gutter="15">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
+        <el-col :span="12">
+          <el-form-item label="姓名" prop="姓名">
+            <el-input v-model="formData.姓名" placeholder="请输入姓名" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号码" prop="field101">
+            <el-input v-model="formData.field101" placeholder="请输入手机号码" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="性别" prop="field103">
+            <el-select v-model="formData.field103" placeholder="请选择性别" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in field103Options"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电子邮箱" prop="field104">
+            <el-input v-model="formData.field104" placeholder="请输入电子邮箱" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="工号" prop="field105">
+            <el-input v-model="formData.field105" placeholder="请输入工号" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="QQ号码" prop="field106">
+            <el-input v-model="formData.field106" placeholder="请输入QQ号码" clearable :style="{width: '100%'}" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="角色" prop="field107">
+            <el-select v-model="formData.field107" placeholder="请选择角色" clearable :style="{width: '100%'}">
+              <el-option
+                v-for="(item, index) in field107Options"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否启用" prop="field108" required>
+            <el-switch v-model="formData.field108" />
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <div style="text-align: center;margin-left: 50px">
+      <el-button @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click="submitForm">保存</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UserForm',
+  components: {},
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['handlecancel', 'propsformdata', 'handlesubmit'],
+  data() {
+    return {
+      formData: {
+        姓名: undefined,
+        field101: undefined,
+        field103: undefined,
+        field104: undefined,
+        field105: undefined,
+        field106: undefined,
+        field107: undefined,
+        field108: false
+      },
+      rules: {
+        姓名: [{
+          required: true,
+          message: '请输入姓名',
+          trigger: 'blur'
+        }],
+        field101: [{
+          required: true,
+          message: '请输入手机号码',
+          trigger: 'blur'
+        }],
+        field103: [{
+          required: true,
+          message: '请选择性别',
+          trigger: 'change'
+        }],
+        field104: [],
+        field105: [],
+        field106: [],
+        field107: [{
+          required: true,
+          message: '请选择角色',
+          trigger: 'change'
+        }]
+      },
+      field103Options: [{
+        'label': '男',
+        'value': 1
+      }, {
+        'label': '女',
+        'value': 2
+      }],
+      field107Options: [{
+        'label': '选项一',
+        'value': 1
+      }, {
+        'label': '选项二',
+        'value': 2
+      }]
+    }
+  },
+  computed: {},
+  // handlecancel 取消时调用 propsformdata初始化form数据  handlesubmit提交表单
+  watch: {
+    propsformdata: {
+      handler(newValue, oldValue) {
+        this.formData = { ...newValue }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    submitForm() {
+      this.$refs['elForm'].validate(valid => {
+        if (!valid) return
+        this.$emit('handlesubmit', this.formData)
+      })
+    },
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+    handleCancel() {
+      this.$emit('handlecancel')
+    }
+  }
+}
+
+</script>
+<style scoped>
+.form-container{
+  margin-right: 50px;
+}
+</style>
diff --git a/src/icons/svg/分配权限.svg b/src/icons/svg/分配权限.svg
new file mode 100644
index 0000000..2ba2829
--- /dev/null
+++ b/src/icons/svg/分配权限.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659574681769" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3156" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M768 416.914c43.886-43.885 43.886-109.714 0-153.6C724.114 219.43 650.971 219.43 607.086 256s-43.886 109.714 0 153.6S724.114 460.8 768 416.914z m-109.714-51.2c-14.629-14.628-14.629-36.571 0-51.2 14.628-14.628 36.571-14.628 51.2 0 14.628 14.629 14.628 36.572 0 51.2s-36.572 14.629-51.2 0z m-512 563.2c-14.629 14.629-36.572 14.629-51.2 0s-14.629-36.571 0-51.2l387.657-387.657-14.629-21.943C409.6 365.714 424.23 241.371 504.686 153.6c102.4-102.4 263.314-102.4 358.4 0s102.4 263.314 0 358.4c-80.457 87.771-204.8 102.4-307.2 43.886l-21.943-14.629-160.914 160.914 80.457 80.458c14.628 14.628 36.571 14.628 51.2 0 14.628-14.629 14.628-36.572 0-51.2l-21.943-29.258 65.828-65.828c124.343 58.514 277.943 36.571 373.029-65.829 131.657-131.657 131.657-336.457 0-468.114s-336.457-124.343-468.114 0C358.4 204.8 329.143 351.086 387.657 475.429L36.571 826.514c-43.885 43.886-43.885 109.715 0 153.6 43.886 43.886 109.715 43.886 153.6 0l80.458-80.457-51.2-43.886-73.143 73.143z m307.2-51.2L321.829 746.057l-51.2 58.514L402.286 936.23c14.628 14.628 36.571 14.628 51.2 0 14.628-21.943 14.628-43.886 0-58.515z" p-id="3157"></path></svg>
\ No newline at end of file
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 1d1b786..baaf057 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -30,7 +30,6 @@ import { isExternal } from '@/utils/validate'
 import Item from './Item'
 import AppLink from './Link'
 import FixiOSBug from './FixiOSBug'
-import { mapGetters } from 'vuex'
 
 export default {
   name: 'SidebarItem',
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index d954d8a..fdd40a0 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,13 +1,261 @@
 <template>
-  <h1>用户根目录</h1>
+  <div class="main-container">
+    <div class="title">用户管理</div>
+    <div class="header">
+      <el-input placeholder="请输入工号" />
+      <el-input placeholder="请输入姓名" />
+      <el-select placeholder="请输入角色" :value="manageer" />
+      <el-select placeholder="账号状态" :value="manageer" />
+      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
+      <el-button type="primary" plain @click="handleAddUser()"><i class="el-icon-plus" />新增用户</el-button>
+      <div class="header-right">
+        <el-button icon="el-icon-delete" circle @click="handleDelTem" />
+        <el-button icon="el-icon-refresh" circle @click="handleRefresh" />
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      :header-cell-style="headerStyle"
+      height="460"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        align="center"
+      />
+      <el-table-column
+        prop="date"
+        label="工号"
+        align="center"
+      />
+      <el-table-column
+        prop="name"
+        label="姓名"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="角色"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="性别"
+        align="center"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        prop="address"
+        label="联系电话"
+        align="center"
+      />
+      <el-table-column
+        show-overflow-tooltip
+        prop="address"
+        label="电子邮箱"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="创建时间"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="status"
+        align="center"
+      />
+      <el-table-column
+        prop="address"
+        label="操作"
+        align="center"
+        width="300"
+      >
+        <template slot-scope="scope">
+          <el-button size="mini" type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button size="mini" @click="handleFace(scope.$index, scope.row)">录入人脸</el-button>
+          <el-button size="mini" @click="handleRole(scope.$index, scope.row)"><svg-icon icon-class="分配权限" />分配功能权限</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="text-align: center">
+      <el-pagination
+        layout="prev, pager, next"
+        :current-page.sync="page"
+        :total="total"
+        :page-size.sync="page_size"
+        hide-on-single-page
+        @current-change="pageChange"
+      />
+    </div>
+    <el-dialog
+      :title="userFormTitle"
+      :visible.sync="dialogVisible"
+      width="38%"
+      @close="userFormDialogClose"
+    >
+      <UserForm :propsformdata="userFormData" @handlesubmit="handleUserSubmit" @handlecancel="handleUserFormCancel" />
+    </el-dialog>
+    <el-dialog
+      title="分配用户权限"
+      :visible.sync="roleDialogVisible"
+      width="30%"
+    >
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="试剂管理" name="first">
+          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</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>
+        </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>
+        </div>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import UserForm from '@/components/UserForm'
 export default {
-  name: 'User'
+  name: 'User',
+  components: { UserForm },
+  data() {
+    return {
+      tableData: [
+        {
+          date: 1,
+          name: 'test'
+        }
+      ],
+      manageer: null,
+      headerStyle: { 'background': '#E6E6E6' },
+      dialogVisible: false,
+      userFormTitle: '',
+      userFormData: {},
+      multipleSelection: [],
+      // 分配用户权限
+      roleDialogVisible: false,
+      activeName: 'first',
+      checkAll: false,
+      checkedCities: ['上海', '北京'],
+      cities: ['上海', '北京', '广州', '深圳'],
+      isIndeterminate: true,
+      page: 1,
+      page_size: 15,
+      total: 0
+    }
+  },
+  methods: {
+    pageChange(page) {
+      this.page = page
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : []
+      this.isIndeterminate = false
+    },
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.cities.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    handleUserSubmit(formdata) {
+      const data = {
+        ...this.userFormData,
+        ...formdata
+      }
+      // TODO 提交表单
+      console.log(data)
+    },
+    userFormDialogClose() {
+      this.userFormData = {}
+    },
+    handleUserFormCancel() {
+      this.dialogVisible = true
+      this.userFormData = {}
+    },
+    handleAddUser() {
+      this.userFormTitle = '新增用户'
+      this.dialogVisible = true
+    },
+    handleEdit(index, row) {
+      this.userFormTitle = '编辑用户'
+      this.userFormData = row
+      this.dialogVisible = true
+    },
+    handleFace(index, row) {
+
+    },
+    handleRole(index, row) {
+      this.roleDialogVisible = true
+    },
+    handleDelTem() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('请选择需要删除的用户')
+        return
+      }
+      this.$confirm('确定要删除用户“陈小红”吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    handleRefresh() {
+
+    },
+    handleSearch() {
+
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.main-container{
+  min-height:calc(100vh - 12rem) ;
+  padding: 1rem;
+  margin: 1rem;
+  background: white;
+  .title{
+    font-size: 20px;
+    font-weight: bold;
+    color: #000000;
+  }
+  .header{
+    margin: 1rem 0 1rem 0;
+    .el-input{
+      width: 9.375rem;
+      margin-right: 1rem;
+    }
+    .el-select {
+      margin-right: 1rem;
+    }
+    .header-right{
+      float: right;
+    }
+  }
+}
 
 </style>