newServiceGuide.vue

<template>
  <div class="newServiceGuide H100">
    <div class="head_box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/serviceGuidePage'}">业务服务指南</el-breadcrumb-item>
        <el-breadcrumb-item>{{headFont}}</el-breadcrumb-item>
      </el-breadcrumb>
      <h4>{{headFont}}</h4>
    </div>
    <div class="content_box">
      <div class="reject_box" v-show="isShow == 1 || isShow == 6">
        <p><i></i><span>驳回原因:</span>&nbsp; {{rejectReason}}</p>
      </div>
      <div class="scrool">
      <div class="form_box">
        <div class="form_scroll_div">
          <el-row>
            <el-form :model="contentForm" :rules="formRules" label-width="100px" ref="ruleForm">
              <el-col :span="12">
                <el-form-item label="业务名称：" class="input_form" prop="name">
                  <el-input size="small" v-model="contentForm.name" auto-complete="off" placeholder="请输入业务名称"
                            clearable></el-input>
                </el-form-item>
                <el-form-item class="icon_box" label="业务icon：" prop="icon">
                  <el-upload class="avatar-uploader" name="icon" action=""
                             :file-list="fileList"
                             accept="image/png"
                             :limit="1"
                             :on-change="handleChange"
                             :on-exceed="handleExceed"
                             :before-remove="beforeRemove"
                             :on-remove="handleRemove"
                             :http-request="handleUploadImg">
                    <img v-if="contentForm.icon" :src="contentForm.icon" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div slot="tip" class="el-upload__tip">只支持上传一张.png 格式 大小建议不超过96px*96px</div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="网点归属：" label-width="140px" prop="bankBranchName" class="input_form">
                  <el-input size="small" v-model="contentForm.bankBranchName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="是否支持在线填单：" label-width="140px">
                  <el-radio-group v-model="contentForm.isSkip" @change="radioChange">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="在线填单链接：" prop="skipLink" class="input_form" label-width="140px">
                  <el-input :disabled="disabled" size="small" v-model="contentForm.skipLink" auto-complete="off"
                            placeholder="输入在线填单链接" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="内容：" class="editor-container" prop="process">
                  <UE :defaultMsg="contentForm.process" :config=config :id="ue1" ref="ue1"></UE>
                </el-form-item>
                <div class="dialog-footer">
                  <el-button size="mini" type="primary" @click="submit(2)">提交</el-button>
                  <el-button size="mini" @click="submit(1)">保存</el-button>
                  <el-button size="mini" @click="handleCancel('ruleForm')">取消</el-button>
                </div>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
  import UE from '../../components/ue/ueditor'
  export default {
    data() {
      return {
        fileList: [],
        rejectReason: "",
        isShow: "",
        id: "",
        ue1: "ue1",
        disabled: true,
        config: {initialFrameWidth: null, initialFrameHeight: 408, autoHeightEnabled: true, autoFloatEnabled: false},
        contentForm: {name: '', bankBranchId: '',bankBranchName:'', isSkip: '2', skipLink: '', process: '', icon: ''},
        value: '',
        headFont: '新增业务指南',
        formRules: {
          name: [
            {required: true, message: '请输入业务名称'},
            {max: 20, message: '不能超过20个字符'},
            {pattern: /^[\s\S]*.*[^\s][\s\S]*$/, message: '请输入正确的业务名称'}
          ],
          icon: [
            {required: true, message: '请上传业务icon', trigger: 'blur'}
          ],
          skipLink:[],
          bankBranchId: [
            {required: true, message: '请选择所属网点', trigger: 'blur'}
          ],
          process: [
            {required: true, message: '请输入内容', trigger: 'blur'}
          ]
        },
      }
    },
    computed: {
    },
    mounted() {
      this.initData();
    },
    components: {UE},
    watch:{
      contentForm:{//深度监听，可监听到对象、数组的变化
        handler(val){
          if(val.isSkip == 1){
            let obj = [{
              required: true,
              message: '请输入填单链接',
              trigger: 'blur'
            }];
            this.formRules.skipLink = obj;
          }else{
            let obj = [];
            this.formRules.skipLink = obj;
          }
        },
        deep:true
      }
    },
    methods: {
      initData() {
        this.id = this.$route.query.id;
        if (this.id) {
          this.headFont = '编辑业务指南';
          this.getInfoById(this.id)
        }
        this.contentForm.bankBranchId = localStorage.getItem('bankBranchId');
        this.contentForm.bankBranchName = localStorage.getItem('bankBranchName');
      },
      radioChange() {
        if (this.contentForm.isSkip == 2) {
          this.contentForm.skipLink = "";
          this.disabled = true;
        } else {
          this.disabled = false;
          this.contentForm.skipLink = this.$skipLinkUrl;
        }
      },
      getInfoById(id) {
        let vm = this;
        vm.$https({
          method: 'get',
          url: 'businessInfo/getById?id=' + id,
          authType: this.backToken
        }).then(function (res) {
          if (res.status == 201 || res.status == 200) {
            let obj = {};
            obj.name = res.data.name;
            obj.bankBranchId = res.data.bankBranchId;
            obj.bankBranchName = res.data.bankName;
            obj.isSkip = res.data.isSkip;
            obj.skipLink = res.data.skipLink;
            obj.process = res.data.process;
            obj.icon = res.data.icon;
            vm.contentForm = obj;
            vm.rejectReason = res.data.rejectReason;
            vm.isShow = res.data.status;
            if (obj.isSkip == 2) {
              vm.disabled = true;
            } else {
              vm.disabled = false;
            }
            vm.setUEContent()
          }
        })
          .catch(function (error) {
            console.log(error)
          });
      },
      setUEContent() {
        this.$refs.ue1.setUEContentTxt(this.contentForm.process)
      },
      handleUploadImg(file) {
        let vm = this;
        vm.handleUpload(file.file).then(function (response) {
          let obj = {
            name: file.file.name,
            url: response.data.url
          }
          vm.fileList.push(obj);
          if (response.data.url) {
            vm.$refs['ruleForm'].validateField(file.filename);
          }
        })
      },
      handleUpload(file) {
        let _this = this;
        let formData = new FormData();
        formData.append("bc_cover", file);
        return new Promise(function (resolve, reject) {
          _this.$https({
            url: 'pic/upload',
            method: 'post',
            authType: _this.backToken
          }, formData, 'file', 60000).then((res) => {
            resolve(res);
            _this.contentForm.icon = res.data.url;
          }, (error) => {
            console.log(error)
          })
        })

      },
      handleExceed() {
        this.$message.warning(`当前限制选择 1 个文件，如需更改请删除后重选`);
      },
      beforeRemove(file) {
        if(file) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        }
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(1);
      },
      handleRemove() {
        this.contentForm.icon = '';
      },
      handleCancel(formName) {
        this.contentForm = {};
        this.$refs[formName].resetFields();
        this.$router.push('/serviceGuidePage');
      },
      submit(action) {
        let vm = this;
        vm.contentForm.process = this.$refs.ue1.getUEContent();
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let params = JSON.parse(JSON.stringify(vm.contentForm));
            let url = "";
            let method = "post"
            if (vm.id) {
              method = "put"
              url = "businessInfo/edit?action=" + action+"&currentBankId="+ localStorage.getItem('bankBranchId');
              params.id = vm.id
            } else {
              url = "businessInfo/add?action=" + action+"&currentBankId="+ localStorage.getItem('bankBranchId')
            }
            vm.$https({
              method: method,
              url: url,
              authType: this.backToken
            }, vm.$qs.stringify(params)).then((res) => {
              if (res.data.status == 201) {
                  vm.$message({type: 'success', message: res.data.message});
                  vm.$router.push('/serviceGuidePage');
                } else {
                  vm.$message({type: 'error', message: res.data.message});
                }
              }, (error) => {
                console.log(error)
              }
            )
          } else {
            console.log('error submit!!');
          }
        })
      }
    }
  }
</script>

<style lang="less">
  @import '../../style/common';

  .newServiceGuide {
    .content_box {
      .reject_box {
        width: cale(100% - 40px);
        background: #fff;
        margin: 10px 20px;
        border-radius: 4px;
        p {
          padding: 5px;
          i {
            width: 10px;
            height: 10px;
            display: inline-block;
            margin: 0px 10px;
            background: url("../../../static/images/icon/reject.png") no-repeat 100%;
          }
        }
      }
      .scrool {
        width: 100%;
        height: calc(100% - 0px);
        overflow-x: hidden;
        overflow-y: scroll;
        .form_box {
          background-color: #fff;
          margin: 10px 20px 0px 20px;
          padding: 20px;
          position: relative;
          .form_scroll_div {
            height: calc(100% - 68px);
            position: relative;
            /*.el-scrollbar {*/
            /*height: 100%*/
            /*}*/
            /*.el-scrollbar__wrap {*/
            /*overflow-x: hidden;*/
            /*}*/
            /*.el-scrollbar__bar {*/
            /*right: -12px*/
            /*}*/
            .el-form-item {
              &.input_form {
                .el-input {
                  width: 273px;
                }
              }
              .el-upload__tip {
                margin-top: 0px;
              }
              .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;

              }
              .el-upload-list {
                width: 245px;
                height: 25px;
                position: absolute;
                top: 10px;
                left: 120px;
              }
              .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
              }
              .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 104px;
                height: 104px;
                line-height: 104px;
                text-align: center;
              }
              .avatar {
                width: 104px;
                height: 104px;
                display: block;
              }
              .edui-editor-toolbarbox.edui-default {
                line-height: 1;
              }
            }
          }
        }
      }
    }
    .editor-container {
      margin-bottom: 88px !important;
    }
    .dialog-footer {
      position: absolute;
      bottom: 32px;
      left: 32px;
      z-index: 999;
    }
  }
</style>