vue2-client 1.2.70 → 1.2.73

package/src/base-client/components/common/CitySelect/index.md

@@ -1,109 +1,109 @@
-# 省市区修改组件
-
-> 下拉框数据从库里查询 divisions_of_china 表
-> 省市区数据存储格式
-
-+---------+-----+------------+--------+--------+----------+
-|code     |name |provinceCode|cityCode|areaCode|parentCode|
-+---------+-----+------------+--------+--------+----------+
-|11       |北京市  |NULL        |NULL    |NULL    |NULL      |
-|1101     |市辖区  |11          |NULL    |NULL    |11        |
-|110101   |东城区  |11          |1101    |NULL    |1101      |
-|110101001|东华门街道|11          |1101    |110101  |1101     |
-|110101002|景山街道 |11          |1101    |110101  |1101      |
-+---------+-----+------------+--------+--------+----------+
-
-
-查询出来之后转成tree 作为数据 (截取了一段数据)
-
-```json
-[
-    {
-        "code": "11",
-        "name": "北京",
-        "label": "北京",
-        "value": "北京",
-        "children":
-        [
-            {
-                "code": "1101",
-                "parentcode": "11",
-                "name": "辖区",
-                "label": "辖区",
-                "value": "辖区",
-                "children":
-                [
-                  {
-                    "code": "110101",
-                    "parentcode": "1101",
-                    "name": "东城区",
-                    "label": "东城区",
-                    "value": "东城区"
-                  }
-                ]}]}]
-```
-
-可传递参数
-```js
-props = {
-    // 页面渲染内容  默认 省市区街道 四个 所以是4
-    contexts: {
-      type: Number,
-      default: 3
-    },
-    placeholder: {
-      type: String,
-      default: '请选择省市区'
-    },
-    // small lage 输入框大小
-    size: {
-      type: String,
-      default: undefined
-    },
-    // 类型 simple / undefined
-    // simple 就是用的 cascader  不穿就是用的 自己封装的
-    type: {
-      type: String,
-      default: undefined
-    },
-    // 框的样式
-    inputStyle: {
-      type: Object,
-      default: () => {
-      }
-    },
-    // 下拉框的样式
-    dropdownStyle: {
-      type: Object,
-      default: () => {
-        return {
-          width: '35rem',
-          padding: '1%'
-        }
-      }
-    },
-    // 标签的样式
-    tagStyle: {
-      type: Object,
-      default: () => {
-        return {
-          fontSize: '0.88rem',
-          width: '23%',
-          textAlign: 'left',
-          margin: '0.5%',
-          cursor: 'pointer'
-        }
-      }
-    },
-    // 用于v-model 绑定
-    value: {
-      type: String,
-      default: undefined
-    },
-    // 用于v-model 绑定 code :最后一级的code  address: 所有级拼接的地址
-    valueType: {
-      type: String,
-      default: 'address'
-    }
-  }
-```
+# 省市区修改组件
+
+> 下拉框数据从库里查询 divisions_of_china 表
+> 省市区数据存储格式
+
++---------+-----+------------+--------+--------+----------+
+|code     |name |provinceCode|cityCode|areaCode|parentCode|
++---------+-----+------------+--------+--------+----------+
+|11       |北京市  |NULL        |NULL    |NULL    |NULL      |
+|1101     |市辖区  |11          |NULL    |NULL    |11        |
+|110101   |东城区  |11          |1101    |NULL    |1101      |
+|110101001|东华门街道|11          |1101    |110101  |1101     |
+|110101002|景山街道 |11          |1101    |110101  |1101      |
++---------+-----+------------+--------+--------+----------+
+
+
+查询出来之后转成tree 作为数据 (截取了一段数据)
+
+```json
+[
+    {
+        "code": "11",
+        "name": "北京",
+        "label": "北京",
+        "value": "北京",
+        "children":
+        [
+            {
+                "code": "1101",
+                "parentcode": "11",
+                "name": "辖区",
+                "label": "辖区",
+                "value": "辖区",
+                "children":
+                [
+                  {
+                    "code": "110101",
+                    "parentcode": "1101",
+                    "name": "东城区",
+                    "label": "东城区",
+                    "value": "东城区"
+                  }
+                ]}]}]
+```
+
+可传递参数
+```js
+props = {
+    // 页面渲染内容  默认 省市区街道 四个 所以是4
+    contexts: {
+      type: Number,
+      default: 3
+    },
+    placeholder: {
+      type: String,
+      default: '请选择省市区'
+    },
+    // small lage 输入框大小
+    size: {
+      type: String,
+      default: undefined
+    },
+    // 类型 simple / undefined
+    // simple 就是用的 cascader  不穿就是用的 自己封装的
+    type: {
+      type: String,
+      default: undefined
+    },
+    // 框的样式
+    inputStyle: {
+      type: Object,
+      default: () => {
+      }
+    },
+    // 下拉框的样式
+    dropdownStyle: {
+      type: Object,
+      default: () => {
+        return {
+          width: '35rem',
+          padding: '1%'
+        }
+      }
+    },
+    // 标签的样式
+    tagStyle: {
+      type: Object,
+      default: () => {
+        return {
+          fontSize: '0.88rem',
+          width: '23%',
+          textAlign: 'left',
+          margin: '0.5%',
+          cursor: 'pointer'
+        }
+      }
+    },
+    // 用于v-model 绑定
+    value: {
+      type: String,
+      default: undefined
+    },
+    // 用于v-model 绑定 code :最后一级的code  address: 所有级拼接的地址
+    valueType: {
+      type: String,
+      default: 'address'
+    }
+  }
+```

package/src/base-client/components/common/CreateQuery/CreateQuery.vue

@@ -64,7 +64,14 @@
           </a-form-model-item>
           <a-form-model-item label="数据字段" prop="column">
             <a-button type="primary" @click="addColumnItem()">增加</a-button>
-            <div v-for="(columnItem, index) in form.column" :key="index">
+            <div
+              v-for="(columnItem, index) in form.column"
+              :key="index"
+              draggable="true"
+              @dragstart="handleDragStart($event, columnItem)"
+              @dragover.prevent="handleDragOver($event, columnItem)"
+              @dragenter="handleDragEnter($event, columnItem)"
+              @dragend="handleDragEnd($event, columnItem)">
               <a-row :gutter="16">
                 <a-col :span="16">
                   <span style="font-weight: bold">{{ columnItem.title }}（{{ columnItem.key }}）</span>
@@ -173,6 +180,8 @@ export default {
         tableName: [{ required: true, message: '请输入查询表名', trigger: 'blur' }],
         orderBy: [{ required: true, message: '请输入排序方式', trigger: 'blur' }]
       },
+      ending: null,
+      dragging: null
     }
   },
   mounted () {
@@ -475,6 +484,37 @@ export default {
           return false
         }
       }
+    },
+    // 拖拽事件
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      if (this.ending.key === this.dragging.key) {
+        return
+      }
+      const newItems = [...this.form.column]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(this.ending)
+      // newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))  替换位置
+      // 挪移位置
+      newItems.splice(src, 1)
+      newItems.splice(dst, 0, this.dragging)
+      this.form.column = newItems
+      this.$nextTick(() => {
+        this.dragging = null
+        this.ending = null
+      })
+    },
+    handleDragOver (e) {
+      // 首先把div变成可以放置的元素，即重写dragenter/dragover
+      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+      e.dataTransfer.dropEffect = 'move'
+    },
+    handleDragEnter (e, item) {
+      // 为需要移动的元素设置dragstart事件
+      e.dataTransfer.effectAllowed = 'move'
+      this.ending = item
     }
   }
 }