<template>
<div class="createPost-container">
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
<sticky :class-name="'sub-navbar '+postForm.status">
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm" :disabled="isdisabledFn">保存
</el-button>
</sticky>
<div class="createPost-main-container">
<el-row :gutter="20">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>用户相关</span>
</div>
<el-row>
<el-col :span="24">
<div class="postInfo-container">
<el-row>
<el-col :span="12" >
<el-form-item style="margin-bottom: 20px;" label-width="75px" label="ID:" v-if="isEdit">
<el-input v-model="postForm.user_id" type="text" style="width: 230px;" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item style="margin-bottom: 20px;" label-width="75px" label="注册时间:" v-if="isEdit">
<el-input v-model="postForm.create_time" type="text" style="width: 230px;"
disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<!--<el-col :span="12">-->
<!--<el-form-item style="margin-bottom: 20px;" label-width="75px" label="密码:" v-if="isEdit">-->
<!--<el-input v-model="postForm.password" type="text" style="width: 230px;" disabled/>-->
<!--</el-form-item>-->
<!--</el-col>-->
<el-col :span="12">
<el-form-item style="margin-bottom: 20px;" label-width="75px" label="帖子:" v-if="isEdit">
<el-input v-model="postForm.topic_nums" type="text" style="width: 230px;"
disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item style="margin-bottom: 20px;" label-width="75px" label="*用户名:" prop="nick_name">
<el-input v-model="postForm.nick_name" type="text" style="width: 230px"/>
</el-form-item>
</el-col>
<!--<el-col :span="12">-->
<!--<el-form-item label-width="75px" label="展示时间:" class="postInfo-container-item">-->
<!--<el-date-picker v-model="postForm.show_time " type="datetime" format="yyyy-MM-dd HH:mm:ss"-->
<!--placeholder="选择日期时间" :picker-options="expireTimeOption" style="width: 230px"/>-->
<!--</el-form-item>-->
<!--</el-col>-->
</el-row>
<el-row>
<el-col :span="12">
<el-form-item style="margin-bottom: 20px;" label-width="75px" label="电话:" prop="phone">
<el-input v-model="postForm.phone" type="text" style="width: 230px;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item style="margin-bottom: 20px;" label-width="75px" label="邮箱:" prop="email">
<el-input v-model="postForm.email" type="text" style="width: 230px"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label-width="75px" label="*性别:" prop="gender">
<el-select v-model="postForm.gender" :placeholder="'性别:'" clearable
class="postInfo-container-item"
style="width: 230px">
<el-option v-for="item in GenderTypeOptions" :key="item.key" :label="item.display_name"
:value="item.key"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="75px" label="*城市:">
<el-select v-model="city" :remote-method="getRemoteCityList" filterable remote clearable
value-key="id"
placeholder="搜索城市" style="width: 230px">
<el-option v-for="(item,index) in regionListOptions" :key="item+index" :label="item"
:value="item"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label-width="75px" label="标签:">
<el-select v-model="tags" :remote-method="getRemoteTagList" filterable remote clearable
multiple value-key="id"
placeholder="搜索标签" style="width: 720px">
<el-option v-for="(item,index) in tagListOptions" :key="item+index" :label="item"
:value="item"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item style="margin-bottom: 20px;margin-left: 10px" label-width="75px" label="马甲号:">
<el-radio-group v-model="postForm.is_puppet">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item style="margin-bottom: 20px;margin-left: 10px" label-width="75px" label="推荐:">
<el-radio-group v-model="postForm.is_recommend">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<div style="margin-bottom: 20px;">
<el-form-item style="margin-bottom: 40px;" label-width="85px" label="*用户头像:" prop="avatar">
<span v-model="uploadType"></span>
<Upload v-model="postForm.avatar" :uploadType="uploadType"/>
</el-form-item>
</div>
</el-card>
</el-row>
</div>
</el-form>
</div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/singleImage3'
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky' // 粘性header组件
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import {validateURL} from '@/utils/validate'
import {UserDetail, fetchGroupUser, userCreate} from '@/api/user'
import { tagSearch, groupSearch, citySearch} from '@/api/remoteSearch'
const defaultForm = {
status: 'draft',
uploadType: '',
is_recommend: 0,
user_id: '',
create_time: '',
topic_nums: 0,
password: '',
avatar: '',
nick_name: '',
gender: '',
tags: [],
is_puppet: 1,
city: '',
}
export default {
name: 'UserDetail',
components: {Tinymce, MDinput, Upload, Sticky, Pagination},
directives: {waves},
props: {
isEdit: {
type: Boolean,
default: false
}
},
data() {
const validateRequire = (rule, value, callback) => {
if (value === '') {
this.$message({
message: rule.field + '为必传项',
type: 'error'
})
callback(new Error(rule.field + '为必传项'))
} else {
callback()
}
}
return {
postForm: Object.assign({}, defaultForm),
loading: false,
city: '',
tags: [],
rules: {
nick_name: [{validator: validateRequire, trigger: 'blur'}],
avatar: [{validator: validateRequire, trigger: 'blur'}],
avatar: [{validator: validateRequire, trigger: 'blur'}],
},
tempRoute: {},
GenderTypeOptions: [
{'key': 0, 'display_name': '男'},
{'key': 1, 'display_name': '女'},
],
regionListOptions: [],
tagListOptions: [],
uploadType: 99,
isdisabledFn: false
}
},
computed: {
lang() {
return this.$store.getters.language
}
},
created() {
if (this.isEdit) {
const id = this.$route.params && this.$route.params.id
this.fetchData(id)
} else {
this.postForm = Object.assign({}, defaultForm)
}
this.tempRoute = Object.assign({}, this.$route)
},
methods: {
fetchData(id) {
UserDetail(id).then(response => {
let rep = response.data.data
this.postForm = response.data.data
if (response.data.data.city.id && response.data.data.city.name){
this.city = response.data.data.city.id + ':' + response.data.data.city.name
}else{
this.city = ''
}
for (let i = 0;i < rep.tag_list.length; i++){
this.tags.push(rep.tag_list[i].id + ':' + rep.tag_list[i].name)
}
}).catch(err => {
console.log(err)
})
},
submitForm() {
this.$refs.postForm.validate(valid => {
if (valid) {
this.loading = true
if (this.city === ''){
this.$message.error('城市必填~')
this.loading = false
return false
}
console.log(this.postForm.gender)
if (this.postForm.gender === ''){
this.$message.error('性别必填~')
this.loading = false
return false
}
this.isdisabledFn = true
this.postForm.city = this.city;
this.postForm.tags = JSON.stringify(this.tags)
userCreate(this.postForm).then(response => {
this.$notify({
title: '成功',
message: response.data.data.message,
type: 'success',
duration: 2000
})
setTimeout(() => {
this.$router.push('/user/list')
}, 1000)
}).catch(err => {
this.$notify({
title: '失败',
message: '操作失败',
type: 'danger',
duration: 2000
})
});
this.postForm.status = 'published'
this.loading = false
} else {
console.log('error submit!!')
return false
}
})
},
getRemoteCityList(query) {
citySearch(query).then(response => {
if (!response.data.data.data) return
this.regionListOptions = response.data.data.data
})
},
getRemoteTagList(query) {
tagSearch(query).then(response => {
if (!response.data.data.data) return
this.tagListOptions = response.data.data.data
})
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.createPost-container {
position: relative;
.createPost-main-container {
padding: 40px 45px 20px 50px;
.postInfo-container {
position: relative;
@include clearfix;
margin-bottom: 10px;
.postInfo-container-item {
float: left;
}
}
.editor-container {
min-height: 500px;
margin: 0 0 30px;
.editor-upload-btn-container {
text-align: right;
margin-right: 10px;
.editor-upload-btn {
display: inline-block;
}
}
}
}
.word-counter {
width: 40px;
position: absolute;
right: -10px;
top: 0px;
}
}
</style>