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.
514 lines
14 KiB
514 lines
14 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> |
|
</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" |
|
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 v-else class='el-img'> |
|
<div class='el-img-left'> |
|
<el-icon><Link /></el-icon> |
|
<span>{{ImgText}}</span> |
|
</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" |
|
/> |
|
</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(false)//提交弹窗 |
|
const img=ref(false);//图片是否上传成功 |
|
const ImgText=ref('') |
|
const AddForm = ref({ //表单信息 |
|
}) |
|
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('================================================================'); |
|
if(response.success===true){ |
|
img.value=true; |
|
console.log(img.value); |
|
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 |
|
} |
|
</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; |
|
} |
|
} |
|
// 弹窗标题左侧小竖线 |
|
.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% |
|
} |
|
ul{ |
|
margin-top:0; |
|
} |
|
|
|
} |
|
// 图片上传成功 |
|
.el-img{ |
|
border: 1px solid #ccc; |
|
width: 100%; |
|
border-radius: 4px; |
|
padding: 0 8px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
height: 30px; |
|
.el-img-left{ |
|
display:flex; |
|
align-items:center; |
|
i{ |
|
margin-right:8px; |
|
color:#ccc; |
|
} |
|
} |
|
i{ |
|
color: #10d070; |
|
margin-left: 6px; |
|
} |
|
} |
|
} |
|
</style> |