弹窗选择控件优化。

product
BAWEI 2 years ago
parent b0f5c9184e
commit efba192222

@ -4,11 +4,11 @@
<div class="search-box">
<h4 class="cap">查询字段</h4>
<el-table :data="columnData.searchList" class="JNPF-common-table" ref="dragTableSearch"
:row-key="row=>row.__vModel__">
:row-key="row=>row.__vModel__">
<el-table-column align="center" label="拖动" width="50">
<template>
<i class="drag-handler icon-ym icon-ym-darg" style="cursor: move;font-size:20px"
title='点击拖动' />
title='点击拖动' />
</template>
</el-table-column>
<el-table-column prop="__config__.label" label="列名" />
@ -24,11 +24,11 @@
<div class="column-box">
<h4 class="cap">列表字段</h4>
<el-table :data="columnData.columnList" class="JNPF-common-table" ref="dragTable"
:row-key="row=>row.prop">
:row-key="row=>row.prop">
<el-table-column align="center" label="拖动" width="50">
<template>
<i class="drag-handler icon-ym icon-ym-darg" style="cursor: move;font-size:20px"
title='点击拖动' />
title='点击拖动' />
</template>
</el-table-column>
<el-table-column prop="label" label="列名" />
@ -49,7 +49,7 @@
<el-table-column prop="width" label="宽度">
<template slot-scope="scope">
<el-input-number v-model="scope.row.width" placeholder="宽度" :min="0" :precision="0"
controls-position="right" style="width:100%" />
controls-position="right" style="width:100%" />
</template>
</el-table-column>
</el-table>
@ -64,14 +64,14 @@
<div class="field-box">
<div class="searchList" v-show="currentTab==='search'">
<el-table :data="searchOptions" class="JNPF-common-table" height="100%"
@selection-change="searchSelectionChange" ref="searchTable">
@selection-change="searchSelectionChange" ref="searchTable">
<el-table-column prop="__config__.label" label="查询字段" />
<el-table-column type="selection" width="55" align="center" />
</el-table>
</div>
<div class="columnList" v-show="currentTab==='field'">
<el-table :data="columnOptions" class="JNPF-common-table" height="100%"
@selection-change="columnSelectionChange" ref="columnTable">
@selection-change="columnSelectionChange" ref="columnTable">
<el-table-column prop="label" label="列表字段" />
<el-table-column type="selection" width="55" align="center" />
</el-table>
@ -82,7 +82,7 @@
<!-- <el-divider>列表布局</el-divider> -->
<div class="typeList">
<div class="item" v-for="(item, index) in typeList" :key="index"
@click="columnData.type=item.value">
@click="columnData.type=item.value">
<div class="item-img" :class="{'checked':columnData.type==item.value}">
<img :src="item.url" alt="">
<div class="icon-checked" v-if="columnData.type==item.value">
@ -99,7 +99,7 @@
</el-form-item>
<el-form-item label="数据来源">
<el-select v-model="columnData.treeDataSource" placeholder="请选择数据来源"
@change="dataTypeChange">
@change="dataTypeChange">
<el-option label="数据字典" value="dictionary"></el-option>
<el-option label="远端数据" value="api"></el-option>
<el-option label="组织数据" value="organize"></el-option>
@ -120,8 +120,8 @@
<template v-if="columnData.treeDataSource==='api'">
<el-form-item label="数据接口">
<JNPF-TreeSelect :options="dataInterfaceSelector"
v-model="columnData.treePropsUrl" placeholder="请选择数据接口" lastLevel
lastLevelKey='categoryId' lastLevelValue='1' clearable />
v-model="columnData.treePropsUrl" placeholder="请选择数据接口" lastLevel
lastLevelKey='categoryId' lastLevelValue='1' clearable />
</el-form-item>
<el-form-item label="主键字段">
<el-input v-model="columnData.treePropsValue" placeholder="主键字段" />
@ -136,7 +136,7 @@
<el-form-item label="关联字段">
<el-select v-model="columnData.treeRelation" placeholder="请选择关联字段">
<el-option :label="item.__config__.label" :value="item.__vModel__"
v-for="(item, index) in list" :key="index"></el-option>
v-for="(item, index) in list" :key="index"></el-option>
</el-select>
</el-form-item>
</template>
@ -145,7 +145,7 @@
<el-form-item label="分组字段">
<el-select v-model="columnData.groupField" placeholder="请选择分组字段">
<el-option :label="item.__config__.label" :value="item.__vModel__"
v-for="(item, i) in list" :key="i"></el-option>
v-for="(item, i) in list" :key="i"></el-option>
</el-select>
</el-form-item>
</template>
@ -153,7 +153,7 @@
<el-form-item label="排序字段">
<el-select v-model="columnData.defaultSidx" placeholder="请选择排序字段" clearable>
<el-option :label="item.__config__.label" :value="item.__vModel__"
v-for="(item, i) in list" :key="i"></el-option>
v-for="(item, i) in list" :key="i"></el-option>
</el-select>
</el-form-item>
<el-form-item label="排序类型">
@ -194,9 +194,9 @@
<p class="btn-cap mt-10 mb-10">自定义按钮区</p>
<div class="custom-btns-list">
<draggable :list="columnData.customBtnsList" :animation="340" group="customItem"
handle=".option-drag">
handle=".option-drag">
<div v-for="(item, index) in columnData.customBtnsList" :key="index"
class="custom-item">
class="custom-item">
<div class="custom-line-icon option-drag">
<i class="icon-ym icon-ym-darg" />
</div>
@ -204,7 +204,7 @@
<el-input v-model="item.label" placeholder="按钮名称" size="small" />
<el-button class="custom-btn" @click="editFunc(item)"></el-button>
<div class="close-btn custom-line-icon"
@click="columnData.customBtnsList.splice(index, 1)">
@click="columnData.customBtnsList.splice(index, 1)">
<i class="el-icon-remove-outline" />
</div>
</div>
@ -233,7 +233,7 @@
</div>
</div>
<form-script :visible.sync="formScriptVisible" :value="activeItem.func"
@updateScript="updateScript" />
@updateScript="updateScript" />
</div>
</template>
<script>
@ -255,10 +255,11 @@ const getSearchType = item => {
}
const defaultFunc = '({ data, index, request, toast, refresh }) => {\r\n \r\n}'
/* Modified by 巴卫 */
const defaultColumnData = {
searchList: [], //
columnList: [], //
columnOptions: [], //
defaultColumnList: [], //
type: 1, //
defaultSidx: '', //
@ -470,8 +471,8 @@ export default {
})
},
/**
* 供父组件使用 获取列表JSON
*/
* 供父组件使用 获取列表JSON
*/
getData() {
if (!this.columnData.columnList.length) return this.$message.warning('列表字段不允许为空')
if (this.columnData.type == 2) {

@ -2,25 +2,25 @@
<div class="popupSelect-container">
<div class="el-select" @click="openDialog">
<el-input :placeholder="placeholder" v-model="innerValue" readonly :validate-event="false"
@mouseenter.native="inputHovering = true" @mouseleave.native="inputHovering = false">
@mouseenter.native="inputHovering = true" @mouseleave.native="inputHovering = false">
<template slot="suffix">
<i v-show="!showClose"
:class="['el-select__caret', 'el-input__icon', 'el-icon-arrow-up']"></i>
:class="['el-select__caret', 'el-input__icon', 'el-icon-arrow-up']"></i>
<i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close"
@click="clear"></i>
@click="clear"></i>
</template>
</el-input>
</div>
<template v-if="popupType==='dialog'">
<el-dialog :title="popupTitle" :close-on-click-modal="false" :visible.sync="visible"
v-if="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll append-to-body
:width='popupWidth'>
v-if="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll append-to-body
:width='popupWidth'>
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<el-col :span="10">
<el-form-item label="关键词">
<el-input v-model="listQuery.keyword" placeholder="请输入关键词查询" clearable
@keyup.enter.native="search()" class="search-input" />
@keyup.enter.native="search()" class="search-input" />
</el-form-item>
</el-col>
<el-col :span="8">
@ -36,12 +36,12 @@
<div class="JNPF-common-search-box-right">
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
@click="initData()" />
@click="initData()" />
</el-tooltip>
</div>
</el-row>
<JNPF-table v-loading="listLoading" :data="list" :border="false" highlight-current-row
@row-click="rowClick" @row-dblclick="rowdbClick" :hasNO="false">
@row-click="rowClick" :hasNO="false">
<el-table-column width="35">
<template slot-scope="scope">
<el-radio :label="scope.row[propsValue]" v-model="checked">&nbsp;</el-radio>
@ -49,10 +49,10 @@
</el-table-column>
<el-table-column type="index" width="50" label="序号" align="center" />
<el-table-column :prop="item.value" :label="item.label" v-for="(item,i) in columnOptions"
:key="i" />
:key="i" />
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage"
:limit.sync="listQuery.pageSize" @pagination="initData" v-if="hasPage" />
:limit.sync="listQuery.pageSize" @pagination="initData" v-if="hasPage" />
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false" size="small">{{$t('common.cancelButton')}}</el-button>
<el-button type="primary" @click="select()" size="small">{{$t('common.confirmButton')}}
@ -62,14 +62,14 @@
</template>
<template v-if="popupType ==='drawer'">
<el-drawer :title="popupTitle" :visible.sync="visible" :wrapperClosable="false" ref="drawer"
:size='popupWidth' append-to-body class="JNPF-common-drawer">
:size='popupWidth' append-to-body class="JNPF-common-drawer">
<div class="JNPF-flex-main">
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<el-col :span="10">
<el-form-item label="关键词">
<el-input v-model="listQuery.keyword" placeholder="请输入关键词查询" clearable
@keyup.enter.native="search()" class="search-input" />
@keyup.enter.native="search()" class="search-input" />
</el-form-item>
</el-col>
<el-col :span="8">
@ -85,12 +85,12 @@
<div class="JNPF-common-search-box-right">
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
@click="initData()" />
@click="initData()" />
</el-tooltip>
</div>
</el-row>
<JNPF-table v-loading="listLoading" :data="list" :border="false" highlight-current-row
@row-click="rowClick" :hasNO="false">
@row-click="rowClick" :hasNO="false">
<el-table-column width="35">
<template slot-scope="scope">
<el-radio :label="scope.row[propsValue]" v-model="checked">&nbsp;</el-radio>
@ -98,10 +98,10 @@
</el-table-column>
<el-table-column type="index" width="50" label="序号" align="center" />
<el-table-column :prop="item.value" :label="item.label"
v-for="(item,i) in columnOptions" :key="i" />
v-for="(item,i) in columnOptions" :key="i" />
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage"
:limit.sync="listQuery.pageSize" @pagination="initData" v-if="hasPage" />
:limit.sync="listQuery.pageSize" @pagination="initData" v-if="hasPage" />
<div class="drawer-footer">
<el-button @click="visible = false" size="small">{{$t('common.cancelButton')}}
</el-button>
@ -115,29 +115,27 @@
</template>
<script>
import { getDataInterfaceDataSelect, getDataInterfaceDataInfo } from '@/api/systemData/dataInterface'
import { getDataInterfaceDataSelect, getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface'
export default {
name: 'PopupSelect',
props: {
value: {
default: ''
},
interfaceId: {
type: String,
default: ''
},
bissId: {
type: String,
default: ''
rowIndex: {
default: null
},
includeFields: {
type: String,
default: ''
formData: {
type: Object
},
excludeFields: {
templateJson: {
type: Array,
default: () => []
},
interfaceId: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择'
@ -235,21 +233,21 @@ export default {
},
created() {
this.listQuery.pageSize = this.hasPage ? this.pageSize : 10000
// this.reset()
this.setDefault()
},
methods: {
initData() {
if (!this.interfaceId) return
this.listLoading = true
const paramList = this.getParamList()
const columnOptions = this.columnOptions.map(o => o.value)
let query = {
...this.listQuery,
interfaceId: this.interfaceId,
bissId: this.bissId,
includeFields: this.includeFields,
excludeFields: this.excludeFields,
propsValue: this.propsValue,
relationField: this.relationField,
columnOptions: columnOptions.join(','),
paramList
}
getDataInterfaceDataSelect(this.interfaceId, query).then(res => {
this.list = res.data.list
@ -257,6 +255,22 @@ export default {
this.listLoading = false
}).catch(() => { this.listLoading = false })
},
getParamList() {
let templateJson = this.templateJson
if (!this.formData) return templateJson
for (let i = 0; i < templateJson.length; i++) {
if (templateJson[i].relationField) {
if (templateJson[i].relationField.includes('-')) {
let tableVModel = templateJson[i].relationField.split('-')[0]
let childVModel = templateJson[i].relationField.split('-')[1]
templateJson[i].defaultValue = this.formData[tableVModel] && this.formData[tableVModel][this.rowIndex] && this.formData[tableVModel][this.rowIndex][childVModel] || ''
} else {
templateJson[i].defaultValue = this.formData[templateJson[i].relationField] || ''
}
}
}
return templateJson
},
interfaceDataHandler(data) {
if (!data.dataProcessing) return data.list
const dataHandler = this.jnpf.getScriptFunc.call(this, data.dataProcessing)
@ -295,12 +309,6 @@ export default {
this.$emit('change', this.checked, this.checkedRow)
this.visible = false
},
rowdbClick(row){
this.checked = row[this.propsValue]
this.checkedTxt = row[this.relationField]
this.checkedRow = row
this.select();
},
rowClick(row) {
this.checked = row[this.propsValue]
this.checkedTxt = row[this.relationField]
@ -309,20 +317,21 @@ export default {
setDefault() {
if (this.value) {
if (!this.interfaceId) return
const paramList = this.getParamList()
let query = {
id: this.value,
ids: [this.value],
interfaceId: this.interfaceId,
bissId: this.bissId,
includeFields: this.includeFields,
excludeFields: this.excludeFields,
propsValue: this.propsValue,
relationField: this.relationField,
paramList
}
getDataInterfaceDataInfo(this.interfaceId, query).then(res => {
this.innerValue = res.data[this.relationField]
getDataInterfaceDataInfoByIds(this.interfaceId, query).then(res => {
const data = res.data && res.data.length ? res.data[0] : {}
this.innerValue = data[this.relationField]
if (!this.field) return
let relationData = this.$store.state.generator.relationData
this.$set(relationData, this.field, res.data)
this.$set(relationData, this.field, data)
this.$eventBus.$emit('popupAttrEventBus', relationData, this.field)
this.$store.commit('generator/UPDATE_RELATION_DATA', relationData)
})
} else {
@ -330,6 +339,7 @@ export default {
if (!this.field) return
let relationData = this.$store.state.generator.relationData
this.$set(relationData, this.field, {})
this.$eventBus.$emit('popupAttrEventBus', relationData, this.field)
this.$store.commit('generator/UPDATE_RELATION_DATA', relationData)
}
}

Loading…
Cancel
Save