完成团队页

main
wuyize 2022-07-09 09:29:41 +08:00
parent 8df4828202
commit 2ae6aadd38
3 changed files with 344 additions and 102 deletions

View File

@ -0,0 +1,189 @@
<template>
<!-- Form -->
<el-dialog
title="添加成员"
:before-close="handleClose"
v-model="dialogFormVisible"
center
>
<el-form :model="form" :rules="rules" ref="form">
<el-row>
<el-col :span="24">
<el-form-item
label="用户名"
prop="staffUsername"
:label-width="formLabelWidth"
>
<el-input
v-model="form.staffUsername"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="岗位" :label-width="formLabelWidth">
<!-- <el-input v-model="form.name" autocomplete="off"></el-input>-->
<el-input
class="input-new-tag"
v-model="inputValue"
ref="saveTagInput"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>
<!-- <el-button
v-else
class="button-new-tag"
size="small"
@click="showInput"
>+ New Tag</el-button
> -->
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="submitFormData('form')"></el-button>
<el-button @click="onCannel()"> </el-button>
<!-- <el-button type="primary" @click="dialogFormVisible = false"> </el-button>-->
</span>
</template>
</el-dialog>
</template>
<script>
import request from "../utils/request";
export default {
data() {
return {
form: {
staffUsername: "",
},
formLabelWidth: "120px",
//
dynamicTags: [],
inputVisible: false,
inputValue: "",
rules: {
staffUsername: [
{ required: true, message: "请输入用户名", trigger: "blur" },
],
},
};
},
props: {
dialogFormVisible: Boolean,
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleClose() {
this.onCannel();
},
onCannel() {
this.form.staffUsername = "";
this.dynamicTags = [];
this.$emit("onCannel");
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
const isCF = !!this.dynamicTags.find((item) => {
return item == inputValue;
});
if (isCF) {
this.$message.warning("岗位不能重复");
} else {
this.dynamicTags.push(inputValue);
}
}
this.inputVisible = false;
this.inputValue = "";
},
submitFormData(formName) {
console.log(this.form);
if (this.dynamicTags?.length) {
this.$refs[formName].validate((valid) => {
console.log(this.$refs);
console.log(valid);
if (valid) {
let projectId = this.$route.params.projectId;
const param = {
staffUsername: this.form.staffUsername,
projectStaffPosition: this.dynamicTags.join(","),
staffId: 0,
};
request({
url: `/project/${projectId}/group`,
method: "post",
data: param,
})
.then(
(res) => {
console.log("submit!!");
this.$message.success("添加成功");
this.$emit("createdPerson");
this.form.staffUsername = "";
this.dynamicTags = [];
},
(err) => {
this.$message.error("用户名不存在");
}
)
.catch(function (error) {
console.log(error);
});
} else {
console.log("error submit!!");
return false;
}
});
} else {
this.$message.warning("请添加岗位");
}
},
},
};
</script>
<style>
.el-tag {
margin-right: 10px;
margin-bottom: 5px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
/* margin-left: 10px; */
vertical-align: bottom;
margin-bottom: 5px;
}
</style>

View File

@ -104,16 +104,17 @@ export default {
}, },
created() { created() {
const that = this
// watch 便 // watch 便
this.$watch( this.$watch(
() => this.$route.query, () => that.$route.query,
() => { () => {
if (this.$route.query.currentPage) if (that.$route.query.currentPage)
this.currentPage = parseInt(this.$route.query.currentPage) that.currentPage = parseInt(that.$route.query.currentPage)
if (this.$route.query.pageSize) if (that.$route.query.pageSize)
this.pageSize = parseInt(this.$route.query.pageSize) that.pageSize = parseInt(that.$route.query.pageSize)
this.getProjects() that.getProjects()
}, },
// //
// data observed // data observed

View File

@ -4,19 +4,25 @@
<div ref="leftRef" style="width: 50%;height: 100%;padding: 0 30px 0 0;display: flex;flex-direction: column"> <div ref="leftRef" style="width: 50%;height: 100%;padding: 0 30px 0 0;display: flex;flex-direction: column">
<div style="display: flex;flex-direction: row;justify-content: space-between" ref="left_title_Ref"> <div style="display: flex;flex-direction: row;justify-content: space-between" ref="left_title_Ref">
<p style="text-align:center; 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目团队</p> <p style="text-align:center; 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目团队</p>
<el-button style="" type="primary" >新增成员</el-button> <el-button type="primary" @click="onCreatePerson"></el-button>
</div> </div>
<div style="flex: 1; margin: 30px 0 0 0; background-color: white; border-radius: 10px;padding: 20px; <div style="flex: 1; margin: 30px 0 0 0; background-color: white; border-radius: 10px;padding: 20px;
display: flex;flex-direction: column;justify-content: space-between"> display: flex;flex-direction: column;justify-content: space-between">
<el-table <el-table
ref="tableRef" ref="tableRef"
style="width: 100%" class="projectTable"
:height="tableHeight" :height="tableHeight"
:data="tableData"> :data="tableData"
<el-table-column prop="staffFullname" label="姓名" min-width="25%"> </el-table-column> >
<el-table-column prop="projectStaffPosition" label="职位" min-width="35%"> <el-table-column prop="staffFullname" label="姓名" min-width="25%">
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" min-width="40%"> <el-table-column
prop="projectStaffPosition"
label="职位"
min-width="45%"
>
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="30%">
<template #default="scope"> <template #default="scope">
<span> <span>
<el-button <el-button
@ -40,9 +46,7 @@
> >
离队 离队
</el-button> </el-button>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -56,7 +60,14 @@
v-model:page-size="pageSize" v-model:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total" :total="total"
style="padding: 15px 15px 15px 15px;box-sizing:border-box;background: #fff;display: flex;justify-content: flex-end;"> style="
padding: 15px 15px 15px 15px;
box-sizing: border-box;
background: #fff;
display: flex;
justify-content: flex-end;
"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
@ -76,6 +87,11 @@
</div> </div>
</div> </div>
</div> </div>
<CreatePersonDialog
v-model:dialogFormVisible="dialogFormVisible"
@createdPerson="rehushTableData"
@onCannel="dialogFormVisible = false"
></CreatePersonDialog>
</template> </template>
<script setup> <script setup>
@ -111,17 +127,22 @@ onMounted(() => {
</script> </script>
<script> <script>
import EchartsPie from "@/components/echartsPie"; import EchartsPie from "../components/echartsPie";
import request from "../utils/request"; import request from "../utils/request";
import CreatePersonDialog from "../components/CreatePersonDialog";
export default { export default {
components: {
CreatePersonDialog,
EchartsPie
},
methods: { methods: {
getStationList() { getStationList() {
let projectId = this.$route.params.projectId let projectId = this.$route.params.projectId;
request({ request({
url: `project/${projectId}/group/stats`, url: `project/${projectId}/group/stats`,
method: 'get', method: "get",
}).then(response => { })
.then((response) => {
if (response.data.code === 200) { if (response.data.code === 200) {
console.log(response.data.data); console.log(response.data.data);
let data = response.data.data; let data = response.data.data;
@ -135,80 +156,111 @@ export default {
}); });
console.log(array); console.log(array);
} }
}).catch(function (error) {
console.log(error)
}) })
.catch(function (error) {
console.log(error);
});
}, },
onCreatePerson() {
this.dialogFormVisible = true;
},
deleteRow(index, rows) { deleteRow(index, rows) {
rows.splice(index, 1) rows.splice(index, 1);
}, },
// //
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val;
const data = {
pageCurrent: this.currentPage,
pageSize: val,
sortBy: "",
asc: true,
};
this.getTableData(data);
},
rehushTableData() {
this.dialogFormVisible = false;
const data = {
pageCurrent: this.currentPage,
pageSize: this.pageSize,
sortBy: "",
asc: true,
};
this.getTableData(data);
this.getStationList();
},
getTableData(param) {
let projectId = this.$route.params.projectId;
request({
url: `/project/${projectId}/group`,
method: "get",
params: param,
}).then(res => {
if (res.data.code === 200) {
console.log(res.data);
this.tableData = res.data.data.records;
this.total = res.data.data.total;
}
}).catch(function (error) {
console.log(error)
})
// request({
// url: `/project/${projectId}/group`,
// method: "get",
// params: param,
// }).then((res) => {
// console.log(res.data);
// this.tableData = res.data.data.records;
// this.total = res.data.data.total;
// });
}, },
// //
handleCurrentChange(val) { handleCurrentChange(val) {
this.currentPage = val;
const data = {
pageCurrent: val,
pageSize: this.pageSize,
sortBy: "",
asc: true,
};
this.getTableData(data);
}, },
}, },
mounted() { mounted() {
this.getStationList(); this.getStationList();
const param = {
pageCurrent: this.currentPage,
pageSize: this.pageSize,
sortBy: "",
asc: true,
};
this.getTableData(param);
}, },
components: {EchartsPie},
data() { data() {
return { return {
// //
stationList: [], stationList: [],
total: 5, total: 20,
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
tableData: [ dialogFormVisible: false,
{ tableData: [],
staffFullname: '王小虎', };
projectStaffPosition: '项目经理',
}, },
{ };
staffFullname: '王小虎',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小虎',
projectStaffPosition: '研发人员',
},
{
staffFullname: '王小明',
projectStaffPosition: '研发人员',
},
],
}
},
}
</script> </script>
<style scoped> <style scoped>
.projectTable {
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}
.pie_postBox {
border-radius: 10px;
}
#echartsPie {
border-radius: 10px;
}
</style> </style>