|
@@ -5,7 +5,11 @@ defineOptions({
|
|
|
import { ref, reactive } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
const router = useRouter();
|
|
|
-const handleSelect = () => {};
|
|
|
+const active = ref(0);
|
|
|
+const handleSelect = index => {
|
|
|
+ // console.log(index);
|
|
|
+ active.value = index;
|
|
|
+};
|
|
|
const tepName = ref();
|
|
|
const tepNameForm = reactive({
|
|
|
name: "张三"
|
|
@@ -13,6 +17,70 @@ const tepNameForm = reactive({
|
|
|
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>
|
|
@@ -34,13 +102,23 @@ const backChange = () => {
|
|
|
<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">保存</el-button>
|
|
|
+ <el-button type="primary" class="mr-2" @click="save">保存</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mt-2">
|
|
|
- <div class="w-[40%] m-auto mt-10">
|
|
|
+ <div v-if="active == 1" class="w-[40%] m-auto mt-10">
|
|
|
<el-form
|
|
|
:model="tepNameForm"
|
|
|
label-width="auto"
|
|
@@ -61,6 +139,41 @@ const backChange = () => {
|
|
|
</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>
|