multiSystemPlatformWeb.git

<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="800px"
        :before-close="handleClose"
    >
      <el-form :model="state.noticeForm" size="default" ref="noticeRef"
               :rules="title === '新增' || title === '编辑' ? state.formRules : {}" label-width="140px">
        <el-form-item v-if="state.isAdmin" label="单位：" prop="companyId">
          <el-select v-model="state.noticeForm.companyId" placeholder="请选择" clearable filterable style="width: 100%"
                     :disabled="title == '查看' || title == '编辑' || !state.isAdmin">
            <el-option
 
                v-for="item in state.companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位类型：" prop="companyType">
          <el-select v-model="state.noticeForm.companyType" placeholder="请选择" clearable filterable
                     style="width: 100%" :disabled="title == '查看'">
            <el-option :key="1" label="民营" :value="1"></el-option>
            <el-option :key="2" label="私营" :value="2"></el-option>
            <el-option :key="3" label="企事业单位" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行业：" prop="industry">
          <el-input v-model.trim="state.noticeForm.industry" :disabled="title === '查看'"/>
        </el-form-item>
        <el-form-item label="社会信用代码：" prop="legalPersonCode">
          <el-input v-model.trim="state.noticeForm.legalPersonCode" :disabled="title === '查看'"/>
        </el-form-item>
        <el-form-item label="法人代表：" prop="legalPerson">
          <el-input v-model.trim="state.noticeForm.legalPerson" :disabled="title === '查看'"/>
        </el-form-item>
        <el-form-item label="注册资本：" prop="registeredCapital">
          <el-input v-model.trim="state.noticeForm.registeredCapital" :disabled="title === '查看'"/>
        </el-form-item>
        <el-form-item label="总办公地址：" prop="officeAddress">
          <el-input v-model.trim="state.noticeForm.officeAddress" :rows="2" type="textarea"
                    :disabled="title === '查看'"/>
        </el-form-item>
        <el-form-item label="其他分场所地址：" prop="otherAddress">
          <el-input v-model.trim="state.noticeForm.otherAddress" :rows="3" type="textarea"
                    :disabled="title === '查看'"/>
        </el-form-item>
        <el-form-item label="单位概况简介:" v-if="showEditor" required>
          <t-editor style="width: 800px" ref="myEditor" :toolbar="toolbar"
                    :value="state.noticeForm.companySummary"></t-editor>
        </el-form-item>
        <el-form-item label="单位概况简介:" v-else>
          <div class="ql-container ql-snow" style="height: 500px;width: 100%;margin-top: 10px;">
            <div class="ql-editor">
              <div class="reviewTable" v-html="state.noticeForm.companySummary" @click="showFile($event)"></div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="营业执照:" prop="filePath" v-if="showEditor">
          <el-upload accept=".jpg,.jpeg,.png,.pdf" :action="state.uploadUrl" :headers="state.header" method="post"
                     :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile)" :on-exceed="showTip"
                     :limit='state.fileLimit' v-model:file-list="state.fileList" :before-upload="picSize"
                     :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles)">
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">尺寸小于5M，最多可上传1张</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="营业执照:" prop="filePath" v-else>
          <div v-if="state.fileType === 'pdf'" class="pdf-preview">
            <iframe
                :src="state.fileUrl"
                width="650px"
                height="800px"
            ></iframe>
          </div>
          <div v-else class="image-preview">
            <img :src="state.fileUrl" style="width:650px" alt="预览图片" class="preview-image"/>
          </div>
        </el-form-item>
      </el-form>
      <template #footer v-if="!isReview">
                    <span class="dialog-footer">
                        <el-button @click="handleClose" size="default">取 消</el-button>
                        <el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认</el-button>
                    </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {nextTick, onMounted, reactive, ref, toRefs, watch} from 'vue'
import WeEditor from "@/components/WeEditor/index.vue";
import TEditor from "@/components/Tinymce/Tinymce.vue"
import {ElMessage} from "element-plus";
import {addNotice, editNotice, getNoticeDetail} from "@/api/backManage/notice";
import axios from "axios";
import {getToken} from "@/utils/auth";
import {handleThemeStyle} from "@/utils/theme";
import useSettingsStore from "@/store/modules/settings";
import {addCom, editCom} from "@/api/companyInfo/overview";
import Cookies from "js-cookie";
import {getCompany} from "@/api/onlineEducation/company";
import {delPic} from "@/api/onlineEducation/banner";
 
 
const emit = defineEmits(["getList"]);
 
const dialogVisible = ref(false);
const title = ref("");
const toolbar = ref('fontsizeselect | undo redo')
const noticeRef = ref();
const fileList = ref([]);
const myEditor = ref();
const isReview = ref(false);
const showEditor = ref(true);
const state = reactive({
  noticeForm: {
    id: '',
    companySummary: '',
    companyId: null,
    companyName: '',
    filePath: '',
    fileName: '',
    companyType: null,
    industry: '',
    legalPersonCode: '',
    legalPerson: '',
    registeredCapital: '',
    officeAddress: '',
    otherAddress: ''
  },
  formRules: {
    companyId: [{required: true, message: '请选择单位', trigger: 'blur'}],
    companySummary: [{required: true, message: '单位概况', trigger: 'blur'}],
    filePath: [{required: true, message: '请上传营业执照', trigger: 'blur'}],
    companyType: [{required: true, message: '单位类型', trigger: 'blur'}],
    industry: [{required: true, message: '行业', trigger: 'blur'}],
    legalPersonCode: [{required: true, message: '证书编号', trigger: 'blur'}],
    legalPerson: [{required: true, message: '法人代表', trigger: 'blur'}],
    registeredCapital: [{required: true, message: '注册资本', trigger: 'blur'}],
    officeAddress: [{required: true, message: '总办公地址', trigger: 'blur'}]
  },
  isAdmin: false,
  companyList: [],
  uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile',
  header: {
    Authorization: getToken()
  },
  fileLimit: 1,
  fileList: [],
  fileType: '',
  fileUrl: ''
 
})
 
onMounted(() => {
});
const openDialog = async (type, value, companyList) => {
 
  const userInfo = JSON.parse(Cookies.get('userInfo'))
  state.isAdmin = userInfo.userType === 0;
  if (state.isAdmin) {
    state.companyList = companyList
  }
  isReview.value = false;
  showEditor.value = false
  title.value = type === 'add' ? '新增' : type === 'edit' ? '编辑' : '查看';
  if (type === 'edit' || type === 'review') {
    Object.keys(state.noticeForm).forEach(key => {
      if (key in value) {
        state.noticeForm[key] = value[key]
      }
    })
    state.noticeForm.companySummary = value.companySummary
    state.noticeForm.id = value.id
    if (state.isAdmin) {
      state.noticeForm.companyId = value.companyId
      state.noticeForm.companyName = value.companyName
    }
 
    if (value.filePath) {
      const obj = {
        url: value.filePath,
        name: value.fileName
      }
      state.fileType = value.fileName.split('.')[1]
      state.fileUrl = import.meta.env.VITE_APP_BASE_API + '/' + value.filePath
      state.fileList = [obj]
    }
  }
  if (type === 'review') {
    showEditor.value = false
    isReview.value = true;
  }
  if (type === 'edit' || type === 'add') {
    showEditor.value = true;
    isReview.value = false;
  }
  if (type === 'add') {
    reset()
  }
  dialogVisible.value = true;
}
const getEditorData = (val) => {
  state.noticeForm.companySummary = val;
}
 
const showFile = (e) => {
  if (e.target.nodeName === 'A') {
    console.log("e", e)
    e.preventDefault();
    const file = {
      fileUrl: e.target.href,
      fileName: e.target.innerHTML
    }
    axios.get(file.fileUrl, {
          headers:
              {
                'Content-Type': 'application/json',
                'Authorization': getToken(),
              },
          responseType: 'blob'
        }
    ).then(res => {
      if (res) {
        const link = document.createElement('a')
        let blob = new Blob([res.data], {type: res.data.type})
        link.style.display = "none";
        link.href = URL.createObjectURL(blob); // 创建URL
        link.setAttribute("download", file.fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        this.$message.error('获取文件失败')
      }
      // handleClose();
    })
  }
}
 
 
const onSubmit = async () => {
  state.noticeForm.companySummary = tinyMCE.activeEditor.getContent();
  if (!state.isAdmin) {
    const userInfo = JSON.parse(Cookies.get('userInfo'))
    state.noticeForm.companyId = userInfo.companyId
    state.noticeForm.companyName = userInfo.companyName
  }
  // // myEditor.value.submit();
  const valid = await noticeRef.value.validate();
  if (valid) {
    if (state.noticeForm.companySummary == "") {
      ElMessage({
        type: 'warning',
        message: '请输入单位概况'
      });
      return;
    }
    if (title.value === '新增') {
      const {id, ...data} = JSON.parse(JSON.stringify(state.noticeForm))
      const res = await addCom(data)
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: '新增成功'
        });
      } else {
        ElMessage.warning(res.message)
      }
      emit("getList")
      reset();
      showEditor.value = false
      myEditor.value.clear();
      noticeRef.value.clearValidate();
      dialogVisible.value = false;
    } else if (title.value === '编辑') {
      const {...data} = JSON.parse(JSON.stringify(state.noticeForm))
      const res = await editCom(data)
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: '编辑成功'
        });
      } else {
        ElMessage.warning(res.message)
      }
      emit("getList")
      reset();
      showEditor.value = false
      myEditor.value.clear();
      noticeRef.value.clearValidate();
      dialogVisible.value = false;
    }
  }
}
 
const selectValue = (val) => {
  state.companyList.forEach(item => {
    if (item.name === val) {
      state.noticeForm.companyId = item.id
    }
  })
}
const handleClose = () => {
  if (title.value === "新增" || title.value === '编辑') {
    myEditor.value.clear();
    showEditor.value = false
  }
 
  // reset()
  state.fileList = []
  state.companyList = []
  noticeRef.value.clearValidate();
  dialogVisible.value = false;
}
const reset = () => {
  state.noticeForm = {
    id: '',
    companySummary: '',
    companyId: null,
    companyName: '',
    filePath: '',
    fileName: '',
    companyType: null,
    industry: '',
    legalPersonCode: '',
    legalPerson: '',
    registeredCapital: '',
    officeAddress: '',
    otherAddress: ''
  }
  state.fileList = []
}
const handleAvatarSuccess = (res, uploadFile) => {
  if (res.code == 200) {
    state.noticeForm.fileName = res.data.originName
    state.noticeForm.filePath = res.data.path
  } else {
    state.fileList = []
    ElMessage({
      type: 'warning',
      message: '文件上传失败'
    })
  }
}
 
const showTip = () => {
  ElMessage({
    type: 'warning',
    message: '超出文件上传数量'
  });
}
const picSize = async (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage({
      type: 'warning',
      message: '文件大小不能超过5M'
    });
    return false
  }
};
const handleRemove = async (file, uploadFiles) => {
 
  let path = state.noticeForm.filePath;
  await delPic({path: path}).then(res => {
    if (res.code == 200) {
      // ElMessage({
      //   type: 'success',
      //   message: '文件已删除'
      // })
      state.noticeForm.filePath = ''
      state.noticeForm.fileName = ''
    } else {
      ElMessage({
        type: 'warning',
        message: res.message
      })
    }
  }).catch(() => {
    state.noticeForm.filePath = ''
  });
}
 
 
defineExpose({
  openDialog
});
 
</script>
 
<style scoped lang="scss">
.notice {
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
 
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
 
.reviewTable {
  :deep(table) {
    border: 1px solid #ccc;
    text-align: center;
  }
 
  :deep(table td) {
    border: 1px solid #ccc;
    text-align: center;
    padding: 0 5px;
  }
 
  :deep(table th) {
    border: 1px solid #ccc;
  }
}
 
 
</style>