elementUI2

LuckyGuyy2024-04-06 18:09

ElementUI

图片引用

js 复制代码 
	<img :src="logo" width="100%" height="100%"/>
	
	import logoImg from '@/assets/logo/home.png'
	data() {
	    return {
	      logo: logoImg,
	    }
	}

查询表单

javascript 复制代码 
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 <el-form-item label="姓名" prop="name">
   <el-input
     v-model="queryParams.name"
     placeholder="请输入姓名"
     clearable
     @keyup.enter.native="handleQuery"
   />
 </el-form-item>
 <el-form-item label="出生日期" prop="dateOfBirth">
   <el-date-picker clearable
     v-model="queryParams.dateOfBirth"
     type="date"
     value-format="yyyy-MM-dd"
     :picker-options="pickerOptions"
     placeholder="请选择出生日期">
   </el-date-picker>
 </el-form-item>
 <el-form-item>
   <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
   <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
 </el-form-item>
</el-form>

import { listInformation, getInformation, delInformation, addInformation, updateInformation } from "@/api/system/information";
export default {
	data() {
	    return {
	      pickerOptions: {
	          disabledDate(time) {
	            return time.getTime() > Date.now();
	          },
	      },
	      // 遮罩层
	      loading: true,
	      // 总条数
	      total: 0,
	      // 信息表格数据
	      informationList: [],
	      // 查询参数
	      queryParams: {
	        pageNum: 1,
	        pageSize: 10,
	        name: null,
	        dateOfBirth: null,
	      },
    }
    methods: {
		/** 重置按钮操作 */
		resetQuery() {
		 this.resetForm("queryForm");
		 this.handleQuery();
		},
		/** 搜索按钮操作 */
		handleQuery() {
		 this.queryParams.pageNum = 1;
		 this.getList();
		},
		/** 查询信息列表 */
		getList() {
		 this.loading = true;
		 listInformation(this.queryParams).then(response => {
		   this.informationList = response.rows;
		   this.total = response.total;
		   this.loading = false;
		 });
		},
	}
}

表格展示

html 复制代码 
// 表格上面的按钮
<el-row :gutter="10" class="mb8">
  <el-col :span="1.5">
    <el-button
      type="primary"
      plain
      icon="el-icon-plus"
      size="mini"
      @click="handleAdd"
      v-hasPermi="['system:information:add']"
    >新增</el-button>
  </el-col>
  <el-col :span="1.5">
    <el-button
      type="danger"
      plain
      icon="el-icon-delete"
      size="mini"
      :disabled="multiple"
      @click="handleDelete"
      v-hasPermi="['system:information:remove']"
    >删除</el-button>
  </el-col>
  <el-col :span="1.5">
    <el-button
      type="warning"
      plain
      icon="el-icon-download"
      size="mini"
      @click="handleExport"
      v-hasPermi="['system:information:export']"
    >导出</el-button>
  </el-col>
  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>

<el-table v-loading="loading" :data="informationList" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="主键" align="center" prop="id" />
  <el-table-column label="姓名" align="center" prop="name" />
  <el-table-column label="性别" align="center" prop="sex" >
    <template slot-scope="scope">
      <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex ? scope.row.sex.split(',') : []"/>
    </template>
    </el-table-column>
  <el-table-column label="审核状态" align="center" prop="status" v-if="user.userName!='admin' ">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.info_status" :value="scope.row.status ? scope.row.status.split(',') : []"/>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center"  fixed="right" class-name="small-padding fixed-width"  width="240px">
    <template slot-scope="scope">
      <span v-if="user.userName=='admin' ">
        <el-button
            size="mini"
            type="text"
            @click="updateStatus(scope.row)"
            v-hasPermi="['system:information:edit']"
          >审批</el-button>
        <el-button
            size="mini"
            type="text"
            @click="cancelStatus(scope.row)"
            v-hasPermi="['system:information:edit']"
          >取消审批</el-button>
        <el-button
            size="mini"
            type="text"
            @click="handleView(scope.row)"
            v-hasPermi="['system:information:edit']"
          >查看详情</el-button>
          <br/>
      </span>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-edit"
        @click="handleUpdate(scope.row)"
        v-hasPermi="['system:information:edit']"
        style="margin-left: 10px;"
      >修改</el-button>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-delete"
        @click="handleDelete(scope.row)"
        v-hasPermi="['system:information:remove']"
      >删除</el-button>
    </template>
  </el-table-column>
</el-table>
<pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
javascript 复制代码 
import { selectDictLabel} from '@/main.js'
import { listInformation, getInformation, delInformation, addInformation, updateInformation } from "@/api/system/information";
export default {
	// 数据字典（这个是若依封装好的）
	dicts: ['sys_user_sex'],
	data() {},
	created() {
	    this.getList();
	    this.getUser();
	    this.getDeptTree();
	},
	methods: {
		// 多选框选中数据
		handleSelectionChange(selection) {
		  this.ids = selection.map(item => item.id)
		  this.single = selection.length!==1
		  this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
		  this.reset();
		  this.open = true;
		  this.title = "添加档案基本信息";
		},
		/** 导出按钮操作 */
		 handleExport() {
		   this.download('system/information/export', {
		     ...this.queryParams
		   }, `information_${new Date().getTime()}.xlsx`)
		 }
		//审批按钮（确认弹框）
		updateStatus(row){
		   //根据 row所选中的数据，传入获取ID,调用修改方法修改数据状态
		    const id = row.id || this.ids
		    this.$modal.confirm('是否确认审批档案基本信息编号为"' + id + '"的数据项？').then(function() {
			    row.status="1";
			    return updateInformation(row);
			  }).then(() => {
			    this.getList();
			    this.$modal.msgSuccess("审批成功");
		 	 }).catch(() => {});
		},
		//取消审批（确认弹框，需填入信息）
		cancelStatus(row){
		  const id = row.id || this.ids
		  this.$prompt('请输入档案基本信息编号为"' + id + '"取消审批的原因：', '提示', {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		    }).then(({ value }) => {
		      row.status = "2";
		      row.rmk = value;
		      updateInformation(row);
		      this.getList();
		      this.$modal.msgSuccess("取消成功");
		    }).catch(() => {});
		},
		/** 详情按钮操作 */
		handleView(row){
		  this.reset();
		  const id = row.id || this.ids
		  getInformation(id).then(response => {
		    this.form = response.data;
		    this.openDetail = true;
		    
		  });
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
		  this.reset();
		  const id = row.id || this.ids
		  getInformation(id).then(response => {
		    this.form = response.data;
		    this.open = true;
		    this.title = "修改档案基本信息";
		  });
		},
		/** 删除按钮操作 */
		handleDelete(row) {
		  const ids = row.id || this.ids;
		  this.$modal.confirm('是否确认删除档案基本信息编号为"' + ids + '"的数据项？').then(function() {
		    return delInformation(ids);
		  }).then(() => {
		    this.getList();
		    this.$modal.msgSuccess("删除成功");
		  }).catch(() => {});
		},
		// 表单重置
		reset() {
		  this.form = {
		    id: null,
		    name: null,
		    sex: null,。。。
		  };
		  this.resetForm("form");
		},
	}

新增修改

html 复制代码 
<!-- 添加或修改档案基本信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body>
  <el-form ref="form" :model="form" :rules="rules" label-width="160px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础身份信息" name="first">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期" prop="dateOfBirth">
              <el-date-picker clearable
                v-model="form.dateOfBirth"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                placeholder="请选择出生日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
      
      <el-tab-pane label="组织生活、社会活动信息" name="second">
        <el-row>
          <el-col :span="24">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>
javascript 复制代码 
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
 name: "Information",
  dicts: ['sys_info_marital_status', 。。。],
  components: { Treeselect },
  data() {
  	var isCardId = (rule, value, callback) => {
      if (!value) {
        return new Error("请输入身份证号)");
      } else {
          const reg =
            /^[1-9]\d{5}(18|19|20|21|22|23|24)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
          const card = reg.test(value);
          if (!card) { 
            callback(new Error("身份证号格式有误！"));
          } else {
            callback();
          }
      }
    };
    //手机号格式校验
    var validatorPhone = function (rule, value, callback) {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }

    return {
      // 表单校验
      rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          dateOfBirth: [
            { type: 'string', required: true, message: '请选择出生日期', trigger: 'change' }
          ],
          idCard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { validator: isCardId, message: '身份证号格式有误', trigger: "blur" }
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            { validator: validatorPhone, message: '联系电话格式有误', trigger: "blur" }
          ],
          
      }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
	/** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateInformation(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInformation(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        } else {
          this.$message({
            message: '请将必填信息填写完整！！',
            type: 'warning'
          });
        }
      });
    },
 }

详情

html 复制代码 
<!-- 信息详细 -->
<el-dialog title="信息详细" :visible.sync="openDetail" width="1000px" append-to-body>
  <el-form ref="form" :model="form" label-width="160px" size="mini">
    <dev style="margin-bottom: 20px;font-size: 18px; " >
      <b style="margin-left: 450px;">基础信息</b>
    </dev>
    <el-row style="margin-top: 20px;">
      <el-col :span="6">
        <el-form-item label="姓名：">{{ form.name }}</el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="民族：">{{ form.ethnicGroup }}</el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="出生日期：">{{ form.dateOfBirth }}</el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="户籍类别：">{{ selectDictLabel(dict.type.type_status,form.type) }}</el-form-item>
      </el-col>
    </el-row>
    <dev style="margin-bottom: 20px;font-size: 18px;">
      <b style="margin-left: 400px;">组织生活、社会活动信息</b>
    </dev>
    <el-row style="margin-top: 20px;">
      <el-col :span="12">
        <el-form-item label="所在党支部：">{{ form.partyBranch }}</el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="社会职务：">{{ selectDictLabel(dict.type.sys_socialduty,form.socialDuty) }}</el-form-item>
      </el-col>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="openDetail = false">关 闭</el-button>
  </div>
</el-dialog>

图表

js 复制代码 
<div>
  <el-row style="margin-top: 40px;margin-left: 30px;">
   <el-col  :span="12">
    <div ref="chart" style="width: 600px; height: 400px;"></div>
   </el-col>
   。。。
  </el-row>
</div>

import { listInformation2 } from "@/api/system/table";
import * as echarts  from 'echarts';
export default {
  name: "Table",
  data() {
    return {
      dataEchars1:[],
      dataEchars2:[],
      dataEchars3:[],
      dataEchars4:[],
    };
  },
  created() {
  this.getList2();
  },
  methods: {
    getList2() {
        listInformation2().then(response => {
          // 学历/学位/户籍类别//审批状态
          this.dataEchars1=response[0].rows;。。。
          this.initechars();  
        });
    },
    initechars(){
         // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(this.$refs.chart);
        // 指定图表的配置项和数据
        let  option = {
            title: {
              text: '学历状态统计',
              subtext: '全部档案',
              left: 'center'
            },
            tooltip: {
            trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
            {
              name: '学历状态统计图',
              type: 'pie',
              radius: '50%',
              data: this.dataEchars1,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
            ]
            };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
        。。。。
    },
  }
};
java 复制代码 
@PreAuthorize("@ss.hasPermi('system:table:query')")
@GetMapping("/list1")
public List<TableDataInfo> list1(SoldierInformation soldierInformation) {
    List<Long> Null;
    List<SoldierInformation> list = soldierInformationService.selectAllSoldierInformationList();

    //设置初始化Echars图表数据集合
    List<PieChart> pieChart1 = new ArrayList<PieChart>();
    List<PieChart> pieChart2 = new ArrayList<PieChart>();。。。
    //判断表中数据不能为空
    if (list.size() > 0) {

        //学历情况
        int qualification1 = 0;//博士研究生
        int qualification2 = 0;//硕士研究生。。。
        //学位情况
        int education1 = 0;//博士
        int education2 = 0;//硕士。。。

        if (list.size() > 0) {
            for (int i = 0; i < list.size(); i++) {

                //计算学历情况
                if (("0").equals(list.get(i).getEducation())) {
                    qualification1 += 1;
                } else if (("1").equals(list.get(i).getEducation())) {
                    qualification2 += 1;
                } else if (("2").equals(list.get(i).getEducation())) {
                    qualification3 += 1;
                } else 。。。
                //计算学位情况
                if (("0").equals(list.get(i).getEducation1())) {
                    education1 += 1;
                } else if (("1").equals(list.get(i).getEducation1())) {
                    education2 += 1;
                } else。。。

            }
            //学位情况
            pieChart1.add(new PieChart("博士研究生", qualification1));
            pieChart1.add(new PieChart("硕士研究生", qualification2));。。。
            //学位情况
            pieChart2.add(new PieChart("博士", education1));
            pieChart2.add(new PieChart("硕士", education2));。。。
        }
    }
    TableDataInfo tableDataInfo1 = getDataTable(pieChart1);
    TableDataInfo tableDataInfo2 = getDataTable(pieChart2);。。。
    List<TableDataInfo> resultList =  new ArrayList<>();
    resultList.add(tableDataInfo1);
    resultList.add(tableDataInfo2);。。。
    return resultList;
}
相关推荐
别拿曾经看以后~24 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Yaml47 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
lfl1832616216021 小时前
el-date-picker 设置开始时间和结束时间
前端·vue.js·elementui
牛先森家的牛奶1 天前
elementui中的新增弹窗在新增数据成功后再新增 发现数据无法清除解决方法
前端·javascript·elementui
琴～～2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统（附源码，文档）
java·vue·springboot·宠物·宠物商城
dy17172 天前
el-date-picker日期选择器动态设置日期
前端·vue.js·elementui
卡布叻_星星2 天前
同一个页面击穿element样式后，会影响同样组件的使用
前端·vue.js·elementui
加油小吃货2 天前
定义全局键盘监听事件，el-dialog中删除不可用
javascript·vue.js·elementui
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play