融资方列表详情样式调整

front-vue/src/views/service/creditLine/supplierCreditLine.vue

@@ -1,92 +1,72 @@
 <template>
-  <div class="app-container">
-    <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  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>
-        <!-- <column-setting :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" style="margin-left:5px"></column-setting> -->
+  <div class="app-container zap-main">
+    <el-row class="zap-table-search">
+      <div class="zap-padding-end">
+        <right-toolbar
+          class="zap-right-toolbar"
+          :showSearch.sync="showSearch"
+          @queryTable="getList"
+        >收起</right-toolbar>
+        <span class="zap-padding-start zap-font-title">所选条件:</span>
+        <div style="float: right;margin-right:1%">
+          <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 :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId" style="margin-left:5px"></column-setting> -->
+        </div>
+        <hr style="margin-top: 16px;" />
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          :inline="true"
+          v-show="showSearch"
+          label-width="auto"
+        >
+          <el-form-item prop="scyName" label="企业名称" size="large">
+            <el-input v-model="queryParams.scyName" placeholder="请输入企业名称" clearable maxlength="25" />
+          </el-form-item>
+          <el-form-item prop="AmountA" label="授信额度范围" size="large">
+            <el-input v-model="queryParams.AmountA" placeholder="请输授信额度" clearable maxlength="20" />
+          </el-form-item>
+          <el-form-item>-</el-form-item>
+          <el-form-item prop="AmountB" size="large">
+            <el-input v-model="queryParams.AmountB" placeholder="请输授信额度" clearable maxlength="20" />
+          </el-form-item>
+          <el-form-item label="授信状态" prop="zfsqStatus" size="large">
+            <el-select v-model="queryParams.zfsqStatus" placeholder="请选择状态" clearable>
+              <el-option
+                v-for="dict in statusOptions"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
       </div>
-      <hr  style="margin-top: 16px;">
-      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item prop="scyName" label="企业名称">
-          <el-input
-            v-model="queryParams.scyName"
-            placeholder="请输入企业名称"
-            clearable
-            size="small"
-            maxlength="25"
-            style="width: 190px"
-          />
-        </el-form-item>
-        <el-form-item prop="AmountA"  label="授信额度范围" label-width="90px">
-          <el-input
-            v-model="queryParams.AmountA"
-            placeholder="请输授信额度"
-            clearable
-            size="small"
-            maxlength="20"
-            style="width: 190px"
-          /> 
-        </el-form-item>
-        <el-form-item>
-          -
-        </el-form-item>
-        <el-form-item prop="AmountB">
-          <el-input
-            v-model="queryParams.AmountB"
-            placeholder="请输授信额度"
-            clearable
-            size="small"
-            maxlength="20"
-            style="width: 190px"
-          />
-        </el-form-item>
-        <el-form-item label="授信状态" prop="zfsqStatus">
-          <el-select v-model="queryParams.zfsqStatus" placeholder="请选择状态" clearable size="small">
-            <el-option
-              v-for="dict in statusOptions"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="dict.dictValue"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
-    </el-card>
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['supplierCredit:line:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-upload2"
-          size="mini"
-          @click="handleImport"
-          v-hasPermi="['supplierCredit:line:importData']"
-          style="background-color: #23C6C8;
-                border-color:#23C6C8"
-        >导入</el-button>
-      </el-col>
     </el-row>
+    <div class="zap-content zap-margin-top">
+      <el-button
+        type="primary"
+        icon="el-icon-plus"
+        @click="handleAdd"
+        v-hasPermi="['supplierCredit:line:add']"
+      >新增</el-button>
+      <el-button
+        type="success"
+        icon="el-icon-upload2"
+        @click="handleImport"
+        v-hasPermi="['supplierCredit:line:importData']"
+      >导入</el-button>
+    </div>
 
-    <el-table v-loading="loading" :data="quotaList" @selection-change="handleSelectionChange">
-      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+    <el-table class="zap-table" v-loading="loading" :data="quotaList" @selection-change="handleSelectionChange" 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="scyName"  show-overflow-tooltip/>
-      <el-table-column label="企业代码" align="center" prop="scySocialCode"  show-overflow-tooltip/>
+      <el-table-column label="企业名称" align="center" prop="scyName" show-overflow-tooltip />
+      <el-table-column label="企业代码" align="center" prop="scySocialCode" show-overflow-tooltip />
       <el-table-column label="授信额度" :formatter="moneyFormat" align="center" prop="zfsqAmount" />
       <el-table-column label="授信状态" :formatter="statusFormat" align="center" prop="zfsqStatus" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -126,7 +106,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -137,31 +117,63 @@
 
     <!-- 添加或修改供应商授信额度对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="80px" :label-position="labelPosition">
+      <el-form
+        :inline="true"
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+        :label-position="labelPosition"
+      >
         <el-form-item label="企业名称:" prop="zfsqCompanyId">
-          <el-select v-model="form.zfsqCompanyId" style="width : 300px" clearable :disabled="isDisabled">
+          <el-select
+            v-model="form.zfsqCompanyId"
+            style="width : 300px"
+            clearable
+            :disabled="isDisabled"
+          >
             <el-option
               v-for="(item,index) in gysCompanyList"
               :key="index"
-              :label="item.scyName" 
+              :label="item.scyName"
               :value="item.scyId"
               @click.native="code(item)"
             ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="企业统一代码:" prop="scySocialCode">
-          <el-input v-model="form.scySocialCode" :disabled="true" placeholder="请输入企业统一代码" style="width:300px"/>
+          <el-input
+            v-model="form.scySocialCode"
+            :disabled="true"
+            placeholder="请输入企业统一代码"
+            style="width:300px"
+          />
         </el-form-item>
         <el-form-item label="还款账户:" prop="zfsqAccount">
-          <el-input v-model="form.zfsqAccount"  placeholder="请输入还款账户" style="width:300px" maxlength="50"/>
+          <el-input
+            v-model="form.zfsqAccount"
+            placeholder="请输入还款账户"
+            style="width:300px"
+            maxlength="50"
+          />
         </el-form-item>
         <el-form-item label="还款账户开户行:" prop="zfsqAccountBank">
-          <el-input v-model="form.zfsqAccountBank"  placeholder="请输入还款账户开户行" style="width:300px" maxlength="30"/>
+          <el-input
+            v-model="form.zfsqAccountBank"
+            placeholder="请输入还款账户开户行"
+            style="width:300px"
+            maxlength="30"
+          />
         </el-form-item>
         <el-form-item label="授信额度:" prop="zfsqAmount">
-            <el-input v-model="form.zfsqAmount" @input.native="changeRate($event,form.zfsqAmount)" placeholder="请输入授信额度"  style="width:300px">
-              <template slot="append">元</template>
-            </el-input>
+          <el-input
+            v-model="form.zfsqAmount"
+            @input.native="changeRate($event,form.zfsqAmount)"
+            placeholder="请输入授信额度"
+            style="width:300px"
+          >
+            <template slot="append">元</template>
+          </el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -170,7 +182,13 @@
       </div>
     </el-dialog>
     <!-- 导入 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" :rules="rules" width="400px" append-to-body>
+    <el-dialog
+      :title="upload.title"
+      :visible.sync="upload.open"
+      :rules="rules"
+      width="400px"
+      append-to-body
+    >
       <el-upload
         ref="upload"
         :limit="1"
@@ -203,25 +221,32 @@
 </template>
 
 <script>
-import { listQuota, getQuota, delQuota, addQuota, updateQuota ,changeStatus,listCompanyRel} from "@/api/service/creditLine/quota";
+import {
+  listQuota,
+  getQuota,
+  delQuota,
+  addQuota,
+  updateQuota,
+  changeStatus,
+  listCompanyRel
+} from "@/api/service/creditLine/quota";
 import { listCompany } from "@/api/common/company";
 import { getToken } from "@/utils/auth";
 export default {
   name: "Quota",
-  components: {
-  },
+  components: {},
   data() {
     var self = this;
     return {
       //核心企业授信id
-      zfpcrId: '',
+      zfpcrId: "",
       //核心企业id
-      zfpcrCompanyId: '',
+      zfpcrCompanyId: "",
       //导入限制数量
       uploadNum: 0,
       //是否禁用
       isDisabled: false,
-      labelPosition: 'top',
+      labelPosition: "top",
       // 遮罩层
       loading: true,
       // 选中数组
@@ -255,9 +280,16 @@ export default {
         // 是否更新已经存在的用户数据
         updateSupport: 0,
         // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
+        headers: {
+          Authorization: "Bearer " + getToken()
+        },
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/sc-service/supplierCreditLine/importData/" + self.zfpcrId + '/' + self.zfpcrCompanyId,
+        url:
+          process.env.VUE_APP_BASE_API +
+          "/sc-service/supplierCreditLine/importData/" +
+          self.zfpcrId +
+          "/" +
+          self.zfpcrCompanyId
       },
       // 查询参数
       queryParams: {
@@ -285,47 +317,73 @@ export default {
         zfsqProfitSpare9: null,
         scyName: null,
         AmountA: null,
-        AmountB: null,
+        AmountB: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         zfsqCompanyId: [
-          { required: true, message: "企业名称不能为空", trigger: ["blur", "change"] }
+          {
+            required: true,
+            message: "企业名称不能为空",
+            trigger: ["blur", "change"]
+          }
         ],
         scySocialCode: [
-          { required: true, message: "企业统一代码不能为空", trigger: ["blur", "change"] }
+          {
+            required: true,
+            message: "企业统一代码不能为空",
+            trigger: ["blur", "change"]
+          }
         ],
         zfsqAccount: [
-          { required: true, message: "还款账户不能为空", trigger: ["blur", "change"] },
+          {
+            required: true,
+            message: "还款账户不能为空",
+            trigger: ["blur", "change"]
+          },
           {
             pattern: /^[0-9]\d*$/,
             message: "请输入正确的还款账户",
-            trigger: ["blur", "change"],
-          },
+            trigger: ["blur", "change"]
+          }
         ],
         zfsqAccountBank: [
-          { required: true, message: "还款账户开户行不能为空", trigger: ["blur", "change"] },
+          {
+            required: true,
+            message: "还款账户开户行不能为空",
+            trigger: ["blur", "change"]
+          },
           {
             pattern: /[\u4e00-\u9fa5]/,
             message: "请输入正确的账户开户行",
-            trigger: ["blur", "change"],
-          },
+            trigger: ["blur", "change"]
+          }
         ],
         zfsqAmount: [
-          { required: true, message: "授信额度不能为空", trigger: ["blur", "change"] },
-        ],
+          {
+            required: true,
+            message: "授信额度不能为空",
+            trigger: ["blur", "change"]
+          }
+        ]
       }
     };
   },
   created() {
     this.zfpcrId = this.$route.params && this.$route.params.zfpcrId;
-    this.zfpcrCompanyId = this.$route.params && this.$route.params.zfpcrCompanyId;
-    this.upload.url = process.env.VUE_APP_BASE_API + "/sc-service/supplierCreditLine/importData/" + this.zfpcrId + '/' + this.zfpcrCompanyId,
-    this.getDicts("zc_zfpcr_status").then(response => {
-      this.statusOptions = response.data;
-    });
+    this.zfpcrCompanyId =
+      this.$route.params && this.$route.params.zfpcrCompanyId;
+    (this.upload.url =
+      process.env.VUE_APP_BASE_API +
+      "/sc-service/supplierCreditLine/importData/" +
+      this.zfpcrId +
+      "/" +
+      this.zfpcrCompanyId),
+      this.getDicts("zc_zfpcr_status").then(response => {
+        this.statusOptions = response.data;
+      });
     this.getList();
   },
   methods: {
@@ -335,15 +393,15 @@ export default {
       this.queryParams.zfsqId = this.zfpcrId;
       listQuota(this.queryParams).then(response => {
         this.quotaList = response.data.records;
-         this.total = response.data.total;
+        this.total = response.data.total;
         this.loading = false;
       });
     },
     /* 供应商公司 */
-    getGysCompany(){
-      listCompanyRel(this.zfpcrCompanyId).then((response) =>{
-        this.gysCompanyList  = response.data;
-      })
+    getGysCompany() {
+      listCompanyRel(this.zfpcrCompanyId).then(response => {
+        this.gysCompanyList = response.data;
+      });
     },
     /* 选择企业带出企业统一代码 */
     code(item) {
@@ -399,9 +457,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.zfsqId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map(item => item.zfsqId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 字典翻译 */
     statusFormat(row, column) {
@@ -418,7 +476,7 @@ export default {
     /** 修改按钮操作 */
     handleEdit(row) {
       this.reset();
-      const zfsqId = row.zfsqId || this.ids
+      const zfsqId = row.zfsqId || this.ids;
       this.getGysCompany();
       getQuota(zfsqId).then(response => {
         this.form = response.data[0];
@@ -427,30 +485,26 @@ export default {
         this.title = "修改供应商授信额度";
       });
     },
-    changeRate(e,input){
-      e.target.value=(e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
-      this.input=e.target.value
-      this.form.zfsqAmount=this.input
+    changeRate(e, input) {
+      e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
+      this.input = e.target.value;
+      this.form.zfsqAmount = this.input;
     },
     /** 冻结/解冻按钮操作 */
     handleUpdate(row) {
       let text = row.zfsqStatus === "0" ? "解冻" : "冻结";
-      this.$confirm(
-        "确认要" + text + '此数据项吗?',
-        "警告",
-        {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-        }
-      )
-      .then(function() {
-        return changeStatus(row);
-      })
-      .then(() => {
-        this.getList();
-        this.msgSuccess(text + "成功");
+      this.$confirm("确认要" + text + "此数据项吗?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
+        .then(function() {
+          return changeStatus(row);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess(text + "成功");
+        });
     },
     /** 提交按钮 */
     submitForm() {
@@ -477,16 +531,22 @@ export default {
     handleDelete(row) {
       const zfsqIds = row.zfsqId || this.ids;
       const scyName = row.scyName;
-      this.$confirm('是否确认删除企业名称为"' + scyName + '"的数据项?', "警告", {
+      this.$confirm(
+        '是否确认删除企业名称为"' + scyName + '"的数据项?',
+        "警告",
+        {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
-        }).then(function() {
+        }
+      )
+        .then(function() {
           return delQuota(zfsqIds);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.msgSuccess("删除成功");
-        })
+        });
     },
     /** 导入按钮操作 */
     handleImport() {
@@ -494,7 +554,7 @@ export default {
       this.upload.title = "授信导入";
       this.upload.open = true;
     },
-     /** 下载模板操作 */
+    /** 下载模板操作 */
     importTemplate() {
       this.download(
         "/sc-service/supplierCreditLine/importTemplate/",
@@ -511,7 +571,9 @@ export default {
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
-      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
+      this.$alert(response.msg, "导入结果", {
+        dangerouslyUseHTMLString: true
+      });
       this.getList();
     },
     // 提交上传文件
@@ -520,23 +582,29 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('system/quota/export', {
-        ...this.queryParams
-      }, `system_quota.xlsx`)
+      this.download(
+        "system/quota/export",
+        {
+          ...this.queryParams
+        },
+        `system_quota.xlsx`
+      );
     },
     /* 金额格式化 */
     moneyFormat(row, column, cellValue) {
-        if(cellValue == null || cellValue== undefined || cellValue == ''){
-            cellValue = '0.00'
-        }
-        cellValue += '';
-        if (!cellValue.includes('.')) {
-            cellValue += '.00';
-        }
-        return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
-            return $1 + ',';
-          }).replace(/\.$/, '');
-    },
+      if (cellValue == null || cellValue == undefined || cellValue == "") {
+        cellValue = "0.00";
+      }
+      cellValue += "";
+      if (!cellValue.includes(".")) {
+        cellValue += ".00";
+      }
+      return cellValue
+        .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
+          return $1 + ",";
+        })
+        .replace(/\.$/, "");
+    }
   }
 };
-</script>
+</script>