new_huozhou_frontend/src/views/performanceIndicator/projectAssessment/addProjectAssessment.vue

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="ismodify ? '修改项目考核' : '新增项目考核'" width="1200px"
    :showOkBtn="false" :showCancelBtn="false">
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <template #selfScores="{ record }"> 
        <div v-if="isShowByRoles('projectContact') && record.scores != null && record.sysscores== null">
          <a-row>
            <a-col :span="12">
              <el-input  v-model="record.selfScores" style="width: 100%; " type="number" min="0" :max=record.scores />
            </a-col>
            <a-col :span="12">
              <!-- <el-button type="primary" size="small" @click="(record) => { record.selfScores = 0 }"
                style="width: 100%; margin-left: 5px;">
                上传文件a
              </el-button> -->
              <el-upload v-if="ismodify" class="upload-demo" ref="upload" action :http-request="(file) => { return httpRequest(file, record.id,record.selfScores) }"
                :before-upload="beforeUpload" :on-exceed="handleExceed" :limit="1" :show-file-list="false" style="width: 100%;">
                <el-button slot="trigger" size="small" type="primary" style="width: 80%;font-size: 10px; ">上传文件</el-button>
              </el-upload>
            </a-col>
          </a-row>
        </div>
        <div v-else>
          {{ record.selfScores }}
        </div>
        <a-row>
            <!-- <a-divider orientation="left" orientation-margin="0px" style="font-size: small;">文件信息</a-divider> -->
            <!-- {{ record.filename }} -->
            <a @click="handledown(record)">{{ record.documentName }}</a>
          </a-row>
      </template>
      <template #pscores="{ record }">
        <div v-if="isShowByRoles('manageOrg') && record.scores != null">
          <a-row>
            <a-col :span="12">
              <el-input v-model="record.pscores" style="width: 100%; " type="number" min="0" :max=record.scores />
            </a-col>
          </a-row>
        </div>
      </template>
    </BasicTable>
    <div style="display: flex; justify-content: center; align-items: center; height: 100px;">
      <el-button type="primary" @click="add" size="large">提交</el-button>
      <el-button @click="close" size="large">取消</el-button>

    </div>
  </BasicModal>
</template>

<script lang="ts" name="addProjectAssessment" setup>
//ts语法
import { ref, onMounted, defineEmits } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { useModalInner, BasicModal } from '@/components/Modal';
import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api';

import { addProjectassessment, modifyProjectassessment, getProjectassessmentByprojectId,uploadProjectassessmentFile } from '@/views/performanceIndicator/projectAssessment/projectAssessment.api';
import { templateContentColumns } from '@/views/performanceIndicator/templateContent/templateContent.data';
import { getProjectassessmentIncludeSys } from './projectAssessment.api'
import { cloneDeep } from 'lodash-es';
import{ElMessage,UploadInstance} from 'element-plus'
import { downloadFile } from "@/api/common/api"

const [registerModal, { closeModal }] = useModalInner(init);
let projectid = ref(null);
let type = ref(null);
let ismodify = ref(false);
const upload = ref<UploadInstance>()
let emit = defineEmits(["close"])


async function init(data) {
  console.log("datadatadata", data)
  let columnsTemp = cloneDeep(templateContentColumns)
  setColumns(columnsTemp)
  if (data.projectid) {
    projectid.value = data.projectid
    type.value = data.type
    ismodify.value = data.ismodify
  }
  if (data.ismodify) {
    setProps({ api: getProjectassessmentByprojectId })
    reload()
  }
}
const [registerTable, { getDataSource, setProps, reload, setColumns }] = useTable({
  api: getProjectassessmentIncludeSys,
  columns: templateContentColumns,
  useSearchForm: false,
  pagination: false,
  // actionColumn: {
  //   width: 140,
  //   title: '操作',
  //   dataIndex: 'action',
  //   slots: { customRender: 'action' },
  // },
  beforeFetch(params) {
    params.projectId = projectid.value
    params.type = type.value
  },
  afterFetch: (data) => {
  },
  //表单查询项设置
  // formConfig: {
  //   schemas: searchFormSchema,
  // }

});
function close() {
  closeModal();
}
async function add() {
  let tableData = await getDataSource()
  tableData.forEach(item => {
    item.projectId = projectid.value
    item.type = type.value
  })
  if (ismodify.value) {
    await modifyProjectassessment(tableData)
    console.log("修改", tableData)

  } else {
    await addProjectassessment(tableData)
    console.log("新增", tableData)

  }
  closeModal();
  emit("close")

}
// 覆盖默认的上传行为，可以自定义上传的实现，将上传的文件依次添加到fileList数组中,支持多个文件
async function httpRequest(option,id,selfScores) {
  const params = new FormData()
  params.append('file', option.file)
  params.append('id',id)
  params.append('selfScores',selfScores)
  upload.value?.clearFiles()

  await uploadProjectassessmentFile(params)
  ElMessage.success('上传成功')
  reload()
  return true
}
// 上传前处理
function beforeUpload(file) {
  // let fileSize = file.size
  // const FIVE_M = 10 * 1024 * 1024;
  // //大于5M，不允许上传
  // if (fileSize > FIVE_M) {
  //   ElMessage.error("最大上传10M")
  //   return false
  // }

  return true
}
// 文件数量过多时提醒
function handleExceed() {
  ElMessage.warning("最多只能上传一个文件")
}
function handledown(record) {
    console.log("我这一行的数据是", record)
    let param = {
        path: record.documentPath,
        fileName: record.documentName
    }
    //
    console.log("我这一行的数据是", param)

    downloadFile("/huzhouUploadfileinfo/downloadfile", record.documentName, param)
}
</script>

<style scoped></style>