一、背景
- 在前端显示页面中，我们有时候喜欢用卡片风格，比如说这样的：
二、卡片风格
<el-row v-if="cardType" style="height: calc(100% - 70px);">
<el-col
v-for="item in dataList"
:key="item.id"
style="margin-top: 20px;padding-left: 8px;padding-right: 8px"
:xs="24" :sm="12" :lg="6"
>
<el-card>
<div slot="header" class="clearfix">
<i class="el-icon-tickets" /><span style="margin-left: 5px">{
{
item.name
}}</span>
<div
style="display: inline-block; float: right; cursor: pointer"
@click="handleUpdate(item)"
v-hasPermi="['workmanship:processConfig:update']"
>
<el-tooltip effect="dark" content="修改" placement="top">
<i class="el-icon-edit-outline" style="margin-left: 15px" />
</el-tooltip>
</div>
</div>
<div>
<ul class="role-info">
<li>
<div class="role-left">流程编号：{
{ item.id }}</div>
</li>
<li>
<div class="role-left">归属部门：{
{ item.deptName }}</div>
</li>
<li>
<div class="role-left">
创建时间{
{ parseTime(item.createTime) }}
</div>
</li>
<li>
<div class="role-left">
备注：{
{ item.remark }}
</div>
</li>
</ul>
</div>
<el-divider></el-divider>
<div
style="display: inline-block; float: left; cursor: pointer;margin-bottom: 10px;"
@click="doConfig(item)"
v-hasPermi="['workmanship:processConfig:config']"
>
<el-tooltip effect="dark" content="流程配置" placement="bottom">
<i class="el-icon-s-tools" />
</el-tooltip>
</div>
<div
style="display: inline-block; float: left; cursor: pointer;margin-left: 10px;margin-bottom: 10px;"
@click="doShowViem(item)"
v-hasPermi="['workmanship:processConfig:show']"
>
<el-tooltip effect="dark" content="流程查看" placement="bottom">
<i class="el-icon-view" />
</el-tooltip>
</div>
<div
style="display: inline-block; float: right; cursor: pointer;margin-bottom: 10px;"
@click="handleDelete(item)"
v-hasPermi="['workmanship:processConfig:remove']"
>
<el-tooltip effect="dark" content="删除" placement="bottom">
<i class="el-icon-delete" style="margin-left: 15px" />
</el-tooltip>
</div>
</el-card>
</el-col>
</el-row>
<paginations
v-if="cardType"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
三、列表风格
<el-table v-loading="loading"
v-if="!cardType"
:data="dataList"
border
stripe
:header-cell-style="{backgroundColor:'#A0CCF3',color:'#000000'}">
<el-table-column label="流程编号" align="left" prop="id"/>
<el-table-column label="流程名称" align="left" prop="name"/>
<el-table-column label="归属部门" align="left" prop="deptName"/>
<el-table-column label="创建日期" align="left" prop="createTime">
<template slot-scope="scope">
<span>{
{ parseTime(scope.row.createTime)}}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="left" prop="remark" :show-overflow-tooltip="true"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
v-hasPermi="['workmanship:processConfig:config']">
<router-link :to="{path:'/workmanship/process/config',query: {id: scope.row.id,deptCode: scope.row.deptCode}}" class="link-type">
<span style="color: #409EFF ">流程配置</span>
</router-link>
</el-button>
<el-button
size="mini"
type="text"
v-hasPermi="['workmanship:processConfig:show']">
<router-link :to="{path:'/workmanship/process/show',query: {id: scope.row.id,deptCode: scope.row.deptCode}}" class="link-type">
<span style="color: #409EFF ">流程查看</span>
</router-link>
</el-button>
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
v-hasPermi="['workmanship:processConfig:update']"
>修改</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
v-hasPermi="['workmanship:processConfig:remove']"
class="mpc_del"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-if="!cardType"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
四、实现两种风格的切换
- 增加一个切换按钮，并增加cardType变量，为true时显示卡片风格，为false时显示列表风格，用户点击此按钮可自由切换两种风格.
<el-form-item class="option-button">
<el-button type="primary" size="mini" @click="toggle" v-if="!cardType">
<el-button-context class-name="ic_apps" text="切换"/>
</el-button>
<el-button type="primary" size="mini" @click="toggle" v-if="cardType">
<el-button-context class-name="ic_dehaze" text="切换"/>
</el-button>
</el-form-item>
五、页面全部源码
<template>
<div class="app-container">
<el-row :gutter="10" class="mb16 mpc-section" >
<el-col :span="1.5">
<el-button type="primary" size="mini" @click="handleAdd" >
<el-button-context class-name="fun-new" text="新增"/>
</el-button>
</el-col>
</el-row>
<el-form class="mpc-section" :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
clearable
@keyup.enter.native="handleQuery"
@clear="handleQuery"
/>
</el-form-item>
<el-form-item class="option-button">
<el-button type="primary" size="mini" @click="handleQuery">
<el-button-context class-name="fun-search" text="查询"/>
</el-button>
<el-button type="primary" size="mini" @click="toggle" v-if="!cardType">
<el-button-context class-name="ic_apps" text="切换"/>
</el-button>
<el-button type="primary" size="mini" @click="toggle" v-if="cardType">
<el-button-context class-name="ic_dehaze" text="切换"/>
</el-button>
</el-form-item>
</el-form>
<!-- 在el-table的外围添加一个div，包裹至pagination后面 -->
<div :class="
'mpc-table-section','mpc-table-normal','mpc-table-normal-nofuntion')">
<el-table v-loading="loading"
v-if="!cardType"
:data="dataList"
border
stripe
:header-cell-style="{backgroundColor:'#A0CCF3',color:'#000000'}">
<el-table-column label="编号" align="left" prop="id"/>
<el-table-column label="名称" align="left" prop="name"/>
<el-table-column label="归属部门" align="left" prop="deptName"/>
<el-table-column label="创建日期" align="left" prop="createTime">
<template slot-scope="scope">
<span>{
{ parseTime(scope.row.createTime)}}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="left" prop="remark" :show-overflow-tooltip="true"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text">
<router-link :to="{path:'/workmanship/process/config',query: {id: scope.row.id,deptCode: scope.row.deptCode}}" class="link-type">
<span style="color: #409EFF ">流程配置</span>
</router-link>
</el-button>
<el-button
size="mini"
type="text">
<router-link :to="{path:'/workmanship/process/show',query: {id: scope.row.id,deptCode: scope.row.deptCode}}" class="link-type">
<span style="color: #409EFF ">流程查看</span>
</router-link>
</el-button>
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
class="mpc_del"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-if="!cardType"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<el-row v-if="cardType" style="height: calc(100% - 70px);">
<el-col
v-for="item in dataList"
:key="item.id"
style="margin-top: 20px;padding-left: 8px;padding-right: 8px"
:xs="24" :sm="12" :lg="6"
>
<el-card>
<div slot="header" class="clearfix">
<i class="el-icon-tickets" /><span style="margin-left: 5px">{
{
item.name
}}</span>
<div
style="display: inline-block; float: right; cursor: pointer"
@click="handleUpdate(item)"
>
<el-tooltip effect="dark" content="修改" placement="top">
<i class="el-icon-edit-outline" style="margin-left: 15px" />
</el-tooltip>
</div>
</div>
<div>
<ul class="role-info">
<li>
<div class="role-left">流程编号：{
{ item.id }}</div>
</li>
<li>
<div class="role-left">归属部门：{
{ item.deptName }}</div>
</li>
<li>
<div class="role-left">
创建时间{
{ parseTime(item.createTime) }}
</div>
</li>
<li>
<div class="role-left">
备注：{
{ item.remark }}
</div>
</li>
</ul>
</div>
<el-divider></el-divider>
<div
style="display: inline-block; float: left; cursor: pointer;margin-bottom: 10px;"
@click="doConfig(item)"
>
<el-tooltip effect="dark" content="配置" placement="bottom">
<i class="el-icon-s-tools" />
</el-tooltip>
</div>
<div
style="display: inline-block; float: left; cursor: pointer;margin-left: 10px;margin-bottom: 10px;"
@click="doShowViem(item)"
>
<el-tooltip effect="dark" content="查看" placement="bottom">
<i class="el-icon-view" />
</el-tooltip>
</div>
<div
style="display: inline-block; float: right; cursor: pointer;margin-bottom: 10px;"
@click="handleDelete(item)"
>
<el-tooltip effect="dark" content="删除" placement="bottom">
<i class="el-icon-delete" style="margin-left: 15px" />
</el-tooltip>
</div>
</el-card>
</el-col>
</el-row>
<paginations
v-if="cardType"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<el-dialog :title="title" :visible.sync="open" append-to-body :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" :disabled="disableType"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="归属部门" prop="deptCode">
<treeselect v-model="form.deptCode" :options="deptOptions" :normalizer="deptNormalizer" placeholder="请选择归属部门" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark" class="textarea_fix">
<el-input v-model.trim="form.remark" type="textarea" rows="3" placeholder="请输入备注信息"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" v-preventReClick="2000">保 存</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { getInfos,save,getProject,update,del } from "@/api/workmanship/processConfig/config";
import { optionDeptApi,listDeptTreeApi,listDeptApi } from '@/api/system/organize/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import ElButtonContext from '@/components/Mes/ElButtonContext'
export default {
name: "processConfig",
components: { ElButtonContext, Treeselect },
data() {
const isNum = (rule, value, callback) => {
if (!Number(value)) {
callback(new Error('请输入数字'))
}else{
callback()
}
}
return {
cardType:false,
disableType:false,//输入框默认可输入
multiple: true, // 非多个禁用(批量删除)
total: 0, // 总条数
queryParams:{ // 查询条件
pageNum: 1,
pageSize: 20,
workmanshipName:undefined,
beginTime:undefined,
endTime:undefined
},
// 部门树选项
deptOptions: [],
dataList:[], // 显示数据(主页面)
dateRange: [], // 查询日期范围
showSearch: true,// 显示搜索条件
title: "", // 弹出层标题(新增修改)
open: false, // 是否显示弹出层(新增修改)
form:{ }, // 表单(新增修改)
submitLoading: false,
loading:true,
rules: { // 表单校验(新增修改)
name: [
{ required: true, message: "流程名称不能为空", trigger: "blur" },
{ min: 0, max: 100, message: "长度在 0 到 100 个字符" },
],
deptCode:[
{ required: true, message: "部门编号不能为空", trigger: "blur" },
{ min: 0, max: 100, message: "长度在 0 到 50 个字符" },
],
remark:[
{ min: 0, max: 200, message: "长度在 0 到 200 个字符" },
]
},
}
},
created() {
this.getList();
this.getOptions();
},
methods:{
doConfig(item){
this.$router.push({
path: '/workmanship/process/config',
query: {id: item.id,deptCode: item.deptCode}
})
},
doShowViem(item){
this.$router.push({
path: '/workmanship/process/show',
query: {id: item.id,deptCode: item.deptCode}
})
},
toggle(){
this.cardType = !this.cardType
if(this.cardType){
this.queryParams.pageSize = 8
this.getList();
}else{
this.queryParams.pageSize = 20
this.getList();
}
},
/** 查询部门列表 */
getOptions() {
this.deptOptions = []
listDeptTreeApi().then(response => {
this.deptOptions = response.data
})
},
/** 转换树数据结构 */
deptNormalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.code,
label: node.name,
isDisabled: false,
children: node.children
}
},
// 表单重置（新增修改）
reset() {
this.form = {
id: undefined,
workmanshipName: undefined,
workmanshipCode: undefined,
remark: undefined,
};
this.resetForm("form");
},
//数据列表
getList(){
this.loading = true;
this.queryParams.beginTime=this.dateRange !=null?this.dateRange[0]:null;
this.queryParams.endTime=this.dateRange !=null?this.dateRange[1]:null;
getInfos(this.queryParams).then(response => {
if (response.rows.length == 0 && this.queryParams.pageNum > 1) {
this.queryParams.pageNum = this.queryParams.pageNum - 1;
this.total = response.total;
this.getList();
} else {
this.dataList = response.rows;
this.total = response.total;
this.loading = false;
}
})
},
//点击查询
handleQuery(){
this.queryParams.pageNum = 1;
this.getList();
},
//点击新增
handleAdd(){
this.reset();// 表单重置（新增工艺）
this.disableType=false;//input框可输入
this.open = true;// 打开（新增工艺）模态框
this.title = "新增工艺";//（新增修改模态框）动态标题
},
//点击批量删除
handleDelete(row){
const workmanshipIds = row.id || this.ids//获取选中数据的工艺id
this.$confirm('是否确认删除选中的数据', "警告", {
closeOnClickModal: false,
confirmButtonText: "确定",
cancelButtonText: "关闭",
type: "warning"
}).then(function() {
return del(workmanshipIds);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(function() {});
},
//点击修改
handleUpdate(row){
this.reset();// 表单重置（修改工艺）
this.form = row;
this.open = true;
this.title = "修改工艺";
},
//点击模态框提交
submitForm(){
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
update(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
//新增接口数据
save(this.form).then(response => {
if (response.code === 200) {//返回code等于200时，新增成功
this.msgSuccess("新增成功");//弹出新增成功模态框
this.open = false;//关闭新增模态框
this.getList();//刷新工艺列表数据
}
});
}
}
})
},
//点击模态框取消
cancel(){
this.open = false;//关闭模态框（新增修改上传）
this.attribute=false;
this.reset();// 表单重置
this.getList();
}
}
}
</script>
<style scoped>
</style>
<style scoped>
/deep/ .el-dialog__body {
max-height: calc(100vh - 300px);
padding: 24px 24px 24px 24px !important;
margin-bottom: 0px;
background-color: #FFFFFF;
font-weight:lighter;
overflow-y: auto;
}
</style>