Просмотр исходного кода

fix:业务数据表格添加滚动条

刘恒 1 год назад
Родитель
Сommit
83d97c1246

+ 1 - 1
.env.development

@@ -1,4 +1,4 @@
-VUE_APP_API_BASE_URL='http://192.168.0.42:8080/'
+VUE_APP_API_BASE_URL='http://192.168.0.42:8080'
 
 
 #VUE_APP_API_BASE_URL='https://test.baoxianzhanggui.com/web-api'

+ 6 - 6
src/components/tree/agentChanell.vue

@@ -124,13 +124,13 @@ export default {
             this.$emit("showTab", {
               type: res.data.data.type,
               userId:
-                res.data.data.userList != null
-                  ? res.data.data.userList[0].id
-                  : "",
+                res.data.data.userList!=null 
+                  ? res.data.data.userList.length>0 ?res.data.data.userList[0].id
+                  : "" :'',
               agencyId:
-                res.data.data.deptList != null
-                  ? res.data.data.deptList[0].id
-                  : "",
+                res.data.data.deptList!=null 
+                  ? res.data.data.deptList.length>0 ?res.data.data.deptList[0].id
+                  : "" :'',
             });
             // this.userId =
             //   res.data.data.userList != null

+ 1 - 0
src/pages/business/agent.vue

@@ -196,6 +196,7 @@
           @clear="onClear"
           @change="onChange"
           :loading="loading"
+           :scroll="{ x: 'calc(1500px + 50%)', y: 400 }"
         >
           <div slot="operation" slot-scope="{ text, record }">
             <a-button type="link" @click="watchMessage({ text, record })"

+ 1 - 1
src/pages/business/channel.vue

@@ -184,7 +184,7 @@
             @clear="onClear"
             @change="onChange"
             :loading="loading"
-            :scroll="{ x: 'calc(1500px + 50%)', y: 600 }"
+            :scroll="{ x: 'calc(1500px + 50%)', y: 400 }"
           >
             <div slot="operation" slot-scope="{ text, record }">
               <a-button type="link" @click="watchMessage({ text, record })"

+ 1 - 0
src/pages/business/message.vue

@@ -126,6 +126,7 @@
           @clear="onClear"
           @change="onChange"
           :loading="loading"
+           :scroll="{ x: 'calc(1500px + 50%)', y: 400 }"
         >
           <div slot="insuranceCompany" slot-scope="{ record }">
             <img :src="record.logo" alt="" style="width: 24px; height: auto" />

+ 498 - 0
src/pages/business/orderMessage.vue

@@ -0,0 +1,498 @@
+<template>
+  <div class="quote">
+    <!-- <div class="quote-tree" style="border-radius: 8px">
+      <div><h2>组织树</h2></div>
+      <div>
+      
+        
+      </div>
+    </div> -->
+    <div class="back-line-main">
+      <div class="back-line-header">
+        <div class="back-line-header-title">
+          <h2>合计</h2>
+          <div>
+            <dl>
+              <dt><span>签单保费</span></dt>
+              <dd>
+                <span>{{ amount.sumPremium || 0 }}</span>
+              </dd>
+            </dl>
+            <dl>
+              <dt><span>签单保费总占比</span></dt>
+              <dd>
+                <span>{{
+                  amount.sumPremiumProportion
+                    ? (amount.sumPremiumProportion * 100).toFixed(2) + "%"
+                    : 0
+                }}</span>
+              </dd>
+            </dl>
+            <dl>
+              <dt><span>交强险保费</span></dt>
+              <dd>
+                <span>
+                  {{ amount.jqpremium }}
+                </span>
+              </dd>
+            </dl>
+            <dl>
+              <dt><span>车船税</span></dt>
+              <dd>
+                <span>
+                  {{ amount.taxamount }}
+                </span>
+              </dd>
+            </dl>
+            <dl>
+              <dt><span>商业险保费</span></dt>
+              <dd>
+                <span>
+                  {{ amount.sypremium || 0 }}
+                </span>
+              </dd>
+            </dl>
+            <dl>
+              <dt><span>非车险保费</span></dt>
+              <dd>
+                <span>
+                  {{ amount.jypremium || 0 }}
+                </span>
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <div style="background-color: #fff; margin-top: 15px">
+        <div class="table-title">
+          <h2>保费详情</h2>
+          <div>
+            <datePicker @getList="timeChange"></datePicker>
+            <!-- <span>时间筛选</span>
+            <a-range-picker
+              @change="onChangeTime"
+              v-model="formState.time"
+              value-format="YYYY-MM-DD"
+              style="margin-left: 10px"
+            >
+              <a-icon slot="suffixIcon" type="calendar" />
+            </a-range-picker>
+            <a-radio-group
+              default-value="0"
+              button-style="solid"
+              v-model="formState.dateType"
+              @change="getVerification()"
+              style="margin-left: 10px"
+            >
+              <a-radio-button
+                value="1"
+                @click="
+                  (formState.time = []),
+                    (formState.createtimeStart = ''),
+                    (formState.createtimeEnd = '')
+                "
+              >
+                当天
+              </a-radio-button>
+              <a-radio-button
+                value="2"
+                @click="
+                  (formState.time = []),
+                    (formState.createtimeStart = ''),
+                    (formState.createtimeEnd = '')
+                "
+              >
+                近7天
+              </a-radio-button>
+              <a-radio-button
+                value="3"
+                @click="
+                  (formState.time = []),
+                    (formState.createtimeStart = ''),
+                    (formState.createtimeEnd = '')
+                "
+              >
+                近30天
+              </a-radio-button>
+            </a-radio-group> -->
+          </div>
+        </div>
+
+        <standard-table
+          bordered
+          :columns="columns"
+          :dataSource="tableList"
+          :pagination="pagination"
+          @clear="onClear"
+          @change="onChange"
+          :loading="loading"
+           :scroll="{ x: 'calc(1500px + 50%)', y: 400 }"
+        >
+          <div slot="insuranceCompany" slot-scope="{ record }">
+            <img :src="record.logo" alt="" style="width: 24px; height: auto" />
+
+            {{ record.insuranceCompany }}
+          </div>
+          <div slot="distributionAmountRate" slot-scope="{ text }">
+          {{ text==null ? '0%':(text*100).toFixed(2)+"%" }}
+        </div>
+
+         
+
+          <div slot="operation" slot-scope="{ text, record }">
+            <a-button type="link" @click="watchMessage({ text, record })"
+              >详情</a-button
+            >
+          </div>
+        </standard-table>
+      </div>
+    </div>
+  </div>
+</template>
+            
+    <script>
+import StandardTable from "@/components/table/StandardTable";
+// import mixin from "../../minins/mixin";
+import datePicker from "@/components/datePicker";
+
+// import moment from "moment";
+
+const columns = [
+  {
+    title: "订单号",
+    dataIndex: "orderNo",
+    // scopedSlots: { customRender: "insuranceCompany" },
+  },
+
+  {
+    title: "车牌号",
+    dataIndex: "carNum",
+  },
+
+  {
+    title: "签单保费",
+    dataIndex: "sumPremium",
+  },
+  {
+    title: "交强险保费",
+    dataIndex: "jqpremium",
+  },
+  {
+    title: "车船税",
+    dataIndex: "taxamount",
+  },
+  {
+    title: "商业险保费",
+    dataIndex: "sypremium",
+  },
+  {
+    title: "非车险保费",
+    dataIndex: "jypremium",
+  },
+  {
+    title: "毛利润",
+    dataIndex: "distributionAmount",
+  },
+  {
+    title: "毛利率",
+    dataIndex: "distributionAmountRate",
+    scopedSlots: { customRender: "distributionAmountRate" },
+  },
+];
+
+export default {
+  components: {
+    StandardTable,
+    datePicker,
+  },
+  //   mixins: [mixin],
+  data() {
+    return {
+      formState: {
+        dateType: undefined,
+        time: ["", ""],
+        createtimeStart: "",
+        createtimeEnd: "",
+      },
+      backLinePersonnel: {},
+      columns: columns,
+      companyList: [],
+      tableList: [],
+      pagination: {
+        current: 1,
+        defaultPageSize: 10,
+        total: 0,
+        pagesize0ptions: ["10", "20", "30", "50", "100"],
+        hideOnSinglePage: false,
+        showQuickJumper: true, //
+        showSizeChanger: true, //是否可以改变pagesize
+        showTotal: (total) => `共 ${total} 条数据`,
+      },
+      loading: false,
+      wholeList: [],
+      provinceList: [],
+      cityList: [],
+      areaList: [],
+      storeList: [],
+      treeData: [
+        { title: "Expand to load", key: "0" },
+        { title: "Expand to load", key: "1" },
+        { title: "Tree Node", key: "2", isLeaf: true },
+      ],
+      amount: {},
+      process: process.env.VUE_APP_API_BASE_URL,
+    };
+  },
+  created() {
+    this.formState.time = [
+      this.$route.query.time.createtimeStart,
+      this.$route.query.time.createtimeEnd,
+    ];
+
+    this.formState.createtimeStart = this.$route.query.time.createtimeStart;
+    this.formState.createtimeEnd = this.$route.query.time.createtimeEnd;
+    // this.getList();
+  },
+  watch: {
+    "formState.createtimeStart"(val) {
+      this.formState.createtimeStart = val;
+    },
+    "formState.createtimeEnd"(val) {
+      this.formState.createtimeEnd = val;
+    },
+  },
+  mounted() {
+    // setTimeout(() => {
+    // }, 1000);
+    // this.getVerification();
+  },
+  methods: {
+    timeChange(val) {
+      // console.log(val);
+      this.formState = { ...val };
+      this.getList();
+    },
+    getList() {
+      this.pagination.current = 1;
+      this.pagination.defaultPageSize = 10;
+      this.getVerification();
+    },
+    onChangeTime(val) {
+      // console.log(val);
+      this.formState.createtimeStart = val[0];
+      this.formState.createtimeEnd = val[1];
+      this.formState.dateType = undefined;
+      this.getVerification();
+    },
+    handleFinish() {
+      //
+    },
+    wholeHandleChange() {
+      this.getProvinceList(this.formState.whole);
+    },
+    provinceHandleChange() {
+      this.getCityList(this.formState.provinceId);
+    },
+    cityHandleChange() {
+      this.getAreaList(this.formState.cityId);
+    },
+    countyHandleChange() {
+      this.getStoreList(this.formState.countyId);
+    },
+
+    async getVerification() {
+      this.loading = true;
+      console.log(this.$route.query.user);
+      this.$API.business
+        .getBusinessOrderDataDetails({
+          pageNum: this.pagination.current,
+          pageSize: this.pagination.defaultPageSize,
+          userId: this.$route.query.user.record.userId,
+          ...this.formState,
+          treeType: this.$route.query.user.treeType,
+          treeUserId: this.$route.query.user.treeUserId,
+        })
+        .then((res) => {
+          if (res.data.code === 200) {
+            this.loading = false;
+            this.tableList = res.data.data.records;
+            this.pagination.current= res.data.data.current
+            this.pagination.defaultPageSize= res.data.data.size
+            this.pagination.total= res.data.data.total
+            
+          } else {
+            this.loading = false;
+            this.tableList = [];
+            this.$message.error(res.data.msg);
+          }
+        });
+      this.$API.business
+        .getBusinessOrderDataTotal({
+          ...this.formState,
+          userId: this.$route.query.user.record.userId,
+          treeType: this.$route.query.user.treeType,
+          treeUserId: this.$route.query.user.treeUserId,
+        })
+        .then((res) => {
+          if (res.data.code === 200) {
+            this.amount = { ...res.data.data };
+          } else {
+            this.amount = {};
+            this.$message.error(res.data.msg);
+          }
+        });
+    },
+    onClear() {
+      this.$message.info("您清空了勾选的所有行");
+    },
+
+    onChange(pagination, filters, sorter, { currentDataSource }) {
+      // this.$message.info('表格状态改变了')
+      console.log(pagination, filters, sorter, { currentDataSource });
+      this.pagination = {
+        current: pagination.current,
+        defaultPageSize: pagination.pageSize,
+        total: pagination.total,
+      };
+      this.getVerification();
+    },
+  },
+};
+</script>
+    <style lang='less' scoped>
+.quote {
+  display: flex;
+  > div:first-child {
+    width: 20%;
+    background: #fff;
+    margin-right: 15px;
+  }
+  .quote-tree {
+    padding: 15px;
+    box-sizing: border-box;
+    //
+    > div:first-child {
+      border-bottom: 1px solid #f0f0f0;
+    }
+  }
+}
+.back-line-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  .back-line-header {
+    // padding: 15px;
+    box-sizing: border-box;
+    .back-line-header-title {
+      padding: 15px;
+      box-sizing: border-box;
+      background: #ffffff;
+      box-shadow: 0px 2px 8px 0px rgba(141, 149, 176, 0.15);
+      border-radius: 8px 8px 8px 8px;
+      border: 2px solid rgba(255, 255, 255, 0.2);
+      h2 {
+        margin: 0;
+      }
+      > div {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        > dl {
+          flex: none;
+          width: 180px;
+          height: 80px;
+          display: flex;
+          //   align-items: center;
+          justify-content: space-between;
+          flex-direction: column;
+          padding: 10px;
+          box-sizing: border-box;
+
+          border-radius: 4px 4px 4px 4px;
+
+          > dd {
+            display: flex;
+            // align-items: center;
+            justify-content: flex-end;
+            margin: 0;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 24px;
+            // color: rgba(0, 0, 0, 0.85);
+            // padding-left: 15px;
+            box-sizing: border-box;
+          }
+        }
+        > dl:first-child {
+          background: url("../../assets/img/business1.png");
+          color: #11a6d3;
+        }
+        > dl:nth-child(2) {
+          background: url("../../assets/img/business2.png");
+          color: #f87f2c;
+        }
+        > dl:nth-child(3) {
+          background: url("../../assets/img/business3.png");
+          color: #fab600;
+        }
+        > dl:nth-child(4) {
+          background: url("../../assets/img/business4.png");
+          color: #80be38;
+        }
+        > dl:nth-child(5) {
+          background: url("../../assets/img/business5.png");
+          color: #906cef;
+        }
+        > dl:nth-child(6) {
+          background: url("../../assets/img/business6.png");
+          color: #47a2eb;
+        }
+      }
+      span {
+        display: block;
+        margin-right: 15px;
+      }
+      /deep/.ant-calendar-picker {
+        width: 300px;
+      }
+    }
+  }
+  > div {
+    // height: 152px;
+    // background: #fff;
+    .ant-form {
+      display: flex;
+      > .ant-form-item {
+        flex: none;
+        /deep/.ant-form-item-control-wrapper {
+          width: 100%;
+        }
+      }
+    }
+    .form-item-search {
+      // display: flex;
+      // justify-content: flex-end;
+      /deep/ .ant-form-item-control {
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+  .table-title {
+    padding: 15px 15px 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    h2 {
+      margin: 0;
+    }
+    > div {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

+ 32 - 0
src/pages/business/sales.vue

@@ -153,12 +153,23 @@
           @clear="onClear"
           @change="onChange"
           :loading="loading"
+          :scroll="{ x: 'calc(1500px + 50%)', y: 400 }"
         >
+        
+        <div slot="distributionAmountRate" slot-scope="{ text }">
+          {{ text==null ? '0%':(text*100).toFixed(2)+"%" }}
+        </div>
           <div slot="operation" slot-scope="{ text, record }">
             <a-button type="link" @click="watchMessage({ text, record })"
               >详情</a-button
             >
+            <a-button type="link" @click="watchOrderMessage({ text, record })"
+              >订单详情</a-button
+            >
           </div>
+          <!-- <div slot="operation" slot-scope="{ text, record }">
+           
+          </div> -->
         </standard-table>
       </div>
     </div>
@@ -213,6 +224,13 @@ const columns = [
     title: "毛利润",
     dataIndex: "distributionAmount",
   },
+  {
+    title: "毛利率",
+    dataIndex: "distributionAmountRate",
+    scopedSlots: { customRender: "distributionAmountRate" },
+
+  },
+  
   {
     title: "操作",
     dataIndex: "operation",
@@ -308,6 +326,20 @@ export default {
         },
       });
     },
+    watchOrderMessage(item) {
+      //
+      item;
+      this.$router.push({
+        path: "/business/sales/orderMessage",
+        query: {
+          user: { ...item },
+          time: {
+            createtimeStart: this.formState.createtimeStart,
+            createtimeEnd: this.formState.createtimeEnd,
+          },
+        },
+      });
+    },
 
     async getVerification() {
       this.loading = true;

+ 1 - 1
src/pages/task/channel.vue

@@ -322,7 +322,7 @@ const columns = [
     scopedSlots: { customRender: "qutationCount" },
   },
   {
-    title: "代录单",
+    title: "代录单",
     dataIndex: "sumEntryStatus",
     // scopedSlots: { customRender: "qutationCount" },
   },

+ 9 - 1
src/router/config.js

@@ -82,8 +82,8 @@ const router = new Router({
           meta: { requiresAuth: true },
 
           component: () => import('@/pages/sales/message'),
-
         },
+      
         {
 
           path: '/verification',
@@ -254,6 +254,14 @@ const router = new Router({
 
           component: () => import('@/pages/business/message'),
         },
+        {
+          path: '/business/sales/orderMessage',
+          name: '订单详情',
+          hidden: true,
+          meta: { requiresAuth: true },
+
+          component: () => import('@/pages/business/orderMessage'),
+        },
 
 
       ]

+ 13 - 1
src/services/business.js

@@ -39,6 +39,16 @@ export async function getCountBusinessData(data) {
     return request("/taskStatistics/getCountBusinessData", METHOD.POST, data)
 }
 
+//业务数据电销订单详情
+export async function getBusinessOrderDataDetails(data) {
+    return request("/taskStatistics/getBusinessOrderDataDetails", METHOD.POST, data)
+}
+
+//业务数据电销订单详情合计
+export async function getBusinessOrderDataTotal(data) {
+    return request("/taskStatistics/getBusinessOrderDataTotal", METHOD.POST, data)
+}
+
 
 
 
@@ -53,5 +63,7 @@ export default {
     getBusinessAgentTotalDetails,
     findNextAgentTree,
     findAgentChanellTree,
-    getCountBusinessData
+    getCountBusinessData,
+    getBusinessOrderDataDetails,
+    getBusinessOrderDataTotal
 }

+ 3 - 1
vue.config.js

@@ -7,6 +7,8 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin')
 
 const productionGzipExtensions = ['js', 'css']
 const isProd = process.env.NODE_ENV === 'production'
+const isTest = process.env.NODE_ENV === 'test'
+
 
 const assetsCDN = {
   // webpack build externals
@@ -122,7 +124,7 @@ module.exports = {
   },
   // https://test.baoxianzhanggui.com/console-api
 
-  publicPath: isProd ? 'https://sxzgkj.baoxianzhanggui.com/console-api' : '/',
+  publicPath: isProd ? 'https://sxzgkj.baoxianzhanggui.com/console-api' : isTest ? 'https://test.baoxianzhanggui.com/console-api' : '/',
 
   // publicPath: '/',
   outputDir: process.env.outputDir,