dy-admin-manager/src/views/levelManager/model/grade-operation.vue

<template>
  <el-dialog
    width="500px"
    :title="dialogTitle"
    :visible.sync="operationVisible"
    :before-close="onClose"
    append-to-body
  >
    <el-form
      class="elForm"
      ref="elForm"
      label-position="top"
      :model="forms"
      :inline="false"
      label-width="100px"
    >
      <el-form-item
        label="考级标题"
        :rules="[{ required: true, message: '请输入考级标题' }]"
        prop="name"
      >
        <el-input
          type="text"
          clearable
          maxlength="20"
          v-model="forms.name"
          placeholder="请输入考级标题"
        />
      </el-form-item>
      <el-form-item
        label="适用分部"
        :rules="[{ required: true, message: '请选择适用分部' }]"
        prop="organIds"
      >
        <select-all
          v-model.trim="forms.organIds"
          style="width: 100%"
          class="organSelect"
          filterable
          placeholder="请选择适用分部"
          multiple
          clearable
        >
          <el-option
            v-for="(item, index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </select-all>
      </el-form-item>
      <el-form-item
        label="考级开始日期"
        prop="startTime"
        :rules="[{ required: true, message: '请选择考级开始日期' }]"
      >
        <el-date-picker
          v-model.trim="forms.startTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择考级开始日期"
          :picker-options="startBigin()"
          :disabled="status != 'NOT_START'"
          @change="
            () => {
              forms.endTime = null;
            }
          "
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="考级结束日期"
        prop="endTime"
        :rules="[{ required: true, message: '请选择考级结束日期' }]"
      >
        <el-date-picker
          v-model.trim="forms.endTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择考级结束日期"
          :picker-options="beginDate()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="登录日期"
        prop="registrationTime"
        :rules="[{ required: true, message: '请选择登录日期' }]"
      >
        <el-date-picker
          v-model.trim="forms.registrationTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择登记日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose()">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getTimes } from "@/utils";
import { degreeSave, degreeUpdate } from "../levelManageApi";
import dayjs from "dayjs";
export default {
  name: "grade-operation",
  data() {
    return {
      dialogTitle: "",
      status: "NOT_START",
      dialogType: "create",
      operationVisible: false,
      forms: {
        name: null,
        organIds: [],
        startTime: null,
        endTime: null,
        registrationTime: null
      }
    };
  },
  mounted() {
    this.$store.dispatch("setBranchs");
  },
  methods: {
    startBigin() {
      let timer = dayjs().format("YYYY-MM-DD");
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return dayjs(timer).valueOf() >= dayjs(time).valueOf();
        }
      };
    },
    beginDate() {
      const startTime = this.forms.startTime;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (startTime) {
            return (
              new Date(startTime).getTime() >=
              time.getTime() + 24 * 60 * 60 * 1000
            );
          }
        }
      };
    },
    onClose() {
      this.$refs.elForm && this.$refs.elForm.resetFields();
      this.status = "NOT_START";
      this.operationVisible = false;
    },
    onSubmit() {
      this.$refs.elForm.validate(async res => {
        console.log(res, this.forms, "res");
        if (!res) return;

        const forms = this.forms;
        const params = {
          ...forms,
          organIds: forms.organIds ? forms.organIds.join(",") : ""
        };

        try {
          if (this.dialogType === "create") {
            await degreeSave(params);
            this.$message.success("新增成功");
          } else {
            await degreeUpdate(params);
            this.$message.success("修改成功");
          }
          this.operationVisible = false;
          this.onClose();
          this.$emit("getList");
        } catch {}
      });
    },
    openDialog(type, row) {
      console.log(type, row);
      this.dialogTitle = type === "update" ? "修改考级" : "新增考级";
      this.dialogType = type || "create";

      this.operationVisible = true;
      this.$nextTick(() => {
        if (type === "update") {
          this.status = row.status;
          this.forms = {
            id: row.id,
            name: row.name,
            organIds: row.organIds
              ? row.organIds.split(",").map(value => Number(value))
              : [],
            startTime: row.startTime,
            endTime: row.endTime,
            registrationTime: row.registrationTime
          };
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  padding: 0;
}
.el-form-title {
  margin: 0 !important;
}
.el-from-type {
  display: flex;
  ::v-deep .el-form-item__label {
    width: 100px !important;
  }
}
.btnGroup {
  .el-button + .el-button {
    margin-left: 5px;
  }
}
</style>