feat 可视化大屏管理

src/views/modules/develop/report/ProjectInfo.api.ts

@@ -0,0 +1,80 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+
+/**
+ * 分页
+ */
+export function page(params) {
+  return defHttp.get<Result<PageResult<ProjectInfo>>>({
+    url: '/goview/admin/page',
+    params,
+  })
+}
+
+/**
+ * 查询全部
+ */
+export function findAll() {
+  return defHttp.get<Result<ProjectInfo[]>>({
+    url: '/goview/admin/findAll',
+  })
+}
+
+/**
+ * 获取单条
+ */
+export function get(id) {
+  return defHttp.get<Result<ProjectInfo>>({
+    url: '/goview/admin/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export function add(obj: ProjectInfo) {
+  return defHttp.post({
+    url: '/goview/admin/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export function update(obj: ProjectInfo) {
+  return defHttp.post({
+    url: '/goview/admin/update',
+    data: obj,
+  })
+}
+
+/**
+ * 删除
+ */
+export function del(id) {
+  return defHttp.delete({
+    url: '/goview/admin/delete',
+    params: { id },
+  })
+}
+
+/**
+ * 自定义大屏信息
+ */
+export interface ProjectInfo extends BaseEntity {
+  // 项目名称
+  name?: string
+  // 发布状态
+  state?: number
+  // 报表内容
+  content?: string
+  // 备注
+  remark?: string
+  // 预览图片id
+  indexImage?: string
+  // 是否在编辑中
+  edit?: boolean
+}

src/views/modules/develop/report/ProjectInfoEdit.vue

@@ -0,0 +1,132 @@
+<template>
+  <basic-modal
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :title="title"
+    :width="modalWidth"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+      <a-form
+        class="small-from-item"
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :validate-trigger="['blur', 'change']"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="主键" :hidden="true">
+          <a-input v-model:value="form.id" :disabled="showable" />
+        </a-form-item>
+        <a-form-item label="项目名称" name="name">
+          <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入项目名称" />
+        </a-form-item>
+        <a-form-item label="发布状态" name="state">
+          <a-input v-model:value="form.state" :disabled="showable" placeholder="请输入发布状态" />
+        </a-form-item>
+        <a-form-item label="报表内容" name="content">
+          <a-input v-model:value="form.content" :disabled="showable" placeholder="请输入报表内容" />
+        </a-form-item>
+        <a-form-item label="备注" name="remark">
+          <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        </a-form-item>
+        <a-form-item label="预览图片id" name="indexImage">
+          <a-input v-model:value="form.indexImage" :disabled="showable" placeholder="请输入预览图片id" />
+        </a-form-item>
+        <a-form-item label="是否在编辑中" name="edit">
+          <a-input v-model:value="form.edit" :disabled="showable" placeholder="请输入是否在编辑中" />
+        </a-form-item>
+      </a-form>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, reactive } from 'vue'
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { add, get, update, ProjectInfo } from './ProjectInfo.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicModal } from '/@/components/Modal'
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  // 表单
+  const formRef = $ref<FormInstance>()
+  let form = $ref<ProjectInfo>({
+    id: null,
+    name: null,
+    state: null,
+    content: null,
+    remark: null,
+    indexImage: null,
+    edit: null,
+  })
+  // 校验
+  const rules = reactive({} as Record<string, Rule[]>)
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(id, editType: FormEditType) {
+    initFormEditType(editType)
+    resetForm()
+    getInfo(id, editType)
+  }
+  // 获取信息
+  function getInfo(id, editType: FormEditType) {
+    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
+      confirmLoading.value = true
+      get(id).then(({ data }) => {
+        form = data
+        confirmLoading.value = false
+      })
+    } else {
+      confirmLoading.value = false
+    }
+  }
+  // 保存
+  function handleOk() {
+    formRef?.validate().then(async () => {
+      confirmLoading.value = true
+      if (formEditType.value === FormEditType.Add) {
+        await add(form)
+      } else if (formEditType.value === FormEditType.Edit) {
+        await update(form)
+      }
+      confirmLoading.value = false
+      handleCancel()
+      emits('ok')
+    })
+  }
+
+  // 重置表单
+  function resetForm() {
+    nextTick(() => {
+      formRef?.resetFields()
+    })
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>

src/views/modules/develop/report/ProjectInfoList.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="name" title="项目名称" />
+        <vxe-column field="state" title="发布状态" />
+        <vxe-column field="content" title="报表内容" />
+        <vxe-column field="remark" title="备注" />
+        <vxe-column field="indexImage" title="预览图片id" />
+        <vxe-column field="edit" title="是否在编辑中" />
+        <vxe-column field="createTime" title="创建时间" />
+        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a-link @click="show(row)">查看</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <span>
+              <a-link @click="edit(row)">编辑</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
+              <a-link danger>删除</a-link>
+            </a-popconfirm>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+      <project-info-edit ref="projectInfoEdit" @ok="queryPage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { del, page } from './ProjectInfo.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import ProjectInfoEdit from './ProjectInfoEdit.vue'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { QueryField } from '/@/components/Bootx/Query/Query'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+
+  // 查询条件
+  const fields = [] as QueryField[]
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const projectInfoEdit = $ref<any>()
+
+  onMounted(() => {
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable?.connect(xToolbar as VxeToolbarInstance)
+  }
+
+  // 分页查询
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  // 新增
+  function add() {
+    projectInfoEdit.init(null, FormEditType.Add)
+  }
+  // 编辑
+  function edit(record) {
+    projectInfoEdit.init(record.id, FormEditType.Edit)
+  }
+  // 查看
+  function show(record) {
+    projectInfoEdit.init(record.id, FormEditType.Show)
+  }
+
+  // 删除
+  function remove(record) {
+    del(record.id).then(() => {
+      createMessage.success('删除成功')
+      queryPage()
+    })
+    }
+</script>
+
+<style lang="less" scoped></style>