three-trees-ui 1.0.12 → 1.0.14

package/packages/CustomDialog/src/customMobileDialog.vue

@@ -32,7 +32,6 @@
             class="search-item"
           >
             <p>{{ condition.comment }}:</p>
-            <!-- 单行文本输入框 -->
             <div v-if="condition.controllerType == '1'">
               <el-input
                 v-model="queryParams[index][condition.field]"
@@ -43,8 +42,10 @@
                 @keyup.enter.native="hideSearch"
               ></el-input>
             </div>
-            <!-- 单选框 -->
-            <div v-if="condition.controllerType == '2'">
+            <div
+              v-if="condition.controllerType == '2'"
+              style="margin-right: 10px"
+            >
               <el-radio
                 v-for="(itemR, $index1) in condition.config.options"
                 :key="$index1"
@@ -54,145 +55,45 @@
                 {{ itemR.value }}
               </el-radio>
             </div>
-            <!-- 下拉框 -->
-            <div v-if="condition.controllerType == '3'">
-              <!-- 静态选项 -->
+            <div
+              v-if="condition.controllerType == '3'"
+              style="margin-right: 10px"
+            >
               <ht-select
                 v-if="condition.config.choiceType == 'static'"
                 v-model="queryParams[index][condition.field]"
-                :multiple="condition.config.multiple"
                 :options="condition.config.options"
-                popper-class="dialog-select"
               ></ht-select>
-              <!-- 动态选项时展示数据字典 -->
-              <ht-dictionary
+              <eip-select-dia
                 v-else
-                v-model="queryParams[index][condition.field]"
-                :dickey="condition.config.dic"
-                :filterable="condition.config.filterable"
-                popper-class="dialog-select"
-              ></ht-dictionary>
+                v-model="queryParams[condition.field]"
+                :ganged="{
+                  alias: condition.config.customQuery.alias,
+                  valueBind: condition.config.customQuery.valueBind,
+                  noInit: '',
+                  labelBind: condition.config.customQuery.labelBind,
+                  gangedBind: '{}',
+                  bind: condition.config.bind,
+                }"
+                :multiple="false"
+                :filterable="false"
+                :allow-create="false"
+                :selectlist="[]"
+                :query-params="queryParams"
+              ></eip-select-dia>
             </div>
-            <!-- 标签 -->
-            <div v-if="condition.controllerType == '4'">
+            <div
+              v-if="condition.controllerType == '4'"
+              style="margin-right: 10px"
+            >
               <eip-tag
                 v-model="queryParams[index][condition.field]"
                 :tag-key="condition.config.tag"
+                :placeholder="quickSearch"
                 :filterable="condition.config.filterable"
                 :expand="condition.config.expand"
               ></eip-tag>
             </div>
-            <!-- 日期 -->
-            <div v-if="condition.controllerType == '6'">
-              <!-- 根据日期的条件类型来判断展示单个日期还是日期范围 -->
-              <div
-                v-if="condition.condition == 'BETWEEN'"
-                style="display: flex;align-items: center;"
-              >
-                <ht-input
-                  v-model="queryParams[index].startDate"
-                  placeholder="开始日期"
-                  @click.native="showDate(index, 'startDate')"
-                  readonly
-                ></ht-input>
-                <span style="margin:0 10px;">至</span>
-                <ht-input
-                  v-model="queryParams[index].endDate"
-                  placeholder="结束日期"
-                  @click.native="showDate(index, 'endDate')"
-                  readonly
-                ></ht-input>
-              </div>
-              <ht-input
-                v-else
-                v-model="queryParams[index][condition.field]"
-                @click.native="showDate(index, condition.field)"
-                readonly
-              ></ht-input>
-            </div>
-            <!-- 选择器 -->
-            <div v-if="condition.controllerType == '7'">
-              <ht-user-selector-input
-                v-model="queryParams[index].selectName"
-                v-if="condition.config.alias == 'user'"
-                append-to-body
-                @change="
-                  (data) => {
-                    queryParams[index][condition.field] = getSelectId(data)
-                  }
-                "
-              ></ht-user-selector-input>
-              <ht-org-selector-input
-                v-model="queryParams[index].selectName"
-                v-if="condition.config.alias == 'org'"
-                append-to-body
-                @change="
-                  (data) => {
-                    queryParams[index][condition.field] = getSelectId(data)
-                  }
-                "
-              ></ht-org-selector-input>
-              <ht-role-selector-input
-                v-model="queryParams[index].selectName"
-                v-if="condition.config.alias == 'role'"
-                append-to-body
-                @change="
-                  (data) => {
-                    queryParams[index][condition.field] = getSelectId(data)
-                  }
-                "
-              ></ht-role-selector-input>
-              <ht-job-selector-input
-                v-model="queryParams[index].selectName"
-                v-if="condition.config.alias == 'job'"
-                append-to-body
-                @change="
-                  (data) => {
-                    queryParams[index][condition.field] = getSelectId(data)
-                  }
-                "
-              ></ht-job-selector-input>
-              <ht-post-selector-input
-                v-model="queryParams[index].selectName"
-                v-if="condition.config.alias == 'post'"
-                append-to-body
-                @change="
-                  (data) => {
-                    queryParams[index][condition.field] = getSelectId(data)
-                  }
-                "
-              ></ht-post-selector-input>
-              <ht-dimension-selector-input
-                v-model="queryParams[index].selectName"
-                v-if="condition.config.alias == 'dimension'"
-                append-to-body
-                @change="
-                  (data) => {
-                    queryParams[index][condition.field] = getSelectId(data)
-                  }
-                "
-              ></ht-dimension-selector-input>
-            </div>
-            <!-- 对话框 -->
-            <div v-if="condition.controllerType == '5'">
-              <ht-custom-dialog
-                v-model="queryParams[index][condition.field]"
-                :model-name="condition.config.keyBind"
-                dialogType="search"
-                :custdialog="{
-                  name: '请选择',
-                  icon: '',
-                  custDialog: {
-                    selectNum: 1,
-                    conditions: [],
-                    mappingConf: [],
-                    custQueryJson: [],
-                    alias: condition.config.alias,
-                    type: 'custDialog',
-                  },
-                }"
-              ></ht-custom-dialog>
-            </div>
           </div>
           <div v-show="isShowMoreSearch" class="search-btns">
             <el-button
@@ -270,7 +171,7 @@
             </template>
             <div class="custom-mobile_box">
               <div
-                v-for="field in sortDisplayfield"
+                v-for="field in displayfield"
                 :key="field.field"
                 class="custom-mobile_box_item"
               >
@@ -353,23 +254,6 @@
         @check-change="getChecked"
       ></el-tree>
     </van-action-sheet>
-    <!-- 修改时间 -->
-    <van-popup
-      v-model="isShowDatePop"
-      v-if="isShowDatePop"
-      position="bottom"
-      round
-    >
-      <!-- 日期选择控件 -->
-      <van-datetime-picker
-        v-model="currentDate"
-        :type="dateType"
-        title="选择日期"
-        :show-toolbar="true"
-        @cancel="isShowDatePop = false"
-        @confirm="confirmFn"
-      />
-    </van-popup>
   </div>
 </template>
 <script>
@@ -394,14 +278,9 @@
       sunIndex: Number,
       subPath: String,
       currentSubData: Array,
-      dialogConfig: Object,
-      dialogType: String,
     },
     data() {
       return {
-        dateType: 'date',
-        currentDate: '', // 当前日期
-        isShowDatePop: false, // 是否显示日期选择控件
         isShowMoreSearch: false,
         treeSelectText: '', // 组合树时选中的查询条件
         isSelectTreeShow: false, // 组合树显示隐藏
@@ -470,58 +349,8 @@
           this.selectIds.length > 0 ? `(${this.selectIds.length})` : ''
         return `${this.$t('ht.common.confirm')}${selectedText}`
       },
-      jumpParamKey() {
-        return this.dialogConfig && this.dialogConfig.jumpParamKey
-          ? this.dialogConfig.jumpParamKey
-          : ''
-      },
-      // 是否保存成跳转url参数
-      isHaveJumpUrl() {
-        return (
-          this.dialogConfig &&
-          ((this.isMobile && this.dialogConfig.mobileUrl) ||
-            (!this.isMobile && this.dialogConfig.pcUrl))
-        )
-      },
-      sortDisplayfield() {
-        return this.displayfield.sort((a, b) => {
-          return a.sort > b.sort ? 1 : -1
-        })
-      },
     },
     methods: {
-      // 获取已选择的选择器数据id
-      getSelectId(data) {
-        if (!data || !data.length) {
-          return ''
-        }
-        let ids = []
-        data.forEach((item) => {
-          ids.push(item.id)
-        })
-        return ids.join(',')
-      },
-      showDate(index, key) {
-        this.dateType = this.conditionBind[index].config.inputFormat.includes(
-          'mm:'
-        )
-          ? 'datetime'
-          : 'date'
-        this.currentDateData = { index, key }
-        this.currentDate = this.queryParams[index][key]
-          ? new Date(this.queryParams[index][key].replace(/-/g, '/'))
-          : new Date()
-        this.isShowDatePop = true
-      },
-      // 日期确认
-      confirmFn() {
-        let currentConfig = this.conditionBind[this.currentDateData.index]
-        this.queryParams[this.currentDateData.index][
-          this.currentDateData.key
-        ] = this.currentDate.format(currentConfig.config.inputFormat)
-
-        this.isShowDatePop = false
-      },
       searchInputChange() {
         if (!this.isShowMoreSearch) {
           this.search(true)
@@ -567,124 +396,122 @@
         this.search(true)
       },
       showDialog() {
+        const this_ = this
         this.fixedParams = {}
-        // 如果已存在配置信息就不去请求配置信息 直接初始化数据
-        if (this.dialogConfig) {
-          this.initDialog(this.dialogConfig)
-          return
-        }
         var alias = this.custdialog.custDialog.alias
         this.$requestConfig
           .getCustomDialogByAlias(alias)
           .then((customDialog) => {
-            this.initDialog(customDialog)
-          })
-      },
-      initDialog(customDialog) {
-        let alias = this.custdialog.custDialog.alias
-        const this_ = this
-        if (!customDialog || !customDialog.alias) {
-          this.$message.error('对话框别名【' + alias + '】不存在！')
-          return
-        }
-        if (customDialog.style == 1) {
-          var displaylist = JSON.parse(customDialog.displayfield)
-          this_.nodeKey = displaylist.id
-        }
-        if (customDialog.needPage && customDialog.requestType === 'POST') {
-          let obj = {}
-          this.getLastKeyByPath(obj, customDialog.pageKey, 1)
-          this.getLastKeyByPath(obj, customDialog.pageSizeKey, 10)
-          this.getLastKeyByPath(obj, customDialog.totalKey, true)
-          const exp = utils.parseExp(customDialog.dataParam, obj, true)
-          if (exp) {
-            const params = JSON.parse(exp)
-            if (params.pageBean) {
-              this.pagination = {
-                ...params.pageBean,
-              }
+            if (!customDialog || !customDialog.alias) {
+              this.$message.error('对话框别名【' + alias + '】不存在！')
+              return
             }
-          }
-        }
-        //对话框按表单字段查询（参数传入的）
-        let bindList = this_.custdialog.custDialog.conditions
-        this_.param = [] //绑定的表单字段
-        if (bindList.length > 0) {
-          bindList.forEach((ele) => {
-            //绑定表单字段
-            if (
-              ele.bind &&
-              (ele.defaultType == '3' || ele.bind.startsWith('data.searchForm'))
-            ) {
+            if (customDialog.style == 1) {
+              var displaylist = JSON.parse(customDialog.displayfield)
+              this_.nodeKey = displaylist.id
+            }
+            if (customDialog.needPage && customDialog.requestType === 'POST') {
               let obj = {}
-              obj.field = ele.field
-              obj.bind = ele.bind
-              obj.bindType = ele.bindType
-              this_.param.push(obj)
+              this.getLastKeyByPath(obj, customDialog.pageKey, 1)
+              this.getLastKeyByPath(obj, customDialog.pageSizeKey, 10)
+              this.getLastKeyByPath(obj, customDialog.totalKey, true)
+              const exp = utils.parseExp(customDialog.dataParam, obj, true)
+              if (exp) {
+                const params = JSON.parse(exp)
+                if (params.pageBean) {
+                  this.pagination = {
+                    ...params.pageBean,
+                  }
+                }
+              }
             }
-            // bindType 1 表单字段 2固定 3脚本
-            if (ele.defaultType == '3' && ele.bindType === 2) {
-              this_.fixedParams[ele.field] = ele.bind || ''
+            //对话框按表单字段查询（参数传入的）
+            let bindList = this_.custdialog.custDialog.conditions
+            this_.param = [] //绑定的表单字段
+            if (bindList.length > 0) {
+              bindList.forEach((ele) => {
+                //绑定表单字段
+                if (
+                  ele.bind &&
+                  (ele.defaultType == '3' ||
+                    ele.bind.startsWith('data.searchForm'))
+                ) {
+                  let obj = {}
+                  obj.field = ele.field
+                  obj.bind = ele.bind
+                  obj.bindType = ele.bindType
+                  this_.param.push(obj)
+                }
+                // bindType 1 表单字段 2固定 3脚本
+                if (ele.defaultType == '3' && ele.bindType === 2) {
+                  this_.fixedParams[ele.field] = ele.bind || ''
+                }
+              })
             }
-          })
-        }
 
-        //判断对话框查询是否有条件
-        let userInputList = JSON.parse(customDialog.conditionfield)
-        this_.conditionBind = []
-        let queryParams = []
-        let placeholders = []
-        if (userInputList.length > 0) {
-          userInputList.forEach((ele) => {
-            var obj = {}
-            //条件查询参数（用户输入的） 文本框输入 defaultType 1 用户输入 2固定值 3参数传入 5脚本
-            if (ele.defaultType == '1') {
-              obj[ele.field] = ''
-              queryParams.push(obj)
-              // queryParams[ele.field] = "";
-              this_.conditionBind.push(ele)
-              placeholders.push('请输入' + ele.comment)
-            }
-            if (ele.defaultType == '2' && ele.defaultValue) {
-              this_.fixedParams[ele.field] = ele.defaultValue
+            //判断对话框查询是否有条件
+            let userInputList = JSON.parse(customDialog.conditionfield)
+            this_.conditionBind = []
+            let queryParams = []
+            let placeholders = []
+            if (userInputList.length > 0) {
+              userInputList.forEach((ele) => {
+                var obj = {}
+                //条件查询参数（用户输入的） 文本框输入 defaultType 1 用户输入 2固定值 3参数传入 5脚本
+                if (ele.defaultType == '1') {
+                  obj[ele.field] = ''
+                  queryParams.push(obj)
+                  // queryParams[ele.field] = "";
+                  this_.conditionBind.push(ele)
+                  placeholders.push('请输入' + ele.comment)
+                }
+                if (ele.defaultType == '2' && ele.defaultValue) {
+                  this_.fixedParams[ele.field] = ele.defaultValue
+                }
+              })
+              this.$set(this, 'queryParams', queryParams)
+              this.$set(this, 'placeholders', placeholders)
             }
-          })
-          this.$set(this, 'queryParams', queryParams)
-          this.$set(this, 'placeholders', placeholders)
-        }
-        if (customDialog.style == 0 || customDialog.style == 2) {
-          //列表
-          this_.customDialogShow({
-            alias: alias,
-            customDialog: customDialog,
-          })
-        } else if (customDialog.style == 1) {
-          //树形
-          this_.pageParam = { alias: alias, customDialog: customDialog }
-          this_.customDialog = customDialog
-          let param = {}
-          this_.conditionfieldTree = []
-          //判断是否存在条件
-          if (customDialog.conditionfield) {
-            this_.conditionfieldTree = JSON.parse(customDialog.conditionfield)
-            if (this_.conditionfieldTree.length > 0) {
-              for (let i = this_.conditionfieldTree.length - 1; i >= 0; i--) {
-                //判断条件字段是否是动态传入（defaultType：4：动态传入，2：固定值 ）
-                if (this_.conditionfieldTree[i].defaultType == '4') {
-                  param[this_.conditionfieldTree[i].field] =
-                    this_.conditionfieldTree[i].comment
+            if (customDialog.style == 0 || customDialog.style == 2) {
+              //列表
+              this_.customDialogShow({
+                alias: alias,
+                customDialog: customDialog,
+              })
+            } else if (customDialog.style == 1) {
+              //树形
+              this_.pageParam = { alias: alias, customDialog: customDialog }
+              this_.customDialog = customDialog
+              let param = {}
+              this_.conditionfieldTree = []
+              //判断是否存在条件
+              if (customDialog.conditionfield) {
+                this_.conditionfieldTree = JSON.parse(
+                  customDialog.conditionfield
+                )
+                if (this_.conditionfieldTree.length > 0) {
+                  for (
+                    let i = this_.conditionfieldTree.length - 1;
+                    i >= 0;
+                    i--
+                  ) {
+                    //判断条件字段是否是动态传入（defaultType：4：动态传入，2：固定值 ）
+                    if (this_.conditionfieldTree[i].defaultType == '4') {
+                      param[this_.conditionfieldTree[i].field] =
+                        this_.conditionfieldTree[i].comment
+                    }
+                  }
                 }
               }
+              //有动态传入的字段
+              if (JSON.stringify(param) != '{}') {
+                this_.dialogVisible = true
+              } else {
+                //无动态传入的字段
+                this_.customDialogTreeShow(this_.pageParam)
+              }
             }
-          }
-          //有动态传入的字段
-          if (JSON.stringify(param) != '{}') {
-            this_.dialogVisible = true
-          } else {
-            //无动态传入的字段
-            this_.customDialogTreeShow(this_.pageParam)
-          }
-        }
+          })
       },
       treeClick(data) {
         // 单选
@@ -821,22 +648,13 @@
           }
           // 添加用户id 岗位id 组织id
           try {
-            if (
-              this.$requestConfig.getUserId &&
-              this.$requestConfig.getUserId()
-            ) {
+            if (this.$requestConfig.getUserId()) {
               ctx.userId = this.$requestConfig.getUserId()
             }
-            if (
-              this.$requestConfig.getOrgId &&
-              this.$requestConfig.getOrgId()
-            ) {
+            if (this.$requestConfig.getOrgId()) {
               ctx.orgId = this.$requestConfig.getOrgId()
             }
-            if (
-              this.$requestConfig.getPostId &&
-              this.$requestConfig.getPostId()
-            ) {
+            if (this.$requestConfig.getPostId()) {
               ctx.postId = this.$requestConfig.getPostId()
             }
           } catch (e) {
@@ -933,21 +751,8 @@
         this.selectOrgs = this.convertComment2Field(str, field)
         this.custdialog.custDialog.mappingConf.forEach((con) => {
           var val = ''
-          str.forEach((item, index) => {
-            // 此处添加url跳转参数保存逻辑
-            if (
-              this.jumpParamKey &&
-              this.isHaveJumpUrl &&
-              (this.modelName == 'data.' + con['target'][0] ||
-                (this.modelName.includes('item.') &&
-                  con['target'][0].endsWith(this.modelName.split('.')[1])))
-            ) {
-              val += `${item[con.from]}¯${this.jumpParamKey}:${
-                this.selectOrgs[index][this.jumpParamKey]
-              },`
-            } else {
-              val += item[con.from] + ','
-            }
+          str.forEach((item) => {
+            val += item[con.from] + ','
           })
           if (this.modelName == 'data.' + con['target'][0]) {
             utils.setValueByPath(
@@ -1034,29 +839,6 @@
         //用户输入的
         if (this.queryParams.length != 0 && this.queryParams[0] != '') {
           this.conditionBind.forEach((item, index) => {
-            // 日期范围特殊处理
-            if (item.dbType == 'date' && item.condition == 'BETWEEN') {
-              if (
-                (this.queryParams[index].startDate &&
-                  !this.queryParams[index].endDate) ||
-                (!this.queryParams[index].startDate &&
-                  this.queryParams[index].endDate)
-              ) {
-                flag = true
-                this.$message.info('日期范围未填写完整！')
-                return
-              }
-              if (
-                this.queryParams[index].startDate &&
-                this.queryParams[index].endDate
-              ) {
-                this.queryParams[index][
-                  item.field
-                ] = `${this.queryParams[index].startDate},${this.queryParams[index].endDate}`
-              } else {
-                this.queryParams[index][item.field] = ''
-              }
-            }
             if (this.queryParams[index][item.field]) {
               querys.push({
                 property: item.field,
@@ -1130,22 +912,13 @@
           ctx.total = pageBean.pageBean.total
           // 添加用户id 岗位id 组织id
           try {
-            if (
-              this.$requestConfig.getUserId &&
-              this.$requestConfig.getUserId()
-            ) {
+            if (this.$requestConfig.getUserId()) {
               ctx.userId = this.$requestConfig.getUserId()
             }
-            if (
-              this.$requestConfig.getOrgId &&
-              this.$requestConfig.getOrgId()
-            ) {
+            if (this.$requestConfig.getOrgId()) {
               ctx.orgId = this.$requestConfig.getOrgId()
             }
-            if (
-              this.$requestConfig.getPostId &&
-              this.$requestConfig.getPostId()
-            ) {
+            if (this.$requestConfig.getPostId()) {
               ctx.postId = this.$requestConfig.getPostId()
             }
           } catch (e) {
@@ -1178,8 +951,6 @@
             } else {
               param.pageBean.pageSize = -1
             }
-            // 日期格式的 改成数组
-            // this.changeDateFormat(param)
             //构造请求的参数
             let requestParam = {
               pageBean: param,
@@ -1215,21 +986,6 @@
           }
         }
       },
-      changeDateFormat(param) {
-        let dateValidate1 = /^\d{4}\-\d{2}\-\d{2}$/
-        let dateValidate2 = /^([1-2][0-9][0-9][0-9]-[0-1]{0,1}[0-9]-[0-3]{0,1}[0-9])\s(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
-        Object.keys(param).forEach((key) => {
-          if (
-            param[key] &&
-            typeof param[key] == 'string' &&
-            param[key].includes(',') &&
-            (dateValidate1.test(param[key].split(',')[0]) ||
-              dateValidate2.test(param[key].split(',')[0]))
-          ) {
-            param[key] = param[key].split(',')
-          }
-        })
-      },
       getSearchValueByKey() {
         let queryParamsObj = {}
         if (this.queryParams.length > 0) {
@@ -1449,38 +1205,13 @@
             }
           }
         }
-        // 如果是查询中使用的对话框
-        if (this.dialogType == 'search') {
-          let returnVal = []
-          str.forEach((item) => {
-            returnVal.push(decodeURIComponent(item[this.modelName]))
-          })
-          this.$emit('updateInput', returnVal.join(','))
-          return
-        }
         const pInst = utils.getOnlineFormInstance(this)
         this.custdialog.custDialog.mappingConf.forEach((con) => {
           var val = ''
           var from = con.from.toLowerCase()
           str.forEach((item) => {
             if (item) {
-              if (
-                this.jumpParamKey &&
-                this.isHaveJumpUrl &&
-                (this.modelName == 'data.' + con['target'][0] ||
-                  (this.modelName.includes('item.') &&
-                    con['target'][0].endsWith(this.modelName.split('.')[1])))
-              ) {
-                // 需根据key 找到对应 返回数据的返回名称
-                let returnMapKey = returnStr.find((k) => {
-                  return k.field == this.jumpParamKey
-                }).comment
-                val += `${decodeURIComponent(item[from])}¯${
-                  this.jumpParamKey
-                }:${item[returnMapKey]},`
-              } else {
-                val += decodeURIComponent(item[from]) + ','
-              }
+              val += decodeURIComponent(item[from]) + ','
             }
           })
           if (this.modelName == 'data.' + con['target'][0]) {
@@ -1548,6 +1279,20 @@
           }
         }
       },
+      // getSelected() {
+      //   let arr = []
+      //   this.selectIds.forEach((item) => {
+      //     debugger
+      //     let obj = this.dialogData.find((sub) => {
+      //       return sub.id_ === item
+      //     })
+      //     if (obj) {
+      //       arr.push(obj)
+      //     }
+      //   })
+
+      //   return arr
+      // },
       calacInputSuffixHeight() {
         this.$emit('calacInputSuffixHeight')
       },
@@ -1871,50 +1616,4 @@
     padding: 10px 5px;
     overflow-y: auto;
   }
-  .dialog-select {
-    z-index: 2500 !important;
-  }
-  .mobile-van-action {
-    &.min-height-action {
-      min-height: 50%;
-    }
-    .dialog-mobile__title {
-      font-size: 18px;
-      color: #1a1a1a;
-    }
-    .dialog-mobile__close {
-      float: right;
-    }
-    .van-action-sheet__cancel {
-      padding: 8px 5px;
-      background: $base-color-blue;
-      color: $base-color-white;
-    }
-    .search-box {
-      padding-right: 60px;
-      position: relative;
-      > .unfold-icon {
-        position: absolute;
-        right: 20px;
-        top: 17px;
-      }
-      .search-item {
-        display: flex;
-        align-items: center;
-        > p {
-          width: 90px;
-          font-size: 14px;
-          text-align: right;
-          margin-right: 10px;
-        }
-        > div {
-          flex: 1;
-          overflow: hidden;
-        }
-      }
-      .search-btns {
-        text-align: center;
-      }
-    }
-  }
 </style>