Browse Source

bug修复

chenrui 4 years ago
parent
commit
eca60c0e64
2 changed files with 144 additions and 273 deletions
  1. 22 97
      src/views/power/user/userList.vue
  2. 122 176
      src/views/power/user/userModal.vue

+ 22 - 97
src/views/power/user/userList.vue

@@ -35,6 +35,7 @@
       rowKey="id"
       :columns="columns"
       :data="loadData"
+      :scroll="{ x: 1350 }"
       style="word-break: break-all;"
       bordered
     >
@@ -88,7 +89,7 @@
           @click="handleSetting(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="showModal = false"></userModal>
     <!-- 分区设置 -->
     <UpdateArea ref="UpdateArea" :openUdModal="openUdModal" @ok="$refs.table.refresh(true)" @close="openUdModal=false"></UpdateArea>
   </a-card>
@@ -110,66 +111,22 @@ export default {
       queryParam: {
         name: '',
         phone: '',
-        loginFlag: ''
+        loginFlag: undefined
       },
       showModal: false,
       openUdModal: false,
-      itemData: {}, // 编辑行数据
+      itemData: null, // 编辑行数据
       // 表头
       columns: [
-        {
-          title: '序号',
-          dataIndex: 'no',
-          width: 80,
-          align: 'center'
-        },
-        {
-		      title: '创建时间',
-          dataIndex: 'createDate',
-          width: 160,
-          align: 'center'
-        },
-        {
-          title: '用户账号',
-          dataIndex: 'loginName',
-          align: 'center'
-        },
-        {
-          title: '用户名称',
-          dataIndex: 'name',
-          align: 'center'
-        },
-        {
-          title: '手机号码',
-          dataIndex: 'phone',
-          width: 120,
-          align: 'center'
-        },
-        {
-          title: '所属分区',
-          dataIndex: 'subareaName',
-          align: 'center',
-          customRender: function (text) { return text || '--' },
-          ellipsis: true
-        },
-        {
-          title: '角色',
-          width: 200,
-          align: 'center',
-          dataIndex: 'roleNames'
-        },
-        {
-          title: '状态',
-          width: 120,
-          align: 'center',
-          scopedSlots: { customRender: 'status' }
-        },
-        {
-          title: '操作',
-          width: 160,
-          align: 'center',
-          scopedSlots: { customRender: 'action' }
-        }
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '创建时间', dataIndex: 'createDate', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '用户名称', dataIndex: 'name', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '手机号码', dataIndex: 'phone', width: 150, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '用户账号', dataIndex: 'loginName', width: 150, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '所属分区', dataIndex: 'subareaName', width: 150, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '角色', dataIndex: 'roleNames', width: 200, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '状态', width: 100, align: 'center', scopedSlots: { customRender: 'status' }, fixed: 'right' },
+        { title: '操作', width: 160, align: 'center', scopedSlots: { customRender: 'action' }, fixed: 'right' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
@@ -187,21 +144,17 @@ export default {
     }
   },
   methods: {
-    // 刷新列表
-    refreshTable () {
-      this.$refs.table.refresh(true)
-    },
     // 新增
     openModal () {
       this.showModal = true
-      this.itemData = {}
+      this.itemData = null
     },
     // 重置
     reset () {
       this.queryParam.name = ''
       this.queryParam.phone = ''
-      this.queryParam.loginFlag = ''
-      this.refreshTable()
+      this.queryParam.loginFlag = undefined
+      this.$refs.table.refresh(true)
     },
     // 分区设置
     handleSetting (row) {
@@ -210,6 +163,7 @@ export default {
     },
     // 重置密码
     resetPassword (row) {
+      const _this = this
       this.$confirm({
         title: '提示',
         content: '确认重置密码吗?',
@@ -219,12 +173,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)
           })
         }
       })
@@ -246,21 +197,11 @@ export default {
             } else {
               _this.$message.error(res.message)
             }
-          }).catch(() => {
-            _this.$message.success(res.message)
           })
         }
       })
     },
-    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
     },
@@ -271,30 +212,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>

+ 122 - 176
src/views/power/user/userModal.vue

@@ -2,155 +2,101 @@
   <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="24">
           <a-col :span="12">
-            <!-- 用户账号 -->
-            <a-form-item label="用户账号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
-              <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">
+              <a-input id="userEdit-loginName" v-model.trim="form.loginName":maxLength="50" allowClear placeholder="请输入用户账号(最多50个字符)"/>
+            </a-form-model-item>
           </a-col>
-          <a-col :span="12" v-if="!data.id">
-            <!-- 用户密码 -->
-            <a-form-item label="用户密码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+          <a-col :span="12" v-if="!(nowData&&nowData.id)">
+            <a-form-model-item label="用户密码" prop="password">
               <a-input
-                placeholder="请输入用户密码"
-                :maxLength="16"
+                id="userEdit-password"
                 type="password"
-                v-decorator="['formData.password', {
-                  initialValue: formData.password,
-                  rules: [{ required: true, message: '请输入用户密码!' },{pattern: /^[0-9A-Za-z]{6,16}$/, message: '用户密码为6到16位数字或大小写字母组成!'}] }]"
-              />
-            </a-form-item>
+                v-model.trim="form.password"
+                :maxLength="16"
+                allowClear
+                placeholder="请输入用户密码(最多16个字符)"/>
+            </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>
@@ -168,7 +114,7 @@ export default {
       type: Boolean,
       default: false
     },
-    data: {
+    nowData: {
       type: Object,
       default: function () {
         return {}
@@ -179,57 +125,66 @@ 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: '',
         password: '',
-        sex: '',
+        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: '用户账号为数字或大小写字母组成!' } ],
+        password: [ { required: true, message: '请输入用户密码', trigger: 'blur' }, { pattern: /^[0-9A-Za-z]{6,16}$/, message: '用户密码为6到16位数字或大小写字母组成!' } ],
+        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.password = ''
-      this.formData.sex = ''
-      this.formData.remarks = ''
-    },
     // 获取角色列表接口
     getRoleList () {
       getRoleList().then(res => {
@@ -241,52 +196,43 @@ 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.name = ''
+        this.form.phone = ''
+        this.form.loginName = ''
+        this.form.sex = undefined
+        this.form.loginFlag = ''
+        this.form.roleNames = []
+        this.form.remarks = ''
+        this.titleText = '新增用户'
       } else {
-        this.cancel()
+        this.getRoleList()
       }
+    },
+    nowData: {
+      handler (newValue, oldValue) {
+        if (this.isshow && newValue) {
+          if (this.nowData.id) { //  编辑
+            this.titleText = '编辑用户'
+            this.form = Object.assign({}, this.nowData)
+            if (this.nowData.roleIds) {
+              this.form.roleNames = this.nowData.roleIds.split(',')
+            } else {
+              this.form.roleNames = []
+            }
+            this.form.loginFlag = Number(this.nowData.loginFlag)
+          }
+        }
+      },
+      deep: true
     }
   }
 }
 </script>
-
-<style>
-  .ant-modal-footer {
-    display: none;
-  }
-</style>