系统样式优化

src/views/FinancialManagement/ReconciliationSystem/ReceivablePayableCollection/ReceivablePayableCollection.vue

@@ -0,0 +1,488 @@
+<template>
+  <div>
+    <div class="p-2">
+      <el-form
+        :inline="true"
+        :model="pageRequest"
+        size="small"
+        label-width="120px"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="车牌号">
+              <el-input
+                v-model="pageRequest.licenseno"
+                placeholder="请输入车牌号"
+                class="widths"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="险种">
+              <el-input
+                v-model="pageRequest.risk"
+                placeholder="请输入险种"
+                class="widths"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="保险公司">
+              <el-select
+                v-model="pageRequest.insuranceId"
+                filterable
+                class="widths"
+                clearable
+              >
+                <el-option
+                  v-for="val in companyList"
+                  :key="val.id"
+                  :label="val.name"
+                  :value="val.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="被保险人">
+              <el-input
+                v-model="pageRequest.insuredName"
+                placeholder="请输入被保险人"
+                class="widths"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="交强保单号">
+              <el-input
+                v-model="pageRequest.jqPolicyId"
+                placeholder="请输入交强保单号"
+                class="widths"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="商业保单号">
+              <el-input
+                v-model="pageRequest.syPolicyId"
+                placeholder="请输入商业保单号"
+                class="widths"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="非车保单号">
+              <el-input
+                v-model="pageRequest.nonCarPolicyId"
+                placeholder="请输入非车保单号"
+                class="widths"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="结算日期">
+              <el-date-picker
+                v-model="clearingTime"
+                type="daterange"
+                @change="clearingTimeChange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                class="widths"
+                value-format="yyyy-MM-dd"
+                style="width: 220px"
+                clearable
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="出单日期">
+              <el-date-picker
+                v-model="signingTime"
+                type="daterange"
+                @change="signingTimeChange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                class="widths"
+                value-format="yyyy-MM-dd"
+                style="width: 220px"
+                clearable
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div class="flex j-end" style="margin-right: 100px">
+        <el-button
+          type="primary"
+          size="small"
+          @click="Search"
+          style="margin-right: 20px"
+          >查询</el-button
+        >
+        <el-upload
+          class="upload-demo"
+          :auto-upload="false"
+          :on-change="writeOffUpload"
+          action="###"
+          :show-file-list="false"
+        >
+          <el-button size="small" type="primary">数据导入</el-button>
+        </el-upload>
+      </div>
+    </div>
+    <el-main ref="elMain" style="padding: 0px">
+      <kt-common-table
+        :SerialShow="false"
+        :operationWidth="150"
+        :showOperation="true"
+        permsDelete="sys:user:delete"
+        :showBatchDelete="false"
+        :showBatchSettled="false"
+        :showBatchPrint="false"
+        permsButton1="sys:user:edit"
+        permsButton2="sys:user:edit"
+        permsButton3="sys:user:edit"
+        :data="pageResult"
+        :columns="columns"
+        @findPage="findPage"
+        keyName="policyno"
+        settledName="批量生成"
+        @handleSettled="handleTableSettled"
+        @handlePrint="handlePrint"
+        button1Name="修改"
+        button1Background="#E6A23C"
+        @handleButton1="sourceUpdate"
+        button1Icon=""
+      >
+      </kt-common-table>
+    </el-main>
+    <el-dialog title="信息修改" :visible.sync="dialogFormVisible" width="60%">
+      <el-form
+        :model="updateform"
+        :inline="true"
+        label-width="130px"
+        size="small"
+      >
+        <el-form-item label="险种：">
+          <el-input
+            v-model="updateform.risk"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="交强保费：">
+          <el-input
+            v-model="updateform.jqPremiumTax"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="商业保费：">
+          <el-input
+            v-model="updateform.syPremiumTax"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="非车保费：">
+          <el-input
+            v-model="updateform.nonCarPremiumTax"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="被保险人：">
+          <el-input
+            v-model="updateform.insuredName"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="车牌号：">
+          <el-input
+            v-model="updateform.licenseno"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="交强应收比例：">
+          <el-input
+            v-model="updateform.jqReceivableRatio"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="商业应收比例：">
+          <el-input
+            v-model="updateform.syReceivableRatio"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="非车应收比例：">
+          <el-input
+            v-model="updateform.nonCarReceivableRatio"
+            autocomplete="off"
+            class="widths"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogFormVisible = false"
+          >取 消</el-button
+        >
+        <el-button size="small" type="primary" @click="updateSubmit"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import CommonUtil from "@/utils/comutil.js";
+export default {
+  components: {
+    KtCommonTable,
+  },
+  data() {
+    return {
+      clearingTime:[],
+      signingTime:[],
+      pageRequest: {
+        //查询的默认条件
+        pageNum: 1,
+        pageSize: 20,
+        licenseno: "", //车牌号
+        risk: "", //险种
+        insuranceId: "", //保险公司
+        insuredName: "", //被保险人
+        clearingTime: "", //结算日期
+        signingTime: "", //出单日期
+        jqPolicyId: "", //交强保单号
+        syPolicyId: "", //商业保单号
+        nonCarPolicyId: "", //非车保单号
+      },
+      dialogFormVisible: false,
+      // 右侧列表查询数据Start
+      pageResult: [],
+      updateform: {
+        risk: "",
+        jqPremiumTax: "",
+        syPremiumTax: "",
+        nonCarPremiumTax: "",
+        insuredName: "",
+        licenseno: "",
+        jqReceivableRatio: "",
+        syReceivableRatio: "",
+        nonCarReceivableRatio: "",
+      },
+      columns: [
+        //数据列
+        { prop: "id", label: " 编号", minWidth: 160 },
+        { prop: "insuranceId", label: "保司编码", minWidth: 160 },
+        { prop: "insuranceName", label: "保司名称", minWidth: 160 },
+        { prop: "insuranceDept", label: "保司机构", minWidth: 160 },
+        { prop: "insuranceDeptId", label: "保司机构代码", minWidth: 100 },
+        { prop: "risk", label: "险种", minWidth: 160 },
+        { prop: "jqPolicyId", label: "交强保单号", minWidth: 160 },
+        { prop: "jqPremiumTax", label: "交强险保费", minWidth: 160 },
+        {
+          prop: "jqPremium",
+          label: "交强险保费不含税",
+          minWidth: 160,
+        },
+        { prop: "syPolicyId", label: "商业保单号", minWidth: 160 },
+        { prop: "syPremiumTax", label: "商业险保费", minWidth: 160 },
+        { prop: "syPremium", label: "商业险保费不含税", minWidth: 160 },
+        { prop: "nonCarPolicyId", label: "非车保单号", minWidth: 160 },
+        { prop: "nonCarPremiumTax", label: "非车保费", minWidth: 160 },
+        { prop: "nonCarPremium", label: "非车险保费不含税", minWidth: 160 },
+        { prop: "insuredName", label: "被保险人", minWidth: 160 },
+        { prop: "licenseno", label: "车牌号", minWidth: 160 },
+        { prop: "signingTime", label: "出单日期", minWidth: 160 },
+        { prop: "clearingTime", label: "结算日期", minWidth: 160 },
+        { prop: "taxamount", label: "车船税", minWidth: 160 },
+        { prop: "jqReceivableRatio", label: "交强应收比例", minWidth: 160 },
+        { prop: "jqPremiumRatio", label: "交强手续费比例", minWidth: 160 },
+        { prop: "jqNonCopyingRatio", label: "交强非跟单比例", minWidth: 160 },
+        { prop: "syReceivableRatio", label: "商业应收比例", minWidth: 160 },
+        { prop: "syPremiumRatio", label: "商业手续费比例", minWidth: 160 },
+        { prop: "syNonCopyingRatio", label: "商业非跟单比例", minWidth: 160 },
+        { prop: "nonCarReceivableRatio", label: "非车应收比例", minWidth: 160 },
+        { prop: "nonCarPremiumRatio", label: "非车手续费比例", minWidth: 160 },
+        {
+          prop: "nonCarNonCopyingRatio",
+          label: "非车非跟单比例",
+          minWidth: 160,
+        },
+        { prop: "premium", label: "手续费金额", minWidth: 160 },
+        { prop: "nonCopying", label: "非跟单金额", minWidth: 160 },
+        { prop: "receivable", label: "应收金额", minWidth: 160 },
+        {
+          prop: "maxJqReceivableRatio",
+          label: "最大交强应付比例",
+          minWidth: 160,
+        },
+        {
+          prop: "maxSyReceivableRatio",
+          label: "最大商业应付比例",
+          minWidth: 160,
+        },
+        {
+          prop: "maxNonCarReceivableRatio",
+          label: "最大非车应付比例",
+          minWidth: 160,
+        },
+        { prop: "maxReceivable", label: "最大应付金额", minWidth: 160 },
+        { prop: "clearingState", label: "结算状态", minWidth: 160 },
+      ],
+      row: {},
+      companyList:[],
+    };
+  },
+  created() {
+    this.companyInt();
+  },
+  mounted() {},
+  methods: {
+    clearingTimeChange(e){
+      console.log(e)
+      this.pageRequest.clearingTime=e.toString();
+    },
+    signingTimeChange(e){
+      this.pageRequest.signingTime=e.toString();
+
+    },
+    //保险公司查询
+    companyInt() {
+      this.$api.letter.gainTopList().then((res) => {
+        this.companyList = res.data;
+      });
+    },
+    //附件上传
+    writeOffUpload(file) {
+      var file = file.raw;
+      const params = new FormData(); // 声明formData数据类型
+      params.append("multipartFile", file);
+      params.append("type", "settle");
+      this.$api.letter.uploadFile(params).then((res) => {
+        if (res.code == "200") {
+          let url = process.env.BASE_URL + res.data.url;
+          this.$api.task.SourceExcel(url).then((res) => {
+            if (res.code == "200") {
+              this.$message({
+                type: "success",
+                message: res.msg,
+              });
+            } else {
+              this.$message({
+                type: "error",
+                message: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleTableSettled(ids) {
+      this.plyNoList = ids;
+      this.dialogVisible11 = true;
+    },
+    Search() {
+      this.findPage();
+    },
+    sourceUpdate({ row, column }) {
+      this.dialogFormVisible = true;
+      this.updateform = row;
+    },
+    updateSubmit() {
+      this.$api.task.SourceUpdate(this.updateform).then((res) => {
+        if (res.code == "200") {
+          this.$message({
+            type: "success",
+            message: res.msg,
+          });
+          this.dialogFormVisible = false;
+          this.findPage();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    handlePrint() {
+      this.$api.task.excelExport(this.pageRequest).then((res) => {
+        console.log(res);
+        let blob = new Blob([res], {
+          type: "application/vnd.ms-excel",
+        }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
+        let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象
+        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = "手续费管理清单.xlsx";
+        a.click();
+        // 5.释放这个临时的对象url
+        window.URL.revokeObjectURL(url);
+      });
+    },
+    //联级选择器触发事件
+    handleChange(val) {
+      console.log(val);
+      if (val.length !== 0) {
+        this.pageRequest.deptId = val.at(-1);
+      } else {
+        this.pageRequest.deptId = "";
+      }
+    },
+    //-- formatter begin--
+    //点击查询按钮
+    //--数据字典 begin --
+    getDictItems: function (typeName) {
+      let that = this;
+      that.$api.dict
+        .findByLableName(typeName)
+        .then(function (res) {
+          console.log(res);
+          that[typeName + "options"] = res.data; // 把获取到的数据赋给this.data
+        })
+        .catch(function (error) {
+          that[typeName + "options"] = [];
+        });
+    },
+    //--数据字典 end --
+    // 右侧列表的方法Start
+    findPage(data) {
+      // 获取分页数据
+      let that = this;
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNum = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      that.$api.task
+        .SourceExcelPage(that.pageRequest)
+        .then((res) => {
+          that.pageResult = res.data;
+        })
+        .then(data != null ? data.callback : "");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.widths {
+  width: 220px;
+}
+</style>
+

src/views/FinancialManagement/ReconciliationSystem/ReceivablePayableCollection/SettlementCollect.vue

@@ -75,9 +75,9 @@
         </el-table-column>
         <el-table-column label="已结算" header-align="center">
           <el-table-column
-            v-for="index in 12"
-            :key="'settlement-' + index"
-            :label="index + '月 '"
+            v-for="(item,index) in settlementColumns"
+            :key=" index"
+            :label="item.settlementDate"
             header-align="center"
           >
             <el-table-column
@@ -88,7 +88,7 @@
             >
               <template slot-scope="scope">
                 <div>
-                  {{ scope.row.settlementData[index - 1].agentCommission }}
+                  {{ scope.row.settlementData[index].agentCommission}}
                 </div>
               </template>
             </el-table-column>
@@ -100,7 +100,7 @@
             >
               <template slot-scope="scope">
                 <div>
-                  {{ scope.row.settlementData[index - 1].settlementPremium }}
+                  {{ scope.row.settlementData[index].settlementPremium }}
                 </div>
               </template>
             </el-table-column>
@@ -164,13 +164,15 @@ export default {
       plyNoList: [],
       // 右侧列表查询数据Start
       pageResult: [],
+      settlementColumns: [], //数据列标题
     };
   },
   created() {
     this.companyInt();
   },
-  computed: {},
-  mounted() {},
+  mounted() {
+
+  },
   methods: {
     //查询
     formQuery() {
@@ -229,15 +231,21 @@ export default {
       // 获取分页数据
       let that = this;
       that.$api.task
-        .settlementSourceResult(this.pageRequest.monthValue,this.pageRequest.insuranceId)
+        .settlementSourceResult(
+          this.pageRequest.monthValue,
+          this.pageRequest.insuranceId
+        )
         .then((res) => {
-          if(res.code=='200'){
+          if (res.code == "200") {
             that.pageResult = res.data.content;
-          }else{
+            if (res.data.content.length > 0) {
+              this.settlementColumns = res.data.content[0].settlementData;
+            }
+          } else {
             this.$message({
-                type: "error",
-                message: res.msg,
-              });
+              type: "error",
+              message: res.msg,
+            });
           }
         })
         .then(data != null ? data.callback : "");

src/views/HeadBar/HeadBar.vue

@@ -349,7 +349,7 @@ export default {
 }
 
 .position-left {
-  left: 200px;
+  left: 220px;
 }
 
 .position-collapse-left {

src/views/MainContent/MainContent.vue

@@ -151,9 +151,9 @@ export default {
   }
 }
 .position-left {
-  left: 200px;
+  left: 220px;
 }
 .position-collapse-left {
   left: 65px;
 }
-</style>
+</style>

src/views/NavBar/NavBar.vue

@@ -2,15 +2,15 @@
   <div class="menu-bar-container">
     <!-- logo -->
     <div
-      class="logo"
+      class="logo flex a-c j-c"
       :style="{'background-color':themeColor}"
       :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
       @click="$router.push('/')"
     >
       <img v-if="collapse" src="@/assets/image/logo.png" />
-      <div v-if="!collapse">
-        {{appName}}
+      <div v-if="!collapse" class="flex j-c a-c">
         <img src="@/assets/image/logo.png" />
+        <span>{{appName}}</span>
       </div>
     </div>
     <!-- 导航菜单 -->
@@ -33,7 +33,6 @@
     </el-menu>
   </div>
 </template>
-
 <script>
 import { mapState } from "vuex";
 import MenuTree from "@/components/MenuTree";
@@ -118,7 +117,7 @@ data(){
     bottom: 0px;
     text-align: left;
   }
-  
+
   .logo {
     position: absolute;
     top: 0px;
@@ -130,19 +129,20 @@ data(){
       width: 40px;
       height: 40px;
       border-radius: 0px;
-      margin: 10px 10px 10px 10px;
+      margin-right: 10px;
       float: left;
     }
     div {
       font-size: 25px;
       color: white;
       text-align: left;
-      padding-left: 20px;
     }
   }
 
   .menu-bar-width {
-    width: 200px;
+    width: 220px;
+    overflow-y: auto;
+
   }
   .menu-bar-collapse-width {
     width: 65px;