列表添加附件

src/views/list/index.vue

@@ -97,7 +97,8 @@
             <el-table-column label="上一次同步时间" prop="SYNCHRONIZATIONDATE" width="180" />
             <el-table-column label="操作" fixed="right" width="180">
               <template slot-scope="{ row }">
-                <el-link :underline="false" type="primary" @click.stop="update(row)">修改</el-link>
+                <el-link :underline="false" type="warning" @click.stop="updateFJXX(row)">附件</el-link>
+                <el-link :underline="false" type="primary" style="margin-left: 10px" @click.stop="update(row)">修改</el-link>
                 <el-link :underline="false" type="success" style="margin-left: 10px" @click.stop="pushInfo(row)">推送</el-link>
                 <el-link :underline="false" type="danger" style="margin-left: 10px " @click.stop="del(row)">删除</el-link>
               </template>
@@ -138,7 +139,8 @@
             <el-table-column label="上一次同步时间" prop="SYNCHRONIZATIONDATE" width="180" />
             <el-table-column label="操作" fixed="right" width="180">
               <template slot-scope="{ row }">
-                <el-link :underline="false" type="primary" @click.stop="update(row)">修改</el-link>
+                <el-link :underline="false" type="warning" @click.stop="updateFJXX(row)">附件</el-link>
+                <el-link :underline="false" type="primary" style="margin-left: 10px" @click.stop="update(row)">修改</el-link>
                 <el-link :underline="false" type="success" style="margin-left: 10px" @click.stop="pushInfo(row)">推送</el-link>
                 <!--                <el-link :underline="false" type="warning" style="margin-left: 10px" @click.stop="examine(row)">审核</el-link>-->
                 <el-link :underline="false" type="danger" style="margin-left: 10px " @click.stop="del(row)">删除</el-link>
@@ -180,7 +182,8 @@
             <el-table-column label="上一次同步时间" prop="SYNCHRONIZATIONDATE" width="180" />
             <el-table-column label="操作" fixed="right" width="180">
               <template slot-scope="{ row }">
-                <el-link :underline="false" type="primary" @click.stop="update(row)">修改</el-link>
+                <el-link :underline="false" type="warning" @click.stop="updateFJXX(row)">附件</el-link>
+                <el-link :underline="false" type="primary" style="margin-left: 10px" @click.stop="update(row)">修改</el-link>
                 <el-link :underline="false" type="success" style="margin-left: 10px" @click.stop="pushInfo(row)">推送</el-link>
                 <el-link :underline="false" type="danger" style="margin-left: 10px " @click.stop="del(row)">删除</el-link>
               </template>
@@ -278,6 +281,91 @@
         <el-button type="primary" @click="BatchExecution">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog width="75%" title="附件信息" :visible.sync="FJXXDialog">
+      <el-button
+        type="primary"
+        size="mini"
+        @click="insertTemplate"
+      >
+        点击上传
+      </el-button>
+      <el-table border :data="FJXXForm">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center"
+        />
+        <el-table-column label="附件类型">
+          <template slot-scope="scope">
+            <span>{{ scope.row.BUSITYPE }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="附件名称">
+          <template slot-scope="scope">
+            <span>{{ scope.row.FILENAME }}</span>
+            <span v-if="showError === true" style="color:#f52929;">请上传文件</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-link v-if="scope.row.FILENAME === '' " type="success" :underline="false">
+              <el-upload
+                class="upload-demo"
+                :show-file-list="false"
+                action
+                :accept="['.doc','.docx','.pdf','.xls','.xlsx','.png','.jpg','.jpeg']"
+                :before-upload="onBeforeUpload"
+                :headers="headers"
+                :file-list="fileList"
+                :http-request="uploadF2"
+              >
+                <el-button :disabled="formType === 'examine'" size="small" type="text">上传</el-button>
+              </el-upload>
+            </el-link>
+            <el-link type="danger" :underline="false" @click="delFile(scope.$index,scope.row)">删除</el-link>
+            <el-link v-if="scope.row.FILENAME !== ''" type="success" style="margin-left: 15px" :underline="false" @click="filePreview(scope.row)">预览</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="FJXXBtnChcheck">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog width="80%" :close-on-click-modal="false" title="附件预览" :visible.sync="filePreviewDialog">
+      <div>
+        <iframe style="width: 100%;height: 600px" :src="fileUrl" />
+        <!--                  <el-image :src="fileUrl" />-->
+      </div>
+    </el-dialog>
+    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="FJXXdialogFormVisible" width="600px" @close="closeDoc">
+      <el-form ref="uploadPaperModel" :model="uploadPaperModel" label-width="auto">
+        <el-form-item label="附件类型:" prop="fileType">
+          <el-select v-model="uploadPaperModel.fileType" style="width: 100%" placeholder="请选择">
+            <el-option
+              v-for="item in DM_FILETYPE"
+              :key="item.id"
+              :label="item.value"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-upload
+            class="upload-demo"
+            show-upload-list="false"
+            action
+            :accept="['.doc','.docx','.pdf','.xls','.xlsx','.png','.jpg','.jpeg']"
+            :before-upload="onBeforeUpload"
+            :headers="headers"
+            :http-request="uploadF"
+            :file-list="fileList"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
     <!--    这里是隐藏模态框-->
     <el-dialog width="75%" title="请选择想要新增的合同类型" :visible.sync="dialogFormVisible">
       <div class="rowFormItemClass">
@@ -369,6 +457,22 @@ export default {
   },
   data() {
     return {
+      headers: {
+        'constnet-type': 'multipart/form-data'
+      },
+      BUSITYPEName: '',
+      // 上传的文件列表
+      fileList: [],
+      filePreviewDialog: false,
+      fileUrl: '',
+      FJXXForm: [{ BUSINESSID: '', BUSITYPE: '合同签订文本扫描件', FILENAME: '', FILESAVENAME: '' }],
+      accept: ['doc', 'docx', 'pdf', 'xls', 'xlsx', 'png', 'jpg', 'jpeg'],
+      FJXXDialog: false,
+      uploadPaperModel: {
+        fileType: '01'
+      },
+      DM_FILETYPE: [],
+      FJXXdialogFormVisible: false,
       checkDialog: false,
       pushDialog: false,
       Loading: false,
@@ -724,11 +828,137 @@ export default {
     }
   },
   mounted() {
+    this.findMap()
     this.findContract() // 个人列表
     this.deptFindContract() // 部门列表
     this.allFindContract() // 全部列表
   },
   methods: {
+    findMap() {
+      this.$axios.get(this.HTTPApi + '/contract/contract/getDictData').then(res => {
+        this.DM_FILETYPE = res.data.data.DM_FILETYPE
+      })
+        .catch(function(error) {
+          console.log(error)
+        })
+    },
+    updateFJXX(row) {
+      const FROMID = row.FROMID
+      this.$axios.get(this.HTTPApi + '/contract/contract/detail/' + FROMID).then(res => {
+        this.FJXXForm = res.data.data.FJXX
+        const FJXXList = { BUSINESSID: '', BUSITYPE: '合同签订文本扫描件', FILENAME: '', FILESAVENAME: '' }
+        if (this.FJXXForm.length === 0) {
+          this.FJXXForm.push(FJXXList)
+        }
+      })
+      this.FJXXDialog = true
+    },
+    insertTemplate() {
+      this.uploadPaperModel.fileType = '01'
+      this.fileList = []
+      this.title = '上传附件'
+      this.file = ''
+      this.FJXXdialogFormVisible = true
+    },
+    closeDoc() {
+      this.FJXXdialogFormVisible = false
+      this.uploadPaperModel.fileType = ''
+      this.fileList = []
+    },
+    uploadF(file) {
+      console.log(file.file.name.split('.')[0], 'file')
+      const formData = new FormData()
+      formData.append('file', file.file)
+      this.$axios({
+        method: 'post',
+        url: this.HTTPApi + '/contractjxx/contract-fjxx/upload',
+        data: formData })
+        .then((res) => {
+          if (!res.errno) {
+            this.BUSITYPEName = this.DM_FILETYPE.find(item => item.id === this.uploadPaperModel.fileType).value
+            const list = {
+              BUSITYPE: this.BUSITYPEName,
+              FILENAME: file.file.name,
+              BUSINESSID: res.data.data.BUSINESSID,
+              FILESAVENAME: res.data.data.FILESAVENAME
+            }
+            this.FJXXForm.push(list)
+            this.FJXXdialogFormVisible = false
+            console.log('参数参数', this.form.FJXX)
+          }
+        })
+        .catch((err) => {
+          return err
+        })
+    },
+    onBeforeUpload(file) {
+      console.log('文件', file)
+      if (file.size === 0) {
+        this.$message.warning('当前文件为空文件，请检查后重新上传！')
+        return false
+      }
+      const fileType = file.name.split('.')[file.name.split('.').length - 1]
+      console.log('fileType', fileType)
+      if (!this.accept.includes(fileType)) {
+        this.$message.warning('上传文件只能是 PDF、DOC、EXL或图片格式!')
+        return false
+      }
+    },
+    uploadF2(file) {
+      console.log(file, 'file')
+      const formData = new FormData()
+      formData.append('file', file.file)
+      console.log('参数参数', formData)
+      this.$axios({
+        method: 'post',
+        url: this.HTTPApi + '/contractjxx/contract-fjxx/upload',
+        data: formData })
+        .then((res) => {
+          if (!res.errno) {
+            this.FJXXForm[0].FILENAME = file.file.name
+            this.FJXXForm[0].BUSINESSID = res.data.data.BUSINESSID
+            this.FJXXForm[0].FILESAVENAME = res.data.data.FILESAVENAME
+          }
+        })
+        .catch((err) => {
+          return err
+        })
+      console.log('参数参数', this.form.FJXX)
+    },
+    delFile(i, row) {
+      this.$axios.delete(this.HTTPApi + '/contractjxx/contract-fjxx/realDeleteByBusinessId/' + row.BUSINESSID).then(res => {
+        // eslint-disable-next-line no-empty
+        if (!res.errno) {}
+      })
+        .catch(function(error) {
+          console.log(error)
+        })
+      if (i === 0) {
+        this.FJXXForm[0].FILENAME = ''
+        this.FJXXForm[0].BUSINESSID = ''
+        this.FJXXForm[0].FILESAVENAME = ''
+      } else {
+        this.FJXXForm.splice(i, 1)
+      }
+    },
+    filePreview(row) {
+      const fileType = row.FILENAME.split('.')[row.FILENAME.split('.').length - 1]
+      console.log('数据', row, fileType)
+      if (fileType === 'pdf') {
+        this.filePreviewDialog = true
+        this.$axios.get(this.HTTPApi + '/contractjxx/contract-fjxx/preview/' + row.BUSINESSID).then(res => {
+          if (!res.errno) {
+            this.fileUrl = res.data.data
+          }
+          console.log('数据aaaa', this.fileUrl)
+        })
+          .catch(function(error) {
+            console.log(error)
+          })
+      } else {
+        this.$message.warning('只有附件类型为PDF的附件可以预览！')
+      }
+    },
     handleClick(tab, event) {
       if (this.activeName === 'first') {
         this.findContract() // 个人列表