From 59ca988875dcdffad09c4c2b06001e90a696db5d Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 22 Feb 2024 18:16:21 +0800
Subject: [PATCH] XXX

---
 ah-jjzhgd-web/src/views/system/user/index.vue | 392 +++++++++++-------
 1 file changed, 250 insertions(+), 142 deletions(-)

diff --git a/ah-jjzhgd-web/src/views/system/user/index.vue b/ah-jjzhgd-web/src/views/system/user/index.vue
index 9c26b33..3407ad1 100644
--- a/ah-jjzhgd-web/src/views/system/user/index.vue
+++ b/ah-jjzhgd-web/src/views/system/user/index.vue
@@ -1,30 +1,53 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <el-input v-model="listQuery.name" placeholder="用户名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <el-input v-model="listQuery.nickName" placeholder="用户昵称" style="width: 200px;" class="filter-item ml-20" @keyup.enter.native="handleFilter" />
-      <el-input v-model="listQuery.phone" placeholder="用户手机" style="width: 200px;" class="filter-item ml-20" @keyup.enter.native="handleFilter" />
-      <!-- <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
-          <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
-        </el-select>
-        <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
-          <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
-        </el-select> -->
-      <!-- <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
-          <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
-        </el-select> -->
-      <el-button v-waves style="margin-left: 40px;" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
+      <el-input
+        v-model="listQuery.userName"
+        placeholder="用户名"
+        style="width: 200px"
+        class="filter-item"
+        :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-input
+        v-model="listQuery.loginName"
+        placeholder="用户昵称"
+        style="width: 200px"
+        class="filter-item ml-20"
+        :maxlength="30"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-input
+        v-model="listQuery.phone"
+        placeholder="手机号"
+        style="width: 200px"
+        class="filter-item ml-20"
+        :maxlength="11"
+        @keyup.enter.native="handleFilter"
+      />
+      <el-button
+        v-waves
+        style="margin-left: 40px"
+        class="filter-item"
+        type="primary"
+        icon="el-icon-search"
+        @click="handleFilter"
+      >
         查询
       </el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
+      <el-button class="filter-item" style="margin-left: 10px" type="primary" icon="el-icon-edit" @click="handleCreate">
         新增
       </el-button>
-      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
+      <el-button
+        v-waves
+        :loading="downloadLoading"
+        class="filter-item"
+        type="primary"
+        icon="el-icon-download"
+        @click="handleDownload"
+      >
         导出
       </el-button>
-      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
-          reviewer
-        </el-checkbox> -->
     </div>
 
     <el-table
@@ -34,88 +57,98 @@
       border
       fit
       highlight-current-row
-      style="width: 100%;"
+      style="width: 100%"
+      :max-height="tableHeight"
       @sort-change="sortChange"
     >
-      <el-table-column label="用户ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
-        <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
+      <el-table-column label="序号" align="center" width="80" :class-name="getSortClass('id')" type="index">
+        <template scope="scope">
+          <span>{{ (listQuery.pageNum - 1) * 10 + scope.$index + 1 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="用户名" min-width="40px">
-        <template slot-scope="{row}">
-          <span class="link-type" @click="handleUpdate(row)">{{ row.name }}</span>
+      <el-table-column label="用户名" min-width="40px" align="center">
+        <template slot-scope="{ row }">
+          <span class="link-type" @click="handleUpdate(row)">{{
+            row.userName
+          }}</span>
         </template>
       </el-table-column>
-      <el-table-column key="nickName" label="呢称" prop="nickName" min-width="40px" align="center" />
+      <el-table-column key="nickName" label="登录名" prop="loginName" min-width="40px" align="center" />
       <el-table-column key="phone" label="手机号码" align="center" prop="phone" :show-overflow-tooltip="true" />
-      <el-table-column label="日期" width="150px" align="center" :show-overflow-tooltip="true">
-        <template slot-scope="{row}">
-          <span>{{ row.date | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+      <el-table-column prop="delFlag" label="状态" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.delFlag === 0 ? 'primary' : 'danger'" disable-transitions>{{ scope.row.delFlag === 0 ?
+            '在用' : '注销' }}</el-tag>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="状态" class-name="status-col" width="100">
-          <template slot-scope="{row}">
-            <el-tag :type="row.status | statusFilter">
-              {{ row.status }}
-            </el-tag>
-          </template>
-        </el-table-column> -->
       <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
-        <template slot-scope="{row,$index}">
+        <template slot-scope="{ row, $index }">
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
             编辑
           </el-button>
-          <!-- <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
-              Publish
-            </el-button> -->
-          <!-- <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
-              Draft
-            </el-button> -->
-          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
+          <el-button v-if="row.status != 'deleted'" size="mini" type="danger" @click="handleDelete(row, $index)">
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="600px">
-
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
-        <el-form-item label="用户名" prop="name">
-          <el-input v-model="temp.name" placeholder="用户名" />
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="temp"
+        label-position="right"
+        label-width="80px"
+        style="width: 400px; margin-left: 50px"
+      >
+        <el-form-item label="用户名" prop="userName">
+          <el-input v-model="temp.userName" placeholder="用户名" :maxlength="30" />
         </el-form-item>
-        <el-form-item label="用户昵称" prop="nickName">
-          <el-input v-model="temp.nickName" placeholder="用户昵称" />
+        <el-form-item label="登录名" prop="loginName">
+          <el-input v-model="temp.loginName" placeholder="登录名" :maxlength="30" />
         </el-form-item>
         <el-form-item label="手机号" prop="phone">
-          <el-input v-model="temp.phone" placeholder="用户手机号" />
+          <el-input v-model="temp.phone" placeholder="手机号" :maxlength="11" />
         </el-form-item>
-        <el-form-item label="日期" prop="timestamp">
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="选择日期" style="width: 100%;" />
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="temp.password" type="password" placeholder="请输入密码" show-password />
         </el-form-item>
-        <el-form-item label="类型" prop="type">
-          <el-select v-model="temp.type" class="filter-item" placeholder="请选择类型" style="width: 100%;">
-            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+        <el-form-item label="组织机构" prop="orgId">
+          <treeselect v-model="temp.orgId" :options="orgOptions" :show-count="true" placeholder="请选择组织机构" />
+        </el-form-item>
+        <el-form-item label="登录权限" prop="loginType">
+          <el-checkbox-group v-model="temp.loginType">
+            <el-checkbox v-for="item in loginTypeArr" :key="item.value" :label="item.value">{{ item.name }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="账号类型" prop="userType">
+          <el-radio-group v-model="temp.userType">
+            <el-radio v-for="item in userTypeArr" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="角色类型" prop="roleId">
+          <el-select v-model="temp.roleId" class="filter-item" placeholder="请选择角色类型" style="width: 100%">
+            <el-option v-for="item in roleArr" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="状态">
-          <el-select v-model="temp.status" class="filter-item" placeholder="请选择状态" style="width: 100%;">
-            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
-          </el-select>
+        <el-form-item label="账号状态" prop="accountStatus">
+          <el-radio-group v-model="temp.accountStatus">
+            <el-radio v-for="item in accountStatusArr" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="备注">
-          <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
-        </el-form-item>
-
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">
-          关闭
-        </el-button>
-        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+        <el-button @click="dialogFormVisible = false"> 关闭 </el-button>
+        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
           提交
         </el-button>
       </div>
@@ -134,19 +167,57 @@
 </template>
 
 <script>
-import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
-import waves from '@/directive/waves' // waves directive
+import { fetchList, addUser, getUserById, editUser, delUser } from '@/api/user'
+import { fetchOrgList, fetchRoleList } from '@/api/select'
+import waves from '@/directive/waves'
 import { parseTime } from '@/utils'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
-
+import Pagination from '@/components/Pagination'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 const calendarTypeOptions = [
   { key: 'CN', display_name: 'China' },
   { key: 'US', display_name: 'USA' },
   { key: 'JP', display_name: 'Japan' },
   { key: 'EU', display_name: 'Eurozone' }
 ]
-
-// arr to obj, such as { CN : "China", US : "USA" }
+const loginTypeArr = [
+  {
+    value: '1',
+    name: 'app'
+  },
+  {
+    value: '2',
+    name: '大屏'
+  },
+  {
+    value: '3',
+    name: '后台'
+  }
+]
+const userTypeArr = [
+  {
+    value: '0',
+    name: '内部账号'
+  },
+  {
+    value: '1',
+    name: '外部账号'
+  }
+]
+const accountStatusArr = [
+  {
+    value: '0',
+    name: '正常'
+  },
+  {
+    value: '1',
+    name: '锁定'
+  },
+  {
+    value: '2',
+    name: '停用'
+  }
+]
 const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
   acc[cur.key] = cur.display_name
   return acc
@@ -154,7 +225,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
 
 export default {
   name: 'ComplexTable',
-  components: { Pagination },
+  components: { Pagination, Treeselect },
   directives: { waves },
   filters: {
     statusFilter(status) {
@@ -172,30 +243,39 @@ export default {
   data() {
     return {
       tableKey: 0,
+      loginTypeArr: loginTypeArr,
+      userTypeArr: userTypeArr,
+      loginType: [],
+      orgOptions: [],
+      roleArr: [],
+      accountStatusArr: accountStatusArr,
       list: null,
       total: 0,
       listLoading: true,
       listQuery: {
-        page: 1,
-        limit: 10,
-        importance: undefined,
-        title: undefined,
-        type: undefined,
-        sort: '+id'
+        pageNum: 1,
+        pageSize: 10
       },
+      tableHeight: 650,
       importanceOptions: [1, 2, 3],
       calendarTypeOptions,
-      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
+      sortOptions: [
+        { label: 'ID Ascending', key: '+id' },
+        { label: 'ID Descending', key: '-id' }
+      ],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
       temp: {
-        id: undefined,
-        importance: 1,
-        remark: '',
-        timestamp: new Date(),
-        title: '',
-        type: '',
-        status: 'published'
+        userId: null,
+        userName: '',
+        loginName: '',
+        phone: '',
+        password: '',
+        orgId: '',
+        loginType: [],
+        userType: '',
+        roleId: null,
+        accountStatus: null
       },
       dialogFormVisible: false,
       dialogStatus: '',
@@ -206,35 +286,47 @@ export default {
       dialogPvVisible: false,
       pvData: [],
       rules: {
-        name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
-        nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
-        phone: [{ required: true, message: '用户名手机号不能为空', trigger: 'blur' }]
-        // type: [{ required: true, message: 'type is required', trigger: 'change' }],
-        // timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
-
+        userName: [
+          { required: true, message: '用户名不能为空', trigger: 'blur' }
+        ],
+        loginName: [
+          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '用户名手机号不能为空', trigger: 'blur' }
+        ]
       },
       downloadLoading: false
     }
   },
   created() {
     this.getList()
+    this.getOrgList()
+    this.getRoleList()
   },
   methods: {
     getList() {
       this.listLoading = true
-      this.list = [{ id: 1, name: 'admin1', nickName: '管理员1', phone: '18000000001', date: '2024-02-21' }, { id: 2, name: 'admin2', nickName: '管理员2', phone: '18000000002', date: '2024-02-22' }, { id: 3, name: 'admin3', nickName: '管理员3', phone: '18000000003', date: '2024-02-23' }]
-      this.total = 3
-      // fetchList(this.listQuery).then(response => {
-      //   this.list = response.data.items
-      //   this.total = response.data.total
-      //   // Just to simulate the time of the request
-      //   setTimeout(() => {
-      this.listLoading = false
-      //   }, 1.5 * 1000)
-      // })
+      fetchList(this.listQuery).then((response) => {
+        this.list = response.rows
+        this.total = response.total
+        setTimeout(() => {
+          this.listLoading = false
+        }, 1 * 500)
+      })
+    },
+    getOrgList() {
+      fetchOrgList().then((response) => {
+        this.orgOptions = response.data
+      })
+    },
+    getRoleList() {
+      fetchRoleList().then((response) => {
+        this.roleArr = response.data
+      })
     },
     handleFilter() {
-      this.listQuery.page = 1
+      this.listQuery.pageNum = 1
       this.getList()
     },
     handleModifyStatus(row, status) {
@@ -260,13 +352,11 @@ export default {
     },
     resetTemp() {
       this.temp = {
-        id: undefined,
-        importance: 1,
-        remark: '',
-        timestamp: new Date(),
-        title: '',
-        status: 'published',
-        type: ''
+        userId: null,
+        userName: '',
+        loginName: '',
+        phone: '',
+        loginType: []
       }
     },
     handleCreate() {
@@ -280,24 +370,26 @@ export default {
     createData() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
-          this.temp.author = 'vue-element-admin'
-          createArticle(this.temp).then(() => {
-            this.list.unshift(this.temp)
+          console.log(this.temp)
+          this.temp.loginType = this.temp.loginType.toString()
+          addUser(this.temp).then((response) => {
             this.dialogFormVisible = false
-            this.$notify({
-              title: 'Success',
-              message: 'Created Successfully',
+            this.$message({
+              showClose: true,
+              message: response.msg,
               type: 'success',
               duration: 2000
             })
           })
+          this.getList()
         }
       })
     },
     handleUpdate(row) {
-      this.temp = Object.assign({}, row) // copy obj
-      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.resetTemp()
+      getUserById({ userId: row.userId }).then((response) => {
+        this.temp = Object.assign({}, response.data)
+      })
       this.dialogStatus = 'update'
       this.dialogFormVisible = true
       this.$nextTick(() => {
@@ -308,9 +400,9 @@ export default {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           const tempData = Object.assign({}, this.temp)
-          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
-          updateArticle(tempData).then(() => {
-            const index = this.list.findIndex(v => v.id === this.temp.id)
+          tempData.timestamp = +new Date(tempData.timestamp)
+          editUser(tempData).then(() => {
+            const index = this.list.findIndex((v) => v.id === this.temp.id)
             this.list.splice(index, 1, this.temp)
             this.dialogFormVisible = false
             this.$notify({
@@ -324,25 +416,39 @@ export default {
       })
     },
     handleDelete(row, index) {
-      this.$notify({
-        title: 'Success',
-        message: 'Delete Successfully',
-        type: 'success',
-        duration: 2000
+      this.$confirm(`确定要删除该数据吗？`, {
+        type: 'warning',
+        title: '操作提示',
+        beforeClose: async(action, instance, done) => {
+          if (action === 'confirm') {
+            delUser({ userId: row.userId }).then((response) => {
+              console.log(response)
+              this.getList()
+              done()
+            })
+          } else {
+            done()
+          }
+        }
       })
-      this.list.splice(index, 1)
     },
     handleFetchPv(pv) {
-      fetchPv(pv).then(response => {
+      fetchPv(pv).then((response) => {
         this.pvData = response.data.pvData
         this.dialogPvVisible = true
       })
     },
     handleDownload() {
       this.downloadLoading = true
-      import('@/vendor/Export2Excel').then(excel => {
+      import('@/vendor/Export2Excel').then((excel) => {
         const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
-        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
+        const filterVal = [
+          'timestamp',
+          'title',
+          'type',
+          'importance',
+          'status'
+        ]
         const data = this.formatJson(filterVal)
         excel.export_json_to_excel({
           header: tHeader,
@@ -353,13 +459,15 @@ export default {
       })
     },
     formatJson(filterVal) {
-      return this.list.map(v => filterVal.map(j => {
-        if (j === 'timestamp') {
-          return parseTime(v[j])
-        } else {
-          return v[j]
-        }
-      }))
+      return this.list.map((v) =>
+        filterVal.map((j) => {
+          if (j === 'timestamp') {
+            return parseTime(v[j])
+          } else {
+            return v[j]
+          }
+        })
+      )
     },
     getSortClass: function(key) {
       const sort = this.listQuery.sort