daofu-gov-pc/src/views/resumption/post_config/details.vue

<template>
  <el-dialog
    v-model="props.visible"
    :append-to-body="true"
    width="50%"
    custom-class="custom-dialog"
    @open="initDialog"
    @close="handleClose"
  >
    <template #header="{ clone }">
      <div class="custom-dialog-title">
        <span
          >{{
            addPostFactorForm.hasOwnProperty("listfactorid") && !props.readonly
              ? "修改"
              : "添加"
          }}履职清单</span
        >
        <svg-icon
          name="close"
          :cursor="true"
          class="icon-style"
          @click="onclone"
        ></svg-icon>
        <hr />
      </div>
    </template>
    <div class="custom-dialog-content">
      <div class="add-resump-record">
        <el-form
          ref="formRef"
          label-position="right"
          :disabled="props.readonly"
          label-width="120px"
          :rules="ruleForm"
          :model="addPostFactorForm"
        >
          <el-form-item label="年份" prop="sysyear">
            <el-select
              v-model="addPostFactorForm.sysyear"
              placeholder="请选择年份"
              clearable
            >
              <el-option
                v-for="(item, index) in years"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="履职类型" prop="type">
            <el-select
              v-model="addPostFactorForm.type"
              placeholder="请选择类型"
              clearable
            >
              <el-option
                v-for="(item, index) in types"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="履职内容" prop="factorcnt">
            <el-input
              placeholder="请输入履职内容"
              type="textarea"
              :rows="4"
              v-model.trim="addPostFactorForm.factorcnt"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="考核指标" prop="checkstandard">
            <el-select
              v-model="addPostFactorForm.checkstandard"
              placeholder="请选择指标"
              clearable
            >
              <el-option
                v-for="(item, index) in indexClassify"
                :key="index"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="次数" prop="frequency">
            <el-input-number
              v-model.trim="addPostFactorForm.frequency"
              :min="0"
              :step="1"
              step-strictly
            ></el-input-number>
          </el-form-item>
          <el-form-item label="红色预警(天)" prop="redalert">
            <el-input-number
              v-model.trim="addPostFactorForm.redalert"
              :min="0"
              :step="1"
              step-strictly
            ></el-input-number>
          </el-form-item>
          <el-form-item label="黄色预警(天)" prop="yellowalert">
            <el-input-number
              v-model.trim="addPostFactorForm.yellowalert"
              :min="0"
              :step="1"
              step-strictly
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer="{ clone }">
      <span class="dialog-footer" v-show="!props.readonly">
        <el-button @click="onclone">关 闭</el-button>
        <el-button
          type="primary"
          @click="handleSubmit('addPostFactorForm')"
          :loading="loading"
          >保 存</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" >
import { reactive, ref, onMounted, watch } from "vue";
import useUserStore from "@/store/modules/user";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { getYears } from "@/utils/common";

// import {
//   getFactorCheckstandard,
//   addFactor,
//   updateFactor,
// } from "@/api/performDuties";

const formRef = ref<FormInstance>();
const userStore = useUserStore();
const user = ref(JSON.parse(userStore.userInfo));
const userId = ref(user.value.userId);
const indexClassify = ref([]);
const loading = ref(false);

const ruleForm = reactive<FormRules>({
  sysyear: [{ required: true, message: "请选择年份", trigger: "blur" }],
  type: [{ required: true, message: "请选择履职类型", trigger: "blur" }],
  factorcnt: [{ required: true, message: "请输入履职内容", trigger: "blur" }],
  checkstandard: [{ required: true, message: "请选择指标", trigger: "blur" }],
  frequency: [{ required: true, message: "请输入次数", trigger: "blur" }],
  redalert: [{ required: true, message: "请输入天数", trigger: "blur" }],
  yellowalert: [{ required: true, message: "请输入天数", trigger: "blur" }],
});
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  form: Object,
  readonly: {
    type: Boolean,
    default: false,
  },
  id: String,
});

const types = ref([
  {
    label: "检查",
    value: 1,
  },
  {
    label: "会议",
    value: 2,
  },
  {
    label: "调研",
    value: 3,
  },
  {
    label: "其他",
    value: 4,
  },
]);
const years = ref(getYears(new Date().getFullYear()));
const addPostFactorForm = ref(<any>{});

const emits = defineEmits(["close", "onSubmit"]);
const handleClose = () => {
  addPostFactorForm.value = {};
  formRef.value.clearValidate();
  // emits("close");
};
const FactorCheckstandard = () => {
  getFactorCheckstandard().then((res: any) => {
    indexClassify.value = res.data;
  });
};
const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      loading.value = true;
      if (addPostFactorForm.value.listfactorid) {
        updateFactor(addPostFactorForm.value).then((res: any) => {
          loading.value = false;
          if (res.code == 1) {
            onclone();
          }
        });
      } else {
        addPostFactorForm.value.userId = userId.value;
        addFactor(addPostFactorForm.value).then((res: any) => {
          loading.value = false;
          if (res.code == 1) {
            onclone();
          }
        });
      }
    }
    return false;
  });
};
//关闭弹窗
const onclone = () => {
  emits("close");
};
onMounted(() => {
  FactorCheckstandard();
});
watch(
  () => props.form,
  (val) => {
    console.log(333, props);
    if (val) {
      if (!props.visible) return;
      addPostFactorForm.value = val;
    }
  }
);
</script>

<style lang="scss" scoped>
</style>