借阅统计组组件开发

applications/dee-doc/src/privateComponents/components/BorrowStatisticGroup/dynamicList.vue

+<template>
+  <div class="borrowDynamicList">
+    <dee-as-com
+      ref="dynamicTable"
+      :lay-config="{
+        typeName: 'ExtBorrowingForm',
+        layKey: 'borrowStatisticResult'
+      }"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BorrowDynamicList',
+  components: {},
+  componentName: '借阅统计列表',
+  props: {
+
+  },
+  data() {
+    return {
+      tableColumnsMap: null,
+      emitMethods: [
+        {
+          methods: 'getData',
+          methodsName: '获取数据'
+        }
+      ],
+      leftCheckedProps: [
+        { 'title': '项目', 'key': 'contextName', 'checked': false, propValue: 'dxContextIdIs' },
+        { 'title': '借阅部门', 'key': 'dxBorrowingOrgName', 'checked': false, propValue: 'dxBorrowingOrgIs' },
+        { 'title': '文件类型', 'key': 'fileSubtypeName', 'checked': false, propValue: 'fileSubtypeNameIs' },
+        { 'title': '借阅人', 'key': 'dxBorrowingUserInfoName', 'checked': false, propValue: 'dxBorrowingUserInfoIdIs' },
+        { 'title': '借阅时间', 'key': 'borrowingDate', 'checked': false, propValue: 'borrowingDateIs' }
+      ]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.$bus.$on('borrowStatisticGroupChange', (val) => {
+      this.leftCheckedProps.forEach(prop => {
+        if (val.includes(prop.propValue)) {
+          prop.checked = true
+        } else {
+          prop.checked = false
+        }
+      })
+    })
+  },
+  // 组件方法
+  methods: {
+    getData(val) {
+      this.$nextTick(() => {
+        this.updateTableColumns(this.leftCheckedProps)
+        if (this.$refs.dynamicTable.$refs.asCom && this.$refs.dynamicTable.$refs.asCom.getData) {
+          this.$refs.dynamicTable.$refs.asCom.getData(val)
+        } else {
+          this.basicData = val
+        }
+      })
+    },
+    // 更新表格列
+    updateTableColumns(arrayA) {
+      const targetColumns = this.$refs.dynamicTable.$refs.asCom.showTableColumns
+      const updatedColumns = []
+      // 创建一个Set来跟踪已添加的title，以确保唯一性
+      const titlesAdded = new Set()
+      arrayA.forEach(itemA => {
+        if (itemA.checked) {
+          if (!titlesAdded.has(itemA.title)) {
+            updatedColumns.push({ ...itemA })
+            titlesAdded.add(itemA.title)
+          }
+        }
+      })
+      // 创建一个Map来跟踪数组B中元素的title和它们的索引位置
+      const bTitleMap = new Map()
+      targetColumns.forEach((itemB, index) => {
+        bTitleMap.set(itemB.title, { item: { ...itemB }, index })
+      })
+      targetColumns.forEach(itemB => {
+        const title = itemB.title
+        const itemAInConflict = arrayA.find(itemA => itemA.title === title && !itemA.checked)
+
+        // 如果A中没有与B中当前元素title相同且checked为false的元素，或者title在A中已被添加过（即不在冲突中）
+        // 并且该title还没有被添加到新数组中（处理重复title的情况，保留后面的）
+        if (!itemAInConflict || titlesAdded.has(title) || !bTitleMap.has(title) || (bTitleMap.get(title).index > targetColumns.indexOf(itemB))) {
+        // 检查title是否已添加到新数组中
+          if (!titlesAdded.has(title)) {
+            updatedColumns.push({ ...itemB })
+            titlesAdded.add(title)
+          }
+          bTitleMap.delete(title)
+        }
+      })
+      this.$refs.dynamicTable.$refs.asCom.showTableColumns = updatedColumns
+    }
+  }
+}
+</script>
+
+<style  lang='scss'>
+
+</style>

applications/dee-doc/src/privateComponents/components/BorrowStatisticGroup/index.vue

+<!--
+ * @Author: gjn
+ * @LastEditTime: 2024-11-06 18:36:04
+ * @Description:借阅统计分组条件
+-->
+<template>
+  <div class="BorrowStatisticGroup">
+    <div class="setting-divider">
+      <el-divider content-position="center">分组条件</el-divider>
+    </div>
+    <div class="left-box-tree">
+      <div class="left-box-tree-item">
+        <el-checkbox-group v-model="checkedProps" @change="onPropsChecked">
+          <el-checkbox v-for="(m, $i) in optionalProps" :key="$i" :label="m.value">{{ m.label }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+    <div class="setting-divider">
+      <el-divider content-position="center">查询条件</el-divider>
+    </div>
+    <div>
+      <dee-as-com
+        :lay-config="{
+          typeName: 'ExtBorrowingForm',
+          layKey: 'borrowStatisticQuery'
+        }"
+        @searchEvent="searchEvent"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BorrowStatisticGroup',
+  components: {},
+  componentName: '借阅统计分组条件',
+  props: {},
+  data() {
+    return {
+      optionalProps: [
+        { label: '项目', value: 'dxContextIdIs' },
+        { label: '借阅部门', value: 'dxBorrowingOrgIs' },
+        { label: '文件类型', value: 'fileSubtypeNameIs' },
+        { label: '借阅人', value: 'dxBorrowingUserInfoIdIs' },
+        { label: '年度', value: 'borrowingDateIs' }
+      ],
+      checkedProps: [],
+      evenList: [
+        {
+          even: 'searchEvent',
+          name: '条件点击查询事件'
+        }
+      ]
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  // 组件方法
+  methods: {
+    onPropsChecked(val) {
+      this.checkedProps = val
+    },
+    searchEvent(data) {
+      const resultParams = this.transformItemsToObject(data, this.checkedProps)
+      this.$bus.$emit('borrowStatisticGroupChange', this.checkedProps)
+      this.$emit('searchEvent', resultParams)
+    },
+    transformItemsToObject(filterData, checkedProps) {
+      const result = {}
+      filterData.items.forEach(item => {
+        if (item.fieldName === 'borrowingDate') {
+          result.borrowingDateStart = this.getYearFromDateString(item.value)
+          result.borrowingDateEnd = this.getYearFromDateString(item.value1)
+        } else {
+          result[item.fieldName] = item.value
+        }
+      })
+      checkedProps.forEach(prop => {
+        result[prop] = true
+      })
+      return result
+    },
+    getYearFromDateString(dateStr) {
+      const dateObj = new Date(dateStr)
+      return dateObj.getFullYear()
+    }
+
+  }
+}
+</script>
+
+<style  lang='scss'>
+.BorrowStatisticGroup {
+  padding: 0;
+  .left-box-title {
+    font-weight: 700;
+    font-size: 14px;
+    color: #333333;
+  }
+  .left-box-tree {
+    overflow-y: auto;
+  }
+  .el-checkbox {
+    display: block;
+    margin: 5px 12px;
+  }
+  .setting-divider{
+    padding: 0 10px;
+  }
+}
+</style>