vue前端使用_fileuploadcustom-CSDN博客

本文链接：https://blog.csdn.net/fusu_ai/article/details/129712598

<el-button type="primary" @click="back" style="float: right;">返回</el-button>

<el-button type="primary" @click="download('执业律师调入申请表.doc')" style="float: right;margin-right: 20px;">导出</el-button>

<h1>执业律师调入申请表</h1>

<el-form ref="form" :model="form" :rules="rules" :disabled="ifshow" label-width="180px">

<el-row>

<el-col :span="10">

<el-form-item label="申请人" prop="lawyername">

<el-input v-model="form.lawyername" placeholder="请添加申请人"/>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="性别" prop="sex">

<el-select v-model="form.sex" placeholder="请选择性别" clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in dict.type.lg_sex" :key="index" :label="item.label"

:value="item.value"></el-option>

</el-select>

</el-form-item>

</el-col>

<!-- <el-col :span="4" style="z-index: 999; position: absolute;margin-left: 84%">

<el-upload

class="avatar-uploader"

action="uploadFileUrl"

:show-file-list="false"

:on-success="handleAvatarSuccess"

:before-upload="beforeAvatarUpload">

</el-upload>

</el-col>-->

</el-row>

<el-row>

<el-col :span="10">

<el-form-item label="身份证号" prop="cardnum">

<el-input v-model="form.cardnum" placeholder="请输入身份证号"/>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="资格证号" prop="qualificationnumber">

<el-input v-model="form.qualificationnumber" placeholder="请输入资格证号"/>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="10">

<el-form-item label="第一学历" prop="first_education">

<el-select v-model="form.first_education" placeholder="请选择第一学历" clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in dict.type.lg_first_education" :key="index" :label="item.label"

:value="item.value"></el-option>

</el-select>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="毕业院校及专业" prop="first_school">

<el-input v-model="form.first_school" placeholder="请输入毕业院校及专业"/>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="10">

<el-form-item label="现学历" prop="seconde_education">

<el-select v-model="form.seconde_education" placeholder="请选择现学历" clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in dict.type.lg_first_education" :key="index" :label="item.label"

:value="item.value"></el-option>

</el-select>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="毕业院校及专业" prop="sencode_school">

<el-input v-model="form.sencode_school" placeholder="请输入毕业院校及专业"/>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="10">

<el-form-item label="执业证号" prop="workcardnumber">

<el-input v-model="form.workcardnumber" placeholder="请输入执业证号"/>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="执业证状态" prop="iswork">

<el-select v-model="form.iswork" placeholder="请选择执业证状态" clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in dict.type.lg_iswork" :key="index" :label="item.label"

:value="item.value"></el-option>

</el-select>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="10">

<el-form-item label="联系电话" prop="tel">

<el-input v-model="form.tel" placeholder="请输入联系电话"/>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="法律职业资格存放地(省)" prop="wzyzg_addr">

<el-input v-model="form.wzyzg_addr" placeholder="请输入法律职业资格存放地(省)"/>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="10">

<el-form-item label="原律师事务所" prop="pre_lawofficename">

<el-input v-model="form.pre_lawofficename" placeholder="请输入原律师事务所"/>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="首次执业时间" prop="first_work_time">

<el-date-picker clearable style="width: 100%"

v-model="form.first_work_time"

type="date"

value-format="yyyy-MM-dd"

placeholder="请选择首次执业时间">

</el-date-picker>

</el-form-item>

</el-col>

</el-row>

<el-row v-if="!ifshow">

<el-col :span="10">

<el-form-item label="现申请去何所主管机关" prop="county">

<el-select v-model="form.county" @change="selectAreaCodeChange" filterable placeholder="请选择现申请去何所主管机关"

clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in dict.type.lg_xk_js_areacode" :key="index" :label="item.label"

:value="item.value"></el-option>

</el-select>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="现申请去何所" prop="now_lawofficename">

<el-select v-model="form.now_lawofficename" @change="selectChange" filterable placeholder="请选择现申请去何所"

clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in lawofficeList" :key="index" :label="item.org_name"

:value="item.pkid"></el-option>

</el-select>

</el-form-item>

</el-col>

</el-row>

<el-row v-if="ifshow">

<el-col :span="10">

<el-form-item label="现申请去何所" prop="now_lawofficename">

<el-select v-model="form.now_lawofficename" @change="selectChange" filterable placeholder="请选择现申请去何所"

clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in lawofficeList" :key="index" :label="item.org_name"

:value="item.pkid"></el-option>

</el-select>

</el-form-item>

</el-col>

<el-col :span="10">

<el-form-item label="档案调出地" prop="archiveout">

<el-select v-model="form.archiveout" placeholder="请选择档案调出地" clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in dict.type.lg_xk_areacode" :key="index" :label="item.label"

:value="item.value"></el-option>

</el-select>

</el-form-item>

</el-col>

</el-row>

<el-row v-if="!ifshow">

<el-col :span="10">

<el-form-item label="档案调出地" prop="archiveout">

<el-select v-model="form.archiveout" placeholder="请选择档案调出地" clearable

:style="{width: '100%'}">

<el-option v-for="(item, index) in dict.type.lg_xk_areacode" :key="index" :label="item.label"

:value="item.value"></el-option>

</el-select>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="20">

<el-form-item label="执业简历" prop="work_resume">

<el-input v-model="form.work_resume" type="textarea" maxlength="1000"/>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="20">

<el-form-item label="奖惩情况" prop="jcsituation">

<el-input v-model="form.jcsituation" type="textarea" maxlength="1000"/>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="20">

<el-form-item label="申请理由" prop="reazon">

<el-input v-model="form.reazon" type="textarea" maxlength="1000"/>

</el-form-item>

</el-col>

</el-row>

<br>

<el-row v-if="ifshow">

<el-col :span="20">

<el-form-item v-for="(item,index) in workStep" :key="index" :label="item.createname">

<el-input v-model="item.advice == null?'同意':item.advice" type="textarea" maxlength="1000"/>

</el-form-item>

</el-col>

</el-row>

</el-form>

<tr>

</tr>

<td style="width: 100px">{{ index + 1 }}</td>

<td style="width: 40%"><span class="i-red"

v-if="item.importdocumentname != '其它'">*</span>{{ item.importdocumentname }}

</td>

<td>

<file-upload-custom v-bind="item.fileItems" :business-id="businessId" :canEdit="!ifshow"

ref="FileUploadCustom"

:type="(index+1).toString()"></file-upload-custom>

</td>

</tr>

</table>

<div>

<el-button type="primary" style="margin-left: 47%; margin-top: 20px;display: inline-block" v-if="!ifshow"

@click="saveDate">暂存

</el-button>

</div>

</template>

import FileUploadCustom from "../FileUploadCustom";

import {baseFile, getById, getWorkStep, lawOfficeSelectList, saveOrUpdate} from "../../../api/lawyer/archiveIn";

export default {

components: {FileUploadCustom},

name: 'archiveInLawyer',

dicts: ["lg_sex", "lg_first_education", "lg_iswork", "lg_xk_areacode", "lg_xk_js_areacode"],

data() {

return {

attachType: {

zylsdrsq: "01",

zyz: "02",

cns: "03",

qt: "04",

businessId: "",

file: [],

saveFile: [],

lawofficeList: {},

// 限定文件类型

fileType: ["doc", "xls", "ppt", "txt", "pdf"],

// 限定文件大小

fileSize: 5,

// number

number: 0,

// 上传文件列表

fileList: [],

uploadList: [],

form: {},

type: "",

ifshow: false,

cardNum: "",

//流程意见

workStep: [],

rules: {

county: [

{

required: true,

message: '现申请去何所主管机关不可为空',

trigger: 'change'

archiveout: [

{

required: true,

message: '档案调出地不可为空',

trigger: 'change'

lawyername: [

{

required: true,

message: '申请人必须为中文',

trigger: 'change'

{

required: true,

pattern: /^[\u4e00-\u9fa5,\u0020,\uff08,\uff09,\u0028,\u0029]+$/,

message: "申请人必须为中文",

trigger: 'blur'

}

sex: [

{

required: true,

message: '性别不可为空',

trigger: 'change'

}

cardnum: [

{

required: true,

message: '身份证号不可为空',

trigger: 'blur'

{

required: true,

pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)|(^(\d|[a-zA-Z])\d{9}$)/,

message: "身份证号格式错误",

trigger: 'blur'

}

qualificationnumber: [

{

required: true,

message: '资格证号不可为空',

trigger: 'change'

}

first_education: [

{

required: true,

message: '第一学历不可为空',

trigger: 'change'

}

first_school: [

{

required: true,

message: '毕业院校及专业不可为空',

trigger: 'change'

}

workcardnumber: [

{

required: true,

message: '执业证号不可为空',

trigger: 'change'

}

iswork: [

{

required: true,

message: '执业证状态不可为空',

trigger: 'change'

}

seconde_education: [

{

required: true,

message: '现学历不可为空',

trigger: 'change'

}

], sencode_school: [

{

required: true,

message: '毕业院校及专业不可为空',

trigger: 'change'

}

], tel: [

{

required: true,

message: '联系电话不可为空',

trigger: 'change'

}

wzyzg_addr: [

{

required: true,

message: '法律职业资格存放地(省)不可为空',

trigger: 'change'

}

pre_lawofficename: [

{

required: true,

message: '原律师事务所不可为空',

trigger: 'change'

}

now_lawofficename: [

{

required: true,

message: '现申请去何所不可为空',

trigger: 'change'

}

first_work_time: [

{

required: true,

message: '首次执业时间不可为空',

trigger: 'change'

}

work_resume: [

{

required: true,

message: '执业简历不可为空',

trigger: 'change'

}

jcsituation: [

{

required: true,

message: '奖惩情况不可为空',

trigger: 'change'

}

reazon: [

{

required: true,

message: '申请理由不可为空',

trigger: 'change'

}

created() {

if (this.$route.query.type == 'view' && this.$route.query.id) {

this.cardNum = this.$store.getters.nickName;

this.businessId = this.$route.query.id;

this.ifshow = true;

this.selectById(this.$route.query.id);

this.baseFileList(this.$route.query.id);

} else if (this.$route.query.type == 'add') {

this.baseFileList();

}

methods: {

selectAreaCodeChange() {

lawOfficeSelectList({county: this.form.county}).then(data => {

this.lawofficeList = data

})

baseFileList(id) {

let param = {

pkid: id,

powerCodeOne: "JS000000SF-XK-0003-07",

powerCodeTwo: "JS000000SF-XK-0003-06"

}

baseFile(param).then(data => {

this.fileList = data;

});

selectById(id) {

getById(id).then(data => {

this.form = data;

if (this.form.approveNo) {

console.log(this.form.approveNo)

let params = {

approveNo: this.form.approveNo,

type: "archiveIn"

}

getWorkStep(params).then(res => {

this.workStep = res.items;

console.log(this.workStep)

})

}

})

selectChange(data) {

var obj = {};

obj = this.lawofficeList.find(function (i) {

return i.pkid === data

})

this.form.now_lawofficename = obj.org_name;

this.form.areacode = obj.areacode;

this.form.lawofficeid = obj.pkid;

saveDate() {

this.$refs['form'].validate(valid => {

if (valid) {

let ref = [];

ref = this.$refs["FileUploadCustom"];

for (let index in ref) {

if (ref[index].fileList.length == 0) {

if (index != 9) {

this.$modal.msgWarning("请检查附件是否全部上传成功");

return;

}

if (ref[index].fileList[0] != undefined) {

let children = [];

children = ref[index].fileList;

for (let sort in children) {

children[sort].attachType = ref[index].type;

}

this.saveFile.push(children);

this.form.fileList = this.saveFile

}

this.$modal.loading("正在保存数据请稍后提交");

saveOrUpdate(this.form).then(data => {

this.$modal.closeLoading();

this.$modal.msgSuccess("暂存成功");

this.back();

}).catch(error => {

this.$modal.closeLoading();

this.$modal.msgError("暂存失败");

})

}

})

handleAvatarSuccess(res) {

this.$download.downloadFile(res.fileId);

back() {

this.$router.go(-1);

download(fileName) {

this.$download.downloadFileTemplate(fileName);

beforeAvatarUpload(file) {

const isJPG = file.type === 'image/jpeg';

const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG) {

this.$message.error('上传头像图片只能是 JPG 格式!');

}

if (!isLt2M) {

this.$message.error('上传头像图片大小不能超过 2MB!');

}

return isJPG && isLt2M;

}

</script>

td {

margin: 0 auto;

text-align: center;

color: #515a6e;

font-size: 13px;

}

.page {

&-tab {

border-bottom: 4px solid #E7E7E7;

box-sizing: border-box;

ul {

height: 40px;

display: flex;

align-items: center;

padding: 0;

margin: 0;

li {

line-height: 40px;

list-style: none;

color: #888888;

font-size: 18px;

padding: 0 20px;

box-sizing: border-box;

position: relative;

cursor: pointer;

&:after {

position: absolute;

bottom: -4px;

left: 50%;

transform: translateX(-50%);

content: '';

width: 32px;

height: 4px;

border-radius: 2px;

background: #518AFF;

display: none;

}

&.active {

color: #518AFF;

font-weight: bold;

font-size: 22px;

&:after {

display: block;

}

&-table-normal {

margin: 20px auto;

.table-sub-txt {

font-weight: bold;

font-size: 16px;

}

.i-red {

color: #FF0000;

}

table {

border-collapse: collapse;

width: 100%;

border: 1px solid #E7E7E7;

box-sizing: border-box;

tr {

height: 52px;

th {

text-align: right;

padding: 10px;

box-sizing: border-box;

color: #555555;

font-size: 15px;

border: 1px solid #E7E7E7;

border-left: none;

}

td {

padding: 10px;

box-sizing: border-box;

border: 1px solid #E7E7E7;

border-right: none;

}

&-form-edit {

padding: 30px 20px;

box-sizing: border-box;

h1 {

color: #333333;

font-weight: bold;

font-size: 22px;

text-align: center;

}

&-title {

line-height: 24px;

color: #333333;

font-weight: bold;

padding-left: 10px;

box-sizing: border-box;

position: relative;

&:before {

position: absolute;

content: '';

width: 4px;

height: 20px;

left: 0;

top: 50%;

transform: translateY(-50%);

background-color: #518AFF;

}

/*上传头像*/

.avatar-uploader {

margin: auto;

width: 178px;

height: 178px;

::v-deep {

.el-upload {

border: 1px dashed #d9d9d9;

border-radius: 6px;

cursor: pointer;

position: relative;

overflow: hidden;

&:hover {

border-color: #409EFF;

}

&-icon {

font-size: 28px;

color: #8c939d;

width: 178px;

height: 178px;

line-height: 178px;

text-align: center;

}

</style>