zhxy-jsd/src/pages/view/hr/teacherProfile/TitleInfo.vue

<template>
  <BasicLayout>
    <view class="p-15">
      <view v-if="education.xl.length > 0">
        <template v-for="(item, index) in education.xl" :key="index">
          <view class="po-re mb-15">
            <BasicForm
              v-model="item.value"
              :schema="schema"
              :formsProps="{ labelWidth: 100 }"
            />
            <view
              @click="deleteMemberFamily(index as number, item.value)"
              class="delete-icon"
            >
              <BasicIcon type="clear" size="30" />
            </view>
          </view>
        </template>
      </view>
      <view
        class="flex-row items-center justify-center pb-10 pt-5"
        style="border: 1px solid #E8E8E8"
        @click="addEducation"
      >
        <uni-icons type="plus" size="16" color="#447ADE"></uni-icons>
        <view class="ml-5 cor-447ADE">新增</view>
      </view>
    </view>
    <template #bottom>
      <view class="flex-row items-center pb-10 pt-5">
          <u-button text="返回" class="ml-15 mr-7" :plain="true" @click="navigateBack"/>
          <u-button text="提交" class="mr-15 mr-7" type="primary" @click="submit"/>
        </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import { useForm } from "@/components/BasicForm/hooks/useForm";
import { navigateBack, navigateTo } from "@/utils/uniapp";
import { cloneDeep } from "lodash";
const schema = reactive<FormsSchema[]>([
  {
    field: "xm",
    label: "职称等级",
    component: "BasicInput",
    required: true,
    componentProps: {},
  },
  {
    field: "nl",
    label: "职称类别",
    component: "BasicInput",
    required: true,
    componentProps: {},
  },
  {
    field: "yhzgx",
    label: "职称专业",
    component: "BasicInput",
    required: true,
    componentProps: {},
  },
  {
    field: "yhzgx",
    label: "职称审批机关",
    component: "BasicInput",
    required: true,
    componentProps: {},
  },
  {
    field: "yhzgx",
    label: "职称批准文号",
    component: "BasicInput",
    required: true,
    componentProps: {},
  },
  {
    field: "yhzgx",
    label: "职称批准年月",
    component: "BasicInput",
    required: true,
    componentProps: {},
  },
  {
    field: "yhzgx",
    label: "职称证书编号",
    component: "BasicInput",
    required: true,
    componentProps: {},
  },
]);

const education = reactive<any>({
  xl: [{ value: {} }],
});

function addEducation() {
  education.xl.push({ value: {} });
}

function deleteMemberFamily(index: number, item: any) {
  const list = cloneDeep(education.xl);
  list.splice(index, 1);
  education.xl = list;
}

function submit() {
  navigateTo("/pages/view/hr/teacherProfile/PositionInfo");
}
</script>
<style>
.delete-icon {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
</style>