init

src/views/cai/systemConfig/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="configList" >
+      <el-table-column label="名称" align="center" prop="desc" />
+      <el-table-column label="数值" align="center" prop="value" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
+        <template v-slot="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="desc">
+          <el-input v-model="form.desc" placeholder="请输入" disabled/>
+        </el-form-item>
+        <el-form-item label="数值" prop="value">
+          <el-input v-model="form.value" placeholder="请输入数值" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import BannerAddUpdateDialog from '@/views/cai/banner/banner-add-update-dialog.vue'
+import {listBusinessConfigList, listSystemConfigList, updateSystemConfig} from "@/api/cai/systemConfig";
+
+export default {
+  name: "Banner",
+  components: {
+    BannerAddUpdateDialog
+  },
+  data() {
+    return {
+      // 遮罩层
+      buttonLoading: false,
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      queryParams:{},
+      form:{},
+      // 轮播表格数据
+      configList: [],
+      title: "",
+      open: false,
+      rules:[]
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询轮播列表 */
+    getList() {
+      this.loading = true;
+      listSystemConfigList().then(response => {
+        this.configList = response.data;
+      }).finally(()=>{
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    reset() {
+      this.form = {
+        key: undefined,
+        desc: undefined,
+        value: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.form = {
+        key: row.key,
+        desc: row.desc,
+        value: row.value
+      };
+      this.open = true;
+      this.title = "修改业务设置";
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          updateSystemConfig(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+  }
+};
+</script>