添加保存筛选项功

src/views/projectManage/requirement/list/index.vue

@@ -96,11 +96,27 @@
           </div>
 
           <div align="right" style="margin-top: 15px;">
+            <el-button type="text" @click="showSaveSearch = true">保存筛选项</el-button>
             <el-button type="primary" size="mini" @click="getTableData">筛 选</el-button>
             <el-button size="mini" @click="reset">重 置</el-button>
           </div>
         </div>
       </div>
+      <el-row v-if="filterList.length && filterList.length>0" type="flex" justify="space-between" class="filter">
+        <el-col :span="2">
+          <span>我的过滤器：</span>
+        </el-col>
+        <el-col :span="20" class="mine-filter">
+          <span v-for="item in filterList" :key="item.id" class="filter-item" @click="getFilterItem(item.id)">
+            <el-tooltip class="item" effect="dark" :content="item.name" placement="bottom">
+              <span>{{ item.name }}</span>
+            </el-tooltip>
+          </span>
+        </el-col>
+        <el-col :span="2" align="end">
+          <span @click.stop="showEditSearch = true">管理过滤器</span>
+        </el-col>
+      </el-row>
     </div>
     <div class="stylus-content">
       <el-table
@@ -168,6 +184,18 @@
       @cancel="createDialogVisible=false"
       @confirm="getTableData();createDialogVisible=false"
     />
+    <normal-dialog :show-dialog="showSaveSearch" :title="'保存筛选项'" :width="'35%'" @confirm="saveSearch()" @cancel="showSaveSearch=false">
+      <div v-if="showSaveSearch" class="file-dialog">
+        <el-form ref="FilterItems" :model="FilterItems" :rules="searchFormRules" label-width="100px">
+          <el-form-item label="过滤器名称" prop="name">
+            <el-input v-model="FilterItems.name" placeholder="不超过50个字符" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </normal-dialog>
+    <normal-dialog :show-footer="false" :show-dialog="showEditSearch" :title="'管理过滤器'" :width="'65%'" @cancel="showEditSearch=false">
+      <filter-list :show-filter="showEditSearch" @deleteFilter="deleteFilter" />
+    </normal-dialog>
   </div>
 </template>
 
@@ -179,15 +207,18 @@ import {
   configShowRequireStatusEnum,
   settingQueryBizRqmtOrntList
 } from '@/api/requirement.js'
+import { deepClone } from '@/utils/global'
 import RequirementCreate from './create'
 import '@/views/projectManage/publicCss/index.css'
 import extraUrgent from '@/assets/extraUrgent.png'
 import searchPeople from '@/components/select/searchPeople'
+import normalDialog from '@/components/dialog/normalDialog'
 
 export default {
   components: {
     RequirementCreate,
-    searchPeople
+    searchPeople,
+    normalDialog
   },
   data() {
     return {
@@ -196,8 +227,11 @@ export default {
       priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
       formula: [{ code: 0, msg: '>=' }, { code: 1, msg: '<=' }, { code: 2, msg: '>' }, { code: 3, msg: '<' }],
       // currentRow: null,
+      filterList: [], // 筛选器列表
+      FilterItems: {
+        name: ''
+      },
       searchInfo: {
-
         belongingProject: [],
         sourceType: [],
         bizType: [],
@@ -206,7 +240,12 @@ export default {
       requirementName: '',
       goodName: '更多筛选',
       DetailedScreening: false,
-      // bizTypeOb: {},
+      searchFormRules: { name: [
+        { required: true, message: '请输入筛选项名称', trigger: 'blur' },
+        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+      ] },
+      showSaveSearch: false, // 显示保存筛选项对话框
+      showEditSearch: false, // 显示管理过滤器
       AttributionItems: [], // 所属项目option
       requiredStatus: [], // 需求状态option
       demandDirection: [], // 需求方向option
@@ -226,6 +265,7 @@ export default {
     this.$store.state.data.status = true
     this.showRequirementEnum()
     this.getTableData()
+    this.getFilterList() // 筛选项保存
   },
   destroyed() {
     this.$store.state.data.status = false
@@ -311,6 +351,55 @@ export default {
       this.DetailedScreening = !this.DetailedScreening
       this.goodName === '更多筛选' ? this.goodName = '收起筛选' : this.goodName = '更多筛选'
     },
+    saveSearch() { // 保存筛选项
+      this.$refs.FilterItems.validate((valid) => {
+        if (valid) {
+          console.log(this.FilterItems, 'cdsncjk')
+          // this.stratAndEnd = this.stratAndEnd ? this.stratAndEnd : []
+          // this.formInline.createStartTime = this.stratAndEnd[0] || null
+          // this.formInline.createEndTime = this.stratAndEnd[1] || null
+          const isExistName = this.filterList.some(item => {
+            return item.name === this.FilterItems.name
+          })
+          if (isExistName) {
+            this.$message({ showClose: true, message: '筛选项名称重名', type: 'error' })
+          } else {
+            this.toSave()
+          }
+        } else {
+          this.$message({ showClose: true, message: '筛选项名称不能为空', type: 'error' })
+          return false
+        }
+      })
+    },
+    async toSave() {
+      const saveObj = deepClone(this.formInline)
+      delete saveObj.curIndex
+      delete saveObj.pageSize
+      // const res = await createFilter({
+      //   name: this.FilterItems.name,
+      //   content: JSON.stringify(saveObj),
+      //   bizId: Number(localStorage.getItem('bizId'))
+      // })
+      // if (res.code === 200) {
+      //   this.$message({ showClose: true, message: '保存成功', type: 'success' })
+      //   this.showSaveSearch = false
+      //   this.getFilterList()
+      //   this.FilterItems.name = null
+      // }
+    },
+    async getFilterList() { // 获取过滤器列表
+      // const params = {
+      //   bizId: Number(localStorage.getItem('bizId'))
+      // }
+      // const res = await getFilterList(params)
+      // this.filterList = res.data
+    },
+
+    deleteFilter() {
+      this.$router.push({ path: this.$route.path })
+      this.getFilterList()
+    },
     reset() {
       this.$set(this.searchForm, 'id', '')
       this.$set(this.searchForm, 'pmMemberInfoResponse', '')