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

<template>
  <div>
    <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="fields" :formInline="formInline" :onSearch="agreementQuery" :onReset="resetForm" />
      <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="true"
        :pageInfo="pageInfo" @getList="getList" @selectionChange="selectionChange">
        <template v-slot:table-title-btn>
          <el-dropdown placement="bottom-start">
            <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>
          <span class="col-108 ">
            已选: <span class="text-red">{{ sysUpAndDownList.length }}</span> 条
          </span>
        </template>
          <template #costDescribe="{ data, bodyCell }">
        <div class="whitespace-normal">{{ data.costDescribe }}</div>
      </template>
        <template v-slot:operation="scope">
          <el-button v-if="scope.operationData.auditStatus == '0'" type="primary" link
            @click="agreemenUpdate(scope.operationData.id)"> 审核
          </el-button>
          <el-button v-if="scope.operationData.auditStatus == '2' || scope.operationData.auditStatus == '1'"
            type="primary" link @click="agreemenUpdate(scope.operationData.id)"> 详情
          </el-button>
        </template>
      </ComplexTable>
    </PageMain>
    <!-- 费用编辑组件 -->
    <contactPersonFeeDialogEdit :ruleFeeVisible="ruleFeeEditVisible" :headerTitle="ruleFeeHeaderTitle"
      :costitemEditInfo="costitemEditInfo" @save="ruleFeeEditSave" @cancel="ruleFeeEditVisible = false"
      operationType="audit" @rejectOperation="rejectOperation" @auditOperation="auditOperation" />
  </div>
</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 contactPersonFeeDialogEdit from "../externalAgreement/agreement/components/contactPersonFeeDialogEdit.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);//列表数据
  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 activeName = ref('pendingReview')
const pendingReviewlength = ref(0);
const passlength = ref(0);//审核通过
const reviewRejectedlength = ref(0);
// 两个选项卡各自的数据和分页
const tableData1 = ref([]);//待审核
const tableData2 = ref([]);//审核通过
const tableData3 = ref([]);//审核不通过
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 tableData = computed(() => {
  return activeName.value === 'pendingReview' ? tableData1.value : activeName.value === 'pass' ? tableData2.value : tableData3.value;
});
const pageInfo = computed(() => {
  return activeName.value === 'pendingReview' ? pageInfoPending.value : activeName.value === 'pass' ? pageInfoPass.value : pageInfoRejected.value;
});
const sysUpAndDownList = ref<string[]>([])//选中id
const insurance_type = ref();
const valid_status = ref();
const audit_status = ref();
const is_enable = ref();
const route = useRoute();
const id = ref(route.query.id as string);//id参数

const formInline = reactive({
  agreement: '',//协议信息
  productId: "",//归属
  rulesName: '',//保险公司id
  costRules: '',//协议类型
  agreementStatus: "",//有效状态
  auditStatus: "0",//协议状态
  validState: "",
  effectiveTime: [],
  failureTime: [],
})
//表格字段数据
const fields = ref([
  { label: "所属协议", model: "agreement", type: "input", placeholder: "输入代码，名称，简称查找" },
  {
    label: "险种", model: "productId", type: "select", options: insurance_type,
  },
  {
    label: "承保规则", model: "rulesName", type: "input", placeholder: "输入业务规则查找",
  },
  {
    label: "费用规则", model: "costRules", type: "input", 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;
    }
  },
]);

//费用数据查询
function findpage(status: any) {
  formInline.auditStatus = status;
  // 根据状态使用对应的分页数据
  let currentPageInfo = status == '0' ? pageInfoPending.value : status == '1' ? pageInfoPass.value : pageInfoRejected.value;
  api.agreementApi.CostExternalFeePageList({ pages: currentPageInfo.pageNum, size: currentPageInfo.pageSize, ...formInline, auditStatus: status }).then((res: any) => {
    if (res.code == '200') {
      currentPageInfo.pageNum = res.data.current;
      currentPageInfo.pageSize = res.data.size;
      currentPageInfo.total = res.data.total;
      if (status == 0) {
        tableData1.value = res.data.records;
        pendingReviewlength.value = res.data.total;
      } else if (status == '1') {
        tableData2.value = res.data.records;
        passlength.value = res.data.total;
      }
      else {
        tableData3.value = res.data.records;
        reviewRejectedlength.value = res.data.total;
      }
    } else {
    }
  });
}

const columns = [
  {
    prop: "agreementAbbreviation", label: "协议信息", width: '300',
    formatter: (row: any) => {
      return `${row.agreementCode}\n${row.agreementAbbreviation}`
    }
  },
  { prop: "productName", label: "险种", width: '120', },
  {
    prop: "contactPerson", label: "对接人", width: '200', formatter: (row: any) => {
      return `${row.contactPerson} ${row.contactMobile}`
    }
  },
  {
    prop: "isInquiry", label: "是否现询", width: '120', formatter: (row: any) => {
      if (row.isInquiry == '0') {
        return '是'
      } else {
        return "否"
      }
    }
  },
  {
    prop: "auditMethod", label: "审核方式", width: '120', formatter: (row: any) => {
      if (row.auditMethod == '0') {
        return '自动审核'
      } else {
        return "手动审核"
      }
    }
  },
  { prop: "costDescribe", label: "费用描述", width: '500',component: 'customSlot',  },
  { prop: "priorityLevel", label: "优先级", width: '120', },
  {
    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: "auditStatus", label: "审核状态", width: '120', component: "Tag",
    formatter: (row: any) => {
      let name = getDict('audit_status').find(val => val.value == row.auditStatus).label
      if (name) {
        return { type: 'warning', text: name };
      }
    }
  },
  { prop: "effectiveTime", label: "生效时间", width: '200' },
  { prop: "failureTime", label: "失效时间", width: '200' },
  {
    prop: "costExternalTypeAdds", label: "交强险费用", width: '300', formatter: (row: any) => {
      let info = row.costExternalTypeAdds.find((val: any) => val.costType == '交强险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 出口留点：${info.keepPointRatio?.toFixed(2)}%`
      } else {
        return '-'
      }
    }
  },
  {
    prop: "costExternalTypeAdds", label: "商业险费用", width: '300', formatter: (row: any) => {
      let info = row.costExternalTypeAdds.find((val: any) => val.costType == '商业险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 出口留点：${info.keepPointRatio?.toFixed(2)}%`
      } else {
        return '-'
      }
    }
  },
  {
    prop: "costExternalTypeAdds", label: "驾意险费用", width: '300', formatter: (row: any) => {
      let info = row.costExternalTypeAdds.find((val: any) => val.costType == '驾意险');
      if (info) {
        return `入口：${info.inlet?.toFixed(2)}% 出口：${info.export?.toFixed(2)}%\n加投：${info.addThrow?.toFixed(2)}% 出口留点：${info.keepPointRatio?.toFixed(2)}%`
      } else {
        return '-'
      }
    }
  },
];
//分页事件
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 ruleFeeEditVisible = ref(false);
const ruleFeeHeaderTitle = ref();//编辑弹窗title
const costitemEditInfo = ref();
const agreemenUpdate = async (id: any) => {
  api.agreementApi.FeegetById(id).then((res: any) => {
    if (res.code == '200') {
      ruleFeeHeaderTitle.value = res.data.productName;
      costitemEditInfo.value = res.data;
      ruleFeeEditVisible.value = true;
    } else {
    }
  });
}
//费用编辑
const ruleFeeEditSave = (data: object) => {
  api.agreementApi.FeeupdateById(data).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      ruleFeeEditVisible.value = false;
      if (activeName.value == 'pendingReview') {
        findpage(0);
      } else if (activeName.value == 'pass') {
        findpage(1);
      } else {
        findpage(2);
      }
    } else {
    }
  });
}
//多选事件
const selectionChange = (val: any) => {
  sysUpAndDownList.value = val;
}
//批量删除
const batchaudit = () => {
  ElMessageBox.confirm(
    '确定审核通过该费用吗？',
    '审核通过',
    {
      confirmButtonText: '确定',
      type: 'info',
      center: true,
      confirmButtonClass: 'el-button--primary',
    }
  )
    .then(() => {
      ExternalauditSuccess(sysUpAndDownList.value)
    })

}
//批量驳回
const batchrejected = () => {
  ElMessageBox.prompt('', '审核不通过', {
    confirmButtonText: '确定',
    type: 'warning',
    center: true,
    inputType: "textarea",
    inputPlaceholder: "请输入不通过原因",
    inputPattern: /^[\u4e00-\u9fa5，。！？、；：“”‘’《》【】（）——]+$/,
    inputErrorMessage: '请输入中文',
  })
    .then(({ value }) => {
      ExternalauditFailed(sysUpAndDownList.value, value)
    })
}
//单一审核回调
const auditOperation = (automatic: any, id: any) => {
  ExternalauditSuccess([id], automatic)
}
//单一驳回回调
const rejectOperation = (automatic: any, id: any, value: any) => {
  ExternalauditFailed([id], value, automatic)
}
const agreementQuery = () => {
  if (activeName.value == 'pendingReview') {
    findpage(0);
  } else if (activeName.value == 'pass') {
    findpage(1);
  } else {
    findpage(2);
  }
}
const ExternalauditSuccess = async (list: string[], automatic?: boolean) => {
  await api.agreementApi.ExternalauditSuccess({ 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: any = tableData1.value.find((val: any) => val.id == res.data);
        if (info) {
          agreemenUpdate(info.id)
        }
      }
    }
  });
}
const ExternalauditFailed = async (list: string[], value: string, automatic?: boolean) => {
  await api.agreementApi.ExternalauditFailed({ 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: any = tableData1.value.find((val: any) => val.id == res.data);
        if (info) {
          agreemenUpdate(info.id)
        }
      }
    }
  });
}
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 handleClick = (pane: any) => {
  activeName.value = pane.props.name;
  if (pane.props.name == 'pendingReview') {
    findpage(0);
  } else if (pane.props.name == 'pass') {
    findpage(1);
  } else {
    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;
}
</style>