hospital-project/src/views/evaluate/children/change/manage/addExam.vue

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import ElPicker from "@/components/ELPicker/index.vue";
const dialogVisibleAdd = ref(false);
const title = ref<String>("发起考核");
// 季度 半年
const ElPickerRef = ref();
const form = reactive({
  id: "",
  params: {
    id: "",
    tpName: "",
    remark: "",
    isDelete: "",
    createUser: "",
    createTime: "",
    updateUser: "",
    updateTime: "",
    flowId: ""
  },
  tpName: "",
  remark: "",
  isDelete: "",
  form1: {
    left: [{ value: "1" }],
    right: [{ value: "1" }]
  }
});
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" }
  ]
});
const formLeftRules = reactive({
  left: [{ required: true, message: "请选择考核指标", trigger: "blur" }],
  value: [{ required: true, message: "请选择被考核对象", trigger: "blur" }]
});
const formRightRules = reactive({
  left: [{ required: true, message: "请选择考核指标", trigger: "blur" }],
  right: [{ required: true, message: "请选择考核模板", trigger: "blur" }]
});
const handleClose = () => {
  ElMessageBox.confirm("确认关闭弹窗吗？")
    .then(() => {
      dialogVisibleAdd.value = !dialogVisibleAdd.value;
      ElMessage({
        message: "已关闭"
      });
    })
    .catch(() => {
      // catch error
    });
};
// 添加部门保存
const saveDepartment = () => {
  dialogVisibleAdd.value = false;
  ElMessage({
    message: "添加成功",
    type: "success"
  });
};
const open = (item: any, index: string) => {
  if (item) {
    title.value = index;
    console.log(item);
  }
  dialogVisibleAdd.value = true;
};
const addNew = () => {
  form.form1.right.push({ value: "" });
  form.form1.left.push({ value: "" });
};
const deleteItem = (index: any) => {
  form.form1.left.splice(index, 1);
  form.form1.right.splice(index, 1);
};
// 单选
const timeType = ref<any>("month");
const format = ref<any>("YYYY-MM");
const handleRegionChange = (value: any) => {
  console.log(value);
  form.date1 = "";
  timeType.value = value;
  switch (value) {
    case "year":
      format.value = "YYYY";
      break;
    case "month":
      format.value = "YYYY-MM";
      break;
    case "date":
      format.value = "YYYY-MM-DD";
  }
  if (value === "quarter" || value === "halfYear") {
    nextTick(() => {
      ElPickerRef.value.open(value);
    });
    // console.log(ElPickerRef.value.open(value));
  }
};
const monthTime = ref("");
defineExpose({
  open
});
</script>

<template>
  <div>
    <el-dialog
      v-model="dialogVisibleAdd"
      :title="title"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 600px"
        :rules="rules"
        label-position="top"
      >
        <el-form-item label="考核名称" prop="name">
          <el-input placeholder="请输入" />
        </el-form-item>
        <el-form-item label="考核周期">
          <el-radio-group v-model="form.region" @change="handleRegionChange">
            <el-radio value="month" size="large">月度</el-radio>
            <el-radio value="quarter" size="large">季度</el-radio>
            <el-radio value="halfYear" size="large">半年</el-radio>
            <el-radio value="year" size="large">年度</el-radio>
            <el-radio value="date" size="large">日期</el-radio>
          </el-radio-group>
          <el-date-picker
            v-if="timeType === 'date'"
            v-model="form.date1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <ElPicker
            v-else-if="timeType === 'quarter' || timeType === 'halfYear'"
            ref="ElPickerRef"
            v-model="monthTime"
          />
          <el-date-picker
            v-else
            v-model="form.date1"
            :type="timeType"
            placeholder="请选择日期"
            :format="format"
          />
        </el-form-item>
        <el-form-item label="被考核类型">
          <el-select
            v-model="form.region"
            placeholder="please select your zone"
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="被考核对象与模板设置"
          prop="form1"
          label-position="top"
        >
          <div class="w-full flex">
            <div class="w-1/3">
              <el-form
                label-position="top"
                :model="form.form1"
                :rules="formLeftRules"
              >
                <el-form-item label="被考核对象" prop="left">
                  <div
                    v-for="(item, index) in form.form1.left"
                    :key="index"
                    class="w-full mt-1"
                  >
                    <el-select
                      v-model="item.value"
                      placeholder="please select your zone"
                      style="width: 180px"
                    >
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div class="w-1/2 ml-7">
              <el-form
                label-position="top"
                :model="form.form1"
                :rules="formRightRules"
              >
                <el-form-item label="考核模板" prop="right">
                  <div
                    v-for="(item, index) in form.form1.right"
                    :key="index"
                    class="w-full flex mt-1"
                  >
                    <el-select
                      v-model="item.value"
                      placeholder="please select your zone"
                      style="width: 180px"
                    >
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                    <div
                      v-if="index !== 0"
                      class="ml-7 cursor-pointer w-1"
                      @click="deleteItem(index)"
                    >
                      <el-text type="danger">
                        <el-icon><Delete /></el-icon>
                      </el-text>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>
            <div class="cursor-pointer w-14" @click="addNew">
              <el-text type="primary">
                <el-icon><Plus /></el-icon>添加
              </el-text>
            </div>
          </template>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>