新建子站管理

src/views/station/device/addModal.vue

@@ -0,0 +1,169 @@
+<template>
+  <a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%">
+    <a-form :model="form" layout="vertical" ref="formRef" :rules="rules">
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="名称" name="name">
+            <a-input v-model:value="form.name" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="状态" name="status">
+            <a-select v-model:value="form.status" :options="statusOptions" placeholder="请选择" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="规格" name="standards">
+            <a-input v-model:value="form.standards" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="单价(元)" name="price">
+            <a-input v-model:value="form.price" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="数量" name="amount">
+            <a-input v-model:value="form.amount" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="单位" name="unit">
+            <a-input v-model:value="form.unit" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="[16, 16]">
+        <a-col :span="24">
+          <a-form-item label="备注" name="remark">
+            <a-textarea v-model:value="form.remark" :rows="4" placeholder="请输入" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+  import { reactive, ref } from 'vue';
+  import { message } from 'ant-design-vue';
+  import {
+    getInfo,
+    add,
+    update,
+  } from './api';
+  export default {
+    setup(props,{emit}) {
+      const title = ref('新增');
+      const visible = ref(false);
+      const form = reactive({
+        name: '',
+        status: null,
+        remark: '',
+        unit: '',
+        price: '',
+        amount: '',
+        standards: '',
+        projectId:null, 
+        id:null
+      });
+      //下拉框
+      const statusOptions = [
+        {
+          value: 0,
+          label: '启用',
+        },
+        {
+          value: 1,
+          label: '禁用',
+        },
+      ];
+      const showModal = async(type, id,projectId) => {
+        console.log(projectId)
+        visible.value = true;
+        if (type == 1) {
+          title.value = '新增';
+        } else if (type == 2) {
+          title.value = '编辑';
+          const data = await getInfo(id);
+          for (let i in form) {
+            form[i] = data[i];
+          }
+        }
+        form.projectId = projectId
+      };
+
+      const handleOk = () => {
+        formRef.value.validate().then((valid) => {
+          if (valid) {
+            if (title.value == '新增') {
+              let params = {};
+              for (let i in form) {
+                params[i] = form[i];
+              }
+              delete params.id
+              add(params).then((_) => {
+                message.success('新增成功');
+                emit('success')
+                 closeModal()
+              });
+            } else {
+              let params = {};
+              for (let i in form) {
+                params[i] = form[i];
+              }
+              update(params).then((_) => {
+                message.success('编辑成功');
+                emit('success')
+                closeModal()
+              });
+            }
+          }
+        });
+      };
+      const closeModal = () => {
+        formRef.value.resetFields();
+        visible.value = false;
+      };
+      const formRef = ref()
+      const rules = {        
+        name: [{ required: true, message: '请输入' }],
+        status: [{ required: true, message: '请选择' }],
+        remark: [{ required: true, message: '请输入' }],
+        unit: [{ required: true, message: '请输入' }],
+        price: [{ required: true, message: '请输入' }],
+        amount: [{ required: true, message: '请输入' }],
+        standards: [{ required: true, message: '请输入' }],
+      };
+      return {
+        visible,
+        title,
+        form,
+        showModal,
+        handleOk,
+        statusOptions,
+        closeModal,
+        formRef,
+        rules
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  /* 可选样式调整 */
+  .ant-modal-body {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+</style>

src/views/station/device/api.ts

@@ -0,0 +1,36 @@
+import { ID, IDS, commonExport } from '@/api/base';
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  root = '/platform/matrialInfo',
+  list = '/platform/matrialInfo/list',
+  tree = '/platform/projectCategoryPoint/queryAll',
+  export = '/workflow/leave/export',
+}
+
+export function list(params: any) {
+  return defHttp.get({ url: Api.list, params });
+}
+export function tree() {
+  return defHttp.get({ url: Api.tree });
+}
+export function exportExcel(data: any) {
+  return commonExport(Api.export, data);
+}
+
+export function getInfo(id: ID) {
+  return defHttp.get({ url: `${Api.root}/${id}` });
+}
+
+export function add(data: any) {
+  return defHttp.post({ url: Api.root, data });
+}
+
+export function update(data: any) {
+  return defHttp.put({ url: Api.root, data });
+}
+
+export function removeByIds(ids: IDS) {
+  return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` });
+}
+

src/views/station/device/data.ts

@@ -0,0 +1,48 @@
+import { BasicColumn } from '@/components/Table';
+import { FormSchema } from '@/components/Form';
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '规格',
+    dataIndex: 'standards',
+  },
+  {
+    title: '单价(元)',
+    dataIndex: 'price',
+  },
+  {
+    title: '数量',
+    dataIndex: 'amount',
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'createTime',
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+  },
+];

src/views/station/device/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <PageWrapper dense>
+    <a-row>
+      <a-col :span="4" style="margin-top: 1%">
+        <a-tree
+          :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> -->
+          </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>
+</template>
+
+<script setup lang="ts">
+  import { PageWrapper } from '@/components/Page';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { list, tree,removeByIds } from './api';
+  import { formSchemas, columns } from './data';
+  import addModal from './addModal.vue';
+  import { ref, onMounted } from 'vue';
+
+  defineOptions({ name: 'meterial' });
+
+  const [registerTable, { reload }] = useTable({
+    rowSelection: {
+      type: 'checkbox',
+    },
+    title: '材料库',
+    api: list,
+    showIndexColumn: true,
+    rowKey: 'id',
+    useSearchForm: true,
+    formConfig: {
+      schemas: formSchemas,
+      name: 'meterial',
+      baseColProps: {
+        xs: 24,
+        sm: 24,
+        md: 24,
+        lg: 6,
+      },
+    },
+    beforeFetch(params: any) {
+      if (checkedTree.value.length === 1) {
+        params.projectId = checkedTree.value[0];
+      }
+      return params;
+    },
+    immediate: false,
+    columns: columns,
+    actionColumn: {
+      width: 300,
+      title: '操作',
+      key: 'action',
+      fixed: 'right',
+    },
+  });
+  //新增编辑弹窗
+  const addModalRef = ref();
+  const handleAdd = () => {
+    addModalRef.value.showModal(1, null, checkedTree.value[0]);
+  };
+  const handleEdit = (id: any) => {
+    addModalRef.value.showModal(2, id, checkedTree.value[0]);
+  };
+  const handleDelete = async (id: any) => {
+    await removeByIds([id]);
+    reload();
+  };
+
+  //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>
+
+<style scoped></style>

src/views/station/info/addModal.vue

@@ -0,0 +1,179 @@
+<template>
+  <a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%">
+    <a-row :gutter="[16, 16]">
+      <a-col :span="24">
+        <div><span class="titleLabel">所属项目：</span>{{ detail.projectName }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="24">
+        <div><span class="titleLabel">所属合同：</span>{{ detail.contractName }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="12">
+        <div><span class="titleLabel">编号：</span>{{ detail.id }}</div>
+      </a-col>
+      <a-col :span="12">
+        <div><span class="titleLabel">报修人员：</span>{{ detail.repairer }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="12">
+        <div><span class="titleLabel">状态：</span>{{ statusText(detail.status) }}</div>
+      </a-col>
+      <a-col :span="12">
+        <div><span class="titleLabel">待处理人：</span>{{ detail.handler }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="12">
+        <div><span class="titleLabel">报修时间：</span>{{ detail.repairTime }}</div>
+      </a-col>
+      <a-col :span="12">
+        <div><span class="titleLabel">是否事故：</span>{{ detail.isAccident }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="12">
+        <div><span class="titleLabel">故障大类：</span>{{ detail.faultCategory }}</div>
+      </a-col>
+      <a-col :span="12">
+        <div><span class="titleLabel">故障小类：</span>{{ detail.faultSubcategory }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="12">
+        <div><span class="titleLabel">所属机构：</span>{{ detail.organizationName }}</div>
+      </a-col>
+      <a-col :span="12">
+        <div><span class="titleLabel">响应级别：</span>{{ detail.responseLevel }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="24">
+        <div><span class="titleLabel">响应时限(小时)：</span>{{ detail.responseTime }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="24">
+        <div><span class="titleLabel">故障地址：</span>{{ detail.faultLocation }}</div>
+      </a-col>
+    </a-row>
+    <a-row :gutter="[16, 16]">
+      <a-col :span="24">
+        <div><span class="titleLabel">故障描述：</span>{{ detail.faultDescription }}</div>
+      </a-col>
+    </a-row>
+  </a-modal>
+</template>
+
+<script>
+  import { reactive, ref } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { getInfo, add, update } from './api';
+  export default {
+    setup() {
+      const title = ref('新增');
+      const visible = ref(false);
+      const form = reactive({
+        name: '',
+        status: null,
+        remark: '',
+        unit: '',
+        price: '',
+        amount: '',
+        standards: '',
+        projectId: null,
+        id: null,
+      });
+      //下拉框
+      const statusOptions = [
+        {
+          value: 0,
+          label: '启用',
+        },
+        {
+          value: 1,
+          label: '禁用',
+        },
+      ];
+      const showModal = async (type, id, projectId) => {
+        console.log(projectId);
+        visible.value = true;
+        if (type == 1) {
+          title.value = '新增';
+        } else if (type == 2) {
+          title.value = '编辑';
+          const data = await getInfo(id);
+          for (let i in form) {
+            form[i] = data[i];
+          }
+        }
+        form.projectId = projectId;
+      };
+
+      const handleOk = () => {
+        formRef.value.validate().then((valid) => {
+          if (valid) {
+            if (title.value == '新增') {
+              let params = {};
+              for (let i in form) {
+                params[i] = form[i];
+              }
+              delete params.id;
+              add(params).then((_) => {
+                message.success('新增成功');
+                emit('success');
+                closeModal();
+              });
+            } else {
+              let params = {};
+              for (let i in form) {
+                params[i] = form[i];
+              }
+              update(params).then((_) => {
+                message.success('编辑成功');
+                emit('success');
+                closeModal();
+              });
+            }
+          }
+        });
+      };
+      const closeModal = () => {
+        formRef.value.resetFields();
+        visible.value = false;
+      };
+      const formRef = ref();
+      const rules = {
+        name: [{ required: true, message: '请输入' }],
+        status: [{ required: true, message: '请选择' }],
+        remark: [{ required: true, message: '请输入' }],
+        unit: [{ required: true, message: '请输入' }],
+        price: [{ required: true, message: '请输入' }],
+        amount: [{ required: true, message: '请输入' }],
+        standards: [{ required: true, message: '请输入' }],
+      };
+      return {
+        visible,
+        title,
+        form,
+        showModal,
+        handleOk,
+        statusOptions,
+        closeModal,
+        formRef,
+        rules,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  /* 可选样式调整 */
+  .ant-modal-body {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+</style>

src/views/station/info/api.ts

@@ -0,0 +1,36 @@
+import { ID, IDS, commonExport } from '@/api/base';
+import { defHttp } from '@/utils/http/axios';
+
+enum Api {
+  root = '/platform/matrialInfo',
+  list = '/platform/matrialInfo/list',
+  tree = '/platform/projectCategoryPoint/queryAll',
+  export = '/workflow/leave/export',
+}
+
+export function list(params: any) {
+  return defHttp.get({ url: Api.list, params });
+}
+export function tree() {
+  return defHttp.get({ url: Api.tree });
+}
+export function exportExcel(data: any) {
+  return commonExport(Api.export, data);
+}
+
+export function getInfo(id: ID) {
+  return defHttp.get({ url: `${Api.root}/${id}` });
+}
+
+export function add(data: any) {
+  return defHttp.post({ url: Api.root, data });
+}
+
+export function update(data: any) {
+  return defHttp.put({ url: Api.root, data });
+}
+
+export function removeByIds(ids: IDS) {
+  return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` });
+}
+

src/views/station/info/data.ts

@@ -0,0 +1,70 @@
+import { BasicColumn } from '@/components/Table';
+import { FormSchema } from '@/components/Form';
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: 'area',
+    label: '所在区域',
+    component: 'Select',
+    componentProps: {
+      options: [],
+    },
+  },
+  {
+    field: 'status',
+    label: '当前状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          value: '正常',
+        },
+        {
+          value: '预警',
+        },
+        {
+          value: '报警',
+        },
+      ],
+    },
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '子站名称',
+    dataIndex: 'station',
+  },
+  {
+    title: '所属区域',
+    dataIndex: 'area',
+  },
+  {
+    title: '地址',
+    dataIndex: 'address',
+  },
+  {
+    title: '经度',
+    dataIndex: 'longitude',
+  },
+  {
+    title: '纬度',
+    dataIndex: 'latitude',
+  },
+  {
+    title: '运维公司',
+    dataIndex: 'ioCompany',
+  },
+  {
+    title: '运维人员',
+    dataIndex: 'ioPerson',
+  },
+  {
+    title: '监理公司',
+    dataIndex: 'superviseCompany',
+  },
+    {
+    title: '状态',
+    dataIndex: 'status',
+  },
+];

src/views/station/info/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <PageWrapper dense>
+    <a-row>
+      <a-col :span="4" style="margin-top: 1%">
+        <a-tree
+          :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> -->
+          </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>
+</template>
+
+<script setup lang="ts">
+  import { PageWrapper } from '@/components/Page';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { list, tree,removeByIds } from './api';
+  import { formSchemas, columns } from './data';
+  import addModal from './addModal.vue';
+  import { ref, onMounted } from 'vue';
+
+  defineOptions({ name: 'meterial' });
+
+  const [registerTable, { reload }] = useTable({
+    rowSelection: {
+      type: 'checkbox',
+    },
+    title: '材料库',
+    api: list,
+    showIndexColumn: true,
+    rowKey: 'id',
+    useSearchForm: true,
+    formConfig: {
+      schemas: formSchemas,
+      name: 'meterial',
+      baseColProps: {
+        xs: 24,
+        sm: 24,
+        md: 24,
+        lg: 6,
+      },
+    },
+    beforeFetch(params: any) {
+      if (checkedTree.value.length === 1) {
+        params.projectId = checkedTree.value[0];
+      }
+      return params;
+    },
+    immediate: false,
+    columns: columns,
+    actionColumn: {
+      width: 300,
+      title: '操作',
+      key: 'action',
+      fixed: 'right',
+    },
+  });
+  //新增编辑弹窗
+  const addModalRef = ref();
+  const handleAdd = () => {
+    addModalRef.value.showModal(1, null, checkedTree.value[0]);
+  };
+  const handleEdit = (id: any) => {
+    addModalRef.value.showModal(2, id, checkedTree.value[0]);
+  };
+  const handleDelete = async (id: any) => {
+    await removeByIds([id]);
+    reload();
+  };
+
+  //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>
+
+<style scoped></style>