tenant-Platform/src/views/representative/quoteApproval.vue

<template>
  <PageMain class="vh100">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="`待审核（${pendingReviewlength}）`" name="pendingReview">
      </el-tab-pane>
      <el-tab-pane :label="`审核通过（${passlength}）`" name="pass">
      </el-tab-pane>
      <el-tab-pane :label="`审核不通过（${reviewRejectedlength}）`" name="reviewRejected">
      </el-tab-pane>
    </el-tabs>
    <SearchForm :fields="visibleFields" :formInline="formInline" :onSearch="agreementQuery" :onReset="resetForm" />
    <ComplexTable :tableData="companylist" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="true"
      :pageInfo="pageInfo" @getList="getList" @selectionChange="selectionChange" uniqueIdName="costId">
      <template #ruleDescription="{ data, bodyCell }">
        <div class="whitespace-normal">{{ data.ruleDescription }}</div>
      </template>
      <template #costRules="{ data, bodyCell }">
        <div class="whitespace-normal">{{ data.costRules }}</div>
      </template>
      <template v-slot:table-title-btn>
        <el-dropdown placement="bottom-start" v-if="activeName == 'pendingReview'">
          <el-button> 批量审核<el-icon>
              <arrow-down />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchaudit">批量审核</el-dropdown-item>
              <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchrejected">批量驳回</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template v-slot:operation="scope">
        <el-button v-if="scope.operationData.approved == '0'" type="primary" link
          @click="agreemenUpdate(scope.operationData)"> 审核
        </el-button>
        <el-button v-if="scope.operationData.approved == '2' || scope.operationData.approved == '1'" type="primary" link
          @click="agreemenUpdate(scope.operationData)"> 详情
        </el-button>
      </template>
    </ComplexTable>
  </PageMain>

  <!-- 规则费用编辑组件 -->
  <ruleFeeDialogEdit :ruleFeeVisible="ruleFeeEditVisible" :headerTitle="ruleFeeHeaderTitle"
    :agreementInfo="AgreementInfo" :RulesInfo="ruleInfo" :costitemEditInfo="costitemEditInfo" @save="ruleFeeEditSave"
    @cancel="ruleFeeEditVisible = false" :operationType="activeName == 'pendingReview' ? 'audit' : 'rejected'"
    @rejectOperation="rejectOperation" @auditOperation="auditOperation"
    :titleType="activeName == 'pendingReview' ? '费用审核' : '费用详情'" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRoute, } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { loadDicts, getDict } from '@/utils/composables/dictService';//字典组件
import ruleFeeDialogEdit from "../quoteConfig/agreement/components/ruleFeeDialogEdit.vue";
import api from '@/api';
interface PageInfo {
  pageNum: number;
  pageSize: number;
  sizes: number[];
  total: number;
}
onBeforeMount(async () => {
  await loadDicts(['valid_status', 'is_enable', 'audit_status', 'insurance_type']);//获取多个字典
  if (id.value) {
    formInline.agreement = id.value;
  }
  findpage("0");//列表数据
  findpage("1");//列表数据
  findpage("2");//列表数据
  getDeptTree();
  agreement();
  getAgreement();//全部协议;
  initCompany();//保险公司
  valid_status.value = getDict('valid_status');//生效状态
  is_enable.value = getDict('is_enable');//协议状态
  insurance_type.value = getDict('insurance_type')
  audit_status.value = getDict('audit_status')

});
const tableData1 = ref([]);//待审核
const tableData2 = ref([]);//审核通过
const tableData3 = ref([]);//审核不通过
const activeName = ref('pendingReview')
const agreementQueryName = ref();//选择协议查询
const agreementList = ref();//协议列表
const sysUpAndDownList = ref<string[]>([])//选中id
const deptOptions = ref()//机构数据
const insurance_type = ref();
const valid_status = ref();
const audit_status = ref();
const is_enable = ref();
const agreementListALL = ref();//全部协议列表
const company_list = ref();//保险公司列表
const companyIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
const route = useRoute();
const id = ref(route.query.id as string);//id参数
const pendingReviewlength = ref(0);//待审核
const passlength = ref(0);//审核通过
const reviewRejectedlength = ref(0);//审核不通过
// 三个选项卡各自的分页数据
const pageInfoPending = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
});
const pageInfoPass = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
});
const pageInfoRejected = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
});
// 当前激活选项卡的分页
const pageInfo = computed(() => {
  switch (activeName.value) {
    case 'pendingReview':
      return pageInfoPending.value;
    case 'pass':
      return pageInfoPass.value;
    case 'reviewRejected':
      return pageInfoRejected.value;
    default:
      return pageInfoPending.value;
  }
});
const formInline = reactive({
  agreement: '',//协议信息
  productId: "",//归属
  rulesName: '',//保险公司id
  costRules: '',//协议类型
  agreementStatus: "",//有效状态
  auditStatus: "0",//审核状态
  validState: "",
  effectiveTime: [],
  failureTime: [],
  auditTimeBegin: "",//审核时间开始
  auditTimeEnd: "",//审核时间结束
  companyId: '',//保险公司id
})
const companylist = computed(() => {
  let list = [] as any;
  switch (activeName.value) {
    case 'pendingReview':
      list = tableData1.value;
      break;
    case 'pass':
      list = tableData2.value;
      break;
    case 'reviewRejected':
      list = tableData3.value;
      break;
    default:
      break;
  }
  return list;
})
//表格字段数据(待审核时隐藏"审核人"筛选项)
const fields = ref([
  {
    label: "所属协议", model: "agreement", type: "select", placeholder: "输入代码，名称，简称查找", options: agreementListALL,
    props: {
      label: 'agreementTitle',
      value: 'agreementTitle'
    }, filterable: true
  },
  {
    label: "险种", model: "productId", type: "select", options: insurance_type,
  },
  {
    label: "保险公司", model: "companyId", type: "cascader", placeholder: "选择保险公司", options: company_list, props: companyIdprops, placement: 'left', onChange: (value: any) => {
      formInline.companyId = value[value.length - 1];
    }
  },
  {
    label: "承保规则", model: "rulesName", type: "input", placeholder: "输入业务规则查找",
  },
  {
    label: "费用规则", model: "costRules", type: "inputTag", placeholder: "输入费用规则关键字查找",
  },

  {
    label: "费用状态", model: "agreementStatus", type: "select", placeholder: "选择状态", options: is_enable,
  },
  {
    label: "有效状态", model: "validState", type: "select", placeholder: "请选择状态", options: valid_status,
  },
  {
    label: "生效时间", model: "effectiveTime", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    format: "YYYY-MM-DD HH:mm:ss", valueFormat: "YYYY-MM-DD HH:mm:ss", timeFormat: "HH:mm:ss",
    onChange: (value: any) => {
      console.log(value)
      formInline.effectiveTime = value;
    }
  },
  {
    label: "失效时间", model: "failureTime", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    format: "YYYY-MM-DD HH:mm:ss", valueFormat: "YYYY-MM-DD HH:mm:ss", timeFormat: "HH:mm:ss",
    onChange: (value: any) => {
      formInline.failureTime = value;
    }
  },
  {
    label: "审核人", model: "auditPerson", type: "input", placeholder: "输入审核人查找",
  },
  {
    label: "审核时间", model: "auditTime", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    format: "YYYY-MM-DD HH:mm:ss", valueFormat: "YYYY-MM-DD HH:mm:ss", timeFormat: "HH:mm:ss",
    onChange: (value: any) => {
      formInline.auditTimeBegin = value[0];
      formInline.auditTimeEnd = value[1];
    }
  },

]);
// 待审核选项卡下隐藏的筛选项(fields 保持 ref, 这里只做过滤, 避免破坏 ref 的自动解包)
const visibleFields = computed(() => {
  if (activeName.value === 'pendingReview') {
    // 需要隐藏更多字段时, 把对应的 model 加到下面数组里即可
    const hiddenModels = ['auditPerson', 'auditTime'];
    return fields.value.filter((field: any) => !hiddenModels.includes(field.model));
  }
  return fields.value;
})
// 保险公司
const initCompany = () => {
  api.agreementApi.findTree({ name: "", systemCode: localStorage.getItem('login_system') }).then((res: any) => {
    if (res.code == '200') {
      company_list.value = res.data;
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
        plain: true,
      })
    }
  });
}
//费用数据查询
function findpage(type: string) {
  formInline.auditStatus = type;
  // 根据类型使用对应的分页数据
  let currentPageInfo = type === '0' ? pageInfoPending.value : type === '1' ? pageInfoPass.value : pageInfoRejected.value;
  api.agreementApi.queryByFeePage({ pages: currentPageInfo.pageNum, size: currentPageInfo.pageSize, ...formInline }).then((res: any) => {
    if (res.code == '200') {
      currentPageInfo.pageNum = res.data.current;
      currentPageInfo.pageSize = res.data.size;
      currentPageInfo.total = res.data.total;
      if (type == '0') {
        tableData1.value = res.data.records;
        pendingReviewlength.value = res.data.total;
      } else if (type == '1') {
        tableData2.value = res.data.records;
        passlength.value = res.data.total;
      } else {
        tableData3.value = res.data.records;
        reviewRejectedlength.value = res.data.total;
      }
    } else {
    }
  });
}
//协议列表查询
function agreement() {
  api.agreementApi.agreementList({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, searchValue: agreementQueryName.value }).then((res: any) => {
    if (res.code == '200') {
      agreementList.value = res.data.records;
    } else {
    }
  });
}
const getAgreement = () => {
  api.agreementApi.agreementList({ pages: 1, size: 1000 }).then((res: any) => {
    if (res.code == '200') {
      agreementListALL.value = res.data.records;
    } else {
    }
  });
}
const columns = [
  {
    prop: "agreementAbbreviation", label: "协议信息", width: '300',
    formatter: (row: any) => {
      return `${row.agreementCode}\n${row.agreementAbbreviation}`
    }
  },
  { prop: "effectiveTime", label: "生效时间", width: '200' },
  { prop: "failureTime", label: "失效时间", width: '200' },
  {
    prop: "ruleDescription", label: "承保规则", component: 'customSlot', width: '500'
  },
  { prop: "productName", label: "险种", width: '120', },
  {
    prop: "costRules", label: "费用规则", component: 'customSlot', width: '500',
  },
  {
    prop: "ruleConditions", label: "交强费用", width: '300', formatter: (row: any) => {
      let info = row.ruleConditions.find((val: any) => val.costType == '交强险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 手续费：${info.commission?.toFixed(2)}%`
      } else {
        return '-';
      }
    }
  },
  {
    prop: "ruleConditions", label: "商业费用", width: '300', formatter: (row: any) => {
      let info = row.ruleConditions.find((val: any) => val.costType == '商业险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 手续费：${info.commission?.toFixed(2)}%`
      } else {
        return '-';
      }
    }
  },
  {
    prop: "ruleConditions", label: "驾意险费用", width: '300', formatter: (row: any) => {
      let info = row.ruleConditions.find((val: any) => val.costType == '驾意险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 手续费：${info.commission?.toFixed(2)}%`
      } else {
        return '-';
      }
    }
  },
  {
    prop: "isEnabled", label: "费用状态", width: '100', component: "Tag",
    formatter: (row: any) => {
      let name = getDict('is_enable').find(val => val.value == row.isEnabled).label
      if (name) {
        return { type: 'primary', text: name };
      }
    }
  },
  {
    prop: "approved", label: "审核状态", width: '120', component: "Tag",
    formatter: (row: any) => {
      let name = getDict('audit_status').find(val => val.value == row.approved).label
      if (name) {
        return { type: 'warning', text: name };
      }
    }
  },
];
//分页事件
function getList(item: PageInfo) {
  // 根据当前选项卡更新对应的分页数据
  if (activeName.value == 'pendingReview') {
    pageInfoPending.value.pageNum = item.pageNum;
    pageInfoPending.value.pageSize = item.pageSize;
    findpage("0");
  } else if (activeName.value == 'pass') {
    pageInfoPass.value.pageNum = item.pageNum;
    pageInfoPass.value.pageSize = item.pageSize;
    findpage("1");
  } else {
    pageInfoRejected.value.pageNum = item.pageNum;
    pageInfoRejected.value.pageSize = item.pageSize;
    findpage("2");
  }
};
// 审核
const agreemenUpdate = async (item: any) => {
  ruleFeeHeaderTitle.value = item.productName;
  AgreementInfo.value = { agreementCode: item.agreementCode, agreementTitle: item.agreementAbbreviation };
  ruleInfo.value = { ruleDescription: item.ruleDescription };
  await regionLicenseRegion('0');//车牌地区
  await regionLicenseNumber('14');//车牌号
  await api.agreementApi.AgreementFeeById(item.costId).then((res: any) => {
    if (res.code == '200') {
      res.data.ruleConditions = processArray(res.data.ruleConditions);
      costitemEditInfo.value = res.data;
      ruleFeeEditVisible.value = true;
    } else {
    }
  });
}
//详情
const ruleFeeEditSave = (data: object) => {
  console.log()
  api.agreementApi.AgreementFeeupdate(data).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      ruleFeeEditVisible.value = false;
      agreementQuery();
    } else {
    }
  });
}
//添加车牌和车牌地区
const processArray = (array: any[]) => {
  return array.map((val) => {
    switch (val.attrType) {
      case 'inputNumber':
      case 'datetime':
        if (!val.operator) {
          val.operator = '1'; // 设置默认值
        }
        break;
      default:
        break;
    }
    if (val.attrCode == 'LicenseNo') {
      val.dictLabal = licensePlateNumber.value;
    }
    if (val.attrCode == 'LicenseArea') {
      val.dictLabal = licensePlateRegion.value;
    }
    return val;
  });
};
const licensePlateRegion = ref();//车牌地区
const licensePlateNumber = ref();//车牌号
const regionLicenseRegion = (value: string) => {
  api.agreementApi.getAreaLicense(value).then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      licensePlateRegion.value = data;
    } else {
    }
  });
}
const regionLicenseNumber = (value: string) => {
  api.agreementApi.getAreaLicense(value).then((res: any) => {
    if (res.code == '200') {
      let data: any = [];
      res.data.map((val: any) => {
        data.push({
          code: val.areaNumber,
          name: val.license,
        })
        return val;
      })
      licensePlateNumber.value = data;
    } else {
    }
  });
}
//多选事件
const selectionChange = (val: any) => {
  console.log(val)
  sysUpAndDownList.value = val;
}

//批量审核
const batchaudit = () => {
  ElMessageBox.confirm(
    '确定审核通过该费用吗？',
    '审核通过',
    {
      confirmButtonText: '确定',
      type: 'info',
      center: true,
      confirmButtonClass: 'el-button--primary',
    }
  )
    .then(() => {
      auditSuccess(sysUpAndDownList.value)
    })
}
//批量驳回
const batchrejected = () => {
  ElMessageBox.prompt('', '审核不通过', {
    confirmButtonText: '确定',
    type: 'warning',
    center: true,
    inputType: "textarea",
    inputPlaceholder: "请输入不通过原因",
  })
    .then(({ value }) => {
      auditFailed(sysUpAndDownList.value, value)
    })
}
//单一审核回调
const auditOperation = (automatic: any, id: any) => {
  auditSuccess([id], automatic)
}
//单一驳回回调
const rejectOperation = (automatic: any, id: any, value: any) => {
  auditFailed([id], value, automatic)
}
const agreementQuery = () => {
  if (activeName.value == 'pendingReview') {
    findpage("0");
  } else if (activeName.value == 'pass') {
    findpage("1");
  } else {
    findpage("2");
  }
}
//审核不通过
const auditFailed = async (list: string[], value: string, automatic?: boolean) => {
  await api.agreementApi.auditFailed({ ids: list, reason: value, automatic: automatic }).then((res: any) => {
    if (res.code == '200') {
      findpage("0");
      findpage("1");
      findpage("2");
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      ruleFeeEditVisible.value = false;
      if (res.data) {
        let info = tableData1.value.find((val: any) => val.costId == res.data);
        agreemenUpdate(info)
      }
    }
  });
}
// 审核通过
const auditSuccess = async (list: string[], automatic?: boolean) => {
  await api.agreementApi.auditSuccess({ ids: list, automatic: automatic }).then((res: any) => {
    if (res.code == '200') {
      findpage("0");
      findpage("1");
      findpage("2");
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      ruleFeeEditVisible.value = false;
      if (res.data) {
        let info = tableData1.value.find((val: any) => val.costId == res.data);
        agreemenUpdate(info)
      }
    }
  });
}
const resetForm = () => {
  formInline.agreement = '';//协议信息
  formInline.productId = "";//归属
  formInline.rulesName = '';//保险公司id
  formInline.costRules = '';//协议类型
  formInline.agreementStatus = "";//有效状态
  formInline.auditStatus = "";//协议状态
  formInline.validState = "";
  formInline.effectiveTime = [];
  formInline.failureTime = [];
  if (activeName.value == 'pendingReview') {
    findpage("0");
  } else if (activeName.value == 'pass') {
    findpage("1");
  } else {
    findpage("2");
  }
}
const getDeptTree = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code == '200') {
      deptOptions.value = res.data;
    } else {
    }
  });
}
//选择协议弹窗
const ruleFeeEditVisible = ref(false);//编辑弹窗
const ruleFeeHeaderTitle = ref();//编辑弹窗title
const costitemEditInfo = ref();//编辑对象
const AgreementInfo = ref();//协议对象
const ruleInfo = ref();//规则对象

const handleClick = (pane: any) => {
  if (pane.props.name == 'pendingReview') {
    formInline.auditStatus = '0';
    findpage("0");
  } else if (pane.props.name == 'pass') {
    formInline.auditStatus = '1';
    findpage("1");
  } else {
    formInline.auditStatus = '2';
    findpage("2");
  }
}

</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

:deep(.el-dropdown-link) {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: var(--el-color-primary);
  cursor: pointer;
}

.el-inputs {
  width: 100% !important;
}

.Selection {
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .agreement {
    width: 40%;
    padding: 15px;
    border-right: 1px solid #dcdfe6;

    .agreementItem {
      padding: 10px;
      border-radius: 5px;

      &:hover {
        background: #f2f2f2;
      }
    }
  }

  .active {
    color: #1890ff;
    background: #f2f2f2;
  }

  .rule {
    width: 60%;
    padding: 15px;

    .white-space {
      display: inline-block;
      margin-bottom: 10px;
      white-space: normal;
    }
  }
}
</style>