proginn-frontend/components/company/solution_add.vue

<template>
  <div class="kaifainAdd">
    <div class="bodyArea">
      <div class="nameBox">
        <div class="stitle">方案名称</div>
        <el-input v-model="data.title" placeholder="20字以内 不能包含 & ￥ % / \ *"></el-input>
      </div>
      <div class="selectArea">
        <div class="left">
          <div class="stitle">行业领域</div>
          <el-select v-model="data.industry" placeholder="选择行业类型">
            <el-option
              v-for="item in industryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="right">
          <div class="stitle">技术分类</div>
          <el-select v-model="data.tech_type" placeholder="选择技术分类">
            <el-option
              v-for="item in techTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="logoBox">
        <div class="stitle">缩略图</div>
        <div class="uploadInfo">
          <div class="left">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :multiple="false"
              accept="image/png, image/jpeg"
              :before-upload="(file) => handleFileChange(file, 'images')"
            >
              <i
                v-if="data.images"
                class="el-icon-delete avatar-uploader-icon"
                @click.stop="(file) => handleDeleteFile('images')"
              ></i>
              <img v-if="data.images" :src="data.images" class="avatar" />
              <div v-else class="noneImage">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <span class="title">上传照片</span>
              </div>
            </el-upload>
            <p class="rightTips">支持JPG、PNG格式</p>
          </div>
          <div class="right">
            <p>（800*800，图片最大2M，最多1张）</p>
          </div>
        </div>
      </div>
      <div class="smallIntro">
        <div class="stitle">方案简介</div>
        <el-input v-model="data.description" placeholder="请用一句话来介绍您的方案，10-50字符"></el-input>
      </div>
      <div class="intro">
        <div class="stitle">
          方案介绍
          <span @click="jumpToOther">查看参考示例</span>
        </div>
        <div class="editor">
          <editor
            :content="data.detail"
            @change="(val) => data.detail = val"
            :haveVideo="true"
            placeholder="支持图文混排，请至少添加：【文字描述】【方案视频】【方案介绍图片】【架构图片】【架构说明】等模块；可添加方案截图/PDF文档转图片，不低于500字"
          ></editor>
        </div>
      </div>

      <div class="successIntro">
        <div class="stitle">成功案例</div>
        <div class="list">
          <div class="titleCell">
            <div class="tt1">
              <p>品牌logo</p>
            </div>
            <div class="tt2">案例描述</div>
            <div class="tt3">附件</div>
            <div class="tt4">操作</div>
          </div>
          <div
            class="cell"
            v-for="(item, index) in data.successful_case"
            @click="openEditCase(item)"
          >
            <div class="img">
              <img :src="item.logo" alt />
            </div>
            <div class="content">
              <p>【{{data.title}}】帮助【{{item.title}}】提供解决方案</p>
            </div>
            <div class="pdf" @click.stop="openNewUrl(item)">
              <div class="icon"></div>
              <p>成功案例.PDF</p>
            </div>
            <div class="del" @click.stop="deleteCase(item)">
              <div class="icon"></div>
            </div>
          </div>
          <div class="addCell" @click="addSuccessInfo">
            <div class="icon"></div>
            <p>添加成功案例</p>
          </div>
        </div>
      </div>

      <div class="bottomBtn">
        <!-- <div class="preview" @click="preview" >
          <p>预览</p>
        </div> -->
        <div class="submit" @click="submitAll">
          <p>提交审核</p>
        </div>
        <div class="keepTmp" @click="saveDraft()" v-if="!lastId || Number(data.status) === 0">
          <p>存草稿</p>
        </div>
      </div>
    </div>

    <el-drawer
      title="添加成功案例"
      :size="case_add_size"
      :append-to-body="true"
      :modal-append-to-body="true"
      :wrapperClosable="false"
      :visible.sync="drawer"
      :direction="direction"
      :destroy-on-close="true">
      <case_add @getLastDetail="getLastDetail" :lastId="lastId"></case_add>
    </el-drawer>
  </div>
</template>

<script>
  import { mapState } from "vuex";
  import editor from "@/components/editor";
  import case_add from "@/components/company/case_add";
  import uploadFile from "@/mixins/uploadFile";
  import DealSeoFooter from "@/components/kaifain/dealSeoFooter";
  import KaifainFooter from "@/components/SeoFooter";

  export default {
    name: "userSetting",
    components: {
      editor,
      KaifainFooter,
      case_add
    },
    props: {
      lastId: {
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        data: {
          city: 1,
          industry: null, //所处行业的ID
          title: "", //服务名称
          description: "", //简单描述
          images: "", //封面图片，缩略图的地址URL
          detail: "", //具体的描述
          tech_type: null, //技术类型
          successful_case: [],
          status: 0,
        },
        tempData: {},
        industryList: [],
        techTypeList: [],
        dialogVisible: false,
        dataItem: {
          provider_id: 0, //服务商ID
          title: "", //成功案例1
          logo: "", //http://www.baidu.com，URL
          description: "", //描述一下啊啥的发啊的算法
          file: "", //https://www.baidu.com，用户上传的PDF，格式必须为PDF，URL
        },
        fileList: [],
        kaifainUrl: "",
        case_add_size:"500px",
        drawer:false,
        direction: 'rtl',
      };
    },
    async asyncData({ ...params }) {
      try {
        params.store.commit("updateNoneCommonFooter", true);
      } catch (e) {
        console.log("updateNoneCommonFooter", e);
      }
      let dealSeoFooterObj = new DealSeoFooter(params);
      let footer = await dealSeoFooterObj.dealData();
      let domainConfig = params.store.state.domainConfig;
      return {
        ...domainConfig,
        ...footer,
        mobile: params.app.$deviceType.isMobile(),
      };
    },
    mixins: [uploadFile],
    computed: {
      ...mapState(["deviceType"]),
      statusObj() {
        let status = Number(this.data.status || 0);
        let nameList = ["未申请", "审核中", "已入驻", "拒绝"];
        let o = {
          isOk: status === 2,
          name: nameList[status],
        };
        return o;
      },
      isDis() {
        let status = Number(this.data.status || 0);
        return status === 1;
      },
    },
    created() {
      const {kaifainUrl, jishuBaseUrl, siteUrl} = this.$store.state.domainConfig;
      this.kaifainUrl = kaifainUrl
      this.siteUrl = siteUrl;
      if (this.deviceType.ios || this.deviceType.android)
      {
        this.case_add_size="100%";
      }
    },
    async mounted() {
      this.needLogin();
      //如果存在ID,则优先获取ID
      if (this.lastId) {
        this.getLastDetail();
      } else {
        this.getDraftInfo();
      }
      this.getTypeList();
    },
    methods: {
      jumpTo() {
        location.href = this.siteUrl + "/otherpage/companyComplete";
      },
      /** 图片文件上传 **/
      handleFileChange(file, type) {
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
          return;
        }
        const formData = new FormData();
        formData.append("file", file);
        formData.append("original_filename", file.name);
        this.uploading = true;
        this.$axios
          .$post(`/upload_image`, formData, {
            headers: { "Content-Type": "multipart/form-data" },
          })
          .then((res) => {
            if (type === "images") {
              this.data.images = res.filename;
            } else if (type === "logo") {
              this.dataItem.logo = res.filename;
            }
            console.log("type", type, this.data, this.dataItem);
          })
          .finally(() => {
            this.uploading = false;
          });
      },
      /** 删除问及爱你 **/
      handleDeleteFile(type) {
        if (type === "images") {
          this.data.images = "";
        } else if (type === "logo") {
          this.dataItem.logo = "";
        }
      },
      /** pdf上传  **/
      handlePDFFileChange(file, type) {
        console.log(file);
        const isPDF = file.type === "application/pdf";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isPDF) {
          this.$message.error("上传文件只能是 JPG/PNG 格式!");
          return;
        }
        // if (!isLt2M) {
        // this.$message.error('上传文件大小不能超过 2MB!');
        // return
        // }
        const formData = new FormData();
        formData.append("file", file);
        formData.append("original_filename", file.name);
        this.uploading = true;
        this.apiPrepareUpload(file, (res) => {
          if (res.data && res.data.status === 1) {
            let url = res.data.data.url;
            this.dataItem.file = url;
            this.fileList = [{ name: file.name, url: url }];
          } else {
            this.$message.error("上传失败");
          }
        });
        return false;
      },
      /** pdf删除 **/
      handlePDFFileRemove() {
        this.fileList = [];
        this.dataItem.file = "";
      },
      /** 弹窗逻辑 **/
      submitChange() {},
      /** 获取选择信息 **/
      getTypeList() {
        this.$axios.get("/api/kaifawu/get_options").then((res) => {
          if (Number(res.data.status) === 1) {
            this.industryList = res.data.data.industries;
            this.techTypeList = res.data.data.tech_types;
          }
        });
      },
      /** 点击添加生成案例 **/
      async addSuccessInfo() {
        let bool=await this.saveDraft();
        if(bool)
        {
          this.drawer=true;
        }
      },
      /** 删除案例 **/
      deleteCase(item) {
        this.$confirm("此操作将直接删除该成功案例, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$axios
              .post("/api/kaifawu/delete_case", {
                id: item.id,
              })
              .then((res) => {
                if (Number(res.data.status) === 1) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      /** 添加案例 **/
      async addCase() {
        let p = {};
        let keyList = [
          "id",
          "provider_id",
          "title",
          "logo",
          "description",
          "file",
        ];
        for (let key of keyList) {
          if (this.dataItem[key]) {
            p[key] = this.dataItem[key];
          }
        }
        p.provider_id = this.data.id;
        let isEdit = !!p.id;
        if (!p.title || p.title.length < 2 || p.title.length > 20) {
          this.$message.warning("请填写2-20字符的案例名称！");
          return;
        }
        if (!p.logo) {
          this.$message.warning("请上传品牌logo");
          return;
        }
        if (!p.description || p.description.length < 100) {
          this.$message.warning("请填写100字符的案例描述");
          return;
        }
        // if (!p.file) {
        //   this.$message.warning('请上传案例附件')
        //   return
        // }
        let url = isEdit ? "/api/kaifawu/update_case" : "/api/kaifawu/store_case";
        this.$axios.post(url, p).then((res) => {
          if (Number(res.data.status) === 1) {
            this.dataItem.id = 4;
            if (!isEdit) {
              this.data.successful_case.push(this.dataItem);
            } else {
              this.getDraftInfo();
            }
            this.dataItem = {
              provider_id: 0,
              title: "",
              logo: "",
              description: "",
              file: "",
            };
            this.dialogVisible = false;
            this.fileList = [];
            this.$message.success(isEdit ? "更新成功" : "添加成功");
          }
        });
      },
      openEditCase(item) {
        this.dataItem = {
          ...item,
        };
        if (item.file) {
          this.fileList = [
            {
              name: "成功案例.pdf",
              url: item.file,
            },
          ];
        } else {
          this.fileList = [];
        }

        this.dialogVisible = true;
        console.log("openEditCase", this);
      },
      /** 获取草稿 **/
      getDraftInfo(isPreview) {
        this.$axios.get("/api/kaifawu/get_draft").then((res) => {
          if (Number(res.data.status) == 1 && res.data.data) {
            let data = res.data.data;
            if (!Array.isArray(data.successful_case)) {
              if (
                data.successful_case &&
                typeof data.successful_case === "object"
              ) {
                data.successful_case = [data.successful_case];
              } else {
                data.successful_case = [];
              }
            }

            data.city = Number(data.city);
            data.industry = Number(data.industry);
            data.tech_type = Number(data.tech_type);
            this.data = data;
            this.lastId=data.id;
          }
        });
      },
      /** 传入id后处理 **/
      getLastDetail() {
        this.drawer=false;
        this.$axios
          .post("/api/kaifawu/get_provider", {
            id: this.lastId,
            self: 1,
          })
          .then((res) => {
            if (Number(res.data.status) === 1) {
              let data = res.data.data;
              data.city = Number(data.city);
              data.industry = Number(data.industry);
              data.tech_type = Number(data.tech_type);
              if (!Array.isArray(data.successful_case)) {
                if (
                  data.successful_case &&
                  typeof data.successful_case === "object"
                ) {
                  data.successful_case = [data.successful_case];
                } else {
                  data.successful_case = [];
                }
              }
              this.data = data;
            }
          });
      },

      /** 存储草稿 **/
      async saveDraft(isPublish, isPreview) {
        let url = "/api/kaifawu/store";
        if (this.data.id) {
          url = "/api/kaifawu/publish";
        }
        let p = {
          ...this.data,
          publish: isPublish ? 1 : 0,
        };
        //服务名称
        if (!p.title) {
          this.$message.warning("请填写正确的服务名称（2-20字符）");
          return;
        }
        //所处行业
        if (!p.industry) {
          this.$message.warning("请选择所处行业");
          return;
        }
        //技术类型
        if (!p.tech_type) {
          this.$message.warning("请选择技术类型");
          return;
        }
        //缩略图
        if (!p.images) {
          this.$message.warning("请上传缩略图");
          return;
        }
        //方案简介
        if (
          !p.description ||
          p.description.length < 8 ||
          p.description.length > 255
        ) {
          this.$message.warning("请填写正确的方案简介（8-255字符）");
          return;
        }
        //方案简介
        if (!p.detail) {
          this.$message.warning("请填写方案介绍");
          return;
        }
        // 更改已有的时候发布，校验状态
        if (p.publish === 1 && this.lastId && Number(this.data.status) === 2) {
          this.$message.warning("该解决方案已发布，暂不允许修改");
          return;
        }
        let res = await this.$axios.post(url, p);
        if (Number(res.data.status) === 1) {
          if (!isPublish) {
            await this.getDraftInfo(isPreview);
            this.$message.success("保存草稿成功");
          } else {
            this.$message.success("提交成功");
            this.$emit('service_provider');
          }
          return true;
        }
      },
      /** 确认提交 **/
      submitAll() {
        this.saveDraft(true);
      },
      /** 预览 **/
      preview() {
        try {
          localStorage.setItem("kaifainPreviewData", JSON.stringify(this.data));
          window.open(`/kaifain/preview`, "_black");
        } catch (e) {
          console.log("");
        }
      },
      /** 预览 **/
      previewCase() {
        try {
          localStorage.setItem(
            "kaifainPreviewCaseData",
            JSON.stringify(this.dataItem)
          );
          window.open(`${this.kaifainUrl}/previewCase`, '_black')
        } catch (e) {
          console.log("");
        }
      },
      openNewUrl(item) {
        window.open(item.file, "__black");
      },
      jumpToOther() {
        let url = "https://kaifain.proginn.com/s/10";
        window.open(url, "__black");
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/kaifain/kaifainAdd.scss";
</style>
<style lang="scss">
  @import "../../assets/css/kaifain/kaifainAddNoScoped.scss";
</style>