初始提交
This commit is contained in:
596
pages/apply/dynamicModel/components/detail/Item.vue
Normal file
596
pages/apply/dynamicModel/components/detail/Item.vue
Normal file
@@ -0,0 +1,596 @@
|
||||
<template>
|
||||
<view :class="{'item-card':config.jnpfKey==='card'}"
|
||||
v-if="!config.noShow && (!config.visibility || (Array.isArray(config.visibility) && config.visibility.includes('app')))">
|
||||
<template v-if="config.layout==='colFormItem'">
|
||||
<JnpfText v-if="config.jnpfKey=='text'" :content="item.content" :textStyle="item.textStyle" />
|
||||
<JnpfDivider v-else-if="config.jnpfKey==='divider'" :content="item.content" />
|
||||
<JnpfGroupTitle v-else-if="config.jnpfKey=='groupTitle'" :content="item.content"
|
||||
:content-position="item.contentPosition" :helpMessage="item.helpMessage" @groupIcon="clickIcon(item)" />
|
||||
<u-form-item v-else-if="config.jnpfKey==='popupSelect' || config.jnpfKey==='relationForm'"
|
||||
:label="realLabel" :prop="item.__vModel__" class="popup-select" :label-width="labelWidth"
|
||||
:left-icon="leftIcon" :left-icon-style="{'color':'#a8aaaf'}" @clickIcon="clickIcon(item)">
|
||||
<view class="detail-text-box" v-if="config.jnpfKey==='popupSelect'">
|
||||
<view class="jnpf-detail-text">
|
||||
{{formData[item.__vModel__]}}
|
||||
</view>
|
||||
<DisplayList v-if="Object.keys(extraObj).length" :extraObj="extraObj"
|
||||
:extraOptions="item.extraOptions">
|
||||
</DisplayList>
|
||||
</view>
|
||||
<view class="detail-text-box" @click.native="toDetail(item)" v-if="config.jnpfKey==='relationForm'">
|
||||
<view class="jnpf-detail-text" style="color:rgb(41, 121, 255)">
|
||||
{{formData[item.__vModel__]}}
|
||||
</view>
|
||||
<DisplayList v-if="Object.keys(extraObj).length" :extraObj="extraObj"
|
||||
:extraOptions="item.extraOptions">
|
||||
</DisplayList>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item v-else :label="realLabel" :prop="item.__vModel__" :label-width="labelWidth"
|
||||
:left-icon="leftIcon" :left-icon-style="{'color':'#a8aaaf'}" @clickIcon="clickIcon(item)">
|
||||
<JnpfUploadImg v-if="config.jnpfKey==='uploadImg'" v-model="config.defaultValue" detailed />
|
||||
<!-- #ifndef APP-HARMONY -->
|
||||
<JnpfUploadFile v-else-if="config.jnpfKey=='uploadFile'" v-model="config.defaultValue" detailed />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<JnpfUploadFileH v-else-if="config.jnpfKey=='uploadFile'" v-model="config.defaultValue" detailed />
|
||||
<!-- #endif -->
|
||||
<JnpfColorPicker v-else-if="config.jnpfKey==='colorPicker'" v-model="config.defaultValue"
|
||||
:colorFormat="item.colorFormat" disabled />
|
||||
<JnpfRate v-else-if="config.jnpfKey==='rate'" v-model="config.defaultValue" :max="item.count"
|
||||
:allowHalf="item.allowHalf" disabled />
|
||||
<JnpfEditor v-else-if="config.jnpfKey==='editor'" v-model="config.defaultValue" detailed />
|
||||
<JnpfBarcode v-else-if="config.jnpfKey=='barcode'" :staticText="item.staticText" :width="item.width"
|
||||
:height="item.height" :format="item.format" :dataType="item.dataType" :lineColor="item.lineColor"
|
||||
:background="item.background" :relationField="item.relationField+'_id'" :formData="formData" />
|
||||
<JnpfQrcode v-else-if="config.jnpfKey=='qrcode'" :staticText="item.staticText" :width="item.width"
|
||||
:dataType="item.dataType" :colorDark="item.colorDark" :colorLight="item.colorLight"
|
||||
:relationField="item.relationField+'_id'" :formData="formData" />
|
||||
<JnpfInputNumber v-else-if="config.jnpfKey=='inputNumber'" v-model="config.defaultValue"
|
||||
:step='item.step' :max='item.max||999999999999999' :min='item.min||-999999999999999'
|
||||
:disabled="item.disabled" :placeholder="item.placeholder" :isAmountChinese="item.isAmountChinese"
|
||||
:thousands="item.thousands" :addonAfter="item.addonAfter" :addonBefore="item.addonBefore"
|
||||
:controls="item.controls" :precision="item.precision" detailed />
|
||||
<JnpfCalculate v-else-if="config.jnpfKey==='calculate'" :expression='item.expression'
|
||||
:vModel='item.__vModel__' :config='config' :formData='formData' v-model="config.defaultValue"
|
||||
:precision="item.precision" :isAmountChinese="item.isAmountChinese" :thousands="item.thousands"
|
||||
:roundType="item.roundType" :dateCalConfig="item.dateCalConfig" :type="item.type" />
|
||||
<JnpfDateCalculate v-else-if="config.jnpfKey==='dateCalculate'" :expression='item.expression'
|
||||
:vModel='item.__vModel__' :config='config' :formData='formData' v-model="config.defaultValue"
|
||||
:startRelationField="item.startRelationField" :startTimeType="item.startTimeType"
|
||||
:startTimeValue="item.startTimeValue" :format="item.format" />
|
||||
<JnpfLink v-else-if="config.jnpfKey=='link'" :content="item.content" :href="item.href"
|
||||
:target='item.target' :textStyle="item.textStyle" />
|
||||
<JnpfAlert v-else-if="config.jnpfKey=='alert'" :type="item.type" :title="item.title"
|
||||
:tagIcon='item.tagIcon' :showIcon="item.showIcon" :closable="item.closable"
|
||||
:description="item.description" :closeText="item.closeText" />
|
||||
<JnpfButton v-else-if="config.jnpfKey=='button'" :buttonText="item.buttonText" :align="item.align"
|
||||
:type="item.type" :disabled="item.disabled" />
|
||||
<JnpfSlider v-else-if="config.jnpfKey=='slider'" v-model="config.defaultValue" :step="item.step"
|
||||
:min="item.min||0" :max="item.max||100" disabled />
|
||||
<JnpfSign v-else-if="config.jnpfKey=='sign'" v-model="config.defaultValue" detailed />
|
||||
<JnpfSignature v-else-if="config.jnpfKey=='signature'" v-model="config.defaultValue" detailed />
|
||||
<JnpfLocation v-else-if="config.jnpfKey=='location'" v-model="config.defaultValue"
|
||||
:enableLocationScope="item.enableLocationScope" detailed />
|
||||
<!--end labelwidth=0-->
|
||||
<template v-else>
|
||||
<JnpfInput v-if="config.jnpfKey=='input'" v-model="config.defaultValue" detailed
|
||||
:useMask="item.useMask" :maskConfig="item.maskConfig" :addonBefore="item.addonBefore"
|
||||
:addonAfter="item.addonAfter" />
|
||||
<view class="jnpf-detail-text" v-else>{{ getValue(item) }}</view>
|
||||
</template>
|
||||
</u-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="jnpf-card" v-if="config.jnpfKey==='card'||config.jnpfKey==='row'">
|
||||
<view class="jnpf-card-cap u-line-1 u-flex" v-if="item.header" @click="clickIcon(item)">
|
||||
{{item.header}}
|
||||
<u-icon :name="config.tipLabel? 'question-circle-fill':''" class="u-m-l-10" color="#a0acb7" />
|
||||
</view>
|
||||
<Item v-for="(child, index) in config.children" :key="config.renderKey+index" :itemData="child"
|
||||
:formConf="formConf" :formData="formData" @toDetail="toDetail" @clickIcon='clickIcon' />
|
||||
</view>
|
||||
<template v-if="config.jnpfKey==='table'">
|
||||
<view class="jnpf-table">
|
||||
<view class="jnpf-table-title u-line-1" @click="clickIcon(item)">
|
||||
{{config.label}}
|
||||
<u-icon v-if="config.tipLabel" :name="'question-circle-fill'" class="u-m-l-10"
|
||||
color="#a0acb7" />
|
||||
</view>
|
||||
<view v-for="(column,columnIndex) in config.defaultValue" :key="columnIndex">
|
||||
<view class="jnpf-table-item-title">
|
||||
<view class="jnpf-table-item-title-num">({{columnIndex+1}})</view>
|
||||
</view>
|
||||
<view class="form-item-box" v-for="(childItem,cIndex) in config.children" :key="cIndex">
|
||||
<u-form-item :label="childItem.__config__.showLabel?childItem.__config__.label:''"
|
||||
:label-width="childItem.__config__.labelWidth ? childItem.__config__.labelWidth * 1.5 : undefined"
|
||||
@clickIcon="clickIcon(childItem)"
|
||||
:left-icon='childItem.__config__.tipLabel &&childItem.__config__.showLabel&& childItem.__config__.label? "question-circle-fill":""'
|
||||
:left-icon-style="{'color':'#a0acb7'}"
|
||||
v-if="!childItem.__config__.noShow&&(!childItem.__config__.visibility|| (Array.isArray(childItem.__config__.visibility) && childItem.__config__.visibility.includes('app')))">
|
||||
<template
|
||||
v-if="['relationFormAttr','popupAttr'].includes(childItem.__config__.jnpfKey)">
|
||||
<view class="jnpf-detail-text" v-if="!childItem.__vModel__">
|
||||
{{ column[childItem.relationField.split('_jnpfTable_')[0]+'_'+childItem.showField] }}
|
||||
</view>
|
||||
<view class="jnpf-detail-text" v-else>
|
||||
{{column[childItem.__vModel__]}}
|
||||
</view>
|
||||
</template>
|
||||
<view v-else-if="childItem.__config__.jnpfKey==='relationForm'" class="jnpf-detail-text"
|
||||
style="color:rgb(41, 121, 255)"
|
||||
@click.native="toTableDetail(childItem,column[childItem.__vModel__+'_id'])">
|
||||
{{column[childItem.__vModel__]}}
|
||||
</view>
|
||||
<JnpfSign v-else-if="childItem.__config__.jnpfKey=='sign'"
|
||||
v-model="column[childItem.__vModel__]" detailed />
|
||||
<JnpfSignature v-else-if="childItem.__config__.jnpfKey=='signature'"
|
||||
v-model="column[childItem.__vModel__]" detailed />
|
||||
<JnpfLocation v-else-if="childItem.__config__.jnpfKey=='location'"
|
||||
v-model="column[childItem.__vModel__]"
|
||||
:enableLocationScope="item.enableLocationScope" detailed />
|
||||
<!-- #ifndef APP-HARMONY -->
|
||||
<JnpfUploadFile v-else-if="childItem.__config__.jnpfKey==='uploadFile'"
|
||||
v-model="column[childItem.__vModel__]" detailed />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<JnpfUploadFileH v-else-if="childItem.__config__.jnpfKey==='uploadFile'"
|
||||
v-model="column[childItem.__vModel__]" detailed />
|
||||
<!-- #endif -->
|
||||
<JnpfUploadImg v-else-if="childItem.__config__.jnpfKey==='uploadImg'"
|
||||
v-model="column[childItem.__vModel__]" detailed />
|
||||
<JnpfInputNumber v-else-if="childItem.__config__.jnpfKey=='inputNumber'"
|
||||
v-model="column[childItem.__vModel__]" :step='childItem.step' :max='childItem.max'
|
||||
:min='childItem.min' :disabled="childItem.disabled"
|
||||
:placeholder="childItem.placeholder" :isAmountChinese="childItem.isAmountChinese"
|
||||
:thousands="childItem.thousands" :addonAfter="childItem.addonAfter"
|
||||
:addonBefore="childItem.addonBefore" :controls="childItem.controls"
|
||||
:precision="childItem.precision" detailed />
|
||||
<JnpfCalculate v-else-if="childItem.__config__.jnpfKey==='calculate'"
|
||||
:expression='childItem.expression' :vModel='childItem.__vModel__'
|
||||
:config='childItem.__config__' :formData='formData' :roundType="childItem.roundType"
|
||||
:dateCalConfig="childItem.dateCalConfig" :type="childItem.type"
|
||||
v-model="column[childItem.__vModel__]" :precision="childItem.precision"
|
||||
:isAmountChinese="childItem.isAmountChinese" :thousands="childItem.thousands"
|
||||
:rowIndex="columnIndex" />
|
||||
<JnpfDateCalculate v-else-if="childItem.__config__.jnpfKey==='dateCalculate'"
|
||||
:expression='childItem.expression' :vModel='childItem.__vModel__'
|
||||
:config='childItem.__config__' :formData='formData'
|
||||
v-model="column[childItem.__vModel__]"
|
||||
:startRelationField="childItem.startRelationField"
|
||||
:startTimeType="childItem.startTimeType" :startTimeValue="childItem.startTimeValue"
|
||||
:format="childItem.format" :rowIndex="columnIndex" />
|
||||
<JnpfRate v-else-if="childItem.__config__.jnpfKey==='rate'" :max="childItem.count"
|
||||
v-model="column[childItem.__vModel__]" :allowHalf="childItem.allowHalf" disabled />
|
||||
<JnpfSlider v-else-if="childItem.__config__.jnpfKey=='slider'"
|
||||
v-model="column[childItem.__vModel__]" :step="childItem.step"
|
||||
:min="childItem.min||0" :max="childItem.max||100" disabled />
|
||||
<template v-else>
|
||||
<JnpfInput v-if="childItem.__config__.jnpfKey=='input'"
|
||||
v-model="column[childItem.__vModel__]" detailed :useMask="childItem.useMask"
|
||||
:maskConfig="childItem.maskConfig" :addonBefore="childItem.addonBefore"
|
||||
:addonAfter="childItem.addonAfter" />
|
||||
<view class="jnpf-detail-text" v-else>{{column[childItem.__vModel__]}}</view>
|
||||
</template>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jnpf-table-item" v-if="item.showSummary && summaryField.length">
|
||||
<view class="jnpf-table-item-title u-flex u-row-between">
|
||||
<text class="jnpf-table-item-title-num">{{item.__config__.label}}合计</text>
|
||||
</view>
|
||||
<view class=" u-p-l-20 u-p-r-20 form-item-box">
|
||||
<u-form-item v-for="(item,index) in summaryField" :label="item.__config__.label"
|
||||
:key="item.__vModel__">
|
||||
<u-input input-align='right' v-model="item.value" disabled />
|
||||
</u-form-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else-if="config.jnpfKey==='steps'" style="background-color: #fff;padding:15px 0">
|
||||
<view class="step-container">
|
||||
<u-steps :list="config.children" name="title" :mode="item.simple ? 'dot' :'number'"
|
||||
@change="onStepChange($event,item)" :current="stepCurrent">
|
||||
</u-steps>
|
||||
</view>
|
||||
<view v-for="(itemSub,i) in config.children" :key='i'>
|
||||
<view v-if="i === stepCurrent">
|
||||
<Item v-for="(childItem, childIndex) in itemSub.__config__.children" :key="childIndex"
|
||||
:itemData="childItem" :formConf="formConf" :formData="formData" @toDetail="toDetail"
|
||||
@clickIcon='clickIcon' />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jnpf-tab" v-if="config.jnpfKey==='tab'">
|
||||
<u-tabs is-scroll :list="config.children" name="title" v-model="tabCurrent" @change="onTabChange" />
|
||||
<view v-for="(pane,i) in config.children" :key='i'>
|
||||
<view v-show="i == tabCurrent">
|
||||
<Item v-for="(childItem, childIndex) in pane.__config__.children" :key="childIndex"
|
||||
:itemData="childItem" :formConf="formConf" :formData="formData" @toDetail="toDetail"
|
||||
@clickIcon='clickIcon' />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="config.jnpfKey==='collapse'">
|
||||
<u-collapse :head-style="{'padding-left':'20rpx'}" :accordion="item.accordion" ref="collapseRef">
|
||||
<u-collapse-item :title="pane.title" v-for="(pane, i) in config.children" :key="i"
|
||||
:open="config.active && config.active.indexOf(pane.name)>-1">
|
||||
<Item v-for="(child, j) in pane.__config__.children" :key="child.__config__.renderKey"
|
||||
:itemData="child" :formConf="formConf" :formData="formData" @toDetail="toDetail"
|
||||
@clickIcon='clickIcon' />
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</template>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getRelationFormDetail,
|
||||
getDataInterfaceDataInfoByIds
|
||||
} from '@/api/common.js'
|
||||
// #ifdef MP
|
||||
import Item from './Item.vue' //兼容小程序
|
||||
// #endif
|
||||
import DisplayList from '@/components/displayList'
|
||||
const specialList = ['link', 'editor', 'button', 'alert']
|
||||
export default {
|
||||
name: 'Item',
|
||||
components: {
|
||||
// #ifdef MP
|
||||
Item,
|
||||
// #endif
|
||||
DisplayList
|
||||
},
|
||||
props: {
|
||||
itemData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
formConf: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
item() {
|
||||
const item = uni.$u.deepClone(this.itemData)
|
||||
this.initI18n(item)
|
||||
return item
|
||||
},
|
||||
config() {
|
||||
return this.item.__config__
|
||||
},
|
||||
labelWidth() {
|
||||
if (specialList.indexOf(this.config.jnpfKey) > -1) return 0
|
||||
return this.config.labelWidth ? this.config.labelWidth * 1.5 : undefined
|
||||
},
|
||||
label() {
|
||||
return this.config.showLabel && specialList.indexOf(this.config.jnpfKey) < 0 ? this.config.label : ''
|
||||
},
|
||||
realLabel() {
|
||||
return this.label ? (this.label + (this.formConf.labelSuffix || '')) : ''
|
||||
},
|
||||
leftIcon() {
|
||||
return this.config.tipLabel && this.label && this.config.showLabel ? "question-circle-fill" : ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabCurrent: 0,
|
||||
tableData: [],
|
||||
summaryField: [],
|
||||
stepCurrent: 0,
|
||||
extraObj: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.handleSummary()
|
||||
this.handleTab()
|
||||
},
|
||||
mounted() {
|
||||
if (this.config.jnpfKey === 'collapse') {
|
||||
this.$refs.collapseRef && this.$refs.collapseRef.init()
|
||||
}
|
||||
uni.$on('initCollapse', () => {
|
||||
this.$refs.collapseRef && this.$refs.collapseRef.init()
|
||||
})
|
||||
this.getDataChange()
|
||||
this.getDataInterfaceDataInfoByIds()
|
||||
},
|
||||
methods: {
|
||||
onStepChange(index, item) {
|
||||
if (this.stepCurrent === index) return
|
||||
item.__config__.active = index
|
||||
this.stepCurrent = index
|
||||
this.$nextTick(() => {
|
||||
uni.$emit('updateCode')
|
||||
uni.$emit('initCollapse')
|
||||
})
|
||||
},
|
||||
initI18n(item) {
|
||||
const config = item.__config__
|
||||
if (item.placeholderI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.placeholder = this.$t(item.placeholderI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.placeholder = this.$t(item.placeholderI18nCode, item.placeholder);
|
||||
//#endif
|
||||
}
|
||||
if (item.__config__.label && item.__config__.labelI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.__config__.label = this.$t(item.__config__.labelI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.__config__.label = this.$t(item.__config__.labelI18nCode, item.__config__.label);
|
||||
//#endif
|
||||
}
|
||||
if (item.__config__.tipLabel && item.__config__.tipLabelI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.__config__.tipLabel = this.$t(item.__config__.tipLabelI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.__config__.tipLabel = this.$t(item.__config__.tipLabelI18nCode, item.__config__.tipLabel);
|
||||
//#endif
|
||||
}
|
||||
if (['groupTitle', 'divider', 'link', 'text'].includes(config.jnpfKey)) {
|
||||
if (item.contentI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.content = this.$t(item.contentI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.content = this.$t(item.contentI18nCode, item.content);
|
||||
//#endif
|
||||
}
|
||||
if (item.helpMessageI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.helpMessage = this.$t(item.helpMessageI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.helpMessage = this.$t(item.helpMessageI18nCode, item.helpMessage);
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
if (config.jnpfKey === 'button') {
|
||||
if (item.buttonTextI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.buttonText = this.$t(item.buttonTextI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.buttonText = this.$t(item.buttonTextI18nCode.item.buttonText);
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
if (config.jnpfKey === 'alert') {
|
||||
if (item.titleI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.title = this.$t(item.titleI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.title = this.$t(item.titleI18nCode, item.title);
|
||||
//#endif
|
||||
}
|
||||
if (item.descriptionI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.description = this.$t(item.descriptionI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.description = this.$t(item.descriptionI18nCode, item.description);
|
||||
//#endif
|
||||
}
|
||||
if (item.closeTextI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.closeText = this.$t(item.closeTextI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.closeText = this.$t(item.closeTextI18nCode, item.closeText);
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
if (config.jnpfKey === 'card') {
|
||||
if (item.headerI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.header = this.$t(item.headerI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.header = this.$t(item.headerI18nCode, item.header);
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
if (['tab', 'collapse', 'steps'].includes(config.jnpfKey)) {
|
||||
if (config.children && config.children.length) {
|
||||
for (let i = 0; i < config.children.length; i++) {
|
||||
if (config.children[i].titleI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
config.children[i].title =
|
||||
this.$t(config.children[i].titleI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
config.children[i].title =
|
||||
this.$t(config.children[i].titleI18nCode, config.children[i].title);
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
}
|
||||
if (item.headerI18nCode) {
|
||||
//#ifdef MP-WEIXIN
|
||||
item.header = this.$t(item.headerI18nCode);
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
item.header = this.$t(item.headerI18nCode, item.header);
|
||||
//#endif
|
||||
}
|
||||
}
|
||||
if (config.jnpfKey === 'table') {
|
||||
if (config.children && config.children.length) {
|
||||
for (let i = 0; i < config.children.length; i++) {
|
||||
this.initI18n(config.children[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleTab() {
|
||||
if (this.config.jnpfKey === 'steps') return this.stepCurrent = this.config.active
|
||||
if (this.config.jnpfKey !== 'tab') return
|
||||
for (var i = 0; i < this.config.children.length; i++) {
|
||||
if (this.config.active == this.config.children[i].name) {
|
||||
this.tabCurrent = i
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
getDataChange() {
|
||||
if (this.config.jnpfKey === 'relationForm' && this.config.defaultValue) {
|
||||
let query = {
|
||||
id: this.formData[this.item.__vModel__ + '_id'],
|
||||
};
|
||||
if (this.item.propsValue) query = {
|
||||
...query,
|
||||
propsValue: this.item.propsValue
|
||||
};
|
||||
getRelationFormDetail(this.item.modelId, query).then(res => {
|
||||
if ((!res.data || !res.data.data) || res.data.data === "undefined") return
|
||||
let data = JSON.parse(res.data?.data)
|
||||
this.extraObj = data
|
||||
})
|
||||
}
|
||||
},
|
||||
getDataInterfaceDataInfoByIds() {
|
||||
if (this.config.jnpfKey === 'popupSelect' && this.config.defaultValue) {
|
||||
let query = {
|
||||
ids: [this.config.defaultValue],
|
||||
interfaceId: this.item.interfaceId,
|
||||
propsValue: this.item.propsValue,
|
||||
relationField: this.item.relationField,
|
||||
paramList: this.getParamList()
|
||||
}
|
||||
getDataInterfaceDataInfoByIds(this.item.interfaceId, query).then(res => {
|
||||
const data = res.data && res.data.length ? res.data[0] : {};
|
||||
this.extraObj = data
|
||||
})
|
||||
}
|
||||
},
|
||||
getParamList() {
|
||||
let templateJson = this.item.templateJson
|
||||
if (!this.formData) return templateJson
|
||||
for (let i = 0; i < templateJson.length; i++) {
|
||||
if (templateJson[i].relationField && templateJson[i].sourceType == 1) {
|
||||
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
|
||||
},
|
||||
handleSummary() {
|
||||
if (this.item.__config__.jnpfKey !== 'table') return
|
||||
const val = this.item.__config__.defaultValue
|
||||
let summaryField = this.item.summaryField || []
|
||||
this.summaryField = []
|
||||
this.tableData = this.item.__config__.children || []
|
||||
for (let i = 0; i < summaryField.length; i++) {
|
||||
for (let o = 0; o < this.tableData.length; o++) {
|
||||
const item = this.tableData[o]
|
||||
if (this.tableData[o].__vModel__ === summaryField[i] && !item.__config__.noShow) {
|
||||
this.summaryField.push({
|
||||
value: '',
|
||||
...item
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => this.getTableSummaries(val, this.item))
|
||||
},
|
||||
toThousands(val, column) {
|
||||
if (val) {
|
||||
let valList = val.toString().split('.')
|
||||
let num = Number(valList[0])
|
||||
let newVal = column.thousands ? num.toLocaleString() : num
|
||||
return valList[1] ? newVal + '.' + valList[1] : newVal
|
||||
} else {
|
||||
return val
|
||||
}
|
||||
},
|
||||
getTableSummaries(newVal, config) {
|
||||
for (let i = 0; i < this.summaryField.length; i++) {
|
||||
let val = 0
|
||||
for (let j = 0; j < newVal.length; j++) {
|
||||
if (newVal[j][this.summaryField[i].__vModel__]) {
|
||||
let data = isNaN(newVal[j][this.summaryField[i].__vModel__]) ? 0 :
|
||||
Number(newVal[j][this.summaryField[i].__vModel__])
|
||||
val += data
|
||||
}
|
||||
}
|
||||
let realVal = val && !Number.isInteger(val) ? Number(val).toFixed(2) : val;
|
||||
if (this.summaryField[i].thousands) realVal = Number(realVal).toLocaleString('zh')
|
||||
this.summaryField[i].value = realVal
|
||||
}
|
||||
},
|
||||
clickIcon(e) {
|
||||
this.$emit('clickIcon', e)
|
||||
},
|
||||
onTabChange(index) {
|
||||
if (this.tabCurrent === index) return
|
||||
this.tabCurrent = index;
|
||||
this.$emit('tab-change', this.item, index)
|
||||
this.$nextTick(() => {
|
||||
uni.$emit('initCollapse')
|
||||
uni.$emit('updateCode')
|
||||
})
|
||||
},
|
||||
doPreviewImage(current, imageList) {
|
||||
const images = imageList.map(item => this.define.baseURL + item.url);
|
||||
uni.previewImage({
|
||||
urls: images,
|
||||
current: current,
|
||||
success: () => {},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '预览图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(item) {
|
||||
const data = {
|
||||
...item,
|
||||
...(item.__config__.jnpfKey === 'relationForm' ? {
|
||||
sourceRelationForm: true,
|
||||
propsValue: item.propsValue
|
||||
} : {})
|
||||
};
|
||||
this.$emit('toDetail', data)
|
||||
},
|
||||
toTableDetail(item, value) {
|
||||
item.__config__.defaultValue = value
|
||||
this.$emit('toDetail', item)
|
||||
},
|
||||
getValue(item) {
|
||||
if (Array.isArray(item.__config__.defaultValue)) {
|
||||
if (['timeRange', 'dateRange'].includes(item.__config__.jnpfKey)) {
|
||||
return item.__config__.defaultValue.join('')
|
||||
}
|
||||
return item.__config__.defaultValue.join()
|
||||
}
|
||||
return item.__config__.defaultValue
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.detail-text-box {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
68
pages/apply/dynamicModel/components/detail/Parser.vue
Normal file
68
pages/apply/dynamicModel/components/detail/Parser.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<u-form class="jnpf-wrap-form" :model="formData" ref="dataForm"
|
||||
:label-position="formConf.labelPosition==='top'?'top':'left'"
|
||||
:label-align="formConf.labelPosition==='right'?'right':'left'"
|
||||
:label-width="formConf.labelWidth?formConf.labelWidth*1.5:150" :class='formConf.className'>
|
||||
<template v-for="(item, index) in formConf.fields" :key="item.__config__.renderKey">
|
||||
<Item :itemData="item" :formConf="formConf" :class="item.__config__.className" :formData="formData"
|
||||
:ref="item.__vModel__?item.__vModel__: undefined" @toDetail="toDetail" @clickIcon='clickIcon' />
|
||||
</template>
|
||||
<u-modal v-model="show" :content="content" width='70%' border-radius="16" :content-style="contentStyle"
|
||||
:titleStyle="titleStyle" :confirm-style="confirmStyle" :title="title" :confirm-text="$t('common.okText')">
|
||||
</u-modal>
|
||||
</u-form>
|
||||
</template>
|
||||
<script>
|
||||
import Item from './Item'
|
||||
export default {
|
||||
components: {
|
||||
Item
|
||||
},
|
||||
props: {
|
||||
formConf: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
content: '',
|
||||
contentStyle: {
|
||||
fontSize: '28rpx',
|
||||
padding: '20rpx',
|
||||
lineHeight: '44rpx',
|
||||
textAlign: 'left'
|
||||
},
|
||||
titleStyle: {
|
||||
padding: '20rpx'
|
||||
},
|
||||
confirmStyle: {
|
||||
height: '80rpx',
|
||||
lineHeight: '80rpx',
|
||||
},
|
||||
title: this.$t('common.tipTitle'),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickIcon(e) {
|
||||
if (!e.__config__.tipLabel && !e.helpMessage) return
|
||||
this.content = e.helpMessage || e.__config__.tipLabel
|
||||
this.title = e.__config__.label
|
||||
if (e.__config__.jnpfKey === 'card') this.title = e.header
|
||||
if (e.__config__.jnpfKey === 'groupTitle') this.title = e.content
|
||||
this.show = true
|
||||
},
|
||||
toDetail(item) {
|
||||
this.$emit('toDetail', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
179
pages/apply/dynamicModel/components/form/index.vue
Normal file
179
pages/apply/dynamicModel/components/form/index.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="jnpf-wrap jnpf-wrap-form">
|
||||
<JnpfParser v-if="!loading" ref="dynamicForm" :formConf="formConf" :key="key" @submit="sumbitForm" />
|
||||
<view class="buttom-actions" v-if="origin !='scan'">
|
||||
<u-button class="buttom-btn" @click.stop="resetForm">{{$t('common.resetText')}}</u-button>
|
||||
<u-button class="buttom-btn" type="primary" @click.stop="submit" :loading="btnLoading">
|
||||
{{getOkText}}
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
createModel,
|
||||
getModelInfo
|
||||
} from '@/api/apply/visualDev'
|
||||
export default {
|
||||
props: ['config', 'modelId', 'isPreview', 'origin', 'id'],
|
||||
data() {
|
||||
return {
|
||||
dataForm: {
|
||||
data: ''
|
||||
},
|
||||
formConf: {},
|
||||
key: +new Date(),
|
||||
btnLoading: false,
|
||||
loading: true,
|
||||
isAdd: false,
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getOkText() {
|
||||
const text = this.formConf.confirmButtonTextI18nCode ?
|
||||
this.$t(this.formConf.confirmButtonTextI18nCode, this.formConf.confirmButtonText) :
|
||||
this.formConf.confirmButtonText;
|
||||
return text || this.$t('common.okText');
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.userInfo = uni.getStorageSync('userInfo') || {}
|
||||
this.formConf = JSON.parse(this.config.formData)
|
||||
this.loading = true
|
||||
this.initData()
|
||||
},
|
||||
initData() {
|
||||
this.$nextTick(() => {
|
||||
if (this.origin === 'scan') {
|
||||
let extra = {
|
||||
modelId: this.modelId,
|
||||
id: this.id,
|
||||
type: 2
|
||||
}
|
||||
uni.setStorageSync('dynamicModelExtra', extra)
|
||||
getModelInfo(this.modelId, this.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
if (!this.dataForm.data) return
|
||||
this.formData = JSON.parse(this.dataForm.data)
|
||||
this.fillFormData(this.formConf, this.formData)
|
||||
this.$nextTick(() => {
|
||||
this.loading = false
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.formData = {}
|
||||
this.loading = false
|
||||
this.isAdd = true
|
||||
this.fillFormData(this.formConf, this.formData)
|
||||
}
|
||||
this.key = +new Date()
|
||||
})
|
||||
},
|
||||
fillFormData(form, data) {
|
||||
const loop = list => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i]
|
||||
let vModel = item.__vModel__
|
||||
let config = item.__config__
|
||||
if (vModel) {
|
||||
let val = data.hasOwnProperty(vModel) ? data[vModel] : config.defaultValue
|
||||
if (!config.isSubTable) config.defaultValue = val
|
||||
if (this.isAdd || config.isSubTable) { //新增时候，默认当前
|
||||
if (config.defaultCurrent) {
|
||||
if (config.jnpfKey === 'datePicker') {
|
||||
if (!data.hasOwnProperty(vModel)) {
|
||||
let format = this.jnpf.handelFormat(item.format)
|
||||
let dateStr = this.jnpf.toDate(new Date().getTime(), format)
|
||||
let time = format === 'yyyy' ? '-01-01 00:00:00' : format === 'yyyy-MM' ?
|
||||
'-01 00:00:00' : format === 'yyyy-MM-dd' ?
|
||||
' 00:00:00' : ''
|
||||
val = new Date(dateStr + time).getTime()
|
||||
config.defaultValue = val
|
||||
}
|
||||
}
|
||||
if (config.jnpfKey === 'timePicker') {
|
||||
if (!data.hasOwnProperty(vModel)) {
|
||||
config.defaultValue = this.jnpf.toDate(new Date(), item.format)
|
||||
}
|
||||
}
|
||||
if (config.jnpfKey === 'organizeSelect' && this.userInfo.organizeIds?.length) {
|
||||
config.defaultValue = item.multiple ? this.userInfo.organizeIds :
|
||||
this.userInfo.organizeId
|
||||
}
|
||||
if (config.jnpfKey === 'posSelect' && this.userInfo.positionIds?.length) {
|
||||
config.defaultValue = item.multiple ? this.userInfo.positionIds :
|
||||
this.userInfo.positionId
|
||||
}
|
||||
const userId = this.userInfo.userId
|
||||
if (config.jnpfKey === 'userSelect' && userId) {
|
||||
config.defaultValue = item.multiple ? [userId] : userId;
|
||||
}
|
||||
if (config.jnpfKey === 'usersSelect' && userId) {
|
||||
config.defaultValue = [userId + '--user'];
|
||||
}
|
||||
if (config.jnpfKey === 'sign' && this.userInfo.signImg) {
|
||||
config.defaultValue = this.userInfo.signImg
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.origin === 'scan') this.$set(item, 'disabled', true)
|
||||
let noShow = !config.noShow ? false : config.noShow
|
||||
let isVisibility = false
|
||||
if (!config.visibility || (Array.isArray(config.visibility) && config.visibility.includes(
|
||||
'app'))) isVisibility = true
|
||||
this.$set(config, 'isVisibility', isVisibility)
|
||||
this.$set(config, 'noShow', noShow)
|
||||
} else {
|
||||
let noShow = false,
|
||||
isVisibility = false
|
||||
if (!config.visibility || (Array.isArray(config.visibility) && config.visibility.includes(
|
||||
'app'))) isVisibility = true
|
||||
this.$set(config, 'isVisibility', isVisibility)
|
||||
this.$set(config, 'noShow', noShow)
|
||||
}
|
||||
if (config && config.children && Array.isArray(config.children)) loop(config.children)
|
||||
}
|
||||
}
|
||||
loop(form.fields)
|
||||
},
|
||||
sumbitForm(data, callback) {
|
||||
if (!data) return
|
||||
this.btnLoading = true
|
||||
this.dataForm.data = JSON.stringify(data)
|
||||
if (callback && typeof callback === "function") callback()
|
||||
createModel(this.modelId, this.dataForm).then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
this.btnLoading = false
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if (this.isPreview) return this.$u.toast('功能预览不支持数据保存')
|
||||
this.$refs.dynamicForm && this.$refs.dynamicForm.submitForm()
|
||||
},
|
||||
resetForm() {
|
||||
this.loading = true
|
||||
this.$nextTick(() => {
|
||||
this.loading = false
|
||||
this.$refs.dynamicForm && this.$refs.dynamicForm.resetForm()
|
||||
this.init()
|
||||
this.key = +new Date()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
937
pages/apply/dynamicModel/components/list/index.vue
Normal file
937
pages/apply/dynamicModel/components/list/index.vue
Normal file
@@ -0,0 +1,937 @@
|
||||
<template>
|
||||
<view class="dynamicModel-list-v">
|
||||
<!-- 批量删除顶部弹窗 -->
|
||||
<view class="u-flex top-btn" :class="slide2" v-show="selectItems.length">
|
||||
<view class="button-left" @click.stop="cancel">
|
||||
<p class="u-m-t-10 u-font-28">{{$t('common.cancelText')}}</p>
|
||||
</view>
|
||||
<view class="button-center">
|
||||
<p class="u-m-t-10 u-font-28">{{$t('component.jnpf.common.selected')}}({{selectItems.length}})</p>
|
||||
</view>
|
||||
<view class="button-right u-m-t-12" @click.stop="checkAll">
|
||||
<p class="icon-ym icon-ym-app-checkAll " :style="{'color':this.checkedAll ? '#0293fc' : '#303133'}">
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 排序 -->
|
||||
<view class="head-warp com-dropdown">
|
||||
<u-dropdown class="u-dropdown" ref="uDropdown" @open="showTop = true" @close="showTop = false">
|
||||
<u-dropdown-item :title="$t('app.apply.sort')" :options="sortOptions">
|
||||
<view class="screen-box">
|
||||
<view class="screen-list" v-if="sortOptions.length">
|
||||
<view class="u-p-l-20 u-p-r-20 list">
|
||||
<scroll-view scroll-y="true" style="height: 100%;">
|
||||
<u-cell-group :border="false">
|
||||
<u-cell-item @click="cellClick(item)" :arrow="false" :title="item.label"
|
||||
v-for="(item, index) in sortOptions" :key="index" :title-style="{
|
||||
color: sortValue.includes(item.value) ? '#2979ff' : '#606266' }">
|
||||
<u-icon v-if="sortValue.includes(item.value)" name="checkbox-mark"
|
||||
color="#2979ff" size="32" />
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<JnpfEmpty v-else></JnpfEmpty>
|
||||
<view class="buttom-actions" v-if="sortOptions.length">
|
||||
<u-button class="buttom-btn" @click="handleSortReset">{{$t('common.cleanText')}}</u-button>
|
||||
<u-button class="buttom-btn" type="primary" @click="handleSortSearch">
|
||||
{{$t('common.okText')}}
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-dropdown-item>
|
||||
<!-- 筛选 -->
|
||||
<u-dropdown-item :title="$t('app.apply.screen')">
|
||||
<view class="screen-box u-flex-col">
|
||||
<view class="screen-list" v-if="showParser && searchFormConf.length">
|
||||
<view class="u-p-l-20 u-p-r-20 list">
|
||||
<scroll-view scroll-y="true" style="height: 100%;">
|
||||
<Parser :formConf="searchFormConf" :searchFormData="searchFormData"
|
||||
:webType="config.webType" ref="searchForm" @submit="sumbitSearchForm" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="u-flex screen-btn" v-if="showParser && searchFormConf.length">
|
||||
<text @click="handleReset" class="btn btn1">{{$t('common.resetText')}}</text>
|
||||
<text @click="handleSearch" class="btn btn2">{{$t('common.searchText')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<JnpfEmpty v-else></JnpfEmpty>
|
||||
</view>
|
||||
</u-dropdown-item>
|
||||
</u-dropdown>
|
||||
</view>
|
||||
<view class="u-m-b-20">
|
||||
<u-tabs :list="tabList" v-model="tabActiveKey" font-size="28" @change="onTabChange" height="80"
|
||||
name="fullName" v-show="showTabs">
|
||||
</u-tabs>
|
||||
</view>
|
||||
|
||||
<!-- 列表 -->
|
||||
<view class="list-warp">
|
||||
<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
||||
:down="downOption" :up="upOption" :bottombar="false"
|
||||
:top="(columnData.tabConfig && columnData.tabConfig.on && tabList.length) ? 190 : 100">
|
||||
<list ref="list" :list="list" :columnList="columnList" :config="config" :actionOptions="actionOptions"
|
||||
@relationFormClick="relationFormClick" @goDetail="goDetail" @handleMoreClick="handleMoreClick"
|
||||
@handleClick="handleClick" :showSelect="isShowBatch.length" :checkedAll="checkedAll"
|
||||
@selectCheckbox="selectCheckbox" :isMoreBtn="isMoreBtn" :customBtnsList="columnData.customBtnsList">
|
||||
</list>
|
||||
</mescroll-uni>
|
||||
</view>
|
||||
<view v-if="!showTop">
|
||||
<!-- 新增按钮 -->
|
||||
<view v-if="config.webType !=4">
|
||||
<view class="com-addBtn"
|
||||
v-if="isPreview||(permission.btnPermission && permission.btnPermission.includes('btn_add'))"
|
||||
@click="addPage()">
|
||||
<u-icon name="plus" size="48" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-select :list="listInnerBtn" v-model="showMoreBtn" @confirm="selectBtnconfirm" />
|
||||
<u-select :list="bottomCustomBtnsList[1]" v-model="showBottomMoreBtn" @confirm="bottomBtnConfirm" />
|
||||
<!-- 批量操作底部弹窗 -->
|
||||
<view class="u-flex bottom-btn" :class="isShowBatch?.length==1? 'bottom-btn-one ':'bottom-btn-multiple'"
|
||||
v-if="(isShowBatch.length && list.length) || (bottomCustomBtnsList && bottomCustomBtnsList[0].length)">
|
||||
<view class="button-preIcon" @click.stop="handleBottomMoreClick('down')"
|
||||
v-if="bottomCustomBtnsList[1].length">
|
||||
<u-icon name="more-dot-fill" class="u-m-b-8" size="34"></u-icon>
|
||||
<p class="u-font-24">{{$t('common.moreText')}}</p>
|
||||
</view>
|
||||
<!-- 自定义按钮 -->
|
||||
<view class="button-preIcon" v-for="(item,i) in bottomCustomBtnsList[0]" :key="i"
|
||||
@click="bottomBtnConfirm(item)">
|
||||
<p class="btn-icon u-m-b-8" :class="item.event.btnIcon">
|
||||
</p>
|
||||
<p class="u-m-t-8 u-font-22 u-line-1">{{item.label}}</p>
|
||||
</view>
|
||||
<!-- 批量删除 -->
|
||||
<view class="button-preIcon" @click.stop="batchDelete" v-if="isBatchRemove && list.length">
|
||||
<p class="icon-ym icon-ym-app-delete u-m-b-8"></p>
|
||||
<p class="u-m-t-10 u-font-22">{{$t('common.batchDelText')}}</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
useBaseStore
|
||||
} from '@/store/modules/base'
|
||||
const baseStore = useBaseStore()
|
||||
import list from './list.vue'
|
||||
import resources from '@/libs/resources.js'
|
||||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||||
import bulkOperationMixin from "../../bulkOperationMixin.js";
|
||||
import jnpf from "@/utils/jnpf";
|
||||
import Parser from '../parser/index.vue'
|
||||
import {
|
||||
getModelList,
|
||||
deteleModel,
|
||||
getModelInfo,
|
||||
launchFlow
|
||||
} from '@/api/apply/visualDev'
|
||||
import {
|
||||
getDataInterfaceRes
|
||||
} from '@/api/common'
|
||||
import deepClone from '../../../../../uni_modules/vk-uview-ui/libs/function/deepClone';
|
||||
import {
|
||||
useDefineSetting
|
||||
} from '@/utils/useDefineSetting';
|
||||
export default {
|
||||
mixins: [MescrollMixin, bulkOperationMixin],
|
||||
props: ['config', 'modelId', 'isPreview', 'title', 'menuId'],
|
||||
components: {
|
||||
Parser,
|
||||
list
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabActiveKey: 0,
|
||||
tabList: [],
|
||||
tabQueryJson: {},
|
||||
sortValue: [],
|
||||
downOption: {
|
||||
use: true,
|
||||
auto: false
|
||||
},
|
||||
upOption: {
|
||||
page: {
|
||||
num: 0,
|
||||
size: 10,
|
||||
time: null
|
||||
},
|
||||
empty: {
|
||||
use: true,
|
||||
icon: resources.message.nodata,
|
||||
tip: this.$t('common.noData'),
|
||||
fixed: true
|
||||
},
|
||||
textNoMore: this.$t('app.apply.noMoreData'),
|
||||
},
|
||||
list: [],
|
||||
listQuery: {
|
||||
sidx: '',
|
||||
keyword: '',
|
||||
queryJson: ''
|
||||
},
|
||||
actionOptions: [],
|
||||
showParser: false,
|
||||
columnData: {},
|
||||
columnList: [],
|
||||
sortList: [],
|
||||
sortOptions: [],
|
||||
searchList: [],
|
||||
searchFormConf: [],
|
||||
permission: {},
|
||||
selectListIndex: 0,
|
||||
showBottomMoreBtn: false,
|
||||
showMoreBtn: false,
|
||||
properties: {},
|
||||
flowId: '',
|
||||
key: +new Date(),
|
||||
userInfo: {},
|
||||
searchFormData: {},
|
||||
enableFunc: {},
|
||||
selectItems: [],
|
||||
listInnerBtn: [],
|
||||
listTopBtn: [],
|
||||
useDefine: useDefineSetting()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
computed: {
|
||||
showBatchOperate() {
|
||||
return this.list.length && (this.isBatchRemove || this.listTopBtn.length)
|
||||
},
|
||||
isBatchRemove() {
|
||||
return this.columnData.btnsList.find(item => item.value === "batchRemove" && item.show)
|
||||
},
|
||||
showTabs() {
|
||||
return this.columnData?.tabConfig?.on && this.tabList.length
|
||||
},
|
||||
/* 底部自定义按钮 */
|
||||
bottomCustomBtnsList() {
|
||||
if (this.listTopBtn.length <= 3) return [this.listTopBtn, []];
|
||||
const firstArray = this.listTopBtn.slice(0, 3);
|
||||
const secondArray = this.listTopBtn.slice(3);
|
||||
return [firstArray, secondArray];
|
||||
},
|
||||
getRowKey() {
|
||||
return this.config.webType == 4 && this.columnData.viewKey ? this.columnData.viewKey : 'id'
|
||||
},
|
||||
isMoreBtn() {
|
||||
return this.columnData?.customBtnsList?.some(item => item.event?.btnType === 2);
|
||||
},
|
||||
isShowBatch() {
|
||||
const list = this.filterEmpty([this.isBatchRemove, ...this.bottomCustomBtnsList])
|
||||
return list.filter(i => i !== undefined)
|
||||
},
|
||||
customBtnsList() {
|
||||
return this.columnData?.customBtnsList?.some(item => item.event?.btnType === 1);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterEmpty(arr) {
|
||||
return arr.filter(item => {
|
||||
// 处理数组情况
|
||||
if (Array.isArray(item)) return item.length > 0;
|
||||
// 处理对象情况
|
||||
if (typeof item === 'object' && item !== null) return Object.keys(item).length > 0;
|
||||
// 其他情况保留
|
||||
return true;
|
||||
});
|
||||
},
|
||||
selectCheckbox(data) {
|
||||
this.selectItems = data
|
||||
},
|
||||
init() {
|
||||
this.userInfo = uni.getStorageSync('userInfo') || {};
|
||||
this.properties = this.config.flowTemplateJson ? JSON.parse(this.config.flowTemplateJson).properties : {};
|
||||
let columnDataStr = this.config?.appColumnData || '[]';
|
||||
try {
|
||||
this.columnData = JSON.parse(columnDataStr);
|
||||
} catch (e) {
|
||||
this.columnData = [];
|
||||
}
|
||||
this.permission = this.$permission.getPermission(this.columnData, this.menuId, this.jnpf.getScriptFunc);
|
||||
this.enableFunc = this.permission.enableFunc;
|
||||
this.upOption.page.size = this.columnData.hasPage ? this.columnData.pageSize : 1000000;
|
||||
this.setDefaultQuery();
|
||||
this.columnList = this.permission.columnPermission || [];
|
||||
this.columnData.customBtnsList = this.permission.customBtnsPermission || [];
|
||||
this.columnData.customBtnsList.map((o) => {
|
||||
if (o.labelI18nCode) o.label = this.$t(o.labelI18nCode)
|
||||
})
|
||||
this.setBtns()
|
||||
this.columnList = this.transformColumnList(this.columnList)
|
||||
this.columnList.map((o) => {
|
||||
if (o.labelI18nCode) o.label = this.$t(o.labelI18nCode)
|
||||
// if (o.jnpfKey != 'table' && o.label.length > 4) o.label = o.label.substring(0, 4)
|
||||
})
|
||||
this.sortList = this.columnList.filter(o => o.sortable)
|
||||
this.getTabList();
|
||||
this.handleSearchList()
|
||||
this.handleSortList()
|
||||
this.handleDeleteBtn()
|
||||
this.key = +new Date()
|
||||
},
|
||||
setBtns() {
|
||||
const buttons = {
|
||||
inner: [],
|
||||
top: []
|
||||
};
|
||||
this.columnData.customBtnsList.forEach(item => {
|
||||
const key = item.event.position === 2 ? 'top' : 'inner';
|
||||
buttons[key].push(item);
|
||||
});
|
||||
this.listInnerBtn = buttons.inner;
|
||||
this.listTopBtn = buttons.top;
|
||||
},
|
||||
upCallback(page) {
|
||||
if (this.isPreview == '1') return this.mescroll.endSuccess(0, false);
|
||||
const query = {
|
||||
currentPage: page.num,
|
||||
pageSize: page.size,
|
||||
menuId: this.menuId,
|
||||
modelId: this.modelId,
|
||||
...this.listQuery
|
||||
}
|
||||
getModelList(this.modelId, query, {
|
||||
load: page.num == 1
|
||||
}).then(res => {
|
||||
this.selectItems = []
|
||||
this.$nextTick(() => {
|
||||
this.$refs.list.handleCheckAll()
|
||||
})
|
||||
this.showParser = true
|
||||
if (page.num == 1) this.list = [];
|
||||
this.mescroll.endSuccess(res.data.list.length);
|
||||
const list = res.data.list.map((o, i) => ({
|
||||
checked: false,
|
||||
index: i,
|
||||
...o
|
||||
}));
|
||||
this.list = this.list.concat(list);
|
||||
this.$nextTick(() => {
|
||||
if (this.columnData.funcs && this.columnData.funcs.afterOnload) this
|
||||
.setTableLoadFunc()
|
||||
})
|
||||
if (!this.selectItems.length || !this.list.length) this.cancel()
|
||||
}).catch((err) => {
|
||||
this.mescroll.endByPage(0, 0);
|
||||
this.mescroll.endErr();
|
||||
})
|
||||
},
|
||||
//获取标签面板数据、设置标签面板默认值
|
||||
async getTabList() {
|
||||
this.tabList = [];
|
||||
if (!this.columnData.tabConfig) return;
|
||||
const list = this.columnData.columnOptions.filter(o => o.__vModel__ == this.columnData.tabConfig
|
||||
.relationField) || [];
|
||||
if (list?.length) {
|
||||
this.columnData.tabConfig?.hasAllTab && this.tabList.push({
|
||||
fullName: '全部',
|
||||
id: undefined
|
||||
});
|
||||
if (list[0].__config__.dataType == 'dictionary' && list[0].__config__.dictionaryType) {
|
||||
const data = await baseStore.getDicDataSelector(list[0].__config__.dictionaryType) || [];
|
||||
const options = list[0].props.value == 'enCode' ? data.map(o => ({
|
||||
...o,
|
||||
id: o.enCode
|
||||
})) : data;
|
||||
this.tabList = [...this.tabList, ...options];
|
||||
} else {
|
||||
this.tabList = [...this.tabList, ...list[0].options];
|
||||
}
|
||||
}
|
||||
this.tabActiveKey = 0;
|
||||
this.onTabChange(this.tabActiveKey)
|
||||
},
|
||||
onTabChange(val) {
|
||||
const {
|
||||
hasAllTab,
|
||||
relationField
|
||||
} = this.columnData.tabConfig;
|
||||
const currentTab = this.tabList[val];
|
||||
// 合并条件判断
|
||||
const shouldSetRelation = !hasAllTab || val !== 0;
|
||||
this.tabActiveKey = val;
|
||||
this.tabQueryJson = shouldSetRelation ? {
|
||||
[relationField]: currentTab.id
|
||||
} : {};
|
||||
// 使用可选链操作符和空对象兜底
|
||||
const search = this.$refs.searchForm?.allCondition() || {};
|
||||
this.listQuery.queryJson = JSON.stringify({
|
||||
...search,
|
||||
...this.tabQueryJson
|
||||
});
|
||||
this.initData();
|
||||
},
|
||||
handleSearchForm(data) {
|
||||
let newData = {};
|
||||
for (let key in data) {
|
||||
if (data.hasOwnProperty(key)) {
|
||||
if (typeof data[key] === 'object' && data[key] !== null) {
|
||||
for (let innerKey in data[key]) {
|
||||
if (data[key].hasOwnProperty(innerKey)) {
|
||||
let newKey = `${key}-${innerKey}`;
|
||||
newData[newKey] = data[key][innerKey];
|
||||
}
|
||||
}
|
||||
} else {
|
||||
newData[key] = data[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
return newData
|
||||
},
|
||||
sumbitSearchForm(data) {
|
||||
let queryJson = data || {}
|
||||
this.searchFormData = data
|
||||
// 标签面板查询
|
||||
if (this.columnData.tabConfig && this.columnData.tabConfig.on) {
|
||||
this.tabQueryJson = {
|
||||
[this.columnData.tabConfig.relationField]: this.tabList[this.tabActiveKey]?.id
|
||||
};
|
||||
queryJson = {
|
||||
...queryJson,
|
||||
...this.tabQueryJson
|
||||
}
|
||||
}
|
||||
this.listQuery.queryJson = JSON.stringify(queryJson) !== '{}' ? JSON.stringify(queryJson) : ''
|
||||
this.$refs.uDropdown.close();
|
||||
this.$nextTick(() => {
|
||||
this.list = [];
|
||||
this.mescroll.resetUpScroll();
|
||||
})
|
||||
},
|
||||
// 处理启用规则
|
||||
customEnableRule(data, funcName) {
|
||||
// #ifdef MP-WEIXIN
|
||||
return true
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
let func = this.enableFunc[funcName]
|
||||
if (!func) return false
|
||||
let res = func.call(this, {
|
||||
row: data,
|
||||
rowIndex: data.index,
|
||||
onlineUtils: this.jnpf.onlineUtils,
|
||||
})
|
||||
return res
|
||||
// #endif
|
||||
},
|
||||
handleDeleteBtn() {
|
||||
if (this.config.webType == 4) return
|
||||
const actionOptions = this.columnData.columnBtnsList.filter(o => o.value == 'remove' && o.show)
|
||||
this.actionOptions = actionOptions.map(o => ({
|
||||
...o,
|
||||
//#ifdef MP-WEIXIN
|
||||
text: o.labelI18nCode ? this.$t(o.labelI18nCode) : o.label,
|
||||
//#endif
|
||||
//#ifndef MP-WEIXIN
|
||||
text: o.labelI18nCode ? this.$t(o.labelI18nCode, o.label) : o.label,
|
||||
//#endif
|
||||
style: {
|
||||
backgroundColor: '#dd524d'
|
||||
}
|
||||
}))
|
||||
},
|
||||
handleSearchList() {
|
||||
this.searchList = (this.$u.deepClone(this.columnData.searchList) || []).filter(o => !o.noShow)
|
||||
for (let i = 0; i < this.searchList.length; i++) {
|
||||
const item = this.searchList[i]
|
||||
if (item.labelI18nCode) {
|
||||
item.label = this.$t(item.labelI18nCode)
|
||||
item.placeholder = this.$t(item.labelI18nCode)
|
||||
}
|
||||
const config = item.__config__
|
||||
const now = new Date()
|
||||
jnpf.setSearchDefaultValue(item, now)
|
||||
if (item.value != null && item.value != '' && item.value != []) {
|
||||
this.searchFormData[item.id] = item.value;
|
||||
}
|
||||
if (this.config.webType == 4) config.label = item.label
|
||||
}
|
||||
if (Object.keys(this.searchFormData).length) this.listQuery.queryJson = JSON.stringify(this.searchFormData)
|
||||
if (this.searchList.some(o => o.isKeyword)) {
|
||||
const keywordItem = {
|
||||
id: 'jnpfKeyword',
|
||||
fullName: '关键词',
|
||||
prop: 'jnpfKeyword',
|
||||
label: this.$t('common.keyword'),
|
||||
jnpfKey: 'input',
|
||||
clearable: true,
|
||||
placeholder: '请输入',
|
||||
value: undefined,
|
||||
__config__: {
|
||||
jnpfKey: 'input'
|
||||
},
|
||||
};
|
||||
this.searchList.unshift(keywordItem);
|
||||
}
|
||||
if (this.config.enableFlow && this.searchList.length) {
|
||||
const flowStateItem = {
|
||||
id: 'jnpfFlowState',
|
||||
fullName: '状态',
|
||||
prop: 'jnpfFlowState',
|
||||
label: '状态',
|
||||
jnpfKey: 'select',
|
||||
placeholder: '请选择状态',
|
||||
value: undefined,
|
||||
options: this.useDefine.flowStatusList,
|
||||
__config__: {
|
||||
jnpfKey: 'select',
|
||||
},
|
||||
};
|
||||
this.searchList.push(flowStateItem);
|
||||
}
|
||||
this.searchFormConf = this.$u.deepClone(this.searchList)
|
||||
},
|
||||
handleSortList() {
|
||||
this.sortOptions = [];
|
||||
const sortList = this.sortList
|
||||
for (let i = 0; i < sortList.length; i++) {
|
||||
let ascItem = {
|
||||
label: sortList[i].label + ' ' + this.$t('app.apply.ascendingOrder'),
|
||||
value: sortList[i].prop,
|
||||
sidx: sortList[i].prop,
|
||||
sort: 'asc'
|
||||
}
|
||||
let descItem = {
|
||||
label: sortList[i].label + ' ' + this.$t('app.apply.descendingOrder'),
|
||||
value: '-' + sortList[i].prop,
|
||||
sidx: sortList[i].prop,
|
||||
sort: 'desc'
|
||||
}
|
||||
this.sortOptions.push(ascItem, descItem)
|
||||
}
|
||||
},
|
||||
transformColumnList(columnList) {
|
||||
let list = []
|
||||
for (let i = 0; i < columnList.length; i++) {
|
||||
const e = columnList[i];
|
||||
if (!e.prop.includes('-')) {
|
||||
e.option = null
|
||||
list.push(e)
|
||||
} else {
|
||||
let prop = e.prop.split('-')[0]
|
||||
let vModel = e.prop.split('-')[1]
|
||||
let label = e.label.split('-')[0]
|
||||
let childLabel = e.label.replace(label + '-', '');
|
||||
if (e.fullNameI18nCode && Array.isArray(e.fullNameI18nCode) && e.fullNameI18nCode[0]) {
|
||||
label = this.$t(e.fullNameI18nCode[0], label);
|
||||
}
|
||||
let newItem = {
|
||||
align: "center",
|
||||
jnpfKey: "table",
|
||||
prop,
|
||||
label,
|
||||
children: []
|
||||
}
|
||||
e.vModel = vModel
|
||||
e.childLabel = e.labelI18nCode ? this.$t(e.labelI18nCode) : childLabel;
|
||||
if (!list.some(o => o.prop === prop)) list.push(newItem)
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].prop === prop) {
|
||||
e.option = null
|
||||
list[i].children.push(e)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return list
|
||||
},
|
||||
setDefaultQuery() {
|
||||
const defaultSortConfig = (this.columnData.defaultSortConfig || []).map(o =>
|
||||
(o.sort === 'desc' ? '-' : '') + o.field);
|
||||
this.listQuery.sidx = defaultSortConfig.join(',')
|
||||
},
|
||||
setTableLoadFunc() {
|
||||
const JNPFTable = this.$refs.tableRef
|
||||
const parameter = {
|
||||
data: this.list,
|
||||
tableRef: JNPFTable,
|
||||
onlineUtils: this.jnpf.onlineUtils,
|
||||
}
|
||||
const func = this.jnpf.getScriptFunc.call(this, this.columnData.funcs.afterOnload)
|
||||
if (!func) return
|
||||
func.call(this, parameter)
|
||||
},
|
||||
//删除操作
|
||||
handleClick(index) {
|
||||
const item = this.list[index]
|
||||
if (!this.permission.btnPermission.includes('btn_remove')) return this.$u.toast("未开启删除权限")
|
||||
if (!this.customEnableRule(item, 'remove')) return this.$u.toast("没有删除权限")
|
||||
let txt = '流程处于暂停状态,不可操作'
|
||||
if ([1, 2, 3, 4, 6, 7, 8].includes(item.flowState)) txt = '流程已受理,无法删除'
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '删除后数据无法恢复',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
if (this.config.enableFlow == 1 && ![0, 9].includes(item.flowState)) {
|
||||
this.$u.toast(txt)
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
flowId: this.config.flowId,
|
||||
ids: [item.id]
|
||||
}
|
||||
deteleModel(data, this.modelId).then(res => {
|
||||
this.$u.toast(res.msg)
|
||||
this.list.splice(index, 1)
|
||||
this.mescroll.resetUpScroll()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//底部更多按钮
|
||||
handleBottomMoreClick(type) {
|
||||
this.showBottomMoreBtn = true
|
||||
},
|
||||
//更多按钮弹窗
|
||||
handleMoreClick(index) {
|
||||
this.selectListIndex = index
|
||||
this.showMoreBtn = true
|
||||
},
|
||||
//底部按钮操作
|
||||
bottomBtnConfirm(e) {
|
||||
if (Array.isArray(e) && e.length) {
|
||||
const index = this.bottomCustomBtnsList[1].findIndex(item => item.value === e[0].value);
|
||||
const item = this.bottomCustomBtnsList[1][index];
|
||||
if (!this.selectItems.length && item.event.dataRequired) {
|
||||
return this.$u.toast('请选择一条数据')
|
||||
}
|
||||
if (item.event && item.event.btnType === 3) this.handleBottomBtnInterface(item.event);
|
||||
if (item.event.btnType == 2) this.handleScriptFunc(item.event, this.selectItems)
|
||||
if (item.event.btnType == 4) this.handleLaunchFlow(item, this.selectItems)
|
||||
} else {
|
||||
if (!this.selectItems.length && e.event.dataRequired) {
|
||||
return this.$u.toast('请选择一条数据')
|
||||
}
|
||||
// 当e是一个对象且包含event属性时
|
||||
if (e.event.btnType == 2) this.handleScriptFunc(e.event, this.selectItems)
|
||||
if (e.event.btnType === 3) this.handleBottomBtnInterface(e.event);
|
||||
if (e.event.btnType == 4) this.handleLaunchFlow(e, this.selectItems)
|
||||
}
|
||||
},
|
||||
//底部自定义按钮接口操作
|
||||
handleBottomBtnInterface(item) {
|
||||
const selectedItemsCopy = [...this.selectItems];
|
||||
const webType = this.config.webType;
|
||||
let data = {
|
||||
items: selectedItemsCopy,
|
||||
webType
|
||||
};
|
||||
const handlerInterface = (data) => {
|
||||
let query = {
|
||||
paramList: this.jnpf.getBatchParamList(item.templateJson, data) || [],
|
||||
}
|
||||
getDataInterfaceRes(item.interfaceId, query).then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
if (!item.useConfirm) return handlerInterface(data)
|
||||
uni.showModal({
|
||||
title: this.$t('common.tipTitle'),
|
||||
content: item.confirmTitle || '确认执行此操作?',
|
||||
showCancel: true,
|
||||
confirmText: '确定',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
handlerInterface(data)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 自定义按钮事件
|
||||
selectBtnconfirm(e) {
|
||||
var i = this.columnData.customBtnsList.findIndex((item) => {
|
||||
return item.value == e[0].value
|
||||
})
|
||||
const item = this.columnData.customBtnsList[i]
|
||||
const row = this.list[this.selectListIndex]
|
||||
const index = this.selectListIndex
|
||||
// 自定义启用规则判断
|
||||
if (!this.customEnableRule(row, item.value)) return this.$u.toast('没有' + item.label + '权限')
|
||||
if (item.event.btnType == 1) this.handlePopup(item.event, row)
|
||||
if (item.event.btnType == 2) this.handleScriptFunc(item.event, row, index)
|
||||
if (item.event.btnType == 3) this.handleInterface(item.event, row)
|
||||
if (item.event.btnType == 4) this.handleLaunchFlow(item, [row])
|
||||
},
|
||||
//自定义按钮发起流程
|
||||
handleLaunchFlow(item, records) {
|
||||
const data = deepClone(item.event.launchFlow)
|
||||
let dataList = [];
|
||||
for (let i = 0; i < records.length; i++) {
|
||||
dataList.push(this.jnpf.getLaunchFlowParamList(data.transferList, records[i], this.getRowKey));
|
||||
}
|
||||
const query = {
|
||||
template: data.flowId,
|
||||
btnCode: item.value,
|
||||
currentUser: data.currentUser,
|
||||
customUser: data.customUser,
|
||||
initiator: data.initiator,
|
||||
hasPermission: data.hasPermission,
|
||||
dataList,
|
||||
};
|
||||
launchFlow(query, this.modelId).then(res => {
|
||||
this.$u.toast(res.msg)
|
||||
});
|
||||
},
|
||||
//自定义按钮弹窗操作
|
||||
handlePopup(item, row) {
|
||||
this.handleListen()
|
||||
let data = {
|
||||
config: item,
|
||||
modelId: this.modelId,
|
||||
id: this.config.webType == 4 ? '' : row[this.getRowKey],
|
||||
isPreview: this.isPreview,
|
||||
row: this.config.webType == 4 ? row : '',
|
||||
}
|
||||
data = encodeURIComponent(JSON.stringify(data))
|
||||
uni.navigateTo({
|
||||
url: '/pages/apply/customBtn/index?data=' + data
|
||||
})
|
||||
},
|
||||
//自定义按钮JS操作
|
||||
handleScriptFunc(item, row, index) {
|
||||
const parameter = {
|
||||
data: row,
|
||||
index,
|
||||
refresh: this.initData,
|
||||
onlineUtils: this.jnpf.onlineUtils,
|
||||
}
|
||||
const func = this.jnpf.getScriptFunc.call(this, item.func)
|
||||
if (!func) return
|
||||
func.call(this, parameter)
|
||||
},
|
||||
//自定义按钮接口操作
|
||||
handleInterface(item, row) {
|
||||
const handlerData = () => {
|
||||
getModelInfo(this.modelId, row[this.getModelInfo]).then(res => {
|
||||
const dataForm = res.data || {};
|
||||
if (!dataForm.data) return;
|
||||
const data = {
|
||||
...JSON.parse(dataForm.data),
|
||||
id: row[this.getModelInfo]
|
||||
};
|
||||
handlerInterface(data);
|
||||
})
|
||||
}
|
||||
const handlerInterface = (data) => {
|
||||
let query = {
|
||||
paramList: this.jnpf.getParamList(item.templateJson, {
|
||||
...data,
|
||||
id: row[this.getRowKey]
|
||||
}, this.getRowKey) || [],
|
||||
}
|
||||
getDataInterfaceRes(item.interfaceId, query).then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
if (item.isRefresh) this.initData();
|
||||
})
|
||||
}
|
||||
const handleFun = () => {
|
||||
this.config.webType == '4' ? handlerInterface(row) : handlerData();
|
||||
};
|
||||
if (!item.useConfirm) return handleFun()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: item.confirmTitle || '确认执行此操作',
|
||||
success: (res) => {
|
||||
if (!res.cancel) handleFun()
|
||||
}
|
||||
})
|
||||
},
|
||||
initData() {
|
||||
this.list = [];
|
||||
this.$nextTick(() => {
|
||||
this.mescroll.resetUpScroll();
|
||||
})
|
||||
},
|
||||
search() {
|
||||
if (this.isPreview == '1') return
|
||||
this.searchTimer && clearTimeout(this.searchTimer)
|
||||
this.searchTimer = setTimeout(() => {
|
||||
this.list = [];
|
||||
this.mescroll.resetUpScroll();
|
||||
}, 300)
|
||||
},
|
||||
handleListen() {
|
||||
uni.$off('refresh')
|
||||
uni.$on('refresh', () => {
|
||||
this.list = [];
|
||||
this.mescroll.resetUpScroll();
|
||||
})
|
||||
},
|
||||
addPage() {
|
||||
this.handleListen()
|
||||
this.jumPage({}, '')
|
||||
},
|
||||
jumPage(item, btnType) {
|
||||
if (!item.id && !item.flowState) btnType = 'btn_add'
|
||||
if (this.config.enableFlow == 1) {
|
||||
if (item.id) {
|
||||
if (!this.permission.btnPermission.includes('btn_edit') && item.flowState == 3) return
|
||||
if (!this.permission.btnPermission.includes('btn_detail') && ![0, 8, 9].includes(item
|
||||
.flowState))
|
||||
return
|
||||
}
|
||||
let opType = '-1'
|
||||
if (![0, 8, 9].includes(item.flowState) && btnType != 'btn_add') opType = 0
|
||||
const config = {
|
||||
id: item.flowTaskId || item.id || '',
|
||||
flowId: this.config.flowId,
|
||||
opType,
|
||||
status: item.flowState || '',
|
||||
isPreview: this.isPreview,
|
||||
taskId: item.flowTaskId || item.id,
|
||||
isFlow: 0,
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/workFlow/flowBefore/index?config=' +
|
||||
this.jnpf.base64.encode(JSON.stringify(config))
|
||||
})
|
||||
} else {
|
||||
const type = btnType == 'btn_detail' ? 'detail' : 'form'
|
||||
const currentMenu = encodeURIComponent(JSON.stringify(this.permission.formPermission))
|
||||
let btnType_ = this.permission.btnPermission.includes('btn_edit') ? 'btn_edit' : 'btn_add'
|
||||
let enableEdit = this.customEnableRule(item, 'edit')
|
||||
let labelS = {}
|
||||
for (let i = 0; i < this.columnData.columnBtnsList.length; i++) {
|
||||
const item = this.columnData.columnBtnsList[i]
|
||||
if (item.value == 'edit') {
|
||||
labelS[btnType_] = item.labelI18nCode ? this.$t(item.labelI18nCode) : item.label
|
||||
}
|
||||
}
|
||||
const config = {
|
||||
currentMenu,
|
||||
btnType: btnType_,
|
||||
list: this.list,
|
||||
modelId: this.modelId,
|
||||
menuId: this.menuId,
|
||||
isPreview: this.isPreview,
|
||||
id: item.id || '',
|
||||
index: item.index,
|
||||
enableEdit,
|
||||
labelS
|
||||
}
|
||||
const url = '/pages/apply/dynamicModel/' + type + '?config=' +
|
||||
this.jnpf.base64.encode(JSON.stringify(config))
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
},
|
||||
goDetail(item) {
|
||||
if (this.config.webType == 4) return
|
||||
this.handleListen()
|
||||
let hasDetail = this.permission.btnPermission.includes('btn_detail')
|
||||
let hasEdit = this.permission.btnPermission.includes('btn_edit')
|
||||
if (!hasDetail && !hasEdit) return
|
||||
if (hasDetail) {
|
||||
if (this.customEnableRule(item, 'detail')) {
|
||||
return this.jumPage(item, 'btn_detail')
|
||||
}
|
||||
if (this.customEnableRule(item, 'edit')) {
|
||||
return this.jumPage(item, 'btn_edit')
|
||||
}
|
||||
} else {
|
||||
if (this.customEnableRule(item, 'edit')) {
|
||||
return this.jumPage(item, 'btn_edit')
|
||||
}
|
||||
}
|
||||
},
|
||||
cellClick(item) {
|
||||
if (this.isPreview == '1') return this.$u.toast('功能预览不支持排序')
|
||||
const findIndex = this.sortValue.findIndex(o => o === item.value);
|
||||
if (findIndex < 0) {
|
||||
const findLikeIndex = this.sortValue.findIndex(o => o.indexOf(item.sidx) > -1);
|
||||
if (findLikeIndex > -1) this.sortValue.splice(findLikeIndex, 1)
|
||||
this.sortValue.push(item.value)
|
||||
} else {
|
||||
this.sortValue.splice(findIndex, 1)
|
||||
}
|
||||
},
|
||||
handleReset() {
|
||||
this.searchFormData = {}
|
||||
const list = ['datePicker', 'timePicker', 'inputNumber', 'calculate', 'cascader', 'usersSelect']
|
||||
for (let i = 0; i < this.searchList.length; i++) {
|
||||
const item = this.searchList[i]
|
||||
const config = item.__config__
|
||||
let defaultValue = item.searchMultiple || list.includes(config.jnpfKey) ? [] : undefined
|
||||
if (config.isFromParam) defaultValue = undefined
|
||||
config.defaultValue = defaultValue
|
||||
this.searchFormData[item.id] = item.value || defaultValue
|
||||
}
|
||||
this.searchFormConf = JSON.parse(JSON.stringify(this.searchList))
|
||||
},
|
||||
handleSearch() {
|
||||
if (this.isPreview == '1') return this.$u.toast('功能预览不支持检索')
|
||||
this.$refs.searchForm && this.$refs.searchForm.submitForm()
|
||||
},
|
||||
relationFormClick(item, column) {
|
||||
let vModel = column.vModel ? column.vModel : column.__vModel__
|
||||
let model_id = column.modelId
|
||||
let config = {
|
||||
modelId: model_id,
|
||||
isPreview: true,
|
||||
id: item[vModel + '_id'],
|
||||
sourceRelationForm: true,
|
||||
noShowBtn: 1,
|
||||
noDataLog: 1,
|
||||
propsValue: column.propsValue
|
||||
}
|
||||
const url =
|
||||
'/pages/apply/dynamicModel/detail?config=' + this.jnpf.base64.encode(JSON.stringify(config))
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
handleSortReset() {
|
||||
this.sortValue = []
|
||||
},
|
||||
handleSortSearch() {
|
||||
if (this.sortValue.length) {
|
||||
this.listQuery.sidx = this.sortValue.join(',')
|
||||
} else {
|
||||
this.setDefaultQuery()
|
||||
}
|
||||
this.$refs.uDropdown.close();
|
||||
this.$nextTick(() => {
|
||||
this.list = [];
|
||||
this.mescroll.resetUpScroll();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f0f2f6;
|
||||
height: 100%;
|
||||
/* #ifdef MP-ALIPAY */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
:deep(.u-cell) {
|
||||
padding: 0rpx;
|
||||
height: 112rpx;
|
||||
}
|
||||
</style>
|
||||
219
pages/apply/dynamicModel/components/list/list.vue
Normal file
219
pages/apply/dynamicModel/components/list/list.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="list u-p-b-20 u-p-l-20 u-p-r-20" ref="tableRef">
|
||||
<view class="list-box">
|
||||
<SwipeItem :list="list" :buttons="options" @action="actionClick" ref="swipeItem" :marginB="20">
|
||||
<template v-slot="{ item }">
|
||||
<view class="item" @tap.stop="goDetail(item)" style="border: 1px solid #fff;">
|
||||
<view class="u-m-b-10 checkbox_box" v-if="showCheckbox">
|
||||
<u-checkbox @change="checkboxChange($event,item)" v-model="item.checked" class="checkbox"
|
||||
@tap.stop shape="circle"></u-checkbox>
|
||||
</view>
|
||||
<view class="item-cell" v-for="(column,i) in columnList" :key="i">
|
||||
<template v-if="column.jnpfKey != 'table'">
|
||||
<text class="item-cell-label">{{column.label}}:</text>
|
||||
<text class="item-cell-content"
|
||||
v-if="['calculate','inputNumber'].includes(column.jnpfKey)">
|
||||
{{toThousands(item[column.prop],column)}}
|
||||
</text>
|
||||
<text class="item-cell-content text-primary"
|
||||
v-else-if="column.jnpfKey == 'relationForm'"
|
||||
@click.stop="relationFormClick(item,column)">
|
||||
{{item[column.prop]}}
|
||||
</text>
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'sign'">
|
||||
<JnpfSign v-model="item[column.prop]" align="left" detailed />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'signature'">
|
||||
<JnpfSignature v-model="item[column.prop]" align="left" detailed />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadImg'" @click.stop>
|
||||
<JnpfUploadImg v-model="item[column.prop]" detailed simple
|
||||
v-if="item[column.prop]&&item[column.prop].length" />
|
||||
</view>
|
||||
<!-- #ifndef APP-HARMONY -->
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadFile'" @click.stop>
|
||||
<JnpfUploadFile v-model="item[column.prop]" detailed
|
||||
v-if="item[column.prop]&&item[column.prop].length" align="left" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadFile'" @click.stop>
|
||||
<JnpfUploadFileH v-model="item[column.prop]" detailed
|
||||
v-if="item[column.prop]&&item[column.prop].length" align="left" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'rate'">
|
||||
<JnpfRate v-model="item[column.prop]" :max="column.count"
|
||||
:allowHalf="column.allowHalf" disabled />
|
||||
</view>
|
||||
<view class="item-cell-content item-cell-slider" v-else-if="column.jnpfKey == 'slider'">
|
||||
<JnpfSlider v-model="item[column.prop]" :min="column.min" :max="column.max"
|
||||
:step="column.step" disabled />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="column.jnpfKey == 'input'">
|
||||
<JnpfInput v-model="item[column.prop]" detailed showOverflow
|
||||
:useMask="column.useMask" :maskConfig="column.maskConfig" align='left' />
|
||||
</view>
|
||||
<text class="item-cell-content" v-else>{{item[column.prop]}}</text>
|
||||
</template>
|
||||
<tableCell v-else @click.stop class="tableCell" ref="tableCell" :label="column.label"
|
||||
:childList="item[column.prop]" :children="column.children" :pageLen="3"
|
||||
@cRelationForm="relationFormClick" :key="item.id+i">
|
||||
</tableCell>
|
||||
</view>
|
||||
<view class="item-cell" v-if="config.enableFlow==1">
|
||||
<text class="item-cell-label">审批状态:</text>
|
||||
<text :style="{color:useDefine.getFlowStatusColor(item.flowState)}">
|
||||
{{useDefine.getFlowStatusContent(item.flowState)}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</SwipeItem>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
useDefineSetting
|
||||
} from '@/utils/useDefineSetting';
|
||||
import tableCell from '../tableCell.vue'
|
||||
import SwipeItem from "@/components/SwipeItem/index"
|
||||
export default {
|
||||
emits: ['selectCheckbox', 'handleClick', 'handleMoreClick', 'goDetail', 'relationFormClick', 'update:modelValue'],
|
||||
components: {
|
||||
tableCell,
|
||||
SwipeItem
|
||||
},
|
||||
props: ['config', 'list', 'columnList', 'actionOptions', 'showSelect', 'checkedAll', 'modelValue', 'isMoreBtn',
|
||||
'customBtnsList'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
selectData: [],
|
||||
useDefine: useDefineSetting()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkedAll: {
|
||||
handler(val) {
|
||||
this.handleCheckAll()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
if (!this.customBtnsList?.length) return this.actionOptions;
|
||||
return [{
|
||||
text: this.$t('common.moreText'),
|
||||
value: 'more',
|
||||
style: {
|
||||
backgroundColor: '#007aff'
|
||||
}
|
||||
},
|
||||
...this.actionOptions,
|
||||
];
|
||||
},
|
||||
showCheckbox() {
|
||||
return this.showSelect
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 关联表单操作 */
|
||||
relationFormClick(item, column) {
|
||||
this.$emit('relationFormClick', item, column)
|
||||
},
|
||||
/* 跳转详情 */
|
||||
goDetail(item) {
|
||||
this.$emit('goDetail', item)
|
||||
},
|
||||
actionClick(data) {
|
||||
const {
|
||||
index,
|
||||
value
|
||||
} = data
|
||||
if (value === 'remove') return this.$emit('handleClick', index)
|
||||
if (value === 'more') return this.$emit('handleMoreClick', index)
|
||||
},
|
||||
/* 列表选择框 */
|
||||
checkboxChange(e, item) {
|
||||
const isSelected = e.value;
|
||||
const selectedItemsSet = new Set(this.selectData.map(selectedItem => {
|
||||
return selectedItem.id;
|
||||
}));
|
||||
if (isSelected) {
|
||||
selectedItemsSet.add(item.id);
|
||||
} else {
|
||||
selectedItemsSet.delete(item.id);
|
||||
}
|
||||
this.selectData = [...selectedItemsSet.values()].map(id => {
|
||||
return this.list.find(listItem => listItem.id === id);
|
||||
});
|
||||
this.$emit('selectCheckbox', this.selectData);
|
||||
},
|
||||
/* 全部选中 */
|
||||
handleCheckAll() {
|
||||
this.selectData = []
|
||||
if (this.checkedAll) this.selectData = this.list.filter(o => o.checked)
|
||||
this.$emit('selectCheckbox', this.selectData)
|
||||
},
|
||||
/* 千分位操作 */
|
||||
toThousands(val, column) {
|
||||
if (val) {
|
||||
let valList = val.toString().split('.')
|
||||
let num = Number(valList[0])
|
||||
let newVal = column.thousands ? num.toLocaleString() : num
|
||||
return valList[1] ? newVal + '.' + valList[1] : newVal
|
||||
} else {
|
||||
return val
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
.list_box {
|
||||
.item {
|
||||
padding: 0;
|
||||
|
||||
.checkbox_box {
|
||||
width: 60rpx;
|
||||
height: 46rpx;
|
||||
position: relative;
|
||||
|
||||
.checkbox {
|
||||
position: absolute;
|
||||
top: 6rpx;
|
||||
left: 8rpx;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right-option-box {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
|
||||
.right-option {
|
||||
width: 144rpx;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #dd524d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.more-option {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
pages/apply/dynamicModel/components/parser/index.vue
Normal file
164
pages/apply/dynamicModel/components/parser/index.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<u-form :model="formData" ref="dataForm" :errorType="['toast']" label-position="left" label-width="150">
|
||||
<u-form-item :label="item.label" :prop="item.id" v-for="(item, i) in formConfCopy" :key="i">
|
||||
<JnpfInput v-if="useInputList.includes(item.__config__.jnpfKey)" input-align='right'
|
||||
v-model="formData[item.id]" :placeholder="textPrefix+item.label" clearable />
|
||||
<template v-if="['inputNumber','calculate'].includes(item.__config__.jnpfKey)">
|
||||
<JnpfInputNumber v-model="formData[item.id]" :precision="item.precision"
|
||||
:placeholder="textPrefix+item.__config__.label" v-if="item.__config__.isFromParam" />
|
||||
<JnpfNumberRange v-model="formData[item.id]"
|
||||
:precision="!item.precision && item.__config__.jnpfKey=='calculate'?0:item.precision" v-else />
|
||||
</template>
|
||||
<template v-if="['rate', 'slider'].includes(item.__config__.jnpfKey)">
|
||||
<JnpfNumberRange v-model="formData[item.id]" :precision="item.allowHalf ? 1 : 0" />
|
||||
</template>
|
||||
<JnpfSelect v-if="useSelectList.includes(item.__config__.jnpfKey)" v-model="formData[item.id]"
|
||||
:placeholder="selectPrefix+item.label" :options="item.options" :props="item.props"
|
||||
:multiple="item.searchMultiple" :key="key" filterable />
|
||||
<JnpfCascader v-if="item.__config__.jnpfKey==='cascader'" v-model="formData[item.id]"
|
||||
:placeholder="selectPrefix+item.label" :options="item.options" :props="item.props" filterable
|
||||
:showAllLevels="item.showAllLevels" :multiple="item.searchMultiple" />
|
||||
<JnpfAutoComplete v-if="item.__config__.jnpfKey==='autoComplete'" v-model="formData[item.id]"
|
||||
:interfaceName="item.interfaceName" :placeholder="selectPrefix+item.label"
|
||||
:interfaceId="item.interfaceId" :total="item.total" :templateJson="item.templateJson"
|
||||
:formData='formData' :relationField="item.relationField" :propsValue="item.propsValue"
|
||||
:clearable='item.clearable' />
|
||||
<JnpfGroupSelect v-if="item.__config__.jnpfKey==='groupSelect'" v-model="formData[item.id]"
|
||||
:vModel='item.id' :multiple="item.searchMultiple" :disabled="item.disabled"
|
||||
:placeholder="selectPrefix+item.label" :ableIds="item.ableIds" :selectType="item.selectType" />
|
||||
<JnpfRoleSelect v-if="item.__config__.jnpfKey==='roleSelect'" v-model="formData[item.id]"
|
||||
:multiple="item.searchMultiple" :disabled="item.disabled" :placeholder="selectPrefix+item.label"
|
||||
:ableIds="item.ableIds" :selectType="item.selectType" />
|
||||
<JnpfOrganizeSelect v-if="['organizeSelect','currOrganize'].includes(item.__config__.jnpfKey)"
|
||||
v-model="formData[item.id]" :placeholder="selectPrefix+item.label"
|
||||
:multiple="item.__config__.jnpfKey === 'currOrganize' ? true : item.searchMultiple"
|
||||
:ableIds="item.ableIds" :selectType="item.selectType" />
|
||||
<JnpfPosSelect v-if="['posSelect','currPosition'].includes(item.__config__.jnpfKey)"
|
||||
v-model="formData[item.id]" :placeholder="selectPrefix+item.label" :ableIds="item.ableIds"
|
||||
:selectType="item.selectType"
|
||||
:multiple="item.__config__.jnpfKey === 'currPosition' ? true : item.searchMultiple" />
|
||||
<JnpfUserSelect v-if="['userSelect','createUser', 'modifyUser'].includes(item.__config__.jnpfKey)"
|
||||
v-model="formData[item.id]" :placeholder="selectPrefix+item.label" :ableDepIds="item.ableDepIds"
|
||||
:ableIds="item.ableIds" :selectType="item.selectType!='custom'?'all':'custom'"
|
||||
:multiple="item.searchMultiple" />
|
||||
<JnpfUsersSelect v-if="item.__config__.jnpfKey==='usersSelect'" v-model="formData[item.id]"
|
||||
:placeholder="selectPrefix+item.label" :clearable="item.clearable" />
|
||||
<JnpfTreeSelect v-if="item.__config__.jnpfKey==='treeSelect'" v-model="formData[item.id]"
|
||||
:options="item.options" :props="item.props" :placeholder="selectPrefix+item.label" filterable
|
||||
:multiple="item.searchMultiple" />
|
||||
<JnpfAreaSelect v-if="item.__config__.jnpfKey==='areaSelect'" v-model="formData[item.id]"
|
||||
:placeholder="selectPrefix+item.label" :level="item.level" :multiple="item.searchMultiple" />
|
||||
<template v-if="useDateList.includes(item.__config__.jnpfKey)">
|
||||
<JnpfDatePicker v-model="formData[item.id]" :format='item.format' v-if="item.__config__.isFromParam" />
|
||||
<JnpfDateRange v-model="formData[item.id]" :format='item.format' v-else />
|
||||
</template>
|
||||
<JnpfTimeRange v-if="item.__config__.jnpfKey==='timePicker'" v-model="formData[item.id]"
|
||||
:format='item.format' />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getDictionaryDataSelector,
|
||||
getDataInterfaceRes
|
||||
} from '@/api/common'
|
||||
const dyOptionsList = ['radio', 'checkbox', 'select', 'cascader', 'treeSelect'];
|
||||
const useSelectList = ['radio', 'checkbox', 'select'];
|
||||
const useInputList = ['input', 'textarea', 'text', 'link', 'billRule', 'location'];
|
||||
const useDateList = ['createTime', 'modifyTime', 'datePicker', 'dateCalculate'];
|
||||
const useArrList = ['cascader', 'address', 'numInput', 'calculate', ...useDateList]
|
||||
export default {
|
||||
props: ['formConf', 'webType', 'searchFormData'],
|
||||
data() {
|
||||
const data = {
|
||||
useInputList,
|
||||
useDateList,
|
||||
useSelectList,
|
||||
formConfCopy: this.$u.deepClone(this.formConf),
|
||||
formData: this.$u.deepClone(this.searchFormData),
|
||||
key: +new Date(),
|
||||
textPrefix: this.$t('common.inputTextPrefix') + ' ',
|
||||
selectPrefix: this.$t('common.chooseTextPrefix') + ' ',
|
||||
}
|
||||
this.initRelationForm(data.formConfCopy)
|
||||
this.initFormData(data.formConfCopy, data.formData)
|
||||
return data
|
||||
},
|
||||
watch: {
|
||||
searchFormData(val) {
|
||||
this.formData = val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initFormData(componentList, formData) {
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
if (dyOptionsList.indexOf(config.jnpfKey) > -1) {
|
||||
if (config.dataType === 'dictionary' && config.dictionaryType) {
|
||||
getDictionaryDataSelector(config.dictionaryType).then(res => {
|
||||
cur.options = res.data.list || []
|
||||
this.key = +new Date()
|
||||
this.resetForm()
|
||||
})
|
||||
}
|
||||
if (config.dataType === 'dynamic' && config.propsUrl) {
|
||||
const query = {
|
||||
paramList: this.jnpf.getParamList(config.templateJson) || []
|
||||
};
|
||||
getDataInterfaceRes(config.propsUrl, query).then(res => {
|
||||
let list = res.data || []
|
||||
cur.options = Array.isArray(list) ? list : [];
|
||||
this.key = +new Date()
|
||||
this.resetForm()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
initRelationForm(componentList) {
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
if (config.jnpfKey == 'relationFormAttr' || config.jnpfKey == 'popupAttr') {
|
||||
const relationKey = cur.relationField.split("_jnpfTable_")[0]
|
||||
componentList.forEach(item => {
|
||||
const noVisibility = Array.isArray(item.__config__.visibility) && !item
|
||||
.__config__.visibility.includes('app')
|
||||
if ((relationKey == item.id) && (noVisibility || !!item.__config__
|
||||
.noShow)) {
|
||||
cur.__config__.noShow = true
|
||||
}
|
||||
})
|
||||
}
|
||||
if (cur.__config__.children && cur.__config__.children.length) this.initRelationForm(cur
|
||||
.__config__.children)
|
||||
})
|
||||
},
|
||||
allCondition() {
|
||||
for (let key in this.formData) {
|
||||
if (this.formData[key] !== 0 && !this.formData[key]) this.formData[key] = undefined;
|
||||
if (this.formData[key] && Array.isArray(this.formData[key]) && !this.formData[key]
|
||||
.length) {
|
||||
this.formData[key] = undefined
|
||||
}
|
||||
}
|
||||
return this.formData
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.dataForm.validate(valid => {
|
||||
if (!valid) return
|
||||
for (let key in this.formData) {
|
||||
if (this.formData[key] !== 0 && !this.formData[key]) this.formData[key] = undefined;
|
||||
if (this.formData[key] && Array.isArray(this.formData[key]) && !this.formData[key]
|
||||
.length) {
|
||||
this.formData[key] = undefined
|
||||
}
|
||||
}
|
||||
this.$emit('submit', this.formData)
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.dataForm.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
125
pages/apply/dynamicModel/components/tableCell.vue
Normal file
125
pages/apply/dynamicModel/components/tableCell.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<uni-collapse class='collapse' accordion ref="collapse" @change="collapseChange" @click.stop>
|
||||
<uni-collapse-item :key="key">
|
||||
<template v-slot:title>
|
||||
<view class="u-font-24 u-flex">
|
||||
<view style="width: 124rpx;text-align: right;">
|
||||
<text>{{label+':'}}</text>
|
||||
</view>
|
||||
<text style="color: #606266;" class="u-m-l-28">{{$t('app.apply.expandData')}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<view class="collapse-item" v-for="(item,d) in dataList" :key="d">
|
||||
<view v-if="d<allPageLen" class="item-cell-children">
|
||||
<view class="item-cell" v-for="(cld,c) in children" :key="c">
|
||||
<text
|
||||
class="item-cell-label">{{cld.labelI18nCode ? $t(cld.labelI18nCode, cld.label) : cld.label}}:</text>
|
||||
<text class="item-cell-content"
|
||||
v-if="['calculate','inputNumber'].includes(cld.__config__.jnpfKey)">
|
||||
{{toThousands(item[cld.vModel],cld) }}
|
||||
</text>
|
||||
<text class="item-cell-content text-primary"
|
||||
v-else-if="cld.__config__.jnpfKey === 'relationForm'"
|
||||
@click.stop="relationFormClick(item,cld)">
|
||||
{{item[cld.vModel]}}
|
||||
</text>
|
||||
<view class="item-cell-content" v-else-if="cld.jnpfKey == 'sign'">
|
||||
<JnpfSign v-model="item[cld.vModel]" align="left" detailed />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="cld.jnpfKey == 'signature'">
|
||||
<JnpfSignature v-model="item[cld.vModel]" align="left" detailed />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="cld.jnpfKey == 'uploadImg'" @click.stop>
|
||||
<JnpfUploadImg v-model="item[cld.vModel]" detailed simple
|
||||
v-if="item[cld.vModel]&&item[cld.vModel].length" />
|
||||
</view>
|
||||
<!-- #ifndef APP-HARMONY -->
|
||||
<view class="item-cell-content" v-else-if="cld.jnpfKey == 'uploadFile'" @click.stop>
|
||||
<JnpfUploadFile v-model="item[cld.vModel]" detailed
|
||||
v-if="item[cld.vModel]&&item[cld.vModel].length" align="left" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<view class="item-cell-content" v-else-if="cld.jnpfKey == 'uploadFile'" @click.stop>
|
||||
<JnpfUploadFileH v-model="item[cld.vModel]" detailed
|
||||
v-if="item[cld.vModel]&&item[cld.vModel].length" align="left" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="item-cell-content" v-else-if="cld.jnpfKey == 'rate'">
|
||||
<JnpfRate v-model="item[cld.vModel]" :max="cld.count" :allowHalf="cld.allowHalf" disabled />
|
||||
</view>
|
||||
<view class="item-cell-content item-cell-slider" v-else-if="cld.jnpfKey == 'slider'">
|
||||
<JnpfSlider v-model="item[cld.vModel]" :min="cld.min" :max="cld.max" :step="cld.step"
|
||||
disabled />
|
||||
</view>
|
||||
<view class="item-cell-content" v-else-if="cld.jnpfKey == 'input'">
|
||||
<JnpfInput v-model="item[cld.vModel]" detailed showOverflow :useMask="cld.useMask"
|
||||
:maskConfig="cld.maskConfig" align='left' />
|
||||
</view>
|
||||
<text class="item-cell-content" v-else>{{item[cld.vModel]}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loadMore" @click.stop="loadMore" v-if="!isAllData&&this.dataList.length>allPageLen">
|
||||
加载更多
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['childList', 'label', 'children', 'pageLen', 'thousands', 'thousandsField'],
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
isAllData: false,
|
||||
key: +new Date(),
|
||||
allPageLen: 3
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
childList: {
|
||||
handler(val) {
|
||||
this.dataList = val || []
|
||||
this.allPageLen = this.pageLen
|
||||
this.children.map(o => {
|
||||
if (o.childLabel.length > 4) o.childLabel = o.childLabel.substring(0, 4)
|
||||
})
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toThousands(val, column) {
|
||||
if (val) {
|
||||
let valList = val.toString().split('.')
|
||||
let num = Number(valList[0])
|
||||
let newVal = column.thousands ? num.toLocaleString() : num
|
||||
return valList[1] ? newVal + '.' + valList[1] : newVal
|
||||
}
|
||||
},
|
||||
relationFormClick(item, cld) {
|
||||
this.$emit('cRelationForm', item, cld)
|
||||
},
|
||||
loadMore() {
|
||||
this.allPageLen = this.childList.length
|
||||
this.isAllData = true
|
||||
this.resizeCollapse()
|
||||
},
|
||||
collapseChange(e) {
|
||||
if (!e) {
|
||||
this.isAllData = false
|
||||
setTimeout(() => {
|
||||
this.allPageLen = this.pageLen
|
||||
}, 500)
|
||||
}
|
||||
this.resizeCollapse()
|
||||
},
|
||||
resizeCollapse() {
|
||||
setTimeout(() => {
|
||||
this.$refs.collapse && this.$refs.collapse.resize()
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user