12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205 |
- <template>
- <div>
- <van-form
- @submit="onSubmit"
- :disabled="formOption.disabled"
- :readonly="formOption.readonly"
- :label-width="formOption.labelWidth"
- :label-align="formOption.labelAlign || 'top'"
- :scroll-to-error="formOption.scroll"
- ref="testForm"
- >
- <van-cell-group inset>
- <div
- v-for="(i, index) in formConfig"
- :key="index"
- :style="i.style || ''"
- >
- <van-field v-if="i.type == 'title'" style="background: #ecebeb">
- <template #input>
- <div class="_title">
- {{ i.title }}
- </div>
- </template>
- </van-field>
- <van-field
- v-if="i.type == 'input'"
- v-model="formData[i.prop]"
- :label="i.label"
- :name="i.prop"
- :type="i.itemType ? i.itemType : 'text'"
- :placeholder="i.placeholder ? i.placeholder : '请输入'"
- :clearable="i.clearable ? i.clearable : false"
- :readonly="getFieldReadonly(i)"
- :rules="getRules(i)"
- :required="getRequired(i)"
- :right-icon="i.isNeedRightBtn ? i.rightIcon : ''"
- @click-right-icon="i.isNeedRightBtn ? i.rightIconClick() : () => {}"
- @blur="
- i.isNeedBlurMethon ? i.blurMethon(formData[i.prop]) : () => {}
- "
- @input="
- () => {
- return i.inputFn ? i.inputFn(formData[i.prop]) : () => {};
- }
- "
- >
- </van-field>
- <!-- switch -->
- <van-field
- v-if="i.type == 'switch'"
- :label="i.label"
- :name="i.prop"
- :required="getRequired(i)"
- >
- <template #input>
- <van-switch v-model="formData[i.prop]" />
- </template>
- </van-field>
- <!-- 多选checkbox -->
- <van-field
- v-if="i.type == 'checkbox'"
- :label="i.label"
- :name="i.prop"
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- <template #input>
- <van-checkbox-group
- v-model="formData[i.prop]"
- direction="horizontal"
- >
- <van-checkbox
- shape="square"
- v-for="j in i.data"
- :key="j.value"
- :name="j.value"
- >{{ j.text }}</van-checkbox
- >
- </van-checkbox-group>
- </template>
- </van-field>
- <!-- 单选radio -->
- <van-field
- v-if="i.type == 'radio'"
- :label="i.label"
- :name="i.prop"
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- <template #input>
- <van-radio-group
- v-model="formData[i.prop]"
- direction="horizontal"
- >
- <van-radio
- v-for="j in i.data"
- :key="j.value"
- :name="j.value || j.id"
- >{{ j.label || j.title }}</van-radio
- >
- </van-radio-group>
- </template>
- </van-field>
- <!-- 单选 -->
- <van-field
- v-if="i.type == 'picker' && i.itemType == 'onePicker'"
- v-show="!i.showStatus"
- :label="i.label"
- :name="i.prop"
- v-model="formData[i.prop + 'Name']"
- is-link
- :readonly="true"
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
- @click="
- () =>
- formOption.readonly || i.readonly ? '' : (i.showPicker = true)
- "
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- </van-field>
- <van-popup
- v-model:show="i.showPicker"
- round
- position="bottom"
- v-if="i.type == 'picker' && i.itemType == 'onePicker'"
- >
- <div class="searchBox">
- <van-search
- v-if="i.isNeedSearch && i.isNeedSearch === true"
- v-model="i.searchKeyword"
- show-action
- label=""
- placeholder="请输入搜索关键词"
- @search="onSearchData(i)"
- >
- <template #action>
- <div @click="onSearchData(i)">搜索</div>
- </template>
- </van-search>
- </div>
- <van-picker
- :columns="i.data"
- :columns-field-names="
- i.fieldNames ? i.fieldNames : onePickerFieldNames
- "
- @cancel="i.showPicker = false"
- @confirm="
- (option) =>
- i.changeFn
- ? i.changeFn(option, i, index)
- : onConfirmPicker(option, i, index)
- "
- />
- </van-popup>
- <!-- 多选 -->
- <van-field
- v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'"
- v-show="!i.showStatus"
- :label="i.label"
- :name="i.prop"
- v-model="formData[i.prop + 'Name']"
- is-link
- :readonly="true"
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
- @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- </van-field>
- <van-popup
- v-model:show="i.showPicker"
- round
- position="bottom"
- :style="{ height: '40%' }"
- v-if="i.type == 'multipleChoice' && i.itemType == 'multiple'"
- >
- <van-checkbox-group
- v-model="formData[i.prop]"
- @change="
- changeCheckboxGroup(formData, i.prop, i.data, i.fieldNames)
- "
- class="multipleChoice"
- >
- <van-checkbox
- v-for="item in i.data"
- :key="item.value"
- :name="item.value"
- >{{ item.text }}</van-checkbox
- >
- </van-checkbox-group>
- </van-popup>
- <!-- 时间选择器 -->
- <van-field
- v-if="i.type == 'picker' && i.itemType == 'datePicker'"
- :label="i.label"
- :name="i.prop"
- v-model="formData[i.prop]"
- is-link
- :readonly="true"
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
- @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- </van-field>
- <van-popup
- v-model:show="i.showPicker"
- round
- position="bottom"
- v-if="i.type == 'picker' && i.itemType == 'datePicker'"
- >
- <van-date-picker
- v-model="currentDate"
- @confirm="(option) => onConfirmPicker(option, i, index)"
- @cancel="i.showPicker = false"
- :min-date="i.minDate"
- :max-date="i.maxDate"
- :columns-type="i.columnsType"
- />
- </van-popup>
- <!-- 时间选择器 带时分秒 -->
- <van-field
- v-if="i.type == 'picker' && i.itemType == 'datePickerTime'"
- :label="i.label"
- :name="i.prop"
- v-model="formData[i.prop]"
- is-link
- :readonly="true"
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
- @click="
- () =>
- !formOption.readonly
- ? i.needDefault
- ? defaultTimeFn(i, index)
- : (i.showPicker = true)
- : ''
- "
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- </van-field>
- <van-popup
- v-model:show="i.showPicker"
- round
- position="bottom"
- v-if="i.type == 'picker' && i.itemType == 'datePickerTime'"
- >
- <van-picker-group
- :tabs="['日期', '时间']"
- @confirm="() => datePickerTimeConfirm(i, index)"
- @cancel="i.showPicker = false"
- >
- <van-date-picker
- v-model="datePickerDateArr"
- :columns-type="i.columnsType"
- />
- <van-time-picker
- v-model="datePickerTimeArr"
- :columns-type="['hour', 'minute', 'second']"
- />
- </van-picker-group>
- </van-popup>
- <!-- 级联 城市 -->
- <van-field
- v-if="i.type == 'cascader' && i.itemType == 'city'"
- :label="i.label"
- :name="i.prop"
- v-model="formData[i.prop + 'Name']"
- is-link
- :readonly="true"
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
- @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
- :rules="getRules(i)"
- :required="getRequired(i)"
- />
- <van-popup
- v-if="i.type == 'cascader' && i.itemType == 'city'"
- v-model:show="i.showPicker"
- round
- position="bottom"
- >
- <van-cascader
- v-model="formData[i.prop]"
- :title="i.title ? i.title : '请选择'"
- :options="cityOption"
- @close="i.showPicker = false"
- @change="(option) => cityOnChange(option, i, index)"
- @finish="
- (option) =>
- i.finishFn ? i.finishFn(option) : () => (i.showPicker = false)
- "
- />
- </van-popup>
- <!-- 级联 公共 -->
- <van-field
- v-if="i.type == 'cascader' && i.itemType == 'common'"
- :label="i.label"
- :name="i.prop"
- v-model="formData[i.prop + 'Name']"
- is-link
- :readonly="true"
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
- @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
- :rules="getRules(i)"
- :required="getRequired(i)"
- />
- <van-popup
- v-if="i.type == 'cascader' && i.itemType == 'common'"
- v-model:show="i.showPicker"
- round
- position="bottom"
- >
- <van-cascader
- v-model="formData[i.prop]"
- :title="i.title ? i.title : '请选择'"
- :options="i.data"
- :field-names="i.fieldNames ? i.fieldNames : fieldNames"
- @close="i.showPicker = false"
- @change="(option) => commonOnChange(option, i, index)"
- @finish="
- (option) =>
- i.finishFn ? i.finishFn(i, option) : handleCommonFinish(index)
- "
- />
- </van-popup>
- <!-- 文件上传 -->
- <van-field
- name="uploader"
- v-if="i.type == 'upload'"
- :label="i.label"
- :readonly="i.readonly ? true : false"
- >
- <template #input>
- <van-uploader
- v-model="formData[i.prop]"
- :after-read="afterRead"
- multiple
- :show-upload="i.showUpload === undefined ? true : i.showUpload"
- :max-count="9"
- :max-size="5 * 1024 * 1024"
- @oversize="onOversize"
- />
- </template>
- </van-field>
- <!-- 插槽 -->
- <van-field
- v-if="i.type == 'slot'"
- :label="i.label"
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- <template #input>
- <div style="width: 100%">
- <slot :name="i.slotName"> {{ i.slotName }}插槽占位符 </slot>
- </div>
- </template>
- </van-field>
- </div>
- </van-cell-group>
- <!-- 循环业务数据 -->
- <van-cell-group
- inset
- v-for="(item, index) in formData[btnConfigCopy.prop]"
- :key="index"
- >
- <div class="row">
- <div>{{ btnConfigCopy.listTitle || "明细" }}{{ index + 1 }}</div>
- <van-button
- plain
- type="primary"
- @click="handleRemove(index, btnConfigCopy)"
- size="mini"
- style="border: none; background: #ecebeb"
- :disabled="formOption.readonly"
- v-if="
- formOption.btnConfig !== undefined && formOption.btnConfig.isNeed
- "
- >删除</van-button
- >
- </div>
- <!-- 循环表单数据 -->
- <div v-for="(i, sonIndex) in btnConfigCopy.listConfig" :key="i.prop">
- <van-field
- v-if="i.type == 'input'"
- v-model="formData[btnConfigCopy.prop][index][i.prop]"
- :label="i.label"
- :name="i.prop"
- :type="i.itemType ? i.itemType : 'text'"
- :placeholder="i.placeholder ? i.placeholder : '请输入'"
- :clearable="i.clearable ? i.clearable : false"
- :readonly="getFieldReadonly(i)"
- :rules="getRules(i)"
- :required="getRequired(i)"
- @change="
- (val) => {
- return i.changeFn ? i.changeFn(index, val) : () => {};
- }
- "
- >
- </van-field>
- <!-- 单选 -->
- <van-field
- v-if="i.type == 'picker' && i.itemType == 'onePicker'"
- :label="i.label"
- :name="i.prop"
- v-model="formData[btnConfigCopy.prop][index][i.prop + 'Name']"
- is-link
- :readonly="true"
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
- @click="handleListItemClick(i, index, sonIndex)"
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- <template #input v-if="i.isShowScanCode">
- <div style="display: flex; height: 24px">
- <div style="width: calc(100vw - 100px)">
- {{ formData[btnConfigCopy.prop][index][i.prop + "Name"] }}
- </div>
- <div style="width: 100px; float: right; margin-top: -20px">
- <van-button
- plain
- type="primary"
- @click.native.stop="i.scanCode(index)"
- size="mini"
- style="border: none"
- >扫码</van-button
- >
- </div>
- </div>
- </template>
- </van-field>
- <!-- 时间选择器 -->
- <van-field
- v-if="i.type == 'picker' && i.itemType == 'datePicker'"
- :label="i.label"
- :name="i.prop"
- v-model="formData[btnConfigCopy.prop][index][i.prop]"
- is-link
- :readonly="true"
- :placeholder="i.placeholder ? i.placeholder : '请选择'"
- @click="handleListItemClick(i, index, sonIndex)"
- :rules="getRules(i)"
- :required="getRequired(i)"
- >
- </van-field>
- </div>
- </van-cell-group>
- <!-- 单独写个循环,保证弹窗唯一 -->
- <div v-for="(item, index) in btnConfigCopy.listConfig" :key="index">
- <van-popup
- v-model:show="item.showPicker"
- round
- position="bottom"
- v-if="item.type == 'picker' && item.itemType == 'onePicker'"
- >
- <div class="searchBox">
- <van-search
- v-if="item.isNeedSearch && item.isNeedSearch === true"
- v-model="item.searchKeyword"
- show-action
- label=""
- placeholder="请输入搜索关键词"
- @search="onSearchData(item)"
- >
- <template #action>
- <div @click="onSearchData(item)">搜索</div>
- </template>
- </van-search>
- </div>
- <van-picker
- :columns="item.data"
- :columns-field-names="
- item.fieldNames ? item.fieldNames : onePickerFieldNames
- "
- @cancel="item.showPicker = false"
- @confirm="
- (option) =>
- item.changeFn
- ? item.changeFn(
- option,
- item,
- currentIndex,
- currentSonIndex,
- btnConfigCopy.prop
- )
- : onConfirmListPicker(option, item)
- "
- />
- </van-popup>
- <van-popup
- v-model:show="item.showPicker"
- round
- position="bottom"
- v-if="item.type == 'picker' && item.itemType == 'datePicker'"
- >
- <van-date-picker
- @confirm="(option) => onConfirmListPicker(option, item)"
- @cancel="item.showPicker = false"
- :min-date="item.minDate"
- :max-date="item.maxDate"
- :columns-type="item.columnsType"
- />
- </van-popup>
- </div>
- <!-- 按钮 -->
- <div
- class="btn-box"
- v-if="formOption.btnConfig !== undefined && formOption.btnConfig.isNeed"
- >
- <van-button
- :plain="btnConfigCopy.plain ? btnConfigCopy.plain : false"
- :type="btnConfigCopy.itemType ? btnConfigCopy.itemType : 'primary'"
- :size="btnConfigCopy.size ? btnConfigCopy.size : 'small'"
- style="width: 100%; border: none"
- @click="handlePush()"
- >
- <template #icon>
- <van-icon
- :name="btnConfigCopy.icon ? btnConfigCopy.icon : 'plus'"
- :size="12"
- />
- </template>
- {{
- btnConfigCopy.btnName ? btnConfigCopy.btnName : "添加"
- }}</van-button
- >
- </div>
- <div style="margin: 16px" v-show="!formOption.hiddenSubmitBtn">
- <van-button round block type="primary" native-type="submit">
- {{ formOption.submitBtnText || "提交" }}
- </van-button>
- </div>
- <div style="margin: 16px" v-show="formOption.otherBtn">
- <van-button round block type="warning" @click="handleOtherBtnClick">
- {{ formOption.otherBtnText || "其他" }}
- </van-button>
- </div>
- </van-form>
- </div>
- </template>
- <script setup>
- import { showLoadingToast, closeToast, showNotify } from "vant";
- import { formatDate } from "@/utils/auth";
- import {
- ref,
- getCurrentInstance,
- onMounted,
- reactive,
- computed,
- toRefs,
- watch,
- } from "vue";
- const props = defineProps({
- modelValue: {
- type: Object,
- default: false,
- },
- formConfig: {
- type: Array,
- default: false,
- },
- formOption: {
- type: Object,
- default: false,
- },
- rules: {
- type: Object,
- default: false,
- },
- });
- const proxy = getCurrentInstance().proxy;
- const { formConfig, formOption, rules } = toRefs(props);
- const formData = computed(() => {
- return proxy.modelValue;
- });
- const cityOption = ref([]);
- const fieldNames = { text: "label", value: "id", children: "children" };
- const onePickerFieldNames = {
- text: "text",
- value: "value",
- };
- const emit = defineEmits(["update:modelValue"]);
- const onSubmit = () => {
- emit("onSubmit");
- };
- const handleOtherBtnClick = () => {
- emit("otherBtnClick");
- };
- // 获取验证规则
- const getRules = (i) => {
- if (
- rules.value.hasOwnProperty(i.prop) &&
- rules.value[i.prop] &&
- !getFieldReadonly(i) &&
- !formOption.readonly
- ) {
- return rules.value[i.prop];
- }
- };
- const getRequired = (i) => {
- if (
- rules.value.hasOwnProperty(i.prop) &&
- rules.value[i.prop] &&
- !getFieldReadonly(i) &&
- !formOption.readonly
- ) {
- return true;
- }
- return false;
- };
- const getFieldReadonly = (i) => {
- if (i.readonly && i.readonly === true) {
- return true;
- } else {
- if (formOption.value.readonly && formOption.value.readonly === true) {
- return true;
- } else {
- return false;
- }
- }
- };
- // 国家初始化
- const cityOptionInit = () => {
- proxy.post("/customizeArea/list", { parentId: "0" }).then((res) => {
- cityOption.value = res.data.map((item, index) => {
- return {
- ...item,
- index: index,
- text: item.name,
- value: item.id,
- children: [],
- };
- });
- });
- };
- const recursionFn = (arr, val, valueAtt, childrenAtt) => {
- for (let i = 0; i < arr.length; i++) {
- const e = arr[i];
- if (e[valueAtt] !== val) {
- if (e[childrenAtt] && e[childrenAtt].length > 0) {
- const current = recursionFn(e.children, val, valueAtt, childrenAtt);
- if (current) {
- return current;
- }
- }
- } else {
- return e;
- }
- }
- };
- const selectDataEcho = (item, val) => {
- if (item.type === "picker" && item.itemType === "onePicker") {
- const textAtt = item.fieldNames
- ? item.fieldNames.text
- : onePickerFieldNames.text;
- const valueAtt = item.fieldNames
- ? item.fieldNames.value
- : onePickerFieldNames.value;
- const current = item.data.find((x) => x[valueAtt] === val);
- return current ? current[textAtt] : "";
- } else if (item.type === "cascader" && item.itemType === "common") {
- const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
- const valueAtt = item.fieldNames ? item.fieldNames.value : fieldNames.value;
- const childrenAtt = item.fieldNames
- ? item.fieldNames.children
- : fieldNames.children;
- const arr = item.data ? item.data : [];
- const current = recursionFn(arr, val, valueAtt, childrenAtt);
- return current ? current[textAtt] : "";
- }
- };
- let btnConfigCopy = {};
- let callNum = ref(0);
- let callListNum = ref(0);
- const formDataListShowLabel = () => {
- for (let i = 0; i < formData.value[btnConfigCopy.prop].length; i++) {
- for (let j = 0; j < btnConfigCopy.listConfig.length; j++) {
- const jele = btnConfigCopy.listConfig[j];
- if (jele.type === "picker" && jele.itemType !== "datePicker") {
- if (jele.data && jele.data.length > 0) {
- formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] =
- selectDataEcho(
- jele,
- formData.value[btnConfigCopy.prop][i][jele.prop]
- );
- } else {
- if (callListNum.value <= 3) {
- setTimeout(() => {
- callListNum.value++;
- return formDataListShowLabel();
- }, 1500);
- }
- return;
- }
- }
- }
- }
- };
- const formDataListShowLabelOne = () => {
- for (let i = 0; i < formData.value[btnConfigCopy.prop].length; i++) {
- for (let j = 0; j < btnConfigCopy.listConfig.length; j++) {
- const jele = btnConfigCopy.listConfig[j];
- if (jele.type === "picker" && jele.itemType !== "datePicker") {
- if (jele.data && jele.data.length > 0) {
- console.log(jele.data, "wwwww");
- formData.value[btnConfigCopy.prop][i][jele.prop + "Name"] =
- selectDataEcho(
- jele,
- formData.value[btnConfigCopy.prop][i][jele.prop]
- );
- }
- }
- }
- }
- };
- // 循环 label值回显
- const formDataShowLabel = () => {
- for (let i = 0; i < formConfig.value.length; i++) {
- const element = formConfig.value[i];
- if (element.type === "picker" && element.itemType !== "datePicker") {
- if (element.data && element.data.length > 0) {
- formData.value[element.prop + "Name"] = selectDataEcho(
- element,
- formData.value[element.prop]
- );
- } else {
- if (callNum.value <= 3) {
- setTimeout(() => {
- callNum.value++;
- return formDataShowLabel();
- }, 1500);
- }
- return;
- }
- } else if (element.type === "cascader" && element.itemType === "common") {
- if (element.data && element.data.length > 0) {
- formData.value[element.prop + "Name"] = selectDataEcho(
- element,
- formData.value[element.prop]
- );
- } else {
- if (callNum.value <= 3) {
- setTimeout(() => {
- callNum.value++;
- return formDataShowLabel();
- }, 1500);
- }
- return;
- }
- }
- }
- };
- const formDataShowLabelOne = () => {
- for (let i = 0; i < formConfig.value.length; i++) {
- const element = formConfig.value[i];
- if (element.type === "picker" && element.itemType !== "datePicker") {
- if (element.data && element.data.length > 0) {
- formData.value[element.prop + "Name"] = selectDataEcho(
- element,
- formData.value[element.prop]
- );
- }
- } else if (element.type === "cascader" && element.itemType === "common") {
- if (element.data && element.data.length > 0) {
- formData.value[element.prop + "Name"] = selectDataEcho(
- element,
- formData.value[element.prop]
- );
- }
- }
- }
- };
- const formDataInit = () => {
- var map = {
- input: "",
- radio: "",
- switch: false,
- checkbox: [],
- date: "",
- picker: "",
- cascader: "",
- upload: [],
- };
- // 判断是否需要按钮
- if (
- formOption.value.btnConfig &&
- Object.keys(formOption.value.btnConfig).length > 0
- ) {
- btnConfigCopy = { ...formOption.value.btnConfig };
- if (formData.value[btnConfigCopy.prop] === undefined) {
- formData.value[btnConfigCopy.prop] = [];
- }
- }
- // 初始化默认值
- let cityStatus = true;
- for (let i = 0; i < formConfig.value.length; i++) {
- const element = formConfig.value[i];
- if (
- element.type === "cascader" &&
- element.itemType === "city" &&
- cityStatus
- ) {
- cityStatus = false;
- cityOptionInit();
- }
- if (
- formData.value[element.prop] === undefined ||
- formData.value[element.prop] === ""
- ) {
- if (element.type === "slot") {
- continue;
- } else if (element.type === "picker" || element.type === "cascader") {
- if (element.itemType !== "datePicker") {
- formData.value[element.prop] = map[element.type];
- formData.value[element.prop + "Name"] = map[element.type];
- }
- } else if (map[element.type] != undefined) {
- formData.value[element.prop] = map[element.type];
- }
- }
- }
- formDataShowLabel();
- emit("update:modelValue", formData.value);
- };
- formDataInit();
- // 选择框 确定事件
- const onConfirmPicker = (option, item, index) => {
- if (option.selectedOptions[0]) {
- switch (item.itemType) {
- case "onePicker": {
- formData.value[item.prop + "Name"] =
- option.selectedOptions[0][
- item.fieldNames.text
- ? item.fieldNames.text
- : onePickerFieldNames.text
- ];
- formData.value[item.prop] =
- option.selectedOptions[0][
- item.fieldNames.value
- ? item.fieldNames.value
- : onePickerFieldNames.value
- ];
- formConfig.value[index].showPicker = false;
- }
- case "datePicker": {
- formData.value[item.prop] = option.selectedValues.join(
- item.split ? item.split : "-"
- );
- formConfig.value[index].showPicker = false;
- }
- }
- } else {
- formConfig.value[index].showPicker = false;
- }
- };
- const currentIndex = ref(-1);
- const currentSonIndex = ref(-1);
- const handleListItemClick = (i, index, sonIndex) => {
- if (i.readonly !== undefined && i.readonly === true) {
- return;
- } else {
- if (formOption.value.readonly) {
- return;
- } else {
- currentIndex.value = index;
- currentSonIndex.value = sonIndex;
- btnConfigCopy.listConfig[sonIndex].showPicker = true;
- }
- }
- };
- const onConfirmListPicker = (option, item) => {
- switch (item.itemType) {
- case "onePicker": {
- formData.value[btnConfigCopy.prop][currentIndex.value][
- item.prop + "Name"
- ] =
- option.selectedOptions[0][
- item.fieldNames.text ? item.fieldNames.text : onePickerFieldNames.text
- ];
- formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] =
- option.selectedOptions[0][
- item.fieldNames.value
- ? item.fieldNames.value
- : onePickerFieldNames.value
- ];
- btnConfigCopy.listConfig[currentSonIndex.value].showPicker = false;
- }
- case "datePicker": {
- formData.value[btnConfigCopy.prop][currentIndex.value][item.prop] =
- option.selectedValues.join(item.split ? item.split : "-");
- btnConfigCopy.listConfig[currentSonIndex.value].showPicker = false;
- }
- }
- };
- // push事件
- const handlePush = () => {
- if (btnConfigCopy.clickFn && typeof btnConfigCopy.clickFn == "function") {
- btnConfigCopy.clickFn();
- }
- };
- // remove
- const handleRemove = (index, item) => {
- if (item.deleteFn) {
- item.deleteFn(index);
- } else {
- formData.value[btnConfigCopy.prop].splice(index, 1);
- }
- };
- // 拉去城市最近数据及处理
- const getAreaInfo = (selectedOptions, item, index) => {
- showLoadingToast("加载中...");
- proxy
- .post("/customizeArea/list", { parentId: selectedOptions.value })
- .then((res) => {
- let countryIndex = selectedOptions.selectedOptions[0].index;
- let provinceIndex =
- selectedOptions.tabIndex === 1
- ? selectedOptions.selectedOptions[1].index
- : null;
- let cityIndex =
- selectedOptions.tabIndex === 2
- ? selectedOptions.selectedOptions[2].index
- : null;
- //已经没有下级数据
- if (res.data.length === 0) {
- if (selectedOptions.tabIndex === 1) {
- formData.value[item.prop + "Name"] = selectedOptions.selectedOptions
- .map((item) => item.text)
- .join(" ");
- formConfig.value[index].showPicker = false;
- formData.value.cityObj = selectedOptions;
- return;
- }
- }
- if (selectedOptions.tabIndex === 2) {
- formData.value[item.prop + "Name"] = selectedOptions.selectedOptions
- .map((item) => item.text)
- .join(" ");
- formConfig.value[index].showPicker = false;
- formData.value.cityObj = selectedOptions;
- return;
- }
- if (selectedOptions.tabIndex === 0) {
- cityOption.value[countryIndex].children = res.data.map(
- (item, index) => {
- return {
- ...item,
- index: index,
- text: item.name,
- value: item.id,
- };
- }
- );
- } else if (selectedOptions.tabIndex === 1) {
- cityOption.value[countryIndex].children[provinceIndex].children =
- res.data.map((item, index) => {
- return {
- ...item,
- index: index,
- text: item.name,
- value: item.id,
- };
- });
- } else if (selectedOptions.tabIndex === 2) {
- cityOption.value[countryIndex].children[provinceIndex].children[
- cityIndex
- ].children = res.data.map((item, index) => {
- return {
- ...item,
- index: index,
- text: item.name,
- value: item.id,
- };
- });
- }
- closeToast();
- });
- };
- // 城市变动事件
- const cityOnChange = (options, item, index) => {
- getAreaInfo(options, item, index);
- };
- const commonOnChange = ({ selectedOptions }, item, index) => {
- const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
- formData.value[item.prop + "Name"] =
- selectedOptions[selectedOptions.length - 1][textAtt];
- };
- const handleCommonFinish = (index) => {
- formConfig.value[index].showPicker = false;
- };
- // 文件上传
- const onOversize = () => {
- showToast("文件大小不能超过 5MB");
- };
- const afterRead = (file) => {
- if (file && file.length > 0) {
- for (let i = 0; i < file.length; i++) {
- file[i].status = "uploading";
- file[i].message = "上传中...";
- proxy.post("/fileInfo/getSing", { fileName: file[i].file.name }).then(
- (res) => {
- let forms = new FormData();
- forms.append("file", file[i].file);
- proxy
- .post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", {
- ...res.data.uploadBody,
- file: forms.get("file"),
- })
- .then(
- () => {
- file[i].id = res.data.id;
- file[i].url = res.data.fileUrl;
- file[i].fileName = res.data.fileName;
- delete file[i].status;
- delete file[i].message;
- },
- () => {
- file[i].status = "failed";
- file[i].message = "上传失败";
- }
- );
- },
- () => {
- file[i].status = "failed";
- file[i].message = "上传失败";
- }
- );
- }
- } else {
- file.status = "uploading";
- file.message = "上传中...";
- proxy.post("/fileInfo/getSing", { fileName: file.file.name }).then(
- (res) => {
- let forms = new FormData();
- forms.append("file", file.file);
- proxy
- .post("https://winfaster.obs.cn-south-1.myhuaweicloud.com", {
- ...res.data.uploadBody,
- file: forms.get("file"),
- })
- .then(
- () => {
- file.id = res.data.id;
- file.url = res.data.fileUrl;
- file.fileName = res.data.fileName;
- delete file.status;
- delete file.message;
- },
- () => {
- file.status = "failed";
- file.message = "上传失败";
- }
- );
- },
- () => {
- file.status = "failed";
- file.message = "上传失败";
- }
- );
- }
- };
- const testForm = ref(null); // 延迟使用,因为还没有返回跟挂载
- watch(
- formData.value,
- (val) => {
- emit("update:modelValue", val);
- },
- {
- deep: true,
- }
- );
- watch(
- () => formData.value[btnConfigCopy.prop],
- (val) => {
- if (
- formOption.value.btnConfig !== undefined &&
- !formOption.value.btnConfig.isNeed &&
- val &&
- val.length > 0
- ) {
- formDataListShowLabel();
- }
- }
- );
- const changeCheckboxGroup = (form, label, data, fieldNames) => {
- let text = "";
- if (form[label] && form[label].length > 0) {
- form[label].map((item) => {
- let list = data.filter((itemData) => itemData[fieldNames.value] === item);
- if (list && list.length > 0) {
- if (text) {
- text = text + "," + list[0][fieldNames.text];
- } else {
- text = list[0][fieldNames.text];
- }
- }
- });
- }
- form[label + "Name"] = text;
- };
- const datePickerDateArr = ref([]);
- const datePickerTimeArr = ref([]);
- const datePickerTimeConfirm = (item, index) => {
- formData.value[item.prop] =
- datePickerDateArr.value.join("-") + " " + datePickerTimeArr.value.join(":");
- formConfig.value[index].showPicker = false;
- };
- const defaultTimeFn = (item, index) => {
- datePickerDateArr.value = formatDate(
- new Date(formData.value[item.prop]),
- "yyyy-MM-dd"
- ).split("-");
- datePickerTimeArr.value = formatDate(
- new Date(formData.value[item.prop]),
- "hh:mm:ss"
- ).split(":");
- formConfig.value[index].showPicker = true;
- };
- const onSearchData = (item) => {
- item.onSearchData(item.searchKeyword);
- };
- const currentDate = ref(["2023", "01", "01"]);
- const initCurrentDate = () => {
- const date = new Date();
- const year = date.getFullYear();
- const month = date.getMonth() + 1;
- const day = date.getDate();
- currentDate.value = [year + "", month + "", day + ""];
- };
- initCurrentDate();
- const validateForm = async () => {
- try {
- const flag = await testForm.value.validate();
- return flag;
- } catch (err) {
- return true;
- }
- };
- defineExpose({
- formDataShowLabelOne,
- formDataListShowLabelOne,
- btnConfigCopy,
- validateForm,
- });
- </script>
- <style lang="scss" scoped>
- .btn-box {
- width: 100%;
- text-align: center;
- background: #f2f2f2;
- padding: 10px 0;
- }
- .row {
- color: #999999;
- background: #ecebeb;
- height: 32px;
- line-height: 32px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 15px;
- }
- ._title {
- font-size: 14px;
- font-weight: 700;
- }
- ::v-deep {
- .multipleChoice {
- margin-bottom: 60px;
- .van-checkbox {
- justify-content: center;
- margin: 10px 40px;
- }
- }
- .van-form {
- margin-top: 0px !important;
- }
- }
- ::v-deep {
- .searchBox {
- .van-field__label--top {
- width: 20px !important;
- }
- }
- }
- </style>
|