You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
380 lines
14 KiB
380 lines
14 KiB
<template> |
|
<div class="container"> |
|
<el-tabs v-model="activeName" type="card"> |
|
<el-tab-pane label="情指行" name="情指行"> </el-tab-pane> |
|
<el-tab-pane label="重点人员" name="重点人员"> </el-tab-pane> |
|
<el-tab-pane label="民意感知" name="民意感知"> </el-tab-pane> |
|
</el-tabs> |
|
<header> |
|
<el-row> |
|
<el-col :span="12"> |
|
<div class="form-row flex"> |
|
<label class="text-center">{{ activeName }}</label> |
|
<div class="flex wrap query-box"> |
|
<el-input |
|
placeholder="单位编码" |
|
v-model="query.externalId" |
|
clearable |
|
style="width: 200px" |
|
/> |
|
<el-input |
|
placeholder="单位名称" |
|
v-model="query.externalName" |
|
clearable |
|
style="width: 200px" |
|
/> |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="12"> |
|
<div class="form-row flex"> |
|
<label class="text-center">数字督察</label> |
|
<div class="flex wrap query-box"> |
|
<div style="width: 280px"> |
|
<depart-tree-select |
|
v-model="query.internalId" |
|
placeholder="请选择机构" |
|
/> |
|
</div> |
|
<el-select |
|
style="width: 200px" |
|
placeholder="单位层级" |
|
v-model="query.level" |
|
> |
|
<el-option |
|
value="2" |
|
label="二级单位" |
|
></el-option> |
|
<el-option |
|
value="3" |
|
label="三级单位" |
|
></el-option> |
|
<el-option |
|
value="4" |
|
label="四级单位" |
|
></el-option> |
|
</el-select> |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<div class="flex between mt-20 mb-26"> |
|
<el-button type="primary" @click="handleAdd"> |
|
<template #icon><icon name="el-icon-Plus" /></template> |
|
新增</el-button |
|
> |
|
<div> |
|
<el-button type="primary" @click="getList"> |
|
<template #icon |
|
><icon name="el-icon-Search" |
|
/></template> |
|
查询</el-button |
|
> |
|
<el-button @click="reset">重置</el-button> |
|
</div> |
|
</div> |
|
</header> |
|
<p></p> |
|
<el-tabs v-model="activeMaping"> |
|
<el-tab-pane label="全部" name="all"> |
|
<div class="table-container"> |
|
<el-table :data="list"> |
|
<el-table-column |
|
:label="`${activeName}单位编码`" |
|
prop="externalId" |
|
width="150" |
|
/> |
|
<el-table-column |
|
:label="`${activeName}单位名称`" |
|
prop="externalName" |
|
/> |
|
<el-table-column |
|
label="数字督察单位" |
|
prop="internalName" |
|
/> |
|
<el-table-column |
|
label="单位层级" |
|
prop="level" |
|
width="100" |
|
align="center" |
|
> |
|
<template #default="{ row }"> |
|
<span v-if="row.level === 2">二级单位</span> |
|
<span v-if="row.level === 3">三级单位</span> |
|
<span v-if="row.level === 4">四级单位</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="最后修改时间" |
|
prop="updateTime" |
|
width="160" |
|
/> |
|
<el-table-column label="操作" width="160"> |
|
<template #default="{ row }"> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleEdit(row)" |
|
>编辑</el-button |
|
> |
|
<el-button |
|
type="danger" |
|
link |
|
@click="handleDel(row)" |
|
>删除</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex end mt-8"> |
|
<el-pagination |
|
@size-change="getList" |
|
@current-change="getList" |
|
:current-page="query.current" |
|
:page-sizes="[10, 20, 50]" |
|
v-model:page-size="query.size" |
|
v-model:current-page="query.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="total" |
|
> |
|
</el-pagination> |
|
</div> |
|
</el-tab-pane> |
|
<el-tab-pane label="未映射" name="noMaping"> |
|
<template #label> |
|
<el-badge :value="0"> |
|
<span>未映射</span> |
|
</el-badge> |
|
</template> |
|
<div class="table-container"> |
|
<el-table :data="list"> |
|
<el-table-column |
|
:label="`${activeName}单位编码`" |
|
prop="externalId" |
|
width="150" |
|
/> |
|
<el-table-column |
|
:label="`${activeName}单位名称`" |
|
prop="externalName" |
|
/> |
|
<el-table-column |
|
label="数字督察单位" |
|
prop="internalName" |
|
/> |
|
<el-table-column |
|
label="单位层级" |
|
prop="level" |
|
width="100" |
|
align="center" |
|
> |
|
<template #default="{ row }"> |
|
<span v-if="row.level === 2">二级单位</span> |
|
<span v-if="row.level === 3">三级单位</span> |
|
<span v-if="row.level === 4">四级单位</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="最后修改时间" |
|
prop="updateTime" |
|
width="160" |
|
/> |
|
<el-table-column label="操作" width="160"> |
|
<template #default="{ row }"> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleEdit(row)" |
|
>编辑</el-button |
|
> |
|
<el-button |
|
type="danger" |
|
link |
|
@click="handleDel(row)" |
|
>删除</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex end mt-8"> |
|
<el-pagination |
|
@size-change="getList" |
|
@current-change="getList" |
|
:current-page="query.current" |
|
:page-sizes="[10, 20, 50]" |
|
v-model:page-size="query.size" |
|
v-model:current-page="query.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="total" |
|
> |
|
</el-pagination> |
|
</div> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</div> |
|
|
|
<el-dialog |
|
v-model="show" |
|
:title="mode === 'add' ? '新增机构映射' : '编辑机构映射'" |
|
width="600" |
|
> |
|
<el-form :label-width="140" :model="formData" ref="fomrRef"> |
|
<el-form-item |
|
label="来源" |
|
prop="source" |
|
:rules="{ |
|
required: true, |
|
message: '请选择', |
|
trigger: ['blur'], |
|
}" |
|
> |
|
<el-select |
|
v-model="formData.source" |
|
clearable |
|
style="width: 280px" |
|
> |
|
<el-option label="情指行" value="情指行"></el-option> |
|
<el-option label="重点人员" value="重点人员"></el-option> |
|
<el-option label="民意感知" value="民意感知"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item |
|
label="单位编码" |
|
prop="externalId" |
|
:rules="{ |
|
required: true, |
|
message: '请输入', |
|
trigger: ['blur'], |
|
}" |
|
> |
|
<el-input |
|
v-model="formData.externalId" |
|
clearable |
|
style="width: 280px" |
|
placeholder="请输入" |
|
/> |
|
</el-form-item> |
|
<el-form-item |
|
label="单位名称" |
|
prop="externalName" |
|
:rules="{ |
|
required: true, |
|
message: '请输入', |
|
trigger: ['blur'], |
|
}" |
|
> |
|
<el-input |
|
v-model="formData.externalName" |
|
clearable |
|
style="width: 280px" |
|
placeholder="请输入" |
|
/> |
|
</el-form-item> |
|
<el-form-item |
|
label="数字督察单位" |
|
prop="internalId" |
|
:rules="{ |
|
required: true, |
|
message: '请选择', |
|
trigger: ['blur'], |
|
}" |
|
> |
|
<depart-tree-select |
|
v-model="formData.internalId" |
|
placeholder="请选择" |
|
style="width: 280px" |
|
/> |
|
</el-form-item> |
|
</el-form> |
|
<footer class="flex end mt-40"> |
|
<el-button @click="show = false" size="large">取消</el-button> |
|
<el-button type="primary" @click="submit" size="large" |
|
>确定</el-button |
|
> |
|
</footer> |
|
</el-dialog> |
|
</template> |
|
<script setup> |
|
import { |
|
listDepartMaping, |
|
addDepartMaping, |
|
updateDepartMaping, |
|
delDepartMaping, |
|
} from "@/api/system/departMaping"; |
|
import feedback from "@/utils/feedback"; |
|
const activeName = ref("情指行"); |
|
const activeMaping = ref("all"); |
|
const query = ref({ |
|
current: 1, |
|
size: 10, |
|
}); |
|
|
|
const list = ref([]); |
|
const total = ref(0); |
|
function getList() { |
|
listDepartMaping(activeName.value, query.value).then((data) => { |
|
list.value = data.records; |
|
total.value = data.total; |
|
}); |
|
} |
|
|
|
function reset() { |
|
query.value = { |
|
current: 1, |
|
size: 10, |
|
}; |
|
getList(); |
|
} |
|
|
|
watch(activeName, () => { |
|
getList(); |
|
}); |
|
|
|
onMounted(() => { |
|
getList(); |
|
}); |
|
|
|
const show = ref(false); |
|
const mode = ref("add"); |
|
const formData = ref({}); |
|
const fomrRef = ref(); |
|
|
|
function handleAdd() { |
|
formData.value = { |
|
source: activeName.value, |
|
}; |
|
show.value = true; |
|
mode.value = "add"; |
|
} |
|
function handleEdit(row) { |
|
formData.value = { ...row }; |
|
formData.value.source = activeName.value; |
|
show.value = true; |
|
mode.value = "edit"; |
|
} |
|
|
|
async function handleDel(row) { |
|
await feedback.confirm("确定要删除该数据？"); |
|
await delDepartMaping(row.id); |
|
getList(); |
|
feedback.msgSuccess("删除成功"); |
|
} |
|
|
|
async function submit() { |
|
await fomrRef.value.validate(); |
|
if (mode.value === "add") { |
|
await addDepartMaping(formData.value); |
|
} else { |
|
await updateDepartMaping(formData.value); |
|
} |
|
show.value = false; |
|
formData.value = { |
|
source: activeName.value, |
|
}; |
|
getList(); |
|
feedback.msgSuccess("操作成功"); |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
</style> |