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