hfysite/components/typeEdit.vue

<script>
import axios from "axios";
import {rCode} from "../map/rcodeMap_esm";
import {handle} from "../until/handle";
import InputRow from "./public/form/inputRow.vue";
import RoundedTitle from "./public/roundedTitle.vue";
import dbField_esm from "../map/dbField_esm";
import {FormVerify} from "kind-form-verify";
import {fieldCheck} from "../until/form/fieldVerify";

const emptyType = {
  type_name: '',
  type_logo: '',
  type_sort: 0,
  type_key: ''
}
let formVerify = null;
export default {
  name: 'typeEdit',
  components: {RoundedTitle, InputRow},
  props: {
  },
  data () {
    return {
      isInitialized: false,
      title: '编辑类型',
      typeId: '',
      formType: {
        type_name: {
          val: "",
          oldVal: "",
          init: "",
          msg: "",
          state: 0,
        },
        type_logo: {
          val: "",
          oldVal: "",
          init: "",
          msg: "",
          state: 0,
        },
        type_sort: {
          val: 0,
          oldVal: 0,
          init: 0,
          msg: "",
          state: 0,
        },
        type_key: {
          val: "",
          oldVal: "",
          init: "",
          msg: "",
          state: 0,
          reCheckField: 'type_name',
        }
      },
      api: ''
    }
  },
  mounted() {

    // fieldCheck.checkField('type',this.form.type.val)
    // formVerify.checkForm(this.form, true);
    console.log(formVerify);

  },
  methods: {
    /**
     * 初始化编辑器
     * @param id
     * @param title
     * @param api
     * @param object
     */
    init (title, api, object) {

      this.api = api
      if (!api){
        this.$message.error('请设置api地址')
        throw new Error('请设置api地址')
      }
      let type = {
        ...emptyType,
        ...object
      }
      if(object) {
        this.typeId = object.type_id
        this.title = `编辑${title}`
      }else{
        this.typeId = ''
        this.title = `新增${title}`
      }
      this.formType.type_name.init = type.type_name
      this.formType.type_logo.init = type.type_logo
      this.formType.type_sort.init = type.type_sort
      this.formType.type_key.init = type.type_key
      this.isInitialized = true
      formVerify = new FormVerify(
        this.formType,
        fieldCheck,
      )
      formVerify.init()
      formVerify.onLog = (msg) => {
        console.log(msg);
      };
    },
    initForm() {

    },
    close () {
      this.isInitialized = false
      this.$emit('close')
    },
    handleSave () {
      this.executeSubmitData()
    },
    handleCancel () {
      this.close()
    },
    handleReset() {
      this.initForm()
    },
    async executeSubmitData(){
      if(!this.isInitialized)
      {
        throw new Error('请先初始化类别编辑器')
      }
      let url = this.api;
      if(this.typeId){
        url = url + '?id=' + this.typeId
      }
      // 检测参数
      if(!formVerify.check()) {
          return this.$message.error('参数错误')
      }
      let params = formVerify.getFormData()
      let [err, res] = await handle(axios.post(url, params))
      if(err){
        this.$message.error(`[${this.title}] 失败:${err.message}`)
        console.log(err)
        return err
      }
      let result = res.data
      if(result.code !== rCode.OK) {
        this.$message.error(`[${this.title}] 失败:${res.msg}`)
        return result
      }
      this.$message.success(`[${this.title}] 成功`)
      this.close()
    }


  }
}
</script>

<template>
  <div class="w-full ">
    <rounded-title class="text-xl">
      <span>{{ title }}</span>
    </rounded-title>
    <input-row class="mt-2" :msg="formType.type_name.msg"
               label="类型名称">
      <a-input v-model="formType.type_name.val" placeholder="类型名称"></a-input>
    </input-row>
    <input-row class="mt-2" :msg="formType.type_logo.msg"
               label="类型logo">
      <a-input v-model="formType.type_logo.val" placeholder="类型logo"></a-input>
    </input-row>
    <input-row class="mt-2" :msg="formType.type_sort.msg"
               label="排序">
      <a-input-number v-model="formType.type_sort.val"
                      placeholder="排序"></a-input-number>
    </input-row>
    <input-row class="mt-2" :msg="formType.type_key.msg"
               label="类型关键字key">
      <a-input v-model="formType.type_key.val" placeholder="类型关键字key"></a-input>
    </input-row>

    <div class="mt-2">
      <a-button type="primary" @click="handleReset">重置</a-button>
      <a-button type="primary" @click="handleSave">确认</a-button>
    </div>

  </div>
</template>

<style scoped>

</style>