PicbedConfigForm.vue

<!--
  - Copyright (c) 2023, Terwer . All rights reserved.
  - DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
  -  
  - This code is free software; you can redistribute it and/or modify it
  - under the terms of the GNU General Public License version 2 only, as
  - published by the Free Software Foundation.  Terwer designates this
  - particular file as subject to the "Classpath" exception as provided
  - by Terwer in the LICENSE file that accompanied this code.
  -  
  - This code is distributed in the hope that it will be useful, but WITHOUT
  - ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  - FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
  - version 2 for more details (a copy is included in the LICENSE file that
  - accompanied this code).
  -  
  - You should have received a copy of the GNU General Public License version
  - 2 along with this work; if not, write to the Free Software Foundation,
  - Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
  -  
  - Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
  - or visit www.terwer.space if you need additional information or have any
  - questions.
  -->

<template>
  <div class="config-form-box">
    <div class="config-form-header">
      <el-page-header :icon="ArrowLeft" title="返回" @click="onBack">
        <template #content>
          <div class="flex items-center">
            <span
              class="text-large font-600 mr-3"
              :title="ruleForm._configName"
            >
              {{ ruleForm._configName }}
            </span>
          </div>
        </template>
      </el-page-header>
    </div>

    <div class="config-form">
      <el-form
        ref="$form"
        label-position="left"
        label-width="50%"
        :model="ruleForm"
        size="small"
      >
        <el-form-item
          :label="$t('setting.picgo.picbed.uploader.config.name')"
          required
          prop="_configName"
        >
          <el-input
            v-model="ruleForm._configName"
            :placeholder="
              $t('setting.picgo.picbed.uploader.config.name.placeholder')
            "
          />
        </el-form-item>

        <!-- dynamic config -->
        <el-form-item
          v-for="(item, index) in configList"
          :key="item.name + index"
          :label="item.alias || item.name"
          :required="item.required"
          :prop="item.name"
        >
          <el-input
            v-if="item.type === 'input' || item.type === 'password'"
            v-model="ruleForm[item.name]"
            :type="item.type === 'password' ? 'password' : 'input'"
            :placeholder="item.message || item.name"
          />
          <el-select
            v-else-if="item.type === 'list' && item.choices"
            v-model="ruleForm[item.name]"
            :placeholder="item.message || item.name"
          >
            <el-option
              v-for="choice in item.choices"
              :key="choice.name || choice.value || choice"
              :label="choice.name || choice.value || choice"
              :value="choice.value || choice"
            />
          </el-select>
          <el-select
            v-else-if="item.type === 'checkbox' && item.choices"
            v-model="ruleForm[item.name]"
            :placeholder="item.message || item.name"
            multiple
            collapse-tags
          >
            <el-option
              v-for="choice in item.choices"
              :key="choice.value || choice"
              :label="choice.name || choice.value || choice"
              :value="choice.value || choice"
            />
          </el-select>
          <el-switch
            v-else-if="item.type === 'confirm'"
            v-model="ruleForm[item.name]"
            active-text="yes"
            inactive-text="no"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="onSubmit">{{ $t("main.opt.ok") }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowLeft } from "@element-plus/icons-vue"
import { onBeforeMount, reactive, ref, toRefs, watch } from "vue"
import { FormInstance } from "element-plus"
import { cloneDeep, union } from "lodash"
import picgoUtil from "~/utils/otherlib/picgoUtil"

const props = defineProps({
  type: String,
  config: Object,
  configId: String,
  isNewForm: Boolean,
})

const $form = ref<FormInstance>()
const emits = defineEmits(["on-change"])

const configList = ref<IPicGoPluginConfig[]>([])
const ruleForm = reactive<IStringKeyMap>({})

watch(
  toRefs(props.config),
  (val) => {
    handleConfigChange(val)
  },
  {
    deep: true,
    immediate: true,
  }
)

function handleConfigChange(val: any) {
  handleConfig(val)
}

/**
 * 获取当前表单数据
 */
function getCurConfigFormData(): IStringKeyMap[] {
  const configId = props.configId
  const curTypeConfigList =
    picgoUtil.getPicgoConfig(`uploader.${props.type}.configList`) || []
  return curTypeConfigList.find((i) => i._id === configId) || {}
}

function handleConfig(val: IPicGoPluginConfig[]) {
  const config = getCurConfigFormData()
  const configId = props.isNewForm ? undefined : props.configId
  Object.assign(ruleForm, config)
  if (val.length > 0) {
    configList.value = cloneDeep(val).map((item) => {
      if (!configId) return item
      let defaultValue =
        item.default !== undefined
          ? item.default
          : item.type === "checkbox"
          ? []
          : null
      if (item.type === "checkbox") {
        const defaults =
          item.choices
            ?.filter((i: any) => {
              return i.checked
            })
            .map((i: any) => i.value) || []
        defaultValue = union(defaultValue, defaults)
      }
      if (config && config[item.name] !== undefined) {
        defaultValue = config[item.name]
      }
      ruleForm[item.name] = defaultValue
      return item
    })
  }
}

async function validate(): Promise<IStringKeyMap | false> {
  return new Promise((resolve) => {
    $form.value?.validate((valid: boolean) => {
      if (valid) {
        resolve(ruleForm)
      } else {
        resolve(false)
        return false
      }
    })
  })
}

const onBack = () => {
  emits("on-change")
}

const onSubmit = async () => {
  const result = (await validate()) || false
  if (result !== false) {
    onBack()
  }
}

const initPage = () => {
  ruleForm._configName = props?.config?._configName ?? "New Config"
}

onBeforeMount(() => {
  initPage()
})
</script>

<style scoped>
.config-form-header {
  margin: 10px 0;
}
</style>