Guoyan
/
ops-management-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

antd引入

aqm-ops-supervision-platform
wbc 3 weeks ago
parent
d02e873457
commit
e8a8fdd84e
3 changed files with 200 additions and 170 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 134
      src/views/station/device/index.vue
  2. 122
      src/views/station/info/detailDrawer.vue
  3. 114
      src/views/station/info/index.vue

134
src/views/station/device/index.vue
View File

@ -1,69 +1,41 @@
<template> <template>
<PageWrapper dense> <PageWrapper dense>
<a-row> <BasicTable @register="registerTable">
<a-col :span="4" style="margin-top: 1%"> <template #toolbar>
<a-tree <a-button type="primary" @click="showFaultModal">故障上报</a-button>
:show-icon="true" </template>
:tree-data="treeData" <template #bodyCell="{ column, record }">
v-model:selectedKeys="checkedTree" <template v-if="column && record && column.key === 'action'">
@select="onSelect" <a-button type="link" @click="showSendModal(record.id)">派遣</a-button>
:fieldNames="{ <a-button type="link" @click="showDrawer(record.id)">详情</a-button>
children: 'children', </template>
title: 'projectName', </template>
key: 'projectId', </BasicTable>
disabled: 'disabled', <faultModal ref="faultModalRef" @success="reload()"/>
}" <detailDrawer ref="detailDrawerRef" />
/> <sendModal ref="sendModalRef" @success="reload()"/>
</a-col>
<a-col :span="20">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleAdd" v-if="checkedTree[0]">新增</a-button>
<!-- <a-button type="primary">导入</a-button>
<a-button type="primary">导出</a-button> -->
</template>
<template #bodyCell="{ column, record }">
<template v-if="column && record && column.key === 'action'">
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
<a-popconfirm
title="确定要删除吗?"
ok-text="是"
cancel-text="否"
@confirm="handleDelete(record.id)"
>
<a-button type="link">删除</a-button>
</a-popconfirm>
</template>
</template>
</BasicTable>
<addModal ref="addModalRef" @success="reload()"/>
</a-col>
</a-row>
</PageWrapper> </PageWrapper>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable } from '@/components/Table'; import { BasicTable, useTable } from '@/components/Table';
import { list, tree,removeByIds } from './api'; import { list,getProjectInfo} from './api';
import { formSchemas, columns } from './data'; import { formSchemas, columns } from './data';
import addModal from './addModal.vue'; import faultModal from './faultModal.vue';
import { ref, onMounted } from 'vue'; import detailDrawer from './detailDrawer.vue';
import sendModal from './sendModal.vue';
import { ref,onActivated } from 'vue';
defineOptions({ name: 'meterial' }); const [registerTable,{reload}] = useTable({
title: '工单派遣',
const [registerTable, { reload }] = useTable({
rowSelection: {
type: 'checkbox',
},
title: '材料库',
api: list, api: list,
showIndexColumn: true, showIndexColumn: true,
rowKey: 'id', rowKey: 'id',
useSearchForm: true, useSearchForm: true,
formConfig: { formConfig: {
schemas: formSchemas, schemas: formSchemas,
name: 'meterial', name: 'orderSend',
baseColProps: { baseColProps: {
xs: 24, xs: 24,
sm: 24, sm: 24,
@ -71,54 +43,46 @@
lg: 6, lg: 6,
}, },
}, },
beforeFetch(params: any) {
if (checkedTree.value.length === 1) {
params.projectId = checkedTree.value[0];
}
return params;
},
immediate: false,
columns: columns, columns: columns,
actionColumn: { actionColumn: {
width: 300, width: 200,
title: '操作', title: '操作',
key: 'action', key: 'action',
fixed: 'right', fixed: 'right',
}, },
}); });
//新增编辑弹窗 //弹窗内容
const addModalRef = ref(); const faultModalRef = ref();
const handleAdd = () => { const showFaultModal = () => {
addModalRef.value.showModal(1, null, checkedTree.value[0]); faultModalRef.value.showModal();
}; };
const handleEdit = (id: any) => { const sendModalRef = ref()
addModalRef.value.showModal(2, id, checkedTree.value[0]); const showSendModal = (id:any) => {
sendModalRef.value.showModal(id);
}; };
const handleDelete = async (id: any) => { //详情抽屉
await removeByIds([id]); const detailDrawerRef = ref();
reload(); const showDrawer = (id: any) => {
detailDrawerRef.value.showDrawer(id);
}; };
const projectOptions = ref([]);
//tree const getProjectOptions = async () => {
const checkedTree = ref([]); const res = await getProjectInfo();
const treeData = ref([]); res.forEach((i: any) => {
const getTree = async () => { i.value = i.projectName;
const res = await tree(); i.label = i.projectName;
treeData.value = res;
treeData.value.forEach((i: any) => {
i.disabled = true;
}); });
console.log(res); projectOptions.value = res;
formSchemas[0].componentProps.options = projectOptions.value;
}; };
const onSelect = (selectedKeys: any, info: any) => { const getOptions = () => {
console.log('selected', selectedKeys, info); getProjectOptions();
console.log(checkedTree.value);
reload();
}; };
onMounted(() => { getOptions();
getTree(); onActivated(()=>{
}); reload()
//抽屉 })
// 前往审批记录页面
</script> </script>
<style scoped></style> <style scoped></style>

122
src/views/station/info/detailDrawer.vue
View File

@ -0,0 +1,122 @@
<template>
<div>
<!-- 抽屉组件 -->
<a-drawer
title="基本信息"
placement="right"
:closable="true"
:open="visible"
@close="onClose"
width="600px"
>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div><span class="titleLabel">所属区域：</span>{{ detail.area }}</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div><span class="titleLabel">站点地址：</span>{{ detail.station }}</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div><span class="titleLabel">站点经度：</span>{{ detail.longitude }}</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div><span class="titleLabel">站点纬度：</span>{{ detail.latitude }}</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div><span class="titleLabel">运维公司：</span>{{ detail.ioCompany }}</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div><span class="titleLabel">运维人员：</span>{{ detail.ioPerson }}</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div><span class="titleLabel">监理公司：</span>{{ detail.superviseCompany }}</div>
</a-col>
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<div><span class="titleLabel">状态：</span>{{ detail.status }}</div>
</a-col>
</a-row>
</a-drawer>
</div>
</template>
<script>
import { reactive, ref } from 'vue';
import { getInfo } from './api';
export default {
setup() {
//抽屉详情
let detail = reactive({
area: '',
station: '',
longitude: '',
latitude: '',
ioCompany: '',
ioPerson: '',
superviseCompany: '',
status: null,
});
// 打开抽屉的方法
const visible = ref(false);
const showDrawer = async (id) => {
visible.value = true;
// const data = await getInfo(id);
// for (let i in detail) {
// detail[i] = data[i];
// }
console.log(detail);
};
// 关闭抽屉的方法
const onClose = () => {
visible.value = false;
};
return {
visible,
showDrawer,
onClose,
detail,
};
},
};
</script>
<style scoped>
/* 可选样式调整 */
.ant-btn {
margin: 20px;
}
/* .singerDetail{
margin-bottom: 10px;
} */
div {
margin-bottom: 10px;
}
.timeText {
margin: 0 0 40px 20px;
color: red;
}
.titleLabel {
color: gray;
}
</style>

114
src/views/station/info/index.vue
View File

@ -1,69 +1,41 @@
<template> <template>
<PageWrapper dense> <PageWrapper dense>
<a-row> <BasicTable @register="registerTable">
<a-col :span="4" style="margin-top: 1%"> <template #toolbar>
<a-tree <!-- <a-button type="primary">导入</a-button>
:show-icon="true"
:tree-data="treeData"
v-model:selectedKeys="checkedTree"
@select="onSelect"
:fieldNames="{
children: 'children',
title: 'projectName',
key: 'projectId',
disabled: 'disabled',
}"
/>
</a-col>
<a-col :span="20">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleAdd" v-if="checkedTree[0]">新增</a-button>
<!-- <a-button type="primary">导入</a-button>
<a-button type="primary">导出</a-button> --> <a-button type="primary">导出</a-button> -->
</template> <a-button type="link" @click="showDrawer(1)">基本信息</a-button>
<template #bodyCell="{ column, record }"> </template>
<template v-if="column && record && column.key === 'action'"> <template #bodyCell="{ column, record }">
<a-button type="link" @click="handleEdit(record.id)">编辑</a-button> <template v-if="column && record && column.key === 'action'">
<a-popconfirm <a-button type="link" @click="showDrawer(record.id)">基本信息</a-button>
title="确定要删除吗?" <a-button type="link" @click="handleCheck(record.id)">核查情况</a-button>
ok-text="是" </template>
cancel-text="否" </template>
@confirm="handleDelete(record.id)" </BasicTable>
> <detailDrawer ref="detailDrawerRef" />
<a-button type="link">删除</a-button>
</a-popconfirm>
</template>
</template>
</BasicTable>
<addModal ref="addModalRef" @success="reload()"/>
</a-col>
</a-row>
</PageWrapper> </PageWrapper>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable } from '@/components/Table'; import { BasicTable, useTable } from '@/components/Table';
import { list, tree,removeByIds } from './api'; import { list, removeByIds } from './api';
import { formSchemas, columns } from './data'; import { formSchemas, columns } from './data';
import addModal from './addModal.vue'; import detailDrawer from './detailDrawer.vue';
import { ref, onMounted } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router';
defineOptions({ name: 'meterial' }); defineOptions({ name: 'info' });
const [registerTable, { reload }] = useTable({ const [registerTable, { reload }] = useTable({
rowSelection: { title: '子站信息管理',
type: 'checkbox',
},
title: '材料库',
api: list, api: list,
showIndexColumn: true, showIndexColumn: true,
rowKey: 'id', rowKey: 'id',
useSearchForm: true, useSearchForm: true,
formConfig: { formConfig: {
schemas: formSchemas, schemas: formSchemas,
name: 'meterial', name: 'info',
baseColProps: { baseColProps: {
xs: 24, xs: 24,
sm: 24, sm: 24,
@ -71,13 +43,7 @@
lg: 6, lg: 6,
}, },
}, },
beforeFetch(params: any) { immediate: true,
if (checkedTree.value.length === 1) {
params.projectId = checkedTree.value[0];
}
return params;
},
immediate: false,
columns: columns, columns: columns,
actionColumn: { actionColumn: {
width: 300, width: 300,
@ -87,38 +53,16 @@
}, },
}); });
//新增编辑弹窗 //新增编辑弹窗
const addModalRef = ref(); //
const handleAdd = () => { //详情，跳转
addModalRef.value.showModal(1, null, checkedTree.value[0]); const detailDrawerRef = ref();
}; const showDrawer = (id: any) => {
const handleEdit = (id: any) => { detailDrawerRef.value.showDrawer(id);
addModalRef.value.showModal(2, id, checkedTree.value[0]);
}; };
const handleDelete = async (id: any) => { const { push } = useRouter();
await removeByIds([id]); const handleCheck = (id: any) => {
reload(); push({ name: 'device',query:{stationID:id} });
}; };
//tree
const checkedTree = ref([]);
const treeData = ref([]);
const getTree = async () => {
const res = await tree();
treeData.value = res;
treeData.value.forEach((i: any) => {
i.disabled = true;
});
console.log(res);
};
const onSelect = (selectedKeys: any, info: any) => {
console.log('selected', selectedKeys, info);
console.log(checkedTree.value);
reload();
};
onMounted(() => {
getTree();
});
//抽屉
</script> </script>
<style scoped></style> <style scoped></style>

Write Preview
Loading…
Cancel
Save