zhxy-jsd/src/pages/base/groupTeaching/zhujiaoDetails.vue

<template>
  <BasicLayout>
    <template #top>
      <view class="flex-row items-center white-bg-color p-15 r-md">
        <image
            src="/static/test/1.png"
            class="course-image r-md wi-180 he-180"
            mode="aspectFill"
        />
        <view class="flex-col ml-10 flex-1">
          <text class="font-bold font-16">{{ "机器人创客" }}</text>
          <view class="text-gray-600 text-md mt-10">
            <text class="font-12 cor-949AA4">开课老师：</text>
            <text class="font-12">{{ "叶老师" }}</text>
          </view>
          <view class="text-gray-600 text-md mt-5">
            <text class="font-12 cor-949AA4">上课地点：</text>
            <text class="font-12">{{ "第一教学楼302" }}</text>
          </view>
          <view class="mt-5">
            <text class="font-12 cor-949AA4">金额：</text>
            <text class="font-12 cor-FF8D02">¥{{ "142" }}</text>
          </view>
        </view>
      </view>
    </template>
    <view class="p-15">
      <BasicForm @register="register">
        <template #jxjh>
          <view class="back-f8f8f8">
            <view class="flex-row items-center justify-between py-15 global-bg-color">
              <view>
                <BasicTitle line title="教学计划" :isBorder="false"/>
              </view>
              <view @click="addEducation">
                <BasicIcon type="icon-tianjia" size="25"/>
              </view>
            </view>
            <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 v-else class="p-15 flex-row-center color-9 font-13 white-bg-color">教学计划暂无数据</view>
          </view>
        </template>
      </BasicForm>
    </view>
    <template #bottom>
      <view class="white-bg-color py-5">
        <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>
      </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import {navigateBack} from "@/utils/uniapp";

import {useForm} from "@/components/BasicForm/hooks/useForm";
import {cloneDeep} from "lodash";

const [register, {getValue}] = useForm({
  schema: [
    {
      field: "ttlx",
      label: "老师信息",
      component: "BasicInput",
      itemProps: {
        labelPosition: "top",
      },
      componentProps: {
        type: "textarea",
      },
    },
    {
      field: "ttlx",
      label: "教学概念",
      component: "BasicInput",
      itemProps: {
        labelPosition: "top",
      },
      componentProps: {
        type: "textarea",
      },
    },
    {colSlot: 'jxjh'},
  ],
});

const schema = reactive<FormsSchema[]>([
  {
    field: "ttlx",
    label: "阶段",
    component: "BasicInput",
    componentProps: {},
  },
  {
    field: "ttlx",
    label: "计划时间",
    component: "BasicDateTimes",
    componentProps: {},
  },
  {
    field: "ttlx",
    label: "地址",
    component: "BasicInput",
    componentProps: {},
  },
  {
    field: "ttlx",
    label: "计划内容",
    component: "BasicInput",
    itemProps: {
      labelPosition: "top",
    },
    componentProps: {
      type: "textarea",
    },
  },
])


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

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

function deleteMemberFamily(index: number, item: any) {
  const list = cloneDeep(education.xl)
  list.splice(index, 1)
  education.xl = list
}
</script>
<style>
.delete-icon {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
</style>