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.
502 lines
14 KiB
502 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="api/blade-resource/oss/endpoint/put-file" |
|
:on-success="handleAvatarSuccess" |
|
:before-upload="beforeAvatarUpload" |
|
> |
|
<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 } from 'vue'; |
|
import { getList, getDetail, add, update, remove, $_TableList } from '@/api/basic/basicPda'; //API |
|
import { ElMessage, type UploadProps } from 'element-plus'; |
|
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js'; |
|
|
|
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 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: '不能使用(不能开机)', |
|
}, |
|
]; |
|
// 获取表格数据 |
|
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 handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => { |
|
console.log(response, uploadFile, '123123123123123122312123'); |
|
}; |
|
// 上传图片规则 |
|
const beforeAvatarUpload: UploadProps['beforeUpload'] = async rawFile => { |
|
const _nameArr = rawFile.name.split('.'); |
|
|
|
if (_nameArr.length === 0) { |
|
ElMessage.warning('异常类型文件'); |
|
return false; |
|
} |
|
|
|
const _name = _nameArr[_nameArr.length - 1]; |
|
|
|
const _whiteArr = ['png', 'jpg', 'jpeg']; |
|
|
|
if (!_whiteArr.includes(_name.toLocaleLowerCase())) |
|
return ElMessage.warning('请上传png、jpg、jpeg的类型图片'); |
|
const res = await compressImageBlob(rawFile); |
|
return res; |
|
}; |
|
</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>
|
|
|