|
@@ -1,11 +1,21 @@
|
|
<template>
|
|
<template>
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
- <el-col :span="4" :xs="24">
|
|
|
|
|
|
+ <el-col :class="{'leftcontent': true, 'collapsed': isLeftContentCollapsed}" :span="isLeftContentCollapsed ? 0 : 4" :xs="24">
|
|
<ContentWrap class="h-1/1">
|
|
<ContentWrap class="h-1/1">
|
|
<DeptTree @node-click="handleDeptNodeClick" />
|
|
<DeptTree @node-click="handleDeptNodeClick" />
|
|
</ContentWrap>
|
|
</ContentWrap>
|
|
</el-col>
|
|
</el-col>
|
|
- <el-col :span="20" :xs="24">
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="toggle-button"
|
|
|
|
+ :style="{ left: isLeftContentCollapsed ? '0px' : '16%' }"
|
|
|
|
+ @click="toggleLeftContent"
|
|
|
|
+ @mouseover="handleMouseOver"
|
|
|
|
+ @mouseout="handleMouseOut"
|
|
|
|
+ :title="hoverText"
|
|
|
|
+ >
|
|
|
|
+ <span style="font-size: 5px" :class="{'triangle': true, 'rotated': isLeftContentCollapsed}"></span>
|
|
|
|
+ </div>
|
|
|
|
+ <el-col class="rightcontent" :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
|
|
<ContentWrap>
|
|
<ContentWrap>
|
|
<!-- 搜索工作栏 -->
|
|
<!-- 搜索工作栏 -->
|
|
<el-form
|
|
<el-form
|
|
@@ -76,16 +86,14 @@
|
|
{{ scope.$index + 1 }}
|
|
{{ scope.$index + 1 }}
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column :label="t('route.planTitle')" align="center" prop="planTitle" width="220" />
|
|
|
|
- <el-table-column :label="t('route.planNumber')" align="center" prop="planCode" width="220" />
|
|
|
|
|
|
+ <el-table-column :label="t('route.planTitle')" align="center" prop="planTitle" />
|
|
|
|
+ <el-table-column :label="t('route.planNumber')" align="center" prop="planCode" />
|
|
<el-table-column :label="t('route.cycle')" align="center" prop="planCycle" width="80"/>
|
|
<el-table-column :label="t('route.cycle')" align="center" prop="planCycle" width="80"/>
|
|
<el-table-column :label="t('workOrderMaterial.unit')" align="center" prop="planUnit" width="80">
|
|
<el-table-column :label="t('workOrderMaterial.unit')" align="center" prop="planUnit" width="80">
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
<dict-tag :type="DICT_TYPE.PMS_INSPECT_UNIT" :value="scope.row.planUnit" />
|
|
<dict-tag :type="DICT_TYPE.PMS_INSPECT_UNIT" :value="scope.row.planUnit" />
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
-<!-- <el-table-column :label="t('iotMaintain.PersonInCharge')" align="center" prop="chargeName" />-->
|
|
|
|
- <!-- <el-table-column label="设备" align="center" prop="deviceIds" />-->
|
|
|
|
<el-table-column :label="t('bomList.status')" key="status" width="80">
|
|
<el-table-column :label="t('bomList.status')" key="status" width="80">
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
<el-switch
|
|
<el-switch
|
|
@@ -96,7 +104,6 @@
|
|
/>
|
|
/>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
-<!-- <el-table-column :label="t('form.remark')" align="center" prop="remark" />-->
|
|
|
|
<el-table-column
|
|
<el-table-column
|
|
:label="t('route.beginCreateTime')"
|
|
:label="t('route.beginCreateTime')"
|
|
align="center"
|
|
align="center"
|
|
@@ -109,10 +116,10 @@
|
|
align="center"
|
|
align="center"
|
|
prop="lastCreateTime"
|
|
prop="lastCreateTime"
|
|
:formatter="dateFormatter"
|
|
:formatter="dateFormatter"
|
|
- width="180px"
|
|
|
|
|
|
+ width="150px"
|
|
/>
|
|
/>
|
|
- <!-- <el-table-column label="部门id" align="center" prop="deptId" />-->
|
|
|
|
- <el-table-column :label="t('operationFill.operation')" align="center" min-width="120px">
|
|
|
|
|
|
+ <el-table-column :label="t('inspect.createName')" align="center" prop="createName" width="130"/>
|
|
|
|
+ <el-table-column :label="t('operationFill.operation')" align="center" width="180">
|
|
<template #default="scope">
|
|
<template #default="scope">
|
|
<el-button
|
|
<el-button
|
|
link
|
|
link
|
|
@@ -148,23 +155,23 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import { dateFormatter } from '@/utils/formatTime'
|
|
|
|
-import download from '@/utils/download'
|
|
|
|
-import { IotInspectPlanApi, IotInspectPlanVO } from '@/api/pms/inspect/plan'
|
|
|
|
-import IotInspectPlanForm from './IotInspectPlanForm.vue'
|
|
|
|
-import { CommonStatusEnum } from '@/utils/constants'
|
|
|
|
-import {DICT_TYPE} from "@/utils/dict";
|
|
|
|
|
|
+import { ref, reactive, onMounted } from 'vue';
|
|
|
|
+import { dateFormatter } from '@/utils/formatTime';
|
|
|
|
+import download from '@/utils/download';
|
|
|
|
+import { IotInspectPlanApi, IotInspectPlanVO } from '@/api/pms/inspect/plan';
|
|
|
|
+import IotInspectPlanForm from './IotInspectPlanForm.vue';
|
|
|
|
+import { CommonStatusEnum } from '@/utils/constants';
|
|
|
|
+import { DICT_TYPE } from "@/utils/dict";
|
|
import DeptTree from "@/views/system/user/DeptTree.vue";
|
|
import DeptTree from "@/views/system/user/DeptTree.vue";
|
|
-const { push } = useRouter() // 路由跳转
|
|
|
|
-/** 巡检计划 列表 */
|
|
|
|
-defineOptions({ name: 'IotInspectPlan' })
|
|
|
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
|
|
|
-const message = useMessage() // 消息弹窗
|
|
|
|
-const { t } = useI18n() // 国际化
|
|
|
|
|
|
+const { push } = useRouter();
|
|
|
|
+const { t } = useI18n();
|
|
|
|
|
|
-const loading = ref(true) // 列表的加载中
|
|
|
|
-const list = ref<IotInspectPlanVO[]>([]) // 列表的数据
|
|
|
|
-const total = ref(0) // 列表的总页数
|
|
|
|
|
|
+const loading = ref(true);
|
|
|
|
+const list = ref<IotInspectPlanVO[]>([]);
|
|
|
|
+const total = ref(0);
|
|
const queryParams = reactive({
|
|
const queryParams = reactive({
|
|
pageNo: 1,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
@@ -177,94 +184,133 @@ const queryParams = reactive({
|
|
remark: undefined,
|
|
remark: undefined,
|
|
createTime: [],
|
|
createTime: [],
|
|
deptId: undefined
|
|
deptId: undefined
|
|
-})
|
|
|
|
-const queryFormRef = ref() // 搜索的表单
|
|
|
|
-const exportLoading = ref(false) // 导出的加载中
|
|
|
|
|
|
+});
|
|
|
|
+const queryFormRef = ref();
|
|
|
|
+const exportLoading = ref(false);
|
|
|
|
+
|
|
|
|
+const isLeftContentCollapsed = ref(false);
|
|
|
|
+const hoverText = ref('');
|
|
|
|
+
|
|
const handleDeptNodeClick = async (row) => {
|
|
const handleDeptNodeClick = async (row) => {
|
|
- queryParams.deptId = row.id
|
|
|
|
- await getList()
|
|
|
|
-}
|
|
|
|
|
|
+ queryParams.deptId = row.id;
|
|
|
|
+ await getList();
|
|
|
|
+};
|
|
|
|
+
|
|
const handleStatusChange = async (row: IotInspectPlanVO) => {
|
|
const handleStatusChange = async (row: IotInspectPlanVO) => {
|
|
try {
|
|
try {
|
|
- // 修改状态的二次确认
|
|
|
|
- const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
|
|
|
|
- await message.confirm('确认要"' + text + '""' + row.planTitle + '"巡检计划吗?')
|
|
|
|
- // 发起修改状态
|
|
|
|
- await IotInspectPlanApi.updateIotInspectStatus(row.id, row.status)
|
|
|
|
- // 刷新列表
|
|
|
|
- await getList()
|
|
|
|
|
|
+ const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用';
|
|
|
|
+ await message.confirm('确认要"' + text + '""' + row.planTitle + '"巡检计划吗?');
|
|
|
|
+ await IotInspectPlanApi.updateIotInspectStatus(row.id, row.status);
|
|
|
|
+ await getList();
|
|
} catch {
|
|
} catch {
|
|
- // 取消后,进行恢复按钮
|
|
|
|
- row.status =
|
|
|
|
- row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
|
|
|
|
|
|
+ row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE;
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
-/** 查询列表 */
|
|
|
|
const getList = async () => {
|
|
const getList = async () => {
|
|
- loading.value = true
|
|
|
|
|
|
+ loading.value = true;
|
|
try {
|
|
try {
|
|
- const data = await IotInspectPlanApi.getIotInspectPlanPage(queryParams)
|
|
|
|
- list.value = data.list
|
|
|
|
- total.value = data.total
|
|
|
|
|
|
+ const data = await IotInspectPlanApi.getIotInspectPlanPage(queryParams);
|
|
|
|
+ list.value = data.list;
|
|
|
|
+ total.value = data.total;
|
|
} finally {
|
|
} finally {
|
|
- loading.value = false
|
|
|
|
|
|
+ loading.value = false;
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
-/** 搜索按钮操作 */
|
|
|
|
const handleQuery = () => {
|
|
const handleQuery = () => {
|
|
- queryParams.pageNo = 1
|
|
|
|
- getList()
|
|
|
|
-}
|
|
|
|
|
|
+ queryParams.pageNo = 1;
|
|
|
|
+ getList();
|
|
|
|
+};
|
|
|
|
|
|
-/** 重置按钮操作 */
|
|
|
|
const resetQuery = () => {
|
|
const resetQuery = () => {
|
|
- queryFormRef.value.resetFields()
|
|
|
|
- handleQuery()
|
|
|
|
-}
|
|
|
|
|
|
+ queryFormRef.value.resetFields();
|
|
|
|
+ handleQuery();
|
|
|
|
+};
|
|
|
|
|
|
-/** 添加/修改操作 */
|
|
|
|
const openForm = (type: string, id?: number) => {
|
|
const openForm = (type: string, id?: number) => {
|
|
- //修改
|
|
|
|
if (typeof id === 'number') {
|
|
if (typeof id === 'number') {
|
|
- push({ name: 'InspectPlanEdit', params: { id } })
|
|
|
|
- return
|
|
|
|
|
|
+ push({ name: 'InspectPlanEdit', params: { id } });
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
- // 新增
|
|
|
|
- push({ name: 'InspectPlanAdd', params: {} })
|
|
|
|
-}
|
|
|
|
|
|
+ push({ name: 'InspectPlanAdd', params: {} });
|
|
|
|
+};
|
|
|
|
|
|
-/** 删除按钮操作 */
|
|
|
|
const handleDelete = async (id: number) => {
|
|
const handleDelete = async (id: number) => {
|
|
try {
|
|
try {
|
|
- // 删除的二次确认
|
|
|
|
- await message.delConfirm()
|
|
|
|
- // 发起删除
|
|
|
|
- await IotInspectPlanApi.deleteIotInspectPlan(id)
|
|
|
|
- message.success(t('common.delSuccess'))
|
|
|
|
- // 刷新列表
|
|
|
|
- await getList()
|
|
|
|
|
|
+ await message.delConfirm();
|
|
|
|
+ await IotInspectPlanApi.deleteIotInspectPlan(id);
|
|
|
|
+ message.success(t('common.delSuccess'));
|
|
|
|
+ await getList();
|
|
} catch {}
|
|
} catch {}
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
|
|
-/** 导出按钮操作 */
|
|
|
|
const handleExport = async () => {
|
|
const handleExport = async () => {
|
|
try {
|
|
try {
|
|
- // 导出的二次确认
|
|
|
|
- await message.exportConfirm()
|
|
|
|
- // 发起导出
|
|
|
|
- exportLoading.value = true
|
|
|
|
- const data = await IotInspectPlanApi.exportIotInspectPlan(queryParams)
|
|
|
|
- download.excel(data, '巡检计划.xls')
|
|
|
|
|
|
+ await message.exportConfirm();
|
|
|
|
+ exportLoading.value = true;
|
|
|
|
+ const data = await IotInspectPlanApi.exportIotInspectPlan(queryParams);
|
|
|
|
+ download.excel(data, '巡检计划.xls');
|
|
} catch {
|
|
} catch {
|
|
} finally {
|
|
} finally {
|
|
- exportLoading.value = false
|
|
|
|
|
|
+ exportLoading.value = false;
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const toggleLeftContent = () => {
|
|
|
|
+ isLeftContentCollapsed.value = !isLeftContentCollapsed.value;
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const handleMouseOver = () => {
|
|
|
|
+ hoverText.value = isLeftContentCollapsed.value ? '展开' : '收起';
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const handleMouseOut = () => {
|
|
|
|
+ hoverText.value = '';
|
|
|
|
+};
|
|
|
|
|
|
-/** 初始化 **/
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
- getList()
|
|
|
|
-})
|
|
|
|
|
|
+ getList();
|
|
|
|
+});
|
|
</script>
|
|
</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+.leftcontent {
|
|
|
|
+ transition: width 0.3s ease;
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.leftcontent.collapsed {
|
|
|
|
+ width: 0;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.toggle-button {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top:0;
|
|
|
|
+ bottom:0;
|
|
|
|
+ margin: auto;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ width: 15px;
|
|
|
|
+ height: 18px;
|
|
|
|
+ background-color: #ccc;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ z-index: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.triangle {
|
|
|
|
+ width: 0;
|
|
|
|
+ height: 0;
|
|
|
|
+ border-top: 6px solid transparent;
|
|
|
|
+ border-bottom: 6px solid transparent;
|
|
|
|
+ border-left: 5px solid #333;
|
|
|
|
+ transition: transform 0.3s ease;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.triangle.rotated {
|
|
|
|
+ transform: rotate(180deg);
|
|
|
|
+}
|
|
|
|
+</style>
|