|
|
@@ -0,0 +1,423 @@
|
|
|
+<template>
|
|
|
+ <div class="TranslatorBase-all">
|
|
|
+ <el-dialog width="1000px" title="翻译人员信息" :visible.sync="TranslatorBaseform">
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm form-style">
|
|
|
+ <el-form-item label="所在地区" prop="area">
|
|
|
+ <el-input v-model="ruleForm.area"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别" prop="sex">
|
|
|
+ <el-radio-group v-model="ruleForm.sex">
|
|
|
+ <el-radio label="男"></el-radio>
|
|
|
+ <el-radio label="女"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="证件照" prop="photo">
|
|
|
+ <el-upload
|
|
|
+ class="avatars-uploader"
|
|
|
+ action=""
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-change="handleAvatarchange">
|
|
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatars">
|
|
|
+ <i v-else class="el-icon-plus avatars-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="pj-form">
|
|
|
+ <el-form-item label="联系电话" prop="tel">
|
|
|
+ <el-input v-model="ruleForm.tel"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="邮箱号" prop="email">
|
|
|
+ <el-input v-model="ruleForm.email"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="微信号" prop="wechatNo">
|
|
|
+ <el-input v-model="ruleForm.wechatNo"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="其他账号" prop="otherSocialAccounts">
|
|
|
+ <el-input v-model="ruleForm.otherSocialAccounts"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="语种" prop="language">
|
|
|
+ <el-input v-model="ruleForm.language"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="费用" prop="price">
|
|
|
+ <el-input-number :precision="2" placeholder="邀请费用" v-model="ruleForm.price" :controls='false'></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="币种" prop="currency">
|
|
|
+ <el-select filterable v-model="ruleForm.currency" placeholder="请选择活动区域">
|
|
|
+ <el-option v-for="(item,index) in currencyarr" :key="index" :label="item.name" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item></el-form-item>
|
|
|
+ <el-form-item label="简历/证书" >
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ ref="upload"
|
|
|
+ action=""
|
|
|
+ :multiple="true"
|
|
|
+ :on-change="handleChange"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :file-list="fileList"
|
|
|
+ :auto-upload="false">
|
|
|
+ <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
|
|
+ <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
|
|
|
+ <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="TranslatorBase-form-btn">
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
|
|
|
+ <el-button @click="resetForm('ruleForm')">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ <div class="TranslatorBase-title">
|
|
|
+ <div>翻译人员库</div>
|
|
|
+ </div>
|
|
|
+ <div class="TranslatorBase-search">
|
|
|
+ <div class="TranslatorBase-search-ul">
|
|
|
+ <div class="TranslatorBase-search-li">
|
|
|
+ <label>翻译人姓名</label>
|
|
|
+ <el-input size="small" placeholder="请输入内容" v-model="input" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="TranslatorBase-search-li">
|
|
|
+ <el-button size="small" type="primary">查询</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="TranslatorBase-search-li">
|
|
|
+ <label>请输入内容</label>
|
|
|
+ <el-input size="small" placeholder="请输入内容" v-model="input" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="TranslatorBase-search-li">
|
|
|
+ <label>请输入内容</label>
|
|
|
+ <el-input size="small" placeholder="请输入内容" v-model="input" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="TranslatorBase-search-li">
|
|
|
+ <label>请输入内容</label>
|
|
|
+ <el-input size="small" placeholder="请输入内容" v-model="input" clearable></el-input>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button size="small" type="primary">新增</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="TranslatorBase-table">
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="date" label="日期" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="地址">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ input: '',
|
|
|
+ tableData: [{
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ }],
|
|
|
+ TranslatorBaseform: true,
|
|
|
+ Id:0,
|
|
|
+ ruleForm: {
|
|
|
+ area:'',
|
|
|
+ name: '',
|
|
|
+ sex:'',
|
|
|
+ photo:'',
|
|
|
+ tel:'',
|
|
|
+ email:'',
|
|
|
+ wechatNo:'',
|
|
|
+ otherSocialAccounts:'',
|
|
|
+ language:'',
|
|
|
+ price:0,
|
|
|
+ currency:'',
|
|
|
+ files:[],
|
|
|
+ remark:'',
|
|
|
+ region: '',
|
|
|
+ },
|
|
|
+ currencyarr:[],
|
|
|
+ rules: {
|
|
|
+ area: [
|
|
|
+ { required: true, message: '请输入所在地区', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入姓名', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ sex: [
|
|
|
+ { required: true, message: '请选择性别', trigger: 'change' },
|
|
|
+ ],
|
|
|
+ tel: [
|
|
|
+ { required: true, message: '请输入联系电话', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ email: [
|
|
|
+ { required: true, message: '请输入邮箱号', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ wechatNo: [
|
|
|
+ { required: true, message: '请输入微信号', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ otherSocialAccounts: [
|
|
|
+ { required: true, message: '请输入其他账号', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ language: [
|
|
|
+ { required: true, message: '请输入语种', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ price: [
|
|
|
+ { required: true, message: '请输入费用', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ currency: [
|
|
|
+ { required: true, message: '请选择币种', trigger: 'change' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+
|
|
|
+ //touxiang
|
|
|
+ imageUrl: '',
|
|
|
+ //附件
|
|
|
+ fileList:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取基础数据
|
|
|
+ TranslatorLibraryInit(){
|
|
|
+ var that = this;
|
|
|
+ var url = "/api/Resource/TranslatorLibraryInit"
|
|
|
+ this.$axios({
|
|
|
+ method: 'get',
|
|
|
+ url: url,
|
|
|
+ }).then(function (res) {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ that.currencyarr=res.data.data;
|
|
|
+ } else {
|
|
|
+ that.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.TranslatorLibraryOp(0)
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ //头像
|
|
|
+ handleAvatarchange(file){
|
|
|
+ if (file.status !== 'ready') return;
|
|
|
+ const isJPG = file.raw.type === 'image/jpeg';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+ if (!isJPG) {
|
|
|
+ return this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ return this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
+ }
|
|
|
+ this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
+ this.getBase64(file)
|
|
|
+ },
|
|
|
+ //base64转译
|
|
|
+ getBase64(e) {
|
|
|
+ // 选择的文件
|
|
|
+ let file = e.raw;
|
|
|
+ // 判断文件是否读取完毕，读取完毕后执行
|
|
|
+ if (window.FileReader) {
|
|
|
+ let reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.onload = e => {
|
|
|
+ let base64String = e.target.result;
|
|
|
+ // 此处可对该base64进行获取赋值传入后端
|
|
|
+ this.ruleForm.photo=base64String;
|
|
|
+ console.log(base64String);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //附件
|
|
|
+ // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
|
|
|
+ handleChange(file, fileList) {
|
|
|
+ if (file.status !== 'ready') return;
|
|
|
+ this.fileList = fileList;
|
|
|
+ const formData = []
|
|
|
+ this.fileList.forEach((file) => {
|
|
|
+ if(file.raw!=undefined){
|
|
|
+ formData.push(file.raw);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.ruleForm.files=formData
|
|
|
+ },
|
|
|
+ //保存
|
|
|
+ TranslatorLibraryOp(opStatus){
|
|
|
+ var that = this;
|
|
|
+ var url = "api/Resource/TranslatorLibraryOp"
|
|
|
+ this.$axios({
|
|
|
+ method: 'post',
|
|
|
+ url: url,
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer '
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ portType:1,
|
|
|
+ opStatus:opStatus,
|
|
|
+ id:that.Id,
|
|
|
+ area:that.ruleForm.area,
|
|
|
+ name:that.ruleForm.name,
|
|
|
+ sex:that.ruleForm.sex=='男'?1:2,
|
|
|
+ photo:that.ruleForm.photo,
|
|
|
+ tel:that.ruleForm.tel,
|
|
|
+ email:that.ruleForm.email,
|
|
|
+ wechatNo:that.ruleForm.wechatNo,
|
|
|
+ otherSocialAccounts:that.ruleForm.otherSocialAccounts,
|
|
|
+ language:that.ruleForm.language,
|
|
|
+ price:that.ruleForm.price,
|
|
|
+ currency:that.ruleForm.currency,
|
|
|
+ files:that.ruleForm.files,
|
|
|
+ remark:'',
|
|
|
+ }
|
|
|
+ }).then(function (res) {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ that.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitUpload() {
|
|
|
+ this.$refs.upload.submit();
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ },
|
|
|
+ handlePreview(file) {
|
|
|
+ console.log(file);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.TranslatorLibraryInit();
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.TranslatorBase-all {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ box-shadow: 0 0 5px #0005;
|
|
|
+ border-radius: 10px;
|
|
|
+ min-height: 830px;
|
|
|
+}
|
|
|
+
|
|
|
+.TranslatorBase-title {
|
|
|
+ display: flex;
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #555;
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.TranslatorBase-search {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.TranslatorBase-search-ul {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.TranslatorBase-search-li {
|
|
|
+ width: 300px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.TranslatorBase-search-li label {
|
|
|
+ color: #606266;
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.TranslatorBase-table {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.form-style{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap:wrap ;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.form-style .el-form-item{
|
|
|
+ width:33%;
|
|
|
+}
|
|
|
+.TranslatorBase-form-btn{
|
|
|
+ text-align: right;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.form-style .avatars-uploader .el-upload{
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.form-style .el-select{
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.form-style .el-input-number{
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.pj-form{
|
|
|
+ width:66.5%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.pj-form .el-form-item{
|
|
|
+ width:49.5%;
|
|
|
+}
|
|
|
+
|
|
|
+.avatars-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.avatars-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.avatars-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.avatars {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
