地区选择

application/admin/command/Task.php

@@ -22,10 +22,54 @@ class Task extends Command
       protected function execute(Input $input, Output $output)
       {
             $reg  =  new Region();
-            $list = collection($reg::where('level', '=', 1)->select())->toArray();
+            $list = $reg::where('level', '=', 1)->column('id,name');
+
             $arr = array();
-            foreach ($list as $key => $value) {
-                  $arr[$value['id']] = $reg->where('parent_id', '=', $value['id'])->column('id,name');
+            $i = 0;
+            // $reg::chunk(100, function($rows) use($arr, $i) {
+            //       foreach ($rows as $row)  {
+                      
+            //             $arr[$i]['label'] = $row->name;
+            //             $arr[$i]['value'] = $row->id;
+            //             dump($row);die;
+            //       }
+            //       return false;
+            // });
+
+
+
+         
+            foreach ($list as $key => $item) {
+
+              
+                  $arr[$i]['label'] = $item;
+                  $arr[$i]['value'] = $key;
+                  $list1  =$reg::where('parent_id', '=', $key)->column('id,name');
+                  $j = 0;
+                  foreach ($list1 as $key1 => $item1) {
+                        $arr[$i]['children'][$j]['label'] = $item1;
+                        $arr[$i]['children'][$j]['value'] = $key1;
+                        $list2  =$reg::where('parent_id', '=', $key1)->column('id,name');
+                        $s = 0;
+                       
+                        foreach ($list2 as $key2 => $item2) {
+                              $arr[$i]['children'][$j]['children'][$s]['label'] = $item2;
+                              $arr[$i]['children'][$j]['children'][$s]['value'] = $key2;
+                              $list3  =$reg::where('parent_id', '=', $key2)->column('id,name');
+
+                              $d = 0;
+                              foreach ($list3 as $key3 => $item3) {
+
+                                    $arr[$i]['children'][$j]['children'][$s]['children'][$d]['label'] = $item3;
+                                    $arr[$i]['children'][$j]['children'][$s]['children'][$d]['value'] = $key3;
+
+                                    $d += 1;
+                              }
+                              $s +=1;
+                        }
+                        $j +=1;
+                  }
+                  $i +=1;
             }
 
             file_put_contents('./11.txt', json_encode($arr, JSON_UNESCAPED_UNICODE));

application/admin/controller/product/Lists.php

@@ -23,13 +23,14 @@ class Lists extends Backend
      */
     protected $model = null;
     protected $productArea = null;
+    protected $areaCode = null;
 
     public function _initialize()
     {
         parent::_initialize();
         $this->productArea = new ProductArea;
         $this->model = new \app\common\model\ProductLists;
-
+    
     }
 
 
@@ -70,6 +71,9 @@ class Lists extends Backend
     public function add()
     {
         if (false === $this->request->isPost()) {
+
+        
+            $this->assignconfig('areaCode', []);
             return $this->view->fetch();
         }
         $params = $this->request->post('row/a');
@@ -77,7 +81,6 @@ class Lists extends Backend
             $this->error(__('Parameter %s can not be empty', ''));
         }
         $params = $this->preExcludeFields($params);
-
         if ($this->dataLimit && $this->dataLimitFieldAutoFill) {
             $params[$this->dataLimitField] = $this->auth->id;
         }
@@ -90,16 +93,14 @@ class Lists extends Backend
                 $validate = is_bool($this->modelValidate) ? ($this->modelSceneValidate ? $name . '.add' : $name) : $this->modelValidate;
                 $this->model->validateFailException()->validate($validate);
             }
-            $areaArr = json_decode($params['product_area'], true);
-            if(empty($areaArr)) throw new ValidateException('请添加商品关联地区');
-            if(self::isEqualArea($areaArr) == false) throw new ValidateException('该商品地区存在重复');
-            unset($params['product_area']);
+            $areaArr    = json_decode($params['product_area'], true);
+            $areaArrTxt = json_decode($params['product_area_txt'], true);
+            if(empty($areaArr) || empty($areaArrTxt)) throw new ValidateException('请添加商品关联地区');
+            unset($params['product_area'], $params['product_area_txt']);
+       
             //商品
             $add   = $this->model->create($params);
-            foreach ($areaArr as $row) {
-                $row['product_id'] = $add->id;
-                $result = $this->productArea::create($row);
-            }
+            $result= $this->setEqualArea($add->id, $areaArr, $areaArrTxt);
             Db::commit();
         } catch (ValidateException|PDOException|Exception $e) {
             Db::rollback();
@@ -132,8 +133,23 @@ class Lists extends Backend
         if (false === $this->request->isPost()) {
 
             $area = $this->productArea::where('product_id', $ids)->select();
+            $areaCode = array();
+            $areaTxt = array();
+            foreach ($area as $key =>$item) {
+                if($item->province > 0) $areaCode[$key][0] = $item->province;
+                if($item->city > 0)     $areaCode[$key][1] = $item->city;
+                if($item->area > 0)     $areaCode[$key][2] = $item->area;
+                if($item->county > 0)   $areaCode[$key][3] = $item->county;
+                $areaTxt[]  = [$item->address];
+            }
+
+
+    
+            $areaCode = json_encode($areaCode);
+            $this->assignconfig('areaCode', $areaCode);
             $this->view->assign('row', $row);
-            $this->view->assign('area', json_encode($area, JSON_UNESCAPED_UNICODE) );
+            $this->view->assign('areaTxt', json_encode($areaTxt, JSON_UNESCAPED_UNICODE));
+            $this->view->assign('areaCode', $areaCode);
             return $this->view->fetch();
         }
         $params = $this->request->post('row/a');
@@ -176,22 +192,17 @@ class Lists extends Backend
 
 
     //判断是否存在相同元素
-    private static function isEqualArea(array $areaArr): bool
+    private function setEqualArea(int $product_id,array $areaArr, array $areaArrTxt): bool
     {   
-        $result = array();
-        if(count($areaArr) > 1){
-            foreach ($areaArr as $value) {
-                $value = (array)$value;
-                foreach ($result as $v) {
-                    if ($value['province'] == $v['province'] && 
-                    $value['city'] == $v['city'] && 
-                    $value['area'] == $v['area'] && 
-                     $value['county'] == $v['county']) {
-                        return false;
-                    }
-                }
-                $result[] = $value;
-            }
+        foreach ($areaArr as $key=>$row) 
+        {
+            $arr['product_id']  = $product_id;
+            $arr['province']    = $row[0]??0;
+            $arr['city']        = $row[1]??0 ; 
+            $arr['area']        = $row[2]??0;
+            $arr['county']      = $row[3]??0;
+            $arr['address']     = $areaArrTxt[$key][0];
+            $this->productArea::create($arr);
         }
         return true;
     }

application/admin/view/product/lists/add.html

@@ -1,4 +1,3 @@
-<style>.fieldlist dd ins{width:140px !important;}.fieldlist dd input:first-child{width:140px !important;}</style>
 <form id="add-form"  role="form" data-toggle="validator" method="POST" action="">
     <div class="form-horizontal"> 
     <div class="form-group">
@@ -52,46 +51,25 @@
         </div>
     </div>
    
-    <div class="form-group">
+
+    <div class="form-group" id="app">
         <label class="control-label col-xs-12 col-sm-2">{:__('关联地区')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <div id="handleOne" class="panel-collapse collapse in">
-                <div class="panel-body">
-                      <div class="row">
-                            <table class="table fieldlist" data-template="eventtpl" data-name="row[product_area]" id="second-table">
-                                <tr>
-                                    <td style=""></td>
-                                    <td width="100"></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="4"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('继续添加')}</a></td>
-                                </tr>
-                            </table>
-                            <!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
-                            <textarea name="row[product_area]" class="form-control  products_info hide" cols="30" rows="10"></textarea>
-                            <script id="eventtpl" type="text/html">
-                                <tr class="form-inline">
-                                    <td >
-                                        <div class="form-inline" data-toggle="cxselect" data-rule="required" data-selects="province,city,area,county">
-                                            <select class="province form-control" id="c-province"  name="<%=name%>[<%=index%>][province]" data-url="ajax/area"></select>
-                                            <select class="city form-control" name="<%=name%>[<%=index%>][city]" data-url="ajax/area" data-query-name="province"></select>
-                                            <select class="area form-control" name="<%=name%>[<%=index%>][area]" data-url="ajax/area" data-query-name="city"></select>
-                                            <select class="county form-control" name="<%=name%>[<%=index%>][county]" data-url="ajax/area" data-query-name="county"></select>
-                                            <input type="hidden" name="<%=name%>[<%=index%>][address]" class="form-control" value="1" > 
-                                        </div>
-                                    </td>
-                                    <td>
-                                        <span class="btn btn-sm btn-danger btn-remove" data-key="<%=index%>"><i class="fa fa-times"></i></span>
-                                    </td>
-                                </tr>
-                            </script>
-                        </div>
-                </div>
+            <div class="block">
+                <el-cascader-panel
+                :options="options"
+                :props="{ multiple: true, checkStrictly: true }"
+                v-model="data"
+                @change="handleChange"
+                ref="ca"
+                clearable></el-cascader-panel>
             </div>
-        </div>
+            <input id="c-product_area" class="form-control" name="row[product_area]" type="hidden" value="">
+            <input id="c-product_area_txt" class="form-control" name="row[product_area_txt]" type="hidden" value="">
+        </div>    
     </div>
-       
 
+    
     <div class="form-group">
         <label class="control-label col-xs-12 col-sm-2">{:__('Details')}:</label>
         <div class="col-xs-12 col-sm-8">
@@ -108,3 +86,4 @@
     </div>
 </div>
 </form>
+

application/admin/view/product/lists/edit.html

@@ -51,51 +51,21 @@
             <ul class="row list-inline faupload-preview" id="p-images"></ul>
         </div>
     </div>
-    <div class="form-group">
+    <div class="form-group" id="app">
         <label class="control-label col-xs-12 col-sm-2">{:__('关联地区')}:</label>
         <div class="col-xs-12 col-sm-8">
-            <div id="handleOne" class="panel-collapse collapse in">
-                <div class="panel-body">
-                      <div class="row">
-                            <table class="table fieldlist" data-template="eventtpl" data-name="row[product_area]" id="second-table">
-                                <tr>
-                                    <td style=""></td>
-                                    <td width="100"></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="4"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('继续添加')}</a></td>
-                                </tr>
-                            </table>
-                            <!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
-                            <textarea name="row[product_area]" class="form-control  products_info hide" cols="30" rows="10">{$area}</textarea>
-                            <script id="eventtpl" type="text/html">
-                                <tr class="form-inline">
-                                    <td >
-                                        <div class="form-inline" data-toggle="cxselect" data-rule="required" data-selects="province,city,area,county">
-                                            <select class="province form-control" name="<%=name%>[<%=index%>][province]" data-url="ajax/area">
-                                                <option value="<%=row['province']%>" selected=""></option>
-                                            </select>
-                                            <select class="city form-control" name="<%=name%>[<%=index%>][city]" data-url="ajax/area" data-query-name="province">
-                                                <option value="<%=row['city']%>" selected=""></option>
-                                            </select>
-                                            <select class="area form-control" name="<%=name%>[<%=index%>][area]" data-url="ajax/area" data-query-name="city">
-                                                <option value="<%=row['area']%>" selected=""></option>
-                                            </select>
-                                            <select class="county form-control" name="<%=name%>[<%=index%>][county]" data-url="ajax/area" data-query-name="county">
-                                                <option value="<%=row['county']%>" selected=""></option>
-                                            </select>
-                                            <input type="hidden" name="<%=name%>[<%=index%>][address]" class="form-control" value="<%=row['address']%>" > 
-                                        </div>
-                                    </td>
-                                    <td>
-                                        <span class="btn btn-sm btn-danger btn-remove" data-key="<%=index%>"><i class="fa fa-times"></i></span>
-                                    </td>
-                                </tr>
-                            </script>
-                        </div>
-                </div>
+            <div class="block">
+                <el-cascader-panel
+                :options="options"
+                :props="{ multiple: true, checkStrictly: true }"
+                v-model="data"
+                @change="handleChange"
+                ref="ca"
+                clearable></el-cascader-panel>
+                <input id="c-product_area" class="form-control" name="row[product_area]" type="hidden" value="{$row.details|htmlentities}">
+                <input id="c-product_area_txt" class="form-control" name="row[product_area_txt]" type="hidden" value="{$row.details|htmlentities}">
             </div>
-        </div>
+        </div>    
     </div>
 
     <div class="form-group">

public/api.html

@@ -12,6 +12,7 @@
 
         <!-- Plugin CSS -->
         <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+        
 
         <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
         <!--[if lt IE 9]>

public/assets/js/backend/product/json/area.js

@@ -0,0 +1,49 @@
+export let area= [
+      {
+      value: 1,
+      label: '东南',
+      children: [{
+  value: 2,
+  label: '上海',
+  children: [
+    { value: 3, label: '普陀' },
+    { value: 4, label: '黄埔' },
+    { value: 5, label: '徐汇' }
+  ]
+}, {
+  value: 7,
+  label: '江苏',
+  children: [
+    { value: 8, label: '南京' },
+    { value: 9, label: '苏州' },
+    { value: 10, label: '无锡' }
+  ]
+}, {
+  value: 12,
+  label: '浙江',
+  children: [
+    { value: 13, label: '杭州'},
+    { value: 14, label: '宁波' },
+    { value: 15, label: '嘉兴' }
+  ]
+}]
+},
+{
+value: 17,
+label: '西北',
+children: [{
+  value: 18,
+  label: '陕西',
+  children: [
+    { value: 19, label: '西安' },
+    { value: 20, label: '延安' }
+  ]
+}, {
+  value: 21,
+  label: '新疆维吾尔族自治区',
+  children: [
+    { value: 22, label: '乌鲁木齐' },
+    { value: 23, label: '克拉玛依' }
+  ]
+}]
+}]

public/assets/js/backend/product/lists.js

@@ -1,5 +1,10 @@
-define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'selectpage'], function ($, undefined, Backend, Table, Form, selectPage) {
 
+//public\assets\json\area.js
+//import {area } from "./json/area.js"
+
+define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'area','vue', 'ELEMENT'], function ($, undefined, Backend, Table, Form, Area, Vue, ELEMENT) {
+    ELEMENT.install(Vue)
+    Vue.use(ELEMENT)
     var Controller = {
         index: function () {
             // 初始化表格参数配置
@@ -77,68 +82,38 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'selectpage'], functi
             table.on('post-body.bs.table',function () {
                 $('.btn-editone').data("area",["80%","100%"]);
             });
-
         },
         add: function () {
             Controller.api.bindevent();
-            Controller.api.binfieldlist();
-
-  
-         
         },
         edit: function () {
             Controller.api.bindevent();
-            Controller.api.binfieldlist();
         },
         api: {
             bindevent: function () {
                 Form.api.bindevent($("form[role=form]"));
-            },
-            binfieldlist: function () {
-                $(document).on("fa.event.appendfieldlist",  ".btn-append", function (e, obj) {
-                    //绑定动态下拉组件
-                    Form.events.selectpage(obj);
-                    Form.events.cxselect(obj);
-                    Form.events.citypicker(obj);
-                    
-                });
-                $(document).on('change','.province',function(){
-               
-                    let txt = $(this).find("option:selected").text();
-                    let obj = $(this).parents('.form-inline').find('input')
-                    obj.val(txt)
-                });
-                //城市
-                $(document).on('change','.city',function(){
-                    let txt = $(this).find("option:selected").text();
-                    let obj = $(this).parents('.form-inline').find('input')
-                    if(txt != '请选择'){
-                        var arr = obj.val().split("-");
-                        arr[1] = txt
-                        obj.val(arr.join('-'))
-                    }
-                });
-                //地区
-                $(document).on('change','.area',function(){
-                    let txt = $(this).find("option:selected").text();
-                    let obj = $(this).parents('.form-inline').find('input')
-                    if(txt != '请选择'){
-                        var arr = obj.val().split("-");
-                        arr[2] = txt
-                        obj.val(arr.join('-'))
-                    }
-                });
-                //乡镇
-                $(document).on('change','.county',function(){
-                    let txt = $(this).find("option:selected").text();
-                    let obj = $(this).parents('.form-inline').find('input')
-                    if(txt != '请选择'){
-                        var arr = obj.val().split("-");
-                        arr.splice(3, 1);
-                        arr[3] = txt
-                        obj.val(arr.join('-'))
-                    }
-                });
+                let dataCode = [];
+                if((Config.areaCode).length > 0) dataCode = JSON.parse(Config.areaCode);
+                new Vue({
+                    el: '#app',
+                    data() {
+                        return {
+                            data: dataCode,
+                            props: { multiple: true },
+                            options:area
+                  };
+                },
+                methods:{
+                    handleChange(e){
+                        let txt = this.$refs.ca.getCheckedNodes(),txtArr = Array();
+                        txt.forEach(vv => {
+                            txtArr.push($.makeArray((vv.pathLabels).join('-')) );
+                        });
+                        $('#c-product_area').val(JSON.stringify(this.data))
+                        $('#c-product_area_txt').val(JSON.stringify(txtArr))
+                        
+                    }}
+                })
             },
         }
     };

public/assets/js/require-backend.js

@@ -51,6 +51,9 @@ require.config({
         'selectpage': '../libs/fastadmin-selectpage/selectpage',
         'citypicker': '../libs/fastadmin-citypicker/dist/js/city-picker.min',
         'citypicker-data': '../libs/fastadmin-citypicker/dist/js/city-picker.data',
+        'ELEMENT': '../libs/elementui/elementui',
+        'vue': '../libs/vue/vue',
+        'area': '../libs/area/area',
     },
     // shim依赖配置
     shim: {
@@ -113,7 +116,13 @@ require.config({
         'bootstrap-select-lang': ['bootstrap-select'],
         'jstree': ['css!../libs/jstree/dist/themes/default/style.css'],
         'validator-lang': ['validator'],
-        'citypicker': ['citypicker-data', 'css!../libs/fastadmin-citypicker/dist/css/city-picker.css']
+        'citypicker': ['citypicker-data', 'css!../libs/fastadmin-citypicker/dist/css/city-picker.css'],
+        'ELEMENT': {
+            deps: [
+                'vue',
+                'css!../libs/elementui/elementui.css'
+            ]
+        },
     },
     baseUrl: requirejs.s.contexts._.config.config.site.cdnurl + '/assets/js/', //资源基础路径
     map: {

public/assets/libs/area/area1.js

@@ -0,0 +1,49 @@
+ let area= [
+      {
+      value: 1,
+      label: '东南1',
+      children: [{
+  value: 2,
+  label: '上海',
+  children: [
+    { value: 3, label: '普陀' },
+    { value: 4, label: '黄埔' },
+    { value: 5, label: '徐汇' }
+  ]
+}, {
+  value: 7,
+  label: '江苏',
+  children: [
+    { value: 8, label: '南京' },
+    { value: 9, label: '苏州' },
+    { value: 10, label: '无锡' }
+  ]
+}, {
+  value: 12,
+  label: '浙江',
+  children: [
+    { value: 13, label: '杭州'},
+    { value: 14, label: '宁波' },
+    { value: 15, label: '嘉兴' }
+  ]
+}]
+},
+{
+value: 17,
+label: '西北',
+children: [{
+  value: 18,
+  label: '陕西',
+  children: [
+    { value: 19, label: '西安' },
+    { value: 20, label: '延安' }
+  ]
+}, {
+  value: 21,
+  label: '新疆维吾尔族自治区',
+  children: [
+    { value: 22, label: '乌鲁木齐' },
+    { value: 23, label: '克拉玛依' }
+  ]
+}]
+}]