zhouwx
6 天以前 f94b96403234f5927e74f72fc0cbc65d7b426019
src/views/build/conpanyFunctionConsult/digitalFileDep/project/projectFile/index.vue
@@ -2,7 +2,16 @@
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-form style="display: flex;flex-wrap: wrap;">
        <el-form-item label="企业名称:" v-if="data.isAdmin" style="margin-left: 20px">
        <el-form-item>
          <el-button
              type="primary"
              plain
              icon="Plus"
              v-hasPermi="['projectFile:add']"
              @click="openDataDialog('add',{})"
          >新增</el-button>
        </el-form-item>
        <el-form-item label="单位名称:" v-if="data.isAdmin" style="margin-left: 20px">
          <el-select
              v-model="data.queryParams.companyName"
              filterable
@@ -51,65 +60,71 @@
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <div class="left">
        <span style="font-weight: 600;font-size: 24px">目录</span>
        <div  class="tree-container tree-hide-scrollbar"  v-if="data.treeData">
          <el-tree
              ref="treeRef"
              :data="data.treeData"
              :props="data.defaultProps"
              :default-expand-all="true"
              :expand-on-click-node="false"
              highlight-current
              node-key="id"
              :current-node-key="currentSelectedKey"
              @node-click="handleNodeClick"
          >
            <template #default="{ node,data }">
              <el-tooltip
                  :content="data.mess"
                  placement="bottom"
                  :disabled="!isTextOverflow(data)"
              >
                <span class="tree-text">{{ data.mess }}</span>
              </el-tooltip>
            </template>
          </el-tree>
        </div>
        <el-empty v-else description="暂无数据" />
      </div>
      <div class="right">
        <el-form :model="state.form" size="default" ref="noticeRef"  label-position="top" label-width="125px" >
          <el-form-item label="项目过程管控文件清单" prop="dataList">
            <el-button style="margin-bottom: 10px" type="primary" @click="openDataDialog('add',{})">新增</el-button>
          </el-form-item>
          <el-table style="margin:15px 0;width: 100%" :data="state.form.dataList" :border="true" >
<!--    <div class="bottom">-->
<!--      <div class="left">-->
<!--        <span style="font-weight: 600;font-size: 24px">目录</span>-->
<!--        <div  class="tree-container tree-hide-scrollbar"  v-if="data.treeData">-->
<!--          <el-tree-->
<!--              ref="treeRef"-->
<!--              :data="data.treeData"-->
<!--              :props="data.defaultProps"-->
<!--              :default-expand-all="true"-->
<!--              :expand-on-click-node="false"-->
<!--              highlight-current-->
<!--              node-key="id"-->
<!--              :current-node-key="currentSelectedKey"-->
<!--              @node-click="handleNodeClick"-->
<!--          >-->
<!--            <template #default="{ node,data }">-->
<!--              <el-tooltip-->
<!--                  :content="data.mess"-->
<!--                  placement="bottom"-->
<!--                  :disabled="!isTextOverflow(data)"-->
<!--              >-->
<!--                <span class="tree-text">{{ data.mess }}</span>-->
<!--              </el-tooltip>-->
<!--            </template>-->
<!--          </el-tree>-->
<!--        </div>-->
<!--        <el-empty v-else description="暂无数据" />-->
<!--      </div>-->
<!--      <div class="right">-->
          <el-table style="margin:15px 0;width: 100%" :data="data.dataList" :border="true" >
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column label="目录" prop="catalogueName" align="center" width="130"  :show-overflow-tooltip="true" />
            <el-table-column label="项目名称" prop="itemName" align="center" width="130"  :show-overflow-tooltip="true" />
<!--            <el-table-column label="项目名称" prop="itemName" align="center" width="130"  :show-overflow-tooltip="true" />-->
            <el-table-column label="文件编号" prop="number" align="center"  />
            <el-table-column label="文件名称" prop="fileNameSimple" align="center"  />
            <el-table-column label="文件" prop="fileName" align="center" >
            <el-table-column label="文件" prop="filePath" align="center" >
              <template #default="scope">
                <el-link v-if="scope.row.fileName" style="" type="primary" @click="openFile(scope.row.filePath)">{{scope.row.fileName}}</el-link>
                <el-link v-if="scope.row.filePath" style="" type="primary" @click="openFile(scope.row.filePath)">{{scope.row.fileName}}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160" >
              <template #default="scope">
                <el-button v-if="scope.row.filePath" link type="primary"  @click="downloadFile(scope.row)" >下载</el-button>
                <el-button link type="primary"  @click="openDataDialog('edit',scope.row)" >编辑</el-button>
                <el-button link type="danger"  @click="handleDataDelete(scope.row)" >删除</el-button>
                <el-button v-if="scope.row.filePath" link type="primary"  @click="downloadFile(scope.row)" v-hasPermi="['projectFile:edit']">下载</el-button>
                <el-button link type="primary"  @click="openDataDialog('edit',scope.row)" v-hasPermi="['projectFile:edit']">编辑</el-button>
                <el-button link type="danger"  @click="handleDataDelete(scope.row)" v-hasPermi="['projectFile:del']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div class="pag-container">
          <el-pagination
              v-model:current-page="data.queryParams.pageNum"
              v-model:page-size="data.queryParams.pageSize"
              :page-sizes="[10,15,20,25]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
<!--        <div style="display: flex;align-items: center;justify-content: right;margin-top: 10px">-->
<!--          <el-button v-if="state.form.id && data.isAdmin" type="danger"  @click="deleteData">删除</el-button>-->
<!--          <el-button v-if="data.isAdmin" type="primary"  @click="addData()">保存</el-button>-->
<!--        </div>-->
      </div>
    </div>
<!--      </div>-->
<!--    </div>-->
    <dataDialog ref="dialogRef" @getList="getFileList"></dataDialog>
  </div>
</template>
@@ -139,7 +154,6 @@
const { proxy } = getCurrentInstance();
const loading = ref(false);
const noticeRef = ref();
const dialogRef = ref();
const treeRef = ref()
const dialogRecordRef = ref();
@@ -150,6 +164,8 @@
    type: 3,
    companyId: null,
    itemId: null,
    pageNum: 1,
    pageSize: 10,
  },
  companyList: [],
  projectList: [],
@@ -160,23 +176,15 @@
    label: 'name',
  },
  treeData: [],
  dataList: []
});
const state = reactive({
  form: {
    id: '',
    companyId: null,
    catalogueId: null,
    dataList: [],
  },
})
const dataList = ref([]);
const total = ref(0);
const { queryParams } = toRefs(data);
onMounted(async () => {
  const userInfo = JSON.parse(Cookies.get('userInfo'))
  console.log("userInfo",userInfo)
  data.isAdmin = userInfo.userType === 0;
  data.userId = userInfo.id
@@ -184,13 +192,11 @@
    await getCompanyList()
    data.queryParams.companyId = data.companyList[0].id
    data.queryParams.companyName = data.companyList[0].name
    state.form.companyId = data.companyList[0].id
  }else {
    data.queryParams.companyId = userInfo.companyId
    state.form.companyId = userInfo.companyId
  }
  await getProjectList()
  await getList();
  await getList()
  if(data.treeData.length >0){
    // state.form.catalogueId = data.treeData[0].id
    // currentSelectedKey.value = state.form.catalogueId
@@ -220,7 +226,7 @@
  data.treeData = [];
  loading.value = true;
  const param = {
    companyId: state.form.companyId,
    companyId: data.queryParams.companyId,
    type : 3
  }
  const res = await getCatalogue(param);
@@ -299,12 +305,9 @@
  }
}
const selectValue = async (val) => {
  state.form.id = ''
  state.form.catalogueId = null
  data.companyList.forEach(item => {
    if(item.name === val){
      data.queryParams.companyId = item.id
      state.form.companyId = item.id
    }
  })
  data.projectList = []
@@ -317,81 +320,16 @@
  //   // currentSelectedKey.value = state.form.catalogueId
  //   await getFileList()
  // }else {
  //   state.form.dataList = []
  //   data.dataList = []
  // }
}
const changePro = () => {
  state.form.id = ''
  state.form.catalogueId = null
}
const handleNodeClick = async (val) => {
  state.form.id = ''
  state.form.catalogueId = val.id
  currentSelectedKey.value = val.id
  await getFileList()
}
const addData = async () => {
  if(!state.form.catalogueId){
    ElMessage.warning('请先选择左侧目录!')
    return
  }
  const valid = await noticeRef.value.validate();
  if(valid){
    if(state.form.id){
      //编辑
      const {dataList,recordList,...data} = state.form
      const res = await editCatalogueData(data)
      if(res.code == 200){
        ElMessage.success('编辑成功')
        await getFileList()
      }else{
        ElMessage.warning(res.message)
      }
    }else {
      //新增
      const {id,dataList,recordList,...data} = state.form
      const res = await addCatalogueData(data)
      if(res.code == 200){
        ElMessage.success('新增成功')
        await getFileList()
      }else{
        ElMessage.warning(res.message)
      }
    }
  }
}
const openDataDialog = (type, value) => {
  if(type =='edit'){
    state.form.catalogueId = value.catalogueId
  }
  if(!state.form.catalogueId){
    ElMessage.warning('请先选择左侧目录!')
    return
  }
  dialogRef.value.openDialog(type, value, state.form.companyId,state.form.catalogueId,data.userId);
  nextTick(() => {
    if(!currentSelectedKey.value){
      state.form.catalogueId = null
    }
  })
}
const openRecordDialog = (type, value) => {
  if(!state.form.catalogueId){
    ElMessage.warning('请先选择左侧目录!')
    return
  }
  dialogRecordRef.value.openDialog(type, value, state.form.companyId,state.form.catalogueId);
  dialogRef.value.openDialog(type, value, data.queryParams.companyId,data.treeData,data.userId);
}
const handleDataDelete = (val) => {
@@ -433,25 +371,7 @@
        }
      })
}
const deleteData = () => {
  ElMessageBox.confirm(
      '确定删除此条数据?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delCatalogueData(state.form.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getFileList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}
const reset = async () => {
  data.queryParams = {
    companyId: data.isAdmin ? null : data.queryParams.companyId,
@@ -459,22 +379,19 @@
    pageSize: 10,
    itemId: null,
  }
  state.form.id = ''
  state.form.catalogueId = null
  data.companyList = [];
  data.treeData = []
  if(data.isAdmin){
    await  getCompanyList()
    data.queryParams.companyId = data.companyList[0].id
    data.queryParams.companyName = data.companyList[0].name
    state.form.companyId = data.companyList[0].id
  }
  await getProjectList();
  await getList();
  if(data.treeData.length >0 ){
    await getFileList()
  }else {
    state.form.dataList = []
    data.dataList = []
  }
@@ -484,47 +401,59 @@
  if(data.treeData.length >0 ){
    await getFileList()
  }else {
    state.form.dataList = []
    data.dataList = []
  }
}
const getFileList = async () => {
  const queryParams = {
    companyId: state.form.companyId,
    catalogueId: state.form.catalogueId,
    companyId: data.queryParams.companyId,
    type: 2,
    itemId: data.queryParams.itemId
    itemId: data.queryParams.itemId,
    pageSize: data.queryParams.pageSize,
    pageNum: data.queryParams.pageNum
  }
  const res = await getProductFilePage(queryParams)
  if (res.code == 200) {
    state.form.dataList = res.data.list.map(item => {
    data.dataList = res.data.list.map(item => {
      return {
        ...item,
        fileNameSimple: item.fileName.split('.')[0]
      }
    })
    total.value = res.data.total
  } else {
    ElMessage.warning(res.message)
  }
}
const handleSizeChange = (val) => {
  data.queryParams.pageSize = val
   getFileList()
}
const handleCurrentChange = (val) => {
  data.queryParams.pageNum = val
  getFileList()
}
const openFile = async(path)=>{
  const ext = path.split('.').pop().toLowerCase();
  if (ext === 'doc') {
    ElMessageBox.confirm('暂不支持线上预览.doc文件,是否下载查看?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
    ElMessageBox.confirm('暂不支持线上预览.doc、.xls、.xlsx文件,是否下载查看?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
      window.open(`${import.meta.env.VITE_APP_BASE_API}/${path}`, '_blank');
    }).catch(() => {
      console.log('取消预览')
    });
    return
  }
  try {
    // 1. 获取文件
    const response = await fetch(import.meta.env.VITE_APP_BASE_API + '/' + path);
    const arrayBuffer = await response.arrayBuffer();
    // 2. 创建新窗口
    const win = window.open('', '_blank')
    win.document.write(`
  }else if(ext === 'pdf' || ext === 'png' || ext === 'jpg'|| ext === 'jpeg'){
    window.open(`${import.meta.env.VITE_APP_BASE_API}/${path}`, '_blank');
  }else {
    try {
      // 1. 获取文件
      const response = await fetch(import.meta.env.VITE_APP_BASE_API + '/' + path);
      const arrayBuffer = await response.arrayBuffer();
      // 2. 创建新窗口
      const win = window.open('', '_blank')
      win.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
@@ -539,13 +468,15 @@
        </body>
      </html>
    `);
    // 3. 渲染 DOCX
    await renderAsync(arrayBuffer, win.document.getElementById('container'));
      // 3. 渲染 DOCX
      await renderAsync(arrayBuffer, win.document.getElementById('container'));
  } catch (error) {
    console.error('预览失败:', error);
    alert(`预览失败: ${error.message}`);
    } catch (error) {
      console.error('预览失败:', error);
      alert(`预览失败: ${error.message}`);
    }
  }
}
const downloadFile = (e)=>{
  axios.get(import.meta.env.VITE_APP_BASE_API + '/' +e.filePath,{headers:{'Content-Type': 'application/json','Authorization': `${getToken()}`},responseType: 'blob'}).then(res=>{
@@ -601,7 +532,7 @@
  }
}
const exportData = () => {
  if(state.form.dataList.length == 0){
  if(data.dataList.length == 0){
    ElMessage.warning('暂无数据!')
    return
  }
@@ -611,9 +542,9 @@
const templatePath = '/fileProjectExample.docx'
const startGeneration = async () => {
  let table = {}
  table.name = state.form.dataList[0].companyName
  table.name = data.dataList[0].companyName
  const dataList = state.form.dataList.map((item,index) => {
  const dataList = data.dataList.map((item,index) => {
    return{
      ...item,
      caralog: item.catalogueName
@@ -658,6 +589,10 @@
<style scoped lang="scss">
.app-container{
  .pag-container{
    float: right;
    margin-top: 10px;
  }
  .bottom{
    display: flex;
    width: auto;