优化

src/pages/manage/cost.vue

@@ -14,20 +14,20 @@
           align="right"
         ></el-table-column>
         <el-table-column
-          width="110px"
+          width="130px"
           align="right"
           label="金额"
           :formatter="moneyFormat"
           prop="amount"
         ></el-table-column>
-        <el-table-column width="170px" align="right" label="成本类别" prop="costType.name"></el-table-column>
-        <el-table-column width="260px" align="right" label="发生项目/人" prop="project.name"></el-table-column>
-        <el-table-column width="260px" align="right" label="发生部门" prop="department.name"></el-table-column>
+        <el-table-column width="180px" align="right" label="成本类别" prop="costType.name"></el-table-column>
+        <el-table-column width="200px" align="right" label="发生项目/人" prop="project.name"></el-table-column>
+        <el-table-column width="270px" align="right" label="发生部门" prop="department.name"></el-table-column>
 
-        <el-table-column label="接收项目" width="260px" align="right" prop="toProject.name"></el-table-column>
-        <el-table-column label="接收部门" width="260px" align="right" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="接收项目" width="220px" align="right" prop="toProject.name"></el-table-column>
+        <el-table-column label="接收部门" width="290px" align="right" prop="toDepartment.name"></el-table-column>
 
-        <el-table-column label="备注" width="280px" align="right" prop="remark"></el-table-column>
+        <el-table-column label="备注" align="right" prop="remark"></el-table-column>
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
@@ -213,7 +213,8 @@ export default {
       costTeamSelectData: [],
       costTypeSelectData: [],
       manageData: [],
-      companyData: []
+      companyData: [],
+      totalNumber: 0
     };
   },
   created() {
@@ -261,7 +262,11 @@ export default {
   methods: {
     // 金额格式化
     moneyFormat(row) {
-      return row.amount.toFixed(2);
+      let num = row.amount.toFixed(2);
+      num += "";
+      return num.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
+        return $1 + ",";
+      });
     },
     // 切换页码
     handlePageChange(val) {

src/pages/manage/index.vue

@@ -19,7 +19,7 @@
           prop="happenTime"
         ></el-table-column>
         <el-table-column
-          width="110px"
+          width="130px"
           align="right"
           label="金额"
           :formatter="moneyFormat"
@@ -31,20 +31,20 @@
           </template>
         </el-table-column>
         <el-table-column width="160px" align="right" label="产品" prop="product.name"></el-table-column>
-        <el-table-column width="260px" align="right" label="归属项目" prop="project.name"></el-table-column>
-        <el-table-column width="200px" align="right" label="归属部门" prop="department.name"></el-table-column>
-        <el-table-column label="接收项目" width="260px" align="right" prop="toProject.name"></el-table-column>
+        <el-table-column width="235px" align="right" label="归属项目" prop="project.name"></el-table-column>
+        <el-table-column width="230px" align="right" label="归属部门" prop="department.name"></el-table-column>
+        <el-table-column label="接收项目" width="235px" align="right" prop="toProject.name"></el-table-column>
 
         <!-- <el-table-column label="接收部门" prop="toDepartment.name"></el-table-column> -->
-        <el-table-column label="来源部门" width="200px" align="right" prop="toDepartment.name"></el-table-column>
+        <el-table-column label="来源部门" width="300px" align="right" prop="toDepartment.name"></el-table-column>
 
-        <el-table-column align="right" width="200px" label="备注" prop="remark">
+        <el-table-column align="right" label="备注" prop="remark">
           <!-- <template slot="header" slot-scope="scope">
             <el-input v-model="search" size="medium" placeholder="依据金额搜索"/>
           </template>-->
         </el-table-column>
 
-        <el-table-column align="center" width="160" label="操作" >
+        <el-table-column align="center" width="160" label="操作">
           <template slot-scope="scope">
             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
             <el-button
@@ -140,7 +140,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="结算单位" prop="toDeptId" :label-width="formLabelWidth">
+        <el-form-item label="来源部门" prop="toDeptId" :label-width="formLabelWidth">
           <el-select v-model="form.toDeptId" placeholder="请选择部门">
             <el-option key label="无" value></el-option>
             <el-option
@@ -279,7 +279,11 @@ export default {
   methods: {
     // 金额格式化
     moneyFormat(row) {
-      return row.amount.toFixed(2);
+      let num = row.amount.toFixed(2);
+      num += "";
+      return num.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
+        return $1 + ",";
+      });
     },
     // 切换页码
     handlePageChange(val) {
@@ -301,6 +305,12 @@ export default {
       }
       return "";
     },
+    isDel({ row, rowIndex }) {
+      console.log("进入class判断");
+      if (row.status === "DEL") {
+        return "isDel";
+      }
+    },
     //获取部门名称
     getName(val) {
       let obj = {};
@@ -396,18 +406,18 @@ export default {
       temp.status = "DEL";
       setManage(temp).then(res => {
         setManage(temp).then(res => {
-        console.log(res);
-        // 刷新列表
-        getManageList({
-          type: "INCOME",
-          pageNo: this.pageNo,
-          pageSize: 50,
-          isEntry: true
-        }).then(res => {
-          this.manageData = res.data.content;
-          this.totalSize = res.data.totalPages;
+          console.log(res);
+          // 刷新列表
+          getManageList({
+            type: "INCOME",
+            pageNo: this.pageNo,
+            pageSize: 50,
+            isEntry: true
+          }).then(res => {
+            this.manageData = res.data.content;
+            this.totalSize = res.data.totalPages;
+          });
         });
-      })
       });
     },
     // 取消

src/pages/manage/query.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="paddingLeft">
     <!-- <TitleBar propTitle="经营数据查询" /> -->
     <el-form :model="form" ref="form" class="marginTop">
       <el-form-item label="查询类别" :label-width="formLabelWidth">
@@ -210,10 +210,10 @@
       </el-form-item>-->
     </el-form>
     <!-- 查询结果收入表 -->
-    <div class="totalSumDiv" >全部金额合计：{{totalSum}}</div>
+    <div class="totalSumDiv">全部金额合计：{{totalSum}}</div>
     <el-table
       :data="searchResult"
-      style="margin-top:30px; margin-left:20px;"
+      style="margin-top:30px;"
       :summary-method="tableSummary"
       show-summary
       v-if="tableType === 'INCOME'"
@@ -229,7 +229,7 @@
       <el-table-column
         :formatter="moneyFormat"
         prop="amount"
-        width="110px"
+        width="130px"
         align="right"
         label="金额"
       ></el-table-column>
@@ -241,11 +241,11 @@
         :formatter="incomeTypeFormat"
       ></el-table-column>
       <el-table-column label="产品" width="200px" align="right" prop="product.name"></el-table-column>
-      <el-table-column label="归属项目" width="290px" align="right" prop="project.name"></el-table-column>
+      <el-table-column label="归属项目" width="235px" align="right" prop="project.name"></el-table-column>
       <el-table-column label="归属部门" width="250px" align="right" prop="department.name"></el-table-column>
-      <el-table-column label="来源项目" width="290px" align="right" prop="toProject.name"></el-table-column>
-        <el-table-column label="来源部门" width="220px"  align="right" prop="toDepartment.name"></el-table-column>
-      <el-table-column prop="remark" align="right" width="330px" label="备注"></el-table-column>
+      <el-table-column label="来源项目" width="235px" align="right" prop="toProject.name"></el-table-column>
+      <el-table-column label="来源部门" width="300px" align="right" prop="toDepartment.name"></el-table-column>
+      <el-table-column prop="remark" align="right" label="备注"></el-table-column>
       <el-table-column
         width="120px"
         align="right"
@@ -258,7 +258,7 @@
     <!-- 查询结果成本表 -->
     <el-table
       :data="searchResult"
-      style=";margin-top:30px; margin-left:20px;"
+      style="margin-top:30px;"
       show-summary
       :summary-method="tableSummary"
       v-if="tableType === 'COST'"
@@ -274,16 +274,16 @@
       <el-table-column
         :formatter="moneyFormat"
         prop="amount"
-        width="110px"
+        width="130px"
         align="right"
         label="金额"
       ></el-table-column>
-      <el-table-column label="成本类别" width="130px" align="right" prop="costType.name"></el-table-column>
-      <el-table-column label="发生部门" width="220px" align="right" prop="department.name"></el-table-column>
-      <el-table-column label="发生项目/人" width="300px" align="right" prop="project.name"></el-table-column>
-      <el-table-column label="接收项目" width="300px"  align="right" prop="toProject.name"></el-table-column>
-      <el-table-column label="接收部门" width="220px"  align="right" prop="toDepartment.name"></el-table-column>
-      <el-table-column label="备注" width="320px" align="right" prop="remark"></el-table-column>
+      <el-table-column label="成本类别" width="270px" align="right" prop="costType.name"></el-table-column>
+      <el-table-column label="发生部门" width="240px" align="right" prop="department.name"></el-table-column>
+      <el-table-column label="发生项目/人" width="245px" align="right" prop="project.name"></el-table-column>
+      <el-table-column label="接收项目" width="235px" align="right" prop="toProject.name"></el-table-column>
+      <el-table-column label="接收部门" width="310px" align="right" prop="toDepartment.name"></el-table-column>
+      <el-table-column label="备注"  align="right" prop="remark"></el-table-column>
       <el-table-column
         width="120px"
         align="right"
@@ -415,10 +415,11 @@ export default {
           case "amount":
             const amountNum = data.map(item => Number(item["amount"]));
             console.log(amountNum);
-            sums[index] = amountNum.reduce((prev, cur) => {
+            let amountTemp = amountNum.reduce((prev, cur) => {
               // const sum = prev.toFixed(2) + cur.toFixed(2);
               return (parseFloat(prev) + parseFloat(cur)).toFixed(2);
             }, 0);
+            sums[index]  = this.moneyFormatNew(amountTemp);
             break;
           case "remark":
             sums[index] = "全部合计:";
@@ -434,7 +435,19 @@ export default {
     },
     // 金额格式化
     moneyFormat(row) {
-      return row.amount.toFixed(2);
+      let num = row.amount.toFixed(2);
+      num += "";
+      return num.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
+        return $1 + ",";
+      });
+    },
+    // 重写一遍 方便接收参数
+    moneyFormatNew(amount) {
+      let num = parseFloat(amount).toFixed(2);
+      num += "";
+      return num.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
+        return $1 + ",";
+      });
     },
     // 全选
     handleCheckAllChange(val) {
@@ -470,7 +483,7 @@ export default {
         this.searchResult = response.data.content;
         this.totalNumber = parseInt(response.data.totalElements);
         this.pageNo = parseInt(response.data.number) + 1;
-        this.totalSum = response.data.content[0].totalAmount.toFixed(2);
+        this.totalSum = this.moneyFormatNew(response.data.content[0].totalAmount)
         console.log("全部合计", response.data.content[0].totalAmount);
         if (response.data && response.data.length == 0) {
           this.$message("未找到相应数据");
@@ -526,6 +539,9 @@ export default {
 </script>
 
 <style scope>
+.paddingLeft {
+  padding: 0 20px 0 20px;
+}
 .marginTop {
   margin-top: 20px;
 }
@@ -541,7 +557,7 @@ export default {
   color: red;
   /* color: #f0f9eb; */
 }
-.totalSumDiv{
+.totalSumDiv {
   width: 100%;
   /* text-align: right; */
   padding-left: 120px;