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";
const router = useRouter();
const active = ref(0);
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 = () => {
  if (active.value++ > 2) active.value = 0;
};
const deleteRow = row => {
  console.log(row);
};
</script>

<template>
  <div class="w-[100%]">
    <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 "
        >
          <el-step title="基础信息" />
          <el-step title="考核指标" />
          <el-step title="考核流程" />
        </el-steps> -->
      </div>
      <div class="right-box">
        <el-button type="primary" class="mr-2" @click="save">保存</el-button>
      </div>
    </div>
    <div class="mt-2">
      <div v-if="active == 1" class="w-[40%] m-auto mt-10">
        <el-form
          :model="tepNameForm"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-form-item
            label="模板名称"
            prop="name"
            :rules="[
              {
                required: true,
                message: '请输入模板名称',
                trigger: 'blur'
              }
            ]"
          >
            <el-input v-model="tepName" placeholder="最多输入100字" />
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active == 2" class="w-[90%] m-auto mt-10">
        <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"><EditPen /></el-icon>
                <el-icon><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"><Setting /></el-icon>
                <el-icon @click="deleteRow(row)"
                  ><Delete class="text-red-500"
                /></el-icon>
              </template>
            </el-table-column>
          </el-table>
        </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>