@kyfe/fms-vue2-components 0.0.3 → 0.0.5

package/dist/week-select.27efca5c.js

@@ -0,0 +1,70 @@
+import { c as s } from "./utils.159fba19.js";
+import { n as c } from "./plugin-vue2_normalizer.ed7092a9.js";
+import './oa-datetime-picker-new/style.css';const d = {
+  name: "week-select",
+  props: {
+    defaultValue: {
+      type: [Date, String, Number],
+      default: new Date()
+    },
+    yearRange: {
+      type: Array,
+      default: () => [new Date().getFullYear() - 2, new Date().getFullYear()]
+    },
+    horizontal: {
+      type: Boolean,
+      default: !1
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      years: s(this.yearRange, this.firstDayOfWeek),
+      currentYear: null,
+      currentWeek: null,
+      currentStart: null,
+      currentEnd: null
+    };
+  },
+  methods: {
+    init() {
+      let r = new Date(this.defaultValue), e = r.getFullYear(), t = this.years.find((a) => a.year === e), n = t.weeks.findIndex((a) => +a.startDay <= +r && +a.endDay >= +r), l = t.weeks[n];
+      this.handleSelect(e, n + 1, l), this.scrollInto();
+    },
+    scrollInto() {
+      setTimeout(() => {
+        let r = this.$el.querySelector(".ks-week__selected-day");
+        this.$refs.body && (this.$refs.body.scrollTop = r ? r.getBoundingClientRect().top - 100 : 0);
+      }, 240);
+    },
+    handleSelect(r, e, t) {
+      this.currentYear = r, this.currentWeek = e, this.currentStart = t.startDay, this.currentEnd = t.endDay, this.$emit("select", { year: r, week: t, num: e });
+    }
+  }
+};
+var _ = function() {
+  var e = this, t = e._self._c;
+  return t("div", { ref: "body", staticClass: "van-calendar__body" }, e._l(e.years, function(n) {
+    return t("div", { key: n.year, staticClass: "van-calendar__month" }, [t("div", { staticClass: "van-calendar__month-title" }, [e._v(e._s(n.year) + "\u5E74")]), t("div", { staticClass: "van-calendar__days" }, e._l(n.weeks, function(l, a) {
+      return t("div", { key: a, staticClass: "van-calendar__day ks-week__day", class: { "ks-week__selected-day": n.year === e.currentYear && a + 1 === e.currentWeek }, on: { click: function(o) {
+        return e.handleSelect(n.year, a + 1, l);
+      } } }, [t("div", [e._v(e._s(String(a + 1).length > 1 ? a + 1 : "0" + (a + 1)) + "\u5468(" + e._s(l.startDayStr) + "~" + e._s(l.endDayStr) + ")")])]);
+    }), 0)]);
+  }), 0);
+}, u = [], i = /* @__PURE__ */ c(
+  d,
+  _,
+  u,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const h = i.exports;
+export {
+  h as default
+};

package/package.json

@@ -1,31 +1,31 @@
-{
-  "name": "@kyfe/fms-vue2-components",
-  "version": "0.0.3",
-  "description": "",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "type": "module",
-  "scripts": {
-    "build": "vite build",
-    "dev:build": "npm run build && yalc publish && yalc link"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@vitejs/plugin-vue2": "^1.1.2",
-    "@vitejs/plugin-vue2-jsx": "^1.1.1",
-    "vite": "3.2.10",
-    "vite-plugin-lib-inject-css": "^2.2.2",
-    "vite-plugin-libcss": "^1.1.2"
-  },
-  "dependencies": {
-    "@kyfe/decrypt": "^0.0.7",
-    "@kyfe/fms-utils": "workspace:*",
-    "dayjs": "^1.11.13",
-    "vant": "2.5.6"
-  },
-  "sideEffects": [
-    "**/*.css"
-  ]
-}
+{
+  "name": "@kyfe/fms-vue2-components",
+  "version": "0.0.5",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "npm run build && yalc publish && yalc link"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "@vitejs/plugin-vue2-jsx": "^1.1.1",
+    "vite": "3.2.10",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-libcss": "^1.1.2"
+  },
+  "dependencies": {
+    "@kyfe/decrypt": "^0.0.7",
+    "@kyfe/fms-utils": "1.0.1",
+    "dayjs": "^1.11.13",
+    "vant": "2.5.6"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}

package/src/assets/images/attachment/icon_default.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>icon_通用文件</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10通用申请-申请表单5已撤销" transform="translate(-47.000000, -1919.000000)" fill-rule="nonzero">
+            <g id="编组-9备份-2" transform="translate(0.000000, 1880.000000)">
+                <g id="icon_通用文件" transform="translate(47.000000, 39.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="42" height="42"></rect>
+                    <g id="PPT" transform="translate(3.000000, 1.000000)">
+                        <path d="M36,9.67000003 L28.82,9.67000003 C27.7154305,9.67000003 26.82,8.77456952 26.82,7.67000002 L26.82,0 L2,0 C0.895430507,0 0,0.895430507 0,2 L0,38 C0.00223279535,38.5295769 0.214412225,39.0366497 0.590000016,39.41 C0.958779535,39.792325 1.4688337,40.0057519 2,40.0001134 L34,40.0001134 C35.1045695,40.0001134 36,39.1045695 36,38 L36,9.68000002 L36,9.67000003 Z" id="路径" fill="#978AF9"></path>
+                        <g id="编组-10" transform="translate(9.000000, 12.000000)">
+                            <path d="M8.7133758,7.36050955 C8.91974522,7.24585987 9.17197452,7.17707006 9.42420382,7.17707006 C9.67643312,7.17707006 9.92866242,7.24585987 10.1350318,7.36050955 L18.4127389,12.1528662 C18.6191083,12.2675159 18.7796178,12.5197452 18.7796178,12.7719745 C18.7796178,13.0242038 18.6420382,13.2764331 18.4127389,13.3910828 L10.066242,18.2292994 C9.85987261,18.343949 9.60764331,18.4127389 9.35541401,18.4127389 C9.10318471,18.4127389 8.85095541,18.343949 8.64458599,18.2292994 L0.366878981,13.4140127 C0.160509554,13.2993631 3.55271368e-15,13.0471338 3.55271368e-15,12.7949045 C3.55271368e-15,12.5426752 0.137579618,12.2904459 0.366878981,12.1757962 L8.7133758,7.36050955 L8.7133758,7.36050955 Z" id="路径" fill="#BAB0FF"></path>
+                            <path d="M8.7133758,0.18343949 C8.91974522,0.0687898089 9.17197452,-2.39808173e-14 9.42420382,-2.39808173e-14 C9.67643312,-2.39808173e-14 9.92866242,0.0687898089 10.1350318,0.18343949 L18.4127389,4.97579618 C18.6191083,5.09044586 18.7796178,5.34267516 18.7796178,5.59490446 C18.7796178,5.84713376 18.6420382,6.09936306 18.4127389,6.21401274 L10.066242,11.0522293 C9.85987261,11.166879 9.60764331,11.2356688 9.35541401,11.2356688 C9.10318471,11.2356688 8.85095541,11.166879 8.64458599,11.0522293 L0.366878981,6.25987261 C0.160509554,6.14522293 1.42108547e-14,5.89299363 1.42108547e-14,5.64076433 C1.42108547e-14,5.38853503 0.137579618,5.13630573 0.366878981,5.02165605 L8.7133758,0.18343949 L8.7133758,0.18343949 Z" id="路径" fill="#FFFFFF"></path>
+                        </g>
+                        <path d="M36,9.67562498 L28.83,9.67562498 C27.7254305,9.67562498 26.83,8.78019451 26.83,7.67562502 L26.83,0.0156249844 L36,9.67562498 Z" id="路径" fill="#BAB0FF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/images/attachment/icon_excel.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>icon_excel</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10通用申请-申请表单支持附件显示" transform="translate(-47.000000, -1874.000000)" fill-rule="nonzero">
+            <g id="编组-9备份-2" transform="translate(0.000000, 1844.000000)">
+                <g id="icon_excel" transform="translate(47.000000, 30.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="42" height="42"></rect>
+                    <g id="PPT" transform="translate(3.000000, 1.000000)">
+                        <path d="M36,9.67000003 L28.82,9.67000003 C27.7154305,9.67000003 26.82,8.77456952 26.82,7.67000002 L26.82,0 L2,0 C0.895430507,0 0,0.895430507 0,2 L0,38 C0.00223279535,38.5295769 0.214412225,39.0366497 0.590000016,39.41 C0.958779535,39.792325 1.4688337,40.0057519 2,40.0001134 L34,40.0001134 C35.1045695,40.0001134 36,39.1045695 36,38 L36,9.68000002 L36,9.67000003 Z" id="路径" fill="#5ACC9B"></path>
+                        <polygon id="路径" fill="#FFFFFF" points="16.2308917 20.8073248 11.3582803 14 14.7261146 14 17.9148089 18.8726115 21.2468153 14 24.5071656 14 19.5270701 20.8073248 24.7579618 28.044586 21.3542994 28.044586 17.8431529 22.8853503 14.3320064 28.080414 11 28.080414"></polygon>
+                        <path d="M36,9.67562498 L28.83,9.67562498 C27.7254305,9.67562498 26.83,8.78019451 26.83,7.67562502 L26.83,0.0156249844 L36,9.67562498 Z" id="路径" fill="#BDEBD7"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/images/attachment/icon_ppt.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>icon_ppt</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10通用申请-申请表单支持附件显示" transform="translate(-47.000000, -1670.000000)" fill-rule="nonzero">
+            <g id="编组-9" transform="translate(0.000000, 1640.000000)">
+                <g id="icon_ppt" transform="translate(47.000000, 30.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="42" height="42"></rect>
+                    <g id="PPT" transform="translate(3.000000, 1.000000)" fill="#F25B4C">
+                        <path d="M21.8,17.775625 C21.8,19.475625 20.8,20.285625 18.8,20.315625 L15.65,20.315625 L15.65,15.405625 L18.77,15.405625 C20.76,15.455625 21.73,16.215625 21.8,17.775625 Z" id="路径"></path>
+                        <path d="M36,9.68562502 L28.82,9.68562502 C27.7154305,9.68562502 26.82,8.79019451 26.82,7.685625 L26.82,0.0156249844 L2,0.0156249844 C0.895430507,0.0156249844 0,0.911055492 0,2.01562498 L0,38.015625 C0.00223279535,38.5452019 0.214412225,39.0522747 0.590000016,39.425625 C0.958779535,39.80795 1.4688337,40.0213769 2,40.0157383 L34,40.0157383 C35.1045695,40.0157383 36,39.1201945 36,38.015625 L36,9.695625 L36,9.68562502 Z M19.06,22.955625 L15.65,22.955625 L15.65,28.585625 L12.53,28.585625 L12.53,12.825625 L19.28,12.825625 C22.86,12.985625 24.78,14.615625 25,17.715625 C25,21.145625 22.94,22.895625 19.06,22.955625 Z" id="形状"></path>
+                        <path d="M36,9.67562498 L28.83,9.67562498 C27.7254305,9.67562498 26.83,8.78019451 26.83,7.67562502 L26.83,0.0156249844 L36,9.67562498 Z" id="路径" opacity="0.6"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/images/attachment/icon_word.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>icon_word</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10通用申请-申请表单支持附件显示" transform="translate(-47.000000, -1772.000000)" fill-rule="nonzero">
+            <g id="编组-9备份" transform="translate(0.000000, 1742.000000)">
+                <g id="icon_word" transform="translate(47.000000, 30.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="42" height="42"></rect>
+                    <g id="PPT" transform="translate(3.000000, 1.000000)">
+                        <path d="M26.82,0.0156249844 L26.82,7.685625 C26.82,8.79019451 27.7154305,9.68562502 28.82,9.68562502 L28.82,9.68562502 L36,9.68562502 L36,38.015625 C36,39.1201945 35.1045695,40.0157383 34,40.0157383 L34,40.0157383 L2,40.0157383 C1.4688337,40.0213769 0.958779535,39.80795 0.590000016,39.425625 C0.214412225,39.0522747 0.00223279535,38.5452019 0,38.015625 L0,38.015625 L0,2.01562498 C0,0.911055492 0.895430507,0.0156249844 2,0.0156249844 L2,0.0156249844 L26.82,0.0156249844 Z M11.2072929,14.0285714 L8.94375,14.0285714 L12.7234072,29.1142857 L14.7832928,29.1142857 L17.78535,18.0427428 L17.9211214,18.0427428 L20.9327786,29.1142857 L22.9830643,29.1142857 L26.7723214,14.0285714 L24.5087786,14.0285714 L21.9435214,25.5808 L21.80775,25.5808 L18.8632929,14.0285714 L16.8431786,14.0285714 L13.9186072,25.5808 L13.7828357,25.5808 L11.2072929,14.0285714 Z" id="形状" fill="#2C97FF"></path>
+                        <path d="M36,9.67562498 L28.83,9.67562498 C27.7254305,9.67562498 26.83,8.78019451 26.83,7.67562502 L26.83,0.0156249844 L36,9.67562498 Z" id="路径" fill="#80C0FF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/images/icon-forewarning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="12" height="12.000244140625" viewBox="0 0 12 12.000244140625"><g><path d="M6.50335,0.405392C6.50335,0.180848,6.31453,0,6.08085,0C5.84718,0,5.65836,0.180861,5.65837,0.404183L5.65837,1.85214L6.50335,1.85214L6.50335,0.405392ZM3.27574,1.09094C3.16833,0.900369,2.92996,0.834833,2.74468,0.945285L2.74467,0.945285C2.55822,1.05693,2.4945,1.30211,2.60187,1.49389L3.31585,2.77073L3.99089,2.36899L3.27691,1.09214C3.27574,1.09214,3.27574,1.09094,3.27574,1.09094ZM9.56219,1.49519C9.66959,1.30342,9.60588,1.05702,9.41939,0.945369L9.41704,0.945369C9.23176,0.836137,8.99338,0.901673,8.88718,1.09344L8.1732,2.37028L8.84823,2.77203L9.56219,1.49519ZM2.05547,10.9366L2.05547,7.11387C2.05547,4.82722,3.85751,2.97266,6.08203,2.97266C8.30655,2.97266,10.1086,4.82723,10.1086,7.11387L10.1086,10.9366L11.4831,10.9366C11.7686,10.9366,12,11.1747,12,11.4684C12,11.7621,11.7686,12.0002,11.4831,12.0002L0.516867,12.0002C0.231404,12.0002,0,11.7621,0,11.4684C0,11.1747,0.231404,10.9366,0.516867,10.9366L2.05547,10.9366ZM11.7195,4.01866C11.9059,3.90701,11.9696,3.66061,11.8622,3.46886L11.8622,3.46883C11.8622,3.46762,11.8611,3.46762,11.8611,3.46642C11.7537,3.27586,11.5153,3.21033,11.33,3.32077L10.0932,4.05872L10.4827,4.75539L11.7195,4.01866ZM0.832871,3.32091C0.6464,3.21046,0.408018,3.27722,0.301814,3.469L0.301814,3.46898C0.194412,3.66074,0.258151,3.90714,0.444599,4.01758L1.68137,4.75676L2.0708,4.06008L0.834046,3.32213C0.834046,3.32091,0.832871,3.32091,0.832871,3.32091ZM4.38737,8.00557L6.37352,4.64111L5.9758,7.16446L7.56426,7.16446L5.57812,10.5289L5.97581,8.00557L4.38737,8.00557Z" fill-rule="evenodd" fill="#FD4948" fill-opacity="1"/></g></svg>

package/src/components/date-picker/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="ksui-datatime">
+    <van-field readonly
+               name="datetimePicker"
+               input-align="right"
+               error-message-align="right"
+               :required="required"
+               :rules="[{ required: required, message: `请选择${label}` }]"
+               :value="value | date"
+               :label="label"
+               right-icon="arrow"
+               :placeholder="placeholder"
+               @click="show" />
+
+    <van-popup :value="showPicker"
+               position="bottom"
+               get-container="body"
+               @input="onInput">
+      <div class="ksui-datatime-header">
+        <span>{{ currentDate | date }}</span>
+        <div class="icon-box"
+             @click="onClose">
+          <van-icon name="cross" />
+        </div>
+      </div>
+      <datetime-picker ref="datetimePicker"
+                       v-model="currentDate"
+                       v-bind="$attrs"
+                       :type="type"
+                       :max-date="maxDate"
+                       :min-date="minDate"
+                       :formatter="formatter"
+                       :showToolbar="false"
+                       @change="onChange">
+      </datetime-picker>
+      <div class="ksui-datatime-footer">
+        <van-button type="primary"
+                    @click="onConfirm"
+                    size="large">确定</van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  const currentYear = new Date().getFullYear()
+
+  import DatetimePicker from '../datetime-popup/index.js'
+  import moment from 'dayjs'
+  export default {
+    components: {
+      DatetimePicker
+    },
+    props: {
+      type: {
+        type: String,
+        default: 'datetime'
+      },
+      minDate: {
+        type: Date,
+        default: () => new Date(currentYear - 10, 0, 1)
+      },
+      maxDate: {
+        type: Date,
+        default: () => new Date(currentYear + 10, 11, 31)
+      },
+      label: String,
+      placeholder: String,
+      required: Boolean,
+      disabled: Boolean,
+      value: {
+        type: [Date, String, Number],
+        default: new Date()
+      }
+    },
+    model: {
+      event: 'input-value',
+      prop: 'value'
+    },
+    data () {
+      return {
+        showPicker: false,
+        currentDate: this.value || new Date()
+      }
+    },
+    created () {
+      console.log('currentDate', this.currentDate)
+    },
+    methods: {
+      formatter (type, val) {
+        if (type === 'year') {
+          return `${val}年`
+        } else if (type === 'month') {
+          return `${val}月`
+        } else if (type === 'day') {
+          return `${val}日`
+        } else if (type === 'hour') {
+          return `${val}时`
+        } else if (type === 'minute') {
+          return `${val}分`
+        }
+        return val
+      },
+      show () {
+        // 禁用选择
+        if (this.disabled) {
+          return false
+        }
+        this.showPicker = true
+      },
+      close () {
+        this.showPicker = false
+      },
+      onInput () {
+        this.close()
+        this.$emit('input', false)
+      },
+      onClose () {
+        this.close()
+        this.$emit('input', false)
+      },
+      onConfirm () {
+        console.log('onConfirmmaxDate', this.maxDate)
+        this.close()
+        let innerValue = this.$refs.datetimePicker.getInnerValue()
+        let formatMap = [
+          {
+            label: 'year-month',
+            value: 'YYYY-MM'
+          },
+          {
+            label: 'date',
+            value: 'YYYY-MM-DD'
+          },
+          {
+            label: 'datetime',
+            value: 'YYYY-MM-DD HH:mm:ss'
+          }
+        ]
+        let format = formatMap.find(t => t.label === this.type)
+        console.log('format---', format, innerValue, format.value)
+        const value = moment(innerValue).format(format ? format.value : 'YYYY-MM-DD HH:mm:ss')
+        this.$emit('input-value', value)
+        this.$emit('input', value)
+      },
+      onChange () {
+        let picker = this.$refs.datetimePicker.getPicker()
+        this.$emit('change', picker)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .ksui-datatime {
+    &-header {
+      height: 54px;
+      font-weight: 500;
+      display: flex;
+      flex-shrink: 0;
+      padding: 0 16px 0 20px;
+      font-size: 18px;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #ededed;
+    }
+    &-footer {
+      padding: 16px;
+      position: relative;
+      // &::after {
+      //   position: absolute;
+      //   box-sizing: border-box;
+      //   content: ' ';
+      //   pointer-events: none;
+      //   right: 0;
+      //   top: 0;
+      //   left: 0;
+      //   border-top: 1px solid #EDEDED;
+      //   transform: scaleY(0.5);
+      // }
+    }
+    .van-picker {
+      padding: 0 20px;
+    }
+    .van-picker__frame {
+      background: rgba(121, 114, 254, 0.1);
+      border-radius: 8px;
+    }
+    .van-hairline-unset--top-bottom:after {
+      border: 0;
+    }
+    .van-cell:after {
+      position: absolute;
+      content: " ";
+      pointer-events: none;
+      right: 0;
+      bottom: 0;
+      left: 16px;
+      right: 16px;
+      border-bottom: 1px solid #d9d9d9;
+      -webkit-transform: scaleY(0.5);
+      transform: scaleY(0.5);
+    }
+  }
+</style>

package/src/components/datetime-picker-general/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="ksui-datatime">
+    <van-field readonly
+               name="datetimePicker"
+               input-align="right"
+               error-message-align="right"
+               :required="required"
+               :rules="[{ required: required, message: `请选择${label}` }]"
+               :value="value | date"
+               :label="label"
+               right-icon="arrow"
+               :placeholder="placeholder"
+               @click="show" />
+
+    <van-popup :value="showPicker"
+               position="bottom"
+               get-container="body"
+               @input="onInput">
+      <div class="ksui-datatime-header">
+        <span>{{ currentDate | date }}</span>
+        <div class="icon-box"
+             @click="onClose">
+          <van-icon name="cross" />
+        </div>
+      </div>
+      <datetime-picker ref="datetimePicker"
+                       v-model="currentDate"
+                       v-bind="$attrs"
+                       :showToolbar="false"
+                       @change="onChange">
+      </datetime-picker>
+      <div class="ksui-datatime-footer">
+        <van-button type="primary"
+                    @click="onConfirm"
+                    size="large">确定</van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  import DatetimePicker from '../datetime-popup/index.js'
+  import moment from "dayjs"
+
+  export default {
+    components: {
+      DatetimePicker
+    },
+    props: {
+      label: String,
+      placeholder: String,
+      required: Boolean,
+      value: {
+        type: [Date, String, Number],
+        default: new Date()
+      }
+    },
+    data() {
+      return {
+        showPicker: false,
+        currentDate: this.value ? moment(this.value).toDate() : moment().toDate()
+      }
+    },
+    filters: {
+      date (value, fmt = 'YYYY/MM/DD HH:mm') {
+        if (value) {
+          return moment(value).format(fmt)
+        } else {
+          return ''
+        }
+      },
+    },
+    methods: {
+      show () {
+        this.currentDate = this.value ? moment(this.value).toDate() : moment().toDate()
+        this.showPicker = true
+      },
+      close () {
+        this.showPicker = false
+      },
+      onInput () {
+        this.close()
+        this.$emit('input', false)
+      },
+      onClose () {
+        this.close()
+        this.$emit('input', false)
+      },
+      onConfirm() {
+        this.close()
+        let innerValue = this.$refs.datetimePicker.getInnerValue()
+        let res = innerValue ? moment(innerValue).format('YYYY-MM-DD HH:mm:ss') : innerValue
+        console.log('select time:::', res)
+        this.$emit('input', res)
+        this.$emit('confirm', res)
+      },
+      onChange () {
+        let picker = this.$refs.datetimePicker.getPicker()
+        this.$emit('change', picker)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .ksui-datatime {
+    &-header {
+      height: 54px;
+      font-weight: 500;
+      display: flex;
+      flex-shrink: 0;
+      padding: 0 16px 0 20px;
+      font-size: 18px;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #ededed;
+    }
+    &-footer {
+      padding: 16px;
+      position: relative;
+      // &::after {
+      //   position: absolute;
+      //   box-sizing: border-box;
+      //   content: ' ';
+      //   pointer-events: none;
+      //   right: 0;
+      //   top: 0;
+      //   left: 0;
+      //   border-top: 1px solid #EDEDED;
+      //   transform: scaleY(0.5);
+      // }
+    }
+    .van-picker {
+      padding: 0 20px;
+    }
+    .van-picker__frame {
+      background: rgba(121, 114, 254, 0.1);
+      border-radius: 8px;
+    }
+    .van-hairline-unset--top-bottom:after {
+      border: 0;
+    }
+    .van-cell:after {
+      position: absolute;
+      content: " ";
+      pointer-events: none;
+      right: 0;
+      bottom: 0;
+      left: 16px;
+      right: 16px;
+      border-bottom: 1px solid #ebedf5;
+      -webkit-transform: scaleY(0.5);
+      transform: scaleY(0.5);
+    }
+  }
+</style>
+<style lang="less">
+  .flow-fms-datetime-week {
+    flex: 2
+  }
+</style>