添加公职人员证据展示

src/views/caseFocusOnPerson/gzryDetail.vue

 <template>
-  <el-container>
+  <el-container id="gzryDetailPage">
     <div class="title">
       <span class="iconfont iconzonghedangan"  style="font-size: 22px; display: inline-block; margin-right: 12px; font-weight: normal"></span>
       <span>公职人员信息</span>
@@ -25,6 +25,31 @@
 
         </div>
       </el-main>
+        <span class="line"></span>
+        <div>
+            <form-commonPage
+                    ref="formCommonPageTemp"
+                    :formField="formFieldZjxx"
+                    headerTitle="证据信息"
+                    :formLabelAlign="formLabelAlignZjxx"
+                    :propSt="stZjxx"
+                    class="callForm"
+                    v-if="true"
+            >
+            </form-commonPage>
+        </div>
+        <div class="callForm" style="margin-left: 52px;margin-top: 20px" v-if="true">
+            <el-upload
+                    class="upload-demo"
+                    action=""
+                    :on-remove="handleRemove"
+                    :on-change="handleChangeSjTempFj"
+                    :on-preview="handlerPreview"
+                    :auto-upload="false"
+                    :file-list="fileList">
+            </el-upload>
+        </div>
+
       <span class="line"></span>
       <el-col :span="24">
         <span class="flTtitle ajTitle">关联案件</span>
@@ -85,9 +110,14 @@
   </el-container>
 </template>
 <script>
-import { getGzryBybh, getXqGlajList } from "@/api/caseFocusOnPerson/gzryDetail.js";
+import FormCommonPage from "@c/myFormCommonPage.vue";
+import { getGzryBybh, getXqGlajList,getGzryZjSelect,getGzryZjDel } from "@/api/caseFocusOnPerson/gzryDetail.js";
+import base from "@/api/base";
 export default {
   name: "gzryDetail",
+  components:{
+      FormCommonPage: FormCommonPage,
+  },
   data () {
     return {
       //公职人员
@@ -294,15 +324,154 @@ export default {
           label: '每页15条',
           value: '每页15条'
         }
-      ]
+      ],
+
+      stZjxx: "gzryZjxx",
+      formFieldZjxx: [
+            {
+                name: "人民币现金(万元):",
+                id: "rmbxj",
+                prop: "",
+                type: "text",
+                value: "",
+                isShow2: true,
+                placeholder: "",
+                col: "2",
+            },
+            {
+                name: "人民币存款(万元):",
+                id: "rmbck",
+                prop: "",
+                type: "text",
+                value: "",
+                isShow2: true,
+                placeholder: "",
+                col: "2",
+            },
+            {
+                name: "其他财产估值(万元):",
+                id: "qtccgz",
+                prop: "",
+                type: "text",
+                value: "",
+                isShow2: true,
+                placeholder: "",
+                col: "2",
+            },
+            {
+                name: "房产估值(万元):",
+                id: "fcgz",
+                prop: "",
+                type: "text",
+                value: "",
+                isShow2: true,
+                placeholder: "",
+                col: "2",
+            },
+            {
+                name: "车辆估值(万元):",
+                id: "clgz",
+                prop: "",
+                type: "text",
+                value: "",
+                isShow2: true,
+                placeholder: "",
+                col: "2",
+            },
+            {
+                name: "财产总值(万元):",
+                id: "cczzjs",
+                prop: "",
+                type: "text",
+                value: "",
+                isShow2: true,
+                placeholder: "",
+                col: "6",
+                disabled: true
+            }
+        ],
+      formLabelAlignZjxx: {
+            rmbxj: '400',
+            qtccgz: '26',
+            rmbck: '113',
+            fcgz: '200',
+            clgz: '35',
+            cczzjs: '774',
+            zjFlws: {
+                name: 'test.txt',
+                url: `file/mb.xls`
+            }
+        },
+      fileList: [],
     }
   },
   created () {
     this.xxzjbh = this.$route.query.xxzjbh;
     this.getgzryInfo();
     this.getXqGlaj();
+    this.handelSelectFj();
   },
   methods: {
+
+      handelSelectFj(){
+          getGzryZjSelect({}).then(res => {
+              if(res.success == true){
+                  this.fileList = res.data.rows;
+              }
+          })
+      },
+
+      handleRemove(file, fileList) {
+          getGzryZjDel({
+              xxzjbh: file.xxzjbh
+          }).then(res => {
+              if (res.success == true){
+                  this.$message({
+                      showClose: true,
+                      message: '删除成功'
+                  });
+              }
+          })
+
+          this.fileList = fileList;
+
+
+          //console.log(file, fileList);
+      },
+      handleChangeSjTempFj(file, fileList){
+          console.log(file)
+          const param = new FormData();
+          param.append("file", file.raw);
+
+          const config = {
+              headers: { "Content-Type": "multipart/form-data" }
+          };
+          axios.post(`${base.alyIP}/temp/upload`, param, config).then(res => {
+              debugger
+              if (res.data.success == true){
+                  this.$message.success("上传成功")
+              }
+              this.handelSelectFj();
+          });
+      },
+
+      //下载文件
+      handlerPreview(file) {
+          console.log(file)
+          let a = document.createElement('a');
+          let event = new MouseEvent('click');
+          a.download = file.name;
+          a.href = file.url;
+          a.dispatchEvent(event);
+
+          // a.href = file.url;
+          // a.download = file.name; // 下载后文件名
+          // a.style.display = 'none'
+          // document.body.appendChild(a)
+          // a.click() // 点击下载
+          // document.body.removeChild(a) // 下载完成移除元素
+      },
+
     //获取公职人员信息
     getgzryInfo () {
       var self = this;
@@ -403,6 +572,37 @@ export default {
 };
 </script>
 <style>
+
+    #gzryDetailPage .el-upload-list__item {
+        width: auto;
+        width: 372px;
+        height: 37px;
+        display: inline-block;
+        border: 1px solid #cfcfcf;
+        margin-right: 15px;
+    }
+
+    .el-upload-list__item .el-icon-close {
+        top: 9px;
+        right: 13px;
+    }
+    #gzryDetailPage .el-upload-list__item {
+        /* width: auto; */
+        display: inline-block;
+        margin-right: 12px;
+        width: 280px;
+        height: 40px;
+    }
+    .el-upload-list__item-name {
+        line-height: 36px;
+        padding-left: 20px;
+
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #333333;
+    }
+
   .title{
     height: 60px;
     padding-left: 120px;

src/views/caseFocusOnPerson/gzryForm.vue

@@ -19,13 +19,14 @@
       <form-commonPage
                 ref="formCommonPageTemp"
                 :formField="formFieldZjxx"
-                headerTitle='修改证据信息'
+                :headerTitle="(isAlter ? '修改' : '新增') + '证据信息'"
                 :formLabelAlign="formLabelAlignZjxx"
                 :propSt="stZjxx"
                 class="callForm"
+                v-if="isAlter"
         >
         </form-commonPage>
-      <div class="callForm" style="margin-left: 52px;margin-top: 20px">
+      <div class="callForm" style="margin-left: 52px;margin-top: 20px" v-if="isAlter">
         <el-upload
                 class="upload-demo"
                 action=""
@@ -1566,7 +1567,7 @@ export default {
     top: 9px;
     right: 13px;
   }
-  #formCommonPage .el-upload-list__item {
+  #gzryFormPage .el-upload-list__item {
     /* width: auto; */
     display: inline-block;
     margin-right: 12px;