BeiJinSettleAccount/code/WebApp/vanilla/components/form/form-input.js

import html from "html";
import { ref, reactive, watch, onMounted } from "vue";
import { dayjs } from "element-plus";
import request, { post } from "../../request/index.js";
import { importFunction } from "../../utils/index.js";

export default {
  template: html`
    <template v-if="getDisabled()">
      <template v-if="model[prop]!==null">
        <el-switch disabled v-model="model[prop]" type="checked" v-if="schema.type==='boolean'" />
        <template v-else-if="schema.input==='year'">{{dayjs(model[prop]).format('YYYY')}}</template>
        <template v-else-if="schema.input==='date'">{{dayjs(model[prop]).format('YYYY-MM-DD')}}</template>
        <template v-else-if="schema.input==='datetime'">{{dayjs(model[prop]).format('YYYY-MM-DD HH:mm:ss')}}</template>
        <template v-else-if="schema.input==='password'">******</template>
        <template v-else>{{model[prop]}}</template>
      </template>
    </template>
    <template v-else>
      <template v-if="getInput(schema)==='select'">
        <el-select
          v-model="model[prop]"
          :placeholder="$t('select')"
          :multiple="!!schema.multiple"
          clearable
          style="width:100%"
          :title="JSON.stringify(options)"
        >
          <el-option v-for="item in options" :key="item.key" :label="item.label" :value="item.value" />
        </el-select>
      </template>
      <template v-if="getInput(schema)==='month'">
        <el-date-picker v-model="model[prop]" :type="schema.input" :value-format="schema.format" />
      </template>
      <el-input
        :disabled="getDisabled()"
        :placeholder="schema.title"
        v-model="model[prop]"
        type="number"
        v-else-if="getInput(schema)==='number'"
      />
      <el-input-number
        :disabled="getDisabled()"
        :placeholder="schema.title"
        v-model="model[prop]"
        :precision="0"
        v-else-if="getInput(schema)==='integer'"
      />
      <template v-else-if="getInput(schema)==='boolean'">
        <el-select :disabled="getDisabled()" v-model="model[prop]" :placeholder="schema.title" v-if="schema.nullable">
          <el-option prop="select" value="" :label="$t('select')" />
          <el-option prop="true" :value="true" :label="$t('true')" />
          <el-option prop="false" :value="false" :label="$t('false')" />
        </el-select>
        <el-switch v-model="model[prop]" type="checked" v-else />
      </template>
      <template v-else>
        <el-input
          :disabled="getDisabled()"
          :placeholder="schema.title"
          v-model="model[prop]"
          type="password"
          show-password
          v-if="schema.input==='password'"
        />
        <el-input
          :disabled="getDisabled()"
          :placeholder="schema.title"
          v-model="model[prop]"
          :type="schema.input??'text'"
          v-else
        />
      </template>
    </template>
  `,
  props: ["modelValue", "schema", "prop", "isReadOnly", "mode"],
  emit: ["update:modelValue"],
  setup(props, context) {
    const model = reactive(props.modelValue);
    watch(model, (value) => {
      context.emit("update:modelValue", value);
    });
    /*start*/
    const getDisabled = () => {
      if (props.mode === "details") {
        return true;
      }
      if (props.mode === "update" && props.schema.readOnly) {
        return true;
      }
      return false;
    };
    const getInput = (schema) => {
      return schema.input ?? schema.type;
    };
    /*end*/
    //options
    const selectProps = ref({});
    const selectValues = ref([]);
    const options = ref([]);
    //watch

    watch(
      () => model[props.prop],
      async (value) => {
        if (props.schema.watch) {
          console.log(value);
          if (props.schema.watch?.constructor === String) {
            props.schema.watch = await importFunction(props.schema.watch);
          }
          if (props.schema.watch?.constructor === Function) {
            props.schema.watch(model, value);
          }
        }
      }
    );
    onMounted(async () => {
      if (props.schema.options) {
        options.value = props.schema.options;
      } else if (props.schema.url) {
        try {
          const url = `${props.schema.url}`;
          const result = await request(url, null, { method: "GET" });
          options.value = result.data?.items.map((o) => ({
            value: o[props.schema.value],
            label: o[props.schema.label],
          }));
        } catch (error) {
          console.log(error);
        }
      }
    });
    return {
      model,
      getDisabled,
      getInput,
      dayjs,
      selectProps,
      selectValues,
      options,
    };
  },
};