yunxinguanli

src/components/form/area/index.vue

@@ -0,0 +1,26 @@
+<template>
+    <el-cascader v-bind='$attrs' :options='options' :props='cascaderProps' />
+</template>
+
+<script lang='ts' setup>
+import { defineComponent } from 'vue'
+
+defineOptions({
+    name: 'Area'
+})
+import { useDictData } from '@/stores/dictData'
+
+const cascaderProps = {
+    label: 'name',
+    value: 'id',
+    checkStrictly: true,
+    showAllLevels: false
+}
+const dictData = useDictData()
+const options = dictData.state.area
+
+</script>
+
+<style scoped>
+
+</style>

src/components/form/datePicker/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <el-date-picker
+        v-bind='$attrs'
+        type='daterange'
+        unlink-panels
+        range-separator='至'
+        start-placeholder='开始日期'
+        end-placeholder='结束日期'
+        value-format='YYYY-MM-DD'
+        :shortcuts='shortcuts'
+    />
+</template>
+
+<script lang='ts' setup>
+import { ref } from 'vue'
+
+const shortcuts = [
+    {
+        text: '最近一周',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            return [start, end]
+        }
+    },
+    {
+        text: '最近一个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            return [start, end]
+        }
+    },
+    {
+        text: '最近3个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            return [start, end]
+        }
+    }
+]
+</script>
+
+<style scoped>
+.demo-date-picker {
+    display: flex;
+    width: 100%;
+    padding: 0;
+    flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px var(--el-border-color);
+    flex: 1;
+}
+
+.demo-date-picker .block:last-child {
+    border-right: none;
+}
+
+.demo-date-picker .demonstration {
+    display: block;
+    color: var(--el-text-color-secondary);
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+</style>