前言

這裡只是自己的一個想法。此想法只完成了裡面的一部分。記於此，希望有同樣需求的同學們共同討論和學習。

我也是剛學習使用這個框架。在學習使用的過程中有這樣的一個需求。我的某一個文章分類下面的文章需要新增兩個欄位（原價、現價），我想很多同學都有這樣的需求吧。要是能向onethink那樣為模型新增欄位就好了。那就自己來實現吧。想一想實現步驟。

1、在分類裡新增此分類下的文章需要自定義的欄位；
2、在新增文章選擇分類的時候檢視此分類下是否有自定義的欄位，有就展示出來。

我去，這麼簡單！！！

1 設計

還記得我們在使用thinkcmf的是候的模板設計功能麼（有點啟發了）。模版裡的json檔案就是用來控制模版的設計的。那麼我們也用一個數組或物件（我們暫時把它命名為selfFields）來定義我們自定義的文章分類欄位，在新增文章的時候,當我們選擇了文章分類後，就通過這個分類對應的這個selfFields來生成自定義欄位的html,然後再把html插入到分類的後面。好像很完美呀！

2 實現

2.1 selfFields的新增和儲存

首先selfFields肯定是要在新增分分類的時候生成的。那我們就來看看分類表的結構把。

看到那個more欄位了麼？我是想要什麼就有什麼呀。那就把它放在這裡吧。其結構如下：

{
"thumbnail":"portal\/20171102\/6676d62fca5e4080d338b044c30aca45.jpg",
"self_field":{  //此分類下的文章自定義欄位 
        "old_price":{
            "title":"原價",
            "value":"",
            "type"
 
:"text",
            "tip":"",
            "rule":{
                "require":true
            }
        },
        "now_price":{
            "title":"現價",
            "value":"",
            "type":"text",
            "tip":"",
            "rule":{
                "require":true
            }
        }
    }
}
 

2.1.1 前端新增

好吧，雖然有點扯。先就這樣吧。

檔案\thinkcmf\public\themes\admin_simpleboot3\portal\admin_category\add.html修改兩處

 <div class="col-md-2">
   <div class="list-group">
          <a class="list-group-item" href="#A" data-toggle="tab">基本屬性</a>
          <a class="list-group-item" href="#B" data-toggle="tab">SEO設定</a>
          <a class="list-group-item" href="#C" data-toggle="tab">模板設定</a>
          <!--新增的1-->
          <a class="list-group-item" href="#D" data-toggle="tab">自定義欄位</a> 
      </div>
  </div>

  <!--新增的2-->
 <div class="tab-pane" id="D">
    <div class="form-group">
          <div class="form-group">
              <label for="input-seo_title-1">自定義欄位</label>
              <div>
                  <input type="text" class="form-control" id="input-seo_title-1" name="more[self_field]">
              </div>
          </div>
      </div>
  </div>

2.1.2後端

檔案\thinkcmf\app\portal\controller\AdminCategoryController.php

 public function addPost()
    {
        $portalCategoryModel = new PortalCategoryModel();

        $data = $this->request->param();
        //--start--新增程式碼---
        $self_field=json_decode(htmlspecialchars_decode($data['more']['self_field']),true);
        if ($self_field){
            $data['more']['self_field']=$self_field;
        }else{
            unset( $data['more']['self_field']);
        }
        //----end----新增程式碼---
        $result = $this->validate($data, 'PortalCategory');

        if ($result !== true) {
            $this->error($result);
        }

        $result = $portalCategoryModel->addCategory($data);

        if ($result === false) {
            $this->error('新增失敗!');
        }

        $this->success('新增成功!', url('AdminCategory/index'));

    }

到此分類這面的工作好像就完了，當然分類修改就不多說了。

2.2 在新增文章的時候插入自定義的分類欄位

我們在新增文章的時候，當選完分類的時候，通過Ajax從後端獲取到生好的html字串，然後插入到分類欄位的後面。

2.2.1 前端

檔案\thinkcmf\public\themes\admin_simpleboot3\portal\admin_article\add.html

 function doSelectCategory() {
        var selectedCategoriesId = $('#js-categories-id-input').val();
        openIframeLayer("{:url('AdminCategory/select')}?ids=" + selectedCategoriesId, '請選擇分類', {
            area: ['700px', '400px'],
            btn: ['確定', '取消'],
            yes: function (index, layero) {
                //do something

                var iframeWin          = window[layero.find('iframe')[0]['name']];
                var selectedCategories = iframeWin.confirm();
                if (selectedCategories.selectedCategoriesId.length == 0) {
                    layer.msg('請選擇分類');
                    return;
                }
                $('#js-categories-id-input').val(selectedCategories.selectedCategoriesId.join(','));
                $('#js-categories-name-input').val(selectedCategories.selectedCategoriesName.join(' '));
                //console.log(layer.getFrameIndex(index));

                //只需要新增下面這一段 只需要新增下面這一段 只需要新增下面這一段 
                //選擇分類後  就需要動態獲取 需要載入的此分類的自定義的文章欄位
                $.post('{:url("AdminCategory/getCategorySelfFieldHtml")}',
                    {id:selectedCategories.selectedCategoriesId.join(',')},
                    function (data) {
                        $('.self-field').remove();
                        $('#js-categories-name-input').parent().parent().after(data);
                    }
                );
                //只需要新增上面這一段 只需要新增上面這一段 只需要新增上面這一段
                layer.close(index); //如果設定了yes回撥，需進行手工關閉
            }
        });
    }
</script>

2.2.2 後端生成html

在上面我們是在AdminCategory/getCategorySelfFieldHtml中獲取的html。
$.post('{:url("AdminCategory/getCategorySelfFieldHtml")}'
那我們就去後端實現它吧！！
檔案\thinkcmf\app\portal\controller\AdminCategoryController.php新增方法

public function getCategorySelfFieldHtml()
    {
        $ids = $this->request->param('id');
        $ids=explode(',',$ids);
        $portalCategoryModel = new PortalCategoryModel();
        $categoryData=$portalCategoryModel->field('id,more')->find($ids[0])->toArray();
        if (!empty($categoryData['more']['self_field'])){
            //下面有一個類  我要去實現它
            $categoryHtmleService= new \app\portal\service\CategoryHtmleService();
            $categoryHtml=$categoryHtmleService->getCategorySelfFieldHtml($categoryData['more']['self_field']);
            return $categoryHtml;
        }
    }

新增\thinkcmf\app\portal\service\CategoryHtmleService.php

<?php
// +----------------------------------------------------------------------
// | jaydon
// +----------------------------------------------------------------------
// | Copyright
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: Jaydon <[email protected]>
// +----------------------------------------------------------------------
namespace app\portal\service;

class CategoryHtmleService
{
    public function getCategorySelfFieldHtml($self_fields){
        $htmlString='';
        foreach ($self_fields as $key=>$self_field){

            switch ($self_field['type']){
                case "text":
                    $htmlString.=$this->parseText($self_field,$key);  //這次就實現這個方法吧   下面的慢慢去實現吧
                    break;
                case "textarea":
                    $htmlString.=$this->parseTextarea($self_field,$key);
                    break;
                case "date":
                    $htmlString.=$this->parseDate($self_field,$key);
                    break;
                case "datetime":
                    $htmlString.=$this->parseDatetime($self_field,$key);
                    break;
                case "image":
                    $htmlString.=$this->parseImage($self_field,$key);
                    break;
                case "photos":
                    $htmlString.=$this->parsePhotos($self_field,$key);
                    break;
                case "number":
                    $htmlString.=$this->parseNumber($self_field,$key);
                    break;
                case "location":
                    $htmlString.=$this->parseLocation($self_field,$key);
                    break;
                case "file":
                    $htmlString.=$this->parseFilet($self_field,$key);
                    break;
                case "color":
                    $htmlString.=$this->parseColor($self_field,$key);
                    break;
                case "array":
                    $htmlString.=$this->parseArray($self_field,$key);
                    break;
                case "select":
                    $htmlString.=$this->parseSelect($self_field,$key);
                    break;
                case "slide":
                    $htmlString.=$this->parseSlide($self_field,$key);
                    break;
            }
        }

        return $htmlString;

    }

    /**
     * 拼接textl型別的html   注意name的拼接 name="post[more][self_fields][$key]
     * @param $self_field
     * @param $key
     * @return string
     */
    public function parseText($self_field,$key){
        true === $self_field['rule']['require'] ? $required='required' : $required='';
        $htmlString=" <tr class='self-field'><th>".$self_field['title']."<span class=\"form-required\">*</span></th><td><input class=\"form-control\" type=\"text\" name=\"post[more][self_fields][$key]\"".$required." $required value=\"\" placeholder=\"".$self_field['tip']."\"/></td></tr>";
       return $htmlString;
    }

}

到此好像就完成了。
test

提交的資料

存入了資料庫

至於文章編輯的時候，就是先把自定義的html生成，而且把value也生成在裡面即可。

以上就是我的一些想法，寫得不好 ，還望各位大神指點。