修改新增

祖安之光

2025-12-03 9674af17d8e7ad8f85c9df3b89d99a71d7e39268

修改新增

 public/qualityFile.docx

Binary files differ

 src/api/standardSys/standardSys.js

@@ -103,3 +103,27 @@
        method: 'get'
    })
}

export function getProductServiceList(params) {
    return request({
        url: '/system/productService/selectProductServiceList',
        method: 'get',
        params: params
    })
}

export function saveProductService(data) {
    return request({
        url: '/system/productService/saveProductService',
        method: 'post',
        data: data
    })
}

export function delProductService(params) {
    return request({
        url: '/system/productService/delProductService',
        method: 'get',
        params: params
    })
}

 src/views/build/conpanyFunctionConsult/digitalFileDep/manageType/qualityManual/components/exportDoc.js

@@ -271,12 +271,103 @@
    }
    return bytes.buffer;
}

function getDimensionsFromBase64Sync(base64Str) {
    try {
        // 去除 data:image/...;base64, 前缀
        const base64Data = base64Str.replace(/^data:image\/\w+;base64,/, '');

        // 将base64转换为二进制
        const binaryString = atob(base64Data);
        const bytes = new Uint8Array(binaryString.length);
        for (let i = 0; i < binaryString.length; i++) {
            bytes[i] = binaryString.charCodeAt(i);
        }

        return parseImageDimensions(bytes);
    } catch (error) {
        console.warn('解析图片尺寸失败:', error);
        return { width: 600, height: 400 };
    }
}

function parseImageDimensions(bytes) {
    if (bytes.length < 8) {
        return { width: 600, height: 400 };
    }

    // 检查 PNG 格式 (89 50 4E 47 0D 0A 1A 0A)
    if (bytes[0] === 0x89 && bytes[1] === 0x50 &&
        bytes[2] === 0x4E && bytes[3] === 0x47) {
        return parsePNGDimensions(bytes);
    }

    // 检查 JPEG 格式 (FF D8)
    if (bytes[0] === 0xFF && bytes[1] === 0xD8) {
        return parseJPEGDimensions(bytes);
    }

    return { width: 600, height: 400 };
}

// 解析 PNG 尺寸
function parsePNGDimensions(bytes) {
    // PNG 的宽高在 IHDR chunk 中（偏移 16-24 字节）
    if (bytes.length >= 24) {
        const view = new DataView(bytes.buffer);
        const width = view.getUint32(16, false);  // 大端序
        const height = view.getUint32(20, false);
        return { width, height };
    }
    return { width: 600, height: 400 };
}

// 解析 JPEG 尺寸
function parseJPEGDimensions(bytes) {
    let i = 2; // 跳过 FFD8

    while (i < bytes.length - 1) {
        // JPEG 标记开始
        if (bytes[i] === 0xFF) {
            const marker = bytes[i + 1];

            // SOF0, SOF1, SOF2 (Start of Frame markers)
            if ((marker >= 0xC0 && marker <= 0xC3) ||
                (marker >= 0xC5 && marker <= 0xC7) ||
                (marker >= 0xC9 && marker <= 0xCB) ||
                (marker >= 0xCD && marker <= 0xCF)) {

                if (i + 7 < bytes.length) {
                    const height = (bytes[i + 5] << 8) | bytes[i + 6];
                    const width = (bytes[i + 7] << 8) | bytes[i + 8];
                    return { width, height };
                }
                break;
            }

            // 跳过当前段
            const length = (bytes[i + 2] << 8) | bytes[i + 3];
            i += length + 2;
        } else {
            i++;
        }
    }

    return { width: 600, height: 400 };
}

const imageOptions = {
    getImage(tagValue) {
        return base64Parser(tagValue);
    },
    getSize(img, tagValue, tagName, context) {
        return [600, 600];
        const dimensions = getDimensionsFromBase64Sync(tagValue);
        const { width, height } = dimensions;
        const targetWidth = 600;
        const scale = targetWidth / width;
        let targetHeight = height * scale;
        targetHeight = Math.max(100, Math.min(700, targetHeight));
        return [targetWidth, Math.round(targetHeight)];
    },
};

@@ -309,11 +400,27 @@
    //     data.departmentsTable = processTableHtml(tableHtml);
    // }

    // 生成表格XML
    // if (data.clauses && data.duties) {
    //     data.tableXML = generateTableXML(data.clauses, data.duties);
    // }
    if (data.productServiceImages && Array.isArray(data.productServiceImages)) {
        // 确保是纯 base64 字符串数组
        data.productServiceImageArray = data.productServiceImages.map(item =>
            typeof item === 'object' ? item.image : item
        ).filter(img => img && typeof img === 'string');

        // 为前10张图片创建单独的图片变量
        data.productServiceImageArray.slice(0, 10).forEach((img, index) => {
            data[`productServiceImage${index + 1}`] = img;
        });

        // 创建带元数据的对象数组
        data.productServiceImageObjects = data.productServiceImageArray.map((img, index) => ({
            image: img,  // 这个字段会作为图片插入
            index: index + 1,
            description: `产品和服务实现过程图 ${index + 1}`
        }));

        data.productServiceCount = data.productServiceImageArray.length;
        data.hasProductServiceImages = data.productServiceImageArray.length > 0;
    }
    // 处理富文本字段（如果有）
    if (data.summaries && typeof data.summaries === 'string') {
        data.summaries = processRichText(data.summaries);

 src/views/build/conpanyFunctionConsult/digitalFileDep/manageType/qualityManual/index.vue

@@ -243,6 +243,7 @@
        templateName: item.templateName
      }
    }) || []
    data.companyInfo.productServiceImages = res.data.productServiceDatas ? await processImagesToBase64(res.data.productServiceDatas): []
  }else{
    ElMessage.warning(res.message)
  }
@@ -303,6 +304,57 @@
  };
}

// 新增：将图片URL转换为Base64
async function urlToBase64(imageUrl) {
  return new Promise((resolve, reject) => {
    // 如果是相对路径，添加基础URL
    let fullUrl = imageUrl;
    if (!imageUrl.startsWith('http')) {
      fullUrl = import.meta.env.VITE_APP_BASE_API + '/' + imageUrl;
    }
    const xhr = new XMLHttpRequest();
    xhr.open('GET', fullUrl, true);
    xhr.responseType = 'blob';

    xhr.onload = function() {
      if (this.status === 200) {
        const blob = this.response;
        const reader = new FileReader();
        reader.onloadend = function() {
          resolve(reader.result); // 返回base64字符串
        };
        reader.onerror = reject;
        reader.readAsDataURL(blob);
      } else {
        reject(new Error(`图片加载失败: ${this.status}`));
      }
    };
    xhr.onerror = reject;
    xhr.send();
  });
}

// 新增：处理图片数组
async function processImagesToBase64(imageUrls) {
  try {
    const base64Images = [];
    for (const url of imageUrls) {
      try {
        const base64 = await urlToBase64(url);
        base64Images.push(base64);
      } catch (error) {
        console.warn(`无法加载图片 ${url}:`, error);
        // 可以添加一个占位图片或跳过
        base64Images.push('');
      }
    }
    return base64Images;
  } catch (error) {
    console.error('处理图片失败:', error);
    return [];
  }
}

const initFile = async (val) => {
  data.companyInfo = {}
  loading.value = true

 src/views/work/productAndService/components/editDialog.vue

对比新文件
@@ -0,0 +1,229 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="state.title"
        width="700px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-form :model="state.form" size="default" ref="superRef" :rules="state.formRules" label-width="200px" >
        <el-form-item v-if="state.isAdmin" label="单位：" prop="companyId">
          <el-select v-model="state.form.companyId" placeholder="请选择" clearable>
            <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="fileUrl">
          <el-upload accept="image/*" :action="state.uploadUrl" :disabled="state.title =='查看'" :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">支持上传图片格式，尺寸小于30M，最多可上传15份</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer v-if="state.title !='查看'">
        <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 {reactive, ref, toRefs, defineEmits, nextTick, onMounted} from 'vue'
import {ElMessage} from "element-plus";
import {addUser, editUser, getUserById, resetPwd} from "@/api/onlineEducation/user"
import {Base64} from "js-base64"
import {getCompany} from "@/api/onlineEducation/company";
import {addIndustryTemp, updateIndustryTemp, updateInfoPlatforms} from "@/api/staffManage/staff";
import {getToken} from "@/utils/auth";
import {delPic} from "@/api/onlineEducation/banner";
import {saveProductService, saveStandardTemp, updateStandardTemp} from "@/api/standardSys/standardSys";

const emit = defineEmits(["getList"]);
const dialogVisible = ref(false)
const superRef = ref()
const checkFiles = (rule, value, callback) => {
  if (state.fileList.length == 0) {
    callback(new Error('请上传文件'))
  } else {
    callback()
  }
}
const state = reactive({
  title: '',
  form: {
    id: null,
    fileUrl: [],
    companyId: null
  },
  formRules:{
    companyId: [{ required: true, message: '请选择单位', trigger: 'blur' }],
    fileUrl: [{ required: true, validator: checkFiles, trigger: 'blur' }]
  },
  isAdmin: false,
  companyList: [],
  uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile',
  header: {
    Authorization: getToken()
  },
  fileLimit: 15,
  fileList: []
})
onMounted(() => {

});

const openDialog = async (type, value,companyId, isAdmin, companyList) => {
  state.isAdmin = isAdmin
  if(isAdmin){
    state.companyList = companyList
  }
  state.title = type === 'add' ? '新增' : type ==='edit' ? '编辑' : '查看'
  state.form.companyId = companyId
  if(state.title == '编辑'||state.title == '查看'){
    Object.keys(state.form).forEach(key => {
      if (key in value) {
        state.form[key] = value[key]
      }
    })
    if(!value.fileUrl || value.fileUrl == ''){
      state.form.fileUrl = []
    }else{
      const certificatePaths = value.fileUrl.split(',')
      state.form.fileUrl = certificatePaths
      state.fileList = certificatePaths.map((path, index) => {
        const fileName = path.split('/').pop() || `文件${index + 1}`
        return {
          name: fileName,
          url: path,
          response: {
            data: {
              path: path,
              fileName: fileName
            }
          },
          status: 'success',
          uid: Date.now() + index
        }
      })
    }
  }
  dialogVisible.value = true
}


const onSubmit = async () => {
  const valid = await superRef.value.validate();
  if(valid){
    if(state.title == '新增'){
      const {id,...data} = state.form
      data.fileUrl = state.fileList
          .filter(file => file.response?.data?.path)
          .map(file => file.response.data.path).join(',')
      const res = await saveProductService(data)
      if(res.code == 200){
        ElMessage.success(res.message)
        emit('getList')
        handleClose()
        dialogVisible.value = false;
      }else{
        ElMessage.warning(res.message)
      }
    }else{
      state.form.fileUrl = state.fileList
          .filter(file => file.response?.data?.path)
          .map(file => file.response.data.path)
          .join(',')
      const res = await saveProductService(state.form)
      if(res.code == 200){
        ElMessage.success(res.message)
        emit('getList')
        handleClose()
        dialogVisible.value = false;
      }else{
        ElMessage.warning(res.message)
      }
    }
  }
}

const handleAvatarSuccess = (response, uploadFile) => {
  if(response.code === 200){
    // 设置文件显示名称
    uploadFile.name = response.data.fileName || `文件${state.fileList.length}`
    uploadFile.url = response.data.url || response.data.path
    ElMessage.success('文件上传成功')
  } else {
    const index = state.fileList.findIndex(file => file.uid === uploadFile.uid)
    if (index > -1) {
      state.fileList.splice(index, 1)
    }
    ElMessage.error(response.message || '文件上传失败')
  }
}

const showTip =()=>{
  ElMessage({
    type: 'warning',
    message: '超出文件上传数量'
  });
}
const picSize = async (rawFile) => {
  if(rawFile.size / 1024 / 1024 > 30){
    ElMessage({
      type: 'warning',
      message: '文件大小不能超过30M'
    });
    return false
  }
};
const handleRemove = async (file, uploadFiles) => {
  try {
    if (file.response?.data?.path) {
      await delPic({ path: file.response.data.path })
      ElMessage.success('文件删除成功')
    }
  } catch (error) {
    ElMessage.error('文件删除失败')
  }
}

const handleClose = () => {
  state.form = {
    id: null,
    fileUrl: [],
    companyId: null
  }
  state.fileList = []
  superRef.value.clearValidate();
  superRef.value.resetFields()
  dialogVisible.value = false;
}

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;
  }
}
</style>

 src/views/work/productAndService/index.vue

对比新文件
@@ -0,0 +1,179 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item>
          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="openDialog('add',{})"
          >新增</el-button>
        </el-form-item>
        <el-form-item v-if="isAdmin" label="单位：" >
          <el-select v-model="data.queryParams.companyId" placeholder="请选择" clearable>
            <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button v-if="isAdmin" type="primary" @click="getList">查询</el-button>
          <el-button v-if="isAdmin" type="primary" plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80"/>
      <el-table-column label="产品和服务实现过程图" prop="fileUrl" align="center">
        <template #default="scope">
          <div class="demo-image__preview" v-if="scope.row.fileUrl && scope.row.fileUrl !== ''">
            <el-image
                v-for="(pic,index) in scope.row.fileUrl.split(',')"
                style="width: 100px; height: 100px;margin-right: 10px"
                :src= "baseUrl + '/' + pic"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[baseUrl + '/' + pic]"
                :initial-index="0"
                fit="cover"
                :preview-teleported=true
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template #default="scope">
          <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
<!--    <div id="docx-preview-container" style="width: 100%; height: auto; border: 1px solid #ccc;"></div>-->
    <edit-dialog ref="dialogRef" @getList=getList></edit-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {delCompany, getCompany} from "@/api/onlineEducation/company";
import Cookies from "js-cookie";
import editDialog from './components/editDialog.vue'
import useUserStore from "@/store/modules/user";
import {
  getStandardTemp,
  delStandardTemp,
  getProductServiceList,
  delProductService
} from "@/api/standardSys/standardSys";
import { renderAsync } from "docx-preview";

const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    companyId: null
  },
  total: 0,
  dataList: [],
  companyList: [],
  isAdmin: false,
  baseUrl: import.meta.env.VITE_APP_BASE_API
});

const { queryParams, total, dataList,companyList, isAdmin, baseUrl } = toRefs(data);
const userInfo = ref()
onMounted(async ()=>{
  if(userStore.roles.includes('admin')){
    data.isAdmin = true
    await getCompanyList()
  }else{
    data.isAdmin = false
    data.queryParams.companyId = userStore.companyId
  }
  await getList()
})

onUnmounted(()=>{

})

const getList = async () => {
  loading.value = true
  const res = await getProductServiceList(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list || []
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const getCompanyList = async ()=>{
  const queryParams = {
    pageNum: 1,
    pageSize: 999
  }
  const res = await getCompany(queryParams)
  if (res.code == 200) {
    data.companyList = res.data.list?res.data.list:[]
    // data.queryParams.companyId = data.companyList[0].id
  } else {
    ElMessage.warning(res.message)
  }
}

const openDialog = (type, value) => {
  dialogRef.value.openDialog(type, value, data.queryParams.companyId, data.isAdmin, data.companyList);
}

/** 重置新增的表单以及其他数据  */
const reset= async()=> {
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
    companyId: null
  }
  await getCompanyList()
  await getList()
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delProductService({id: val.id})
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}

</script>