准备制作班级列表

1

src/components/CDatePicker/index.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
       default: '-'
     }
   },
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
     const timer = ref(null);
     const updateTimer = () => {
       console.log('更新日期', timer.value);
@@ -28,6 +28,7 @@ export default defineComponent({
             class={styles.dateIcons}
             src={dateIcons}></NImage>
           <NDatePicker
+            {...attrs}
             class={styles.CDatePicker}
             clearable
             v-model:value={timer.value}
@@ -46,10 +47,3 @@ export default defineComponent({
     );
   }
 });
-/**
- *  <NImage
-                  previewDisabled
-                  class={styles.dateIcons}
-                  src={dateIcons}></NImage>
- *
- */

src/components/CSelect/index.module.less

@@ -0,0 +1,35 @@
+.arrow {
+  width: 12px;
+  height: 13px;
+}
+
+.CSelectWrap {
+  :global {
+    .n-select {
+      width: 180px;
+
+      .n-base-selection-label {
+        height: 43px;
+        line-height: 43px;
+      }
+      .n-base-selection__border {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+      .n-base-selection__state-border {
+        border-radius: 8px;
+        overflow: hidden;
+      }
+    }
+  }
+}
+// :global {
+//   .n-base-select-option {
+//     line-height: 45px;
+//     border-radius: 8px;
+//   }
+//   .n-base-select-option--selected {
+//     background: #198cfe;
+//     color: #fff;
+//   }
+// }

src/components/CSelect/index.tsx

@@ -0,0 +1,37 @@
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+import { NIcon, NImage, NDatePicker, NSelect } from 'naive-ui';
+
+import activeArrow from './images/activeArrow.png';
+import arrow from './images/arrow.png';
+export default defineComponent({
+  name: 'CSelect',
+  setup(props, { emit, attrs }) {
+    const timer = ref(null);
+    const updateTimer = () => {
+      console.log('更新日期', timer.value);
+      emit('update:value', timer.value);
+    };
+    const isFocus = ref(false);
+    return () => (
+      <>
+        <div class={styles.CSelectWrap}>
+          <NSelect
+            show-checkmark={false}
+            {...attrs}
+            onUpdate:show={(flag: boolean) => {
+              isFocus.value = flag;
+            }}
+            v-slots={{
+              arrow: () =>
+                isFocus.value ? (
+                  <NImage class={styles.arrow} src={activeArrow}></NImage>
+                ) : (
+                  <NImage class={styles.arrow} src={arrow}></NImage>
+                )
+            }}></NSelect>
+        </div>
+      </>
+    );
+  }
+});

src/components/layout/index.module.less

@@ -5,6 +5,9 @@
   background: #f1f5ff;
   .WrapcoreView {
     margin: 32px;
+    background-color: #fff;
+    border-radius: 20px;
+    overflow: hidden;
   }
 }
 .silder {

src/components/searchInput/index.module.less

@@ -0,0 +1,15 @@
+.searchInput {
+  height: 43px;
+  border-radius: 8px;
+  :global {
+    .n-input__input-el {
+      line-height: 43px;
+      height: 43px;
+    }
+  }
+
+  .searchIcon {
+    width: 16px;
+    height: 17px;
+  }
+}

src/components/searchInput/index.tsx

@@ -0,0 +1,41 @@
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+import { NImage, NInput, NIcon, dividerDark } from 'naive-ui';
+
+import { renderfontsvg } from '@/utils/index';
+import disSearch from './images/disSearch.png';
+import searchIcon from './images/searchIcon.png';
+export default defineComponent({
+  name: 'student-studentList',
+  props: ['searchWord'],
+  emits: ['changeValue'],
+  setup(props, { emit, attrs }) {
+    const isFocus = ref(false);
+    return () => (
+      <>
+        <NInput
+          {...attrs}
+          clearable
+          class={styles.searchInput}
+          v-slots={{
+            prefix: () => (
+              <NImage
+                class={styles.searchIcon}
+                previewDisabled
+                src={isFocus.value ? searchIcon : disSearch}></NImage>
+            )
+          }}
+          value={props.searchWord}
+          onInput={($event: any) => {
+            emit('changeValue', $event);
+          }}
+          onFocus={() => {
+            isFocus.value = true;
+          }}
+          onBlur={() => {
+            isFocus.value = false;
+          }}></NInput>
+      </>
+    );
+  }
+});

src/styles/index.less

@@ -73,3 +73,56 @@ body {
   border-radius: 6px;
   background-color: rgb(159, 159, 159);
 }
+
+.searchBtn {
+  width: 90px;
+  height: 43px;
+  background: #198cfe;
+  border-radius: 8px;
+  line-height: 41px;
+  font-weight: 600 !important;
+  font-size: 18px;
+}
+.resetBtn {
+  width: 90px;
+  height: 43px;
+  border-radius: 8px;
+  line-height: 41px;
+  font-weight: 600 !important;
+  font-size: 18px;
+}
+
+.n-data-table {
+  border-radius: 10px 10px 0 0;
+  overflow: hidden;
+}
+.n-data-table-thead {
+  height: 54px;
+  line-height: 54px;
+}
+.n-data-table-th {
+  padding: 0 20px !important;
+  background-color: #f7f7f8 !important;
+  color: rgba(0, 0, 0, 0.88) !important;
+}
+.n-data-table-th__title-wrapper {
+  &::after {
+    content: '';
+    width: 1px;
+    height: 22px;
+    background: #ebebeb;
+    &:nth-last-child(1) {
+      display: none;
+    }
+  }
+}
+.n-data-table-th--last {
+  .n-data-table-th__title-wrapper {
+    &::after {
+      content: '';
+      width: 0px;
+      height: 22px;
+      background: #ebebeb;
+    }
+  }
+}

src/views/classList/index.tsx

@@ -0,0 +1,192 @@
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NImage,
+  NSelect,
+  NSpace
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CSelect from '@/components/CSelect';
+import Pagination from '@/components/pagination';
+import add from './images/add.png';
+export default defineComponent({
+  name: 'class-classList',
+  setup(props, { emit }) {
+    const state = reactive({
+      searchWord: '',
+      orchestraType: null,
+      courseTypeCode: null,
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 0
+      },
+      tableList: [] as any
+    });
+    const search = () => {
+      console.log('search', state);
+    };
+
+    const onReset = () => {
+      console.log('search');
+    };
+    const getList = () => {
+      console.log('getList');
+    };
+
+    const columns = () => {
+      return [
+        {
+          title: '姓名',
+          key: 'id'
+        },
+        {
+          title: '手机号',
+          key: 'id'
+        },
+        {
+          title: '性别',
+          key: 'id'
+        },
+        {
+          title: '乐器',
+          key: 'id'
+        },
+        {
+          title: '班级',
+          key: 'id'
+        },
+        {
+          title: '学生类型',
+          key: 'id'
+        },
+        {
+          title: '操作',
+          key: 'id'
+        }
+      ];
+    };
+    return () => (
+      <>
+        <div class={styles.listWrap}>
+          <div class={styles.searchList}>
+            <NForm label-placement="left" inline>
+              <NFormItem>
+                <SearchInput
+                  class={styles.searchInput}
+                  searchWord={state.searchWord}
+                  onChangeValue={(val: string) =>
+                    (state.searchWord = val)
+                  }></SearchInput>
+              </NFormItem>
+
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label:
+                          "Everybody's Got Something to Hide Except Me and My Monkey",
+                        value: 'song0'
+                      },
+                      {
+                        label: 'Drive My Car',
+                        value: 'song1'
+                      }
+                    ],
+                    placeholder: '学生声部',
+                    clearable: true
+                  } as any)}
+                  v-model:value={state.orchestraType}></CSelect>
+              </NFormItem>
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label:
+                          "Everybody's Got Something to Hide Except Me and My Monkey",
+                        value: 'song0'
+                      },
+                      {
+                        label: 'Drive My Car',
+                        value: 'song1'
+                      }
+                    ],
+                    placeholder: '年级班级',
+                    clearable: true
+                  } as any)}
+                  v-model:value={state.orchestraType}></CSelect>
+              </NFormItem>
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label:
+                          "Everybody's Got Something to Hide Except Me and My Monkey",
+                        value: 'song0'
+                      },
+                      {
+                        label: 'Drive My Car',
+                        value: 'song1'
+                      }
+                    ],
+                    placeholder: '学生类型',
+                    clearable: true
+                  } as any)}
+                  v-model:value={state.orchestraType}></CSelect>
+              </NFormItem>
+              <NFormItem>
+                <NSpace justify="end">
+                  <NButton
+                    type="primary"
+                    ghost
+                    class="resetBtn"
+                    onClick={search}>
+                    搜索
+                  </NButton>
+                  <NButton type="primary" class="searchBtn" onClick={onReset}>
+                    重置
+                  </NButton>
+                </NSpace>
+              </NFormItem>
+            </NForm>
+          </div>
+          <NButton
+            class={styles.addBtn}
+            type="primary"
+            v-slots={{
+              icon: () => (
+                <>
+                  <NImage class={styles.addBtnIcon} src={add}></NImage>
+                </>
+              )
+            }}>
+            新增学生
+          </NButton>
+          <div class={styles.tableWrap}>
+            <NDataTable
+              class={styles.classTable}
+              loading={state.loading}
+              columns={columns()}
+              data={state.tableList}></NDataTable>
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              sync
+              saveKey="orchestraRegistration-key"
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+});

src/views/home/index.module.less

@@ -168,12 +168,13 @@
       justify-content: flex-end;
     }
   }
+
   .searchBtn {
     width: 90px;
     height: 43px;
     background: #198cfe;
     border-radius: 8px;
-    line-height: 43px;
+    line-height: 41px;
     font-weight: 600 !important;
     font-size: 18px;
   }
@@ -181,7 +182,7 @@
     width: 90px;
     height: 43px;
     border-radius: 8px;
-    line-height: 43px;
+    line-height: 41px;
     font-weight: 600 !important;
     font-size: 18px;
   }

src/views/studentList/index.module.less

@@ -0,0 +1,22 @@
+.listWrap {
+  padding: 32px;
+  background-color: #fff;
+}
+.addBtnIcon {
+  width: 16px;
+  height: 17px;
+}
+.addBtn {
+  margin-bottom: 30px;
+  height: 43px;
+  background: #198cfe;
+  border-radius: 8px;
+  line-height: 41px;
+  width: 144px;
+  padding: 0 24px;
+  :global {
+    .n-button__content {
+      font-size: 18px;
+    }
+  }
+}

src/views/studentList/index.tsx

@@ -1,10 +1,192 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
-import { NImage } from 'naive-ui';
-import teacherHeader from '@/components/layout/images/teacherIcon.png';
+import {
+  NButton,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NImage,
+  NSelect,
+  NSpace
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CSelect from '@/components/CSelect';
+import Pagination from '@/components/pagination';
+import add from './images/add.png';
 export default defineComponent({
   name: 'student-studentList',
   setup(props, { emit }) {
-    return () => <>学生列表</>;
+    const state = reactive({
+      searchWord: '',
+      orchestraType: null,
+      courseTypeCode: null,
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 0
+      },
+      tableList: [] as any
+    });
+    const search = () => {
+      console.log('search', state);
+    };
+
+    const onReset = () => {
+      console.log('search');
+    };
+    const getList = () => {
+      console.log('getList');
+    };
+
+    const columns = () => {
+      return [
+        {
+          title: '姓名',
+          key: 'id'
+        },
+        {
+          title: '手机号',
+          key: 'id'
+        },
+        {
+          title: '性别',
+          key: 'id'
+        },
+        {
+          title: '乐器',
+          key: 'id'
+        },
+        {
+          title: '班级',
+          key: 'id'
+        },
+        {
+          title: '学生类型',
+          key: 'id'
+        },
+        {
+          title: '操作',
+          key: 'id'
+        }
+      ];
+    };
+    return () => (
+      <>
+        <div class={styles.listWrap}>
+          <div class={styles.searchList}>
+            <NForm label-placement="left" inline>
+              <NFormItem>
+                <SearchInput
+                  class={styles.searchInput}
+                  searchWord={state.searchWord}
+                  onChangeValue={(val: string) =>
+                    (state.searchWord = val)
+                  }></SearchInput>
+              </NFormItem>
+
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label:
+                          "Everybody's Got Something to Hide Except Me and My Monkey",
+                        value: 'song0'
+                      },
+                      {
+                        label: 'Drive My Car',
+                        value: 'song1'
+                      }
+                    ],
+                    placeholder: '学生声部',
+                    clearable: true
+                  } as any)}
+                  v-model:value={state.orchestraType}></CSelect>
+              </NFormItem>
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label:
+                          "Everybody's Got Something to Hide Except Me and My Monkey",
+                        value: 'song0'
+                      },
+                      {
+                        label: 'Drive My Car',
+                        value: 'song1'
+                      }
+                    ],
+                    placeholder: '年级班级',
+                    clearable: true
+                  } as any)}
+                  v-model:value={state.orchestraType}></CSelect>
+              </NFormItem>
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label:
+                          "Everybody's Got Something to Hide Except Me and My Monkey",
+                        value: 'song0'
+                      },
+                      {
+                        label: 'Drive My Car',
+                        value: 'song1'
+                      }
+                    ],
+                    placeholder: '学生类型',
+                    clearable: true
+                  } as any)}
+                  v-model:value={state.orchestraType}></CSelect>
+              </NFormItem>
+              <NFormItem>
+                <NSpace justify="end">
+                  <NButton
+                    type="primary"
+                    ghost
+                    class="resetBtn"
+                    onClick={search}>
+                    搜索
+                  </NButton>
+                  <NButton type="primary" class="searchBtn" onClick={onReset}>
+                    重置
+                  </NButton>
+                </NSpace>
+              </NFormItem>
+            </NForm>
+          </div>
+          <NButton
+            class={styles.addBtn}
+            type="primary"
+            v-slots={{
+              icon: () => (
+                <>
+                  <NImage class={styles.addBtnIcon} src={add}></NImage>
+                </>
+              )
+            }}>
+            新增学生
+          </NButton>
+          <div class={styles.tableWrap}>
+            <NDataTable
+              class={styles.classTable}
+              loading={state.loading}
+              columns={columns()}
+              data={state.tableList}></NDataTable>
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              sync
+              saveKey="orchestraRegistration-key"
+            />
+          </div>
+        </div>
+      </>
+    );
   }
 });