af-mobile-client-vue3 1.0.69 → 1.0.71

package/src/components/data/XCellListFilter/index.vue

@@ -1,230 +1,240 @@
-<script setup lang="ts">
-import {defineEmits, defineModel, defineProps, onMounted, ref, watch} from 'vue'
-import {
-  Button as VanButton,
-  Col as VanCol,
-  DropdownItem as VanDropdownItem,
-  DropdownMenu as VanDropdownMenu,
-  Icon as VanIcon,
-  Row as VanRow,
-  showFailToast,
-} from 'vant'
-import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
-import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
-const props = defineProps<{
-  orderVal?: string
-  sortordVal?: string
-  orderList?: any[]
-  formQuery?: any[]
-}>()
-
-const emit = defineEmits([
-  'update:orderVal',
-  'update:sortordVal',
-  'update:conditionParams',
-  'onRefresh',
-])
-// 排序字段
-const currentOrderVal = defineModel('orderVal')
-// 排序规则
-const currentSortordVal = defineModel('sortordVal')
-// 下拉菜单元素
-const listFilterMenu = ref(null)
-// 排序规则列表
-const sortordList = ref([
-  { title: '正序', value: 'ascend' },
-  { title: '倒序', value: 'descend' },
-])
-const colFieldNames = {
-  text: 'title',
-  value: 'value'
-}
-// 查询条件参数     !!!!!建议最后点击确认的时候完成这个的整理
-const conditionParams = ref({})
-
-// 重置某个选项
-function resetOptionItem(type) {
-  if(conditionParams.value[type] != undefined){
-    conditionParams.value[type] = undefined
-  }
-}
-// 重置所有选项
-function resetOption() {
-  currentOrderVal.value = undefined
-  currentSortordVal.value = undefined
-  // 条件参数
-  conditionParams.value = {}
-}
-function checkOrderOption() {
-  let isCheck = true
-  if (currentOrderVal.value) {
-    if (!currentSortordVal.value) {
-      showFailToast('排序规则不能为空')
-      isCheck = false
-    }
-  }
-  else if (currentSortordVal.value) {
-    if (!currentOrderVal.value) {
-      showFailToast('排序字段不能为空')
-      isCheck = false
-    }
-  }
-  return isCheck
-}
-// 确认筛选条件
-function confirmOption() {
-  const isCheck = checkOrderOption()
-  if (isCheck) {
-    const isEmptyObject = Object.keys(conditionParams.value).length === 0
-    emit('update:conditionParams', isEmptyObject ? undefined : conditionParams.value)
-    emit('onRefresh', {})
-    listFilterMenu.value.toggle(false)
-  }
-}
-
-onMounted(() => {
-  // currentOrderVal.value = props.orderVal
-  // currentSortordVal.value = props.sortordVal
-  // disposalData()
-})
-
-</script>
-
-<template>
-  <div id="XCellListFilter">
-    <VanDropdownMenu :close-on-click-outside="false">
-      <VanDropdownItem ref="listFilterMenu">
-        <template #title>
-          <VanIcon name="filter-o" size="20" />
-        </template>
-        <div class="order-condition">
-          <template v-if="props.orderList.length>0">
-            <VanRow justify="space-between" class="filter-title">
-              <VanCol span="10">
-                排序字段
-              </VanCol>
-              <VanCol span="2">
-                <div class="reset-item" @click.stop="currentOrderVal = undefined">
-                  重置
-                </div>
-              </VanCol>
-            </VanRow>
-            <XGridDropOption :columns="props.orderList" :columns-field-names="colFieldNames" v-model="currentOrderVal"/>
-            <VanRow justify="space-between" class="filter-title">
-              <VanCol span="10">
-                排序规则
-              </VanCol>
-              <VanCol span="2">
-                <div class="reset-item" @click.stop="currentSortordVal = undefined">
-                  重置
-                </div>
-              </VanCol>
-            </VanRow>
-            <XGridDropOption :columns="sortordList" :columns-field-names="colFieldNames" v-model="currentSortordVal"/>
-          </template>
-          <template v-for="(item, index) in props.formQuery" :key="item.model">
-            <VanRow justify="space-between" class="filter-title">
-              <VanCol span="10">
-                {{ item.name }}
-              </VanCol>
-              <VanCol span="2">
-                <div class="reset-item" @click.stop="resetOptionItem(item.model)">
-                  重置
-                </div>
-              </VanCol>
-            </VanRow>
-            <XFormItem :attr="item" v-model="conditionParams[item.model]" :show-label="false"/>
-          </template>
-        </div>
-        <div class="operations-panel">
-          <VanButton type="default" @click="resetOption">
-            重置
-          </VanButton>
-          <VanButton type="primary" @click="confirmOption">
-            查询
-          </VanButton>
-        </div>
-      </VanDropdownItem>
-    </VanDropdownMenu>
-  </div>
-</template>
-
-<style scoped lang="less">
-#XCellListFilter {
-  .order-condition {
-    // padding-bottom: 10px;
-    max-height: calc(var(--van-picker-toolbar-height) + var(--van-padding-base) + var(--van-tabs-line-height) + 35vh);
-    overflow-y: auto;
-    width: 100%;
-    background-color: white;
-    .filter-title {
-      height: 2rem;
-      font-size: 13px;
-      font-weight: 600;
-      line-height: 2rem;
-      margin: 5px 1rem 1px 1rem;
-      color: black;
-    }
-    .range-picker-list {
-      .range-picker-title {
-        height: 2rem;
-        font-size: 13px;
-        font-weight: 600;
-        line-height: 2rem;
-        margin: 5px 1rem 1px 1rem;
-        color: black;
-      }
-      .range-picker-time {
-        display: inline-block;
-        background: #f8f8f8;
-        border-radius: 8px;
-        font-size: 13px;
-        margin: 0 1rem;
-        height: 2rem;
-        line-height: 2rem;
-        width: 40vw;
-        text-align: center;
-      }
-      /* 已完成选择的时间 */
-      .active-picker-time {
-        color: blue;
-      }
-    }
-    /* 重置元素按钮 */
-    .reset-item {
-      font-weight: 500;
-      color: blue;
-    }
-  }
-  /* 下拉菜单的操作面板 */
-  .operations-panel {
-    display: flex;
-    overflow: hidden;
-    user-select: none;
-    padding: 10px;
-
-    & > .van-button {
-      flex: 1;
-      margin: 0;
-
-      &:first-child {
-        margin-right: 12px;
-      }
-    }
-  }
-  /* 时间范围组件 */
-  .rangePicker-comp-box {
-    :deep(.van-calendar) {
-      height: 58vh;
-    }
-    :deep(.van-calendar__header-title) {
-      background-color: rgba(25, 137, 250, 0.1);
-      height: 8vh;
-      line-height: 8vh;
-    }
-    :deep(.van-calendar__month-mark) {
-      color: rgba(25, 137, 250, 0.1);
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import { defineEmits, defineModel, defineProps, onMounted, ref } from 'vue'
+import {
+  Button as VanButton,
+  Col as VanCol,
+  DropdownItem as VanDropdownItem,
+  DropdownMenu as VanDropdownMenu,
+  Icon as VanIcon,
+  Row as VanRow,
+  showFailToast,
+} from 'vant'
+import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
+import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
+
+const props = defineProps<{
+  orderVal?: string
+  sortordVal?: string
+  orderList?: any[]
+  formQuery?: any[]
+  buttonState?: any
+}>()
+
+const emit = defineEmits([
+  'update:orderVal',
+  'update:sortordVal',
+  'update:conditionParams',
+  'onRefresh',
+  'addOption',
+])
+// 排序字段
+const currentOrderVal = defineModel('orderVal')
+// 排序规则
+const currentSortordVal = defineModel('sortordVal')
+// 下拉菜单元素
+const listFilterMenu = ref(null)
+// 排序规则列表
+const sortordList = ref([
+  { title: '正序', value: 'ascend' },
+  { title: '倒序', value: 'descend' },
+])
+const colFieldNames = {
+  text: 'title',
+  value: 'value',
+}
+// 查询条件参数     !!!!!建议最后点击确认的时候完成这个的整理
+const conditionParams = ref({})
+
+// 重置某个选项
+function resetOptionItem(type) {
+  if (conditionParams.value[type] !== undefined)
+    conditionParams.value[type] = undefined
+}
+// 重置所有选项
+function resetOption() {
+  currentOrderVal.value = undefined
+  currentSortordVal.value = undefined
+  // 条件参数
+  conditionParams.value = {}
+}
+function checkOrderOption() {
+  let isCheck = true
+  if (currentOrderVal.value) {
+    if (!currentSortordVal.value) {
+      showFailToast('排序规则不能为空')
+      isCheck = false
+    }
+  }
+  else if (currentSortordVal.value) {
+    if (!currentOrderVal.value) {
+      showFailToast('排序字段不能为空')
+      isCheck = false
+    }
+  }
+  return isCheck
+}
+// 确认筛选条件
+function confirmOption() {
+  const isCheck = checkOrderOption()
+  if (isCheck) {
+    const isEmptyObject = Object.keys(conditionParams.value).length === 0
+    emit('update:conditionParams', isEmptyObject ? undefined : conditionParams.value)
+    emit('onRefresh', {})
+    listFilterMenu.value.toggle(false)
+  }
+}
+
+// 新增按钮
+function addOption() {
+  emit('addOption')
+}
+
+onMounted(() => {
+  // currentOrderVal.value = props.orderVal
+  // currentSortordVal.value = props.sortordVal
+  // disposalData()
+})
+</script>
+
+<template>
+  <div id="XCellListFilter">
+    <VanDropdownMenu :close-on-click-outside="false">
+      <VanDropdownItem ref="listFilterMenu">
+        <template #title>
+          <VanIcon name="filter-o" size="20" />
+        </template>
+        <div class="order-condition">
+          <template v-if="props.orderList.length > 0">
+            <VanRow justify="space-between" class="filter-title">
+              <VanCol span="10">
+                排序字段
+              </VanCol>
+              <VanCol span="2">
+                <div class="reset-item" @click.stop="currentOrderVal = undefined">
+                  重置
+                </div>
+              </VanCol>
+            </VanRow>
+            <XGridDropOption :columns="props.orderList" :columns-field-names="colFieldNames" />
+            <VanRow justify="space-between" class="filter-title">
+              <VanCol span="10">
+                排序规则
+              </VanCol>
+              <VanCol span="2">
+                <div class="reset-item" @click.stop="currentSortordVal = undefined">
+                  重置
+                </div>
+              </VanCol>
+            </VanRow>
+            <XGridDropOption :columns="sortordList" :columns-field-names="colFieldNames" />
+          </template>
+          <template v-for="(item, index) in props.formQuery" :key="`${item.model}${index}`">
+            <VanRow justify="space-between" class="filter-title">
+              <VanCol span="10">
+                {{ item.name }}
+              </VanCol>
+              <VanCol span="2">
+                <div class="reset-item" @click.stop="resetOptionItem(item.model)">
+                  重置
+                </div>
+              </VanCol>
+            </VanRow>
+            <XFormItem v-model="conditionParams[item.model]" :attr="item" :show-label="false" />
+          </template>
+        </div>
+        <div class="operations-panel">
+          <VanButton type="default" @click="resetOption">
+            重置
+          </VanButton>
+          <VanButton v-if="props.buttonState.add && props.buttonState.add === true" type="primary" @click="addOption">
+            新增
+          </VanButton>
+          <VanButton type="primary" @click="confirmOption">
+            查询
+          </VanButton>
+        </div>
+      </VanDropdownItem>
+    </VanDropdownMenu>
+  </div>
+</template>
+
+<style scoped lang="less">
+#XCellListFilter {
+  .order-condition {
+    // padding-bottom: 10px;
+    max-height: calc(var(--van-picker-toolbar-height) + var(--van-padding-base) + var(--van-tabs-line-height) + 35vh);
+    overflow-y: auto;
+    width: 100%;
+    background-color: white;
+    .filter-title {
+      height: 2rem;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 2rem;
+      margin: 5px 1rem 1px 1rem;
+      color: black;
+    }
+    .range-picker-list {
+      .range-picker-title {
+        height: 2rem;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 2rem;
+        margin: 5px 1rem 1px 1rem;
+        color: black;
+      }
+      .range-picker-time {
+        display: inline-block;
+        background: #f8f8f8;
+        border-radius: 8px;
+        font-size: 13px;
+        margin: 0 1rem;
+        height: 2rem;
+        line-height: 2rem;
+        width: 40vw;
+        text-align: center;
+      }
+      /* 已完成选择的时间 */
+      .active-picker-time {
+        color: blue;
+      }
+    }
+    /* 重置元素按钮 */
+    .reset-item {
+      font-weight: 500;
+      color: blue;
+    }
+  }
+  /* 下拉菜单的操作面板 */
+  .operations-panel {
+    display: flex;
+    overflow: hidden;
+    user-select: none;
+    padding: 10px;
+    gap: 12px;
+
+    & > .van-button {
+      flex: 1;
+      margin: 0;
+
+      //&:first-child {
+      //  margin-right: 12px;
+      //}
+    }
+  }
+  /* 时间范围组件 */
+  .rangePicker-comp-box {
+    :deep(.van-calendar) {
+      height: 58vh;
+    }
+    :deep(.van-calendar__header-title) {
+      background-color: rgba(25, 137, 250, 0.1);
+      height: 8vh;
+      line-height: 8vh;
+    }
+    :deep(.van-calendar__month-mark) {
+      color: rgba(25, 137, 250, 0.1);
+    }
+  }
+}
+</style>