n20-project-component 1.0.3 → 1.0.5

package/src/components/ProFilterView/index.vue

@@ -0,0 +1,627 @@
+<template>
+  <div class="ProFilterView">
+    <div class="flex-box flex-r flex-v top">
+      <slot name="leftContent"></slot>
+      <div class="flex-box flex-v">
+        <el-popover
+          v-if="bussId"
+          ref="viewPopover"
+          v-model="viewPopoverVisible"
+          popper-class="pro-filter-view-popover"
+          placement="bottom-start"
+          trigger="click"
+          class="m-r-s"
+        >
+          <el-button slot="reference" class="botton" :class="{ activiti: selectedItem !== '无视图' }">
+            <div class="flex-box flex-v m-r">
+              <i class="v3-icon-inbox"></i>
+              <div class="popover-title" style="margin: 0 8px" :title="selectedItem">{{ selectedItem }}</div>
+              <i class="n20-icon-xiala-moren"></i>
+            </div>
+          </el-button>
+          <div class="p-s">
+            <cl-input-search v-model="searchKeyword" class="w-100p" placeholder="请输入关键字" />
+            <div style="color: var(--color-text-secondary); margin: 12px 0 8px 0">{{ $lc('自定义视图') }}</div>
+            <div class="filter-view-wrapper">
+              <cl-drag-list class="flex-item" :list="filteredList" :hide-delete="true" @change="handleDragSort">
+                <template v-slot="{ item }">
+                  <div class="proFilterView-list-item" :class="{ 'is-selected': selectedItem === item.viewName }">
+                    <span class="proFilterView-list-item__name" :title="item.viewName" @click="handleSelect(item)">{{
+                      item.viewName
+                    }}</span>
+                    <i v-if="selectedItem === item.viewName" class="el-icon-check selected-icon"></i>
+                    <el-dropdown
+                      v-if="selectedItem !== item.viewName && item.viewName !== '无视图'"
+                      trigger="click"
+                      class="proFilterView-list-item__more"
+                      @command="command => handleCommand(command, item)"
+                    >
+                      <i class="v3-icon-more"></i>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item command="edit">{{ $lc('编辑') }}</el-dropdown-item>
+                        <el-dropdown-item command="delete">{{ $lc('删除') }}</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </div>
+                </template>
+              </cl-drag-list>
+            </div>
+            <div class="ProFilterView_divider"></div>
+            <div class="flex-box flex-v flex-l ProFilterView-add">
+              <img src="./plus.svg" alt="" />
+              <div @click="add">{{ $lc('新建视图') }}</div>
+            </div>
+          </div>
+        </el-popover>
+        <el-button v-if="bussId && selectItem" class="activiti m-l-s" @click="edit(selectItem, true)">
+          <div class="flex-box flex-v">
+            <i class="v3-icon-find"></i>
+            <div style="margin-left: 8px">
+              {{ `视图数据范围（${selectItem.keyIds && selectItem.keyIds.length}）` }}
+            </div>
+          </div>
+        </el-button>
+        <el-button icon="v3-icon-filter" class="m-r-s botton" @click="filterExpanded = !filterExpanded">{{
+          '筛选' | $lc
+        }}</el-button>
+        <slot name="rightContent"></slot>
+      </div>
+    </div>
+    <cl-advanced-filter
+      ref="filter"
+      class="filter"
+      only-key="id"
+      :class="{ 'is-hidden': !filterExpanded }"
+      :visible.sync="filterExpanded"
+      :filter-id="filterId"
+      :buss-id="bussId"
+      :model="searchValue"
+      :filter-list="filterList"
+      :filter-readonly="!!selectItem"
+      v-bind="$attrs"
+      @search="filterFn"
+      @clean="handleClean"
+      @clear="handleClear"
+      @enter="filterFn"
+      @change="changeFn"
+      @refresh="getFilterList"
+    >
+      <div slot="prefix">
+        <slot name="prefix"></slot>
+      </div>
+      <template v-for="filter in slotFilters" #[filter.slotName]="{ model }">
+        <!-- 有 value 的 slot：传递单个值及 input 回调 -->
+        <slot
+          v-if="filter.value"
+          :name="filter.slotName"
+          :model="model"
+          :item="filter"
+          :value="searchValue[filter.value]"
+          :input="val => handleSlotInput(filter.value, val)"
+        ></slot>
+        <!-- 无 value 的 slot（如 startDate/endDate 多值绑定），传递 searchValue 让父组件自行管理 -->
+        <slot
+          v-else
+          :name="filter.slotName"
+          :model="model"
+          :search-value="searchValue"
+          :update-search-value="updates => Object.assign(searchValue, updates)"
+        ></slot>
+      </template>
+      <div slot="suffix">
+        <slot name="suffix"></slot>
+      </div>
+    </cl-advanced-filter>
+    <cl-dialog
+      v-drag
+      width="85%"
+      :visible.sync="visible"
+      :title="isAdd ? $lc('新建视图') : $lc('编辑视图')"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="form" :model="form" label-width="80px" :inline="false" size="normal" label-position="top">
+        <el-form-item :label="$lc('视图名称')" prop="viewName" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
+          <el-input v-model="form.viewName" maxlength="30" show-word-limit />
+        </el-form-item>
+        <div>{{ $lc('数据范围') }}</div>
+        <cl-advanced-filter
+          ref="filter_box"
+          class="filter"
+          only-key="id"
+          :key="dialogFilterKey"
+          :visible="visible"
+          :model="searchForm"
+          :filter-list="filterList"
+          :check-ids="form.keyIds"
+          @saveCheckData="saveCheckData"
+        >
+          <template v-for="filter in slotFilters" #[filter.slotName]="{ model }">
+            <!-- 有 value 的 slot：传递单个值及 input 回调 -->
+            <slot
+              v-if="filter.value"
+              :name="filter.slotName"
+              :model="model"
+              :value="searchForm[filter.value]"
+              :input="val => (searchForm[filter.value] = val)"
+            ></slot>
+            <!-- 无 value 的 slot（如 startDate/endDate 多值绑定），传递 searchForm 让父组件自行管理 -->
+            <slot
+              v-else
+              :name="filter.slotName"
+              :model="model"
+              :search-value="searchForm"
+              :update-search-value="updates => Object.assign(searchForm, updates)"
+            ></slot>
+          </template>
+        </cl-advanced-filter>
+      </el-form>
+      <div slot="footer" class="flex-box flex-c flex-v page-button-shadow">
+        <el-button type="primary" @click="saveSt">{{ $lc('确认') }}</el-button>
+        <el-button plain @click="visible = false">{{ $lc('取消') }}</el-button>
+      </div>
+    </cl-dialog>
+  </div>
+</template>
+
+<script>
+import ClAdvancedFilter from './AdvancedFilter/index.vue';
+import ClDialog from 'n20-common-lib/src/components/Dialog/index.vue';
+import ClDragList from 'n20-common-lib/src/components/DragList/index.vue';
+import ClInputSearch from 'n20-common-lib/src/components/InputSearch/index.vue';
+import axios from 'n20-common-lib/src/utils/axios.js';
+
+export default {
+  name: 'ProFilterView',
+  components: {
+    ClAdvancedFilter,
+    ClInputSearch,
+    ClDragList,
+    ClDialog,
+  },
+  props: {
+    bussId: {
+      type: String,
+      default: '',
+    },
+    filterId: {
+      type: String,
+      default: '',
+    },
+    filterList: {
+      type: Array,
+      default: () => [],
+    },
+    // 初始筛选值，用于设置默认筛选条件，同时也用于同步 slot 类型筛选器的值
+    initialValue: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 筛选器默认展开/收起状态
+    defaultExpanded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      searchKeyword: '',
+      list: ['无视图'],
+      selectedItem: '无视图', // 默认选中第一项
+      viewPopoverVisible: false,
+      visible: false,
+      isAdd: false,
+      form: { userNo: sessionStorage.getItem('userNo'), pageNo: this.filterId },
+
+      filterExpanded: this.defaultExpanded,
+      dialogFilterKey: 0,
+      selectItem: '',
+      // 视图筛选值
+      searchForm: {},
+      // 普通筛选值
+      searchValue: {},
+      viewId: undefined,
+      isRefresh: false,
+    };
+  },
+  computed: {
+    /**
+     * 本地搜索过滤视图列表
+     * @returns {Array} 根据 searchKeyword 过滤后的视图列表；searchKeyword 为空时返回完整列表
+     */
+    filteredList() {
+      if (!this.searchKeyword) {
+        return this.list;
+      }
+      const keyword = this.searchKeyword.toLowerCase();
+      return this.list.filter(item => item.viewName && item.viewName.toLowerCase().includes(keyword));
+    },
+    // 筛选出类型为 slot 且在父组件提供了对应作用域插槽的筛选项
+    slotFilters() {
+      return this.filterList.filter(item => item.type === 'slot' && this.$scopedSlots[item.slotName]);
+    },
+
+    getInitialSearchValue() {
+      const obj = {};
+      // 为 slot 类型筛选项初始化值
+      this.filterList
+        .filter(item => item.type === 'slot')
+        .forEach(item => {
+          // 单值绑定
+          if (item.value) {
+            obj[item.value] = undefined;
+          }
+          // 多值绑定（slotFields 数组）
+          if (item.slotFields && item.slotFields.length) {
+            item.slotFields.forEach(field => {
+              obj[field] = undefined;
+            });
+          }
+        });
+      return obj;
+    },
+    filterObj() {
+      // 合并 slot 类型筛选器的值（来自 initialValue）到 searchValue 中
+      const slotValues = {};
+      this.filterList
+        .filter(item => item.type === 'slot' && item.value)
+        .forEach(item => {
+          if (this.initialValue && this.initialValue[item.value] !== undefined) {
+            slotValues[item.value] = this.initialValue[item.value];
+          }
+        });
+      return {
+        // 筛选条件（合并 slot 类型的值）
+        searchValue: { ...this.searchValue, ...slotValues },
+        // 视图id
+        viewId: this.selectItem ? this.selectItem.viewId : null,
+      };
+    },
+  },
+  watch: {
+    initialValue: {
+      handler(newVal) {
+        if (!newVal) return;
+
+        // 浅拷贝，避免修改 searchValue 时污染外部 initialValue
+        this.searchValue = { ...newVal };
+      },
+      deep: true,
+      immediate: false,
+    },
+    // filterId 变化时重新请求视图列表并重置状态
+    filterId: {
+      handler(newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
+          this.resetState();
+          this.getFilterList();
+        }
+      },
+      immediate: false,
+    },
+  },
+  mounted() {
+    // 只有在有 bussId 时才获取视图列表
+    if (this.bussId) {
+      this.getFilterList();
+    }
+    // 合并初始筛选值：slot 字段使用默认值，其他字段使用 initialValue 传入的值
+    this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue };
+  },
+  methods: {
+    // 处理 slot 类型字段的输入事件，同时更新 searchValue 和 initialValue
+    handleSlotInput(fieldName, val) {
+      // 防御性检查：如果 fieldName 无效，不执行任何操作
+      if (!fieldName) return;
+      // 更新 searchValue
+      this.searchValue[fieldName] = val;
+      // 同步更新 initialValue，确保双向绑定生效
+      this.$set(this.initialValue, fieldName, val);
+    },
+    handleCommand(command, item) {
+      const commandMap = {
+        edit: () => this.edit(item),
+        delete: () => this.deleteOne(item),
+      };
+      commandMap[command]();
+    },
+    setOptions(id, opts) {
+      this.$refs.filter.setOptions(id, opts);
+      this.filterList.forEach(item => {
+        if (item.value === id) {
+          item.options = opts;
+        }
+      });
+    },
+    changeFn(value) {
+      const obj = { ...value };
+      const filter = this.filterList.find(item => item.value === value.field);
+      if (filter && filter.type === 'daterange') {
+        obj.value = {
+          [filter.startDate]: this.filterObj.searchValue && this.filterObj.searchValue[filter.startDate],
+          [filter.endDate]: this.filterObj.searchValue && this.filterObj.searchValue[filter.endDate],
+        };
+      }
+      if (filter && filter.type === 'numberrange') {
+        obj.value = {
+          [filter.startValue]: this.filterObj.searchValue && this.filterObj.searchValue[filter.startValue],
+          [filter.endValue]: this.filterObj.searchValue && this.filterObj.searchValue[filter.endValue],
+        };
+      }
+      this.$emit('changeFn', obj);
+    },
+    filterFn() {
+      this.$emit('filter', this.filterObj, 'filter');
+    },
+    handleClean() {
+      this.$emit('filter', this.filterObj, 'clean');
+    },
+    handleClear() {
+      // 收集不需要清空的字段 key（required / isNotClose / initialValue 中的额外 key）
+      const noClearKeys = new Set();
+      const allFilterKeys = new Set();
+
+      this.filterList.forEach(item => {
+        const keys =
+          item.type === 'daterange'
+            ? [item.startDate, item.endDate]
+            : item.type === 'numberrange'
+            ? [item.startValue, item.endValue]
+            : (item.slotFields && item.slotFields.length)
+            ? item.slotFields
+            : [item.value];
+
+        keys.forEach(k => allFilterKeys.add(k));
+        if (item.required) {
+          keys.forEach(k => noClearKeys.add(k));
+        }
+      });
+
+      // initialValue 中不在 filterList 里的 key 也需要保留
+      Object.keys(this.initialValue).forEach(key => {
+        if (!allFilterKeys.has(key)) {
+          noClearKeys.add(key);
+        }
+      });
+
+      // 仅保留 noClearKeys 中的值，其余清空
+      const preserved = {};
+      for (const key in this.searchValue) {
+        if (noClearKeys.has(key)) {
+          preserved[key] = this.searchValue[key];
+        }
+      }
+
+      this.searchValue = preserved;
+      this.$emit(
+        'filter',
+        {
+          searchValue: { ...this.searchValue },
+          viewId: this.selectItem ? this.selectItem.viewId : null,
+        },
+        'clear',
+      );
+    },
+    // 通过bussId拿取视图列表
+    getFilterList(viewId) {
+      // 如果没有 bussId，不获取视图列表
+      if (!this.bussId) {
+        return;
+      }
+
+      axios
+        .get(`/bems/query/viewColumn/getViewInfo`, { bussId: this.bussId })
+        .then(res => {
+          const list = (res.data || []).map(item => {
+            item.keyIds = this.safeParse(item.keyIds, []);
+            return item;
+          });
+          this.list = [
+            {
+              viewName: '无视图',
+            },
+            ...list,
+          ];
+          if (this.isRefresh) {
+            const obj = this.list.find(item => item.viewId === viewId);
+            if (obj) {
+              this.handleSelect(obj);
+              this.selectItem = obj;
+            }
+          }
+        })
+        .catch(err => {
+          this.list = [
+            {
+              viewName: '无视图',
+            },
+          ];
+        });
+    },
+    // 新增
+    add() {
+      this.isRefresh = false;
+      this.viewPopoverVisible = false;
+      this.visible = true;
+      this.isAdd = true;
+      this.form = {
+        userNo: sessionStorage.getItem('userNo'),
+        pageNo: this.filterId,
+        keyIds: [],
+      };
+      this.viewId = undefined;
+      this.searchForm = {
+        ...this.getInitialSearchValue,
+      };
+    },
+    // 修改
+    edit(item, isRefresh = false) {
+      this.isRefresh = isRefresh;
+      this.viewPopoverVisible = false;
+      this.visible = true;
+      this.isAdd = false;
+      this.dialogFilterKey++;
+      // 浅拷贝，避免修改 form 时污染原始 item
+      this.form = { ...item };
+      this.viewId = item.viewId;
+      const parsed = this.safeParse(item.viewConfig);
+      this.searchForm = { ...this.getInitialSearchValue, ...parsed };
+    },
+    safeParse(str, fallback = {}) {
+      try {
+        return JSON.parse(str || '{}');
+      } catch {
+        return fallback;
+      }
+    },
+    // 保存筛选条件
+    saveCheckData(data) {
+      this.form.keyIds = data.map(item => {
+        return item.id;
+      });
+    },
+    // 保存视图
+    saveSt() {
+      if (!this.bussId) {
+        this.$message.warning('缺少业务ID，无法保存视图');
+        return;
+      }
+
+      const viewConfig = JSON.stringify(this.searchForm);
+      const keyIds = this.form.keyIds;
+      this.form.viewConfig = viewConfig;
+
+      this.$refs.form.validate(async valid => {
+        if (!valid) {
+          this.$message.error('请输入视图名称');
+          return;
+        }
+
+        if (!keyIds.length) {
+          this.$message.warning('至少添加一个条件');
+          return;
+        }
+
+        // 保存筛选视图
+        const obj = {
+          viewName: this.form.viewName,
+          viewType: '0',
+          bussId: this.bussId,
+          viewConfig: this.form.viewConfig,
+          keyIds: JSON.stringify(keyIds),
+          viewId: this.viewId,
+        };
+
+        axios.post('/bems/query/viewColumn/saveOrUpdateViewInfo', obj).then(res => {
+          if (res.code !== 200) {
+            return false;
+          }
+          this.visible = false;
+          this.$message.success('保存成功');
+          this.getFilterList(this.viewId);
+        });
+      });
+    },
+    // 删除
+    deleteOne(row) {
+      this.$msgboxPor({
+        title: '确认要删除吗？',
+        message: '内容从页面删除，将不可恢复',
+        type: 'error',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      }).then(async () => {
+        const { code } = await axios.post('/bems/query/viewColumn/deleteViewInfo', { viewId: row.viewId });
+        if (code !== 200) return;
+        this.$message.success('删除成功');
+        this.getFilterList();
+      });
+    },
+    // 选中视图
+    handleSelect(item) {
+      this.viewPopoverVisible = false;
+      this.selectItem = item;
+      this.selectedItem = item.viewName;
+      if (item.viewName === '无视图') {
+        this.selectItem = '';
+        this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue };
+        // 无视图时恢复原来的筛选逻辑
+        this.$nextTick(() => {
+          const filterRef = this.$refs.filter;
+          if (filterRef) {
+            filterRef.getFilterList();
+          }
+          this.$emit('filter', this.filterObj, 'viewChange');
+          this.$nextTick(() => {
+            this.updatePopover();
+          });
+        });
+      } else {
+        const config = this.safeParse(item.viewConfig);
+        this.searchForm = config;
+        this.searchValue = config;
+        // 按视图保存的 keyIds 更新展示字段
+        this.$nextTick(() => {
+          this.applyFilterFields(item.keyIds);
+        });
+      }
+    },
+    /**
+     * 根据视图的 keyIds 更新 cl-advanced-filter 的展示字段（仅更新展示，不保存）
+     * @param {Array} keyIds - 视图保存的筛选字段 ID 列表
+     */
+    applyFilterFields(keyIds) {
+      const filterRef = this.$refs.filter;
+      if (!filterRef) return;
+
+      // 按 keyIds 顺序过滤 filterList
+      const filteredItems = this.filterList
+        .filter(item => keyIds.includes(item.id))
+        .sort((a, b) => keyIds.indexOf(a.id) - keyIds.indexOf(b.id));
+
+      // 更新 checkList 和展示字段
+      filterRef.check(keyIds);
+      filterRef.setModelData(filteredItems);
+      filterRef.mackData(filteredItems);
+
+      this.$nextTick(() => {
+        this.$emit('filter', this.filterObj, 'viewChange');
+        this.$nextTick(() => {
+          this.updatePopover();
+        });
+      });
+    },
+    // 强制更新 popover 位置
+    updatePopover() {
+      const popover = this.$refs.viewPopover;
+      if (popover && popover.updatePopper) {
+        popover.updatePopper();
+      }
+    },
+    // 拖动保存视图列表
+    handleDragSort(list) {
+      console.log('当前list:', list);
+    },
+    /**
+     * 重置组件状态到初始值
+     * 供下游调用以恢复组件初始状态
+     */
+    resetState() {
+      this.searchKeyword = '';
+      this.selectedItem = '无视图';
+      this.selectItem = '';
+      this.searchValue = { ...this.getInitialSearchValue, ...this.initialValue };
+      this.searchForm = { ...this.getInitialSearchValue };
+      this.filterExpanded = this.defaultExpanded;
+      this.viewId = undefined;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.filter.is-hidden {
+  padding: 4px;
+  border-bottom: none !important;
+}
+</style>

package/src/components/ProFilterView/plus.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.66626 7.33398H14.6663V8.66699H8.66626V14.667H7.33325V8.66699H1.33325V7.33398H7.33325V1.33398H8.66626V7.33398Z" fill="#4E5969"/>
+</svg>