From b75a4660d54caa29048f99215a9e6281ea884098 Mon Sep 17 00:00:00 2001
From: cqf <2@qq.com>
Date: 星期二, 12 七月 2022 13:37:27 +0800
Subject: [PATCH] 应急管理文件上传优化

---
 src/views/contingencyplan/index.vue |  689 ++++++++++++++++++++++++++++++--------------------------
 1 files changed, 366 insertions(+), 323 deletions(-)

diff --git a/src/views/contingencyplan/index.vue b/src/views/contingencyplan/index.vue
index ae5a316..6063639 100644
--- a/src/views/contingencyplan/index.vue
+++ b/src/views/contingencyplan/index.vue
@@ -1,348 +1,391 @@
 <template>
-  <div class="app-container">
-    <el-form ref="form" :model="form" label-width="80px">
-      <el-row>
-        <el-col :span="5">
-          <el-form-item label="预案名称">
-            <el-input v-model="listQuery.filter.name"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="5" style="text-align: center">
-          <el-button type="primary" class="btns" icon="el-icon-search" @click="find()"
-            >搜索</el-button
-          >
-          <el-button
-            type="primary"
-            icon="el-icon-plus"
-            @click="emergencyPlanC('', '新增')"
-            class="btns"
-            >新增</el-button
-          >
-            <el-button
-                type="primary"
-                class="btns"
-                @click="reset()"
-            >重置</el-button
-            >
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-table :data="list" border style="width: 100%">
-      <el-table-column prop="name" align="center" label="预案名称" width="150">
-      </el-table-column>
-      <el-table-column prop="fileType" align="center" label="文件类型">
-          <template slot-scope="scope">
-              <span v-if="scope.row.fileType==0">图片</span>
-              <span v-if="scope.row.fileType==1">文件</span>
-          </template>
-      </el-table-column>
-        <el-table-column align="center" label="附件">
-            <template slot-scope="scope">
-                <div v-if="scope.row.fileType==0">
-                    <img :src="envUrl+scope.row.fileList[0].fileUrl" @click="showViewer=true" style="max-width: 100px;height: auto"/>
-                    <el-image-viewer
-                        v-if="showViewer"
-                        :on-close="()=>showViewer=false"
-                        :url-list="scope.row.viewerList"
-                    />
-                </div>
-                <div v-if="scope.row.fileType==1">
-                    <span @click="downLoadFile(scope.row.fileList[0].fileUrl)" style="color: #3A71A8 ; cursor: pointer;">{{ scope.row.fileList[0].fileName }}</span>
-                </div>
-            </template>
-        </el-table-column>
+    <div class="app-container">
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-row>
+                <el-col :span="5">
+                    <el-form-item label="预案名称">
+                        <el-input v-model="listQuery.filter.name"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="5" style="text-align: center">
+                    <el-button type="primary" class="btns" icon="el-icon-search" @click="find()"
+                    >搜索
+                    </el-button
+                    >
+                    <el-button
+                        type="primary"
+                        icon="el-icon-plus"
+                        @click="emergencyPlanC('', '新增')"
+                        class="btns"
+                    >新增
+                    </el-button
+                    >
+                    <el-button
+                        type="primary"
+                        class="btns"
+                        @click="reset()"
+                    >重置
+                    </el-button
+                    >
+                </el-col>
+            </el-row>
+        </el-form>
+        <el-table :data="list" border style="width: 100%">
+            <el-table-column prop="name" align="center" label="预案名称" width="150">
+            </el-table-column>
+            <el-table-column prop="fileType" align="center" label="文件类型">
+                <template slot-scope="scope">
+                    <span v-if="scope.row.fileType==0">图片</span>
+                    <span v-if="scope.row.fileType==1">文件</span>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" label="附件">
+                <template slot-scope="scope">
+                    <div v-if="scope.row.fileType==0">
+                        <img :src="envUrl+scope.row.fileList[0].fileUrl" @click="showViewer=true"
+                             style="max-width: 100px;height: auto"/>
+                        <el-image-viewer
+                            v-if="showViewer"
+                            :on-close="()=>showViewer=false"
+                            :url-list="scope.row.viewerList"
+                        />
+                    </div>
+                    <div v-if="scope.row.fileType==1">
+                        <span @click="downLoadFile(scope.row.fileList[0].fileUrl)"
+                              style="color: #3A71A8 ; cursor: pointer;">{{ scope.row.fileList[0].fileName }}</span>
+                    </div>
+                </template>
+            </el-table-column>
 
-      <el-table-column prop="remark" align="center" label="备注"> </el-table-column>
-      <el-table-column prop="createTime" align="center" label="创建时间"> </el-table-column>
-      <el-table-column prop="updateTime" align="center" label="更新时间"> </el-table-column>
-      <el-table-column align="center" label="操作">
-        <template slot-scope="scope">
-          <el-button
-            @click="emergencyPlanC(scope.row, '编辑')"
-            type="text"
-            size="small"
-            >编辑</el-button
-          >
-          <el-button
-            type="text"
-            size="small"
-            @click="deleteById(scope.row.id)"
-            style="color: red"
-            >删除</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      v-show="recordTotal>0"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :current-page="currentPage"
-      :page-size="pageSize"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="recordTotal"
-      style="text-align: right;margin-top: 20px;"
-    >
-    </el-pagination>
-    <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="预案名称" prop="name">
-          <el-input v-model="form.name"></el-input>
-        </el-form-item>
-        <el-form-item label="文件类型">
-          <el-radio-group v-model="form.fileType" @change="changeFileType">
-            <el-radio :label=0 >图片</el-radio>
-            <el-radio :label=1 >文件</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="form.fileType==0" label="图片上传">
-            <upload-img :imgList="fileList"   @uploadImgSuccess="uploadImgSuccess" @removeImgSuccess="removeImgSuccess"></upload-img>
-        </el-form-item>
-        <el-form-item label="文件链接" v-if="form.fileType==1">
-            <upload-file v-bind:url="fileUrl" v-bind:name="fileName"  @uploadFileSuccess="uploadFileSuccess" ></upload-file>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" :rows="5" type="textarea"></el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
+            <el-table-column prop="remark" align="center" label="备注"></el-table-column>
+            <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
+            <el-table-column prop="updateTime" align="center" label="更新时间"></el-table-column>
+            <el-table-column align="center" label="操作">
+                <template slot-scope="scope">
+                    <el-button
+                        @click="emergencyPlanC(scope.row, '编辑')"
+                        type="text"
+                        size="small"
+                    >编辑
+                    </el-button
+                    >
+                    <el-button
+                        type="text"
+                        size="small"
+                        @click="deleteById(scope.row.id)"
+                        style="color: red"
+                    >删除
+                    </el-button
+                    >
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination
+            v-show="recordTotal>0"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="recordTotal"
+            style="text-align: right;margin-top: 20px;"
+        >
+        </el-pagination>
+        <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%">
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="预案名称" prop="name">
+                    <el-input v-model="form.name"></el-input>
+                </el-form-item>
+                <el-form-item label="文件类型">
+                    <el-radio-group v-model="form.fileType" @change="changeFileType">
+                        <el-radio :label=0>图片</el-radio>
+                        <el-radio :label=1>文件</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="form.fileType==0" label="图片上传">
+                    <upload-img :imgList="fileList" @uploadImgSuccess="uploadImgSuccess"
+                                @removeImgSuccess="removeImgSuccess"></upload-img>
+                </el-form-item>
+
+                <el-form-item label="文件链接" v-if="form.fileType==1" class="multiFile" v-for="(items,index) in files">
+                    <upload-file v-bind:url="items.fileUrl" v-bind:name="items.fileName"
+                                 @uploadFileSuccess="uploadFileSuccess($event,items)"
+                                 @fileNameChange="fileNameChange($event,items)"></upload-file>
+                </el-form-item>
+
+                <el-form-item label="" v-if="form.fileType==1" class="multiFile">
+                    <el-button @click="addFile">添加文件</el-button>
+                </el-form-item>
+
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" :rows="5" type="textarea"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
         <el-button type="primary" class="btns" @click="addemergencyPlan()">确 定</el-button>
         <el-button @click="cancel()">取 消</el-button>
       </span>
-    </el-dialog>
-  </div>
+        </el-dialog>
+    </div>
 </template>
 <script>
 import uploadImg from "@/views/contingencyplan/uploadImg.vue";
 import uploadFile from "@/views/contingencyplan/uploadFile.vue";
 import elImageViewer from "element-ui/packages/image/src/image-viewer";
 import {
-  emergencyPlanList,
-  emergencyPlanAdd,
-  emergencyPlanMod,
-  emergencyPlanDel,
+    emergencyPlanList,
+    emergencyPlanAdd,
+    emergencyPlanMod,
+    emergencyPlanDel,
 } from "@/api/emergencyplan.js";
+
 export default {
-  components: { uploadImg , uploadFile ,elImageViewer},
-  data() {
-    return {
-        uploadDisabled:false,
+    components: {uploadImg, uploadFile, elImageViewer},
+    data() {
+        return {
+            uploadDisabled: false,
 
-      dialogVisible: false,
+            dialogVisible: false,
 
-      title: "",
-      pageSize: 10,
-      recordTotal: 0,
-      currentPage: 1,
-      form: {
-        name: "",
-        fileType: 0,
-        fileList: [],
-        remark: "",
-      },
-      listQuery: {
-        pageIndex: 1,
-        pageSize: 10,
-        filter: {
-          name: "",
-        },
-      },
-        fileName:"",
-        fileUrl:"",
-        fileList:[],
-      list: [],
-      rules: {
-        name: [
-          { required: true, message: "预案名称不能为空", trigger: "change" },
-        ],
-      },
-
-        showViewer:false,
-        viewerList:[],
-        envUrl:process.env.IMG_API
-    };
-  },
-  created() {
-    this.emergencyPlan();
-  },
-  methods: {
-
-      reset(){
-          this.listQuery.filter={}
-          this.listQuery.pageIndex=1
-          this.listQuery.pageSize=10
-          this.emergencyPlan();
-      },
-
-      downLoadFile(fileUrl){
-          return this.$confirm(`确定下载该文件?`,'提示',{
-              confirmButtonText:'确定',
-              cancelButtonText:'取消',
-              type:'warning',
-          }).then(() =>{
-              let a = document.createElement('a')
-              a.href = process.env.BASE_API + '/upload/'+fileUrl
-              a.click();
-          })
-      },
-
-      changeFileType(){
-          this.fileUrl=""
-          this.fileName=""
-          this.fileList=[]
-      },
-
-      uploadFileSuccess(res){
-          this.fileName=res.fileName
-          this.fileUrl=res.fileUrl
-      },
-
-      uploadImgSuccess(res){
-          let file = {
-              fileUrl : res.fileUrl,
-              fileName : res.fileName,
-              url:res.url
-          }
-          this.fileList.push(file)
-      },
-
-      removeImgSuccess(res){
-          this.fileList=res.fileList
-      },
-
-    async emergencyPlan() {
-      var res = await emergencyPlanList(this.listQuery);
-      if (res.data.code === "200") {
-        this.list = res.data.result.records;
-        this.recordTotal = res.data.result.total
-        this.pageSize=res.data.result.size;
-        this.currentPage = res.data.result.current
-          for (let i = 0 ; i < this.list.length ; i++){
-              if (this.list[i].fileList!=null && this.list[i].fileList.length>0){
-                  let viewerList = []
-                  for (let j = 0 ; j<this.list[i].fileList.length ; j++){
-                      viewerList.push(this.envUrl+this.list[i].fileList[j].fileUrl)
-                  }
-                  this.list[i].viewerList=viewerList
-              }
-          }
-      }
-    },
-    emergencyPlanC(value, type) {
-      this.dialogVisible = true;
-      this.$nextTick(() => {
-        this.$refs["form"].clearValidate();
-      });
-      if (type === "新增") {
-        this.title = "新增";
-        this.form = {};
-        this.fileUrl="";
-        this.fileName="";
-        this.fileList=[]
-      } else {
-        this.title = "编辑";
-          this.form=JSON.parse(JSON.stringify(value));
-        if (this.form.fileType==0){
-            this.fileList=value.fileList
-        } else{
-            this.fileUrl=value.fileList[0].fileUrl;
-            this.fileName=value.fileList[0].fileName
-        }
-      }
-    },
-    addemergencyPlan() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-            if (this.form.fileType==0){
-                this.form.fileList=this.fileList
-            }
-            if (this.form.fileType==1){
-                let fileList = []
-                if (this.fileUrl!=""){
-                    let file={
-                        fileUrl:this.fileUrl,
-                        fileName:this.fileName
-                    }
-                    fileList.push(file)
+            title: "",
+            pageSize: 10,
+            recordTotal: 0,
+            currentPage: 1,
+            form: {
+                name: "",
+                fileType: 0,
+                fileList: [],
+                remark: "",
+            },
+            listQuery: {
+                pageIndex: 1,
+                pageSize: 10,
+                filter: {
+                    name: "",
+                },
+            },
+            fileName: "",
+            fileUrl: "",
+            fileList: [],
+            list: [],
+            fileIndex: 1,
+            files: [
+                {
+                    fileName: "",
+                    fileUrl: ""
                 }
-                this.form.fileList=fileList
-            }
-          if (this.title === "新增") {
-            emergencyPlanAdd(this.form).then((res) => {
-              if (res.data.code === "200") {
-                this.dialogVisible = false;
-                this.emergencyPlan();
-                this.$notify({
-                  type: "success",
-                  duration: 2000,
-                  message: "新增成功",
-                  title: "成功",
-                });
-              }else{
-                  this.$message.error(res.data.message);
-              }
-            });
-          }
-         else {
-          emergencyPlanMod(this.form).then((res) => {
-            if (res.data.code === "200") {
-              this.dialogVisible = false;
-              this.emergencyPlan();
-              this.$notify({
-                type: "success",
-                duration: 2000,
-                message: "编辑成功",
-                title: "成功",
-              });
-            }else{
-                this.$message.error(res.data.message);
-            }
-          });
-        }
-        }
-      });
+            ],
+            rules: {
+                name: [
+                    {required: true, message: "预案名称不能为空", trigger: "change"},
+                ],
+            },
+
+            showViewer: false,
+            viewerList: [],
+            envUrl: process.env.IMG_API
+        };
     },
-    deleteById(val) {
-        this.$confirm('确认删除吗','提示', {
-            confirmButtonText: '确认',
-            cancelButtonText: '取消',
-            type: 'warning'
-        })
-            .then(()=>{
-              emergencyPlanDel({ id: val }).then(() => {
-                this.emergencyPlan();
-                this.$notify({
-                  title: "成功",
-                  message: "删除成功",
-                  type: "success",
-                  duration: 2000,
-                });
-              });
+    created() {
+        this.emergencyPlan();
+    },
+    methods: {
+
+        reset() {
+            this.listQuery.filter = {}
+            this.listQuery.pageIndex = 1
+            this.listQuery.pageSize = 10
+            this.emergencyPlan();
+        },
+
+        downLoadFile(fileUrl) {
+            return this.$confirm(`确定下载该文件?`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }).then(() => {
+                let a = document.createElement('a')
+                a.href = process.env.BASE_API + '/upload/' + fileUrl
+                a.click();
             })
-            .catch(error =>{
+        },
+
+        changeFileType() {
+            this.fileUrl = ""
+            this.fileName = ""
+            this.fileList = []
+        },
+
+        uploadFileSuccess(res, item) {
+            item.fileName = res.fileName
+            item.fileUrl = res.fileUrl
+        },
+
+        fileNameChange(res, item) {
+            item.fileName = res;
+        },
+
+        uploadImgSuccess(res) {
+            let file = {
+                fileUrl: res.fileUrl,
+                fileName: res.fileName,
+                url: res.url
+            }
+            this.fileList.push(file)
+        },
+
+        removeImgSuccess(res) {
+            this.fileList = res.fileList
+        },
+
+        async emergencyPlan() {
+            var res = await emergencyPlanList(this.listQuery);
+            if (res.data.code === "200") {
+                this.list = res.data.result.records;
+                this.recordTotal = res.data.result.total
+                this.pageSize = res.data.result.size;
+                this.currentPage = res.data.result.current
+                for (let i = 0; i < this.list.length; i++) {
+                    if (this.list[i].fileList != null && this.list[i].fileList.length > 0) {
+                        let viewerList = []
+                        for (let j = 0; j < this.list[i].fileList.length; j++) {
+                            viewerList.push(this.envUrl + this.list[i].fileList[j].fileUrl)
+                        }
+                        this.list[i].viewerList = viewerList
+                    }
+                }
+            }
+        },
+        emergencyPlanC(value, type) {
+            this.dialogVisible = true;
+            this.$nextTick(() => {
+                this.$refs["form"].clearValidate();
             });
+            if (type === "新增") {
+                this.title = "新增";
+                this.form = {};
+                this.fileUrl = "";
+                this.fileName = "";
+                this.files = []
+                this.fileList = []
+            } else {
+                this.title = "编辑";
+                this.form = JSON.parse(JSON.stringify(value));
+                this.files = this.form.fileList;
+                if (this.form.fileType == 0) {
+                    this.fileList = value.fileList
+                } else {
+                    this.fileUrl = value.fileList[0].fileUrl;
+                    this.fileName = value.fileList[0].fileName
+                }
+            }
+        },
+        addemergencyPlan() {
+            console.log(this.files);
+            // return ;
+            this.$refs["form"].validate((valid) => {
+                if (valid) {
+                    if (this.form.fileType == 0) {
+                        this.form.fileList = this.fileList
+                    }
+                    if (this.form.fileType == 1) {
+                        // let fileList = []
+                        // if (this.fileUrl != "") {
+                        //     let file = {
+                        //         fileUrl: this.fileUrl,
+                        //         fileName: this.fileName
+                        //     }
+                        //     fileList.push(file)
+                        // }
+                        this.form.fileList = this.files.filter(n => {
+                            return n.fileUrl != null && n.fileUrl != '' && n.fileName != null && n.fileName != '';
+                        })
+                    }
+                    if (this.title === "新增") {
+                        emergencyPlanAdd(this.form).then((res) => {
+                            if (res.data.code === "200") {
+                                this.dialogVisible = false;
+                                this.emergencyPlan();
+                                this.$notify({
+                                    type: "success",
+                                    duration: 2000,
+                                    message: "新增成功",
+                                    title: "成功",
+                                });
+                            } else {
+                                this.$message.error(res.data.message);
+                            }
+                        });
+                    } else {
+                        emergencyPlanMod(this.form).then((res) => {
+                            if (res.data.code === "200") {
+                                this.dialogVisible = false;
+                                this.emergencyPlan();
+                                this.$notify({
+                                    type: "success",
+                                    duration: 2000,
+                                    message: "编辑成功",
+                                    title: "成功",
+                                });
+                            } else {
+                                this.$message.error(res.data.message);
+                            }
+                        });
+                    }
+                }
+            });
+        },
+        deleteById(val) {
+            this.$confirm('确认删除吗', '提示', {
+                confirmButtonText: '确认',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    emergencyPlanDel({id: val}).then(() => {
+                        this.emergencyPlan();
+                        this.$notify({
+                            title: "成功",
+                            message: "删除成功",
+                            type: "success",
+                            duration: 2000,
+                        });
+                    });
+                })
+                .catch(error => {
+                });
+        },
+        cancel() {
+            this.emergencyPlan();
+            this.dialogVisible = false;
+        },
+        find() {
+            this.emergencyPlan();
+        },
+        handleSizeChange(val) {
+            this.listQuery.pageSize = val
+            this.emergencyPlan();
+        },
+        addFile() {
+            this.files.push({
+                fileUrl: "",
+                fileName: ""
+            })
+        },
+        handleCurrentChange(val) {
+            this.listQuery.pageIndex = val
+            this.emergencyPlan();
+        },
     },
-      cancel(){
-          this.emergencyPlan();
-          this.dialogVisible = false;
-      },
-    find() {
-      this.emergencyPlan();
-    },
-     handleSizeChange(val){
-                this.listQuery.pageSize = val
-                this.emergencyPlan();
-            },
-            handleCurrentChange(val){
-                this.listQuery.pageIndex = val
-                this.emergencyPlan();
-            },
-  },
 };
 </script>
 <style scoped>
-.btns{
-  background-color: #034EA2;
-  border: 1px solid #034EA2;
+.btns {
+    background-color: #034EA2;
+    border: 1px solid #034EA2;
+}
+
+>>> .el-input.is-disabled .el-input__inner {
+    background-color: white;
 }
 </style>

--
Gitblit v1.9.2