|
@@ -0,0 +1,127 @@
|
|
|
+<template>
|
|
|
+ <Base-dialog
|
|
|
+ title="设置"
|
|
|
+ width="700px"
|
|
|
+ :isShow.sync="isShow"
|
|
|
+ @submit="submit"
|
|
|
+ >
|
|
|
+ <div class="day-set-box">
|
|
|
+ <el-select v-model="atype" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-form
|
|
|
+ :model="{ list }"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="400px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ :label="item.name"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="item.id"
|
|
|
+ :prop="'list.' + index + '.date1'"
|
|
|
+ :rules="{ validator: validateDate, trigger: 'change' }"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ style="witdh: 150px"
|
|
|
+ v-model="item.date1"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ value-format="timestamp"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </Base-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [{ name: "213" }],
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "1",
|
|
|
+ label: "顺序添加",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ atype: "1",
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ isShow: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.atype = "1";
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.ruleForm.clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ open(row) {
|
|
|
+ this.isShow = true;
|
|
|
+ },
|
|
|
+ search() {},
|
|
|
+ submit() {
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert("submit!");
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ validateDate(rule, value, callback) {
|
|
|
+ if (!value) {
|
|
|
+ return callback();
|
|
|
+ }
|
|
|
+ let list = this.list.filter((e) => e.date1 == value);
|
|
|
+ if (list.length > 1) {
|
|
|
+ return callback(new Error("存在重复时间"));
|
|
|
+ }
|
|
|
+ return callback();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isShow: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.day-set-box {
|
|
|
+ .demo-ruleForm {
|
|
|
+ max-height: 500px;
|
|
|
+ overflow-x: auto;
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-left: 20px;
|
|
|
+ /deep/ {
|
|
|
+ .el-date-editor.el-input,
|
|
|
+ .el-date-editor.el-input__inner {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|