lanan-system-vue/src/views/company/property/propertykeep/PropertyKeepQuery.vue
2024-08-16 17:26:49 +08:00

303 lines
11 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="145px">
<el-card class="box-card">
<!-- 卡片头 -->
<div slot="header" class="clearfix">
<i class="el-icon-plus"/>
<span>基本信息</span>
</div>
<!-- 卡片内容 -->
<div>
<el-row :gutter="2">
<el-col :span="12">
<el-form-item label="资产编号" prop="propNo">
<el-input disabled v-model="formData.property.propNo" placeholder="请输入资产编号"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="资产名称" prop="propName">
<el-input disabled v-model="formData.property.propName" placeholder="请输入资产名称"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="12">
<el-form-item label="资产状态" prop="propStatus">
<el-select disabled v-model="formData.property.propStatus" placeholder="请选择资产状态"
class="customerSelectWidth"
>
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMPANY_PROP_STATUS)" :key="dict.value"
:label="dict.label" :value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上次维修/保养日期" prop="lastKeepDate">
<el-date-picker disabled clearable v-model="formData.property.lastKeepDate" type="date"
value-format="yyyy-MM-dd"
placeholder="选择上次维修/保养日期"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="12">
<el-form-item label="维修/保养周期单位" prop="keepCycleType">
<el-select disabled v-model="formData.property.keepCycleType" placeholder="请选择维修/保养周期单位" clearable
class="customerSelectWidth"
>
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.CYCLE_DICT)" :key="dict.value"
:label="dict.label" :value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="维修/保养周期" prop="keepCycle">
<el-input disabled v-model="formData.property.keepCycle" placeholder="请输入维修/保养周期"/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="12">
<el-form-item label="下次维修/保养日期" prop="nextKeepDate">
<el-date-picker disabled clearable v-model="formData.property.nextKeepDate" type="date"
value-format="yyyy-MM-dd"
placeholder="选择下次维修/保养日期"
/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-card>
<el-card class="box-card">
<!-- 卡片头 -->
<div slot="header" class="clearfix">
<i class="el-icon-plus"/>
<span>维修\保养记录</span>
</div>
<!-- 卡片内容 -->
<div>
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="68px"
>
<el-form-item label="维修/保养日期" prop="keepDateArray" label-width="100">
<el-date-picker v-model="queryParams.keepDateArray" style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="序号" align="center" prop="num">
<template slot-scope="scope">
<span style="margin-left: 10px">{{
queryParams.pageSize * (queryParams.pageNo - 1) + scope.$index + 1
}}</span>
</template>
</el-table-column>
<el-table-column label="维修/保养日期" align="center" prop="keepDate"/>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width"
width="200"
>
<template v-slot="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row)"
v-hasPermi="['company:property-keep:query']"
>列表查看
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="listPropertyKeep"
/>
</div>
</el-card>
</el-form>
</el-dialog>
<el-drawer
title="维修\保养记录详情"
:with-header="false"
:visible.sync="drawer"
:direction="direction"
>
<div style="padding: 10px 0 0 10px">
<el-descriptions class="margin-top" title="维修\保养记录详情" :column="1" border>
<el-descriptions-item label="资产编号">{{ drawerDate.propNo }}</el-descriptions-item>
<el-descriptions-item label="资产名称">{{ drawerDate.propName }}</el-descriptions-item>
<el-descriptions-item label="资产状态">
<dict-tag :type="DICT_TYPE.COMPANY_PROP_STATUS" :value="drawerDate.propStatus"/>
</el-descriptions-item>
<el-descriptions-item label="维修/保养周期单位">
<dict-tag :type="DICT_TYPE.CYCLE_DICT" :value="drawerDate.keepCycleType"/>
</el-descriptions-item>
<el-descriptions-item label="维修/保养周期">{{ drawerDate.keepCycle }}</el-descriptions-item>
<el-descriptions-item label="维修/保养日期">{{ drawerDate.keepDate }}</el-descriptions-item>
<el-descriptions-item label="备注">{{ drawerDate.remark }}</el-descriptions-item>
<el-descriptions-item label="附件">
<el-card v-for="(file, index) in drawerDate.fileUrls" :key="index" style="margin-bottom: 10px">
<div slot="header" class="clearfix">
<i :class="getFileIcon(file.fileUrl)"></i>
<span>{{ file.fileName }}</span>
</div>
<div>
<a :href="file.fileUrl" download :title="file.fileName" target="_blank">
<el-button type="primary" size="small">
下载
</el-button>
</a>
</div>
</el-card>
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
</div>
</template>
<script>
import { getPropertyKeepPage } from '@/api/company/property/propertykeep'
export default {
name: 'PropertyKeepQuery',
data() {
return {
drawer: false,
direction: 'rtl',
// 遮罩层
loading: true,
// 弹出层标题
dialogTitle: '查看维修\\保养记录',
// 是否显示弹出层
dialogVisible: false,
// 显示搜索条件
showSearch: true,
// 导出遮罩层
exportLoading: false,
formData: {
property: {
id: undefined,
propNo: undefined,
propName: undefined,
propStatus: undefined,
lastKeepDate: undefined,
nextKeepDate: undefined,
keepCycleType: undefined,
keepCycle: undefined
}
},
// 表单校验
formRules: {},
// 表单的加载中1修改时的数据加载2提交的按钮禁用
formLoading: false,
list: [],
queryParams: {
pageNo: 1,
pageSize: 10,
keepDateArray: [],
propertyId: undefined
},
total: 0,
drawerDate: {}
}
},
methods: {
/** 打开弹窗 */
async open(row) {
this.reset()
this.resetQuery()
await this.listPropertyKeep(row.id)
this.formData.property = row
this.drawerDate = {
...row,
keepDate: undefined,
remark: undefined,
fileUrls: undefined
}
this.dialogVisible = true
},
/** 表单重置 */
reset() {
this.formData = {
property: {
id: undefined,
propNo: undefined,
propName: undefined,
propStatus: undefined,
lastKeepDate: undefined,
nextKeepDate: undefined,
keepCycleType: undefined,
keepCycle: undefined
}
}
this.resetForm('formRef')
},
// 获得记录
async listPropertyKeep(id) {
this.queryParams.propertyId = id
const res = await getPropertyKeepPage(this.queryParams)
this.list = res.data.records
this.total = res.data.total
this.loading = false
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1
this.listPropertyKeep()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
openForm(row) {
this.drawer = true
this.drawerDate.keepDate = row.keepDate
this.drawerDate.remark = row.remark
this.drawerDate.fileUrls = row.fileUrls.split(',').map(item => {
return {
fileName: item.split('/').pop(),
fileUrl: item
}
})
},
getFileIcon(url) {
// 这个函数用于根据文件类型返回对应的图标类名
const fileName = url.split('/').pop()
const extension = fileName.split('.').pop().toLowerCase()
switch (extension) {
case 'doc':
case 'docx':
return 'el-icon-document'
case 'xls':
case 'xlsx':
return 'el-icon-s-data'
case 'pdf':
return 'el-icon-document-checked'
default:
return 'el-icon-folder'
}
}
}
}
</script>
<style scoped>
</style>