|
|
@@ -0,0 +1,491 @@
|
|
|
+<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"
|
|
|
+ >
|
|
|
+ <div slot="insuranceCompany" slot-scope="{ record }">
|
|
|
+ <img :src="record.logo" alt="" style="width: 24px; height: auto" />
|
|
|
+
|
|
|
+ {{ record.insuranceCompany }}
|
|
|
+ </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",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+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>
|
刘恒