You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1143 lines
30 KiB
1143 lines
30 KiB
<template> |
|
<!-- 表格组件 --> |
|
<div class="el-content-el" ref="TabHeight"> |
|
<!-- 顶部开始 --> |
|
<div class="el-Cart-button"> |
|
<!-- 表格顶部左侧按钮 --> |
|
<div class="el-Cart-button-left"> |
|
<el-button type="primary" @click="AddInfo" |
|
><el-icon><Plus /></el-icon>新 增</el-button |
|
> |
|
<el-button @click="handleDelete" |
|
><el-icon><Delete /></el-icon>删 除</el-button |
|
> |
|
<el-button @click="handleDelete" |
|
><el-icon><Edit /></el-icon>查看维修记录</el-button |
|
> |
|
<!-- <el-button link type="primary" icon="el-icon-view" @click="toggleSelection()" |
|
>多选测试</el-button |
|
> --> |
|
</div> |
|
<!-- 表格顶部右侧按钮 --> |
|
<div class="el-Cart-button-right"> |
|
<!-- 刷新按钮 --> |
|
<button> |
|
<el-icon color="#ccc"><Refresh /></el-icon> |
|
</button> |
|
<!-- 功能按钮 --> |
|
<button @click="menu = true"> |
|
<el-icon color="#ccc"><Operation /></el-icon> |
|
</button> |
|
<!-- 搜索按钮 --> |
|
<button> |
|
<el-icon color="#ccc"><Search /></el-icon> |
|
</button> |
|
</div> |
|
</div> |
|
<!-- 顶部结束 --> |
|
<div class="el-Cart"> |
|
<!-- 表格列开始 --> |
|
<el-table |
|
v-loading="loading" |
|
element-loading-text="数据正在更新中..." |
|
:data="data" |
|
row-key="name" |
|
border |
|
:height="TabHeight + 'px'" |
|
style="width: 100%" |
|
ref="tableRef" |
|
@select-all="selectAll" |
|
@select="selectChange" |
|
> |
|
<el-table-column type="selection" width="55" fixed /> |
|
<el-table-column type="index" fixed width="50" height="100" label="#" align="center" /> |
|
<template v-for="(item, index) in menuData" :key="item.label"> |
|
<!-- |
|
Type ===1 普通文本 |
|
Type ===2 图片显示 |
|
Type ===3 操作功能 |
|
label: 标题 |
|
width: 宽度 |
|
prop: 数据字段 |
|
--> |
|
<template v-if="item.type === 1"> |
|
<el-table-column |
|
v-if="item.head" |
|
:prop="item.prop" |
|
:label="item.label" |
|
:width="item.width" |
|
:fixed="item.fixed" |
|
align="center" |
|
/> |
|
</template> |
|
|
|
<template v-if="item.type === 2"> |
|
<el-table-column |
|
v-if="item.head" |
|
:label="item.label" |
|
:width="item.width" |
|
:fixed="item.fixed" |
|
align="center" |
|
> |
|
<template #default="props"> |
|
<img :src="props.row[item.prop]" class="el-Img" /> |
|
</template> |
|
</el-table-column> |
|
</template> |
|
|
|
<template v-if="item.type === 3"> |
|
<el-table-column |
|
v-if="item.head" |
|
fixed="right" |
|
label="操作" |
|
width="280" |
|
align="center " |
|
> |
|
<!-- <template #default="scope"> |
|
<el-button link type="primary" icon="el-icon-delete" @click="DeleteEvent(scope.row)" |
|
>删除</el-button |
|
> |
|
<el-button link type="primary" icon="el-icon-view" @click="EditEvent(scope.row)" |
|
>编辑</el-button |
|
> |
|
<el-button link type="primary" icon="el-icon-view" @click="ViewEvent(scope.row)" |
|
>查看</el-button |
|
> |
|
</template> --> |
|
|
|
<template #default="scope"> |
|
<el-button |
|
:link="ElButtonS[0].link" |
|
:class="ElButtonS[0].class" |
|
:auto-insert-space="ElButtonS[0].space" |
|
:size="ElButtonS[0].size" |
|
:icon="ElButtonS[0].icon" |
|
@click="DeleteEvent(scope.row)" |
|
>删除</el-button |
|
> |
|
<el-button |
|
:link="ElButtonS[1].link" |
|
:class="ElButtonS[1].class" |
|
:auto-insert-space="ElButtonS[1].space" |
|
:size="ElButtonS[1].size" |
|
:icon="ElButtonS[1].icon" |
|
@click="EditEvent(scope.row)" |
|
>编辑</el-button |
|
> |
|
<el-button |
|
:link="ElButtonS[2].link" |
|
:class="ElButtonS[2].class" |
|
:auto-insert-space="ElButtonS[2].space" |
|
:size="ElButtonS[2].size" |
|
:icon="ElButtonS[2].icon" |
|
@click="ViewEvent(scope.row)" |
|
>查看</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</template> |
|
</template> |
|
</el-table> |
|
<!-- 表格翻页功能 --> |
|
<div class="demo-pagination-block"> |
|
<el-pagination |
|
v-model:current-page="currentPage" |
|
v-model:page-size="pageSize" |
|
:page-sizes="pageList" |
|
:disabled="disabled" |
|
:background="background" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="total" |
|
@size-change="PageSizeChange" |
|
@current-change="SizeChange" |
|
/> |
|
</div> |
|
</div> |
|
<!-- 弹窗组件 --> |
|
<div class="addlalog"> |
|
<el-dialog v-model="AddLalog" title="新增产品"> |
|
<el-form label-position="top" label-width="100px" :model="AddForm"> |
|
<el-form-item label="产品名称"> |
|
<el-input v-model="AddForm.name" placeholder="请输入产品名称" /> |
|
</el-form-item> |
|
<el-form-item label="购买金额"> |
|
<el-input v-model="AddForm.purchaseAmount" placeholder="请输入购买金额" /> |
|
</el-form-item> |
|
<el-form-item label="当前使用仓"> |
|
<el-input v-model="AddForm.currentUsageWarehouse" placeholder="请输入当前使用仓" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="设备序列号S/N"> |
|
<el-input v-model="AddForm.deviceSerialNumber" placeholder="请输入设备序列号" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="是否收取押金"> |
|
<el-select v-model="AddForm.isDeposit" class="m-2" placeholder="选择是否收取押金"> |
|
<el-option |
|
v-for="item in options" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="采购公司"> |
|
<el-input v-model="AddForm.purchasingCompany" placeholder="请输入采购公司" /> |
|
</el-form-item> |
|
<el-form-item label="保修截至时间"> |
|
<el-date-picker |
|
v-model="AddForm.warrantyPeriodEndTime" |
|
type="date" |
|
placeholder="选择保修截至日期" |
|
size="default" |
|
format="YYYY/MM/DD" |
|
value-format="YYYY-MM-DD" |
|
/> |
|
</el-form-item> |
|
<el-form-item label="图片"> |
|
<!-- photo --> |
|
<el-upload |
|
ref="uploadRef" |
|
class="upload-demo" |
|
:action="doubledCount" |
|
:on-success="ImgSuccess" |
|
:before-upload="beforeAvatarUpload" |
|
:headers="headers" |
|
v-if="!img" |
|
> |
|
<template #trigger> |
|
<div class="img-icon"> |
|
<el-button type="primary">点击上传图片</el-button> |
|
<el-icon><UploadFilled /></el-icon> |
|
</div> |
|
</template> |
|
</el-upload> |
|
|
|
<div class="el-load-img" v-else> |
|
<div class="el-img"> |
|
<div class="el-img-left"> |
|
<el-icon><Link /></el-icon> |
|
<span>{{ ImgText }}</span> |
|
</div> |
|
</div> |
|
<div class="el-z"> |
|
<el-image |
|
:src="url" |
|
:zoom-rate="1.2" |
|
:max-scale="7" |
|
:min-scale="0.2" |
|
:preview-src-list="UrlImg" |
|
:initial-index="4" |
|
:z-index="10" |
|
fit="cover" |
|
/> |
|
</div> |
|
<el-icon><SuccessFilled /></el-icon> |
|
</div> |
|
</el-form-item> |
|
|
|
<el-form-item label="型号"> |
|
<el-input v-model="AddForm.model" placeholder="请输入型号" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="状态"> |
|
<el-select v-model="AddForm.state" class="m-2" placeholder="选择状态"> |
|
<el-option |
|
v-for="item in options2" |
|
:key="item.value" |
|
:label="item.label" |
|
:value="item.value" |
|
/> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="使用人"> |
|
<el-input v-model="AddForm.user" placeholder="请输入使用人" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="使用人岗位"> |
|
<el-input v-model="AddForm.userPosition" placeholder="请输入使用人岗位" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="押金金额(RMB)"> |
|
<el-input v-model="AddForm.deposit" placeholder="请输入押金金额(元)" /> |
|
</el-form-item> |
|
|
|
<el-form-item label="购买时间"> |
|
<el-date-picker |
|
v-model="AddForm.buyingTime" |
|
type="date" |
|
placeholder="选择购买日期" |
|
size="default" |
|
format="YYYY/MM/DD" |
|
value-format="YYYY-MM-DD" |
|
/> |
|
</el-form-item> |
|
|
|
<el-form-item label="备注"> |
|
<el-input v-model="AddForm.notes" placeholder="请输入备注" /> |
|
</el-form-item> |
|
</el-form> |
|
<!-- 弹窗底部提交按钮 --> |
|
<div class="el-dialog-button"> |
|
<el-button type="danger" @click="submit"> |
|
<el-icon><Select /></el-icon> |
|
确认提交 |
|
</el-button> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
<!-- 弹窗结束 --> |
|
|
|
<!-- 右侧功能列表弹窗 --> |
|
<div class="el-menu-load"> |
|
<el-drawer v-model="menu" direction="rtl"> |
|
<template #header> |
|
<h4>菜单功能列表</h4> |
|
</template> |
|
<!-- 默认插入到侧边栏内容 --> |
|
<!-- 表格功能列表 --> |
|
<template #default> |
|
<div v-if="!Btn"> |
|
<el-tabs type="border-card"> |
|
<el-tab-pane label="表格功能"> |
|
<el-table :data="menuData" border :height="menuHeight + 'px'"> |
|
<el-table-column |
|
v-for="column in MenuTop" |
|
:key="column.prop" |
|
:prop="column.prop" |
|
:label="column.label" |
|
:width="column.width" |
|
> |
|
<!-- |
|
/ |
|
MenuTop: 0:菜单选项 |
|
true-label: 1.选中时候的值 |
|
false-label: 2.没有选中时候的值 |
|
@change: 3.当绑定时候的值发生变化的时候触发 |
|
label: 4.选中状态的值 |
|
|
|
/ |
|
--> |
|
<!-- 标题 --> |
|
<template #default="scope"> |
|
<template v-if="column.prop == 'label'"> |
|
<el-text class="mx-1">{{ scope.row[column.prop] }}</el-text> |
|
</template> |
|
<!-- 隐藏复选框 --> |
|
<template v-else-if="column.label == '隐藏'"> |
|
<el-checkbox-group v-model="checkList"> |
|
<el-checkbox |
|
:key="scope.row['label']" |
|
:label="scope.row['label']" |
|
@change="CheckBox(scope.row, 1)" |
|
> |
|
<!-- 用于隐藏文字 --> |
|
<template #default="scope"> |
|
<!-- {{ scope }} --> |
|
</template> |
|
</el-checkbox> |
|
</el-checkbox-group> |
|
</template> |
|
|
|
<template v-else-if="column.label == '冻结'"> |
|
<el-checkbox-group v-model="flexList"> |
|
<el-checkbox |
|
:key="scope.row['label']" |
|
:label="scope.row['label']" |
|
@change="CheckBox(scope.row, 2)" |
|
> |
|
<!-- 用于隐藏文字 --> |
|
<template #default="scope"> |
|
<!-- {{ scope }} --> |
|
</template> |
|
</el-checkbox> |
|
</el-checkbox-group> |
|
</template> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-tab-pane> |
|
<el-tab-pane label="按钮功能">Config</el-tab-pane> |
|
<el-tab-pane label="表格导出">Role</el-tab-pane> |
|
<el-tab-pane label="待添加">Task</el-tab-pane> |
|
</el-tabs> |
|
</div> |
|
<!-- 按钮功能结束--> |
|
</template> |
|
</el-drawer> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { ref, reactive, onMounted, computed } from 'vue'; |
|
import { getList, getDetail, $_AddInfo, update, remove, $_TableList } from '@/api/basic/basicPda'; //API |
|
import { ElMessage, type UploadProps } from 'element-plus'; |
|
import { getToken } from '@/utils/auth'; |
|
// 菜单功能标题 |
|
const MenuTop = ref([ |
|
{ |
|
prop: 'label', |
|
label: '列名', |
|
width: '', |
|
}, |
|
{ |
|
prop: '', |
|
label: '隐藏', |
|
}, |
|
{ |
|
prop: '', |
|
label: '冻结', |
|
}, |
|
{ |
|
prop: '', |
|
label: '排序', |
|
}, |
|
]); |
|
// 按钮配置 |
|
const ElButtonS = ref([ |
|
// 1.link 切换按钮样式(文本模式-false ,按钮模式-tre) |
|
// 2.class 按钮样式名(用于切换按钮样式) |
|
// 3.space 是否开启按钮文子直接间距(true开启 ,false关闭) |
|
// 4.size 按钮尺寸默认小尺寸('large'| 'default'| 'small') |
|
// 5.icon 按钮图标 |
|
// 6.table 按钮名称 |
|
{ |
|
link: false, |
|
class: 'el-btn-danger', |
|
space: true, |
|
size: 'small', |
|
icon: 'el-icon-delete', |
|
table: '删除', |
|
}, |
|
{ |
|
link: false, |
|
class: 'el-btn-success', |
|
space: true, |
|
size: 'small', |
|
icon: 'Edit', |
|
table: '编辑', |
|
}, |
|
{ |
|
link: false, |
|
class: 'el-btn-view', |
|
space: true, |
|
size: 'small', |
|
icon: 'el-icon-view', |
|
table: '查看', |
|
}, |
|
]); |
|
const currentPage = ref(1); // 默认页码 |
|
const pageSize = ref(30); // 默认每一页几条 |
|
const total = ref(0); //页码总页数 |
|
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条 |
|
const background = ref(true); // 是否开启背景颜色 |
|
const disabled = ref(false); // 是否禁止使用页码功能 |
|
const data = ref([]); // 表格数据 |
|
const TabHeight = ref(); //动态获取表格高度 |
|
const AddLalog = ref(false); //提交弹窗 |
|
const img = ref(false); //图片是否上传成功 |
|
const ImgText = ref(''); //图片上传成功文件名 |
|
const AddForm = ref({}); //表单所有信息 |
|
const uploadRef = ref(); //图片上传 |
|
const tableRef = ref(null); // 用于引用 table 实例 |
|
const menu = ref(true); //功能菜单列表 |
|
const menuHeight = ref(); //右侧菜单栏高度,用于固定表头 |
|
const checkList = ref<(string | number)[]>([]); //隐藏 |
|
const flexList = ref<(string | number)[]>([]); //冻结 |
|
const loading = ref(false); //刷新功能 |
|
const options = [ |
|
//下拉选择框 |
|
{ |
|
value: '0', |
|
label: '是', |
|
}, |
|
{ |
|
value: '1', |
|
label: '否', |
|
}, |
|
]; |
|
const options2 = [ |
|
//下拉选择框 |
|
{ |
|
value: '1', |
|
label: '正常', |
|
}, |
|
{ |
|
value: '2', |
|
label: '维修', |
|
}, |
|
{ |
|
value: '3', |
|
label: '不能使用(不能开机)', |
|
}, |
|
]; |
|
// 菜单功能头部 |
|
|
|
// 菜单功能列表 |
|
const menuData = ref([ |
|
{ |
|
prop: 'name', |
|
label: '产品名称', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'currentUsageWarehouse', |
|
label: '当前使用仓', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'model', |
|
label: '型号', |
|
type: 1, |
|
values: '', |
|
width: '150', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'purchaseAmount', |
|
label: '购买金额', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'state', |
|
label: '状态', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'user', |
|
label: '使用人', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'deviceSerialNumber', |
|
label: '设备序列号S/N', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'userPosition', |
|
label: '使用人岗位', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'isDeposit', |
|
label: '是否收取押金', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'deposit', |
|
label: '押金金额(元)', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'purchasingCompany', |
|
label: '采购公司', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'photo', |
|
label: '商品图片', |
|
type: 2, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'buyingTime', |
|
label: '购买时间', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'notes', |
|
label: '备注', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: 'warrantyPeriodEndTime', |
|
label: '保修截止时间', |
|
type: 1, |
|
values: '', |
|
width: '180', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
{ |
|
prop: '', |
|
label: '操作', |
|
type: 3, |
|
values: '', |
|
width: '280', |
|
checkarr: [], |
|
fixed: false, |
|
sortable: true, |
|
head: true, |
|
}, |
|
]); |
|
// 图片上传背景图，固定白色背景 |
|
const url = |
|
'https://img1.baidu.com/it/u=1996827238,2183445322&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889'; |
|
// 图片预览显示 |
|
const UrlImg = ref([]); |
|
// 图片上传接口 |
|
const doubledCount = computed(() => { |
|
return '/api/blade-resource/oss/endpoint/put-file'; |
|
}); |
|
// 图片上传必须携带TOKEN |
|
const headers = computed(() => { |
|
return { 'Blade-Auth': 'Bearer ' + getToken() }; |
|
}); |
|
// 获取表格数据 |
|
function onLoad() { |
|
// 获取表格数据API（$_TableList） |
|
$_TableList({ current: currentPage.value, size: pageSize.value }).then(res => { |
|
//表格信息 |
|
console.log(res, 'res'); |
|
data.value = res.data.data.records; |
|
const setIn = setTimeout(() => { |
|
toggleSelection(); //表格自动选中函数 |
|
clearTimeout(setIn); //清除定时器 |
|
}, 0); |
|
}); |
|
} |
|
// 动态获取DOM高度给表单防止页面出现滚动条 |
|
onMounted(() => { |
|
//默认值88 |
|
TabHeight.value = TabHeight.value.offsetHeight - 91; |
|
menuHeight.value = window.innerHeight - 135; |
|
console.log('元素的高度：', menuHeight.value); |
|
// 等待DOM高度被复制之后在请求数据，防止被数据撑开高度 |
|
onLoad(); |
|
}); |
|
|
|
// 新增数据功能 |
|
const AddInfo = () => { |
|
AddLalog.value = true; //展开表单弹窗 |
|
}; |
|
|
|
// 表格自动选中 |
|
const toggleSelection = () => { |
|
//对表单进行循环把所有表格进行全部选中,或者通过IF对条件满足进行选中 |
|
data.value.forEach((row, i) => { |
|
tableRef.value!.toggleRowSelection(data.value[i], true); |
|
}); |
|
}; |
|
// 图片上传 |
|
const imageUrl = ref(''); |
|
// 图片上传成功回调函数 |
|
const ImgSuccess: UploadProps['onSuccess'] = (response, uploadFile) => { |
|
if (response.success === true) { |
|
img.value = true; |
|
// 图片放入预览 |
|
UrlImg.value.push(response.data.link); |
|
// 图片存入表单准备提交 |
|
AddForm.value.photo = response.data.link; |
|
// 显示图片名字 |
|
ImgText.value = response.data.originalName; |
|
} |
|
}; |
|
// 上传图片规则 |
|
const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => { |
|
if (rawFile.type !== 'image/png') { |
|
ElMessage.error('图片格式只能为image/png!'); |
|
return false; |
|
} else if (rawFile.size / 1024 / 1024 > 2) { |
|
ElMessage.error('图片大小不能大于2MB!'); |
|
return false; |
|
} |
|
return true; |
|
}; |
|
// 字典转换(英文转中文) |
|
let dictionary = (columnNames, text) => { |
|
// columnNames:传入的数组,要修改的字段名 |
|
// text:传入要修改的对象 |
|
const mapping = text; |
|
// 只获取指定参数对应的列数据，并将英文字段名替换为中文字段名 |
|
const filteredData = userList.value.map(item => { |
|
const translatedItem = {}; |
|
for (let column of columnNames) { |
|
const chineseColumn = mapping[column] || column; |
|
translatedItem[chineseColumn] = item[column]; |
|
} |
|
return translatedItem; |
|
}); |
|
// 把修修改好表头数据赋值给要导出的工作表 |
|
expExcel.value = filteredData; |
|
}; |
|
// 表单信息提交 |
|
const submit = () => { |
|
console.log(AddForm.value); |
|
$_AddInfo(AddForm.value).then(res => { |
|
console.log(res); |
|
}); |
|
}; |
|
// 每页多少条触发 |
|
const PageSizeChange = val => { |
|
console.log('每一页', val, '条'); |
|
}; |
|
// 页码翻页触发 |
|
const SizeChange = val => { |
|
console.log('当前是第', val, '页'); |
|
}; |
|
// 表格全选功能触发 |
|
const selectAll = val => { |
|
console.log(val); |
|
}; |
|
// 表格单个选中触发事件 |
|
const selectChange = (selection, row) => { |
|
// 1.selection 选中的数组 |
|
// 2.row 选中的当前行 |
|
console.log(selection); |
|
}; |
|
// 删除触发事件 |
|
const DeleteEvent = val => { |
|
// 接收点击删除当前行数据 |
|
console.log('触发了删除事件', val); |
|
}; |
|
// 编辑触发事件 |
|
const EditEvent = val => { |
|
// 接收点击编辑当前行数据 |
|
console.log('触发了编辑事件', val); |
|
}; |
|
// 查看事件 |
|
const ViewEvent = val => { |
|
//接收点击查看当前行数据; |
|
console.log('触发了查看事件', val); |
|
}; |
|
// 菜单功能选择触发 |
|
const CheckBox = (scope, type: number) => { |
|
console.log(scope, 'scope'); |
|
if (type === 1) { |
|
scope.head = !scope.head; |
|
} |
|
if (type === 2) { |
|
scope.fixed = !scope.fixed; |
|
} |
|
}; |
|
// 刷新触发事件 |
|
const refresh = () => { |
|
loading.value = !loading.value; |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
// 最外层 IDV |
|
.el-content-el { |
|
padding: 0 8px; |
|
padding-top: 8px; |
|
background-color: #fff; |
|
height: 100%; |
|
box-sizing: border-box; |
|
// 表格顶部按钮 |
|
:deep(.el-Cart-button) { |
|
margin-bottom: 8px; |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
// 表格顶部左侧、右侧按钮样式 |
|
.el-Cart-button-left, |
|
.el-Cart-button-right { |
|
display: flex; |
|
margin: 0 0px; |
|
justify-content: space-between; |
|
} |
|
.el-Cart-button-left { |
|
:deep(button) { |
|
padding: 0 14px; |
|
min-width: 70px; |
|
display: flex; |
|
span { |
|
width: 100%; |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
i { |
|
margin-right: 6px; |
|
} |
|
} |
|
} |
|
} |
|
.el-Cart-button-right { |
|
display: flex; |
|
margin: 0 0px; |
|
justify-content: space-between; |
|
align-items: center; |
|
button { |
|
background-color: transparent; |
|
border-radius: 50%; |
|
width: 30px; |
|
height: 30px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border: 1px solid #ccc; |
|
margin-right: 8px; |
|
|
|
&:hover { |
|
background-color: #172e601f; |
|
i { |
|
color: #0e2549; |
|
} |
|
} |
|
// 去掉最后一个按钮右侧边距 |
|
&:last-child { |
|
margin-right: 0; |
|
} |
|
} |
|
} |
|
.el-Cart { |
|
// 表格标题颜色 |
|
:deep(.el-table__header) { |
|
th { |
|
background-color: #fafafa; |
|
color: #000; |
|
} |
|
} |
|
// 组件样式开始 |
|
// 分页样式 |
|
.demo-pagination-block { |
|
display: flex; |
|
justify-content: flex-end; |
|
margin-top: 6px; |
|
} |
|
|
|
// 表格行高度 |
|
:deep(.el-table__row) { |
|
height: 60px; |
|
} |
|
// 表格图片 |
|
.el-Img { |
|
width: 100%; |
|
height: 40px; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
} |
|
// 新增数据弹窗组件样式 |
|
:deep(.addlalog) { |
|
// 弹窗 |
|
.el-dialog__header { |
|
border-bottom: 1px solid #172e607d; |
|
margin-right: 0; |
|
margin-bottom: 0; |
|
padding-bottom: 20px; |
|
position: relative; |
|
i { |
|
color: #172e60; |
|
border-radius: 50%; |
|
border: 1px solid; |
|
transition: transform 1s; |
|
} |
|
} |
|
.el-dialog__header button:hover { |
|
i { |
|
transform: rotate(360deg); |
|
} |
|
} |
|
// 弹窗标题左侧小竖线 |
|
.el-dialog__header::after { |
|
content: ''; |
|
display: block; |
|
width: 3px; |
|
height: 16px; |
|
background-color: #172e60; |
|
position: absolute; |
|
left: 8px; |
|
top: 24px; |
|
} |
|
.el-dialog__body { |
|
.el-form { |
|
width: 100%; |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
} |
|
.el-form-item { |
|
width: 276px; |
|
.el-form-item__label { |
|
font-family: '黑体'; |
|
} |
|
} |
|
/* 去掉第三个、第六个、第九个div的右外边距 */ |
|
.el-form-item:nth-child(3n) { |
|
margin-right: 0; |
|
} |
|
} |
|
|
|
.el-form-item__content { |
|
height: 30px; |
|
// 日期选择框 |
|
.el-input { |
|
width: 100%; |
|
height: 30px !important; |
|
} |
|
// 下拉选择框 |
|
.el-select { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
// 底部提交 |
|
:deep(.el-dialog-button) { |
|
display: flex; |
|
justify-content: flex-end; |
|
} |
|
.el-dialog-button button:hover { |
|
color: #fff; |
|
background-color: #10d070; |
|
transition: all 0.3s ease-in-out; /* 添加动画效果 */ |
|
background-color: #10d070; |
|
border: 1px solid #10d070; |
|
} |
|
// 图片上传 |
|
.img-icon { |
|
width: 100%; |
|
position: relative; |
|
.el-button { |
|
width: 100%; |
|
background-color: #fff; |
|
color: #a8abb9; |
|
justify-content: flex-start; |
|
border: 1px solid #dcdfe6; |
|
} |
|
i { |
|
position: absolute; |
|
left: 110px; |
|
top: 8px; |
|
font-size: 18px; |
|
} |
|
} |
|
:deep(.el-load-img) { |
|
width: 100%; |
|
height: 32px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
.el-image { |
|
width: 100%; |
|
height: auto; |
|
img { |
|
width: 100%; |
|
} |
|
} |
|
.el-image-viewer__canvas { |
|
img { |
|
width: 50%; |
|
height: 50%; |
|
z-index: 10; |
|
} |
|
} |
|
.el-z { |
|
.el-image { |
|
position: absolute; |
|
height: 28px; |
|
top: 2px; |
|
left: 1px; |
|
} |
|
} |
|
.el-icon { |
|
color: #10d070; |
|
} |
|
} |
|
:deep(.upload-demo) { |
|
width: 100%; |
|
.el-upload { |
|
width: 100%; |
|
} |
|
ul { |
|
margin-top: 0; |
|
} |
|
} |
|
// 图片上传成功 |
|
.el-img { |
|
border: 1px solid #ccc; |
|
width: 100%; |
|
border-radius: 4px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
height: 30px; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
.el-img-left { |
|
display: flex; |
|
align-items: center; |
|
span { |
|
z-index: 9; |
|
} |
|
i { |
|
margin-right: 8px; |
|
color: #10d070; |
|
z-index: 9; |
|
} |
|
} |
|
i { |
|
color: #10d070; |
|
margin-left: 6px; |
|
} |
|
} |
|
// 侧边弹窗功能样式 |
|
:deep(.el-menu-load) { |
|
.el-drawer__header { |
|
padding: 0; |
|
padding-left: 20px; |
|
position: relative; |
|
border-bottom: 1px solid #172e5f; |
|
margin-bottom: 0; |
|
i { |
|
color: #172e60; |
|
} |
|
} |
|
.el-drawer__header::after { |
|
content: ''; |
|
display: block; |
|
width: 4px; |
|
height: 18px; |
|
background-color: #172e60; |
|
position: absolute; |
|
top: 23px; |
|
left: 9px; |
|
} |
|
.el-table__inner-wrapper { |
|
.cell { |
|
text-align: center; |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.el-table__row { |
|
height: 40px; |
|
} |
|
} |
|
// 上移,下移按钮 |
|
.el-text { |
|
margin: 0 5px; |
|
} |
|
} |
|
.el-table__row { |
|
height: 40px; |
|
// 删除按钮颜色 |
|
.el-btn-danger { |
|
background-color: #f56c6c; |
|
border: 1px solid #f56c6c; |
|
color: #fff; |
|
} |
|
// 编辑按钮颜色 |
|
.el-btn-success { |
|
background-color: #409eff; |
|
border: 1px solid #409eff; |
|
color: #fff; |
|
} |
|
// 查看按钮颜色 |
|
.el-btn-view { |
|
background-color: #172e60; |
|
border: 1px solid #172e60; |
|
color: #fff; |
|
} |
|
// 链接按钮样式风格 |
|
|
|
.el-btn-dangers { |
|
background-color: transparent; |
|
color: #ff0000; |
|
border: 1px solid transparent; |
|
} |
|
.el-btn-successs { |
|
background-color: transparent; |
|
color: #f56c6c; |
|
border: 1px solid transparent; |
|
} |
|
.el-btn-views { |
|
background-color: transparent; |
|
color: #f56c6c; |
|
border: 1px solid transparent; |
|
} |
|
} |
|
} |
|
</style>
|
|
|