新增配置管理页面

src/api/configuration.js

@@ -0,0 +1,30 @@
+import axios from '@/libs/api.request'
+
+/**
+ * 获取菜单列表数据
+ * @returns {wx.RequestTask | never}
+ */
+export const getList = (params) => {
+  return axios.request({
+    url: 'config/index',
+    method: 'get'
+  })
+}
+
+export const editIndex = (id) => {
+  return axios.request({
+    url: 'config/editIndex',
+    method: 'get',
+    params: {
+      id: id
+    }
+  })
+}
+
+export const add = (data) => {
+  return axios.request({
+    url: 'config/add',
+    method: 'post',
+    data
+  })
+}

src/view/system/configuration.vue

@@ -0,0 +1,281 @@
+<style lang="less" scoped>
+
+</style>
+<style>
+    .status-normal {
+      color: green; /* 正常状态的颜色 */
+    }
+
+    .status-closed {
+      color: red; /* 关闭状态的颜色 */
+    }
+</style>
+<template>
+  <div>
+    <Row>
+      <Col span="24">
+        <Card>
+          <div>
+            <Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover></Table>
+          </div>
+          <!-- <div class="margin-top-15" style="text-align: center">
+            <Page :total="tableShow.listCount" :current="tableShow.currentPage"
+                  :page-size="tableShow.pageSize" @on-change="changePage"
+                  @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
+          </div> -->
+        </Card>
+      </Col>
+    </Row>
+    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
+      <p slot="header" style="color:#2d8cf0">
+        <Icon type="md-alert"></Icon>
+        <span>编辑{{formItem.name}}</span>
+      </p>
+      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80" v-if="formItem.id==1">
+        <FormItem label="邮箱类型" prop="item1.title">
+          <Input v-model="formItem.item1.title" disabled placeholder="请输入邮箱类型"></Input>
+        </FormItem>
+        <FormItem label="邮箱账号" prop="item1.email">
+          <Input v-model="formItem.item1.email" placeholder="请输入邮箱账号"></Input>
+        </FormItem>
+        <FormItem label="密钥" prop="item1.token">
+          <Input v-model="formItem.item1.token" placeholder="请输入密钥"></Input>
+        </FormItem>
+        <div style="border: 1px solid #ccc;"></div>
+        <br />
+        <FormItem label="邮箱类型" prop="item2.title">
+          <Input v-model="formItem.item2.title" disabled placeholder="请输入邮箱类型"></Input>
+        </FormItem>
+        <FormItem label="邮箱账号" prop="item2.email">
+          <Input v-model="formItem.item2.email" placeholder="请输入邮箱账号"></Input>
+        </FormItem>
+        <FormItem label="密钥" prop="item2.token">
+          <Input v-model="formItem.item2.token" placeholder="请输入密钥"></Input>
+        </FormItem>
+      </Form>
+      <Form ref="myForm1" :rules="ruleValidate1" :model="formItem" :label-width="80" v-if="formItem.id==2">
+        <FormItem label="API地址" prop="item3.api_url">
+          <Input v-model="formItem.item3.api_url" placeholder="请输入API地址"></Input>
+        </FormItem>
+        <FormItem label="账号" prop="item3.username">
+          <Input v-model="formItem.item3.username" placeholder="请输入账号"></Input>
+        </FormItem>
+        <FormItem label="密码" prop="item3.password">
+          <Input v-model="formItem.item3.password" placeholder="请输入密码"></Input>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="cancel" class="margin-right-10">取消</Button>
+        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+import { getList, editIndex, add } from '@/api/configuration'
+
+const editButton = (vm, h, currentRow, index) => {
+  if (vm.buttonShow.edit) {
+    return h('Button', {
+      props: {
+        type: 'primary'
+      },
+      style: {
+        margin: '0 5px'
+      },
+      on: {
+        'click': () => {
+          editIndex(currentRow.id).then(response => {
+            console.log(response)
+            vm.formItem.name = response.data.data.data.name
+            vm.formItem.id = response.data.data.data.id
+            vm.formItem.item2 = response.data.data.data.content[1]
+            if (response.data.data.data.id === 1) {
+              vm.formItem.item1 = response.data.data.data.content[0]
+            } else {
+              vm.formItem.item3 = response.data.data.data.content[0]
+            }
+          })
+          vm.modalSetting.show = true
+          vm.modalSetting.index = index
+        }
+      }
+    }, vm.$t('edit_button'))
+  }
+}
+
+export default {
+  name: 'system_user',
+  data () {
+    return {
+      columnsList: [
+        {
+          title: 'ID编号',
+          type: 'index',
+          width: 80,
+          align: 'center'
+        },
+        {
+          title: '配置名称',
+          align: 'center',
+          key: 'name',
+          Width: 200
+        },
+        {
+          title: '配置标识',
+          align: 'center',
+          key: 'title',
+          Width: 200
+        },
+        {
+          title: '状态',
+          align: 'center',
+          key: 'status',
+          width: 100,
+          render: (h, params) => {
+            const statusClass = params.row.status === 1 ? 'status-normal' : 'status-closed'
+            const statusText = params.row.status === 1 ? '√' : 'X'
+            return h('span', { class: statusClass }, statusText)
+          }
+        },
+        {
+          title: '操作',
+          align: 'center',
+          width: 200,
+          render: (h, params) => {
+            return h('div', [
+              editButton(this, h, params.row, params.index)
+              // deleteButton(this, h, params.row, params.index)
+            ])
+          }
+        }
+      ],
+      tableData: [],
+      // tableShow: {
+      //   currentPage: 1,
+      //   pageSize: 10,
+      //   listCount: 0
+      // },
+      searchConf: {
+        type: '',
+        keywords: '',
+        status: ''
+      },
+      modalSetting: {
+        show: false,
+        loading: false,
+        index: 0
+      },
+      formItem: {
+        item1: {},
+        item2: {},
+        item3: {},
+        name: '',
+        id: 0
+      },
+      ruleValidate: {
+        title: [
+          { required: true, message: '邮箱类型不能为空', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '邮箱账号不能为空', trigger: 'blur' }
+        ],
+        token: [
+          { required: true, message: '密钥不能为空', trigger: 'blur' }
+        ]
+      },
+      ruleValidate1: {
+        api_url: [
+          { required: true, message: 'API地址不能为空', trigger: 'blur' }
+        ],
+        username: [
+          { required: true, message: '账号不能为空', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '密码不能为空', trigger: 'blur' }
+        ]
+      },
+      buttonShow: {
+        edit: true,
+        del: true,
+        changeStatus: true
+      },
+      listLoading: false
+    }
+  },
+  created () {
+    let vm = this
+    vm.getList()
+  },
+  methods: {
+    alertAdd () {
+      // let vm = this
+      // getGroups().then(response => {
+      //   vm.groupList = response.data.data.list
+      // })
+      this.modalSetting.show = true
+    },
+    submit () {
+      let vm = this
+      this.$refs[vm.formItem.id === 1 ? 'myForm' : 'myForm1'].validate((valid) => {
+        console.log(vm.formItem)
+        if (valid) {
+          vm.modalSetting.loading = true
+          const data = { id: vm.formItem.id, content: [] }
+          if (vm.formItem.id === 1) {
+            data.content.push(vm.formItem.item1, vm.formItem.item2)
+          } else {
+            data.content.push(vm.formItem.item3)
+          }
+
+          console.log(data)
+          add(data).then(response => {
+            console.log(response)
+            // vm.groupList = response.data.data.list
+            if (response.data.code === 1) {
+              vm.$Message.success('修改成功')
+              vm.modalSetting.show = false
+            } else {
+              vm.$Message.success(response.data.msg)
+            }
+          }).catch(() => {
+            vm.modalSetting.show = false
+          })
+        }
+      })
+    },
+    cancel () {
+      this.modalSetting.show = false
+    },
+    doCancel (data) {
+      // if (!data) {
+      //   this.formItem.id = 0
+      //   this.$refs['myForm'].resetFields()
+      this.modalSetting.loading = false
+      //   this.modalSetting.index = 0
+      // }
+    },
+    // changePage (page) {
+    //   this.tableShow.currentPage = page
+    //   this.getList()
+    // },
+    // changeSize (size) {
+    //   this.tableShow.pageSize = size
+    //   this.getList()
+    // },
+    // search () {
+    //   this.tableShow.currentPage = 1
+    //   this.getList()
+    // },
+    getList () {
+      let vm = this
+      vm.listLoading = true
+      getList().then(response => {
+        vm.tableData = response.data.data.list
+        // vm.tableShow.listCount = response.data.data.count
+        vm.listLoading = false
+      })
+    }
+  }
+}
+</script>