push

lib/component/form/date-picker/date-picker.vue

@@ -0,0 +1,13 @@
+<!-- @format -->
+
+<template>
+  <a-date-picker />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'NsDatePicker',
+  });
+</script>
+<style lang="less" scoped></style>

lib/component/form/date-picker/index.ts

@@ -0,0 +1,21 @@
+import type { App } from 'vue';
+import nsDatePicker from './date-picker.vue';
+import nsMonthPicker from './month-picker.vue';
+import nsRangePicker from './range-picker.vue';
+import nsWeekPicker from './week-picker.vue';
+import nsYearPicker from './year-picker.vue';
+import vueCron from './v-cron.vue';
+nsDatePicker.RangePicker = nsRangePicker;
+nsDatePicker.MonthPicker = nsMonthPicker;
+nsDatePicker.WeekPicker = nsWeekPicker;
+nsDatePicker.YearPicker = nsYearPicker;
+nsDatePicker.vueCron = vueCron;
+export const NsDatePicker = function (app: App) {
+  app.component(nsDatePicker.name, nsDatePicker);
+  app.component(nsDatePicker.RangePicker.name, nsDatePicker.RangePicker);
+  app.component(nsDatePicker.MonthPicker.name, nsDatePicker.MonthPicker);
+  app.component(nsDatePicker.WeekPicker.name, nsDatePicker.WeekPicker);
+  app.component(nsDatePicker.YearPicker.name, nsDatePicker.YearPicker);
+  app.component(nsDatePicker.vueCron.name, nsDatePicker.vueCron);
+  return app;
+};

lib/component/form/date-picker/month-picker.vue

@@ -0,0 +1,11 @@
+<template>
+  <a-month-picker />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'NsMonthPicker',
+  });
+</script>
+<style lang="less" scoped></style>

lib/component/form/date-picker/range-picker.vue

@@ -0,0 +1,11 @@
+<template>
+  <a-range-picker />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'NsRangePicker',
+  });
+</script>
+<style lang="less" scoped></style>

lib/component/form/date-picker/v-cron.vue

@@ -0,0 +1,74 @@
+
+<template>
+  <div class="components-input-demo-presuffix">
+    <a-input @click="openModal" placeholder="corn表达式" v-model:value="cron" @change="handleOK">
+      <template #prefix>
+        <a-icon type="schedule" title="corn控件" />
+      </template>
+      <template #suffix>
+        <a-icon v-if="cron" type="close-circle" @click="handleEmpty" title="清空" />
+      </template>
+    </a-input>
+    <JCronModal ref="innerVueCron" :data="cron" @ok="handleOK"></JCronModal>
+  </div>
+</template>
+<script>
+import JCronModal from './cron-antd.vue';
+export default {
+  name: 'vCron',
+  components: {
+    JCronModal,
+  },
+  props: {
+    value: {
+      required: false,
+      type: String,
+      default: () => {
+        return '0 * * * * ? *';
+      },
+    },
+  },
+  data() {
+    return {
+      cron: this.value,
+    };
+  },
+  watch: {
+    value(val) {
+      this.cron = val;
+    },
+  },
+  methods: {
+    openModal() {
+      this.$refs.innerVueCron.show();
+    },
+    handleOK(val) {
+      if(typeof(val) !== 'string') return ;
+      this.cron = val;
+      this.$emit('change', this.cron);
+      //this.$emit("change", Object.assign({},  this.cron));
+    },
+    handleEmpty() {
+      this.handleOK('');
+    },
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+};
+</script>
+<style scoped>
+.components-input-demo-presuffix .anticon-close-circle {
+  cursor: pointer;
+  color: #ccc;
+  transition: color 0.3s;
+  font-size: 12px;
+}
+.components-input-demo-presuffix .anticon-close-circle:hover {
+  color: #f5222d;
+}
+.components-input-demo-presuffix .anticon-close-circle:active {
+  color: #666;
+}
+</style>

lib/component/form/date-picker/week-picker.vue

@@ -0,0 +1,11 @@
+<template>
+  <a-week-picker />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'NsWeekPicker',
+  });
+</script>
+<style lang="less" scoped></style>

lib/component/form/date-picker/year-picker.vue

@@ -0,0 +1,11 @@
+<template>
+  <a-date-picker picker="year" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    name: 'NsYearPicker',
+  });
+</script>
+<style lang="less" scoped></style>