329 lines
9.0 KiB
Vue
329 lines
9.0 KiB
Vue
<template>
|
|
<div>
|
|
<a-card title="项目数据">
|
|
<a-row :gutter="10">
|
|
<a-col :span="4">
|
|
<span>项目总数:{{ projectData.totalNum }}</span>
|
|
</a-col>
|
|
<a-col :span="4">
|
|
<span>已开工总数:{{ projectData.startedNum }}</span>
|
|
</a-col>
|
|
<a-col :span="4">
|
|
<span>未开工:{{ projectData.notStartNum }}</span>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
<div class="page">
|
|
<div class="ele-body">
|
|
<a-card :bordered="false">
|
|
<!-- 表格 -->
|
|
<ele-pro-table
|
|
ref="tableRef"
|
|
row-key="projectId"
|
|
:columns="columns"
|
|
:datasource="datasource"
|
|
v-model:selection="selection"
|
|
:customRow="customRow"
|
|
:height="tableHeight"
|
|
:full-height="fixedHeight ? 'calc(100vh - 100px)' : void 0"
|
|
tool-class="ele-toolbar-form"
|
|
:scroll="{ x: 1200 }"
|
|
class="sys-org-table"
|
|
:striped="true"
|
|
>
|
|
<template #toolbar>
|
|
<search
|
|
@search="reload"
|
|
:selection="selection"
|
|
@add="openEdit"
|
|
@remove="removeBatch"
|
|
/>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'nickname'">
|
|
{{ record.nickname }}
|
|
</template>
|
|
<template v-if="column.key === 'orders'">
|
|
{{ record.orders.length > 0 ? record.orders[0].comments : "" }}
|
|
</template>
|
|
<template v-if="column.key === 'createTime'">
|
|
{{ record.createTime }}
|
|
</template>
|
|
<template v-if="column.key === 'action'">
|
|
<a-space>
|
|
<a @click="openEdit(record)">修改</a>
|
|
<a-divider type="vertical" />
|
|
<a @click="openEdit(record)">库存查看</a>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</ele-pro-table>
|
|
</a-card>
|
|
</div>
|
|
<!-- 编辑弹窗 -->
|
|
<ProjectEdit v-model:visible="showEdit" :data="current" @done="reload" />
|
|
<!-- 订单详情 -->
|
|
<order-info v-model:visible="showInfo" :data="current" @done="reload" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { createVNode, computed, ref, reactive } from "vue";
|
|
import { message, Modal } from "ant-design-vue";
|
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
|
import type { EleProTable } from "ele-admin-pro";
|
|
import type {
|
|
DatasourceFunction,
|
|
ColumnItem
|
|
} from "ele-admin-pro/es/ele-pro-table/types";
|
|
import Search from "./components/search.vue";
|
|
import ProjectEdit from "./components/project-edit.vue";
|
|
import OrderInfo from "./components/order-info.vue";
|
|
import {
|
|
pageProject,
|
|
removeBatchProject,
|
|
removeProject, towerProjectData
|
|
} from "@/api/tower/project";
|
|
import { Project, ProjectParam } from "@/api/tower/project/model";
|
|
import { towerEquipmentData } from "@/api/tower/equipment";
|
|
|
|
defineProps<{
|
|
activeKey?: boolean;
|
|
data?: any;
|
|
}>();
|
|
|
|
// 表格实例
|
|
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
|
|
|
// 表格列配置
|
|
const columns = ref<ColumnItem[]>([
|
|
{
|
|
key: "index",
|
|
width: 48,
|
|
align: "center",
|
|
fixed: "left",
|
|
hideInSetting: true,
|
|
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
|
|
},
|
|
{
|
|
title: "项目状态",
|
|
dataIndex: "projectStatus",
|
|
key: "projectStatus"
|
|
},
|
|
{
|
|
title: "项目名称",
|
|
dataIndex: "projectName",
|
|
key: "projectName"
|
|
},
|
|
// {
|
|
// title: '具体标地',
|
|
// // dataIndex: 'projectCity',
|
|
// key: 'orders'
|
|
// },
|
|
{
|
|
title: "承租单位",
|
|
dataIndex: "customerName",
|
|
key: "customerName"
|
|
},
|
|
{
|
|
title: "项目所属主管部门",
|
|
dataIndex: "competentDepartment"
|
|
},
|
|
{
|
|
title: "关联设备数",
|
|
dataIndex: "equipmentNum"
|
|
},
|
|
{
|
|
title: "项目管理员",
|
|
dataIndex: "director"
|
|
},
|
|
// {
|
|
// title: '检查次数',
|
|
// dataIndex: 'companyId',
|
|
// key: 'companyId'
|
|
// },
|
|
// {
|
|
// title: '保养次数',
|
|
// dataIndex: 'companyId',
|
|
// key: 'companyId'
|
|
// },
|
|
{
|
|
title: "创建时间",
|
|
dataIndex: "createTime"
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
width: 150,
|
|
align: "center",
|
|
hideInSetting: true
|
|
}
|
|
]);
|
|
|
|
// 表格选中数据
|
|
const selection = ref<Project[]>([]);
|
|
// 当前编辑数据
|
|
const current = ref<Project | null>(null);
|
|
// 是否显示资产详情
|
|
const showInfo = ref(false);
|
|
// 是否显示编辑弹窗
|
|
const showEdit = ref(false);
|
|
// 表格固定高度
|
|
const fixedHeight = ref(true);
|
|
// 表格高度
|
|
const tableHeight = computed(() => {
|
|
return fixedHeight.value ? "calc(100vh - 308px)" : void 0;
|
|
});
|
|
|
|
// 表格数据源
|
|
const datasource: DatasourceFunction = ({
|
|
page,
|
|
limit,
|
|
where,
|
|
orders,
|
|
filters
|
|
}) => {
|
|
// 搜索条件
|
|
if (filters.payMethod) {
|
|
where.payMethod = filters.payMethod;
|
|
}
|
|
if (filters.deliveryType) {
|
|
where.deliveryType = filters.deliveryType;
|
|
}
|
|
if (filters.payStatus) {
|
|
where.payStatus = filters.payStatus;
|
|
}
|
|
if (filters.orderSource) {
|
|
where.orderSource = filters.orderSource;
|
|
}
|
|
where.tenantId = localStorage.getItem("tenantId");
|
|
where.payStatus = 20;
|
|
return pageProject({
|
|
...where,
|
|
...orders,
|
|
page,
|
|
limit
|
|
});
|
|
};
|
|
|
|
/* 搜索 */
|
|
const reload = (where?: ProjectParam) => {
|
|
selection.value = [];
|
|
tableRef?.value?.reload({ where: where });
|
|
getData();
|
|
};
|
|
|
|
/* 打开编辑弹窗 */
|
|
const openEdit = (row?: Project) => {
|
|
current.value = row ?? null;
|
|
showEdit.value = true;
|
|
};
|
|
|
|
/* 打开用户详情弹窗 */
|
|
const openInfo = (row?: Project) => {
|
|
current.value = row ?? null;
|
|
showInfo.value = true;
|
|
};
|
|
|
|
|
|
let projectData = reactive({
|
|
totalNum: 0,
|
|
startedNum: 0,
|
|
notStartNum: 0
|
|
});
|
|
const getData = async () => {
|
|
const res = await towerProjectData();
|
|
for (let key in projectData) projectData[key] = res[key];
|
|
};
|
|
|
|
/* 删除单个 */
|
|
const remove = (row: Project) => {
|
|
const hide = message.loading("请求中..", 0);
|
|
removeProject(row.projectId)
|
|
.then((msg) => {
|
|
hide();
|
|
message.success(msg);
|
|
reload();
|
|
})
|
|
.catch((e) => {
|
|
hide();
|
|
message.error(e.message);
|
|
});
|
|
};
|
|
|
|
/* 批量删除 */
|
|
const removeBatch = () => {
|
|
console.log(selection.value);
|
|
if (!selection.value.length) {
|
|
message.error("请至少选择一条数据");
|
|
return;
|
|
}
|
|
Modal.confirm({
|
|
title: "提示",
|
|
content: "确定要删除选中的记录吗?",
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
maskClosable: true,
|
|
onOk: () => {
|
|
const hide = message.loading("请求中..", 0);
|
|
removeBatchProject(selection.value.map((d) => d.projectId))
|
|
.then((msg) => {
|
|
hide();
|
|
message.success(msg);
|
|
reload();
|
|
})
|
|
.catch((e) => {
|
|
hide();
|
|
message.error(e.message);
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
/* 自定义行属性 */
|
|
const customRow = (record: Project) => {
|
|
return {
|
|
// 行点击事件
|
|
onClick: () => {
|
|
// console.log(record);
|
|
},
|
|
// 行双击事件
|
|
onDblclick: () => {
|
|
openEdit(record);
|
|
}
|
|
};
|
|
};
|
|
|
|
reload();
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: "ProjectIndex"
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
p {
|
|
line-height: 0.8;
|
|
}
|
|
|
|
.sys-org-table :deep(.ant-table-body) {
|
|
overflow: auto !important;
|
|
overflow: overlay !important;
|
|
}
|
|
|
|
.sys-org-table :deep(.ant-table-pagination.ant-pagination) {
|
|
padding: 0 4px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.price-edit {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.comments {
|
|
max-width: 200px;
|
|
}
|
|
</style>
|