pc-admin/src/views/WeChatConfig/Edit.vue

<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>