修改

zhouwx

4 天以前 7ebf2fe13529c4c471d601fc8104f450deeda8f1

 src/views/build/conpanyFunctionConsult/companyInfo/overview/components/overviewDialog.vue

@@ -1,52 +1,96 @@
<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="110px" >
              <el-form-item label="企业名称:" prop="companyName" v-if="state.isAdmin">
                <el-select
                    v-model="state.noticeForm.companyName"
                    filterable
                    remote
                    :disabled="title == '查看' || !state.isAdmin"
                    @change="selectValue"
                    reserve-keyword
                    placeholder="请输入企业名称"
                    remote-show-suffix
                    :remote-method="getCompanyList"
                    style="width: 100%"
                >
                  <el-option
                      v-for="item in state.companyList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                  />
                </el-select>
              </el-form-item>
                <el-form-item label="企业概括:" v-if="showEditor"  required>
                    <t-editor style="width: 800px" ref="myEditor" :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>
            <template #footer v-if="!isReview">
  <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>
                        <el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认</el-button>
                    </span>
            </template>
        </el-dialog>
    </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {nextTick, onMounted, reactive, ref, toRefs, watch} from 'vue'
@@ -61,228 +105,323 @@
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: ''
    },
    formRules:{
      companyName: [{ required: true, message: '请选择企业', trigger: 'blur' }],
      companySummary: [{ required: true, message: '企业概况', trigger: 'blur' }],
    },
  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: []
  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) => {
    const userInfo = JSON.parse(Cookies.get('userInfo'))
    state.isAdmin = userInfo.userType === 0;
    isReview.value = false;
    showEditor.value = false
    title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑' : '查看' ;
    if(type === 'edit' || type === 'review') {
      state.noticeForm.companySummary = value.companySummary
      state.noticeForm.id = value.id
      if(state.isAdmin){
        state.noticeForm.companyId = value.companyId
        state.noticeForm.companyName = value.companyName
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(type === 'review') {
        showEditor.value = false
        isReview.value = true;

    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 === 'edit' || type === 'add') {
        showEditor.value = true;
        isReview.value = false;
    }
    if(type === 'add'){
        reset()
    }
  }
  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 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
  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'
        }
        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();
        })
    }
    ).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 getCompanyList = async (val)=>{
  if(val != ""){
    const queryParams = {
      name: val
    }
    const res = await getCompany(queryParams)
    if (res.code == 200) {
      state.companyList = res.data.list

    } else {
      ElMessage.warning(res.message)

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 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){
    if (item.name === val) {
      state.noticeForm.companyId = item.id
    }
  })
}
const handleClose = () => {
    if(title.value ==="新增"|| title.value ==='编辑'){
        myEditor.value.clear();
        showEditor.value=false
    }
  if (title.value === "新增" || title.value === '编辑') {
    myEditor.value.clear();
    showEditor.value = false
  }

    // reset()
    state.companyList = []
    noticeRef.value.clearValidate();
    dialogVisible.value = false;
  // reset()
  state.fileList = []
  state.companyList = []
  noticeRef.value.clearValidate();
  dialogVisible.value = false;
}
const reset = () => {
    state.noticeForm = {
      id: '',
      companySummary: '',
      companyId:null,
      companyName: ''
    }
  state.companyList = []
  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
  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;
    }
.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;
    }
  :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;
  }
}