epmet-oper-gov-yifengdian/src/views/modules/communityParty/keyEnterprises/dialogForm.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <el-form
        ref="ref_form"
        :inline="true"
        :model="formData"
        :rules="dataRule"
        class="form"
      >
        <el-form-item label="企业名称" prop="name" label-width="150px">
          <el-input
            class="item_width_1"
            placeholder="请输入"
            v-model="formData.name"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="企业类型" prop="type" label-width="150px">
          <el-select
            class="item_width_1"
            placeholder="请选择"
            v-model="formData.type"
          >
            <el-option
              v-for="item in types"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts" label-width="150px">
          <el-input
            class="item_width_1"
            placeholder="请输入"
            v-model="formData.contacts"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone" label-width="150px">
          <el-input
            class="item_width_1"
            placeholder="请输入"
            v-model="formData.phone"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address" label-width="150px">
          <el-input
            class="item_width_1"
            placeholder="请输入"
            v-model="formData.address"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="网址" prop="url" label-width="150px">
          <el-input
            class="item_width_1"
            placeholder="请输入"
            v-model="formData.url"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="mailbox" label-width="150px">
          <el-input
            class="item_width_1"
            placeholder="请输入"
            v-model="formData.mailbox"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="总结" prop="summary" label-width="150px">
          <el-input
            class="item_width_1"
            type="textarea"
            placeholder="请输入"
            v-model="formData.summary"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction" label-width="150px">
          <el-input
            class="item_width_1"
            type="textarea"
            placeholder="请输入"
            v-model="formData.introduction"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="荣誉资质" prop="honor" label-width="150px">
          <!-- <Tinymce
            class="tinymce_view"
            v-model="formData.honor"
            :height="300"
            placeholder="在这里输入文字"
          /> -->
          <div class="imgs-list">
            <div class="imgs-item" v-for="item in formData.honor" :key="item">
              <el-image
                style="width: 100px; height: 100px"
                :src="item"
                fit="fill"
              ></el-image>
              <i class="el-icon-delete" @click="deleteImgs(item, 'honor')"></i>
            </div>
            <el-upload
              :headers="$getElUploadHeaders()"
              class="avatar-uploader"
              :action="uploadUlr"
              :data="{ customerId: customerId }"
              :show-file-list="false"
              :on-progress="handleProgress"
              :on-success="handleImgSuccess1"
              :before-upload="beforeImgUpload"
            >
              <el-progress
                v-if="uploading"
                :width="100"
                type="circle"
                :percentage="unloadPencent"
              ></el-progress>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="企业展示" prop="display" label-width="150px">
          <div class="imgs-list">
            <div class="imgs-item" v-for="item in formData.display" :key="item">
              <el-image
                style="width: 100px; height: 100px"
                :src="item"
                fit="fill"
              ></el-image>
              <i
                class="el-icon-delete"
                @click="deleteImgs(item, 'display')"
              ></i>
            </div>
            <el-upload
              :headers="$getElUploadHeaders()"
              class="avatar-uploader"
              :action="uploadUlr"
              :data="{ customerId: customerId }"
              :show-file-list="false"
              :on-progress="handleProgress"
              :on-success="handleImgSuccess2"
              :before-upload="beforeImgUpload"
            >
              <el-progress
                v-if="uploading"
                :width="100"
                type="circle"
                :percentage="unloadPencent"
              ></el-progress>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <!-- <el-form-item label="公司产品" prop="product" label-width="150px">
          <Tinymce
            class="tinymce_view"
            v-model="formData.product"
            :height="300"
            placeholder="在这里输入文字"
          />
        </el-form-item> -->
        <el-form-item label="产业监控" prop="monitor" label-width="150px">
          <div class="imgs-list">
            <div class="imgs-item" v-for="item in formData.monitor" :key="item">
              <el-image
                style="width: 100px; height: 100px"
                :src="item"
                fit="fill"
              ></el-image>
              <i
                class="el-icon-delete"
                @click="deleteImgs(item, 'monitor')"
              ></i>
            </div>
            <el-upload
              :headers="$getElUploadHeaders()"
              class="avatar-uploader"
              :action="uploadUlr"
              :data="{ customerId: customerId }"
              :show-file-list="false"
              :on-progress="handleProgress"
              :on-success="handleImgSuccess3"
              :before-upload="beforeImgUpload"
            >
              <el-progress
                v-if="uploading"
                :width="100"
                type="circle"
                :percentage="unloadPencent"
              ></el-progress>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item
          label="排序"
          prop="sort"
          label-width="150px"
          style="display: block"
        >
          <el-input-number
            class="item_width_1"
            placeholder="请输入"
            v-model="formData.sort"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="封面" prop="cover" label-width="150px">
          <div class="imgs-list">
            <div class="imgs-item" v-if="formData.cover">
              <el-image
                style="width: 100px; height: 100px"
                :src="formData.cover"
                fit="fill"
              ></el-image>
              <i class="el-icon-delete" @click="formData.cover = null"></i>
            </div>
            <el-upload
              :headers="$getElUploadHeaders()"
              class="avatar-uploader"
              :action="uploadUlr"
              :data="{ customerId: customerId }"
              :show-file-list="false"
              :on-progress="handleProgress"
              :on-success="handleImgSuccess"
              :before-upload="beforeImgUpload"
            >
              <el-progress
                v-if="uploading"
                :width="100"
                type="circle"
                :percentage="unloadPencent"
              ></el-progress>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div class="div_btn">
      <el-button size="small" @click="handleCancle">取 消</el-button>
      <el-button size="small" type="primary" @click="handleComfirm">
        确 定
      </el-button>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost, requestGet } from "@/js/dai/request";
import Tinymce from "@c/tinymce2/index.vue";

let loading; // 加载动画
export default {
  data() {
    return {
      formType: "add", //表单操作类型 add新增，edit编辑，detail详情
      loading: false,
      formData: {
        name: null,
        content: null,
        cover: "",
        monitor: [],
        display: [],
        honor: [],
      },
      types: [
        {
          label: "高端科技人才",
          value: "1",
        },
        {
          label: "土秀才田专家",
          value: "2",
        },
      ],
      unloadPencent: 0,
      customerId: "",
      uploading: false,
      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
    };
  },
  components: { Tinymce },
  mounted() {
    // this.initMap()
  },
  created() {
    this.customerId = localStorage.getItem("customerId");
  },
  methods: {
    async initForm(type, id) {
      this.startLoading();
      this.formType = type;
      this.resetData();
      if (id) {
        const { data, code, msg } = await requestGet(
          `/resi/partymember/icseedcompany/${id}`
        );
        if (code === 0) {
          this.formData = {
            ...data,
            monitor: data.monitor ? JSON.parse(data.monitor) : [],
            display: data.display ? JSON.parse(data.display) : [],
            honor: data.honor ? JSON.parse(data.honor) : [],
          };
        } else {
          this.$message.error(msg);
        }
      }
      //获取服务事项
      this.endLoading();
    },
    async handleComfirm() {
      this.btnDisable = true;
      setTimeout(() => {
        this.btnDisable = false;
      }, 10000);
      this.$refs["ref_form"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
          this.btnDisable = false;
        } else {
          this.addActivity();
        }
      });
    },
    async addActivity() {
      let url = "/resi/partymember/icseedcompany";
      const params = {
        ...this.formData,
        monitor: JSON.stringify(this.formData.monitor),
        display: JSON.stringify(this.formData.display),
        honor: JSON.stringify(this.formData.honor),
      };
      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.resetData();
        this.$emit("dialogOk");
        this.btnDisable = false;
      } else {
        this.btnDisable = false;
        this.$message.error(msg);
      }
    },
    deleteImgs(url, type) {
      this.formData[type] = this.formData[type].filter((item) => item != url);
    },
    handleCancle() {
      this.resetData();
      this.$emit("dialogCancle");
    },

    beforeImgUpload(file) {
      const isPNG = file.type === "image/png" || file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!isPNG) {
        this.$message.error("上传图片只能是 PNG 或 JPEG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isPNG && isLt1M;
    },
    handleImgSuccess(res, file) {
      if (res.code === 0 && res.msg === "success") {
        this.uploading = false;
        this.unloadPencent = 0;
        this.formData.cover = res.data.url;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleImgSuccess1(res, file) {
      if (res.code === 0 && res.msg === "success") {
        this.uploading = false;
        this.unloadPencent = 0;
        if (this.formData.honor) {
          this.formData.honor = [...this.formData.honor, res.data.url];
        } else {
          this.formData.honor = [res.data.url];
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    handleImgSuccess2(res, file) {
      if (res.code === 0 && res.msg === "success") {
        this.uploading = false;
        this.unloadPencent = 0;
        if (this.formData.display) {
          this.formData.display = [...this.formData.display, res.data.url];
        } else {
          this.formData.display = [res.data.url];
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    handleImgSuccess3(res, file) {
      if (res.code === 0 && res.msg === "success") {
        this.uploading = false;
        this.unloadPencent = 0;
        if (this.formData.monitor) {
          this.formData.monitor = [...this.formData.monitor, res.data.url];
        } else {
          this.formData.monitor = [res.data.url];
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    handleProgress(event, file, fileList) {
      this.uploading = true;
      this.unloadPencent = Number(file.percentage.toFixed(0));
    },
    resetData() {
      this.formData = {
        name: null,
        type: null,
      };
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      loading.close();
    },
  },
  computed: {
    dataRule() {
      return {
        name: [
          { required: true, message: "企业名称不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "企业类型不能为空", trigger: "blur" },
        ],
      };
    },
  },
  props: {
    types: {
      type: Array,
      default: null,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/visual/communityManageForm.scss";
</style>
<style lang="scss" scoped>
.item_width_1 {
  width: 560px;

  /deep/.tox .tox-dialog {
    z-index: 20000;
  }
}
.tinymce_view {
  ::v-deep .tox .tox-dialog {
    z-index: 2000000000;
  }
}

.imgs-list {
  width: 700px;
  display: flex;
  align-items: center;
  .imgs-item {
    position: relative;
    margin-right: 10px;
    .el-icon-delete {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 18px;
      color: red;
      z-index: 3;
      cursor: pointer;
    }
  }
}

.div_map {
  position: relative;
}

.div_searchmap {
  z-index: 5000;
  position: absolute;
  top: 5px;
  left: 5px;
}

.tinymce_view {
  height: 400px;
  overflow: auto;
}

.text_p {
  margin: 0;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  > p {
    margin: 0;
  }
}

.avatar-uploader {
  ::v-deep .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
</style>