柚子快報(bào)激活碼778899分享：vue elementUI2

http://yzkb.51969.com/

ElementUI

圖片引用查詢(xún)表單表格展示新增修改詳情圖表

圖片引用

import logoImg from '@/assets/logo/home.png'

data() {

return {

logo: logoImg,

}

}

查詢(xún)表單

v-model="queryParams.name"

placeholder="請(qǐng)輸入姓名"

clearable

@keyup.enter.native="handleQuery"

/>

v-model="queryParams.dateOfBirth"

type="date"

value-format="yyyy-MM-dd"

:picker-options="pickerOptions"

placeholder="請(qǐng)選擇出生日期">

搜索

重置

import { listInformation, getInformation, delInformation, addInformation, updateInformation } from "@/api/system/information";

export default {

data() {

return {

pickerOptions: {

disabledDate(time) {

return time.getTime() > Date.now();

},

},

// 遮罩層

loading: true,

// 總條數(shù)

total: 0,

// 信息表格數(shù)據(jù)

informationList: [],

// 查詢(xún)參數(shù)

queryParams: {

pageNum: 1,

pageSize: 10,

name: null,

dateOfBirth: null,

},

}

methods: {

/** 重置按鈕操作 */

resetQuery() {

this.resetForm("queryForm");

this.handleQuery();

},

/** 搜索按鈕操作 */

handleQuery() {

this.queryParams.pageNum = 1;

this.getList();

},

/** 查詢(xún)信息列表 */

getList() {

this.loading = true;

listInformation(this.queryParams).then(response => {

this.informationList = response.rows;

this.total = response.total;

this.loading = false;

});

},

}

}

表格展示

// 表格上面的按鈕

type="primary"

plain

icon="el-icon-plus"

size="mini"

@click="handleAdd"

v-hasPermi="['system:information:add']"

>新增

type="danger"

plain

icon="el-icon-delete"

size="mini"

:disabled="multiple"

@click="handleDelete"

v-hasPermi="['system:information:remove']"

>刪除

type="warning"

plain

icon="el-icon-download"

size="mini"

@click="handleExport"

v-hasPermi="['system:information:export']"

>導(dǎo)出

v-show="total>0"

:total="total"

:page.sync="queryParams.pageNum"

:limit.sync="queryParams.pageSize"

@pagination="getList"

/>

import { selectDictLabel} from '@/main.js'

import { listInformation, getInformation, delInformation, addInformation, updateInformation } from "@/api/system/information";

export default {

// 數(shù)據(jù)字典（這個(gè)是若依封裝好的）

dicts: ['sys_user_sex'],

data() {},

created() {

this.getList();

this.getUser();

this.getDeptTree();

},

methods: {

// 多選框選中數(shù)據(jù)

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 = "添加檔案基本信息";

},

/** 導(dǎo)出按鈕操作 */

handleExport() {

this.download('system/information/export', {

...this.queryParams

}, `information_${new Date().getTime()}.xlsx`)

}

//審批按鈕（確認(rèn)彈框）

updateStatus(row){

//根據(jù) row所選中的數(shù)據(jù)，傳入獲取ID,調(diào)用修改方法修改數(shù)據(jù)狀態(tài)

const id = row.id || this.ids

this.$modal.confirm('是否確認(rèn)審批檔案基本信息編號(hào)為"' + id + '"的數(shù)據(jù)項(xiàng)？').then(function() {

row.status="1";

return updateInformation(row);

}).then(() => {

this.getList();

this.$modal.msgSuccess("審批成功");

}).catch(() => {});

},

//取消審批（確認(rèn)彈框，需填入信息）

cancelStatus(row){

const id = row.id || this.ids

this.$prompt('請(qǐng)輸入檔案基本信息編號(hào)為"' + 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('是否確認(rèn)刪除檔案基本信息編號(hào)為"' + ids + '"的數(shù)據(jù)項(xiàng)？').then(function() {

return delInformation(ids);

}).then(() => {

this.getList();

this.$modal.msgSuccess("刪除成功");

}).catch(() => {});

},

// 表單重置

reset() {

this.form = {

id: null,

name: null,

sex: null,。。。

};

this.resetForm("form");

},

}

新增修改

v-for="dict in dict.type.sys_user_sex"

:key="dict.value"

:label="dict.label"

:value="dict.value">

v-model="form.dateOfBirth"

type="date"

value-format="yyyy-MM-dd"

:picker-options="pickerOptions"

placeholder="請(qǐng)選擇出生日期">

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("請(qǐng)輸入身份證號(hào))");

} 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("身份證號(hào)格式有誤！"));

} else {

callback();

}

}

};

//手機(jī)號(hào)格式校驗(yàn)

var validatorPhone = function (rule, value, callback) {

if (value === '') {

callback(new Error('手機(jī)號(hào)不能為空'))

} else if (!/^1\d{10}$/.test(value)) {

callback(new Error('手機(jī)號(hào)格式錯(cuò)誤'))

} else {

callback()

}

}

return {

// 表單校驗(yàn)

rules: {

name: [

{ required: true, message: '請(qǐng)輸入姓名', trigger: 'blur' },

{ min: 2, max: 5, message: '長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' }

],

sex: [

{ required: true, message: '請(qǐng)選擇性別', trigger: 'change' }

],

dateOfBirth: [

{ type: 'string', required: true, message: '請(qǐng)選擇出生日期', trigger: 'change' }

],

idCard: [

{ required: true, message: '請(qǐng)輸入身份證號(hào)', trigger: 'blur' },

{ validator: isCardId, message: '身份證號(hào)格式有誤', trigger: "blur" }

],

phone: [

{ required: true, message: '請(qǐng)輸入聯(lián)系電話(huà)', trigger: 'blur' },

{ validator: validatorPhone, message: '聯(lián)系電話(huà)格式有誤', 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: '請(qǐng)將必填信息填寫(xiě)完整?。?,

type: 'warning'

});

}

});

},

}

詳情

基礎(chǔ)信息

{{ form.name }}

{{ form.ethnicGroup }}

{{ form.dateOfBirth }}

{{ selectDictLabel(dict.type.type_status,form.type) }}

組織生活、社會(huì)活動(dòng)信息

{{ form.partyBranch }}

{{ selectDictLabel(dict.type.sys_socialduty,form.socialDuty) }}

圖表

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 => {

// 學(xué)歷/學(xué)位/戶(hù)籍類(lèi)別//審批狀態(tài)

this.dataEchars1=response[0].rows;。。。

this.initechars();

});

},

initechars(){

// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例

let myChart = echarts.init(this.$refs.chart);

// 指定圖表的配置項(xiàng)和數(shù)據(jù)

let option = {

title: {

text: '學(xué)歷狀態(tài)統(tǒng)計(jì)',

subtext: '全部檔案',

left: 'center'

},

tooltip: {

trigger: 'item'

},

legend: {

orient: 'vertical',

left: 'left'

},

series: [

{

name: '學(xué)歷狀態(tài)統(tǒng)計(jì)圖',

type: 'pie',

radius: '50%',

data: this.dataEchars1,

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表

myChart.setOption(option);

。。。。

},

}

};

@PreAuthorize("@ss.hasPermi('system:table:query')")

@GetMapping("/list1")

public List list1(SoldierInformation soldierInformation) {

List Null;

List list = soldierInformationService.selectAllSoldierInformationList();

//設(shè)置初始化Echars圖表數(shù)據(jù)集合

List pieChart1 = new ArrayList();

List pieChart2 = new ArrayList();。。。

//判斷表中數(shù)據(jù)不能為空

if (list.size() > 0) {

//學(xué)歷情況

int qualification1 = 0;//博士研究生

int qualification2 = 0;//碩士研究生。。。

//學(xué)位情況

int education1 = 0;//博士

int education2 = 0;//碩士。。。

if (list.size() > 0) {

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

//計(jì)算學(xué)歷情況

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 。。。

//計(jì)算學(xué)位情況

if (("0").equals(list.get(i).getEducation1())) {

education1 += 1;

} else if (("1").equals(list.get(i).getEducation1())) {

education2 += 1;

} else。。。

}

//學(xué)位情況

pieChart1.add(new PieChart("博士研究生", qualification1));

pieChart1.add(new PieChart("碩士研究生", qualification2));。。。

//學(xué)位情況

pieChart2.add(new PieChart("博士", education1));

pieChart2.add(new PieChart("碩士", education2));。。。

}

}

TableDataInfo tableDataInfo1 = getDataTable(pieChart1);

TableDataInfo tableDataInfo2 = getDataTable(pieChart2);。。。

List resultList = new ArrayList<>();

resultList.add(tableDataInfo1);

resultList.add(tableDataInfo2);。。。

return resultList;

}

柚子快報(bào)激活碼778899分享：vue elementUI2

http://yzkb.51969.com/

相關(guān)閱讀