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> |
<template> |
||||
<div style="display: flex"> |
<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> |
||||
<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 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> |
</el-table> |
||||
<div style="margin-top: 3%; margin-left: 10px"> |
<div style="margin-top: 3%; margin-left: 10px"> |
||||
<div style="margin-left: 10px; margin-top: 5%"> |
<div style="margin-left: 10px; margin-top: 5%"> |
||||
<div style="margin-top: 10px"> |
<div style="margin-top: 10px"> |
||||
<el-button type="primary">新增</el-button> |
|
||||
|
<el-button type="primary" @click="groupaddtion">新增</el-button> |
||||
</div> |
</div> |
||||
<div style="margin-top: 10px"> |
<div style="margin-top: 10px"> |
||||
<el-button type="success">编辑</el-button> |
|
||||
|
<el-button type="success" @click="editgroup">编辑</el-button> |
||||
</div> |
</div> |
||||
<div style="margin-top: 10px"> |
<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> |
</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> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import { mapGetters } from "vuex"; |
|
||||
|
import Sortable from "sortablejs"; |
||||
|
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
||||
|
import { mapState } from "vuex"; |
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
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: { |
computed: { |
||||
...mapGetters(["customerOrg"]), |
|
||||
|
...mapState(["personnelUnit"]), |
||||
|
}, |
||||
|
created() { |
||||
|
this.rowDrop(); |
||||
}, |
}, |
||||
mounted() { |
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> |
</script> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue