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">
        <view class="flex-col ml-10 flex-1 course-info">
          <view class="course-name">{{ xkkc.kcmc }}</view>
          <view class="course-info-item"> 
            <view class="info-label">上课周期类型：</view>
            <view class="info-data">{{ xkkc.skzqlx }}</view>
          </view>
          <view class="course-info-item"> 
            <view class="info-label">上课周期：</view>
            <view class="info-data">{{ xkkc.skzqmc }}</view>
          </view>
          <view class="course-info-item"> 
            <view class="info-label">上课开始时间：</view>
            <view class="info-data">{{ xkkc.skkstime }}</view>
          </view>
          <view class="course-info-item"> 
            <view class="info-label">上课结束时间：</view>
            <view class="info-data">{{ xkkc.skjstime }}</view>
          </view>
          <view class="course-info-item"> 
            <view class="info-label">开课老师：</view>
            <view class="info-data">{{ js.jsxm }}</view>
          </view>
          <view class="course-info-item"> 
            <view class="info-label">开课地点：</view>
            <view class="info-data">{{ xkkc.kcdd }}</view>
          </view>
          <view class="course-info-item">
            <view class="info-label">上课人数：</view>
            <view class="info-data">{{ xkkc.hasNum || 0 }} | {{ xkkc.maxNum || 0 }}</view>
          </view>
          <view class="course-info-item"> 
            <view class="info-label">金额：</view>
            <view class="info-data cor-FF8D02">¥{{ xkkc.kcje }}</view>
          </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, get } from "lodash";
import { useUserStore } from "@/store/modules/user";
import { useDataStore } from "@/store/modules/data";
import { jsdXkkcSaveApi } from "@/api/base/server";
const { getJs } = useUserStore();
const { getData } = useDataStore();

const js = computed(() => getJs)
const xkkc = ref<any>({})

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

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


const education = reactive<any>(
  {
    xl: []
  }
)
function addEducation() {
  education.xl.push({ value: {
    jhjd: '',
    jhsj: '',
    jhdd: '',
    jhnr: ''
  } })
}

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

const submit = async () => {
  const data = await getValue()
  xkkc.value.kcjsms = data.kcjsms;
  xkkc.value.jxll = data.jxll;
  xkkc.value.jxjh = JSON.stringify(education.xl)
  await jsdXkkcSaveApi(xkkc.value).then(res => {
    uni.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000
    })
  }).catch(err => {
    uni.showToast({
      title: '提交失败',
      icon: 'error',
      duration: 2000
    })
  });
}
// 初始化
onMounted(() => {
  xkkc.value = getData;
  setValue(getData);
  // 将xkkc中的jxjh从json字符串转换为数组
  if (xkkc.value.jxjh && xkkc.value.jxjh.length > 0) {
    education.xl = JSON.parse(xkkc.value.jxjh)
  } else {
    education.xl = [];
  }
})
</script>
<style>
.delete-icon {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.course-info {
  
  .course-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
  }
  .course-info-item { 
    display: flex;
    margin-bottom: 12px;
    font-size: 12px;
    .info-label {
      color: #949AA4;
      flex: 0 0 100px;
    }
    .info-data {     
      flex: 1 0 1px;
    }
  }
}
</style>