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="57%" @close="close">
      <template #header>
        <h4>{{ props.headerTitle }}费用编辑</h4>
      </template>
      <template #default>
        <div class="rejectionReason flex a-start" v-if="costitemEditInfo.reviewDescription">
          <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>
          </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="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="2">
              <span class="strong m-right-20">规则条件</span>
            </ElCol>
            <ElCol :md="24" :lg="22">
              <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="inlet" label="入口比例" width="180" 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="180" 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>
        </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?.reviewDescription && props.operationType == 'audit'">
          <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 } from 'element-plus';
import { loadDicts } from '@/utils/composables/dictService';//字典组件
import { defineProps, defineEmits } from "vue";
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
  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);//是否连续审核
onMounted(async () => {
  await loadDicts(['insurance_type'])
})
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) => {
    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
    }
}
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
    }
}


// 禁用失效时间选择
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: "请输入不通过原因",
    inputPattern: /^[\u4e00-\u9fa5，。！？、；：“”‘’《》【】（）——]+$/,
    inputErrorMessage: '请输入中文',
  })
    .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>