详情

front-vue/src/views/system/user/detail.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" style="margin: 0.6%">
+      <div slot="header" class="clearfix">
+        <span style="color: #666ee8; font-weight: bold"
+          >安心签开户及管理授权书(模板)</span
+        >
+      </div>
+      <div class="text item" style="margin-bottom: 20px">
+        <el-form ref="contract" label-width="auto" :inline="true"> </el-form>
+        <el-upload
+          ref="upload"
+          class="upload-demo"
+          :class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
+          action=""
+          accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="beforeRemove"
+          :on-change="dealImgChange"
+          multiple
+          :limit="1"
+          :on-exceed="handleExceed"
+          list-type="picture-card"
+          :file-list="sfzList"
+          :auto-upload="false"
+        >
+        </el-upload>
+        <el-button type="primary" @click="handleDown()" style="width: 100%"
+          >下载图片</el-button
+        >
+      </div>
+    </el-card>
+    <el-card class="box-card" style="margin: 0.6%">
+      <div slot="header" class="clearfix">
+        <span style="color: #666ee8; font-weight: bold"
+          >安心签用户信息变更申请表</span
+        >
+      </div>
+      <div class="text item" style="margin-bottom: 20px">
+        <el-form ref="logistics" label-width="auto" :inline="true"> </el-form>
+        <el-upload
+          ref="upload"
+          class="upload-demo"
+          :class="{ fsfzzUoload: showsBtnImg, Uoloadfsfzz: nonesBtnImg }"
+          action=""
+          accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
+          :on-preview="sqsPictureCardPreview"
+          :on-remove="beforeRemove"
+          :on-change="dealImgChange"
+          multiple
+          :limit="1"
+          :on-exceed="sqsExceed"
+          list-type="picture-card"
+          :file-list="sqsList"
+          :auto-upload="true"
+        >
+        </el-upload>
+        <el-button type="primary" @click="handleDowns()" style="width: 100%"
+          >下载图片</el-button
+        >
+      </div>
+    </el-card>
+    <!-- 查看图片 -->
+    <el-dialog :visible.sync="sfzVisible">
+      <img width="100%" :src="sfzImageUrl" alt="" />
+    </el-dialog>
+    <el-dialog :visible.sync="sqsVisible">
+      <img width="100%" :src="sqsImageUrl" alt="" />
+    </el-dialog>
+    <div style="text-align: center">
+      <el-button type="primary" @click="submit()">确认</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFund } from "@/api/system/user";
+import { uploadFileNew } from "@/api/common/file";
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "billEdit",
+  components: {},
+  data() {
+    return {
+      //图片预览
+      sfzImageUrl: "",
+      sfzVisible: false,
+      sqsImageUrl: "",
+      sqsVisible: false,
+      showBtnImg: false,
+      noneBtnImg: false,
+      showsBtnImg: false,
+      nonesBtnImg: false,
+
+      sfzList: [],
+      sqsList: [],
+
+      limitCountImg: 1,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 是否显示弹出层
+      open: false,
+      uploadOpen: false,
+      // 查询参数
+      queryParams: {},
+      // 表单参数
+      form: {},
+      //类型
+      type: "00",
+      //合同附件
+      contractList: [],
+      //物流附件
+      logisticsList: [],
+      //其他附件
+      otherList: [],
+      //发票列表
+      fileList: [],
+      //全选状态
+      checkAll: false,
+      //全选状态
+      isIndeterminate: false,
+      //选中值
+      checkedInvoice: [],
+      //发票对象
+      invoice: {},
+      //合计金额
+      totalPrice: 0,
+      //验证结果
+      checkSttOptions: [],
+      //图片路径
+      invoiceImageUrl: null,
+      //图片显示
+      invoiceVisible: false,
+      //等待框
+      fullscreenLoading: false,
+      //链属企业
+      companyRelList: [],
+      //链属企业
+      company: {},
+    };
+  },
+  created() {
+    const userId = this.$route.params && this.$route.params.userId;
+    getFund(userId).then((response) => {
+      console.log(response);
+      if (response.data.data && response.data.data.length != 0) {
+        this.sfzList.push({
+          uid: response.data.data[0].uid,
+          url: response.data.data[0].url + "/" + getToken(),
+          fileUrl: response.data.data[0].fileUrl,
+        });
+        this.sqsList.push({
+          uid: response.data.data[0].fileId,
+          url: response.data.data[0].pfiUrl + "/" + getToken(),
+          fileUrl: response.data.data[0].fileUrl,
+        });
+
+        this.noneBtnImg = true;
+        this.nonesBtnImg = true;
+      }
+    });
+  },
+  activated() {},
+  methods: {
+    //查询往来账款详情
+    getDetail(zbiId) {
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      getBill(zbiId)
+        .then((response) => {
+          this.form = response.data;
+          if (this.form.zbiPayerId == this.company.scyId) {
+            this.type = "00";
+          } else {
+            this.type = "01";
+          }
+          loading.close();
+        })
+        .catch(() => {
+          loading.close();
+        });
+    },
+    //上传前校验
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传图片只能是 JPG/PNG 格式");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过 2MB");
+      }
+      return isJPG && isLt2M;
+    },
+    //文件移除提示
+    beforeRemove(file, sfzList) {
+      for (let i = 0; i < this.sfzList.length; i++) {
+        if (file.uid == this.sfzList[i].uid) {
+          this.sfzList.splice(i, 1);
+          break;
+        }
+      }
+      this.noneBtnImg = sfzList.length >= this.limitCountImg;
+    },
+    sqsRemove(file, sqsList) {
+      for (let i = 0; i < this.sqsList.length; i++) {
+        if (file.uid == this.sqsList[i].uid) {
+          this.sqsList.splice(i, 1);
+          break;
+        }
+      }
+      this.nonesBtnImg = sqsList.length >= this.limitCountImg;
+    },
+    handleExceed(file, sfzList) {
+      this.$message.warning(`当前限制选择 1 个文件`);
+    },
+    sqsExceed(file, sqsList) {
+      this.$message.warning(`当前限制选择 1 个文件`);
+    },
+    //图片预览
+    handlePictureCardPreview(file) {
+      this.sfzImageUrl = file.url;
+      this.sfzVisible = true;
+    },
+    sqsPictureCardPreview(file) {
+      this.sqsImageUrl = file.url;
+      this.sqsVisible = true;
+    },
+    dealImgChange(file, sfzList) {
+      this.noneBtnImg = sfzList.length >= this.limitCountImg;
+    },
+    dealImgChange(file, sqsList) {
+      this.nonesBtnImg = sqsList.length >= this.limitCountImg;
+    },
+    //上传
+    // submitUpload() {
+    //   this.$refs.upload.submit();
+    // },
+    // sqsUpload() {
+    //   this.$refs.upload.submit();
+    // },
+    //手动上传文件触发
+    sfzRequest(param) {
+      let fileObj = param.file; // 相当于input里取得的files
+      let fd = new FormData(); // FormData 对象
+      fd.append("file", fileObj); // 文件对象
+      fd.append("fileType", "00"); //文件类型
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      uploadFileNew(fd).then((response) => {
+        if (response) {
+          this.sfzList.push({
+            uid: response.fileId,
+            url: response.url + "/" + getToken(),
+          });
+          setTimeout(() => {
+            loading.close();
+          }, 2000);
+        }
+      });
+    },
+    sqsRequest(param) {
+      let fileObj = param.file; // 相当于input里取得的files
+      let fd = new FormData(); // FormData 对象
+      fd.append("file", fileObj); // 文件对象
+      fd.append("fileType", "00"); //文件类型
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      uploadFileNew(fd).then((response) => {
+        if (response) {
+          this.sqsList.push({
+            uid: response.fileId,
+            url: response.url + "/" + getToken(),
+          });
+          setTimeout(() => {
+            loading.close();
+          }, 2000);
+        }
+      });
+    },
+    //授权书
+    handleDown() {
+       this.queryParams.userId = this.userId;
+      this.download(
+        "system_cc/ownUser/jpgAuthorization",{
+             ...this.queryParams
+        },
+        `安心签用户信息变更申请表.jpg`
+      );
+    },
+    handleDowns() {
+            this.queryParams.userId = this.userId;
+        this.download(
+        "system_cc/ownUser/jpgApply",{
+             ...this.queryParams
+        },
+        `安心签用户信息变更申请表.jpg`
+      );
+    },
+  },
+};
+</script>
+<style>
+.uoloadSty .el-upload--picture-card {
+  width: 110px;
+  height: 110px;
+  line-height: 110px;
+}
+.disUoloadSty .el-upload--picture-card {
+  display: none;
+}
+
+.fsfzzUoload .el-upload--picture-card {
+  width: 110px;
+  height: 110px;
+  line-height: 110px;
+}
+.Uoloadfsfzz .el-upload--picture-card {
+  display: none;
+}
+</style>