wsxy-enrollment-web/src/views/unifiedRecruitment/component/addProgress.vue

<template>
  <div>
    <xy-dialog
      ref="dialog"
      :is-show.sync="isShow"
      type="form"
      :title="type === 'add' ? '新增统招进度' : '编辑统招进度'"
      :form="form"
      :rules="rules"
      @submit="submit"
    >
      <template v-slot:year>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            年份 ：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker
              v-model="form.year"
              type="year"
              placeholder="请选择年份"
              style="width: 300px"
              value-format="yyyy"
            ></el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:province_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            省份 ：
          </div>
          <div class="xy-table-item-content">
            <el-select
              v-model="form.province_id"
              clearable
              placeholder="请选择省份 "
              style="width: 300px"
            >
              <el-option
                v-for="item in province_ids"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:status_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            进度 ：
          </div>
          <div class="xy-table-item-content">
            <el-select
              v-model="form.status_id"
              clearable
              placeholder="请选择进度 "
              style="width: 300px"
            >
              <el-option
                v-for="item in getConst('progressStatus', 'array')"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:start_date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">开始时间 ：</div>
          <div class="xy-table-item-content">
            <el-date-picker
              v-model="form.start_date"
              placeholder="请选择开始时间"
              style="width: 300px"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:end_date>
        <div class="xy-table-item">
          <div class="xy-table-item-label">结束时间 ：</div>
          <div class="xy-table-item-content">
            <el-date-picker
              v-model="form.end_date"
              placeholder="请选择结束时间"
              style="width: 300px"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">备注 ：</div>
          <div class="xy-table-item-content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              v-model="form.remark"
              clearable
              placeholder="请输入备注 "
              style="width: 300px"
            />
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { show, save } from "@/api/unifiedRecruitment/progress";
import { getConst } from "@/const";
export default {
  props: {
    province_ids: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isShow: false,
      id: "",
      type: "",

      form: {
        year: "",
        province_id: "",
        status_id: "",
        start_date: "",
        end_date: "",
        remark: "",
      },
      rules: {
        year: [
          {
            required: true,
            message: "请填写年份",
          },
        ],
        province_id: [
          {
            required: true,
            message: "请填写省份",
          },
        ],
        status_id: [
          {
            required: true,
            message: "请填写进度",
          },
        ],
      },
    };
  },
  methods: {
    getConst,

    async getDetail() {
      const res = await show({
        id: this.id,
      });
      this.$integrateData(this.form, res);
    },

    submit() {
      if (this.type === "add") {
        if (this.form.hasOwnProperty("id")) {
          delete this.form.id;
        }
      }
      if (this.type === "editor") {
        Object.defineProperty(this.form, "id", {
          value: this.id,
          enumerable: true,
          configurable: true,
          writable: true,
        });
      }
      save(this.form).then((res) => {
        this.$successMessage(this.type, "");
        this.isShow = false;
        this.$emit("refresh");
      });
    },
  },
  watch: {
    isShow(val) {
      if (val) {
        if (this.type === "editor") {
          this.getDetail();
        }
      } else {
        this.id = "";
        this.type = "";
        this.$refs["dialog"].reset();
        delete this.form.id;
      }
    },
    "form.year"(val) {
      this.form.year = "" + val;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  text-align: left;
}
</style>