jhsw_manage/src/components/EditHomeRegister.vue

<template>
  <div>
    <el-dialog
      :title="isView ? '新增' : '编辑'"
      :visible.sync="dialogVisible"
      :before-close="cancle"
      width="60%"
    >
      <el-form
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="报告来源" prop="reportSource">
              <el-input
                v-model="ruleForm.reportSource"
                class="inputCom"
                placeholder="请输入报告来源"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="公司名称" prop="companyName">
              <el-input
                v-model="ruleForm.companyName"
                class="inputCom"
                placeholder="请输入公司名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="公司英文名称" prop="companyEname">
              <el-input
                v-model="ruleForm.companyEname"
                class="inputCom"
                placeholder="请输入公司英文名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否展示详细信息" prop="isDetail">
              <el-select v-model="ruleForm.isDetail" placeholder="请选择否展示详细信息">
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in isDetailList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="公司logo" prop="logo">
              <el-upload
                accept=".png, .jpg, .jpeg"
                class="avatar-uploader"
                name="file"
                :action="action"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip">
                  建议上传jpg/png/jpeg文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="首页二维码" prop="firstPageCode">
              <el-upload
                accept=".png, .jpg, .jpeg"
                class="avatar-uploader"
                name="file"
                :action="action"
                :show-file-list="false"
                :on-success="handleFirstPageCodeSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="ruleForm.firstPageCode"
                  :src="ruleForm.firstPageCode"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip">
                  建议上传jpg/png/jpeg文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="网址" prop="webAddress">
              <el-input
                v-model="ruleForm.webAddress"
                class="inputCom"
                placeholder="请输入网址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="邮箱" prop="mail">
              <el-input
                v-model="ruleForm.mail"
                class="inputCom"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否展示尾页二维码" prop="isCode">
              <el-select v-model="ruleForm.isCode" placeholder="请选择是否展示尾页二维码">
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in isCodeList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否展示尾页公司名及地址" prop="isLastPageName">
              <el-select
                v-model="ruleForm.isLastPageName"
                placeholder="请选择是否展示尾页公司名及地址"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in isLastPageNameList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="尾页公司名" prop="lastPageName">
              <el-input
                v-model="ruleForm.lastPageName"
                class="inputCom"
                placeholder="请输入尾页公司名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="尾页公司地址" prop="lastPageAddress">
              <el-input
                v-model="ruleForm.lastPageAddress"
                class="inputCom"
                placeholder="请输入尾页公司地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="尾页二维码" prop="lastPageCode">
              <el-upload
                accept=".png, .jpg, .jpeg"
                class="avatar-uploader"
                name="file"
                :action="action"
                :show-file-list="false"
                :on-success="handleLastPageCodeSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="ruleForm.lastPageCode"
                  :src="ruleForm.lastPageCode"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip">
                  建议上传jpg/png/jpeg文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle" round>取 消</el-button>
        <el-button
          v-show="isView"
          type="primary"
          round
          :disabled="disableFlag"
          @click="submitCom"
          >确 定</el-button
        >
        <el-button
          v-show="!isView"
          type="primary"
          round
          :disabled="disableFlag"
          @click="submitCom"
          >修 改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import { oSessionStorage } from "../../utils/utils";
import { oSessionStorage } from "../utils/utils";
import { basePath } from "../utils/http";
import md5 from "md5";
export default {
  data() {
    return {
      action: "",
      disableFlag: false,
      phoneFlag: false,
      flag: 3,
      dialogVisible: false,
      //渠道列表
      stateList: [
        { name: "签约", state: "1" },
        { name: "解约", state: "0" },
      ],
      isDetailList: [
        { name: "是", id: "1" },
        { name: "否", id: "0" },
      ],
      isCodeList: [
        { name: "是", id: "1" },
        { name: "否", id: "0" },
      ],
      isLastPageNameList: [
        { name: "是", id: "1" },
        { name: "否", id: "0" },
      ],
      ruleForm: {
        //渠道ID
        channelId: "",
        //报告来源
        reportSource: "",
        //公司名称
        companyName: "",
        //是否展示详细信息
        isDetail: "",
        //公司英文名称
        companyEname: "",
        //网址
        webAddress: "",
        //是否展示尾页二维码
        isCode: "",
        //是否展示尾页公司名称及地址
        isLastPageName: "",
        // //尾页公司名称
        lastPageName: "",
        //尾页公司地址
        lastPageAddress: "",
        //是否删除
        isDelete: "",
        //主键
        id: "",
        //邮箱
        mail: "",
        //尾页二维码
        lastPageCode: "",
        //公司logo
        logo: "",
        //首页二维码
        firstPageCode: "",
      },
      isView: true,
      rules: {
        reportSource: [{ required: true, message: "请输入报告来源", trigger: "blur" }],
        // phone: [
        //   { required: true, message: "请输入手机号", trigger: "blur" },
        //   {
        //     pattern: /^1[3456789]\d{9}$/,
        //     message: "请输入正确的手机号",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        isDetail: [
          { required: true, message: "请选择是否展示详细信息", trigger: "change" },
        ],

        isLastPageName: [
          { required: true, message: "是否展示尾页公司名称及地址", trigger: "change" },
        ],
        mail: [
          // { required: true, message: "请输选择邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
        ],
      },
    };
  },
  mounted() {
    let userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
    this.ruleForm.parentCode = userInfo.invitationCode;
    this.action = basePath + "/file/customUpload";
    //获取到router 传输过来的信息
    this.ruleForm.channelId = this.$route.query.channelId;

    //获取渠道信息

    // this.ruleForm.type = "3";
  },
  methods: {
    disableFlagStatus() {
      setTimeout(() => {
        this.disableFlag = false;
      }, 1500);
    },
    beforeAvatarUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".jpg" && fileType !== ".jpeg" && fileType !== ".png") {
        // alert("请上传jpg、jpge或png的图片！");
        this.$message.error("请上传jpg、jpge或png的图片！");
        return false;
      }
      return true;
    },

    //上传成功后的回调
    handleLogoSuccess(data) {
      if (data.code == 200) {
        this.ruleForm.logo = basePath + "/file/show?filePath=" + data.data;
      } else {
        //失败
      }
    },
    handleFirstPageCodeSuccess(data) {
      if (data.code == 200) {
        this.ruleForm.firstPageCode = basePath + "/file/show?filePath=" + data.data;
      } else {
        //失败
      }
    },
    handleLastPageCodeSuccess(data) {
      if (data.code == 200) {
        this.ruleForm.lastPageCode = basePath + "/file/show?filePath=" + data.data;
      } else {
        //失败
      }
    },
    phoneCheck() {
      //判断是否重复
      this.$http.get(`v1/system/checkPhone/${this.ruleForm.phone}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          if (res.data) {
            this.phoneFlag = true;
          } else {
            this.phoneFlag = false;
            // this.$toast.success({ message: "手机号重复" });
            this.$message.warning("手机号重复");
          }
        } else {
          // this.$toast.fail({ message: res.msg });
          this.$message.error(res.msg);
        }
      });
    },
    timeChange(val) {
      if (val !== null) {
        //根据时间得到格式化的数据
        this.ruleForm.birthDate = this.formatterTime(val);
      }
    },
    formatterTime(val) {
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = this.formatterMon(month);
      let day = date.getDate();
      day = this.formatterMon(day);
      return year + "-" + month + "-" + day;
    },
    formatterMon(val) {
      if (val < 10) {
        return "0" + val;
      } else {
        return val;
      }
    },
    open(val) {
      this.dialogVisible = true;
      this.isView = val;
      this.ruleForm.channelId = val;

      this.$nextTick(() => {
        this.$refs["ruleForm"].clearValidate();
      });
    },
    edit(val) {
      this.dialogVisible = true;
      this.isView = false;
      this.ruleForm.channelId = val.channelId;
      //报告来源
      this.ruleForm.reportSource = val.reportSource;
      //公司名称
      this.ruleForm.companyName = val.companyName;
      //是否展示详细信息
      this.ruleForm.isDetail = val.isDetail;
      //公司英文名称
      this.ruleForm.companyEname = val.companyEname;
      //网址
      this.ruleForm.webAddress = val.webAddress;
      //是否展示尾页二维码
      this.ruleForm.isCode = val.isCode;
      //是否展示尾页公司名称及地址
      this.ruleForm.isLastPageName = val.isLastPageName;
      // //尾页公司名称
      this.ruleForm.lastPageName = val.lastPageName;
      //尾页公司地址
      this.ruleForm.lastPageAddress = val.lastPageAddress;
      //是否删除
      this.ruleForm.isDelete = val.isDelete;
      //主键
      this.ruleForm.id = val.id;
      //邮箱
      this.ruleForm.mail = val.mail;
      //尾页二维码
      this.ruleForm.lastPageCode = val.lastPageCode;
      //公司logo
      this.ruleForm.logo = val.logo;
      //首页二维码
      this.ruleForm.firstPageCode = val.firstPageCode;
    },
    cancle() {
      //渠道ID
      this.ruleForm.channelId = "";
      //报告来源
      this.ruleForm.reportSource = "";
      //公司名称
      this.ruleForm.companyName = "";
      //是否展示详细信息
      this.ruleForm.isDetail = "";
      //公司英文名称
      this.ruleForm.companyEname = "";
      //网址
      this.ruleForm.webAddress = "";
      //是否展示尾页二维码
      this.ruleForm.isCode = "";
      //是否展示尾页公司名称及地址
      this.ruleForm.isLastPageName = "";
      // //尾页公司名称
      this.ruleForm.lastPageName = "";
      //尾页公司地址
      this.ruleForm.lastPageAddress = "";
      //是否删除
      this.ruleForm.isDelete = "";
      //主键
      this.ruleForm.id = "";
      //邮箱
      this.ruleForm.mail = "";
      //尾页二维码
      this.ruleForm.lastPageCode = "";
      //公司logo
      this.ruleForm.logo = "";
      //首页二维码
      this.ruleForm.firstPageCode = "";
      //清空表单
      this.$refs["ruleForm"].clearValidate();
      this.dialogVisible = false;
    },
    submitCom() {
      if (this.ruleForm.isLastPageName == "1") {
        if (this.ruleForm.lastPageName == "") {
          this.$message.error("是否展示尾页公司名称及地址选择是则尾页公司名称必填");
          return;
        }
        if (this.ruleForm.lastPageAddress == "") {
          this.$message.error("是否展示尾页公司名称及地址选择是则尾页公司地址必填");
          return;
        }
      }

      if (this.ruleForm.isCode == "1") {
        if (this.ruleForm.lastPageCode == "") {
          this.$message.error("是否展示尾页二维码选择是时尾页二维码必填");
          return;
        }
      }

      if (this.disableFlag) {
        return;
      }
      this.disableFlag = true;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          //判断是编辑还是新增
          if (this.isView) {
            this.register();
          } else {
            this.editUserFun();
          }

          //都校验通过后可以触发注册接口了
          //调用方法进行入参
        } else {
          this.disableFlagStatus();
        }
      });
    },
    register() {
      let that = this;
      this.$http.post(
        `/pdf/save`,
        {
          channelId: this.ruleForm.channelId,
          //报告来源
          reportSource: this.ruleForm.reportSource,
          //公司名称
          companyName: this.ruleForm.companyName,
          //是否展示详细信息
          isDetail: this.ruleForm.isDetail,
          //公司英文名称
          companyEname: this.ruleForm.companyEname,
          //网址
          webAddress: this.ruleForm.webAddress,
          //是否展示尾页二维码
          isCode: this.ruleForm.isCode,
          //是否展示尾页公司名称及地址
          isLastPageName: this.ruleForm.isLastPageName,
          // //尾页公司名称
          lastPageName: this.ruleForm.lastPageName,
          //尾页公司地址
          lastPageAddress: this.ruleForm.lastPageAddress,
          //是否删除
          isDelete: this.ruleForm.isDelete,
          //邮箱
          mail: this.ruleForm.mail,
          //尾页二维码
          lastPageCode: this.ruleForm.lastPageCode,
          //公司logo
          logo: this.ruleForm.logo,
          //首页二维码
          firstPageCode: this.ruleForm.firstPageCode,
        },
        (res) => {
          this.disableFlagStatus();
          if (res && res.code == 200) {
            this.dialogVisible = false;
            this.$message.success(res.msg);
            // this.$toast.success({ message: "成功" });
            //调用父组件的查询方法
            that.$emit("search");
          } else {
            // this.$toast.fail({ message: res.msg });
            this.$message.error(res.msg);
          }
          //清空缓存
          this.cancle();
        }
      );
    },
    editUserFun() {
      let that = this;
      this.$http.post(
        `/pdf/save`,
        {
          ...this.ruleForm,
          // ...this.ruleForm, //解构对象
        },
        (res) => {
          this.disableFlagStatus();
          if (res && res.code == 200) {
            this.dialogVisible = false;
            // this.$toast.success({ message: "成功" });
            //调用父组件的查询方法
            that.$emit("search");
            this.$message.success("修改成功");
          } else {
            // this.$toast.fail({ message: res.msg });
            this.$message.error(res.msg);
          }
          //清空缓存
        }
      );
    },
  },
};
</script>
<style scoped>
.inputCom {
  width: 200px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>