[Feat 0000]新增内业管理规程关联表增删改查

src/views/vent/internalManager/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="procedure-map">
+    <div class="option-area">
+      <label style="color: var(--vent-font-color)">设备类型：</label>
+      <Select
+        @change="handleChange"
+        :options="deviceKindOption"
+        :fieldNames="{ label: 'label', value: 'value' }"
+        v-model:value="deviceKind"
+        style="width: 200px; color: black"
+        placeholder="请选择设备类型"
+        :allowClear="true"
+      />
+      <a-button type="primary" preIcon="ant-design:search-outlined" style="margin: 0 15px" @click="getSearch">查询</a-button>
+      <a-button preIcon="ant-design:sync-outlined" @click="onReset" style="margin-right: 15px">重置</a-button>
+      <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd">新增</a-button>
+      <a-button type="primary" @click="handleLink" style="margin-left: 15px">自动关联</a-button>
+    </div>
+    <a-table size="small" :dataSource="dataSource" :columns="columnsMap" :scroll="{ y: 620 }" :pagination="pagination" @change="pageChange">
+      <template #action="{ record }">
+        <a class="table-action-link" @click="handleEdit(record)">编辑</a>
+        <!-- <a class="table-action-link" @click="handleDel(record)">删除</a> -->
+        <a-popconfirm title="确定删除?" @confirm="handleDel(record)">
+          <a class="table-action-link">删除</a>
+        </a-popconfirm>
+      </template>
+    </a-table>
+    <!-- 添加/编辑弹窗 -->
+    <a-modal v-model:visible="visibleMap" width="1000px" :footer="null" :title="titleMap" centered destroyOnClose>
+      <proceduresModal :isToggle="isToggle" :formState="formState" @close="handleClose" />
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Select, message } from 'ant-design-vue';
+  import { ref, reactive, onMounted } from 'vue';
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import { deleteById, getList, autoLinkReg } from './internalManager.api';
+  import { columnsMap } from './internalManager.data';
+  import proceduresModal from './procedures-modal.vue';
+
+  const dataSource = ref<any[]>([]);
+  const deviceKind = ref<string>('');
+  const deviceKindOption = ref([]);
+  //分页参数配置
+  const pagination = reactive({
+    current: 1, // 当前页码
+    pageSize: 10, // 每页显示条数
+    total: 0, // 总条目数，后端返回
+    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+    showSizeChanger: true, // 是否可改变每页显示条数
+    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
+  });
+  const visibleMap = ref(false);
+  const titleMap = ref('');
+  const isToggle = ref('');
+  const formState = reactive({
+    id: '',
+    regName: '',
+    regType: '',
+    deviceKind: '',
+    monitorDataName: '',
+    regRoute: '',
+  });
+
+  //关闭弹窗
+  function handleClose() {
+    visibleMap.value = false;
+    getListMap();
+  }
+  //添加
+  function handleAdd() {
+    titleMap.value = '新增规程关联表';
+    visibleMap.value = true;
+    isToggle.value = 'add';
+    Object.assign(formState, {
+      id: '',
+      regName: '',
+      regType: '',
+      deviceKind: '',
+      monitorDataName: '',
+      regRoute: '',
+    });
+  }
+  //编辑
+  function handleEdit(record) {
+    titleMap.value = '编辑规程关联表';
+    visibleMap.value = true;
+    isToggle.value = 'edit';
+
+    Object.assign(formState, {
+      id: record.id,
+      regName: record.regName,
+      regType: record.regType,
+      deviceKind: record.deviceKind,
+      monitorDataName: record.monitorDataName,
+      regRoute: record.regRoute,
+    });
+  }
+  //删除
+  async function handleDel(record) {
+    await deleteById({ id: record.id });
+    pagination.current = 1;
+    getListMap();
+  }
+
+  //分页切换
+  function pageChange(val) {
+    pagination.current = val.current;
+    pagination.pageSize = val.pageSize;
+    getListMap();
+  }
+
+  //获取数据列表
+  async function getListMap() {
+    let res = await getList({ deviceKind: deviceKind.value, pageNo: pagination.current, pageSize: pagination.pageSize });
+    if (res.records && res.records.length != 0) {
+      dataSource.value = res.records;
+      pagination.total = res.total;
+    } else {
+      dataSource.value = res.records;
+    }
+  }
+  //查询
+  function getSearch() {
+    pagination.current = 1;
+    getListMap();
+  }
+  //重置
+  function onReset() {
+    pagination.current = 1;
+    getListMap();
+  }
+  // 设备类型切换
+  function handleChange(type) {
+    deviceKind.value = type;
+    getListMap();
+  }
+
+  function handleLink() {
+    if (deviceKind.value) {
+      autoLinkReg({ Devicetype: deviceKind.value });
+      console.log('自动关联设备类型：', deviceKind.value);
+    } else {
+      message.error('请选择设备类型进行自动关联');
+      return;
+    }
+  }
+  onMounted(() => {
+    let dictName = 'devicekind';
+    const res = getDictItemsByCode(dictName);
+    deviceKindOption.value = res;
+    getListMap();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  .procedure-map {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+
+    .option-area {
+      display: flex;
+      height: 60px;
+      align-items: center;
+    }
+  }
+
+  :deep(.zxm-select-selector) {
+    width: 100%;
+    border: 1px solid var(--vent-form-item-border) !important;
+    background-color: #ffffff00 !important;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+</style>

src/views/vent/internalManager/internalManager.api.ts

@@ -0,0 +1,66 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  addList = '/ventanaly-device/safety/rdl/add',
+  addBatchList = '/ventanaly-device/safety/rdl/addBatch',
+  deleteById = '/ventanaly-device/safety/rdl/delete',
+  deleteBatch = '/ventanaly-device/safety/rdl/deleteBatch',
+  editList = '/ventanaly-device/safety/rdl/edit',
+  getList = '/ventanaly-device/safety/rdl/list',
+  queryById = '/ventanaly-device/safety/rdl/queryById',
+  autoLinkReg = '/ventanaly-device/safety/rdl/autoMonitorLinkReg',
+}
+/**
+ * 新增规程关联表
+ * @param params
+ */
+export const addList = (params) => defHttp.post({ url: Api.addList, params });
+
+/**
+ * 批量新增规程关联表
+ * @param params
+ */
+export const addBatchList = (params) => defHttp.post({ url: Api.addBatchList, params });
+
+/**
+ * 删除规程关联表
+ * @param params
+ */
+export const deleteById = (params) =>
+  defHttp.delete({ headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, url: Api.deleteById, params });
+
+/**
+ * 批量删除规程关联表
+ * @param params
+ */
+export const deleteBatch = (params) =>
+  defHttp.delete({ headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, url: Api.deleteBatch, params });
+
+/**
+ * 编辑规程关联表
+ * @param params
+ */
+export const editList = (params) => defHttp.post({ url: Api.editList, params });
+
+/**
+ * 规程关联表-分页列表查询
+ * @param params
+ */
+export const getList = (params) =>
+  defHttp.get({
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    url: Api.getList,
+    params,
+  });
+
+/**
+ * 规程关联表-通过id查询
+ * @param params
+ */
+export const queryById = (params) => defHttp.get({ headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, url: Api.queryById, params });
+
+/**
+ * 自动关联规程关联表
+ * @param params
+ */
+export const autoLinkReg = (params) => defHttp.post({ url: Api.autoLinkReg, params });

src/views/vent/internalManager/internalManager.data.ts

@@ -0,0 +1,51 @@
+import { BasicColumn } from '/@/components/Table';
+
+//数据映射报表
+export const columnsMap: BasicColumn[] = [
+  // 规程名称：regName
+  // 规程类型：regType（字典：regType）
+  // 设备种类：deviceKind
+  // 关联监测数据id：dataId（无需显示）
+  // 关联监测数据名称：monitorDataName
+  // 规则路由：regRoute
+
+  {
+    title: '序号',
+    width: 60,
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  {
+    title: '规程名称',
+    dataIndex: 'regName',
+    align: 'center',
+  },
+
+  {
+    title: '规程类型',
+    dataIndex: 'regType',
+    align: 'center',
+  },
+  {
+    title: '设备种类',
+    dataIndex: 'deviceKind',
+    align: 'center',
+  },
+  {
+    title: '关联监测数据名称',
+    dataIndex: 'monitorDataName',
+    align: 'center',
+  },
+  {
+    title: '规则路由',
+    dataIndex: 'regRoute',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 200,
+    align: 'center',
+    slots: { customRender: 'action' },
+  },
+];

src/views/vent/internalManager/procedures-modal.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="report-add">
+    <a-form :model="formStates" labelAlign="center" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+      <a-form-item label="规程名称：">
+        <a-input v-model:value="formStates.regName" placeholder="请输入规程名称" />
+      </a-form-item>
+      <a-form-item label="规程类型：">
+        <a-input v-model:value="formStates.regType" placeholder="请输入规程类型" />
+      </a-form-item>
+      <a-form-item label="设备种类：">
+        <a-input v-model:value="formStates.deviceKind" placeholder="请输入设备种类" />
+      </a-form-item>
+      <a-form-item label="关联监测数据名称：">
+        <a-input v-model:value="formStates.monitorDataName" placeholder="请输入关联监测数据名称" />
+      </a-form-item>
+      <a-form-item label="规则路由：">
+        <a-input v-model:value="formStates.regRoute" placeholder="请输入规则路由" />
+      </a-form-item>
+    </a-form>
+    <div class="confirm-btn">
+      <a-button type="primary" @click="getConfirm" style="margin-right: 15px">确定</a-button>
+      <a-button type="plain" @click="getCancel">取消</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, onMounted, watch } from 'vue';
+  import { addList, editList } from './internalManager.api';
+
+  let props = defineProps({
+    formState: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    isToggle: {
+      type: String,
+      default: '',
+    },
+  });
+
+  let formStates = reactive({
+    id: '',
+    regName: '',
+    regType: '',
+    deviceKind: '',
+    monitorDataName: '',
+    regRoute: '',
+  });
+  let emit = defineEmits<{
+    (e: 'close'): void;
+  }>();
+
+  async function getConfirm() {
+    const params = {
+      id: formStates.id,
+      regName: formStates.regName,
+      regType: formStates.regType,
+      deviceKind: formStates.deviceKind,
+      monitorDataName: formStates.monitorDataName,
+      regRoute: formStates.regRoute,
+    };
+    if (props.isToggle == 'add') {
+      await addList(params);
+    } else {
+      await editList(params);
+    }
+    emit('close');
+  }
+  function getCancel() {
+    emit('close');
+  }
+  // 监听formState变化，同步到表单
+  watch(
+    () => props.formState,
+    (newVal) => {
+      if (newVal) {
+        Object.assign(formStates, newVal);
+      }
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  .report-add {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .zxm-form {
+    width: 80%;
+    margin: 0px auto;
+  }
+
+  .confirm-btn {
+    width: 100%;
+    margin: 10px 0px;
+    text-align: center;
+  }
+
+  :deep(.zxm-form-item-label > label) {
+    color: #fff;
+  }
+
+  :deep(.zxm-select-selector) {
+    width: 100%;
+    color: #fff;
+    border: 1px solid var(--vent-form-item-border) !important;
+    background-color: #ffffff00 !important;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+
+  :deep(.zxm-select-selection-placeholder) {
+    color: #ccc !important;
+  }
+
+  :deep(.zxm-input) {
+    color: #fff;
+    border: 1px solid var(--vent-form-item-border) !important;
+    background-color: #ffffff00 !important;
+  }
+</style>