<script lang="ts" setup name="CustomChart"> import type { FormRules } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus' const emits = defineEmits(['watchChild', 'refresh']) const dialogFormVisible = ref(false) // 对话框是否显示 const dataFormRef = ref() const dataForm = ref({ type: '', name: '', }) const rules: FormRules = { type: [{ required: true, message: '图表类型必选', trigger: ['blur', 'change'] }], name: [{ required: true, message: '图表名称必选', trigger: ['blur', 'change'] }], } // 前端校验规则 // 重置表单 const resetForm = () => { } const initDialog = () => { dialogFormVisible.value = true } defineExpose({ initDialog, }) const cancel = () => { dialogFormVisible.value = false } const chartList = ref([ { type: 'line', icon: 'icon-set-line', name: '折线图', }, { type: 'pie', icon: 'icon-set-pie', name: '饼图', }, { type: 'ring', icon: 'icon-set-ring', name: '环图', }, { type: 'bar-vertical', icon: 'icon-set-bar-vertical', name: '柱状图-水平', }, { type: 'bar-horizontal', icon: 'icon-set-bar-horizontal', name: '柱状图-垂直', }, { type: 'table', icon: 'icon-set-table', name: '表格', }, { type: 'rank', icon: 'icon-set-rank', name: '排行榜', }, ]) const selectChart = (item: any) => { dataForm.value.type = item.type dataFormRef.value.clearValidate('type') } const saveData = () => { dataFormRef.value.validate((valid: any) => { // if (valid) { // } }) } </script> <template> <el-dialog v-model="dialogFormVisible" title="自定义数据" append-to-body> <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px"> <el-row :gutter="20"> <el-col :span="20"> <el-form-item label="图表类型" prop="type"> <div class="type-container"> <div v-for="item in chartList" :key="item.type"> <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top" > <svg-icon :class="dataForm.type === item.type ? 'border' : ''" :name="item.icon" class="icon-button-icon" @click="selectChart(item)" /> </el-tooltip> </div> </div> </el-form-item> </el-col> <el-row /> </el-row> <el-row :gutter="20"> <el-col :span="20"> <el-form-item label="图表名称" prop="name"> <el-input v-model.trim="dataForm.name" type="text" placeholder="必填" /> </el-form-item> </el-col> </el-row> <el-row v-if="dataForm.type === 'line'" :gutter="20"> <el-col :span="20"> <el-form-item label="x轴数据" prop="xAxisData"> <el-input v-model.trim="dataForm.xAxisData" type="text" placeholder="多个数据用,分割。示例: 周一,周二" /> </el-form-item> </el-col> <el-col :span="20"> <el-form-item label="数据名称" prop="dataName"> <el-input v-model.trim="dataForm.dataName" type="text" placeholder="多个数据用,分割。示例: 在用,禁用,停用" /> </el-form-item> </el-col> <el-col :span="20"> <el-form-item label="数据" prop="data"> <el-input v-model.trim="dataForm.data" type="text" placeholder="多个数据用,分割。示例: [5,3],[2,6] 注意[]里面数字数量需等于x轴数据的个数" /> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="saveData"> 保存 </el-button> <el-button @click="cancel"> 取消 </el-button> </div> </template> </el-dialog> </template> <style lang="scss" scoped> .border { border: 2px solid #000; } .type-container { width: 100%; display: flex; justify-content: space-around; } .el-dialog { width: 700px; } .el-select { width: 100%; } .icon-button-icon { width: 44px; height: 44px; margin: 0 auto; // border: 1px solid #000; &:hover { cursor: pointer; // width: 45px; // height: 45px; box-shadow: 4px 4px 15px #666; } } </style>