tenant-Platform/src/views/externalAgreement/agreement/components/contactPersonFeeDialogEdit.vue

<!-- 模板区域 -->
<template>
  <div>
    <el-drawer v-model="props.ruleFeeVisible" :direction="direction" :close-on-click-modal="false" size="50%"
      @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>
        <ElRow :gutter="20" class="m-top-20">
          <el-form :model="contactPersonEditInfo" label-width="120px" ref="contactPersonFormRef" :disabled="disabledShow" style="width: 100%;"
            :rules="feerules" class="flex a-c f-wrap" :size="fromSize">
            <ElCol :md="24" :lg="12">
              <el-form-item label="对接人姓名" prop="contactPerson">
                <el-input v-model="contactPersonEditInfo.contactPerson"  placeholder="请输入对接人姓名" />
              </el-form-item>
            </ElCol>
            <ElCol :md="24" :lg="12">
              <el-form-item label="对接人手机号" prop="contactMobile">
                <el-input v-model="contactPersonEditInfo.contactMobile" placeholder="请输入手机号" />
              </el-form-item>
            </ElCol>
            <ElCol :md="24" :lg="12">
              <el-form-item label="生效时间" prop="effectiveTime">
                <el-date-picker v-model="contactPersonEditInfo.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="contactPersonEditInfo.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="contactPersonEditInfo.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="isInquiry">
                <el-radio-group v-model="contactPersonEditInfo.isInquiry">
                  <el-radio value="0" size="large">是</el-radio>
                  <el-radio value="1" size="large">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </ElCol>
            <ElCol :md="24" :lg="24">
              <el-form-item label="费用描述" prop="costDescribe">
                <el-input v-model="contactPersonEditInfo.costDescribe" maxlength="500" placeholder="请输入费用描述"
                  show-word-limit type="textarea" />
              </el-form-item>
            </ElCol>
          </el-form>
        </ElRow>

        <el-table :data="contactPersonEditInfo.costExternalTypeAdds" 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">
                <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">
                <template #suffix>%</template>
              </el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="totalCost" label="总费用比例" width="180" align="center">
            <template #default="scope">
              <el-input-number v-model="scope.row.totalCost" :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="other" label="其他费用比例" width="180" align="center">
            <template #default="scope">
              <el-input-number v-model="scope.row.other" :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="level1" label="1级比例" width="180" align="center">
            <template #default="scope">
              <el-input-number v-model="scope.row.level1" :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="level5" label="5级比例" width="180" align="center">
            <template #default="scope">
              <el-input-number v-model="scope.row.level5" :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>
      </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(contactPersonFormRef)">提交审核</el-button>
        </div>
        <div class="flex f-c " v-if="!costitemEditInfo?.reviewDescription && disabledShow">
          <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>
  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { ref, } from 'vue'
import { DrawerProps, ComponentSize, FormInstance, FormRules, ElMessage,ElMessageBox } from 'element-plus';
import { defineProps, defineEmits } from "vue";
const direction = ref<DrawerProps['direction']>('rtl')
const fromSize = ref<ComponentSize>('default')
const props = defineProps<{
  ruleFeeVisible: boolean,
  headerTitle?: string,
  costitemEditInfo?: any,
  operationType?: string,//操作类型

}>();
const emits = defineEmits(["cancel", 'save', 'auditOperation', 'rejectOperation']);
watch(props, () => {
  contactPersonEditInfo.value = props.costitemEditInfo;
  //审核和驳回操作不可编辑
  if (props.operationType == 'audit' || props.operationType == 'rejected') {
    disabledShow.value = true;
  } else {
    disabledShow.value = false;

  }
})
const disabledShow = ref(false);
const automatic = ref(false);//是否连续审核
const contactPersonEditInfo = ref();//规则费用集合
const contactPersonFormRef = ref<FormInstance>()
const feerules = ref<FormRules>({
  contactPerson: [
    { required: true, trigger: 'blur', message: '请输入对接人姓名' },
  ],
  contactMobile: [
    { required: true, trigger: 'blur', message: '请输入手机号' },
  ],
  effectiveTime: [
    { required: true, trigger: 'change', message: '请选择生效时间' },
  ],
  failureTime: [
    { required: true, trigger: 'change', message: '请选择失效时间' },
  ],
  auditMethod: [
    { required: true, trigger: 'change', message: '请选择审核方式' },
  ],
  isInquiry: [
    { required: true, trigger: 'change', message: '请选择是否线询' },
  ],
})
// 禁用失效时间选择
const disabledEndDate = (date: any) => {
  let start = contactPersonEditInfo.value.effectiveTime;
  const startDate = new Date(start);
  return startDate && date < startDate; // 禁用小于生效时间的日期
};

// 处理生效时间变化
/**
 * @param index  险种下标
 * @param Costindex 费用下标
 */
const handleStartDateChange = (value: any) => {
  let endDate = contactPersonEditInfo.value.failureTime;
  // 如果生效时间改变，检查失效时间是否需要更新
  if (endDate && new Date(endDate) < new Date(value)) {
    contactPersonEditInfo.value.failureTime = ''; // 清空失效时间
  }
};
const cancel = () => {
  emits("cancel")
}
const close = () => {
  emits("cancel")
}
const save = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      emits('save', contactPersonEditInfo.value)
    } else {
      ElMessage({
        type: 'error',
        message: '信息不完整',
        plain: true,
      })
    }
  })
}
//审核驳回操作
const rejectOperation = () => {
  //驳回弹窗
  ElMessageBox.prompt('', '审核不通过', {
    confirmButtonText: '确定',
    type: 'warning',
    center: true,
    inputType: "textarea",
    inputPlaceholder: "请输入不通过原因",
    inputPattern: /^[\u4e00-\u9fa5，。！？、；：“”‘’《》【】（）——]+$/,
    inputErrorMessage: '请输入中文',
  })
    .then(({ value }) => {
      emits("rejectOperation",automatic.value,contactPersonEditInfo.value.id,value)
    })
}
//审核通过操作
const auditOperation = () => {
  emits("auditOperation", automatic.value,contactPersonEditInfo.value.id)
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
:deep(.el-drawer__header) {
  padding-top: 0;
  margin-bottom: 0;
  border-bottom: 1px solid #f2f2f2;
}

.agreement {
  width: 100%;
  padding: 15px;
  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>