一文搞定上传图片和上传内容

<template>
  <div class="channelIns">
    <div class="cm-title">
      <span>录入类型：</span>
      <a-select default-value="lucy" style="width: 180px" @change="handleChange" placeholder="请选择"
                v-model="query.entryType">
        <a-select-option value="content">
          红旗标杆内容
        </a-select-option>
        <a-select-option value="pressRealse">
          新闻公告内容
        </a-select-option>
        <a-select-option value="picture">
          红旗标杆图片
        </a-select-option>
      </a-select>
      <span style="margin-left: 20px;">标杆类型：</span>
      <a-select placeholder="请选择"
                v-model="query.BENCH_TYPE" @change="TypeChange" style="width: 120px !important;">
        <a-select-option value="provice">
          省标杆
        </a-select-option>
        <a-select-option value="city">
          市标杆
        </a-select-option>
      </a-select>
      <a-button type="primary" @click="addVisible = true" style="margin-left: 20px" icon="plus">红旗标杆内容上传</a-button>
      <a-button type="primary" @click="addPicClick" style="margin-left: 20px" icon="plus">红旗标杆图片上传</a-button>
      <a-button type="primary" @click="titleVisible = true" style="margin-left: 20px" icon="upload">新闻公告内容上传
      </a-button>
      <a-button type="primary" @click="searchQuery()" style="margin-left: 20px" icon="search">查询</a-button>

    </div>
    <!--  作战任务新闻公告内容上传-->
    <a-modal
      :title="title"
      :maskClosable="true"
      :width="600"
      placement="right"
      :closable="true"
      @cancel="handleAddCancel"
      @ok="handleOk"
      :visible="titleVisible"
      cancelText="关闭"
      :footer="null"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-form-model-item label="新闻标题" prop="NOTICE_TITLE">
          <a-input v-model="form.NOTICE_TITLE"/>
        </a-form-model-item>
        <a-form-model-item label="标杆内容" prop="NOTICE_DESC">
          <a-input v-model="form.NOTICE_DESC"/>
        </a-form-model-item>

      </a-form-model>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }">
        <a-button @click="resetForm">
          重置
        </a-button>
        <a-button type="primary" style="margin-left: 10px;" @click="handleOk()" >
          确定
        </a-button>
      </a-form-model-item>
    </a-modal>

    <div class="cm-table">
      <a-table :columns="columns"
               :data-source="dataSource"
               rowKey="key"
               @change="change"
               :pagination="pagination"
      >
        <span slot="Img" slot-scope="text, recode, index" class="table-index">
          <span class="cm-img" @click="showImg(recode)">{{ text }}</span>
        </span>
      </a-table>
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="巡检照片" class="previewImg" :src="previewImage"/>
    </a-modal>

    <!-- 上传内容-->
    <a-modal :visible="addVisible" :footer="null" @cancel="handleAddCancel" width="600px">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >

        <a-form-model-item label="标杆标题" prop="FLAG_TITLE">
          <a-input v-model="form.FLAG_TITLE" :maxLength="2000"/>
        </a-form-model-item>

        <a-form-model-item label="标杆类型" prop="BENCH_TYPE">

          <a-select v-model="form.BENCH_TYPE" placeholder="请选择">
            <a-select-option value="provice">
              省标杆
            </a-select-option>
            <a-select-option value="city">
              市标杆
            </a-select-option>
          </a-select>
        </a-form-model-item>


        <a-form-model-item label="标杆内容" prop="BENCH_CONTENT">
          <a-input v-model="form.BENCH_CONTENT" type="textarea" :maxLength="2000"/>
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }">
          <a-button @click="resetForm">
            重置
          </a-button>
          <a-button type="primary" style="margin-left: 10px;" @click="handAdd()" >
            确定
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>


    <a-modal :visible="ImgaddVisible" :footer="null" @cancel="handleAddCancel" width="600px">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="标杆类型" prop="BENCH_TYPE" :labelCol="labelCol" :wrapperCol="wrapperCol">

          <a-select v-model="form.BENCH_TYPE" placeholder="请选择">
            <a-select-option value="provice">
              省标杆
            </a-select-option>
            <a-select-option value="city">
              市标杆
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="标杆标题" prop="BENCH_TITLE">
          <a-input v-model="form.BENCH_TITLE" type="textarea" :maxLength="2000"/>
        </a-form-model-item>
        <a-form-model-item label="标杆图片" prop="imgFiles">
          <a-upload
            :beforeUpload="beforeUpload"
            list-type="picture-card"
            :file-list="fileList"
            accept="image/*"
            @preview="handlePreview"
            @change="handleImgChange"
          >
            <div v-if="fileList.length < 1">
              <a-icon type="plus"/>
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-upload>
          <div v-if="upPicTip" style="color: #f5222d;margin-top:-15px;">请上传图片</div>
          
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }">
          <a-button @click="resetForm">
            重置
          </a-button>
          <a-button type="primary" style="margin-left: 10px;" @click="onSubmit" >
            确定
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import {defineComponent, ref} from 'vue';
  import {uploadProBenchMart, uploadProBenchMartPic, uploadPressRelease, getEntryCateList} from '@/api/api'
  /*import {getInsList,upload} from '@api/Map/resources'*/
  const Pagination = {
    current: 1,
    pageSize: 10,
    showTotal: (total) => '共 ' + total + ' 条',
    showQuickJumper: true
  };
  const columns = [
    {
      title: '标杆类型',
      align: "left",
      dataIndex: 'BENCH_TYPE',
      ellipsis: true,
      width: 200
    },
    {
      title: '标杆内容',
      dataIndex: 'BENCH_CONTENT',
      align: "left",
      width: 200,
      ellipsis: true,
    },
    {
      title: '提交时间',
      dataIndex: 'INSERT_TIME',
      align: "left",
      ellipsis: true,
      width: 200
    }]
  const Imgcolumns = [
    {
      title: '图片名称',
      align: "left",
      dataIndex: 'PIC_NAME',
      ellipsis: true,
      width: 200
    },
    {
      title: '图片标题',
      dataIndex: 'BENCH_TITLE',
      align: "left",
      ellipsis: true,
      width: 200
    },
    {
      title: '图片路径',
      dataIndex: 'PIC_PATH',
      align: "left",
      ellipsis: true,
      width: 200
    },
    {
      title: '提交时间',
      dataIndex: 'INSERT_TIME',
      align: "left",
      ellipsis: true,
      width: 200
    },
    {
      title: '标杆类型',
      dataIndex: 'BENCH_TYPE',
      align: "left",
      ellipsis: true,
      width: 200
    },
  ]

  const Newcolumns = [
    {
      title: '提交时间',
      align: "left",
      dataIndex: 'INPUT_DATE',
      ellipsis: true,
      width: 200
    },
    {
      title: '新闻内容',
      dataIndex: 'NOTICE_DESC',
      ellipsis: true,
      align: "left",
      width: 200
    },
    {
      title: '新闻标题',
      dataIndex: 'NOTICE_TITLE',
      ellipsis: true,
      align: "left",
      width: 200
    },
    {
      title: '流水号',
      dataIndex: 'NOTICE_ID',
      ellipsis: true,
      align: "left",
      width: 200
    },

  ]

  function getBase64(imgFiles) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(imgFiles);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }

  export default {
    name: "redFlagData",
    components: {
      defineComponent,
    },
    data() {
      let validatePass = (rule, value, callback) => {
        if (this.fileList.length == 0) {
          callback(new Error('请上传图片！'));
        } else {
          callback()
        }
      };
      return {
        upPicTip:false,
        columns,
        recode: this.$route.query,
        title: '作战任务新闻公告内容上传',
        dataSource: [],
        pagination: {
          ...Pagination,
        },
        previewVisible: false,
        addVisible: false,
        titleVisible: false,
        ImgaddVisible: false,
        addLoading: false,
        previewImage: '',
        labelCol: {span: 6},
        wrapperCol: {span: 14},
        form: {
          BENCH_TYPE: undefined,
          BENCH_CONTENT: '',
          NOTICE_TITLE: '',
          NOTICE_DESC: '',
          FLAG_TITLE:''
        },
        rules: {
          BENCH_TYPE: [{required: true, message: '请选择标杆类型', trigger: 'change'}],
          BENCH_TITLE: [{required: true, message: '请输入标杆标题', trigger: 'blur'}],
          BENCH_CONTENT: [{required: true, message: '请输入标杆内容', trigger: 'blur'}],
          NOTICE_TITLE: [{required: true, message: '请输入新闻标题', trigger: 'blur'}],
          NOTICE_DESC: [{required: true, message: '请输入新闻内容', trigger: 'blur'}],
          // imgFiles: [{required: true, message: '请上传图片', trigger: 'blur'}],
          FLAG_TITLE:[{required: true, message: '请输入标杆标题', trigger: 'blur'}]
        },
        fileList: [],

        imgFiles: null,
        query: {
          entryType: undefined,//使选择器出现请选择
          BENCH_TYPE: undefined,
        },
      }
    },
    mounted() {
    
    },
    //方法集合
    methods: {
      addPicClick(){
        this.ImgaddVisible = true
        this.upPicTip=false
      },
      
      init() {
        this.recode = this.$route.query;
        this.searchQuery()
      },
      // 分页事件
      change(pagination) {
        this.pagination = pagination;
      },
      handleChange(e) {
        this.query.entryType = e
      },
      TypeChange(e) {
        this.query.BENCH_TYPE = e
      },
      //=> 查询不同表头对应的数据，页面切换
      searchQuery() {
        let e = this.query.entryType
        switch (e) {
          case 'content':
            this.columns = columns;
            break;
          case 'pressRealse':
            this.columns = Newcolumns;
            break;
          case 'picture':
            this.columns = Imgcolumns;
            break;
        }

        this.queryList()
      },
      // 图片放大显示 取消按钮
      handleCancel() {
        this.previewVisible = false;
        this.previewImage = "";
      },
      // 新增表达取消按钮
      handleAddCancel() {
        this.addVisible = false;
        this.ImgaddVisible = false;
        this.titleVisible = false;
      },
      // 显示图片
      showImg(recode) {
        if (recode.INSPECTION_IMG_PATH) {
          const path = recode.INSPECTION_IMG_PATH
          this.previewImage = window._CONFIG['imgFileDomainURL'] + path.substring(path.lastIndexOf('upload/'));
          this.previewVisible = true;
        }
      },
      //=>作战任务新闻公告内容上传
      handleOk() {
        this.titleVisible = true;
        debugger
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let params = {
              'NOTICE_TITLE': this.form.NOTICE_TITLE,
              'NOTICE_DESC': this.form.NOTICE_DESC
            }
            uploadPressRelease(params).then(res => {
              if (res.code = 200) {
                this.titleVisible = false
                this.$message.success(res.result.resultMess)
              } else {
                this.titleVisible = false
                this.$message.warning(res.result.resultMess)
              }

            })

          } else {
            return false
            this.resetForm()//重置输入框
          }
        });

      },
      //新增内容
      handAdd() {
        this.addLoading = true;
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
         
            const param = {
              'BENCH_TYPE': this.form.BENCH_TYPE,
              'BENCH_CONTENT': this.form.BENCH_CONTENT,
              'BENCH_TITLE': this.form.FLAG_TITLE,
            }
           
            uploadProBenchMart(param).then(res => {
              if (res.success) {
                this.addVisible = false;
                this.dataSource = res.result || [];
                this.$message.success('添加成功！');
              }
              this.addLoading = false;

            }).catch(error => {
              this.$message.error('操作失败：' + error.message);
            })
          } else {
            return false;
            this.resetForm();
          }
        });

      },
      // 新增图片-确定按钮
      onSubmit() {
        this.addLoading = true;
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const formData = new FormData()
            let _this = this//此处this需要重定向
  
            if(!_this.imgFiles){
              _this.upPicTip=true;
              return false;
            }else{
              this.upPicTip=false;
            }
            formData.append('BENCH_TYPE', _this.form.BENCH_TYPE);
            formData.append('BENCH_TITLE', _this.form.BENCH_TITLE);
            formData.append('imgFiles', _this.imgFiles)
            uploadProBenchMartPic(formData).then(res => {
              if (res.success) {
                _this.ImgaddVisible = false;
                _this.$message.success('添加成功！');
              }
              _this.addLoading = false;
              _this.resetForm();
            }).catch(error => {
              _this.$message.error('操作失败：' + error.message);
            })
          } else {
            this.resetForm();
            return false;
          }
        });
      },
      //列表数据
      queryList() {
       
        let params = {
          'entryType': this.query.entryType,
          'BENCH_TYPE': this.query.BENCH_TYPE,
        }
       
        getEntryCateList(params).then(res => {
          if (res.code = 200) {
            debugger
            this.dataSource = res.result.resultList.list
            this.loading = false
          }
        })
      },

      // 表单重置
      resetForm() {
        this.fileList = [];
        this.imgFiles = null;
        this.$refs.ruleForm.resetFields()
      },
     //预览图片 
      async handlePreview(imgFiles) {
        if (!imgFiles.url && !imgFiles.preview) {
          imgFiles.preview = await getBase64(imgFiles.originFileObj);
        }
        this.previewImage = imgFiles.url || imgFiles.preview;
        this.previewVisible = true;
      },
      handleImgChange({fileList}) {
        this.fileList = fileList;
        if(this.fileList.length>0){
          this.upPicTip=false
        }
      },
      beforeUpload(imgFiles, fileList) {
        this.imgFiles = imgFiles;
        return false;
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      $route(to, from) {
        if (to.path.indexOf('redFlagData.vue') > -1) {
          // 对路由变化作出响应...
          this.init()
        }
      }
    },
  }
</script>

<style scoped lang="less">
  .channelIns {
    background-color: #fff;

    .cm-title {
      /*  padding: 10px 20px;
        display: flex;
        align-items: baseline;
        justify-content: space-between;*/
      display: inline-block;
      margin-bottom: 15px;
      padding: 10px 20px;
      margin-left: 20px;
      //border-bottom: 1px solid #DDDDDD;
    }

    .cm-img {
      cursor: pointer;
      color: #FE7200;
    }

    .previewImg {
      width: 100%;
      min-width: 300px;
      max-width: 580px;
      min-height: 250px;
      max-height: 500px;
    }

    .cm-table {
      padding: 10px 20px;
    }

    /deep/ .ant-table-thead > tr > th {
      color: #666;
      background-color: rgba(68, 153, 255, 0.08);
    }
  }
</style>