UI展示优化

This commit is contained in:
zhanyunjiu
2022-07-22 09:49:26 +08:00
parent 8fbfd7c0cd
commit 8f5d0fd3da
3 changed files with 141 additions and 32 deletions
+108 -19
View File
@@ -50,14 +50,25 @@
<span v-if="scope.row.taskId">{{convertTask(scope.row.taskId)}}</span>
</template>
</el-table-column>
<el-table-column label="需要的资源" align="center" prop="resources" width="180">
<template slot-scope="scope">
<span>{{resouceConvert(scope.row.resources)}}</span>
</template>
</el-table-column>
<el-table-column label="采收数量" align="center" prop="recoveryNumber" />
<el-table-column label="工时" align="center" prop="workingHours" />
<el-table-column label="参与人" align="center" prop="joinPerson" width="80" >
<!-- <el-table-column label="执行人" align="center" prop="joinPerson" width="80" >
<template slot-scope="scope">
<span v-if="scope.row.joinPerson">{{executorPersonConvert(scope.row.joinPerson)}}</span>
</template>
</el-table-column> -->
<el-table-column label="参与人数" align="center" prop="joinNumber" />
<el-table-column label="总工时" align="center">
<template slot-scope="scope">
<span>{{countTotalHour(scope.row.workingHours, scope.row.joinNumber)}}</span>
</template>
</el-table-column>
<el-table-column label="讨论内容" align="center" prop="content" />
<!-- <el-table-column label="讨论内容" align="center" prop="content" /> -->
<el-table-column label="事件图片" align="center" prop="images">
<template slot-scope="scope">
<el-image
@@ -93,7 +104,7 @@
<el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="项目" prop="projectId">
<el-select v-model="form.projectId" placeholder="请选择项目" @change="changeProject">
<el-select v-model="form.projectId" placeholder="请选择项目" @change="changeProject" :disabled="canSelect">
<el-option
v-for="item in projectList"
:key="item.id"
@@ -103,7 +114,7 @@
</el-select>
</el-form-item>
<el-form-item label="任务" prop="taskId">
<el-select v-model="form.taskId" placeholder="请选择任务" @change="changeTask">
<el-select v-model="form.taskId" placeholder="请选择任务" @change="changeTask" >
<el-option
v-for="item in selectTaskList"
:key="item.id"
@@ -118,19 +129,29 @@
<el-form-item label="讨论图片">
<imageUpload v-model="form.images"/>
</el-form-item>
<el-button type="primary" @click="addResource">添加资源</el-button>
<el-form-item label="资源选择" v-for="(item,index) in form.resources" :key="index">
<el-cascader :options="twoList" clearable v-model="item.resourceId">
</el-cascader>
<el-input v-model="item.num"/>
<el-button @click="deleteResource(item)">删除</el-button>
</el-form-item>
<el-form-item label="工时" prop="workingHours">
<el-input v-model="form.workingHours" placeholder="请输入工时" />
</el-form-item>
<el-form-item label="采收数量" prop="recoveryNumber">
<el-input id="recoveryNumber" v-model="form.recoveryNumber" :disabled="false" placeholder="请填写数量" />
<el-input id="recoveryNumber" v-model="form.recoveryNumber" :disabled="canInput" placeholder="采收任务类型请填写数量" />
</el-form-item>
<el-form-item label="执行人" prop="joinPerson">
<!-- <el-form-item label="执行人" prop="joinPerson">
<el-select v-model="form.joinPerson" filterable multiple placeholder="请先选择项目">
<el-option v-for="item in selectCpUserList" :key="item.id" :label="item.name" :value="item.id">
{{ item.name }}
</el-option>
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="参与人数" prop="joinNumber">
<el-input v-model="form.joinNumber" placeholder="请输入参与人数" />
</el-form-item>
<el-form-item label="执行时间" prop="executeTime">
<el-date-picker clearable v-model="form.executeTime" type="datetime" value-format="timestamp"
placeholder="选择" />
@@ -146,7 +167,7 @@
<el-dialog title="活动规则提示" :visible.sync="dialogVisible" width="70%">
<el-form label-width="80px">
<el-form-item>新增活动只能选择进行中的项目下的进行中的任务</el-form-item>
<el-form-item>执行人只能从项目的成员中选择</el-form-item>
<!-- <el-form-item>执行人只能从项目的成员中选择</el-form-item> -->
<el-form-item>提交活动后任务自动变成已完成并新增执行人的工时</el-form-item>
<el-form-item>如果任务类型是采收 则会将采收数量同步到ERP对应物料数量</el-form-item>
</el-form>
@@ -165,6 +186,8 @@ import { getProjectPage } from "@/api/farm/project";
import { getTaskPage } from "@/api/farm/task";
import { getTaskCatePage } from "@/api/farm/taskCate";
import { getCpUserPage } from "@/api/system/cpUser";
import { getResourceTypePage } from "@/api/farm/resourceType";
import { getResourcePage } from "@/api/farm/resource";
export default {
name: "Discuss",
@@ -176,6 +199,10 @@ export default {
return {
//活动规则
dialogVisible: false,
//采收input
canInput : true,
//项目、任务能否选择
canSelect: false,
// 遮罩层
loading: true,
// 导出遮罩层
@@ -199,7 +226,7 @@ export default {
taskId: null,
content: null,
images: null,
// resources: null,
resources: null,
},
// 表单参数
form: {
@@ -215,7 +242,11 @@ export default {
selectTaskList:[], //对应项目的任务
taskCateList:[],
cpUserList:[], //所有cpUser
selectCpUserList:[] //参与人
selectCpUserList:[], //参与人
resourceTypeList:[],
resourceList:[],
twoList: []
};
},
@@ -270,6 +301,27 @@ export default {
draft:false,
}).then(res=>{
this.taskList = res.data.list;
this.getResourceTypeList();
})
},
/*资源类型 */
getResourceTypeList(){
getResourceTypePage({
pageNo: 1,
pageSize: 400
}).then(res =>{
this.resourceTypeList = res.data.list;
this.getResourceList();
})
},
/*资源 */
getResourceList(){
getResourcePage({
pageNo: 1,
pageSize: 400
}).then(res => {
this.resourceList = res.data.list;
this.twoRescoure();
this.getList();
})
},
@@ -299,7 +351,11 @@ export default {
taskId: undefined,
content: undefined,
images: undefined,
resources: [],
recoveryNumber:undefined
};
this.canInput = true,
this.canSelect = false,
this.resetForm("form");
},
/** 搜索按钮操作 */
@@ -316,7 +372,7 @@ export default {
/** 新增按钮操作 */
handleAdd() {
this.reset();
// this.twoRescoure();
this.twoRescoure();
this.projectList = this.projectList.filter(item => item.state == 'STARTING');
this.open = true;
this.title = "添加农场任务讨论";
@@ -324,7 +380,8 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
// this.twoRescoure();
this.canSelect = true;
this.twoRescoure();
const id = row.id;
getDiscuss(id).then(response => {
this.form = response.data;
@@ -425,16 +482,12 @@ export default {
this.form.recoveryNumber = null;
let task = this.taskList.filter(task => task.id == row)[0];
let taskCate = this.taskCateList.filter(cate => cate.id == task.taskCateName)[0];
var reco = document.getElementById("recoveryNumber");
if(taskCate.synchronizeErp){
//采收数量可编辑
reco.removeAttribute("disabled");
this.canInput = false;
}else{
//采收数量不可编辑
reco.setAttribute("disabled", true);
this.canInput = true;
}
},
//展示项目名
@@ -446,8 +499,44 @@ export default {
convertTask(taskId){
let task = this.taskList.filter(item => item.id == taskId)[0];
return task.taskName +"/\n"+ task.taskMsg;
},
resouceConvert(resources){
if(resources != undefined){
let resouceMsg = "";
resources.forEach(item =>{
let typeName = this.resourceTypeList.filter(type => type.id == item.resourceId[0])[0];
let resName = this.resourceList.filter(name => name.id == item.resourceId[1])[0];
resouceMsg += typeName.name +"/" + resName.name +":" + item.num +"\n";
})
return resouceMsg;
}
},
addResource(){
let resourceTmp = {num:1}
this.form.resources = this.form.resources.concat(resourceTmp)
},
deleteResource(item){
this.form.resources = this.form.resources.filter(res => res!=item)
},
twoRescoure() {
let firstList = [];
this.resourceTypeList.forEach((type) => {
let secondList = [];
this.resourceList.forEach((res) => {
if (res.resourceType == type.id) {
secondList.push({ value: res.id, label: res.name });
}
})
firstList.push({ value: type.id, label: type.name, children: secondList });
})
this.twoList = firstList;
},
//计算总工时
countTotalHour(hour, number){
if(hour != undefined && number != undefined){
return (hour * number).toFixed(1);
}
}
}
};
</script>