1

src/pages/customer/components/clueRule.vue

+<template>
+    <div class="q-pa-md">
+        <div class="q-gutter-lg">
+            <q-radio v-model="ClueType" :val="1" label="自动分配"></q-radio>
+            <q-radio v-model="ClueType" :val="2" label="手动分配"></q-radio>
+        </div>
+        <div class="q-pa-md" v-if="ClueType === 1">
+            <table class="payTable">
+                <thead>
+                    <tr>
+                        <th>查询类型</th>
+                        <th>是否默认</th>
+                        <th>部门列表</th>
+                        <th>人员列表</th>
+                        <th>分配方式</th>
+                        <th>条件列表</th>
+                        <th>条件描述</th>
+                        <th>排序</th>
+                        <th width="4%"></th>
+                    </tr>
+                </thead>
+                <!-- <tr v-if="data && data.length == 0">
+                    <td :colspan="8" align="center">暂无数据</td>
+                </tr> -->
+                <draggable v-model="data" tag="tbody" item-key="Id" @update="datadragEnd">
+                    <template #item="{ element }">
+                        <tr>
+                            <td>
+                                <span v-if="element.RuleSelectType === 1">并且</span>
+                                <span v-if="element.RuleSelectType === 2">或者</span>
+                            </td>
+                            <td>
+                                <span v-if="element.IsDefault == 1">是</span>
+                                <span v-else>否</span>
+                            </td>
+                            <td>
+                                <span>{{ element.DeptList.join(',') }}</span>
+                            </td>
+                            <td>
+                                <span>{{ element.EmpList.join(',') }}</span>
+                            </td>
+                            <td>
+                                <span v-if="element.RuleAllotWay === 1">依次轮流</span>
+                                <span v-if="element.RuleAllotWay === 2">随机分配</span>
+                            </td>
+                            <td>
+                                <span>{{ element.ConditionList.join(',') }}</span>
+                            </td>
+                            <td>
+                                <span>{{ element.ConditionStrList.join(',') }}</span>
+                            </td>
+                            <td>
+                                <span>{{ element.Sort }}</span>
+                            </td>
+
+                            <td>
+                                <i class="iconfont icon-left" style="font-size: 14px;color: #777;"></i>
+                            </td>
+                        </tr>
+                    </template>
+                </draggable>
+            </table>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue'
+import draggable from "vuedraggable";
+import customerService from '@/api/customer';
+export default defineComponent({
+    component: {
+        draggable
+    },
+    setup() {
+        let data = ref([{
+            Id: 1,
+            RuleSelectType: 1,
+            IsDefault:1,
+            DeptList:[],
+            EmpList:[],
+            RuleAllotWay:1,
+            ConditionList:[],
+            ConditionStrList:[],
+            Sort:1
+        }])
+        const datadragEnd = (e: any) => {
+            console.log('拖动结束', e)
+        }
+        const getClueList = () => {
+            customerService.getCustomerClueRuleList({}).then(res => {
+                data.value = res.data.Data
+                console.log(59, data)
+            })
+        }
+        onMounted(() => {
+            getClueList();
+        })
+        return {
+            ClueType: ref(1),
+            data,
+            // columns,
+            datadragEnd
+        }
+    }
+})
+</script>
+<style>
+.payTable {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.payTable tr th {
+    background: #fff;
+    height: 40px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #2d2d2d;
+    background: #dddee0;
+}
+
+.payTable tr {
+    background: #fff;
+    text-align: center;
+    height: 40px;
+}
+
+.payTable tr td {
+    font-size: 13px;
+    text-align: center;
+    color: #2d2d2d;
+    padding: 10px 0;
+    font-weight: bold;
+    border-bottom: 1px solid #e5e5e5;
+}
+</style>
\ No newline at end of file