Merge branch 'main' of http://47.109.205.240:3000/Web/operation-system

.env.development

@@ -6,4 +6,5 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
 VITE_APP_BASE_API = 'http://192.168.18.99:8080'
+# VITE_APP_BASE_API = 'http://192.168.18.151:8080'
 VITE_APP_PLATFORM = 'http://localhost:9000/platform'

package.json

@@ -19,6 +19,7 @@
     "@element-plus/icons-vue": "2.3.1",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.11.0",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "address": "^2.0.3",
     "address-parse": "^1.2.19",
     "axios": "0.28.1",
@@ -37,7 +38,8 @@
     "vue": "3.4.31",
     "vue-cropper": "1.1.1",
     "vue-router": "4.4.0",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.5",

src/api/content/index.js

@@ -0,0 +1,49 @@
+import request from "@/utils/request";
+
+// 获取内容列表
+export function getInformation(query) {
+  return request({
+    url: "/contentManage/information/informationPage",
+    method: "get",
+    params: query,
+  });
+}
+//新增内容
+export function addConten(data) {
+  return request({
+    url: "/contentManage/information/informationAdd",
+    method: "post",
+    data: data,
+  });
+}
+//编辑内容
+export function updateInformation(data) {
+  return request({
+    url: "/contentManage/information/informationEdit",
+    method: "PUT",
+    data: data,
+  });
+}
+// 删除内容
+export function deleteInformation(id) {
+  return request({
+    url: '/contentManage/information/informationDelete?id=' + id,
+    method: "delete",
+  });
+}
+//内容启用停用
+export function updateInformationEnable(data) {
+  return request({
+    url: "/contentManage/information/informationEnable",
+    method: "put",
+    data: data,
+  });
+}
+
+// 获取内容信息（id）
+export function getInfo(id) {
+  return request({
+    url: `/contentManage/information/informationInfo/${id}`,
+    method: "get",
+  });
+}

src/router/index.js

@@ -541,29 +541,29 @@ export const constantRoutes = [
     ],
   },
   // 内容管理，没有子菜单
-  // {
+  {
-  //   path: '/content',
+    path: '/content',
-  //   name: "content",
+    name: "content",
-  //   meta: {
+    meta: {
-  //     title: "内容管理",
+      title: "内容管理",
-  //     icon: "education",
+      icon: "education",
-  //   },
+    },
-  //   component: Layout,
+    component: Layout,
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'content/index',
+        path: 'content/index',
-  //       component: () => import('@/views/content/index'),
+        component: () => import('@/views/content/index'),
-  //       name: 'content',
+        name: 'content',
-  //       hidden: false,
+        hidden: false,
-  //       meta: {
+        meta: {
-  //         title: "内容管理",
+          title: "内容管理",
-  //         icon: "",
+          icon: "",
-  //         noCache: false,
+          noCache: false,
-  //         link: null,
+          link: null,
-  //       },
+        },
-  //     },
+      },
-  //   ],
+    ],
-  // }
+  }
  
 ]
 

src/views/content/index.vue

@@ -1,5 +1,618 @@
 <template>
-  <div class="content">
+  <div class="app-container customer-control">
-    待开发
+    <div class="container-custom">
+      <!-- 搜索栏 -->
+      <div ref="searchBarRef" class="search-box">
+        <div class="search-bar">
+          <div class="search-bar-left">
+            <el-form
+              ref="searchForm"
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+              :label-width="'auto'"
+            >
+              <el-form-item label="标题" prop="title">
+                <el-input
+                  v-model="formInline.title"
+                  placeholder="请输入品牌名称"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="资讯分类" prop="category">
+                <el-select v-model="formInline.category" placeholder="请选择资讯分类" clearable>
+                  <el-option
+                    v-for="dict in sys_good_category"
+                    :key="dict.value" :label="dict.label" :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="formInline.status" placeholder="请选择" clearable>
+                  <el-option v-for="item in statusList" :key="item.id" :value="item.id" :label="item.name" />
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                label="添加时间"
+                prop="startDate"
+                style="margin-right: 0"
+              >
+                <el-date-picker
+                  v-model="formInline.startDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择起始日期"
+                  clearable
+                  :disabled-date="disableStartDate"
+                  style="width: 160px"
+                />
+                <span
+                  style="width: 30px; text-align: center; display: inline-block"
+                >
+                  -
+                </span>
+                <el-date-picker
+                  v-model="formInline.endDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择截止日期"
+                  clearable
+                  :disabled-date="disableEndDate"
+                  style="width: 160px"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="search-bar-right">
+            <el-button class="el-button-gry" type="primary" icon="Search" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button
+              icon="Refresh"
+              style="margin: 16px 0 0 0"
+              @click="resetForm"
+              >重置</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
+        <div class="table-toolbar">
+          <el-button
+            icon="delete"
+            @click="batchDelete"
+            :disabled="btnStatus"
+            style="margin-right: 10px"
+            >批量删除</el-button
+          >
+          <el-button type="primary" class="el-button-gry" icon="plus" @click="handleAdd"
+              >添加内容</el-button
+            >
+        </div>
+        <tableComponent
+          :table-data="tableData"
+          :columns="columns"
+          :show-border="false"
+          :show-selection="true"
+          :header-cell-class-name="getHeaderClass"
+          @page-change="handlePaginationChange"
+          :loading="tableLoading"
+          @selection-change="handleSelectionChange"
+          :total="tableTotal"
+          :current-page="formInline.current"
+          :page-size="formInline.size"
+          :showSort="true"
+          :rowkey="'id'"
+        >
+        <!-- 自定义-图片 -->
+          <template #imgPath="slotProps">
+            <div class="table-cell-img-box">
+              <img :src="slotProps.row.imgPath" class="table-cell-img" alt="" />
             </div>
           </template>
+          <!-- 自定义-资讯分类 -->
+          <template #category="slotProps">
+            <span>{{ sys_good_category[parseInt(slotProps.row.category)]?.label}}</span>
+          </template>
+          <!-- 自定义-发布位置 -->
+          <template #publishLocation="slotProps">
+            <span>{{ sys_good_content[parseInt(slotProps.row.publishLocation)]?.label}}</span>
+          </template>
+          <!-- 自定义-状态 -->
+          <template #status="slotProps">
+            <span v-if="slotProps.row.status == 1" class="color-green"
+              >使用中</span
+            >
+            <span v-else-if="slotProps.row.status == 0" class="color-red"
+              >已停用</span
+            >
+          </template>
+
+          <!-- 自定义-操作 -->         
+          <template #action="slotProps">
+            <el-button v-if="slotProps.row.status == 0" text class="el-button-custom" @click="startStop(slotProps.row)">启用</el-button>
+            <el-button v-if="slotProps.row.status == 1" text class="el-button-custom" @click="startStop(slotProps.row)">停用</el-button>
+            <el-button text class="el-button-custom" @click="handleEdit(slotProps.row)">编辑</el-button>
+            <el-button text class="el-button-custom" @click="handleView(slotProps.row)">查看</el-button>
+            <el-button text class="el-button-delete" @click="handleDelete(slotProps.row)">删除</el-button>
+          </template>
+        </tableComponent>
+      </div>
+    </div>
+    <!-- 添加/编辑 -->
+    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500" :close-on-click-modal="false">
+      <el-form :disabled="disabled" :model="dialogForm" :label-width="'80'" :rules="dialogFormRules" ref="dialogRef">
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="dialogForm.title" autocomplete="off" placeholder="请输入内容标题" />
+        </el-form-item>
+        <el-form-item label="资讯分类" prop="category">
+          <el-select v-model="dialogForm.category" placeholder="请选择资讯分类">
+            <el-option
+              v-for="dict in sys_good_category"
+              :key="dict.value" :label="dict.label" :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发布位置" prop="publishLocation">
+          <el-select v-model="dialogForm.publishLocation" placeholder="请选择发布位置">
+            <el-option
+              v-for="dict in sys_good_content"
+              :key="dict.value" :label="dict.label" :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <div style="border: 1px solid #ccc; margin-top: 10px">
+            <Toolbar
+              :editor="editorRef"
+              :defaultConfig="toolbarConfig"
+              :mode="mode"
+              style="border-bottom: 1px solid #ccc"
+            />
+            <Editor
+              :defaultConfig="editorConfig"
+              :mode="mode"
+              :disabled="disabled"
+              v-model="dialogForm.content"
+              style="height: 300px; overflow-y: scroll"
+              @onCreated="handleCreated"
+              @onChange="handleChange"
+              @onDestroyed="handleDestroyed"
+              @onFocus="handleFocus"
+              @onBlur="handleBlur"
+              @customAlert="customAlert"
+              @customPaste="customPaste"
+            />
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="onSaveCategory">
+            保存
+          </el-button>
+          <el-button @click="cancelDialog">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import tableComponent from "@/components/tableComponent.vue";
+import myUploadImage from "@/components/myUploadImage.vue";
+import Mock from "mockjs";
+import {getInformation,addConten,updateInformation,deleteInformation,getInfo,updateInformationEnable} from "@/api/content/index";
+// import { getDicts } from "@/api/system/dict/data";
+const { proxy } = getCurrentInstance()
+const { sys_good_category,sys_good_content} = proxy.useDict("sys_good_category","sys_good_content")
+// console.log('sys_good_category资讯分类',sys_good_category);
+// console.log('sys_good_content发布位置',sys_good_content);
+
+import { id } from "element-plus/es/locales.mjs";
+import { ElMessage,ElMessageBox } from "element-plus";
+
+import '@wangeditor/editor/dist/css/style.css';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { getToken } from "@/utils/auth"
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+const toolbarConfig = {}
+const editorConfig = reactive({
+  placeholder: '请输入内容...',
+  MENU_CONF: {
+    uploadImage: {
+      server: import.meta.env.VITE_APP_BASE_API + "/uploadApis/upload",
+      fieldName: 'file',
+      maxFileSize: 10 * 1024 * 1024,
+      maxNumberOfFiles: 1,
+      allowedFileTypes: ['image/*'],
+      headers: {
+        'Authorization': 'Bearer ' + getToken(),
+      },
+      // 自定义上传结果处理
+      customInsert(res, insertFn) {
+    console.log('customInsert 被调用:', res)  // 检查是否执行
+    if (res.code === 200) {
+      insertFn("http://gov-cloud.oss-cn-chengdu.aliyuncs.com/"+res.data.url, '', '')
+    }
+  }
+    }
+  }
+})
+const mode = 'default' // 或 'simple'
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
+}
+
+// 自动暴露所有顶层绑定
+defineExpose({
+  editorRef,
+  mode,
+  toolbarConfig,
+  editorConfig,
+  handleCreated
+})
+
+const formInline = reactive({
+  id: "",
+  title: "",//商品名称
+  useNum:'',//使用数量
+  status: "",//状态
+  startDate: "",//开始时间
+  endDate: "",//结束时间
+  category: "",//分类
+  current: 1,
+  size: 10,
+});
+
+let isADD = ref(true);
+const dialogFormVisible = ref(false);
+const dialogRef = ref(null);
+const dialogTitle = ref("添加品牌");
+const categoryList = ref([]);
+const disabled = ref(false);
+let dialogForm = reactive({
+    id: "",
+    title: "",
+    content:"",
+    category:"",
+    publishLocation:'',
+});
+const dialogFormRules = ref({
+    title:  [
+        { required: true, message: "请输入品牌名称", trigger: "blur" },
+    ],
+    content:  [
+        { required: true, message: "请输入内容", trigger: "blur" },
+    ],
+    category:  [
+        { required: true, message: "请选择分类", trigger: "blur" },
+    ],
+    publishLocation:  [
+        { required: true, message: "请选择发布位置", trigger: "blur" },
+    ],
+});
+
+const statusList = ref([
+    { name: "使用中", id: "1" },
+    { name: "已停用", id: "0" },
+]);
+
+// 禁用开始日期的逻辑（不能晚于已选的结束日期）
+const disableStartDate = (time) => {
+  if (!formInline.endDate) return false;
+  const endDate = new Date(formInline.endDate);
+  return time.getTime() > endDate.getTime();
+};
+
+// 禁用结束日期的逻辑（不能早于已选的开始日期）
+const disableEndDate = (time) => {
+  if (!formInline.startDate) return false;
+  const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
+  const currentDate = new Date(time).setHours(0, 0, 0, 0);
+  return currentDate < startDate;
+};
+
+const searchForm = ref(null);
+
+// 加载数据
+const loadData = async () => {
+
+  tableLoading.value = true;
+  let prams = { ...formInline };
+
+  try {
+    prams.startDate = formInline.startDate ? formInline.startDate + " 00:00:00" : "";
+    prams.endDate = formInline.endDate ? formInline.endDate + " 23:59:59" : "";
+    let response = await getInformation(prams);
+    if (response.code == 200) {
+      tableData.value = response.data.records;
+      tableTotal.value = response.data.total;
+    }
+  } catch (error) {
+    
+  }
+  tableLoading.value = false;
+};
+
+const onSubmit = () => {
+  formInline.current = 1;
+  loadData();
+};
+
+const resetForm = () => {
+  searchForm.value.resetFields();
+  formInline.endDate = "";
+  loadData();
+};
+
+// 表格数据
+const tableData = ref([]);
+const selectedIds = ref([]);
+const btnStatus = computed(() => {
+  return selectedIds.value.length <= 0;
+});
+const tableLoading = ref(false);
+const tableTotal = ref(0);
+let nowClickRow = ref({});
+// 列配置
+const columns = ref([
+  { prop: "title", label: "标题" },
+  { prop: "category", label: "资讯分类", slotName: "category",},
+  { prop: "publishLocation", label: "发布位置", slotName: "publishLocation",},
+  { prop: "createTime", label: "发布日期",},
+  { prop: "views", label: "浏览量",},
+  { prop: "status", label: "状态", slotName: "status",},
+  { prop: "action", label: "操作", slotName: "action",width: "180",align: "center" },
+]);
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return "custom-header";
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log("分页变化:", page, pageSize);
+  formInline.current = page;
+  formInline.size = pageSize;
+  // 这里可以调用API获取新数据
+  loadData();
+};
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  console.log("选中项:", selection);
+  selectedIds.value = [];
+  selection.forEach(element => {
+    selectedIds.value.push(element.id);
+  });
+};
+
+// 批量删除
+const batchDelete = async () => {
+  // deleteGoods(selectedIds.value.join(","));
+  ElMessageBox.confirm("确定要删除选中的数据吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+       deleteGoods(selectedIds.value);
+    })
+    .catch(() => {
+      ElMessage.info("已取消删除");
+    })
+  
+};
+const deleteGoods = async (param) => {
+  console.log("批量删除参数:", param);
+  
+  try {
+    tableLoading.value = true;
+    let res = await deleteInformation(param);
+    tableLoading.value = false;
+    if (res.code == 200) {
+      ElMessage.success("删除成功");
+      loadData();
+    } else {
+      ElMessage.error(res.msg);
+    }
+  } catch (error) {
+    tableLoading.value = false;
+  }
+};
+
+//  添加商品
+const handleAdd = () => {
+  disabled.value = false;
+  nextTick(() => {
+    if (editorRef.value) {
+      editorRef.value.enable(); // 重新启用编辑器
+    }
+  });
+resetDlg();
+  dialogTitle.value = "添加品牌";
+    isADD.value = true;
+  dialogFormVisible.value = true;
+  // console.log(formInline);
+};
+//提交保存
+const onSaveCategory = async () => { 
+  console.log('dialogForm',dialogForm);
+  
+  dialogRef.value.validate(async (valid) => { 
+    if (valid) { 
+        if(isADD.value){
+            let response = await addConten(dialogForm);
+            if (response.code === 200) {
+                dialogFormVisible.value = false;
+                ElMessage.success("新增成功！");
+                dialogRef.value.resetFields();
+                loadData();
+            } else {
+                ElMessage.error(response.message);
+            }
+        }else{ 
+            let response = await updateInformation(dialogForm);
+            if (response.code === 200) {
+                dialogFormVisible.value = false;
+                ElMessage.success("编辑成功！");
+                dialogRef.value.resetFields();
+                loadData();
+            } else {
+                ElMessage.error(response.message);
+            }
+        }
+    }
+  });
+};
+
+//启用停用
+const startStop = async (row) => {
+  let status = row.status == 1 ? 0 : 1;
+  let params = { id: row.id, status: status };
+  let response = await updateInformationEnable(params);
+  if (response.code === 200) {
+    ElMessage.success("操作成功！");
+    loadData();
+  } else {
+    ElMessage.error(response.message);
+  }
+};
+
+// 编辑操作
+const handleEdit = async(row) => {
+  disabled.value = false;
+  nextTick(() => {
+    if (editorRef.value) {
+      editorRef.value.enable(); // 重新启用编辑器
+    }
+  });
+  resetDlg();
+    isADD.value = false;
+  dialogFormVisible.value = true;
+  let response = await getInfo(row.id);
+  if (response.code === 200) {
+    Object.assign(dialogForm, response.data); // 保持响应性
+    dialogTitle.value = "编辑品牌";
+  } else {
+    ElMessage.error(response.message);
+  }
+};
+// 查看操作
+const handleView = async(row) => {
+  disabled.value = true;
+  resetDlg();
+  isADD.value = false;
+  dialogFormVisible.value = true;
+  let response = await getInfo(row.id);
+  if (response.code === 200) {
+    Object.assign(dialogForm, response.data); // 保持响应性
+    dialogTitle.value = "查看品牌";
+    nextTick(() => {
+      if (editorRef.value) {
+        editorRef.value.disable(); // 调用编辑器禁用API
+      }
+    });
+  } else {
+    ElMessage.error(response.message);
+  }
+};
+// 删除操作
+const handleDelete = async(row) => {
+  //提示一下是否确定删除
+  ElMessageBox.confirm("确定要删除吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      let response = await deleteInformation(row.id);
+      if (response.code === 200) {
+        ElMessage.success("品牌删除成功！");
+        loadData();
+      } else {
+        ElMessage.error(response.message);
+      }
+    })
+    .catch(() => {
+      ElMessage.info("已取消删除");
+    })
+  
+};
+//取消弹框
+const cancelDialog = () => {
+  resetDlg();
+};
+
+const resetDlg= () => {
+  dialogRef.value?.resetFields(); // 重置表单验证状态
+  Object.assign(dialogForm, {  // 保持响应性，手动清空字段
+    id: "",
+    title: "",
+    imgPath: "",
+    code: ""
+  });
+  dialogFormVisible.value = false;
+}
+
+const titleRef = ref(null);
+const searchBarRef = ref(null);
+const tableViewportHeight = ref(0);
+// 精确计算可用高度
+const calculateTableHeight = () => {
+  // 获取窗口总高度
+  const windowHeight = window.innerHeight;
+
+  // 获取各组件高度
+  const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
+  const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
+
+  // 计算容器内边距补偿（根据实际样式调整）
+  const paddingCompensation = 130;
+
+  // 最终计算
+  tableViewportHeight.value =
+    windowHeight - headerHeight - searchBarHeight - paddingCompensation;
+  // console.log(tableViewportHeight.value);
+};
+// 组件挂载时加载数据
+onMounted(() => {
+  loadData();
+
+  calculateTableHeight();
+
+  // 添加响应式监听
+  window.addEventListener("resize", calculateTableHeight);
+
+  // 监听DOM变化（适用于动态变化的header/searchbar）
+  const observer = new ResizeObserver(calculateTableHeight);
+  if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
+  if (searchBarRef.value) observer.observe(searchBarRef.value);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", calculateTableHeight);
+});
+</script>
+<style lang="scss" scoped>
+.table-toolbar {
+  width: 300px;
+  height: 50px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: end;
+  padding: 14px 16px 0 0;
+}
+</style>