Question

我有一个自定义的资源工具，可以在资源的视图面板中正常工作，但是当我进入编辑模式时，它不会出现。我应该添加一些东西到组件或Nova配置中以在编辑模式下启用该组件吗？

User.php中的代码

public function fields(Request $request)
{

    return [
        ID::make()->sortable(),

        Text::make('First name', 'firstName')
            ->sortable()
            ->rules('required', 'max:255'),

        Text::make('Last name', 'lastName')
            ->sortable()
            ->rules('required', 'max:255'),

        Text::make('Email')
            ->sortable()
            ->rules('required', 'email', 'max:254')
            ->creationRules('unique:users,email')
            ->updateRules('unique:users,email,{{resourceId}}'),

        Password::make('Password')
            ->onlyOnForms()
            ->creationRules('required', 'string', 'min:6')
            ->updateRules('nullable', 'string', 'min:6'),

        YesNovaUserPermissions::make(),
    ];
}

用户视图：

用户编辑：

Answer 1

Nova似乎不允许您使用自定义资源来获得此功能，但可以使用custom field。您基本上会创建一个在模型上实际上不存在的“虚拟”字段，并在模型上使用mutator来覆盖默认的模型保存功能。

按照上面的文档，您可以构建一个Vue组件，该组件将出现在资源编辑表单本身中，类似于我对下图所示的标签选择器所做的操作。

代码：

(hour < 7 or hour > 20) and talking == True 
=> (TRUE OR FALSE) AND FALSE => FALSE

然后，您可以覆盖保存功能在模型中的工作方式，以适应“虚拟”字段。请注意以下内容，而不是直接在mutator上同步标签（这在大多数情况下会根据您的数据结构运行），我不得不将标签传递给模型上的“ Saved”事件，以适应创建新记录和关联的记录ID尚不可用，因此无法进行多对多关系的同步。

<template>
  <default-field :field="field" :errors="errors" :show-help-text="showHelpText">

  <label for="tag" class="inline-block text-80 pt-2 leading-tight">Tag</label>

  <template slot="field">
    <div id="multitag-flex-holder">
      <div id="multitag-search-holder" class="w-1/2">
        <div class="search-holder">
          <label>Search Categories</label>
          <input type="text" v-model="searchString" @focus="isSearching = true" @blur="isSearching = false" style="border:2px solid #000"/>

          <div class="found-tags" v-if="isSearching">
            <div v-for="(tag, i) in foundTags" @mousedown="addToSelected(tag)" :key="i">{{tag.name}}</div>
          </div>
        </div>
      </div>

      <div class="select-tags-holder w-1/2">
        <div class="selected-tags">
          <div v-for="(tag, i) in selectedTags" :key="'A'+i" @click="removeTag(tag)">{{tag.name}}   X</div>
        </div>
      </div>
    </div>
  </template>

  </default-field>
</template>

<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'

export default {
  mixins: [FormField, HandlesValidationErrors],

  props: ['resourceName', 'resourceId', 'field'],

  data: function () {
    return {
      selectedTags:[],
      isSearching:false,
      searchString:''
    }
  },

  mounted(){
    console.log(this.field)
    this.field.value.forEach((tag)=>{
      this.addToSelected(tag)
    })
    formData.append('whereType', 'Tag');
  },

  computed: {
    // a computed getter
    foundTags() {
      // `this` points to the vm instance

        return this.field.tags.filter((tag) => {
          if(tag.name.search(new RegExp(this.searchString, "i")) >= 0){
            if(this.selectedTagNames.indexOf(tag.name) == -1){
              return tag;
            }
          };
        })

    },
    selectedTagNames(){
      var selNames = this.selectedTags.map((tag) => {
          return tag.name;
      })
      return selNames;
    }
  },

  methods: {
    /*
     * Set the initial, internal value for the field.
     */
    setInitialValue() {
      this.value = this.field.value || ''
    },

    removeTag(tag){
      var index = this.selectedTags.indexOf(tag);
      if (index > -1) {
        this.selectedTags.splice(index, 1);
      }
    },

    addToSelected(tag){
      this.selectedTags.push(tag)
    },

    /**
     * Fill the given FormData object with the field's internal value.
     */
    fill(formData) {
      var tagIdArray = []
      this.selectedTags.forEach((tag)=>{
        tagIdArray.push(tag.id)
      })
      formData.append(this.field.attribute, tagIdArray)
    },
  },
}

</script>

Laravel Nova，自定义资源工具未出现在编辑模式下

1 个答案: