437 lines
12 KiB
Vue
437 lines
12 KiB
Vue
<template>
|
||
<div class="app-container-content">
|
||
<!-- 搜索表单 -->
|
||
<el-form
|
||
:model="queryParams"
|
||
ref="queryFormRef"
|
||
:inline="true"
|
||
size="default"
|
||
label-width="0"
|
||
>
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item prop="maName">
|
||
<el-select
|
||
v-model="queryParams.maName"
|
||
placeholder="请选择装备名称"
|
||
style="width: 100%"
|
||
clearable
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="item in equipmentNameOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="maModel">
|
||
<el-input
|
||
v-model.trim="queryParams.maModel"
|
||
style="width: 100%"
|
||
clearable
|
||
placeholder="请输入自有装备规格"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item>
|
||
<el-button class="primary-lease" type="primary" @click="getContractListData">查询</el-button>
|
||
<el-button class="primary-lease" type="primary" @click="onReset">重置</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="18">
|
||
<el-form-item>
|
||
<el-button class="primary-lease" type="primary" @click="addContract">新增装备</el-button>
|
||
<el-col :span="3" :offset="1">
|
||
<el-upload
|
||
class="primary-lease"
|
||
:action="uploadUrl"
|
||
:headers="headerInfo"
|
||
:show-file-list="false"
|
||
accept=".xlsx"
|
||
:on-success="handleUpload"
|
||
name="file"
|
||
>
|
||
<el-button type="primary">批量装备上传</el-button>
|
||
</el-upload>
|
||
</el-col>
|
||
<a :href="uploadUrlTemp" download="装备模板下载">
|
||
<el-button class="primary-lease" type="primary" style="margin-left: 20px">装备模板下载</el-button>
|
||
</a>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="qualityLis"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{ background: '#00a288', color: '#fff' }"
|
||
>
|
||
<el-table-column align="center" prop="maName" label="装备名称" />
|
||
<el-table-column align="center" prop="maModel" label="装备规格" />
|
||
<el-table-column align="center" prop="maNum" label="装备数量" />
|
||
<el-table-column align="center" label="操作" :width="220">
|
||
<template #default="{ row }">
|
||
<el-button size="small" type="primary" @click="onContract(row)">编辑</el-button>
|
||
<el-button size="small" type="danger" @click="onDelete(row.id)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<PagingComponent
|
||
@getList="getContractListData"
|
||
:pageSize="queryParams.pageSize"
|
||
:pageNumber="queryParams.pageNum"
|
||
:total="total"
|
||
/>
|
||
|
||
<!-- 新增/编辑弹窗 -->
|
||
<el-dialog
|
||
v-model="dialogVisibleSettlein"
|
||
:title="settleinTitle"
|
||
width="40%"
|
||
destroy-on-close
|
||
class="centered-dialog"
|
||
:close-on-click-modal="false"
|
||
@close="onDialogClose"
|
||
>
|
||
<el-form
|
||
label-width="140px"
|
||
ref="addAndEditFormRef"
|
||
label-position="right"
|
||
:model="addAndEditForm"
|
||
:rules="addAndEditFormRules"
|
||
>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item label="装备名称：" prop="maNameId">
|
||
<el-select
|
||
v-model="addAndEditForm.maNameId"
|
||
placeholder="请选择装备名称"
|
||
style="width: 100%"
|
||
clearable
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="item in equipmentNameOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item label="装备规格：" prop="maModel">
|
||
<el-input
|
||
v-model="addAndEditForm.maModel"
|
||
maxlength="50"
|
||
placeholder="请输入装备规格"
|
||
clearable
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item label="装备数量：" prop="maNum">
|
||
<el-input-number
|
||
v-model="addAndEditForm.maNum"
|
||
:min="1"
|
||
placeholder="请输入数量"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" class="primary-lease" @click="onCancel">取消</el-button>
|
||
<el-button class="primary-lease" type="primary" @click="onSubmit">提交</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { useStore } from 'store/user'
|
||
const store = useStore()
|
||
import { mainStore } from 'store/main'
|
||
const store2 = mainStore()
|
||
import {
|
||
getEquipmentNameList, //装备名称
|
||
getContractListApi, //列表
|
||
addContractApi, //新增
|
||
editContractApi, //修改
|
||
delContractApi, //删除
|
||
} from 'http/api/owner-manage'
|
||
|
||
const uploadUrlTemp = ref('')
|
||
const qualityLis = ref<any>([])
|
||
const queryFormRef = ref<any>(null)
|
||
const total = ref(0)
|
||
const equipmentNameOptions = ref<any[]>([])
|
||
const queryParams: any = reactive({
|
||
maName: '',
|
||
maModel: '',
|
||
type: '1',
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
})
|
||
const addAndEditForm = ref<any>({
|
||
id: null,
|
||
maNameId: '',
|
||
maType: '',
|
||
maModel: '',
|
||
maNum: '',
|
||
type: '1'
|
||
})
|
||
const addAndEditFormRef = ref()
|
||
const settleinTitle = ref('')
|
||
const dialogVisibleSettlein: any = ref(false)
|
||
const headerInfo = reactive({
|
||
Authorization: 'Bearer ' + store2.token,
|
||
})
|
||
const uploadUrl = import.meta.env.VITE_API_URL + '/material-mall/owner/importData?type='+2
|
||
|
||
const handleUpload = (file: any, fileList: any) => {
|
||
if (file.code == 200) {
|
||
ElMessage.success('上传成功')
|
||
} else {
|
||
ElMessage.error(file.msg || '上传失败')
|
||
}
|
||
getContractListData()
|
||
}
|
||
|
||
// 获取列表
|
||
const getContractListData = async () => {
|
||
const { data: res }: any = await getContractListApi(queryParams)
|
||
qualityLis.value = res.rows || []
|
||
total.value = res.total
|
||
console.log('表格数据:', qualityLis.value) // 调试用
|
||
}
|
||
|
||
//获取装备名称
|
||
const loadEquipmentNameOptions = async () => {
|
||
const res: any = await getEquipmentNameList()
|
||
if (res.code === 200) {
|
||
equipmentNameOptions.value = res.data.map(item => ({
|
||
label: item.name,
|
||
value: item.id
|
||
}))
|
||
console.log('下拉选项:', equipmentNameOptions.value) // 调试用
|
||
} else {
|
||
ElMessage.error('获取装备名称失败')
|
||
}
|
||
}
|
||
|
||
// 重置
|
||
const onReset = () => {
|
||
queryParams.maName = ''
|
||
queryParams.maModel = ''
|
||
queryParams.pageNum = 1
|
||
queryParams.pageSize = 10
|
||
queryFormRef.value.resetFields()
|
||
getContractListData()
|
||
}
|
||
|
||
// 新增装备
|
||
const addContract = () => {
|
||
settleinTitle.value = '外租装备新建'
|
||
dialogVisibleSettlein.value = true
|
||
addAndEditForm.value.id = null
|
||
addAndEditForm.value.maNameId = ''
|
||
addAndEditForm.value.maType = ''
|
||
addAndEditForm.value.maModel = ''
|
||
addAndEditForm.value.maNum = ''
|
||
}
|
||
|
||
// 编辑装备
|
||
const onContract = (row: any) => {
|
||
console.log('编辑行数据:', row) // 调试用
|
||
console.log('当前下拉选项:', equipmentNameOptions.value) // 调试用
|
||
|
||
addAndEditForm.value.id = row.id
|
||
|
||
// 通过装备名称匹配下拉选项，获取对应的id
|
||
const matchedOption = equipmentNameOptions.value.find(option => option.label === row.maName)
|
||
if (matchedOption) {
|
||
addAndEditForm.value.maNameId = matchedOption.value
|
||
console.log('通过名称匹配到ID:', matchedOption.value)
|
||
} else {
|
||
// 如果找不到匹配，尝试使用其他字段
|
||
addAndEditForm.value.maNameId = row.maNameId || row.maName_id || row.equipmentId || row.id
|
||
console.log('使用备用ID:', addAndEditForm.value.maNameId)
|
||
}
|
||
|
||
addAndEditForm.value.maType = row.maType
|
||
addAndEditForm.value.maModel = row.maModel
|
||
addAndEditForm.value.maNum = row.maNum
|
||
settleinTitle.value = '外租装备修改'
|
||
dialogVisibleSettlein.value = true
|
||
|
||
// 检查是否能找到对应的选项
|
||
const foundOption = equipmentNameOptions.value.find(item => item.value === addAndEditForm.value.maNameId)
|
||
console.log('找到的选项:', foundOption) // 调试用
|
||
|
||
if (!foundOption) {
|
||
console.warn('警告：找不到对应的装备名称选项，maNameId:', addAndEditForm.value.maNameId)
|
||
}
|
||
}
|
||
|
||
const onDialogClose = () => {
|
||
addAndEditFormRef.value.resetFields()
|
||
addAndEditForm.value.id = null
|
||
addAndEditForm.value.maNameId = ''
|
||
addAndEditForm.value.maType = ''
|
||
addAndEditForm.value.maModel = ''
|
||
addAndEditForm.value.maNum = ''
|
||
}
|
||
|
||
const addAndEditFormRules = reactive({
|
||
maNameId: [{ required: true, message: '请选择装备名称', trigger: 'change' }],
|
||
maType: [{ required: true, message: '请输入装备分类', trigger: 'blur' }],
|
||
maModel: [{ required: true, message: '请输入装备规格', trigger: 'blur' }],
|
||
maNum: [{ required: true, type: 'number', message: '请输入装备数量', trigger: 'blur' }]
|
||
})
|
||
|
||
const onSubmit = () => {
|
||
addAndEditFormRef.value.validate(async (valid: any) => {
|
||
if (valid) {
|
||
const SEN_API = settleinTitle.value === '自有装备修改' ? editContractApi : addContractApi
|
||
const res: any = await SEN_API(addAndEditForm.value)
|
||
if (res.code === 200) {
|
||
ElMessage.success('提交成功')
|
||
dialogVisibleSettlein.value = false
|
||
getContractListData();
|
||
} else {
|
||
ElMessage.error(res.msg || '提交失败')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 删除
|
||
const onDelete = async (id: any) => {
|
||
ElMessageBox.confirm('是否确定删除？', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(async () => {
|
||
const res = await delContractApi({ id })
|
||
if (res.code === 200) {
|
||
ElMessage.success('删除成功')
|
||
getContractListData();
|
||
} else {
|
||
ElMessage.error(res.msg || '删除失败')
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
|
||
// 取消按钮
|
||
const onCancel = () => {
|
||
dialogVisibleSettlein.value = false
|
||
}
|
||
|
||
onMounted(() => {
|
||
getContractListData()
|
||
loadEquipmentNameOptions()
|
||
uploadUrlTemp.value = window.location.origin + '/iws/mall-view/contract-template-250224.docx'
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep.editor {
|
||
height: 300px;
|
||
}
|
||
:deep.upload-tip .el-form-item__label {
|
||
color: transparent;
|
||
}
|
||
.el-pagination {
|
||
justify-content: flex-end;
|
||
padding: 5px 0;
|
||
}
|
||
:deep.el-pagination.is-background .el-pager li.is-active {
|
||
background-color: #3cb4a6;
|
||
}
|
||
:deep.el-form--inline .el-form-item {
|
||
margin-right: 6px;
|
||
width: 95%;
|
||
}
|
||
.img-list {
|
||
display: flex;
|
||
align-items: center;
|
||
.img-items {
|
||
width: 120px;
|
||
height: 120px;
|
||
margin-right: 8px;
|
||
position: relative;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.mask-img {
|
||
visibility: hidden;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #000;
|
||
opacity: 0.5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.delete-icon {
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
z-index: 9;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.img-items:hover .mask-img {
|
||
visibility: visible;
|
||
}
|
||
}
|
||
.app-container-content {
|
||
:deep(.el-dialog) {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
margin: 0 !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
max-height: 100vh !important;
|
||
.el-dialog__body {
|
||
flex: 1;
|
||
overflow-y: scroll !important;
|
||
}
|
||
.dialog-content {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-overlay) {
|
||
z-index: 99 !important;
|
||
}
|
||
</style> |