|
|
@@ -0,0 +1,281 @@
|
|
|
+<template>
|
|
|
+ <!-- 产品信息录入 -->
|
|
|
+ <div>
|
|
|
+ <!-- <div style="display: flex;justify-content: end;">
|
|
|
+ <el-button v-if="isFormEdit" type="primary" @click="isSave">保存</el-button>
|
|
|
+ <el-button v-if="!isFormEdit" type="primary" @click="handleEdit">编辑</el-button>
|
|
|
+ </div> -->
|
|
|
+ <div style="display: flex;justify-content: end;">
|
|
|
+ <slot name="save"></slot>
|
|
|
+ <slot name="edit"></slot>
|
|
|
+ </div>
|
|
|
+ <div style="width: 500px;margin: auto;">
|
|
|
+ <el-form v-if="isFormEdit" :model="form" status-icon :rules="rules" ref="form" label-width="120px"
|
|
|
+ class="demo-form">
|
|
|
+
|
|
|
+ <el-form-item label="标的产品：" prop="productName">
|
|
|
+ <el-input v-model="form.productName" placeholder="请输入标的产品"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标的说明：" prop="productDescription">
|
|
|
+ <el-input v-model="form.productDescription" placeholder="请输入标的说明"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item v-if="reportType == 4" label="调查区域：" prop="surveyArea">
|
|
|
+ <el-input v-model="form.surveyArea" placeholder="请输入调查区域"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品图：">
|
|
|
+ <el-upload ref="upload" action="#" :auto-upload="false" multiple :on-change="handleChange" list-type="picture"
|
|
|
+ :show-file-list="false">
|
|
|
+ <span style="display:flex;flex-direction:row;flex-wrap:wrap;">
|
|
|
+ <span class="avatar" v-for="(item) in form.systemFileList" :key="item.guid || item.uid"
|
|
|
+ style="margin-left:10px">
|
|
|
+ <span class="deleteImg">
|
|
|
+ <span>
|
|
|
+ <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(item)"></i>
|
|
|
+ <i class="el-icon-delete" @click.stop="handleRemove(item)"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <el-image ref="image" class="img" :src="item.guid ? $commonJS.checkViewer(item.guid) : item.url"
|
|
|
+ :preview-src-list="form.systemFileList ? form.systemFileList.map(item => { return item.guid ? $commonJS.checkViewer(item.guid) : item.url }) : []"></el-image>
|
|
|
+ </span>
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </span>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="reportType == 4" label="检索策略：">
|
|
|
+ <el-input v-model="form.searchPolicy" placeholder="请输入检索策略"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="检索截止日期：">
|
|
|
+ <el-date-picker style="width:100%" v-model="form.deadLine" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
|
|
|
+ placeholder="请选择检索截止日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="reportType == 4" label="关注企业/发明人/技术方向：">
|
|
|
+ <el-input v-model="form.focusInformation" placeholder="请输入关注企业/发明人/技术方向"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注：">
|
|
|
+ <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.description"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-form v-else :model="form" status-icon :rules="rules" ref="form" label-width="120px" class="demo-form">
|
|
|
+ <el-form-item label="标的产品：">
|
|
|
+ <span>{{ form.productName }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标的说明：">
|
|
|
+ <span>{{ form.productDescription }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="reportType == 4" label="调查区域：" prop="surveyArea">
|
|
|
+ <span>{{ form.surveyArea }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品图：">
|
|
|
+ <el-upload ref="upload" action="#" :auto-upload="false" multiple :on-change="handleChange" list-type="picture"
|
|
|
+ :show-file-list="false">
|
|
|
+ <span style="display:flex;flex-direction:row;flex-wrap:wrap;">
|
|
|
+ <span class="avatar" v-for="(item) in form.systemFileList" :key="item.guid || item.uid"
|
|
|
+ style="margin-left:10px">
|
|
|
+ <span class="deleteImg">
|
|
|
+ <span>
|
|
|
+ <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(item)"></i>
|
|
|
+ <i v-if="isFormEdit" class="el-icon-delete" @click.stop="handleRemove(item)"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <el-image ref="image" class="img" :src="item.guid ? $commonJS.checkViewer(item.guid) : item.url"
|
|
|
+ :preview-src-list="form.systemFileList ? form.systemFileList.map(item => { return item.guid ? $commonJS.checkViewer(item.guid) : item.url }) : []"></el-image>
|
|
|
+ </span>
|
|
|
+ <i v-if="isFormEdit" class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </span>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="reportType == 4" label="检索策略：">
|
|
|
+ <span>{{ form.searchPolicy }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="检索截止日期：">
|
|
|
+ <span>{{ form.deadLine }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="reportType == 4" label="关注企业/发明人/技术方向：">
|
|
|
+ <span>{{ form.focusInformation }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注：">
|
|
|
+ <span>{{ form.description }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ // 信息(patentNo,reportId)
|
|
|
+ word: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ patentNo: '',
|
|
|
+ projectId: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 报告类型
|
|
|
+ reportType: '',
|
|
|
+ // 是否可以编辑
|
|
|
+ isFormEdit: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 表单信息
|
|
|
+ form: {
|
|
|
+ systemFileList: []
|
|
|
+ },
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ productName: [{ required: true, message: '请输入标的产品', trigger: 'blur' },],
|
|
|
+ productDescription: [{ required: true, message: '请输入标的说明', trigger: 'blur' },],
|
|
|
+ surveyArea: [{ required: true, message: '请输入调查区域', trigger: 'blur' },],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 编辑
|
|
|
+ handleEdit() {
|
|
|
+ this.isFormEdit = !this.isFormEdit
|
|
|
+ },
|
|
|
+ // 获取数据
|
|
|
+ getList() {
|
|
|
+ let params = {
|
|
|
+ ...this.word,
|
|
|
+ }
|
|
|
+ this.$api.getProductMessage(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.form = res.data.data
|
|
|
+ if (!this.form.systemFileList) {
|
|
|
+ this.$set(this.form, 'systemFileList', [])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.form = {
|
|
|
+ systemFileList: []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ isSave() {
|
|
|
+ this.form.fileGuids = this.form.systemFileList.map(item => {
|
|
|
+ return item.guid
|
|
|
+ })
|
|
|
+ let params = {
|
|
|
+ ...this.word,
|
|
|
+ ...this.form
|
|
|
+ }
|
|
|
+ this.$api.addProductMessage(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 图片变化的change事件
|
|
|
+ handleChange(file, fileList) {
|
|
|
+ file.raw.url = file.url
|
|
|
+ this.form.systemFileList.push(file.raw)
|
|
|
+ this.uploadFile(file)
|
|
|
+ },
|
|
|
+ // 点击已上传的文件//showViewer是图片显示查看器
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.$refs.image.showViewer = true
|
|
|
+ },
|
|
|
+ // 文件列表移除文件
|
|
|
+ handleRemove(file) {
|
|
|
+ let index = this.form.systemFileList.findIndex(item => {
|
|
|
+ if (file.guid) {
|
|
|
+ return item.guid == file.guid
|
|
|
+ } else {
|
|
|
+ return item.uid == file.uid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (index != -1) {
|
|
|
+ this.form.systemFileList.splice(index, 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //上传附件
|
|
|
+ uploadFile(file) {
|
|
|
+ let formData = new FormData()
|
|
|
+ formData.append('sourceId', this.$constants.sourceId)
|
|
|
+ formData.append('files', file.raw)
|
|
|
+ this.$api.uploadFile(formData).then(response => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ file.guid = response.data[0]
|
|
|
+ file.raw.guid = response.data[0]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.avatar-uploader-icon {
|
|
|
+ background-color: #fbfdff;
|
|
|
+ border: 1px dashed #c0ccda;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ line-height: 148px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ position: relative;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar:hover .deleteImg {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.deleteImg {
|
|
|
+ display: none;
|
|
|
+ font-size: 30px;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ background-color: black;
|
|
|
+ opacity: 0.6;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar .img {
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+}
|
|
|
+
|
|
|
+.deleteImg span i {
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.deleteImg span {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /*垂直居中*/
|
|
|
+ justify-content: center;
|
|
|
+ /*水平居中*/
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
zhuhao