@tongfun/tf-widget 0.1.7 → 0.1.11

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

@@ -0,0 +1,396 @@
+<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>

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

@@ -0,0 +1,120 @@
+<template>
+  <div class="t-table">
+    <!-- 表格分组 -->
+    <div v-if="enableGroup" class="t-table-left">
+      <TableGroup @groupChange="$emit('groupChange', $event)" />
+    </div>
+
+    <!-- 表格记录 -->
+    <div class="t-table-right">
+      <TableRecords
+        :layout="layout"
+        :is-selector="isSelector"
+        :sum="sum"
+        :disable-sum="disableSum"
+        :data="data"
+        :update-in-dialog="updateInDialog"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="$emit('size-change', $event)"
+        @current-change="$emit('current-change', $event)"
+        @condition-change="$emit('condition-change', $event)"
+        @dbClick="$emit('dbClick', $event)"
+        @dbRowClick="$emit('dbRowClick',$event)"
+        @fastConfirm="$emit('fastConfirm',$event)"
+      />
+    </div>
+
+  </div>
+</template>
+<script>
+import TableGroup from './table-group.vue'
+import TableRecords from './table-records.vue'
+export default {
+  components: {
+    TableGroup, TableRecords
+  },
+  props: {
+    // 表格的布局
+    layout: {
+      type: Array,
+      default: null
+    },
+    enableGroup: {
+      type: Boolean,
+      default: false
+    },
+    // 分组是否可以编辑，再基础资料的弹窗中，分组不可以被编辑
+    enableGroupEdit: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否是选择器（弹窗）
+     */
+    isSelector: {
+      type: Boolean,
+      default: false
+    },
+    // 表格的合计
+    sum: {
+      type: Array,
+      default: () => []
+    },
+    // 表格的数据，包含了records属性和total属性
+    data: {
+      type: Object,
+      default: null
+    },
+    pageSize: {
+      type: Number,
+      default: 100
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    updateInDialog: {
+      type: Boolean,
+      default: false
+    },
+    disableSum: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  provide () {
+    return {
+      enableGroupEdit: this.enableGroupEdit
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+  .t-table {
+    height:100%;
+    display: flex;
+
+    .t-table-left{
+      width:300px;
+      // min-width: 290px;
+      height: 100%;
+      .table-group{
+        height: 100%;
+      }
+    }
+
+    .t-table-right{
+      flex: 1;
+      // width:100%;
+      min-width: 500px;
+    }
+  }
+
+</style>