tenant-Platform/src/views/quoteConfig/agreement/components/ruleFeeDialogEdit.vue

<!-- 模板区域 -->
<template>
  <div>
    <el-drawer v-model="props.ruleFeeVisible" :direction="direction" :close-on-click-modal="true" size="62%"
      @close="close">
      <template #header>
        <h4>{{ '费用编辑' }}</h4>
      </template>
      <template #default>
        <div class="rejectionReason flex a-start" v-if="costitemEditInfo.approved === 2">
          <el-icon color="red" class="m-right-20">
            <CircleClose />
          </el-icon>
          <div class="flex f-c">
            <span class="strong" style="color: #333;">审核不通过</span>
            <span>审核原因：{{ costitemEditInfo.reviewDescription }}</span>
            <div class="flex a-c ">
              <span class="m-right-20">审核人：{{ costitemEditInfo.auditPerson }}</span>
              <span>审核时间：{{ costitemEditInfo.auditTime }}</span>
            </div>
            <span class="primary" v-if="costitemEditInfo.approved == 2" @click="disabledShow = false"
              style="color: #409eff;">
              修改并重提交
            </span>
          </div>
        </div>
        <div class="agreement ">
          <ElRow :gutter="20">
            <ElCol :md="10"><span><span style="color: #666;">协议号：</span> {{ props.agreementInfo.agreementCode }}</span>
            </ElCol>
            <ElCol :md="10"><span><span style="color: #666;">协议名称：</span>{{ props.agreementInfo.agreementTitle }}</span>
            </ElCol>
            <ElCol :md="24">
              <p><span style="color: #666;">核保规则：</span>{{ props.RulesInfo.ruleDescription }}</p>
            </ElCol>
          </ElRow>
          <ElRow :gutter="20" class="m-top-20">
            <el-form :model="costitemEditInfo" ref="editFormRefs" label-width="80px" style="width: 100%;"
              :disabled="disabledShow" class="flex a-c f-wrap" :size="fromSize" :rules="editRules">
              <ElCol :md="24" :lg="24">
                <el-form-item label="险种" prop="productId">
                  <el-radio-group v-model="costitemEditInfo.productId"
                    @change="costitemEditInfo.productName = ruleFeeinfo.find(v => v.value === costitemEditInfo.productId).label">
                    <el-radio-button v-for="item in ruleFeeinfo" :key="item.id" :label="item.label"
                      :value="item.value" />
                  </el-radio-group>
                </el-form-item>
              </ElCol>
              <ElCol :md="24" :lg="12">
                <el-form-item label="生效时间" prop="effectiveTime">
                  <el-date-picker v-model="costitemEditInfo.effectiveTime" style="width: 100%;" type="datetime"
                    placeholder="选择生效时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    time-format="HH:mm:ss" @change="handleStartDateChange($event)" />
                </el-form-item>
              </ElCol>
              <ElCol :md="24" :lg="12">
                <el-form-item label="失效时间" prop="failureTime">
                  <el-date-picker v-model="costitemEditInfo.failureTime" style="width: 100%;" type="datetime"
                    placeholder="选择失效时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    time-format="HH:mm:ss" :disabled-date="(date: any) => disabledEndDate(date)" />
                </el-form-item>
              </ElCol>
              <ElCol :md="24" :lg="12">
                <el-form-item label="审核方式" prop="auditMethod">
                  <el-select v-model="costitemEditInfo.auditMethod" placeholder="选择审核方式">
                    <el-option label="自动审核" value="0" />
                    <el-option label="手动审核" value="1" />
                  </el-select>
                </el-form-item>
              </ElCol>
              <ElCol :md="24" :lg="12">
                <el-form-item label="优先级" prop="priorityLevel">
                  <el-input-number style="width: 100%" v-model="costitemEditInfo.priorityLevel" placeholder="请填写优先级" />
                </el-form-item>
              </ElCol>
              <ElCol :md="24" :lg="24">
                <el-form-item label="费用描述" prop="costDescribe">
                  <el-input v-model="costitemEditInfo.costDescribe" maxlength="500" placeholder="请输入费用描述"
                    show-word-limit type="textarea" />
                </el-form-item>
              </ElCol>
            </el-form>
          </ElRow>
          <!-- 规则选择容器 -->
          <div class="flex a-start">
            <ElCol :md="24" :lg="3">
              <span class="strong m-right-20">规则条件</span>
            </ElCol>
            <ElCol :md="24" :lg="21">
              <el-button type="primary" :disabled="disabledShow" plain @click="addRules">
                添加条件
                <template #icon>
                  <el-icon>
                    <Plus />
                  </el-icon>
                </template>
              </el-button>
              <rule-Condition-Container :rulesAttrList="costitemEditInfo.ruleConditions" @Del="rulesAttrDel"
                @selectChange="rulesAttrselectChange" :disabled="disabledShow" />
            </ElCol>
          </div>
          <el-table :data="costitemEditInfo.ptlAgreementCostTypeList" class="m-top-20" style="width: 100%;" border
            :header-cell-style="{ 'background-color': '#F7F7F9', 'border-bottom': '1px solid #EEF1F6', 'font-size': '15px', 'color': '#333', 'padding': '10px 0' }">
            <template #empty>
              <div class="flex f-c a-c ">
                <img src="../../../../assets/images/empty.png" alt="">
                <span style="font-size: 14px;color: #909399;">暂无数据</span>
              </div>
            </template>
            <el-table-column prop="costType" label="类型"></el-table-column>
            <el-table-column prop="costType" label="入口手续费比例" width="150" align="center"
              v-if="costitemEditInfo.jqEntranceFeeRatio || costitemEditInfo.syEntranceFeeRatio || costitemEditInfo.jyEntranceFeeRatio">
              <template #default="scope">
                <span v-if="scope.row.costType == '交强险'">{{ costitemEditInfo.jqEntranceFeeRatio }}%</span>
                <span v-if="scope.row.costType == '商业险'">{{ costitemEditInfo.syEntranceFeeRatio }}%</span>
                <span v-if="scope.row.costType == '驾意险'">{{ costitemEditInfo.jyEntranceFeeRatio }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="inlet" label="入口比例" width="160" align="center">
              <template #default="scope">
                <el-input-number v-model="scope.row.inlet" :disabled="disabledShow" :precision="2"
                  controls-position="right" style="width: 100%;" :min="0" :max="100" @change="handelRK(scope)">
                  <template #suffix>%</template>
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="export" label="出口比例" width="160" align="center">
              <template #default="scope">
                <el-input-number v-model="scope.row.export" :disabled="disabledShow" :precision="2"
                  controls-position="right" style="width: 100%;" :min="0" :max="100" @change="handelCK(scope)">
                  <template #suffix>%</template>
                </el-input-number>
              </template>
            </el-table-column>
            <!--            <el-table-column prop="commission" label="手续费比例" width="180" align="center">
              <template #default="scope">
                <el-input-number v-model="scope.row.commission" :disabled="disabledShow" :precision="2"
                  controls-position="right" style="width: 100%;" :min="0" :max="100">
                  <template #suffix>%</template>
                </el-input-number>
              </template>
            </el-table-column>-->
            <el-table-column prop="addThrow" label="加投比例" width="180" align="center">
              <template #default="scope">
                <el-input-number v-model="scope.row.addThrow" :disabled="disabledShow" :precision="2"
                  controls-position="right" style="width: 100%;" :min="0" :max="100" @change="handelJT(scope)">
                  <template #suffix>%</template>
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="keepPointRatio" label="留点比例" width="180" align="center">
              <template #default="scope">
                <el-input-number v-model="scope.row.keepPointRatio" :disabled="disabledShow" :precision="2"
                  controls-position="right" style="width: 100%;" :min="0" :max="100" @change="handelLD(scope)">
                  <template #suffix>%</template>
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="exportKeepPointRatio" label="出口留点比例" width="180" align="center">
              <template #default="scope">
                <el-input-number v-model="scope.row.exportKeepPointRatio" :disabled="disabledShow" :precision="2"
                  controls-position="right" style="width: 100%;" :min="0" :max="100">
                  <template #suffix>%</template>
                </el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </template>
      <template #footer>
        <div class="flex a-c j-c" v-if="!disabledShow">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save(editFormRefs)">提交审核</el-button>
        </div>
        <div class="flex f-c " v-if="costitemEditInfo?.approved === 0 && props.operationType == 'audit'">
          <!-- <div class="flex f-c " v-if="!costitemEditInfo?.approved"> -->
          <el-checkbox v-model="automatic" label="审核后，自动跳支审核下一条费用" size="large" />
          <div class="flex a-c">
            <el-button @click="rejectOperation">审核驳回</el-button>
            <el-button type="primary" @click="auditOperation">审核通过</el-button>
          </div>
        </div>
      </template>
    </el-drawer>
    <!-- 规则条件弹窗 -->
    <RuleCondition ref="RuleConditionRefs" :ruleConditionVisible="ruleConditionVisible"
      @cancel="ruleConditionVisible = false" @save="ruleConditionSave" :attrIdList="ruleConditions" />

  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { ref, } from 'vue'
import { DrawerProps, ComponentSize, ElMessageBox, ElMessage } from 'element-plus';
import { loadDicts, getDict } from '@/utils/composables/dictService';//字典组件
const direction = ref<DrawerProps['direction']>('rtl')
const fromSize = ref<ComponentSize>('default')

let editFormRefs = ref()

let RuleConditionRefs = ref()

const props = defineProps<{
  ruleFeeVisible: boolean,
  agreementInfo: any,//协议信息
  RulesInfo: any,//费用信息
  costitemEditInfo: any,//编辑回显数据
  headerTitle?: string,//抽屉name
  titleType?: string,//抽屉title类型
  operationType?: string,//操作类型
}>();
const emits = defineEmits(["cancel", 'save', 'auditOperation', 'rejectOperation']);
const ruleConditions = ref();
const ruleConditionVisible = ref(false);//规则条件弹窗
const costitemEditInfo = ref();//编辑费用数据
const disabledShow = ref(false);//是否可编辑
const automatic = ref(false);//是否连续审核
const ruleFeeinfo = ref();//险种列表
onMounted(async () => {
  await loadDicts(['insurance_type'])
  const dict = getDict('insurance_type');
  ruleFeeinfo.value = dict
})
watch(props, () => {
  if (props.costitemEditInfo) {
    costitemEditInfo.value = props.costitemEditInfo;
    ruleConditions.value = props.costitemEditInfo.ruleConditions;
  }
  //审核和驳回操作不可编辑
  if (props.operationType == 'audit' || props.operationType == 'rejected') {
    disabledShow.value = true;
  } else {
    disabledShow.value = false;

  }
})

let editRules = ref({
  effectiveTime: [
    { required: true, trigger: 'change', message: '请选择生效时间' },
  ],
  failureTime: [
    { required: true, trigger: 'change', message: '请选择失效时间' },
  ],
  auditMethod: [
    { required: true, trigger: 'change', message: '请选择审核方式' },
  ],
  priorityLevel: [
    { required: true, trigger: 'blur', message: '请填写优先级' },
  ]
})

const addRules = () => {
  ruleConditionVisible.value = true
  RuleConditionRefs.value.ruleAttr(props.agreementInfo.companyId)
}

const handelRK = (scope) => {
  //  // 获取当前险种对应的入口手续费比例
  //  let entranceFeeRatio = 0;
  //   if (scope.row.costType == '交强险') {
  //     entranceFeeRatio = costitemEditInfo.value?.jqEntranceFeeRatio || 0;
  //   } else if (scope.row.costType == '商业险') {
  //     entranceFeeRatio = costitemEditInfo.value?.syEntranceFeeRatio || 0;
  //   } else if (scope.row.costType == '驾意险') {
  //     entranceFeeRatio = costitemEditInfo.value?.jyEntranceFeeRatio || 0;
  //   }

  //   // 检查入口比例是否小于入口手续费比例
  //   if (scope.row.inlet < entranceFeeRatio) {
  //     ElMessage({
  //       type: 'warning',
  //       message: `入口比例不能小于入口手续费比例(${entranceFeeRatio}%)`,
  //       plain: true,
  //     });
  //     scope.row.inlet = entranceFeeRatio;
  //     return;
  //   }

  if (scope.row.export && scope.row.addThrow || scope.row.export && scope.row.addThrow === 0) {
    scope.row.keepPointRatio = scope.row.inlet + scope.row.addThrow - scope.row.export
  }
  if (scope.row.export && scope.row.keepPointRatio) {
    scope.row.addThrow = scope.row.export + scope.row.keepPointRatio - scope.row.inlet
  }
  if (scope.row.keepPointRatio && scope.row.addThrow || scope.row.keepPointRatio && scope.row.addThrow === 0) {
    scope.row.export = scope.row.inlet + scope.row.addThrow - scope.row.keepPointRatio
  }
}
const handelCK = (scope) => {
  if (scope.row.inlet && scope.row.addThrow || scope.row.inlet && scope.row.addThrow === 0) {
    scope.row.keepPointRatio = scope.row.inlet + scope.row.addThrow - scope.row.export
  }
  if (scope.row.inlet && scope.row.keepPointRatio) {
    scope.row.addThrow = scope.row.export + scope.row.keepPointRatio - scope.row.inlet
  }
  if (scope.row.keepPointRatio && scope.row.addThrow || scope.row.keepPointRatio && scope.row.addThrow === 0) {
    scope.row.inlet = scope.row.export + scope.row.keepPointRatio - scope.row.addThrow
  }
  if (scope.row.keepPointRatio) {
    scope.row.exportKeepPointRatio = scope.row.export - scope.row.keepPointRatio
  }
}
const handelJT = (scope) => {
  if (scope.row.inlet && scope.row.export) {
    scope.row.keepPointRatio = scope.row.inlet + scope.row.addThrow - scope.row.export
  }
  if (scope.row.inlet && scope.row.keepPointRatio) {
    scope.row.export = scope.row.addThrow + scope.row.inlet - scope.row.keepPointRatio
  }
  if (scope.row.keepPointRatio && scope.row.export) {
    scope.row.inlet = scope.row.export + scope.row.keepPointRatio - scope.row.addThrow
  }
}
const handelLD = (scope) => {
  if (scope.row.inlet && scope.row.export) {
    scope.row.addThrow = scope.row.export + scope.row.keepPointRatio - scope.row.inlet
  }
  if (scope.row.inlet && scope.row.addThrow || scope.row.inlet && scope.row.addThrow === 0) {
    scope.row.export = scope.row.addThrow + scope.row.inlet - scope.row.keepPointRatio
  }
  if (scope.row.addThrow && scope.row.export || scope.row.addThrow === 0 && scope.row.export) {
    scope.row.inlet = scope.row.export + scope.row.keepPointRatio - scope.row.addThrow
  }
  if (scope.row.export) {
    scope.row.exportKeepPointRatio = scope.row.export - scope.row.keepPointRatio
  }
}


// 禁用失效时间选择
const disabledEndDate = (date: any,) => {
  let start = costitemEditInfo.value.effectiveTime;
  const startDate = new Date(start);
  return startDate && date < startDate; // 禁用小于生效时间的日期
};

// 处理生效时间变化
const handleStartDateChange = (value: any,) => {
  let endDate = costitemEditInfo.value.failureTime;
  // 如果生效时间改变，检查失效时间是否需要更新
  if (endDate && new Date(endDate) < new Date(value)) {
    costitemEditInfo.value.failureTime = ''; // 清空失效时间
  }
};

//条件删除
const rulesAttrDel = (index: number) => {
  costitemEditInfo.value.ruleConditions.splice(index, 1)
}
//多选框事件数据格式处理
const rulesAttrselectChange = (item: any) => {
  costitemEditInfo.value.ruleConditions[item.index].min = "";
  item.e.map((ele: any) => {
    costitemEditInfo.value.ruleConditions[item.index].min += ele + ',';
  })
  // 去掉最后一个逗号
  if (costitemEditInfo.value.ruleConditions[item.index].min.endsWith(',')) {
    costitemEditInfo.value.ruleConditions[item.index].min = costitemEditInfo.value.ruleConditions[item.index].min.slice(0, -1);
  }
}
//获取到的规则条件列表数据
const ruleConditionSave = (list: string[]) => {//获取规则条件选中集合
  console.log('选中的数据', list)
  costitemEditInfo.value.ruleConditions = list;
  ruleConditions.value = list
  ruleConditionVisible.value = false;
}
const cancel = () => {
  emits("cancel")
}
const close = () => {
  emits("cancel")
}
const save = (formRef) => {
  if (!formRef) return
  if (formRef) {
    formRef.validate((valid) => {
      if (valid) {
        emits("save", costitemEditInfo.value)
      }
    })
  }
}



//审核驳回操作
const rejectOperation = () => {
  //驳回弹窗
  ElMessageBox.prompt('', '审核不通过', {
    confirmButtonText: '确定',
    type: 'warning',
    center: true,
    inputType: "textarea",
    inputPlaceholder: "请输入不通过原因",
  })
    .then(({ value }) => {
      emits("rejectOperation", automatic.value, costitemEditInfo.value.id, value)
    })
}
//审核通过操作
const auditOperation = () => {
  emits("auditOperation", automatic.value, costitemEditInfo.value.id)
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
:deep(.el-drawer__header) {
  padding-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  color: #333;
  border-bottom: 1px solid #f2f2f2;
}

.agreement {
  width: 100%;
  padding: 24px;
  font-size: 14px;
  color: #333;
  border-radius: 4px;

  p {
    margin: 0;
    margin-top: 10px;
  }
}

.feeItem {
  width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 8px;

  .header {
    padding: 12px 14px;

    .title {
      display: flex;

      &::before {
        display: inline-block;
        width: 4px;
        height: 18px;
        margin-right: 20px;
        content: "";
        background-color: #0083ff;
      }
    }
  }
}

.rejectionReason {
  padding: 15px;
  background: #fff1f0;
  border: 1px solid #ffa39e;
  border-radius: 5px;

  span {
    margin-bottom: 10px;
    color: #666;
  }
}

:deep(.ruleFeetabs>.el-tabs__content) {
  position: static;
}
</style>