tenant-Platform/src/views/externalAgreement/agreement/agreementAdd.vue

<template>
  <div>
    <PageMain style="padding: 20px;margin-bottom: 100px;">
      <ElRow :gutter="60">
        <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
          <span class="strong">协议信息</span>
        </ElCol>
        <el-form :model="agreementFrom" label-width="120px" :rules="agreementFromRules" label-position="top"
          ref="agreementFromRef" style="max-width: 100%;" class="flex a-c f-wrap" :size="fromSize">
          <ElCol :md="24" :lg="6">
            <el-form-item label="协议名称" prop="agreementTitle">
              <el-input v-model="agreementFrom.agreementTitle" placeholder="输入协议名称" maxlength="50"
                show-word-limit></el-input>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="协议简称" prop="agreementAbbreviation">
              <el-input v-model="agreementFrom.agreementAbbreviation" placeholder="输入简称" maxlength="50"
                show-word-limit />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="协议生效时间" prop="startDate">
              <el-date-picker v-model="agreementFrom.startDate" 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" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="协议失效时间" prop="endDate">
              <el-date-picker v-model="agreementFrom.endDate" 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="disabledEndDate" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="是否含增值税结算" prop="withTax">
              <el-radio-group v-model="agreementFrom.withTax">
                <el-radio-button :label="item.label" :value="item.value" v-for="(item, index) in getDict('with_tax')"
                  :key="index" />
              </el-radio-group>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="结算周期" prop="moneyTime">
              <span style="margin: 0  20px;font-size: 18px;">T</span>
              <el-input-number v-model="agreementFrom.moneyTime" :min="1" :max="999" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12"></ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="协议描述" prop="agreementName">
              <el-input v-model="agreementFrom.agreementName" placeholder="请输入" type="textarea" maxlength="500"
                show-word-limit />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
            <ElDivider></ElDivider>
            <span class="strong">其他信息</span>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="协议归属" prop="deptId">
              <el-cascader v-model="agreementFrom.deptId" style="width: 100%;" filterable clearable
                :options="deptOptions" :props="parentIdprops" :show-all-levels="false" @change="deptIdChange" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="保险公司" prop="companyId">
              <el-cascader v-model="agreementFrom.companyId" style="width: 100%;" filterable clearable
                :options="companyOptions" :props="companyIdprops" :show-all-levels="false" @change="companyIdChange" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="协议类型" prop="agreementType">
              <el-select v-model="agreementFrom.agreementType" placeholder="选择协议类型">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in getDict('agreement_type')"
                  :key="index" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="6">
            <el-form-item label="管理人" prop="custodianId">
              <el-input v-model="managerName" @click="managerModalVisible = true">{{ agreementFrom.custodianId
              }}</el-input>
            </el-form-item>
          </ElCol>
        </el-form>
      </ElRow>

    </PageMain>
    <FixedActionBar>
      <ElButton type="primary" @click="submitForm(agreementFromRef)">
        保存
      </ElButton>
      <ElButton @click="router.back()">
        取消
      </ElButton>
    </FixedActionBar>
    <!-- 选择管理人 -->
    <managerModal :managerModal="managerModalVisible" :deptOptions="deptOptions" :managerlist="managerlist"
      @save="managerModalsave" @NodeClick="managerModalNodeClick" @query="managerModalQuery" @cancel="managerModalVisible = false" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { FormRules, FormInstance, ComponentSize, ElMessage } from 'element-plus';
import { loadDicts, getDict } from '@/utils/composables/dictService';//字典组件
import { useRoute, useRouter } from 'vue-router';
import managerModal from "./components/managerModal.vue";
import api from '@/api';
const parentIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'name',
  checkStrictly: true,
}
const companyIdprops = {
  expandTrigger: 'hover' as const,
  value: 'id',
  label: 'nameSimple',
  checkStrictly: true,
}
interface AgreementForm {
  id?: string; // 协议 ID
  agreementTitle: string; // 协议名称
  agreementAbbreviation: string; // 协议简称
  startDate: string; // 生效时间，通常为 ISO 格式的日期字符串
  endDate: string; // 失效时间，通常为 ISO 格式的日期字符串
  withTax: string; // 是否含增值税结算
  moneyTime: any; // 结算周期
  agreementName: string; // 协议描述
  deptId: string; // 协议归属
  companyId: string; // 保险公司 ID
  agreementType: string; // 协议类型
  custodianId: string; // 管理人 ID

}
const route = useRoute();
const router = useRouter();
const id = ref(route.query.id as string);//id参数
const deptOptions = ref([])//机构数据
const companyOptions = ref()//保险公司数据
const agreementFromRef = ref<FormInstance>()
const fromSize = ref<ComponentSize>('large')
const agreementFrom: AgreementForm = reactive({
  id: "",
  agreementTitle: "",//协议名称
  agreementAbbreviation: "",//协议简称
  startDate: "",//生效时间
  endDate: "",//失效时间
  withTax: "",//是否含增值税结算
  moneyTime: 0,//结算周期
  agreementName: "",//协议描述
  deptId: "",//协议归属
  companyId: "",//保险公司id
  agreementType: "",//协议类型
  custodianId: "",//管理人id

})
const validatepassword = (_rule: any, value: any, callback: any) => {
  // 定义正则表达式，例如：只允许字母、数字，长度在4到10个字符之间
  const codeRegex = /^(?:(?:\+|00)86)?1\d{10}$/;
  // 判断是否为空
  if (!value) {
    return callback(new Error('请输入手机号'));
  }

  // 验证是否符合正则表达式
  if (!codeRegex.test(value)) {
    return callback(new Error('请输入正确的手机号'));
  }
  // 验证通过
  callback();
};

const agreementFromRules = ref<FormRules>({
  agreementTitle: [
    { required: true, trigger: 'blur', message: '请输入协议名称' },
  ],
  agreementAbbreviation: [
    { required: true, trigger: 'blur', message: '请输入协议简称' },
  ],
  startDate: [
    { required: true, trigger: 'change', message: '选择生效时间' },
  ],
  endDate: [
    { required: true, trigger: 'change', message: '选择失效时间' },
  ],
  withTax: [
    { required: true, trigger: 'change', message: '请选择是否含增值税结算' },
  ],
  moneyTime: [
    { required: true, trigger: 'blur', message: '请输入结算周期' },
  ],
  agreementName: [
    { required: true, trigger: 'blur', message: '请输入协议描述' },
  ],
  deptId: [
    { required: true, trigger: 'change', message: '请选择协议归属' },
  ],
  companyId: [
    { required: true, trigger: 'change', message: '请选择保险公司' },
  ],
  agreementType: [
    { required: true, trigger: 'blur', message: '请选择协议类型' },
  ],
  custodianId: [
    { required: true, trigger: 'blur', message: '请选择管理人' },
  ],
  dockingPerson: [
    { required: true, trigger: 'blur', message: '请输入对接人' },
  ],
  dockingPhone: [
    { required: true, trigger: 'blur', message: '请输入对接人手机号' },
    { validator: validatepassword, trigger: 'blur' }
  ],
  attributionId: [
    { required: true, trigger: 'change', message: '请选择出单账号' },
  ],

});
onBeforeMount(async () => {
  await loadDicts(['agreement_type', 'with_tax']);//获取多个字典
  getDeptTree();//归属机构
  company();//获取保险公司列表
  if (id.value) {
    agreementFrom.id = id.value;
    detailsInfo();//详情
  }

});
//协议详情
const detailsInfo = () => {
  api.agreementApi.agreementGet(id.value).then((res: any) => {
    if (res.code == '200') {
      // 更新 agreementFrom 的属性
      Object.keys(agreementFrom).forEach((key) => {
        if (res.data.agreement.hasOwnProperty(key)) {
          // 使用类型断言，确保类型匹配
          agreementFrom[key as keyof AgreementForm] = res.data.agreement[key] as AgreementForm[keyof AgreementForm];
        }
      });
    } else {
    }
  });
}
const companyIdChange = (value: any) => {
  if (value) {
    agreementFrom.companyId = value[value.length - 1]
  }
}
const deptIdChange = (value: any) => {
  if (value) {
    agreementFrom.deptId = value[value.length - 1]
  }
}
// 禁用失效时间选择
const disabledEndDate = (date: any) => {
  const startDate = new Date(agreementFrom.startDate);
  return startDate && date < startDate; // 禁用小于生效时间的日期
};

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

//嫌憎编辑提交事件
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (id.value) {
        api.agreementApi.contactEdit({ ...agreementFrom }).then((res: any) => {
          if (res.code == '200') {
            ElMessage({
              type: 'success',
              message: res.msg,
              plain: true,
            })
            router.back()
          } else {
          }
        });
      } else {
        api.agreementApi.contactAdd({ ...agreementFrom }).then((res: any) => {
          if (res.code == '200') {
            ElMessage({
              type: 'success',
              message: res.msg,
              plain: true,
            })
            router.back()
          } else {
          }
        });
      }
    } else {

    }
  })
}
const getDeptTree = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code == '200') {
      deptOptions.value = res.data;
      agreementFrom.deptId = res.data[0].id;
    } else {
    }
  });
}
const company = () => {
  api.agreementApi.findTree({ name: "" }).then((res: any) => {
    if (res.code == '200') {
      companyOptions.value = res.data;
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
        plain: true,
      })
    }
  });
}
//选择管理人
interface managerlist {
  id: string,
  name: string,
  deptName: string,
}
const managerModalVisible = ref(false)
const managerlist = ref<managerlist[]>([]);//机构向下人员列表
const managerName = ref();//管理员姓名  回显使用
//选中机构获取人员
const managerModalNodeClick = (id: string) => {
  console.log(id)
  api.agreementApi.getUserByDeptId(id,'').then((res: any) => {
    if (res.code == '200') {
      managerlist.value = res.data;
    }
  });
}
const managerModalQuery=(searchValue:string)=>{
  api.agreementApi.getUserByDeptId('',searchValue).then((res: any) => {
    if (res.code == '200') {
      managerlist.value = res.data;
    }
  });
}
//选择管理人保存事件
const managerModalsave = (id: string, name: string, deptName: string) => {
  agreementFrom.custodianId = id;
  managerName.value = name + ' - ' + deptName;
  managerModalVisible.value = false;

}

</script>
<style lang="scss" scoped>
.disabled :deep(.el-upload--picture-card) {
  display: none;
}

.agreementNotice {
  width: max-content;
  padding: 18px 24px;
  border: 1px solid #eee;
  border-radius: 4px;

  &:hover {
    background-color: #fafafa;
  }

  img {
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }

  span:first-child {
    margin-bottom: 2px;
    font-size: 14px;
    color: #333;
  }

  span:last-child {
    font-size: 14px;
    color: #666;
  }

  .fileBtn {
    margin-left: 40px;

    .btn-icon {
      margin: 0 10px;
      font-size: 20px;
      color: #999;
      cursor: pointer;

      &:hover {
        color: #00a0f4;
      }
    }
  }
}

.image-view {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 60%);

  img {
    width: 800px;
    height: 800px;
    border-radius: 5px;
  }
}
</style>