[update] 完善系统、登录页

src/views/systemOverview/systemSettings/modules/UserInfoModal.vue

@@ -0,0 +1,188 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="556"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    wrapClassName="ant-modal-cust-warp"
+    style="top:5%;height: 85%;overflow-y: hidden">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form" class="custom-vertical-form flex-column-between">
+        <a-form-item>
+          <div class="upload-avatar-box">
+            <j-image-upload v-decorator="['avatar', validatorRules.avatar]"
+                            class="upload-avatar"
+                            :number="1"
+                            uploadLimitHideBtn
+                            accept='.png,.PNG,.jpg,.JPG'></j-image-upload>
+          </div>
+        </a-form-item>
+        <a-row type="flex" :gutter="20" class="mb-20">
+          <a-col :span="12">
+            <a-form-item label="用户名称">
+              <a-input placeholder="请输入用户名称" :max-length="50" disabled
+                       @change="event => event.target.value = event.target.value.trim()"
+                       v-decorator="['username', validatorRules.username]"/>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="用户类别">
+              <j-dict-select-tag :triggerChange="true"
+                                 dictCode="user_type"
+                                 v-decorator="['userType', validatorRules.userType]"
+                                 placeholder="请选择用户类别">
+              </j-dict-select-tag>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item label="所属单位">
+              <j-select-depart
+                placeholder="请选择所属单位"
+                v-decorator="['selecteddeparts', validatorRules.selecteddeparts]"
+                :backDepart="true"
+                :treeOpera="true"></j-select-depart>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item label="联系方式">
+              <a-input placeholder="请输入联系方式"
+                       v-decorator="['phone', validatorRules.phone]" />
+            </a-form-model-item>
+
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { editUserInfo } from '@api/systemOverview'
+import { getAction } from '@api/manage'
+export default {
+  name: 'UserInfoModal',
+  data () {
+    return {
+      title: '操作',
+      form: this.$form.createForm(this),
+      visible: false,
+      roleDisabled: false,
+      model: {},
+      confirmLoading: false,
+      validatorRules: {
+        username: { rules: [{ required: true, message: '请输入用户名称' }], validateTrigger: 'blur' },
+        userType: { rules: [{ required: true, message: '请选择用户类别' }], validateTrigger: 'change' },
+        selecteddeparts: { rules: [{ required: true, message: '请选择所属单位' }], validateTrigger: 'change' },
+        phone: { rules: [{ required: true, message: '请输入联系方式' }, { validator: this.validateMobile }], validateTrigger: 'blur' }
+      }
+    }
+  },
+  methods: {
+    add () {
+      this.edit(this.modelDefault)
+    },
+    edit (record) {
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(this.model)
+      })
+      this.getUserDeparts(record.id)
+    },
+    close () {
+      this.form.resetFields()
+      this.model = {}
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk () {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const params = Object.assign({}, this.model, values)
+          editUserInfo(params).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    // 获取用户部门
+    getUserDeparts (userid) {
+      const that = this
+      getAction('/sys/user/userDepartList', { userId: userid }).then((res) => {
+        if (res.success) {
+          const departOptions = []
+          const selectDepartKeys = []
+          for (let i = 0; i < res.result.length; i++) {
+            selectDepartKeys.push(res.result[i].key)
+            // 新增负责部门选择下拉框
+            departOptions.push({
+              value: res.result[i].key,
+              label: res.result[i].title
+            })
+          }
+          that.model.selecteddeparts = selectDepartKeys.join(',')
+          this.$nextTick(() => {
+            this.form.setFieldsValue({
+              selecteddeparts: this.model.selecteddeparts
+            })
+          })
+          that.nextDepartOptions = departOptions
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.upload-avatar-box {
+  position: relative;
+  width: calc(100% + 40px);
+  height: 168px;
+  margin: -13px -20px 0;
+  background: url("~@/assets/images/systemOverview/systemSettings/upload-avatar.png") no-repeat center center;
+  background-size: 100%;
+
+  .upload-avatar {
+    width: 120px;
+    height: 120px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    // 隐藏上传组件
+    /deep/.ant-upload-select {
+      opacity: 0;
+    }
+    /deep/.ant-upload-list-picture-card .ant-upload-list-item {
+      border: none;
+      width: 120px;
+      height: 120px;
+    }
+    /deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
+    /deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
+      opacity: 1;
+    }
+  }
+}
+</style>