1、厦门海嘉成-关于我们基础信息

src/api/XMHJC/aboutUs.js

@@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+export function getFileList(data) {
+    return request({
+        url: '/fileInfo/getList',
+        method: 'post',
+        data: data
+    })
+}
+export function getAboutUsBaseInfo(data) {
+    return request({
+        url: '/aboutUsBaseInfo/detailDefault',
+        method: 'post',
+        data: data
+    })
+}
+
+export function saveAboutUsBaseInfo(data) {
+    return request({
+        url: '/aboutUsBaseInfo/add',
+        method: 'post',
+        data: data
+    })
+}
+export function updateAboutUsBaseInfo(data) {
+    return request({
+        url: '/aboutUsBaseInfo/edit',
+        method: 'post',
+        data: data
+    })
+}

src/views/XMHJC/aboutUs/basic/index.vue

@@ -1,13 +1,324 @@
 <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>
-export default {
-  name: "index"
+<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 {getAboutUsBaseInfo, getFileList, saveAboutUsBaseInfo, updateAboutUsBaseInfo} 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" }],
+  companyCover: [{ required: true, message: "请上传公司简介图片", trigger: "blur" }],
+  companyProfile: [{ 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 proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadDataOne.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.fileUrl;
+  return true;
+};
+
+const uploadDataTwo = ref({});
+const uploadFileTwo = async (file) => {
+  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
+  uploadDataTwo.value = res.uploadBody;
+  file.id = res.id;
+  file.fileName = res.fileName;
+  file.fileUrl = res.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)){
+      saveAboutUsBaseInfo(formData.data).then(response => {
+        ElMessage({
+          message: "编辑成功",
+          type: "success",
+        });
+        submitLoading.value = false;
+      }).catch(()=>{
+        submitLoading.value = false;
+      });
+    }else {
+      updateAboutUsBaseInfo(formData.data).then(response => {
+        ElMessage({
+          message: "编辑成功",
+          type: "success",
+        });
+        submitLoading.value = false;
+      }).catch(()=>{
+        submitLoading.value = false;
+      });
+    }
+};
+
+
+
+getInfo();
+
 </script>
 
-<style scoped>
+<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);
+}
 
-</style>
+.ql-editor {
+  padding: 0px;
+}
+</style>