13208366016
1 year ago
8 changed files with 775 additions and 35 deletions
@ -0,0 +1,474 @@
|
||||
<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> |
||||
</div> |
||||
<!-- 表格顶部右侧按钮 --> |
||||
<div class="el-Cart-button-right"> |
||||
<!-- 刷新按钮 --> |
||||
<button> |
||||
<el-icon color="#ccc"><Refresh /></el-icon> |
||||
</button> |
||||
<!-- 功能按钮 --> |
||||
<button> |
||||
<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 :data="data" border :height="TabHeight+'px'" style="width: 100%;"> |
||||
<el-table-column type="selection" width="55" fixed="left"/> |
||||
<el-table-column type="index" fixed="left" width="50" height="100" label="#" align="center"/> |
||||
<el-table-column prop="name" label="产品名称" width="180" align="center " sortable/> |
||||
<el-table-column prop="model" label="型号" width="180" align="center " /> |
||||
<el-table-column prop="purchaseAmount" label="购买金额" width="180" align="center "/> |
||||
<el-table-column prop="state" label="状态" width="180" align="center "/> |
||||
<el-table-column prop="currentUsageWarehouse" label="当前使用仓" width="180" align="center "/> |
||||
<el-table-column prop="user" label="使用人" width="180" align="center " /> |
||||
<el-table-column prop="deviceSerialNumber" label="设备序列号S/N" width="180" align="center "/> |
||||
<el-table-column prop="userPosition" label="使用人岗位" width="180" align="center "/> |
||||
<el-table-column prop="isDeposit" label="是否收取押金" width="180" align="center "/> |
||||
<el-table-column prop="deposit" label="押金金额(元)" width="180" align="center "/> |
||||
<el-table-column prop="purchasingCompany" label="采购公司" width="180" align="center "/> |
||||
<el-table-column label="商品图片" width="180" align="center" > |
||||
<template #default="props"> |
||||
<img :src="props.row.photo" class='el-Img'> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="buyingTime" label="购买时间" width="180" align="center "/> |
||||
<el-table-column prop="notes" label="备注" width="180" align="center "/> |
||||
<el-table-column prop="warrantyPeriodEndTime" label="保修截止时间" width="180" align="center "/> |
||||
<el-table-column fixed="right" label="操作" width="280" align="center "> |
||||
<template #default> |
||||
<el-button link type="primary" icon="el-icon-delete" @click="handleDelete">删除</el-button> |
||||
<el-button link type="primary" icon="el-icon-view" @click="handleEdit(row)">编辑</el-button> |
||||
<el-button link type="primary" icon="el-icon-view" @click="handleview(row)">查看</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<!-- 表格翻页功能 --> |
||||
<div class="demo-pagination-block"> |
||||
<el-pagination |
||||
v-model:current-page="currentPage" |
||||
v-model:page-size="pageSize" |
||||
:page-sizes="pageList" |
||||
:small="small" |
||||
:disabled="disabled" |
||||
:background="background" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="2" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
/> |
||||
</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" |
||||
/> |
||||
</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" |
||||
> |
||||
|
||||
<template #trigger> |
||||
<div class='img-icon'> |
||||
<el-button type="primary">点击上传图片</el-button> |
||||
<el-icon><UploadFilled /></el-icon> |
||||
</div> |
||||
</template> |
||||
</el-upload> |
||||
</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" |
||||
/> |
||||
</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> |
||||
</template> |
||||
|
||||
<script setup lang='ts'> |
||||
import { ref, reactive,onMounted,computed } from 'vue'; |
||||
import { getList, getDetail, add, update, remove,$_TableList } from '@/api/basic/basicPda'; //API |
||||
import { ElMessage, type UploadProps } from 'element-plus' |
||||
import { getToken } from '@/utils/auth'; |
||||
const currentPage = ref(1); // 默认页码 |
||||
const pageSize = ref(30); // 默认每一页几条 |
||||
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条 |
||||
const small = ref(false); |
||||
const background = ref(true); // 是否开启背景颜色 |
||||
const disabled = ref(false); // 是否禁止使用页码功能 |
||||
const data = ref([]); // 表单数据 |
||||
const TabHeight = ref();//动态获取表格高度 |
||||
const AddLalog = ref(true)//提交弹窗 |
||||
const AddForm = ref({ |
||||
name: '', |
||||
region: '', |
||||
type: '', |
||||
}) |
||||
const value1 = ref('') //日期 |
||||
const optionsvalue = ref('')//下拉框值 |
||||
const optionsvalue2=ref('')//状态值 |
||||
const uploadRef = ref()//图片上传 |
||||
const options = [//下拉选择框 |
||||
{ |
||||
value: '0', |
||||
label: '是', |
||||
}, |
||||
{ |
||||
value: '1', |
||||
label: '否', |
||||
}, |
||||
|
||||
] |
||||
const options2 = [//下拉选择框 |
||||
{ |
||||
value: '1', |
||||
label: '正常', |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '维修', |
||||
}, |
||||
{ |
||||
value: '3', |
||||
label: '不能使用(不能开机)', |
||||
}, |
||||
] |
||||
// 图片上传接口 |
||||
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.data.data.records); |
||||
//表格信息 |
||||
data.value=res.data.data.records |
||||
}) |
||||
} |
||||
// 动态获取DOM高度给表单防止页面出现滚动条 |
||||
onMounted(() => { |
||||
//默认值88 |
||||
TabHeight.value = TabHeight.value.offsetHeight-91; |
||||
// 等待DOM高度被复制之后在请求数据，防止被数据撑开高度 |
||||
onLoad() |
||||
}) |
||||
// 新增数据功能 |
||||
const AddInfo=()=>{ |
||||
console.log(111); |
||||
AddLalog.value=true; |
||||
} |
||||
// 图片上传 |
||||
const imageUrl = ref('') |
||||
// 图片上传成功回调函数 |
||||
const ImgSuccess: UploadProps['onSuccess'] = (response,uploadFile) => { |
||||
console.log(response,uploadFile,'123123123123123122312123'); |
||||
console.log('================================================================'); |
||||
|
||||
} |
||||
// 上传图片规则 |
||||
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 |
||||
} |
||||
</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 7px; |
||||
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; |
||||
} |
||||
} |
||||
// 弹窗标题左侧小竖线 |
||||
.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; |
||||
|
||||
} |
||||
/* 去掉第三个、第六个、第九个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%; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
// 底部提交 |
||||
.el-dialog-button{ |
||||
display:flex; |
||||
justify-content: flex-end; |
||||
} |
||||
// 图片上传 |
||||
.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(.upload-demo){ |
||||
width:100%; |
||||
.el-upload{ |
||||
width:100% |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue