微信配置

src/api/WeChatApi.js

@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+
+/**
+* 配置列表
+* @param {*} data
+* @returns
+*/
+export const getConfigList = (data) => request({
+  url: '/admin/wx/config',
+  method: 'get',
+  data
+})
+
+/**
+* 保存配置
+* @param {*} data
+* @returns
+*/
+export const saveConfig = (data) => request({
+  url: '/admin/wx/config',
+  method: 'post',
+  data
+})
+
+/**
+* 详情配置
+* @param {*} 
+* @returns
+*/
+export const detailsConfig = (id) => request({
+  url: `admin/wx/config/${id}`,
+
+  method: 'get',
+})
+
+/**
+* 修改配置
+* @param {*} 
+* @returns
+*/
+export const ChangeConfig = (data, id) => request({
+  url: `admin/wx/config/${id}`,
+
+  method: 'put',
+  data
+})
+
+/**
+* 删除配置
+* @param {*} 
+* @returns
+*/
+export const DeleteConfig = (id) => request({
+  url: `admin/wx/config/${id}`,
+  method: 'delete',
+})
+
+

src/router/index.js

@@ -93,6 +93,29 @@ export const constantRoutes = [
     ]
   },
 
+  //微信配置
+
+  {
+    path: '/WeChatConfig',
+    component: Layout,
+    meta: { title: '微信配置', icon: 'form' },
+    children: [
+      {
+        path: 'WeChatConfig',
+        name: 'WeChatConfig',
+        component: () => import('@/views/WeChatConfig/index'),
+        meta: { title: '微信配置', icon: 'app' }
+      },
+      {
+        hidden: true,
+        path: 'WeChatConfig/Edit',
+        name: '配置编辑',
+        component: () => import('@/views/WeChatConfig/Edit'),
+        meta: { title: '配置编辑', icon: 'form' }
+      }
+    ]
+  },
+
   {
     path: '/login',
     component: () => import('@/views/login/index'),
@@ -129,7 +152,7 @@ const createRouter = () => new Router({
 const router = createRouter()
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter() {
+export function resetRouter () {
   const newRouter = createRouter()
   router.matcher = newRouter.matcher // reset router
 }

src/views/WeChatConfig/Edit.vue

@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <el-row :gutter="24">
+      <el-col :span="18">
+        <el-form
+          ref="ruleForm"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="10vw"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="配置名称" prop="appName" style="width:30vw">
+            <el-input v-model="ruleForm.appName" />
+          </el-form-item>
+          <el-form-item label="二维码" prop="qrCode">
+            <img
+              width="150"
+              alt="二维码"
+              src="https://cdn4.buysellads.net/uu/1/41334/1550855401-cc_light.png"
+            />
+          </el-form-item>
+          <el-form-item label="类型" prop="appType">
+            <el-select v-model="ruleForm.appType" placeholder="请选择类型">
+              <el-option label="小程序" value="ma" />
+              <el-option label="公众号" value="md" />
+            </el-select>
+          </el-form-item>
+          <el-form-item style="width:30vw" label="AppID" prop="appid">
+            <el-input v-model="ruleForm.appid" />
+          </el-form-item>
+          <el-form-item style="width:30vw" label="Secret" prop="secret">
+            <el-input v-model="ruleForm.secret" />
+          </el-form-item>
+          <el-form-item style="width:30vw" label="Token" prop="token">
+            <el-input v-model="ruleForm.token" />
+          </el-form-item>
+          <el-form-item style="width:30vw" label="AesKey" prop="aesKey">
+            <el-input v-model="ruleForm.aesKey" />
+          </el-form-item>
+          <el-form-item style="width:30vw" label="消息格式类型" prop="msgDataFormat">
+            <el-input v-model="ruleForm.msgDataFormat" />
+          </el-form-item>
+          <el-form-item style="width:30vw" label="接口代理地址" prop="httpPoxyHost">
+            <el-input v-model="ruleForm.httpPoxyHost" />
+          </el-form-item>
+          <el-form-item style="width:30vw" label="接口代理端口" prop="httpProxyPort">
+            <el-input v-model="ruleForm.httpProxyPort" type="Number" />
+          </el-form-item>
+          <el-form-item style="width:30vw" label="第三方接口地址" prop="apiUrl">
+            <el-input v-model="ruleForm.apiUrl" />
+          </el-form-item>
+          <el-form-item label="发布状态" prop="status">
+            <el-select v-model="ruleForm.status" placeholder="请选择状态">
+              <el-option label="发布" value="1" />
+              <el-option label="未发布" value="0" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">{{ !configId?'新建配置':'修改配置' }}</el-button>
+            <!-- <el-button type="primary" @click="submitForm('ruleForm')">应用配置</el-button> -->
+            <el-button @click="resetForm('ruleForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { saveConfig, detailsConfig, ChangeConfig } from '@/api/WeChatApi';
+
+export default {
+  data() {
+    return {
+      configId: '',
+      ruleForm: {
+        appName: '',
+        appid: '',
+        appType: '',
+        aesKey: '',
+        apiUrl: '',
+        resource: '',
+        httpPoxyHost: '',
+        msgDataFormat: 'Json',
+        secret: '',
+        token: '',
+        httpProxyPort: null,
+        status: null
+      },
+      rules: {
+        appName: [
+          { required: true, message: '请输入配置名称', trigger: 'blur' }
+        ],
+        appid: [{ required: true, message: '请输入AppID', trigger: 'blur' }],
+        appType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+        aesKey: [{ required: true, message: '请选择AesKey', trigger: 'blur' }],
+        apiUrl: [
+          { required: true, message: '请选择第三方接口地址', trigger: 'blur' }
+        ],
+        httpPoxyHost: [
+          { required: true, message: '请输入接口代理地址', trigger: 'blur' }
+        ],
+        httpProxyPort: [
+          { required: true, message: '请输入接口代理端口', trigger: 'blur' }
+        ],
+        msgDataFormat: [
+          { required: true, message: '请输入消息格式类型', trigger: 'blur' }
+        ],
+        secret: [{ required: true, message: '请输入Secret', trigger: 'blur' }],
+        token: [{ required: true, message: '请输入Token', trigger: 'blur' }],
+
+        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
+      }
+    };
+  },
+  watch: {
+    '$route.query.id'(val) {
+      this.configId = val;
+      detailsConfig(val)
+        .then((res) => {
+          this.ruleForm = res.data;
+        })
+        .catch((e) => {
+          this.$message.error('ID有误。');
+          this.$router.go(-1);
+        });
+    }
+  },
+  mounted() {
+    if (this.$route?.query.id) {
+      this.configId = this.$route.query.id;
+      detailsConfig(this.$route.query.id)
+        .then((res) => {
+          this.ruleForm = res.data;
+        })
+        .catch((e) => {
+          this.$message.error('ID有误。');
+          this.$router.go(-1);
+        });
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.configId == '') {
+            saveConfig(this.ruleForm)
+              .then((e) => {
+                this.$message.success('配置保存成功');
+                this.$router.go(-1);
+                console.log('保存字段', e);
+              })
+              .catch((e) => {
+                this.$message.error('保存失败', e);
+              });
+          } else {
+            ChangeConfig(this.ruleForm, this.configId).then((res) => {
+              this.$message.success('配置修改成功');
+              this.$router.go(-1);
+            });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    }
+  }
+};
+</script>
+
+<style scoped >
+.demo-ruleForm {
+  margin-top: 1em;
+}
+</style>

src/views/WeChatConfig/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="body">
+    <el-card class="box-card">
+      配置名称：
+      <el-input v-model="appName" size="medium" style="width: 200px; margin-right: 20px" />
+
+      <el-button type="primary" @click="onSearch">查询</el-button>
+      <el-button @click="onReset">重置</el-button>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-button type="primary" style="float: right" @click="handleAdd">新建配置</el-button>
+      </div>
+      <div class="text item">
+        <el-table stripe :data="tableData" border style="width: 100%">
+          <el-table-column prop="appName" label="配置名称" />
+
+          <el-table-column prop="picture" label="二维码" align="center">
+            <template slot-scope="scope">
+              <img :src="scope.row.qrCode" min-width="70" height="70" />
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="createDate" label="状态">
+            <template slot-scope="scope">
+              {{
+              scope.row.status==1?'发布':'未发布'
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+              <el-popconfirm
+                icon="el-icon-info"
+                icon-color="red"
+                title="确定要删除该配置吗？"
+                @onConfirm="handleDelete(scope.row)"
+              >
+                <el-button slot="reference" type="text">删除</el-button>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import { getConfigList, DeleteConfig } from '@/api/WeChatApi';
+
+export default {
+  data() {
+    return {
+      appName: undefined,
+      daterange: '',
+      tableData: [],
+      endDate: undefined,
+      startDate: undefined
+    };
+  },
+  mounted() {
+    this.onSearch();
+  },
+  methods: {
+    handleAdd() {
+      this.$router.push({ path: 'WeChatConfig/Edit' });
+    },
+    handleEdit(row) {
+      this.$router.push({
+        path: 'WeChatConfig/Edit',
+        query: { id: row.configId }
+      });
+    },
+    handleDelete(row) {
+      DeleteConfig(row.configId).then(() => {
+        this.onSearch();
+      });
+    },
+    onSearch() {
+      getConfigList({ appName: this.appName }).then((res) => {
+        console.log('🚀 ~ file: index.vue ~ line 98 ~ onSearch ~ res', res);
+        this.tableData = res.data.records;
+      });
+    },
+    onReset() {
+      this.appName = '';
+
+      this.onSearch();
+    },
+    dateChange(val) {
+      this.startDate = this.daterange[0];
+      this.endDate = this.daterange[1];
+    }
+  }
+};
+</script>
+<style>
+</style>