change name tiles to section

src/gen/parser.go

@@ -50,6 +50,7 @@ func ParseRangeProperty(rang string) []string {
 	return items
 }
 
+// for Literal only
 func ParseDesc(desc string) (items []string) {
 	desc = strings.TrimSpace(desc)
 	desc = strings.Trim(desc, ",")

src/model/admin.go

@@ -6,7 +6,7 @@ import (
 
 var (
 	CommonPrefix = "zd_"
-	Models = []interface{}{ &Def{}, &Field{} }
+	Models = []interface{}{ &Def{}, &Field{}, &Section{} }
 )
 
 type ReqData struct {

src/model/def.go

@@ -51,7 +51,31 @@ type Field struct {
 
 	Children []*Field `gorm:"-" json:"children"`
 	Froms []*Field `gorm:"-" json:"froms"`
+
+	IsRange bool `gorm:"column:isRange;default:true" json:"isRange"`
+	Sections []Section `gorm:"column:sections;ForeignKey:fieldID" json:"sections"`
 }
 func (*Field) TableName() string {
 	return constant.TablePrefix + "field"
 }
+
+type Section struct {
+	Model
+	FieldID uint   `gorm:"column:fieldID" json:"fieldID"`
+	Type    string `gorm:"column:type;default:scope" json:"type"`
+	Value     string `gorm:"column:value" json:"value"`
+	Ord     int    `gorm:"column:ord;default:1" json:"ord"`
+
+	// for range
+	Start string `gorm:"column:start" json:"start"`
+	End string `gorm:"column:end" json:"end"`
+	Step string `gorm:"column:step;default:1" json:"step"`
+	Repeat string `gorm:"column:repeat;default:1" json:"repeat"`
+	Rand bool `gorm:"column:rand;default:false" json:"rand"`
+
+	// for arr and const
+	Text string `gorm:"-" json:"-"`
+}
+func (*Section) TableName() string {
+	return constant.TablePrefix + "section"
+}

src/server/common.go

@@ -39,3 +39,17 @@ func convertField(data interface{}) (field model.Field) {
 
 	return
 }
+
+func convertSection(data interface{}) (section model.Section) {
+	bytes, _ := json.Marshal(data)
+	json.Unmarshal(bytes, &section)
+
+	return
+}
+
+func convertParams(data interface{}) (mp map[string]string) {
+	bytes, _ := json.Marshal(data)
+	json.Unmarshal(bytes, &mp)
+
+	return
+}

src/server/controller.go

@@ -7,6 +7,7 @@ import (
 	"io"
 	"io/ioutil"
 	"net/http"
+	"strconv"
 )
 
 func AdminHandler(writer http.ResponseWriter, req *http.Request) {
@@ -66,6 +67,28 @@ func AdminHandler(writer http.ResponseWriter, req *http.Request) {
 		var defId int
 		defId, ret.Field, err = defServer.MoveDefField(uint(reqData.Src), uint(reqData.Dist), reqData.Mode)
 		ret.Data, err = defServer.GetDefFieldTree(uint(defId))
+
+
+	} else if reqData.Action == "listDefFieldSection" {
+		ret.Data, err = defServer.ListDefFieldSection(uint(reqData.Id))
+	} else if reqData.Action == "createDefFieldSection" {
+		paramMap := convertParams(reqData.Data)
+		fieldId, _ := strconv.Atoi(paramMap["fieldId"])
+		sectionId, _ := strconv.Atoi(paramMap["sectionId"])
+
+		err = defServer.CreateDefFieldSection(uint(fieldId), uint(sectionId))
+		ret.Data, err = defServer.ListDefFieldSection(uint(fieldId))
+
+	} else if reqData.Action == "updateDefFieldSection" {
+		section := convertSection(reqData.Data)
+		err = defServer.UpdateDefFieldSection(&section)
+
+		ret.Data, err = defServer.ListDefFieldSection(section.FieldID)
+
+	} else if reqData.Action == "removeDefFieldSection" {
+		var fieldId uint
+		fieldId, err = defServer.RemoveDefFieldSection(reqData.Id)
+		ret.Data, err = defServer.ListDefFieldSection(fieldId)
 	}
 
 	if err != nil {

src/server/def/tiles.go

+package defServer
+
+import (
+	"github.com/easysoft/zendata/src/model"
+	"github.com/easysoft/zendata/src/utils/vari"
+)
+
+func ListDefFieldSection(fieldId uint) (sections []*model.Section, err error) {
+	err = vari.GormDB.Where("fieldID=?", fieldId).Find(&sections).Error
+	return
+}
+
+func CreateDefFieldSection(fieldId, sectionsId uint) (err error) {
+	var preSection model.Section
+	err = vari.GormDB.Where("id=?", sectionsId).Find(&preSection).Error
+
+	section := &model.Section{Value: "0-9", FieldID: fieldId, Ord: preSection.Ord + 1}
+	err = vari.GormDB.Create(&section).Error
+	return
+}
+
+func UpdateDefFieldSection(field *model.Section) (err error) {
+	err = vari.GormDB.Save(field).Error
+	return
+}
+
+func RemoveDefFieldSection(sectionId int) (fieldId uint, err error) {
+	var section model.Section
+	err = vari.GormDB.Where("id=?", sectionId).First(&section).Error
+	fieldId = section.FieldID
+
+	err = vari.GormDB.Where("id=?", sectionId).Delete(&model.Section{}).Error
+	return
+}

ui/src/api/manage.js

@@ -102,3 +102,43 @@ export function moveDefField (src, dist, mode) {
     data: data
   })
 }
+
+export function listDefFieldSection (fieldId) {
+  const data = {'action': 'listDefFieldSection', id: fieldId}
+
+  return request({
+    url: api.admin,
+    method: 'post',
+    data: data
+  })
+}
+
+export function createDefFieldSection (fieldId, sectionId) {
+  const data = {'action': 'createDefFieldSection', data: { fieldId: ''+fieldId, sectionId: ''+sectionId}}
+
+  return request({
+    url: api.admin,
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateDefFieldSection (section) {
+  const data = {'action': 'updateDefFieldSection', data: section}
+
+  return request({
+    url: api.admin,
+    method: 'post',
+    data: data
+  })
+}
+
+export function removeDefFieldSection (sectionId) {
+  const data = {'action': 'removeDefFieldSection', id: sectionId}
+
+  return request({
+    url: api.admin,
+    method: 'post',
+    data: data
+  })
+}

ui/src/components/DefDesign.vue

@@ -41,13 +41,12 @@
       </div>
 
       <div class="right" :style="styl">
-        <a-tabs default-active-key="1" @change="onChange">
+        <a-tabs default-active-key="1" @change="onChange" type="card">
           <a-tab-pane key="info" tab="编辑">
             <div v-show="infoVisible">
               <field-info
                   ref="infoComp"
                   :model="fieldModel"
-                  :time="time2"
                   @save="onFieldSave">
               </field-info>
             </div>
@@ -74,10 +73,8 @@
         okText="确认"
         cancelText="取消"
         @ok="removeField"
-        @cancel="cancelRemove"
-    >
+        @cancel="cancelRemove">
       <div>确认删除选中字段及其子字段？</div>
-
     </a-modal>
 
   </div>
@@ -202,6 +199,7 @@ export default {
       getDefField(id).then(res => {
         console.log('getDefField', res)
         this.fieldModel = res.data
+        this.time2 = Date.now() // trigger data refresh
 
         if (this.fieldModel.parentID == 0) {
           this.infoVisible = false
@@ -288,8 +286,6 @@ export default {
       console.log(info, info.dragNode.eventKey, info.node.eventKey, info.dropPosition);
 
       moveDefField(info.dragNode.eventKey, info.node.eventKey, info.dropPosition).then(res => {
-        console.log('dragDefField', res)
-
         this.getOpenKeys(res.data)
         this.treeData = [res.data]
 

ui/src/components/FieldConfig.vue

 <template>
-  <div>
-    CONFIG
+  <div class="panel">
+    <div class="radios">
+      <a-radio-group :value="model.isRange" button-style="solid">
+        <a-radio-button :value="true">
+          区间
+        </a-radio-button>
+        <a-radio-button :value="false">
+          引用
+        </a-radio-button>
+      </a-radio-group>
+      &nbsp;&nbsp;&nbsp;
+      <span class="range">{{model.range}}</span>
+    </div>
+    <div>
+      <a-form-model ref="editForm">
+        <a-row :gutter="cols" class="title">
+          <a-col :span="col">取值</a-col>
+          <a-col :span="col">类型</a-col>
+          <a-col :span="col">操作</a-col>
+        </a-row>
+
+        <a-row v-if="!sections || sections.length == 0" :gutter="cols">
+          <a-col :span="col"></a-col>
+          <a-col :span="col"></a-col>
+          <a-col :span="8">
+            <a class="edit">
+              <a @click="insertSection()" class="edit">添加</a>
+            </a>
+          </a-col>
+        </a-row>
+
+        <a-row v-for="item in sections" :key="item.id" :gutter="cols">
+          <a-col :span="col">
+            <a-form-model-item prop="range" :wrapperCol="wrapperColFull">
+              <a-input v-model="item.value" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="col">
+            <a-form-model-item prop="range" :wrapperCol="wrapperColFull">
+              <a-select v-model="item.type">
+                <a-select-option value="scope">范围</a-select-option>
+                <a-select-option value="arr">数组</a-select-option>
+                <a-select-option value="const">字面常量</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a class="edit">
+              <a @click="insertSection(item)" class="edit">添加</a> |
+              <a @click="editSection(item)" class="edit">编辑</a> |
+              <a @click="removeSection(item)" class="edit">删除</a>
+            </a>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </div>
+
+    <a-modal
+        :title="editTitle"
+        :width="600"
+        :visible="editSectionVisible"
+        okText="保存"
+        cancelText="取消"
+        @ok="saveSection"
+        @cancel="cancelSection">
+      <div>
+        <div v-if="section.type==='scope'">
+          <a-row :gutter="cols">
+            <a-col :span="cols">
+              <a-form-model-item label="开始" prop="prefix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
+                <a-input v-model="section.start" placeholder="数字或单个字母" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="cols">
+            <a-col :span="cols">
+              <a-form-model-item label="结束" prop="postfix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
+                <a-input v-model="section.end" placeholder="数字或单个字母" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="cols">
+            <a-col :span="cols">
+              <a-form-model-item label="重复次数" prop="prefix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
+                <a-input v-model="section.repeat" :min="1" placeholder="" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="cols">
+            <a-col :span="cols">
+              <a-form-model-item label="随机" prop="prefix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
+                <a-switch v-model="section.rand" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="cols" v-if="!section.rand">
+            <a-col :span="cols">
+              <a-form-model-item label="步长" prop="postfix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
+                <a-input v-model="section.step" placeholder="数字" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </div>
+
+        <div v-if="section.type==='arr'">
+          <a-row :gutter="cols">
+            <a-col :span="cols">
+              <a-form-model-item label="数组" prop="prefix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
+                <a-input v-model="section.text" type="textarea" rows="3" />
+                每行一个值
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </div>
+
+        <div v-if="section.type==='const'">
+          <a-row :gutter="cols">
+            <a-col :span="cols">
+              <a-form-model-item label="字面常量" prop="prefix" :labelCol="labelColFull" :wrapperCol="wrapperColFull">
+                <a-input v-model="section.text" placeholder="" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+    </a-modal>
+
   </div>
 </template>
 
 <script>
-import { getDefField } from "../api/manage";
+import { listDefFieldSection, createDefFieldSection, updateDefFieldSection, removeDefFieldSection } from "../api/manage";
 
 export default {
   name: 'FieldConfigComponent',
   data() {
     return {
+      cols: 24,
+      colsHalf: 12,
+      col: 8,
+      labelColFull: { lg: { span: 4 }, sm: { span: 4 } },
+      labelColHalf: { lg: { span: 8}, sm: { span: 8 } },
+      wrapperColFull: { lg: { span: 18 }, sm: { span: 18 } },
+      wrapperColHalf: { lg: { span: 12 }, sm: { span: 12 } },
+
+      sections: [],
+      section: {},
+      editTitle: '',
+      editSectionVisible: false,
     };
   },
   props: {
@@ -38,21 +175,78 @@ export default {
     console.log('mounted1')
   },
   methods: {
-    save() {
-      console.log('save')
-      this.$emit('ok')
+    loadData () {
+      if (!this.model.id) return
+
+      listDefFieldSection(this.model.id).then(res => {
+        console.log('listDefFieldSection', res)
+        this.sections = res.data
+      })
     },
-    cancel() {
-      console.log('cancel')
-      this.$emit('cancel')
+    insertSection (item) {
+      console.log(item)
+      createDefFieldSection(this.model.id, item?item.id:0).then(res => {
+        console.log('createDefFieldSection', res)
+        this.sections = res.data
+      })
     },
 
-    loadData () {
-      if (!this.model.id) return
+    editSection (item) {
+      console.log(item)
+      if (item.type === 'scope') {
+        this.editTitle = '编辑范围'
+      } else if (item.type === 'arr') {
+        this.editTitle = '编辑数组'
+      } else if (item.type === 'const') {
+        this.editTitle = '编辑字面常量'
+      }
 
-      getDefField(this.model.id).then(res => {
-        console.log('getField', res)
-        this.model = [res.data]
+      this.section = item
+      this.editSectionVisible = true
+    },
+    saveSection() {
+      console.log('saveSection', this.section)
+
+      if (this.section.type === 'scope') {
+        this.section.value = this.section.start + '-' + this.section.end
+
+        if (this.section.rand) {
+          this.section.value += ':R'
+          this.section.step = 0
+        } else if (this.section.step && this.section.step != '' && this.section.step != 1) {
+          this.section.value += ':' + this.section.step
+        }
+
+        if (this.section.repeat && this.section.repeat != '' && this.section.repeat != '1') {
+          this.section.value += '{' + this.section.repeat + '}'
+        }
+
+      } else if (this.section.type === 'arr') {
+        const arr = this.section.text.split('\n')
+        this.section.value = '[' + arr.join(',') + ']'
+
+      } else if (this.section.type === 'const') {
+        this.section.value = '`' + this.section.text + '`'
+      }
+
+      updateDefFieldSection(this.section).then(res => {
+        console.log('updateDefFieldSection', res)
+        this.sections = res.data
+      })
+
+      this.editSectionVisible = false
+    },
+    cancelSection() {
+      console.log('cancelSection')
+      this.editSectionVisible = false
+    },
+
+    removeSection (item) {
+      console.log(item)
+
+      removeDefFieldSection(item.id).then(res => {
+        console.log('removeDefFieldSection', res)
+        this.sections = res.data
       })
     },
   }
@@ -60,5 +254,23 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
+  .panel {
+    padding: 4px 8px;
+    .title {
+      font-weight: bolder;
+      margin-bottom: 5px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #e9f2fb;
+    }
+    .radios {
+      margin-bottom: 12px;
+      .range {
+        display: inline-block;
+        margin-left: 12px;
+      }
+    }
+    .edit {
+      line-height: 32px;
+    }
+  }
 </style>

ui/src/main.js

@@ -33,6 +33,9 @@ import 'ant-design-vue/lib/input-number/style';
 import Switch from "ant-design-vue/lib/switch";
 import 'ant-design-vue/lib/switch/style';
 
+import Radio from "ant-design-vue/lib/radio";
+import 'ant-design-vue/lib/radio/style';
+
 import Table from "ant-design-vue/lib/table";
 import 'ant-design-vue/lib/table/style';
 
@@ -52,6 +55,9 @@ import Row from "ant-design-vue/lib/row";
 import Spin from "ant-design-vue/lib/spin";
 import 'ant-design-vue/lib/spin/style';
 
+import Popover from "ant-design-vue/lib/popover";
+import 'ant-design-vue/lib/popover/style';
+
 import zhCN from './assets/lang/zh-CN'
 import router from "./router"
 
@@ -78,7 +84,9 @@ Vue.use(Row)
 Vue.use(Col)
 Vue.use(InputNumber)
 Vue.use(Switch)
+Vue.use(Radio)
 Vue.use(Spin)
+Vue.use(Popover)
 
 const i18n = new VueI18n({
   locale: 'zh-CN',