优化对话框和编辑器组件样式，调整表单布局和逻辑

src/components/Dialog/src/Dialog.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   width: propTypes.oneOfType([String, Number]).def('40%'),
   scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
   maxHeight: propTypes.oneOfType([String, Number]).def('400px'),
-
+	top: propTypes.string.def('15vh')
 })
 
 const getBindValue = computed(() => {
@@ -29,9 +29,7 @@ const getBindValue = computed(() => {
 
 const isFullscreen = ref(false)
 
-const toggleFull = () => {
+
-  isFullscreen.value = !unref(isFullscreen)
-}
 
 const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)
 
@@ -67,6 +65,7 @@ const dialogStyle = computed(() => {
     lock-scroll
     class="com-dialog"
     :show-close="false"
+    :top="top"
   >
     <template #header="{ close }">
       <div class="relative h-54px flex items-center justify-between pl-15px pr-15px">
@@ -115,7 +114,6 @@ const dialogStyle = computed(() => {
     }
 
     &__body {
-      padding: 15px !important;
     }
 
     &__footer {

src/components/Editor/src/Editor.vue

@@ -91,7 +91,6 @@ const editorConfig = computed((): IEditorConfig => {
       scroll: true,
 
       MENU_CONF: {
-
         ['uploadImage']: {
           server: getUploadUrl(),
           // 单个文件的最大体积限制，默认为 2M
@@ -229,13 +228,15 @@ defineExpose({
 </script>
 
 <template>
-  <div class="border-0 border-solid border-[var(--tags-view-border-color)] z-10">
+  <div
+    class="border-solid border-1 border-#dcdfe6 border-rounded-4px overflow-hidden z-10 pl-2px pr-2px"
+  >
     <!-- 工具栏 -->
     <Toolbar
       v-if="getShowToolbar"
       :editor="editorRef"
       :editorId="editorId"
-      class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
+      class="border-0 b-b-1 border-solid border-#303133"
     />
     <!-- 编辑器 -->
     <Editor
@@ -245,8 +246,21 @@ defineExpose({
       :style="editorStyle"
       @on-change="handleChange"
       @on-created="handleCreated"
+      class="scroll-block-none wgEdit"
     />
   </div>
 </template>
 
 <style src="@wangeditor/editor/dist/css/style.css"></style>
+
+<style scoped>
+.wgEdit >>> .w-e-scroll::-webkit-scrollbar {
+  width: 4px !important;
+  //height: 8px !important;
+}
+.wgEdit >>> .w-e-scroll::-webkit-scrollbar-thumb {
+  background-color: #dcdfe6 !important;
+  border-radius: 10px !important;
+  box-shadow: none !important;
+}
+</style>

src/styles/variables.scss

@@ -5,6 +5,7 @@ $elNamespace: el;
 
 .el-form--inline {
   display: flex;
+  flex-flow: row wrap;
   gap: 40px;
   margin-bottom: 0;
   .el-form-item {
@@ -23,3 +24,8 @@ $elNamespace: el;
     color: #909399;
   }
 }
+
+.el-pagination--large .btn-next, .el-pagination--large .btn-prev, .el-pagination--large .el-pager li{
+  height: fit-content;
+  line-height: normal;
+}

src/utils/formatTime.ts

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
 import type { TableColumnCtx } from 'element-plus'
 
 /**
@@ -69,7 +70,7 @@ export function formatDate(date: Date, format?: string): string {
     return ''
   }
   // 日期存在，则进行格式化
-  return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
+  return date ? dayjs(date).locale('zh-cn').format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
 }
 
 /**
@@ -198,7 +199,7 @@ export function formatPast2(ms: number): string {
  * @param cellValue 字段值
  */
 export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
-  return cellValue ? formatDate(cellValue) : ''
+  return cellValue ? formatDate(cellValue, 'YYYY年MM月DD日 A') : ''
 }
 
 /**
@@ -209,10 +210,9 @@ export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue
  * @param cellValue 字段值
  */
 export function dateFormatter2(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
-  return cellValue ? formatDate(cellValue, 'YYYY-MM-DD') : ''
+  return cellValue ? formatDate(cellValue, 'YYYY年MM月DD日') : ''
 }
 
-
 /**
  * element plus 的时间 Formatter 实现，使用 YYYY年MM月DD日 格式
  *
@@ -224,8 +224,6 @@ export function dateFormatter3(_row: any, _column: TableColumnCtx<any>, cellValu
   return cellValue ? formatDate(cellValue, 'YYYY年MM月DD日') : ''
 }
 
-
-
 /**
  * 设置起始日期，时间为00:00:00
  * @param param 传入日期

src/views/system/policy/PolicyForm.vue

@@ -1,31 +1,41 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%" >
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="65vw" top="5vh">
     <el-form
       ref="formRef"
       :model="formData"
       :rules="formRules"
-      label-width="100px"
       v-loading="formLoading"
+      class="policyForm"
     >
-      <el-form-item label="名称" prop="name">
+      <section class="flex flex-wrap gap-18px">
+        <el-form-item label="标题名称" prop="name" class="w-[calc(100%/2-10px)]">
           <el-input v-model="formData.name" placeholder="请输入名称" />
         </el-form-item>
-      <el-form-item label="生效日期" prop="effectiveDate">
+        <el-form-item label="生效日期" prop="effectiveDate" class="w-[calc(100%/2-10px)]">
           <el-date-picker
             v-model="formData.effectiveDate"
             type="date"
             placeholder="请选择生效日期"
             value-format="YYYY-MM-DD"
             :default-value="new Date()"
+            class="!w100%"
           />
         </el-form-item>
-      <el-form-item label="内容" prop="context">
+        <el-form-item label="内容详细" prop="context" class="w100%">
-        <Editor v-model="formData.context" height="350px" />
+          <Editor v-model="formData.context" height="350px" class="!w100%" />
         </el-form-item>
+      </section>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-popconfirm title="是否确定删除当前政策法规？" @confirm="deletePolicy" width="230">
+        <template #reference>
+          <el-button type="danger" v-if="formType == 'update'" link class="underline">
+            我要删除
+          </el-button>
+        </template>
+      </el-popconfirm>
       <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
     </template>
   </Dialog>
 </template>
@@ -107,4 +117,20 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+const deletePolicy=()=>{
+	PolicyApi.deletePolicy(formData.value.id).then(()=>{
+		message.success(t('common.delSuccess'))
+		dialogVisible.value = false
+		emit('success')
+	})
+}
 </script>
+
+<style scoped lang="scss">
+.policyForm {
+  ::v-deep(.el-form-item--large) {
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/system/policy/index.vue

@@ -1,14 +1,9 @@
 <template>
   <ContentWrap>
+    <section class="flex flex-col gap-20px">
       <!-- 搜索工作栏 -->
-    <el-form
+      <el-form :model="queryParams" ref="queryFormRef" :inline="true" @submit.prevent>
-      class="-mb-15px"
+        <el-form-item prop="name">
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="名称" prop="name">
           <el-input
             v-model="queryParams.name"
             placeholder="请输入名称"
@@ -17,31 +12,21 @@
             class="!w-240px"
           />
         </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-220px"
-        />
-      </el-form-item>
         <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="handleQuery" type="primary" plain>
+            <Icon icon="ep:search" class="mr-5px" /> 查询
+          </el-button>
           <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        </el-form-item>
+        <el-form-item class="ml-auto">
           <el-button
             type="primary"
-          plain
             @click="openForm('create')"
             v-hasPermi="['system:policy:create']"
           >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+            <Icon icon="ep:circle-plus" class="mr-5px" /> 新增
           </el-button>
           <el-button
-          type="success"
-          plain
             @click="handleExport"
             :loading="exportLoading"
             v-hasPermi="['system:policy:export']"
@@ -50,23 +35,26 @@
           </el-button>
         </el-form-item>
       </el-form>
-  </ContentWrap>
+      <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
-
+        <el-table-column label="名称" prop="name" />
-  <!-- 列表 -->
+        <el-table-column
-  <ContentWrap>
+          label="生效日期"
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+          prop="effectiveDate"
-      <!-- <el-table-column label="id" align="center" prop="id" /> -->
+          :formatter="dateFormatter2"
-      <el-table-column label="名称" align="center" prop="name" />
+          width="320"
-      <el-table-column label="生效日期" align="center" prop="effectiveDate"  :formatter="dateFormatter2" />
+        />
-
+        <el-table-column label="发布人" width="320">
+          <template #default="{ row }">
+            {{ `${row.createName} | ${row.createDeptName}` }}
+          </template>
+        </el-table-column>
         <el-table-column
           label="创建时间"
-        align="center"
           prop="createTime"
           :formatter="dateFormatter"
-        width="180px"
+          width="320"
         />
-      <el-table-column label="操作" align="center" min-width="120px">
+        <el-table-column label="操作选项" align="center" width="120px">
           <template #default="scope">
             <el-button
               link
@@ -76,32 +64,20 @@
             >
               编辑
             </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['system:policy:delete']"
-          >
-            删除
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="clickOpenDetail(scope.row.id)"
-            
-          >
-            详情
-          </el-button>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页 -->
-    <Pagination
+      <el-pagination
         :total="total"
-      v-model:page="queryParams.pageNo"
+        :show-page-size="false"
-      v-model:limit="queryParams.pageSize"
+        layout="total, prev, pager, next"
-      @pagination="getList"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @change="getList"
+        class="ml-auto"
       />
+    </section>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
@@ -109,7 +85,7 @@
 </template>
 
 <script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
+import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { PolicyApi, PolicyVO } from '@/api/system/policy'
 import PolicyForm from './PolicyForm.vue'
@@ -127,7 +103,7 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: undefined,
-  createTime: [],
+  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -145,7 +121,7 @@ const getList = async () => {
 }
 
 const clickOpenDetail = (id: number) => {
-  console.log(id);
+  console.log(id)
   window.open(`/policyDetail?id=${id}`, '_blank')
 }
 

src/views/system/taglibrary/index.vue

@@ -1,18 +1,26 @@
 <template>
   <ContentWrap>
     <section class="flex flex-col gap-20px">
-      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+      <el-form
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+        @submit.prevent
+      >
         <el-form-item label="" prop="tagName">
           <el-input
             v-model="queryParams.tagName"
             placeholder="请输入标签的名称"
             clearable
-            @keyup.enter="handleQuery"
+            @keyup.enter.prevent="handleQuery"
             class="!w-240px"
           />
         </el-form-item>
         <el-form-item label="">
-          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-8px" /> 搜索</el-button>
+          <el-button @click="handleQuery" type="primary" plain
+            ><Icon icon="ep:search" class="mr-8px" /> 查询
+          </el-button>
           <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-8px" /> 重置</el-button>
           <el-button
             type="success"
@@ -30,13 +38,18 @@
           </el-button>
         </el-form-item>
       </el-form>
-      <el-table :data="list">
+      <el-table :data="list" size="large">
         <el-table-column label="父级标签" prop="parentName" />
         <el-table-column label="标签名称" prop="tagName" />
         <el-table-column label="排列顺序" prop="sort" />
-        <el-table-column label="操作选项" align="right">
+        <el-table-column label="操作选项" align="center" width="100">
           <template #default="{ row }">
-            <el-button type="text" @click="openForm(row.id)"> 编辑 </el-button>
+            <section
+              class="color-#409EFF cursor-pointer hover--font-bold"
+              @click="openForm(row.id)"
+            >
+              编辑
+            </section>
           </template>
         </el-table-column>
       </el-table>
@@ -47,6 +60,7 @@
         v-model:current-page="queryParams.pageNo"
         v-model:page-size="queryParams.pageSize"
         class="ml-auto"
+        @change="getList"
       />
     </section>
   </ContentWrap>