EnterGradesDialog 录入成绩弹窗

引入

import PressEnterGradesDialog from '@tencent/press-next/press-enter-grades-dialog/press-enter-grades-dialog';

export default {
  components: {
    PressEnterGradesDialog,
  }
}

代码演示

基础用法

<PressEnterGradesDialog
  :show="dialog.show"
  :is-count="dialog.isCount"
  :grade-list="dialog.gradeList"
  :border-btn-text="dialog.borderBtnText"
  :primary-btn-text="dialog.primaryBtnText"
  :show-add="dialog.showAdd"
  :show-clear="dialog.showClear"
  :title="dialog.title"
  @clickItem="clickItem"
  @clickDelete="clickDelete"
  @clickAdd="clickAdd"
  @clickSubmit="clickSubmit"
  @clickSave="clickSave"
  @clickClose="clickClose"
  @clickClear="clickClear"
/>

<script lang="ts" setup>
import { ref } from 'vue';

const dialog = ref({
  show: true,
  isCount: true,
  gradeList: [
    {
      canBeDelete: false,
      label: '第一副',
      notStart: false,
      value: '杨的战队(过A)',
      readonly: false,
    },
    {
      canBeDelete: true,
      label: '第二副',
      notStart: false,
      value: '杨的战队(过A)',
      readonly: false,
    },
  ],
  borderBtnText: '保存草稿',
  primaryBtnText: '提交',
  showAdd: true,
  showClear: true,
  title: '录入成绩',
});


const clickItem = () => {
  console.log('clickItem');
};
const clickDelete = () => {
  console.log('clickDelete');
};
const clickAdd = () => {
  console.log('clickAdd');
};
const clickSubmit = () => {
  console.log('clickSubmit');
};
const clickSave = () => {
  console.log('clickSave');
};
const clickClose = () => {
  console.log('clickClose');
  dialog.value.show = false;
};
const clickClear = () => {
  console.log('clickSave');
};
</script>

API

Props

interface Props {
  show: boolean, // 是否展示弹窗
  isCount: boolean, // 是否记副
  borderBtnText: string, // 线框按钮文案
  primaryBtnText: string, // 主按钮文案
  gradeList: Array<any>, // 比赛列表
  showAdd: boolean, // 是否显示添加按钮
  showClear: boolean, // 是否显示清除按钮
  title: string; // 标题
  showCheckGrades: boolean, // 是否显示查看成绩
  showingGradeList: Array<any>, // 展示的比分列表
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
  isCount: false,
  borderBtnText: '',
  primaryBtnText: '',
  gradeList: () => [],
  showAdd: false,
  showClear: true,
  title: '录入成绩',
  showCheckGrades: false,
  showingGradeList: () => [],
});

Events

const emit = defineEmits<{
  clickClear: [],
  clickClose: [],
  clickAdd: [],
  clickSave: [],
  clickSubmit: [],
  clickItem: [item: object, index: number],
  clickDelete: [item: object, index: number],
}>();