员工管理-员工列表

src/views/platform/staff_management/employee_list.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="queryParams" label-width="80px" inline>
+      <el-form-item>
+        <el-input placeholder="请输入员工名称"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 240px">
+          <el-option v-for="dict in dict.type.employee_status" :key="dict.value" :label="dict.label"
+                     :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary">查询</el-button>
+        <el-button>重置</el-button>
+      </el-form-item>
+      <br/>
+      <el-button type="primary" @click="open=true">新增员工</el-button>
+      <el-button>批量锁定</el-button>
+      <el-button>批量开启</el-button>
+      <el-button>批量删除</el-button>
+      <el-table :data="dataList" border class="table">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column label="ID">1</el-table-column>
+        <el-table-column label="员工姓名">张三</el-table-column>
+        <el-table-column label="手机号">1888888888888</el-table-column>
+        <el-table-column label="角色">角色1、角色2</el-table-column>
+        <el-table-column label="状态">
+          <el-switch/>
+        </el-table-column>
+        <el-table-column label="操作">
+          <el-button type="text">编辑</el-button>
+          <el-button type="text">删除</el-button>
+        </el-table-column>
+      </el-table>
+    </el-form>
+    <el-dialog :visible.sync="open" title="新增员工">
+      <el-form :model="addForm" inline label-width="100px">
+        <el-form-item label="员工名称">
+          <el-input placeholder="请输入"/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="手机号">
+          <el-input placeholder="请输入"/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="登陆密码">
+          <el-input placeholder="不填默认123456" type="password" show-password/>
+        </el-form-item>
+        <br/>
+        <el-form-item label="角色">
+          <template v-for="(item,index) in addForm.roles">
+            <br v-if="index>0"/>
+            <el-select placeholder="选择角色" v-model="addForm.roles[index]" :class="{'mt':index>0}"/>
+            <i class="el-icon-plus" @click="addForm.roles.push(undefined)"/>
+            <i class="el-icon-minus" v-if="index>0" @click="addForm.roles.splice(index,1)"/>
+          </template>
+        </el-form-item>
+
+      </el-form>
+      <div class="text-center">
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button>重置</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmployeeList',
+  dicts: ['employee_status'],
+  data() {
+    return {
+      open: false,
+      dataList: [{}],
+      addForm: {
+        roles: [undefined]
+      },
+      queryParams: {
+        status: undefined
+      }
+    }
+  },
+  methods: {
+    save() {
+      this.$modal.msgSuccess('保存成功')
+      this.open = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.table {
+  margin-top: 10px;
+}
+
+.mt {
+  margin-top: 10px;
+}
+
+i {
+  color: #1684FC;
+  margin-left: 10px;
+}
+</style>