Browse Source

融信管理页面样式优化

zhanglb 3 years ago
parent
commit
e7076e9e9f

+ 11 - 0
front-vue/src/App.vue

@@ -256,4 +256,15 @@ export default {
 .zap-table ::v-deep .el-form-item__content {
     width: 100%;
 }
+.zap-accounts-receivable {
+  height: 36px;
+  .label {
+    font-size: 12px;
+    color: #999999;
+  }
+  .value {
+    font-size: 14px;
+    color: #333333;
+  }
+}
 </style>

File diff suppressed because it is too large
+ 610 - 606
front-vue/src/views/service/credit/creditDetail.vue


+ 313 - 279
front-vue/src/views/service/credit/goFinance.vue

@@ -1,169 +1,190 @@
 <template>
-  <div class="app-container">
+  <div class="app-container zap-main">
     <!-- 添加或修改融资记录对话框 -->
-      <el-form ref="form" :label-position="labelPosition" :model="form" :rules="rules" label-width="80px">
-        <el-divider content-position="left">融资信息</el-divider>
-        <el-row>
-          <el-col :span="8">
-            <el-form-item label="融信编号:" prop="zfrFinanceId">
-              <el-select v-model="form.zfrFinanceId" style="width : 284px"   :disabled="true" clearable @clear="clearBoth">
-                  <el-option
-                    v-for="(item,index) in financeInfList"
-                    :key="index"
-                    :label="item.zfiNumber"
-                    :value="item.zfiId"
-                    @click.native="amount(item)"
-                  ></el-option>
-                </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="融资金额:" prop="zfrAmount">
-              <el-input v-model="form.zfrAmount" placeholder="请输入融资金额" disabled style="width: 284px;"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="融资账户:" prop="zfrCollectionAccount">
-              <el-input v-model="form.zfrCollectionAccount" placeholder="请输入融资账户" style="width: 284px;" :readonly="readonly"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <el-form-item label="承诺还款日" prop="zfrRepaymentDate" v-if="false">
-              <el-input v-model="form.zfrRepaymentDate" placeholder="请输入承诺还款日" style="width: 284px;"/> 
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="融资利率" prop="zfrRate" v-if="false">
-              <el-input v-model="form.zfrRate" placeholder="请输入融资利率" style="width: 284px;"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="融资放款方式" prop="zfpcrLoanType" label-width="90px" v-if="false">
-              <el-input v-model="form.zfpcrLoanType" placeholder="请输入融资账户" style="width: 284px;"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <el-form-item label="融资产品" prop="zfiProductId" v-if="false">
-              <el-input v-model="form.zfiProductId" placeholder="请输入融资产品" style="width: 284px;"/> 
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="平台服务费收取费率" prop="zfpcrChargeRate" v-if="false">
-              <el-input v-model="form.zfpcrChargeRate" clearable placeholder="请输入平台服务费收取费率" style="width: 284px;"/> 
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <el-divider content-position="left">应收账款</el-divider>
-        <span style="float: right; margin-right: 125px;">金额大写:{{ smallToBig(allAmount()) }}</span>
-        <span style="float: right; margin-right: 125px;">消费金额:{{ allAmount() }}  元</span>
-        <el-table :data="billInfList" >
-          <el-table-column label="序号" type="index" width="50" align="center">
-            <template slot-scope="scope">
-              <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="编号" align="center" prop="zbiNumber" />
-          <el-table-column label="账款名称" align="center" prop="zbiName" />
-          <el-table-column label="应收企业" align="center" prop="payee" />
-          <el-table-column label="应付企业" align="center" prop="payer" />
-          <el-table-column label="还款时间" align="center" prop="zbiPayDate" />
-          <el-table-column label="金额" align="center" prop="zbiAmount" />
-        </el-table>
-        <!-- 发票附件 -->
-        <el-divider content-position="left">发票附件</el-divider>
-          <el-table :data="invoiceFileList"  style="width: 100%">
-            <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width='300' fixed="right" >
-                <template slot-scope="scope">
-                    <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-view"
-                        @click="handleDownload(scope.row)"
-                    >下载</el-button>
-                    <el-button
-                          size="mini"
-                          type="text"
-                          icon="el-icon-view"
-                          @click="handlePreview(scope.row)"
-                      >预览</el-button>   
-                </template>
-            </el-table-column>
-          </el-table>
-        <!-- 合同附件 -->
-        <el-divider content-position="left">合同附件</el-divider>
-          <el-table :data="contractFileList"  style="width: 100%">
-            <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width='300' fixed="right" >
-                <template slot-scope="scope">
-                    <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-view"
-                        @click="handleDownload(scope.row)"
-                    >下载</el-button>
-                    <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-view"
-                        @click="handlePreview(scope.row)"
-                    >预览</el-button> 
-                </template>
-            </el-table-column>
-          </el-table>
-        <!-- 其他附件 -->
-        <el-divider content-position="left">其他附件</el-divider>
-          <el-table :data="otherFileList"  style="width: 100%">
-            <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width='300' fixed="right" >
-                <template slot-scope="scope">
-                    <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-view"
-                        @click="handleDownload(scope.row)"
-                    >下载</el-button>
-                    <el-button
-                      size="mini"
-                      type="text"
-                      icon="el-icon-view"
-                      @click="handlePreview(scope.row)"
-                  >预览</el-button>
-                </template>
-            </el-table-column>
-          </el-table>
-      <div class="footer" style="float: right;
-            margin-bottom:2px;">
-            <el-button type="primary" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-        </div>
-          <!--预览-->
-        <el-dialog  :visible.sync="openFile" width="900px" append-to-body>
-          <img :src="wordUrl" v-if="show" width='800px' height='500px'/>
-          <iframe :src="wordUrl" width='800px' height='500px' frameborder='1' v-if="heid"/>
-        </el-dialog>
+    <div class="zap-title">融资信息</div>
+    <el-form
+      class="zap-form"
+      ref="form"
+      :model="form"
+      :rules="rules"
+      :inline="true"
+      label-width="auto"
+    >
+      <el-form-item label="融信编号:" prop="zfrFinanceId" size="large">
+        <el-select v-model="form.zfrFinanceId" :disabled="true" clearable @clear="clearBoth">
+          <el-option
+            v-for="(item,index) in financeInfList"
+            :key="index"
+            :label="item.zfiNumber"
+            :value="item.zfiId"
+            @click.native="amount(item)"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="融资金额:" prop="zfrAmount" size="large">
+        <el-input v-model="form.zfrAmount" placeholder="请输入融资金额" disabled />
+      </el-form-item>
+      <el-form-item label="融资账户:" prop="zfrCollectionAccount" size="large">
+        <el-input v-model="form.zfrCollectionAccount" placeholder="请输入融资账户" :readonly="readonly" />
+      </el-form-item>
+      <el-form-item label="承诺还款日" prop="zfrRepaymentDate" v-if="false" size="large">
+        <el-input v-model="form.zfrRepaymentDate" placeholder="请输入承诺还款日" />
+      </el-form-item>
+      <el-form-item label="融资利率" prop="zfrRate" v-if="false" size="large">
+        <el-input v-model="form.zfrRate" placeholder="请输入融资利率" />
+      </el-form-item>
+      <el-form-item label="融资放款方式" prop="zfpcrLoanType" v-if="false" size="large">
+        <el-input v-model="form.zfpcrLoanType" placeholder="请输入融资账户" />
+      </el-form-item>
+      <el-form-item label="融资产品" prop="zfiProductId" v-if="false" size="large">
+        <el-input v-model="form.zfiProductId" placeholder="请输入融资产品" />
+      </el-form-item>
+      <el-form-item label="平台服务费收取费率" prop="zfpcrChargeRate" v-if="false" size="large">
+        <el-input v-model="form.zfpcrChargeRate" clearable placeholder="请输入平台服务费收取费率" />
+      </el-form-item>
+    </el-form>
+    <div class="zap-title zap-margin-top">应收账款</div>
+    <el-row class="zap-form zap-padding-bottom">
+      <el-row class="zap-accounts-receivable">
+        <el-col>
+          <el-row type="flex" align="middle" style="height: 36px;">
+            <span class="label">金额大写:</span>
+            <span class="value" style="margin-right: 40px;">{{ smallToBig(allAmount()) }}</span>
+            <span class="label">消费金额:</span>
+            <span class="value">{{ allAmount() }} 元</span>
+          </el-row>
+        </el-col>
+      </el-row>
+      <el-table :data="billInfList" stripe>
+        <el-table-column label="序号" type="index" width="50" align="center">
+          <template slot-scope="scope">
+            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="编号" align="center" prop="zbiNumber" />
+        <el-table-column label="账款名称" align="center" prop="zbiName" />
+        <el-table-column label="应收企业" align="center" prop="payee" />
+        <el-table-column label="应付企业" align="center" prop="payer" />
+        <el-table-column label="还款时间" align="center" prop="zbiPayDate" />
+        <el-table-column label="金额" align="center" prop="zbiAmount" />
+      </el-table>
+    </el-row>
+    <!-- 发票附件 -->
+    <div class="zap-title zap-margin-top">发票附件</div>
+    <el-row class="zap-form">
+      <el-table :data="invoiceFileList" style="width: 100%" stripe>
+        <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="300"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDownload(scope.row)"
+            >下载</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handlePreview(scope.row)"
+            >预览</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <!-- 合同附件 -->
+    <div class="zap-title zap-margin-top">合同附件</div>
+    <el-row class="zap-form">
+      <el-table :data="contractFileList" style="width: 100%" stripe>
+        <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="300"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDownload(scope.row)"
+            >下载</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handlePreview(scope.row)"
+            >预览</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <!-- 其他附件 -->
+    <div class="zap-title zap-margin-top">其他附件</div>
+    <el-row class="zap-form">
+      <el-table :data="otherFileList" style="width: 100%" stripe>
+        <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip />
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+          width="300"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDownload(scope.row)"
+            >下载</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handlePreview(scope.row)"
+            >预览</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row style="height: 109px;" type="flex" align="middle" justify="center">
+      <el-button type="primary" plain @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+    </el-row>
+    <!--预览-->
+    <el-dialog :visible.sync="openFile" width="900px" append-to-body>
+      <img :src="wordUrl" v-if="show" width="800px" height="500px" />
+      <iframe :src="wordUrl" width="800px" height="500px" frameborder="1" v-if="heid" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {addRecord,listBillInf,listAccInf} from "@/api/service/financeRecord/record";
+import {
+  addRecord,
+  listBillInf,
+  listAccInf
+} from "@/api/service/financeRecord/record";
 import { listFinanceInf } from "@/api/common/financeInf";
 import { getFile } from "@/api/service/credit/credit";
-import {getToken} from "@/utils/auth";
+import { getToken } from "@/utils/auth";
 export default {
   name: "financeRecord",
-  components: {
-  },
+  components: {},
   data() {
     return {
       //融资账户是够编辑
-      readonly:false,
-      labelPosition: 'top',
+      readonly: false,
+      labelPosition: "top",
       // 遮罩层
       loading: true,
       // 选中数组
@@ -183,11 +204,11 @@ export default {
       //应收账款
       billInfList: [],
       //合同附件
-      contractFileList:[],
+      contractFileList: [],
       //发票附件
-      invoiceFileList:[],
+      invoiceFileList: [],
       //其他文件
-      otherFileList:[],
+      otherFileList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -213,10 +234,10 @@ export default {
       },
       // 表单参数
       form: {},
-      openFile:false,
+      openFile: false,
       wordUrl: "",
-      show:false,
-      heid:false,
+      show: false,
+      heid: false,
       // 表单校验
       rules: {
         zfrFinanceId: [
@@ -224,50 +245,49 @@ export default {
         ],
         zfrAmount: [
           { required: true, message: "融资金额不能为空", trigger: "blur" }
-        ],
-      },
+        ]
+      }
     };
   },
   created() {
-      const zfiId = this.$route.params && this.$route.params.zfiId;
-      this.$set(this.form, "zfrFinanceId", zfiId);
-      this.getFinanceInf(zfiId);
+    const zfiId = this.$route.params && this.$route.params.zfiId;
+    this.$set(this.form, "zfrFinanceId", zfiId);
+    this.getFinanceInf(zfiId);
   },
   methods: {
-     /** 查询融信编号 */
-    getFinanceInf(zfrFinanceId){
+    /** 查询融信编号 */
+    getFinanceInf(zfrFinanceId) {
       this.loading = true;
       listFinanceInf(zfrFinanceId).then(response => {
-        debugger
-        if(response.data){
-            this.financeInfList = response.data;
-            for (let item of this.financeInfList) {
-              if (item.zfiId == zfrFinanceId) {
-                this.amount(item);
-              }
+        debugger;
+        if (response.data) {
+          this.financeInfList = response.data;
+          for (let item of this.financeInfList) {
+            if (item.zfiId == zfrFinanceId) {
+              this.amount(item);
             }
-            this.loading = false;
+          }
+          this.loading = false;
         }
-        
       });
     },
     // 取消按钮
     cancel() {
-            this.$store.dispatch("tagsView/delView", this.$route);
-            this.$router.go(-1);
+      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$router.go(-1);
     },
-     //文件下载
-    handleDownload(row){
-        const pfiUrl = row.pfiUrl;
-        if(pfiUrl != null && pfiUrl != ''){
-        window.open(pfiUrl +"/"+ getToken());
-        }else{
-            this.$message({
-            message: '该附件不存在!',
-            type: 'warning'
-            });
-            return;
-        }
+    //文件下载
+    handleDownload(row) {
+      const pfiUrl = row.pfiUrl;
+      if (pfiUrl != null && pfiUrl != "") {
+        window.open(pfiUrl + "/" + getToken());
+      } else {
+        this.$message({
+          message: "该附件不存在!",
+          type: "warning"
+        });
+        return;
+      }
     },
     // 表单重置
     reset() {
@@ -313,44 +333,46 @@ export default {
     },
     //全部 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.zfrId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map(item => item.zfrId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /* 融信编号赋值融资金额 */
     amount(item) {
-      debugger
+      debugger;
       this.$set(this.form, "zfrAmount", item.zfiAmount);
       this.$set(this.form, "zfrRepaymentDate", item.zfiExpireDate);
       this.$set(this.form, "zfrRate", item.zfpcrRate);
       this.$set(this.form, "zfpcrLoanType", item.zfpcrLoanType);
       this.$set(this.form, "zfiProductId", item.zfiProductId);
       this.$set(this.form, "zfpcrChargeRate", item.zfpcrChargeRate);
-      if(item.zfiId){
+      if (item.zfiId) {
         this.loading = true;
-        listBillInf(item.zfiId).then(response => {
-        this.billInfList = response.data;
-        this.loading = false;
-      }).then(() =>{
-        var queryParamsFile = {};
-        queryParamsFile.ticketList = this.billInfList;
-        getFile(queryParamsFile).then((response) => {
-            if(response.data){
+        listBillInf(item.zfiId)
+          .then(response => {
+            this.billInfList = response.data;
+            this.loading = false;
+          })
+          .then(() => {
+            var queryParamsFile = {};
+            queryParamsFile.ticketList = this.billInfList;
+            getFile(queryParamsFile).then(response => {
+              if (response.data) {
                 //获取发票文件
-                  this.invoiceFileList = response.data.invoiceFileList;
+                this.invoiceFileList = response.data.invoiceFileList;
                 //获取合同文件
-                  this.contractFileList = response.data.contractFileList;
+                this.contractFileList = response.data.contractFileList;
                 //获取其他文件
                 this.otherFileList = response.data.otherFileList;
+              }
+            });
+            if (item.zfpcrLoanType == "0") {
+              listAccInf(item.zfiProductId).then(response => {
+                this.$set(this.form, "zfrCollectionAccount", response.msg);
+                this.readonly = true;
+              });
             }
-        });
-        if(item.zfpcrLoanType == '0'){
-          listAccInf(item.zfiProductId).then((response) => {
-            this.$set(this.form, "zfrCollectionAccount", response.msg);
-            this.readonly = true
-          })
-        }
-      })
+          });
       }
     },
     /** 提交按钮 */
@@ -361,27 +383,28 @@ export default {
             lock: true,
             text: "Loading",
             spinner: "el-icon-loading",
-            background: "rgba(0, 0, 0, 0.7)",
+            background: "rgba(0, 0, 0, 0.7)"
           });
-          console.log(this.form,"AAHAHAHAH")
-          addRecord(this.form).then(response => {
-            this.msgSuccess("融资申请成功");
-            loading.close();
-            this.$store.dispatch("tagsView/delView", this.$route);
-            this.$router.go(-1);
-          }).catch((response) => {
+          console.log(this.form, "AAHAHAHAH");
+          addRecord(this.form)
+            .then(response => {
+              this.msgSuccess("融资申请成功");
               loading.close();
-          });
-          
+              this.$store.dispatch("tagsView/delView", this.$route);
+              this.$router.go(-1);
+            })
+            .catch(response => {
+              loading.close();
+            });
         }
       });
     },
     /* 清空 */
     clearBoth() {
-      this.form.zfrAmount = '';
-      this.form,zfrRepaymentDate = '';
-      this.form.zfrRate = '';
-      this.form.zfpcrLoanType = '';
+      this.form.zfrAmount = "";
+      this.form, (zfrRepaymentDate = "");
+      this.form.zfrRate = "";
+      this.form.zfpcrLoanType = "";
       this.billInfList = [];
       this.contractFileList = [];
       this.invoiceFileList = [];
@@ -389,7 +412,7 @@ export default {
     },
     //应收账款合计
     allAmount() {
-      var strarr = [0.00];
+      var strarr = [0.0];
       for (let i in this.billInfList) {
         strarr.push(this.billInfList[i]["zbiAmount"]);
       }
@@ -399,7 +422,17 @@ export default {
     smallToBig(money) {
       //  将数字金额转换为大写金额
       var cnNums = new Array(
-        "零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖" ); //汉字的数字
+        "零",
+        "壹",
+        "贰",
+        "叁",
+        "肆",
+        "伍",
+        "陆",
+        "柒",
+        "捌",
+        "玖"
+      ); //汉字的数字
       var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
       var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
       var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
@@ -472,61 +505,62 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('sc-service/record/export', {
-        ...this.queryParams
-      }, `sc-service_record.xlsx`)
+      this.download(
+        "sc-service/record/export",
+        {
+          ...this.queryParams
+        },
+        `sc-service_record.xlsx`
+      );
     },
     //预览
     handlePreview(row) {
-        const pfiUrl = row.pfiUrl;
-        const pfiFileName = row.pfiFileName;
-        if (row.pfiUrl) {
-            console.log(pfiFileName.substr(-3));
-            if (pfiFileName.substr(-3) == "pdf") {
-                this.wordUrl = pfiUrl + "/" + getToken();
-                this.show=false;
-                this.heid=true;
-            } else if (
-                pfiFileName.substr(-3) == "jpg" ||
-                pfiFileName.substr(-3) == "png" ||
-                pfiFileName.substr(-3) == "JPG" ||
-                pfiFileName.substr(-3) == "PNG" ||
-                pfiFileName.substr(-4) == "jpeg" ||
-                pfiFileName.substr(-3) == "JPEG" 
-            ) {
-                this.wordUrl =
-                    pfiUrl +
-                    "/" +
-                    getToken();
-                    this.show=true;
-                    this.heid=false;
-                      console.log("====>",this.wordUrl);
-            } else if (
-                pfiFileName.substr(-3) == "doc" ||
-                pfiFileName.substr(-3) == "DOC"||
-                pfiFileName.substr(-4) == "docx" ||
-                pfiFileName.substr(-3) == "DOCX"
-            ) {
-                this.wordUrl =
-                    "https://view.officeapps.live.com/op/view.aspx?src=" +
-                    pfiUrl +
-                    "/" +
-                    getToken() +
-                    "/" +
-                    pfiFileName;
-                    this.show=false;
-                    this.heid=true;
-                    console.log("====>",this.wordUrl);
-            } else {
-                this.$message({
-                    message: "暂不支持该类型文件预览",
-                    type: "warning",
-                });
-                return;
-            }
+      const pfiUrl = row.pfiUrl;
+      const pfiFileName = row.pfiFileName;
+      if (row.pfiUrl) {
+        console.log(pfiFileName.substr(-3));
+        if (pfiFileName.substr(-3) == "pdf") {
+          this.wordUrl = pfiUrl + "/" + getToken();
+          this.show = false;
+          this.heid = true;
+        } else if (
+          pfiFileName.substr(-3) == "jpg" ||
+          pfiFileName.substr(-3) == "png" ||
+          pfiFileName.substr(-3) == "JPG" ||
+          pfiFileName.substr(-3) == "PNG" ||
+          pfiFileName.substr(-4) == "jpeg" ||
+          pfiFileName.substr(-3) == "JPEG"
+        ) {
+          this.wordUrl = pfiUrl + "/" + getToken();
+          this.show = true;
+          this.heid = false;
+          console.log("====>", this.wordUrl);
+        } else if (
+          pfiFileName.substr(-3) == "doc" ||
+          pfiFileName.substr(-3) == "DOC" ||
+          pfiFileName.substr(-4) == "docx" ||
+          pfiFileName.substr(-3) == "DOCX"
+        ) {
+          this.wordUrl =
+            "https://view.officeapps.live.com/op/view.aspx?src=" +
+            pfiUrl +
+            "/" +
+            getToken() +
+            "/" +
+            pfiFileName;
+          this.show = false;
+          this.heid = true;
+          console.log("====>", this.wordUrl);
+        } else {
+          this.$message({
+            message: "暂不支持该类型文件预览",
+            type: "warning"
+          });
+          return;
         }
-        this.openFile = true;
-    },
+      }
+      this.openFile = true;
+    }
   }
 };
 </script>

+ 354 - 344
front-vue/src/views/service/rel/companyRelManage.vue

@@ -1,20 +1,22 @@
 <template>
-  <el-tabs v-model="activeName" type="border-card">
-    <el-tab-pane label="链属列表">
-      <el-card class="fiche">
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
-        <span
-          style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif"
-        >所选条件:</span>
+  <div class="app-container zap-main">
+    <el-row v-if="activeName === '0'" class="zap-table-search">
+      <el-row style="padding-top: 16px;">
+        <right-toolbar
+          class="zap-right-toolbar"
+          :showSearch.sync="showSearch"
+          @queryTable="getList"
+        >收起</right-toolbar>
+        <span class="zap-table-search__title">所选条件:</span>
         <div style="float: right;margin-right:1%">
-          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="float: ;">重置</el-button>
+          <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery" style="float: ;">重置</el-button>
           <column-setting
+            class="zap-column-setting"
             :checkList="checkList"
             :tableList="tableList"
             :selfDom="selfDom"
             :tableId="tableId"
-            style="margin-left:5px"
           ></column-setting>
         </div>
         <hr style="margin-top: 16px;" />
@@ -23,9 +25,9 @@
           ref="queryForm"
           :inline="true"
           v-show="showSearch"
-          label-width="100px"
+          label-width="auto"
         >
-          <el-form-item label="企业名称" prop="scpName">
+          <el-form-item label="企业名称" prop="scpName" size="large">
             <el-input
               maxlength="30"
               v-model="queryParams.scpName"
@@ -35,24 +37,17 @@
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="联系人" prop="scpContarct">
+          <el-form-item label="联系人" prop="scpContarct" size="large">
             <el-input
               maxlength="30"
               v-model="queryParams.scpContarct"
               placeholder="请输入联系人"
               clearable
-              size="small"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="链属状态" prop="scrStatus">
-            <el-select
-              v-model="queryParams.scrStatus"
-              placeholder="链属状态"
-              clearable
-              size="small"
-              style="width: 215px"
-            >
+          <el-form-item label="链属状态" prop="scrStatus" size="large">
+            <el-select v-model="queryParams.scrStatus" placeholder="链属状态" clearable>
               <el-option
                 v-for="dict in scrStatusOptions"
                 :key="dict.dictValue"
@@ -61,14 +56,8 @@
               ></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="认证状态" prop="scpStatus">
-            <el-select
-              v-model="queryParams.scpStatus"
-              placeholder="认证状态"
-              clearable
-              size="small"
-              style="width: 215px"
-            >
+          <el-form-item label="认证状态" prop="scpStatus" size="large">
+            <el-select v-model="queryParams.scpStatus" placeholder="认证状态" clearable>
               <el-option
                 v-for="dict in scpStatusOptions"
                 :key="dict.dictValue"
@@ -78,136 +67,19 @@
             </el-select>
           </el-form-item>
         </el-form>
-      </el-card>
-
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            type="warning"
-            icon="el-icon-upload2"
-            size="mini"
-            @click="handleImport"
-            style="background-color: #23C6C8;
-    border-color:#23C6C8"
-          >导入</el-button>
-        </el-col>
       </el-row>
-
-      <el-table v-loading="loading" :data="companyRelList" stripe border>
-        <el-table-column label="序号" type="index" width="50" align="center">
-          <template slot-scope="scope">
-            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="发起方"
-          align="center"
-          prop="launchScyName"
-          v-if="uncheckList.launchScyName"
-          show-overflow-tooltip
-        >
-          <template slot-scope="scope">
-            <span v-if="scope.row.rel">{{scope.row.launchScyName}}</span>
-            <span v-if="scope.row.spare">{{scope.row.spareScyName}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="链属关系(发起方)"
-          align="center"
-          prop="launchScrLaunchType"
-          v-if="uncheckList.launchScrLaunchType"
-          show-overflow-tooltip
-        >
-          <template slot-scope="scope">
-            <span v-if="scope.row.rel">{{launchScrLaunchTypeFormat(scope.row.launchScrLaunchType)}}</span>
-            <span
-              v-if="scope.row.spare && scope.row.scpType == '01'"
-            >{{launchScrLaunchTypeFormat("00")}}</span>
-            <span
-              v-if="scope.row.spare && scope.row.scpType == '00'"
-            >{{launchScrLaunchTypeFormat("01")}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="接收方"
-          align="center"
-          prop="receiveScyName"
-          v-if="uncheckList.receiveScyName"
-          show-overflow-tooltip
-        >
-          <template slot-scope="scope">
-            <span v-if="scope.row.rel">{{scope.row.receiveScyName}}</span>
-            <span v-if="scope.row.spare">{{scope.row.scpName}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="链属关系(接收方)"
-          align="center"
-          prop="launchScrReceiveType"
-          v-if="uncheckList.launchScrReceiveType"
-          show-overflow-tooltip
-        >
-          <template slot-scope="scope">
-            <span
-              v-if="scope.row.rel"
-            >{{launchScrReceiveTypeFormat(scope.row.launchScrReceiveType)}}</span>
-            <span v-if="scope.row.spare">{{launchScrReceiveTypeFormat(scope.row.scpType)}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="联系人"
-          align="center"
-          prop="scpContarct"
-          v-if="uncheckList.scpContarct"
-        ></el-table-column>
-        <el-table-column
-          label="联系电话"
-          align="center"
-          prop="scpContarctPhone"
-          v-if="uncheckList.scpContarctPhone"
-        ></el-table-column>
-        <el-table-column
-          label="邮箱"
-          align="center"
-          prop="scpContarctEmail"
-          v-if="uncheckList.scpContarctEmail"
-          show-overflow-tooltip
-        ></el-table-column>
-        <el-table-column
-          label="链属状态"
-          align="center"
-          prop="launchScrStatus"
-          v-if="uncheckList.launchScrStatus"
-          :formatter="launchScrStatusFormat"
-        ></el-table-column>
-        <el-table-column
-          label="认证状态(接收方)"
-          align="center"
-          prop="scpStatus"
-          v-if="uncheckList.scpStatus"
-          :formatter="scpStatusFormat"
-        ></el-table-column>
-      </el-table>
-
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </el-tab-pane>
-
-    <el-tab-pane label="链属未认证">
-      <!-- 未认证列表 -->
-      <el-card class="fiche">
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getSpare">收起</right-toolbar>
-        <span
-          style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif"
-        >所选条件:</span>
+    </el-row>
+    <el-row v-if="activeName === '1'" class="zap-table-search">
+      <el-row style="padding-top: 16px;">
+        <right-toolbar
+          class="zap-right-toolbar"
+          :showSearch.sync="showSearch"
+          @queryTable="getSpare"
+        >收起</right-toolbar>
+        <span class="zap-table-search__title">所选条件:</span>
         <div style="float: right;margin-right:1%">
-          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleSpareQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetSpareQuery" style="float: ;">重置</el-button>
+          <el-button type="cyan" icon="el-icon-search" @click="handleSpareQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="resetSpareQuery" style="float: ;">重置</el-button>
         </div>
         <hr style="margin-top: 16px;" />
         <el-form
@@ -215,36 +87,28 @@
           ref="querySpareForm"
           :inline="true"
           v-show="showSearch"
-          label-width="100px"
+          label-width="auto"
         >
-          <el-form-item label="企业名称" prop="companyName">
+          <el-form-item label="企业名称" prop="companyName" size="large">
             <el-input
               maxlength="30"
               v-model="spareParams.companyName"
               placeholder="请输入企业名称"
               clearable
-              size="small"
               @keyup.enter.native="handleSpareQuery"
             />
           </el-form-item>
-          <el-form-item label="社会统一代码" prop="scySocialCode">
+          <el-form-item label="社会统一代码" prop="scySocialCode" size="large">
             <el-input
               maxlength="30"
               v-model="spareParams.scySocialCode"
               placeholder="请输入社会统一代码"
               clearable
-              size="small"
               @keyup.enter.native="handleSpareQuery"
             />
           </el-form-item>
-          <el-form-item label="链属关系" prop="scrType">
-            <el-select
-              v-model="spareParams.scrType"
-              placeholder="链属关系"
-              clearable
-              size="small"
-              style="width: 215px"
-            >
+          <el-form-item label="链属关系" prop="scrType" size="large">
+            <el-select v-model="spareParams.scrType" placeholder="链属关系" clearable>
               <el-option
                 v-for="dict in scrTypeOptions"
                 :key="dict.dictValue"
@@ -254,186 +118,320 @@
             </el-select>
           </el-form-item>
         </el-form>
-      </el-card>
-
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            type="warning"
-            icon="el-icon-upload2"
-            size="mini"
-            @click="handleImport"
-            style="background-color: #23C6C8;
-    border-color:#23C6C8"
-          >导入</el-button>
-        </el-col>
       </el-row>
+    </el-row>
+    <el-row class="zap-form zap-margin-top">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="链属列表">
+          <div class="zap-content">
+            <el-button
+              type="warning"
+              icon="el-icon-upload2"
+              @click="handleImport"
+              style="background-color: #23C6C8;
+    border-color:#23C6C8"
+            >导入</el-button>
+          </div>
 
-      <!-- 未认证企业信息列表 -->
-      <el-table v-loading="loading" :data="spareOwnlist" stripe border>
-        <el-table-column label="序号" type="index" width="50" align="center">
-          <template slot-scope="scope">
-            <span>{{(spareParams.pageNum - 1) * spareParams.pageSize + scope.$index + 1}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="发起方" align="center" prop="scyName" show-overflow-tooltip />
-        <el-table-column label="链属关系(发起方)" align="center" width="113px" prop="lanchScpType">
-          <template slot-scope="scope">
-            <span v-if="scope.row.scpType == '00'">{{lanchScpTypeFormat("01")}}</span>
-            <span v-if="scope.row.scpType == '01'">{{lanchScpTypeFormat("00")}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="接收方" align="center" prop="scpName" show-overflow-tooltip />
-        <el-table-column
-          label="社会统一代码(接收方)"
-          align="center"
-          width="150px"
-          prop="scpSocialCode"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          label="链属关系(接收方)"
-          align="center"
-          width="113px"
-          prop="scpType"
-          :formatter="scpTypeFormat"
-        />
-        <el-table-column label="联系人" align="center" width="100px" prop="scpContarct" />
-        <el-table-column
-          label="联系电话"
-          align="center"
-          width="100px"
-          prop="scpContarctPhone"
-          show-overflow-tooltip
-        />
-        <el-table-column label="邮箱" align="center" prop="scpContarctEmail" show-overflow-tooltip />
-        <el-table-column
-          label="状态"
-          align="center"
-          width="100px"
-          prop="scpStatus"
-          :formatter="scpStatusFormat"
-        />
-      </el-table>
-      <pagination
-        v-show="spareTitol > 0"
-        :total="spareTitol"
-        :page.sync="spareParams.pageNum"
-        :limit.sync="spareParams.pageSize"
-        @pagination="getSpare"
-      />
-    </el-tab-pane>
+          <el-table v-loading="loading" :data="companyRelList" stripe>
+            <el-table-column label="序号" type="index" width="50" align="center">
+              <template slot-scope="scope">
+                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="发起方"
+              align="center"
+              prop="launchScyName"
+              v-if="uncheckList.launchScyName"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                <span v-if="scope.row.rel">{{scope.row.launchScyName}}</span>
+                <span v-if="scope.row.spare">{{scope.row.spareScyName}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="链属关系(发起方)"
+              align="center"
+              prop="launchScrLaunchType"
+              v-if="uncheckList.launchScrLaunchType"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                <span
+                  v-if="scope.row.rel"
+                >{{launchScrLaunchTypeFormat(scope.row.launchScrLaunchType)}}</span>
+                <span
+                  v-if="scope.row.spare && scope.row.scpType == '01'"
+                >{{launchScrLaunchTypeFormat("00")}}</span>
+                <span
+                  v-if="scope.row.spare && scope.row.scpType == '00'"
+                >{{launchScrLaunchTypeFormat("01")}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="接收方"
+              align="center"
+              prop="receiveScyName"
+              v-if="uncheckList.receiveScyName"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                <span v-if="scope.row.rel">{{scope.row.receiveScyName}}</span>
+                <span v-if="scope.row.spare">{{scope.row.scpName}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="链属关系(接收方)"
+              align="center"
+              prop="launchScrReceiveType"
+              v-if="uncheckList.launchScrReceiveType"
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                <span
+                  v-if="scope.row.rel"
+                >{{launchScrReceiveTypeFormat(scope.row.launchScrReceiveType)}}</span>
+                <span v-if="scope.row.spare">{{launchScrReceiveTypeFormat(scope.row.scpType)}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="联系人"
+              align="center"
+              prop="scpContarct"
+              v-if="uncheckList.scpContarct"
+            ></el-table-column>
+            <el-table-column
+              label="联系电话"
+              align="center"
+              prop="scpContarctPhone"
+              v-if="uncheckList.scpContarctPhone"
+            ></el-table-column>
+            <el-table-column
+              label="邮箱"
+              align="center"
+              prop="scpContarctEmail"
+              v-if="uncheckList.scpContarctEmail"
+              show-overflow-tooltip
+            ></el-table-column>
+            <el-table-column
+              label="链属状态"
+              align="center"
+              prop="launchScrStatus"
+              v-if="uncheckList.launchScrStatus"
+              :formatter="launchScrStatusFormat"
+            ></el-table-column>
+            <el-table-column
+              label="认证状态(接收方)"
+              align="center"
+              prop="scpStatus"
+              v-if="uncheckList.scpStatus"
+              :formatter="scpStatusFormat"
+            ></el-table-column>
+          </el-table>
 
-    <!-- 企业详情对话框 -->
-    <el-dialog :title="titleDetail" :visible.sync="openDetail" width="800px" append-to-body>
-      <el-form ref="formDetail" :model="formDetail" label-width="140px" :inline="true">
-        <el-form-item label="企业名称" prop="scyName">
-          <el-input
-            v-model="formDetail.scyName"
-            placeholder="请输入企业名称"
-            disabled
-            style="width:560px"
-            maxlength="20"
-            show-word-limit
-          />
-        </el-form-item>
-        <el-form-item label="企业统一代码" prop="scySocialCode">
-          <el-input
-            v-model="formDetail.scySocialCode"
-            placeholder="请输入企业统一代码"
-            disabled
-            maxlength="18"
-            show-word-limit
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
           />
-        </el-form-item>
-        <el-form-item label="联系人" prop="scyLegal">
-          <el-input
-            v-model="formDetail.scyLegal"
-            placeholder="请输入联系人"
-            disabled
-            maxlength="5"
-            show-word-limit
-          />
-        </el-form-item>
-        <el-form-item label="联系人手机号" prop="scyPhone">
-          <el-input
-            v-model="formDetail.scyPhone"
-            placeholder="请输入联系人手机号"
-            disabled
-            maxlength="11"
-            show-word-limit
+        </el-tab-pane>
+
+        <el-tab-pane label="链属未认证">
+          <!-- 未认证列表 -->
+
+          <div class="zap-content">
+            <el-button
+              type="warning"
+              icon="el-icon-upload2"
+              @click="handleImport"
+              style="background-color: #23C6C8;
+    border-color:#23C6C8"
+            >导入</el-button>
+          </div>
+
+          <!-- 未认证企业信息列表 -->
+          <el-table v-loading="loading" :data="spareOwnlist" stripe>
+            <el-table-column label="序号" type="index" width="50" align="center">
+              <template slot-scope="scope">
+                <span>{{(spareParams.pageNum - 1) * spareParams.pageSize + scope.$index + 1}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="发起方" align="center" prop="scyName" show-overflow-tooltip />
+            <el-table-column label="链属关系(发起方)" align="center" width="113px" prop="lanchScpType">
+              <template slot-scope="scope">
+                <span v-if="scope.row.scpType == '00'">{{lanchScpTypeFormat("01")}}</span>
+                <span v-if="scope.row.scpType == '01'">{{lanchScpTypeFormat("00")}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="接收方" align="center" prop="scpName" show-overflow-tooltip />
+            <el-table-column
+              label="社会统一代码(接收方)"
+              align="center"
+              width="150px"
+              prop="scpSocialCode"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              label="链属关系(接收方)"
+              align="center"
+              width="113px"
+              prop="scpType"
+              :formatter="scpTypeFormat"
+            />
+            <el-table-column label="联系人" align="center" width="100px" prop="scpContarct" />
+            <el-table-column
+              label="联系电话"
+              align="center"
+              width="100px"
+              prop="scpContarctPhone"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              label="邮箱"
+              align="center"
+              prop="scpContarctEmail"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              label="状态"
+              align="center"
+              width="100px"
+              prop="scpStatus"
+              :formatter="scpStatusFormat"
+            />
+          </el-table>
+          <pagination
+            v-show="spareTitol > 0"
+            :total="spareTitol"
+            :page.sync="spareParams.pageNum"
+            :limit.sync="spareParams.pageSize"
+            @pagination="getSpare"
           />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancelDetail">取 消</el-button>
-      </div>
-    </el-dialog>
+        </el-tab-pane>
 
-    <!-- 导入窗口 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        drag
-      >
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">
-          将文件拖到此处,或
-          <em>点击上传</em>
-        </div>
-        <div class="el-upload__tip" slot="tip">
-          <el-link type="info" style="font-size:12px" @click="importAdminTemplate">下载模板</el-link>
-        </div>
-        <div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“xls”或“xlsx”格式文件!</div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
-      </div>
-    </el-dialog>
+        <!-- 企业详情对话框 -->
+        <el-dialog :title="titleDetail" :visible.sync="openDetail" width="800px" append-to-body>
+          <el-form ref="formDetail" :model="formDetail" label-width="140px" :inline="true">
+            <el-form-item label="企业名称" prop="scyName">
+              <el-input
+                v-model="formDetail.scyName"
+                placeholder="请输入企业名称"
+                disabled
+                style="width:560px"
+                maxlength="20"
+                show-word-limit
+              />
+            </el-form-item>
+            <el-form-item label="企业统一代码" prop="scySocialCode">
+              <el-input
+                v-model="formDetail.scySocialCode"
+                placeholder="请输入企业统一代码"
+                disabled
+                maxlength="18"
+                show-word-limit
+              />
+            </el-form-item>
+            <el-form-item label="联系人" prop="scyLegal">
+              <el-input
+                v-model="formDetail.scyLegal"
+                placeholder="请输入联系人"
+                disabled
+                maxlength="5"
+                show-word-limit
+              />
+            </el-form-item>
+            <el-form-item label="联系人手机号" prop="scyPhone">
+              <el-input
+                v-model="formDetail.scyPhone"
+                placeholder="请输入联系人手机号"
+                disabled
+                maxlength="11"
+                show-word-limit
+              />
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="cancelDetail">取 消</el-button>
+          </div>
+        </el-dialog>
+
+        <!-- 导入窗口 -->
+        <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body>
+          <el-row type="flex" align="middle" justify="center">
+            <el-upload
+              class="zap-upload-invoice__form"
+              ref="upload"
+              :limit="1"
+              accept=".xlsx, .xls"
+              :headers="upload.headers"
+              :action="upload.url + '?updateSupport=' + upload.updateSupport"
+              :disabled="upload.isUploading"
+              :on-progress="handleFileUploadProgress"
+              :on-success="handleFileSuccess"
+              :auto-upload="false"
+              drag
+            >
+              <div class="zap-upload-invoce__inner">
+                <i class="el-icon-upload" style="font-size: 64px;color: #21b24b"></i>
+                <div class="zap-upload-invoice__text">
+                  将文件拖到此处,或
+                  <span>点击上传</span>
+                </div>
+                <div class="zap-upload-invoice__tip">按住Ctrl可同时多选,单个文件不能超过2mb</div>
+                <div class="zap-upload-invoice__tip">严禁上传包含色情、暴力、反动等相关违法信息的文件。</div>
+              </div>
+              <div class="el-upload__tip" slot="tip">
+                <!-- <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据 -->
+                <el-link type="info" style="font-size:12px" @click="importAdminTemplate">下载模板</el-link>
+              </div>
+            </el-upload>
+          </el-row>
+          <el-row style="height: 109px;" type="flex" align="middle" justify="center">
+            <el-button type="primary" plain @click="upload.open = false">取 消</el-button>
+            <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          </el-row>
+        </el-dialog>
 
-    <!-- 平台下载模板 -->
-    <el-dialog :title="templateTitle" :visible.sync="templateOpen" width="400px" append-to-body>
-      <el-form
-        ref="templateForm"
-        :model="templateForm"
-        :rules="templateRules"
-        label-width="100px"
-        :inline="true"
-      >
-        <el-form-item label="企业名称" prop="scyId">
-          <el-select
-            v-model="templateForm.scyId"
-            filterable
-            clearable
-            reserve-keyword
-            @clear="clearBoth"
-            placeholder="请选择核心企业"
-            :remote-method="getCompanyIdList"
+        <!-- 平台下载模板 -->
+        <el-dialog :title="templateTitle" :visible.sync="templateOpen" width="400px" append-to-body>
+          <el-form
+            ref="templateForm"
+            :model="templateForm"
+            :rules="templateRules"
+            label-width="100px"
+            :inline="true"
           >
-            <el-option
-              v-for="(item,index) in companyIdList"
-              :key="index"
-              :label="item.scyName"
-              :value="item.scyId"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitTemplateForm">确 定</el-button>
-        <el-button @click="cancelTemplateForm">取 消</el-button>
-      </div>
-    </el-dialog>
-  </el-tabs>
+            <el-form-item label="企业名称" prop="scyId">
+              <el-select
+                v-model="templateForm.scyId"
+                filterable
+                clearable
+                reserve-keyword
+                @clear="clearBoth"
+                placeholder="请选择核心企业"
+                :remote-method="getCompanyIdList"
+              >
+                <el-option
+                  v-for="(item,index) in companyIdList"
+                  :key="index"
+                  :label="item.scyName"
+                  :value="item.scyId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitTemplateForm">确 定</el-button>
+            <el-button @click="cancelTemplateForm">取 消</el-button>
+          </div>
+        </el-dialog>
+      </el-tabs>
+    </el-row>
+  </div>
 </template>
 
 <script>
@@ -858,4 +856,16 @@ export default {
     }
   }
 };
-</script>
+</script>
+
+
+<style lang="scss" scoped>
+::v-deep .el-tabs__item {
+  width: 105px;
+  height: 55px;
+  padding: 0;
+  line-height: 55px;
+  text-align: center;
+  font-size: 16px;
+}
+</style>