<template>
|
<el-dialog
|
:title="isEdit ? '编辑' : '新增'"
|
:visible="value"
|
width="50%"
|
:modal="false"
|
:show-close="false"
|
:before-close="onCancel"
|
:validate-on-rule-change="false"
|
>
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
label-width="150px"
|
class="orgForm"
|
>
|
<el-form-item label="志愿者名称:" prop="name">
|
<el-input
|
v-model.trim="form.name"
|
class="input-width"
|
placeholder="请输入志愿者名称"
|
size="small"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="志愿者手机号:" prop="phone">
|
<el-input
|
v-model.trim.number="form.phone"
|
class="input-width"
|
placeholder="请输入志愿者手机号"
|
size="small"
|
maxlength="11"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="志愿者照片" >
|
<article class="flex">
|
<div v-for="(i, j) in image" :key="j + '-ta-img'" class="avatar">
|
<span
|
class="close el-icon-close"
|
@click.stop="onCloseImage(i)"
|
></span>
|
<img :src="i" alt="" @click.stop="onScaleImage(i)" />
|
</div>
|
<div v-if="image.length < 1" class="avatar">
|
<v-upload slots @path="onPath">
|
<div class="avatar"><i class="el-icon-plus"></i><b>上传</b></div>
|
</v-upload>
|
</div>
|
</article>
|
</el-form-item>
|
<!---->
|
<el-form-item label="大学生:">
|
<el-radio-group v-model="form.isUniversity">
|
<el-radio :label="1">是</el-radio>
|
<el-radio :label="2">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!---->
|
<el-form-item v-if="form.isUniversity === 1" label="学校名称:">
|
<el-input
|
v-model.trim="form.universityName"
|
class="input-width"
|
placeholder="请输入学校名称"
|
size="small"
|
></el-input>
|
</el-form-item>
|
<!---->
|
<el-form-item label="志愿者身份证:" prop="idCard">
|
<el-input
|
v-model.trim="form.idCard"
|
class="input-width"
|
placeholder="请输入志愿者身份证"
|
size="small"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="志愿者队伍和组织" >
|
<el-cascader
|
v-model="teamName"
|
placeholder="选择志愿者队伍和组织"
|
:options="volunteerList"
|
@change="handleChangeV"
|
></el-cascader>
|
</el-form-item>
|
<el-form-item label="技能" prop="skillId">
|
<el-select v-model="form.skillId" placeholder="请选择">
|
<el-option
|
v-for="item in skilloptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="onCancel()">取消</el-button>
|
<el-button type="primary" @click="send('form')">确认</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { isvalidPhone, isIdcard } from "@/utils/validation";
|
// import * as organizationServicer from '@/services/organizationServicer';
|
import vUpload from "@/components/upload/upload1.vue";
|
var validPhone = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("请输入电话号码"));
|
} else if (!isvalidPhone(value)) {
|
callback(new Error("请输入正确的11位手机号码"));
|
} else {
|
callback();
|
}
|
};
|
|
var validIdcrad = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error("请输入身份证号码"));
|
} else if (!isIdcard(value)) {
|
callback(new Error("请输入正确的身份证号码"));
|
} else {
|
callback();
|
}
|
};
|
export default {
|
components: { vUpload },
|
props: {
|
value: { type: Boolean },
|
data: {},
|
},
|
|
data() {
|
return {
|
image: [],
|
form: {
|
name: "",
|
phone: "", // 联系人电话
|
idCard: "",
|
universityName: "", //大学名称
|
isUniversity: 1, //是否是在校大学生（1.是 2.否）
|
orgId: "", // 组织id
|
teamId: "", // 队伍id
|
skillId: "", // 技能ID
|
},
|
rules: {
|
name: [
|
{ required: true, message: "请输入志愿者名称", trigger: "blur" },
|
],
|
phone: [{ required: true, validator: validPhone, trigger: "change" }],
|
idCard: [{ required: true, validator: validIdcrad, trigger: "change" }],
|
skillId: [{ required: true, message: "请选择技能", trigger: "change" }],
|
},
|
volunteerList: [],
|
skilloptions: [],
|
teamName: [],
|
isEdit: false,
|
};
|
},
|
watch: {
|
data(val) {
|
if(val.id) {
|
this.isEdit = true;
|
this.form = {
|
id: val.id,
|
name: val.name,
|
phone: val.phone, // 联系人电话
|
idCard: val.idCard,
|
orgId: val.orgId, // 组织id
|
teamId: '', // 队伍id
|
skillId: val.skillId||'', // 技能ID
|
isUniversity:val.isUniversity||1,
|
universityName:val.universityName||''
|
}
|
}else {
|
this.isEdit = false;
|
this.form = {
|
id: "",
|
name: "",
|
phone:"",// 联系人电话
|
idCard:"",
|
orgId: "",
|
teamId: '', // 队伍id
|
skillId:"",
|
isUniversity:"",
|
universityName:"",
|
}
|
}
|
|
this.image = val.photoPath?[val.photoPath]:[];
|
this.teamName = [val.orgId, val.teamId]
|
// console.log(this.form)
|
// console.log(val)
|
}
|
},
|
mounted() {
|
this.orgList();
|
this.skillList();
|
},
|
methods: {
|
async orgList() {
|
this.$api.get("volunteer/org/list", "", (res) => {
|
this.volunteerList = res.map((d) => {
|
return {
|
value: d.id,
|
label: d.name,
|
children:
|
d.childList &&
|
d.childList.map((e) => {
|
return {
|
value: e.id,
|
label: e.name,
|
};
|
}),
|
};
|
});
|
});
|
},
|
async skillList() {
|
// return
|
// const res = await organizationServicer.skillList();
|
this.$api.get("volunteer/skill/list", "", (res) => {
|
this.skilloptions = res.map((d) => {
|
return {
|
label: d.name,
|
value: d.id,
|
};
|
});
|
});
|
},
|
handleChangeV(val) {
|
if (val.length > 1) {
|
this.form.orgId = val[0];
|
this.form.teamId = val[1];
|
} else {
|
this.form.orgId = val[0];
|
this.form.teamId = "";
|
}
|
},
|
/** 上传图片地址 */
|
onPath(v) {
|
this.image.push(v);
|
},
|
/** 删除上传图片 */
|
onCloseImage(i) {
|
this.image = this.image.filter((r) => {
|
return r !== i;
|
});
|
},
|
/** 取消 */
|
onCancel() {
|
this.$refs['form'].resetFields();
|
this.image = [];
|
this.teamName = [];
|
this.form={
|
name: "",
|
phone: "", // 联系人电话
|
idCard: "",
|
universityName: "", //大学名称
|
isUniversity: 1, //是否是在校大学生（1.是 2.否）
|
orgId: "", // 组织id
|
teamId: "", // 队伍id
|
skillId: "", // 技能ID
|
};
|
this.$emit("change", false);
|
},
|
|
/** 确认 */
|
send(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
// if (!this.image.length) {
|
// return this.$message.error("请上传志愿者图片");
|
// }
|
this.form.photoPath = this.image.join("");
|
// if (!this.form.isUniversity) {
|
// return this.$message("请选择是否在读大学");
|
// }
|
// if (this.form.isUniversity === 1 && !this.form.universityName) {
|
// return this.$message("请输入学校名称");
|
// }
|
if (this.isEdit) {
|
this.editExamine();
|
} else {
|
this.saveExamine();
|
}
|
// photoPath
|
} else {
|
console.log("error submit!!");
|
console.log(this.form);
|
return false;
|
}
|
});
|
},
|
|
async saveExamine() {
|
if (!this.image) {
|
return this.$message("请上传志愿者图片");
|
}
|
// if (!this.teamName.length) {
|
// return this.$message("请选择志愿者队伍和组织");
|
// }
|
this.$api.post("communitymanager/volunteer", this.form, (e) => {
|
this.$message("新增成功");
|
this.resetFields();
|
this.$emit("success");
|
});
|
},
|
resetFields() {
|
this.image = [];
|
this.$nextTick(() => {
|
this.$refs["form"].resetFields();
|
});
|
},
|
async editExamine() {
|
// return
|
if (!this.image) {
|
return this.$message("请上传志愿者图片");
|
}
|
if (!this.teamName) {
|
return this.$message("请选择志愿者队伍和组织");
|
}
|
// await organizationServicer.editVolunteer(this.form)
|
this.$api.put('communitymanager/volunteer',this.form,res=>{
|
this.$message('编辑成功');
|
this.resetFields()
|
this.$emit('success');
|
})
|
|
}
|
|
}
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.flex {
|
display: flex;
|
flex-wrap: wrap;
|
.avatar {
|
margin: 0 10px 10px 0;
|
position: relative;
|
width: 104px;
|
height: 104px;
|
border: 1px dashed #eee;
|
text-align: center;
|
color: #ccc;
|
cursor: pointer;
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
.close {
|
position: absolute;
|
right: -8px;
|
top: -8px;
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background-color: tomato;
|
color: #fff;
|
cursor: pointer;
|
}
|
i {
|
font-size: 25px;
|
margin: 30px auto 10px;
|
display: block;
|
}
|
b {
|
font-size: 12px;
|
}
|
}
|
}
|
</style>
|
