shj
2022-04-06 b274738442b2214c018e9b55f96a226a33c18cbe
src/views/contingencyplan/index.vue
@@ -7,7 +7,7 @@
            <el-input v-model="listQuery.filter.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="text-align: center">
        <el-col :span="5" style="text-align: center">
          <el-button type="primary" class="btns" icon="el-icon-search" @click="find()"
            >搜索</el-button
          >
@@ -18,13 +18,40 @@
            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="name" align="center" label="文件链接"> </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>
@@ -57,7 +84,7 @@
      style="text-align: right;margin-top: 20px;"
    >
    </el-pagination>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
    <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>
@@ -88,6 +115,7 @@
<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,
@@ -95,12 +123,13 @@
  emergencyPlanDel,
} from "@/api/emergencyplan.js";
export default {
  components: { uploadImg , uploadFile},
  components: { uploadImg , uploadFile ,elImageViewer},
  data() {
    return {
        uploadDisabled:false,
      dialogVisible: false,
      title: "",
      pageSize: 10,
      recordTotal: 0,
@@ -126,16 +155,37 @@
        name: [
          { required: true, message: "预案名称不能为空", trigger: "change" },
        ],
        // remark: [
        //   { required: true, message: "备注不能为空", trigger: "blur" },
        // ],
      },
        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=""
@@ -167,6 +217,15 @@
        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) {
@@ -176,15 +235,13 @@
      });
      if (type === "新增") {
        this.title = "新增";
        this.form = {
          name: "",
          fileType: 0,
          fileList: [],
          remark: "",
        };
        this.form = {};
        this.fileUrl="";
        this.fileName="";
        this.fileList=[]
      } else {
        this.title = "编辑";
        this.form = value;
          this.form=JSON.parse(JSON.stringify(value));
        if (this.form.fileType==0){
            this.fileList=value.fileList
        } else{
@@ -200,11 +257,15 @@
                this.form.fileList=this.fileList
            }
            if (this.form.fileType==1){
                let file={
                    fileUrl:this.fileUrl,
                    fileName:this.fileName
                let fileList = []
                if (this.fileUrl!=""){
                    let file={
                        fileUrl:this.fileUrl,
                        fileName:this.fileName
                    }
                    fileList.push(file)
                }
                this.form.fileList=[file]
                this.form.fileList=fileList
            }
          if (this.title === "新增") {
            emergencyPlanAdd(this.form).then((res) => {
@@ -217,6 +278,8 @@
                  message: "新增成功",
                  title: "成功",
                });
              }else{
                  this.$message.error(res.data.message);
              }
            });
          }
@@ -231,6 +294,8 @@
                message: "编辑成功",
                title: "成功",
              });
            }else{
                this.$message.error(res.data.message);
            }
          });
        }