some change....

BoBoooooo · Nov 15, 2018 · 49ba04f · 49ba04f
1 parent 420c1b6
commit 49ba04f
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 73 deletions.
diff --git a/src/components/FormDesigner/Container.vue b/src/components/FormDesigner/Container.vue
@@ -15,6 +15,65 @@
         <el-button type="text" size="medium" icon="el-icon-view" @click="handlePreview">预览</el-button>
         <el-button type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
   </div>
+
+
+
+    <cus-dialog
+      :visible="previewVisible"
+      @on-close="previewVisible = false"
+      ref="widgetPreview"
+      @on-submit="handleTest"
+      width="1000px"
+      form
+    >
+      <generate-form v-if="previewVisible" :data="widgetForm" :remote="remoteFuncs" :value="widgetModels" ref="generateForm">
+
+        <template slot="blank" slot-scope="scope">
+          宽度：<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
+          高度：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
+        </template>
+      </generate-form>
+    </cus-dialog>
+
+    <cus-dialog
+      :visible="jsonVisible"
+      @on-close="jsonVisible = false"
+      ref="jsonPreview"
+      width="800px"
+      form
+    >
+      <div id="jsoneditor" style="height: 400px;width: 100%;">{{jsonTemplate}}</div>
+
+      <template slot="action">
+        <el-button id="copybtn" data-clipboard-target=".ace_text-input">双击复制</el-button>
+      </template>
+    </cus-dialog>
+
+    <cus-dialog
+      :visible="codeVisible"
+      @on-close="codeVisible = false"
+      ref="codePreview"
+      width="800px"
+      form
+      :action="false"
+    >
+      <div id="codeeditor" style="height: 500px; width: 100%;">{{htmlTemplate}}</div>
+    </cus-dialog>
+
+
+     <el-dialog title="选择表单"  :visible.sync="dialogFormVisible" >
+     <el-select v-model="selectform" placeholder="请选择">
+    <el-option
+ v-for="(item, index) in tablelist"
+ :key="index"
+      :label="item.table_name"
+      :value="item.table_name">
+    </el-option>
+  </el-select>
+
+  <el-button @click="select">选择</el-button>
+  </el-dialog>
+
    </el-header>
 
   <el-container v-show="configTab=='formcontainer'||configTab=='form'||configTab=='widget'">
@@ -95,62 +154,6 @@
 
     </el-aside>
 
-    <cus-dialog
-      :visible="previewVisible"
-      @on-close="previewVisible = false"
-      ref="widgetPreview"
-      @on-submit="handleTest"
-      width="1000px"
-      form
-    >
-      <generate-form v-if="previewVisible" :data="widgetForm" :remote="remoteFuncs" :value="widgetModels" ref="generateForm">
-
-        <template slot="blank" slot-scope="scope">
-          宽度：<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
-          高度：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
-        </template>
-      </generate-form>
-    </cus-dialog>
-
-    <cus-dialog
-      :visible="jsonVisible"
-      @on-close="jsonVisible = false"
-      ref="jsonPreview"
-      width="800px"
-      form
-    >
-      <div id="jsoneditor" style="height: 400px;width: 100%;">{{jsonTemplate}}</div>
-
-      <template slot="action">
-        <el-button id="copybtn" data-clipboard-target=".ace_text-input">双击复制</el-button>
-      </template>
-    </cus-dialog>
-
-    <cus-dialog
-      :visible="codeVisible"
-      @on-close="codeVisible = false"
-      ref="codePreview"
-      width="800px"
-      form
-      :action="false"
-    >
-      <div id="codeeditor" style="height: 500px; width: 100%;">{{htmlTemplate}}</div>
-    </cus-dialog>
-
-
-     <el-dialog title="选择表单"  :visible.sync="dialogFormVisible" >
-     <el-select v-model="selectform" placeholder="请选择">
-    <el-option
- v-for="(item, index) in tablelist"
- :key="index"
-      :label="item.table_name"
-      :value="item.table_name">
-    </el-option>
-  </el-select>
-
-  <el-button @click="select">选择</el-button>
-  </el-dialog>
-
 </el-container>
 
 
@@ -159,7 +162,7 @@
   <el-container v-show="configTab=='listcontainer'">
 
 
-          <list-config  :allList="widgetForm.config.columnList" :tablename="selectform"></list-config>
+          <list-config  :config="widgetForm.config" :tablename="selectform"></list-config>
 
   </el-container>
 

diff --git a/src/components/FormDesigner/ListConfig.vue b/src/components/FormDesigner/ListConfig.vue
@@ -4,17 +4,19 @@
 
 <el-form   ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
 
-  <el-form-item
-    v-for="(item, index) in allList"
+   <draggable v-model="config.columnList" :options = "{animation:500}">
+            <transition-group>
+                <el-form-item
+    v-for="(item, index) in config.columnList"
     :key="index"
   >
 
       <el-select v-model="item.key" class="inline" placeholder="选择字段名">
-        <option
-         v-for="(item, index) in selectList"
+        <el-option
+         v-for="(subitem, index) in selectList"
              :key="index"
-:label="item.label" :value="item.value"
-        ></option>
+:label="subitem.COLUMN_NAME" :value="subitem.COLUMN_NAME"
+        ></el-option>
       </el-select>
 
       <el-input v-model="item.label" class="inline" placeholder="输入列标题"></el-input>
@@ -23,28 +25,40 @@
     <el-button @click.prevent="removeDomain(item)" circle icon="el-icon-minus"  class="inline_button"></el-button>
 
   </el-form-item>
+            </transition-group>
+    </draggable>
+
+
   <el-form-item>
-    <el-button @click="addDomain" circle icon="el-icon-plus"></el-button>
+    <el-button style="text-align:center" @click="addDomain" circle icon="el-icon-plus"></el-button>
   </el-form-item>
 </el-form>
 </template>
 
 <script>
+import Draggable from 'vuedraggable'
 import { getKeyBytableName } from "@/api/system/form";
 export default {
   data() {
     return {
-      selectList: []
+      selectList: [],
+      finalList:[]
     };
   },
-  props: ["tablename", "allList"],
+  components:{
+    Draggable
+  },
+
+  props: ["tablename", "config"],
   watch: {
     tablename: {
       immediate: true,
       handler(val) {
-        console.log(222);
-        getKeyBytableName(response => {
-          this.selectList = response.list;
+        getKeyBytableName(this.tablename).then(response => {
+          this.selectList = response.data;
+          this.selectList.forEach(item=>{
+            item["COLUMN_NAME"]=item["COLUMN_NAME"].toLowerCase()
+          })
         });
       }
     }
@@ -59,8 +73,7 @@ export default {
     addDomain() {
       this.allList.push({
         label: "",
-        key: "",
-        value: ""
+        key: ""
       });
     }
   }
@@ -74,4 +87,8 @@ export default {
 .inline_button {
   float: left;
 }
+
+form{
+  width:100%
+}
 </style>
diff --git a/src/views/Archive/person_edit.vue b/src/views/Archive/person_edit.vue
@@ -8,7 +8,7 @@
   </el-col>
   <el-col :span="22">
  <el-select v-model="listQuery.SearchKey"  placeholder="请选择"  style="float:left;width:20%">
-      <el-option v-for="(item,index) in jsonData.config.columnList" :label="item.label" :value="item.value" :key="index"></el-option>
+      <el-option v-for="(item,index) in jsonData.config.columnList" :label="item.label" :value="item.key" :key="index"></el-option>
 
   </el-select>
        <el-input ref="test_input" @keyup.enter.native="Refresh" placeholder="请输入" v-model="listQuery.SearchValue" style="float:left;width:80%">
@@ -30,7 +30,7 @@
 
 
     <el-table :default-sort="{prop: 'name', order: 'descending'}" :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column  v-for="(item,index) in jsonData.config.columnList"  :key="index" :label="item.label" :prop="item.value" sortable align="center">
+      <el-table-column  v-for="(item,index) in jsonData.config.columnList"  :key="index" :label="item.label" :prop="item.key" sortable align="center">
       </el-table-column>
       <el-table-column label="操作" align="center" min-width="110px">
         <template slot-scope="scope">