282 lines
8.2 KiB
Vue
282 lines
8.2 KiB
Vue
<template>
|
|
<div class="contentBox">
|
|
<div class="contentLeft">
|
|
<el-card>
|
|
<el-input v-model="deptName" :placeholder="proxy.$t('department.inputDepartmentName')" clearable>
|
|
<template #append>
|
|
<el-button :icon="Search" />
|
|
</template>
|
|
</el-input>
|
|
<div style="margin-top:10px">
|
|
<el-tree :data="deptOption" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<div class="contentRight">
|
|
<el-card>
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true">
|
|
<el-form-item :label="proxy.$t('position.positionName')" prop="positionName">
|
|
<el-input
|
|
v-model="queryParams.positionName"
|
|
:placeholder="proxy.$t('position.inputPositionName')"
|
|
clearable
|
|
style="width: 200px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="Search" @click="handleQuery">{{proxy.$t('button.search')}}</el-button>
|
|
<el-button icon="Refresh" @click="resetQuery">{{proxy.$t('button.reset')}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
icon="Plus"
|
|
@click="handleAdd"
|
|
>{{proxy.$t('position.addPosition')}}</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-table v-loading="loading" :data="positionList" border>
|
|
<el-table-column :label="proxy.$t('common.sort')" type="index" width="60" align="center" />
|
|
<el-table-column :label="proxy.$t('position.positionName')" align="center" prop="postName" />
|
|
<el-table-column :label="proxy.$t('common.customerAffiliation')" align="center" prop="customerName" />
|
|
<el-table-column :label="proxy.$t('position.department')" align="center" prop="deptName" />
|
|
<el-table-column :label="proxy.$t('customer.createBy')" align="center" prop="createBy" />
|
|
<el-table-column :label="proxy.$t('customer.createTime')" align="center" prop="createTime" width="160" />
|
|
<el-table-column :label="proxy.$t('common.action')" align="center" width="150">
|
|
<template #default="scope">
|
|
<el-button
|
|
link
|
|
type="primary"
|
|
icon="Edit"
|
|
@click="handleUpdate(scope.row)"
|
|
>{{proxy.$t('button.edit')}}</el-button>
|
|
<el-button
|
|
link
|
|
type="primary"
|
|
icon="Delete"
|
|
@click="handleDelete(scope.row)"
|
|
>{{proxy.$t('button.delete')}}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
v-if="total > 0"
|
|
v-model:current-page="queryParams.pageNum"
|
|
v-model:page-size="queryParams.pageSize"
|
|
:total="total"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<PostDialog
|
|
ref="dialogRef"
|
|
:title="dialog.title"
|
|
:parent-id="parentId"
|
|
:select-id="queryParams.deptId"
|
|
:select-name="selectedName"
|
|
:formData="dialog.form"
|
|
v-model="dialog.visible"
|
|
@success="handleSuccess"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import {Search} from "@element-plus/icons-vue";
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import {getDepartmentPostListApi, getDepartmentTreeApi, deleteDepartmentPostApi,getDepartmentPostDetailApi} from '@/api/customer'
|
|
import PostDialog from './common/PostDialog.vue';
|
|
const { proxy } = getCurrentInstance();
|
|
const loading = ref(false)
|
|
const total = ref(0)
|
|
const dialog = reactive({
|
|
title: proxy.$t('position.addPosition'),
|
|
visible: false,
|
|
form: {
|
|
customerId:'',
|
|
customerName:'',
|
|
deptId: '',
|
|
deptName:'',
|
|
postName:'',
|
|
postId:'',
|
|
id:''
|
|
}
|
|
})
|
|
// 查询参数
|
|
const queryParams = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
postName: undefined,
|
|
deptId: undefined,
|
|
})
|
|
|
|
const deptName = ref("");
|
|
const deptOption = ref(undefined);
|
|
const filterNode = (value, data) => {
|
|
if (!value) return true;
|
|
return data.label.indexOf(value) !== -1;
|
|
};
|
|
const dialogRef = ref()
|
|
const selectedName = ref('')
|
|
const parentId = ref(null)
|
|
const handleNodeClick = (data) => {
|
|
console.log(data,'===data')
|
|
queryParams.deptId = data.id;
|
|
selectedName.value = data.label;
|
|
parentId.value = data.parentId;
|
|
getList();
|
|
};
|
|
watch(deptName, val => {
|
|
proxy.$refs["deptTreeRef"].filter(val);
|
|
});
|
|
|
|
// 岗位列表数据
|
|
const positionList = ref([])
|
|
|
|
// 查询按钮操作
|
|
const handleQuery = () => {
|
|
queryParams.pageNum = 1
|
|
getList()
|
|
}
|
|
|
|
// 重置按钮操作
|
|
const resetQuery = () => {
|
|
queryParams.deptId = undefined;
|
|
proxy.$refs.deptTreeRef.setCurrentKey(null);
|
|
queryParams.postName = undefined
|
|
handleQuery()
|
|
}
|
|
|
|
// 新增按钮操作
|
|
const handleAdd = () => {
|
|
// 处理新增部门
|
|
dialog.title = proxy.$t('position.addPosition')
|
|
dialog.visible = true
|
|
}
|
|
|
|
// 修改按钮操作
|
|
const handleUpdate = async(row) => {
|
|
// 处理编辑部门
|
|
console.log(row,'===')
|
|
const res = await getDepartmentPostDetailApi(row.id)
|
|
if(res.code === 200) {
|
|
dialog.title = proxy.$t('position.editPosition')
|
|
dialog.visible = true
|
|
dialog.form.postName = res.data.postName
|
|
dialog.form.customerId = res.data.customerId
|
|
dialog.form.deptId = res.data.deptId
|
|
dialog.form.customerName = res.data.customerName
|
|
dialog.form.deptName = res.data.deptName
|
|
dialog.form.postId = res.data.postId
|
|
dialog.form.id = res.data.id
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
}
|
|
|
|
// 添加成功回调方法
|
|
const handleSuccess = () => {
|
|
getList()
|
|
}
|
|
// 删除按钮操作
|
|
const handleDelete = (row) => {
|
|
console.log(row)
|
|
ElMessageBox.confirm(
|
|
proxy.$t('common.deleteItem'),
|
|
proxy.$t('common.warning'),
|
|
{
|
|
confirmButtonText: proxy.$t('button.save'),
|
|
cancelButtonText: proxy.$t('button.cancel'),
|
|
type: "warning"
|
|
}
|
|
).then(async () => {
|
|
// 这里调用删除API
|
|
const res = await deleteDepartmentPostApi(row.id)
|
|
if (res.code === 200) {
|
|
ElMessage.success('删除成功')
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
getList()
|
|
}).catch(() => {})
|
|
}
|
|
// 获取部门树形数据
|
|
const getDeptTree = async() => {
|
|
// 这里调用获取部门树形数据的API
|
|
const res = await getDepartmentTreeApi();
|
|
if(res.code === 200) {
|
|
deptOption.value = res.data
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
}
|
|
// 获取岗位列表
|
|
const getList = async() => {
|
|
loading.value = true
|
|
// 这里调用后端API获取数据
|
|
const res = await getDepartmentPostListApi(queryParams);
|
|
console.log(res,'000')
|
|
if(res.code === 200) {
|
|
positionList.value = res.rows
|
|
total.value = res.total
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 500)
|
|
}
|
|
|
|
const handleSizeChange = (val) => {
|
|
queryParams.pageSize = val
|
|
getList()
|
|
}
|
|
|
|
const handleCurrentChange = (val) => {
|
|
queryParams.pageNum = val
|
|
getList()
|
|
}
|
|
onMounted(() => {
|
|
getList()
|
|
getDeptTree()
|
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.contentBox {
|
|
height:calc(100vh - 130px);
|
|
margin:20px;
|
|
display: flex;
|
|
.contentLeft {
|
|
width:24%;
|
|
margin-right:14px;
|
|
}
|
|
.contentRight {
|
|
flex:1;
|
|
}
|
|
.contentLeft,.contentRight {
|
|
height:100%;
|
|
overflow-y: scroll;
|
|
padding-bottom:10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.card {
|
|
width:100%;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 20px;
|
|
}
|
|
</style> |