|
@@ -0,0 +1,266 @@
|
|
|
|
+<template>
|
|
|
|
+ <template v-if="element.type === 'input'">
|
|
|
|
+ <van-field
|
|
|
|
+ v-model="element.options.defaultValue"
|
|
|
|
+ :label="element.label"
|
|
|
|
+ :name="element.model"
|
|
|
|
+ :maxlength="element.options?.maxlength"
|
|
|
|
+ :placeholder="element.options?.placeholder"
|
|
|
|
+ :clearable="element.options?.clearable"
|
|
|
|
+ :disabled="element.options?.disabled"
|
|
|
|
+ :readonly="element.options?.readonly"
|
|
|
|
+ :required="element.options?.rules?.required"
|
|
|
|
+ :rules="[{ validator: characterVerification, message: '' }]"
|
|
|
|
+ :class="`${element.options?.rules?.required ? '' : 'resetStyles'} resetStyles-right`"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="element.type === 'number'">
|
|
|
|
+ <van-field
|
|
|
|
+ v-model="element.options.defaultValue"
|
|
|
|
+ type="number"
|
|
|
|
+ :label="element.label"
|
|
|
|
+ :name="element.model"
|
|
|
|
+ :maxlength="element.options?.maxlength"
|
|
|
|
+ :placeholder="'请输入'"
|
|
|
|
+ :clearable="element.options?.clearable"
|
|
|
|
+ :disabled="element.options?.disabled"
|
|
|
|
+ :readonly="element.options?.readonly"
|
|
|
|
+ :required="element.options?.rules?.required"
|
|
|
|
+ :rules="[{ validator: characterVerification, message: '' }]"
|
|
|
|
+ :class="`${element.options?.rules?.required ? '' : 'resetStyles'} resetStyles-right`"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ <!-- 正常的下拉框 -->
|
|
|
|
+ <template v-if="element.type === 'select' && !distinguishComponents">
|
|
|
|
+ <van-field
|
|
|
|
+ :label="element.label"
|
|
|
|
+ :name="element.model"
|
|
|
|
+ :maxlength="element.options?.maxlength"
|
|
|
|
+ :placeholder="element.options?.placeholder"
|
|
|
|
+ :clearable="element.options?.clearable"
|
|
|
|
+ :disabled="element.options?.disabled"
|
|
|
|
+ :required="element.options?.rules?.required"
|
|
|
|
+ :rules="[{ validator: characterVerification, trigger: 'onBlur' }]"
|
|
|
|
+ @click="element.options?.disabled ? '' : (showSelect = true)"
|
|
|
|
+ readonly
|
|
|
|
+ is-link
|
|
|
|
+ :class="element.options?.rules?.required ? '' : 'resetStyles'"
|
|
|
|
+ >
|
|
|
|
+ <template #input v-if="element.options.defaultValue">
|
|
|
|
+ {{ selectedLabel }}
|
|
|
|
+ </template>
|
|
|
|
+ </van-field>
|
|
|
|
+ </template>
|
|
|
|
+ <!-- 需要转译的下拉框 -->
|
|
|
|
+ <template v-if="element.type === 'select' && distinguishComponents">
|
|
|
|
+ <van-field
|
|
|
|
+ :label="element.label"
|
|
|
|
+ :name="element.model"
|
|
|
|
+ :maxlength="element.options?.maxlength"
|
|
|
|
+ :placeholder="element.options?.placeholder"
|
|
|
|
+ :clearable="element.options?.clearable"
|
|
|
|
+ :disabled="element.options?.disabled"
|
|
|
|
+ :required="element.options?.rules?.required"
|
|
|
|
+ :rules="[{ validator: characterVerification, message: '' }]"
|
|
|
|
+ @click="element.options?.disabled ? '' : (showSelect = true)"
|
|
|
|
+ readonly
|
|
|
|
+ is-link
|
|
|
|
+ :class="element.options?.rules?.required ? '' : 'resetStyles'"
|
|
|
|
+ >
|
|
|
|
+ <template #input v-if="element.options.defaultValue">
|
|
|
|
+ {{ selectedLabel }}
|
|
|
|
+ </template>
|
|
|
|
+ </van-field>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="element.type === 'date'">
|
|
|
|
+ <van-field
|
|
|
|
+ v-model="element.options.defaultValue"
|
|
|
|
+ :label="element.label"
|
|
|
|
+ :name="element.model"
|
|
|
|
+ :maxlength="element.options?.maxlength"
|
|
|
|
+ :placeholder="element.options?.placeholder"
|
|
|
|
+ :clearable="element.options?.clearable"
|
|
|
|
+ :disabled="element.options?.disabled"
|
|
|
|
+ :required="element.options?.rules?.required"
|
|
|
|
+ :rules="[{ validator: characterVerification, message: '' }]"
|
|
|
|
+ @click="showPickerClick"
|
|
|
|
+ readonly
|
|
|
|
+ is-link
|
|
|
|
+ :class="element.options?.rules?.required ? '' : 'resetStyles'"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="element.type === 'textarea'">
|
|
|
|
+ <van-field
|
|
|
|
+ v-model="element.options.defaultValue"
|
|
|
|
+ type="textarea"
|
|
|
|
+ :label="element.label"
|
|
|
|
+ :name="element.model"
|
|
|
|
+ :rows="element.rows"
|
|
|
|
+ :show-word-limit="element.options?.showWordLimit"
|
|
|
|
+ :maxlength="element.options?.maxlength"
|
|
|
|
+ :placeholder="element.options?.placeholder"
|
|
|
|
+ :clearable="element.options?.clearable"
|
|
|
|
+ :disabled="element.options?.disabled"
|
|
|
|
+ :readonly="element.options?.readonly"
|
|
|
|
+ :required="element.options?.rules?.required"
|
|
|
|
+ :rules="[{ validator: characterVerification, message: '' }]"
|
|
|
|
+ :class="`${element.options?.rules?.required ? '' : 'resetStyles'} resetStyles-right`"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+
|
|
|
|
+ <!-- 日期选择器 -->
|
|
|
|
+ <van-popup
|
|
|
|
+ v-model:show="showPicker"
|
|
|
|
+ destroy-on-close
|
|
|
|
+ position="bottom"
|
|
|
|
+ :style="{ height: '35%' }"
|
|
|
|
+ >
|
|
|
|
+ <van-date-picker
|
|
|
|
+ v-model="pickerValue"
|
|
|
|
+ @confirm="showPickerConfirm"
|
|
|
|
+ @cancel="showPicker = false"
|
|
|
|
+ />
|
|
|
|
+ </van-popup>
|
|
|
|
+
|
|
|
|
+ <!-- select 选择器 -->
|
|
|
|
+ <van-popup
|
|
|
|
+ v-model:show="showSelect"
|
|
|
|
+ destroy-on-close
|
|
|
|
+ position="bottom"
|
|
|
|
+ :style="{ height: '80%' }"
|
|
|
|
+ >
|
|
|
|
+ <PullDownSelector
|
|
|
|
+ :options="element.options.options"
|
|
|
|
+ :multipleChoice="element.options.multiple"
|
|
|
|
+ @change="selectChange"
|
|
|
|
+ />
|
|
|
|
+ </van-popup>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+import { ref, reactive, computed, onMounted, defineEmits } from "vue";
|
|
|
|
+import dayjs from "dayjs";
|
|
|
|
+import requests from "@common/requests";
|
|
|
|
+import PullDownSelector from "@components/common/pullDownSelector.vue";
|
|
|
|
+import { relatedField } from "./formCorrespondenceProcessing";
|
|
|
|
+
|
|
|
|
+const emit = defineEmits(["validateASingleForm", "cascadeProcessing"]);
|
|
|
|
+const props = defineProps({
|
|
|
|
+ element: {
|
|
|
|
+ type: Object,
|
|
|
|
+ required: true,
|
|
|
|
+ },
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+const dateOfTheDay = dayjs().format("YYYY-MM-DD");
|
|
|
|
+const distinguishComponents = ref(false);
|
|
|
|
+const showPicker = ref(false);
|
|
|
|
+const showSelect = ref(false);
|
|
|
|
+const pickerValue = ref([]);
|
|
|
|
+
|
|
|
|
+const selectedLabel = computed(() => {
|
|
|
|
+ const defaultValue = props.element.options.defaultValue;
|
|
|
|
+ const options = props.element.options.options;
|
|
|
|
+ if (Array.isArray(defaultValue)) {
|
|
|
|
+ return options
|
|
|
|
+ .filter((item) => defaultValue.includes(item.value))
|
|
|
|
+ .map((item) => item.label)
|
|
|
|
+ .join(",");
|
|
|
|
+ } else {
|
|
|
|
+ return options.find((item) => item.value === defaultValue)?.label;
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+function selectChange(value, label) {
|
|
|
|
+ props.element.options.defaultValue = value;
|
|
|
|
+ showSelect.value = false;
|
|
|
|
+ value && errorMessageForResettingTheCurrentOption();
|
|
|
|
+ const cascade = relatedField[props.element.model];
|
|
|
|
+ if (cascade) {
|
|
|
|
+ emit("cascadeProcessing", cascade);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function errorMessageForResettingTheCurrentOption() {
|
|
|
|
+ emit("validateASingleForm", props.element.model);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 日期选择
|
|
|
|
+function showPickerConfirm({ selectedValues }) {
|
|
|
|
+ props.element.options.defaultValue = selectedValues.join("-");
|
|
|
|
+ showPicker.value = false;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function showPickerClick() {
|
|
|
|
+ const defaultValue = props.element.options.defaultValue || dateOfTheDay;
|
|
|
|
+ pickerValue.value = defaultValue.split("-");
|
|
|
|
+ showPicker.value = true;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function characterVerification() {
|
|
|
|
+ const rules = props.element.options.rules;
|
|
|
|
+ const value = props.element.options.defaultValue;
|
|
|
|
+ if (rules.required) {
|
|
|
|
+ return value ? true : false;
|
|
|
|
+ }
|
|
|
|
+ return true;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 处理数据
|
|
|
|
+function processingData() {
|
|
|
|
+ const {
|
|
|
|
+ remoteFunc = "",
|
|
|
|
+ remote = false,
|
|
|
|
+ options = [],
|
|
|
|
+ } = props.element?.options;
|
|
|
|
+ distinguishComponents.value =
|
|
|
|
+ remoteFunc && remoteFunc.indexOf("getSimpleActiveUserListNew") > -1;
|
|
|
|
+ if (remote) {
|
|
|
|
+ requestData(remoteFunc);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (options.length > 0) {
|
|
|
|
+ props.element.options.options = options.map((item) => {
|
|
|
|
+ const { props: setProps } = props.element.options;
|
|
|
|
+ return {
|
|
|
|
+ label: item[setProps.label || "label"],
|
|
|
|
+ value: item[setProps.value || "value"],
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 发起接口请求
|
|
|
|
+function requestData(str = "") {
|
|
|
|
+ const url = str.replace(/^(\/?api)/, "").trim();
|
|
|
|
+ requests.post(url, {}).then(({ data }) => {
|
|
|
|
+ props.element.options.options = data.map((item) => {
|
|
|
|
+ const { props: setProps } = props.element.options;
|
|
|
|
+ return {
|
|
|
|
+ label: item[setProps.label || "label"],
|
|
|
|
+ value: item[setProps.value || "value"],
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// console.log(props.element);
|
|
|
|
+
|
|
|
|
+onMounted(() => {
|
|
|
|
+ processingData();
|
|
|
|
+});
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.resetStyles {
|
|
|
|
+ ::v-deep .van-field__label {
|
|
|
|
+ padding-left: 7.35px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.resetStyles-right {
|
|
|
|
+ ::v-deep .van-cell__value {
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|