marking-cet-web/src/modules/example/Components.vue

<template>
  <div class="components-view">
    <el-affix :offset="100" style="width: 90px; float: right">
      <el-menu @select="onSelectBlock">
        <el-menu-item index="elFormRef">ElForm</el-menu-item>
        <el-menu-item index="epFormRef">EPForm</el-menu-item>
        <el-menu-item index="epFormRef1">InlineForm</el-menu-item>
        <el-menu-item index="epTableRef">EPTable</el-menu-item>
        <el-menu-item index="eChartsRef">E-Charts</el-menu-item>
      </el-menu>
    </el-affix>
    <div ref="elFormRef" class="example-block">
      <h3 class="example-title">ElForm</h3>
      <el-form ref="elFormRef" :model="formModel" :rules="forRules">
        <el-form-item prop="mainQuestion" label="Input">
          <el-input v-model="formModel.mainQuestion"></el-input>
        </el-form-item>
        <el-form-item prop="person" label="Input">
          <el-input v-model="formModel.person"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="separate" label="Input">
              <el-input v-model="formModel.separate"></el-input>
            </el-form-item>
            <el-col :span="10">1231231</el-col>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="day" label="Input">
              <el-input v-model="formModel.day"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div ref="epFormRef" class="example-block">
      <h3 class="example-title">Form</h3>
      <div class="flex items-center example-title">
        <el-button-group>
          <el-button v-for="(_, K) in formConfig" :key="K" type="primary" @click="changeFormConfig(K)">
            {{ K }}
          </el-button>
        </el-button-group>
      </div>
      <base-form
        ref="baseFormRef"
        v-bind="form"
        :items="items"
        :model="formModel"
        :rules="forRules"
        :label-width="'110px'"
      >
      </base-form>
    </div>
    <div ref="epFormRef1" class="example-block">
      <h3 class="example-title">InlineForm</h3>
      <base-form v-bind="form" :items="inlineItems" :model="formModel" size="small" :label-width="'88px'">
        <template #form-item-cao-zuo-col>
          <el-button type="primary">132</el-button>
        </template>
      </base-form>
    </div>
    <div ref="epTableRef" class="example-block">
      <h3 class="example-title">Table</h3>
      <base-table
        ref="baseTableRef"
        height="30vw"
        :data="data"
        :columns="columns"
        highlight-current-row
        @refresh="refresh"
        @current-change="onCurrentChange"
        @row-dblclick="onDbClick"
      >
        <template #column-header-a="s">
          <button>{{ parseFloat('0.0003') }}</button>
          <button>{{ s.row }}</button>
        </template>
        <template #column-7="{ row }">
          <button>{{ row }}</button>
        </template>
        <template #expand="scope">
          <div>{{ scope }}</div>
        </template>
      </base-table>
    </div>
    <div ref="eChartsRef" class="example-block">
      <h3 class="example-title">Echarts</h3>
      <vue-e-charts class="chart-box" :option="option"></vue-e-charts>
    </div>
  </div>
</template>

<script setup lang="tsx" name="ComponentsView">
import {
  toRefs,
  reactive,
  ref,
  shallowReactive,
  shallowRef,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  unref,
} from 'vue'
import VueECharts from 'vue-echarts'
import useVueECharts from '@/hooks/useVueECharts'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElAffix,
  ElMenu,
  ElMenuItem,
  ElButton,
  ElButtonGroup,
} from 'element-plus'
import BaseTable from '@/components/element/BaseTable.vue'
import BaseForm from '@/components/element/BaseForm.vue'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'

import type { EpTableProps, EpFormProps } from 'global-type'

const onCurrentChange = (...args: any) => {
  console.log(...args)
}
const onDbClick = (...args: any) => {
  console.log(...args)
}

const instance = getCurrentInstance()

function onSelectBlock(index: string) {
  const dom = instance?.refs[index]
  if (dom) {
    ;(dom as HTMLElement).scrollIntoView(true)
  }
}

/** Button start */
/** Button end */

const { fetch, loading, cancel, error } = useFetch('userLogin')

/** form start */
const formModel = reactive({
  subject: void 0,
  mainQuestion: void 0,
  separate: void 0,
  publish: true,
  person: 5,
  day: 8,
  type: [],
  checkBox: [],
})

const items: EpFormProps<typeof formModel>['items'] = [
  {
    rowKey: 'row-1',
    label: '科目',
    slotType: 'select',
    prop: 'subject',
    slot: {
      placeholder: '科目代码-科目名称',
      optionGroup: {
        'group-1': {
          label: 'group-1',
        },
        'group-2': {
          label: 'group-2',
        },
      },
      options: [
        {
          groupKey: 'group-1',
          value: 1,
          label: 'label-1',
        },
        {
          groupKey: 'group-2',
          value: 2,
          label: 'label-2',
        },
        {
          value: 3,
          label: 'label-3',
        },
        {
          value: 4,
          label: 'label-4',
        },
      ],
    },
    colProp: {
      span: 6,
    },
  },
  {
    rowKey: 'row-1',
    label: '大题',
    slotType: 'select',
    prop: 'mainQuestion',
    slot: {
      placeholder: '大题号-大题名称',
      options: [
        { label: '大题一-小题一', value: '1-1' },
        { label: '大题一-小题二', value: '1-2' },
      ],
    },
    colProp: {
      offset: 2,
      span: 6,
    },
  },
  {
    rowKey: 'row-2',
    label: '分隔符',
    slotType: 'input',
    prop: 'separate',
    slot: {},
    colProp: {
      span: 6,
    },
  },
  {
    rowKey: 'row-2',
    label: '导入同时发布任务',
    slotType: 'select',
    prop: 'publish',
    slot: {
      placeholder: ' 这是一个inputNumber框',
      options: [
        { label: '是', value: true },
        { label: '否', value: false },
      ],
    },
    colProp: {
      offset: 2,
      span: 6,
    },
  },
  {
    rowKey: 'row-3',
    label: '每包打包人数',
    slotType: 'input',
    prop: 'person',
    slot: {},
    colProp: {
      span: 6,
    },
  },
  {
    rowKey: 'row-3',
    label: '计划评卷天数',
    prop: 'day',
    slotType: 'inputNumber',
    slot: {
      step: 1,
      stepStrictly: true,
    },
    itemDescription: {
      requiredAsterisk: true,
      description: '系统将按各省考生平均分配到计划评卷天数中，确保各天的评卷进度一致',
    },
    colProp: {
      offset: 2,
      span: 6,
    },
  },
  {
    rowKey: 'row-4',
    label: '导入文件',
    // upload
    slotType: 'input',
    slot: {},
  },
  {
    slotType: 'input',
    label: '',
    slot: {
      placeholder: '这是一个进度条',
    },
  },
  {
    slotType: 'checkbox',
    label: 'CheckBox',
    prop: 'type',
    rowKey: 'row-5',
    slot: {
      type: 'checkbox',
      options: [
        { label: 'JavaScript', trueLabel: 'js' },
        { label: 'TypeScript', trueLabel: 'ts' },
        { label: 'NodeJs', trueLabel: 'nodeJs' },
      ],
    },
  },
  {
    slotType: 'checkbox',
    label: 'SingleCheckBox',
    prop: 'check',
    rowKey: 'row-5',
    slot: {
      type: 'checkbox',
      options: [{ label: 'JavaScript' }],
    },
  },
]

const inlineItems: EpFormProps<typeof formModel>['items'] = [
  {
    slotType: 'input',
    label: '科目',
    rowKey: 'row-1',
    colProp: {
      span: 4,
    },
  },
  {
    slotType: 'input',
    label: '培训卷组',
    rowKey: 'row-1',
    colProp: {
      span: 4,
    },
  },
  {
    slotType: 'input',
    label: '培训卷组',
    rowKey: 'row-1',
    colProp: {
      span: 4,
    },
  },
  {
    slotType: 'input',
    label: '科目',
    rowKey: 'row-2',
    colProp: {
      span: 4,
    },
  },
  {
    slotType: 'input',
    label: '培训卷组',
    rowKey: 'row-2',
    colProp: {
      span: 4,
    },
  },
  {
    slotType: 'switch',
    label: '开关',
    rowKey: 'row-2',
    prop: 'publish',
    colProp: {
      span: 4,
    },
  },
  {
    slotType: 'checkbox',
    rowKey: 'row-2',
    labelWidth: '25px',
    prop: 'checkBox',
    slot: {
      type: 'button',
      options: [{ label: '差值显示', border: true }],
    },
    colProp: {
      span: 4,
    },
  },
  {
    slotType: 'inputNumber',
    rowKey: 'row-3',
    slot: {},
    colProp: {
      span: 4,
    },
  },
  {
    rowKey: 'row-1',
    slotName: 'cao-zuo-col',
    labelWidth: '10px',
    colProp: {
      span: 4,
    },
  },
]

const forRules: EpFormProps<typeof formModel>['rules'] = {
  day: [{ required: true, message: '必填' }],
}

type formConfigType = 'normal' | 'with-group' | 'with-multiple-group'

const usedFormConfigType = ref<formConfigType>('normal')

const formConfig = reactive<Record<formConfigType, Omit<EpFormProps<typeof formModel>, 'model'>>>({
  normal: {
    size: 'large',
  },
  'with-group': {
    rows: {},
    groups: [{ groupTitle: '选择大题', rowKeys: ['row-1'] }],
  },
  'with-multiple-group': {
    groups: [
      { groupTitle: '选择大题', rowKeys: ['row-1'] },
      { groupTitle: '任务设置', rowKeys: ['row-2', 'row-3'] },
      { groupTitle: '选择文件', rowKeys: ['row-4'] },
      { groupTitle: 'CheckBox', rowKeys: ['row-5'] },
    ],
  },
})

const form = computed(() => {
  return formConfig[unref(usedFormConfigType)]
})

function changeFormConfig(type: formConfigType) {
  usedFormConfigType.value = type
}

/** form end */

/** Table start */

interface DataType {
  a: number
  b: number
}

const columns: EpTableProps<DataType>['columns'] = [
  {
    type: 'index',
    label: 'index',
  },
  {
    type: 'selection',
    label: 'selection',
  },
  {
    type: 'expand',
    label: 'expand',
  },
  {
    label: 'column-1',
    prop: 'a',
  },
  {
    label: 'column-2',
    prop: 'b',
  },
  {
    label: 'column-3',
    prop: 'a',
  },
  {
    label: 'column-4',
    prop: 'b',
  },
  {
    label: 'column-5',
    formatter(row) {
      return ''
    },
  },
]
const data = ref<DataType[]>(getTableData())

function getTableData() {
  return Array.from({ length: 30 }).map((_) => ({
    a: (Math.random() * 1000) | 0,
    b: (Math.random() * 1000) | 0,
  }))
}

const baseTableRef = shallowRef<InstanceType<typeof BaseTable>>()

function refresh() {
  console.log('refresh')
}

/** Table end */

/** echarts start */
const { provideInitOption } = useVueECharts()

provideInitOption({ renderer: 'svg' })

const option = ref({
  title: {
    text: 'Traffic Sources',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
  },
  series: [
    {
      name: 'Traffic Sources',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
})
/** echarts end */
</script>

<style scoped lang="scss">
.components-view {
  .example-block {
    padding: $BaseGapSpace;
    .example-title {
      margin-bottom: $BaseGapSpace;
    }
  }
  .chart-box {
    height: 600px;
  }

  .float-nav {
    right: 20px;
    top: 80px;
  }
}
</style>