1

src/pages/customer/components/customerField.vue

@@ -16,35 +16,42 @@
             <tr v-if="data && data.length==0">
                 <td :colspan="8" align="center">暂无数据</td>
             </tr>
-            <tr v-for="(item,index) in data" :key="index">
-                <td><span>{{item.Name}}</span></td>
+            <draggable v-model="data" tag="tbody" item-key="Id"  @update="datadragEnd">
+                <template #item="{ element }">
+                    <tr>
+                        <td><span>{{element.Name}}</span></td>
                         <td>
-                    <span v-if="item.IsSystem!=1">{{item.TypeName}}</span>
-                    <span v-if="item.IsSystem==1">系统字段</span>
+                            <span v-if="element.IsSystem!=1">{{element.TypeName}}</span>
+                            <span v-if="element.IsSystem==1">系统字段</span>
                         </td>
-                <td><span>{{item.DeptName}}</span></td>
+                        <td><span>{{element.DeptName}}</span></td>
                         <td>
-                    <q-toggle v-if="item.IsLock==1" v-model="item.Enable" :true-value="1" :false-value="2"
+                            <q-toggle v-if="element.IsLock==1" v-model="element.Enable" :true-value="1" :false-value="2"
                                 icon="lock" disable />
-                    <q-toggle v-else v-model="item.Enable" :true-value="1" :false-value="2" @input="godelete(item,1,index)" />
+                            <q-toggle v-else v-model="element.Enable" :true-value="1" :false-value="2"
+                                @input="godelete(element,1,index)" />
                         </td>
                         <td>
-                    <q-toggle v-model="item.Required" :true-value="1" :false-value="2" @input="godelete(item,2,index)"/>
+                            <q-toggle v-model="element.Required" :true-value="1" :false-value="2"
+                                @input="godelete(element,2,index)" />
                         </td>
                         <td>
-                    <div>{{item.UpdateByName}}</div>
-                    <div>{{item.UpdateTime}}</div>
+                            <div>{{element.UpdateByName}}</div>
+                            <div>{{element.UpdateTime}}</div>
                         </td>
                         <td>
                             <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
-                        label="编辑" @click="goedit(item)" />
-                    <q-btn v-if='item.IsDefault!=1' flat size="xs" icon="delete" color="negative" class="q-mr-xs"
-                        label="删除" @click="godelete(item,3,index)" />
+                                label="编辑" @click="goedit(element)" />
+                            <q-btn v-if='element.IsDefault!=1' flat size="xs" icon="delete" color="negative"
+                                class="q-mr-xs" label="删除" @click="godelete(element,3,index)" />
                         </td>
                         <td>
                             <i class="iconfont icon-weiyi" style="font-size: 14px;color: #777;"></i>
                         </td>
                     </tr>
+                </template>
+            </draggable>
+
         </table>
 
     </div>
@@ -52,8 +59,9 @@
 <script lang="ts">
     import { defineComponent, ref, onMounted } from 'vue'
     import customerService from '@/api/customer'
-
+    import draggable from "vuedraggable";
     export default defineComponent({
+        components: { draggable },
         setup() {
             const data = [{
                 DeptId: 0,
@@ -76,12 +84,62 @@
                 UpdateByName: "管理员",
                 UpdateTime: "2021-09-28 11:06:00",
                 WordNum: 11,
+            }, {
+                DeptId: 0,
+                DeptName: "-",
+                Digits: 0,
+                Enable: 1,
+                Id: 15,
+                InputType: "1",
+                IsDefault: 0,
+                IsLock: 0,
+                IsSystem: 0,
+                Name: "性别",
+                Options: "[\r\n  {\r\n    \"Id\": 1,\r\n    \"Name\": \"男\"\r\n  },\r\n  {\r\n    \"Id\": 2,\r\n    \"Name\": \"女\"\r\n  }\r\n]",
+                OptionsList: [{ Id: 1, Name: "男" }, { Id: 2, Name: "女" }],
+                Required: 1,
+                Sort: 5,
+                Type: 3,
+                TypeName: "单选",
+                UpdateBy: 1,
+                UpdateByName: "管理员",
+                UpdateTime: "2021-09-28 11:08:19",
+                WordNum: 1,
+            },{
+                DeptId: 0,
+                DeptName: "-",
+                Digits: 0,
+                Enable: 1,
+                Id: 13,
+                InputType: "1",
+                IsDefault: 0,
+                IsLock: 0,
+                IsSystem: 0,
+                Name: "性别2",
+                Options: "[\r\n  {\r\n    \"Id\": 1,\r\n    \"Name\": \"男\"\r\n  },\r\n  {\r\n    \"Id\": 2,\r\n    \"Name\": \"女\"\r\n  }\r\n]",
+                OptionsList: [{ Id: 1, Name: "男" }, { Id: 2, Name: "女" }],
+                Required: 1,
+                Sort: 5,
+                Type: 3,
+                TypeName: "单选2",
+                UpdateBy: 1,
+                UpdateByName: "管理员2",
+                UpdateTime: "2021-09-28 11:08:19",
+                WordNum: 1,
             }];
             const changePage = () => {
                 customerService.getCustomerFiledList({ Enable: -1 }).then((res) => {
                     console.log(res)
                 })
 
+            }
+            // const getdata = (e) => {
+            //     console.log(e,'拖动中的元素')
+
+            // }
+            const datadragEnd = () => {
+                console.log('拖动结束')
+
             }
             onMounted(() => {
                 changePage()
@@ -89,7 +147,8 @@
             })
             return {
                 data,
-                changePage
+                changePage,
+                datadragEnd
 
             }
         }