|
|
@@ -0,0 +1,543 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row style="height: 800px">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-card
|
|
|
+ style="height: 100%"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-row align="middle">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-text size="large">项目基本信息</el-text>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="4"
|
|
|
+ :offset="14"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="Edit"
|
|
|
+ @click="messagePopupShow = true"
|
|
|
+ >信息编辑</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-text
|
|
|
+ size="large"
|
|
|
+ :line-clamp="1"
|
|
|
+ >
|
|
|
+ <b>项目名称:</b>{{ information.name }}
|
|
|
+ </el-text>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt-10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-text
|
|
|
+ size="large"
|
|
|
+ :line-clamp="1"
|
|
|
+ >
|
|
|
+ <b>项目负责人:</b>{{ information.principal }}
|
|
|
+ </el-text>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt-10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-text
|
|
|
+ size="large"
|
|
|
+ :line-clamp="1"
|
|
|
+ >
|
|
|
+ <b>相关客户:</b>{{ information.customer }}
|
|
|
+ </el-text>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt-10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-text
|
|
|
+ size="large"
|
|
|
+ :line-clamp="1"
|
|
|
+ >
|
|
|
+ <b>紧急程度:</b>{{ information.level === 1 ? '正常' : information.level === 2 ? '重要' : '紧急' }}
|
|
|
+ </el-text>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt-10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-text
|
|
|
+ size="large"
|
|
|
+ :line-clamp="1"
|
|
|
+ >
|
|
|
+ <b>项目金额:</b>{{ information.price }}元
|
|
|
+ </el-text>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt-10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-text
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <b>立项时间:</b>{{ information.CreatedAt }}
|
|
|
+ </el-text>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="mt-10">
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-text
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <b>项目说明:</b>
|
|
|
+ </el-text>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-text
|
|
|
+ size="large"
|
|
|
+ :line-clamp="4"
|
|
|
+ >
|
|
|
+ {{ information.illustrate }}
|
|
|
+ </el-text>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="13"
|
|
|
+ class="ml-5"
|
|
|
+ >
|
|
|
+ <el-card
|
|
|
+ style="height: 100%"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-row align="middle">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-text size="large">项目文件列表</el-text>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ :offset="15"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="Edit"
|
|
|
+ >类型编辑</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input
|
|
|
+ v-model="fileCondition.name"
|
|
|
+ placeholder="请输入文件名称"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="4"
|
|
|
+ :offset="1"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="fileType"
|
|
|
+ clearable
|
|
|
+ @change="changeFileType"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in fileTypeList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.ID"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ :offset="1"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="Search"
|
|
|
+ @click="queryFile"
|
|
|
+ >查询</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="RefreshLeft"
|
|
|
+ >
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="Upload"
|
|
|
+ @click="fileDialog = true"
|
|
|
+ >
|
|
|
+ 上传
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="3"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="Download"
|
|
|
+ @click="downloadTips"
|
|
|
+ >
|
|
|
+ 下载
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="margin-top: 20px">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-table
|
|
|
+ :data="fileList"
|
|
|
+ row-class-name="row-class"
|
|
|
+ border
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="ID"
|
|
|
+ align="center"
|
|
|
+ label="ID"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="文件名称"
|
|
|
+ align="center"
|
|
|
+ width="350"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="项目操作"
|
|
|
+ align="center"
|
|
|
+ fixed="right"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ text
|
|
|
+ type="primary"
|
|
|
+ :icon="Download"
|
|
|
+ size="large"
|
|
|
+ @click="projectEdit(scope.$index, scope.row)"
|
|
|
+ >
|
|
|
+ 下载
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ text
|
|
|
+ type="primary"
|
|
|
+ :icon="Delete"
|
|
|
+ size="large"
|
|
|
+ @click="projectDelete(scope.$index, scope.row)"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog
|
|
|
+ v-model="fileDialog"
|
|
|
+ title="上传文件"
|
|
|
+ width="40%"
|
|
|
+ :before-close="fileDialogClose"
|
|
|
+ :align-center="true"
|
|
|
+ >
|
|
|
+ <el-form>
|
|
|
+ <el-row style="margin-top: 20px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="文件类型:">
|
|
|
+ <el-select
|
|
|
+ v-model="uploadFileType"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择上传文件的类型"
|
|
|
+ @change="changeUploadFileType"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in fileTypeList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.ID"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-row style="margin-top: 20px">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ drag
|
|
|
+ multiple
|
|
|
+ :auto-upload="false"
|
|
|
+ :file-list="uploadFileData"
|
|
|
+ :on-change="changeFileData"
|
|
|
+ :on-remove="removeFileData"
|
|
|
+ >
|
|
|
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 请选择需要上传的文件
|
|
|
+ </div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ 选择的文件不要超过500MB
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="fileDialog = false">取消</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="supplementFile"
|
|
|
+ >
|
|
|
+ 上传
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ v-model="messagePopupShow"
|
|
|
+ title="项目基本信息编辑"
|
|
|
+ width="40%"
|
|
|
+ >
|
|
|
+ <el-from>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="项目名称">
|
|
|
+ <el-input placeholder="请输入项目名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row></el-row>
|
|
|
+ <el-row></el-row>
|
|
|
+ <el-row></el-row>
|
|
|
+ </el-from>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { getProjectMessage } from '@/api/project'
|
|
|
+import { onMounted, reactive, ref } from 'vue'
|
|
|
+import { getAllUsers } from '@/api/user'
|
|
|
+import { getFileType, queryFileList, createProjectFile, downloadProjectFile } from '@/api/file'
|
|
|
+import { Download, Upload, Delete, Search, RefreshLeft, Edit } from '@element-plus/icons-vue'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+
|
|
|
+defineOptions({
|
|
|
+ name: 'Test'
|
|
|
+})
|
|
|
+const fileCondition = reactive({
|
|
|
+ code: 'LCZM202407161229',
|
|
|
+ name: '',
|
|
|
+ genre: 0,
|
|
|
+ pageInfo: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 9
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const information = reactive({})
|
|
|
+
|
|
|
+const messagePopupShow = ref(false)
|
|
|
+// 项目用户列表
|
|
|
+const userList = reactive([])
|
|
|
+// 项目文件列表
|
|
|
+const fileList = reactive([])
|
|
|
+// 项目文件类型列表
|
|
|
+const fileTypeList = reactive([])
|
|
|
+// 项目文件类型
|
|
|
+const fileType = ref('')
|
|
|
+// 上传文件弹窗
|
|
|
+const fileDialog = ref(false)
|
|
|
+
|
|
|
+const uploadFileType = ref('')
|
|
|
+
|
|
|
+const uploadFileData = ref([])
|
|
|
+
|
|
|
+// const uploadFileList = ref([])
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ projectMessage('LCZM202407161229')
|
|
|
+ queryFileType()
|
|
|
+ getAllUsers().then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ userList.push(...res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+// 初始化项目数据
|
|
|
+const projectMessage = (code) => {
|
|
|
+ getProjectMessage(code).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ const data = res.data
|
|
|
+ data.CreatedAt = formatDate(data.CreatedAt)
|
|
|
+ data.UpdatedAt = formatDate(data.UpdatedAt)
|
|
|
+ Object.keys(data).forEach(key => {
|
|
|
+ if (key === 'files') {
|
|
|
+ // data[key].CreatedAt = formatDate(data[key].CreatedAt)
|
|
|
+ // data[key].UpdatedAt = formatDate(data[key].UpdatedAt)
|
|
|
+ fileList.push(...data[key])
|
|
|
+ }
|
|
|
+ information[key] = data[key]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// 项目类型
|
|
|
+const queryFileType = () => {
|
|
|
+ getFileType().then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ fileTypeList.push(...res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const changeFileType = (value) => {
|
|
|
+ if (typeof value === 'number') {
|
|
|
+ fileTypeList.forEach(item => {
|
|
|
+ if (item.ID === value) {
|
|
|
+ fileType.value = item.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ fileCondition.genre = value
|
|
|
+ } else {
|
|
|
+ fileCondition.genre = 0
|
|
|
+ }
|
|
|
+}
|
|
|
+// 查询文件
|
|
|
+const queryFile = () => {
|
|
|
+ queryFileList(fileCondition).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ console.log(res.data)
|
|
|
+ fileList.push(...res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// 上传文件
|
|
|
+const fileDialogClose = () => {
|
|
|
+ fileDialog.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const changeUploadFileType = (value) => {
|
|
|
+ if (typeof value === 'number') {
|
|
|
+ uploadFileType.value = value
|
|
|
+ } else {
|
|
|
+ uploadFileType.value = ''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const changeFileData = (file, fileList) => {
|
|
|
+ uploadFileData.value = fileList
|
|
|
+ console.log(uploadFileData)
|
|
|
+}
|
|
|
+
|
|
|
+const removeFileData = (file, fileList) => {
|
|
|
+ uploadFileData.value = fileList
|
|
|
+ console.log(uploadFileData)
|
|
|
+}
|
|
|
+
|
|
|
+const supplementFile = () => {
|
|
|
+ if (uploadFileType.value === '') {
|
|
|
+ ElMessage.error('请选择文件类型')
|
|
|
+ } else if (uploadFileData.value.length === 0) {
|
|
|
+ ElMessage.error('暂未选择文件')
|
|
|
+ } else {
|
|
|
+ const formData = new FormData()
|
|
|
+ uploadFileData.value.forEach(item => {
|
|
|
+ formData.append('file', item.raw)
|
|
|
+ })
|
|
|
+ formData.append('genre', uploadFileType.value)
|
|
|
+ formData.append('code', 'LCZM202407161229')
|
|
|
+ createProjectFile(formData).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ fileDialog.value = false
|
|
|
+ ElMessage.success(res.msg)
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 下载文件
|
|
|
+const downloadTips = () => {
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ '确定要下载列表中的所有文件吗?',
|
|
|
+ '文件下载',
|
|
|
+ {
|
|
|
+ confirmButtonText: '下载',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ const type = fileType.value === '' ? 0 : fileType.value
|
|
|
+ console.log(type)
|
|
|
+ const data = {
|
|
|
+ code: 'LCZM202407161229',
|
|
|
+ genre: type,
|
|
|
+ name: fileCondition.name
|
|
|
+ }
|
|
|
+ downloadProjectFile(data).then(res => {
|
|
|
+ console.log(res.data)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ ElMessage({
|
|
|
+ type: 'info',
|
|
|
+ message: '取消下载',
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+// 日期格式化
|
|
|
+const formatDate = (dateString, locale = 'en-US', timezone = 'Asia/Shanghai') => {
|
|
|
+ // 使用 Date 构造函数解析日期字符串
|
|
|
+ const date = new Date(dateString)
|
|
|
+
|
|
|
+ // 检查日期是否有效
|
|
|
+ if (isNaN(date.getTime())) {
|
|
|
+ throw new Error('Invalid date string')
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用 Date 对象的年份、月份和日期来构建新的日期字符串
|
|
|
+ // 注意:JavaScript 中的月份是从 0 开始的,所以我们需要加 1
|
|
|
+
|
|
|
+ return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+@mixin basic {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.basicInformation {
|
|
|
+ height: 50px;
|
|
|
+ background-color: #f8fafd;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .basicTitle {
|
|
|
+ @include basic;
|
|
|
+ padding-left: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .basicEdit {
|
|
|
+ @include basic;
|
|
|
+ justify-content: end;
|
|
|
+ padding-right: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|