ui库和web端产品库合并版本(还需修复细节)
This commit is contained in:
321
ui/packages/common/AiParty/AiParty.vue
Normal file
321
ui/packages/common/AiParty/AiParty.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<section class="ai-partyorg">
|
||||
<el-button
|
||||
v-if="!customClicker"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="showDialog"
|
||||
:disabled="disabled">
|
||||
{{ dialogTitle || '选择党组织' }}
|
||||
</el-button>
|
||||
<div v-else class="custom-clicker" @click="showDialog">
|
||||
<slot/>
|
||||
</div>
|
||||
<ai-dialog
|
||||
:visible.sync="dialog"
|
||||
:modal-append-to-body='true'
|
||||
:destroy-on-close="false"
|
||||
append-to-body
|
||||
:title="type === '0' ? '选择党组织' : '选择小区'"
|
||||
custom-class="ai-partyorg__dialog"
|
||||
@onConfirm="confirmParty"
|
||||
width="720px">
|
||||
<div v-if="mode=='tree'" class="left_tree">
|
||||
<el-input v-if="showSearchInput" size="small" v-model="filterText"
|
||||
:placeholder="type === '0' ? '请输入党组织名称' : '请输入小区名称'" clearable/>
|
||||
<div class="left_cont">
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
:current-node-key="value"
|
||||
:default-expanded-keys="defaultExpanded"
|
||||
:default-checked-keys="defaultChecked"
|
||||
highlight-current
|
||||
ref="partyOrgTree"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"/>
|
||||
</div>
|
||||
</div>
|
||||
<party-trans v-if="mode=='trans'" :orgs="treeData" @change="v=>selectedTemp=v"
|
||||
:multiple-selection="multipleSelection"/>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PartyTrans from "./partyTrans";
|
||||
|
||||
export default {
|
||||
name: "AiParty",
|
||||
components: {PartyTrans},
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "change",
|
||||
},
|
||||
props: {
|
||||
topOrgId: {type: String, default: ''},
|
||||
value: {type: [String, Array]},
|
||||
instance: Function,
|
||||
type: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
dialogTitle: {
|
||||
type: String
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: '/app/partyOrganization/queryAllChildren'
|
||||
},
|
||||
customClicker: {type: Boolean, default: false},
|
||||
mode: {type: String, default: 'tree'},
|
||||
multipleSelection: {type: Boolean, default: false},
|
||||
showSearchInput: {type: Boolean, default: true},
|
||||
disabled: {type: Boolean, default: false},
|
||||
isEmpty: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
name: String
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.partyOrgTree.filter(val);
|
||||
},
|
||||
selectedFullName(v) {
|
||||
v && this.$emit('update:name', v)
|
||||
},
|
||||
dialog(v) {
|
||||
if (v) {
|
||||
if (this.value) {
|
||||
this.defaultChecked = [this.value]
|
||||
this.defaultExpanded = [this.value]
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.partyOrgTree.setCurrentKey(this.value)
|
||||
})
|
||||
} else {
|
||||
this.defaultChecked = [this.treeData[0].id]
|
||||
this.defaultExpanded = [this.treeData[0].id]
|
||||
this.$nextTick(() => {
|
||||
this.$refs.partyOrgTree.setCurrentKey([this.treeData[0].id])
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
filterText: '',
|
||||
treeData: [],
|
||||
selected: [],
|
||||
selectedTemp: [],
|
||||
selectParty: [],
|
||||
valueType: "",
|
||||
defaultChecked: [],
|
||||
defaultExpanded: [],
|
||||
childCount: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedFullName() {
|
||||
return this.selected.map(e => e.name).join("") || ''
|
||||
},
|
||||
defaultProps() {
|
||||
return {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showDialog() {
|
||||
if (this.disabled) return
|
||||
this.dialog = true
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
addChild(parent, pending) {
|
||||
let doBeforeCount = pending.length
|
||||
for (let i = pending.length - 1; i >= 0; i--) {
|
||||
let e = pending[i]
|
||||
if (e.parentId == parent.id) {
|
||||
parent["children"] = [...(parent["children"] || []), e]
|
||||
pending.splice(i, 1)
|
||||
}
|
||||
}
|
||||
parent.children && (parent.children = parent.children.reverse())
|
||||
if (pending.length > 0 && doBeforeCount > pending.length) {
|
||||
parent.children.map(c => this.addChild(c, pending))
|
||||
}
|
||||
},
|
||||
// 查询所有单位 树形结构
|
||||
searchSysAll() {
|
||||
this.instance.post(this.url, null, {
|
||||
params: {
|
||||
id: this.topOrgId
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res && res.data && (this.type === '0' || this.type === '2')) {
|
||||
if (this.type === '2') {
|
||||
this.treeData = res.data
|
||||
} else {
|
||||
res.data = res.data.map(a => {
|
||||
return {...a, name: a.name}
|
||||
});
|
||||
if (this.valueType) {
|
||||
this.selected = res.data.filter(e => (this.valueType == "string" && e.id == this.value) || this.value?.includes(e.id))
|
||||
if (this.selected) {
|
||||
this.$emit('name', this.selected.map(e => e.name))
|
||||
this.$emit('origin', this.selected)
|
||||
}
|
||||
}
|
||||
this.treeData = res.data.filter(e => !e.parentId || e.id === this.topOrgId);
|
||||
this.treeData.map(t => this.addChild(t, res.data));
|
||||
}
|
||||
} else {
|
||||
this.treeData = [res.data]
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击树节点
|
||||
confirmParty() {
|
||||
if (!this.selectedTemp.length && !this.isEmpty) {
|
||||
return this.$message.error(this.type === '0' ? '党组织不能为空' : '小区不能为空')
|
||||
}
|
||||
|
||||
this.selected = this.selectedTemp;
|
||||
this.selectParty.length && (this.selected = JSON.parse(JSON.stringify(this.selectParty)))
|
||||
if (this.type === '1' && this.selected[0].isVan === '0') {
|
||||
return this.$message.error('请选择小区')
|
||||
}
|
||||
this.dialog = false
|
||||
this.$emit('change', this.valueType == "string" ? this.selected.map(e => e.id)[0] : this.selected.map(e => e.id))
|
||||
this.$emit('name', this.selected.map(e => e.name))
|
||||
this.$emit('origin', this.selected)
|
||||
},
|
||||
nodeClick(data) {
|
||||
if (!this.multipleSelection) {
|
||||
let {id, name, orgType, partyType, isVan, isLeaf} = data
|
||||
this.selectParty = [{id, name, orgType, partyType, isVan, isLeaf}]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.valueType = typeof this.value
|
||||
this.searchSysAll();
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.left_tree {
|
||||
height: 490px;
|
||||
line-height: 1;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
::v-deep.el-dialog__header {
|
||||
line-height: 1;
|
||||
// padding: 13px 16px;
|
||||
// border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
background: #eaf5ff !important;
|
||||
color: #257fff !important;
|
||||
}
|
||||
|
||||
::v-deep.el-dialog__body {
|
||||
padding: 16px 16px 0;
|
||||
}
|
||||
|
||||
::v-deep .ai-dialog__content--wrapper {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep.left_cont {
|
||||
height: calc(100% - 40px);
|
||||
padding-top: 8px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
::v-deep.el-tree {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
::v-deep.el-tree-node:focus > .el-tree-node__content {
|
||||
background: #eaf5ff !important;
|
||||
color: #257fff !important;
|
||||
}
|
||||
|
||||
::v-deep.el-tree-node__content:hover {
|
||||
background: #eaf5ff !important;
|
||||
color: #257fff !important;
|
||||
}
|
||||
|
||||
.ai-partyorg {
|
||||
|
||||
.input-clicker {
|
||||
width: 320px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #D0D4DC;
|
||||
line-height: 32px;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
|
||||
.prepend {
|
||||
background: rgba(245, 245, 245, 1);
|
||||
width: auto;
|
||||
border-right: 1px solid #D0D4DC;
|
||||
padding: 0 8px;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: left;
|
||||
padding-left: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.suffix {
|
||||
width: auto;
|
||||
padding: 0 12px
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $primaryColor;
|
||||
}
|
||||
}
|
||||
|
||||
.select-party {
|
||||
}
|
||||
|
||||
.party-dialog-footer {
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
.el-button {
|
||||
width: 72px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-clicker {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
174
ui/packages/common/AiParty/partyTrans.vue
Normal file
174
ui/packages/common/AiParty/partyTrans.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<section class="partyTrans">
|
||||
<el-row class="search-panel" type="flex" justify="space-between">
|
||||
<div class="add-item" style="padding-bottom:3px;overflow-x: hidden">
|
||||
<p class="add_top">
|
||||
<span>党组织</span>
|
||||
<el-input placeholder="党组织名称" size="small" style="width:166px;" clearable suffix-icon="el-icon-search"
|
||||
v-model="filterText" @change="$refs.partyOrgTree.filter(filterText)"
|
||||
@keyup.native="$refs.partyOrgTree.filter(filterText)"/>
|
||||
</p>
|
||||
<el-tree ref="partyOrgTree" :data="treeData" :show-checkbox="multipleSelection" node-key="id"
|
||||
:filter-node-method="filterNode" @node-click="nodeClick"
|
||||
@check-change="multipleSelection&&(selectParty=$refs.partyOrgTree.getCheckedNodes())"
|
||||
:highlight-current="true" :props="defaultProps"/>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="selected-people add-item">
|
||||
<p class="add_top">
|
||||
<span>已选择</span>
|
||||
<el-button icon="iconfont iconDelete" size="mini" @click="clearSelect()">清空</el-button>
|
||||
</p>
|
||||
<div class="add_tag" v-if="selectParty.length" style="width:100%;">
|
||||
<el-tag v-for="(item,i) in selectParty" :key="i" closable type="info" @close="cancelSelect(i)"
|
||||
:disable-transitions="true">{{item.name}}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="select-no-data" v-else>
|
||||
<span>暂无数据</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "partyTrans",
|
||||
props: {
|
||||
multipleSelection: {type: Boolean, default: false},
|
||||
orgs: Array,
|
||||
},
|
||||
computed: {
|
||||
treeData() {
|
||||
return this.orgs || []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
filterText: "",//tree模糊搜索
|
||||
selectParty: [],//选中的党组织
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//节点过滤/搜索
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
//取消选择
|
||||
cancelSelect(index) {
|
||||
this.selectParty.splice(index, 1)
|
||||
this.$refs.partyOrgTree.setCheckedNodes(this.selectParty);
|
||||
},
|
||||
clearSelect() {
|
||||
this.$refs.partyOrgTree.setCheckedKeys([]);
|
||||
this.selectParty = [];
|
||||
},
|
||||
nodeClick(data) {
|
||||
if (!this.multipleSelection) {
|
||||
let {id, name, orgType, partyType} = data
|
||||
this.selectParty = [{id, name, orgType, partyType}]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectParty: {
|
||||
handler(v) {
|
||||
this.$emit('change', v)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.partyTrans {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.select-no-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
padding-right: 10px;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-item {
|
||||
width: 280px;
|
||||
height: 400px;
|
||||
background: rgba(252, 252, 252, 1);
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(208, 212, 220, 1);
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
.add_top {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgba(245, 245, 245, 1);
|
||||
border-bottom: 1px solid rgba(208, 212, 220, 1);
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tree_list {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.el-tree {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add_buttom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
font-size: 12px;
|
||||
width: 310px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
z-index: 10000;
|
||||
background: rgba(245, 246, 247, 1);
|
||||
color: rgba(51, 51, 51, 1);
|
||||
box-shadow: 0 1px 0 0 rgba(216, 220, 227, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add_tag {
|
||||
width: 310px;
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
|
||||
.el-tag {
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user