vue-insagent-pc/src/views/PeopleManage/Agent/QuoteManagement.vue

<template>
  <div class="quoteManagement">
    <el-form ref="QuoteForm" :model="quoteForm" :inline="true" label-width="130px">
      <el-form-item style="width: 20%" label="代理人信息" prop="people">
        <el-input v-model="quoteForm.agent" size="small" placeholder="请输入姓名和手机号查找"></el-input>
      </el-form-item>
      <el-form-item style="width: 20%" label="工号" prop="number">
        <el-input v-model="quoteForm.agentId" size="small" placeholder="请输入工号查找"></el-input>
      </el-form-item>
      <el-form-item style="width: 20%" label="保险公司" prop="company">
        <el-select v-model="quoteForm.companyId" filterable size="small">
          <el-option v-for="(item, index) in quoteCompany" :key="item.id" :label="item.namesimple" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 20%">
        <el-button size="small" @click="reset()">重置</el-button>
        <el-button type="primary" size="small" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="quoteData"
    >
      <el-table-column prop="deptId" label="部门编码" width="150"></el-table-column>
<!--      <el-table-column prop="" label="机构名称" width="150"></el-table-column>-->
      <el-table-column prop="deptName" label="部门名称" width="150"></el-table-column>
      <el-table-column prop="userId" label="工号" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="mobile" label="联系电话" width="150"></el-table-column>
      <el-table-column prop="company" label="保险公司" width="150"></el-table-column>
      <el-table-column prop="numCount" label="今日报价（次）" width="150"></el-table-column>
      <el-table-column prop="dayAllOrder" label="今日报价（单）" width="150"></el-table-column>
      <el-table-column prop="dayCoverOrder" label="今日承保（单）" width="150"></el-table-column>
      <el-table-column prop="rate" width="150">
        <template slot="header" slot-scope="scope">
          <div>
            <span>报价出单比</span>
            <el-popover
              popper-class="popover-box"
              placement="top-end"
              title=""
              width="250"
              trigger="hover"
              content="报价出单比=承保单数/报价单数*100%
（四舍五入到小数点后两位）"
            >
              <i slot="reference" class="el-icon-question"></i>
            </el-popover>
          </div>
        </template>
      </el-table-column> <!--报价出单比-->
      <el-table-column prop="wholeAllOrder" label="累计报价（次）" width="150"></el-table-column>
      <el-table-column prop="wholeCoverOrder" label="累计承保（单）" width="150"></el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <kt-button label="增加次数" size="small" type="text" perms="agreement:input:delete"
                     @click="addCount(scope.$index, scope.row)" style="color: #D42426 !important " />
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-box">
      <el-pagination
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="增加次数"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form style="width: 100%" ref="AddForm" :model="addForm" :inline="true" label-width="130px">
        <el-form-item label="代理人" style="width: 80%">
          <el-input style="width: 100%" v-model="addForm.agent" disabled></el-input>
        </el-form-item>
        <el-form-item label="保险公司" style="width: 80%">
          <el-input v-model="addForm.company" disabled></el-input>
        </el-form-item>
        <el-form-item label="今日已报价" style="width: 80%">
          <el-input v-model="addForm.dayAllOrder" disabled></el-input>
        </el-form-item>
        <el-form-item label="今日已承保" style="width: 80%">
          <el-input v-model="addForm.dayCoverOrder" disabled></el-input>
        </el-form-item>
        <el-form-item label="报价出单比" style="width: 80%">
          <el-input v-model="addForm.rate" disabled></el-input>
          <span style="font-size: 12px; color: #999;">报价出单比=承保单数/报价单数*100%（四舍五入到小数点后两位）</span>
        </el-form-item>
        <el-form-item label="增加次数" style="width: 80%">
          <el-input v-model="addForm.quoteNumber"></el-input>
        </el-form-item>
        <el-form-item label="备注" style="width: 80%">
          <el-input type="textarea" v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCountSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import {appendUserConfig, quoteUserDetails} from "../../../http/moudules/quote";
export default {
  components: {
    KtButton
  },
  data() {
    return {
      quoteForm: {
        people: '',
        agentId: '',
        companyId: '',
      }, // 查询条件form
      quoteData: [], // 列表数据
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false, // 增加次数弹框
      addForm: {
        quoteNumber: 0,
        remark: ''
      }, // 增加次数form

      quoteCompany:[], // 保险公司list

    }
  },
  created() {
    this.initCompany();
    this.initData();
  },
  methods: {
    // 查询
    search() {
      this.pageNum = 1
      this.initData()
    },
    // 获取保险公司
    initCompany() {
      this.$api.quote.getCompany().then(res => {
        if(res.code == 200) {
          this.quoteCompany = res.data
        }
      })
    },
    // 列表
    initData() {
      this.$api.quote.quoteUserDetails({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.quoteForm
      }).then(res => {
        if(res.code === 200) {
          this.quoteData = res.data.records
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 重置
    reset() {
      this.quoteForm = {}
      this.pageNum = 1
      this.initData()
    },
    // 点击增加次数
    addCount(index, row) {
      this.dialogVisible = true
      row.agent = `${row.name}-${row.userId}`
      this.addForm = {...row}
    },
    // 分页（每页条数变化）
    handleSizeChange(size) {
      this.pageSize = size
      this.initData();
    },
    // 分页（页码改变）
    handlePageChange(page) {
      this.pageNum = page
      this.initData();
    },
    // 增加次数保存
    addCountSubmit() {
      this.$api.quote.appendUserConfig({
        userId: this.addForm.userId,
        companyId: this.addForm.companyId,
        quoteNumber: this.addForm.quoteNumber,
        remark: this.addForm.remark
      }).then(res => {
        if(res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.dialogVisible = false
      })
    },
  },
}
</script>
<style>
.popover-box.el-popover {
  background: rgba(0, 0, 0, .5) !important;
  color: #fff !important;
}
.popover-box .popper__arrow {
  border-top-color: rgba(0, 0, 0, .4) !important;
}
.popover-box .popper__arrow::after {
  border-top-color: rgba(0, 0, 0, 0) !important;
}
</style>
<style lang="scss" scoped>
/deep/ {
  .el-form-item__content {
    width: calc(100% - 130px);
  }
}
.flex-box{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

</style>