WXL
2024-02-20 c0b29ee03f4f6c984f35618bfa669ba3f2ab6517
src/views/project/fund/performancedetails/index.vue
@@ -233,6 +233,20 @@
              </template>
            </el-table-column>
            <el-table-column
              prop="taxamount"
              align="center"
              label="扣税金额"
              width="120"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.taxamount"
                  placeholder="扣税金额"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="beneficiaryname"
              align="center"
              label="绩效人员或单位"
@@ -335,6 +349,14 @@
                >
                  删除
                </el-button>
                <el-button
                  @click.native.prevent="
                    Filepopup(scope.$index, rbDetails, scope.row)
                  "
                  type="text"
                  size="small"
                  >票据</el-button
                >
              </template>
            </el-table-column>
          </el-table>
@@ -482,6 +504,258 @@
        <el-button @click="unsave">取 消</el-button>
        <el-button type="primary" @click="Savenow">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 附件 -->
    <el-dialog
      v-dialogDrags
      :modal="false"
      :close-on-click-modal="false"
      :title="pdftitle"
      :visible.sync="pdfVisible"
      width="60%"
    >
      <div>
        <el-table :data="tableDatatop" style="width: 100%">
          <el-table-column
            prop="beneficiaryname"
            align="center"
            label="单位/个人"
            width="250"
          >
          </el-table-column>
          <el-table-column
            prop="idcardno"
            align="center"
            label="身份证号"
            width="200"
            v-if="form.applytype == '1' || form.applytype == '2'"
          >
          </el-table-column>
          <el-table-column prop="depositbank" align="center" label="开户银行">
          </el-table-column>
          <el-table-column
            prop="bankcardno"
            align="center"
            label="银行帐号"
            width="210"
          >
          </el-table-column>
        </el-table>
      </div>
      <el-tabs
        style="margin-top: 20px;"
        v-model="activeName"
        type="border-card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="普通附件" :name="1">
          <div class="pdfimg">
            <div class="box-pdf">
              <div>
                <el-upload
                  size="mini"
                  class="upload-demo"
                  :action="uploadFileUrl"
                  :file-list="fileListto"
                  :show-file-list="false"
                  multiple
                  drag
                  :headers="headers"
                  :on-success="
                    (response, file, fileList) =>
                      uploadSccess(response, file, fileList)
                  "
                  :on-preview="downFile"
                  :disabled="operationType == 'detail'"
                  :on-error="handleUploadError"
                  :on-remove="remove"
                  accept="image/*,.pdf"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将票据拖到此处,或
                    <em
                      ><el-button
                        :disabled="operationType == 'detail'"
                        size="small"
                        type="primary"
                        >点击上传</el-button
                      ></em
                    >
                  </div>
                </el-upload>
                <el-table
                  :data="fileListto"
                  @row-click="downFile"
                  style="width: 100%"
                  height="400"
                >
                  <el-table-column
                    prop="name"
                    :show-overflow-tooltip="true"
                    label="名称"
                  >
                    <template slot-scope="scope">
                      <i style="color:#409EFF" class=" el-icon-s-order" />
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    width="190"
                    :show-overflow-tooltip="true"
                    label="功能"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        @click.native.prevent.stop="deletedowfile(scope.row)"
                        >删除</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click.native.prevent.stop="moveupdowfile(scope.row)"
                        >上移</el-button
                      >
                      <el-button
                        type="success"
                        size="mini"
                        icon="el-icon-search"
                        circle
                        @click.native.prevent.stop="Downloadfile(scope.row)"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div
              v-if="this.previewpdf && pdfimgsrcList.length"
              class="pdfimgmin"
            >
              <!-- <img :src="pdfimg" /> -->
              <el-image
                style="width: 95%; height: 90%"
                :src="pdfimg"
                :preview-src-list="pdfimgsrcList"
              >
                <!-- <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div> -->
              </el-image>
            </div>
            <div v-else class="pdfimgmins">{{ hintitle }}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发票文件" :name="2">
          <div class="pdfimg">
            <div class="box-pdf">
              <div>
                <el-upload
                  size="mini"
                  class="upload-demo"
                  :action="uploadFileUrl"
                  :file-list="invoicefileList"
                  :show-file-list="false"
                  multiple
                  drag
                  :headers="headers"
                  :on-success="
                    (response, file, fileList) =>
                      uploadSccess(response, file, fileList)
                  "
                  :on-preview="downFile"
                  :disabled="operationType == 'detail'"
                  :on-error="handleUploadError"
                  :on-remove="remove"
                  accept="image/*,.pdf"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将发票文件拖到此处,或
                    <em
                      ><el-button
                        :disabled="operationType == 'detail'"
                        size="small"
                        type="primary"
                        >点击上传</el-button
                      ></em
                    >
                  </div>
                </el-upload>
                <el-table
                  :data="invoicefileListto"
                  @row-click="downFile"
                  style="width: 100%"
                  height="400"
                >
                  <el-table-column
                    prop="name"
                    :show-overflow-tooltip="true"
                    label="名称"
                  >
                    <template slot-scope="scope">
                      <i style="color:#409EFF" class=" el-icon-s-order" />
                      <span>{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    width="190"
                    :show-overflow-tooltip="true"
                    label="功能"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        @click.native.prevent.stop="deletedowfile(scope.row)"
                        >删除</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click.native.prevent.stop="moveupdowfile(scope.row)"
                        >上移</el-button
                      >
                      <el-button
                        type="success"
                        size="mini"
                        icon="el-icon-search"
                        circle
                        @click.native.prevent.stop="Downloadfile(scope.row)"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div
              v-if="this.previewpdf && invoicepdfimgsrcList.length"
              class="pdfimgmin"
            >
              <!-- <img :src="pdfimg" /> -->
              <el-image
                style="width: 95%; height: 90%"
                :src="invoicepdfimg"
                :preview-src-list="invoicepdfimgsrcList"
              >
                <!-- <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div> -->
              </el-image>
            </div>
            <div v-else class="pdfimgmins">{{ hintitle }}</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 批量选取 -->
@@ -634,6 +908,7 @@
      unitforname: null,
      isIndeterminate: true,
      Performanceclass: 68,
      ICDtoken: getToken(),
      //是否是专家费的OPO审批人员
      ismanager: false,
@@ -761,6 +1036,8 @@
        flowconclusion: null,
        fundid: null
      },
      // 网络请求头
      Networkheader: null,
      // 查询参数
      queryParams: {
@@ -813,6 +1090,20 @@
        usestate: null
      },
      //附件列表
      fileList: [],
      fileListto: [],
      invoicefileList: [],
      invoicefileListto: [],
      invoicepdfimg: "",
      invoicepdfimgsrcList: [],
      activeName: 1, //文件类型
      //上传附件路径
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      //文件上传token
      headers: {
        Authorization: "Bearer " + getToken()
      },
      //票据文件
      pdftitle: "",
      pdfimg: "",
@@ -2116,6 +2407,290 @@
      } else {
        this.optionsperformance = [];
      }
    },
    handleUploadError() {},
    remove(file, fileList) {
      const rbDetails = [...this.rbDetails];
      if (this.activeName == 1) {
        this.fileListto.splice(this.fileListto.indexOf(file), 1);
        rbDetails[this.atpresent].annexfilesList = this.fileListto;
      } else {
        this.invoicefileListto.splice(this.invoicefileListto.indexOf(file), 1);
        rbDetails[this.atpresent].invoicefilesList = this.invoicefileListto;
      }
    },
    // 获取请求头
    Getnetworkheader() {
      let string = window.location.href;
      if (string.includes("9091")) {
        const index = string.indexOf("9091");
        this.Networkheader = string.slice(0, index + 4); // 截取9091及其前部字符
      } else {
        const index = string.indexOf("8032");
        this.Networkheader = string.slice(0, index + 4); // 截取8032及其前部字符
      }
    },
    uploadSccess(response, file, fileList) {
      this.rbDetails;
      const config = {
        headers: { Authorization: "Bearer " + this.ICDtoken }
      };
      const pdfimg = this.Networkheader + "/prod-api" + response.fileName;
      //获取票据信息位置
      if (this.activeName == 1) {
        if (response.code == 200) {
          this.previewpdf = true;
          fetch(pdfimg, config)
            .then(response => response.blob())
            .then(blob => {
              // 将获取的数据流转换为URL
              this.pdfimg = URL.createObjectURL(blob);
              this.pdfimgsrcList.push(URL.createObjectURL(blob));
              this.fileListto.push({
                name: file.name,
                url: URL.createObjectURL(blob)
              });
            })
            .catch(error => {
              console.error("Error loading image", error);
              return;
            });
          this.$modal.msgSuccess(response.msg);
          console.log(this.fileListto, "新增后");
          if (!this.rbDetails[this.atpresent].annexfilesList) {
            this.rbDetails[this.atpresent].annexfilesList = [];
          }
          this.rbDetails[this.atpresent].annexfilesList.push({
            name: file.name,
            url: response.fileName
          });
          this.pdftitle = "共" + this.pdfimgsrcList.length + "项";
        } else {
          console.log(response.msg);
        }
      } else {
        if (response.code == 200) {
          this.previewpdf = true;
          fetch(pdfimg, config)
            .then(response => response.blob())
            .then(blob => {
              // 将获取的数据流转换为URL
              this.invoicepdfimg = URL.createObjectURL(blob);
              this.invoicepdfimgsrcList.push(URL.createObjectURL(blob));
              this.invoicefileListto.push({
                name: file.name,
                url: URL.createObjectURL(blob)
              });
            })
            .catch(error => {
              console.error("Error loading image", error);
              return;
            });
          this.$modal.msgSuccess(response.msg);
          console.log(this.invoicefileListto, "新增后");
          if (!this.rbDetails[this.atpresent].invoicefilesList) {
            this.rbDetails[this.atpresent].invoicefilesList = [];
          }
          this.rbDetails[this.atpresent].invoicefilesList.push({
            name: file.name,
            url: response.fileName
          });
          this.pdftitle = "共" + this.invoicepdfimgsrcList.length + "项";
        }
      }
    },
    // 点击票据
    Filepopup(index, rows, row) {
      const config = {
        headers: { Authorization: "Bearer " + this.ICDtoken }
      };
      this.tableDatatop = [];
      this.fileListto = [];
      this.invoicefileListto = [];
      this.pdfimg = '';
      this.invoicepdfimg = [];
      this.pdfimgsrcList = [];
      this.invoicepdfimgsrcList = [];
      this.tableDatatop.push(row);
      this.atpresent = index;
      this.pdfVisible = true;
      if (this.rbDetails[index].annexfilesList) {
        this.rbDetails[index].annexfilesList.forEach((value, indexson) => {
          const pdfimg = this.Networkheader + "/prod-api" + value.url;
          fetch(pdfimg, config)
            .then(response => response.blob())
            .then(blob => {
              // 将获取的数据流转换为URL
              this.fileListto.push({
                name: value.name,
                url: URL.createObjectURL(blob)
              });
              if (this.fileListto.length == 1) {
                this.pdfimg = URL.createObjectURL(blob);
              }
              this.pdfimgsrcList.push(URL.createObjectURL(blob));
            })
            .catch(error => {
              console.error("Error loading image", error);
              return;
            });
        });
        this.previewpdf = true;
      } else {
        this.fileListto = [];
        this.pdfimg = "";
        this.pdftitle = "";
      }
      //发票
      if (this.rbDetails[index].invoicefilesList) {
        this.rbDetails[index].invoicefilesList.forEach((value, indexson) => {
          const pdfimg = this.Networkheader + "/prod-api" + value.url;
          fetch(pdfimg, config)
            .then(response => response.blob())
            .then(blob => {
              // 将获取的数据流转换为URL
              this.invoicefileListto.push({
                name: value.name,
                url: URL.createObjectURL(blob)
              });
              if (this.invoicefileListto.length == 1) {
                this.invoicepdfimg = URL.createObjectURL(blob);
              }
              this.invoicepdfimgsrcList.push(URL.createObjectURL(blob));
            })
            .catch(error => {
              console.error("Error loading image", error);
              return;
            });
        });
        this.previewpdf = true;
      } else {
        this.invoicefileListto = [];
        this.invoicepdfimg = "";
        this.pdftitle = "";
      }
      if (this.activeName == 1) {
        this.pdftitle = "共" + this.pdfimgsrcList.length + "项";
      } else {
        this.pdftitle = "共" + this.invoicepdfimgsrcList.length + "项";
      }
    },
    // 点击已上传文件
    downFile(item) {
      if (this.activeName == 1) {
        this.pdftitle =
          "共" + this.pdfimgsrcList.length + "项,当前选中" + item.name;
        let name = item.name.split(".");
        if (name[1] == "pdf") {
          this.$modal.msgWarning("当前文件暂不支持预览");
          this.previewpdf = false;
          this.hintitle = "当前文件暂不支持预览";
        } else if (name[1] == "jpg" || "png") {
          console.log(item, "展示");
          this.previewpdf = true;
          if (item.url) {
            this.pdfimg = item.url;
          } else {
            this.pdfimg = "";
          }
        } else {
          this.hintitle = "当前文件暂不支持预览";
          this.$modal.msgWarning("当前文件暂不支持预览");
          this.previewpdf = false;
        }
      } else {
        this.pdftitle =
          "共" + this.invoicepdfimgsrcList.length + "项,当前选中" + item.name;
        let name = item.name.split(".");
        if (name[1] == "pdf") {
          this.$modal.msgWarning("当前文件暂不支持预览");
          this.previewpdf = false;
          this.hintitle = "当前文件暂不支持预览";
        } else if (name[1] == "jpg" || "png") {
          this.previewpdf = true;
          if (item.url) {
            this.invoicepdfimg = item.url;
          } else {
            this.invoicepdfimg = "";
          }
        } else {
          this.hintitle = "当前文件暂不支持预览";
          this.$modal.msgWarning("当前文件暂不支持预览");
          this.previewpdf = false;
        }
      }
    },
    getIndexInArray(arr, obj) {
      return arr.indexOf(obj);
    },
    // 发票切换
    handleClick(tab, event) {
      if (this.activeName == 1) {
        this.pdftitle = "共" + this.pdfimgsrcList.length + "项";
      } else {
        this.pdftitle = "共" + this.invoicepdfimgsrcList.length + "项";
      }
    },
    // 点击删除
    deletedowfile(row) {
      console.log(row);
      let indexvalue = "";
      if (this.activeName == 1) {
        const indexlist = this.getIndexInArray(this.pdfimgsrcList, row.url);
        this.pdfimgsrcList.splice(indexlist, 1);
        const index = this.getIndexInArray(this.fileListto, row);
        this.fileListto.splice(index, 1);
        console.log(this.rbDetails[this.atpresent].annexfilesList);
        indexvalue = this.rbDetails[this.atpresent].annexfilesList.find(
          (item, index) => {
            return item.name == row.name;
          }
        );
        console.log(indexvalue, "删除索引");
        this.rbDetails[this.atpresent].annexfilesList.splice(indexvalue, 1);
      } else {
        const indexlist = this.getIndexInArray(
          this.invoicepdfimgsrcList,
          row.url
        );
        this.invoicepdfimgsrcList.splice(indexlist, 1);
        const index = this.getIndexInArray(this.invoicefileListto, row);
        this.invoicefileListto.splice(index, 1);
        console.log(this.rbDetails[this.atpresent].invoicefilesList);
        indexvalue = this.rbDetails[this.atpresent].invoicefilesList.find(
          (item, index) => {
            return item.name == row.name;
          }
        );
        console.log(indexvalue, "删除索引");
        this.rbDetails[this.atpresent].invoicefilesList.splice(indexvalue, 1);
      }
    },
    // 点击上移
    moveupdowfile(row) {
      if (this.activeName == 1) {
        const index = this.getIndexInArray(this.fileListto, row);
        const item = this.fileListto.splice(index, 1)[0]; // 移除指定索引处的元素,并保存到item变量中
        this.fileListto.splice(index - 1, 0, item); // 将item插入到索引位置的前一位
      } else {
        const index = this.getIndexInArray(this.invoicefileListto, row);
        const item = this.invoicefileListto.splice(index, 1)[0]; // 移除指定索引处的元素,并保存到item变量中
        this.invoicefileListto.splice(index - 1, 0, item); // 将item插入到索引位置的前一位
      }
    },
    Downloadfile(row) {
      console.log(row);
      window.location.href = this.Networkheader + "/prod-api" + row.url;
    }
  },
@@ -2123,6 +2698,7 @@
  created() {
    //获取路由参数
    this.getroute();
    this.Getnetworkheader();
    this.getExternalList();
    this.getFeeUnitList();
    this.listperformance();