@ganwei-web/ganwei-pc-cli 6.2.1 → 6.2.2

package/ganwei-iotcenter-index-6.2.1/packages/ganwei-iotcenter-template/src/views/template.vue

@@ -0,0 +1,1008 @@
+<template>
+    <div class="page">
+        <span class="header">二次封装组件主题适配测试</span>
+        <!-- el-button -->
+        <div class="box">
+            <span class="title">el-button</span>
+            <div class="box-row">
+                <el-button>Default</el-button>
+                <el-button type="primary">Primary</el-button>
+                <el-button type="success">Success</el-button>
+                <el-button type="info">Info</el-button>
+                <el-button type="warning">Warning</el-button>
+                <el-button type="danger">Danger</el-button>
+            </div>
+
+            <div class="box-row">
+                <el-button plain>Plain</el-button>
+                <el-button type="primary" plain>Primary</el-button>
+                <el-button type="success" plain>Success</el-button>
+                <el-button type="info" plain>Info</el-button>
+                <el-button type="warning" plain>Warning</el-button>
+                <el-button type="danger" plain>Danger</el-button>
+            </div>
+
+            <div class="box-row">
+                <el-button round>Round</el-button>
+                <el-button type="primary" round>Primary</el-button>
+                <el-button type="success" round>Success</el-button>
+                <el-button type="info" round>Info</el-button>
+                <el-button type="warning" round>Warning</el-button>
+                <el-button type="danger" round>Danger</el-button>
+            </div>
+
+            <div class="box-row">
+                <el-button icon="Search" circle />
+                <el-button type="primary" icon="Edit" circle />
+                <el-button type="success" icon="Check" circle />
+                <el-button type="info" icon="Message" circle />
+                <el-button type="warning" icon="Star" circle />
+                <el-button type="danger" icon="Delete" circle />
+            </div>
+        </div>
+
+        <!-- el-cascader -->
+        <div class="box">
+            <span class="title">el-cascader</span>
+            <el-cascader v-model="value" :options="options" :props="props" :show-all-levels="false" clearable />
+        </div>
+
+        <!-- el-checkbox -->
+        <div class="box">
+            <span class="title">el-checkbox</span>
+            <div class="box-row">
+                <el-checkbox v-model="checked1" label="Option1" />
+                <el-checkbox v-model="checked2" label="Option2" border />
+            </div>
+            <div class="box-row">
+                <el-checkbox-group v-model="checkList">
+                    <el-checkbox label="Option A" value="Value A" />
+                    <el-checkbox label="Option B" value="Value B" />
+                    <el-checkbox label="Option C" value="Value C" />
+                    <el-checkbox label="disabled" value="Value disabled" disabled />
+                    <el-checkbox label="selected and disabled" value="Value selected and disabled" disabled />
+                </el-checkbox-group>
+            </div>
+            <div class="box-row">
+                <el-checkbox-group v-model="checkboxGroup2">
+                    <el-checkbox-button v-for="city in cities" :key="city" :value="city">
+                        {{ city }}
+                    </el-checkbox-button>
+                </el-checkbox-group>
+            </div>
+        </div>
+
+        <!-- el-collapse -->
+        <!-- <div class="box">
+            <span class="title">el-collapse</span>
+            <el-collapse v-model="activeName" accordion>
+                <el-collapse-item title="Consistency" name="1">
+                    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+                    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+                </el-collapse-item>
+                <el-collapse-item title="Feedback" name="2">
+                    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+                    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+                </el-collapse-item>
+                <el-collapse-item title="Efficiency" name="3">
+                    <div>Simplify the process: keep operating process simple and intuitive;</div>
+                    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+                    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+                </el-collapse-item>
+            </el-collapse>
+        </div> -->
+
+        <!-- el-data-picker -->
+        <div class="box">
+            <span class="title">el-data-picker</span>
+            <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />
+            <el-date-picker v-model="value1" type="date" placeholder="Pick a day" disabled />
+            <el-date-picker v-model="value2" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
+            <el-date-picker v-model="value2" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" disabled />
+        </div>
+
+        <!-- el-dialog -->
+        <div class="box">
+            <span class="title">el-dialog</span>
+            <el-button plain @click="dialogVisible = true"> Click to open the Dialog </el-button>
+
+            <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
+                <span>This is a message</span>
+                <template #footer>
+                    <div class="dialog-footer">
+                        <el-button @click="dialogVisible = false">Cancel</el-button>
+                        <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
+                    </div>
+                </template>
+            </el-dialog>
+        </div>
+
+        <!-- el-drawer -->
+        <div class="box">
+            <span class="title">el-drawer</span>
+            <el-button type="primary" style="margin-left: 16px" @click="drawer = true"> open drawer</el-button>
+            <el-drawer v-model="drawer" :direction="direction">
+                <template #header>
+                    <span>set title by slot</span>
+                </template>
+                <template #default>
+                    <div>
+                        <el-radio v-model="radio1" value="Option 1" size="large"> Option 1 </el-radio>
+                        <el-radio v-model="radio1" value="Option 2" size="large"> Option 2 </el-radio>
+                    </div>
+                </template>
+                <template #footer>
+                    <div style="flex: auto">
+                        <el-button @click="cancelClick">cancel</el-button>
+                        <el-button type="primary" @click="confirmClick">confirm</el-button>
+                    </div>
+                </template>
+            </el-drawer>
+        </div>
+
+        <!-- el-dropdown -->
+        <div class="box">
+            <span class="title">el-dropdown</span>
+            <el-dropdown>
+                <span class="el-dropdown-link">
+                    Dropdown List
+                    <el-icon class="el-icon--right">
+                        <arrow-down />
+                    </el-icon>
+                </span>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item>Action 1</el-dropdown-item>
+                        <el-dropdown-item>Action 2</el-dropdown-item>
+                        <el-dropdown-item>Action 3</el-dropdown-item>
+                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
+                        <el-dropdown-item divided>Action 5</el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
+
+        <!-- el-form -->
+        <div class="box">
+            <span class="title">el-form</span>
+            <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
+                <el-form-item label="Input" prop="user">
+                    <el-input v-model="form.user" placeholder="Approved by" clearable />
+                </el-form-item>
+                <el-form-item label="Disabled input" prop="user1">
+                    <el-input v-model="form.user1" placeholder="Approved by" clearable disabled />
+                </el-form-item>
+                <el-form-item label="Select" prop="region">
+                    <el-select v-model="form.region" placeholder="Activity zone" clearable>
+                        <el-option label="Zone one" value="shanghai" />
+                        <el-option label="Zone two" value="beijing" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="Disabled select" prop="region1">
+                    <el-select v-model="form.region1" placeholder="Activity zone" clearable disabled>
+                        <el-option label="Zone one" value="shanghai" />
+                        <el-option label="Zone two" value="beijing" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="Date picker" prop="date">
+                    <el-date-picker v-model="form.date" type="date" placeholder="Pick a date" clearable />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSubmit">Query</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <!-- el-image -->
+        <div class="box">
+            <span class="title">el-image</span>
+            <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="[url]" fit="cover" />
+        </div>
+
+        <!-- el-input -->
+        <div class="box">
+            <span class="title">el-input</span>
+            <el-input v-model="input1" style="width: 200px;" placeholder="请输入" prefix-icon="Search"/>
+            <el-input v-model="input2" style="width: 200px;" placeholder="Type something" prefix-icon="Search" disabled/>
+        </div>
+
+        <!-- el-select -->
+        <div class="box">
+            <span class="title">el-select</span>
+            <div class="box-row">
+                <el-select v-model="select" placeholder="请选择" style="width: 240px">
+                    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
+                </el-select>
+            </div>
+            <div class="box-row">
+                <el-select v-model="select" placeholder="请选择" style="width: 240px" disabled>
+                    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
+                </el-select>
+            </div>
+        </div>
+
+        <!-- el-loading -->
+        <div class="box">
+            <span class="title">el-loading</span>
+            <div class="table">
+                <el-table v-loading="loading" height="100%" :data="tableData">
+                    <el-table-column prop="date" label="Date" width="180" />
+                    <el-table-column prop="name" label="Name" width="180" />
+                    <el-table-column prop="address" label="Address" />
+                </el-table>
+            </div>
+        </div>
+
+        <!-- el-menu -->
+        <!-- 级联菜单气泡背景色未设置 -->
+        <div class="box">
+            <span class="title">el-menu</span>
+            <div class="box-row">
+                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+                    <el-menu-item index="1">Processing Center</el-menu-item>
+                    <el-sub-menu index="2">
+                        <template #title>Workspace</template>
+                        <el-menu-item index="2-1">item one</el-menu-item>
+                        <el-menu-item index="2-2">item two</el-menu-item>
+                        <el-menu-item index="2-3">item three</el-menu-item>
+                        <el-sub-menu index="2-4">
+                            <template #title>item four</template>
+                            <el-menu-item index="2-4-1">item one</el-menu-item>
+                            <el-menu-item index="2-4-2">item two</el-menu-item>
+                            <el-menu-item index="2-4-3">item three</el-menu-item>
+                        </el-sub-menu>
+                    </el-sub-menu>
+                    <el-menu-item index="3">Info</el-menu-item>
+                    <el-menu-item index="4">Orders</el-menu-item>
+                </el-menu>
+            </div>
+            <div class="box-row">
+                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen">
+                    <el-sub-menu index="1">
+                        <template #title>
+                            <el-icon><location /></el-icon>
+                            <span>Navigator One</span>
+                        </template>
+                        <el-menu-item-group title="Group One">
+                            <el-menu-item index="1-1">item one</el-menu-item>
+                            <el-menu-item index="1-2">item two</el-menu-item>
+                        </el-menu-item-group>
+                        <el-menu-item-group title="Group Two">
+                            <el-menu-item index="1-3">item three</el-menu-item>
+                        </el-menu-item-group>
+                        <el-sub-menu index="1-4">
+                            <template #title>item four</template>
+                            <el-menu-item index="1-4-1">item one</el-menu-item>
+                        </el-sub-menu>
+                    </el-sub-menu>
+                    <el-menu-item index="2">
+                        <el-icon><Menu /></el-icon>
+                        <span>Navigator Two</span>
+                    </el-menu-item>
+                    <el-menu-item index="3" disabled>
+                        <el-icon><document /></el-icon>
+                        <span>Navigator Three</span>
+                    </el-menu-item>
+                    <el-menu-item index="4">
+                        <el-icon><Setting /></el-icon>
+                        <span>Navigator Four</span>
+                    </el-menu-item>
+                </el-menu>
+            </div>
+        </div>
+
+        <!-- el-message-box -->
+        <div class="box">
+            <span class="title">el-message-box</span>
+            <el-button plain @click="open">Click to open the Message Box</el-button>
+        </div>
+
+        <!-- el-notification -->
+        <div class="box">
+            <span class="title">el-notification</span>
+            <div class="box-row">
+                <el-button plain @click="open5">Primary</el-button>
+                <el-button plain @click="open1">Success</el-button>
+                <el-button plain @click="open2">Warning</el-button>
+                <el-button plain @click="open3">Info</el-button>
+                <el-button plain @click="open4">Error</el-button>
+            </div>
+        </div>
+
+        <!-- el-pagination -->
+        <div class="box">
+            <span class="title">el-pagination</span>
+            <el-pagination
+                v-model:current-page="currentPage4"
+                v-model:page-size="pageSize4"
+                :page-sizes="[100, 200, 300, 400]"
+                :size="size"
+                :disabled="disabled"
+                :background="background"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="400"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+            />
+        </div>
+
+        <!-- el-popover -->
+        <div class="box">
+            <span class="title">el-popover</span>
+            <div class="box-row">
+                <el-popover title="Title" content="Top Center prompts info" placement="top">
+                    <template #reference>
+                        <el-button>top</el-button>
+                    </template>
+                </el-popover>
+                <el-popover title="Title" content="Left Center prompts info" placement="left">
+                    <template #reference>
+                        <el-button class="mt-3 mb-3">left</el-button>
+                    </template>
+                </el-popover>
+                <el-popover title="Title" content="Right Center prompts info" placement="right">
+                    <template #reference>
+                        <el-button>right</el-button>
+                    </template>
+                </el-popover>
+                <el-popover title="Title" content="Bottom Center prompts info" placement="bottom">
+                    <template #reference> <el-button>bottom</el-button></template>
+                </el-popover>
+            </div>
+        </div>
+
+        <!-- el-radio-group -->
+        <div class="box">
+            <span class="title">el-radio-group</span>
+            <div class="box-row">
+                <el-radio-group v-model="radio">
+                    <el-radio :value="3">Option A</el-radio>
+                    <el-radio :value="6">Option B</el-radio>
+                    <el-radio :value="9" disabled>Option C</el-radio>
+                </el-radio-group>
+            </div>
+            <div class="box-row">
+                <el-radio-group v-model="radio2">
+                    <el-radio :value="1" border>Option A</el-radio>
+                    <el-radio :value="2" border>Option B</el-radio>
+                    <el-radio :value="3" border disabled>Option C</el-radio>
+                </el-radio-group>
+            </div>
+            <div class="box-row">
+                <el-radio-group v-model="radio3">
+                    <el-radio-button label="New York" value="New York" />
+                    <el-radio-button label="Washington" value="Washington" />
+                    <el-radio-button label="Los Angeles" value="Los Angeles" />
+                    <el-radio-button label="Chicago" value="Chicago" />
+                </el-radio-group>
+            </div>
+        </div>
+
+        
+
+        <!-- el-switch -->
+        <div class="box">
+            <span class="title">el-switch</span>
+            <div class="box-row">
+                <el-switch v-model="switch3" inline-prompt active-text="是" inactive-text="否" />
+                <el-switch v-model="switch4" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="Y" inactive-text="N" />
+                <el-switch v-model="switch5" width="60" inline-prompt active-text="超出省略" inactive-text="超出省略" />
+                <el-switch v-model="switch6" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="完整展示多个内容" inactive-text="多个内容" />
+            </div>
+        </div>
+
+        <!-- el-table -->
+        <div class="box">
+            <span class="title">el-table</span>
+            <div style="width: 40%;height: 200px;">
+                <el-table :data="tableData1" max-height="100%">
+                    <el-table-column prop="date" label="Date" width="150" />
+                    <el-table-column prop="name" label="Name" width="120" />
+                    <el-table-column prop="state" label="State" width="120" />
+                    <el-table-column prop="city" label="City" width="120" />
+                    <el-table-column prop="address" label="Address" width="600" />
+                    <el-table-column prop="zip" label="Zip" width="120" />
+                    <el-table-column fixed="right" label="Operations" min-width="120">
+                        <template #default="scope">
+                            <el-button type="text" size="small"> Remove </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+
+        <!-- el-time-picker -->
+        <div class="box">
+            <span class="title">el-time-picker</span>
+            <el-time-picker v-model="timePicker" placeholder="Arbitrary time" />
+            <el-time-picker v-model="timePicker" placeholder="Arbitrary time" disabled />
+        </div>
+
+        <!-- el-transfer -->
+        <div class="box">
+            <span class="title">el-transfer</span>
+            <el-transfer v-model="transferValue" filterable :filter-method="filterMethod" filter-placeholder="State Abbreviations" :data="data" />
+        </div>
+
+        <!-- el-tree -->
+        <div class="box">
+            <span class="title">el-tree</span>
+            <el-input v-model="filterText" style="width: 300px;" placeholder="Filter keyword" clearable />
+            <el-tree ref="treeRef" show-checkbox style="width: 300px" class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all :filter-node-method="filterNode" />
+        </div>
+
+        <!-- el-upload -->
+        <div class="box">
+            <span class="title">el-upload</span>
+            <span>文件上传</span>
+            <el-upload
+                v-model:file-list="fileList"
+                class="upload-demo"
+                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                multiple
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                :limit="3"
+                :on-exceed="handleExceed"
+            >
+                <el-button type="primary">Click to upload</el-button>
+                <template #tip>
+                    <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
+                </template>
+            </el-upload>
+            <br />
+            <span>图片上传</span>
+            <el-upload
+                v-if="!isCheck"
+                limit="1"
+                :on-exceed="handleUploadExceed"
+                list-type="picture"
+                :http-request="customUpload"
+                :before-upload="beforeUpload"
+                :on-remove="handleUploadRemove"
+                :file-list="imageList"
+            >
+                <div>
+                    <i style="font-size: 40px" class="el-icon-upload"></i>
+                    <div slot="tip" class="upload-tip">{{'请上传一张图片'}}</div>
+                </div>
+            </el-upload>
+            <el-image v-if="isCheck && viewImage" :src="viewImage" style="width: 100px; height: 100px; cursor: pointer" :preview-src-list="[viewImage]"></el-image>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import { ElMessage, ElMessageBox, ElNotification  } from 'element-plus'
+// el-cascader
+const value = ref([])
+const props = {
+  expandTrigger: 'hover', // 鼠标悬浮展开
+  multiple: true // 多选
+}
+const options = [
+  {
+    value: 'guide',
+    label: 'Guide',
+    children: [
+      {
+        value: 'disciplines',
+        label: 'Disciplines',
+        children: [
+          {
+            value: 'consistency',
+            label: 'Consistency',
+          },
+          {
+            value: 'feedback',
+            label: 'Feedback',
+          },
+          {
+            value: 'efficiency',
+            label: 'Efficiency',
+          },
+          {
+            value: 'controllability',
+            label: 'Controllability',
+          },
+        ],
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'side nav',
+            label: 'Side Navigation',
+          },
+          {
+            value: 'top nav',
+            label: 'Top Navigation',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'resource',
+    label: 'Resource',
+    children: [
+      {
+        value: 'axure',
+        label: 'Axure Components',
+      },
+      {
+        value: 'sketch',
+        label: 'Sketch Templates',
+      },
+      {
+        value: 'docs',
+        label: 'Design Documentation',
+      },
+    ],
+  },
+]
+// el-checkbox
+const checked1 = ref(false)
+const checked2 = ref(false)
+const checkList = ref(['Value selected and disabled', 'Value A'])
+const checkboxGroup2 = ref(['Shanghai'])
+const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
+// el-collapse
+const activeName = ref('1')
+// el-data-picker
+const value1 = ref('')
+const value2 = ref('')
+// el-dialog
+const dialogVisible = ref(false)
+
+const handleClose = (done) => {
+  ElMessageBox.confirm('Are you sure to close this dialog?')
+    .then(() => {
+      done()
+    })
+    .catch(() => {
+      // catch error
+    })
+}
+// el-drawer
+const drawer = ref(false)
+const radio1 = ref('Option 1')
+function cancelClick() {
+  drawer.value = false
+}
+function confirmClick() {
+  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
+    .then(() => {
+      drawer.value = false
+    })
+    .catch(() => {
+      // catch error
+    })
+}
+// el-form
+const form = reactive({
+  user: '',
+  region: '',
+  user1: '',
+  region1: '',
+  date: '',
+})
+const formRef = ref(null)
+const rules = reactive({
+  user: [
+    { required: true, message: 'Please input Activity name', trigger: 'blur' },
+  ],
+  region: [
+    { required: true, message: 'Please input Activity name', trigger: 'change' },
+  ],
+  date: [
+    { type: 'date', required: true, message: 'Please input Activity name', trigger: 'change' },
+  ],
+})
+const onSubmit = async () => {
+  await formRef.value.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+// el-image
+const url =
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+// el-input
+const input1 = ref('')
+const input2 = ref('')
+// el-table
+const loading = ref(true)
+const tableData = [
+  {
+    date: '2016-05-02',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-04',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-01',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+]
+// el-menu
+const activeIndex = ref('1')
+// el-message-box
+const open = () => {
+  ElMessageBox.confirm(
+    'proxy will permanently delete the file. Continue?',
+    'Warning',
+    {
+      confirmButtonText: 'OK',
+      cancelButtonText: 'Cancel',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: 'Delete completed',
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: 'Delete canceled',
+      })
+    })
+}
+// el-notification
+const open1 = () => {
+  ElNotification({
+    title: 'Success',
+    message: 'This is a success message',
+    type: 'success',
+    duration: 0
+  })
+}
+
+const open2 = () => {
+  ElNotification({
+    title: 'Warning',
+    message: 'This is a warning message',
+    type: 'warning',
+  })
+}
+
+const open3 = () => {
+  ElNotification({
+    title: 'Info',
+    message: 'This is an info message',
+    type: 'info',
+  })
+}
+
+const open4 = () => {
+  ElNotification({
+    title: 'Error',
+    message: 'This is an error message',
+    type: 'error',
+  })
+}
+
+const open5 = () => {
+  ElNotification({
+    title: 'Primary',
+    message: 'This is a primary message',
+    type: 'primary',
+  })
+}
+// el-pagination
+const pageSize4 = ref(100)
+const size = ref('default')
+const background = ref(true)
+const disabled = ref(false)
+const handleSizeChange = () => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = () => {
+  console.log(`current page: ${val}`)
+}
+// el-radio-group
+const radio = ref(3)
+const radio2 = ref(1)
+const radio3 = ref('New York')
+// el-select
+const select = ref('')
+const selectOptions = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+    disabled: true,
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+// el-switch
+const switch1 = ref(true)
+const switch2 = ref(true)
+const switch3 = ref(true)
+const switch4 = ref(true)
+const switch5 = ref(true)
+const switch6 = ref(true)
+// el-table
+const tableData1 = ref([
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+   {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+   {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+   {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+])
+// el-time-picker
+const timePicker = ref()
+// el-transfer
+const generateData = () => {
+  const data = [];
+  const states = [
+    'California',
+    'Illinois',
+    'Maryland',
+    'Texas',
+    'Florida',
+    'Colorado',
+    'Connecticut',
+    'Aaa',
+    'Bbb',
+    'Ccc'
+  ];
+  const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT', 'AA', 'BB', 'Cc'];
+
+  states.forEach((city, index) => {
+    data.push({
+      label: city,
+      key: index,
+      initial: initials[index],
+    });
+  });
+  return data;
+};
+// 响应式数据
+const data = ref(generateData());
+const transferValue = ref([]);
+
+// 过滤方法
+const filterMethod = (query, item) => {
+  return item.initial.toLowerCase().includes(query.toLowerCase());
+};
+
+// el-tree
+// 响应式过滤文本
+const filterText = ref('')
+// 树组件引用
+const treeRef = ref()
+
+// 树形结构配置
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+  disabled: 'disabled',
+}
+
+// 树形数据
+const treeData = [
+  {
+    id: 1,
+    label: 'Level one 1',
+    children: [
+      {
+        id: 4,
+        label: 'Level two 1-1',
+        children: [
+          { id: 9, label: 'Level three 1-1-1', disabled: true },
+          { id: 10, label: 'Level three 1-1-2' }
+        ]
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: 'Level one 2',
+    children: [
+      { id: 5, label: 'Level two 2-1' },
+      { id: 6, label: 'Level two 2-2' }
+    ]
+  },
+  {
+    id: 3,
+    label: 'Level one 3',
+    children: [
+      { id: 7, label: 'Level two 3-1' },
+      { id: 8, label: 'Level two 3-2' }
+    ]
+  }
+]
+
+// 监听过滤文本变化，触发树过滤
+watch(filterText, (val) => {
+  treeRef.value?.filter(val) // 使用可选链避免 undefined 错误
+})
+
+// 节点过滤方法
+const filterNode = (value, data) => {
+  if (!value) return true // 无过滤条件时显示所有节点
+  return data.label.includes(value) // 匹配标签包含过滤文本的节点
+}
+
+// el-upload
+// 文件列表（移除TS类型注解）
+const fileList = ref([
+  {
+    name: 'element-plus-logo.svg',
+    url: 'https://element-plus.org/images/element-plus-logo.svg',
+  },
+  {
+    name: 'element-plus-logo2.svg',
+    url: 'https://element-plus.org/images/element-plus-logo.svg',
+  },
+])
+
+// 移除文件回调
+const handleRemove = (file, uploadFiles) => {
+  console.log(file, uploadFiles)
+}
+
+// 预览文件回调
+const handlePreview = (uploadFile) => {
+  console.log(uploadFile)
+}
+
+// 超出文件数量限制回调
+const handleExceed = (files, uploadFiles) => {
+  ElMessage.warning(
+    `The limit is 3, you selected ${files.length} files this time, add up to ${
+      files.length + uploadFiles.length
+    } totally`
+  )
+}
+
+// 移除前确认回调
+const beforeRemove = (uploadFile, uploadFiles) => {
+  return ElMessageBox.confirm(
+    `Cancel the transfer of ${uploadFile.name} ?`
+  ).then(
+    () => true,
+    () => false
+  )
+}
+
+// 图片上传
+const isCheck = ref(false)
+const handleUploadExceed= () =>{
+    this.$message.warning('最多上传一张图片')
+}
+const customUpload = async (params)=>{
+    const formData = new FormData()
+    formData.append('formFile', params.file)
+    formData.append('subject', 'salesReceivable')
+    try {
+        const res = await this.$api.uploadFileApi(formData)
+        const { code, data } = res.data
+        if (code == 200) {
+            this.tableDialog.imageList.push({
+                uid: params.file.uid,
+                url: data[0].accessPath
+            })
+            console.log('this.tableDialog.imageList', this.tableDialog.imageList)
+            console.log('上传成功')
+        }
+    } catch (error) {
+        this.$message.error('上传失败')
+        console.log('上传失败', error)
+    }
+}
+</script>
+
+<style scoped>
+.page{
+  background-color: var(--frame-main-background-1);
+  padding: 20px 0;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+.header{
+  font-weight: 600;
+  font-size: 23px;
+  color: var(--frame-main-color);
+  text-align: center;
+}
+.box{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+
+  .title{
+    font-weight: 600;
+    font-size: 20px;
+    color: var(--frame-main-color);
+  }
+}
+/* el-button */
+.box-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+/* el-table */
+.table{
+  height: 300px;
+}
+</style>