完成团队页
parent
8df4828202
commit
2ae6aadd38
|
|
@ -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>
|
||||
|
|
@ -104,16 +104,17 @@ export default {
|
|||
|
||||
},
|
||||
created() {
|
||||
const that = this
|
||||
// watch 路由的参数，以便再次获取数据
|
||||
this.$watch(
|
||||
() => this.$route.query,
|
||||
() => that.$route.query,
|
||||
() => {
|
||||
if (this.$route.query.currentPage)
|
||||
this.currentPage = parseInt(this.$route.query.currentPage)
|
||||
if (this.$route.query.pageSize)
|
||||
this.pageSize = parseInt(this.$route.query.pageSize)
|
||||
if (that.$route.query.currentPage)
|
||||
that.currentPage = parseInt(that.$route.query.currentPage)
|
||||
if (that.$route.query.pageSize)
|
||||
that.pageSize = parseInt(that.$route.query.pageSize)
|
||||
|
||||
this.getProjects()
|
||||
that.getProjects()
|
||||
},
|
||||
// 组件创建完后获取数据，
|
||||
// 此时 data 已经被 observed 了
|
||||
|
|
|
|||
|
|
@ -4,19 +4,25 @@
|
|||
<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">
|
||||
<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 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">
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
style="width: 100%"
|
||||
class="projectTable"
|
||||
:height="tableHeight"
|
||||
:data="tableData">
|
||||
<el-table-column prop="staffFullname" label="姓名" min-width="25%"> </el-table-column>
|
||||
<el-table-column prop="projectStaffPosition" label="职位" min-width="35%">
|
||||
:data="tableData"
|
||||
>
|
||||
<el-table-column prop="staffFullname" label="姓名" min-width="25%">
|
||||
</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">
|
||||
<span>
|
||||
<el-button
|
||||
|
|
@ -24,25 +30,23 @@
|
|||
type="text"
|
||||
size="midium"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
@click.prevent="deleteRow(scope.$index, tableData)"
|
||||
type="text"
|
||||
size="midium"
|
||||
>
|
||||
交接
|
||||
</el-button>
|
||||
<el-button
|
||||
@click.prevent="deleteRow(scope.$index, tableData)"
|
||||
type="text"
|
||||
size="midium"
|
||||
>
|
||||
离队
|
||||
</el-button>
|
||||
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
@click.prevent="deleteRow(scope.$index, tableData)"
|
||||
type="text"
|
||||
size="midium"
|
||||
>
|
||||
交接
|
||||
</el-button>
|
||||
<el-button
|
||||
@click.prevent="deleteRow(scope.$index, tableData)"
|
||||
type="text"
|
||||
size="midium"
|
||||
>
|
||||
离队
|
||||
</el-button>
|
||||
</span>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -56,7 +60,14 @@
|
|||
v-model:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
: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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -76,6 +87,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CreatePersonDialog
|
||||
v-model:dialogFormVisible="dialogFormVisible"
|
||||
@createdPerson="rehushTableData"
|
||||
@onCannel="dialogFormVisible = false"
|
||||
></CreatePersonDialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -111,104 +127,140 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<script>
|
||||
import EchartsPie from "@/components/echartsPie";
|
||||
import EchartsPie from "../components/echartsPie";
|
||||
import request from "../utils/request";
|
||||
|
||||
import CreatePersonDialog from "../components/CreatePersonDialog";
|
||||
export default {
|
||||
components: {
|
||||
CreatePersonDialog,
|
||||
EchartsPie
|
||||
},
|
||||
methods: {
|
||||
getStationList() {
|
||||
let projectId = this.$route.params.projectId
|
||||
let projectId = this.$route.params.projectId;
|
||||
request({
|
||||
url: `project/${projectId}/group/stats`,
|
||||
method: 'get',
|
||||
}).then(response => {
|
||||
if (response.data.code === 200) {
|
||||
console.log(response.data.data);
|
||||
let data = response.data.data;
|
||||
let array = [];
|
||||
for (let key in data) {
|
||||
array.push({value: data[key], name: key});
|
||||
}
|
||||
this.stationList = array;
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.pie_post.updateEcharts();
|
||||
method: "get",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.data.code === 200) {
|
||||
console.log(response.data.data);
|
||||
let data = response.data.data;
|
||||
let array = [];
|
||||
for (let key in data) {
|
||||
array.push({ value: data[key], name: key });
|
||||
}
|
||||
this.stationList = array;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.pie_post.updateEcharts();
|
||||
});
|
||||
console.log(array);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
console.log(array);
|
||||
},
|
||||
onCreatePerson() {
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
|
||||
deleteRow(index, rows) {
|
||||
rows.splice(index, 1);
|
||||
},
|
||||
// 选择一页显示多少条数据
|
||||
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)
|
||||
})
|
||||
},
|
||||
deleteRow(index, rows) {
|
||||
rows.splice(index, 1)
|
||||
},
|
||||
// 选择一页显示多少条数据
|
||||
handleSizeChange(val) {
|
||||
|
||||
// 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) {
|
||||
|
||||
this.currentPage = val;
|
||||
const data = {
|
||||
pageCurrent: val,
|
||||
pageSize: this.pageSize,
|
||||
sortBy: "",
|
||||
asc: true,
|
||||
};
|
||||
this.getTableData(data);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getStationList();
|
||||
const param = {
|
||||
pageCurrent: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
sortBy: "",
|
||||
asc: true,
|
||||
};
|
||||
this.getTableData(param);
|
||||
},
|
||||
components: {EchartsPie},
|
||||
data() {
|
||||
return {
|
||||
// 岗位列表
|
||||
stationList: [],
|
||||
total: 5,
|
||||
total: 20,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
tableData: [
|
||||
{
|
||||
staffFullname: '王小虎',
|
||||
projectStaffPosition: '项目经理',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小虎',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小明',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小明',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小明',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小明',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小明',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小明',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小虎',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
{
|
||||
staffFullname: '王小明',
|
||||
projectStaffPosition: '研发人员',
|
||||
},
|
||||
],
|
||||
}
|
||||
dialogFormVisible: false,
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.projectTable {
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pie_postBox {
|
||||
border-radius: 10px;
|
||||
}
|
||||
#echartsPie {
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue