<template>
  <div class="container">
    <div>
      <el-form :inline="true" :model="reimbursementQurey">
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="addreimbursement()"
            >申请报销</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table
        :data="reimbursementList"
        style="width: 100%; text-align: center"
        border
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <div style="padding: 10px">
              <el-descriptions title="报销详情" :column="5" border>
                <el-descriptions-item label="支付方式" :span="5">{{
                  props.row.paymentMethod
                }}</el-descriptions-item>
                <el-descriptions-item label="组长审批状态" :span="2">
                  <el-tag
                    :type="
                      props.row.reimbursementState == 0
                        ? 'info'
                        : props.row.reimbursementState == 2
                        ? 'danger'
                        : 'success'
                    "
                  >
                    {{
                      props.row.reimbursementState == 0
                        ? "待审批"
                        : props.row.reimbursementState == 2
                        ? "驳回"
                        : "通过"
                    }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="组长审批时间" :span="3">{{
                  props.row.headmanTime
                }}</el-descriptions-item>
                <el-descriptions-item label="组长驳回缘由" :span="5">{{
                  props.row.headmanRefute || "无"
                }}</el-descriptions-item>
                <el-descriptions-item label="财务审批状态" :span="2">
                  <el-tag
                    :type="
                      props.row.reimbursementState == 4
                        ? 'danger'
                        : props.row.reimbursementState == 3
                        ? 'success'
                        : 'info'
                    "
                  >
                    {{
                      props.row.reimbursementState == 4
                        ? "驳回"
                        : props.row.reimbursementState == 3
                        ? "通过"
                        : "待审批"
                    }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="财务审批时间" :span="3">{{
                  props.row.financeTime
                }}</el-descriptions-item>
                <el-descriptions-item label="财务驳回缘由" :span="5">{{
                  props.row.finaceRefute || "无"
                }}</el-descriptions-item>
                <el-descriptions-item label="查看详情" :span="5">
                  <el-button
                    @click="getdetails(props.row)"
                    type="primary"
                    style="margin: 5px"
                    size="mini"
                    >查看详情</el-button
                  >
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="50px" align="center">
          <template slot-scope="scope">
            {{
              (reimbursementQurey.pageNum - 1) * reimbursementQurey.pageSize +
              scope.$index +
              1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目" align="center" />
        <el-table-column prop="applyTotalAmountSmall" label="申报总金额(元)" align="center" />
        <el-table-column label="核报总金额(元)" align="center">
          <template slot-scope="props">
            {{ props.row.verifyTotalAmountSmall || "还未核实金额" }}
          </template>
        </el-table-column>
        <el-table-column label="组长审批人" align="center">
          <template slot-scope="props">
            {{ props.row.financeName || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="财务审批人" align="center">
          <template slot-scope="props">
            {{ props.row.financeName || "暂无" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="fillingTime"
          label="报销日期"
          align="center"
          :formatter="timestampToTime"
        ></el-table-column>
        <el-table-column prop="prop" label="发票图片" align="center">
          <template slot-scope="scope">
            <el-button
              style="margin: 5px"
              type="primary"
              size="mini"
              @click="ReviseImage(scope.row)"
              >点击查看</el-button
            >
            <el-button
              style="margin: 5px"
              size="mini"
              icon="el-icon-edit"
              type="info"
              @click="getinvoive(scope.row)"
              v-if="
                scope.row.reimbursementState != 3 &&
                scope.row.reimbursementState != 1 && 
                scope.row.reimbursementState != 2 &&
                scope.row.reimbursementState != 4
              "
              >修改发票</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="附件下载" align="center">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="selectImage(scope.row)">点击下载</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="reimbursementState" label="状态" align="center">
          <template slot-scope="props">
            <el-tag
              :type="
                props.row.reimbursementState == 0 ||props.row.reimbursementState == 1 
                  ? 'info'
                  : 
                    props.row.reimbursementState == 3
                  ? 'success'
                  : 'danger'
              "
            >
              {{
                props.row.reimbursementState == 0
                  ? "待小组长通过"
                  : props.row.reimbursementState == 1
                  ? "待财务长通过"
                  : props.row.reimbursementState == 2
                  ? "小组长驳回"
                  : props.row.reimbursementState == 3
                  ? "财务长通过"
                  : "财务长驳回"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button
              style="margin: 5px"
              size="mini"
              icon="el-icon-edit"
              type="info"
              @click="updataReimbursement(scope.row)"
              v-if="
                scope.row.reimbursementState != 3 &&
                scope.row.reimbursementState != 1&&
                scope.row.reimbursementState != 2 &&
                scope.row.reimbursementState != 4
              "
              >修改信息</el-button
            >
            <el-button
              style="margin: 5px"
              size="mini"
              type="danger"
              @click="Resubmit(scope.row)"
              v-if="
                scope.row.reimbursementState == 2 ||
                scope.row.reimbursementState == 4
              "
              >重新提交</el-button
            >
            <el-button
              style="margin: 5px"
              size="mini"
              type="info"
              @click="withdraw(scope.row)"
              v-if="scope.row.reimbursementState == 0"
            >
              撤回</el-button
            >
            <div v-if="scope.row.reimbursementState == 3"  style="width：100%;text-align: center ; color:#67C23A;">已通过</div>
            <div v-if="scope.row.reimbursementState == 1"  style="width：100%;text-align: center ; color:darkgray;">待审批</div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看详情 -->
      <el-drawer title="查看详情" :visible.sync="drawer" :direction="direction" size="35%">
        <div class="cd">
          <el-row  justify="center" align="middle" >
          <el-col
            v-for="(item, index) in reimbursementDetails.list"
            :key="index"
            :span="20"
          >
            <el-descriptions
              :title="item.name"
              border
              :column="1"
              style="margin: 10px 0"
            >
              <el-descriptions-item
                label="金额"
                :contentStyle="contentStyle"
                :labelStyle="labelStyle"
                >{{ item.money }}元</el-descriptions-item
              >
              <el-descriptions-item
                label="备注"
                :contentStyle="contentStyle"
                :labelStyle="labelStyle"
                >{{ item.explain }}</el-descriptions-item
              >
              <el-descriptions-item
                label="说明"
                :contentStyle="contentStyle"
                :labelStyle="labelStyle"
                >{{ item.remarks }}</el-descriptions-item
              >
            </el-descriptions>
          </el-col>
        </el-row>   
        </div>
           
      </el-drawer>
      <!-- 发票详情 -->
      <el-drawer
        title="发票详情"
        :visible.sync="invoiceShow"
        :direction="direction"
        size="30%"
      >
        <!-- filePath-->
        <el-table
          :data="getinvoivelist"
          style="width: 100%; text-align: center"
          border
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column prop="prop" label="发票详情">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.filePath"
                :preview-src-list="[scope.row.filePath]"
              ></el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
      <!-- 修改发票信息 -->
      <el-drawer title="修改发票" :visible.sync="drawer1">
        <div>
          <el-form :inline="true" :model="invoiceQurey">
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            style="margin:0 15px"
            @click="addinvoice()"
            >添加发票号码</el-button
          >
        </el-form-item>
      </el-form>
        </div>
        <div>
          <el-table
            :data="invoicelist"
            style="width: 100%; text-align: center"
            border
          >
            <el-table-column
            type="index"
            label="序号"
            width="40"
          ></el-table-column>
            <el-table-column prop="number" label="发票号码" width="180" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  style="margin: 5px"
                  size="mini"
                  type="info"
                  @click="delinvoice(scope.row)"
                >
                  删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
      <!-- 添加发票对话框 -->
      <el-dialog
  title="添加发票"
  :visible.sync="dialogVisible"
  width="30%"
  >
 <template>
  <el-form
        ref="form"
        :model="invoiceQurey"
        :inline="true"
        label-width="150px"
       >
        <el-form-item  prop="fromList">
          <el-select
      style="width:500px"
            v-model="invoiceQurey.fromList"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择发票号码"
          >
            <el-option
              v-for="item in getinvoivelist"
              :key="item.invoiceId"
              :label="item.number"
              :value="item.invoiceId"
            ></el-option>
          </el-select>
        </el-form-item>
  </el-form>
</template>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit()">确 定</el-button>
  </span>
</el-dialog>
    </div>
    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="reimbursementQurey.pageNum"
        :page-size="reimbursementQurey.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 附件的下载与添加 -->
    <div>
      <el-drawer title="附件操作" :visible.sync="drawer2" :direction="direction" size="50%">
        <el-button
          type="primary"
          style=" margin-left:5%;margin:30px 50px "
          @click="updatecard"
          :disabled="isDisabled"
        >添加附件</el-button>
        <el-card
          class="box-card"
          style="width:90%; margin-left:5%; margin-top:20px"
          v-show="getshow==1"
        >
          <el-row class="row-bg">
            <div v-for="index in queryDTOList" :key="index.enclosureId" class="lsitall">
              <el-col :span="10">
                <div style=" margin-top: 6px;margin-left:40px">附件{{index.enclosureId}}</div>
              </el-col>
              <el-col :span="12" style="margin-left:-50px">
                <el-button
                  type="primary"
                  icon="el-icon-folder-checked"
                  class="a-style"
                  size="mini"
                  style=" font-size: 13px"
                  @click="delProject(index)"
                >下载</el-button>
                <el-popover placement="top" width="160" v-model="index.visible">
                  <p>确定要删除此条附件吗</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="index.visible= false">取消</el-button>
                    <el-button type="primary" size="mini" @click="deleteProject(index)">确定</el-button>
                  </div>
                    <el-button
                    type="danger"
                    icon="el-icon-delete"
                    class="a-style"
                    size="mini "
                    style="font-size: 13px"
                    slot="reference"
                    :disabled="isDisabled"
                  >删除</el-button>
                </el-popover>
              </el-col>
            </div>
          </el-row>
        </el-card>
        <!-- 附件上传 -->
        <el-card
          class="box-card"
          style="width:90%; margin-left:5%; margin-top:20px"
          v-show="getshow==0"
        >
          <div style="width:60%;margin-left:30px">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入附件详情"
              v-model="proutlist1.enclosureDescribe"
              style="margin:20px 0px;"
            ></el-input>
            <el-upload
              class="upload-demo"
              ref="upload1"
              drag
              :action="action1"
              :file-list="fileList1"
              :on-remove="delfile1"
              :auto-upload="false"
              :on-change="onChangepdf"
              :on-success="Refresh"
              :data="proutlist1"
              multiple
              style="margin:20px 0px;"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传附件</em>
              </div>
              <div class="el-upload__tip" slot="tip">只能上传文件，且不超过500kb</div>
            </el-upload>
          </div>
          <div style="margin-left:75%;">
            <el-button @click="remove()">取 消</el-button>
            <el-button type="primary" @click="determine()" style="margin-top:20px;">确 定</el-button>
          </div>
        </el-card>
        <div class="box-card" v-show="getshow==3"></div>
      </el-drawer>
    </div>
    
  </div>
</template>

<script>
import { queryBypage, resubmit, reimbursementId } from "@/api/reimbursement";
import { selectByReimbursementId } from "@/api/reimbursementDetails";
import { selectAllById,deletBystatus,selectAllBystatus,updatesubmit, selectByIdF,deleteById  } from "@/api/project";
export default {
  data() {
    return {
      isDisabled:null,//判断是否显示附件的删除按钮
      //修改发票表格
      invoicelist: [],
      invoiceQurey: {
        companyId: null,
        reimbursementId: null,
      }, 
      getinvoivelist: [], //可以选择的发票号
      dialogVisible: false,
      //内容样式
      contentStyle: {
        "text-align": "center",
      },
      //label样式
      labelStyle: { width: "80px" },
      reimbursementQurey: {
        userId: null,
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      reimbursementList: [],
      //抽屉
      drawer: false,
      drawer1: false,
      invoiceShow: false,
      direction: "rtl",
      reimbursementDetails: {
        list: [],
      },
      //查询图片给的值
      getinvoiveId: {
        companyId: null,
        reimbursementId: 0,
        
      },


      //附件///-------
      drawer: false,
 direction: "rtl",
 fileList1: [], //合同文件
 disabled: false,//隐藏
getshow: 1, //判断show的显示与隐藏,
 //查询附件
      queryDTO: {
        companyId: null,
        reimbursementId: null
      },
      queryDTOList: [], //收集附件的数据
      //附件抽屉
      drawer2: false,
      //发票对话框
      dialogFormVisible: false,
      invoiceListAdd: [], //查询发票的集合
      getFormslist: {
        userId: null,
        companyId: null,
        type: 0
      }, //查询的能选择的表单信息
      getListincom: [], //收集选择的数组
      incomeIdgrt: null, //收集incomeId数据
      getshow: 1, //判断show的显示与隐藏,
      //合同文件上传携带参数
      proutlist1: {
        Id: null,
        enclosureDescribe: "",
        status: 2, //0收入 1支出
        companyId: null,
        userId: null
      },
      fileTypepdf: false, //判断合同文件是否存在
      fileList1: [], //附件文件
      disabled: false, //隐藏
    };
  },
  created() {
    this.getinvoiveId.companyId = this.$store.getters.companyId;
    this.reimbursementQurey.userId = this.$store.getters.urId;
    this.invoiceQurey.companyId = this.$store.getters.companyId;
    this.queryDTO.companyId=this.$store.getters.companyId;
    this.action1 = process.env.VUE_APP_BASE_API + "/file/updataEnclosures";//保存附件与下载的接口
    this.getReimbursement();
  },
  methods: {
    //添加 
    submit(){
     this.dialogVisible = false;
     let list = [];
     this.invoiceQurey.fromList.forEach((item) => {
                      list.push({
                        invoiceId: item,
                        reimbursementId:this.invoiceQurey.reimbursementId,
                        status: 1
                      });
                    });
                    updatesubmit(list).then((res)=>{
             if(res.success){
          this.getinvoive({reimbursementId:this.invoiceQurey.reimbursementId});
         this.$message.success(res.msg);
            }
            else {
                 this.$message.error("发票上传失败！");
                   }
      })
     
    },
    //查询发票编号
    Selectinvoielsit() {
      let param = {
        companyId: this.$store.getters.companyId,
        status: 0,
        type: 2,
        userId: this.$store.getters.info.userId,
      };
      selectAllBystatus(param)
        .then((res) => {
        
          if (res.success) {
            this.getinvoivelist = res.data;
          } else {
            this.$message.error(res.msg);
            this.back();
          }
        })
        .catch((error) => {
          this.$message.error("获取发票编号失败");
          this.back();
        });
    },
    //添加发票号码
    addinvoice(){
      this.dialogVisible=true;
      this.Selectinvoielsit()
    },
    //获取发票号列表详情
    getinvoive(data) {
      this.drawer1 = true;
      this.invoiceQurey.reimbursementId = data.reimbursementId;
      selectAllById(this.invoiceQurey).then((res) => {
        console.log(res)
        if (res.success) {
          this.invoicelist = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
     //删除关系
     delinvoice(data){
      deletBystatus(data).then((res)=>{
        if(res.success){
          this.getinvoive(data);
        }
      })
    },

    //查看详情
    getdetails(data) {
      this.drawer = true;
      let param = {
        reimbursementId: data.reimbursementId,
      }; //接口是一个以对象的形式传值 所以定义了一个对象去拿这个参数
      selectByReimbursementId(param)
        .then((res) => {
          if (res.success) {
            //获取数据
            console.log(res);
            this.reimbursementDetails.list = res.data; //接口返回res里面
          }
        })
        .catch((error) => {
          this.$message.error("查询失败");
        });
    },
    //申请报销
    addreimbursement() {
      this.$router.push({ path: "/reimbursementAdd" });
    },
    //获取申请报销列表
    getReimbursement() {
      queryBypage(this.reimbursementQurey)
        .then((res) => {
          if (res.success) {
            this.reimbursementList = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("回去数据失败");
        });
    },
    //修改信息
    updataReimbursement(data) {
      //data是列表中所有的数据
      console.log(data);
      this.$router.push({
        path: "/reimbursementUpdata",
        //query 找到我们需要的字段
        query: {
          reimbursementId: data.reimbursementId, //传那一行数据的id
          projectId: data.projectId, //项目id 下拉框根据项目id选择
          typeId: data.typeId, //报销类别id
          money: data.money, //备注
          applyTotalAmountLarge: data.applyTotalAmountLarge, //大写金额
          applyTotalAmountSmall: data.applyTotalAmountSmall, //小写金额
          summary: data.summary, //摘要
          paymentMethod: data.paymentMethod, //支付方式
        },
      });
    },
    //换页
    handleCurrentChange(val) {
      this.reimbursementQurey.pageNum = val;
      this.getReimbursement();
    },
    //时间处理
    timestampToTime(row, column, cellValue) {
      return cellValue.split(" ")[0];
    },
    //重新提交
    Resubmit(data) {
      //重新提交就要让之前的数据回复。
      //两个审批人的id、状态、审批时间、驳回缘由、核实金额
      //删除记录在重新填，或者删除字段记录
      data.reimbursementState = 0; //状态
      data.verifyTotalAmountLarge = null; //核实金额
      data.verifyTotalAmountSmall = null; //核实金额
      data.headmanRefute = null; //驳回缘由
      data.finaceRefute = null; //驳回缘由
      data.financeTime = null; //审批时间
      data.headmanTime = null; //审批时间
      data.financeId = null; //审批人的id
      data.headmanId = null; //审批人的id
      resubmit(data)
        .then((res) => {
          if (res.success) {
            this.$message.success("重新提交成功，等待审批");
            this.getReimbursement();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("重新提交失败");
        });
    },
    //撤回
    withdraw(data) {
      // console.log(data.reimbursementId)
      reimbursementId(data.reimbursementId).then((res) => {
        if (res.success) {
          this.getReimbursement();
        }
      });
    },
    //查看图片的方法
    ReviseImage(row) {
      this.invoiceShow = true;
      this.getinvoiveId.reimbursementId = row.reimbursementId;
      this.Selectinsertlsit();
    },
    //查询发票图片
    Selectinsertlsit() {
       console.log(this.getinvoivelist)
      selectAllById(this.getinvoiveId)
        .then((res) => {
          if (res.success) {
            this.getinvoivelist = res.data;
            this.getinvoivelist.forEach((e) => {
              e.filePath = process.env.VUE_APP_BASE_API + e.filePath;
            });
          } else {
            this.$message.error(res.msg);
            this.back();
          }
        })
        .catch((error) => {
          this.$message.error("获取发票图片失败");
          this.back();
        });
    },

    ///----附件区域

    //查看项目附件.....
    selectImage(row) {
      console.log(row);
      if(row.reimbursementState==1 ||row.reimbursementState==3 || row.reimbursementState==2 ||row.reimbursementState==4){
        this.isDisabled=true
      }else{
        this.isDisabled=false
      }
      this.queryDTO.reimbursementId	= row.reimbursementId;
      this.proutlist1.Id = row.reimbursementId;
      selectByIdF(this.queryDTO)
        .then(res => {
          if (res.success) {
            this.queryDTOList = res.data;
            if (this.queryDTOList.length > 0) {
              this.drawer2 = true;
              this.getshow = 1;
              this.disabled = false;
            } else {
              this.drawer2 = true;
              this.disabled = false;
              this.getshow = 3;
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          this.$message.error("获取附件文件失败");
        });
    },
  //下载附件
    delProject(row) {
      console.log(row)
      var a = document.createElement("a"); //创建一个<a></a>标签
      a.href = process.env.VUE_APP_BASE_API + row.enclosureFile; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
      //a.download = row.enclosureFile; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
      a.target='_blank'
      a.style.display = "none"; // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },
    //显示添加附件
    updatecard() {
      this.getshow = 0;
      this.disabled = true;
      this.delfile1();
    },
    //删除附件
    deleteProject(row) {
  this.submissionFlag=true;
  deleteById(row)
        .then(res => {
          if (res.success) {
            this.selectImage(row);
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.visible = false;
            console.log(res.msg);
          }
        })
        .catch(errror => {
          this.$message.error(res.msg);
        });
    },
    //清除附件文件
    delfile1(file) {
      this.fileList1 = this.fileList1.filter(item => item.uid !== file.uid);
      this.fileTypepdf = false;
    },
    //确定提交附件
    determine() {
      //判断是否有附件文件
      if (this.fileTypepdf) {
        this.proutlist1.userId = this.$store.getters.urId;
        this.proutlist1.companyId = this.$store.getters.companyId;
        this.$refs.upload1.submit();
        this.getshow = 1; //隐藏与显示
        this.disabled = false;
        this.$message({
          showClose: true,
          message: "上传附件成功",
          type: "success"
        });
        this.Refresh();
      } else {
        this.$message.error("请添加附件，在进行提交");
      }
    },
    //刷新附件
    Refresh() {
      console.log(this.proutlist1.Id);
      this.queryDTO.reimbursementId = this.proutlist1.Id;
      console.log(this.proutlist1.Id);
      selectByIdF(this.queryDTO)
        .then(res => {
          if (res.success) {
            this.queryDTOList = res.data;
             this.proutlist1.enclosureDescribe=""//初始化数据
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          this.$message.error("获取附件文件失败");
        });
    },
    //附件取消
    remove() {
      if (this.queryDTOList.length > 0) {
        this.getshow = 1;
        this.disabled = false;
        this.delfile1();
      } else {
        this.getshow = 3;
        this.disabled = false;
        this.delfile1();
      }
    },
    //附件文件校验
    onChangepdf(file) {
      console.log(this.proutlist1);
      const fileNamepdf = file.name;
      let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
      if (fileType != "") {
        this.fileTypepdf = true;
      } else {
        this.$message.warning("附件只能只能上传文件");
        this.$refs.upload1.clearFiles();
        this.fileTypepdf = false;
      }
    }

  },
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.conter {
  margin-bottom: 10px;
}
.footer {
  text-align: right;
}
.lsitall .el-col{
  margin: 20px 10px;
}
.lsitall .el-button {
 margin-left: 16px;
}
.row-bg {
  margin-left: 15%;
}
.dialog-footer {
  width:90%;
  margin:20px 5%;
}
.lsitall .el-col {
 margin: 20px 10px;
}
.lsitall .el-button {
  margin-left: 16px;
}
.row-bg {
  margin-left: 15%;
}
.dialog-footer {
 width: 90%; 
 margin: 20px 5%;
}
.cd{
  width: 90%; 
 margin: 30px 5%;
}
</style>