rt_fhyx_adminUI/src/views/system/config/config.vue

<template>
  <div class="app-container">
     <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="商城配置" name="store.config">
          <el-form ref="form1" :model="form1" :rules="rules1" label-width="180px">
            <el-form-item   label="搜索关键字" prop="hotSearch">
                <el-input  v-model="form1.hotSearch"  label="请输入搜索关键字,多个用,号分隔"></el-input>
            </el-form-item>
             <el-form-item   label="资质证明" prop="certs">
                <Material v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
            </el-form-item>
            <el-form-item  label="货到付款支付比例" prop="payRate">
              <el-tooltip class="item" effect="dark" content="货到付款支付比例(%)" placement="top-end">
                <el-input-number  v-model="form1.payRate"   ></el-input-number>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="待支付订单取消时间" prop="unPayTime">
              <el-tooltip class="item" effect="dark" content="待支付订单取消时间(分钟)" placement="top-end">
                <el-input-number  v-model="form1.unPayTime" :min="1"    ></el-input-number>
              </el-tooltip>

            </el-form-item>
            <el-form-item  label="公司推广佣金比例" prop="tuiMoneyRate">
              <el-tooltip class="item" effect="dark" content="公司推广佣金比例(%)" placement="top-end">
                <el-input-number  v-model="form1.tuiMoneyRate" :min="1" :max="100"    ></el-input-number>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="服务费" prop="serviceFee">
              <el-tooltip class="item" effect="dark" content="服务费(元)" placement="top-end">
                <el-input-number  v-model="form1.serviceFee" :min="0"   ></el-input-number>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="成本售价比例" prop="salesPriceRate">
              <el-tooltip class="item" effect="dark" content="成本售价比例(%)" placement="top-end">
                <el-input-number  v-model="form1.salesPriceRate" :min="1" :max="300"    ></el-input-number>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="公司制单金额最低比例" prop="createMoneyRate">
              <el-tooltip class="item" effect="dark" content="公司制单金额最低比例(%)" placement="top-end">
                <el-input-number  v-model="form1.createMoneyRate" :min="1" :max="100"    ></el-input-number>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="申请售后有效天数" prop="storeAfterSalesDay">
              <el-tooltip class="item" effect="dark" content="确认收货后申请售后天数" placement="top-end">
                <el-input-number  v-model="form1.storeAfterSalesDay" :min="0" :max="100"    ></el-input-number>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="企业理念视频" prop="videoUrl">
             <div>
                 <el-upload
                   ref="upload"
                   class="upload-demo"
                   :action="uploadUrl"
                   :on-success="handleSuccess"
                   :before-upload="beforeUpload"
                   :limit="1"
                   :accept="videoAccept"
                 >
                <el-button size="small" type="primary">点击上传视频</el-button>
                </el-upload>
                <video v-if="form1.videoUrl" :src="form1.videoUrl" controls style="max-width: 400px; max-height: 400px;"></video>
             </div>
            </el-form-item>
            <el-form-item  label="退货收货人" prop="refundConsignee">
              <el-tooltip class="item" effect="dark" content="退货收货人" placement="top-end">
                <el-input style="width:200px"  v-model="form1.refundConsignee"   ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="退货手机号" prop="refundPhoneNumber">
              <el-tooltip class="item" effect="dark" content="退货手机号" placement="top-end">
                <el-input  style="width:200px"  v-model="form1.refundPhoneNumber"   ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="退货地址" prop="refundAddress">
              <el-tooltip class="item" effect="dark" content="退货地址" placement="top-end">
                <el-input    v-model="form1.refundAddress"   ></el-input>
              </el-tooltip>
            </el-form-item>
           <div   class="footer">
              <el-button type="primary" @click="submitForm1">提  交</el-button>
            </div>
          </el-form>
      </el-tab-pane>

      <el-tab-pane label="OSS配置" name="sys.oss.cloudStorage">
          <el-form ref="form2" :model="form2" :rules="rules2" label-width="140px">
            <el-form-item label="类型" prop="type">
               <el-radio-group v-model="form2.type">
                <el-radio :label="1">七牛云</el-radio>
                <el-radio :label="2">阿里云</el-radio>
                <el-radio :label="3">腾讯云</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form2.type==1" label="七牛绑定的域名" prop="qiniuDomain">
                <el-input  v-model="form2.qiniuDomain"  label="请输入七牛绑定的域名"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==1" label="七牛路径前缀" prop="qiniuPrefix">
                <el-input  v-model="form2.qiniuPrefix" label="请输入七牛路径前缀"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==1" label="七牛ACCESS_KEY" prop="qiniuAccessKey">
                <el-input  v-model="form2.qiniuAccessKey" label="请输入七牛ACCESS_KEY"></el-input>
            </el-form-item>
            <el-form-item v-if="form2.type==1" label="七牛SecretKey" prop="qiniuSecretKey">
                <el-input  v-model="form2.qiniuSecretKey" label="七牛SecretKey不能为空"></el-input>
            </el-form-item>
            <el-form-item v-if="form2.type==1" label="七牛空间名" prop="qiniuBucketName">
                <el-input  v-model="form2.qiniuBucketName" label="七牛空间名不能为空"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==2" label="阿里云绑定的域名" prop="aliyunDomain">
                <el-input  v-model="form2.aliyunDomain" label="阿里云绑定的域名不能为空"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==2" label="阿里云路径前缀" prop="aliyunPrefix">
                <el-input  v-model="form2.aliyunPrefix" label="阿里云路径前缀不能为空"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==2" label="阿里云EndPoint" prop="aliyunEndPoint">
                <el-input  v-model="form2.aliyunEndPoint" label="阿里云EndPoint不能为空"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==2" label="阿里云AccessKeyId" prop="aliyunAccessKeyId">
                <el-input  v-model="form2.aliyunAccessKeyId" label="阿里云AccessKeyId不能为空"></el-input>
            </el-form-item>
            <el-form-item v-if="form2.type==2" label="阿里云AccessKeySecret" prop="aliyunAccessKeySecret">
                <el-input  v-model="form2.aliyunAccessKeySecret" label="阿里云AccessKeySecret不能为空"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==2" label="阿里云BucketName" prop="aliyunBucketName">
                <el-input  v-model="form2.aliyunBucketName" label="阿里云BucketName不能为空"></el-input>
            </el-form-item>
              <el-form-item v-if="form2.type==3" label="腾讯云绑定的域名" prop="qcloudDomain">
                <el-input  v-model="form2.qcloudDomain" label="腾讯云绑定的域名格式不正确"></el-input>
            </el-form-item>
              <el-form-item v-if="form2.type==3" label="腾讯云前缀" prop="qcloudPrefix">
                <el-input  v-model="form2.qcloudPrefix" label="腾讯云前缀不能为空"></el-input>
            </el-form-item>

             <el-form-item v-if="form2.type==3" label="腾讯云SecretId" prop="qcloudSecretId">
                <el-input  v-model="form2.qcloudSecretId" label="腾讯云SecretId不能为空"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==3" label="腾讯云SecretKey" prop="qcloudSecretKey">
                <el-input  v-model="form2.qcloudSecretKey" label="腾讯云SecretKey不能为空"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==3" label="腾讯云BucketName" prop="qcloudBucketName">
                <el-input  v-model="form2.qcloudBucketName" label="腾讯云BucketName不能为空"></el-input>
            </el-form-item>
             <el-form-item v-if="form2.type==3" label="所属地区" prop="qcloudRegion">
                <el-input  v-model="form2.qcloudRegion" label="所属地区不能为空"></el-input>
            </el-form-item>
             <div   class="footer">
              <el-button type="primary" @click="submitForm2">提  交</el-button>
            </div>
          </el-form>
      </el-tab-pane>
      <el-tab-pane label="积分配置" name="store.integral">
          <el-form ref="form3" :model="form3" :rules="rules3" label-width="160px">
            <el-form-item  label="积分抵用比例" prop="integralRatio">
              <el-tooltip class="item" effect="dark" content="1积分抵多少金额" placement="top-end">
                <el-input-number  v-model="form3.integralRatio"   ></el-input-number>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="满多少可以抵扣" prop="integralFull">
              <el-tooltip class="item" effect="dark" content="消费必须满一定额度才可使用,0代表无限制" placement="top-end">
                <el-input-number  v-model="form3.integralFull" ></el-input-number>
              </el-tooltip>
            </el-form-item>
            <el-form-item  label="单次最大抵扣积分" prop="integralMax">
              <el-tooltip class="item" effect="dark" content="限制一次只能使用多少积分,0代表无限制" placement="top-end">
                <el-input-number  v-model="form3.integralMax" ></el-input-number>
              </el-tooltip>
            </el-form-item>
           <div   class="footer">
              <el-button type="primary" @click="submitForm3">提  交</el-button>
            </div>
          </el-form>
      </el-tab-pane>
      <el-tab-pane label="签到配置" name="store.sign">
        <el-form ref="form4" :model="form4" label-width="160px">
              <el-table
                border
                :data="form4.sign"
                style="width: 100%">
                <el-table-column
                  prop="day"
                  label="名称"
                  >
                </el-table-column>
                <el-table-column
                  prop="signNum"
                  label="获得积分"
                  >
                </el-table-column>
                <el-table-column
                  prop="sort"
                  label="排序"
                  >
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleSignEdit(scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div   class="footer" style="margin-top:10px;">
              <el-button type="primary" @click="submitForm4">提  交</el-button>
            </div>
         </el-form>
      </el-tab-pane>

      <el-tab-pane label="用户协议" name="store.agreement">
          <el-form ref="form5" :model="form5" :rules="rules5" label-width="100px">
            <el-form-item label="用户协议" prop="userAgreement">
              <editor ref="myeditor1"       @on-text-change="updateText1" />
            </el-form-item>
            <el-form-item label="隐私政策" prop="privacyPolicy">
              <editor ref="myeditor2"    @on-text-change="updateText2" />
            </el-form-item>
            <div class="footer">
              <el-button type="primary" @click="submitForm5">提  交</el-button>
            </div>
          </el-form>
      </el-tab-pane>


    </el-tabs>
     <el-dialog :title="sign.title" :visible.sync="sign.open" width="500px" append-to-body>
      <el-form ref="signform" :model="signform"   label-width="80px">
        <el-form-item label="名称" prop="day">
          <el-input v-model="signform.day" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="获得积分" prop="signNum">
          <el-input-number v-model="signform.signNum" placeholder="请输入获得积分" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="signform.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSignForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Editor from '@/components/Editor/wang';
import {   getConfigByKey,updateConfigByKey, clearCache } from "@/api/system/config";
import Material from '@/components/Material'
export default {
  name: "Config",
  components: {
    Material,
    Editor
  },
   watch: {
    photoArr: function(val) {
      this.form1.certs = val.join(',')
    }
  },
  data() {
    return {
      sign:{
        title:"修改签到",
        open:false,
      },
      signform: {

      },
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      videoAccept:"video/*",
      photoArr:[],
      activeName:"store.config",
      configId:null,
      configKey:null,
      // 表单参数
      form1: {
        hotSearch:"",

      },
      // 表单校验
      rules1: {

      },
      form2: {

      },
      // 表单校验
      rules2: {

      },
      form3: {

      },
      // 表单校验
      rules3: {

      },
      form4: {
        sign:[],

      },
      // 表单校验
      rules4: {

      },
      form5: {


      },
      // 表单校验
      rules5: {

      }
    };
  },
  created() {
    this.getConfigByKey(this.activeName);
  },
  methods: {
      handleSuccess(response, file) {
            // 上传成功后的回调函数
            this.myloading.close();
            this.form1.videoUrl = response.url;
            this.$refs.upload.clearFiles();
          },
      beforeUpload(file) {
        // 上传前的钩子函数，可以在这里对文件进行处理
        // 返回 false 则取消上传

        // 例如限制文件大小
        const isLt2M = file.size / 1024 / 1024 < 200;
        if (!isLt2M) {
          this.$message.error('上传视频文件大小不能超过 200MB!');
          return false;
        }
        this.myloading = this.$loading({
          lock: true,
          text: '上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

      },
      handleSignEdit(item){
        this.signform=item;
        this.sign.open=true;
      },
      submitSignForm(){
        this.sign.open=false;
      },
      updateText1(text){
        this.form5.userAgreement=text
      },
      updateText2(text){
        this.form5.privacyPolicy=text
      },
      handleClick(tab, event){
        console.log(tab.name)
        this.getConfigByKey(tab.name);
      },
      getConfigByKey(key){
         getConfigByKey(key).then(response => {
           console.log(response)
          if(key=="store.config"){
              this.configId=response.data.configId;
              this.configKey=response.data.configKey;
              this.form1 =JSON.parse(response.data.configValue);
              if(this.form1.certs!=null){
                  this.photoArr=this.form1.certs.split(",");
              }
          }
          else if(key=="store.integral"){
              this.configId=response.data.configId;
              this.configKey=response.data.configKey;
              console.log(response.data.configValue)
              this.form3 =JSON.parse(response.data.configValue);
              console.log(this.form3.sign)
          }
          else if(key=="store.sign"){
              this.configId=response.data.configId;
              this.configKey=response.data.configKey;
              this.form4.sign =JSON.parse(response.data.configValue);
              console.log(this.form4.sign)
           }
           else if(key=="store.agreement"){
              this.configId=response.data.configId;
              this.configKey=response.data.configKey;
              this.form5 =JSON.parse(response.data.configValue);
              this.$refs.myeditor1.setText(this.form5.userAgreement);
              this.$refs.myeditor2.setText(this.form5.privacyPolicy);
           }
           else if(key=="sys.oss.cloudStorage"){
              this.configId=response.data.configId;
              this.configKey=response.data.configKey;
              this.form2 =JSON.parse(response.data.configValue);
           }
        });
     },
    /** 提交按钮 */
    submitForm1: function() {
      this.$refs["form1"].validate(valid => {
        if (valid) {
          var param={configId:this.configId,configKey:this.configKey,configValue:JSON.stringify(this.form1)}
           updateConfigByKey(param).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
              }
            });
        }
      });
    },
    submitForm2: function() {
      this.$refs["form2"].validate(valid => {
        if (valid) {
         var param={configId:this.configId,configKey:this.configKey,configValue:JSON.stringify(this.form2)}
           updateConfigByKey(param).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
              }
            });
        }
      });
    },
    submitForm3: function() {
      this.$refs["form3"].validate(valid => {
        if (valid) {
         var param={configId:this.configId,configKey:this.configKey,configValue:JSON.stringify(this.form3)}
           updateConfigByKey(param).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
              }
            });
        }
      });
    },
    submitForm4: function() {
      this.$refs["form4"].validate(valid => {
        if (valid) {
         var param={configId:this.configId,configKey:this.configKey,configValue:JSON.stringify(this.form4.sign)}
           updateConfigByKey(param).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
              }
            });
        }
      });
    },
    submitForm5: function() {
      this.$refs["form5"].validate(valid => {
        if (valid) {
         var param={configId:this.configId,configKey:this.configKey,configValue:JSON.stringify(this.form5)}
           updateConfigByKey(param).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
              }
            });
        }
      });
    },
    /** 清理缓存按钮操作 */
    handleClearCache() {
      clearCache().then(response => {
        if (response.code === 200) {
          this.msgSuccess("清理成功");
        }
      });
    }
  }
};
</script>
<style scoped>
.footer{
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
</style>