政策管理

src/router/routes/index.ts

@@ -1319,6 +1319,27 @@ export const ResourceRoute: AppRouteRecordRaw = {
     },
   ],
 };
+/**
+ * 服务平台
+ */
+export const ServicePlatformRoute: AppRouteRecordRaw = {
+  path: '/servicePlatform',
+  name: 'servicePlatform',
+  component: LAYOUT,
+  meta: {
+    title: '服务平台',
+    icon: '',
+    hidden: true,
+    currentActiveMenu: '/servicePlatform',
+  },
+  children: [
+    {
+      path: 'policyManagement/detail',
+      name: 'policyManagementDetail',
+      component: () => import('@/views/servicePlatform/policyManagement/detail/index.vue'),
+    },
+  ],
+};
 // Basic routing without permission
 // 没有权限要求的基本路由
 export const basicRoutes = [
@@ -1353,4 +1374,5 @@ export const basicRoutes = [
   processCenterRoute,
   BenchmarkRoute,
   PCFontRoute,
+  ServicePlatformRoute,
 ];

src/views/servicePlatform/policyManagement/detail/detail.data.ts

+import { FormSchema } from '@/components/Form';
+
+export const infoFormSchema: FormSchema[] = [
+  {
+    label: '标题',
+    field: 'title',
+    component: 'Input',
+    required: true,
+    colProps: { span: 12 },
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '来源',
+    field: 'from',
+    component: 'Input',
+    colProps: { span: 12 },
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '编辑人',
+    field: 'createBy',
+    component: 'Input',
+    colProps: { span: 12 },
+    componentProps: {
+      style: {
+        width: '90%',
+      },
+    },
+  },
+  {
+    label: '编辑时间',
+    field: 'createTime',
+    component: 'DatePicker',
+    colProps: { span: 12 },
+    componentProps: {
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      showTime: 'showTime',
+      style: {
+        width: '90%',
+      },
+    },
+  },
+];
+export const detailFormSchema: FormSchema[] = [
+  {
+    label: '图片',
+    field: 'imgSrc',
+    slot: 'imgSrc',
+    colProps: { span: 24 },
+  },
+  {
+    label: '正文',
+    field: 'details',
+    required: true,
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+      style: {
+        width: '95%',
+      },
+    },
+    colProps: { span: 24 },
+  },
+];

src/views/servicePlatform/policyManagement/detail/index.vue

+<template>
+  <PageWrapper dense contentBackground headerSticky>
+    <template #headerContent>
+      <div class="header">
+        <div class="h-title">
+          <FileProtectOutlined class="h-icon" :color="'#6499e9'" />
+          <div class="h-txt">
+            <div v-if="status === 'detail'" class="h-des">{{ data.title }}</div>
+            <div v-if="status === 'add'" class="h-des">新增政策</div>
+            <div v-if="status === 'edit'" class="h-des">编辑政策</div>
+          </div>
+        </div>
+        <div class="h-group">
+          <a-button
+            class="btn"
+            type="primary"
+            v-if="['add', 'edit'].includes(status)"
+            @click="handleSave"
+          >
+            保存
+          </a-button>
+          <a-button
+            class="btn"
+            type="primary"
+            :disabled="!(['add', 'edit'].includes(status) && isSave)"
+            v-if="['add', 'edit'].includes(status)"
+            @click="handleUpload"
+          >
+            发布
+          </a-button>
+          <a-button class="btn" type="primary" v-if="status === 'detail'" @click="handleEdit">
+            编辑
+          </a-button>
+        </div>
+      </div>
+      <div v-show="['add', 'edit'].includes(status)" class="pd-body">
+        <div class="title">基本信息</div>
+        <BasicForm @register="infoForm" />
+        <div class="title">正文</div>
+        <BasicForm @register="detailForm">
+          <template #imgSrc="{ field, model }">
+            <Upload style="width: 45%" v-model:file-list="fileList" list-type="picture">
+              <a-button>
+                <UploadOutlined />
+                选择图片
+              </a-button>
+            </Upload>
+          </template>
+        </BasicForm>
+      </div>
+      <div v-show="status === 'detail'" class="pd-detail">
+        <div class="pd-des">
+          <div class="pd-time">{{ data.uploadTime }}</div>
+          <div class="pd-from">来源：{{ data.from }}</div>
+        </div>
+        <Divider style="width: 100%" />
+        <div class="pd-txt">
+          <img
+            v-if="fileList[0] && fileList[0].thumbUrl"
+            :src="fileList[0] ? fileList[0].thumbUrl : null"
+            style="width: 80%; height: 200px;"
+            alt=""
+          />
+          <div class="des-p">
+            {{ data.details }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref } from 'vue';
+  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicTable, useTable, TableAction, BasicTableProps } from '@/components/Table';
+  import { Input, Upload, Divider } from 'ant-design-vue';
+  import { FileProtectOutlined, UploadOutlined } from '@ant-design/icons-vue';
+  import {
+    policyFormSchema,
+    policyTableColumn,
+  } from '@/views/servicePlatform/policyManagement/policy.data';
+  import { policyData } from '@/views/servicePlatform/policyManagement/policyData';
+  import { useRoute, useRouter } from 'vue-router';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import { editFormSchema } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/model.data';
+  import {
+    detailFormSchema,
+    infoFormSchema,
+  } from '@/views/servicePlatform/policyManagement/detail/detail.data';
+  import moment from 'moment';
+
+  // 初始化
+  const route = useRoute();
+  const { createMessage } = useMessage();
+  // 数据
+  const status = ref(route.query.status);
+  const data = ref(route.query);
+  const isSave = ref(false);
+  const fileList = ref([]);
+  onMounted(() => {
+    console.log('date', moment().format('YYYY-MM-DD HH:mm:ss'));
+    setInfoValue({
+      ...data.value,
+      createBy: 'admin',
+      createTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+    });
+    setDetailValue({
+      ...data.value,
+    });
+  });
+  /**
+   * 方法
+   */
+  function handleImg() {
+    console.log('图片', fileList);
+  }
+  async function handleSave() {
+    await infoValidate();
+    await detailValidate();
+    createMessage.success('保存成功！');
+    isSave.value = true;
+  }
+  function handleUpload() {
+    data.value = { ...getInfoValue(), ...getDetailValue() };
+    createMessage.success('发布成功！');
+    status.value = 'detail';
+  }
+  function handleEdit() {
+    status.value = 'edit';
+    isSave.value = false;
+  }
+  /**
+   * form
+   */
+  const [
+    infoForm,
+    { setFieldsValue: setInfoValue, getFieldsValue: getInfoValue, validate: infoValidate },
+  ] = useForm({
+    labelWidth: 100,
+    schemas: infoFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [
+    detailForm,
+    { setFieldsValue: setDetailValue, getFieldsValue: getDetailValue, validate: detailValidate },
+  ] = useForm({
+    labelWidth: 100,
+    baseColProps: { span: 25 },
+    schemas: detailFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+</script>
+
+<style scoped>
+  .header {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    .h-title {
+      flex: 1;
+      display: flex;
+      gap: 10px;
+      .h-icon {
+        font-size: 40px !important;
+        color: #0a208a;
+      }
+      .h-des {
+        font-size: 18px;
+        font-weight: bolder;
+        line-height: 40px;
+      }
+      .h-path {
+        font-size: 12px;
+      }
+    }
+    .h-group {
+      display: flex;
+      gap: 10px;
+    }
+  }
+  .pd-body {
+    padding: 20px 0;
+  }
+  .pd-detail {
+    margin-top: 15px;
+    .pd-des {
+      display: flex;
+      gap: 10px;
+    }
+    .pd-txt {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .des-p {
+        width: 80%;
+        font-size: 16px;
+        text-indent: 2em;
+        line-height: 40px;
+        word-wrap: break-word; /* 防止单词溢出 */
+        white-space: normal; /* 允许文本自动换行 */
+        overflow-wrap: break-word; /* 确保文本不会溢出 */
+      }
+    }
+  }
+  .title {
+    font-weight: bolder;
+    font-size: 16px;
+    margin: 15px 10px;
+  }
+</style>

src/views/servicePlatform/policyManagement/index.vue

@@ -10,12 +10,14 @@
         </div>
         <div class="h-group">
           <a-button class="btn" type="primary" @click="handleAdd"> 新增 </a-button>
-          <a-button class="btn" type="primary" @click="handleDelete"> 批量删除 </a-button>
+          <a-button :disabled="getDisabled()" class="btn" type="primary" @click="handleDelete">
+            批量删除
+          </a-button>
         </div>
       </div>
     </template>
     <div class="h-full" style="padding: 0 25px">
-      <BasicTable @register="registerApplySuccessTable">
+      <BasicTable @register="registerTable" ref="table">
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
             <TableAction
@@ -30,6 +32,7 @@
                 },
                 {
                   label: '删除',
+                  color: 'error',
                   onClick: handleRemove.bind(null, record),
                 },
               ]"
@@ -45,42 +48,102 @@
   import { onMounted, ref } from 'vue';
   import PageWrapper from '@/components/Page/src/PageWrapper.vue';
   import { useMessage } from '@/hooks/web/useMessage';
-  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { BasicTable, useTable, TableAction, BasicTableProps } from '@/components/Table';
   import { FileProtectOutlined } from '@ant-design/icons-vue';
+  import {
+    policyFormSchema,
+    policyTableColumn,
+  } from '@/views/servicePlatform/policyManagement/policy.data';
+  import { policyData } from '@/views/servicePlatform/policyManagement/policyData';
+  import { useRouter } from 'vue-router';
 
   // 初始化
-  const { createMessage } = useMessage();
+  const router = useRouter();
+  const { createMessage, createConfirm } = useMessage();
+  const table = ref();
   // 数据
 
   onMounted(() => {});
   // 方法
+  // 获取禁用
+  function getDisabled() {
+    if (table.value) {
+      return getSelectRows().length <= 0;
+    } else {
+      return true;
+    }
+  }
   // 新增
   function handleAdd() {
-
+    router.push({
+      path: '/servicePlatform/policyManagement/detail',
+      query: {
+        status: 'add',
+      },
+    });
   }
   // 批量删除
   function handleDelete() {
-
+    createConfirm({
+      iconType: 'warning',
+      title: '确认批量删除',
+      content: '确认批量删除选中的数据吗？',
+      onOk() {
+        createMessage.success('批量删除成功!');
+      },
+    });
+  }
+  // 详情
+  function handleDetail(record) {
+    router.push({
+      path: '/servicePlatform/policyManagement/detail',
+      query: {
+        ...record,
+        status: 'detail',
+      },
+    });
+  }
+  // 编辑
+  function handleEdit(record) {
+    router.push({
+      path: '/servicePlatform/policyManagement/detail',
+      query: {
+        ...record,
+        status: 'edit',
+      },
+    });
+  }
+  // 删除
+  function handleRemove() {
+    createConfirm({
+      iconType: 'warning',
+      title: '确认删除',
+      content: '确认删除这条数据吗？',
+      onOk() {
+        createMessage.success('删除成功!');
+      },
+    });
   }
   /**
    * table
    */
-  const [registerApplySuccessTable] = useTable({
-    dataSource: [],
-    columns: [],
+  const [registerTable, { getSelectRows }] = useTable({
+    dataSource: policyData,
+    columns: policyTableColumn,
+    rowSelection: true,
     useSearchForm: true,
     formConfig: {
       showActionButtonGroup: false,
-      schemas: [],
+      schemas: policyFormSchema,
       autoSubmitOnEnter: true,
     },
     actionColumn: {
-      width: 120,
+      width: 150,
       title: '操作',
       dataIndex: 'action',
     },
     showIndexColumn: false,
-  });
+  } as BasicTableProps);
 </script>
 
 <style lang="scss" scoped>

src/views/servicePlatform/policyManagement/policy.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const policyTableColumn: BasicColumn[] = [
+  {
+    title: '标题',
+    dataIndex: 'title',
+  },
+  {
+    title: '发布时间',
+    dataIndex: 'uploadTime',
+  },
+  {
+    title: '发布人',
+    dataIndex: 'uploadBy',
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+  },
+  {
+    title: '来源',
+    dataIndex: 'from',
+  },
+  {
+    title: '审核人',
+    dataIndex: 'auditor',
+  },
+];
+export const policyFormSchema: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入关键字进行搜索',
+    },
+    style: {
+      width: '120px',
+    },
+  },
+  {
+    label: ' ',
+    field: 'uploadTime',
+    component: 'RangePicker',
+    labelWidth: 10,
+    style: {
+      width: '120px',
+    },
+  },
+  {
+    label: ' ',
+    field: 'type',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '',
+          value: '',
+        },
+      ],
+    },
+    labelWidth: 10,
+    style: {
+      width: '120px',
+    },
+  },
+];