@tongfun/tf-widget 0.1.18 → 0.1.22

package/package/t-data-list/src/t-plan/index.vue

@@ -1,190 +1,195 @@
-<template>
-  <div class="t-plan">
-    <!-- 展开关闭方案详情的按钮 -->
-    <div
-      :class="['plan-expanser',showExpanse?'expanse-active':'']"
-      @mouseup.stop="showExpanse = !showExpanse"
-    >
-      <span>{{ showExpanse ? '收起方案' : '展开方案' }}</span>
-      <i :class="[showExpanse? 'el-icon-arrow-up':'el-icon-arrow-down']" />
-    </div>
-
-    <!-- 过滤方案列表 -->
-    <div class="plan-list">
-      <span class="title">过滤方案:</span>
-      <draggble v-model="planList" class="draggble-wraper" @start="handleStart" @end="handleEnd">
-        <div
-          v-for="plan in planList"
-          :key="plan.id"
-          :class="['plan-item',isActive(plan.id)?'plan-active':'']"
-          @click="handlePlanClick(plan.id)"
-        >
-          <span>{{ plan.name }}</span>
-        </div>
-      </draggble>
-    </div>
-
-    <!-- 当先选中的方案详情 -->
-    <planContent
-      ref="planContentRef"
-      :visible.sync="showExpanse"
-      :plan-names="planNameList"
-      :content="currentPlan"
-      @listChange="handleListChange"
-      @change="handleChange"
-    />
-  </div>
-</template>
-<script>
-import draggble from 'vuedraggable'
-import planContent from './plan-content.vue'
-import { getFilterPlan } from '@/api/tableV3.js'
-export default {
-  components: {
-    draggble, planContent
-  },
-  props: {
-    // 表的布局，作为高级过滤的字段可选项目
-    fieldsOption: {
-      type: Array,
-      default: null
-    }
-  },
-  data () {
-    return {
-      showExpanse: false,
-      currentPlanId: '',
-      planList: []
-    }
-  },
-  computed: {
-    // 目前所有方案列表的内容，用来在新增方案的时候你，进行判断相同名称的方案是否已经存在
-    planNameList () {
-      const planNameList = []
-      for (const plan of this.planList) {
-        planNameList.push(plan.name)
-      }
-      return planNameList
-    },
-    // 计算是否使用激活状态下的样式
-    isActive () {
-      return function (planId) {
-        return this.currentPlanId === planId
-      }
-    },
-    currentPlan () {
-      const emptyContent = {
-        name: '',
-        schemeUsefulList: [],
-        contentsList: []
-      }
-      return this.planList.find(item => item.id === this.currentPlanId) || emptyContent
-    }
-  },
-  provide () {
-    return {
-      getFieldsOption: () => this.fieldsOption
-    }
-  },
-  inject: ['target'],
-  created () {
-    this.getFilterPlan()
-  },
-  methods: {
-    /**
-     * 获取方案列表
-     * 并切换到指定方案（选中状态）
-     */
-    async getFilterPlan (selectId) {
-      const res = await getFilterPlan(this.target)
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-      this.planList = res.data
-      this.currentPlanId = selectId || this.planList.find(item => item.isDefault).id
-      !selectId && this.$refs.planContentRef.$emit('doSearch')
-    },
-
-    /**
-     * 方案被添加或者删除，导致方案数量发生了变化
-     */
-    handleListChange (planId) {
-      this.getFilterPlan(planId)
-    },
-
-    /**
-     * 方案被点击切换方法并查询数据
-     */
-    handlePlanClick (planId) {
-      if (this.currentPlanId === planId) {
-        return
-      }
-      this.currentPlanId = planId
-      this.$refs.planContentRef.$emit('doSearch')
-    },
-
-    /**
-     *
-     */
-    handleChange (condition) {
-      this.$emit('change', condition)
-    },
-    /**
-     * 方案列表的拖动
-     */
-    handleStart () {
-
-    },
-    handleEnd () {
-
-    }
-  }
-}
-</script>
-
-<style scoped lang='less'>
-  .t-plan {
-    position:relative;
-    margin:1vh 0;
-    padding-bottom:5px;
-    display:flex;
-
-    .plan-expanser{
-      cursor: pointer;
-      user-select:none;
-      margin-right:10px;
-      color:#0a5295;
-      span {
-        font-size:15px;
-      }
-    }
-    .expanse-active {
-      // background-color: #f6f7f9;
-      color:black;
-      // border:1px solid gray;
-      border-bottom:none;
-      // box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2);
-    }
-
-    .plan-list {
-      display:flex;
-      font-size: 15px;
-      .title {
-        margin-right:10px;
-      }
-
-      .draggble-wraper {
-        display:flex;
-        .plan-item{
-          cursor: pointer;
-          margin-right:7px;
-        }
-        .plan-active {
-          color:#0a5295;
-        }
-      }
-
-    }
-  }
-
-</style>
+<template>
+  <div class="t-plan">
+    <!-- 展开关闭方案详情的按钮 -->
+    <div
+      :class="['plan-expanser',showExpanse?'expanse-active':'']"
+      @mouseup.stop="showExpanse = !showExpanse"
+    >
+      <span>{{ showExpanse ? '收起方案' : '展开方案' }}</span>
+      <i :class="[showExpanse? 'el-icon-arrow-up':'el-icon-arrow-down']" />
+    </div>
+
+    <!-- 过滤方案列表 -->
+    <div class="plan-list">
+      <span class="title">过滤方案:</span>
+      <draggble v-model="planList" class="draggble-wraper" @start="handleStart" @end="handleEnd">
+        <div
+          v-for="plan in planList"
+          :key="plan.id"
+          :class="['plan-item',isActive(plan.id)?'plan-active':'']"
+          @click="handlePlanClick(plan.id)"
+        >
+          <span>{{ plan.name }}</span>
+        </div>
+      </draggble>
+    </div>
+
+    <!-- 当先选中的方案详情 -->
+    <planContent
+      ref="planContentRef"
+      :visible.sync="showExpanse"
+      :plan-names="planNameList"
+      :content="currentPlan"
+      @listChange="getFilterPlan"
+      @change="$emit('change',$event)"
+    />
+  </div>
+</template>
+<script>
+import draggble from 'vuedraggable'
+import planContent from './plan-content.vue'
+import { getFilterPlan } from '@/api/tableV3.js'
+export default {
+  components: {
+    draggble, planContent
+  },
+  props: {
+    // 表的布局，作为高级过滤的字段可选项目
+    fieldsOption: {
+      type: Array,
+      default: null
+    }
+  },
+  data () {
+    return {
+      showExpanse: false,
+      currentPlanId: '',
+      planList: []
+    }
+  },
+  computed: {
+    // 目前所有方案列表的内容，用来在新增方案的时候你，进行判断相同名称的方案是否已经存在
+    planNameList () {
+      const planNameList = []
+      for (const plan of this.planList) {
+        planNameList.push(plan.name)
+      }
+      return planNameList
+    },
+    // 计算是否使用激活状态下的样式
+    isActive () {
+      return function (planId) {
+        return this.currentPlanId === planId
+      }
+    },
+    currentPlan () {
+      const emptyContent = {
+        name: '',
+        schemeUsefulList: [],
+        contentsList: []
+      }
+      return this.planList.find(item => item.id === this.currentPlanId) || emptyContent
+    }
+  },
+  provide () {
+    return {
+      getFieldsOption: () => this.fieldsOption
+    }
+  },
+  inject: ['target'],
+  created () {
+    this.getFilterPlan()
+  },
+  methods: {
+    /**
+     * 获取方案列表
+     * 并切换到指定方案（为选中状态）
+     */
+    async getFilterPlan (selectId) {
+      const res = await getFilterPlan(this.target)
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.planList = res.data
+      this.currentPlanId = selectId || this.planList.find(item => item.isDefault).id
+    },
+
+    /**
+     * 方案被添加或者删除，导致方案数量发生了变化
+     */
+    handleListChange (planId) {
+      this.getFilterPlan(planId)
+    },
+
+    /**
+     * 将方案重置到默认方案
+     */
+    resetToDefaultPlan () {
+      const defaultPlanContent = this.planList.find(item => item.isDefault)
+      const defaultPlanId = defaultPlanContent?.id
+      if (this.currentPlanId === defaultPlanId) {
+        return this.$refs.planContentRef.loadPlanContent(defaultPlanContent, true)
+      }
+      this.currentPlanId = defaultPlanId
+    },
+
+    /**
+     * 方案被点击切换方法并查询数据
+     */
+    handlePlanClick (planId) {
+      if (this.currentPlanId === planId) {
+        return
+      }
+      this.currentPlanId = planId
+      // this.$refs.planContentRef.$emit('doSearch')
+    },
+
+    /**
+     * 方案列表的拖动
+     */
+    handleStart () {
+
+    },
+    handleEnd () {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .t-plan {
+    position:relative;
+    margin:1vh 0;
+    padding-bottom:5px;
+    display:flex;
+
+    .plan-expanser{
+      cursor: pointer;
+      user-select:none;
+      margin-right:10px;
+      color:#0a5295;
+      span {
+        font-size:15px;
+      }
+    }
+    .expanse-active {
+      // background-color: #f6f7f9;
+      color:black;
+      // border:1px solid gray;
+      border-bottom:none;
+      // box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.2);
+    }
+
+    .plan-list {
+      display:flex;
+      font-size: 15px;
+      .title {
+        margin-right:10px;
+      }
+
+      .draggble-wraper {
+        display:flex;
+        .plan-item{
+          cursor: pointer;
+          margin-right:7px;
+        }
+        .plan-active {
+          color:#0a5295;
+        }
+      }
+
+    }
+  }
+
+</style>