人员管理模块开发

@@ -2,16 +2,28 @@ module.exports = {
   presets: [
     // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
     // '@vue/cli-plugin-babel/preset'
-    [
-      "@vue/app",
-      {
-        "useBuiltIns": "entry",
-        polyfills: [
-          'es6.promise',
-          'es6.symbol'
+
+    {
+      "plugins": [
+        [
+          "import",
+          {
+            "libraryName": "vxe-table",
+            "style": true // 样式是否也按需加载
+          }
+        ],
+        [
+          "@vue/app",
+          {
+            "useBuiltIns": "entry",
+            polyfills: [
+              'es6.promise',
+              'es6.symbol'
+            ]
+          }
         ]
-      }
-    ]
+      ]
+    }
   ],
   'env': {
     'development': {

@@ -21,7 +21,8 @@
     "vue": "2.6.10",
     "vue-awesome": "^4.5.0",
     "vue-router": "3.0.2",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "xe-utils": "^3.5.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",
@@ -42,7 +43,9 @@
     "style-resources-loader": "^1.4.1",
     "svg-sprite-loader": "4.1.3",
     "svgo": "^2.3.1",
-    "vue-template-compiler": "2.6.10"
+    "vue-template-compiler": "2.6.10",
+    "vxe-table": "^3.6.9",
+    "vxe-table-plugin-element": "^1.11.2"
   },
   "browserslist": [
     "> 1%",

+import Vue from 'vue'
+import XEUtils from 'xe-utils'
+import VXETablePluginElement from 'vxe-table-plugin-element'
+import {
+  VXETable,
+  Icon,
+  Header,
+  Column,
+  Table,
+  Colgroup,
+  Input,
+  Select,
+  Edit,
+  Keyboard,
+  Toolbar,
+  Tooltip
+} from 'vxe-table'
+
+import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'
+
+import 'vxe-table-plugin-element/dist/style.css'
+// 导入默认的国际化（如果项目中使用多语言，则应该导入到 vue-i18n 中）
+
+VXETable.setup({
+  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCNLocat, key), args)
+})
+
+Vue.use(Icon)
+
+Vue.use(Header)
+Vue.use(Toolbar)
+Vue.use(Tooltip)
+
+Vue.use(Column)
+
+Vue.use(Colgroup)
+
+Vue.use(Input)
+
+Vue.use(Edit)
+Vue.use(Select)
+
+Vue.use(Keyboard)
+
+Vue.use(Table)
+Vue.use(VXETable)
+
+VXETable.use(VXETablePluginElement)

@@ -10,6 +10,7 @@ import dataV from '@jiaminghi/data-view';
 import echarts from "echarts"
 import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading'
 Vue.mixin(mixin)
+import './directive/vxe-table'
 // 按需引入vue-awesome图标
 import Icon from 'vue-awesome/components/Icon';
 import 'vue-awesome/icons/chart-bar.js';

 <template>
   <div class="timedTask from-clues">
-   <h1>水水水水水</h1>
+    <div class="from-clues-header">
+      <el-form ref="ruleForm" :model="form" label-width="100px">
+        <el-row class="mb-5">
+
+          <el-col :span="3">
+            <el-select v-model="selectType" placeholder="请选择" class="select">
+              <el-option
+                v-for="item in typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+          <el-col :span="3">
+            <el-input
+              v-model="queryName"
+              class="selectName"
+              clearable
+              placeholder="请输入"
+            >
+              <el-button
+                slot="append"
+                icon="el-icon-search"
+                @click="searchQuery()"
+              />
+            </el-input>
+          </el-col>
+           <!-- 按钮操作 -->
+           <el-col :span="6" class="btnColRight">
+           <el-form-item>
+              <btn nativeType="cz" @click="handleAdd" >添加人员</btn>
+              <btn nativeType="cx" @click="resetPassword(selectionRows)">重置密码</btn>
+              <btn nativeType="sb" @click="resetSearch()">重置</btn>
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+      </el-form>
+    </div>
+    <div class="from-clues-content">
+      <vxe-table
+        ref="xTree"
+        v-loading="loading"
+        class="header-bg-type1"
+        :data="tableData"
+        show-overflow
+        border
+        :checkbox-config="{ highlight: true }"
+        :empty-render="{ name: 'NotData' }"
+        highlight-hover-row
+        max-height="90%"
+        @checkbox-all="selectAllEvent"
+        @checkbox-change="selectChangeEvent"
+      >
+        <template #empty>
+          <table-empty />
+        </template>
+        <vxe-table-column
+          type="checkbox"
+          width="36"
+          align="center"
+          fixed="left"
+        />
+        <vxe-table-column
+          field="code"
+          title="工号"
+          width="80"
+          align="left"
+          show-header-overflow="tooltip"
+          show-overflow="tooltip"
+          fixed="left"
+        />
+        <vxe-table-column
+          title="姓名"
+          width="140"
+          align="left"
+          show-header-overflow="tooltip"
+          show-overflow="tooltip"
+          fixed="left"
+        >
+          <template slot-scope="scope">
+            <svg-icon
+              :icon-class="
+                scope.row.sex === '0'
+                  ? 'male'
+                  : scope.row.sex === '1'
+                  ? 'female'
+                  : 'secrecy'
+              "
+            />
+            {{ scope.row.name }}
+          </template>
+        </vxe-table-column>
+        <vxe-table-column
+          field="loginName"
+          title="用户名"
+          width="110"
+          align="left"
+          show-header-overflow="tooltip"
+          show-overflow="tooltip"
+          fixed="left"
+        />
+        <vxe-table-column
+          title="负责人"
+          align="left"
+          show-header-overflow="tooltip"
+          show-overflow="tooltip"
+        >
+          <template slot-scope="scope">
+            <i v-if="scope.row.isDuty" class="el-icon-check" />
+          </template>
+        </vxe-table-column>
+        <vxe-table-column
+          field="departmentName"
+          title="所属部门"
+          align="left"
+          width="140"
+          min-width="140"
+          show-header-overflow="tooltip"
+          show-overflow="tooltip"
+        />
+        <vxe-table-column
+          field="jobLevel"
+          :formatter="formatterjobLevel"
+          title="职位"
+          align="left"
+          width="140"
+          min-width="140"
+          show-header-overflow="tooltip"
+          show-overflow="tooltip"
+        />
+        <vxe-table-column
+          field="mobilePhone"
+          title="电话"
+          width="140"
+          show-header-overflow="tooltip"
+          show-overflow="tooltip"
+          align="left"
+        />
+        <vxe-table-column title="状态" width="50">
+          <template scope="scope">
+            <el-switch
+              v-model="scope.row.switch"
+              class="switch"
+              active-color="#32BAD4"
+              inactive-color="#B1B9C5"
+              active-text="启"
+              inactive-text="禁"
+              @change="changeStatus(scope.row)"
+            />
+          </template>
+        </vxe-table-column>
+        <vxe-table-column
+          title="排序"
+          width="148"
+          min-width="148"
+          align="left"
+          fixed="right"
+        >
+          <template #header>
+            <p class="ml8">排序</p>
+          </template>
+          <template slot-scope="scope">
+            <sort-table
+              :scope-data="scope"
+              :sort-url="tableUrl"
+              @sortOk="getTableList"
+            />
+          </template>
+        </vxe-table-column>
+        <vxe-table-column
+          title="操作"
+          width="148"
+          min-width="148"
+          align="left"
+          fixed="right"
+        >
+          <template #header>
+            <p class="ml8">操作</p>
+          </template>
+          <template slot-scope="scope">
+            <el-button type="text" size="small">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="解锁"
+                placement="top"
+              >
+                <i
+                  class="icon-platform-unlock iconfont"
+                  @click="updateLock(scope.row.id, scope.row.name)"
+                />
+              </el-tooltip>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="重置"
+                placement="top"
+              >
+                <i
+                  class="icon-platform-reset iconfont"
+                  @click="resetPassword(scope.row.id)"
+                />
+              </el-tooltip>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="修改"
+                placement="top"
+              >
+                <i
+                  class="icon-platform-edit iconfont"
+                  @click="handleEdit(scope.row)"
+                />
+              </el-tooltip>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="删除"
+                placement="top"
+              >
+                <i
+                  class="icon-platform-delete iconfont"
+                  @click="handleDelete(scope.row.id, scope.row.name)"
+                />
+              </el-tooltip>
+            </el-button>
+          </template>
+        </vxe-table-column>
+      </vxe-table>
+    </div>
   </div>
 </template>
 <script>
 // 定时任务
-import data from "./data"
-import system from '@/api/system.js'
-import tableMixin from '@/mixins/tableMixin.js'
-import addTask from '../components/addTask.vue'
+import data from "./data";
+import system from "@/api/system.js";
+import tableMixin from "@/mixins/tableMixin.js";
 export default {
   name: "users",
-  mixins: [tableMixin],
-  components: {
-    addTask
-  },
-  data () {
+  components: {},
+  data() {
     return {
-      taskData: null,
-      form: {
-        job_name: '',
-        currentPage: 1
-      },
-      selectionList: [],
-      tableData: {
-        columns: [{
-          label: '序号',
-          type: 'index',
-          width: '50',
-          index: this.indexMethod,
-        }].concat(data.columns()).concat([
-          {
-            label: "操作",
-            width: 380,
-            render: (h, scope) => {
-              return (
-                <div>
-                  <el-button type="text" size="mini" style="color: #67C23A"
-                    v-show={scope.row.job_status !== '1' && scope.row.job_status !== '2'}
-                    icon="el-icon-magic-stick"
-                    onClick={() => { this.handleRecovery(scope.row) }}>激活
-                  </el-button>
-
-                  <el-button type="text" size="mini"
-                    style="color: #67C23A;margin-left:0"
-                    icon="el-icon-refresh-right"
-                    v-show={scope.row.job_status === '2'}
-                    onClick={() => { this.handleActivation(scope.row) }}>恢复
-                  </el-button>
+      title: '',
+      queryParam: {},
+      selectType: '0',
+      queryName: '',
+      organizationId: '', // 组织机构ID
+      departmentId: '', // 部门ID
+      departmentList: [], // 部门列表
+      levelList: [], // 职务级别
+      tableData: [],
+      sexList: [],
+      typeOptions: [
+        {
+          value: '0',
+          label: '姓名'
+        },
+        {
+          value: '1',
+          label: '工号'
+        },
+        {
+          value: '2',
+          label: '部门'
+        },
+        {
+          value: '3',
+          label: '机构'
+        }
+      ],
+      // tableUrl: api.users, // 接口地址，
 
-                  <el-button type="text" size="mini"
-                    v-show={scope.row.job_status !== '1'}
-                    icon="el-icon-stopwatch"
-                    onClick={() => { this.handletest(scope.row) }}>手动测试
-                  </el-button>
-                  <el-button type="text" size="mini"
-                    v-show={scope.row.job_status === '1'}
-                    icon="el-icon-video-pause"
-                    onClick={() => { this.handleSuspend(scope.row) }}>暂停
-                  </el-button>
-                  <el-button type="text" size="mini"
-                    icon="el-icon-edit"
-                    v-show={scope.row.job_status === '2' || scope.row.job_status === '-1' || scope.row.job_status === '0'}
-                    onClick={() => { this.handleEdit(scope.row) }}>编辑
-                  </el-button>
-                  <el-button type="text" size="mini"
-                    icon="el-icon-delete" style="color:#F56C6C"
-                    v-show={scope.row.job_status !== '1'}
-                    onClick={() => { this.handleDel(scope.row) }}>删除
-                  </el-button>
-                </div>
-              );
-            },
-          },
-        ]),
-        data: []
-      },
       pageData: {
         total: 0,
         pageSize: 15,
         current: 1,
       },
-    }
+    };
+  },
+  created() {
+    // 获取区域和组织机构id
+    eventBus.$on('getSelectedId', (res) => {
+      if (!res.organizationId) {
+        this.tableData = []
+        this.organizationId = ''
+        this.departmentId = ''
+      } else {
+        this.organizationId = "408dee75-bde5-45cc-80af-62d260bff8d5"
+        this.departmentId = res.departmentId
+        this.getTableList()
+        this.getDepartData()
+      }
+      this.initDictConfig()
+    })
+  },
+  updated() {
+    this.tableData.forEach((element) => {
+      element.switch = element.status === 'ACTIVE'
+    })
   },
   methods: {
-    handleAdd () {
-      this.taskData = null
-      this.$refs.task.isShow()
+    initDictConfig() {
+      getDictItems('XB').then((res) => {
+        if (res.status === 1) {
+          this.sexList = res.content
+        } else {
+          this.$message.error({ message: res.message, showClose: true })
+        }
+      })
+      getDictItems('ZWJB').then((res) => {
+        if (res.status === 1) {
+          this.levelList = res.content
+        } else {
+          this.$message.error({ message: res.message, showClose: true })
+        }
+      })
     },
-    async featchData () {
-      try {
-        this.form = Object.assign(this.form, this.formData)
-        let { result: { list, total, pages: pageSize, pageNum: current }
-        } = await system.getTaskListByName(this.form)
-        this.tableData.data = list
-        this.pageData = {
-          pageSize,
-          current,
-          total
+    getDepartData() {
+      getDeptsByIdAction(this.organizationId).then((res) => {
+        if (res.status === 1) {
+          this.departmentList = res.content
+        } else {
+          this.$message.error({ message: res.message, showClose: true })
         }
-      } catch (error) {
-        this.message = error
-        this.$refs.msg.messageShow()
+      })
+    },
+    getTableList() {
+      this.loading = true
+      this.queryParam = {
+        organizationId: this.organizationId,
+        departmentId: this.departmentId
       }
+      getUserList(this.queryParam).then((res) => {
+        if (res.status === 1) {
+          this.loading = false
+          this.tableData = res.content
+        } else {
+          this.$message.error({ message: res.message, showClose: true })
+        }
+      })
     },
-    // 暂停
-    handleSuspend (row) {
-      this.$confirm('此操将进行暂停操作, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
+    // 查询
+    searchQuery() {
+      switch (this.selectType) {
+        case '0':
+          this.queryParam.type = 'NAME'
+          break
+        case '1':
+          this.queryParam.type = 'CODE'
+          break
+        case '2':
+          this.queryParam.type = 'DEPARTMENT'
+          break
+        case '3':
+          this.queryParam.type = 'ORGANIZATION'
+          break
+        default:
+          break
+      }
+      this.queryParam.typeValue = this.queryName
+      getUserList(this.queryParam).then((res) => {
+        if (res.status === 1) {
+          this.tableData = res.content
+        } else {
+          this.$message.error({ message: res.message, showClose: true })
+        }
       })
-        .then(() => {
-          system.pauseJob(row.id)
-            .then((res) => {
-              if ((res.code = 200)) {
-                this.$message({
-                  type: 'success',
-                  message: res.message,
-                })
-                this.featchData()
-              }
-            })
-            .catch((error) => {
-              this.$alert(error, '提示', {
-                confirmButtonText: '确定',
-                type: 'error'
-              })
-            })
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消',
-          })
-        })
     },
-    // 激活
-    handleRecovery (row) {
-      this.$confirm('此操将进行激活操作, 是否继续?', '提示', {
+    // 重置搜索
+    resetSearch() {
+      this.selectType = '0'
+      this.queryName = ''
+      this.queryParam = {
+        organizationId: this.organizationId,
+        departmentId: this.departmentId
+      }
+      this.getTableList()
+    },
+    // 性别
+    formatterSex({ cellValue }) {
+      if (this.sexList.length !== 0) {
+        if (cellValue !== null) {
+          const sex = this.sexList.find((item) => item.value === cellValue).name
+          return sex
+        } else {
+          return cellValue
+        }
+      }
+    },
+    // 职务级别
+    formatterjobLevel({ cellValue }) {
+      if (this.levelList.length !== 0) {
+        if (cellValue) {
+          const jobLevel = this.levelList.find(
+            (item) => item.value === cellValue
+          ).name
+          return jobLevel
+        } else {
+          return cellValue
+        }
+      }
+    },
+    // 删除
+    handleDelete(id, content) {
+      this.$confirm(deleteDomStr(content), '执行确认', {
+        dangerouslyUseHTMLString: true,
+        customClass: 'customer-delete',
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning',
+        type: 'warning'
       })
         .then(() => {
-          system.activateJob(row.id)
-            .then((res) => {
-              if ((res.code = 200)) {
-                this.$message({
-                  type: 'success',
-                  message: res.message,
-                })
-                this.featchData()
-              }
-            })
-            .catch((error) => {
-              this.$alert(error, '提示', {
-                confirmButtonText: '确定',
-                type: 'error'
-              })
-            })
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消',
+          deleteAction(`${api.users}/${id}`).then((res) => {
+            if (res.status === 1) {
+              this.$message.success({ message: res.message, showClose: true })
+            } else {
+              this.$message.error({ message: res.message, showClose: true })
+            }
+            this.getTableList()
           })
         })
+        .catch(() => {})
     },
-    // 恢复
-    handleActivation (row) {
-      this.$confirm('此操将进行恢复操作, 是否继续?', '提示', {
+    // 修改状态
+    changeStatus(row) {
+      this.$confirm('确定要修改状态吗?', '提示', {
+        customClass: 'customer-update',
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning',
+        type: 'warning'
       })
         .then(() => {
-          system.resumeJob(row.id)
-            .then((res) => {
-              if ((res.code = 200)) {
-                this.$message({
-                  type: 'success',
-                  message: res.message,
-                })
-                this.featchData()
-              }
-            })
-            .catch((error) => {
-              this.$alert(error, '提示', {
-                confirmButtonText: '确定',
-                type: 'error'
-              })
-            })
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消',
+          const status = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
+          const id = row.id
+          updateStatus(id, status).then((res) => {
+            if (res.status === 1) {
+              this.$message.success({ message: res.message, showClose: true })
+              this.getTableList()
+            } else {
+              this.$message.error({ message: res.message, showClose: true })
+            }
           })
         })
+        .catch((err) => {
+          console.log({ err })
+        })
     },
-    // 手动测试
-    handletest (row) {
-      this.$confirm('此操将进行手动测试, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
+    // 更新用户解锁状态
+    updateLock(id, name) {
+      this.$confirm(
+        `<div  class="customer-message-wrapper">
+              <h5 class="title">确定要更新用户解锁状态吗</h5>
+               <p class="result">执行后，数据将
+                 <span >无法恢复</span>
+                </p>
+        </div>`,
+        '执行确认',
+        {
+          dangerouslyUseHTMLString: true,
+          customClass: 'customer-delete',
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
         .then(() => {
-          system.sjsbTaskRun(row.id)
-            .then((res) => {
-              if ((res.code = 200)) {
-                this.$alert(res.message, '提示', {
-                  confirmButtonText: '确定',
-                  type: 'success'
-                });
-                this.featchData()
-              }
-            })
-            .catch((error) => {
-              this.$alert(error, '提示', {
-                confirmButtonText: '确定',
-                type: 'error'
-              })
-            })
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消',
+          updateLock(id).then((res) => {
+            if (res.status === 1) {
+              this.$message.success({ message: res.message, showClose: true })
+              this.getTableList()
+            } else {
+              this.$message.error({ message: res.message, showClose: true })
+            }
           })
         })
+        .catch(() => {})
     },
-    handleEdit (row) {
-      this.taskData = row
-      this.$refs.task.isShow()
-    },
-    handleDel (row) {
-      this.$confirm('此操将进行删除操作, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          system.sjsbTaskRemove(row.id)
-            .then((res) => {
-              if ((res.code = 200)) {
-                this.$message({
-                  type: 'success',
-                  message: res.message,
-                })
-                this.featchData()
-              }
-            })
-            .catch((error) => {
-              this.$alert(error, '提示', {
-                confirmButtonText: '确定',
-                type: 'error'
-              })
-            })
+    // 重置用户密码
+    resetPassword(data) {
+      const ids = []
+      if (data instanceof Array) {
+        data.forEach((item) => {
+          ids.push(item.id)
         })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消',
+      } else {
+        ids.push(data)
+      }
+      console.log(ids, 'ids')
+      if (ids.length === 0) {
+        this.$message({
+          message: '请选择需要重置密码的用户!',
+          showClose: true
+        })
+        return
+      }
+      this.$confirm(
+        `<div  class="customer-message-wrapper">
+              <h5 class="title">确定要重置密码吗</h5>
+               <p class="result">执行后，数据将
+                 <span >无法恢复</span>
+                </p>
+        </div>`,
+        '执行确认',
+        {
+          dangerouslyUseHTMLString: true,
+          customClass: 'customer-delete',
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          resetPassword(ids).then((res) => {
+            if (res.status === 1) {
+              this.$message.success({ message: res.message, showClose: true })
+              this.getTableList()
+            } else {
+              this.$message.error({ message: res.message, showClose: true })
+            }
           })
         })
+        .catch(() => {})
+    },
+    // 新增回显
+    reloadTableData() {
+      this.getTableList()
+    },
+    showimport() {
+      this.$refs.leadingIn.import(this.tableUrl, '人员')
     }
   }
-}
+};
 </script>
 <style scoped lang="scss">
 @import "~@/styles/mixin.scss";