[Wip 0000] 模型-算法模型管理页面开发

src/views/system/algorithm/algorithm.data.ts

@@ -0,0 +1,81 @@
+import { FormSchema } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+import { getDepartName } from '@/utils/common/compUtils';
+
+/** 煤层预警参数 表格配置 */
+export const columnsCoalAlarm: BasicColumn[] = [
+  {
+    title: 'N1',
+    dataIndex: 'name1',
+    width: 100,
+  },
+  {
+    title: '部门',
+    dataIndex: 'departName',
+    customRender: ({ text }) => {
+      return getDepartName(text);
+    },
+  },
+  /*  {
+    title: '职务',
+    dataIndex: 'post',
+    width: 150,
+    slots: { customRender: 'post' },
+  },*/
+  {
+    title: '手机',
+    width: 110,
+    dataIndex: 'phone',
+    customRender: ({ record, text }) => {
+      if (record.izHideContact && record.izHideContact === '1') {
+        return '/';
+      }
+      return text;
+    },
+  },
+];
+
+/** 采空区超限 表格配置 */
+export const columnsGoafLimit: BasicColumn[] = [
+  {
+    title: 'N2',
+    dataIndex: 'name2',
+    width: 100,
+  },
+  {
+    title: '部门',
+    dataIndex: 'departName',
+    customRender: ({ text }) => {
+      return getDepartName(text);
+    },
+  },
+  /*  {
+    title: '职务',
+    dataIndex: 'post',
+    width: 150,
+    slots: { customRender: 'post' },
+  },*/
+  {
+    title: '手机',
+    width: 110,
+    dataIndex: 'phone',
+    customRender: ({ record, text }) => {
+      if (record.izHideContact && record.izHideContact === '1') {
+        return '/';
+      }
+      return text;
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '姓名',
+    field: 'realname',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
+
+export const schemasCoalAlarm: FormSchema[] = [];
+export const schemasGoafLimit: FormSchema[] = [];

src/views/system/algorithm/index.less

@@ -0,0 +1,2 @@
+.algorithm-model {
+}

src/views/system/algorithm/index.vue

@@ -0,0 +1,153 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="algorithm-model">
+    <!--引用表格-->
+    <BasicTable :ellipsis="true" @register="registerTable">
+      <template #tableTitle>
+        <div class="table-title-bar">
+          <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" size="small">
+            <a-tab-pane tab="预警参数" key="coal"></a-tab-pane>
+            <a-tab-pane tab="超限预警" key="goaf"></a-tab-pane>
+          </a-tabs>
+          <!-- <span class="export-btn" v-if="searchInfo.logType == 2">
+            <a-tooltip>
+              <template #title>导出</template>
+              <a-button type="text" preIcon="ant-design:download-outlined" shape="circle" @click="onExportXls" />
+            </a-tooltip>
+          </span> -->
+        </div>
+      </template>
+
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              onClick: () => handleEdit(record),
+            },
+            {
+              label: '删除',
+              onClick: () => {},
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <BasicModal @register="registerModal" @ok="handleSubmit" title="预警参数设置">
+      <BasicForm @register="registerForm" />
+    </BasicModal>
+    <!-- <BasicModal @register="registerCoalModal" @ok="handleCoalEdit" title="预警参数设置">
+      <BasicForm @register="registerCoalForm" />
+    </BasicModal>
+    <BasicModal @register="registerGoafModal" @ok="handleGoafEdit" title="超限预警设置">
+      <BasicForm @register="registerGoafForm" />
+    </BasicModal> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, provide, ref, unref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import DepartLeftTree from './components/DepartLeftTree.vue';
+  import { useModal, BasicModal, ModalProps } from '/@/components/Modal';
+  import { useForm, BasicForm, FormProps } from '/@/components/Form';
+  import { BasicTable, BasicTableProps, FormSchema, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { columnsCoalAlarm, columnsGoafLimit, schemasCoalAlarm, schemasGoafLimit, searchFormSchema } from './algorithm.data';
+  import { list, positionList } from './algorithm.api';
+  import { getCacheByDynKey } from '@/utils/auth';
+  import { JEECG_CHAT_UID } from '@/enums/cacheEnum';
+
+  const { prefixCls } = useDesign('algorithm-list');
+  provide('prefixCls', prefixCls);
+
+  const activeKey = ref('coal');
+  const tablePropsMap = new Map<string, Partial<BasicTableProps>>([
+    ['coal', { api: () => Promise.resolve([{ id: 1, name1: '测试TAB1' }]), columns: columnsCoalAlarm, rowKey: 'id' }],
+    ['goaf', { api: () => Promise.resolve([{ id: 2, name2: '测试TAB1' }]), columns: columnsGoafLimit, rowKey: 'id' }],
+  ]);
+  const modalPropsMap = new Map<string, Partial<ModalProps>>([
+    ['coal', { title: '预警参数设置', visible: true }],
+    ['goaf', { title: '超限预警设置', visible: true }],
+  ]);
+  const formPropsMap = new Map<string, Partial<FormProps>>([
+    ['coal', { schemas: schemasCoalAlarm }],
+    ['goaf', { schemas: schemasGoafLimit }],
+  ]);
+  // const rowEditMap;
+
+  // 给子组件定义一个ref变量
+  const leftTree = ref();
+
+  // 当前选中的部门code
+  const orgCode = ref('');
+  const positionInfo = ref({});
+
+  // 列表页面公共参数、方法
+  const { tableContext } = useListPage({
+    tableProps: {
+      ...tablePropsMap.get('coal'),
+      showIndexColumn: true,
+      formConfig: {
+        schemas: searchFormSchema,
+      },
+      // canResize: false,
+      // showTableSetting: false,
+      // 请求之前对参数做处理
+      beforeFetch(params) {
+        params.orgCode = orgCode.value;
+      },
+    },
+  });
+  //注册table数据
+  const [registerTable, { reload, setProps }] = tableContext;
+
+  // 左侧树选择后触发
+  function onTreeSelect(data) {
+    orgCode.value = data.orgCode;
+    reload();
+  }
+
+  function handleTabChange(key) {
+    activeKey.value = key;
+    if (!tablePropsMap.has(key)) return;
+    setProps(tablePropsMap.get(key) as BasicTableProps);
+    reload();
+  }
+
+  function handleEdit(record) {
+    if (!modalPropsMap.has(activeKey.value)) return;
+    if (!formPropsMap.has(activeKey.value)) return;
+    setModalProps(modalPropsMap.get(activeKey.value) as ModalProps);
+    nextTick(() => {
+      setFormProps({
+        model: record,
+        schemas: formPropsMap.get(activeKey.value) as FormSchema[],
+      });
+    });
+  }
+
+  const [registerModal, { setModalProps }] = useModal();
+  const [registerForm, { setProps: setFormProps }] = useForm({
+    schemas: schemasCoalAlarm,
+    showResetButton: false,
+    showSubmitButton: false,
+  });
+  // const [registerCoalModal, coalModalContext] = useModal();
+  // const [registerCoalForm, coalFormContext] = useForm({
+  //   schemas: schemasCoalAlarm,
+  // });
+
+  // function handleCoalEdit() {}
+
+  // const [registerGoafModal, goafModalContext] = useModal();
+  // const [registerGoafForm, goafFormContext] = useForm({
+  //   schemas: schemasGoafLimit,
+  // });
+
+  function handleGoafEdit() {}
+</script>
+
+<style lang="less">
+  @import './index.less';
+</style>