|
|
@@ -8,7 +8,7 @@
|
|
|
@searchFn='searchFn'
|
|
|
@resetFn='resetFn'
|
|
|
:moreOperation='false'
|
|
|
- :addBtn='true'
|
|
|
+ @addFn="addFn"
|
|
|
>
|
|
|
<template slot='search'>
|
|
|
<el-form-item label='手机号'>
|
|
|
@@ -19,14 +19,57 @@
|
|
|
</el-form-item>
|
|
|
</template>
|
|
|
</baseTable>
|
|
|
+
|
|
|
+ <el-dialog width="900px" :title="formDialog.title" :visible.sync="formDialog.visible" :close-on-click-modal="false">
|
|
|
+ <el-form
|
|
|
+ ref="userForm"
|
|
|
+ size="small"
|
|
|
+ label-width="120px"
|
|
|
+ :model="formDialog.formData"
|
|
|
+ :rules="formDialog.formRules"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="用户名" prop="username" v-if="formDialog.isAdd">
|
|
|
+ <el-input v-model.trim="formDialog.formData.username" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="姓名" prop="fullName">
|
|
|
+ <el-input v-model.trim="formDialog.formData.fullName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号码" prop="mobile">
|
|
|
+ <el-input v-model.trim="formDialog.formData.mobile" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电子邮箱" prop="email">
|
|
|
+ <el-input v-model.trim="formDialog.formData.email" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label='头像1' prop='avatar'>
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="upload.action"
|
|
|
+ :headers="upload.headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ >
|
|
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" :loading="formDialog.loading" @click="submitFn">确定</el-button>
|
|
|
+ <el-button @click="cancelFn">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { queryTreePage } from '@api/wishing/tree';
|
|
|
+import { createUser, removeUser, updateUserDetail } from '@api/upms/api-user';
|
|
|
|
|
|
export default {
|
|
|
name: 'WishingTree',
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
tableHeader: [
|
|
|
@@ -78,17 +121,74 @@ export default {
|
|
|
label: '创建时间',
|
|
|
prop: 'createdAt',
|
|
|
align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '修改时间',
|
|
|
- prop: 'createdAt',
|
|
|
- align: 'center'
|
|
|
}
|
|
|
],
|
|
|
tableData: [],
|
|
|
defaultSearch: {},
|
|
|
searchParams: Object.assign({}, this.$search),
|
|
|
- uploadParams: {}
|
|
|
+ upload: {
|
|
|
+ headers: { Authorization: `Bearer ${this.$store.getters.accessToken}` },
|
|
|
+ action: '/dgapi/upms/attachment/upload-file',
|
|
|
+ extraData: {}
|
|
|
+ },
|
|
|
+ imageUrl: '',
|
|
|
+ formDialog: {
|
|
|
+ title: '',
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ isAdd: false,
|
|
|
+ formData: {
|
|
|
+ id: 0,
|
|
|
+ username: '',
|
|
|
+ fullName: '',
|
|
|
+ email: '',
|
|
|
+ avatar: '',
|
|
|
+ coverImage: ''
|
|
|
+ },
|
|
|
+ defaultData: {
|
|
|
+ sex: '3',
|
|
|
+ attachDataList: []
|
|
|
+ },
|
|
|
+ formRules: {
|
|
|
+ username: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入用户名',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ fullName: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入姓名',
|
|
|
+ trigger: 'blur'
|
|
|
+ }],
|
|
|
+ mobile: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入手机号码',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ len: 11,
|
|
|
+ message: '长度11个字符',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ type: 'email',
|
|
|
+ message: '请输入正确的电子邮箱',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ roleIds: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择对应的角色',
|
|
|
+ trigger: 'change'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -120,11 +220,109 @@ export default {
|
|
|
let vm = this;
|
|
|
vm.searchParams = Object.assign({}, vm.defaultSearch, this.$search);
|
|
|
vm.searchFn();
|
|
|
+ },
|
|
|
+ addFn() {
|
|
|
+ let vm = this;
|
|
|
+ vm.formDialog.title = '新增';
|
|
|
+ vm.formDialog.visible = true;
|
|
|
+ vm.formDialog.loading = false;
|
|
|
+ vm.formDialog.isAdd = true;
|
|
|
+ vm.formDialog.formData = Object.assign({}, vm.formDialog.defaultData);
|
|
|
+ },
|
|
|
+ cancelFn() {
|
|
|
+ let vm = this;
|
|
|
+ vm.formDialog.visible = false;
|
|
|
+ vm.formDialog.loading = false;
|
|
|
+ vm.formDialog.isAdd = false;
|
|
|
+ vm.formDialog.formData = Object.assign({}, vm.formDialog.defaultData);
|
|
|
+ vm.$refs.userForm.resetFields();
|
|
|
+ },
|
|
|
+ submitFn() {
|
|
|
+ let vm = this;
|
|
|
+ vm.formDialog.loading = true;
|
|
|
+ vm.$refs.userForm.validate((valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ vm.formDialog.loading = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (vm.formDialog.formData.id) {
|
|
|
+ let formData = vm.formDialog.formData;
|
|
|
+ updateUserDetail(formData).then(
|
|
|
+ (res) => {
|
|
|
+ vm.$message.success('修改成功');
|
|
|
+ vm.formDialog.visible = false;
|
|
|
+ vm.formDialog.loading = false;
|
|
|
+ vm.searchFn(true);
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ vm.$notify.error({
|
|
|
+ title: error.data.msg,
|
|
|
+ message: error.data.data
|
|
|
+ });
|
|
|
+ vm.formDialog.loading = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ let formData = vm.formDialog.formData;
|
|
|
+ createUser(formData).then(
|
|
|
+ (res) => {
|
|
|
+ vm.$message.success('新增成功');
|
|
|
+ vm.formDialog.visible = false;
|
|
|
+ vm.formDialog.loading = false;
|
|
|
+ vm.searchFn(true);
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ vm.$notify.error({
|
|
|
+ title: error.data.msg,
|
|
|
+ message: error.data.data
|
|
|
+ });
|
|
|
+ vm.formDialog.loading = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delFn(row) {
|
|
|
+ let vm = this;
|
|
|
+ vm.$confirm('此操作将删除该记录, 是否继续?', '提示', {
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ let ids = [row.id];
|
|
|
+ removeUser({ ids: ids }).then(
|
|
|
+ (res) => {
|
|
|
+ vm.$message.success('删除成功');
|
|
|
+ vm.searchFn(true);
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ vm.$notify.error({
|
|
|
+ title: error.data.msg,
|
|
|
+ message: error.data.data
|
|
|
+ });
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSuccess(res, file, fileList) {
|
|
|
+ console.log(res);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped type="less">
|
|
|
+.avatar-uploader .avatar {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+ border: 2px dashed #d9d9d9;
|
|
|
+}
|
|
|
</style>
|