Jelajahi Sumber

feat(businessManagement): 新增学校开放场地页面

- 添加学校开放场地页面的基本布局和样式
zhangtao 3 minggu lalu
induk
melakukan
d56cc8ed90

+ 39 - 5
src/views/businessManagement/schoolOpen/index.vue

@@ -1,7 +1,41 @@
 <template>
-  <div> </div>
+  <div class="p-8px bg-white">
+    <div class="px-4">
+      <BasicForm @register="registerForm">
+        <template #title1>
+          <TypographyTitle :level="4">开放时间</TypographyTitle>
+          <Divider></Divider>
+        </template>
+        <template #title2>
+          <TypographyTitle :level="4">封面、配套保险、使用须知</TypographyTitle>
+          <Divider></Divider>
+        </template>
+        <template #ZtCustomTable1="{ model, field }">
+          <ZtCustomTable :tableColumn="ScheduleArrangementColums" v-model:value="model[field]"></ZtCustomTable>
+        </template>
+        <template #ZtCustomTable2="{ model, field }">
+          <ZtCustomTable :tableColumn="ScheduleArrangementColums" v-model:value="model[field]"></ZtCustomTable>
+        </template>
+        <template #formFooter>
+          <div style="margin: 0 auto">
+            <a-button type="primary" @click="save" class="mr-2"> 保存 </a-button>
+            <a-button type="error" @click="back" class="mr-2"> 关闭 </a-button>
+          </div>
+        </template>
+      </BasicForm>
+      <div class="h-20px"></div>
+    </div>
+  </div>
 </template>
-
-<script setup lang="ts" name="businessManagementschoolOpen"></script>
-
-<style scoped></style>
+<script lang="ts" setup name="business-management-schoolOpen">
+  import { TypographyTitle, Divider } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import ZtCustomTable from '/@/components/ZtCustomTable/index.vue';
+  import { formSchema, ScheduleArrangementColums, SchedulePricesColums } from './schoolOpen.data';
+  const [registerForm, { setProps, resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  function back() {}
+  function save() {}
+</script>

+ 120 - 0
src/views/businessManagement/schoolOpen/schoolOpen.data.ts

@@ -0,0 +1,120 @@
+import { ZtTableColumnProps } from '/#/utils';
+import { FormSchema } from '/@/components/Table';
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '营业名称',
+    component: 'Select',
+    required: true,
+    labelWidth: 120,
+    colProps: {
+      span: 14,
+      xs: 24,
+    },
+  },
+  {
+    field: 'title1',
+    slot: 'title1',
+    label: '',
+    component: 'Input',
+    labelWidth: 0,
+  },
+  {
+    field: 'ScheduleData1',
+    label: '教学日',
+    component: 'Input',
+    slot: 'ZtCustomTable1',
+    defaultValue: [],
+    required: true,
+    labelWidth: 120,
+    colProps: {
+      span: 18,
+      xs: 24,
+    },
+  },
+  {
+    field: 'ScheduleData2',
+    label: '非教学日',
+    component: 'Input',
+    slot: 'ZtCustomTable2',
+    defaultValue: [],
+    required: true,
+    labelWidth: 120,
+    colProps: {
+      span: 18,
+      xs: 24,
+    },
+  },
+  {
+    field: 'title2',
+    slot: 'title2',
+    label: '',
+    component: 'Input',
+    labelWidth: 0,
+  },
+  {
+    field: 'name',
+    label: '封面',
+    component: 'JImageUpload',
+    required: true,
+    labelWidth: 120,
+    colProps: {
+      span: 14,
+      xs: 24,
+    },
+  },
+  {
+    field: 'name',
+    label: '配套保险',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '意外伤害险1', value: 0 },
+        { label: '大额意外伤害险', value: 1 },
+      ],
+    },
+    required: true,
+    labelWidth: 120,
+    colProps: {
+      span: 14,
+      xs: 24,
+    },
+  },
+  {
+    field: 'name',
+    label: '使用须知',
+    component: 'InputTextArea',
+    required: true,
+    labelWidth: 120,
+    colProps: {
+      span: 22,
+      xs: 24,
+    },
+  },
+];
+
+export const ScheduleArrangementColums: ZtTableColumnProps[] = [
+  {
+    title: '时间段',
+    key: 'RangePicker',
+    dataIndex: 'time',
+    width: 450,
+    props: {
+      format: 'YYYY-MM-DD hh:mm:ss',
+      showTime: true,
+    },
+  },
+  {
+    title: '总票数',
+    key: 'InputNumber',
+    dataIndex: 'price',
+    width: 250,
+  },
+  {
+    key: 'op',
+    dataIndex: 'operation',
+    title: 'operation',
+    fixed: 'right',
+  },
+];