初始提交
This commit is contained in:
455
components/Jnpf/Parser/Item.vue
Normal file
455
components/Jnpf/Parser/Item.vue
Normal file
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<JnpfText v-if="config.jnpfKey=='text'" :content="item.content" :textStyle="item.textStyle" />
|
||||
<JnpfGroupTitle v-else-if="config.jnpfKey=='groupTitle'" :content="item.content"
|
||||
:content-position="item.contentPosition" :helpMessage="item.helpMessage" @groupIcon="clickIcon(item)" />
|
||||
<JnpfDivider v-else-if="config.jnpfKey=='divider'" :content="item.content" />
|
||||
<view class="jnpf-card" v-else-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>
|
||||
<template v-for="(child, index) in config.children" :key="child.__config__.renderKey">
|
||||
<item v-if="!child.__config__.noShow&& child.__config__.isVisibility" :itemData="child"
|
||||
:ref="child.__vModel__?child.__vModel__: 'ref'+item.__config__.formId" :formConf="formConf"
|
||||
:formData="formData" @input="setValue" @clickIcon='clickIcon' @clickFun="onChildClick"
|
||||
@collapse-change="onChildCollapseChange" @tab-change='onChildTabChange' />
|
||||
</template>
|
||||
</view>
|
||||
<!-- 步骤条 -->
|
||||
<view v-else-if="config.jnpfKey==='steps'">
|
||||
<view class="step-container">
|
||||
<u-steps :list="config.children" :mode="item.simple ? 'dot' :'number'" name="title"
|
||||
@change="onStepChange($event,item)" :current="stepCurrent">
|
||||
</u-steps>
|
||||
</view>
|
||||
<view v-for="(it,i) in config.children" :key='i'>
|
||||
<view v-show="i == stepCurrent">
|
||||
<template v-for="(child, index) in it.__config__.children" :key="child.__config__.renderKey">
|
||||
<item v-if="!child.__config__.noShow&& child.__config__.isVisibility" :itemData="child"
|
||||
:formConf="formConf" :formData="formData"
|
||||
:ref="child.__vModel__?child.__vModel__: 'ref'+item.__config__.formId" @input="setValue"
|
||||
@clickIcon='clickIcon' @clickFun="onChildClick" @collapse-change="onChildCollapseChange" />
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jnpf-tab" v-else-if="config.jnpfKey==='tab'">
|
||||
<u-tabs is-scroll :list="config.children" name="title" v-model="tabCurrent" @change="onTabChange"
|
||||
:key="tabKey" />
|
||||
<view v-for="(it,i) in config.children" :key='i'>
|
||||
<view v-show="i == tabCurrent">
|
||||
<template v-for="(child, index) in it.__config__.children" :key="child.__config__.renderKey">
|
||||
<item v-if="!child.__config__.noShow&& child.__config__.isVisibility" :itemData="child"
|
||||
:formConf="formConf" :formData="formData"
|
||||
:ref="child.__vModel__?child.__vModel__: 'ref'+item.__config__.formId" @input="setValue"
|
||||
@clickIcon='clickIcon' @clickFun="onChildClick" @collapse-change="onChildCollapseChange"
|
||||
@tab-change='onChildTabChange' />
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="config.jnpfKey==='collapse'">
|
||||
<u-collapse ref="collapseRef" :head-style="{'padding-left':'20rpx'}" :accordion="item.accordion">
|
||||
<u-collapse-item v-for="(it, i) in config.children" :key="i" :title="it.title"
|
||||
:open="config.active && config.active.indexOf(it.name)>-1" @change="onCollapseChange">
|
||||
<template v-for="(child, index) in it.__config__.children" :key="child.__config__.renderKey">
|
||||
<item v-if="!child.__config__.noShow&& child.__config__.isVisibility" :itemData="child"
|
||||
:formConf="formConf" :formData="formData"
|
||||
:ref="child.__vModel__?child.__vModel__: 'ref'+item.__config__.formId" @input="setValue"
|
||||
@clickIcon='clickIcon' @clickFun="onChildClick" @collapse-change="onChildCollapseChange"
|
||||
@tab-change='onChildTabChange' />
|
||||
</template>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
<view v-else-if="config.jnpfKey==='table'">
|
||||
<child-table v-if="config.isVisibility" v-model="value" :config="item" :ref="item.__vModel__"
|
||||
:formData='formData' @input="setValue" />
|
||||
</view>
|
||||
<u-form-item v-else-if="config.jnpfKey=='popupSelect' || config.jnpfKey=='relationForm'" :label=" realLabel"
|
||||
class="popup-select" :prop="item.__vModel__" :required="config.required" :label-width="labelWidth"
|
||||
:left-icon="leftIcon" :left-icon-style="{'color':'#a8aaaf'}" @clickIcon="clickIcon(item)">
|
||||
<!-- 弹窗选择 -->
|
||||
<JnpfPopupSelect v-if="config.jnpfKey=='popupSelect'" v-model="value" :placeholder="item.placeholder"
|
||||
:disabled="item.disabled" :interfaceId="item.interfaceId" :formData="formData"
|
||||
:templateJson="item.templateJson" :columnOptions="item.columnOptions" :extraOptions="item.extraOptions"
|
||||
:relationField="item.relationField" :propsValue="item.propsValue" :hasPage="item.hasPage"
|
||||
:pageSize="item.pageSize"
|
||||
:vModel="config.tableName ? item.__vModel__ + '_jnpfTable_' + config.tableName + (config.isSubTable ? '0' : '1') : config.__vModel__"
|
||||
:popupTitle="item.popupTitle" @change="onChange" />
|
||||
<!-- 关联表单 -->
|
||||
<JnpfRelationForm v-if="config.jnpfKey=='relationForm'" v-model="value" :placeholder="item.placeholder"
|
||||
:disabled="item.disabled" :modelId="item.modelId" :columnOptions="item.columnOptions"
|
||||
:extraOptions="item.extraOptions" :relationField="item.relationField" :hasPage="item.hasPage"
|
||||
:pageSize="item.pageSize" :queryType="item.queryType"
|
||||
:vModel="config.tableName ? item.__vModel__ + '_jnpfTable_' + config.tableName + (config.isSubTable ? '0' : '1') : item.__vModel__"
|
||||
:popupTitle="item.popupTitle" @change="onChange" :propsValue="item.propsValue" />
|
||||
</u-form-item>
|
||||
<u-form-item v-else :label=" realLabel" :prop="item.__vModel__" :required="config.required"
|
||||
:label-width="labelWidth" :left-icon="leftIcon" :left-icon-style="{'color':'#a8aaaf'}"
|
||||
@clickIcon="clickIcon(item)">
|
||||
<JnpfInput v-if="config.jnpfKey=='input'" v-model="value" :showPassword="item.showPassword"
|
||||
:placeholder="item.placeholder" :maxlength="item.maxlength" :showCount="item.showCount"
|
||||
:disabled="item.disabled" :clearable='item.clearable' :useScan="item.useScan"
|
||||
:addonBefore="item.addonBefore" :addonAfter="item.addonAfter" @change="onChange" @blur="onBlur" />
|
||||
<JnpfTextarea v-if="config.jnpfKey=='textarea'" v-model="value" :placeholder="item.placeholder"
|
||||
:maxlength="item.maxlength" :showCount="item.showCount" :disabled="item.disabled"
|
||||
:clearable='item.clearable' @change="onChange" @blur="onBlur" />
|
||||
<!--数字输入步进器-->
|
||||
<JnpfInputNumber v-if="config.jnpfKey=='inputNumber'" v-model="value" :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" @change="onChange" @blur="onBlur" />
|
||||
<!-- 开关-->
|
||||
<JnpfSwitch v-if="config.jnpfKey=='switch'" v-model="value" :disabled="item.disabled" @change="onChange" />
|
||||
<!-- 单选框组 -->
|
||||
<JnpfRadio v-if="config.jnpfKey=='radio'" v-model="value" :options="item.options" :props="item.props"
|
||||
:disabled="item.disabled" :direction='item.direction' @change="onChange" />
|
||||
<!-- 多选框组 -->
|
||||
<JnpfCheckbox v-if="config.jnpfKey=='checkbox'" v-model="value" :options="item.options" :props="item.props"
|
||||
:disabled="item.disabled" :direction='item.direction' @change="onChange" />
|
||||
<!-- 下拉选择 -->
|
||||
<JnpfSelect v-if="config.jnpfKey=='select'" v-model="value" :placeholder="item.placeholder"
|
||||
:options="item.options" :props="item.props" :multiple="item.multiple" :disabled="item.disabled"
|
||||
@change="onChange" :filterable="item.filterable" />
|
||||
<!-- 级联选择 -->
|
||||
<JnpfCascader v-if="config.jnpfKey=='cascader'" v-model="value" :placeholder="item.placeholder"
|
||||
:options="item.options" :props="item.props" :disabled="item.disabled" :multiple="item.multiple"
|
||||
:filterable='item.filterable' :clearable='item.clearable' :showAllLevels="item.showAllLevels"
|
||||
@change="onChange" />
|
||||
<JnpfDatePicker v-if="config.jnpfKey=='datePicker'" v-model="value" :placeholder="item.placeholder"
|
||||
:disabled="item.disabled" :format="item.format" :startTime="item.startTime" :endTime='item.endTime'
|
||||
@change="onChange" />
|
||||
<JnpfTimePicker v-if="config.jnpfKey=='timePicker'" v-model="value" :placeholder="item.placeholder"
|
||||
:disabled="item.disabled" :format="item.format" :startTime="item.startTime" :endTime='item.endTime'
|
||||
@change="onChange" />
|
||||
<!-- #ifndef APP-HARMONY -->
|
||||
<JnpfUploadFile v-if="config.jnpfKey=='uploadFile'" v-model="value" :disabled="item.disabled"
|
||||
:limit="item.limit" :sizeUnit="item.sizeUnit" :fileSize="item.fileSize" :pathType="item.pathType"
|
||||
:isAccount="item.isAccount" :folder="item.folder" :accept="item.accept" :tipText="item.tipText"
|
||||
@change="onChange" :sortRule="item.sortRule" :timeFormat="item.timeFormat" :buttonText='item.buttonText' />
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<JnpfUploadFileH v-if="config.jnpfKey=='uploadFile'" v-model="value" :disabled="item.disabled"
|
||||
:limit="item.limit" :sizeUnit="item.sizeUnit" :fileSize="item.fileSize" :pathType="item.pathType"
|
||||
:isAccount="item.isAccount" :folder="item.folder" :accept="item.accept" :tipText="item.tipText"
|
||||
@change="onChange" :sortRule="item.sortRule" :timeFormat="item.timeFormat" :buttonText='item.buttonText' />
|
||||
<!-- #endif -->
|
||||
<!-- 图片上传 -->
|
||||
<JnpfUploadImg v-if="config.jnpfKey=='uploadImg'" v-model="value" :disabled="item.disabled" :limit="item.limit"
|
||||
:sizeUnit="item.sizeUnit" :fileSize="item.fileSize" :pathType="item.pathType" :isAccount="item.isAccount"
|
||||
:folder="item.folder" :tipText="item.tipText" @change="onChange" :sortRule="item.sortRule"
|
||||
:timeFormat="item.timeFormat" :buttonText='item.buttonText' />
|
||||
<!-- 颜色选择 -->
|
||||
<JnpfColorPicker v-if="config.jnpfKey=='colorPicker'" v-model="value" :colorFormat="item.colorFormat"
|
||||
:disabled="item.disabled" @change="onChange" />
|
||||
<JnpfRate v-if="config.jnpfKey=='rate'" v-model="value" :max="item.count" :allowHalf="item.allowHalf"
|
||||
:disabled="item.disabled" @change="onChange" />
|
||||
<JnpfSlider v-if="config.jnpfKey=='slider'" v-model="value" :step="item.step" :min="item.min" :max="item.max"
|
||||
:disabled="item.disabled" @change="onChange" />
|
||||
<JnpfBarcode v-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" :formData="formData" />
|
||||
<JnpfQrcode v-if="config.jnpfKey=='qrcode'" :staticText="item.staticText" :width="item.width"
|
||||
:dataType="item.dataType" :colorDark="item.colorDark" :colorLight="item.colorLight"
|
||||
:relationField="item.relationField" :formData="formData" />
|
||||
<JnpfOrganizeSelect v-if="config.jnpfKey=='organizeSelect'" v-model="value" :multiple="item.multiple"
|
||||
:placeholder="item.placeholder" :disabled="item.disabled" :ableIds="item.ableIds"
|
||||
:selectType="item.selectType" @change="onChange" />
|
||||
<JnpfPosSelect v-if="config.jnpfKey=='posSelect'" v-model="value" :multiple="item.multiple"
|
||||
:placeholder="item.placeholder" :disabled="item.disabled" :ableIds="item.ableIds"
|
||||
:selectType="item.selectType" @change="onChange" />
|
||||
<JnpfUserSelect v-if="config.jnpfKey=='userSelect'" v-model="value" :multiple="item.multiple"
|
||||
:placeholder="item.placeholder" :disabled="item.disabled" :selectType="item.selectType"
|
||||
:ableIds="item.ableIds" :clearable="item.clearable" :ableRelationIds="item.ableRelationIds"
|
||||
@change="onChange" />
|
||||
<JnpfUsersSelect v-if="config.jnpfKey=='usersSelect'" v-model="value" :placeholder="item.placeholder"
|
||||
:disabled="item.disabled" :clearable="item.clearable" @change="onChange" />
|
||||
<JnpfRoleSelect v-if="config.jnpfKey=='roleSelect'" v-model="value" :vModel='item.__vModel__'
|
||||
:multiple="item.multiple" :disabled="item.disabled" :placeholder="item.placeholder" :ableIds="item.ableIds"
|
||||
:selectType="item.selectType" @change="onChange" />
|
||||
<JnpfGroupSelect v-if="config.jnpfKey=='groupSelect'" v-model="value" :vModel='item.__vModel__'
|
||||
:multiple="item.multiple" :disabled="item.disabled" :ableIds="item.ableIds" :selectType="item.selectType"
|
||||
:placeholder="item.placeholder" @change="onChange" />
|
||||
<!-- 下拉树形 -->
|
||||
<JnpfTreeSelect v-if="config.jnpfKey=='treeSelect'" v-model="value" :options="item.options" :props="item.props"
|
||||
:multiple="item.multiple" :placeholder="item.placeholder" :disabled="item.disabled"
|
||||
:filterable="item.filterable" @change="onChange" />
|
||||
<JnpfAutoComplete v-if="config.jnpfKey=='autoComplete'" v-model="value" :disabled="item.disabled"
|
||||
:interfaceName="item.interfaceName" :placeholder="item.placeholder" :interfaceId="item.interfaceId"
|
||||
:total="item.total" :templateJson="item.templateJson" :formData='formData'
|
||||
:relationField="item.relationField" :propsValue="item.propsValue" :clearable='item.clearable'
|
||||
@change="onChange" />
|
||||
<JnpfAreaSelect v-if="config.jnpfKey=='areaSelect'" v-model="value" :placeholder="item.placeholder"
|
||||
:level="item.level" :disabled="item.disabled" :multiple="item.multiple" @change="onChange" />
|
||||
<JnpfRelationFormAttr v-if="config.jnpfKey=='relationFormAttr'" v-model="value" :showField="item.showField"
|
||||
:relationField="item.relationField" :isStorage='item.isStorage' @change="onChange" />
|
||||
<!-- 下拉表格 -->
|
||||
<JnpfPopupSelect v-if="config.jnpfKey=='popupTableSelect'" v-model="value" :placeholder="item.placeholder"
|
||||
:disabled="item.disabled" :interfaceId="item.interfaceId" :formData="formData"
|
||||
:templateJson="item.templateJson" :columnOptions="item.columnOptions" :relationField="item.relationField"
|
||||
:propsValue="item.propsValue" :hasPage="item.hasPage" :pageSize="item.pageSize"
|
||||
:vModel="config.tableName ? item.__vModel__ + '_jnpfTable_' + config.tableName + (config.isSubTable ? '0' : '1') : config.__vModel__"
|
||||
:popupTitle="item.popupTitle" :multiple="item.multiple" @change="onChange" />
|
||||
<JnpfPopupAttr v-if="config.jnpfKey=='popupAttr'" v-model="value" :showField="item.showField"
|
||||
:relationField="item.relationField" :isStorage='item.isStorage' @change="onChange" />
|
||||
<!-- 计算公式 -->
|
||||
<JnpfCalculate v-if="config.jnpfKey=='calculate'" v-model="value" :expression='item.expression'
|
||||
:vModel='item.__vModel__' :config='item.__config__' :formData='formData' :precision="item.precision"
|
||||
:isAmountChinese="item.isAmountChinese" :thousands="item.thousands" :roundType="item.roundType"
|
||||
:dateCalConfig="item.dateCalConfig" :type="item.type" />
|
||||
<!-- 日期计算公式 -->
|
||||
<JnpfDateCalculate v-if="config.jnpfKey=='dateCalculate'" v-model="value" :expression='item.expression'
|
||||
:vModel='item.__vModel__' :config='item.__config__' :formData='formData'
|
||||
:startRelationField="item.startRelationField" :startTimeValue="item.startTimeValue"
|
||||
:startTimeType="item.startTimeType" :format="item.format" />
|
||||
<!-- 签名 -->
|
||||
<JnpfSign v-if="config.jnpfKey=='sign'" v-model="value" :disabled="item.disabled" :fieldKey="item.__vModel__"
|
||||
@change="onChange" :isInvoke="item.isInvoke" />
|
||||
<!-- 签章 -->
|
||||
<JnpfSignature v-if="config.jnpfKey=='signature'" v-model="value" :disabled="item.disabled" @change="onChange"
|
||||
:ableIds="item.ableIds" />
|
||||
<JnpfLocation v-if="config.jnpfKey=='location'" v-model="value" :autoLocation="item.autoLocation"
|
||||
:adjustmentScope="item.adjustmentScope" :enableLocationScope="item.enableLocationScope"
|
||||
:enableDesktopLocation="item.enableDesktopLocation" :locationScope="item.locationScope"
|
||||
:disabled="item.disabled" :clearable='item.clearable' @change="onChange" />
|
||||
<JnpfOpenData v-if="isSystem" v-model="value" :type="item.type" :showLevel="item.showLevel" />
|
||||
<JnpfInput v-if="config.jnpfKey==='modifyUser'||config.jnpfKey==='modifyTime'" v-model="value"
|
||||
placeholder="系统自动生成" disabled />
|
||||
<!--start labelwidth=0-->
|
||||
<JnpfLink v-if="config.jnpfKey=='link'" :content="item.content" :href="item.href" :target='item.target'
|
||||
:textStyle="item.textStyle" @click="onClick" />
|
||||
<!-- 富文本 -->
|
||||
<JnpfEditor v-if="config.jnpfKey=='editor'" v-model="value" :disabled="item.disabled"
|
||||
:placeholder="item.placeholder" />
|
||||
<JnpfButton v-if="config.jnpfKey=='button'" :buttonText="item.buttonText" :align="item.align" :type="item.type"
|
||||
:disabled="item.disabled" @click="onClick($event)" />
|
||||
<JnpfAlert v-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" />
|
||||
<!--end labelwidth=0-->
|
||||
</u-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import childTable from './childTable.vue'
|
||||
// #ifdef MP
|
||||
import Item from './Item.vue' //兼容小程序
|
||||
// #endif
|
||||
const systemList = ['createUser', 'createTime', 'currOrganize', 'currPosition', 'billRule']
|
||||
const specialList = ['link', 'editor', 'button', 'alert']
|
||||
export default {
|
||||
name: 'Item',
|
||||
inject: ["parameter"],
|
||||
emits: ['input', 'clickIcon', 'clickFun', 'collapseChange', 'tab-change', 'onCollapseChange'],
|
||||
components: {
|
||||
childTable,
|
||||
// #ifdef MP
|
||||
Item
|
||||
// #endif
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: undefined,
|
||||
tabCurrent: 0,
|
||||
stepCurrent: 0,
|
||||
tabKey: +new Date(),
|
||||
extraObj: {}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
itemData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
formConf: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
item() {
|
||||
const item = uni.$u.deepClone(this.itemData)
|
||||
this.initI18n(item)
|
||||
return item
|
||||
},
|
||||
config() {
|
||||
return this.item.__config__
|
||||
},
|
||||
isSystem() {
|
||||
return systemList.indexOf(this.config.jnpfKey) > -1
|
||||
},
|
||||
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" : ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.item.__config__.defaultValue = val
|
||||
this.$emit('input', this.item)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
mounted() {
|
||||
if (this.config.jnpfKey === 'collapse') {
|
||||
uni.$on('initCollapse', () => {
|
||||
this.$refs.collapseRef && this.$refs.collapseRef.init()
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initI18n(item) {
|
||||
const config = item.__config__
|
||||
if (item.placeholderI18nCode) item.placeholder = this.$t(item.placeholderI18nCode);
|
||||
if (config.tipLabelI18nCode) config.tipLabel = this.$t(config.tipLabelI18nCode)
|
||||
if (item.__config__.label && item.__config__.labelI18nCode) item.__config__.label = this.$t(item.__config__
|
||||
.labelI18nCode);
|
||||
if (item.__config__.tipLabel && item.__config__.tipLabelI18nCode) item.__config__.tipLabel = this.$t(item
|
||||
.__config__.tipLabelI18nCode);
|
||||
if (['groupTitle', 'divider', 'link', 'text'].includes(config.jnpfKey)) {
|
||||
if (item.contentI18nCode) item.content = this.$t(item.contentI18nCode);
|
||||
if (item.helpMessageI18nCode) item.helpMessage = this.$t(item.helpMessageI18nCode);
|
||||
}
|
||||
if (config.jnpfKey === 'button' && item.buttonTextI18nCode) item.buttonText = this.$t(item
|
||||
.buttonTextI18nCode);
|
||||
if (config.jnpfKey === 'alert') {
|
||||
if (item.titleI18nCode) item.title = this.$t(item.titleI18nCode);
|
||||
if (item.descriptionI18nCode) item.description = this.$t(item.descriptionI18nCode);
|
||||
if (item.closeTextI18nCode) item.closeText = this.$t(item.closeTextI18nCode);
|
||||
}
|
||||
if (config.jnpfKey === 'card') {
|
||||
if (item.headerI18nCode) item.header = this.$t(item.headerI18nCode);
|
||||
}
|
||||
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) config.children[i].title =
|
||||
this.$t(config.children[i].titleI18nCode);
|
||||
}
|
||||
}
|
||||
if (item.headerI18nCode) item.header = this.$t(item.headerI18nCode);
|
||||
}
|
||||
if (config.jnpfKey === 'table') {
|
||||
if (config.children && config.children.length) {
|
||||
for (let i = 0; i < config.children.length; i++) {
|
||||
this.initI18n(config.children[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onStepChange(index, item) {
|
||||
if (this.stepCurrent === index) return
|
||||
item.__config__.active = index
|
||||
this.stepCurrent = index
|
||||
this.$nextTick(() => {
|
||||
uni.$emit('updateCode')
|
||||
uni.$emit('initCollapse')
|
||||
})
|
||||
},
|
||||
initData() {
|
||||
if (this.config.jnpfKey === 'steps') this.stepCurrent = this.config.active
|
||||
if (this.config.jnpfKey != 'tab') return this.value = this.config.defaultValue
|
||||
for (var i = 0; i < this.config.children.length; i++) {
|
||||
if (this.config.active == this.config.children[i].name) {
|
||||
this.tabCurrent = i
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
onBlur(val) {
|
||||
this.setScriptFunc(val, this.item, 'blur')
|
||||
},
|
||||
onChange(val, data) {
|
||||
this.extraObj = data
|
||||
this.$nextTick(() => {
|
||||
this.setScriptFunc(data || val, this.item)
|
||||
})
|
||||
if (['popupSelect', 'relationForm'].includes(this.item.__config__.jnpfKey)) {
|
||||
this.setTransferFormData(data || val, this.item.__config__, this.item.__config__.jnpfKey)
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
uni.$emit('subChange', this.item, data || val)
|
||||
})
|
||||
},
|
||||
setScriptFunc(val, data, type = 'change') {
|
||||
if (data && data.on && data.on[type]) {
|
||||
const func = this.jnpf.getScriptFunc(data.on[type]);
|
||||
if (!func) return
|
||||
func.call(this, {
|
||||
data: val,
|
||||
...this.parameter
|
||||
})
|
||||
}
|
||||
},
|
||||
setTransferFormData(data, config, jnpfKey) {
|
||||
if (!config.transferList.length) return;
|
||||
for (let index = 0; index < config.transferList.length; index++) {
|
||||
const element = config.transferList[index];
|
||||
this.parameter.setFormData(element.sourceValue, data[element.targetField]);
|
||||
}
|
||||
},
|
||||
onTabChange(index) {
|
||||
if (this.tabCurrent === index) return
|
||||
this.tabCurrent = index;
|
||||
const id = this.item.__config__.children[index].name
|
||||
this.$emit('tab-change', this.item, id)
|
||||
this.$nextTick(() => {
|
||||
uni.$emit('updateCode')
|
||||
uni.$emit('initCollapse')
|
||||
})
|
||||
},
|
||||
onChildTabChange(item, id) {
|
||||
this.$emit('tab-change', item, id)
|
||||
},
|
||||
onCollapseChange(data) {
|
||||
this.$emit('collapse-change', this.item, data)
|
||||
this.$nextTick(() => {
|
||||
uni.$emit('initCollapse')
|
||||
})
|
||||
},
|
||||
onChildCollapseChange(item, id) {
|
||||
this.$emit('collapse-change', item, id)
|
||||
},
|
||||
setValue(item, data) {
|
||||
this.$emit('input', item, data)
|
||||
},
|
||||
onClick(e) {
|
||||
this.$emit('clickFun', this.item, e || '')
|
||||
},
|
||||
onChildClick(e, item) {
|
||||
this.$emit('clickFun', item, e || '')
|
||||
},
|
||||
clickIcon(e) {
|
||||
this.$emit('clickIcon', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.form-item-box {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.popup-select {
|
||||
::v-deep .u-form-item--left {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1091
components/Jnpf/Parser/childTable.vue
Normal file
1091
components/Jnpf/Parser/childTable.vue
Normal file
File diff suppressed because it is too large
Load Diff
765
components/Jnpf/Parser/index.vue
Normal file
765
components/Jnpf/Parser/index.vue
Normal file
@@ -0,0 +1,765 @@
|
||||
<template>
|
||||
<u-form class="jnpf-wrap-form" ref="dataForm" :rules="rules" :model="formData" :errorType="['toast']"
|
||||
:label-position="formConf.labelPosition==='top'?'top':'left'"
|
||||
:label-width="formConf.labelWidth?formConf.labelWidth*1.5:150"
|
||||
:label-align="formConf.labelPosition==='right'?'right':'left'" :class="formClass+' '+formConfCopy.className">
|
||||
<view v-for="(item, index) in formConfCopy.fields" :key="item.__config__.renderKey">
|
||||
<Item v-if="!item.__config__.noShow && item.__config__.isVisibility" :itemData="item" :formConf="formConf"
|
||||
:formData="formData" :ref="'ref'+item.__config__.formId" :class="item.__config__.className"
|
||||
@clickIcon='clickIcon' @clickFun="onClick" @collapse-change="onCollapseChange" @tab-change="onTabChange"
|
||||
@input="setValue" />
|
||||
</view>
|
||||
<u-modal v-model="showTipsModal" width='70%' border-radius="16" :content-style="contentStyle"
|
||||
:content="tipsContent" :titleStyle="titleStyle" :title="tipsTitle" :confirm-style="confirmStyle"
|
||||
:confirm-text="$t('common.okText')" />
|
||||
</u-form>
|
||||
</template>
|
||||
<script>
|
||||
import Item from './Item'
|
||||
import {
|
||||
getDataInterfaceRes,
|
||||
getDictionaryDataSelector
|
||||
} from '@/api/common'
|
||||
const dyOptionsList = ['radio', 'checkbox', 'select', 'cascader', 'treeSelect']
|
||||
export default {
|
||||
components: {
|
||||
Item
|
||||
},
|
||||
props: {
|
||||
formConf: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isShortLink: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const data = {
|
||||
formClass: 'form-' + this.jnpf.idGenerator(),
|
||||
formConfCopy: this.$u.deepClone(this.formConf),
|
||||
formData: {},
|
||||
rules: {},
|
||||
options: {},
|
||||
tableRefs: {},
|
||||
relations: {},
|
||||
refList: [],
|
||||
contentStyle: {
|
||||
fontSize: '28rpx',
|
||||
padding: '20rpx',
|
||||
lineHeight: '44rpx',
|
||||
textAlign: 'left'
|
||||
},
|
||||
titleStyle: {
|
||||
padding: '20rpx'
|
||||
},
|
||||
confirmStyle: {
|
||||
height: '80rpx',
|
||||
lineHeight: '80rpx',
|
||||
},
|
||||
tipsContent: '',
|
||||
tipsTitle: this.$t('common.tipTitle'),
|
||||
showTipsModal: false
|
||||
}
|
||||
this.beforeInit(data.formConfCopy.fields)
|
||||
this.initRelationForm(data.formConfCopy.fields)
|
||||
this.initFormData(data.formConfCopy.fields, data.formData, data.tableRefs)
|
||||
this.buildRules(this.$u.deepClone(data.formConfCopy.fields), data.rules)
|
||||
this.buildOptions(data.formConfCopy.fields, data.options, data.formData)
|
||||
this.buildRelations(data.formConfCopy.fields, data.relations)
|
||||
this.$nextTick(() => {
|
||||
this.onLoadFunc(data.formConfCopy)
|
||||
this.getRefList()
|
||||
})
|
||||
return data
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
parameter: this.parameter,
|
||||
relations: this.relations,
|
||||
isShortLink: this.isShortLink
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
parameter() {
|
||||
const oldFormData = this.formConfCopy.formData ? this.formConfCopy.formData : {}
|
||||
this.formData.id = oldFormData.id || null
|
||||
this.formData.flowId = oldFormData.flowId || ''
|
||||
return {
|
||||
formData: this.formData,
|
||||
setFormData: this.setFormData,
|
||||
setShowOrHide: this.setShowOrHide,
|
||||
setRequired: this.setRequired,
|
||||
setDisabled: this.setDisabled,
|
||||
onlineUtils: this.jnpf.onlineUtils,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.dataForm.setRules(this.rules);
|
||||
this.initRelationData()
|
||||
uni.$on('subChange', (field) => {
|
||||
this.handleRelation(field.__vModel__)
|
||||
})
|
||||
this.initCss(this.formConfCopy)
|
||||
},
|
||||
methods: {
|
||||
beforeInit(fields) {
|
||||
const loop = (list) => {
|
||||
for (var index = 0; index < list.length; index++) {
|
||||
const config = list[index].__config__
|
||||
if (config.children && config.children.length) loop(config.children)
|
||||
if (config.jnpfKey == 'tableGrid') {
|
||||
let newList = []
|
||||
for (var i = 0; i < config.children.length; i++) {
|
||||
let element = config.children[i]
|
||||
for (var j = 0; j < element.__config__.children.length; j++) {
|
||||
let item = element.__config__.children[j]
|
||||
newList.push(...item.__config__.children)
|
||||
}
|
||||
}
|
||||
list.splice(index, 1, ...newList)
|
||||
}
|
||||
}
|
||||
}
|
||||
loop(fields)
|
||||
},
|
||||
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.__vModel__) && (noVisibility || !!item.__config__
|
||||
.noShow) && !cur.__vModel__) {
|
||||
cur.__config__.noShow = true
|
||||
}
|
||||
})
|
||||
}
|
||||
if (cur.__config__.children && cur.__config__.children.length) this.initRelationForm(cur
|
||||
.__config__.children)
|
||||
})
|
||||
},
|
||||
initFormData(componentList, formData, tableRefs) {
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
if (cur.__vModel__) {
|
||||
formData[cur.__vModel__] = config.defaultValue
|
||||
if (cur.__config__.jnpfKey == 'table' && !cur.__config__.noShow) {
|
||||
tableRefs[cur.__vModel__] = cur
|
||||
}
|
||||
}
|
||||
if (config.children && cur.__config__.jnpfKey !== 'table') {
|
||||
this.initFormData(config.children, formData, tableRefs)
|
||||
}
|
||||
})
|
||||
},
|
||||
buildOptions(componentList, data, formData) {
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
if (dyOptionsList.indexOf(config.jnpfKey) > -1) {
|
||||
if (config.dataType === 'dictionary' && config.dictionaryType) {
|
||||
cur.options = []
|
||||
getDictionaryDataSelector(config.dictionaryType).then(res => {
|
||||
cur.options = res.data.list || []
|
||||
data[cur.__vModel__ + 'Options'] = cur.options
|
||||
this.setFieldOptions(cur.__vModel__, cur.options)
|
||||
this.$nextTick(() => {
|
||||
uni.$emit("initCollapse")
|
||||
})
|
||||
})
|
||||
} else if (config.dataType === 'dynamic' && config.propsUrl) {
|
||||
cur.options = []
|
||||
let query = {
|
||||
paramList: this.jnpf.getParamList(config.templateJson, formData),
|
||||
}
|
||||
getDataInterfaceRes(config.propsUrl, query).then(res => {
|
||||
cur.options = Array.isArray(res.data) ? res.data : []
|
||||
data[cur.__vModel__ + 'Options'] = cur.options
|
||||
this.setFieldOptions(cur.__vModel__, cur.options)
|
||||
uni.$emit("initCollapse")
|
||||
})
|
||||
} else {
|
||||
data[cur.__vModel__ + 'Options'] = cur.options
|
||||
}
|
||||
}
|
||||
if (config.children && config.jnpfKey !== 'table') this.buildOptions(config.children, data,
|
||||
formData)
|
||||
})
|
||||
},
|
||||
buildRules(componentList, rules) {
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
const jnpfKey = config.jnpfKey
|
||||
const useNumList = ['inputNumber', 'switch', 'datePicker', 'rate', 'slider', 'calculate']
|
||||
const useArrayList = ['select', 'posSelect', 'userSelect', 'treeSelect', 'popupTableSelect',
|
||||
'organizeSelect'
|
||||
]
|
||||
config.regList = !config.regList ? [] : config.regList
|
||||
if (config.required) {
|
||||
const label = config.labelI18nCode ?
|
||||
this.$t(config.labelI18nCode, config.label) : config.label;
|
||||
let requiredItem = {
|
||||
required: config.required,
|
||||
message: `${label} ${this.$t('sys.validate.textRequiredSuffix')}`
|
||||
};
|
||||
config.regList.push(requiredItem)
|
||||
}
|
||||
const rule = config.regList.map(item => {
|
||||
if (item.pattern) {
|
||||
item.pattern = item.pattern.toString()
|
||||
let start = item.pattern.indexOf('/')
|
||||
let stop = item.pattern.lastIndexOf('/')
|
||||
let str = item.pattern.substring(start + 1, stop)
|
||||
let reg = new RegExp(str)
|
||||
item.pattern = reg
|
||||
}
|
||||
item.trigger = config.trigger || 'change, blur'
|
||||
if (Array.isArray(config.defaultValue)) item.type = 'array'
|
||||
if (useNumList.includes(jnpfKey)) item.type = 'number'
|
||||
if (useArrayList.includes(jnpfKey) && cur.multiple) item.type = 'array'
|
||||
if (jnpfKey === 'usersSelect' || jnpfKey === 'areaSelect' || jnpfKey ===
|
||||
'checkbox' || jnpfKey === 'cascader') item.type = 'array'
|
||||
|
||||
if (jnpfKey === 'relationForm' || jnpfKey === 'popupSelect' || jnpfKey ===
|
||||
'select' || jnpfKey === 'radio' || jnpfKey === 'treeSelect') {
|
||||
item.type = 'any',
|
||||
item.validator = (rule, value, callback) => {
|
||||
if (value || value === 0) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error(config.label + '不能为空'));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (item.messageI18nCode) {
|
||||
item.message = this.$t(item.messageI18nCode, item.message);
|
||||
}
|
||||
return item
|
||||
})
|
||||
if (rule.length) rules[cur.__vModel__] = rule
|
||||
if (config.children && jnpfKey !== 'table') this.buildRules(this.$u.deepClone(config.children),
|
||||
rules)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* cur 对象
|
||||
* relationField 关联的数据项
|
||||
* relations 包含所有相关的配置信息
|
||||
* opType 类型
|
||||
**/
|
||||
addRelationItem(cur, relationField, relations, opType) {
|
||||
let realVModel = cur.__config__.isSubTable ? `${cur.__config__.parentVModel}-${cur.__vModel__}` : cur
|
||||
.__vModel__;
|
||||
let item = {
|
||||
...cur,
|
||||
realVModel,
|
||||
opType
|
||||
};
|
||||
if (relations.hasOwnProperty(relationField)) {
|
||||
if (!relations[relationField].some(o => o.realVModel === item.realVModel)) {
|
||||
relations[relationField].push(item);
|
||||
}
|
||||
} else {
|
||||
relations[relationField] = [item];
|
||||
}
|
||||
},
|
||||
/**
|
||||
* config 对象
|
||||
* type 开始或者结束类型
|
||||
* target 目标字段
|
||||
* value 开始或者结束时间值
|
||||
**/
|
||||
processTimeRule(config, type, target, value) {
|
||||
let time;
|
||||
switch (type) {
|
||||
case 1:
|
||||
return value || (type === 'startTime' ? '00:00:00' : '23:59:59');
|
||||
case 3:
|
||||
return this.jnpf.toDate(new Date(), config.format === 'HH:mm' ? 'HH:mm:00' : config.format);
|
||||
default:
|
||||
let offset = Number(value);
|
||||
if (target === 1) {
|
||||
time = new Date().setHours(type === 4 ? new Date().getHours() - offset : new Date()
|
||||
.getHours() + offset);
|
||||
} else if (target === 2) {
|
||||
time = new Date().setMinutes(type === 4 ? new Date().getMinutes() - offset : new Date()
|
||||
.getMinutes() + offset);
|
||||
} else if (target === 3) {
|
||||
time = new Date().setSeconds(type === 4 ? new Date().getSeconds() - offset : new Date()
|
||||
.getSeconds() + offset);
|
||||
}
|
||||
return this.$u.timeFormat(time, 'hh:MM:ss');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* type 开始或者结束类型
|
||||
* target 目标字段
|
||||
* value 开始或者结束时间值
|
||||
**/
|
||||
calculateDateOffset(type, value, target) {
|
||||
let date = new Date();
|
||||
switch (type) {
|
||||
case 1:
|
||||
return Number(value);
|
||||
case 3:
|
||||
return date.getTime();
|
||||
default:
|
||||
let offset = Number(value);
|
||||
if (target === 1) {
|
||||
date.setFullYear(date.getFullYear() + (type === 4 ? -offset : offset));
|
||||
} else if (target === 2) {
|
||||
date.setMonth(date.getMonth() + (type === 4 ? -offset : offset));
|
||||
} else if (target === 3) {
|
||||
date.setDate(date.getDate() + (type === 4 ? -offset : offset));
|
||||
}
|
||||
return date.getTime();
|
||||
}
|
||||
},
|
||||
buildRelations(componentList, relations) {
|
||||
const selectType = ['org', 'pos', 'role', 'group'];
|
||||
componentList.forEach(cur => {
|
||||
const config = cur.__config__;
|
||||
const vModel = cur.__vModel__;
|
||||
|
||||
if (config.jnpfKey === 'userSelect' && selectType.includes(cur.selectType)) {
|
||||
if (cur.relationField) this.addRelationItem(cur, cur.relationField, relations,
|
||||
'setUserOptions');
|
||||
}
|
||||
if (dyOptionsList.indexOf(config.jnpfKey) > -1 && config.dataType === 'dynamic' && config
|
||||
.templateJson && config.templateJson.length) {
|
||||
config.templateJson.forEach(e => {
|
||||
if (e.relationField) this.addRelationItem(cur, e.relationField, relations,
|
||||
'setOptions');
|
||||
});
|
||||
}
|
||||
if (config.jnpfKey === 'datePicker') {
|
||||
if (config.startTimeRule) cur.startTime = this.calculateDateOffset(config.startTimeType,
|
||||
config.startTimeValue, config.startTimeTarget);
|
||||
if (config.endTimeRule) cur.endTime = this.calculateDateOffset(config.endTimeType,
|
||||
config.endTimeValue, config.endTimeTarget);
|
||||
if (config.startRelationField) this.addRelationItem(cur, config.startRelationField,
|
||||
relations, 'setDate');
|
||||
if (config.endRelationField) this.addRelationItem(cur, config.endRelationField, relations,
|
||||
'setDate');
|
||||
}
|
||||
if (config.jnpfKey === 'timePicker') {
|
||||
if (config.startTimeRule) cur.startTime = this.processTimeRule(config,
|
||||
config.startTimeType, config.startTimeTarget, config.startTimeValue);
|
||||
if (config.endTimeRule) cur.endTime = this.processTimeRule(config, config.endTimeType,
|
||||
config.endTimeTarget, config.endTimeValue);
|
||||
if (config.startRelationField) this.addRelationItem(cur, config.startRelationField,
|
||||
relations, 'setTime');
|
||||
if (config.endRelationField) this.addRelationItem(cur, config.endRelationField, relations,
|
||||
'setTime');
|
||||
}
|
||||
if (config.jnpfKey === 'popupSelect' && cur.templateJson && cur.templateJson.length) {
|
||||
cur.templateJson.forEach(e => {
|
||||
if (e.relationField) this.addRelationItem(cur, e.relationField, relations,
|
||||
'setPopupOptions');
|
||||
});
|
||||
}
|
||||
if (config.children) this.buildRelations(config.children, relations);
|
||||
});
|
||||
},
|
||||
onLoadFunc(formConfCopy) {
|
||||
if (!formConfCopy || !formConfCopy.funcs || !formConfCopy.funcs.onLoad) return
|
||||
const onLoadFunc = this.jnpf.getScriptFunc(formConfCopy.funcs.onLoad)
|
||||
if (!onLoadFunc) return
|
||||
onLoadFunc(this.parameter)
|
||||
},
|
||||
initRelationData() {
|
||||
const handleRelationFun = (list) => {
|
||||
list.forEach(cur => {
|
||||
const config = cur.__config__
|
||||
this.handleDefaultRelation(cur.__vModel__)
|
||||
if (config.children) handleRelationFun(config.children)
|
||||
})
|
||||
}
|
||||
handleRelationFun(this.formConfCopy.fields)
|
||||
},
|
||||
initCss(formCopy) {
|
||||
// #ifdef H5
|
||||
if (!formCopy.classJson) return
|
||||
if (document.getElementById('styleId')) document.getElementById('styleId').remove()
|
||||
let head = document.getElementsByTagName('head')[0]
|
||||
let style = document.createElement('style')
|
||||
style.type = 'text/css'
|
||||
style.id = 'styleId'
|
||||
style.innerText = this.buildCSS(formCopy.classJson)
|
||||
head.appendChild(style)
|
||||
//#endif
|
||||
},
|
||||
buildCSS(str) {
|
||||
str = str.trim();
|
||||
let newStr = '';
|
||||
let cut = str.split('}');
|
||||
cut.forEach(item => {
|
||||
if (item) {
|
||||
item = '.' + this.formClass + ' ' + item + '}';
|
||||
newStr += item;
|
||||
}
|
||||
});
|
||||
return newStr;
|
||||
},
|
||||
handleRelation(field) {
|
||||
if (!field) return
|
||||
const currRelations = this.relations
|
||||
for (let key in currRelations) {
|
||||
if (key === field) {
|
||||
for (let i = 0; i < currRelations[key].length; i++) {
|
||||
const e = currRelations[key][i];
|
||||
let vModel = e.realVModel || e.__vModel__
|
||||
const config = e.__config__
|
||||
const jnpfKey = config.jnpfKey
|
||||
let defaultValue = ''
|
||||
if (['checkbox', 'cascader'].includes(jnpfKey) || (['select', 'treeSelect', 'popupSelect',
|
||||
'popupTableSelect', 'userSelect'
|
||||
].includes(jnpfKey) && e.multiple)) {
|
||||
defaultValue = []
|
||||
}
|
||||
if (vModel.includes('-')) { // 子表字段
|
||||
const tableVModel = vModel.split('-')[0]
|
||||
uni.$emit('handleRelation', e, defaultValue, true)
|
||||
} else {
|
||||
this.setFormData(vModel, defaultValue)
|
||||
if (e.opType === 'setOptions') {
|
||||
let query = {
|
||||
paramList: this.jnpf.getParamList(config.templateJson, this.formData)
|
||||
}
|
||||
getDataInterfaceRes(config.propsUrl, query).then(res => {
|
||||
let realData = res.data || []
|
||||
this.setFieldOptions(vModel, realData)
|
||||
uni.$emit("initCollapse")
|
||||
})
|
||||
}
|
||||
if (e.opType === 'setUserOptions') {
|
||||
let value = this.formData[e.relationField] || []
|
||||
this.comSet('ableRelationIds', vModel, Array.isArray(value) ? value : [value])
|
||||
}
|
||||
if (e.opType === 'setDate' || e.opType === 'setTime') {
|
||||
let startTime = ''
|
||||
let endTime = ''
|
||||
if (config.startTimeType == 2) {
|
||||
startTime = this.formData[config.startRelationField] || 0
|
||||
if (e.opType === 'setTime') {
|
||||
startTime = this.formData[config.startRelationField] ||
|
||||
'00:00:00'
|
||||
if (startTime && (startTime.split(':').length == 3)) {
|
||||
startTime = startTime
|
||||
} else {
|
||||
startTime = startTime + ':00'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = e.startTime
|
||||
}
|
||||
if (config.endTimeType == 2) {
|
||||
endTime = this.formData[config.endRelationField] || 0
|
||||
if (e.opType === 'setTime') {
|
||||
endTime = this.formData[config.endRelationField] ||
|
||||
'00:00:00'
|
||||
if (endTime && (endTime.split(':').length == 3)) {
|
||||
endTime = endTime
|
||||
} else {
|
||||
endTime = endTime + ':00'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
endTime = e.endTime
|
||||
}
|
||||
this.comSet('startTime', vModel, startTime)
|
||||
this.comSet('endTime', vModel, endTime)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleDefaultRelation(field) {
|
||||
if (!field) return
|
||||
const currRelations = this.relations
|
||||
for (let key in currRelations) {
|
||||
if (key === field) {
|
||||
for (let i = 0; i < currRelations[key].length; i++) {
|
||||
const e = currRelations[key][i];
|
||||
let vModel = e.realVModel || e.__vModel__
|
||||
const config = e.__config__
|
||||
let defaultValue = ''
|
||||
if (vModel.includes('-')) { // 子表字段
|
||||
const tableVModel = vModel.split('-')[0]
|
||||
uni.$emit('handleRelation', e, defaultValue)
|
||||
} else {
|
||||
if (e.opType === 'setUserOptions') {
|
||||
let value = this.formData[e.relationField] || []
|
||||
this.comSet('ableRelationIds', e.__vModel__, Array.isArray(value) ? value : [value])
|
||||
}
|
||||
if (e.opType === 'setDate' || e.opType === 'setTime') {
|
||||
let startTime = ''
|
||||
let endTime = ''
|
||||
if (config.startTimeType == 2) {
|
||||
startTime = this.formData[config.startRelationField] || 0
|
||||
if (e.opType === 'setTime') {
|
||||
startTime = this.formData[config.startRelationField] ||
|
||||
'00:00:00'
|
||||
if (startTime && (startTime.split(':').length == 3)) {
|
||||
startTime = startTime
|
||||
} else {
|
||||
startTime = startTime + ':00'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = e.startTime
|
||||
}
|
||||
if (config.endTimeType == 2) {
|
||||
endTime = this.formData[config.endRelationField] || 0
|
||||
if (e.opType === 'setTime') {
|
||||
endTime = this.formData[config.endRelationField] ||
|
||||
'23:59:59'
|
||||
if (endTime && (endTime.split(':').length == 3)) {
|
||||
endTime = endTime
|
||||
} else {
|
||||
endTime = endTime + ':00'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
endTime = e.endTime
|
||||
}
|
||||
this.comSet('startTime', e.__vModel__, startTime)
|
||||
this.comSet('endTime', e.__vModel__, endTime)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onChange(field) {
|
||||
this.handleRelation(field.__vModel__)
|
||||
},
|
||||
setValue(item) {
|
||||
if (item.__vModel__) {
|
||||
this.$set(this.formData, item.__vModel__, item.__config__.defaultValue)
|
||||
}
|
||||
},
|
||||
setFormData(prop, value) {
|
||||
if (!prop || this.formData[prop] === value) return;
|
||||
const isChildTable = prop.indexOf('.') > -1
|
||||
if (isChildTable) {
|
||||
const list = prop.split('.')
|
||||
for (let i = 0; i < this.refList.length; i++) {
|
||||
const item = this.refList[i]
|
||||
if (item[0] == list[0]) {
|
||||
const tableRef = Array.isArray(item[1]) ? item[1][0] : item[1]
|
||||
tableRef.setTableFormData(list[1], value)
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.comSet('defaultValue', prop, value)
|
||||
this.formData[prop] = value
|
||||
}
|
||||
this.handleRelation(prop)
|
||||
},
|
||||
setShowOrHide(prop, value) {
|
||||
const newVal = !!value
|
||||
const isChildTable = prop.indexOf('.') > -1
|
||||
if (!isChildTable) {
|
||||
this.comSet('noShow', prop, !newVal)
|
||||
}
|
||||
},
|
||||
setRequired(prop, value) {
|
||||
const newVal = !!value
|
||||
const isChildTable = prop.indexOf('.') > -1
|
||||
if (!isChildTable) {
|
||||
this.comSet('required', prop, newVal)
|
||||
this.rules = {}
|
||||
this.buildRules(this.$u.deepClone(this.formConfCopy.fields), this.rules)
|
||||
this.$refs.dataForm.setRules(this.rules);
|
||||
}
|
||||
},
|
||||
setDisabled(prop, value) {
|
||||
const newVal = !!value
|
||||
const isChildTable = prop.indexOf('.') > -1
|
||||
if (!isChildTable) {
|
||||
this.comSet('disabled', prop, newVal)
|
||||
}
|
||||
},
|
||||
setFieldOptions(prop, value) {
|
||||
const newVal = Array.isArray(value) ? value : []
|
||||
const isChildTable = prop.indexOf('.') > -1
|
||||
if (!isChildTable) {
|
||||
this.comSet('options', prop, newVal)
|
||||
}
|
||||
},
|
||||
comSet(field, prop, value) {
|
||||
if (!prop) return
|
||||
const loop = list => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i]
|
||||
const config = item.__config__
|
||||
if (item.__vModel__ && item.__vModel__ === prop) {
|
||||
config.defaultValue = this.formData[prop]
|
||||
switch (field) {
|
||||
case 'disabled':
|
||||
item[field] = value
|
||||
break;
|
||||
case 'ableRelationIds':
|
||||
this.$set(item, field, value)
|
||||
case 'options':
|
||||
if (dyOptionsList.indexOf(config.jnpfKey) > -1) item.options = value
|
||||
break;
|
||||
case 'startTime':
|
||||
this.$set(item, field, value)
|
||||
break;
|
||||
case 'endTime':
|
||||
this.$set(item, field, value)
|
||||
break;
|
||||
default:
|
||||
config[field] = value
|
||||
this.setValue(item)
|
||||
break;
|
||||
}
|
||||
config.renderKey = +new Date() + item.__vModel__
|
||||
break;
|
||||
}
|
||||
if (config && config.jnpfKey !== 'table' && config.children && Array.isArray(config
|
||||
.children)) loop(config.children)
|
||||
}
|
||||
}
|
||||
loop(this.formConfCopy.fields)
|
||||
},
|
||||
submitForm() {
|
||||
try {
|
||||
this.beforeSubmit().then(() => {
|
||||
this.submit()
|
||||
})
|
||||
} catch (e) {
|
||||
this.submit()
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
this.$refs.dataForm.validate(valid => {
|
||||
if (!valid) return
|
||||
if (!this.checkTableData()) return
|
||||
this.$emit('submit', this.formData, this.afterSubmit)
|
||||
});
|
||||
},
|
||||
beforeSubmit() {
|
||||
if (!this.formConfCopy || !this.formConfCopy.funcs || !this.formConfCopy.funcs.beforeSubmit) return Promise
|
||||
.resolve()
|
||||
const func = this.jnpf.getScriptFunc(this.formConfCopy.funcs.beforeSubmit)
|
||||
if (!func) return Promise.resolve()
|
||||
return func(this.parameter)
|
||||
},
|
||||
afterSubmit() {
|
||||
if (!this.formConfCopy || !this.formConfCopy.funcs || !this.formConfCopy.funcs.afterSubmit) return
|
||||
const func = this.jnpf.getScriptFunc(this.formConfCopy.funcs.afterSubmit)
|
||||
if (!func) return
|
||||
func(this.parameter)
|
||||
},
|
||||
// 子表必填验证,子表赋值
|
||||
checkTableData() {
|
||||
this.getRefList();
|
||||
let isValid = true;
|
||||
for (const vModel in this.tableRefs) {
|
||||
const config = this.tableRefs[vModel].__config__;
|
||||
if (!config.isVisibility || config.noShow) continue;
|
||||
|
||||
const tableRef = this.findTableRef(vModel);
|
||||
if (!tableRef) continue;
|
||||
|
||||
const submitResult = this.getTableSubmitResult(tableRef, vModel);
|
||||
if (submitResult) {
|
||||
this.formData[vModel] = submitResult;
|
||||
} else {
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
return isValid;
|
||||
},
|
||||
findTableRef(vModel) {
|
||||
for (const item of this.refList) {
|
||||
if (item[0] === vModel) {
|
||||
return Array.isArray(item[1]) ? item[1][0] : item[1];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
getTableSubmitResult(tableRef, vModel) {
|
||||
const refToSubmit = tableRef.$refs && tableRef.$refs[vModel] ? tableRef.$refs[vModel] : tableRef;
|
||||
return refToSubmit.submit ? refToSubmit.submit() : false;
|
||||
},
|
||||
//获取子表实例ref
|
||||
getRefList() {
|
||||
this.refList = [];
|
||||
const refList = this.$refs || [];
|
||||
const loopRefs = (refs) => {
|
||||
if (!refs) return
|
||||
for (const key in refs) {
|
||||
const ref = refs[key];
|
||||
if (Array.isArray(ref)) {
|
||||
ref.forEach(item => loopRefs(item));
|
||||
} else {
|
||||
this.refList.push([key, ref]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (Array.isArray(refList)) {
|
||||
refList.forEach(item => loopRefs(item));
|
||||
} else {
|
||||
loopRefs(refList);
|
||||
}
|
||||
},
|
||||
clickIcon(e) {
|
||||
if (!e?.__config__) return;
|
||||
const {
|
||||
tipLabel,
|
||||
label: configLabel,
|
||||
jnpfKey
|
||||
} = e.__config__;
|
||||
const {
|
||||
helpMessage
|
||||
} = e;
|
||||
if (!tipLabel && !helpMessage) return;
|
||||
this.tipsContent = helpMessage || tipLabel;
|
||||
this.tipsTitle =
|
||||
jnpfKey === 'card' ? e.header :
|
||||
jnpfKey === 'groupTitle' ? e.content :
|
||||
configLabel;
|
||||
|
||||
this.showTipsModal = true;
|
||||
},
|
||||
onBlur(item, data) {
|
||||
this.setValue(item)
|
||||
this.setScriptFunc(data, item, 'blur')
|
||||
},
|
||||
onTabChange(item, data) {
|
||||
this.setScriptFunc(data, item, 'tabClick')
|
||||
},
|
||||
onClick(item, data) {
|
||||
this.setScriptFunc(data, item, 'click')
|
||||
},
|
||||
onCollapseChange(item, data) {
|
||||
this.setScriptFunc(data, item)
|
||||
},
|
||||
setScriptFunc(val, data, type = 'change') {
|
||||
if (data && data.on && data.on[type]) {
|
||||
const func = this.jnpf.getScriptFunc(data.on[type]);
|
||||
if (!func) return
|
||||
func.call(this, {
|
||||
data: val,
|
||||
...this.parameter
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
121
components/Jnpf/Parser/mixin.js
Normal file
121
components/Jnpf/Parser/mixin.js
Normal file
@@ -0,0 +1,121 @@
|
||||
import {
|
||||
getDataInterfaceRes
|
||||
} from '@/api/common'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ids: [],
|
||||
selectItems: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange(e, item) {
|
||||
this.$nextTick(() => {
|
||||
if (e.value) {
|
||||
this.selectItems.push(item)
|
||||
} else {
|
||||
const i = this.selectItems.findIndex(o => !o.checked)
|
||||
this.selectItems.splice(i, 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
openSelectDialog(item) {
|
||||
if (this.checkNumLimit()) return;
|
||||
let actionConfig = item.actionConfig
|
||||
const data = {
|
||||
actionConfig,
|
||||
formData: this.formData,
|
||||
tableVmodel: this.config.__vModel__
|
||||
}
|
||||
if (item.actionType == 1) return uni.navigateTo({
|
||||
url: '/pages/apply/tableLinkage/index?data=' + JSON.stringify(data)
|
||||
})
|
||||
if (!this.tableFormData.some(item => item.checked)) return this.$u.toast('至少选中一条数据');
|
||||
if (item.actionType == 2) {
|
||||
if (actionConfig.executeType == 2) {
|
||||
this.handleScriptFunc(actionConfig)
|
||||
} else {
|
||||
this.handleInterface(actionConfig)
|
||||
}
|
||||
}
|
||||
},
|
||||
//自定义按钮JS操作
|
||||
handleScriptFunc(item) {
|
||||
let data = this.selectItems.map(child => {
|
||||
let obj = {};
|
||||
child.forEach(item => {
|
||||
obj[item.__vModel__] = item.value;
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
const parameter = {
|
||||
data,
|
||||
refresh: this.initData,
|
||||
onlineUtils: this.jnpf.onlineUtils,
|
||||
}
|
||||
const func = this.jnpf.getScriptFunc.call(this, item.executeFunc)
|
||||
if (!func) return
|
||||
func.call(this, parameter)
|
||||
},
|
||||
//自定义按钮接口操作
|
||||
handleInterface(item) {
|
||||
let data = this.selectItems.flatMap(child => {
|
||||
return child.map(item => ({
|
||||
[item.__vModel__]: item.value
|
||||
}));
|
||||
});
|
||||
const handlerInterface = (data) => {
|
||||
let query = {
|
||||
paramList: this.getBatchParamList(item.executeTemplateJson, data) || [],
|
||||
}
|
||||
getDataInterfaceRes(item.executeInterfaceId, query).then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
if (!item.executeUseConfirm) return handlerInterface(data)
|
||||
uni.showModal({
|
||||
title: this.$t('common.tipTitle'),
|
||||
content: item.executeConfirmTitle || '确认执行此操作?',
|
||||
showCancel: true,
|
||||
confirmText: '确定',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
handlerInterface(data)
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getBatchParamList(templateJson, data) {
|
||||
if (!templateJson || !templateJson.length) return [];
|
||||
for (let i = 0; i < templateJson.length; i++) {
|
||||
const e = templateJson[i];
|
||||
let defaultValue = [];
|
||||
if (e.sourceType === 1 && data.length) {
|
||||
data.forEach(o => {
|
||||
if (o.hasOwnProperty(e.relationField)) {
|
||||
defaultValue.push(o[e.relationField]);
|
||||
}
|
||||
});
|
||||
}
|
||||
e.defaultValue = defaultValue;
|
||||
if (e.sourceType === 4 && e.relationField === '@formId' && data.id !== undefined) {
|
||||
e.defaultValue = [data.id];
|
||||
} else if (e.sourceType !== 1) {
|
||||
e.defaultValue = [];
|
||||
}
|
||||
}
|
||||
return templateJson;
|
||||
},
|
||||
// 校验限制条数
|
||||
checkNumLimit() {
|
||||
if (this.config.isNumLimit && this.tableFormData.length >= this.config.numLimit) {
|
||||
this.$u.toast(`${this.config.__config__.label}超出条数限制`);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user