hospital-project/src/views/evaluate/children/change/components/newAdd.vue

<script setup lang="ts">
defineOptions({
  name: "evaluateNewAdd"
});
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { Edit } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import editMould from "./editMould.vue";
import settingIndexDrawer from "./settingIndexDrawer.vue";
import importIndex from "./importIndex.vue";
const router = useRouter();
const formRef = ref();
const active = ref(0);
const editDrawer = ref();
const editDrawerShow = ref(false);
// 指标设置
const settingIndexDrawerRef = ref();
const settingIndexDrawerShow = ref(false);
// 导入指标
const importIndexRef = ref();
const importIndexShow = ref(false);
const handleSelect = index => {
  // console.log(index);
  active.value = index;
};
const tepName = ref();
const tepNameForm = reactive({
  name: ""
});
const backChange = () => {
  router.back();
};
const tableData = ref([
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  }
]);
const save = formEl => {
  console.log(formEl);
  formEl.validate(valid => {
    console.log(valid);
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
    }
  });
  if (active.value++ > 2) {
    active.value = 0;
  }
};
const deleteRow = row => {
  console.log(row);
  ElMessageBox.confirm(
    "指标删除后不可恢复，请谨慎操作！",
    "确定删除该指标吗？",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "用户取消"
      });
    });
};
// 编辑
const editPen = row => {
  editDrawer.value.open();
};
// 删除考核维度
const deletePen = row => {
  ElMessageBox.confirm(
    "该维度删除后不可恢复，请谨慎操作！",
    "确定删除考核维度",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "用户取消"
      });
    });
};
const settingIndex = row => {
  console.log(row);
  settingIndexDrawerRef.value.open();
};
const importIndexDialog = row => {
  console.log(row);
  importIndexRef.value.open();
};
</script>

<template>
  <div class="w-[100%]">
    <!-- 导入指标 -->
    <importIndex ref="importIndexRef" v-model="importIndexShow" />
    <!-- 指标设置 -->
    <settingIndexDrawer
      ref="settingIndexDrawerRef"
      v-model:drawerValue="settingIndexDrawerShow"
    />
    <!-- 编辑模块 -->
    <editMould ref="editDrawer" v-model:drawerValue="editDrawerShow" />
    <div class="w-[100%] flex justify-evenly">
      <div class="left-box">
        <el-text class="cursor-pointer" @click="backChange"
          ><el-icon><ArrowLeft /></el-icon>返回</el-text
        >
      </div>
      <div class="center-box">
        <!-- <el-menu
          default-active="1"
          class="el-menu-demo flex justify-evenly"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">基础信息</el-menu-item>
          <el-menu-item index="2">考核指标</el-menu-item>
          <el-menu-item index="3">考核流程</el-menu-item>
        </el-menu> -->
        <el-steps
          style="max-width: 600px"
          :active="active"
          finish-status="success"
          class="m-auto"
          simple
        >
          <el-step title="基础信息" :icon="Edit" />
          <el-step title="考核指标" :icon="Edit" />
          <!-- <el-step title="考核流程" :icon="Edit" /> -->
        </el-steps>
      </div>
      <div class="right-box">
        <el-button type="primary" class="mr-2" @click="save(formRef)"
          >保存</el-button
        >
      </div>
    </div>
    <div class="mt-2">
      <div v-if="active == 0" class="w-[40%] m-auto mt-10">
        <el-form
          ref="formRef"
          :model="tepNameForm"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-form-item
            prop="name"
            label="模板名称"
            :rules="[
              {
                required: true,
                message: '请输入模板名称',
                trigger: 'blur'
              }
            ]"
          >
            <el-input v-model="tepName" placeholder="最多输入100字" />
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active == 1" class="w-[90%] m-auto mt-4">
        <div class="relative h-10">
          <el-button class="float-right" type="primary" plain
            >创建考核维度</el-button
          >
        </div>
        <el-card class="mb-3">
          <template #header>
            <div class="card-header">
              <span>工作量（30%）</span>
              <div class="float-right mr-7">
                <el-icon class="mr-3" @click="editPen"><EditPen /></el-icon>
                <el-icon @click="deletePen"
                  ><Delete class="text-red-500"
                /></el-icon>
              </div>
            </div>
          </template>
          <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="date" label="指标名称" width="150" />
            <el-table-column prop="name" label="指标说明" width="120" />
            <el-table-column prop="state" label="评价标准" width="300" />
            <el-table-column prop="state" label="数据来源" width="120" />
            <el-table-column prop="city" label="权重" width="120" />
            <el-table-column prop="name" label="分值" width="120" />
            <el-table-column prop="zip" label="目标值" width="120" />
            <el-table-column fixed="right" label="操作">
              <template #default="{ row }">
                <el-icon class="mr-3" @click="settingIndex(row)"
                  ><Setting
                /></el-icon>
                <el-icon @click="deleteRow(row)">
                  <Delete class="text-red-500" />
                </el-icon>
              </template>
            </el-table-column>
          </el-table>
          <template #footer>
            <el-button type="primary" link class="mr-4"> 添加指标 </el-button>
            <el-button type="primary" link @click="importIndexDialog">
              导入指标
            </el-button>
          </template>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left-box {
  display: flex;
  flex: 0 0 5%;
  align-items: center;
  margin: auto;
  text-align: center;
  // justify-content: center;
}

.center-box {
  flex: 0 0 70%;
}

.right-box {
  display: flex;
  flex: 0 0 5%;
  align-items: center;
  justify-content: center;
  margin: auto;
}
</style>