chenrui il y a 3 ans
Parent
commit
527120bc2b
2 fichiers modifiés avec 158 ajouts et 274 suppressions
  1. 47 106
      src/views/power/user/userList.vue
  2. 111 168
      src/views/power/user/userModal.vue

+ 47 - 106
src/views/power/user/userList.vue

@@ -1,16 +1,16 @@
 <template>
-  <a-card :bordered="false">
+  <a-card size="small" :bordered="false">
     <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="48">
+      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="15">
           <a-col :md="6" :sm="24">
             <a-form-item label="用户名称">
-              <a-input id="userList-name" allowClear v-model.trim="queryParam.name" placeholder="请输入用户名称" @pressEnter="$refs.table.refresh(true)"/>
+              <a-input id="userList-name" allowClear v-model.trim="queryParam.name" placeholder="请输入用户名称"/>
             </a-form-item>
           </a-col>
           <a-col :md="6" :sm="24">
             <a-form-item label="手机号码">
-              <a-input id="userList-phone" allowClear v-model.trim="queryParam.phone" placeholder="请输入手机号码" @pressEnter="$refs.table.refresh(true)"/>
+              <a-input id="userList-phone" allowClear v-model.trim="queryParam.phone" placeholder="请输入手机号码"/>
             </a-form-item>
           </a-col>
           <a-col :md="6" :sm="24">
@@ -25,9 +25,8 @@
         </a-row>
       </a-form>
     </div>
-    <a-divider/>
     <div class="table-operator">
-      <a-button type="primary" icon="plus" @click="openModal">新增</a-button>
+      <a-button type="primary" class="button-error" @click="openModal">新增</a-button>
     </div>
     <s-table
       ref="table"
@@ -35,11 +34,13 @@
       rowKey="id"
       :columns="columns"
       :data="loadData"
+      :scroll="{ x: 1010 }"
       style="word-break: break-all;"
       bordered
     >
       <span slot="status" slot-scope="text, record">
         <a-switch checkedChildren="启用" unCheckedChildren="禁用" v-model="record.loginFlag" @change="changeFlagHandle(text, record)"/>
+        <!-- <span v-else>{{ record.loginFlag==1?'已启用':'已禁用' }}</span> -->
       </span>
       <span slot="action" slot-scope="text, record">
         <a-icon
@@ -62,7 +63,7 @@
           @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>
   </a-card>
 </template>
 
@@ -81,55 +82,19 @@ export default {
       queryParam: {
         name: '',
         phone: '',
-        loginFlag: ''
+        loginFlag: undefined
       },
       showModal: false,
-      itemData: {}, // 编辑行数据
+      itemData: null, // 编辑行数据
       // 表头
       columns: [
-        {
-          title: '序号',
-          dataIndex: 'no',
-          width: 60,
-          align: 'center'
-        },
-        {
-          title: '创建时间',
-          dataIndex: 'createDate',
-          width: 150,
-          align: 'center'
-        },
-        {
-          title: '用户名称',
-          dataIndex: 'name',
-          width: 150,
-          align: 'center'
-        },
-        {
-          title: '手机号码',
-          dataIndex: 'phone',
-          width: 150,
-          align: 'center'
-        },
-        {
-          title: '角色',
-          width: 200,
-          align: 'center',
-          dataIndex: 'roleNames',
-          customRender: function (text) { return text || '--' }
-        },
-        {
-          title: '状态',
-          width: 150,
-          align: 'center',
-          scopedSlots: { customRender: 'status' }
-        },
-        {
-          title: '操作',
-          width: 150,
-          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: '角色', width: 200, align: 'center', dataIndex: 'roleNames', customRender: function (text) { return text || '--' } },
+        { title: '状态', width: 100, align: 'center', scopedSlots: { customRender: 'status' }, fixed: 'right' },
+        { title: '操作', width: 120, align: 'center', scopedSlots: { customRender: 'action' }, fixed: 'right' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
@@ -147,34 +112,40 @@ export default {
     }
   },
   methods: {
-    // 刷新列表
-    refreshTable () {
-      this.$refs.table.refresh(true)
+    // 新增
+    openModal () {
+      this.itemData = null
+      this.showModal = true
+    },
+    // 关闭弹框
+    handleUserCancel () {
+      this.showModal = false
+      this.itemData = null
     },
     // 重置
     reset () {
       this.queryParam.name = ''
       this.queryParam.phone = ''
-      this.queryParam.loginFlag = ''
+      this.queryParam.loginFlag = undefined
       this.$refs.table.refresh(true)
     },
-    // 新建
-    openModal () {
-      this.showModal = true
-      this.itemData = {}
-    },
     // 重置密码
     resetPassword (row) {
-      resetPSD({
-        id: row.id
-      }).then(res => {
-        if (res.status == 200) {
-          this.$message.success(res.message)
-        } else {
-          this.$message.error(res.message)
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确认重置密码吗?',
+        centered: true,
+        onOk () {
+          resetPSD({
+            id: row.id
+          }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+            }
+          })
         }
-      }).catch(() => {
-        this.$message.success(res.message)
       })
     },
     // 删除
@@ -183,8 +154,7 @@ export default {
       this.$confirm({
         title: '警告',
         content: '删除后无法恢复,确认删除?',
-        okText: '确定',
-        cancelText: '取消',
+        centered: true,
         onOk () {
           delectUserPower({
             id: row.id
@@ -195,23 +165,13 @@ 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
+      this.showModal = true
     },
     // 修改状态
     changeFlagHandle (text, record) {
@@ -220,33 +180,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>
-  .table-page-search-wrapper .ant-form-inline .ant-form-item{
-    margin-bottom: 0;
-  }
-  .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>

+ 111 - 168
src/views/power/user/userModal.vue

@@ -2,128 +2,88 @@
   <div>
     <a-modal
       centered
-      class="modalBox"
+      class="userEdit-modal"
+      :footer="null"
+      :maskClosable="false"
       :title="titleText"
       v-model="isshow"
-      @cancle="cancel"
-      width="45%"
-      :maskClosable="false">
-      <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,
-                  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-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-form-model-item label="角色" prop="roleNames" :label-col="{span: 3}" :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
-                >
+                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>
@@ -141,7 +101,7 @@ export default {
       type: Boolean,
       default: false
     },
-    data: {
+    nowData: {
       type: Object,
       default: function () {
         return {}
@@ -150,60 +110,64 @@ export default {
   },
   data () {
     return {
-      titleText: '添加用户',
+      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: '',
         sex: undefined,
+        loginFlag: '', // 状态
+        roleNames: undefined, // 角色
         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: '请输入正确的手机号码!' } ],
+        sex: [ { required: true, message: '请选择性别', trigger: 'change' } ],
+        loginFlag: [ { required: true, message: '请选择状态', trigger: 'change' } ],
+        roleNames: [ { required: true, message: '请选择角色', trigger: 'change' } ]
       }
-
     }
   },
   methods: {
-    cancel (e) {
-      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(',')
-
-          console.log(values.formData, ' formData.type222222222')
-          console.log(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData))
-          saveUserPower(Object.assign({ id: this.data.id ? this.data.id : '' }, values.formData)).then(res => {
-            console.log(res, 'res--save')
-            if (res.status + '' === '200') {
-              this.$message.success(res.message ? res.message : '保存成功')
-              this.$emit('refresh')
+      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)
+              _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.sex = undefined
-      this.formData.remarks = ''
-    },
     // 获取角色列表接口
     getRoleList () {
       getRoleList().then(res => {
@@ -215,61 +179,40 @@ 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
-          console.log(roleNames, 'roleNames')
-          if (roleNames) {
-            roleNames = roleNames.split(',')
-            console.log(roleNames, 'roleNames22')
-            const arr = []
-            console.log(this.roleList, 'this.roleList')
-
-            roleNames.map(item => {
-              const row = this.roleList.find(a => {
-                return a.name == item
-              })
-              if (row) {
-                arr.push(row.id)
-              }
-            })
-
-            console.log(arr, 'arrs')
-            this.formData.roleNames = arr
-          } else {
-            this.formData.roleNames = []
-          }
-
-          this.formData.loginFlag = Number(this.formData.loginFlag)
-          // this.formData.sex = Number(this.formData.sex)
-          console.log(this.formData, 'this.formData')
-        } else {
-          this.titleText = '添加用户'
-        }
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.form.name = ''
+        this.form.phone = ''
+        this.form.sex = undefined
+        this.form.loginFlag = ''
+        this.form.roleNames = undefined
+        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(',')
+            }
+            this.form.loginFlag = Number(this.nowData.loginFlag)
+          }
+        }
+      },
+      deep: true
     }
   }
 }
 </script>
-
-<style>
-  .ant-modal-footer {
-    display: none;
-  }
-</style>