[update] 树形弹框
This commit is contained in:
lideqin
@@ -134,16 +134,24 @@
|
||||
:label-in-value="false"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||||
<!--16、树形弹框选择-->
|
||||
<tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
v-model="formInline[item.dbFieldName]"
|
||||
@nameChange="treeSelectNameChange"
|
||||
:filedName="item.dbFieldName"
|
||||
type="checkbox"
|
||||
:options-href="item.fieldHref"
|
||||
:nameStr="formInline[item.dbFieldName + '_dictText']"
|
||||
:dict-id="item.dictId"
|
||||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
|
||||
<!-- <tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"-->
|
||||
<!-- :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
|
||||
<!-- v-model="formInline[item.dbFieldName]"-->
|
||||
<!-- @nameChange="treeSelectNameChange"-->
|
||||
<!-- :filedName="item.dbFieldName"-->
|
||||
<!-- type="checkbox"-->
|
||||
<!-- :options-href="item.fieldHref"-->
|
||||
<!-- :nameStr="formInline[item.dbFieldName + '_dictText']"-->
|
||||
<!-- :dict-id="item.dictId"-->
|
||||
<!-- :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />-->
|
||||
<tree-data-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
v-model="formInline[item.dbFieldName]"
|
||||
:fieldName="item.dbFieldName"
|
||||
:nameStr="formInline[item.dbFieldName + '_dictText']"
|
||||
@nameChange="treeDataSelectNameChange"
|
||||
:optionsHref="item.treeFirstHref"
|
||||
:dict-id="item.dictId"/>
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</template>
|
||||
@@ -174,10 +182,11 @@ import JMultipleDatePicker from '../JMultipleDatePicker'
|
||||
import UserSelection from '../selection/UserSelection'
|
||||
import { getAction } from '../../api/manage.js'
|
||||
import { ajaxGetDictItems, getDictByCode, getFormDictTreeList } from '../../api/api.js'
|
||||
import TreeSelection from '../selection/TreeSelection'
|
||||
// import TreeSelection from '../selection/TreeSelection'
|
||||
import { getStandardGradeClassification } from '../../api/enterpriseStandardLibraryApi'
|
||||
import STreeSelect from '../STreeSelect'
|
||||
import { getDomesticStandardDetail } from '../../api/standardRegulationLibraryApi';
|
||||
import { getDomesticStandardDetail } from '../../api/standardRegulationLibraryApi'
|
||||
import TreeDataSelection from '../selection/TreeDataSelection'
|
||||
|
||||
// 本系统限制可以上传的文件格式
|
||||
const CAN_UPLOAD_FILE_TYPE = 'pdf,docx,doc,xlsx,xls,ppt,pptx,rar,zip,jpg,jpeg,png,avi,wmv,mov,rm,mp4,cad'
|
||||
@@ -193,8 +202,9 @@ export default {
|
||||
JDictSelectTag,
|
||||
JMultiSelectTag,
|
||||
UploadFile,
|
||||
TreeSelection,
|
||||
STreeSelect
|
||||
// TreeSelection,
|
||||
STreeSelect,
|
||||
TreeDataSelection
|
||||
},
|
||||
props: {
|
||||
url: {
|
||||
@@ -859,6 +869,9 @@ export default {
|
||||
treeSelectNameChange (value, fieldName) {
|
||||
this.formInline[fieldName + '_dictText'] = value
|
||||
},
|
||||
treeDataSelectNameChange (value, fieldName) {
|
||||
this.formInline[fieldName + '_dictText'] = value
|
||||
},
|
||||
submit () {
|
||||
this.$refs.ruleForm.validate(valid => {
|
||||
if (valid) {
|
||||
|
||||
@@ -0,0 +1,531 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="$t('userSelect.select')"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
:maskClosable="false"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<div class="modal-content">
|
||||
<a-spin :spinning="topLoading">
|
||||
<a-input-search style="margin-bottom: 1px" :placeholder="$t('pleaseEnter') + $t('treeSelection.primaryNodeName')" @search="onSearch" />
|
||||
<a-tree
|
||||
ref="tree"
|
||||
:checkable="checkable"
|
||||
:checkStrictly="true"
|
||||
:replaceFields="replaceFields"
|
||||
:class="treeScreenClass"
|
||||
:treeData="treeData"
|
||||
:autoExpandParent="autoExpandParent"
|
||||
@check="onCheck"
|
||||
@select="onSelect"
|
||||
@expand="onExpand"
|
||||
@load="onLoad"
|
||||
:loadData="loadData"
|
||||
:expandedKeys="expandedKeys"
|
||||
:checkedKeys="checkedKeys"
|
||||
:loadedKeys="loadedKeys"
|
||||
:selectedKeys.sync="selectedKeys">
|
||||
|
||||
<template slot="title" slot-scope="{dataRef}">
|
||||
<span v-if="searchValue && dataRef[replaceFields.title].indexOf(searchValue) > -1">
|
||||
<span style="color: #f50">{{ dataRef[replaceFields.title] }}</span>
|
||||
</span>
|
||||
<span v-else>{{ dataRef[replaceFields.title] }}</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<p class="modal-content-title">{{ $t('treeSelection.selectedData') }}</p>
|
||||
<a-spin :spinning="bottomLoading">
|
||||
<div v-if="dataSourceRight && dataSourceRight.length > 0" class="name-content">
|
||||
<div v-for="(item, index) in dataSourceRight" :key="item[replaceFields.key]" class="name-div">
|
||||
{{ item[replaceFields.title] }}
|
||||
<a-icon type="close" @click="handleDelete(item, index)" />
|
||||
</div>
|
||||
</div>
|
||||
<a-empty v-else />
|
||||
</a-spin>
|
||||
|
||||
<!--底部父子关联操作和确认取消按钮-->
|
||||
<template slot="footer" v-if="treeOpera && checkable">
|
||||
<div class="drawer-bootom-button">
|
||||
<a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1" @click="switchCheckStrictly(2)">{{ $t('parentChildConnection') }}</a-menu-item>
|
||||
<a-menu-item key="2" @click="switchCheckStrictly(1)">{{ $t('cancelConnection') }}</a-menu-item>
|
||||
</a-menu>
|
||||
<a-button>
|
||||
{{ treeOperationText }} <a-icon type="up" />
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<!-- <a-button style="float: left" @click="switchCheckStrictly(parentChildRelate ? 1 : 2)">{{ treeOperationText }}</a-button>-->
|
||||
<a-button @click="handleCancel" type="primary" style="margin-right: 0.8rem">{{ $t('close') }}</a-button>
|
||||
<a-button @click="handleOk" type="primary" >{{ $t('confirm') }}</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction } from '../../api/manage'
|
||||
|
||||
export default {
|
||||
name: 'TreeDataSelectModal',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
checkable: { // 是否多选
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 是否校验必选
|
||||
checkRequired: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 获取数据的接口
|
||||
optionsHref: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
// 标签库的限制，只能选第三级
|
||||
isTagLibraryRestriction: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
dictId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
treeOpera: { // 是否可以切换父子关联
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
treeScreenClass () {
|
||||
return {
|
||||
'my-dept-select-tree': true,
|
||||
fullscreen: this.fullscreen
|
||||
}
|
||||
},
|
||||
treeOperationText () {
|
||||
return this.parentChildRelate ? this.$t('parentChildConnection') : this.$t('cancelConnection')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 是否只能选第三级
|
||||
isTagLibraryRestriction (val) {
|
||||
if (val) {
|
||||
this.setOnlySelectThreeLevel(this.treeData)
|
||||
}
|
||||
},
|
||||
value (val) {
|
||||
if (val) {
|
||||
this.checkedKeys = val.split(',')
|
||||
}
|
||||
},
|
||||
optionsHref: {
|
||||
immediate: true,
|
||||
handler (val) {
|
||||
console.log('-------------optionsHref', val)
|
||||
if (val === '/laws/standard/partName/queryFirstList') {
|
||||
// 是涉及系统/部件
|
||||
this.replaceFields = { children: 'childPartNameList', title: 'name', key: 'code' }
|
||||
this.lazyLoadHref = '/laws/standard/partName/getChild'
|
||||
this.searchFieldName = 'nodeName'
|
||||
this.lazyLoadPidFieldName = 'parentCode'
|
||||
} else { // 标签库
|
||||
this.replaceFields = { children: 'childrenList', title: 'itemText', key: 'itemValue' }
|
||||
this.lazyLoadHref = '/laws/dictTree/getChild'
|
||||
this.searchFieldName = 'nodeName'
|
||||
this.lazyLoadPidFieldName = 'dictItemId'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// if (this.treeOpera) {
|
||||
// this.switchCheckStrictly(1)
|
||||
// }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
width: 800,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
topLoading: false,
|
||||
bottomLoading: false,
|
||||
parentChildRelate: true, // 父子节点是否关联
|
||||
autoExpandParent: false, // 是否自动展开父节点
|
||||
treeData: [],
|
||||
expandedKeys: [],
|
||||
checkedKeys: [],
|
||||
checkedRows: [],
|
||||
selectedKeys: [],
|
||||
loadedKeys: [],
|
||||
searchValue: '', // 查询框内容
|
||||
replaceFields: {},
|
||||
dataSourceRight: [],
|
||||
lazyLoadHref: '', // 懒加载接口
|
||||
searchFieldName: '', // 查询传的字段名
|
||||
lazyLoadPidFieldName: '' // 懒加载传父级的字段名
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.visible = true
|
||||
this.treeData = []
|
||||
this.checkedRows = []
|
||||
this.checkedKeys = []
|
||||
this.loadedKeys = []
|
||||
this.selectedKeys = []
|
||||
this.dataSourceRight = []
|
||||
this.searchValue = ''
|
||||
this.getTreeData()
|
||||
if (this.value) {
|
||||
if (this.checkable) {
|
||||
this.checkedKeys = this.value.split(',')
|
||||
} else {
|
||||
this.selectedKeys = this.value.split(',')
|
||||
}
|
||||
// 初始化选中数据列表
|
||||
this.getSelectedList(this.value)
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
onCheck (checkedKeys, info) {
|
||||
console.log('----------onCheck', checkedKeys)
|
||||
console.log('----------info.checked', info.checked)
|
||||
console.log('----------info.node', info.node.dataRef)
|
||||
if (this.checkable) {
|
||||
// 是多选
|
||||
if (this.parentChildRelate) {
|
||||
// 是父子关联
|
||||
if (info.checked) {
|
||||
// 是选中数据了
|
||||
let childrenList = []
|
||||
if (info.node.dataRef[this.replaceFields.children]) {
|
||||
// 有子节点获取子节点数据
|
||||
childrenList = info.node.dataRef[this.replaceFields.children].map(item => item[this.replaceFields.key])
|
||||
}
|
||||
this.checkedKeys = [...this.checkedKeys, ...checkedKeys.checked, ...childrenList]
|
||||
} else {
|
||||
// 是取消选中了，把当前和子节点都取消选中
|
||||
let currAndChildNode = []
|
||||
if (info.node.dataRef[this.replaceFields.children]) {
|
||||
// 有子节点获取子节点数据
|
||||
const childrenNode = info.node.dataRef[this.replaceFields.children].map(item => item[this.replaceFields.key])
|
||||
currAndChildNode = [...childrenNode, info.node.dataRef[this.replaceFields.key]]
|
||||
} else {
|
||||
currAndChildNode = [info.node.dataRef[this.replaceFields.key]]
|
||||
}
|
||||
this.checkedKeys = this.checkedKeys.filter(item => !currAndChildNode.includes(item))
|
||||
}
|
||||
// 处理下方显示已选数据
|
||||
if (info.checked) {
|
||||
console.log('------------增加了数据')
|
||||
// 说明是增加了数据,把点击的数据和子数据追加进去
|
||||
for (const key of checkedKeys.checked) {
|
||||
// 当前选中没在选中列表中的加进去
|
||||
if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === key)) {
|
||||
// 右侧不存在，追加到右侧表格
|
||||
this.dataSourceRight.push(info.node.dataRef)
|
||||
}
|
||||
}
|
||||
if (info.node.dataRef[this.replaceFields.children]) {
|
||||
// 有子集追加
|
||||
for (const keyItem of info.node.dataRef[this.replaceFields.children]) {
|
||||
// 当前选中的子集没在列表中的加进去
|
||||
if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === keyItem[this.replaceFields.key])) {
|
||||
// 右侧不存在，追加到右侧表格
|
||||
this.dataSourceRight.push(keyItem)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('----------删除了数据')
|
||||
// 说明是删除了数据
|
||||
if (this.checkedKeys && this.checkedKeys.length > 0) {
|
||||
// 还有选中数据，从dataSourceRight里面找到点击的数据和他的子数据清空
|
||||
for (let i = 0; i < this.dataSourceRight.length; i++) {
|
||||
if (!this.checkedKeys.find(item => item === this.dataSourceRight[i][this.replaceFields.key])) {
|
||||
// 表格选中中没有找到这一条数据，说明已经被删了
|
||||
this.dataSourceRight.splice(i, 1)
|
||||
i--
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 已经没有选中数据了，直接清空展示数据
|
||||
this.dataSourceRight = []
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 不是父子关联
|
||||
console.log('-----------checkedKeys', this.checkedKeys, checkedKeys)
|
||||
if (info.checked) {
|
||||
// 是选中数据了
|
||||
this.checkedKeys = [...this.checkedKeys, ...checkedKeys.checked]
|
||||
} else {
|
||||
// 是取消选中了
|
||||
this.checkedKeys = this.checkedKeys.filter(item => item !== info.node.dataRef[this.replaceFields.key])
|
||||
}
|
||||
// 处理下方显示已选数据
|
||||
if (info.checked) {
|
||||
console.log('------------不父子关联增加了数据')
|
||||
// 说明是增加了数据,把点击的数据追加进去
|
||||
for (const key of checkedKeys.checked) {
|
||||
// 当前选中没在选中列表中的加进去
|
||||
if (!this.dataSourceRight.find(item => item[this.replaceFields.key] === key)) {
|
||||
// 右侧不存在，追加到右侧表格
|
||||
this.dataSourceRight.push(info.node.dataRef)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('----------不父子关联删除了数据')
|
||||
// 说明是删除了数据
|
||||
if (this.checkedKeys && this.checkedKeys.length > 0) {
|
||||
// 还有选中数据，从dataSourceRight里面找到点击的数据和他的子数据清空
|
||||
for (let i = 0; i < this.dataSourceRight.length; i++) {
|
||||
if (!this.checkedKeys.find(item => item === this.dataSourceRight[i][this.replaceFields.key])) {
|
||||
// 表格选中中没有找到这一条数据，说明已经被删了
|
||||
this.dataSourceRight.splice(i, 1)
|
||||
i--
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 已经没有选中数据了，直接清空展示数据
|
||||
this.dataSourceRight = []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onSelect (selectedKeys, info) {
|
||||
// 取消关联的情况下才走onSelect的逻辑
|
||||
if (!this.parentChildRelate) {
|
||||
if (selectedKeys && selectedKeys.length > 0) {
|
||||
// 说明是选中了数据
|
||||
this.selectedKeys = [...selectedKeys]
|
||||
this.dataSourceRight = [info.node.dataRef]
|
||||
} else {
|
||||
// 没有数据，直接清空
|
||||
this.selectedKeys = []
|
||||
this.dataSourceRight = []
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad (loadedKeys) {
|
||||
this.loadedKeys = loadedKeys
|
||||
},
|
||||
onExpand (expandedKeys) {
|
||||
console.log('========expandedKeys', expandedKeys)
|
||||
this.expandedKeys = expandedKeys
|
||||
},
|
||||
// 异步加载
|
||||
async loadData (node) {
|
||||
console.log('-------------loadData', node)
|
||||
if (node.dataRef.children) {
|
||||
return
|
||||
}
|
||||
this.topLoading = true
|
||||
const params = {}
|
||||
if (this.optionsHref !== '/laws/standard/partName/queryFirstList') {
|
||||
// 不是涉及系统部件
|
||||
params.dictId = this.dictId
|
||||
}
|
||||
// 查询条件的名称
|
||||
if (this.searchValue) {
|
||||
params[this.searchFieldName] = this.searchValue
|
||||
}
|
||||
// 父节点id
|
||||
if (this.optionsHref === '/laws/standard/partName/queryFirstList') {
|
||||
// 是涉及系统部件
|
||||
params[this.lazyLoadPidFieldName] = node.dataRef.code
|
||||
} else {
|
||||
params[this.lazyLoadPidFieldName] = node.dataRef.id
|
||||
}
|
||||
await getAction(this.lazyLoadHref, params).then(res => {
|
||||
if (res.success) {
|
||||
node.dataRef[this.replaceFields.children] = res.result.record || res.result
|
||||
}
|
||||
}).finally(() => {
|
||||
this.topLoading = false
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.checkedKeys = []
|
||||
this.expandedKeys = []
|
||||
this.loadedKeys = []
|
||||
this.dataSourceRight = []
|
||||
this.treeData = []
|
||||
this.searchValue = ''
|
||||
},
|
||||
onSearch (value) {
|
||||
this.searchValue = value
|
||||
// this.autoExpandParent = true
|
||||
this.getTreeData()
|
||||
this.expandedKeys = []
|
||||
this.loadedKeys = []
|
||||
this.$forceUpdate()
|
||||
},
|
||||
// 设置树只能选第三级
|
||||
setOnlySelectThreeLevel (treeData) {
|
||||
for (const item of treeData) {
|
||||
item.disabled = item.level + '' !== '3'
|
||||
item.disableCheckbox = item.level + '' !== '3'
|
||||
if (item.childPartNameList && item.childPartNameList.length > 0) {
|
||||
this.setOnlySelectThreeLevel(item.childPartNameList)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 切换父子关联
|
||||
switchCheckStrictly (v) {
|
||||
if (v === 1) {
|
||||
// 取消父子关联
|
||||
this.parentChildRelate = false
|
||||
} else if (v === 2) {
|
||||
// 增加父子关联
|
||||
this.parentChildRelate = true
|
||||
}
|
||||
},
|
||||
getTreeData () {
|
||||
this.topLoading = true
|
||||
const params = {}
|
||||
if (this.optionsHref !== '/laws/standard/partName/queryFirstList') {
|
||||
// 不是涉及系统部件
|
||||
params.dictId = this.dictId
|
||||
}
|
||||
// 查询条件的名称
|
||||
if (this.searchValue) {
|
||||
params[this.searchFieldName] = this.searchValue
|
||||
}
|
||||
getAction(this.optionsHref, params).then(res => {
|
||||
if (res.success) {
|
||||
this.treeData = res.result.records || res.result
|
||||
}
|
||||
}).finally(() => {
|
||||
this.topLoading = false
|
||||
})
|
||||
},
|
||||
// 已选数据列表的删除
|
||||
handleDelete (record, index) {
|
||||
this.dataSourceRight.splice(index, 1)
|
||||
if (this.checkable) {
|
||||
// 多选从checkedKeys里面筛选出去
|
||||
this.checkedKeys = this.checkedKeys.filter(item => item !== record[this.replaceFields.key])
|
||||
} else {
|
||||
// 单选从selectedKeys里面筛选出去
|
||||
this.selectedKeys = this.selectedKeys.filter(item => item !== record[this.replaceFields.key])
|
||||
}
|
||||
},
|
||||
handleOk () {
|
||||
if (this.checkRequired && (!this.checkedKeys || this.checkedKeys.length === 0)) {
|
||||
this.$message.warning(this.$t('selectLeastOne'))
|
||||
return
|
||||
}
|
||||
this.$emit('nameChange', this.dataSourceRight.map(item => item[this.replaceFields.title]).join(','))
|
||||
this.$emit('change', this.dataSourceRight.map(item => item[this.replaceFields.key]).join(','))
|
||||
this.$emit('listChange', this.dataSourceRight)
|
||||
this.close()
|
||||
},
|
||||
getSelectedList (codes) {
|
||||
this.bottomLoading = true
|
||||
const params = {
|
||||
selectNodeCodes: codes,
|
||||
dictId: this.dictId
|
||||
}
|
||||
let url
|
||||
// 涉及系统/部件
|
||||
if (this.optionsHref === '/laws/standard/partName/queryFirstList') {
|
||||
url = '/laws/standard/partName/echo'
|
||||
} else { // 标签库
|
||||
url = '/laws/dictTree/echo'
|
||||
}
|
||||
if (!url) {
|
||||
return
|
||||
}
|
||||
postAction(url, params).then(res => {
|
||||
if (res.success) {
|
||||
this.dataSourceRight = JSON.parse(JSON.stringify(res.result))
|
||||
}
|
||||
}).finally(() => {
|
||||
this.bottomLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/ .ant-modal-content {
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
.my-dept-select-tree{
|
||||
height:350px;
|
||||
|
||||
&.fullscreen{
|
||||
height: calc(100vh - 250px);
|
||||
}
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.modal-content-title {
|
||||
color: #1D2129;
|
||||
font-weight: 500;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.drawer-bootom-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: right;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
.name-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
.name-div {
|
||||
width: auto;
|
||||
padding: 5px 16px;
|
||||
margin-right: 12px;
|
||||
margin-top: 8px;
|
||||
background: rgba(0, 100, 250, 0.08);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
opacity: 1;
|
||||
color: @primary-color;
|
||||
white-space: nowrap;
|
||||
/deep/ .anticon {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="components-input-demo-presuffix">
|
||||
<div class="user-organ-wrap">
|
||||
<a-input class="user-input" @click="openModal" :placeholder="placeholder" v-model="nameStr" :title="nameStr" readOnly>
|
||||
<a-icon v-if="nameStr" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
|
||||
</a-input>
|
||||
<a-button type="primary" class="button-box" @click="openModal" :disabled="disabled" v-if="showBtn && !disabled">
|
||||
{{ $t('select') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<tree-data-select-modal
|
||||
ref="selectModal"
|
||||
:checkable="checkable"
|
||||
:value="value"
|
||||
:dict-id="dictId"
|
||||
v-bind="$attrs"
|
||||
:options-href="optionsHref"
|
||||
@change="handleChange"
|
||||
@nameChange="nameChange"
|
||||
@listChange="listChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeDataSelectModal from './TreeDataSelectModal'
|
||||
|
||||
export default {
|
||||
name: 'TreeDataSelection',
|
||||
components: { TreeDataSelectModal },
|
||||
props: {
|
||||
checkable: { // 是否多选
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 获取数据的接口
|
||||
optionsHref: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
// 名称字符串
|
||||
nameStr: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
fieldName: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
dictId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
showBtn: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
nameStr: {
|
||||
immediate: true,
|
||||
handler (val) {
|
||||
console.log('----------nameStr', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal () {
|
||||
this.$refs.selectModal.show()
|
||||
},
|
||||
handleChange (value) {
|
||||
this.$emit('change', value, this.fieldName)
|
||||
},
|
||||
nameChange (value) {
|
||||
this.$emit('nameChange', value, this.fieldName)
|
||||
},
|
||||
listChange (value) {
|
||||
this.$emit('listChange', value, this.fieldName)
|
||||
},
|
||||
handleEmpty () {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this.handleChange('')
|
||||
this.nameChange('')
|
||||
this.listChange([])
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.user-organ-wrap {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//height: 39.98px;
|
||||
|
||||
.user-input {
|
||||
resize: none;
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
|
||||
// 因为需要加title，所以不能把鼠标事件去掉
|
||||
/deep/ .ant-input-disabled {
|
||||
background: #fff;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button-box {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user