Skip to content

P
psa-web
Commit 0fe3b04a authored by wangjiancheng's avatar wangjiancheng
Browse files
Options

feat:项目管理的新增，上传切图

parent 80aa88de
Hide whitespace changes
Inline Side-by-side
Showing with 369 additions and 450 deletions
src/views/project/add.vue
View file @ 0fe3b04a
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="content"> <div class="content">
<div style="padding-left: 10px"> <div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 2px solid #0062ff" <span class="bold-text" style="border-bottom: 3px solid #0062FF;">项目立项</span>
>项目立项</span </div>
<div style="padding-top: 40px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" >
<el-row :gutter="150">
<el-col :span="10">
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="form.projectName"
placeholder="请输入项目名称"
size="large"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="项目类型" prop="projectType">
<el-select
v-model="form.projectType"
placeholder="请选择项目类型"
> >
</div> <el-option
<div style="padding-top: 20px"> v-for="dict in project_type"
<el-form :key="dict.value"
ref="formRef" :label="dict.label"
:model="form" :value="dict.value"
:rules="rules" style="width: 100%"
label-width="auto" />
</el-select>
</el-form-item>
<el-form-item label="预计开始时间" prop="startDate">
<el-date-picker
v-model="form.startDate"
format="YYYY/MM/DD"
type="date"
placeholder="选择日期"
style="width: 100%"
size="large"
> >
<el-row :gutter="150"> </el-date-picker>
<el-col :span="10"> </el-form-item>
<el-form-item label="项目名称" prop="projectName"> <el-form-item label="预计结束时间" prop="endDate">
<el-input <el-date-picker
v-model="form.projectName" size="large"
placeholder="请输入项目名称" format="YYYY/MM/DD"
size="large" v-model="form.endDate"
style="width: 100%" type="date"
/> placeholder="选择日期"
</el-form-item> style="width: 100%"
<el-form-item label="项目类型" prop="projectType"> >
<el-select </el-date-picker>
v-model="form.projectType" </el-form-item>
placeholder="请选择项目类型" <el-form-item label="项目经理" prop="projectManagerId">
> <el-select
<el-option v-model="form.projectManagerId"
v-for="dict in project_type" placeholder="请选择项目经理"
:key="dict.value" size="large"
:label="dict.label" >
:value="dict.value" <el-option
style="width: 100%" v-for="dict in managerOptions"
/> :key="dict.value"
</el-select> :label="dict.label"
</el-form-item> :value="dict.value"
<el-form-item label="预计开始时间" prop="startDate"> style="width: 100%"
<el-date-picker />
v-model="form.startDate" </el-select>
format="YYYY/MM/DD" </el-form-item>
type="date" <el-form-item label="项目成本(元)" prop="projectCost">
placeholder="选择日期" <el-input
style="width: 100%" size="large"
size="large" v-model="form.projectCost"
> placeholder="请输入项目成本"
</el-date-picker> style="width: 100%"
</el-form-item> ></el-input>
<el-form-item label="预计结束时间" prop="endDate"> </el-form-item>
<el-date-picker <el-form-item label="项目状态" prop="projectStatus">
v-model="form.endDate" <el-select v-model="form.projectStatus" placeholder="请选择项目状态" size="large">
size="large" <el-option
format="YYYY/MM/DD" v-for="dict in project_status"
type="date" :key="dict.value"
placeholder="选择日期" :label="dict.label"
style="width: 100%" :value="dict.value"/>
> </el-select>
</el-date-picker> </el-form-item>
</el-form-item> <el-form-item label="项目成员" prop="projectMemberIds">
<el-form-item <el-select
label="项目经理" v-model="form.projectMemberIds"
prop="projectManagerId" placeholder="请选择项目成员"
> size="large"
<el-select multiple
v-model="form.projectManagerId" filterable
placeholder="请选择项目经理" style="width: 100%;"
size="large" >
> <el-option
<el-option v-for="dict in membersOptions"
v-for="dict in managerOptions" :key="dict.value"
:key="dict.value" :label="dict.label"
:label="dict.label" :value="dict.value"
:value="dict.value" />
style="width: 100%" </el-select>
/> </el-form-item>
</el-select> <el-form-item label="项目描述" prop="projectDescribe">
</el-form-item> <el-input
<el-form-item size="large"
label="项目成员" type="textarea"
prop="projectMemberIds" v-model="form.projectDescribe"
> placeholder="请输入项目描述"
<el-select :autosize="{ minRows: 5, maxRows: 10 }"
v-model="form.projectMemberIds" style="width: 100%"
placeholder="请选择项目成员" ></el-input>
size="large" </el-form-item>
multiple <el-form-item label="项目附件">
filterable <el-upload
style="width: 400px" list-type="text"
> v-model:file-list="form.fileList"
<el-option action="https://jsonplaceholder.typicode.com/posts/"
v-for="dict in membersOptions" :on-preview="handlePreview"
:key="dict.value" :on-remove="handleRemove"
:label="dict.label" :before-remove="beforeRemove"
:value="dict.value" :file-list="form.fileList"
/> :on-exceed="handleExceed"
</el-select> :auto-upload="false"
</el-form-item> :on-success="handleSuccess"
<el-form-item >
label="项目成本(元)" <el-button size="large" type="text">
prop="projectCost" <img src="../../assets/icons/common/upl.png" height="16" width="16" alt="上传"/>
> 点击上传
<el-input </el-button>
v-model="form.projectCost" </el-upload>
size="large" </el-form-item>
placeholder="请输入项目成本" <!-- </el-col>
style="width: 100%" <el-col :span="10">-->
></el-input> <el-form-item label="项目回款笔数" prop="repaymentDetails">
</el-form-item> <el-select
<el-form-item v-model="form.repaymentCount"
label="项目描述" placeholder="请选择项目回款笔数"
prop="projectDescribe" @change="updateRepaymentInputs"
> size="large"
<el-input >
v-model="form.projectDescribe" <el-option
size="large" v-for="num in 10"
type="textarea" :key="num"
placeholder="请输入项目描述" :label="num"
:autosize="{ minRows: 5, maxRows: 10 }" :value="num"
style="width: 100%" ></el-option>
></el-input> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="项目状态" prop="projectStatus"> <el-form :model="form" :rules="rules" label-width="140px">
<el-select <div v-for="(item, index) in form.repaymentDetails" :key="index">
v-model="form.projectStatus" <!-- 回款比例 -->
placeholder="请选择项目状态" <el-form-item :label="'第 ' + (index + 1) + ' 笔'">
size="large" <el-input
> v-model="item.repaymentPercentage"
<el-option placeholder="请输入回款比例"
v-for="dict in project_status" @blur="checkPercentage(item.repaymentPercentage, index)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="项目附件">
<el-upload
v-model:file-list="form.fileList"
list-type="text"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:file-list="form.fileList"
:on-exceed="handleExceed"
:auto-upload="false"
:on-success="handleSuccess"
>
<el-button size="large" type="text"
>点击上传</el-button
>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="项目回款笔数">
<el-select
v-model="form.repaymentCount"
placeholder="请选择项目回款笔数"
size="large"
@change="updateRepaymentInputs"
>
<el-option
v-for="num in 10"
:key="num"
:label="num"
:value="num"
></el-option>
</el-select>
</el-form-item>
<el-form :model="form" label-width="80px">
<div
v-for="(
item, index
) in form.repaymentDetails"
:key="index"
>
<el-row>
<el-col :span="12">
<!-- 回款比例 -->
<el-form-item
:label="
'第 ' + (index + 1) + ' 笔'
"
>
<el-input
v-model="
item.repaymentPercentage
"
placeholder="请输入回款比例"
width="100%"
>
<template #suffix>
%
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 回款条件 -->
<el-form-item label="回款前置条件">
<el-input
v-model="
item.repaymentCondition
"
placeholder="请输入前置条件"
width="100%"
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-col>
</el-row>
<el-form-item style="padding-left: 75%">
<el-button size="large" class="btn-B" @click="reset"
>返 回</el-button
>
<el-button
size="large"
type="primary"
class="btn-A"
@click="saveDraft"
>保存草稿</el-button
>
<el-button
size="large"
type="primary"
class="btn-A"
@click="handleSubmit"
>提 交</el-button
> >
</el-form-item> <template #suffix>
</el-form> %
</div> </template>
</div> </el-input>
</el-form-item>
<!-- 回款条件 -->
<el-form-item label="回款前置条件">
<el-input
type="textarea"
:autosize="{ minRows: 3, maxRows: 20 }"
v-model="item.repaymentCondition"
placeholder="请输入前置条件"
width="100%"
></el-input>
</el-form-item>
</div>
</el-form>
</el-col>
</el-row>
<el-form-item style="padding-left: 75%">
<el-button size="large" @click="reset" class="btn-B">返 回</el-button>
<el-button size="large" type="primary" @click="saveDraft" class="btn-A">保存草稿</el-button>
<el-button size="large" type="primary" @click="handleSubmit" class="btn-A">提 交</el-button>
</el-form-item>
</el-form>
</div>
</div> </div>
</div>
</template> </template>
<script setup name="add"> <script setup name="add">
import { listUser } from '../../api/system/user.js' import { listUser } from "../../api/system/user.js";
import { addDraft, addProject } from '../../api/project/project.js' import { addDraft,addProject } from "../../api/project/project.js";
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance();
const { project_status, project_type } = proxy.useDict( const { project_status, project_type } = proxy.useDict('project_status', 'project_type');
'project_status',
'project_type'
)
const formRef = ref() const formRef = ref()
const headOptions = ref([]) const headOptions = ref([])
const managerOptions = ref([]) const managerOptions = ref([])
const membersOptions = ref([]) const membersOptions = ref([])
const form = reactive({ const form = reactive({
id: '', id: '',
projectName: '', projectName: '',
projectType: '', projectType: '',
startDate: '', startDate: '',
endDate: '', endDate: '',
departmentLeadId: '', departmentLeadId: '',
projectManagerId: '', projectManagerId: '',
projectMemberIds: [], projectMemberIds: [],
projectCost: '', projectCost: '',
projectDescribe: '', projectDescribe: '',
projectStatus: '', projectStatus: '',
fileList: [], fileList: [],
repaymentCount: null, repaymentCount: null,
repaymentDetails: [], repaymentDetails: [],
draft: '' draft: '',
}) })
const rules = ref({ const rules = ref({
projectName: [ projectName: [
{ required: true, message: '项目名称不能为空', trigger: 'blur' } { required: true, message: '项目名称不能为空', trigger: 'blur' }
], ],
projectType: [ projectType: [
{ required: true, message: '项目类型不能为空', trigger: 'blur' } { required: true, message: '项目类型不能为空', trigger: 'blur' }
], ],
startDate: [ startDate: [
{ required: true, message: '预计开始时间不能为空', trigger: 'blur' } { required: true, message: '预计开始时间不能为空', trigger: 'blur' }
], ],
endDate: [ endDate: [
{ required: true, message: '预计结束时间不能为空', trigger: 'blur' } { required: true, message: '预计结束时间不能为空', trigger: 'blur' }
], ],
departmentLeadId: [ departmentLeadId: [
{ required: true, message: '部门负责人不能为空', trigger: 'blur' } { required: true, message: '部门负责人不能为空', trigger: 'blur' }
], ],
projectManagerId: [ projectManagerId: [
{ required: true, message: '项目经理不能为空', trigger: 'blur' } { required: true, message: '项目经理不能为空', trigger: 'blur' }
], ],
projectCost: [ projectCost: [
{ required: true, message: '项目成本不能为空', trigger: 'blur' } { required: true, message: '项目成本不能为空', trigger: 'blur' }
], ],
projectStatus: [ projectStatus: [
{ required: true, message: '项目状态不能为空', trigger: 'blur' } { required: true, message: '项目状态不能为空', trigger: 'blur' }
] ],
repaymentDetails: [
{ required: true, message: '回款笔数不能为空', trigger: 'blur' },
],
}) })
const getUserList = () => { const getUserList = () => {
listUser().then(response => { listUser().then(response => {
headOptions.value = response.rows.map(item => { headOptions.value = response.rows.map(item => {
return { return {
value: item.userId, value: item.userId,
label: item.nickName label: item.nickName
} }
}) })
managerOptions.value = response.rows.map(item => { managerOptions.value = response.rows.map(item => {
return { return {
value: item.userId, value: item.userId,
label: item.nickName label: item.nickName
} }
})
membersOptions.value = response.rows.map(item => {
return {
value: item.userId,
label: item.nickName
}
})
}) })
membersOptions.value = response.rows.map(item => {
return {
value: item.userId,
label: item.nickName
}
})
})
} }
// 提交表单 // 提交表单
const handleSubmit = () => { const handleSubmit = () => {
proxy.$refs['formRef'].validate(valid => { proxy.$refs["formRef"].validate(valid => {
if (valid) { if (valid) {
form.draft = '1' form.draft = '1'
addProject(form).then(response => { addProject(form).then(response => {
if (response.code === 200) { if (response.code === 200){
proxy.$modal.msgSuccess('新增成功') proxy.$modal.msgSuccess("新增成功");
resetForm() resetForm()
proxy.$router.push({ path: '/project' }) proxy.$router.push({ path: '/project' })
} else { }else {
proxy.$modal.msgError(response.msg) proxy.$modal.msgError(response.msg)
}
})
} }
}) });
}
});
} }
// 新增草稿 // 新增草稿
const saveDraft = () => { const saveDraft = () => {
proxy.$refs['formRef'].validate(valid => { proxy.$refs["formRef"].validate(valid => {
if (valid) { if (valid) {
proxy proxy.$confirm('确认提交吗？', '提示', {
.$confirm('确认提交吗？', '提示', { confirmButtonText: '确定',
confirmButtonText: '确定', cancelButtonText: '取消',
cancelButtonText: '取消', type: 'warning'
type: 'warning' }).then(() => {
}) addDraft(form).then(response => {
.then(() => { if (response.code === 200){
addDraft(form).then(response => { proxy.$modal.msgSuccess("草稿保存成功");
if (response.code === 200) { }else {
proxy.$modal.msgSuccess('草稿保存成功') proxy.$modal.msgError(response.msg)
} else { }
proxy.$modal.msgError(response.msg) });
} }).catch(()=> {})
}) }
}) });
.catch(() => {})
}
})
} }
// 重置表单 // 重置表单
const resetForm = () => { const resetForm = () => {
form.projectName = '' form.projectName = ''
form.projectType = '' form.projectType = ''
form.startDate = '' form.startDate = ''
form.endDate = '' form.endDate = ''
form.departmentLeadId = '' form.departmentLeadId = ''
form.projectManagerId = '' form.projectManagerId = ''
form.projectMemberIds = [] form.projectMemberIds = []
form.projectCost = '' form.projectCost = ''
form.projectDescribe = '' form.projectDescribe = ''
form.projectStatus = '' form.projectStatus = ''
form.fileList = [] form.fileList = []
form.repaymentCount = '' form.repaymentCount = ''
form.repaymentDetails = [] form.repaymentDetails = []
form.draft = '' form.draft = ''
} }
// 返回项目管理页面 // 返回项目管理页面
const reset = () => { const reset = () => {
// 返回项目 // 返回项目
proxy.$router.push({ path: '/project' }) proxy.$router.push({ path: '/project' })
resetForm() resetForm()
} }
const updateRepaymentInputs = () => { const updateRepaymentInputs = () => {
// 根据用户输入的回款笔数更新百分比输入框的数量 // 根据用户输入的回款笔数更新百分比输入框的数量
if (form.repaymentCount > 0) { if (form.repaymentCount > 0) {
form.repaymentDetails = Array.from( form.repaymentDetails = Array.from({ length: form.repaymentCount }, () => ({
{ length: form.repaymentCount }, repaymentPercentage: null, // 回款百分比
() => ({ repaymentCondition: "" // 回款前置条件
repaymentPercentage: null, // 回款百分比 }));
repaymentCondition: '' // 回款前置条件 } else {
}) form.repaymentDetails = [];
) }
} else {
form.repaymentDetails = []
}
} }
// 检查回款百分比
const checkPercentage = (value, index) => {
let newValue = parseFloat(value); // 确保值是浮点数
if (isNaN(newValue)) {
form.repaymentDetails[index].repaymentPercentage = ''; // 如果输入不是数字，则清空
} else if (newValue < 0) {
form.repaymentDetails[index].repaymentPercentage = 1;
} else if (newValue > 100) {
form.repaymentDetails[index].repaymentPercentage = 100;
} else {
form.repaymentDetails[index].repaymentPercentage = newValue;
}
};
// 删除附件相关事件 // 删除附件相关事件
const handleRemove = (file, fileList) => { const handleRemove = (file, fileList) => {
console.log(file, fileList) console.log(file, fileList)
} }
// 预览附件相关事件 // 预览附件相关事件
const handlePreview = file => { const handlePreview = (file) => {
console.log(file) console.log(file)
} }
// 上传附件数量限制 // 上传附件数量限制
const handleExceed = (files, fileList) => { const handleExceed = (files, fileList) => {
this.$message.warning( this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
)
} }
// 上传附件删除相关事件 // 上传附件删除相关事件
const beforeRemove = (file, fileList) => { const beforeRemove = (file, fileList) => {
return this.$confirm(`确定移除 ${file.name}？`) return this.$confirm(`确定移除 ${file.name}？`);
} }
// 上传附件成功相关事件 // 上传附件成功相关事件
const handleSuccess = (response, file, fileList) => {
console.log(response, file, fileList)
}
// 在组件挂载时执行 // 在组件挂载时执行
onMounted(() => { onMounted(() => {
getUserList() getUserList()
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.contentA {
height: auto;
padding: 20px;
margin-bottom: 10px;
background: #ffffff;
box-shadow: 0 2px 2px 0 #b3b3b380;
border-radius: 2px;
overflow: hidden;
}
.bold-text { .bold-text {
width: 72px; width: 72px;
height: 15px; height: 15px;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 18px;
color: #0d162a; color: #0D162A;
letter-spacing: 0; letter-spacing: 0;
line-height: 15px; line-height: 15px;
} }
</style> </style>
src/views/project/draft.vue
View file @ 0fe3b04a
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</div> </div>
<div class="searchB"> <div class="searchB">
<div style="padding-left: 15px ;padding-bottom: 5px;padding-top: 15px" > <div style="padding-left: 15px ;padding-bottom: 5px;padding-top: 15px" >
<span class="bold-text" style="border-bottom: 2px solid #0062FF;">项目草稿箱</span> <span class="bold-text" style="border-bottom: 3px solid #0062FF;">项目草稿箱</span>
<span style="padding-left: 85%"> <span style="padding-left: 85%">
<el-button <el-button
icon="ArrowLeft" icon="ArrowLeft"
......
src/views/project/edit.vue
View file @ 0fe3b04a
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="formSearch"> <div class="content">
<div style="padding-left: 10px"> <div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 2px solid #0062FF;">项目编辑</span> <span class="bold-text" style="border-bottom: 3px solid #0062FF;">项目编辑</span>
</div> </div>
<div style="padding-top: 20px"> <div style="padding-top: 20px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto"> <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
...@@ -145,9 +145,8 @@ ...@@ -145,9 +145,8 @@
<el-button size="large" type="text">点击上传</el-button> <el-button size="large" type="text">点击上传</el-button>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-col> <!-- </el-col>
<el-col :span="10"> <el-col :span="10">-->
<el-form-item label="项目回款笔数"> <el-form-item label="项目回款笔数">
<el-select <el-select
v-model="form.repaymentCount" v-model="form.repaymentCount"
...@@ -163,10 +162,8 @@ ...@@ -163,10 +162,8 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form :model="form" label-width="80px"> <el-form :model="form" label-width="140px">
<div v-for="(item, index) in form.repaymentDetails" :key="index"> <div v-for="(item, index) in form.repaymentDetails" :key="index">
<el-row>
<el-col :span="12">
<!-- 回款比例 --> <!-- 回款比例 -->
<el-form-item :label="'第 ' + (index + 1) + ' 笔'"> <el-form-item :label="'第 ' + (index + 1) + ' 笔'">
<el-input v-model="item.repaymentPercentage" placeholder="请输入回款比例" width="100%"> <el-input v-model="item.repaymentPercentage" placeholder="请输入回款比例" width="100%">
...@@ -175,18 +172,16 @@ ...@@ -175,18 +172,16 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="12">
<!-- 回款条件 --> <!-- 回款条件 -->
<el-form-item label="回款前置条件"> <el-form-item label="回款前置条件">
<el-input <el-input
type="textarea"
:autosize="{ minRows: 3, maxRows: 20 }"
v-model="item.repaymentCondition" v-model="item.repaymentCondition"
placeholder="请输入前置条件" placeholder="请输入前置条件"
width="100%" width="100%"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col>
</el-row>
</div> </div>
</el-form> </el-form>
</el-col> </el-col>
...@@ -355,15 +350,6 @@ onMounted(() => { ...@@ -355,15 +350,6 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.contentA{
height: auto;
padding: 20px;
margin-bottom: 10px;
background: #FFFFFF;
box-shadow: 0 2px 2px 0 #b3b3b380;
border-radius: 2px;
overflow: hidden;
}
.bold-text { .bold-text {
width: 72px; width: 72px;
height: 15px; height: 15px;
......
src/views/project/index.vue
View file @ 0fe3b04a
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="formSearch"> <div class="formSearch">
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px"> <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
<!-- 默认显示的查询条件 --> <!-- 默认显示的查询条件 -->
<el-form-item label="项目名称" prop="projectName"> <el-form-item label="项目名称" prop="projectName">
<el-input <el-input
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<el-select <el-select
v-model="queryParams.projectStatus" v-model="queryParams.projectStatus"
placeholder="请选择项目状态" placeholder="请选择项目状态"
style="width: 128px" style="width: 193px"
clearable clearable
> >
<el-option <el-option
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<el-form-item style="padding-left: 5%"> <el-form-item style="padding-left: 9%">
<el-button icon="Refresh" @click="resetQuery" class="el-button-defalut">重置</el-button> <el-button icon="Refresh" @click="resetQuery" class="el-button-defalut">重置</el-button>
<el-button type="primary" icon="Search" @click="handleQuery" class="el-button-primary">查询</el-button> <el-button type="primary" icon="Search" @click="handleQuery" class="el-button-primary">查询</el-button>
<el-button size="large" type="text" @click="toggleSearch"> <el-button size="large" type="text" @click="toggleSearch">
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
<el-select <el-select
v-model="queryParams.projectType" v-model="queryParams.projectType"
placeholder="请选择项目类型" placeholder="请选择项目类型"
style="width: 128px" style="width: 193px"
clearable clearable
> >
<el-option <el-option
...@@ -102,34 +102,34 @@ ...@@ -102,34 +102,34 @@
</div> </div>
<el-table v-loading="loading" :data="projectList" border style="width: 100%"> <el-table v-loading="loading" :data="projectList" border style="width: 100%">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="40" align="right"/>
<el-table-column label="项目编号" align="center" prop="projectNumber" width="100" /> <el-table-column label="项目编号" align="center" prop="projectNumber" min-width="150"/>
<el-table-column label="项目名称" align="center" prop="projectName" width="100" show-overflow-tooltip/> <el-table-column label="项目名称" align="center" prop="projectName" min-width="120" show-overflow-tooltip/>
<el-table-column label="项目类型" align="center" prop="projectType"> <el-table-column label="项目类型" align="center" prop="projectType" min-width="120">
<template #default="scope"> <template #default="scope">
<dict-tag :options="project_type" :value="scope.row.projectType"/> <dict-tag :options="project_type" :value="scope.row.projectType"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="预计开始时间" align="center" prop="startDate" width="100"> <el-table-column label="预计开始时间" align="center" prop="startDate" min-width="130">
<template #default="scope"> <template #default="scope">
<span>{{ parseTime(scope.row.startDate, '{y}/{m}/{d}') }}</span> <span>{{ parseTime(scope.row.startDate, '{y}/{m}/{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="预计结束时间" align="center" prop="endDate" width="100"> <el-table-column label="预计结束时间" align="center" prop="endDate" min-width="130">
<template #default="scope"> <template #default="scope">
<span>{{ parseTime(scope.row.endDate, '{y}/{m}/{d}') }}</span> <span>{{ parseTime(scope.row.endDate, '{y}/{m}/{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="事业部负责人" align="center" prop="departmentLeaderName" width="90"/> <el-table-column label="事业部负责人" align="center" prop="departmentLeaderName" min-width="130"/>
<el-table-column label="项目经理" align="center" prop="projectManagerName"/> <el-table-column label="项目经理" align="center" prop="projectManagerName" min-width="120"/>
<el-table-column label="项目成本" align="center" prop="projectCost" /> <el-table-column label="项目成本(元)" align="center" prop="projectCost" min-width="120"/>
<el-table-column label="项目状态" align="center" prop="projectStatus"> <el-table-column label="项目状态" align="center" prop="projectStatus" min-width="120">
<template #default="scope"> <template #default="scope">
<dict-tag :options="project_status" :value="scope.row.projectStatus"/> <dict-tag :options="project_status" :value="scope.row.projectStatus"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="回款笔数" align="center" prop="repaymentCount" width="59"/> <el-table-column label="回款笔数" align="center" prop="repaymentCount" min-width="100"/>
<el-table-column label="回款前置条件" align="center" prop="repaymentCondition" width="100"> <el-table-column label="回款前置条件" align="center" prop="repaymentCondition" min-width="150">
<template #default="scope"> <template #default="scope">
<el-popover placement="right" :width="400" trigger="click"> <el-popover placement="right" :width="400" trigger="click">
<template #reference> <template #reference>
...@@ -150,17 +150,17 @@ ...@@ -150,17 +150,17 @@
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="立项时间" align="center" prop="createDate" width="100"> <el-table-column label="立项时间" align="center" prop="createDate" min-width="130">
<template #default="scope"> <template #default="scope">
<span>{{ parseTime(scope.row.createDate, '{y}/{m}/{d}') }}</span> <span>{{ parseTime(scope.row.createDate, '{y}/{m}/{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="更新时间" align="center" prop="updateDate" width="100"> <el-table-column label="更新时间" align="center" prop="updateDate" min-width="130">
<template #default="scope"> <template #default="scope">
<span>{{ parseTime(scope.row.updateDate, '{y}/{m}/{d}') || '-'}}</span> <span>{{ parseTime(scope.row.updateDate, '{y}/{m}/{d}') || '-'}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="170">
<template #default="scope"> <template #default="scope">
<el-button link type="text" @click="handleUpdate(scope.row)" v-hasPermi="['system:project:edit']"> <el-button link type="text" @click="handleUpdate(scope.row)" v-hasPermi="['system:project:edit']">
<img src="../../assets/icons/common/edit.png" height="20" width="20"/></el-button> <img src="../../assets/icons/common/edit.png" height="20" width="20"/></el-button>
......
src/views/project/view.vue
View file @ 0fe3b04a
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="contentA"> <div class="content">
<div style="padding-left: 10px"> <div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 2px solid blue;">项目详情</span> <span class="bold-text" style="border-bottom: 2px solid blue;">项目详情</span>
</div> </div>
...@@ -142,9 +142,8 @@ ...@@ -142,9 +142,8 @@
> >
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-col> <!-- </el-col>
<el-col :span="10"> <el-col :span="10">-->
<el-form-item label="项目回款笔数"> <el-form-item label="项目回款笔数">
<el-select <el-select
v-model="form.repaymentCount" v-model="form.repaymentCount"
...@@ -160,10 +159,8 @@ ...@@ -160,10 +159,8 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form :model="form" label-width="80px"> <el-form :model="form" label-width="140px">
<div v-for="(item, index) in form.repaymentDetails" :key="index"> <div v-for="(item, index) in form.repaymentDetails" :key="index">
<el-row>
<el-col :span="12">
<!-- 回款比例 --> <!-- 回款比例 -->
<el-form-item :label="'第 ' + (index + 1) + ' 笔'"> <el-form-item :label="'第 ' + (index + 1) + ' 笔'">
<el-input <el-input
...@@ -176,18 +173,16 @@ ...@@ -176,18 +173,16 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col>
<el-col :span="12">
<!-- 回款条件 --> <!-- 回款条件 -->
<el-form-item label="回款前置条件"> <el-form-item label="回款前置条件">
<el-input <el-input
type="textarea"
:autosize="{ minRows: 3, maxRows: 20 }"
v-model="item.repaymentCondition" v-model="item.repaymentCondition"
width="100%" width="100%"
readonly readonly
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col>
</el-row>
</div> </div>
</el-form> </el-form>
</el-col> </el-col>
...@@ -274,15 +269,6 @@ onMounted(() => { ...@@ -274,15 +269,6 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.contentA{
height: auto;
padding: 20px;
margin-bottom: 10px;
background: #FFFFFF;
box-shadow: 0 2px 2px 0 #b3b3b380;
border-radius: 2px;
overflow: hidden;
}
.bold-text { .bold-text {
width: 72px; width: 72px;
height: 15px; height: 15px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment