@tongfun/tf-widget 0.1.18 → 0.1.22

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

@@ -1,396 +1,389 @@
-<template>
-  <div v-show="visible" v-clickoutside="handleClickOut" class="plan-content">
-    <!--
-       方案详情，包含名称，过滤条件
-     -->
-    <div class="plan-details">
-      <div class="plan-title">
-        <span class="title">方案名称：</span>
-        <el-input v-model="planContent.name" size="mini" />
-        <span class="error">{{ errorMsg }}</span>
-      </div>
-
-      <!-- 常用条件 -->
-      <div class="condition-always">
-        <span class="title">常用条件</span>
-        <el-scrollbar>
-          <ConditionAlwaysItem
-            v-for="item in planContent.schemeUsefulList"
-            :key="item.field"
-            v-model="item.values"
-            :data="item"
-          />
-        </el-scrollbar>
-      </div>
-
-      <!--高级过滤条件 -->
-      <div class="plan-conditions">
-        <span class="title">高级查询</span>
-        <div>
-          <ConditionItem
-            v-for="condition in planContent.contentsList"
-            :key="condition.id"
-            :condition="condition"
-            @remove="removeCondition(condition)"
-          />
-        </div>
-
-        <div class="add-button" @click="addCondition">
-          <i class="el-icon-plus" />
-          <span>添加</span>
-        </div>
-      </div>
-    </div>
-
-    <!--
-      方案操作
-    -->
-    <div class="plan-buttons">
-      <div class="buttons">
-        <el-button type="primary" size="mini" @click="conditionChange">查询</el-button>
-        <el-button type="primary" size="mini" @click="update($event)">保存</el-button>
-        <el-button type="primary" size="mini" @click="add">保存为新方案</el-button>
-        <el-button type="primary" size="mini" :disabled="planContent.isDefault" @click="update($event,true)">保存为默认</el-button>
-        <el-button type="primary" size="mini" @click="deletePlan">删除方案</el-button>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { getAllOverOperatorList } from '../js/operatorEnum'
-import Clickoutside from 'element-ui/src/utils/clickoutside'
-import ConditionItem from './condition-mult-item.vue'
-import ConditionAlwaysItem from './condition-always-item.vue'
-import { addPlan, deletePlan, updatePlan } from '@/api/tableV3.js'
-export default {
-  components: {
-    ConditionItem,
-    ConditionAlwaysItem
-  },
-  directives: { Clickoutside },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    // 方案详情的内容
-    content: {
-      type: Object,
-      default: null
-    },
-    // 当前所有方案的名称
-    planNames: {
-      type: Array,
-      default: null
-    }
-  },
-  data () {
-    return {
-      doSearch: false,
-      errorMsg: '',
-      planContent: {
-        name: '',
-        schemeUsefulList: [],
-        contentsList: []
-      }
-    }
-  },
-  inject: ['target'],
-  watch: {
-    content (newValue) {
-      const contentCopy = JSON.parse(JSON.stringify(newValue))
-      // 后端大佬骗人，高级过滤条件没有值不一定都是空数组,还有可能是null
-      contentCopy.contentsList = contentCopy.contentsList || []
-      // 后端大佬没有给常用默认值的时候，前端自行添加默认值
-      for (const alwaysItem of contentCopy.schemeUsefulList) {
-        if (!alwaysItem.values.length) {
-          alwaysItem.values.push('-1')
-        }
-      }
-
-      this.planContent = contentCopy
-      if (this.doSearch) {
-        this.conditionChange()
-        this.doSearch = false
-      }
-    }
-  },
-  created () {
-    this.$on('doSearch', () => {
-      this.doSearch = true
-    })
-  },
-  methods: {
-    handleClickOut () {
-      if (!this.visible) return
-      this.$emit('update:visible', false)
-    },
-    /**
-     * 添加一个高级过滤条件
-     */
-    addCondition () {
-      const conditionModel = {
-        id: Math.random().toString(36).slice(8),
-        leftBracket: '(',
-        field: '',
-        operator: '',
-        value: '',
-        rightBracket: ')',
-        relation: 'AND',
-        fieldType: '',
-        userSchemeId: this.content.id
-      }
-      this.planContent.contentsList.push(conditionModel)
-    },
-
-    /**
-     * 删除一个高级过滤条件
-     */
-    removeCondition (condition) {
-      const index = this.planContent.contentsList.indexOf(condition)
-      this.planContent.contentsList.splice(index, 1)
-    },
-
-    /**
-     * 条件前端校验
-     * 校验含有空值，以及括号是否闭合
-     */
-    conditionValidate () {
-      const bracketStack = []
-      for (const condition of this.planContent.contentsList) {
-        if (!getAllOverOperatorList().includes(condition.operator) && !condition.value) {
-          this.$message.error('方案中存在没有填写内容的条件')
-          return false
-        }
-
-        bracketStack.push(...condition.leftBracket.split(''))
-        for (let i = 0; i < condition.rightBracket.length; i++) {
-          if (!bracketStack.pop()) {
-            this.$message.error('方案中条件的括号没有闭合')
-            return false
-          }
-        }
-      }
-
-      if (bracketStack.length) {
-        this.$message.error('方案中条件的括号没有闭合')
-        return false
-      }
-
-      return true
-    },
-
-    /**
-     * 搜索按钮的处理函数
-     * 条件已经变更，将变更后的条件发射出去，父组件接受处理后使用新的条件调用接口查询数据
-     */
-    conditionChange () {
-      if (!this.conditionValidate()) {
-        return
-      }
-
-      // 常用条件格式化
-      const conditionAlways = []
-      for (const conditionAlwaysItem of this.planContent.schemeUsefulList) {
-        conditionAlways.push({
-          field: conditionAlwaysItem.field,
-          values: conditionAlwaysItem.values
-        })
-      }
-
-      // 高级过滤条件格式化
-      const conditionMulti = []
-      const getQueryMultiConditonItem = function (sourceMultiItem, index) {
-        const keys = [
-          'leftBracket',
-          'field',
-          'operator',
-          'value',
-          'rightBracket',
-          'relation',
-          'fieldType'
-        ]
-        const res = {}
-        res.sort = index
-        for (const key of keys) {
-          res[key] = sourceMultiItem[key]
-        }
-        return res
-      }
-
-      this.planContent.contentsList.forEach((item, index) => {
-        conditionMulti.push(getQueryMultiConditonItem(item, index))
-      })
-      this.$emit('update:visible', false)
-      this.$emit('change', { conditionAlways, conditionMulti })
-    },
-
-    /**
-     * 方案增改接口数据格式处理
-     * 新增和修改方案的接口数据格式一致，统一将页面数据格式化
-     */
-    paramDataFormat (type, setDefault) {
-      // 处理方案信息
-      const planMsg = {
-        name: this.planContent.name,
-        isDefault: false
-      }
-      if (type === 'update') {
-        planMsg.id = this.planContent.id
-        planMsg.isDefault = typeof setDefault === 'undefined'
-          ? this.planContent.isDefault
-          : setDefault
-      }
-
-      // 处理常用条件的结果
-      const alwaysConditionData = []
-      for (const alwaysItem of this.planContent.schemeUsefulList) {
-        alwaysConditionData.push({
-          field: alwaysItem.field,
-          values: alwaysItem.values
-        })
-      }
-      // 添加高级过滤条件的sort属性
-      const multiConditionData = JSON.parse(JSON.stringify(this.planContent.contentsList))
-      multiConditionData.forEach((item, index) => {
-        item.sort = index
-        item.id = null
-      })
-
-      return {
-        planMsg,
-        conditionAlways: alwaysConditionData,
-        conditionMulti: multiConditionData
-      }
-    },
-
-    /**
-     * 保存按钮和设置为默认方案按钮的处理函数
-     * 方案的修改，和修改为默认方案
-     */
-    async update (event, setDefault) {
-      if (this.planContent.id === '0') {
-        return this.$message.error('缺省方案不能被修改，可以尝试保存为新方案')
-      }
-      if (this.planNames.filter(name => name !== this.planContent.name).includes(this.planContent.name)) {
-        return this.$message.error('该名称已经被其他方案占用')
-      }
-      if (!this.conditionValidate()) {
-        return
-      }
-      const res = await updatePlan(this.target, this.paramDataFormat('update', setDefault))
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-      this.$message.success('修改成功')
-      this.$emit('listChange', this.planContent.id)
-    },
-
-    /**
-     * 保存为新方案的按钮处理函数
-     * 添加一个新的方案
-     */
-    async add () {
-      if (this.planNames.includes(this.planContent.name)) {
-        return this.$message.error('该方案名称已经存在')
-      }
-      if (!this.conditionValidate()) {
-        return
-      }
-      const res = await addPlan(this.target, this.paramDataFormat('insert'))
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-      this.$message.success('保存成功')
-      this.$emit('listChange', res.data)
-    },
-
-    /**
-    * 删除当前方案
-    */
-    async deletePlan () {
-      if (this.planContent.id === '0') {
-        return this.$message.error('缺省方案不允许删除')
-      }
-      const res = await deletePlan(this.target, this.planContent.id)
-      if (res.code !== 0) {
-        return this.$message.error(res.msg)
-      }
-      this.$message.success('删除成功')
-      this.$emit('listChange')
-    }
-  }
-}
-</script>
-
-<style scoped lang='less'>
-  .title {
-    font-size:18px;
-  }
-  .plan-content {
-    position:absolute;
-    top:24px;
-    width:900px;
-    display:flex;
-    background-color: #fff;
-    z-index:9;
-    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.2);
-
-    // 左侧的方案详情
-    .plan-details {
-      padding:20px;
-      flex:6;
-      // background-color: #f6f7f9;
-      background-color: #fff;
-      // .condition-always {
-      //   margin-top:15px;
-      // }
-
-      .condition-always {
-        margin-top:30px;
-        /deep/.el-scrollbar{
-          height: 20vh;
-          .el-scrollbar__wrap{
-            overflow-x: hidden;
-          }
-        }
-      }
-
-      .plan-conditions {
-        .add-button {
-          cursor:pointer;
-          user-select: none;
-          width:50px;
-          // border:1px solid black;
-          span {
-            margin-left:3px;
-          }
-          span:hover {
-            color:#0a5295;
-          }
-        }
-      }
-    }
-
-    // 右侧的操作按钮组
-    .plan-buttons {
-      border-left:1px solid #dddfe6;
-      flex:2;
-
-      .buttons{
-        height:300px;
-        display:flex;
-        flex-direction:column;
-        .el-button {
-          margin:10px 40px;
-          background-color: #055A9D;
-          border:none;
-        }
-        .is-disabled {
-          background-color: #357bc2;
-        }
-      }
-    }
-  }
-
-</style>
+<template>
+  <div v-show="visible" v-clickoutside="handleClickOut" class="plan-content">
+    <!--
+       方案详情，包含名称，过滤条件
+     -->
+    <div class="plan-details">
+      <div class="plan-title">
+        <span class="title">方案名称：</span>
+        <el-input v-model="planContent.name" size="mini" />
+        <span class="error">{{ errorMsg }}</span>
+      </div>
+
+      <!-- 常用条件 -->
+      <div class="condition-always">
+        <span class="title">常用条件</span>
+        <el-scrollbar>
+          <ConditionAlwaysItem
+            v-for="item in planContent.schemeUsefulList"
+            :key="item.field"
+            v-model="item.values"
+            :data="item"
+          />
+        </el-scrollbar>
+      </div>
+
+      <!--高级过滤条件 -->
+      <div class="plan-conditions">
+        <span class="title">高级查询</span>
+        <div>
+          <ConditionItem
+            v-for="condition in planContent.contentsList"
+            :key="condition.id"
+            :condition="condition"
+            @remove="removeCondition(condition)"
+          />
+        </div>
+
+        <div class="add-button" @click="addCondition">
+          <i class="el-icon-plus" />
+          <span>添加</span>
+        </div>
+      </div>
+    </div>
+
+    <!--
+      方案操作
+    -->
+    <div class="plan-buttons">
+      <div class="buttons">
+        <el-button type="primary" size="mini" @click="conditionChange">查询</el-button>
+        <el-button type="primary" size="mini" @click="update($event)">保存</el-button>
+        <el-button type="primary" size="mini" @click="add">保存为新方案</el-button>
+        <el-button type="primary" size="mini" :disabled="planContent.isDefault" @click="update($event,true)">保存为默认</el-button>
+        <el-button type="primary" size="mini" @click="deletePlan">删除方案</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getAllOverOperatorList } from '../js/operatorEnum'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+import ConditionItem from './condition-mult-item.vue'
+import ConditionAlwaysItem from './condition-always-item.vue'
+import { addPlan, deletePlan, updatePlan } from '@/api/tableV3.js'
+export default {
+  components: {
+    ConditionItem,
+    ConditionAlwaysItem
+  },
+  directives: { Clickoutside },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 方案详情的内容
+    content: {
+      type: Object,
+      default: null
+    },
+    // 当前所有方案的名称
+    planNames: {
+      type: Array,
+      default: null
+    }
+  },
+  data () {
+    return {
+      errorMsg: '',
+      planContent: {
+        name: '',
+        schemeUsefulList: [],
+        contentsList: []
+      }
+    }
+  },
+  inject: ['target'],
+  watch: {
+    content (newValue) {
+      this.loadPlanContent(newValue)
+    }
+  },
+  methods: {
+    // 加载一个方案数据，处理方案的数据，并发射条件变更事件
+    loadPlanContent (content, immediate = false) {
+      const contentCopy = JSON.parse(JSON.stringify(content))
+      contentCopy.contentsList = contentCopy.contentsList || []
+      for (const alwaysItem of contentCopy.schemeUsefulList) {
+        if (!alwaysItem.values.length) {
+          alwaysItem.values.push('-1')
+        }
+      }
+      this.planContent = contentCopy
+      this.conditionChange()
+    },
+    // 点击方案内容外侧收起方案详情弹窗
+    handleClickOut () {
+      if (!this.visible) return
+      this.$emit('update:visible', false)
+    },
+    /**
+     * 添加一个高级过滤条件
+     */
+    addCondition () {
+      const conditionModel = {
+        id: Math.random().toString(36).slice(8),
+        leftBracket: '(',
+        field: '',
+        operator: '',
+        value: '',
+        rightBracket: ')',
+        relation: 'AND',
+        fieldType: '',
+        userSchemeId: this.content.id
+      }
+      this.planContent.contentsList.push(conditionModel)
+    },
+
+    /**
+     * 删除一个高级过滤条件
+     */
+    removeCondition (condition) {
+      const index = this.planContent.contentsList.indexOf(condition)
+      this.planContent.contentsList.splice(index, 1)
+    },
+
+    /**
+     * 条件前端校验
+     * 校验含有空值，以及括号是否闭合
+     */
+    conditionValidate () {
+      const bracketStack = []
+      for (const condition of this.planContent.contentsList) {
+        if (!getAllOverOperatorList().includes(condition.operator) && !condition.value) {
+          this.$message.error('方案中存在没有填写内容的条件')
+          return false
+        }
+
+        bracketStack.push(...condition.leftBracket.split(''))
+        for (let i = 0; i < condition.rightBracket.length; i++) {
+          if (!bracketStack.pop()) {
+            this.$message.error('方案中条件的括号没有闭合')
+            return false
+          }
+        }
+      }
+
+      if (bracketStack.length) {
+        this.$message.error('方案中条件的括号没有闭合')
+        return false
+      }
+
+      return true
+    },
+
+    /**
+     * 搜索按钮的处理函数
+     * 条件已经变更，将变更后的条件发射出去，父组件接受处理后使用新的条件调用接口查询数据
+     */
+    conditionChange () {
+      if (!this.conditionValidate()) {
+        return
+      }
+
+      // 常用条件格式化
+      const conditionAlways = []
+      for (const conditionAlwaysItem of this.planContent.schemeUsefulList) {
+        conditionAlways.push({
+          field: conditionAlwaysItem.field,
+          values: conditionAlwaysItem.values
+        })
+      }
+
+      // 高级过滤条件格式化
+      const conditionMulti = []
+      const getQueryMultiConditonItem = function (sourceMultiItem, index) {
+        const keys = [
+          'leftBracket',
+          'field',
+          'operator',
+          'value',
+          'rightBracket',
+          'relation',
+          'fieldType'
+        ]
+        const res = {}
+        res.sort = index
+        for (const key of keys) {
+          res[key] = sourceMultiItem[key]
+        }
+        return res
+      }
+
+      this.planContent.contentsList.forEach((item, index) => {
+        conditionMulti.push(getQueryMultiConditonItem(item, index))
+      })
+      this.$emit('update:visible', false)
+      this.$emit('change', { conditionAlways, conditionMulti })
+    },
+
+    /**
+     * 方案增改接口数据格式处理
+     * 新增和修改方案的接口数据格式一致，统一将页面数据格式化
+     */
+    paramDataFormat (type, setDefault) {
+      // 处理方案信息
+      const planMsg = {
+        name: this.planContent.name,
+        isDefault: false
+      }
+      if (type === 'update') {
+        planMsg.id = this.planContent.id
+        planMsg.isDefault = typeof setDefault === 'undefined'
+          ? this.planContent.isDefault
+          : setDefault
+      }
+
+      // 处理常用条件的结果
+      const alwaysConditionData = []
+      for (const alwaysItem of this.planContent.schemeUsefulList) {
+        alwaysConditionData.push({
+          field: alwaysItem.field,
+          values: alwaysItem.values
+        })
+      }
+      // 添加高级过滤条件的sort属性
+      const multiConditionData = JSON.parse(JSON.stringify(this.planContent.contentsList))
+      multiConditionData.forEach((item, index) => {
+        item.sort = index
+        item.id = null
+      })
+
+      return {
+        planMsg,
+        conditionAlways: alwaysConditionData,
+        conditionMulti: multiConditionData
+      }
+    },
+
+    /**
+     * 保存按钮和设置为默认方案按钮的处理函数
+     * 方案的修改，和修改为默认方案
+     */
+    async update (event, setDefault) {
+      if (this.planContent.id === '0') {
+        return this.$message.error('缺省方案不能被修改，可以尝试保存为新方案')
+      }
+      if (this.planNames.filter(name => name !== this.planContent.name).includes(this.planContent.name)) {
+        return this.$message.error('该名称已经被其他方案占用')
+      }
+      if (!this.conditionValidate()) {
+        return
+      }
+      const res = await updatePlan(this.target, this.paramDataFormat('update', setDefault))
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.$message.success('修改成功')
+      this.$emit('listChange', this.planContent.id)
+    },
+
+    /**
+     * 保存为新方案的按钮处理函数
+     * 添加一个新的方案
+     */
+    async add () {
+      if (this.planNames.includes(this.planContent.name)) {
+        return this.$message.error('该方案名称已经存在')
+      }
+      if (!this.conditionValidate()) {
+        return
+      }
+      const res = await addPlan(this.target, this.paramDataFormat('insert'))
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.$message.success('保存成功')
+      this.$emit('listChange', res.data)
+    },
+
+    /**
+    * 删除当前方案
+    */
+    async deletePlan () {
+      if (this.planContent.id === '0') {
+        return this.$message.error('缺省方案不允许删除')
+      }
+      const res = await deletePlan(this.target, this.planContent.id)
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.$message.success('删除成功')
+      this.$emit('listChange')
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .title {
+    font-size:18px;
+  }
+  .plan-content {
+    position:absolute;
+    top:24px;
+    width:900px;
+    display:flex;
+    background-color: #fff;
+    z-index:9;
+    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.2);
+
+    // 左侧的方案详情
+    .plan-details {
+      padding:20px;
+      flex:6;
+      // background-color: #f6f7f9;
+      background-color: #fff;
+      // .condition-always {
+      //   margin-top:15px;
+      // }
+
+      .condition-always {
+        margin-top:30px;
+        /deep/.el-scrollbar{
+          height: 20vh;
+          .el-scrollbar__wrap{
+            overflow-x: hidden;
+          }
+        }
+      }
+
+      .plan-conditions {
+        .add-button {
+          cursor:pointer;
+          user-select: none;
+          width:50px;
+          // border:1px solid black;
+          span {
+            margin-left:3px;
+          }
+          span:hover {
+            color:#0a5295;
+          }
+        }
+      }
+    }
+
+    // 右侧的操作按钮组
+    .plan-buttons {
+      border-left:1px solid #dddfe6;
+      flex:2;
+
+      .buttons{
+        height:300px;
+        display:flex;
+        flex-direction:column;
+        .el-button {
+          margin:10px 40px;
+          background-color: #055A9D;
+          border:none;
+        }
+        .is-disabled {
+          background-color: #357bc2;
+        }
+      }
+    }
+  }
+
+</style>