241 lines
7.3 KiB
Vue
241 lines
7.3 KiB
Vue
<template>
|
||
<div class="AddBuildingBox">
|
||
<PageHeader></PageHeader>
|
||
<div class="AddBuildingBody">
|
||
<div class="title flex flex-items-center justify-between">
|
||
<div>
|
||
<span>基本信息</span>
|
||
<el-button class="ml-10px" link type="primary"> 编辑</el-button>
|
||
</div>
|
||
<el-button @click="cancelForm"> 返回</el-button>
|
||
</div>
|
||
<div class="addBuildingFormBody">
|
||
<div class="infobox">
|
||
<div class="info_item">
|
||
<div class="label">设备分类：</div>
|
||
<span class="value">{{ form.categoryName }}</span>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">设备名称：</div>
|
||
<span class="value">{{ form.deviceName }}</span>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">设备编号：</div>
|
||
<span class="value">{{ form.deviceCode }}</span>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">品牌型号：</div>
|
||
<span class="value">{{ form.deviceModel }}</span>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">所在区域：</div>
|
||
<span class="value">{{ form.area }}</span>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">设备状态：</div>
|
||
<span class="value">电梯</span>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">维护人员：</div>
|
||
<span class="value">{{ form.maintainUserListName }}</span>
|
||
</div>
|
||
<div class="info_item">
|
||
<div class="label">添加时间：</div>
|
||
<span class="value">{{ form.createTime }}</span>
|
||
</div>
|
||
<div></div>
|
||
<div class="info_item">
|
||
<div class="label">备注：</div>
|
||
<span class="value">{{ form.remark }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="AddBuildingBody">
|
||
<div class="title">维修记录</div>
|
||
<div class="addBuildingFormBody">
|
||
<el-table v-loading="loading" :data="deviceRepairList">
|
||
<el-table-column type="index" align="center" />
|
||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||
<el-table-column label="设备编号" align="center" prop="deviceCode" />
|
||
<el-table-column label="维修人员" align="center" prop="maintainUserNames" />
|
||
<el-table-column label="故障描述" align="center" prop="faultDesc" />
|
||
<el-table-column label="维修结果" align="center" prop="repairResult">
|
||
<template #default="scope">
|
||
<dict-tag :options="com_equipment_repair_status" :value="scope.row.repairResult"></dict-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
||
<template #default="scope">
|
||
<el-button link type="primary" @click="handleMain(scope.row)">详情</el-button>
|
||
<el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
|
||
<el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getlist" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import PageHeader from '@/components/Pageheader/index.vue';
|
||
import { getDevice } from '@/api/system/equipment/archive';
|
||
import { DeviceRepairVO } from '@/api/system/equipment/Repair/type';
|
||
import { delDeviceRepair, listDeviceRepair } from '@/api/system/equipment/Repair';
|
||
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||
const { com_equipment_repair_status } = toRefs<any>(proxy?.useDict('com_equipment_repair_status'));
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const form = ref({
|
||
id: null,
|
||
categoryName: '', // 分类id、
|
||
deviceName: '', // 设备名称
|
||
deviceCode: '', // 编号
|
||
deviceModel: '', // 型号
|
||
area: '', // 区域
|
||
status: '0', // 区域
|
||
maintainUserIds: '', // 设备维护人员
|
||
maintainUserListName: '', // 设备维护人员
|
||
createTime: '', // 设备维护人员
|
||
remark: '' // 备注
|
||
});
|
||
|
||
const userid = ref(null);
|
||
const total = ref(0);
|
||
const loading = ref(false);
|
||
const deviceRepairList = ref([]);
|
||
|
||
const queryParams = ref({
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
});
|
||
|
||
function init() {
|
||
if (route.query.id) {
|
||
userid.value = route.query.id;
|
||
getDevice(userid.value).then(async (res) => {
|
||
form.value = {
|
||
id: res.data.id,
|
||
categoryName: res.data.categoryName,
|
||
deviceName: res.data.deviceName,
|
||
deviceCode: res.data.deviceCode,
|
||
deviceModel: res.data.deviceModel,
|
||
area: res.data.area,
|
||
status: res.data.status,
|
||
maintainUserIds: res.data.maintainUserIds,
|
||
remark: res.data.remark,
|
||
createTime: res.data.createTime,
|
||
maintainUserListName: ''
|
||
};
|
||
if (res.data.maintainUserList && res.data.maintainUserList.length > 0) {
|
||
form.value.maintainUserListName = res.data.maintainUserList
|
||
.map((it) => (it.nickName ? it.nickName : null))
|
||
.filter((it) => it !== null)
|
||
.join(',');
|
||
}
|
||
getlist();
|
||
});
|
||
}
|
||
}
|
||
init();
|
||
|
||
async function getlist() {
|
||
loading.value = true;
|
||
listDeviceRepair()
|
||
.then((rows) => {
|
||
deviceRepairList.value = rows.rows;
|
||
deviceRepairList.value.forEach((item) => {
|
||
item.maintainUserNames = item.maintainUserList
|
||
.map((i) => i.nickName)
|
||
.filter((i) => i)
|
||
.join(',');
|
||
});
|
||
total.value = rows.total;
|
||
})
|
||
.finally(() => {
|
||
loading.value = false;
|
||
});
|
||
}
|
||
|
||
/** 删除按钮操作 */
|
||
const handleDelete = async (row?: DeviceRepairVO) => {
|
||
const _ids = row?.id;
|
||
await proxy?.$modal.confirm('是否确认删除维修工单？');
|
||
await delDeviceRepair(_ids);
|
||
proxy?.$modal.msgSuccess('删除成功');
|
||
getlist();
|
||
};
|
||
|
||
const handleMain = (row) => {
|
||
router.push({
|
||
path: '/equipment/equipmentRepairMain',
|
||
query: {
|
||
id: row.id
|
||
}
|
||
});
|
||
};
|
||
const handleEdit = (row) => {
|
||
router.push({
|
||
path: '/equipment/editEquipmentRepair',
|
||
query: {
|
||
id: row.id
|
||
}
|
||
});
|
||
};
|
||
// 推出
|
||
const cancelForm = () => {
|
||
router.back();
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.AddBuildingBox {
|
||
padding: 15px;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.AddBuildingBody {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background-color: white;
|
||
padding: 15px;
|
||
.title {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding-left: 20px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
color: rgba(16, 16, 16, 1);
|
||
border-bottom: 1px solid #bbbbbb;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.addBuildingFormBody {
|
||
padding-left: 20px;
|
||
.infobox {
|
||
display: grid;
|
||
gap: 20px;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
.info_item {
|
||
display: flex;
|
||
align-items: center;
|
||
.label {
|
||
font-size: 15px;
|
||
width: 100px;
|
||
text-align: right;
|
||
}
|
||
.value {
|
||
font-weight: 450;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|