廉政风险点、廉洁教育、文件资料已支持附件上传

2c2c2c
1 parent a8edc770
Showing 3 changed files with 472 additions and 13 deletions
trash-ui/src/views/other/documentData/index.vue
trash-ui/src/views/other/incorruptEducation/index.vue
trash-ui/src/views/other/incorruptGovernment/index.vue
@@ -92,6 +92,14 @@
             v-hasPermi="['other:documentData:remove']"
           >删除
           </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="handleInfo(scope.row)"
+            v-hasPermi="['other:documentData:remove']"
+          >查看附件
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -108,10 +116,10 @@
     <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="标题" prop="title">
-          <el-input v-model="form.title" placeholder="请输入标题"/>
+          <el-input v-model="form.title" placeholder="请输入标题" :readonly="infoDisable"/>
         </el-form-item>
         <el-form-item label="内容" prop="content">
-          <editor v-model="form.content" :min-height="368"/>
+          <editor v-model="form.content" :min-height="368" :readonly="infoDisable"/>
         </el-form-item>
         <el-row>
           <el-col :span="12">
@@ -125,10 +133,53 @@
             </el-form-item>
           </el-col>
         </el-row>
-
+        <el-form-item label="附件预览" v-if="fileEntityList.length!==0">
+          <el-image v-for="item in fileEntityList"
+                    v-if="!/\.(pjp|pdf|doc|docx|xls|xlsx)$/.test(item.name)"
+                    style="width: 150px; height: 100px; margin: 5px;"
+                    :src="createUrl(item)"
+                    :preview-src-list="[createUrl(item)]"
+                    :z-index="999">
+          </el-image>
+        </el-form-item>
+        <el-form-item prop="fileEntityList" label="附件" v-if="!infoDisable">
+          <el-upload
+            ref="upload"
+            action=""
+            accept=".jpg,.jpeg,.png,.gif,.jfif,.pjpeg,.pjp,.pdf,.doc,.docx,.xls,.xlsx"
+            :on-change="fileChange"
+            :auto-upload="false"
+            :show-file-list="false"
+            multiple
+            :file-list="fileEntityList">
+            <el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-table :data="fileEntityList">
+          <el-table-column property="name" label="附件名称" header-align="center" align="center"></el-table-column>
+          <el-table-column label="操作" class-name="small-padding fixed-width" header-align="center" align="center">
+            <template slot-scope="scope">
+              <el-button
+                size="small" type="success"
+                icon="el-icon-download"
+                @click="tempDownload(scope.row)"
+                v-hasPermi="['other:documentData:edit']"
+                round>下载
+              </el-button>
+              <el-button
+                size="small" type="danger"
+                v-show="!infoDisable"
+                icon="el-icon-delete"
+                @click="handleDeleteFile(scope.$index)"
+                v-hasPermi="['other:documentData:remove']"
+                round>删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button type="primary" @click="submitForm" v-show="!infoDisable">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -146,10 +197,11 @@ import {
 } from "@/api/other/documentData";
 import Editor from '@/components/2cEditor';
 import {parseTime} from "../../../utils/trash";
+import uploadFile from "@/components/FileUpload";
  
 export default {
   name: "DocumentData",
-  components: {Editor},
+  components: {Editor, uploadFile},
   data() {
     return {
       // 遮罩层
@@ -195,12 +247,31 @@ export default {
         ]
       },
       fileEntityList: [],
+      infoDisable: false
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    handleInfo(row){
+      this.reset();
+      const id = row.id || this.ids
+      getDocumentData(id).then(response => {
+        this.form = response.data;
+        //将附件转换为前端可视化数组
+        if (this.form.files != null && this.form.files !== "") {
+          let fileList = this.form.files.split(";");
+          fileList.map(item => {
+            let name = item.substring(item.lastIndexOf("/") + 1);
+            this.fileEntityList.push({name: name, url: item})
+          })
+        }
+        this.open = true;
+        this.infoDisable = true;
+        this.title = "查看文件资料";
+      });
+    },
     toInfo(row){
       //打开当日报修页签
       this.$tab.openPage("查看详情","/documentData/info",{"documentData":row})
@@ -232,6 +303,7 @@ export default {
         updateBy: null
       };
       this.fileEntityList = [];
+      this.infoDisable = false;
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -285,6 +357,18 @@ export default {
           let form = this.form;
           //去掉params属性
           delete form.params;
+          //先清空原有的附件
+          form.files = null;
+
+
+          this.fileEntityList.forEach(item => {
+            if (item.raw != null) {
+              formData.append('fileList', item.raw)
+            } else {
+              //将原有的附件拼接到form中
+              form.files = form.files !== null ? form.files + ";" + item.url : item.url;
+            }
+          })
  
           for (let key in form) {
             formData.append(key, form[key] == null ? "" : form[key])
@@ -333,6 +417,75 @@ export default {
         this.download(response.msg);
       })
     },
+    /**
+     * 文件改变时,限制文件上传格式和大小
+     * 文件格式只能为docx/doc/pdf/png/jpeg/png/jpg
+     * 大小不超过20M
+     * */
+    fileChange(file, fileList) {
+      let count = 0;
+      for (let i = 0; i < fileList.length; i++) {
+        // console.log(fileList.length)
+        // console.log(this.fileEntityList[i].name+"111"+file.name)
+        if (fileList[i].name == file.name) {
+          count++;
+          if (count == 2) {
+            this.$message({
+              message: '已存在此文件！',
+              type: 'warning'
+            });
+            for (let j = fileList.length; j > 0; j--) {
+              //如果存在此文件，去除新选择的重复文件
+              if (fileList[j - 1].name == file.name) {
+                fileList.splice(j - 1, 1);
+                i--;
+                return false;
+              }
+            }
+          }
+        }
+      }
+      let fileType = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
+      //格式符合后判断大小
+      if ("jpg,jpeg,png,gif,jfif,pjpeg,pjp,pdf,doc,docx,xls,xlsx".indexOf(fileType) != -1) {
+        let max5M = file.size / 1024 / 1024 < 100;
+        if (!max5M) {
+          this.$message({
+            message: '上传文件大小不得超过100M！',
+            type: 'warning'
+          });
+          fileList = fileList.splice(fileList.length - 1, 1);
+        } else {
+          //符合条件后进行添加
+          this.fileEntityList = fileList
+        }
+      } else {
+        this.$message({
+          message: '上传文件只能是 jpg,jpeg,png,gif,jfif,pjpeg,pjp,pdf,doc,docx,xls,xlsx格式!',
+          type: 'warning'
+        });
+        fileList = fileList.splice(fileList.length - 1, 1);
+      }
+    },
+    // 删除文件
+    handleDeleteFile(index) {
+      this.fileEntityList.splice(index, 1);
+    },
+    /** 文件下载 */
+    tempDownload(row) {
+      let name = row.name;
+      let url = "";
+      if (row.raw != null) {
+        url = URL.createObjectURL(row.raw);
+      } else {
+        url = process.env.VUE_APP_BASE_API + row.url;
+      }
+      const a = document.createElement('a')
+      a.setAttribute('download', name)
+      a.setAttribute('target', '_blank')
+      a.setAttribute('href', url);
+      a.click()
+    },
     createUrl(file) {
       if (file.raw != null) {
         return URL.createObjectURL(file.raw);
@@ -92,6 +92,14 @@
             v-hasPermi="['other:IncorruptEducation:remove']"
           >删除
           </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="handleInfo(scope.row)"
+            v-hasPermi="['other:documentData:remove']"
+          >查看附件
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -108,10 +116,10 @@
     <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="标题" prop="title">
-          <el-input v-model="form.title" placeholder="请输入标题"/>
+          <el-input v-model="form.title" placeholder="请输入标题" :readonly="infoDisable"/>
         </el-form-item>
         <el-form-item label="内容" prop="content">
-          <editor v-model="form.content" :min-height="368"/>
+          <editor v-model="form.content" :min-height="368" :readonly="infoDisable"/>
         </el-form-item>
         <el-row>
           <el-col :span="12">
@@ -125,10 +133,53 @@
             </el-form-item>
           </el-col>
         </el-row>
-
+        <el-form-item label="附件预览" v-if="fileEntityList.length!==0">
+          <el-image v-for="item in fileEntityList"
+                    v-if="!/\.(pjp|pdf|doc|docx|xls|xlsx)$/.test(item.name)"
+                    style="width: 150px; height: 100px; margin: 5px;"
+                    :src="createUrl(item)"
+                    :preview-src-list="[createUrl(item)]"
+                    :z-index="999">
+          </el-image>
+        </el-form-item>
+        <el-form-item prop="fileEntityList" label="附件" v-if="!infoDisable">
+          <el-upload
+            ref="upload"
+            action=""
+            accept=".jpg,.jpeg,.png,.gif,.jfif,.pjpeg,.pjp,.pdf,.doc,.docx,.xls,.xlsx"
+            :on-change="fileChange"
+            :auto-upload="false"
+            :show-file-list="false"
+            multiple
+            :file-list="fileEntityList">
+            <el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-table :data="fileEntityList">
+          <el-table-column property="name" label="附件名称" header-align="center" align="center"></el-table-column>
+          <el-table-column label="操作" class-name="small-padding fixed-width" header-align="center" align="center">
+            <template slot-scope="scope">
+              <el-button
+                size="small" type="success"
+                icon="el-icon-download"
+                @click="tempDownload(scope.row)"
+                v-hasPermi="['other:documentData:edit']"
+                round>下载
+              </el-button>
+              <el-button
+                size="small" type="danger"
+                icon="el-icon-delete"
+                @click="handleDeleteFile(scope.$index)"
+                v-show="!infoDisable"
+                v-hasPermi="['other:documentData:remove']"
+                round>删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button type="primary" @click="submitForm" v-show="!infoDisable">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -146,6 +197,7 @@ import {
 } from "@/api/other/incorruptEducation";
 import Editor from '@/components/2cEditor';
 import {parseTime} from "../../../utils/trash";
+import {getDocumentData} from "@/api/other/documentData";
  
 export default {
   name: "IncorruptEducation",
@@ -195,12 +247,31 @@ export default {
         ]
       },
       fileEntityList: [],
+      infoDisable:false
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    handleInfo(row){
+      this.reset();
+      const id = row.id || this.ids
+      getIncorruptEducation(id).then(response => {
+        this.form = response.data;
+        //将附件转换为前端可视化数组
+        if (this.form.files != null && this.form.files !== "") {
+          let fileList = this.form.files.split(";");
+          fileList.map(item => {
+            let name = item.substring(item.lastIndexOf("/") + 1);
+            this.fileEntityList.push({name: name, url: item})
+          })
+        }
+        this.open = true;
+        this.infoDisable = true;
+        this.title = "查看文件资料";
+      });
+    },
     toInfo(row){
       //打开当日报修页签
       this.$tab.openPage("查看详情","/IncorruptEducation/info",{"IncorruptEducation":row})
@@ -232,6 +303,7 @@ export default {
         updateBy: null
       };
       this.fileEntityList = [];
+      this.infoDisable = false;
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -285,7 +357,18 @@ export default {
           let form = this.form;
           //去掉params属性
           delete form.params;
+          //先清空原有的附件
+          form.files = null;
+
  
+          this.fileEntityList.forEach(item => {
+            if (item.raw != null) {
+              formData.append('fileList', item.raw)
+            } else {
+              //将原有的附件拼接到form中
+              form.files = form.files !== null ? form.files + ";" + item.url : item.url;
+            }
+          })
           for (let key in form) {
             formData.append(key, form[key] == null ? "" : form[key])
           }
@@ -333,6 +416,75 @@ export default {
         this.download(response.msg);
       })
     },
+    /**
+     * 文件改变时,限制文件上传格式和大小
+     * 文件格式只能为docx/doc/pdf/png/jpeg/png/jpg
+     * 大小不超过20M
+     * */
+    fileChange(file, fileList) {
+      let count = 0;
+      for (let i = 0; i < fileList.length; i++) {
+        // console.log(fileList.length)
+        // console.log(this.fileEntityList[i].name+"111"+file.name)
+        if (fileList[i].name == file.name) {
+          count++;
+          if (count == 2) {
+            this.$message({
+              message: '已存在此文件！',
+              type: 'warning'
+            });
+            for (let j = fileList.length; j > 0; j--) {
+              //如果存在此文件，去除新选择的重复文件
+              if (fileList[j - 1].name == file.name) {
+                fileList.splice(j - 1, 1);
+                i--;
+                return false;
+              }
+            }
+          }
+        }
+      }
+      let fileType = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
+      //格式符合后判断大小
+      if ("jpg,jpeg,png,gif,jfif,pjpeg,pjp,pdf,doc,docx,xls,xlsx".indexOf(fileType) != -1) {
+        let max5M = file.size / 1024 / 1024 < 100;
+        if (!max5M) {
+          this.$message({
+            message: '上传文件大小不得超过100M！',
+            type: 'warning'
+          });
+          fileList = fileList.splice(fileList.length - 1, 1);
+        } else {
+          //符合条件后进行添加
+          this.fileEntityList = fileList
+        }
+      } else {
+        this.$message({
+          message: '上传文件只能是 jpg,jpeg,png,gif,jfif,pjpeg,pjp,pdf,doc,docx,xls,xlsx格式!',
+          type: 'warning'
+        });
+        fileList = fileList.splice(fileList.length - 1, 1);
+      }
+    },
+    // 删除文件
+    handleDeleteFile(index) {
+      this.fileEntityList.splice(index, 1);
+    },
+    /** 文件下载 */
+    tempDownload(row) {
+      let name = row.name;
+      let url = "";
+      if (row.raw != null) {
+        url = URL.createObjectURL(row.raw);
+      } else {
+        url = process.env.VUE_APP_BASE_API + row.url;
+      }
+      const a = document.createElement('a')
+      a.setAttribute('download', name)
+      a.setAttribute('target', '_blank')
+      a.setAttribute('href', url);
+      a.click()
+    },
     createUrl(file) {
       if (file.raw != null) {
         return URL.createObjectURL(file.raw);
@@ -92,6 +92,14 @@
             v-hasPermi="['other:IncorruptGovernment:remove']"
           >删除
           </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="handleInfo(scope.row)"
+            v-hasPermi="['other:documentData:remove']"
+          >查看附件
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -108,10 +116,10 @@
     <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="标题" prop="title">
-          <el-input v-model="form.title" placeholder="请输入标题"/>
+          <el-input v-model="form.title" placeholder="请输入标题" :readonly="infoDisable"/>
         </el-form-item>
         <el-form-item label="内容" prop="content">
-          <editor v-model="form.content" :min-height="368"/>
+          <editor v-model="form.content" :min-height="368" :readonly="infoDisable"/>
         </el-form-item>
         <el-row>
           <el-col :span="12">
@@ -125,10 +133,53 @@
             </el-form-item>
           </el-col>
         </el-row>
-
+        <el-form-item label="附件预览" v-if="fileEntityList.length!==0">
+          <el-image v-for="item in fileEntityList"
+                    v-if="!/\.(pjp|pdf|doc|docx|xls|xlsx)$/.test(item.name)"
+                    style="width: 150px; height: 100px; margin: 5px;"
+                    :src="createUrl(item)"
+                    :preview-src-list="[createUrl(item)]"
+                    :z-index="999">
+          </el-image>
+        </el-form-item>
+        <el-form-item prop="fileEntityList" label="附件" v-if="!infoDisable">
+          <el-upload
+            ref="upload"
+            action=""
+            accept=".jpg,.jpeg,.png,.gif,.jfif,.pjpeg,.pjp,.pdf,.doc,.docx,.xls,.xlsx"
+            :on-change="fileChange"
+            :auto-upload="false"
+            :show-file-list="false"
+            multiple
+            :file-list="fileEntityList">
+            <el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-table :data="fileEntityList">
+          <el-table-column property="name" label="附件名称" header-align="center" align="center"></el-table-column>
+          <el-table-column label="操作" class-name="small-padding fixed-width" header-align="center" align="center">
+            <template slot-scope="scope">
+              <el-button
+                size="small" type="success"
+                icon="el-icon-download"
+                @click="tempDownload(scope.row)"
+                v-hasPermi="['other:documentData:edit']"
+                round>下载
+              </el-button>
+              <el-button
+                size="small" type="danger"
+                icon="el-icon-delete"
+                @click="handleDeleteFile(scope.$index)"
+                v-show="!infoDisable"
+                v-hasPermi="['other:documentData:remove']"
+                round>删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button type="primary" @click="submitForm" v-show="!infoDisable">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -146,6 +197,7 @@ import {
 } from "@/api/other/incorruptGovernment";
 import Editor from '@/components/2cEditor';
 import {parseTime} from "../../../utils/trash";
+import {getDocumentData} from "@/api/other/documentData";
  
 export default {
   name: "IncorruptGovernment",
@@ -195,12 +247,31 @@ export default {
         ]
       },
       fileEntityList: [],
+      infoDisable:false
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    handleInfo(row){
+      this.reset();
+      const id = row.id || this.ids
+      getIncorruptGovernment(id).then(response => {
+        this.form = response.data;
+        //将附件转换为前端可视化数组
+        if (this.form.files != null && this.form.files !== "") {
+          let fileList = this.form.files.split(";");
+          fileList.map(item => {
+            let name = item.substring(item.lastIndexOf("/") + 1);
+            this.fileEntityList.push({name: name, url: item})
+          })
+        }
+        this.open = true;
+        this.infoDisable = true;
+        this.title = "查看文件资料";
+      });
+    },
     toInfo(row){
       //打开当日报修页签
       this.$tab.openPage("查看详情","/IncorruptGovernment/info",{"IncorruptGovernment":row})
@@ -232,6 +303,7 @@ export default {
         updateBy: null
       };
       this.fileEntityList = [];
+      this.infoDisable = false;
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -285,6 +357,19 @@ export default {
           let form = this.form;
           //去掉params属性
           delete form.params;
+          //先清空原有的附件
+          form.files = null;
+
+
+          this.fileEntityList.forEach(item => {
+            if (item.raw != null) {
+              formData.append('fileList', item.raw)
+            } else {
+              //将原有的附件拼接到form中
+              form.files = form.files !== null ? form.files + ";" + item.url : item.url;
+            }
+          })
+
  
           for (let key in form) {
             formData.append(key, form[key] == null ? "" : form[key])
@@ -333,6 +418,75 @@ export default {
         this.download(response.msg);
       })
     },
+    /**
+     * 文件改变时,限制文件上传格式和大小
+     * 文件格式只能为docx/doc/pdf/png/jpeg/png/jpg
+     * 大小不超过20M
+     * */
+    fileChange(file, fileList) {
+      let count = 0;
+      for (let i = 0; i < fileList.length; i++) {
+        // console.log(fileList.length)
+        // console.log(this.fileEntityList[i].name+"111"+file.name)
+        if (fileList[i].name == file.name) {
+          count++;
+          if (count == 2) {
+            this.$message({
+              message: '已存在此文件！',
+              type: 'warning'
+            });
+            for (let j = fileList.length; j > 0; j--) {
+              //如果存在此文件，去除新选择的重复文件
+              if (fileList[j - 1].name == file.name) {
+                fileList.splice(j - 1, 1);
+                i--;
+                return false;
+              }
+            }
+          }
+        }
+      }
+      let fileType = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
+      //格式符合后判断大小
+      if ("jpg,jpeg,png,gif,jfif,pjpeg,pjp,pdf,doc,docx,xls,xlsx".indexOf(fileType) != -1) {
+        let max5M = file.size / 1024 / 1024 < 100;
+        if (!max5M) {
+          this.$message({
+            message: '上传文件大小不得超过100M！',
+            type: 'warning'
+          });
+          fileList = fileList.splice(fileList.length - 1, 1);
+        } else {
+          //符合条件后进行添加
+          this.fileEntityList = fileList
+        }
+      } else {
+        this.$message({
+          message: '上传文件只能是 jpg,jpeg,png,gif,jfif,pjpeg,pjp,pdf,doc,docx,xls,xlsx格式!',
+          type: 'warning'
+        });
+        fileList = fileList.splice(fileList.length - 1, 1);
+      }
+    },
+    // 删除文件
+    handleDeleteFile(index) {
+      this.fileEntityList.splice(index, 1);
+    },
+    /** 文件下载 */
+    tempDownload(row) {
+      let name = row.name;
+      let url = "";
+      if (row.raw != null) {
+        url = URL.createObjectURL(row.raw);
+      } else {
+        url = process.env.VUE_APP_BASE_API + row.url;
+      }
+      const a = document.createElement('a')
+      a.setAttribute('download', name)
+      a.setAttribute('target', '_blank')
+      a.setAttribute('href', url);
+      a.click()
+    },
     createUrl(file) {
       if (file.raw != null) {
         return URL.createObjectURL(file.raw);