Browse Source

用户管理

chenrui 4 years ago
parent
commit
b3196ee0ee
3 changed files with 287 additions and 207 deletions
  1. 32 44
      src/views/power/user/userList.vue
  2. 106 163
      src/views/power/user/userModal.vue
  3. 149 0
      src/views/power/user/userSyncModal.vue

+ 32 - 44
src/views/power/user/userList.vue

@@ -64,18 +64,21 @@
           @click="delect(record)"/>
       </span>
     </s-table>
-    <userModal :visible="showModal" @refresh="$refs.table.refresh(true)" :data="itemData" @close="showModal = false"></userModal>
+    <!-- 自建账号  新增/编辑 -->
+    <userModal :visible="showModal" @refresh="$refs.table.refresh(true)" :nowData="itemData" @close="handleUserCancel"></userModal>
+    <userSyncModal :openModal="showSyncModal" :nowData="itemData" @close="handleCancel" />
   </a-card>
 </template>
 
 <script>
 import { STable, VSelect } from '@/components'
 import userModal from './userModal.vue'
+import userSyncModal from './userSyncModal.vue'
 import { resetPSD, updateEnableStatus, getPowerUserList, delectUserPower } from '@/api/power-user.js'
 export default {
   name: 'UserList',
   components: {
-    STable, VSelect, userModal
+    STable, VSelect, userModal, userSyncModal
   },
   data () {
     return {
@@ -83,10 +86,10 @@ export default {
       queryParam: {
         name: '',
         phone: '',
-        loginFlag: ''
+        loginFlag: undefined
       },
       showModal: false,
-      itemData: {}, // 编辑行数据
+      itemData: null, // 编辑行数据
       // 表头
       columns: [
         { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
@@ -111,25 +114,27 @@ export default {
           return res.data
         })
       },
-      optionAlertShow: false
+      optionAlertShow: false,
+      showSyncModal: false //  同步账号编辑弹框
     }
   },
   methods: {
-    // 刷新列表
-    refreshTable () {
-      this.$refs.table.refresh(true)
-    },
     // 新增
     openModal () {
+      this.itemData = null
       this.showModal = true
-      this.itemData = {}
+    },
+    // 关闭弹框
+    handleUserCancel () {
+      this.showModal = false
+      this.itemData = null
     },
     // 重置
     reset () {
       this.queryParam.name = ''
       this.queryParam.phone = ''
-      this.queryParam.loginFlag = ''
-      this.refreshTable()
+      this.queryParam.loginFlag = undefined
+      this.$refs.table.refresh(true)
     },
     // 重置密码
     resetPassword (row) {
@@ -143,12 +148,9 @@ export default {
             id: row.id
           }).then(res => {
             if (res.status == 200) {
-              this.$message.success(res.message)
-            } else {
-              this.$message.error(res.message)
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
             }
-          }).catch(() => {
-            this.$message.success(res.message)
           })
         }
       })
@@ -176,17 +178,19 @@ export default {
         }
       })
     },
-    getBizStr (storeBizList) {
-      const str = []
-      storeBizList.forEach(item => {
-        str.push(item.bizTypeName)
-      })
-      return str.join(',')
-    },
     handleEdit (row) {
       console.log(row, 'row')
-      this.showModal = true
       this.itemData = row
+      if (row.ownerOrgFlag == 1) { //  自建
+        this.showModal = true
+      } else { //  同步过来的,非自建
+        this.showSyncModal = true
+      }
+    },
+    // 关闭弹框 同步账号
+    handleCancel () {
+      this.itemData = null
+      this.showSyncModal = false
     },
     // 修改状态
     changeFlagHandle (text, record) {
@@ -195,30 +199,14 @@ export default {
         flag: record.loginFlag ? '1' : '0'
       }
       updateEnableStatus(_data).then(res => {
-        if (res.status + '' === '200') {
+        if (res.status == 200) {
           this.$message.success(res.message)
+          this.$refs.table.refresh()
         } else {
-          record.loginFlag = !record.loginFlag
+          this.$refs.table.refresh()
         }
       })
     }
   }
 }
 </script>
-<style scoped>
-  .action-button{
-    line-height: 40px;
-    white-space: nowrap;
-    padding: 5px 10px;
-    background-color: #1890ff;
-    border-radius: 4px;
-    color: #fff;
-    margin-right: 5px;
-  }
-  .red-text{
-    background-color: red;
-  }
-  .reset-text {
-    background-color: #31b50b;
-  }
-</style>

+ 106 - 163
src/views/power/user/userModal.vue

@@ -2,141 +2,90 @@
   <div>
     <a-modal
       centered
-      class="modalBox"
+      class="userEdit-modal"
+      :footer="null"
       :maskClosable="false"
       :title="titleText"
       v-model="isshow"
-      @cancle="cancel"
-      width="45%">
-      <a-form :form="form" @submit="handleSubmit">
+      @cancle="isshow=false"
+      :width="800">
+      <a-form-model
+        id="userEdit-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
         <a-row :gutter="24">
           <a-col :span="12">
-            <!-- 用户名称 -->
-            <a-form-item label="用户名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+            <a-form-model-item label="用户名称" prop="name">
               <a-input
-                placeholder="请输入用户名称(最多30个字符)"
+                id="userEdit-name"
+                v-model.trim="form.name"
+                @change="filterEmpty"
                 :maxLength="30"
-                v-decorator="['formData.name', {
-                  initialValue: formData.name,
-                  getValueFromEvent: $filterEmpty,
-                  rules: [{ required: true, message: '请输入用户名称(30个字以内)!' },{pattern:'^[^<|>]{1,30}$',message:'请输入不含<或>的字符,最多30个字符'}] }]"
-              />
-            </a-form-item>
+                allowClear
+                placeholder="请输入用户名称(最多30个字符)"/>
+            </a-form-model-item>
           </a-col>
           <a-col :span="12">
-            <!-- 手机号码 -->
-            <a-form-item label="手机号码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
-              <a-input
-                placeholder="请输入手机号码"
-                :maxLength="11"
-                v-decorator="['formData.phone', {
-                  initialValue: formData.phone,
-                  rules: [{ required: true, message: '请输入手机号码!' },{pattern:/^[1][0-9]{10}$/, message: '请输入正确的手机号码!'}] }]"
-              />
-            </a-form-item>
+            <a-form-model-item label="手机号码" prop="phone">
+              <a-input id="userEdit-phone" v-model.trim="form.phone":maxLength="11" allowClear placeholder="请输入手机号码"/>
+            </a-form-model-item>
           </a-col>
         </a-row>
         <a-row :gutter="20">
           <a-col :span="24">
-            <!-- 用户账号 -->
-            <a-form-item label="用户账号" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-              <a-input
-                placeholder="请输入用户账号"
-                :maxLength="50"
-                v-decorator="['formData.loginName', {
-                  initialValue: formData.loginName,
-                  rules: [{ required: true, message: '请输入用户账号!' },{pattern: /^[0-9A-Za-z]+$/, message: '用户账号为数字或大小写字母组成!'}] }]"
-              />
-            </a-form-item>
+            <a-form-model-item label="用户账号" prop="loginName" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+              <a-input id="userEdit-loginName" v-model.trim="form.loginName":maxLength="50" allowClear placeholder="请输入用户账号(最多50个字符)"/>
+            </a-form-model-item>
           </a-col>
         </a-row>
         <a-row :gutter="24">
           <!-- 性别 -->
           <a-col :span="12">
-            <a-form-item label="性别" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+            <a-form-model-item label="性别" prop="sex">
               <v-select
+                ref="sex"
+                id="userEdit-sex"
                 code="SEX"
-                v-decorator="[
-                  'formData.sex',
-                  {
-                    initialValue: formData.sex,
-                    rules: [{ required: true, message: '请选择性别!' }] },
-                ]"
+                v-model="form.sex"
+                placeholder="请选择性别"
                 allowClear ></v-select>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
           <!-- 状态 -->
           <a-col :span="12">
-            <a-form-item label="状态" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
-              <a-radio-group
-                name="radioGroup"
-                v-decorator="[
-                  'formData.loginFlag',
-                  {
-                    initialValue: formData.loginFlag,
-                    rules: [{ required: true, message: '请选择状态!' }] },
-                ]"
-              >
+            <a-form-model-item label="状态" prop="loginFlag">
+              <a-radio-group name="radioGroup" v-model="form.loginFlag" placeholder="请选择状态">
                 <a-radio :value="1">是</a-radio>
                 <a-radio :value="0">否</a-radio>
               </a-radio-group>
-
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
         </a-row>
         <a-row :gutter="24">
           <a-col :span="24">
-            <a-form-item label="角色" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-              <a-select
-                v-decorator="[
-                  'formData.roleNames',
-                  {
-                    initialValue: formData.roleNames,
-                    rules: [{ required: true, message: '请选择状态!' }] },
-                ]"
-                mode="multiple"
-                style="width: 100%"
-                placeholder="请选择角色"
-              >
-                <a-select-option
-                  v-for="item in roleList"
-                  :key="item.id"
-                  :disabled="item.isEnable == '0' ? true : false"
-                >{{ item.name }}</a-select-option
-                >
+            <a-form-model-item label="角色" prop="roleNames" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+              <a-select placeholder="请选择角色" id="userSyncEdit-roleNames" allowClear v-model="form.roleNames" mode="multiple">
+                <a-select-option v-for="item in roleList" :key="item.id" :value="item.id" :disabled="item.isEnable == '0' ? true : false">{{ item.name }}</a-select-option>
               </a-select>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
-
         </a-row>
         <a-row :gutter="24">
           <a-col :span="24">
-            <a-form-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-              <a-textarea
-                v-decorator="[
-                  'formData.remarks',
-                  {
-                    initialValue: formData.remarks,
-                    rules: [] },
-                ]"
-                style="min-height: 50px;"
-                :maxLength="500"
-                placeholder="请输入备注(最多500个字符)"
-                autoSize />
-            </a-form-item>
+            <a-form-model-item label="备注" prop="remarks" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+              <a-textarea id="userEdit-remarks" v-model.trim="form.remarks":maxLength="500" allowClear placeholder="请输入备注(最多500个字符)"/>
+            </a-form-model-item>
           </a-col>
         </a-row>
-
-        <a-form-item :wrapper-col="{ span: 24, offset: 12 }">
-          <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }">
-            保存
-          </a-button>
-          <a-button :style="{ marginLeft: '8px' }" @click="cancel">
-            取消
-          </a-button>
-        </a-form-item>
-      </a-form>
-
+        <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
+          <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }">保存</a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="isshow=false">取消</a-button>
+        </a-form-model-item>
+      </a-form-model>
     </a-modal>
   </div>
 </template>
@@ -154,7 +103,7 @@ export default {
       type: Boolean,
       default: false
     },
-    data: {
+    nowData: {
       type: Object,
       default: function () {
         return {}
@@ -165,55 +114,64 @@ export default {
     return {
       titleText: '添加用户',
       isshow: this.visible,
-      formLayout: 'horizontal',
-      form: this.$form.createForm(this, { name: 'miniForm' }),
       roleList: [],
-      formData: {
-        roleNames: undefined, // 角色
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
         name: '',
-        loginFlag: '', // 活动状态
         phone: '',
         loginName: '',
         sex: undefined,
+        loginFlag: '', // 状态
+        roleNames: [], // 角色
         remarks: ''
+      },
+      rules: {
+        name: [ { required: true, message: '请输入用户名称', trigger: 'blur' }, { pattern: '^[^<|>]{1,30}$', message: '请输入不含<或>的字符,最多30个字符' } ],
+        phone: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^[1][0-9]{10}$/, message: '请输入正确的手机号码!' } ],
+        loginName: [ { required: true, message: '请输入用户账号', trigger: 'blur' }, { pattern: /^[0-9A-Za-z]+$/, message: '用户账号为数字或大小写字母组成!' } ],
+        sex: [ { required: true, message: '请选择性别', trigger: 'change' } ],
+        loginFlag: [ { required: true, message: '请选择状态', trigger: 'change' } ],
+        roleNames: [ { required: true, message: '请选择角色', trigger: 'change' } ]
       }
     }
   },
   methods: {
-    cancel () {
-      this.clear()
-      this.$emit('close')
+    // 过滤空格
+    filterEmpty () {
+      let str = this.form.name
+      str = str.replace(/\ +/g, '')
+      str = str.replace(/[ ]/g, '')
+      str = str.replace(/[\r\n]/g, '')
+      this.form.name = str
     },
     // 保存提交
     handleSubmit () {
       const _this = this
-      this.form.validateFields((err, values) => {
-        console.log(values, 'values222')
-        if (!err) {
-          values.formData.roleNames = values.formData.roleNames.join(',')
-          saveUserPower(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData)).then(res => {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(_this.form))
+          params.roleNames = _this.form.roleNames.join(',')
+          params.id = _this.nowData && _this.nowData.id ? _this.nowData.id : null
+          saveUserPower(params).then(res => {
             if (res.status == 200) {
-              this.$message.success(res.message ? res.message : '保存成功')
-              this.$emit('refresh')
+              _this.$message.success(res.message)
+              _this.$emit('refresh')
               setTimeout(function () {
-                _this.cancel()
+                _this.isshow = false
               }, 300)
+            } else {
+
             }
           })
+        } else {
+          console.log('error submit!!')
+          return false
         }
       })
     },
-    clear () {
-      this.form.resetFields()
-      delete this.formData.id
-      this.formData.roleNames = []
-      this.formData.name = ''
-      this.formData.loginFlag = ''
-      this.formData.phone = ''
-      this.formData.loginName = ''
-      this.formData.sex = undefined
-      this.formData.remarks = ''
-    },
     // 获取角色列表接口
     getRoleList () {
       getRoleList().then(res => {
@@ -225,52 +183,37 @@ export default {
       })
     }
   },
-  mounted () {
-    this.getRoleList()
-  },
-  beforeCreate () {
-    this.form = this.$form.createForm(this, { name: 'miniForm' })
-  },
   watch: {
     visible (newValue, oldValue) {
       this.isshow = newValue
     },
     isshow (newValue, oldValue) {
-      if (newValue) {
-        if (this.data.id) { // 编辑
-          this.titleText = '编辑用户'
-          this.formData = Object.assign({}, this.data)
-          delete this.formData.no
-          let roleNames = this.formData.roleNames
-          if (roleNames) {
-            roleNames = roleNames.split(',')
-            const arr = []
-            roleNames.map(item => {
-              const row = this.roleList.find(a => {
-                return a.name == item
-              })
-              if (row) {
-                arr.push(row.id)
-              }
-            })
-            this.formData.roleNames = arr
-          } else {
-            this.formData.roleNames = []
-          }
-          this.formData.loginFlag = Number(this.formData.loginFlag)
-        } else {
-          this.titleText = '添加用户'
-        }
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.form.roleNames = []
       } else {
-        this.cancel()
+        this.getRoleList()
       }
+    },
+    nowData: {
+      handler (newValue, oldValue) {
+        if (this.isShow && newValue) {
+          if (this.data.id) { //  编辑
+            this.titleText = '编辑用户'
+            this.form = Object.assign({}, this.nowData)
+            if (this.nowData.roleIds) {
+              this.form.roleNames = this.nowData.roleIds.split(',')
+            } else {
+              this.form.roleNames = []
+            }
+          } else { //  新增
+            this.titleText = '新增用户'
+          }
+        }
+      },
+      deep: true
     }
   }
 }
 </script>
-
-<style>
-  .ant-modal-footer {
-    display: none;
-  }
-</style>

+ 149 - 0
src/views/power/user/userSyncModal.vue

@@ -0,0 +1,149 @@
+<template>
+  <a-modal
+    centered
+    class="userSyncEdit-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="编辑"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <!-- 表单 -->
+    <div>
+      <a-form-model
+        id="userSyncEdit-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-model-item label="用户名称">{{ detailData && detailData.name ? detailData.name : '--' }}</a-form-model-item>
+        <a-form-model-item label="用户账号">{{ detailData && detailData.loginName ? detailData.loginName : '--' }}</a-form-model-item>
+        <a-form-model-item label="用户角色" prop="roleNames">
+          <a-select placeholder="请选择角色" id="userSyncEdit-roleNames" allowClear v-model="form.roleNames" mode="multiple">
+            <a-select-option v-for="item in roleList" :key="item.id" :value="item.id" :disabled="item.isEnable == '0' ? true : false">{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+      </a-form-model>
+      <div class="btn-cont">
+        <a-button type="primary" id="userSyncEdit-modal-save" @click="handleSave">保存</a-button>
+        <a-button id="userSyncEdit-modal-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { getRoleList, saveUserPower } from '@/api/power-user'
+export default {
+  name: 'UserSyncModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    nowData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {
+        roleNames: []
+      },
+      rules: {
+        roleNames: [ { required: true, message: '请选择用户角色', trigger: 'change' } ]
+      },
+      roleList: [],
+      detailData: null
+    }
+  },
+  methods: {
+    //  保存
+    handleSave () {
+      const _this = this
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(_this.detailData))
+          params.roleNames = _this.form.roleNames.join(',')
+          saveUserPower(params).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('ok')
+              setTimeout(function () {
+                _this.isShow = false
+              }, 300)
+            } else {
+
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 获取角色列表接口
+    getRoleList () {
+      getRoleList().then(res => {
+        if (res.status == 200) {
+          this.roleList = res.data
+        } else {
+          this.roleList = []
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.detailData = null
+        this.form.roleNames = []
+      } else {
+        this.getRoleList()
+      }
+    },
+    nowData: {
+      handler (newValue, oldValue) {
+        if (this.isShow && newValue) {
+          this.detailData = newValue
+          if (this.detailData.roleIds) {
+            this.form.roleNames = this.detailData.roleIds.split(',')
+          } else {
+            this.form.roleNames = []
+          }
+        }
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .userSyncEdit-modal{
+    .ant-modal-body {
+    	padding: 40px 40px 24px;
+    }
+    .btn-cont {
+    	text-align: center;
+    	margin: 35px 0 10px;
+    }
+  }
+</style>