知识库详情界面+字典数据首页和增改样式修改

src/views/knowledge/knowledge-management/detail.vue

@@ -1,57 +1,41 @@
 <template>
-  <div class="report-details">
-    <el-button type="text" @click="goBack">返回上一级</el-button>
-    <el-row>
-      <el-col :span="20">
-        <h2>{{ report.title }}</h2>
-      </el-col>
-      <el-col :span="4" class="text-right">
-        <el-button type="primary" @click="handleEdit">编辑</el-button>
-        <el-button type="danger" @click="handleDelete">删除</el-button>
-      </el-col>
-    </el-row>
-    <el-divider></el-divider>
-    <div class="basic-info">
-      <strong>基本信息</strong>
-      <el-row>
-        <el-col :span="8">
-          <span class="label">报告编号：</span>
-          <span class="value">{{ report.reportId }}</span>
-        </el-col>
-        <el-col :span="8">
-          <span class="label">主题词：</span>
-          <span class="value">{{ report.subject }}</span>
-        </el-col>
-        <el-col :span="8" style="display: flex; align-items: center;">
-          <span class="label">事件类型：</span>
-          <dict-tag class="value" :options="mm_event_type" :value="report.eventType" style="margin-left: 8px;" />
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <span class="label">发布日期：</span>
-          <span class="value">{{ report.publishDate }}</span>
-        </el-col>
-        <el-col :span="8">
-          <span class="label">来源单位：</span>
-          <span class="value">{{ report.sourceUnit }}</span>
-        </el-col>
-        <el-col :span="8">
-          <span class="label">通知类型：</span>
-          <span class="value">{{ report.notificationType }}</span>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <span class="label">摘要：</span>
-          <span class="value">{{ report.summary }}</span>
-        </el-col>
-      </el-row>
+  <div class="detail-container">
+    <div class="common-back-box" @click="goBack">
+      <i class="common-back" />
+      返回上一级
     </div>
-    <div class="attachments">
-      <strong>报告附件：</strong>
+    <div class="common-header">
+      <div class="common-header-left">
+        <i class="common-title-icon" />
+        <div class="common-title">{{ report.title }}</div>
+      </div>
+      <div class="common-header-right">
+        <el-button type="primary" @click="handleEdit"> <i class="edit-icon2" />编辑</el-button>
+        <el-button type="danger" plain icon="Minus" @click="handleDelete">删除</el-button>
+      </div>
     </div>
-    <el-link :href="report.attachmentUrl" target="_blank" class="value url-color">{{ report.attachmentName }}</el-link>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">基础信息</div>
+      </div>
+      <div class="common-info-content">
+        <div class="common-info-item">报告编号：{{ report.reportId }}</div>
+        <div class="common-info-item">主题词：{{ report.subject }}</div>
+        <div class="common-info-item">事件类型：<dict-tag :options="mm_event_type" :value="report.eventType" /></div>
+        <div class="common-info-item">发布日期：{{ report.publishDate }}</div>
+        <div class="common-info-item">来源单位：{{ report.sourceUnit }}</div>
+        <div class="common-info-item">来源单位：{{ report.notificationType }}</div>
+        <div class="common-info-item">摘要：{{ report.summary }}</div>
+      </div>
+    </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">报告附件</div>
+      </div>
+    </div>
+    <el-link :href="report.attachmentUrl" target="_blank" class="common-info-item">{{ report.attachmentName }}</el-link>
   </div>
 </template>
 
@@ -60,7 +44,7 @@ import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { fetchReportDetail } from '@/api/kenowledge/index';
-import { getDicts } from "@/api/system/dict/data/index";
+import { getDicts } from '@/api/system/dict/data/index';
 
 const report = ref({
   reportId: '',
@@ -83,7 +67,7 @@ const mm_event_type = ref([]);
 
 // 返回上一级
 const goBack = () => {
-  proxy?.$tab.closePage();
+  router.go(-1);
 };
 
 // 编辑报告
@@ -92,28 +76,30 @@ const handleEdit = () => {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     inputValue: report.value.title
-  }).then(async ({ value }) => {
-    try {
-      const updatedReport = { ...report.value, title: value };
-      // 调用API更新报告标题
-      await updateReportDetail(updatedReport);
-      report.value.title = value;
-      ElMessage({
-        type: 'success',
-        message: '报告已成功更新'
-      });
-    } catch (error) {
+  })
+    .then(async ({ value }) => {
+      try {
+        const updatedReport = { ...report.value, title: value };
+        // 调用API更新报告标题
+        await updateReportDetail(updatedReport);
+        report.value.title = value;
+        ElMessage({
+          type: 'success',
+          message: '报告已成功更新'
+        });
+      } catch (error) {
+        ElMessage({
+          type: 'error',
+          message: '更新报告失败，请重试'
+        });
+      }
+    })
+    .catch(() => {
       ElMessage({
-        type: 'error',
-        message: '更新报告失败，请重试'
+        type: 'info',
+        message: '已取消编辑'
       });
-    }
-  }).catch(() => {
-    ElMessage({
-      type: 'info',
-      message: '已取消编辑'
     });
-  });
 };
 
 // 删除报告
@@ -122,18 +108,20 @@ const handleDelete = () => {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(() => {
-    ElMessage({
-      type: 'success',
-      message: '报告已删除'
-    });
-    router.push('/');
-  }).catch(() => {
-    ElMessage({
-      type: 'info',
-      message: '已取消删除'
+  })
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '报告已删除'
+      });
+      router.push('/');
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消删除'
+      });
     });
-  });
 };
 
 onMounted(async () => {
@@ -141,9 +129,9 @@ onMounted(async () => {
     const dictResponse = await getDicts('mm_event_type');
 
     // 格式化字典数据
-    mm_event_type.value = dictResponse.data.map(item => ({
+    mm_event_type.value = dictResponse.data.map((item) => ({
       label: item.dictLabel,
-      value: item.dictValue,
+      value: item.dictValue
     }));
 
     // 获取报告详情
@@ -151,14 +139,16 @@ onMounted(async () => {
     const response = await fetchReportDetail(reportId);
     const data = response.data[0];
 
-    const publishDate = new Date(data.publishDate).toLocaleString('zh-CN', {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-    }).replace(/\//g, '-');
+    const publishDate = new Date(data.publishDate)
+      .toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+      })
+      .replace(/\//g, '-');
 
     // 更新报告详情
     report.value = {
@@ -203,7 +193,7 @@ onMounted(async () => {
   color: #333; /* 可选：更改字体颜色 */
 }
 .url-color {
-  color: #409EFF;
+  color: #409eff;
 }
 
 .el-divider {

src/views/system/dict/data.vue

@@ -1,121 +1,133 @@
 <template>
   <div class="app-container">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="字典名称" prop="dictType">
-              <el-select v-model="queryParams.dictType">
-                <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="字典标签" prop="dictLabel">
-              <el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
+      <div v-show="showSearch">
+        <el-form ref="queryFormRef" :model="queryParams">
+          <el-row :gutter="20">
+            <!-- 第一行 -->
+            <el-col :span="6">
+              <el-form-item label="字典名称：" prop="dictType">
+                <el-select v-model="queryParams.dictType">
+                  <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="字典标签：" prop="dictLabel">
+                <el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable @keyup.enter="handleQuery" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
       </div>
     </transition>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
-              删除
-            </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
-        </el-row>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:dict:add']" type="primary" icon="Plus" @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
+          删除
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
+      </el-col>
+      <!--      <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>-->
+    </el-row>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column v-if="false" label="字典编码" align="center" prop="dictCode" />
-        <el-table-column label="字典标签" align="center" prop="dictLabel">
-          <template #default="scope">
-            <span
-              v-if="(scope.row.listClass === '' || scope.row.listClass === 'default') && (scope.row.cssClass === '' || scope.row.cssClass == null)"
-              >{{ scope.row.dictLabel }}</span
-            >
-            <el-tag
-              v-else
-              :type="scope.row.listClass === 'primary' || scope.row.listClass === 'default' ? 'primary' : scope.row.listClass"
-              :class="scope.row.cssClass"
-              >{{ scope.row.dictLabel }}</el-tag
-            >
-          </template>
-        </el-table-column>
-        <el-table-column label="字典键值" align="center" prop="dictValue" />
-        <el-table-column label="字典排序" align="center" prop="dictSort" />
-        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-          <template #default="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button v-hasPermi="['system:dict:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button v-hasPermi="['system:dict:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
+    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column v-if="false" label="字典编码" align="center" prop="dictCode" />
+      <el-table-column label="字典标签" align="center" prop="dictLabel">
+        <template #default="scope">
+          <span
+            v-if="(scope.row.listClass === '' || scope.row.listClass === 'default') && (scope.row.cssClass === '' || scope.row.cssClass == null)"
+            >{{ scope.row.dictLabel }}</span
+          >
+          <el-tag
+            v-else
+            :type="scope.row.listClass === 'primary' || scope.row.listClass === 'default' ? 'primary' : scope.row.listClass"
+            :class="scope.row.cssClass"
+            >{{ scope.row.dictLabel }}</el-tag
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="字典键值" align="center" prop="dictValue" />
+      <el-table-column label="字典排序" align="center" prop="dictSort" />
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
+          <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
+        </template>
+      </el-table-column>
+    </el-table>
 
-      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+    <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="dataFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="字典类型">
-          <el-input v-model="form.dictType" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="数据标签" prop="dictLabel">
-          <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
-        </el-form-item>
-        <el-form-item label="数据键值" prop="dictValue">
-          <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
-        </el-form-item>
-        <el-form-item label="样式属性" prop="cssClass">
-          <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
-        </el-form-item>
-        <el-form-item label="显示排序" prop="dictSort">
-          <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
-        </el-form-item>
-        <el-form-item label="回显样式" prop="listClass">
-          <el-select v-model="form.listClass">
-            <el-option
-              v-for="item in listClassOptions"
-              :key="item.value"
-              :label="item.label + '(' + item.value + ')'"
-              :value="item.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
+    <div v-show="dialog.visible" class="common-dialog">
+      <div class="common-dialog-content">
+        <div class="common-dialog-title-box">
+          <i class="common-dialog-title-icon" />
+          <div>{{ dialog.title }}</div>
+        </div>
+        <div class="common-dialog-box">
+          <el-form ref="dataFormRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="字典类型：">
+              <el-input v-model="form.dictType" :disabled="true" style="width: 468px !important" />
+            </el-form-item>
+            <el-form-item label="数据标签：" prop="dictLabel">
+              <el-input v-model="form.dictLabel" placeholder="请输入数据标签" style="width: 468px !important" />
+            </el-form-item>
+            <el-form-item label="数据键值：" prop="dictValue">
+              <el-input v-model="form.dictValue" placeholder="请输入数据键值" style="width: 468px !important" />
+            </el-form-item>
+            <el-form-item label="样式属性：" prop="cssClass">
+              <el-input v-model="form.cssClass" placeholder="请输入样式属性" style="width: 468px !important" />
+            </el-form-item>
+            <el-form-item label="显示排序：" prop="dictSort">
+              <el-input-number v-model="form.dictSort" controls-position="right" :min="0" style="width: 468px !important" />
+            </el-form-item>
+            <el-form-item label="回显样式：" prop="listClass">
+              <el-select v-model="form.listClass">
+                <el-option
+                  v-for="item in listClassOptions"
+                  :key="item.value"
+                  :label="item.label + '(' + item.value + ')'"
+                  :value="item.value"
+                  style="width: 468px !important"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="备注：" prop="remark">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" style="width: 468px !important" ></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="common-dialog-footer" style="display: flex; justify-content: center">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
-      </template>
-    </el-dialog>
+      </div>
+    </div>
   </div>
 </template>