tenant-Platform/src/views/quoteConfig/costManagement.vue

<template>
  <div>
    <PageMain class="vh100">
      <SearchForm :fields="fields" isOffset :formInline="formInline" :onSearch="agreementQuery" :onReset="resetForm" />
      <ComplexTable :tableData="tableData" :columns="columns" :showIndex="false" :columnwidth="200" :showSelect="true"
        :pageInfo="pageInfo" @getList="getList" @selectionChange="selectionChange" uniqueIdName="costId">
        <template v-slot:table-title-btn>
          <el-button type="primary" @click="agreementSelection()">
            添加费用
            <template #icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-button>
          <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="batchDel">删除</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchdisable">禁用</el-dropdown-item>
                <el-dropdown-item :disabled="!sysUpAndDownList.length" @click="batchenable">启用</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-slot:operation="scope">
          <el-button type="primary" link @click="agreemenUpdate(scope.operationData)"> 编辑
          </el-button>
          <el-dropdown placement="bottom-start" trigger="click">
            <span class="el-dropdown-link">
              更 多
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="enable(scope.operationData.costId)">启用</el-dropdown-item>
                <el-dropdown-item @click="disable(scope.operationData.costId)">禁用</el-dropdown-item>
                <el-dropdown-item @click="del(scope.operationData.costId)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </ComplexTable>
    </PageMain>
    <el-dialog :close-on-click-modal="false" v-model="agreementSelectionVisible" title="选择协议" width="50%">
      <div class="Selection flex ">
        <div class="agreement flex f-c">
          <div class="flex a-c">
            <el-input v-model="agreementQueryName" style="width: 240px;margin-right: 10px;"
              placeholder="输入协议名称，简称，编码查找" />
            <el-button type="primary" @click="agreement">查询</el-button>
          </div>
          <div class="flex f-c m-top-20" style="max-height: 400px;overflow-y: auto;">
            <div class="agreementItem flex f-c " :class="{ active: agritem.id == AgreementId }"
              v-for="(agritem, agrindex) in agreementList" :key="agrindex" @click="ItemClick(agritem)">
              <span class="m-btn-10">{{ agritem.agreementCode }}</span>
              <span>{{ agritem.agreementTitle }}-{{ agritem.agreementAbbreviation }}-{{ agritem.agreementName }}</span>
            </div>
          </div>
        </div>
        <div class="rule flex f-c">
          <span class="strong">承保规则</span>
          <div class="flex f-c m-top-20" style="max-height: 400px;overflow-y: auto;">
            <el-radio-group v-model="ruleId">
              <div class="flex f-c  ">
                <el-radio :value="item.id" v-for="(item, index) in ruleList" :key="index" @change="ruleItemclick"
                  style="margin: 20px 0;">
                  <p class="white-space">{{ item.ruleDescription }}</p>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="border-[#0083FF] color-[#0083FF]" plain
            @click="agreementSelectionVisible = false">取消</el-button>
          <el-button type="primary" @click="agreementSelectionConfirm" :disabled="!ruleInfo">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 规则费用抽屉组件 -->
    <ruleFeeDialog v-if="ruleFeeVisible" :ruleFeeVisible="ruleFeeVisible" :agreementInfo="AgreementInfo"
      :RulesInfo="ruleInfo" @save="ruleFeeSave" @cancel="ruleFeeVisible = false" :handlingFee="handlingFeeInfo" />
    <!-- 规则费用编辑组件 -->
    <ruleFeeDialogEdit :ruleFeeVisible="ruleFeeEditVisible" :headerTitle="ruleFeeHeaderTitle" :isHideFoot="true"
      :agreementInfo="AgreementInfo" :RulesInfo="ruleInfo" :costitemEditInfo="costitemEditInfo" @save="ruleFeeEditSave"
      @cancel="ruleFeeEditVisible = false" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import { loadDicts, getDict } from '@/utils/composables/dictService';//字典组件
import ruleFeeDialog from "./agreement/components/ruleFeeDialog.vue";
import ruleFeeDialogEdit from "./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();//列表数据
  getDeptTree();
  agreement();
  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 tableData = ref([
]);
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 route = useRoute();
const router = useRouter();
const id = ref(route.query.id as string);//id参数
const pageInfo = ref({
  pageNum: 1,
  pageSize: 20,
  sizes: [10, 20, 30, 40, 50],
  total: 100,
});
const formInline = reactive({
  agreement: '',//协议信息
  productId: "",//归属
  rulesName: '',//保险公司id
  costRules: '',//协议类型
  costRulesList: [],//协议类型
  agreementStatus: "",//有效状态
  auditStatus: "",//协议状态
  validState: "",
  effectiveTime: [],
  failureTime: [],
  updateTimeArr: [],
  companyId: [],
  contactPerson: "",
})

// 保险公司
let companyOption = ref([])
const initCompany = () => {
  // api.projectApi.getCompanyList().then(res => {
  api.insuranceApi.leftList('').then((res: any) => {
    if (res.code == 200) {
      companyOption.value = res.data.map(item => {
        return {
          label: item.name,
          value: item.id
        }
      })
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

//表格字段数据
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: "costRulesList", type: "inputTag", placeholder: "输入费用描述关键字查找",
  },
  {
    label: "费用状态", model: "agreementStatus", type: "select", placeholder: "选择状态", options: is_enable,
  },
  {
    label: "审核状态", model: "auditStatus", type: "select", placeholder: "选择状态", options: audit_status,
  },
  {
    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: "companyId", type: "select", placeholder: "选择保险公司", options: companyOption, filterable: true
  },
  {
    label: "对接人", model: "contactPerson", type: "input", placeholder: "输入对接人",
  },
  {
    label: "修改时间", model: "updateTimeArr", type: "date", dateType: "datetimerange", startplaceholder: "开始时间", endplaceholder: "结束时间",
    onChange: (value: any) => {
      formInline.updateTimeArr = value;
    }
  },
]);

//费用数据查询
function findpage() {
  api.agreementApi.queryByFeePage({ pages: pageInfo.value.pageNum, size: pageInfo.value.pageSize, ...formInline }).then((res: any) => {
    if (res.code == '200') {
      tableData.value = res.data.records;
      pageInfo.value.pageNum = res.data.current;
      pageInfo.value.pageSize = res.data.size;
      pageInfo.value.total = res.data.total;
    } else {
    }
  });
}
//协议列表查询
function agreement() {
  api.agreementApi.agreementList({ pages: pageInfo.value.pageNum, size: 99999, searchValue: agreementQueryName.value }).then((res: any) => {
    if (res.code == '200') {
      agreementList.value = res.data.records;
    } else {
    }
  });
}
const columns = [
  { prop: "companyName", label: "保险公司", width: '120', },
  {
    prop: "agreementAbbreviation", label: "协议信息", width: '300',
    formatter: (row: any) => {
      return `${row.agreementCode}\n${row.agreementTitle}-${row.agreementAbbreviation}-${row.agreementName ?? ''}`
    }
  },
  {
    prop: "ruleDescription", label: "承保规则", width: '500',
  },
  { prop: "productName", label: "险种", width: '120', },
  {
    prop: "costRules", label: "费用规则", width: '500',
  },
  {
    prop: "costDescribe", label: "费用描述", width: '500',
  },
  {
    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 };
      }
    }
  },
  { prop: "dockingPerson", label: "对接人", width: '100' },
  { prop: "effectiveTime", label: "生效时间", width: '200' },
  { prop: "failureTime", label: "失效时间", width: '200' },
  { prop: "updateTime", label: "修改时间", width: '200' },
  {
    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)}%`
      } 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)}%`
      } 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)}%`
      } else {
        return '-';
      }
    }
  },
];
//分页事件
function getList(item: PageInfo) {
  pageInfo.value.pageNum = item.pageNum;
  pageInfo.value.pageSize = item.pageSize;
  findpage();

};

const agreemenUpdate = async (item: any) => {
  let obj = agreementList.value.find(sub => sub.agreementCode === item.agreementCode)
  ruleFeeHeaderTitle.value = item.productName;
  AgreementInfo.value = { agreementCode: item.agreementCode, agreementTitle: item.agreementAbbreviation, companyId: obj?.companyId };
  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;
    }
  });
}
const ruleFeeEditSave = (data: object) => {
  api.agreementApi.AgreementFeeupdate(data).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      ruleFeeEditVisible.value = false;
      findpage();
    } 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 disable = (value: string) => {
  console.log(value)
  ElMessageBox.confirm(
    '确定要禁用该协议吗，禁用后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否禁用？',
    '禁用协议',
    {
      confirmButtonText: '确定禁用',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      sysUpAndDown(false, [value]);
    })
}
//启用
const enable = (value: string) => {
  sysUpAndDown(true, [value]);
}
const del = (value: string) => {
  ElMessageBox.confirm(
    '确定要删除该协议吗，删除后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否删除？',
    '删除协议',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.agreementApi.AgreementFeedeleteByIds([value]).then((res: any) => {
        if (res.code == '200') {
          findpage()
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
          // router.push({
          //   name: 'reload',
          // })
        }
      });
    })
}
//批量删除
const batchDel = () => {
  ElMessageBox.confirm(
    '确定要删除该协议吗，删除后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否删除？',
    '删除协议',
    {
      confirmButtonText: '确定删除',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(() => {
      api.agreementApi.deleteByIds(sysUpAndDownList.value).then((res: any) => {
        if (res.code == '200') {
          ElMessage({
            type: 'success',
            message: res.msg,
            plain: true,
          })
          router.push({
            name: 'reload',
          })
        }
      });
    })

}
//批量禁用
const batchdisable = () => {
  ElMessageBox.confirm(
    '确定要禁用该协议吗，禁用后，该协议不在支持报价出单，并且已核保待缴费，待支付的订单，都将失效，请确认是否禁用？',
    '禁用协议',
    {
      confirmButtonText: '确定禁用',
      type: 'error',
      center: true,
      confirmButtonClass: 'el-button--danger',
    }
  )
    .then(async () => {
      await sysUpAndDown(false, undefined);
    })
    .catch(() => {
    })


}
//批量启用
const batchenable = async () => {
  await sysUpAndDown(true, undefined);
}
const agreementQuery = () => {
  findpage();
}
const sysUpAndDown = async (type: boolean, list?: string[]) => {
  await api.agreementApi.AgreementFeeEnableByIds(type, list ? list : sysUpAndDownList.value).then((res: any) => {
    if (res.code == '200') {
      findpage();
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
    }
  });
}
const resetForm = () => {
  formInline.agreement = '';//协议信息
  formInline.productId = "";//归属
  formInline.rulesName = '';//保险公司id
  formInline.costRules = '';//协议类型
  formInline.costRulesList = [];//协议类型
  formInline.agreementStatus = "";//有效状态
  formInline.auditStatus = "";//协议状态
  formInline.validState = "";
  formInline.effectiveTime = [];
  formInline.failureTime = [];
  formInline.companyId = [];
  formInline.contactPerson = "";
  formInline.updateTimeArr = [];
  findpage();
}
const getDeptTree = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code == '200') {
      deptOptions.value = res.data;
    } else {
    }
  });
}
//选择协议弹窗
const agreementSelectionVisible = ref(false);
const ruleFeeVisible = ref(false);
const ruleFeeEditVisible = ref(false);//编辑弹窗
const ruleFeeHeaderTitle = ref();//编辑弹窗title
const costitemEditInfo = ref();//编辑对象
const AgreementInfo = ref();//协议对象
const ruleInfo = ref();//规则对象
const AgreementId = ref();//规则id
const ruleId = ref();//规则id
const ruleList = ref();//协议规则列表
const agreementSelection = () => {
  AgreementId.value = '';
  ruleList.value = []
  agreementSelectionVisible.value = true;
}
let handlingFeeInfo = ref({})

const ItemClick = (item: any) => {
  AgreementInfo.value = item;
  AgreementId.value = item.id;
  ruleId.value = '';
  api.agreementApi.agreementRulesList(AgreementId.value).then((res: any) => {
    if (res.code == '200') {
      ruleList.value = res.data;
    }
  });
  api.agreementApi.agreementGet(AgreementId.value).then((res: any) => {
    if (res.code == '200') {
      handlingFeeInfo.value = { jqEntranceFeeRatio: res.data.agreement.jqEntranceFeeRatio, syEntranceFeeRatio: res.data.agreement.syEntranceFeeRatio, jyEntranceFeeRatio: res.data.agreement.jyEntranceFeeRatio };
    } else {
    }
  });
}
//
const ruleItemclick = (value: string | number | boolean | undefined) => {
  let info = ruleList.value.find((val: any) => val.id == value);
  ruleInfo.value = info;
}
const agreementSelectionConfirm = () => {
  if (!AgreementId.value) {
    ElMessage.error('请选择协议')
    return
  }
  if (!ruleId.value) {
    ElMessage.error('请选择规则')
    return
  }
  agreementSelectionVisible.value = false;
  ruleFeeVisible.value = true;
}
//规则弹窗回调方法
const ruleFeeSave = (data: object) => {
  api.agreementApi.ptlAgreementCostsave(data).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
      ruleFeeVisible.value = false;
      findpage();
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
        plain: true,
      })
    }
  });
}
</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>