修复bug

CatmDogd-Mall-Front-test/src/views/model/AppletConfig/homeConfig.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>首页配置管理</span>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="handleSave">保存配置</el-button>
+      </div>
+      
+      <el-form ref="homeForm" :model="homeConfig" :rules="rules" label-width="120px">
+        <!-- 历史记录统计配置 -->
+        <el-divider content-position="left">历史记录统计配置</el-divider>
+        
+        <!-- 历史记录列表配置 -->
+        <el-card class="box-card" style="margin-bottom: 20px;">
+          <div slot="header">
+            <span>历史记录统计列表</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="addHistoryRecord">添加记录</el-button>
+          </div>
+          <el-table :data="homeConfig.historyRecords" style="width: 100%">
+            <!-- <el-table-column label="类型" width="120">
+              <template slot-scope="scope">
+                <el-select v-model="scope.row.type" placeholder="选择类型">
+                  <el-option label="狗狗" value="dog"></el-option>
+                  <el-option label="猫咪" value="cat"></el-option>
+                  <el-option label="服务次数" value="service"></el-option>
+                </el-select>
+              </template>
+            </el-table-column> -->
+            <el-table-column label="数量/次数" width="220">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.count" size="mini" placeholder="请输入数量/次数"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="时间" width="220">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.time" size="mini" placeholder="请输入时间"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="图片">
+              <template slot-scope="scope">
+                <oss-image-upload v-model="scope.row.image" :limit="1"></oss-image-upload>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column label="描述">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.description" size="mini" placeholder="请输入描述"></el-input>
+              </template>
+            </el-table-column> -->
+            <el-table-column label="操作" width="100">
+              <template slot-scope="scope">
+                <el-button type="danger" size="mini" @click="removeHistoryRecord(scope.$index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-form>
+
+      <div style="text-align: center; margin-top: 20px;">
+        <el-button type="primary" @click="handleSave" :loading="saveLoading">保存配置</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { listAppletConfig, getAppletConfig, addAppletConfig, updateAppletConfig } from "@/api/model/AppletConfig";
+
+export default {
+  name: "HomeConfig",
+  data() {
+    return {
+      saveLoading: false,
+      // 首页配置数据
+      homeConfig: {
+        // 历史记录统计列表
+        historyRecords: [
+          {
+            count: '',
+            time: '',
+            image: '',
+          },
+          {
+            count: '',
+            time: '',
+            image: '',
+          },
+          {
+            count: '',
+            time: '',
+            image: '',
+          }
+        ]
+      },
+      // 表单校验规则
+      rules: {}
+    };
+  },
+  created() {
+    this.getHomeConfig();
+  },
+  methods: {
+    // 获取首页配置
+    async getHomeConfig() {
+      try {
+        // 查询首页配置参数
+        const response = await listAppletConfig({ paramCode: 'home_config' });
+        if (response.rows && response.rows.length > 0) {
+          const config = response.rows[0];
+          if (config.paramValueText) {
+            this.homeConfig = JSON.parse(config.paramValueText);
+          }
+        }
+      } catch (error) {
+        console.error('获取首页配置失败:', error);
+        this.$message.error('获取首页配置失败');
+      }
+    },
+    
+    // 保存配置
+    async handleSave() {
+      try {
+        this.$refs.homeForm.validate(async (valid) => {
+          if (valid) {
+            this.saveLoading = true;
+            
+            // 准备保存的数据
+            const saveData = {
+              paramCode: 'home_config',
+              paramValue: '首页配置',
+              paramValueText: JSON.stringify(this.homeConfig, null, 2)
+            };
+            
+            // 查询是否已存在配置
+            const response = await listAppletConfig({ paramCode: 'home_config' });
+            
+            if (response.rows && response.rows.length > 0) {
+              // 更新现有配置
+              saveData.id = response.rows[0].id;
+              await updateAppletConfig(saveData);
+            } else {
+              // 新增配置
+              await addAppletConfig(saveData);
+            }
+            
+            this.$message.success('首页配置保存成功');
+            this.saveLoading = false;
+          }
+        });
+      } catch (error) {
+        console.error('保存首页配置失败:', error);
+        this.$message.error('保存首页配置失败');
+        this.saveLoading = false;
+      }
+    },
+    
+    // 重置配置
+    handleReset() {
+      this.$confirm('确定要重置所有配置吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.getHomeConfig();
+        this.$message.success('配置已重置');
+      });
+    },
+    
+    // 添加历史记录
+    addHistoryRecord() {
+      this.homeConfig.historyRecords.push({
+        type: 'dog',
+        count: 0,
+        time: '',
+        image: '',
+        description: ''
+      });
+    },
+    
+    // 删除历史记录
+    removeHistoryRecord(index) {
+      this.homeConfig.historyRecords.splice(index, 1);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.box-card {
+  margin-bottom: 20px;
+}
+
+.el-divider {
+  margin: 20px 0;
+}
+
+.el-form-item {
+  margin-bottom: 18px;
+}
+
+.small-img {
+  width: 50px;
+  height: 50px;
+}
+
+.circle-img {
+  border-radius: 50%;
+}
+</style>