pengjun
2 years ago
4 changed files with 444 additions and 65 deletions
-
131src/components/unitGrouping/unitGroupCategory.vue
-
355src/components/unitGrouping/unitGroupingTable.vue
-
2src/store/index.js
-
21src/views/customerOrg/customerOrgGroup.vue
@ -1,60 +1,353 @@ |
|||
<template> |
|||
<div style="display: flex"> |
|||
<el-table :data="tableData" style="width: 100%"> |
|||
<el-table-column prop="index" label="序号" width=""> </el-table-column> |
|||
<el-table-column prop="groupnumber" label="分组编号" width=""> |
|||
<el-table |
|||
:data="personnelUnit.personnelgrouping" |
|||
style="width: 100%" |
|||
row-key="id" |
|||
highlight-current-row |
|||
@row-click="clickoncolumn" |
|||
class="el-table__body-wrapper tbody" |
|||
> |
|||
<el-table-column type="index" label="序号" width=""> </el-table-column> |
|||
<el-table-column prop="displayName" label="名称" width=""> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="creatorName" label="创建者"> </el-table-column> |
|||
<el-table-column prop="" label="创建时间"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.creationTime | dateFormat }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="forSexId" label="性别"> </el-table-column> |
|||
<el-table-column prop="maritalStatusId" label="婚姻状况"> |
|||
</el-table-column> |
|||
<el-table-column prop="groupname" label="分组名称"> </el-table-column> |
|||
<el-table-column prop="sex" label="性别"> </el-table-column> |
|||
<el-table-column prop="maritalstatus" label="婚姻状况"> </el-table-column> |
|||
<el-table-column prop="price" label="价格"> </el-table-column> |
|||
<el-table-column label="操作"> |
|||
<template> |
|||
<el-tag |
|||
class="move" |
|||
style="cursor: move; margin-left: 15px" |
|||
draggable="true" |
|||
> |
|||
<i class="el-icon-d-caret" style="width: 1rem; height: 1rem"></i> |
|||
</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div style="margin-top: 3%; margin-left: 10px"> |
|||
<div style="margin-left: 10px; margin-top: 5%"> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="primary">新增</el-button> |
|||
<el-button type="primary" @click="groupaddtion">新增</el-button> |
|||
</div> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="success">编辑</el-button> |
|||
<el-button type="success" @click="editgroup">编辑</el-button> |
|||
</div> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="danger">删除</el-button> |
|||
<el-button type="danger" @click="deletegroup">删除</el-button> |
|||
</div> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="primary" @click="topping">置顶</el-button> |
|||
</div> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="primary" @click="bottoming">置低</el-button> |
|||
</div> |
|||
<div style="margin-top: 10px"> |
|||
<el-button type="primary" @click="sortok" :disabled="isshow" |
|||
>确定</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 新增或者编辑弹框 --> |
|||
<el-dialog |
|||
:title="title == '1' ? '新增' : '编辑'" |
|||
:visible.sync="dialogVisible" |
|||
width="50%" |
|||
> |
|||
<el-form :model="form" label-width="80px"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="分组名称"> |
|||
<el-input v-model="form.displayName"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="价格"> |
|||
<el-input v-model="form.price"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="适用性别"> |
|||
<el-select v-model="form.forSexId" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in forSexId" |
|||
:key="item.id" |
|||
:label="item.displayName" |
|||
:value="item.id" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="婚姻状况"> |
|||
<el-select v-model="form.maritalStatusId" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in maritalStatusId" |
|||
:key="item.id" |
|||
:label="item.displayName" |
|||
:value="item.id" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="年龄下限"> |
|||
<el-input v-model="form.ageLowerLimit"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="年龄上限"> |
|||
<el-input v-model="form.ageUpperLimit"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="适用职务"> |
|||
<el-input v-model="form.jobPost"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="适用职称"> |
|||
<el-input v-model="form.jobTitle"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="备注"> |
|||
<el-input v-model="form.remark"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="Onsubmint">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<!-- --> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import Sortable from "sortablejs"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { mapState } from "vuex"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
tableData: [ |
|||
{ |
|||
index: "2", |
|||
groupnumber: "33", |
|||
groupname: "全部", |
|||
sex: "男", |
|||
maritalstatus: "未婚", |
|||
price: "0", |
|||
}, |
|||
{ |
|||
index: "1", |
|||
groupnumber: "2fd", |
|||
groupname: "全部", |
|||
sex: "女", |
|||
maritalstatus: "已婚", |
|||
price: "0", |
|||
}, |
|||
], |
|||
isshow: true, |
|||
title: 1, |
|||
form: { |
|||
displayName: "", |
|||
price: "", |
|||
forSexId: "", |
|||
maritalStatusId: "", |
|||
ageLowerLimit: "", |
|||
ageUpperLimit: "", |
|||
jobPost: "", |
|||
jobTitle: "", |
|||
remark: "", |
|||
}, |
|||
forSexId: [], //性别id |
|||
maritalStatusId: [], //婚姻状况 |
|||
dialogVisible: false, |
|||
tableData: [], |
|||
initTableData: [], |
|||
// tableData: [ |
|||
|
|||
// ], |
|||
}; |
|||
}, |
|||
computed: { |
|||
...mapGetters(["customerOrg"]), |
|||
...mapState(["personnelUnit"]), |
|||
}, |
|||
created() { |
|||
this.rowDrop(); |
|||
}, |
|||
mounted() { |
|||
console.log(customerOrg.personnelgrouping); |
|||
//console.log('00000',this.personnelUnit.id); |
|||
}, |
|||
methods: { |
|||
//确定排序 |
|||
sortok() { |
|||
const result = []; |
|||
this.tableData.forEach((item, index) => { |
|||
// index 从0开始的， 你的displayOrder从大到小排 |
|||
console.log(item.id); |
|||
// const currentDisplayOrder = this.tableData.length -1 |
|||
const currentDisplayOrder = this.initTableData[index].displayOrder; |
|||
if (item.displayOrder != currentDisplayOrder) { |
|||
// 如果它的displayOrder和它当前所在的位置不同代表挪动过位置 |
|||
result.push({ id: item.id, displayOrder: currentDisplayOrder }); |
|||
} |
|||
}); |
|||
putapi("/api/app/customerorggroup/updatesortmany", { |
|||
itemList: result, |
|||
}).then((res) => { |
|||
this.$message.success("操作成功"); |
|||
this.isshow = true; |
|||
this.getlist(); |
|||
}); |
|||
}, |
|||
//初始化Sortable组件 |
|||
rowDrop() { |
|||
this.$nextTick(() => { |
|||
const tbody = document.querySelector(".el-table__body-wrapper tbody"); |
|||
const _this = this; |
|||
Sortable.create(tbody, { |
|||
handle: ".move", |
|||
animation: 300, |
|||
onEnd({ newIndex, oldIndex }) { |
|||
_this.isshow = false; |
|||
const currRow = _this.tableData.splice(oldIndex, 1)[0]; |
|||
_this.tableData.splice(newIndex, 0, currRow); |
|||
_this.tableData.map((item, index) => { |
|||
if (index == newIndex && index == oldIndex) { |
|||
} else if (index == oldIndex) { |
|||
} else if (index == newIndex) { |
|||
} |
|||
}); |
|||
console.log(_this.tableData.map((item) => item.displayOrder)); |
|||
}, |
|||
}); |
|||
}); |
|||
}, |
|||
getlist() { |
|||
getapi( |
|||
`/api/app/customer-org-group/in-customer-org-id/${this.personnelUnit.id}` |
|||
).then((res) => { |
|||
this.tableData = res.data; |
|||
this.personnelUnit.personnelgrouping = res.data; |
|||
this.initTableData = [...res.data]; |
|||
// console.log( this.personnelUnit.personnelgrouping); |
|||
}); |
|||
}, |
|||
//置低 |
|||
bottoming() { |
|||
if (this.form.id == undefined) { |
|||
this.$message.warning("请选择操作的数据"); |
|||
} else { |
|||
putapi( |
|||
`/api/app/customerorggroup/updatemanysort?id=${this.form.id}&SortType=2` |
|||
).then((res) => { |
|||
this.$message.success("操作成功"); |
|||
this.getlist(); |
|||
}); |
|||
} |
|||
}, |
|||
//置顶 |
|||
topping() { |
|||
if (this.form.id == undefined) { |
|||
this.$message.warning("请选择操作的数据"); |
|||
} else { |
|||
putapi( |
|||
`/api/app/customerorggroup/updatemanysort?id=${this.form.id}&SortType=1` |
|||
).then((res) => { |
|||
this.$message.success("操作成功"); |
|||
this.getlist(); |
|||
}); |
|||
} |
|||
}, |
|||
//删除 |
|||
deletegroup() { |
|||
if (this.form.id == undefined) { |
|||
this.$message.warning("请选择需要操作的数据"); |
|||
} else { |
|||
deletapi(`/api/app/customer-org-group/${this.form.id}`).then((res) => { |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
} |
|||
}, |
|||
//点击当前列 |
|||
clickoncolumn(row) { |
|||
getapi(`/api/app/customer-org-group/${row.id}`).then((res) => { |
|||
this.form = res.data; |
|||
this.personnelUnit.form=res.data |
|||
}); |
|||
|
|||
// |
|||
getapi(`/api/app/customer-org-group-detail/customer-org-group-detail-in-asbitem?CustomerOrgGroupId=${this.personnelUnit.id}`).then(res=>{ |
|||
console.log(res,'我是分组'); |
|||
}) |
|||
}, |
|||
//编辑弹框 |
|||
editgroup() { |
|||
this.title = 2; |
|||
this.obtainsuperior(); |
|||
this.dialogVisible = true; |
|||
}, |
|||
//获取性别和婚姻状况 |
|||
obtainsuperior() { |
|||
//获取性别 |
|||
getapi("/api/app/sex").then((res) => { |
|||
this.forSexId = res.data; |
|||
}); |
|||
//获取婚姻状况 |
|||
getapi("/api/app/marital-statuses").then((res) => { |
|||
this.maritalStatusId = res.data.items; |
|||
console.log(res); |
|||
}); |
|||
}, |
|||
Onsubmint() { |
|||
if (this.title == 1) { |
|||
let obj = { |
|||
displayName: this.form.displayName, |
|||
price: Number(this.form.price), |
|||
forSexId: this.form.forSexId, |
|||
maritalStatusId: this.form.maritalStatusId, |
|||
ageLowerLimit: Number(this.form.ageLowerLimit), |
|||
ageUpperLimit: Number(this.form.ageUpperLimit), |
|||
jobPost: this.form.jobPost, |
|||
jobTitle: this.form.jobTitle, |
|||
remark: this.form.remark, |
|||
}; |
|||
postapi( |
|||
`/api/app/customer-org-group/in-customer-org-id/${this.personnelUnit.id}`, |
|||
obj |
|||
).then((res) => { |
|||
this.$message.success("新增成功"); |
|||
this.dialogVisible = false; |
|||
}); |
|||
} else if (this.title == 2) { |
|||
let obj = { |
|||
displayName: this.form.displayName, |
|||
price: Number(this.form.price), |
|||
forSexId: this.form.forSexId, |
|||
maritalStatusId: this.form.maritalStatusId, |
|||
ageLowerLimit: Number(this.form.ageLowerLimit), |
|||
ageUpperLimit: Number(this.form.ageUpperLimit), |
|||
jobPost: this.form.jobPost, |
|||
jobTitle: this.form.jobTitle, |
|||
remark: this.form.remark, |
|||
}; |
|||
putapi(`/api/app/customer-org-group/${this.form.id}`, obj).then( |
|||
(res) => { |
|||
this.$message.success("修改成功"); |
|||
this.dialogVisible = false; |
|||
} |
|||
); |
|||
} |
|||
}, |
|||
//新增弹框 |
|||
groupaddtion() { |
|||
if (this.personnelUnit.id == "") { |
|||
this.$message.warning("请选择单位"); |
|||
} else { |
|||
this.dialogVisible = true; |
|||
this.title = 1; |
|||
this.obtainsuperior(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue