xmhjc-front-end/src/views/XMHJC/aboutUs/basic/index.vue

<template>
  <div class="tenant" :loading="loading">
    <div
        style="padding: 20px 20px 0 20px; background: #fff; margin-bottom: 80px"
    >
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
        <template #companyCover>
          <el-row style="width: 100%">
            <el-col :span="6">
              <el-form-item  prop="companyCover">
                <el-upload
                    class="avatar-uploader"
                    action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                    :data="uploadDataOne"
                    :show-file-list="false"
                    accept=".gif, .jpeg, .jpg, .png"
                    :on-success="companyCoverListSuccess"
                    :before-upload="uploadFileOne">
                  <el-image
                      v-if="formData.data.companyCoverList && formData.data.companyCoverList.length > 0"
                      :src="formData.data.companyCoverList[0].fileUrl"
                      fit="scale-down"
                      class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <el-button
                    class="delete-btn"
                    type="danger"
                    v-if="formData.data.companyCoverList && formData.data.companyCoverList.length > 0"
                    @click="formData.data.companyCoverList = []">
                  删除
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template #gzhQrCode>
          <el-row style="width: 100%">
            <el-col :span="6">
              <el-form-item  prop="gzhQrCode">
                <el-upload
                    class="avatar-uploader"
                    action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
                    :data="uploadDataTwo"
                    :show-file-list="false"
                    accept=".gif, .jpeg, .jpg, .png"
                    :on-success="gzhQrCodeListSuccess"
                    :before-upload="uploadFileTwo">
                  <el-image
                      v-if="formData.data.gzhQrCodeList && formData.data.gzhQrCodeList.length > 0"
                      :src="formData.data.gzhQrCodeList[0].fileUrl"
                      fit="scale-down"
                      class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <el-button
                    class="delete-btn"
                    type="danger"
                    v-if="formData.data.gzhQrCodeList && formData.data.gzhQrCodeList.length > 0"
                    @click="formData.data.gzhQrCodeList = []">
                  删除
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template #companyProfile>
          <div style="width: 100%" v-if="!loading">
            <TinymceEditor
                :value="formData.data.companyProfile"
                @updateValue="updateHandover"
                ref="contentEditor"
            />
          </div>
        </template>
      </byForm>
    </div>
    <div style="width: 100%;padding: 0 58px 0px 0px;  position: fixed;bottom: 0 ;">
      <div style="width: 100%;padding: 20px 20px 20px 20px;background: #fff;">

        <div style="text-align: center">
          <el-button type="primary" v-no-double-click="submitForm" size="large" :loading="submitLoading">确 定</el-button>
        </div>
      </div>

    </div>

  </div>
</template>

<script setup>
import byForm from "@/components/byForm/index";
import {computed, reactive, ref} from "vue";
const { proxy } = getCurrentInstance();
import Editor from "@/components/Editor/index.vue";
import TinymceEditor from "@/components/Editor/TinymceEditor.vue";
import {
  addAboutUsBaseInfo,
  editAboutUsBaseInfo,
  getAboutUsBaseInfo,
  getFileList, getFileStr,
} from "@/api/XMHJC/aboutUs";
import {ElMessage} from "element-plus";
import {isNullOrUndefined} from "@tinymce/tinymce-vue/lib/es2015/main/ts/Utils";
import {updateUserPwd} from "@/api/system/user";

const loading = ref(false);
const submitLoading = ref(false);

let rules = ref({
  mobileOne: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
  mobileTwo: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  email: [{ required: true, message: "请输入电子邮件", trigger: "blur" }],
  filingNumber: [{ required: true, message: "请输入备案号", trigger: "blur" }],
});



let formData = reactive({
  data: {
    companyCoverList: [],
    gzhQrCodeList: [],
    companyProfile:''
  },
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formConfig = computed(() => {
  return [

    {
      type: "input",
      prop: "mobileOne",
      label: "联系方式1",
      required: true,
    },
    {
      type: "input",
      prop: "mobileTwo",
      label: "联系方式2",
      required: true,
    },
    {
      type: "input",
      prop: "address",
      label: "公司地址",
      required: true,
    },
    {
      type: "input",
      prop: "email",
      label: "电子邮件",
      required: true,
    },
    {
      type: "input",
      prop: "filingNumber",
      label: "备案号",
      required: true,
    },
    {
      type: "slot",
      slotName: "companyCover",
      prop: "companyCover",
      label: "公司简介图片",
    },
    {
      type: "slot",
      slotName: "gzhQrCode",
      prop: "gzhQrCode",
      label: "公众号二维码",
    },
    {
      type: "slot",
      slotName: "companyProfile",
      prop: "companyProfile",
      label: "公司简介",
    },
  ];
});


const uploadDataOne = ref({});
const uploadFileOne = async (file) => {
  const res = await getFileStr( { fileName: file.name });
  uploadDataOne.value = res.data.uploadBody;
  file.id = res.data.id;
  file.fileName = res.data.fileName;
  file.fileUrl = res.data.fileUrl;
  return true;
};

const uploadDataTwo = ref({});
const uploadFileTwo = async (file) => {
  const res = await getFileStr( { fileName: file.name });
  uploadDataTwo.value = res.uploadBody;
  file.id = res.data.id;
  file.fileName = res.data.fileName;
  file.fileUrl = res.data.fileUrl;
  return true;
};

const companyCoverListSuccess = (response, uploadFile) => {
  formData.data.companyCoverList = [
    {
      id: uploadFile.raw.id,
      fileName: uploadFile.raw.fileName,
      fileUrl: uploadFile.raw.fileUrl,
    },
  ];
};
const gzhQrCodeListSuccess = (response, uploadFile) => {
  formData.data.gzhQrCodeList = [
    {
      id: uploadFile.raw.id,
      fileName: uploadFile.raw.fileName,
      fileUrl: uploadFile.raw.fileUrl,
    },
  ];
};

const updateHandover = (val) => {
  formData.data.companyProfile = val;
};




const getInfo = async () => {
  loading.value = true;
  const response = await getAboutUsBaseInfo({})
  formData.data = response.data;

  const resFile = await getFileList({businessIdList: [response.data.id], fileType: 1})
  formData.data.companyCoverList = resFile.data[response.data.id];
  const resFile1 = await getFileList({businessIdList: [response.data.id], fileType: 2})
  formData.data.gzhQrCodeList = resFile1.data[response.data.id];

  loading.value = false;
}

const submitForm = () => {
    if (!formData.data.companyCoverList) {
      ElMessage({message: "请上传公司简介图片",type: "error",});
      return
    }
    if (!formData.data.gzhQrCodeList) {
      ElMessage({message: "请上传公众号图片",type: "error",});
      return
    }
    if (!formData.data.companyProfile) {
      ElMessage({message: "请上传公司简介",type: "error",});
      return
    }
    submitLoading.value = true;
    if (isNullOrUndefined(formData.data.id)){
      addAboutUsBaseInfo(formData.data).then(response => {
        ElMessage({
          message: "编辑成功",
          type: "success",
        });
        submitLoading.value = false;
      }).catch(()=>{
        submitLoading.value = false;
      });
    }else {
      editAboutUsBaseInfo(formData.data).then(response => {
        ElMessage({
          message: "编辑成功",
          type: "success",
        });
        submitLoading.value = false;
      }).catch(()=>{
        submitLoading.value = false;
      });
    }
};


getInfo();

</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
  .delete-btn{
    margin-top: 10px;
    margin-left: 25px;
  }
}
.avatar-uploader .avatar {
  width: 110px;
  height: 110px;
  display: block;
  background-color: black;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
}

.ql-editor {
  padding: 0px;
}
</style>