<template>
<div class="classes-edit">
<div v-if="device === 'desktop'" style="padding: 10px;">
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px" label-position="left">
<el-form-item label="头像">
<el-upload class="avatar-uploader" drag action="" :limit="1" accept=".jpg, .png" :auto-upload="false"
:on-change="onUpload">
<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-form-item label="校区" prop="deptId">
<el-select style="width: 100%;" clearable v-model="form.deptId" placeholder="校区">
<el-option v-for="item in campusList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
</el-select>
</el-form-item>
<el-form-item label="学生姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入学生姓名" />
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input v-model="form.nickname" placeholder="请输入昵称" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="学生类型" prop="type">
<el-select style="width: 100%;" v-model="form.type" placeholder="请输入学生类型" clearable>
<el-option v-for="item in dict.type.c_type" :key="item.value" :label="item.label"
:value="Number(item.value)" />
</el-select>
</el-form-item>
<el-form-item label="来源" prop="source">
<el-input v-model="form.source" placeholder="请输入来源" />
</el-form-item>
<el-form-item label="生日" prop="birthday">
<el-date-picker style="width: 100%;" clearable v-model="form.birthday" type="date" value-format="yyyy-MM-dd"
placeholder="请选择生日">
</el-date-picker>
</el-form-item>
<el-form-item label="入学时间" prop="enrollDate">
<el-date-picker style="width: 100%;" clearable v-model="form.enrollDate" type="date" value-format="yyyy-MM-dd"
placeholder="请选择入学时间">
</el-date-picker>
</el-form-item>
<el-form-item label="跟进人" prop="userName">
<el-select filterable style="width: 100%;" clearable v-model="form.userId" placeholder="顾问">
<el-option v-for="item in adviserList" :key="item.userId" :label="item.nickName" :value="item.userId" />
</el-select>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-select style="width: 100%;" v-model="form.gender" placeholder="请输入性别">
<el-option label="男" :value="0"></el-option>
<el-option label="女" :value="1"></el-option>
<el-option label="其他" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="注释" prop="commet">
<el-input v-model="form.commet" type="textarea" placeholder="请输入注释" />
</el-form-item>
<!-- 用不了 -->
<el-form-item label="用户侧写标签" prop="tag">
<el-input v-model="form.tag" type="textarea" placeholder="请输入用户侧写标签" />
</el-form-item>
<!-- 用不了 -->
<el-form-item label="其他信息" prop="other">
<el-input v-model="form.other" type="textarea" placeholder="请输入其他信息" />
</el-form-item>
<el-form-item label="终身卡" prop="lifetime">
<el-select style="width: 100%;" v-model="form.lifetime" placeholder="请输入终身卡">
<el-option label="有" :value="1"></el-option>
<el-option label="无" :value="0"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" style="display: flex;align-items: center;">
<el-button style="margin-left: auto;" size="mini" type="primary" @click="submitForm">确 定</el-button>
<el-button size="mini" @click="$emit('cancel')">取 消</el-button>
</div>
</div>
<div v-if="device === 'mobile'" style="padding: 10px;">
<v-form ref="vFormRef" v-model="valid" lazy-validation>
<v-list>
<v-list-item>
<v-list-item-avatar style="color:rgba(0, 0, 0, .6);font-weight: 700;">
头像
</v-list-item-avatar>
<v-list-item-content>
<el-upload class="avatar-uploader" drag action="" :limit="1" accept=".jpg, .png" :auto-upload="false"
:on-change="onUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</v-list-item-content>
</v-list-item>
<v-list-item>
<el-row style="width:100%">
<el-col :span="12">
<v-text-field style="margin-right: 20px;" label="姓名" class="text-right" :rules="vrules.name"
hide-details="auto" v-model="form.name"></v-text-field>
</el-col>
<el-col :span="12">
<v-text-field label="外号" class="text-right" hide-details="auto" v-model="form.nickName"></v-text-field>
</el-col>
</el-row>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-text-field label="电话" hide-details="auto" v-model="form.phone" :rules="vrules.phone"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-campus-select v-model="form.deptId"></v-campus-select>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-text-field style="margin-right: 20px;" label="来源" class="text-right" :rules="vrules.source"
hide-details="auto" v-model="form.source"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-text-field value=" " readonly hide-details="auto" :rules="vrules.type">
<template v-slot:label>
学生类型
</template>
<template v-slot:append>
<v-chip-group active-class="primary--text" mandatory v-model="form.type">
<v-chip small :value="1">幼儿</v-chip>
<v-chip small :value="2">少儿</v-chip>
<v-chip small :value="3">成人</v-chip>
</v-chip-group>
</template>
</v-text-field>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-text-field value=" " readonly hide-details="auto" :rules="vrules.gender">
<template v-slot:label>
性别
</template>
<template v-slot:append>
<v-chip-group active-class="primary--text" mandatory v-model="form.gender">
<v-chip small :value="0">女</v-chip>
<v-chip small :value="1">男</v-chip>
<v-chip small :value="2">其他</v-chip>
</v-chip-group>
</template>
</v-text-field>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<VonedataSelect v-model="form.birthday" hint="生日"></VonedataSelect>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<VonedataSelect v-model="form.enrollDate" hint="入学时间"></VonedataSelect>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-adviser-select hint="跟进人" v-model="form.userId"></v-adviser-select>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-text-field label="注释" hide-details="auto" v-model="form.commet"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-text-field label="用户侧写标签" hide-details="auto" v-model="form.tag"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-text-field label="其他信息" hide-details="auto" v-model="form.other"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-text-field value=" " readonly hide-details="auto">
<template v-slot:label>
终身卡
</template>
<template v-slot:append>
<v-chip-group active-class="primary--text" mandatory v-model="form.lifetime">
<v-chip small :value="0">有</v-chip>
<v-chip small :value="1">无</v-chip>
</v-chip-group>
</template>
</v-text-field>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-btn text color="green" width="100%" @click="vsubmitForm">
{{ studentId ? '保存' : '新建' }}
</v-btn>
</v-list-item>
</v-list>
</v-form>
</div>
</div>
</template>
<script>
import SearchTeacher from '@/views/components/SearchTeacher/index.vue'
import { mapGetters } from 'vuex'
import { getStudents, addStudents, updateStudents } from '@/api/acd/students'
import COS from 'cos-js-sdk-v5'
import SparkMD5 from 'spark-md5'
import vCampusSelect from '@/components/acd/mobile/v-campus-select.vue';
import vAdviserSelect from '@/components/acd/mobile/v-adviser-select.vue';
import VonedataSelect from '@/components/acd/mobile/v-onedata-select.vue';
import { getFileToken } from '@/api/tool/file.js'
const cos = new COS({
// getAuthorization 必选参数
getAuthorization: function (options, callback) {
getFileToken().then(res => {
const data = res.data
callback({
TmpSecretId: data.tmpSecretId,
TmpSecretKey: data.tmpSecretKey,
SecurityToken: data.sessionToken,
// 建议返回服务器时间作为签名的开始时间,避免用户浏览器本地时间偏差过大导致签名错误
StartTime: Math.floor(data.startTime / 1000), // 时间戳,单位秒,如:1580000000
ExpiredTime: Math.floor(data.expiredTime / 1000)// 时间戳,单位秒,如:1580000000
})
})
}
})
export default {
name: 'AddStudent',
components: { SearchTeacher, vCampusSelect, vAdviserSelect,VonedataSelect },
props: ['studentId'],
dicts: ['class_status', 'c_type', 'class_level', 'class_phase', 'class_level', 'class_phase'],
computed: {
...mapGetters([
'campusListAll',
'campusList',
'teacherList',
'adviserList',
'genreList',
'device',
'userId'
])
},
data() {
return {
menu1: false,
menu2: false,
imageUrl: '',
rules: {
deptId: [
{ required: true, message: "校区id不能为空", trigger: "blur" }
],
name: [
{ required: true, message: "学生姓名不能为空", trigger: "blur" }
],
phone: [{ required: true, message: '手机号不能为空' },
{
type: 'number',
message: '手机号格式不正确',
trigger: 'blur',
transform(value) {
var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
if (!phonereg.test(value)) {
return false
} else {
return Number(value)
}
}
}],
source: [
{ required: true, message: "来源不能为空", trigger: "blur" }
],
birthday: [
{ required: true, message: "来源不能为空", trigger: "blur" }
],
enrollDate: [
{ required: true, message: "来源不能为空", trigger: "blur" }
],
gender: [
{ required: true, message: "来源不能为空", trigger: "blur" }
],
lifetime: [
{ required: true, message: "来源不能为空", trigger: "blur" }
],
type: [
{ required: true, message: "来源不能为空", trigger: "blur" }
],
study: [
{ required: true, message: "来源不能为空", trigger: "blur" }
],
userId: [
{ required: true, message: "来源不能为空", trigger: "blur" }
],
},
vrules: {
deptId: [v => !!v || '请选择校区'],
name: [v => !!v || '请选择姓名'],
phone: [v => {
const reg = /^1[3-9]\d{9}$/;
return reg.test(v) || "手机号码格式不正确"
}],
source: [v => !!v || '请输入来源'],
birthday: [v => !!v || '请选择生日'],
enrollDate: [v => !!v || '请选择入学时间'],
gender: [v => !!v || '请选择性别'],
lifetime: [v => !!v || '请选择是否有终身卡'],
type: [v => !!v || '请选择类型'],
userId: [v => !!v || '请选择跟进人'],
},
form: {},
fileform: {
name: '',
contentType: '',
birthday: ''
},
valid: false
}
},
created() {
if (this.studentId) {
this.getStudent()
}
},
watch: {
},
methods: {
onUpload(file) {
const that = this
console.log(file)
// 判断文件是否能上传
this.fileform.name = file.name.slice(0, file.name.lastIndexOf('.'))
const ext = file.name.slice((file.name.lastIndexOf('.') - 1 >>> 0) + 2)
if (ext) {
if (ext.toLowerCase() === 'png' || ext.toLowerCase() === 'jpg') {
this.fileform.contentType = 'IMAGE'
}
} else {
return
}
if (!this.fileform.contentType) {
this.fileform.file = []
this.$message.error('只允许上传图片/视频')
}
const fileReader = new FileReader()
const Spark = new SparkMD5.ArrayBuffer()
fileReader.readAsArrayBuffer(file.raw)
fileReader.onload = function (e) {
Spark.append(e.target.result)
const md5 = Spark.end()
// 正式上传步骤
cos.putObject({
Bucket: 'wxstorage-1318137298', /* 存储桶: */
Region: 'ap-guangzhou', /* 存储桶所在地域,必须字段 */
Key: 'student/1.' + ext.toLowerCase(), /* 必须是字符串 */
StorageClass: 'STANDARD', // 固定值
Body: file.raw, // 上传文件对象
SliceSize: 1024 * 1024 * 5, // 小于5mb
onTaskReady: function (taskId) { /* 非必须 */
console.log(taskId, "taskId")
},
onProgress: (progressData) => {
// 上传进度
console.log(JSON.stringify(progressData));
},
}, (err, data) => {
if (data) {
that.imageUrl = 'https://' + data.Location
console.log(that.imageUrl, "11111")
}
if (err) {
that.$message.error(err)
}
});
}
},
getStudent() {
getStudents(this.studentId).then(res => {
this.form = res.data
})
},
nameRules(e) {
if (!e) {
e = ''
}
let chineseCharacters = e.match(/[\u4e00-\u9fff]/g);
const chineseLen = chineseCharacters ? chineseCharacters.length : 0;
let nonChineseCharacters = e.match(/[^\u4e00-\u9fff]/g);
const nonChineseLen = nonChineseCharacters ? nonChineseCharacters.length : 0;
if (chineseLen > 5) {
return '姓名过长'
}
if (nonChineseLen > 20) {
return '姓名过长'
}
if (e.includes('(') || e.includes(')') || e.includes('(') || e.includes(')')) {
return '乱七八糟备注不要加到名字里'
}
return true
},
reset() {
this.form = {
id: null,
deptId: null,
name: null,
nickname: null,
phone: null,
type: null,
source: null,
birthday: null,
enrollDate: null,
userId: null,
gender: null,
lifetime: 0,
commet: null,
tag: null,
other: null,
createUserId: null,
createTime: null,
updateTime: null,
status: 0,
};
this.resetForm("form");
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateStudents(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.reset()
this.$emit('cancel')
this.$emit('update')
});
} else {
addStudents(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.reset()
this.$emit('cancel')
this.$emit('update')
});
}
}
});
},
vsubmitForm() {
if (this.$refs.vFormRef.validate()) {
if (this.form.id != null) {
updateStudents(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.reset()
this.$emit('cancel')
this.$emit('update')
});
} else {
addStudents(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.reset()
this.$emit('cancel')
this.$emit('update')
});
}
}
}
}
}
</script>
<style scoped>
::v-deep.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
::v-deep.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
::v-deep.avatar-uploader .el-upload-dragger {
font-size: 28px;
color: #8c939d;
width: 100px !important;
height: 100px !important;
line-height: 100px;
text-align: center;
}
.avatar {
width: 100px;
height: 100px;
display: block;
}
</style>
记录文件或图片element上传
最新推荐文章于 2024-09-10 20:26:21 发布