Files
old_tco_admin/src/views/PIP/copyright_edit.vue
2025-07-04 10:37:02 +08:00

745 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<main>
<div class="bg_white m-20" style="margin-bottom: 70px;">
<div class="wrap text-black p-t-20 p-b-20 p-l-40 p-r-40">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="m-t-20" label-position="left">
<div class="basic_info">
<h3>基础信息</h3>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="编码" prop="" required>
<el-input v-model="form.id" style="width: 60%;" disabled="true" placeholder=""></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="版权类型" prop="copyright_type_id">
<el-select v-model="form.copyright_type_id" placeholder="请选择版权类型" disabled="true" @change="changeCopyrightType">
<el-option v-for="(item, index) in copyrightType" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" style="width: 60%;" placeholder="请输入名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="紧急程度" prop="urgency_degree">
<el-select v-model="form.urgency_degree" placeholder="请选择紧急程度" @change="changeUrgencyDegree">
<el-option v-for="(item, index) in urgencyDegree" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="others">
<h3>附件上传</h3>
<el-row v-if="type_id == 1">
<el-col :span="8">
<el-form-item label="申请表" prop="" required>
<el-upload
class="upload-demo"
:action="api_upload_url"
:with-credentials = "true"
:on-success="handleSuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="fileUpload"
:limit="1"
accept=".pdf, .xlsx, .docx, .doc, .xls"
:file-list="fileList"
>
<el-button size="small" type="primary">上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持PDFWordExcel格式限10M内
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="源程序代码" prop="" required>
<el-upload
class="upload-demo"
:action="api_upload_url"
:with-credentials = "true"
:on-success="handleSuccess1"
:on-preview="handlePreview1"
:on-remove="handleRemove1"
:before-upload="fileUpload"
:limit="1"
:on-exceed="handleExceed1"
accept=".pdf, .xlsx, .docx, .doc, .xls"
:file-list="fileList1"
>
<el-button size="small" type="primary">上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持PDFWordExcel格式限10M内
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="说明书" prop="" required>
<el-upload
class="upload-demo"
:action="api_upload_url"
:with-credentials = "true"
:on-success="handleSuccess2"
:on-preview="handlePreview2"
:on-remove="handleRemove2"
:before-upload="fileUpload"
:limit="1"
:on-exceed="handleExceed2"
accept=".pdf, .xlsx, .docx, .doc, .xls"
:file-list="fileList2"
>
<el-button size="small" type="primary">上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持PDFWordExcel格式限10M内
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row v-else>
<el-col :span="8">
<el-form-item label="作品说明书" prop="" required>
<el-upload
class="upload-demo"
:action="api_upload_url"
:with-credentials = "true"
:on-success="handleSuccess3"
:on-preview="handlePreview3"
:on-remove="handleRemove3"
:before-upload="fileUpload"
:limit="1"
:on-exceed="handleExceed3"
accept=".pdf, .xlsx, .docx, .doc, .xls"
:file-list="fileList3"
>
<el-button size="small" type="primary">上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持PDFWordExcel格式限10M内
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="法人作品声明" prop="" required>
<el-upload
class="upload-demo"
:action="api_upload_url"
:with-credentials = "true"
:on-success="handleSuccess4"
:on-preview="handlePreview4"
:on-remove="handleRemove4"
:before-upload="fileUpload"
:limit="1"
:on-exceed="handleExceed4"
accept=".pdf, .xlsx, .docx, .doc, .xls"
:file-list="fileList4"
>
<el-button size="small" type="primary">上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持PDFWordExcel格式限10M内
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="作品等级申请表" prop="" required>
<el-upload
class="upload-demo"
:action="api_upload_url"
:with-credentials = "true"
:on-success="handleSuccess5"
:on-preview="handlePreview5"
:on-remove="handleRemove5"
:before-upload="fileUpload"
:limit="1"
:on-exceed="handleExceed5"
accept=".pdf, .xlsx, .docx, .doc, .xls"
:file-list="fileList5"
>
<el-button size="small" type="primary">上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持PDFWordExcel格式限10M内
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="作品登记委托书" prop="" required>
<el-upload
class="upload-demo"
:action="api_upload_url"
:with-credentials = "true"
:on-success="handleSuccess6"
:on-preview="handlePreview6"
:on-remove="handleRemove6"
:before-upload="fileUpload"
:limit="1"
:on-exceed="handleExceed6"
accept=".pdf, .xlsx, .docx, .doc, .xls"
:file-list="fileList6"
>
<el-button size="small" type="primary">上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持PDFWordExcel格式限10M内
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="作品样本" prop="" required>
<el-upload
class="upload-demo"
:action="api_upload_url"
:with-credentials = "true"
:on-success="handleSuccess7"
:on-preview="handlePreview7"
:on-remove="handleRemove7"
:before-upload="fileUpload"
:limit="1"
:on-exceed="handleExceed7"
accept=".pdf, .xlsx, .docx, .doc, .xls"
:file-list="fileList7"
>
<el-button size="small" type="primary">上传</el-button>
<template #tip>
<div class="el-upload__tip">
支持PDFWordExcel格式限10M内
</div>
</template>
</el-upload>
<!-- <el-upload
ref="upload"
:action="api_upload_url"
list-type="picture-card"
name="img"
:with-credentials = "true"
:on-success="handlePhotoSuccess"
:on-preview="handlePhotoPreview"
multiple
:limit="4"
:on-remove="handlePhotoRemove"
accept=".jpg,.png"
:on-exceed="handlePhotoExceed"
:file-list="imgList"
>
<el-button size="small" type="text"><i class="el-icon-plus"></i></el-button>
</el-upload>
<div class="el-upload__tip f_12 l_height_25">支持pngjpg格式, 上限1M, 不超过4张, 需彩色图片</div>
<el-dialog v-model="dialogVisible">
<el-image width="100%" :src="dialogImageUrl" alt=""></el-image>
</el-dialog> -->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<h3>申请结果</h3>
<el-radio-group v-model="form.apply_result" @change="changeApply">
<el-radio v-for="(item, index) in checkData" :key="index" :label="item.id">{{ item.name }}</el-radio>
</el-radio-group>
</el-col>
</el-row>
<h3>费用信息</h3>
<el-row>
<el-col :span="8">
<el-form-item label="单价" prop="">
<el-input v-model="form.price" style="width: 60%;" placeholder="仅限数字,支持小数" @change="changePrice"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="数量" prop="">
<el-input v-model="form.num" style="width: 60%;" placeholder="仅限正整数" @change="changeNum"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="总计" prop="">
<el-input v-model="form.total_price" style="width: 60%;" placeholder="" disabled="true"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
</div>
<div class="bg_white m-t-10 p-l-20 p-r-20 p-t-10 p-b-10 text-black footer" style="width:100%;">
<el-button type="primary" class="search_button" @click="submitClick('form')">提交</el-button>
</div>
</main>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
data() {
return {
form: {
id: '',
copyright_type_id: 1,
name: '',
urgency_degree: ''
},
rules: {
name: [
{
required: true,
message: '请输入版权名称',
trigger: 'blur',
}
],
copyright_type_id: [
{
required: true,
message: '请选择版权类型',
trigger: 'change',
}
],
urgency_degree: [
{
required: true,
message: '请选择紧急程度',
trigger: 'change',
}
]
},
fileList: [],
fileList1: [],
fileList2: [],
imgList: [],
fileList3: [],
fileList4: [],
fileList5: [],
fileList6: [],
fileList7: [],
dialogVisible: false,
dialogImageUrl: '',
copyrightType: [],
urgencyDegree: [],
checkData: [],
isShowDemo: false,
type_id: 1,
edit_params: {
name: '',
copyright_type_id: '',
urgency_degree: '',
apply_file: '',
code: '',
instructions: '',
demo: '',
apply_result: '',
price: '',
num: '',
total_price: '',
art_dscription_form: '',
art_corporation_statement: '',
art_level_form: '',
art_sign_file: ''
},
imgData: []
}
},
computed: {
api_upload_url() {
return process.env.VUE_APP_API_BASEURL + 'admin/copyright/upload'
},
...mapState({
// 取出页面标签
tags: (state) => state.topNavTag.tags
})
},
created() {
this.getList()
},
activated() {
this.id = this.$route.query.id
this.type_id = this.$route.query.type_id
this.getDetail()
},
beforeRouteUpdate(to,from,next){
this.id = to.query.id
if(to.fullPath!=from.fullPath){
this.getDetail()
next()
}
},
methods: {
...mapActions({
// 关闭标签及页面
handleCloseTag: 'topNavTag/removeNavTag'
}),
// 获取列表数据
getList() {
this.$http.get('copyright/constList').then(res => {
console.log(res)
const data = res.data.data
this.copyrightType = data.copyright_type_id
this.urgencyDegree = data.urgency_degree
this.checkData = data.apply_result
})
},
getDetail() {
this.$http.get('copyright/read/id', { id: this.id }).then(res => {
console.log(res)
this.imgList = []
if (res.status == 200) {
this.form = res.data.data
if(this.form.apply_file != null && this.form.apply_file != '') {this.fileList = [{name: '申请表', url: this.form.apply_file}]}
if(this.form.code != null && this.form.code != '') {this.fileList1 = [{name: '程序源代码', url: this.form.code}]}
if(this.form.instructions != null && this.form.instructions != '') {this.fileList2 = [{name: '说明书', url: this.form.instructions}]}
if(this.form.art_dscription_form != null && this.form.art_dscription_form != '') {this.fileList3 = [{name: '作品说明书', url: this.form.art_dscription_form}]}
if(this.form.art_corporation_statement != null && this.form.art_corporation_statement != '') {this.fileList4 = [{name: '法人作品声明', url: this.form.art_corporation_statement}]}
if(this.form.art_level_form != null && this.form.art_level_form != '') {this.fileList5 = [{name: '作品等级申请表', url: this.form.art_level_form}]}
if(this.form.art_sign_file != null && this.form.art_sign_file != '') {this.fileList6 = [{name: '作品等级委托书', url: this.form.art_sign_file}]}
if(this.form.demo != null && this.form.demo != '') {
this.fileList7 = [{name: '作品样本', url: this.form.demo}]
// const demo = this.form.demo.split(',')
// demo.forEach(item => {
// this.imgList.push({name: '', url: item})
// });
}
// 字符转数字类型
this.form.apply_result = Number(this.form.apply_result)
// 未做修改直接保存
this.edit_params = {
id: this.form.id,
name: this.form.name,
copyright_type_id: this.form.copyright_type_id,
urgency_degree: this.form.urgency_degree,
apply_file: this.form.apply_file,
code: this.form.code,
instructions: this.form.instructions,
demo: this.form.demo,
apply_result: this.form.apply_result,
price: this.form.price,
num: this.form.num,
total_price: this.form.total_price,
art_dscription_form: this.form.art_dscription_form,
art_corporation_statement: this.form.art_corporation_statement,
art_level_form: this.form.art_level_form,
art_sign_file: this.form.art_sign_file
}
}
})
},
//文件上传成功时
handleSuccess(res, file, file_list) {
console.log(res)
if (res.status == 200) {
this.edit_params.apply_file = res.data.data.url
}
},
// 限制文件格式
fileUpload(file) {
console.log(file)
const isLt5M = file.size / 1024 / 1024 < 10
if (!isLt5M) {
this.$message({
message: '上传文件大小不能超过 10MB!',
type: 'warning'
})
return false
}
// 文件格式拦截
const fileType = file.type
if (fileType != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && fileType != 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' &&
fileType != 'application/pdf' && fileType != 'application/msword') {
this.$message({
message: '上传失败,当前文件格式无法上传!',
type: 'warning'
})
return false
}
},
handleRemove(file, fileList) {
this.edit_params.apply_file = ''
},
//文件上传成功时1
handleSuccess1(res, file, file_list) {
if (res.status == 200) {
this.edit_params.code = res.data.data.url
}
},
handleRemove1(file, fileList) {
this.edit_params.code = ''
},
//文件上传成功时2
handleSuccess2(res, file, file_list) {
if (res.status == 200) {
this.edit_params.instructions = res.data.data.url
}
},
handleRemove2(file, fileList) {
this.edit_params.instructions = ''
},
//文件上传成功时3
handleSuccess3(res, file, file_list) {
if (res.status == 200) {
this.edit_params.art_dscription_form = res.data.data.url
}
},
handleRemove3(file, fileList) {
this.edit_params.art_dscription_form = ''
},
//文件上传成功时4
handleSuccess4(res, file, file_list) {
if (res.status == 200) {
this.edit_params.art_corporation_statement = res.data.data.url
}
},
handleRemove4(file, fileList) {
this.edit_params.art_corporation_statement = ''
},
//文件上传成功时5
handleSuccess5(res, file, file_list) {
if (res.status == 200) {
this.edit_params.art_level_form = res.data.data.url
}
},
handleRemove5(file, fileList) {
this.edit_params.art_level_form = ''
},
//文件上传成功时6
handleSuccess6(res, file, file_list) {
if (res.status == 200) {
this.edit_params.art_sign_file = res.data.data.url
}
},
handleRemove6(file, fileList) {
this.edit_params.art_sign_file = ''
},
//文件上传成功时6
handleSuccess7(res, file, file_list) {
if (res.status == 200) {
this.edit_params.demo = res.data.data.url
}
},
handleRemove7(file, fileList) {
this.edit_params.demo = ''
},
//图片上传成功时
handlePhotoSuccess(res, file, fileList) {
console.log(fileList, 111)
this.edit_params.demo = ''
this.imgData = []
fileList.forEach(item => {
if (item.response) {
this.imgData.push(item.response.data.data.url)
} else {
this.imgData.push(item.url)
}
})
console.log(this.imgData, 2222)
this.edit_params.demo = this.imgData.join(',')
},
//点击文件列表中已上传的文件时
handlePhotoPreview(file) {},
//文件列表移除
handlePhotoRemove(file, fileList) {
console.log(file, fileList)
this.edit_params.demo = ''
let imgs = []
this.imgList = []
// this.imgData = []
fileList.forEach(item => {
imgs.push(item.url)
this.imgList.push({name: '', url: item.url})
})
console.log(imgs)
// if (this.imgList.length != 0) {
// this.imgList.forEach(item => {
// this.imgData.push(item.url)
// })
// }
this.edit_params.demo = imgs.join(',')
},
//文件超出个数限制
handlePhotoExceed(files, fileList) {
const fileLen = files.length
const listLen = fileList.length + fileLen
if (fileLen > 4 || listLen > 4) {
this.$message({
message: '只能上传4张作品样本!',
type: 'warning'
})
return false
}
},
// 版权类型
changeCopyrightType(val) {
this.type_id = val
this.edit_params.copyright_type_id = val
if (val == 1) {
this.fileList3 = []
this.fileList4 = []
this.fileList5 = []
this.fileList6 = []
this.fileList7 = []
this.imgList = []
} else {
this.fileList = []
this.fileList1 = []
this.fileList2 = []
}
},
// 紧急程度
changeUrgencyDegree(val) {
this.edit_params.urgency_degree = val
},
// 申请结果
changeApply(val) {
this.edit_params.apply_result = val
},
// 修改价格
changePrice(val) {
this.form.price = val
this.edit_params.price = val
this.calculation(val, this.edit_params.num)
},
// 修改数量
changeNum(val) {
this.form.num = val
this.edit_params.num = val
this.calculation(this.edit_params.price, val)
},
// 计算合计费用
calculation(price, num) {
price = Number(price)
num = Number(num)
let total_price = 0
total_price = (price*num).toFixed(2)
this.form.total_price = total_price
this.edit_params.total_price = total_price
},
//提交
submitClick(form) {
this.edit_params.name = this.form.name
console.log(this.edit_params)
if (this.edit_params.copyright_type_id == 1) {
if (this.edit_params.apply_file == '') {
this.$message({
type: 'error',
message: '请上传申请表'
})
return false
}
if (this.edit_params.code == '') {
this.$message({
type: 'error',
message: '请上传源程序代码'
})
return false
}
if (this.edit_params.instructions == '') {
this.$message({
type: 'error',
message: '请上传说明书'
})
return false
}
} else {
if (this.edit_params.art_dscription_form == '') {
this.$message({
type: 'error',
message: '请上传作品说明书'
})
return false
}
if (this.edit_params.art_corporation_statement == '') {
this.$message({
type: 'error',
message: '请上传法人作品声明'
})
return false
}
if (this.edit_params.art_level_form == '') {
this.$message({
type: 'error',
message: '请上传作品等级申请表'
})
return false
}
if (this.edit_params.art_sign_file == '') {
this.$message({
type: 'error',
message: '请上传作品登记委托书'
})
return false
}
if (this.edit_params.demo == '') {
this.$message({
type: 'error',
message: '请上传作品样本'
})
return false
}
}
this.$refs[form].validate((valid) => {
if (!valid) {
this.$message({
type: 'error',
message: '信息填写不完整!'
})
return false
} else {
this.$http.put('copyright/update/id', this.edit_params ).then(res => {
if (res.status == 200) {
this.$message({
type: 'success',
message: res.message
})
this.getDetail()
this.fileList = []
this.fileList1 = []
this.fileList2 = []
this.fileList3 = []
this.fileList4 = []
this.fileList5 = []
this.fileList6 = []
this.fileList7 = []
this.imgList = []
const currentPageName = this.$route.name
const tags = this.tags
const idx = tags.findIndex(it => it.name === currentPageName)
if (idx >= 0) {
this.handleCloseTag(idx)
}
this.$router.push({
path: '/PIP/copyright'
})
} else {
this.$message({
type: 'error',
message: res.message
})
}
})
}
})
}
}
}
</script>
<style scoped>
.basic_info{ border-bottom: 1px solid #dcdfe6;}
</style>